Initial commit

assets/sass/_common-classes.sass

@@ -0,0 +1,512 @@
+/*******************************************************/
+/******************  ## Common Classes *****************/
+/*******************************************************/
+.page-wrapper
+    position: relative
+    z-index: 9
+    width: 100%
+    margin: 0 auto
+    overflow: hidden
+    min-width: 300px
+    
+.container
+    +res-ab(xl)
+        max-width: $container
+        padding-left: $gutter/2
+        padding-right: $gutter/2
+        &.container-1400
+            max-width: 1430px
+        &.container-1500
+            max-width: 1530px
+        
+.container-fluid
+    +res-ab(sm)
+        +gapLR(padding, 25px)
+    +res-ab(lb)
+        +gapLR(padding, 70px)
+      
+.row
+    --bs-gutter-x: 30px
+    
+.no-gap
+    --bs-gutter-x: 0
+    
+.col-small
+    +res-bl(xs)
+        width: 100%
+        
+
+    
+@for $i from 1 through 2
+    .gap-#{10 * $i}
+        --bs-gutter-x: #{10px * $i}
+    
+@for $i from 3 through 15
+    .gap-#{10 * $i}
+        +res-ab(xxl)
+            --bs-gutter-x: #{10px * $i}
+        
+.row-cols-xl-7
+    > *
+        +res-ab(xl)
+            width: 14.2857%
+            flex: 0 0 auto
+    
+/** Section Title style **/
+.section-title
+    margin-top: -10px
+    position: relative
+    h2
+        margin-bottom: 15px
+        letter-spacing: -1px
+        text-transform: capitalize
+        +res-bl(sm)
+            font-size: 35px
+        +res-bl(xs)
+            font-size: 30px
+        span
+            color: white
+            border-radius: 25px
+            display: inline-block
+            padding: 0 10px 0 15px
+            background: $secondary-color
+    p
+        +res-ab(xs)
+            font-size: 18px
+        span
+            color: white
+            font-weight: 500
+            padding-left: 8px
+            padding-right: 5px
+            border-radius: 12px
+            background: $secondary-color
+            &.bgc-primary
+                background: $primary-color
+            
+.subtitle
+    font-weight: 600
+    padding: 3px 20px
+    border: 1px solid
+    border-radius: 30px
+    background: #F0F7ED
+    color: $primary-color
+    display: inline-block
+    +res-ab(sm)
+        font-size: 18px
+            
+/* Divider */
+.divider
+    z-index: 1
+    text-align: center
+    position: relative
+    &:before
+        z-index: -1
+        content: ''
+        +poLT(0, 50%)
+        +size(100%, 1px)
+        background: $border-color
+    > span
+        line-height: 1.4
+        background: white
+        border-radius: 20px
+        display: inline-block
+        padding: 4px 20px 7px
+        border: 1px solid $border-color
+        box-shadow: 0px 10px 60px rgba(151, 151, 151, 0.25)
+        > span
+            color: white
+            font-size: 0.88em
+            border-radius: 12px
+            padding: 1px 10px 2px
+            background: $secondary-color
+            
+    &.style-two
+        > span
+            color: white
+            border: none
+            font-size: 14px
+            padding: 2px 10px 2px
+            background: $primary-color
+            span
+                padding: 0
+                font-size: 1em
+                background: transparent
+   
+/** Button style **/
+.theme-btn,
+a.theme-btn
+    color: white
+    cursor: pointer
+    transition: 0.4s
+    font-weight: 600
+    overflow: hidden
+    text-align: center
+    padding: 11px 36px
+    border-radius: 30px
+    position: relative
+    align-items: center
+    display: inline-flex
+    justify-content: center
+    text-transform: capitalize
+    background: $primary-color
+    +res-bl(xs)
+        padding: 8px 28px
+    span
+        transition: 0.4s
+        &:before
+            opacity: 0
+            transition: 0.4s
+            position: absolute
+            content: attr(data-hover)
+            transform: translateY(150%)
+    i
+        transition: 0.4s
+        margin-left: 10px
+    &.style-two
+        i
+            transform: rotate(-45deg)
+    &:hover
+        span
+            transform: translateY(-150%)
+            &:before
+                opacity: 1
+    &.bgc-secondary
+        background: $secondary-color
+    &.style-three
+        border: 1px solid
+        &:not(:hover)
+            color: $heading-color
+            background: transparent
+        &:hover
+            border-color: $primary-color
+    &.style-four
+        background: transparent
+        border: 1px solid white
+        &:hover
+            background: $primary-color
+            border-color: $primary-color
+
+/* Read More */
+.read-more
+    align-items: center
+    display: inline-flex
+    text-transform: capitalize
+    i
+        color: white
+        float: right
+        transition: 0.5s
+        margin-top: -2px
+        margin-left: 5px
+        font-size: 0.9em
+        +circle($primary-color, 20px)
+    &:hover
+        text-decoration: underline
+        i
+            background: $secondary-color
+      
+/* List style One */
+.list-style-one
+    li
+        display: flex
+        align-items: center
+        margin-bottom: 12px
+        i
+            font-size: 18px
+            margin-right: 15px
+            color: $secondary-color
+            
+/* List Style Two */
+.list-style-two
+    li
+        display: flex
+        font-weight: 500
+        margin-bottom: 16px
+        align-items: center
+        +res-ab(xs)
+            font-size: 18px
+        &:before
+            flex: none
+            color: white
+            content: "\f00c"
+            font-size: 12px
+            margin-right: 10px
+            +circle($secondary-color, 24px)
+            font-family: "Font Awesome 5 Pro"
+            
+/* List Style Three */
+.list-style-three
+    li
+        display: flex
+        margin-bottom: 16px
+        align-items: center
+        &:before
+            content: "\f105"
+            margin-right: 8px
+            margin-bottom: -2px
+            font-family: "Font Awesome 5 Pro"
+            
+/* List Style Four */
+.list-style-four
+    li
+        display: flex
+        margin-bottom: 18px
+        +res-ab(xs)
+            font-size: 18px
+        &:before
+            content: "\f00c"
+            margin-right: 12px
+            color: $primary-color
+            font-family: "Font Awesome 5 Pro"
+        
+/** Social Link One **/
+.social-style-one
+    flex-wrap: wrap
+    display: inline-flex
+    +gapLR(margin, -5px)
+    a
+        color: white
+        +gapLR(margin, 5px)
+        +circle(rgba(255, 255, 255, 0.1), 45px)
+        &:hover
+            background: $primary-color
+        
+/** Social Link Two **/
+.social-style-two
+    flex-wrap: wrap
+    display: inline-flex
+    +gapLR(margin, -5px)
+    a
+        +gapLR(margin, 5px)
+        color: $secondary-color
+        +circle(rgba($secondary-rgb, 0.15), 35px)
+        &:hover
+            color: white
+            background: $secondary-color
+        
+            
+/* Tab Style One */
+.tab-style-one
+    border-bottom: 1px solid $border-color
+    li
+        margin-right: 30px
+        a
+            @extend %h4
+            margin-bottom: -1px
+            padding: 0 20px 16px
+            display: inline-block
+            border-bottom: 2px solid transparent
+            +res-bl(md)
+                padding-bottom: 10px
+                font-size: 20px !important
+            &:first-child
+                padding-left: 0
+            &.active
+                color: $primary-color
+                border-bottom-color: $primary-color
+                +res-bl(sm)
+                    border-bottom-color: transparent
+        
+/*** Preloader style ** */
+.preloader
+    position: fixed
+    left: 0
+    top: 0
+    width: 100%
+    height: 100%
+    z-index: 9999999
+    +flexcenter(center)
+    background-color: white
+    background-repeat: no-repeat
+    background-position: center center
+    .custom-loader
+        width: 75px
+        height: 75px
+        border-radius: 50%
+        background-color: transparent
+        border: 2px solid $heading-color
+        border-top: 2px solid $primary-color
+        border-bottom: 2px solid $primary-color
+        -webkit-animation: 1s preloader linear infinite
+        animation: 1s preloader linear infinite
+
+/* Pagination */    
+.pagination
+    align-items: center
+    +gapLR(margin, -5px)
+    li
+        margin: 10px 5px 0
+        a,
+        .page-link
+            padding: 0
+            font-size: 20px
+            box-shadow: none
+            font-weight: 600
+            color: $base-color
+            +circle(transparent, 44px)
+            border: 1px solid $border-color
+            line-height: 42px
+        &.disabled,
+        &:last-child
+            .page-link
+                border-radius: 50%
+        &.active,
+        &:hover:not(.disabled)
+            .page-link
+                color: white
+                background: $secondary-color
+                border-color: $secondary-color
+        
+/* Rating */
+.ratting
+    line-height: 1
+    align-items: center
+    display: inline-flex
+    i
+        margin: 3px
+        color: $secondary-color
+        font-size: 13px
+    span
+        margin-left: 7px
+    &.style-two
+        i
+            margin: 6px
+            font-size: 18px
+            color: $primary-color
+        
+    
+/* Slick Arrows */
+.slick-arrow
+    font-size: 20px
+    transition: 0.5s
+    padding-top: 2px
+    +circle(white, 65px)
+    color: $heading-color
+    box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.15)
+    &:focus,
+    &:hover
+        background: $primary-color
+                
+/*** Slick Dots ***/
+.slick-dots
+    flex-wrap: wrap
+    +flexcenter(center)
+    li
+        +size(7px)
+        margin: 0 7px
+        cursor: pointer
+        transition: 0.5s
+        border-radius: 50%
+        position: relative
+        background: $primary-color
+        &:before
+            +size(0)
+            content: ''
+            +absmiddle()
+            transition: 0.5s
+            border-radius: 50%
+            border: 1px solid $primary-color
+        button
+            opacity: 0
+        &.slick-active
+            +gapLR(margin, 15px)
+            &:before
+                +size(22px)
+
+/*** Scroll Top style ***/
+.scroll-top
+    +size(56px)
+    z-index: 99
+    color: white
+    font-size: 24px
+    cursor: pointer
+    text-align: center
+    border-radius: 50%
+    background-color: transparent
+    background-repeat: no-repeat
+    background-size: cover
+    animation: pulse 2s infinite
+  
+/* Text White */
+.text-white
+    *, a,
+    .read-more,
+    .counter-text-wrap .count-text
+        color: white
+    &.section-title p span
+        background: $primary-color
+    .subtitle
+        background: rgba(255, 255, 255, 0.05)
+        border-color: rgba(255, 255, 255, 0.1)
+        
+/*Project Filter*/
+.filter-btns-one
+    display: flex
+    flex-wrap: wrap
+    +gapLR(margin, -5px)
+    li
+        cursor: pointer
+        transition: 0.5s
+        font-weight: 500
+        padding: 5px 20px
+        margin: 0 5px 10px
+        color: $heading-color
+        border: 1px solid $border-color
+        +res-ab(ms)
+            font-size: 18px
+        +res-bl(xs)
+            +gapLR(padding, 15px)
+        &.active
+            background: $secondary-color
+            border-color: $secondary-color
+            
+/* Before After None */
+.before-after-none
+    &:after,
+    &:before
+        display: none
+
+/* Position */
+.rel
+    position: relative
+    
+@for $i from 0 through 5
+    .z-#{0 + $i}
+        z-index: 0 + $i
+    
+.overlay
+    +overlay(#1D231F, 0.95)
+    
+/* Backgruond Size */
+.bgs-cover
+    background-size: cover
+    background-position: center
+.bgp-top
+    background-repeat: no-repeat
+    background-position: top center
+.bgp-bottom
+    background-repeat: no-repeat
+    background-position: bottom center
+    
+/* Color + Background */
+.bg-black
+    background-color: black
+.bgc-black
+    background-color: $heading-color
+.bgc-lighter
+    background-color: $lighter-color
+.bgc-primary
+    background-color: $primary-color
+.bgc-secondary
+    background-color: $secondary-color
+    
+/* Border Radius */
+@for $i from 1 through 6
+    .br-#{5 * $i}
+        border-radius: 5px * $i
+    
+    
+/* Color Two */
+.color-two
+    --primary-color: #E65A11
+    .theme-btn
+        color: white

assets/sass/_custom-animation.sass

@@ -0,0 +1,263 @@
+/*******************************************************/
+/***************** ## Custom Animation ****************/
+/*******************************************************/
+/* Animation Delay */
+@for $i from 1 through 2
+     .delay-#{1 * $i}-0s
+        animation-delay: #{$i}s
+   
+@for $i from 1 through 9
+    .delay-0-#{1 * $i}s
+        animation-delay: #{0 + .1 * $i}s
+
+@for $i from 1 through 9
+    .delay-1-#{1 * $i}s
+        animation-delay: #{1 + .1 * $i}s
+
+
+@keyframes circle_animation
+    from
+        transform: rotate(0deg)
+    to
+        transform: rotate(360deg)
+        
+@keyframes circle_animation_invers
+    from
+        transform: rotate(360deg)
+    to
+        transform: rotate(0deg)
+
+
+@keyframes toggler
+  0%,
+  10%
+    background-position: 0 0, 0 calc(100%/3)
+  50%
+    background-position: 0 0, calc(100%/3) calc(100%/3)
+  90%,
+  100%
+    background-position: 0 0, calc(100%/3) 0
+
+
+@keyframes pulse
+  to
+    box-shadow: 0 0 0 35px rgba(255, 255, 255, 0)
+
+/* Menu Sticky */
+@-webkit-keyframes sticky
+    0%
+        top: -100px
+    100%
+        top: 0
+
+@keyframes sticky
+    0%
+        top: -100px
+    100%
+        top: 0
+        
+/* Rotated Circle */
+@keyframes rotated_circle
+    0%
+        transform: rotate(0deg)
+    100%
+        transform: rotate(-360deg)
+    
+/* Rotated Circle reverse */
+@keyframes rotated_circle_reverse
+    0%
+        transform: rotate(-360deg)
+    100%
+        transform: rotate(0deg)
+             
+/* Rotated Man */
+@keyframes semi_rotated
+    0%,
+    100%
+        transform: rotate(8deg)
+    50%
+        transform: rotate(-8deg)
+    
+/* BG Shape Rotated */
+@keyframes semi_rotated_two
+    0%,
+    100%
+        transform: rotate(-30deg)
+    50%
+        transform: rotate(30deg)
+    
+@keyframes move_arround
+    0%
+        top: 20px
+        left: 20px
+    25%
+        top: 20px
+        left: -20px
+    50%
+        top: -20px
+        left: -20px
+    75%
+        top: -20px
+        left: 20px
+    100%
+        top: 20px
+        left: 20px
+             
+/* Hero Circle */
+@keyframes upDownLeft
+    0%,
+    100%
+        transform: translate(0px, 0px)
+    25%,
+    75%
+        transform: translate(0px, 50px)
+    50%
+        transform: translate(-50px, 50px)
+    
+@keyframes shapeAnimationOne
+  0%
+    transform: translate(0px, 0px) rotate(0deg)
+
+  25%
+    transform: translate(0px, 150px) rotate(90deg)
+
+  50%
+    transform: translate(150px, 150px) rotate(180deg)
+
+  75%
+    transform: translate(150px, 0px) rotate(270deg)
+
+  100%
+    transform: translate(0px, 0px) rotate(360deg)
+
+@keyframes shapeAnimationTwo
+  0%
+    transform: translate(0px, 0px) rotate(0deg)
+
+  25%
+    transform: translate(-150px, -0px) rotate(270deg)
+
+  50%
+    transform: translate(-150px, 150px) rotate(180deg)
+
+  75%
+    transform: translate(-0px, 150px) rotate(90deg)
+
+  100%
+    transform: translate(0px, 0px) rotate(360deg)
+
+@keyframes shapeAnimationThree
+  0%
+    transform: translate(0px, 0px) rotate(0deg)
+
+  25%
+    transform: translate(50px, 150px) rotate(90deg)
+
+  50%
+    transform: translate(150px, 150px) rotate(180deg)
+
+  75%
+    transform: translate(150px, 50px) rotate(270deg)
+
+  100%
+    transform: translate(0px, 0px) rotate(360deg)
+
+@keyframes shapeAnimationFour
+  0%
+    transform: translate(0px, 0px) rotate(0deg)
+
+  25%
+    transform: translate((-150px) -50px) rotate(90deg)
+
+  50%
+    transform: translate(-150px, -150px) rotate(180deg)
+
+  75%
+    transform: translate(-50px, -150px) rotate(270deg)
+
+  100%
+    transform: translate(0px, 0px) rotate(360deg)
+
+@keyframes shapeAnimationFive
+  0%
+    transform: translate(0px, 0px) rotate(0deg)
+
+  25%
+    transform: translate((-100px) -100px) rotate(90deg)
+
+  50%
+    transform: translate(100px, 50px) rotate(180deg)
+
+  75%
+    transform: translate(-100px, 150px) rotate(270deg)
+
+  100%
+    transform: translate(0px, 0px) rotate(360deg)
+
+@keyframes down-up-one
+  0%
+    transform: rotateX(0deg) translateY(0px)
+
+  50%
+    transform: rotateX(0deg) translateY(25px)
+
+  100%
+    transform: rotateX(0deg) translateY(0px)
+
+@keyframes down-up-two
+  0%
+    transform: rotateX(0deg) translate(0px)
+
+  50%
+    transform: rotateX(0deg) translate(0, -25px)
+
+  100%
+    transform: rotateX(0deg) translate(0px)
+
+@keyframes leftRightOne
+    0%,
+    100%
+        transform: translateX(0)
+    50%
+        transform: translateX(50px)
+
+@keyframes leftRightTwo
+    0%,
+    100%
+        transform: translateX(0)
+    50%
+        transform: translateX(-50px)
+
+@keyframes zoomInOut
+    0%,
+    100%
+        transform: scale(1)
+    50%
+        transform: scale(0.5)
+    
+/* Preloader */
+@keyframes preloader
+  from
+    -webkit-transform: rotate(0deg)
+    transform: rotate(0deg)
+    
+  to
+    -webkit-transform: rotate(360deg)
+    transform: rotate(360deg)
+    
+/* Headline */
+@keyframes marquee
+    100%
+        transform: translate(-100%, 0)
+    
+@keyframes marquee_right
+    from
+        transform: translate3d(-100%, 0, 0)
+    to
+        transform: translate3d(0, 0, 0)
+
+@keyframes marquee_left
+    from
+        transform: translate3d(0, 0, 0)
+    to
+        transform: translate3d(-100%, 0, 0)

assets/sass/_default.sass

@@ -0,0 +1,148 @@
+/*******************************************************/
+/******************* ## Default Style ******************/
+/*******************************************************/
+*
+    margin: 0
+    padding: 0
+    border: none
+    outline: none
+    box-shadow: none
+
+body
+    color: $base-color
+    background: white
+    font-weight: 400
+    line-height: 28px
+    font-size: $base-size
+    font-family: $base-font
+    @each $font, $value in $fonts
+        --#{$font}: #{$value}
+    @each $color, $value in $colors
+        --#{$color}: #{$value}
+
+a
+    color: $base-color
+    cursor: pointer
+    outline: none
+    transition: 0.5s
+    text-decoration: none
+    &:hover, &:focus, &:visited
+        text-decoration: none
+        outline: none
+    &:hover
+        color: $heading-color
+
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
+    color: $heading-color
+
+.text-white
+    h1, h1 a,
+    h2, h2 a,
+    h3, h3 a,
+    h4, h4 a,
+    h5, h5 a,
+    h6, h6 a,
+    .h1, .h1 a,
+    .h2, .h2 a,
+    .h3, .h3 a,
+    .h4, .h4 a,
+    .h5, .h5 a,
+    .h6, .h6 a
+        color: white
+
+h1, .h1
+    @extend %h1
+
+h2, .h2
+    @extend %h2
+
+h3, .h3
+    @extend %h3
+
+h4, .h4
+    @extend %h4
+
+h5, .h5
+    @extend %h5
+
+h6, .h6
+    @extend %h6
+
+ul, li
+    list-style: none
+    padding: 0
+    margin: 0
+
+img
+    max-width: 100%
+    display: inline-block
+
+hr
+    opacity: 1
+    background: $border-color
+    
+mark
+    color: $primary-color
+    background: transparent
+    text-decoration: underline
+ 
+header, section, footer
+    +clearfix
+
+/*======= Input Styles =======*/
+input,
+select,
+textarea,
+.nice-select,
+.form-control
+    width: 100%
+    height: auto
+    font-weight: 400
+    border-radius: 0
+    font-size: 16px
+    padding: 15px 30px
+    background-color: #fff
+    border: 1px solid white
+    font-family: $heading-font
+    transition: 0.3s
+    &:focus
+        outline: none
+        box-shadow: none
+        border-color: $primary-color
+        &::placeholder
+            color: $heading-color
+    
+textarea
+	display: inherit
+	padding-top: 20px
+
+label
+    cursor: pointer
+    font-weight: 400
+    margin-bottom: 5px
+    color: $base-color
+
+.form-group
+    position: relative
+    margin-bottom: 20px
+    
+input[type=search]::-ms-clear
+	display: none
+	width: 0
+	height: 0
+
+input[type=search]::-ms-reveal
+	display: none
+	width: 0
+	height: 0
+
+input[type=search]::-webkit-search-decoration,
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-results-button,
+input[type=search]::-webkit-search-results-decoration
+	display: none
+
+input[type=checkbox], input[type=radio]
+	height: auto
+	width: auto
+    

assets/sass/_extend.sass

@@ -0,0 +1,53 @@
+/*******************************************************/
+/******************* ## Repeat Style ******************/
+/*******************************************************/
+// Global Extend/Inheritance 
+
+// Heading
+.heading,
+%heading
+    font-weight: 500
+    line-height: 1.23
+    color: $heading-color
+    font-family: $heading-font
+    
+%h1
+    font-weight: 600
+    @extend %heading
+    line-height: 1.2
+    font-size: $h1-size
+
+%h2
+    @extend %heading
+    font-size: $h2-size
+
+%h3
+    @extend %heading
+    font-size: $h3-size
+
+%h4
+    @extend %heading
+    font-size: $h4-size
+
+%h5
+    @extend %heading
+    line-height: 1.44
+    font-size: $h5-size
+
+%h6
+    @extend %heading
+    line-height: 1.5
+    font-size: $h6-size
+
+
+// UnderLine
+%underline
+    display: inline
+    position: relative
+    background-repeat: no-repeat
+    background-size: 0% 1.5px, 0 1.5px
+    background-position: 100% 100%, 0 85%
+    transition: background-size 0.4s linear
+    background-image: linear-gradient($heading-color, $heading-color), linear-gradient($heading-color, $heading-color)
+    &:hover
+        background-size: 0 1.5px, 100% 1.5px

assets/sass/_mixins.sass

@@ -0,0 +1,165 @@
+// GLOBAL MIXINS
+=overlay($bg-colour, $opacity)
+    z-index: 1
+    position: relative
+    &::before
+        position: absolute
+        content: ""
+        width: 100%
+        height: 100%
+        z-index: -1
+        top: 0
+        left: 0
+        opacity: $opacity
+        background-color: $bg-colour
+
+
+// Column Gap
+=colgap($gap)
+    margin-left: -$gap / 2
+    margin-right: -$gap / 2
+    & > div
+        padding-left: $gap / 2
+        padding-right: $gap / 2
+
+    
+// Make Own Container
+=container($width)
+    max-width: $width
+    margin-left: auto
+    margin-right: auto
+
+
+// Flex Center 
+=flexcenter($justify)
+    display: flex
+    align-items: center
+    justify-content: $justify
+
+// Absolute Middle
+=absmiddle()
+    position: absolute
+    left: 50%
+    top: 50%
+    transform: translate(-50%, -50%)
+    
+// Positioning
+=poLT($left, $top: $left)
+    position: absolute
+    left: $left
+    top: $top
+=poLB($left, $bottom: $left)
+    position: absolute
+    left: $left
+    bottom: $bottom
+=poRT($right, $top: $right)
+    position: absolute
+    right: $right
+    top: $top
+=poRB($right, $bottom: $right)
+    position: absolute
+    right: $right
+    bottom: $bottom
+    
+// Mixing for Size 
+=size($width, $height: $width)
+    width: $width
+    height: $height
+
+
+// Mixing for Box 
+=box($bg, $width, $height: $width)
+    width: $width
+    height: $height
+    background: $bg
+
+// Mixing for Circle 
+=circle($bg, $size)
+    width: $size
+    height: $size
+    background: $bg
+    line-height: $size
+    border-radius: 50%
+    text-align: center
+
+// Mixing for color & background color % border color
+=color($color, $bg, $bdr-color: $color)
+    color: $color
+    background: $bg
+    border-color: $bdr-color
+
+// Mixing for clearfix
+=clearfix()
+    &:after
+        display: block
+        clear: both
+        content: ""
+    
+// Gap Left and Right
+=gapLR($property, $value)
+    #{$property}-left: $value
+    #{$property}-right: $value
+      
+// Gap Top and Bottom
+=gapTB($property, $value)
+    #{$property}-top: $value
+    #{$property}-bottom: $value
+ 
+
+// Respond above.
+@mixin res-ab($breakpoint)
+    // If the breakpoint exists in the map.
+    @if map-has-key($breakpoints, $breakpoint)
+        // Get the breakpoint value.
+        $breakpoint-value: map-get($breakpoints, $breakpoint)
+
+        // Write the media query.
+        @media only screen and (min-width: $breakpoint-value)
+            @content
+        
+        // If the breakpoint doesn't exist in the map.
+    @else
+        // Log a warning.
+        @warn 'Invalid breakpoint: #{$breakpoint}.'
+
+    
+// Respond Below
+@mixin res-bl($breakpoint)
+    // If the breakpoint exists in the map.
+    @if map-has-key($breakpoints, $breakpoint)
+        // Get the breakpoint value.
+        $breakpoint-value: map-get($breakpoints, $breakpoint)
+
+        // Write the media query.
+        @media only screen and (max-width: ($breakpoint-value - 1))
+            @content
+
+        // If the breakpoint doesn't exist in the map.
+    @else
+        // Log a warning.
+        @warn 'Invalid breakpoint: #{$breakpoint}.'
+
+// Respond Between
+@mixin res-bt($lower, $upper)
+    // If both the lower and upper breakpoints exist in the map.
+    @if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper)
+        // Get the lower and upper breakpoints.
+        $lower-breakpoint: map-get($breakpoints, $lower)
+        $upper-breakpoint: map-get($breakpoints, $upper)
+
+        // Write the media query.
+        @media only screen and (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1))
+            @content
+        
+        // If one or both of the breakpoints don't exist.
+    @else
+        // If lower breakpoint is invalid.
+        @if (map-has-key($breakpoints, $lower) ==false) 
+            // Log a warning.
+            @warn 'Your lower breakpoint was invalid: #{$lower}.'
+
+        // If upper breakpoint is invalid.
+        @if (map-has-key($breakpoints, $upper) ==false) 
+            // Log a warning.
+            @warn 'Your upper breakpoint was invalid: #{$upper}.'
+        

assets/sass/_spacing.sass

@@ -0,0 +1,117 @@
+/*******************************************************/
+/************** ## Padding Margin Spacing *************/
+/*******************************************************/
+/* Padding Around */
+@for $i from 1 through 1
+    .p-#{5 * $i}
+        padding: 5px * $i !important
+@for $i from 2 through 50
+    .p-#{5 * $i}
+        padding: 5px * $i
+
+/* Padding Top */
+@for $i from 1 through 1
+    .pt-#{5 * $i},
+    .py-#{5 * $i}
+        padding-top: 5px * $i !important
+@for $i from 2 through 50
+    .pt-#{5 * $i},
+    .py-#{5 * $i}
+        padding-top: 5px * $i
+
+/* Padding Bottom */
+@for $i from 1 through 1
+    .pb-#{5 * $i},
+    .py-#{5 * $i}
+        padding-bottom: 5px * $i !important
+@for $i from 2 through 50
+    .pb-#{5 * $i},
+    .py-#{5 * $i}
+        padding-bottom: 5px * $i
+
+/* Margin Around */
+@for $i from 1 through 1
+    .m-#{5 * $i}
+        margin: 5px * $i !important
+@for $i from 2 through 50
+    .m-#{5 * $i}
+        margin: 5px * $i
+
+/* Margin Top */
+@for $i from 1 through 1
+    .mt-#{5 * $i},
+    .my-#{5 * $i}
+        margin-top: 5px * $i !important
+@for $i from 2 through 50
+    .mt-#{5 * $i},
+    .my-#{5 * $i}
+        margin-top: 5px * $i
+
+/* Margin Bottom */
+@for $i from 1 through 1
+    .mb-#{5 * $i},
+    .my-#{5 * $i}
+        margin-bottom: 5px * $i !important
+@for $i from 2 through 50
+    .mb-#{5 * $i},
+    .my-#{5 * $i}
+        margin-bottom: 5px * $i
+
+
+/* Responsive Padding Margin */
++res-bl(lg)
+    /* Padding Around */
+    @for $i from 0 through 1
+        .rp-#{5 * $i}
+            padding: 5px * $i !important
+    @for $i from 2 through 30
+        .rp-#{5 * $i}
+            padding: 5px * $i
+    
+    /* Padding Top */
+    @for $i from 0 through 1
+        .rpt-#{5 * $i},
+        .rpy-#{5 * $i}
+            padding-top: 5px * $i !important
+    @for $i from 2 through 30
+        .rpt-#{5 * $i},
+        .rpy-#{5 * $i}
+            padding-top: 5px * $i
+
+    /* Padding Bottom */
+    @for $i from 0 through 1
+        .rpb-#{5 * $i},
+        .rpy-#{5 * $i}
+            padding-bottom: 5px * $i !important
+    @for $i from 2 through 30
+        .rpb-#{5 * $i},
+        .rpy-#{5 * $i}
+            padding-bottom: 5px * $i
+
+    /* Margin Around */
+    @for $i from 0 through 1
+        .rm-#{5 * $i}
+            margin: 5px * $i !important
+    @for $i from 2 through 30
+        .rm-#{5 * $i}
+            margin: 5px * $i
+
+    /* Margin Top */
+    @for $i from 0 through 1
+        .rmt-#{5 * $i},
+        .rmy-#{5 * $i}
+            margin-top: 5px * $i !important
+    @for $i from 2 through 30
+        .rmt-#{5 * $i},
+        .rmy-#{5 * $i}
+            margin-top: 5px * $i
+
+    /* Margin Bottom */
+    @for $i from 0 through 1
+        .rmb-#{5 * $i},
+        .rmy-#{5 * $i}
+            margin-bottom: 5px * $i !important
+    @for $i from 2 through 30
+        .rmb-#{5 * $i},
+        .rmy-#{5 * $i}
+            margin-bottom: 5px * $i

assets/sass/_variables.sass

@@ -0,0 +1,42 @@
+// GLOBAL VARIABLES
+
+// Fonts
+$fonts: (base-font: "'Outfit', sans-serif", heading-font: "'Outfit', sans-serif")
+
+// Font Family
+$base-font: var(--base-font)
+$heading-font: var(--heading-font)
+
+// body font size
+$base-size: 16px
+
+// heading font size
+$h1-size: 85px
+$h2-size: 42px
+$h3-size: 30px
+$h4-size: 27px
+$h5-size: 24px
+$h6-size: 20px
+
+// Colors
+$colors: (primary-color: #63AB45, secondary-color: #F7921E, heading-color: #1C231F, base-color: #484848, lighter-color: #F9F9F7, border-color: #E9E9E9,  primary-rgb: '99, 171, 69',  secondary-rgb: '247, 146, 30')
+
+$base-color: var(--base-color)
+$primary-color: var(--primary-color)
+$secondary-color: var(--secondary-color)
+$heading-color: var(--heading-color)
+$lighter-color: var(--lighter-color)
+$border-color: var(--border-color)
+$primary-rgb: var(--primary-rgb)
+$secondary-rgb: var(--secondary-rgb)
+
+$box-shadow: 3px 0 60px transparentize(map-get($colors, primary-color), 0.8)
+$bgc-gradient: linear-gradient( -30deg, rgb(48,240,182) 0%, rgb(103,77,243) 100%)
+
+
+// layout
+$gutter: 30px
+$container: 1320px
+
+// Breakpoints.
+$breakpoints: ( xs: 376px, ms: 480px, sm: 576px, md: 768px, lg: 992px, xl: 1200px, lp: 1300px, xxl: 1400px, lb: 1600px )

assets/sass/sections/_about.sass

@@ -0,0 +1,126 @@
+/*******************************************************/
+/******************** ## About Area ********************/
+/*******************************************************/
+.about-us-content
+    max-width: 450px
+    
+.about-us-image
+    z-index: 1
+    padding: 5%
+    margin: 30px
+    max-width: 630px
+    border-radius: 50%
+    position: relative
+    +flexcenter(center)
+    border: 1px solid $border-color
+    animation: circle_animation 30s linear infinite
+    
+    +res-ab(lg)
+        margin-left: auto
+    &:before
+        content: ''
+        +size(82%)
+        +absmiddle()
+        border-radius: 50%
+        background: rgba($primary-rgb, 0.1)
+    > img
+        max-width: 88%
+        animation: circle_animation_invers 30s linear infinite
+    .shape
+        position: absolute
+        +circle(white, 65px)
+        animation: zoomInOut 5s linear infinite
+        box-shadow: 0px 10px 30px rgba(184, 184, 184, 0.25)
+        +res-bl(ms)
+            +size(45px)
+            line-height: 45px
+        img
+            max-width: 50%
+        &:nth-child(1)
+            left: 22%
+            top: -5px
+        &:nth-child(2)
+            left: 70%
+            top: 1%
+        &:nth-child(3)
+            top: 43%
+            right: -30px
+        &:nth-child(4)
+            right: 8%
+            bottom: 8%
+        &:nth-child(5)
+            left: 38%
+            bottom: -30px
+        &:nth-child(6)
+            left: 0
+            bottom: 20%
+        &:nth-child(7)
+            top: 30%
+            left: -25px
+        &:nth-child(odd)
+            animation-delay: 1s
+            
+/* About Two */
+.experience-years
+    +size(216px)
+    display: flex
+    padding: 35px
+    border-radius: 50%
+    flex-direction: column
+    justify-content: center
+    border: 1px solid $border-color
+    .title
+        color: white
+        padding: 2px 15px
+        position: absolute
+        border-radius: 20px
+        background: $primary-color
+        transform: rotate(25deg) translate(40px, -60px)
+        &.bgc-secondary
+            background: $secondary-color
+    .text
+        font-weight: 500
+        color: $heading-color
+    .years
+        line-height: 1
+        font-size: 80px
+        font-weight: 600
+        color: $heading-color
+        
+/* About Page */
+.about-page-content
+    .list-style-two
+        display: flex
+        flex-wrap: wrap
+        justify-content: space-between
+        li
+            width: 48%
+            +res-bl(ms)
+                width: 100%
+                
+.about-feature-image
+    margin-bottom: 30px
+    img
+        width: 100%
+        border-radius: 10px
+                
+.about-feature-boxes
+    .feature-item.style-three
+        padding-top: 40px
+        margin-bottom: 30px
+        padding-bottom: 20px
+        
+/* FAQ Page About */
+.faq-page-about-content
+    max-width: 525px
+    .section-title h2
+        +res-bt(lg, xl)
+            font-size: 40px
+    .list-style-two
+        display: flex
+        flex-wrap: wrap
+        justify-content: space-between
+        li
+            width: 48%
+            +res-bl(ms)
+                width: 100%

assets/sass/sections/_activity.sass

@@ -0,0 +1,81 @@
+/*******************************************************/
+/***************** ## Activity Area *****************/
+/*******************************************************/
+.popular-activity-area
+    border: 1px solid $border-color
+    
+.activity-item
+    padding: 20px
+    transition: 0.5s
+    background: white
+    margin-bottom: 30px
+    border-radius: 10px
+    border: 1px solid $border-color
+    display: flex
+    align-items: center
+    +res-bl(xs)
+        +gapLR(padding, 15px)
+    .image
+        flex: none
+        margin-right: 25px
+        +res-bl(xxl)
+            margin-right: 15px
+        img
+            border-radius: 50%
+            +res-bl(xxl)
+                +size(65px)
+    .content
+        margin-right: 10px
+        h5
+            line-height: 1.2
+            margin-bottom: 5px
+            +res-bl(xxl)
+                font-size: 20px
+    .right-btn
+        margin-left: auto
+        .more
+            color: white
+            font-size: 14px
+            display: inline-block
+            +circle($secondary-color, 30px)
+    &:hover
+        border-color: $secondary-color
+        box-shadow: 10px 4px 60px rgba(247, 146, 30, 0.3)
+            
+/* Tour Activity */
+.tour-activities
+    display: flex
+    flex-wrap: wrap
+    margin-right: -15px
+
+.tour-activity-item
+    display: flex
+    background: white
+    padding: 15px 25px
+    border-radius: 12px
+    align-items: center
+    margin: 0 15px 15px 0
+    border: 1px solid $border-color
+    box-shadow: 10px 4px 60px rgba(197, 197, 197, 0.25)
+    +res-bl(md)
+        padding: 8px 15px
+        margin: 0 5px 5px 0
+    +res-bl(xs)
+        padding: 5px 12px
+    i
+        font-size: 40px
+        margin-right: 15px
+        color: $primary-color
+        +res-bl(xl)
+            font-size: 25px
+            margin-right: 10px
+        +res-bl(ms)
+            font-size: 18px
+    b
+        font-size: 22px
+        font-weight: 500
+        color: $heading-color
+        +res-bl(lg)
+            font-size: 18px
+        +res-bl(ms)
+            font-size: 16px

assets/sass/sections/_banner.sass

@@ -0,0 +1,112 @@
+/*******************************************************/
+/******************* ## Banner Area *******************/
+/*******************************************************/
+.page-banner-area
+    display: flex
+    overflow: hidden
+    min-height: 590px
+    border-radius: 10px
+    align-items: flex-end
+    flex-direction: column
+    justify-content: flex-end
+    +gapLR(margin, 30px)
+    +res-bl(lg)
+        +gapLR(margin, 15px)
+    +res-bl(xxl)
+        min-height: 450px
+    +res-bl(xl)
+        min-height: 400px
+    +res-bl(md)
+        min-height: 350px
+    +res-bl(sm)
+        min-height: 300px
+    &:before
+        +poLT(0)
+        content: ''
+        +size(100%)
+        background: linear-gradient(180deg, rgba(29, 35, 31, 0) 0%, #1D231F 100%)
+    
+.banner-inner
+    display: flex
+    flex-wrap: wrap
+    align-items: flex-end
+    justify-content: space-between
+    .page-title
+        max-width: 800px
+        margin-right: 15px
+        +res-ab(xl)
+            font-size: 65px
+        +res-bl(md)
+            font-size: 35px
+        +res-bl(sm)
+            font-size: 30px
+    .breadcrumb
+        +res-ab(md)
+            font-size: 20px
+        .breadcrumb-item
+            font-weight: 300
+            color: $heading-color
+            &+.breadcrumb-item
+                padding-left: 15px
+                &:before
+                    font-weight: 300
+                    content: "\f054"
+                    font-size: 0.8em
+                    padding-right: 15px
+                    color: $heading-color
+                    font-family: "Font Awesome 5 Pro"
+            &.active
+                font-weight: 500
+                text-decoration: underline
+                
+.text-white .breadcrumb .breadcrumb-item
+    color: white
+    &+.breadcrumb-item:before
+        color: white
+        
+.banner-and-search
+    +res-bl(lg)
+        +gapLR(padding, 10px)
+    > .row
+        --bs-gutter-x: 10px
+        
+.search-banner
+    min-height: 400px
+    margin-bottom: 10px
+    border-radius: 10px
+    background-size: cover
+    height: calc(100% - 10px)
+    background-position: center
+    .content
+        background-repeat: repeat-x
+        padding: 15px 20px 100px 35px
+        border-radius: 10px 10px 0 0
+        +res-ab(ms)
+            display: flex
+        +res-bl(xs)
+            padding-left: 25px
+        .left
+            color: white
+            font-size: 30px
+            font-weight: 300
+            line-height: 1.4
+            letter-spacing: -1px
+            +gapTB(padding, 20px)
+            > i
+                margin-left: 10px
+            > b
+                font-weight: 600
+            span > b
+                font-weight: 700
+        .right
+            flex: none
+            +size(180px)
+            text-align: center
+            +flexcenter(center)
+            color: $heading-color
+            background-size: cover
+            flex-direction: column
+            span
+                font-size: 2em
+                font-weight: 500
+                line-height: 0.9

assets/sass/sections/_benefit.sass

@@ -0,0 +1,45 @@
+/*******************************************************/
+/******************* ## Benefit Area *******************/
+/*******************************************************/
+.benefit-area-inner
+    position: relative
+    z-index: 1
+    &:before
+        content: ''
+        background-size: cover
+        background-position: center
+        background-color: $heading-color
+        background-image: url(../images/shapes/benefit-bg-shape.png)
+        +absmiddle()
+        +size(1650px, 100%)
+        border-radius: 20px
+        
+.benefit-content-part
+    .happy-customer
+        +res-ab(xs)
+            display: flex
+            align-items: center
+        h6
+            font-size: 18px
+            font-weight: 400
+            flex: none
+            margin-right: 20px
+            margin-bottom: 0
+        .feature-authors
+            +res-bl(xs)
+                margin-top: 15px
+            > span
+                background: $primary-color
+                
+.benefit-image-part
+    display: flex
+    max-width: 740px
+    align-items: flex-start
+    +res-ab(xl)
+        margin-left: auto
+    .image-two
+        margin-top: 50px
+        margin-left: -80px
+    &.style-two
+        +res-ab(xl)
+            margin-left: -30px

assets/sass/sections/_blog.sass

@@ -0,0 +1,385 @@
+/*******************************************************/
+/******************** ## Blog Area ********************/
+/*******************************************************/
+.blog-meta
+    display: flex
+    flex-wrap: wrap
+    align-items: center
+    li
+        margin-bottom: 2px
+        i
+            margin-right: 5px
+        img
+            +size(25px)
+            border-radius: 50%
+            margin-right: 10px
+        &:not(:last-child)
+            margin-right: 30px
+
+.blog-item
+    padding: 30px
+    margin-bottom: 30px
+    border-radius: 20px
+    background: $lighter-color
+    border: 1px solid $border-color
+    +res-bl(xs)
+        +gapLR(padding, 25px)
+    .content
+        padding-bottom: 40px
+        +res-ab(xxl)
+            +gapLR(padding, 20px)
+        .category
+            font-weight: 500
+            padding: 2px 15px
+            background: white
+            margin-bottom: 20px
+            border-radius: 10px
+            display: inline-block
+        h5
+            margin-bottom: 25px
+            +res-bl(ms)
+                font-size: 22px
+            +res-bl(xs)
+                font-size: 20px
+    .theme-btn
+        margin-top: 30px
+        > span:before
+            color: white
+    &:not(:hover)
+        .theme-btn
+            
+            background: white
+            color: $heading-color
+        
+    &.style-two
+        padding: 10px
+        transition: 0.3s
+        border-radius: 10px
+        .image
+            img
+                width: 100%
+                border-radius: 10px
+        .content
+            padding: 0 40px 25px
+            +res-bl(ms)
+                +gapLR(padding, 20px)
+            .blog-meta
+                margin-top: -22px
+                padding: 6px 25px
+                background: white
+                position: relative
+                margin-bottom: 25px
+                border-radius: 10px
+                justify-content: space-between
+                box-shadow: 10px 4px 60px rgba(133, 133, 133, 0.25)
+                li
+                    i
+                        font-size: 0.9em
+                    &:not(:last-child)
+                        margin-right: 15px
+            h5
+                margin-bottom: 20px
+        &:not(:hover)
+            background: transparent
+        
+    &.style-three
+        padding: 10px
+        +res-ab(md)
+            display: flex
+            align-items: center
+        .image
+            flex: none
+            +res-ab(md)
+                max-width: 45%
+            +res-ab(xl)
+                margin-right: 6%
+            img
+                +res-bl(md)
+                    margin-bottom: 10px
+        .content
+            padding: 20px
+            +res-ab(md)
+                max-width: 350px
+            +res-bl(xs)
+                +gapLR(padding, 10px)
+            .category
+                margin-bottom: 15px
+                box-shadow: 10px 4px 40px rgba(153, 153, 153, 0.25)
+            h5
+                margin-bottom: 14px
+                +res-bt(lg, xl)
+                    font-size: 22px
+            .blog-meta
+                margin-bottom: 15px
+                +res-ab(xl)
+                    margin-top: 15%
+                li
+                    &:not(:last-child)
+                        +res-bt(lg, xl)
+                            margin-right: 10px
+            p
+                margin-top: auto
+            .theme-btn
+                margin-top: 5px
+                font-size: 14px
+                padding: 4px 20px
+
+/* Blog Details */
+.blog-details-content
+    h1, h2, h3, h4, h5
+        margin-bottom: 15px
+    .category
+        color: white
+        font-weight: 500
+        padding: 2px 15px
+        border-radius: 10px
+        margin-bottom: 30px
+        display: inline-block
+        background: $secondary-color
+    .blog-meta
+        li
+            flex: 1 auto
+            padding: 13px
+            +flexcenter(center)
+            margin: 0 -1px -1px 0
+            border: 1px solid $border-color
+            +res-bl(ms)
+                +gapTB(padding, 6px)
+    .image img
+        border-radius: 10px
+    .list-style-two li
+        font-size: 16px
+        font-weight: 400
+        &:before
+            +size(20px)
+            font-size: 10px
+            line-height: 20px
+            background: $primary-color
+                
+blockquote
+    @extend %h6
+    position: relative
+    padding: 40px 60px 25px 130px
+    background: $lighter-color
+    border-radius: 7px
+    border: 1px solid $border-color
+    +res-bl(md)
+        padding-top: 30px
+        padding-left: 70px
+        padding-right: 20px
+        font-size: 18px
+    +res-bl(xs)
+        padding-right: 10px
+        padding-left: 50px
+        font-size: 16px
+    i
+        +poLT(40px, 15px)
+        font-size: 70px
+        color: $primary-color
+        +res-bl(md)
+            top: 8px
+            left: 15px
+            font-size: 45px
+        +res-bl(xs)
+            font-size: 35px
+            left: 10px
+    .blockquote-footer
+        display: block
+        color: $base-color
+        margin-bottom: 0
+        margin-top: 15px
+        font-size: 0.9em
+        &:before
+            content: '————'
+            margin-right: 22px
+            letter-spacing: -4px
+
+.tag-share
+    flex-wrap: wrap
+    +flexcenter(space-between)
+    .item
+        display: flex
+        align-items: center
+        margin-bottom: 15px
+        h6
+            font-size: 18px
+            margin-top: 5px
+            margin-right: 15px
+        .social-style-one
+            a
+                +size(35px)
+                font-size: 13px
+                line-height: 35px
+                border: 1px solid $border-color
+                &:not(:hover)
+                    color: $base-color
+                &:hover
+                    border-color: $primary-color
+                
+/* Next Prev Blog */
+.next-prev-blog
+    display: flex
+    flex-wrap: wrap
+    justify-content: space-between
+    .item
+        display: flex
+        max-width: 340px
+        align-items: center
+        margin-bottom: 30px
+        .image
+            flex: none
+            max-width: 100px
+            margin-right: 30px
+            +res-bl(xs)
+                max-width: 80px
+                margin-right: 20px
+        h6
+            line-height: 1.5
+            margin-bottom: 5px
+            +res-bl(xs)
+                font-size: 17px
+        .date i
+            margin-right: 4px
+
+/* Comments */
+.comments
+    border-radius: 10px
+    border: 1px solid $border-color
+
+.comment-body
+    padding: 50px
+    +res-ab(ms)
+        display: flex
+    +res-bl(md)
+        +gapLR(padding, 25px)
+    .author-thumb
+        flex: none
+        max-width: 85px
+        margin-right: 35px
+        margin-bottom: 20px
+        +res-bl(sm)
+            margin-right: 20px
+        img
+            border-radius: 50%
+    .content
+        h6
+            font-size: 16px
+            margin-bottom: 0
+            font-weight: 600
+        .ratting
+            margin-bottom: 15px
+            i
+                font-size: 12px
+                margin: 0 5px 0 0
+        .time
+            display: block
+            font-weight: 500
+            margin-bottom: 2px
+            color: $heading-color
+        .read-more
+            text-decoration: none
+            color: $heading-color
+            i
+                margin-top: 2px
+                background: $heading-color
+            &:hover
+                i
+                    background: $primary-color
+    &:not(:first-child)
+        border-top: 1px solid $border-color
+    &.comment-child
+        padding-top: 0
+        border-top: none
+        padding-left: 90px
+        +res-bl(md)
+            padding-left: 40px
+             
+.admin-comment
+    border-radius: 10px
+    border: 1px solid $border-color
+    .comment-body
+        max-width: none
+        margin-bottom: 0
+        padding: 35px 40px
+        align-items: center
+        +res-bl(md)
+            +gapLR(padding, 25px)
+        .author-thumb
+            +res-ab(xl)
+                max-width: 130px
+            +res-ab(sm)
+                margin-bottom: 0
+                margin-right: 40px
+        .content
+            h4
+                font-size: 20px
+                margin-bottom: 12px
+            .author
+                display: block
+                margin-bottom: 15px
+            .social-icons
+                margin-top: 10px
+                a
+                    margin-right: 20px
+                    &:hover
+                        color: $primary-color
+                
+/* Comment Form */
+.comment-form
+    padding: 50px
+    border-radius: 10px
+    border: 1px solid $border-color
+    +res-bl(md)
+        +gapLR(padding, 35px)
+    +res-bl(xs)
+        +gapLR(padding, 25px)
+    .section-title h2
+        margin-bottom: 4px
+    .form-group
+        margin-bottom: 20px
+        label
+            font-size: 18px
+            font-weight: 500
+            margin-bottom: 10px
+            color: $heading-color
+    .form-control
+        background: white
+        border-radius: 7px
+        border-color: $border-color
+        &:focus
+            border-color: $heading-color
+    .radio-filter
+        input
+            +size(25px)
+            border-width: 2px
+            &:before
+                opacity: 1
+                background: $border-color
+            &:checked:before
+                background: $secondary-color
+        label
+            font-size: 16px
+            margin-bottom: 0
+            font-weight: 400
+        
+.comment-review-wrap
+    display: flex
+    flex-wrap: wrap
+    margin-top: -5px
+    justify-content: space-between
+    .comment-ratting-item
+        width: 30%
+        display: flex
+        margin-bottom: 10px
+        align-items: center
+        +res-bl(md)
+            width: 45%
+        +res-bl(ms)
+            width: 100%
+        .title
+            font-size: 18px
+            font-weight: 500
+            margin-right: 25px
+        .ratting
+            i
+                font-size: 12px

assets/sass/sections/_client-logo.sass

@@ -0,0 +1,16 @@
+/*******************************************************/
+/**************** ## Client Logo Area ****************/
+/*******************************************************/
+.client-logo-wrap
+    border-radius: 10px
+    +gapLR(margin, -10px)
+    background: $lighter-color
+    border: 1px solid $border-color
+    .client-logo-item
+        +gapLR(margin, 10px)
+    
+.client-logo-item
+    text-align: center
+    margin-bottom: 15px
+    img
+        display: inline-block

assets/sass/sections/_contact.sass

@@ -0,0 +1,110 @@
+/*******************************************************/
+/****************** ## Contact Forms *******************/
+/*******************************************************/
+.contact-info-content
+    max-width: 385px
+
+.features-team-box
+    background: white
+    padding: 30px 40px
+    border-radius: 7px
+    border: 1px solid $border-color
+    box-shadow: 0px 10px 60px rgba(208, 208, 208, 0.25)
+    +res-bl(xl)
+        +gapLR(padding, 30px)
+    h6
+        font-size: 18px
+        margin-top: -5px
+        margin-bottom: 18px
+        padding-bottom: 18px
+        border-bottom: 1px solid $border-color
+    .feature-authors
+        > *
+            +size(40px)
+            border: none
+            line-height: 40px
+        img
+            +res-ab(xl)
+                margin-right: -8px
+        > span
+            font-size: 22px
+            
+.contact-info-item
+    padding: 40px 50px
+    border-radius: 7px
+    margin-bottom: 30px
+    background: $lighter-color
+    border: 1px solid $border-color
+    +res-bl(xl)
+        +gapLR(padding, 33px)
+    .icon
+        +size(55px)
+        font-size: 22px
+        background: white
+        line-height: 53px
+        border-radius: 50%
+        text-align: center
+        margin-bottom: 33px
+        color: $primary-color
+        border: 1px solid $border-color
+        +res-bl(xs)
+            margin-bottom: 22px
+    h5
+        margin-bottom: 12px
+        +res-bl(xs)
+            font-size: 22px
+    .text
+        display: flex
+        font-size: 20px
+        line-height: 1.6
+        +res-bl(xl)
+            font-size: 18px
+        i
+            margin-top: 8px
+            margin-right: 10px
+
+.contact-images-part
+    position: relative
+    img
+        width: 100%
+        margin-bottom: 30px
+    .circle-logo
+        +absmiddle()
+        border-radius: 50%
+        +flexcenter(center)
+        +circle(white, 250px)
+        flex-direction: column
+        border: 10px solid $secondary-color
+        img
+            width: auto
+            margin-bottom: 10px
+        +res-bl(ms)
+            +size(170px)
+            border-width: 8px
+            line-height: 170px
+            img
+                max-width: 33%
+                margin-bottom: 5px
+            .h2
+                font-size: 30px
+                
+.contact-map
+    iframe
+        margin-bottom: -10px
+        height: 616px
+        +res-bl(xl)
+            height: 500px
+        +res-bl(md)
+            height: 350px
+    
+/* Contact Form Validation */
+.has-error
+    .with-errors
+        color: red
+        margin-top: 5px
+        margin-bottom: -15px
+#msgSubmit
+    font-size: 20px
+    margin-bottom: 0
+    margin-top: 10px
+        

assets/sass/sections/_counter.sass

@@ -0,0 +1,46 @@
+/*******************************************************/
+/******************* ## Counter Area *******************/
+/*******************************************************/
+.counter-item
+    margin-bottom: 30px
+    .count-text
+        display: block
+        font-size: 55px
+        @extend %heading
+        
+    &.style-two
+        transition: 0.5s
+        padding: 50px 70px
+        margin: 0 -1px -1px 0
+        background: $lighter-color
+        border: 1px solid $border-color
+        +res-bl(xl)
+            +gapLR(padding, 50px)
+        +res-bt(xs, ms)
+            +gapLR(padding, 30px)
+        .icon
+            line-height: 1
+            font-size: 55px
+            margin-bottom: 15px
+            color: $secondary-color
+        .count-text
+            margin-bottom: 3px
+            +res-bl(ms)
+                font-size: 45px
+        .counter-title
+            display: block
+            font-size: 20px
+            +res-bl(ms)
+                font-size: 18px
+        &:hover
+            background: white
+            border-color: white
+            box-shadow: 10px 0px 60px rgba(175, 175, 175, 0.25)
+    
+.count-text
+    &.plus:after
+        content: '+'
+    &.k-plus:after
+        content: 'k+'
+    &.m-plus:after
+        content: 'm+'

assets/sass/sections/_cta.sass

@@ -0,0 +1,85 @@
+/*******************************************************/
+/******************** ## CTA Area ********************/
+/*******************************************************/
+.cta-item
+    z-index: 1
+    padding: 50px
+    display: flex
+    overflow: hidden
+    min-height: 400px
+    position: relative
+    border-radius: 15px
+    margin-bottom: 30px
+    align-items: flex-start
+    flex-direction: column
+    background-size: cover
+    height: calc(100% - 30px)
+    background-position: center
+    +res-bl(lg)
+        +gapLR(padding, 45px)
+    +res-bl(ms)
+        +gapLR(padding, 35px)
+    +res-bl(xs)
+        padding-right: 30px
+    &:before
+        +poLT(0)
+        content: ''
+        +size(100%)
+        z-index: -1
+        background: linear-gradient(360deg, rgba(29, 35, 31, 0.5) 0%, rgba(29, 35, 31, 0) 100%)
+    .category
+        color: white
+        display: block
+        margin-top: -5px
+        margin-bottom: 5px
+    h2
+        color: white
+        max-width: 400px
+        margin-bottom: 30px
+        +res-bl(xxl)
+            font-size: 38px
+        +res-bl(xs)
+            font-size: 33px
+    .theme-btn
+        margin-top: auto
+        
+/* CTA Two */
+.cta-area-two
+    border-radius: 10px
+    &:before
+        opacity: 0.75
+    
+.cta-content-part
+    max-width: 444px
+    .section-title
+        h2
+            letter-spacing: -2px
+            +res-ab(xxl)
+                font-size: 65px
+            span
+                line-height: 1
+                border-radius: 7px
+                background: $primary-color
+    p
+        max-width: 350px
+        +res-ab(sm)
+            font-size: 20px
+            
+/* CTA Three */
+.cta-three-content
+    max-width: 550px
+    padding: 100px 80px
+    +res-bl(sm)
+        +gapLR(padding, 50px)
+    +res-bl(ms)
+        +gapLR(padding, 35px)
+    +res-bl(xs)
+        +gapLR(padding, 25px)
+.cta-three-shape
+    z-index: -1
+    +poRB(8%, 0)
+    max-width: 25%
+    
+.cta-three-image
+    height: 100%
+    min-height: 400px

assets/sass/sections/_destinations.sass

@@ -0,0 +1,559 @@
+/*******************************************************/
+/**************** ## Destinations Area ****************/
+/*******************************************************/
+.destination-item
+    color: #92A498
+    margin-bottom: 30px
+    background: #232C26
+    border-radius: 10px
+    border: 1px solid rgba(255, 255, 255, 0.1)
+    .image
+        margin: 10px
+        overflow: hidden
+        position: relative
+        border-radius: 10px
+        img
+            width: 100%
+            transition: 0.5s
+        .ratting
+            +poLT(0)
+            z-index: 2
+            color: white
+            font-size: 18px
+            padding: 30px 50px 20px
+            background: $secondary-color
+            transform: rotate(-45deg) translate(-30px, -40px)
+            i
+                color: white
+                font-size: 16px
+                margin: 0 5px 0 0
+        .heart
+            z-index: 2
+            +poRT(10px)
+            +circle(white, 40px)
+            color: $secondary-color
+    .content
+        padding: 18px 40px 40px
+        +res-bl(lb)
+            +gapLR(padding, 22px)
+        .location
+            display: block
+            margin-bottom: 3px
+            i
+                margin-right: 5px
+        h5
+            +res-bl(xs)
+                font-size: 22px
+            a
+                color: white
+                &:hover
+                    text-decoration: underline
+        
+    .destination-footer
+        flex-wrap: wrap
+        padding: 20px 40px 15px
+        +flexcenter(space-between)
+        border-top: 1px solid rgba(255, 255, 255, 0.1)
+        +res-bl(lb)
+            +gapLR(padding, 22px)
+        .price
+            font-size: 14px
+            margin-bottom: 5px
+            span
+                color: white
+                font-size: 24px
+                font-weight: 500
+        .read-more
+            color: white
+            margin-bottom: 5px
+    &:hover
+        .image
+            img
+                transform: scale(1.15)
+            
+    &.style-two
+        background: white
+        text-align: center
+        margin-bottom: 10px
+        border: 1px solid $border-color
+        .image
+            display: inline-block
+            .heart
+                +size(30px)
+                font-size: 13px
+                line-height: 30px
+            .location
+                +poRB(10px)
+                font-size: 14px
+                padding: 0 10px
+                font-weight: 500
+                background: white
+                border-radius: 7px
+                color: $heading-color
+                i
+                    margin-right: 5px
+        .content
+            position: relative
+            padding: 15px 45px 20px 30px
+            +res-bl(lp)
+                padding-left: 20px
+                padding-right: 35px
+            h6
+                margin-bottom: 0
+                +res-bl(xs)
+                    font-size: 18px
+            .time
+                font-size: 14px
+            .more
+                color: #ADADAD
+                +poRT(30px, 50%)
+                transform: translateY(-50%)
+                +res-bl(lp)
+                    right: 20px
+        &:hover
+            .more
+                color: $heading-color
+        &.bgc-lighter
+            background: $lighter-color
+            .content
+                padding: 10px 35px 15px
+            
+    &.style-three
+        display: flex
+        align-items: center
+        +res-bl(md)
+            flex-wrap: wrap
+        .image
+            flex: none
+            max-width: 48%
+            +res-bl(md)
+                max-width: none
+                width: calc(100% - 20px)
+        .content
+            padding: 30px 50px 25px 40px
+            +res-bt(xxl, lb)
+                padding-left: 15px
+                padding-right: 25px
+            +res-bt(md, lg)
+                padding-left: 25px
+                padding-right: 35px
+            +res-bl(md)
+                order: 2
+                +gapLR(padding, 50px)
+            +res-bl(ms)
+                +gapLR(padding, 35px)
+            +res-bl(xs)
+                +gapLR(padding, 20px)
+            &:first-child
+                +res-ab(lb)
+                    padding-left: 50px
+                    padding-right: 40px
+                +res-bt(xxl, lb)
+                    padding-left: 25px
+                    padding-right: 15px
+                +res-bt(md, lg)
+                    padding-left: 35px
+                    padding-right: 25px
+            h5
+                max-width: 320px
+            .list-style-one
+                display: flex
+                flex-wrap: wrap
+                margin-top: 25px
+                justify-content: space-between
+                li
+                    &:nth-child(odd)
+                        width: 55%
+                    &:nth-child(even)
+                        width: 42%
+            .destination-footer
+                margin-top: 20px
+                padding: 20px 0 0
+                
+        &.bgc-lighter
+            color: $base-color
+            background: $lighter-color
+            border: 1px solid $border-color
+            .image
+                .badge
+                    +poLT(10px)
+                    z-index: 2
+                    font-size: 16px
+                    font-weight: 500
+                    padding: 5px 12px
+                    border-radius: 10px
+                    background: $secondary-color
+                    &.bgc-pink
+                        background: #FD4C5C
+                    &.bgc-primary
+                        background: $primary-color
+            .content
+                +res-ab(lg)
+                    padding-left: 30px
+                    padding-right: 40px
+                .destination-header
+                    display: flex
+                    flex-wrap: wrap
+                    align-items: center
+                    .location
+                        margin-right: 20px
+                        margin-bottom: 5px
+                    .ratting
+                        padding: 5px 10px
+                        background: white
+                        margin-bottom: 5px
+                        border-radius: 30px
+                        i
+                            font-size: 10px
+                h5
+                    max-width: none
+                    a
+                        color: $heading-color
+                p
+                    margin-top: 12px
+                .destination-footer
+                    border-top-color: $border-color
+                    .price span
+                        color: $heading-color
+                    .read-more
+                        color: $base-color
+                        text-decoration: underline
+                        i
+                            background: $secondary-color
+                    .theme-btn.style-three
+                        margin-bottom: 5px
+                        padding: 5px 20px
+                        font-size: 14px
+        &.tour-grid
+            display: block
+            .image
+                max-width: none
+            .content
+                padding: 20px 30px 30px
+                +res-bl(xs)
+                    +gapLR(padding, 20px)
+                .destination-footer
+                    margin-top: 15px
+                    border-top: none
+                    .theme-btn.style-three:hover
+                        background: $secondary-color
+                        border-color: $secondary-color
+                
+    &.style-four
+        color: $base-color
+        background: $lighter-color
+        border: 1px solid $border-color
+        .content h5 a,
+        .destination-footer .read-more,
+        .destination-footer .price span
+            color: $heading-color
+            
+        &.image-left
+            +res-ab(sm)
+                display: flex
+            .image
+                flex: none
+                align-self: center
+                +res-ab(sm)
+                    max-width: 46%
+            .content
+                display: flex
+                padding: 50px 30px
+                flex-direction: column
+                align-items: flex-start
+                +res-bl(sm)
+                    padding-top: 30px
+                    padding-bottom: 40px
+                .price
+                    display: block
+                    font-size: 14px
+                    margin-top: auto
+                    margin-bottom: 15px
+                    span
+                        font-size: 24px
+                        font-weight: 500
+                        color: $heading-color
+                .theme-btn
+                    font-size: 14px
+                    padding: 4px 20px
+        &.no-border
+            border: none
+            margin-bottom: 50px
+            background: transparent
+            .image
+                margin: 0 0 22px
+                .badge
+                    +poLT(10px)
+                    z-index: 2
+                    font-size: 16px
+                    font-weight: 500
+                    padding: 5px 12px
+                    border-radius: 10px
+                    background: $secondary-color
+                    &.bgc-pink
+                        background: #FD4C5C
+                    &.bgc-primary
+                        background: $primary-color
+            .content
+                padding: 0
+            .destination-footer
+                border-top: none
+                padding: 18px 0 10px
+            .theme-btn.style-three
+                font-size: 14px
+                padding: 4px 20px
+                
+.text-white .destination-item.style-four.no-border
+    .image .heart i
+        color: $secondary-color
+    .content
+        .location,
+        .location i
+            color: #92A498
+    .destination-footer
+        .price
+            span
+                color: white
+    .theme-btn.style-three:not(:hover)
+        color: #92A498
+        border-color: #92A498
+        i, span
+            color: #92A498
+            
+.popular-destinations-wrap
+    border: 1px solid $border-color
+    
+.destination-active
+    +gapLR(margin, -5px)
+    .destination-item.style-two
+        padding: 30px
+        text-align: center
+        +gapLR(margin, 5px)
+        .image
+            margin: 0 0 25px
+            border-radius: 50%
+            img
+                border-radius: 50%
+                display: inline-block
+        .content
+            padding: 0
+    .slick-dots
+        margin-top: 50px
+        
+.destinations-page-area
+    .destination-item.style-two
+        .content
+            +gapLR(padding, 20px)
+            +res-bl(xs)
+                +gapLR(padding, 0)
+        
+.hot-deals-active
+    +gapLR(margin, -15px)
+    .destination-item.style-four.no-border
+        +gapLR(margin, 15px)
+    .slick-list
+        padding-top: 40px
+    .slick-dots
+        margin-top: 10px
+        
+.destination-left-content
+    +res-ab(xl)
+        margin-top: 65px
+        
+.destinations-nav
+    padding: 5px
+    flex-wrap: wrap
+    border-radius: 30px
+    display: inline-flex
+    justify-content: center
+    border: 1px solid $border-color
+    li
+        cursor: pointer
+        font-size: 20px
+        transition: 0.5s
+        font-weight: 500
+        padding: 10px 25px
+        border-radius: 30px
+        +res-bl(lg)
+            font-size: 18px
+        +res-bl(md)
+            font-size: 16px
+            padding: 5px 15px
+        &.active
+            color: white
+            background: $primary-color
+    &.style-two li
+        font-size: 16px
+        padding: 1px 15px
+        &.active
+            background: $secondary-color
+            
+.text-white .destinations-nav
+    border-color: rgba(255, 255, 255, 0.1)
+    li:not(.active)
+        color: #92A498
+            
+/* Destination Details */
+.gallery-more-btn
+    +poRB(27%, 60px)
+
+.destination-details-content
+    .section-title
+        .h2
+            +res-bl(xl)
+                font-size: 35px
+            +res-bl(lg)
+                font-size: 30px
+            +res-bl(sm)
+                font-size: 25px
+            +res-bl(xs)
+                font-size: 20px
+        h2
+            +res-ab(xl)
+                font-size: 65px
+                
+                
+/* Tour Grid */
+.tour-grid-wrap
+    .tour-grid.destination-item
+        .content
+            padding-top: 10px
+            position: relative
+            padding-bottom: 15px
+            .ratting
+                +poRT(20px, -46px)
+            .blog-meta
+                justify-content: space-between
+                li:not(:last-child)
+                    margin-right: 10px
+            .destination-footer
+                margin-top: 25px
+                padding-top: 25px
+                border-top: 1px solid $border-color
+                .theme-btn.style-three
+                    +size(35px)
+                    padding: 0
+                    line-height: 35px
+                    i
+                        margin-left: 0
+
+/* Tour Details */
+.tour-header-content
+    .ratting i
+        +res-ab(sm)
+            font-size: 18px
+
+.tour-header-social
+    a
+        margin-bottom: 10px
+        border-radius: 20px
+        display: inline-flex
+        align-items: center
+        padding: 5px 20px 5px 5px
+        border: 1px solid $border-color
+        &:not(:last-child)
+            margin-right: 20px
+            +res-bl(xs)
+                margin-right: 10px
+        i
+            flex: none
+            color: white
+            font-size: 12px
+            margin-right: 10px
+            +circle($primary-color, 30px)
+            &.bgc-secondary
+                background: $secondary-color
+        
+.tour-details-content
+    h3
+        margin-bottom: 20px
+                
+.tour-include-exclude
+    border-radius: 10px
+    padding: 35px 50px 28px
+    border: 1px solid $border-color
+    +res-bl(xl)
+        padding-left: 25px
+        padding-right: 20px
+    .check li i
+        color: $primary-color
+        
+.tour-map
+    iframe
+        height: 500px
+        border-radius: 10px
+        +res-bl(md)
+            height: 400px
+        +res-bl(sm)
+            height: 300px
+        
+.clients-reviews
+    padding: 50px
+    border-radius: 10px
+    +res-ab(md)
+        display: flex
+        align-items: center
+    +res-bl(ms)
+        +gapLR(padding, 30px)
+    +res-bl(xs)
+        +gapLR(padding, 20px)
+    .left
+        padding: 60px
+        margin-right: 8%
+        border-radius: 10px
+        +flexcenter(center)
+        flex-direction: column
+        background: rgba(255, 255, 255, 0.05)
+        border: 1px solid rgba(255, 255, 255, 0.1)
+        +res-bl(xl)
+            +gapLR(padding, 30px)
+        +res-bl(md)
+            margin-right: 0
+            margin-bottom: 30px
+        b
+            color: white
+            line-height: 1
+            font-size: 70px
+            margin-top: -5px
+        span
+            color: white
+            margin-top: 5px
+            margin-bottom: 10px
+        .ratting
+            margin-bottom: 5px
+            i
+                font-size: 16px
+    .right
+        width: 100%
+
+.ratting-item
+    display: flex
+    align-items: center
+    &:not(:last-child)
+        margin-bottom: 10px
+    .title
+        color: white
+        font-size: 18px
+        min-width: 68px
+        font-weight: 500
+        +res-bl(xs)
+            font-size: 16px
+            min-width: 59px
+    .line
+        +size(100%, 5px)
+        +gapLR(margin, 22px)
+        background: rgba(255, 255, 255, 0.2)
+        +res-bl(ms)
+            +gapLR(margin, 10px)
+        span
+            height: 100%
+            display: block
+            background: $secondary-color
+    .ratting
+        min-width: 97px
+        +res-bl(xs)
+            min-width: 75px
+        i
+            font-size: 12px
+            +res-bl(xs)
+                font-size: 8px

assets/sass/sections/_error.sass

@@ -0,0 +1,30 @@
+/*******************************************************/
+/******************** ## 404 Error ********************/
+/*******************************************************/
+.error-content
+    h1
+        +res-ab(xl)
+            font-size: 100px
+        +res-bl(sm)
+            font-size: 70px
+        +res-bl(xs)
+            font-size: 55px
+    .newsletter-form
+        padding: 5px
+        background: $lighter-color
+        border: 1px solid $border-color
+        input
+            background: transparent
+    .keywords
+        display: flex
+        flex-wrap: wrap
+        margin-right: -10px
+        a
+            padding: 3px 20px
+            margin-right: 10px
+            margin-bottom: 10px
+            border-radius: 20px
+            border: 1px solid $border-color
+            &:hover
+                color: $heading-color
+                border-color: $heading-color

assets/sass/sections/_faqs.sass

@@ -0,0 +1,120 @@
+/*******************************************************/
+/******************** ## FAQs Area ********************/
+/*******************************************************/
+.accordion-item
+    border-radius: 10px
+    margin-bottom: 15px
+    background: $lighter-color
+    border: 1px solid $border-color
+    &:first-of-type
+        border-top-left-radius: 10px
+        border-top-right-radius: 10px
+        .accordion-button
+            border-top-left-radius: 10px
+            border-top-right-radius: 10px
+    &:last-of-type
+        border-bottom-left-radius: 10px
+        border-bottom-right-radius: 10px
+        .accordion-button
+            border-bottom-left-radius: 10px
+            border-bottom-right-radius: 10px
+    &:not(:last-child)
+        margin-bottom: 10px
+    &:not(:first-of-type)
+        border-top: 1px solid $border-color
+    .accordion-button
+        border: none
+        font-size: 20px
+        box-shadow: none
+        font-weight: 500
+        align-items: center
+        color: $heading-color
+        background: transparent
+        padding: 12px 10px 10px 30px
+        +res-bl(ms)
+            font-size: 16px
+            padding: 8px 10px 8px 20px
+        &:after
+            flex: none
+            font-size: 15px
+            font-weight: 300
+            margin-top: -2px
+            content: "\f068"
+            text-align: center
+            +circle(white, 40px)
+            transform: rotate(0deg)
+            border: 1px solid $border-color
+            font-family: "Font Awesome 5 Pro"
+            +res-bl(xs)
+                +size(30px)
+                font-size: 13px
+                line-height: 30px
+        &.collapsed
+            &:after
+                content: "\f067"
+                transform: rotate(-90deg)
+            
+.accordion-body
+    padding: 0 30px 8px
+    +res-bl(ms)
+        font-size: 15px
+        +gapLR(padding, 20px)
+    .list-style-two
+        display: flex
+        flex-wrap: wrap
+        li
+            font-size: 16px
+            font-weight: 400
+            margin-right: 70px
+            +res-bl(xl)
+                margin-right: 30px
+            &:before
+                +size(20px)
+                font-size: 10px
+                margin-top: 2px
+                line-height: 20px
+                background: $primary-color
+        
+.accordion-two
+    position: relative
+    padding-left: 50px
+    &:before
+        content: ''
+        +poLT(15px, 30px)
+        background: $border-color
+        +size(1px, calc(100% - 50px))
+    .accordion-item
+        border: none
+        border-radius: 0
+        position: relative
+        margin-bottom: 35px
+        background: transparent
+        &:before
+            color: white
+            font-size: 14px
+            content: "\f00c"
+            +poLT(-50px, 5px)
+            +circle($primary-color, 30px)
+            font-family: "Font Awesome 5 Pro"
+        .accordion-button
+            padding: 0 0 15px
+            background: transparent
+            border-bottom: 1px solid $border-color
+            &:after
+                +size(auto)
+                border: none
+                font-size: 20px
+                font-weight: 400
+                content: "\f35a"
+                background: transparent
+                color: $secondary-color
+                transform: rotate(90deg)
+            &.collapsed
+                &:after
+                    content: "\f35a"
+                    color: $heading-color
+                    transform: rotate(0deg)
+        .accordion-body
+            padding: 20px 0 0
+            p:last-child
+                margin-bottom: 0

assets/sass/sections/_features.sass

@@ -0,0 +1,195 @@
+/*******************************************************/
+/******************* ## Features Area *******************/
+/*******************************************************/
+.feature-item
+    transition: 0.5s
+    border-radius: 10px
+    margin-bottom: 30px
+    padding: 40px 40px 20px
+    background: $lighter-color
+    border: 1px solid $border-color
+    +res-bl(md)
+        margin-top: 0
+    +res-bl(xs)
+        +gapLR(padding, 30px)
+    .icon
+        z-index: 1
+        line-height: 1
+        transition: 0.5s
+        font-size: 55px
+        position: relative
+        margin-bottom: 50px
+        color: $primary-color
+        &:before
+            content: ''
+            +size(50px)
+            z-index: -1
+            transition: 0.5s
+            background: white
+            +poLB(15px, -10px)
+            border-radius: 50%
+    &:hover
+        background: white
+        border-radius: 20px
+        box-shadow: 0px 10px 60px rgba(208, 208, 208, 0.25)
+        .icon
+            color: $secondary-color
+            &:before
+                background: rgba($secondary-rgb, 0.1)
+        
+    &.style-two
+        background: white
+        border-radius: 10px
+        .icon
+            margin-bottom: 18px
+            color: $secondary-color
+            &:before
+                display: none
+        .content
+            h5
+                margin-bottom: 0
+                letter-spacing: -1px
+            p
+                transition: 0.5s
+        &:hover
+            background: $primary-color
+            border-color: $primary-color
+            box-shadow: 10px 4px 40px rgba(99, 171, 69, 0.5)
+            .icon,
+            .content p,
+            .content h5 a
+                color: white
+                
+    &.style-three
+        border: none
+        border-radius: 10px
+        margin-bottom: 10px
+        padding: 50px 50px 30px
+        height: calc(100% - 10px)
+        background: $heading-color
+        +res-bl(ms)
+            +gapLR(padding, 35px)
+        +res-bl(xs)
+            +gapLR(padding, 25px)
+        .icon,
+        .content p,
+        .content h3 a,
+        .content h6 a,
+        .icon-title h5 a
+            color: white
+        .icon
+            margin-bottom: 25px
+            &:before
+                display: none
+        .content h3
+            +res-bl(lb)
+                font-size: 25px
+        &.bgc-primary
+            background: $primary-color
+        &.bgc-secondary
+            background: $secondary-color
+        &.bgc-pink
+            background: #FD4C5C
+        .icon-title
+            display: flex
+            margin-bottom: 6px
+            align-items: center
+            .icon
+                margin-right: 30px
+                margin-bottom: 15px
+                +res-bl(xs)
+                    font-size: 45px
+                    margin-right: 20px
+            h5
+                line-height: 1.3
+                margin-top: -7px
+                margin-bottom: 15px
+                +res-bl(xs)
+                    font-size: 20px
+
+.features-content-part
+    max-width: 580px
+    .section-title
+        max-width: 500px
+        
+.features-customer-box
+    +res-ab(md)
+        display: flex
+        align-items: center
+    .image
+        flex: none
+        max-width: 50%
+        position: relative
+        +res-bl(md)
+            max-width: none
+            +gapLR(margin, 15px)
+    .content
+        margin-left: -20%
+        background: white
+        border-radius: 20px
+        padding: 50px 55px 40px 30%
+        padding-left: calc(20% + 55px)
+        border: 1px solid $border-color
+        box-shadow: 0px 10px 60px rgba(208, 208, 208, 0.25)
+        +res-bl(md)
+            margin-left: 0
+            margin-top: -35px
+            padding: 70px 45px 30px
+        +res-bl(xs)
+            +gapLR(padding, 25px)
+        h6
+            font-size: 18px
+            
+.feature-authors
+    display: flex
+    align-items: center
+    > *
+        +size(50px)
+        border-radius: 50%
+        border: 2px solid white
+    img
+        margin-right: -15px
+    > span
+        color: white
+        line-height: 46px
+        text-align: center
+        background: $secondary-color
+        
+/* Features Two */
+.features-wrap-two
+    +res-ab(lg)
+        margin-right: -350px
+        
+.features-image-two
+    img
+        border-radius: 10px
+        
+/* Features Three */
+.features-area-three
+    +gapLR(margin, 30px)
+    +res-bl(lg)
+        +gapLR(margin, 15px)
+    .row
+        --bs-gutter-x: 10px
+        
+        
+.about-feature-two
+    .feature-item.style-two:hover
+        background: $secondary-color
+        border-color: $secondary-color
+        box-shadow: 10px 4px 40px rgba(247, 146, 30, 0.5)
+    .shape
+        +poLT(0, 28px)
+        max-width: 15%
+        
+/* Feature FAQ Page */
+.faq-page-featuers
+    .feature-item.style-three
+        height: calc(100% - 30px)
+        padding-bottom: 20px
+        margin-bottom: 30px
+        padding-top: 40px
+        +res-ab(xs)
+            +gapLR(padding, 40px)
+        .icon
+            font-size: 45px

assets/sass/sections/_footer.sass

@@ -0,0 +1,97 @@
+/*******************************************************/
+/******************* ## Main Footer *******************/
+/*******************************************************/
+.main-footer
+    color: #B6CABC
+    a
+        color: #B6CABC
+        &:hover
+            color: white
+            text-decoration: underline
+
+.footer-widget
+    margin-bottom: 50px
+                
+.footer-title
+    margin-bottom: 24px
+    h5
+        color: white
+        font-size: 22px
+        text-transform: capitalize
+        
+.footer-contact
+    .list-style-one
+        li
+            margin-bottom: 0
+            align-items: start
+            i
+                font-size: 16px
+                margin-top: 7px
+            &:not(:last-child)
+                margin-bottom: 15px
+            
+.footer-map iframe
+    height: 125px
+    border-radius: 6px
+            
+.footer-top
+    position: relative
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1)
+    +res-ab(lg)
+        &:before
+            content: ''
+            +poLT(50%, 0)
+            +size(1px, 100%)
+            background: rgba(255, 255, 255, 0.1)
+    .section-title h2
+        color: white
+            
+.newsletter-form
+    padding: 10px
+    display: flex
+    background: #fff
+    position: relative
+    border-radius: 35px
+    input
+        border: 0
+        padding: 11px 5px 11px 30px
+        +res-bl(xs)
+            padding-left: 22px
+    .theme-btn
+        flex: none
+        i
+            +res-bl(ms)
+                display: none
+            
+/* Widget Area */
+.widget-area
+    .col-md-6
+        +res-ab(xl)
+            width: 20%
+            
+/* Footer Two */
+.footer-two
+    .widget-area .col-md-6
+        +res-bt(xl, xxl)
+            width: 40%
+
+/* Footer Bottom */  
+.footer-bottom
+    position: relative
+    background: #222924
+    .copyright-text
+        a
+            color: $secondary-color
+    .scroll-top
+        top: -30px
+        position: absolute
+        left: calc(50% - 28px)
+        
+.footer-bottom-nav
+    flex-wrap: wrap
+    display: inline-flex
+    +gapLR(margin, -13px)
+    justify-content: center
+    li
+        margin: 0 13px 5px
+            

assets/sass/sections/_gallery.sass

@@ -0,0 +1,93 @@
+/*******************************************************/
+/****************** ## Gallery Area ******************/
+/*******************************************************/
+.gallery-item
+    margin-bottom: 10px
+    img
+        width: 100%
+    
+.destination-map
+    iframe
+        height: 500px
+        border-radius: 10px
+        margin-bottom: -10px
+        
+.gallery-two-item
+    margin-bottom: 40px
+    .image
+        overflow: hidden
+        position: relative
+        margin-bottom: 20px
+        border-radius: 10px
+        &:after
+            +poLT(0)
+            opacity: 0
+            content: ''
+            +size(100%, 0)
+            transition: 0.5s
+            background: $heading-color
+        img
+            width: 100%
+        .link
+            z-index: 2
+            top: -70px
+            opacity: 0
+            color: white
+            font-size: 22px
+            position: absolute
+            left: calc(50% - 32.5px)
+            transform: rotate(-45deg)
+            +circle($secondary-color, 65px)
+    .content h5
+        +res-bl(md)
+            font-size: 22px
+    &:hover
+        .image
+            &:after
+                height: 100%
+                opacity: 0.5
+            .link
+                opacity: 1
+                top: calc(50% - 32.5px)
+            
+.gallery-slider-active
+    +gapLR(margin, -5px)
+    .gallery-three-item
+        +gapLR(margin, 5px)
+    .slick-dots
+        margin-top: 45px
+        
+.gallery-three-item
+    margin-bottom: 10px
+    .image
+        img
+            width: 100%
+    .content
+        opacity: 0
+        transition: 0.5s
+        +poLB(30px, 60px)
+        background: white
+        padding: 13px 30px
+        border-radius: 10px
+        +res-bl(lg)
+            left: 10px
+        +res-bl(md)
+            +gapLR(padding, 15px)
+        .category
+            +res-bl(ms)
+                font-size: 14px
+        h5
+            margin-bottom: 0
+            line-height: 1.3
+            +res-bl(lg)
+                font-size: 20px
+            +res-bl(ms)
+                font-size: 16px
+            +res-bl(xs)
+                font-size: 14px
+    &:hover
+        .content
+            opacity: 1
+            bottom: 30px
+            +res-bl(lg)
+                bottom: 10px

assets/sass/sections/_header.sass

@@ -0,0 +1,613 @@
+/*******************************************************/
+/******************* ## Header style *******************/
+/*******************************************************/
+.main-header
+    position: relative
+    left: 0px
+    top: 0px
+    z-index: 999
+    width: 100%
+    transition: all 500ms ease
+    .header-upper
+        z-index: 5
+        width: 100%
+        position: relative
+        transition: all 500ms ease
+    .logo-outer
+        flex: none
+        +res-bl(lg)
+            display: none
+    .logo
+        z-index: 9
+        padding: 2px 0
+        position: relative
+    &.menu-absolute
+        .header-upper
+            position: absolute
+    &.fixed-header
+        .header-upper
+            top: 0
+            left: 0
+            position: fixed
+            animation: sticky  1s
+            box-shadow: 0px 0px 30px 0px rgba(87, 95, 245, .10)
+        .main-menu
+            .navbar-collapse
+                > ul
+                    > li
+                        +res-ab(lg)
+                            +gapTB(padding, 25px)
+    
+.nav-outer
+    +res-bl(lg)
+        width: 100%
+ 
+/** Header Main Menu **/
+.main-menu
+    +res-bl(lg)
+        width: 100%
+    .mobile-logo
+        margin-right: auto
+        +res-bl(sm)
+            max-width: 150px
+    .collapse
+        +res-bl(lg)
+            overflow: auto
+    .navbar-collapse
+        padding: 5px
+        > ul
+            display: flex
+            +res-bl(lg)
+                display: block
+                padding: 25px 0
+                background: #f9f9f9
+                box-shadow: inset 0px 0px 30px 0px rgba(87, 95, 245, .10)
+                > li:last-child
+                    border-bottom: 1px solid $border-color
+        +res-bl(lg)
+            left: 0
+            width: 100%
+            position: absolute
+            max-height: calc(100vh - 80px)
+        li
+            padding: 35px 20px
+            +flexcenter(space-between)
+            +res-bl(xxl)
+                +gapLR(padding, 10px)
+            +res-bl(lg)
+                display: block
+                padding: 0 15px
+                border-top: 1px solid $border-color
+            &.dropdown .dropdown-btn
+                cursor: pointer
+                margin-left: 5px
+                margin-bottom: -3px
+                color: $heading-color
+                +res-bl(lg)
+                    position: absolute
+                    right: 10px
+                    top: 0
+                    width: 50px
+                    height: 43px
+                    border-left: 1px solid $border-color
+                    text-align: center
+                    line-height: 43px
+            a
+                display: block
+                opacity: 1
+                position: relative
+                color: $heading-color
+                font-family: $heading-font
+                text-transform: capitalize
+                transition: all 500ms ease
+                +res-ab(xs)
+                    font-size: 18px
+                +res-bl(lg)
+                    padding: 10px 10px
+                    line-height: 22px
+                &:hover
+                    color: $primary-color
+                    text-decoration: underline
+            &.current > a, &.current-menu-item > a
+                font-weight: 500
+            li
+                border-top: 1px solid $border-color
+                a
+                    text-transform: capitalize
+                    &:before
+                        display: none
+            .megamenu
+                position: absolute
+                left: 0px
+                top: 100%
+                width: 100%
+                z-index: 100
+                display: none
+                padding: 20px 0
+                background: #ffffff
+                box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05)
+                +clearfix
+                +res-bl(lg)
+                    position: relative
+                    box-shadow: none
+                    width: 100%
+                    .container
+                        max-width: 100%
+                    .row
+                        margin: 0px
+                ul
+                    display: block
+                    position: relative
+                    top: 0
+                    width: 100%
+                    box-shadow: none
+            ul
+                position: absolute
+                left: inherit
+                top: 100%
+                min-width: 250px
+                z-index: 100
+                display: none
+                background: white
+                box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05)
+                +res-bl(lg)
+                    position: relative
+                    display: none
+                    width: 100%
+                    box-shadow: none
+                    background: transparent
+                    +clearfix
+                    +res-bl(xs)
+                        min-width: auto
+                li
+                    width: 100%
+                    padding: 7px 20px
+                    +res-bl(lg)
+                        padding: 0 15px
+                    ul
+                        left: 100%
+                        top: 0%
+                        +res-bl(lg)
+                            left: auto
+
+    .navbar-header
+        display: none
+        +res-bl(lg)
+            +flexcenter(start)
+        .navbar-toggle
+            float: right
+            padding: 4px 0
+            cursor: pointer
+            background: transparent
+            +res-bl(lg)
+                margin-right: 12px
+            .icon-bar
+                background: $base-color
+                height: 2px
+                width: 30px
+                display: block
+                margin: 7px 0
+                
+/* Header One */
+.main-header.header-one
+    +res-ab(lg)
+        .main-menu
+            .navbar-collapse
+                padding: 5px
+                border-radius: 40px
+                background: $lighter-color
+                border: 1px solid $border-color
+                .navigation
+                    > li
+                        padding: 0
+                        transition: 0.5s
+                        border-radius: 30px
+                        > a
+                            padding: 15px 30px
+                            +res-bt(lg, lp)
+                                padding: 10px 20px
+                        &.dropdown
+                            > a
+                                padding-right: 8px
+                            > .dropdown-btn
+                                margin-left: 0
+                                transition: 0.5s
+                                padding-right: 30px
+                                +res-bt(lg, lp)
+                                    padding-right: 20px
+                        &:hover
+                            background: $primary-color
+                            > a,
+                            > .dropdown-btn
+                                color: white
+        &.fixed-header
+            .header-upper
+                +gapTB(padding, 10px)
+                
+/* Header Two */
+.main-header.header-two
+    +res-ab(lg)
+        display: none
+    .header-upper
+        background: white
+        box-shadow: 0px 0px 30px 0px rgba(87, 95, 245, 0.1)
+    .menu-sidebar
+        > button
+            border-color: $heading-color
+            .icon-bar
+                background: $heading-color
+
+.for-sidebar-menu.page-wrapper
+    +res-ab(lg)
+        padding-left: 315px
+        padding-right: 10px
+    .hidden-bar
+        top: 10px
+        right: auto
+        border: none
+        width: 295px
+        left: -315px
+        background: white
+        border-radius: 10px
+        height: calc(100% - 20px)
+        max-width: calc(100% - 20px)
+        box-shadow: 0px 4px 40px rgba(179, 179, 179, 0.25)
+        +res-ab(lg)
+            left: 10px
+            opacity: 1
+            visibility: visible
+        .inner-box
+            padding: 40px 30px
+            .cross-icon
+                color: $base-color
+                +res-ab(lg)
+                    display: none
+            .theme-btn
+                margin-left: 20px
+    .form-back-drop
+        left: -100%
+                
+.side-content-visible
+    .for-sidebar-menu.page-wrapper
+        .hidden-bar
+            left: 10px
+        .form-back-drop
+            +res-bl(lg)
+                left: 0
+        
+/* Sidebar Menu */
+.sidebar-menu
+    li
+        a
+            display: block
+            font-size: 18px
+            font-weight: 500
+            padding: 6px 20px
+            border-radius: 20px
+            color: $heading-color
+            text-transform: capitalize
+        &.dropdown
+            > ul
+                display: none
+            .dropdown-btn
+                position: absolute
+                right: 5px
+                top: 0
+                width: 45px
+                height: 40px
+                cursor: pointer
+                line-height: 40px
+                text-align: center
+        ul
+            margin-top: 5px
+            margin-left: 10px
+    > li
+        margin-bottom: 12px
+        &:hover,
+        &.active
+            > a
+                color: white
+                background: $primary-color
+            > .dropdown-btn
+                color: white
+        
+                
+/* Menu Btns */
+.menu-btns
+    display: flex
+    align-items: center
+    > button
+        font-size: 20px
+        position: relative
+        margin-left: 30px
+        background-color: transparent
+        +res-ab(lp)
+            margin-right: 60px
+        +res-bl(lp)
+            margin-right: 35px
+        +res-bl(ms)
+            display: none
+        span
+            +poLB(95%)
+            color: white
+            font-size: 14px
+            font-family: $heading-font
+            +circle($primary-color, 20px)
+            +res-bl(lg)
+                bottom: 80%
+            &.bgc-secondary
+                color: $heading-color
+                background-color: $secondary-color
+    .theme-btn
+        margin-right: 10px
+        +res-bl(xl)
+            display: none
+        
+/* Header Search */
+.nav-search
+    position: relative
+    margin-right: 10px
+    +res-bl(xs)
+        display: none
+    > button
+        +size(50px)
+        border-radius: 50%
+        background: transparent
+        border: 1px solid rgba(255, 255, 255, 0.1)
+    form
+        position: absolute
+        width: 320px
+        top: 100%
+        right: 0
+        z-index: 777
+        +flexcenter(center)
+        background-color: #fff
+        animation: fadeIn 0.5s
+        box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05)
+        +res-bl(ms)
+            width: 300px
+        +res-bl(xs)
+            width: 250px
+        &.hide
+            display: none
+        input
+            border: none
+            padding: 15px 5px 15px 25px
+        button
+            background: transparent
+            padding: 15px 20px 15px 0
+            
+            
+/* White Menu */
+.main-header.white-menu
+    .top-left
+        font-weight: 400
+        +gapTB(padding, 12px)
+        color: rgba(255, 255, 255, 0.65)
+        &:before
+            display: none
+    .top-right ul
+        z-index: 1
+        position: relative
+        +gapTB(padding, 16px)
+        +res-ab(lg)
+            display: inline-flex
+        li > i
+            color: white
+        &:before
+            content: ''
+            z-index: -1
+            height: 100%
+            width: 100vw
+            +poLT(-80px, 0)
+            background: $heading-color
+            +res-bl(lg)
+                left: 50%
+                transform: translate(-50%)
+    +res-ab(lg)
+        .navbar-collapse > ul > li
+            > a,
+            > .dropdown-btn
+                color: white
+    .main-menu .navbar-header .navbar-toggle .icon-bar
+        background: white
+    .header-number,
+    .header-number a,
+    .menu-btns > button,
+    .nav-search > button
+        color: white
+    .menu-sidebar > button
+        border-color: rgba(255, 255, 255, 0.1)
+        .icon-bar
+            background: white
+    
+    &.fixed-header .header-upper
+        background: #222222
+        
+    &.header-one
+        .main-menu
+            .navbar-collapse
+                background: #232C26
+                border-color: rgba(255, 255, 255, 0.1)
+    
+/* Menu Sidebar */
+.menu-sidebar
+    display: flex
+    > button
+        +size(50px)
+        border-radius: 50%
+        +flexcenter(center)
+        flex-direction: column
+        border: 1px solid $border-color
+        .icon-bar
+            width: 20px
+            height: 2px
+            margin: 3px 0
+            transition: 0.3s
+            background: $heading-color
+            &:nth-child(2)
+                width: 25px
+        &:hover .icon-bar
+            width: 25px
+        
+/** hidden-sidebar *
+.hidden-bar
+    position: fixed
+    right: -350px
+    top: 0px
+    opacity: 0
+    width: 350px
+    height: 100%
+    z-index: 99999
+    overflow-y: auto
+    visibility: hidden
+    background-color: #222222
+    border-left: 1px solid #231b26
+    transition: all 0.5s ease
+    +res-bl(xs)
+        width: 300px
+    .social-style-one
+        a
+            +size(40px)
+            line-height: 40px
+
+.side-content-visible .hidden-bar
+    right: 0px
+    opacity: 1
+    visibility: visible
+
+.hidden-bar .inner-box
+    position: relative
+    padding: 100px 40px 50px
+    +res-bl(xs)
+        +gapLR(padding, 25px)
+    .cross-icon
+        position: absolute
+        right: 30px
+        top: 30px
+        cursor: pointer
+        color: #ffffff
+        font-size: 20px
+        transition: all 500ms ease
+    h4
+        position: relative
+        color: #ffffff
+        font-size: 25px
+        margin-bottom: 35px
+
+/*Appointment Form
+.hidden-bar .appointment-form
+    position: relative
+
+    .form-group
+        position: relative
+        margin-bottom: 20px
+
+    input
+        &[type="text"], &[type="email"]
+            position: relative
+            display: block
+            width: 100%
+            line-height: 23px
+            padding: 10px 25px
+            color: #ffffff
+            font-size: 16px
+            background: none
+            transition: all 300ms ease
+            border: 1px solid rgba(255, 255, 255, 0.1)
+
+    textarea
+        position: relative
+        display: block
+        width: 100%
+        line-height: 23px
+        padding: 10px 25px
+        color: #ffffff
+        font-size: 16px
+        border: 1px solid rgba(255, 255, 255, 0.1)
+        background: none
+        transition: all 300ms ease
+        resize: none
+
+    input::placeholder
+        font-size: 14px
+        color: #bdbdbd
+
+    textarea
+        &::placeholder
+            font-size: 14px
+            color: #bdbdbd
+
+    .form-group button
+        width: 100%
+        font-size: 16px
+        padding: 10px 15px
+        margin-bottom: 20px
+        border-color: white
+
+.form-back-drop
+    position: fixed
+    left: 100%
+    top: 0px
+    width: 100%
+    height: 100%
+    opacity: 0
+    background: rgba(0, 0, 0, 0.7)
+    visibility: hidden
+    z-index: 9990
+    transition: all 0.5s ease
+
+.side-content-visible .form-back-drop
+    opacity: 1
+    left: 0
+    visibility: visible
+    
+    
+// Header Top
+.header-top
+    +res-bl(lg)
+        padding-bottom: 20px
+    +res-bl(md)
+        display: none
+    .top-left
+        color: $heading-color
+        font-weight: 500
+        line-height: 20px
+        +gapTB(padding, 18px)
+        position: relative
+        z-index: 1
+        +res-ab(lg)
+            &:before
+                content: ''
+                +poRT(0)
+                background: $primary-color
+                +size(50vw, 100%)
+                clip-path: polygon(0 0, calc(100% - 20px) 0%, 100% 100%, 0% 100%)
+                z-index: -1
+        +res-bl(lg)
+            color: rgba(255, 255, 255, 0.65)
+    .top-right
+        ul
+            display: flex
+            flex-wrap: wrap
+            align-items: center
+            justify-content: center
+            +res-ab(lg)
+                justify-content: flex-end
+            li
+                line-height: 1
+                &:not(:last-child)
+                    margin-right: 50px
+                    padding-right: 50px
+                    border-right: 2px solid rgba(255, 255, 255, 0.2)
+                    +res-bl(xl)
+                        margin-right: 20px
+                        padding-right: 20px
+                > i
+                    color: $primary-color
+                    margin-right: 10px
+                a
+                    color: rgba(255, 255, 255, 0.65)
+                    &:hover
+                        color: $primary-color
+        

assets/sass/sections/_hero.sass

@@ -0,0 +1,219 @@
+/*******************************************************/
+/******************** ## Hero Area ********************/
+/*******************************************************/
+.hero-title
+    z-index: 2
+    color: white
+    font-weight: 700
+    font-size: 200px
+    position: relative
+    text-align: center
+    text-transform: uppercase
+    +res-bl(lb)
+        font-size: 150px
+    +res-bl(lp)
+        font-size: 120px
+    +res-bl(lg)
+        font-size: 80px
+    +res-bl(md)
+        font-size: 60px
+    +res-bl(sm)
+        font-size: 50px
+    +res-bl(ms)
+        font-size: 40px
+    +res-bl(xs)
+        font-size: 35px
+        
+.main-hero-image
+    height: 790px
+    margin-top: -8%
+    position: relative
+    border-radius: 20px
+    +res-bl(xxl)
+        height: 555px
+    +res-bl(lg)
+        height: 450px
+    +res-bl(sm)
+        height: 400px
+    &:before
+        +poLT(0)
+        content: ''
+        +size(100%)
+        background: linear-gradient(180deg, #1D231F 0%, rgba(29, 35, 31, 0) 100%)
+    
+.search-filter-inner
+    display: flex
+    z-index: 2
+    position: relative
+    margin-top: -50px
+    background: white
+    border-radius: 12px
+    padding: 28px 55px 10px
+    box-shadow: 10px 4px 60px rgba(197, 197, 197, 0.25)
+    +res-bl(lp)
+        +gapLR(padding, 35px)
+    +res-bl(xl)
+        flex-wrap: wrap
+    .filter-item
+        min-width: 18%
+        padding-left: 28px
+        position: relative
+        margin-bottom: 15px
+        padding-right: 20px
+        margin-right: 30px
+        border-right: 1px solid $border-color
+        +res-bl(md)
+            margin-right: 15px
+            padding-right: 5px
+            width: calc(50% - 15px)
+        +res-bl(ms)
+            width: 100%
+            margin-right: 0
+        .icon
+            +poLT(0, 3px)
+        .title
+            font-size: 14px
+        .nice-select
+            border: none
+            line-height: 1.1
+            padding: 0 20px 0 0
+            .current
+                font-weight: 500
+                color: $heading-color
+            &:after
+                top: 0
+                +size(8px)
+    .search-button
+        align-self: center
+        margin-bottom: 15px
+        +res-ab(xl)
+            margin-left: auto
+            
+    &.style-two
+        margin-top: 0
+        border-radius: 10px
+        flex-direction: column
+        padding: 40px 30px 25px
+        background: $heading-color
+        +res-bl(xs)
+            +gapLR(padding, 20px)
+        .filter-item
+            width: 100%
+            max-width: none
+            margin-right: 0
+            border-right: none
+            margin-bottom: -1px
+            border-radius: 10px
+            background: #292E2A
+            padding: 15px 20px 20px 55px
+            border: 1px solid rgba(255, 255, 255, 0.07)
+            .icon
+                top: 20px
+                left: 30px
+            .title
+                color: #939393
+            .nice-select
+                background-color: transparent
+                .current
+                    color: white
+                .list li
+                    color: $base-color
+            
+/* Hero Two */
+.hero-area-two
+    +res-ab(xl)
+        padding-bottom: 160px
+
+.hero-image-two
+    min-height: 500px
+    border-radius: 10px
+    +res-ab(xl)
+        +poRB(0)
+        width: calc(50vw - 155px)
+        height: calc(100% - 10px)
+    
+.hero-content-two
+    max-width: 535px
+    +res-ab(lg)
+        padding-right: 20px
+    +res-bl(xl)
+        margin-bottom: 55px
+    h1
+        margin-bottom: 22px
+        letter-spacing: -2px
+        +res-bl(lb)
+            font-size: 72px
+        +res-bt(lg, lp)
+            font-size: 65px
+        +res-bl(md)
+            font-size: 55px
+        +res-bl(sm)
+            font-size: 50px
+        +res-bl(ms)
+            font-size: 45px
+        +res-bl(xs)
+            font-size: 40px
+    p
+        line-height: 1.66
+        +res-ab(xs)
+            font-size: 18px
+            
+/* Hero Three */
+.hero-area-three
+    +gapLR(margin, 30px)
+    +res-bl(lg)
+        +gapLR(margin, 15px)
+
+.hero-content-three
+    .subtitle
+        +res-ab(lg)
+            font-size: 20px
+    h1
+        font-size: 80px
+        font-weight: 500
+        margin-bottom: 50px
+        letter-spacing: -2px
+        +res-bl(xl)
+            font-size: 65px
+        +res-bl(md)
+            font-size: 55px
+            margin-bottom: 30px
+        +res-bl(sm)
+            font-size: 50px
+        +res-bl(ms)
+            font-size: 42px
+        +res-bl(xs)
+            font-size: 36px
+    p
+        +res-ab(xxl)
+            font-size: 27px
+        +res-bt(md, xxl)
+            font-size: 22px
+        span
+            color: white
+            font-weight: 600
+            padding-left: 8px
+            padding-right: 5px
+            border-radius: 12px
+            background: $secondary-color
+            
+.hero-shapes
+    .shape
+        z-index: -1
+        position: absolute
+        &.one
+            left: 0
+            top: 6%
+            max-width: 30%
+        &.two
+            top: 0
+            right: 25%
+            max-width: 10%
+        &.three
+            left: 5%
+            bottom: 3%
+            max-width: 20%
+        &.four
+            bottom: 0
+            right: 3%
+            max-width: 30%

assets/sass/sections/_instagram.sass

@@ -0,0 +1,12 @@
+/*******************************************************/
+/***************** ## Instagram Area *****************/
+/*******************************************************/
+.footer-instagram .row
+    --bs-gutter-x: 10px
+
+.instagram-item
+    display: block
+    margin-bottom: 10px
+    img
+        width: 100%
+        border-radius: 7px

assets/sass/sections/_mobile-app.sass

@@ -0,0 +1,52 @@
+/*******************************************************/
+/***************** ## Mobile App Area *****************/
+/*******************************************************/
+.mobile-app-content
+    max-width: 475px
+    .section-title h2
+        +res-bt(lg, xl)
+            font-size: 40px
+    .list-style-two
+        display: flex
+        flex-wrap: wrap
+        justify-content: space-between
+        li
+            width: 48%
+            +res-bl(ms)
+                width: 100%
+    
+.google-play-app-store
+    display: flex
+    align-items: center
+    a
+        max-width: 205px
+        &:first-child
+            margin-right: 25px
+        img
+            border-radius: 8px
+            
+.mobile-app-images
+    z-index: 1
+    position: relative
+    max-width: max-content
+    +res-ab(xl)
+        margin-left: auto
+    .images
+        display: flex
+        img
+            &:nth-child(1)
+                max-width: 23%
+                margin-bottom: 3.5%
+                align-self: flex-end
+            &:nth-child(2)
+                max-width: 50%
+                margin-bottom: 1%
+                margin-left: -0.7%
+            &:nth-child(3)
+                max-width: 26%
+                margin-top: 10%
+                align-self: flex-start
+    .bg
+        width: 83%
+        z-index: -1
+        +poLB(6%, 0)

assets/sass/sections/_newsletter.sass

@@ -0,0 +1,38 @@
+/*******************************************************/
+/***************** ## Newsletter Area *****************/
+/*******************************************************/
+.newsletter-content-part
+    max-width: 545px
+    > p
+        margin-bottom: 0
+        +res-ab(xs)
+            margin-left: 30px
+            
+.text-white.newsletter-content-part .newsletter-form input
+    color: $base-color
+            
+.newsletter-bg-image
+    +poLB(0)
+    z-index: -1
+    text-align: center
+    width: calc(50vw - 140px)
+    +res-bl(lg)
+        width: 100%
+
+.newsletter-image-part
+    min-height: 500px
+    +res-ab(lg)
+        height: 100%
+        width: calc(50vw - 200px)
+        +poLT(calc(50vw - 140px), 0)
+            
+.newsletter-three
+    .newsletter-image-part
+        right: 0
+        left: auto
+        +res-ab(lg)
+            width: calc(50vw - 15px)
+    .newsletter-bg-image
+        +res-ab(lg)
+            width: calc(50vw - 15px)
+            

assets/sass/sections/_pricing.sass

@@ -0,0 +1,64 @@
+/*******************************************************/
+/******************* ## Pricing Area *******************/
+/*******************************************************/
+.pricing-plan-item
+    position: relative
+    margin-bottom: 30px
+    border-radius: 10px
+    padding: 30px 10px 40px
+    background: $lighter-color
+    border: 1px solid $border-color
+    .images
+        display: flex
+        margin-top: 30px
+        margin-right: -5px
+        margin-bottom: 30px
+        img
+            margin-right: 5px
+            border-radius: 7px
+            &.one
+                width: calc(25% - 5px)
+            &.two
+                width: calc(50% - 5px)
+            &.three
+                width: calc(75% - 5px)
+    .content
+        +gapLR(padding, 40px)
+        +res-bt(md, lg)
+            +gapLR(padding, 25px)
+        +res-bl(ms)
+            +gapLR(padding, 20px)
+        .price
+            display: block
+            margin-bottom: 5px
+            span
+                @extend %h2
+        h6
+            margin-bottom: 24px
+            +res-ab(ms)
+                font-size: 22px
+            +res-bl(xs)
+                font-size: 18px
+        .theme-btn.style-three
+            margin-top: 15px
+            width: 100%
+    .badge
+        +poRT(10px)
+        font-size: 14px
+        font-weight: 400
+        padding: 7px 10px
+        border-radius: 7px
+        text-transform: uppercase
+        background: $primary-color
+    &.bgc-black
+        border-color: $heading-color
+        background-color: $heading-color
+        .list-style-four li:before
+            color: $secondary-color
+        .theme-btn.style-three
+            color: white
+            background: $primary-color
+            border-color: $primary-color
+    &.text-white
+        .price span
+            color: white

assets/sass/sections/_products.sass

@@ -0,0 +1,189 @@
+/*******************************************************/
+/****************** ## Products Area ******************/
+/*******************************************************/
+.product-item
+    margin-bottom: 40px
+    .image
+        max-height: 400px
+        position: relative
+        border-radius: 7px
+        margin-bottom: 18px
+        padding-bottom: 110%
+        background: $lighter-color
+        border: 1px solid $border-color
+        img
+            +absmiddle()
+            max-width: 80%
+            max-height: 80%
+    .content
+        h6
+            margin-bottom: 0
+
+.product-slider
+    +gapLR(margin, -15px)
+    .product-item
+        +gapLR(margin, 15px)
+    .slick-dots
+        margin-top: 10px
+            
+.shop-shorter
+    display: flex
+    flex-wrap: wrap
+    align-items: center
+    +res-bl(xl)
+        margin-right: -10px
+    .grid-list
+        display: flex
+        align-items: center
+        li
+            margin-right: 15px
+    .nice-select
+        font-size: 14px
+        max-width: 190px
+        margin-bottom: 10px
+        border-radius: 22px
+        width: calc(50% - 10px)
+        padding: 1px 35px 1px 20px
+        border: 1px solid $border-color
+        &:not(:last-child)
+            margin-right: 10px
+        &:after
+            +size(8px)
+            right: 20px
+            margin-top: -5px
+    .sort-text
+        font-weight: 500
+        color: $heading-color
+        
+    &.style-two
+        .sort-text
+            +res-ab(sm)
+                font-size: 20px
+        .nice-select
+            width: auto
+            font-size: 16px
+            border-color: black
+            +res-ab(sm)
+                max-width: 230px
+                border-radius: 25px
+                padding: 4px 45px 4px 25px
+                
+/* Product Details */
+.preview-images
+    margin-bottom: 30px
+    border-radius: 10px
+    background: $lighter-color
+    border: 1px solid $border-color
+    .preview-item
+        position: relative
+        padding-bottom: 94%
+        img
+            +absmiddle()
+            max-width: 60%
+            max-height: 70%
+.thumb-images
+    justify-content: space-between
+    .thumb-item
+        position: relative
+        padding-bottom: 30%
+        border-radius: 7px
+        width: calc(33% - 18px)
+        background: $lighter-color
+        border: 1px solid $border-color
+        img
+            +absmiddle()
+            max-width: 65%
+            max-height: 70%
+
+.product-details-content
+    +res-ab(xl)
+        margin-top: 55px
+        max-width: 520px
+        margin-left: auto
+    .section-title
+        h2
+            margin-bottom: 7px
+    .ratting
+        i
+            font-size: 16px
+    .price
+        display: block
+        @extend %h5
+        +res-bl(xs)
+            font-size: 18px
+    .add-to-cart
+        display: flex
+        flex-wrap: wrap
+        align-items: center
+        h6
+            margin-bottom: 0
+            margin-top: 15px
+            margin-right: 30px
+        .theme-btn
+            margin-top: 15px
+        input
+            font-size: 22px
+            font-weight: 600
+            max-width: 130px
+            margin-top: 15px
+            margin-right: 20px
+            padding: 10px 30px
+            border-radius: 25px
+            background: transparent
+            border: 1px solid $border-color
+    .wishlist
+        align-items: center
+        display: inline-flex
+        i
+            margin-right: 5px
+    .category-tags li
+        display: flex
+        flex-wrap: wrap
+        align-items: center
+        b
+            min-width: 85px
+            font-weight: 600
+            margin-right: 5px
+            margin-bottom: 5px
+            color: $heading-color
+        a
+            margin-bottom: 5px
+            display: inline-block
+            &:not(:last-child)
+                margin-right: 5px
+                &:after
+                    content: ','
+            
+.product-tab
+    margin-right: -10px
+    li
+        margin-right: 10px
+        margin-bottom: 10px
+        a
+            cursor: pointer
+            font-weight: 600
+            transition: 0.5s
+            padding: 10px 35px
+            border-radius: 30px
+            display: inline-block
+            color: $heading-color
+            border: 1px solid $border-color
+            +res-bl(md)
+                font-size: 14px
+                padding: 7px 20px
+            i
+                margin-left: 10px
+                transform: rotate(-45deg)
+            &.active
+                color: white
+                background: $primary-color
+                border-color: $primary-color
+                
+.tab-content
+    .list-style-two li
+        font-size: 16px
+        font-weight: 400
+        &:before
+            +size(20px)
+            font-size: 10px
+            line-height: 20px

assets/sass/sections/_skillbar.sass

@@ -0,0 +1,31 @@
+/*******************************************************/
+/****************** ## Skillbar Area *******************/
+/*******************************************************/
+.skillbar
+    height: 15px
+    margin-top: 70p
+    position: relative
+    border-radius: 7.5px
+    border: 1px solid $base-color
+    .skillbar-title,
+    .skill-bar-percent
+        top: -40px
+        color: white
+        font-size: 18px
+        font-weight: 500
+        position: absolute
+        color: $heading-color
+    .skillbar-title
+        z-index: 2
+    .skill-bar-percent
+        right: 0
+    .skillbar-bar
+        width: 0
+        margin: 4px
+        height: 5px
+        position: relative
+        border-radius: 2.5px
+        background-image: none
+        overflow: inherit !important
+        background-color: $secondary-color
+        

assets/sass/sections/_team.sass

@@ -0,0 +1,49 @@
+/*******************************************************/
+/******************** ## Team Area ********************/
+/*******************************************************/
+.team-area
+    &:before
+        +poLT(0)
+        z-index: -1
+        content: ''
+        +size(100%)
+        background: linear-gradient(1.41deg, rgba(29, 35, 31, 0.3) 1.2%, #1D231F 98.81%)
+    
+.team-item
+    margin-bottom: 30px
+    img
+        width: 100%
+        border-radius: 10px
+    .content
+        +poLB(10px)
+        right: 10px
+        background: white
+        text-align: center
+        border-radius: 10px
+        padding: 15px 10px
+        h6
+            margin-bottom: 0
+        .designation
+            display: block
+        .social-style-one
+            display: none
+            margin-top: 10px
+            margin-bottom: 5px
+            a
+                +size(40px)
+                line-height: 40px
+                display: inline-block
+                &:not(:hover)
+                    color: $primary-color
+                    background: rgba($primary-rgb, 0.15)
+                
+.guide-shapes
+    .shape
+        top: 0
+        z-index: -1
+        max-width: 15%
+        position: absolute
+        &.one
+            left: 0
+        &.two
+            right: 2%

assets/sass/sections/_testimonials.sass

@@ -0,0 +1,118 @@
+/*******************************************************/
+/**************** ## Testimonials Area ****************/
+/*******************************************************/
+.testimonials-wrap
+    padding: 100px 85px
+    border-radius: 20px
+    border: 1px solid $border-color
+    +res-bl(lp)
+        +gapLR(padding, 40px)
+    +res-bl(md)
+        +gapLR(padding, 25px)
+
+.testimonial-left-image
+    min-height: 500px
+    border-radius: 20px
+    background-size: cover
+    background-position: center
+    +res-ab(lg)
+        +poRT(0, -30px)
+        width: calc(50vw - 20%)
+        height: calc(100% + 60px)
+    
+.testimonial-right-content
+    max-width: 570px
+    +res-ab(lg)
+        margin-left: auto
+    
+.testimonial-item
+    .text
+        font-size: 30px
+        line-height: 1.5
+        margin-bottom: 60px
+        +res-bl(md)
+            font-size: 25px
+        +res-bl(sm)
+            font-size: 22px
+        +res-bl(xs)
+            font-size: 20px
+    
+.testi-header
+    display: flex
+    flex-wrap: wrap
+    align-items: center
+    margin-bottom: 15px
+    .quote
+        font-size: 60px
+        margin-right: 30px
+        margin-bottom: 15px
+        color: $primary-color
+        +res-bl(md)
+            font-size: 45px
+            margin-right: 15px
+    h4
+        margin-right: 15px
+        margin-bottom: 15px
+        +res-bl(md)
+            font-size: 20px
+    .ratting
+        padding: 5px 12px
+        margin-bottom: 15px
+        border-radius: 20px
+        background: $secondary-color
+        i
+            color: white
+            +res-ab(md)
+                font-size: 16px
+        
+.author
+    display: flex
+    align-items: center
+    .image
+        max-width: 65px
+        margin-right: 25px
+        +res-bl(sm)
+            margin-right: 15px
+        +res-bl(xs)
+            max-width: 55px
+        img
+            border-radius: 50%
+    .content
+        h5
+            margin-bottom: 0
+            +res-bl(xs)
+                font-size: 18px
+                
+.testimonial-left-content
+    position: relative
+    max-width: 595px
+    padding-right: 50px
+    padding-bottom: 60px
+    +res-bl(ms)
+        padding-right: 20px
+    .happy-customer
+        +poRB(0)
+        padding: 35px 40px 40px
+        max-width: 270px
+        border-radius: 10px
+        +res-bl(ms)
+            padding: 25px 30px 30px
+        h6
+            font-size: 18px
+            font-weight: 400
+            margin-bottom: 18px
+            letter-spacing: -0.02em
+        hr
+            margin-top: 30px
+            margin-bottom: 20px
+            opacity: .3
+        p
+            margin-bottom: 13px
+        .testi-header
+            margin-bottom: 0
+            .ratting
+                margin-bottom: 0
+        &.bgc-black
+            outline: 5px solid white
+            .feature-authors > span
+                background: $primary-color

assets/sass/sections/_videos.sass

@@ -0,0 +1,87 @@
+/*******************************************************/
+/****************** ## Videos Area ********************/
+/*******************************************************/ 
+/* Video Play */
+.video-play
+    padding-left: 4px
+    +circle(white, 65px)
+    display: inline-block
+    color: $primary-color
+    &:hover
+        color: white
+        background: $primary-color
+        
+/* Video Play With Text */
+.video-play-text
+    align-items: center
+    display: inline-flex
+    > i
+        font-size: 14px
+        margin-right: 15px
+        color: $heading-color
+        +circle($lighter-color, 55px)
+        border: 1px solid $border-color
+    span
+        font-weight: 500
+        color: $heading-color
+        font-family: $heading-font
+        text-decoration: underline
+
+/* Video Section */
+.video-title-wrap
+    z-index: 2
+    position: relative
+    margin-bottom: -7%
+    +res-bl(lg)
+        margin-bottom: -5%
+
+.video-title
+    color: white
+    display: block
+    font-size: 180px
+    line-height: 0.93
+    font-family: $heading-font
+    +res-bl(xl)
+        font-size: 120px
+    +res-bl(lg)
+        font-size: 90px
+    +res-bl(md)
+        font-size: 70px
+    +res-bl(sm)
+        font-size: 50px
+    +res-bl(xs)
+        font-size: 40px
+        
+.video-area
+    .for-bg
+        +poLT(0)
+        z-index: -1
+        +size(100%, 80%)
+    .shape
+        +poRB(4%, 0)
+        max-width: 15%
+
+.video-wrap
+    +overlay($heading-color, 0.3)
+    &:before
+        z-index: 1
+        border-radius: 20px
+    img
+        border-radius: 20px
+    .video-play
+        z-index: 2
+        +size(100px)
+        +absmiddle()
+        color: $secondary-color
+        font-size: 18px
+        line-height: 100px
+        background: white
+        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7)
+        animation: pulse 1.5s infinite linear
+        +res-bl(lg)
+            +size(70px)
+            line-height: 70px
+        +res-bl(ms)
+            +size(50px)
+            font-size: 15px
+            line-height: 50px

assets/sass/sections/_widgets.sass

@@ -0,0 +1,327 @@
+/*******************************************************/
+/***************** ## Sidebar Widgets *****************/
+/*******************************************************/
+.widget
+    &:not(:last-child)
+        margin-bottom: 45px
+        
+.widget-title
+    margin-bottom: 14px
+    
+.widget-search
+    form
+        display: flex
+        padding: 15px 30px
+        align-items: center
+        background: $lighter-color
+        input
+            padding: 0
+            border: none
+            background: transparent
+        button
+            flex: none
+            background: transparent
+            
+.widget-gallery .gallery
+    display: flex
+    flex-wrap: wrap
+    margin-right: -10px
+    margin-bottom: -10px
+    a
+        margin-right: 10px
+        margin-bottom: 10px
+        max-width: calc(33.333% - 10px)
+        img
+            border-radius: 7px
+            
+.widget-cta
+    z-index: 1
+    border: none
+    overflow: hidden
+    position: relative
+    padding: 0 !important
+    background: $heading-color
+    .content
+        padding: 40px
+        +res-bt(lg, xl)
+            +gapLR(padding, 25px)
+        +res-bl(xs)
+            +gapLR(padding, 25px)
+        .h6
+            display: block
+            font-weight: 300
+            margin-bottom: 5px
+        h3
+            margin-bottom: 20px
+            +res-bl(xs)
+                font-size: 28px
+        .theme-btn.style-two
+            padding: 5px 20px
+            font-size: 14px
+    .image img
+        width: 100%
+    .cta-shape
+        z-index: -1
+        +poRT(20px, 0)
+        max-width: 44%
+
+.price-filter-wrap
+    margin-top: 25px
+    .price
+        display: flex
+        margin-top: 20px
+        align-items: center
+        color: $heading-color
+        span
+            margin-right: 5px
+        input
+            padding: 0
+            border: none
+            font-size: 16px
+            font-weight: 500
+            background: transparent
+        
+.ui-widget.ui-widget-content
+    height: 5px
+    border: none
+    cursor: pointer
+    background: rgba($primary-rgb, 0.2)
+.ui-widget-header
+    background: $primary-color
+.ui-slider .ui-slider-handle
+    +size(12px)
+    top: -4px
+    border: none
+    cursor: e-resize
+    border-radius: 50%
+    background: $primary-color
+            
+.widget-news li
+    display: flex
+    align-items: center
+    &:not(:last-child)
+        margin-bottom: 30px
+    .image
+        flex: none
+        max-width: 100px
+        margin-right: 30px
+        +res-bt(lg, xl)
+            max-width: 80px
+            margin-right: 15px
+        +res-bl(xs)
+            max-width: 75px
+            margin-right: 12px
+        img
+            border-radius: 7px
+    .content
+        h6
+            margin-bottom: 5px
+            +res-bt(lg, xl)
+                font-size: 15px
+            +res-bt(xl, lp)
+                font-size: 17px
+            +res-bl(ms)
+                font-size: 16px
+            +res-bl(xs)
+                font-size: 15px
+        .date
+            +res-bl(xs)
+                font-size: 14px
+            i
+                margin-right: 5px
+    
+.tag-coulds
+    display: flex
+    flex-wrap: wrap
+    margin-right: -10px
+    margin-bottom: -10px
+    a
+        padding: 3px 15px
+        font-size: 16px
+        font-weight: 500
+        margin: 0 10px 10px 0
+        border-radius: 7px
+        border: 1px solid $border-color
+        &:hover
+            color: white
+            background: $secondary-color
+            border-color: $secondary-color
+        
+.widget-booking
+    form
+        .date
+            display: flex
+            align-items: center
+            justify-content: space-between
+            b
+                line-height: 1.3
+            input
+                max-width: 190px
+                padding: 5px 15px
+                border: 1px solid $border-color
+        .time
+            display: flex
+            align-items: center
+            justify-content: space-between
+            .radio-filter
+                width: 55%
+                display: flex
+                align-items: center
+                justify-content: space-between
+                li
+                    margin-bottom: 0
+        .tickets li
+            display: flex
+            align-items: center
+            justify-content: space-between
+            .nice-select
+                width: auto
+                border: none
+                padding: 0 18px 0 0
+                background: transparent
+                &:after
+                    +size(9px)
+                    right: 2px
+                    margin-top: -6px
+        h6
+            display: flex
+            align-items: center
+            justify-content: space-between
+            span
+                font-size: 1.2em
+                    
+/* Blog Sidebar */
+.blog-sidebar
+    .widget
+        padding: 40px 30px
+        border-radius: 10px
+        border: 1px solid $border-color
+        +res-bt(lg, xl)
+            +gapLR(padding, 20px)
+        +res-bl(xs)
+            +gapLR(padding, 20px)
+        &:not(:last-child)
+            margin-bottom: 30px
+        .widget-title
+            margin-top: -8px
+            margin-bottom: 25px
+            padding-bottom: 15px
+            border-bottom: 1px solid $border-color
+        .list-style-one,
+        .list-style-three
+            li:last-child
+                margin-bottom: 0
+            
+    .widget-search
+        padding: 0
+        
+/* Tour Sidebar */
+.tour-sidebar
+    .widget:not(.widget-cta)
+        background: $lighter-color
+        +res-ab(xl)
+            +gapLR(padding, 40px)
+    .widget-cta
+        .content
+            .h6
+                font-size: 14px
+            h3
+                font-size: 22px
+        .cta-shape
+            right: 0
+                    
+/* Shop Sidebar */
+.radio-filter li
+    display: flex
+    align-items: center
+    &:not(:last-child)
+        margin-bottom: 10px
+    input
+        +size(15px)
+        flex: none
+        padding: 0
+        margin-top: 0
+        margin-right: 7px
+        border-radius: 50%
+        position: relative
+        background: transparent
+        border: 1px solid $border-color
+        &:before
+            content: ''
+            +size(5px)
+            opacity: 0
+            +absmiddle()
+            transition: 0.2s
+            border-radius: 50%
+            background: $secondary-color
+        &:checked
+            background: transparent
+            border-color: $secondary-color
+            &:before
+                opacity: 1
+        &:focus
+            box-shadow: none
+    label
+        width: 100%
+        display: flex
+        margin-bottom: 0
+        align-items: center
+        justify-content: space-between
+        .ratting i
+            font-size: 12px
+            line-height: 1.8
+            &.white
+                color: #AAAAAA
+                
+.widget-tour
+    .tour-grid.style-three
+        border: none
+        border-radius: 0
+        margin-bottom: 0
+        background: transparent
+        &:not(:last-child)
+            margin-bottom: 22px
+            padding-bottom: 18px
+            border-bottom: 1px solid $border-color
+        .image
+            width: 100%
+            margin: 0 0 12px
+        .content
+            padding: 0
+            .destination-header
+                font-size: 14px
+                justify-content: space-between
+                .location
+                    margin-right: 0
+                .ratting
+                    padding: 0
+            h6
+                font-size: 16px
+                font-weight: 500
+                margin-bottom: 0
+                color: $heading-color
+
+.shop-sidebar
+    padding: 30px
+    border-radius: 10px
+    border: 1px solid $border-color
+    +res-bt(lg, xl)
+        +gapLR(padding, 15px)
+    .widget
+        &:not(:last-child)
+            margin-bottom: 30px
+            padding-bottom: 30px
+            border-bottom: 1px solid $border-color
+        .widget-title
+            margin-bottom: 15px
+    + .widget-cta
+        border-radius: 7px
+        .content
+            .h6
+                font-size: 14px
+            h3
+                font-size: 22px
+        .cta-shape
+            right: 0
+            top: 22%
+            max-width: 35%

assets/sass/style.sass

@@ -0,0 +1,94 @@
+@charset "UTF-8";
+/*----------------------------------------------------------------------
+    Template Name: Ravelo - Travel & Tour Booking HTML Template
+    Template URI: https://webtend.net/demo/html/ravelo/
+    Author: WebTend
+    Author URI:  https://webtend.net/
+    Version: 1.0
+
+    Note: This is Main Style CSS File.
+/*----------------------------------------------------------------------
+	CSS INDEX
+	----------------------
+
+    ## Default Style
+    ## Common Classes
+    ## Repeat Style
+    ## Padding Margin
+    ## Custom Animation
+    ## Header style
+    ## Hero Area
+    ## Banner Area
+    ## Destinations Area
+    ## Counter Area
+    ## About Area
+    ## Features Area
+    ## Mobile App
+    ## Testimonials
+    ## Instagram
+    ## Newsletter
+    ## Team Area
+    ## CTA Area
+    ## Benefit Area
+    ## Products
+    ## Client Logo
+    ## Contact Forms
+    ## Videos
+    ## Gallery
+    ## Blog Area
+    ## FAQs Area
+    ## 404 Error
+    ## Pricing
+    ## Skillbar
+    ## Activity Area
+    ## Sidebar Widgets
+    ## Main Footer
+
+/* --------------------------------------------------------------
+
+
+// IMPORT ALL SASS DIRECTORY FILES
+
+// global variables
+@import "variables"
+
+// global mixins
+@import "mixins"
+
+// base directories
+@import "default"
+@import "common-classes"
+@import "extend"
+@import "spacing"
+@import "custom-animation"
+
+// All Sections
+@import "sections/header"
+@import "sections/hero"
+@import "sections/banner"
+@import "sections/destinations"
+@import "sections/counter"
+@import "sections/about"
+@import "sections/features"
+@import "sections/mobile-app"
+@import "sections/testimonials"
+@import "sections/instagram"
+@import "sections/newsletter"
+@import "sections/team"
+@import "sections/cta"
+@import "sections/benefit"
+@import "sections/products"
+@import "sections/client-logo"
+@import "sections/contact"
+@import "sections/videos"
+@import "sections/gallery"
+@import "sections/blog"
+@import "sections/faqs"
+@import "sections/error"
+@import "sections/pricing"
+@import "sections/skillbar"
+@import "sections/activity"
+@import "sections/widgets"
+@import "sections/footer"
+
+// import any additional sass below...