Gecko [ dp-client.com ]

Name	Size	Permission
fonts	[ DIR ]	drwxr-xr-x
all.css	76.36 KB	-rw-r--r--
animate.css	58.44 KB	-rw-r--r--
bootstrap-icons.css	73.01 KB	-rw-r--r--
bootstrap.min.css	151.25 KB	-rw-r--r--
boxicons.min.css	62.29 KB	-rw-r--r--
jquery-ui.css	36.54 KB	-rw-r--r--
jquery.countdown.css	933 B	-rw-r--r--
magnific-popup.css	7.13 KB	-rw-r--r--
nice-select.css	4.05 KB	-rw-r--r--
odometer.css	3.4 KB	-rw-r--r--
select2.min.css	14.84 KB	-rw-r--r--
slick-theme.css	3.27 KB	-rw-r--r--
slick.css	1.85 KB	-rw-r--r--
style - Copy.css	248.12 KB	-rw-r--r--
style.css	287.06 KB	-rw-r--r--
style.css.map	110.55 KB	-rw-r--r--
style.scss	314.21 KB	-rw-r--r--
swiper-bundle.css	18.46 KB	-rw-r--r--

Code Editor : style.scss

/*
Template Name: Astrip - Tour Booking and Travel Agency HTML Template
*/

/*================================================
1. Mixins Css
2. Global CSS
3. Section Title
4. Buttons
5. Preloader
6. Pagination
7. search area
8. Mobile-menu 
9. Topbar-section
10. Header-section
11. Banner-section
12. Intro-section
13. About-section
14. Practice-area-section
15. Info-section
16. Casestudy Section
17. Attorney Section
18. Latest News Section
19. Lawyer Profile Section
20. Error-page
21. Footer-section
22. Testimonial Seciton
23. Breadcrumb-section
24. Service details
25. Faq section
26. History section

================================================*/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

:root {
    /*color Variable*/
    --primary-color2: #C2272D;
    --primary-color3: #C2272D;
    --primary-color1: #C2272D;

--primary-color1-light: rgba(144, 185, 86, 0.7);
    --primary1-dark: #359D9E;

--white: #fff;
    --text-primary: #09100D;
    --icon-primary: #C2272D;
    --text-secondary: #5E5E5E;
    --text-light: #878787;
    --border-color: #DDDDDD;
    
    --font-merriw: 'Merriweather', serif;
    --font-work-sans: 'Work Sans', sans-serif;

}

::selection {
    color: var(--white);
    background: var(--primary-color1);
}

/*================================================
1. Mixins Css
=================================================*/

// flex-box
@mixin flex($position) {
    display: flex;
    justify-content: $position;
    flex-wrap: wrap;
    align-items: center;
}

@mixin img-adjust {
    background-size: cover;
    background-repeat: no-repeat;
}

@mixin font($font-size, $font-weight, $color) {
    font-size: $font-size;
    font-weight: $font-weight;
    color: $color;
}

@mixin list($style, $margin, $padding) {
    list-style: $style;
    margin: $margin;
    padding: $padding;
}

@mixin display($none, $hidden) {
    display: $none;
    visibility: $hidden;
}

@mixin circle($width, $height, $line-height, $center, $bor-radius) {
    width: $width;
    height: $height;
    line-height: $line-height;
    text-align: center;
    border-radius: 50%;
}

// xl-device=====

@mixin fifteen-down-device {
    @media (max-width:1500px) {
        @content;
    }
}

@mixin xxl-down-device {
    @media (max-width:1399px) {
        @content;
    }
}

@mixin xl-down-device {
    @media (max-width:1199px) {
        @content;
    }
}

@mixin xxl-device {
    @media (min-width:1400px) and (max-width:1599px) {
        @content;
    }
}

@mixin xl-device {
    @media (min-width:1200px) and (max-width:1399px) {
        @content;
    }
}

@mixin lg-device {
    @media (min-width:992px) and (max-width:1199px) {
        @content;
    }
}

@mixin lg-up-device {
    @media (min-width:992px) {
        @content;
    }
}

@mixin lg-down-device {
    @media (max-width:991px) {
        @content;
    }
}

// md-device============
@mixin md-device {
    @media (min-width:768px) and (max-width:991px) {
        @content;
    }
}

@mixin md-up-device {
    @media (min-width:768px) {
        @content;
    }
}

@mixin md-down-device {
    @media (max-width:767px) {
        @content;
    }
}

// sm-device
@mixin sm-device {
    @media (min-width: 576px) and (max-width:768px) {
        @content;
    }
}

@mixin sm-down-device {
    @media (max-width:576px) {
        @content;
    }
}

/*================================================
2. Global Css
=================================================*/
html {
    font-size: 62.5%;
    scroll-behavior: smooth;

@include xl-device() {
        font-size: 60%;
    }

@include lg-device() {
        font-size: 58%;
    }

@include md-device() {
        font-size: 57%;
    }

@include sm-device() {
        font-size: 56%;
    }

@include sm-down-device() {
        font-size: 55%;
    }

}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary);
    font-family: var(--font-merriw);
}

body {
    font-family: var(--font-work-sans);
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
}

button {
    outline: none;
    border: none;
}

a {
    color: unset;
    text-decoration: none;

&:focus {
        outline: 0 solid;
    }

&:hover {
        text-decoration: none;
        color: unset;
    }
}

input:focus,
textarea:focus,
button:focus {
    outline: none;
}

i.bx {
    vertical-align: middle;
}

.para {
    font-size: 17px;
    font-weight: 400;
    font-family: var(--font-work-sans);
    color: var(--text-secondary);
    line-height: 1.6;
}
.pt-120 {
    padding-top: 120px;

@include lg-device() {
        padding-top: 100px;
    }

@include lg-down-device() {
        padding-top: 90px;
    }
}
.pt-90 {
    padding-top: 90px;

@include lg-device() {
        padding-top: 70px;
    }

@include lg-down-device() {
        padding-top: 60px;
    }
}
.pb-90 {
    padding-bottom: 90px;

@include lg-device() {
        padding-bottom: 70px;
    }

@include lg-down-device() {
        padding-bottom: 60px;
    }
}
.pb-120 {
    padding-bottom: 120px;

@include lg-device() {
        padding-bottom: 100px;
    }

@include lg-down-device() {
        padding-bottom: 90px;
    }
}
.pb-65 {
    padding-bottom: 65px;
}
.mt-120 {
    margin-top: 120px;

@include lg-device() {
        margin-top: 100px;
    }

@include lg-down-device() {
        margin-top: 90px;
    }
}
.mb-120 {
    margin-bottom: 120px;
}
.pt-80 {
    padding-top: 80px;
}
.pt-50 {
    padding-top: 50px;
}
.pb-80 {
    padding-bottom: 80px;
}
.pe-80 {
    padding-right: 80px;
}
.pb-60 {
    padding-bottom: 60px;
}
.mb-60 {
    margin-bottom: 60px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-45 {
    margin-bottom: 45px;
}
.mb-35 {
    margin-bottom: 35px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-40 {
    margin-top: 40px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mt-50 {
    margin-top: 50px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mt-60 {
    margin-top: 60px;
}

.mt-70 {
    margin-top: 70px;
}

.bg--light {
    background: #FAFAFA;
}

.eg-card {
    border-radius: 5px;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
}

.text--primary{
    color: var(--text-primary) !important;
}

/*=======================================
 3. scroll top
=======================================*/
// #button {
//     display: inline-block;
//     width: 40px;
//     height: 40px;
//     text-align: center;
//     border-radius: 4px;
//     position: fixed;
//     bottom: 40px;
//     right: 30px;
//     transition: background-color .3s, 
//       opacity .5s, visibility .5s;
//     opacity: 0;
//     visibility: hidden;
//     z-index: 1000;
//   }
//   #button:hover {
//     cursor: pointer;
//   }
//   #button:active {
//     background-color: #555;
//   }
//   #button.show {
//     opacity: 1;
//     visibility: visible;
//   }
.circle-container {
    background: transparent;
    position: fixed;
    right: 50px;
    bottom: 50px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset  0 0 0 2px rgba(0, 0, 0, 0.07);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
    @include lg-down-device(){
        display: none;
        visibility: hidden;
    }

&.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

&::after {
        position: absolute;
        font-family: 'Bootstrap-icons';
        content: '\F145';
        text-align: center;
        line-height: 46px;
        font-size: 28px;
        color: var(--primary-color1);
        left: 0;
        top: 0;
        height: 46px;
        width: 46px;
        cursor: pointer;
        display: block;
        z-index: 1;
        -webkit-transition: all 200ms linear;
        transition: all 200ms linear;
    }
    &:hover {
        &::after {
            position: absolute;
            font-family: 'Bootstrap-icons';
            content: '\F145';
            color: var(--green);
            -webkit-transition: all 200ms linear;
            transition: all 200ms linear;
        }
    }
    svg {
        path {
            fill: none; 
        }
        &.circle-progress {
            path {
                stroke: var(--primary-color1);
                stroke-width: 5;
                box-sizing:border-box;
                -webkit-transition: all 200ms linear;
                transition: all 200ms linear;
            }
        }
    }
    &.sibling-2{
        &::after {
            color: var(--primary-color2);
        }
        svg {
            &.circle-progress {
                path {
                    stroke: var(--primary-color2);
                }
            }
        }
    }
    &.sibling-3{
        &::after {
            color: var(--primary-color3);
        }
        svg {
            &.circle-progress {
                path {
                    stroke: var(--primary-color3);
                }
            }
        }
    }
}

/*=======================================
 3. section-title
=======================================*/
.section-title1 {
    text-align: center;
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;

span {
        display: block;
        font-family: var(--font-work-sans);
        @include font(1.8rem, 400, var(--primary-color1));
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 3px;
    }

h2 {
        @include font(4.2rem, 700, var(--text-primary));
        margin-bottom: 15px;
        margin-top: -7px;
        display: inline-block;
        font-family: var(--font-merriw);
        line-height: 1.4;
        @include sm-down-device(){
            font-size: 3.6rem;
        }
    }

img {
        max-width: 370px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

&.sibling2 {
        @include font(4rem, 600, var(--text-primary));
    }
}

.section-title2 {
    margin-bottom: 37px;

svg {
        fill: var(--primary-color2);
        margin: 0 auto;
        margin-bottom: 15px;
        opacity: 0.55;
    }

span {
        @include font(1.8rem, 400, var(--primary-color2));
        font-family: var(--font-satisfy);;
        margin-bottom: 0px;
        text-transform: uppercase;
        letter-spacing: 3px;
    }

h2 {
        @include font(4.2rem, 700, var(--text-primary));
        font-family: var(--font-merriw);
        margin-bottom: 20px;
        line-height: 1.4;
    }
}

.section-title3 {
    margin-bottom: 60px;
    span {
        @include font(1.8rem, 400, var(--primary-color2));
        font-family: var(--font-satisfy);
        margin-top: -6px;
        display: block;
        text-transform: uppercase;
        margin-bottom: 5px;
    }

h2 {
        @include font(4.2rem, 700, var(--text-primary));
        font-family: var(--font-merriw);
    }
}

.section-title5 {
    margin-bottom: 62px;

img {
        margin: 0 auto 10px auto;
        width: 15px;
    }

>span {
        font-size: 1.8rem;
        font-weight: 400;
        color: var(--text-secondary);
        font-family: var(--font-work-sans);
        letter-spacing: 2px;
        display: block;
        margin-bottom: 0px;
        text-transform: uppercase;
    }

h2 {
        @include font(4.2rem, 800, var(--text-primary));
        font-family: var(--font-merriw);
        line-height: 1.35;
        margin-bottom: 10px;

span {
            @include font(4.2rem, 500, var(--primary-color3));
            font-family: var(--font-merriw);
        }
    }

p {
        @include font(17px, 400, var(--text-secondary));
        font-family: var(--font-work-sans);
    }
}

/*=======================================
 4. Buttons 
=======================================*/
.eg-btn {
    text-align: center;
    display: inline-block;
    text-decoration: none;
    transition: all 0.45s ease-in-out;
    text-transform: capitalize;
    font-family: var(--font-exo);
    cursor: pointer;
    overflow: hidden;

i {
        font-weight: 200;
        vertical-align: middle;
        margin-right: 5px;

}
}

.btn--primary {
    background: var(--primary-color1);
    color: var(--white);
    border-radius: 0px;
    position: relative;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    white-space: nowrap;
    border: 2px solid var(--primary-color1);

&:hover {
        color: var(--primary-color1);

&::after {
            transform: scale(1);
            opacity: 1;
        }
    }
}

.btn--primary2 {
    background: var(--primary-color2);
    color: var(--text-primary);
    border-radius: 0px;
    position: relative;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    white-space: nowrap;
    border: 2px solid var(--primary-color2);

&:hover {
        color: var(--text-primary);

&::after {
            transform: scale(1);
            opacity: 1;
        }
    }
}

.btn--white {
    background: var(--white);
    color: var(--text-primary);
    border-radius: 0px;
    position: relative;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    white-space: nowrap;
    // border: 2px solid var(--white);

&::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: var(--primary-color2);
        width: 100%;
        height: 100%;
        transition: 0.5s;
        z-index: -1;
        transform: scale(0.6);
        border-radius: 0px;
        opacity: 0;
    }

&:hover {
        color: var(--text-primary);

&::after {
            transform: scale(1);
            opacity: 1;
        }
    }

&.sibling-2 {
        &::after {
            content: "";
            background: var(--primary-color1);
        }
    }
}

.btn--primary3 {
    background: var(--primary-color3);
    color: var(--white);
    border-radius: 0px;
    position: relative;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    white-space: nowrap;
    border: 2px solid var(--primary-color3);

&:hover {
        color: var(--text-primary);

&::after {
            transform: scale(1);
            opacity: 1;
        }
    }
}

.btn--primary-outline {
    background: var(--white);
    color: var(--primary-color1);
    border-radius: 0px;
    position: relative;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    white-space: nowrap;
    border: 2px solid var(--primary-color1);

&::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: var(--primary-color1);
        width: 100%;
        height: 100%;
        transition: 0.5s;
        z-index: -1;
        transform: scale(0.6);
        border-radius: 0px;
        opacity: 0;
    }

&:hover {
        color: var(--white);

&::after {
            transform: scale(1);
            opacity: 1;
        }
    }
}

.btn--primary3-outline {
    background: var(--white);
    color: var(--text-secondary);
    border-radius: 0px;
    position: relative;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    white-space: nowrap;
    border: 2px solid var(--text-secondary);
    transition: 0.5s ease;

&::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: var(--primary-color3);
        width: 100%;
        height: 100%;
        transition: 0.5s ease;
        z-index: -1;
        transform: scale(0.6);
        border-radius: 0px;
        opacity: 0;
    }

&:hover {
        color: var(--white);
        border: 2px solid transparent;

&::after {
            transform: scale(1);
            opacity: 1;
        }
    }

&.sibling-2 {
        color: var(--text-primary);

&::after {
            background: var(--primary-color2);
        }
    }
}

.btn-primary2-outline {
    background: transparent;
    color: var(--white);
    border-radius: 0px;
    position: relative;
    z-index: 1;
    display: inline-flex;
    justify-content: center;
    white-space: nowrap;
    border: 1px solid var(--white);

&:hover {
        border: 1px solid var(--primary-color2);
        color: var(--text-primary);

&::after {
            transform: scale(1);
            opacity: 1;
        }
    }

&.sibling-2 {
        color: var(--text-primary);
        border: 1px solid var(--text-primary);

&:hover {
            border: 1px solid transparent;
            color: var(--text-primary);

&::after {
                transform: scale(1);
                opacity: 1;
            }
        }

}
}

.capsule {
    border-radius: 30px;
}

.btn--lg {
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    padding: 12px 35px;

@include md-down-device() {
        padding: 12px 25px;
    }
}

.btn--lg2 {
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    padding: 10px 20px;

@include md-down-device() {
        padding: 12px 25px;
    }
}

.btn--md {
    padding: 10px 35px;
    font-size: 16px;
    font-weight: 600;

@include md-down-device() {
        padding: 10px 40px;

}
}

.btn--sm {
    font-size: 14px;
    font-weight: 600;
    padding: 6px 18px;
}

.eg-badge {
    @include font(14px, 500, var(--white));
    font-family: var(--font-work-sans);
    border-radius: 30px;
    padding: 4px 12px;

&.badge-red {
        background: #DF2258;
    }

&.badge-yellow {
        background: #F29727;
    }

&.badge-black {
        background: #09100D;
    }

&.badge-blue {
        background: #2F80ED;
    }
}

/*=======================================
 5. Paginaiton
=======================================*/
.pagination-wrap{
    .page-item{
        &.active {
            .page-link {
                z-index: 3;
                color: var(--primary-color1) !important;
                background-color: var(--white) !important;
                border-color: var(--primary-color1);
            }
        }
    }
    .pagination{
        margin: 0;
    }
    
    .page-item{
        &:first-child{
            .page-link{
                border-radius: 2px;
            }
        }
        &:last-child{
            .page-link{
                border-radius: 2px;
            }
        }
    }
    
    .page-link {
        position: relative;
        display: block;
        color: var(--text-primary) !important;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        border: unset !important;
        border-radius: 8px 8px 2px 8px;
        transition: 0.42s ease;
        padding: 0px 10px !important;
        
        &:focus{
            box-shadow: unset;
            color: var(--primary-color1);
        }
    
        &:hover{
            color: var(--primary-color1);
        }
    }
    .page-item.active .page-link {
        z-index: 3;
        color: var(--primary-color1);
    }
}

/*=======================================
 5. preloader start 
=======================================*/

@mixin preloader($style, $color) {
    .egns-preloader {
        position: fixed !important;
        z-index: 99999;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;

&::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #fff;
            z-index: -1;
        }

.circle-border {
            width: 100%;
            max-width: 140px;
            height: 100%;
            max-height: 140px;

@if $style ==home1 {
                border: 0px solid $color;
            }

@if $style ==home2 {
                border: 0px solid $color;
            }

@if $style ==home3 {
                border: 0px solid $color;
            }

@if $style ==home4 {
                border: 0px solid $color;
            }

@if $style ==home5 {
                border: 0px solid $color;
            }

position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin: auto;
            border-radius: 50%;
            box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.1);

svg {
                @if $style ==home1 {
                    fill: $color;
                }

@if $style ==home2 {
                    fill: $color;
                }

@if $style ==home3 {
                    fill: $color;
                }

@if $style ==home4 {
                    fill: $color;
                }

@if $style ==home5 {
                    fill: $color;
                }

path {
                    @if $style ==home1 {
                        stroke: $color;
                    }

@if $style ==home2 {
                        stroke: $color;
                    }

@if $style ==home3 {
                        stroke: $color;
                    }

@if $style ==home4 {
                        stroke: $color;
                    }

@if $style ==home5 {
                        stroke: $color;
                    }
                }
            }

.moving-circle {
                width: 10px;
                height: 10px;

@if $style ==home1 {
                    background: $color;
                }

@if $style ==home2 {
                    background: $color;
                }

@if $style ==home3 {
                    background: $color;
                }

@if $style ==home4 {
                    background: $color;
                }

@if $style ==home5 {
                    background: $color;
                }

border-radius: 50%;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                overflow: hidden;
                margin: auto;
                animation: circle 2s linear infinite;

&:nth-child(2) {
                    width: 10px;
                    height: 10px;

@if $style ==home1 {
                        background: $color;
                    }

@if $style ==home2 {
                        background: $color;
                    }

@if $style ==home3 {
                        background: $color;
                    }

@if $style ==home4 {
                        background: $color;
                    }

@if $style ==home5 {
                        background: $color;
                    }

border-radius: 50%;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    overflow: hidden;
                    margin: auto;
                    animation: circle 2.25s linear infinite;
                }

&:nth-child(3) {
                    width: 10px;
                    height: 10px;

@if $style ==home1 {
                        background: $color;
                    }

@if $style ==home2 {
                        background: $color;
                    }

@if $style ==home3 {
                        background: $color;
                    }

@if $style ==home5 {
                        background: $color;
                    }

border-radius: 50%;
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    overflow: hidden;
                    margin: auto;
                    animation: circle 2.5s linear infinite;
                }
            }
        }

@keyframes circle {
            0% {
                transform: rotate(0deg) translate(-70px) rotate(0deg);
            }

100% {
                transform: rotate(360deg) translate(-70px) rotate(-360deg);
            }
        }
    }
}

.home1preloader {
    @include preloader(home1, var(--primary-color1));
}

.home2preloader {
    @include preloader(home2, var(--primary-color2));
}

.home3preloader {
    @include preloader(home3, #A044FF);
}

.home4preloader {
    @include preloader(home4, #27AE60);
}

.home5preloader {
    @include preloader(home5, #FF7342);
}

$len: 242.776657104492px;
$time: 1.6s;

#outline {
    stroke-dasharray: $len*0.01, $len;
    stroke-dashoffset: 0;
    animation: anim $time linear infinite;
}

@keyframes anim {
    12.5% {
        stroke-dasharray: $len*0.14, $len;
        stroke-dashoffset: -$len*0.11;
    }

43.75% {
        stroke-dasharray: $len*0.35, $len;
        stroke-dashoffset: -$len*0.35;
    }

100% {
        stroke-dasharray: $len*0.01, $len;
        stroke-dashoffset: -$len*0.99;
    }
}

/*=======================================
 6. pagination start 
=======================================*/
.pagination-wrap {

// margin-top: 50px;
    .page-item {
        &.active {
            .page-link {
                z-index: 3;
                color: var(--white);
                background-color: var(--primary-color1);
                border-color: var(--primary-color1);
            }
        }
    }

.pagination {
        margin: 0;
    }

.page-link {
        position: relative;
        display: block;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
        background-color: var(--white);
        border-radius: 5px;
        transition: 0.42s ease;
        border: 1px solid rgba(#292B31, 0.3);
        border-radius: 5px;
        color: rgba(#292B31, 0.3);
        padding: 7px 10px;

i{
            color: var(--text-primary);
            font-size: 17px;
            font-weight: 600;
            transition: 0.42s ease;
            vertical-align: middle;
        }

&:focus {
            box-shadow: unset;
            color: var(--primary-color1);
            border-color: var(--primary-color1);
        }

&:hover {
            color: var(--primary-color1) !important;

i{
                color: var(--primary-color1);
            }
        }
    }

.page-item.active .page-link {
        z-index: 3;
        color: var(--primary-color1);
    }
}

/*=======================================
  7. search area start
=======================================*/

.mobile-search {
    background: rgba(#000, 0.85);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.09);
    width: 100%;
    height: 100%;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    align-items: center;
    position: fixed;
    cursor: popoppins;
    // transform: translateY(-100%);
    transform: scale(0);
    top: 0;
    left: 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: .65s ease;
    padding: 35px 100px;

@include md-down-device() {
        padding: 20px 20px;
    }

label {
        color: #fff;
        margin-bottom: 20px;

}

&.slide {
        // transform: translateY(0);
        transform: scale(1);
        opacity: 1;
        visibility: visible;
    }

input {
        border: none;
        border-radius: unset;
        // border-bottom: 1px solid $border-color;
        padding-left: 0px;
        padding-bottom: 5px;
        width: 100%;
        background: transparent;
        transition: 0.3s ease-in-out;
        color: #fff;
        margin-bottom: 20px;

&:focus {
            border-bottom: 1px solid #fff;

}

// &::placeholder{
        //     color: var(--dark);
        // }
    }

.search-cross-btn {
        color: #fff;
        cursor: popoppins;
        background: rgba(var(--primary-color1), 0.6);
        border-radius: 50%;
        height: 40px;
        width: 40px;
        line-height: 40px;
        text-align: center;
        line-height: 43px;
        transition: 0.5s ease;

&:hover {
            background: var(--primary-color1);
            color: #fff;
        }
    }

.search-cross-btn i {
        font-size: 25px;
        cursor: pointer;
    }
}

/*=======================================
   8. Mobile-menu Css
=======================================*/

.mobile-menu-form {
    margin-top: 50px;

input {
        width: 100%;
        // border: 1px solid $border-color;
        padding: 10px 15px;
        background-color: var(--white);
        margin-bottom: 15px;
        outline: none;
        border-radius: 5px;

&::placeholder {
            font-size: 12px;
        }

&.style-capsule {
            border-radius: 30px;
        }
    }

button {
        outline: none;
        border: none;
        padding: 10px;
    }

&.style-2 {
        input {
            border-radius: 30px;
        }
    }
}

.phone-call2 {
    .number {
        text-align: left;

span {
            display: inline-block;
            color: var(--text-color2);
            font-family: var(--font-exo);
            font-size: 12px;
            font-weight: 500;
        }

h5 {
            margin-bottom: 0px;
            margin-top: -7px;
            white-space: nowrap;

a {
                color: var(--text-color1);
                font-size: 15px;
                font-weight: 700;
                margin-bottom: 0px;
            }
        }
    }
}
/*================================================
 10. Topbar-section
=================================================*/
.topbar{
    background: #202338;
    width: 100%;
    padding: 15px 0px;
    position: relative;
    z-index: 999;
    .topbar-left{
        .topbar-info-list{
            @include list(none,0,0);
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 30px;
            li{
                @include font(14px,400, var(--white));
                font-family: var(--font-work-sans);
                i{
                    color: var(--primary-color1);
                    margin-right: 5px;
                }
            }
        }
    }
    .topbar-right-list{
        @include list(none,0,0);
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 30px;
        li{ 
            position: relative;
            z-index: 1;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            transition: all 0.35s ease;
            @include font(14px,400, var(--white));
                font-family: var(--font-work-sans); 
            span,a{
                @include font(14px,400, var(--white));
                font-family: var(--font-work-sans); 
                transition: all 0.35s ease;
            }
            &:hover{
                color: var(--primary-color1);
                span,a{
                    color: inherit;
                }
                .topbar-sublist{
                    opacity: 1;
                    transform: translateY(0px);
                    visibility: visible;
                }
            }
            > img{
                margin-left: 15px;
                width: 20px;
                height: 20px;
                margin-top: 2px;
            }
            .topbar-sublist{
                position: absolute;
                top: 35px;
                left: -10px;
                @include list(none, 0,0);
                background: #202338;
                min-width: 120px;
                height: auto;
                z-index: 9;
                border: 1px solid rgba(#fff,0.1);
                opacity: 0;
                transform: translateY(5px);
                transition: all 0.6s ease;
                visibility: hidden;
                li{
                    padding: 8px 12px;
                    img{
                        margin-left: 15px;
                        width: 20px;
                    }
                }
            }
        }
    }
    
}

/*================================================
 10. Header-section
=================================================*/

header.style-1 {
    background-color: transparent;
    width: 100%;
    z-index: 8;
    padding: 0px 6%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 15px;
    left: 0;
    right: 0;

@include xl-device() {
        padding: 0px 5%;
    }

@include lg-device() {
        padding: 0px 4%;
    }

@include md-device() {
        padding: 0px 4%;
        top: 0;
    }

@include md-down-device() {
        top: 0;
        padding: 0px 4%;
    }

&.sticky {
        position: fixed;
        top: 0px;
        left: 0;
        z-index: 999;
        background: var(--text-primary);
        // transition: 0.2s ease;
        box-shadow: 5px 3px 40px rgba(0, 72, 88, 0.1);
        animation: smooth-header 0.65s linear;

@keyframes smooth-header {
            0% {
                transform: translateY(-30px);
            }

100% {
                transform: translateY(0px);
            }

}
    }

// end navbar-right
    .header-logo {
        @include xl-device() {
            padding: 21px 0px;
        }

@include lg-device() {
            padding: 21px 0px;
        }

@include lg-down-device() {
            padding: 21px 0px;
        }

img {
            min-width: 120px;
            max-width: 100%;
            @include md-down-device(){
                min-width: 90px;
            }
        }
    }

.main-nav {
        display: inline-block;

.mobile-menu-logo {
            display: none;
        }

ul {
            list-style: none;
            margin: 0;
            padding: 0;

>li {
                display: inline-block;
                position: relative;
                padding: 0 20px;

a {
                    font-size: 16px;
                    color: #fff;
                    font-weight: 500;
                    display: block;
                    text-transform: capitalize;
                    padding: 30px 0;
                    position: relative;
                    font-family: var(--font-work-sans);
                    -webkit-transition: all .5s ease-out 0s;
                    -moz-transition: all .5s ease-out 0s;
                    -ms-transition: all .5s ease-out 0s;
                    -o-transition: all .5s ease-out 0s;
                    transition: all .5s ease-out 0s;

&:hover {
                        color: var(--primary-color1);
                    }
                }

a.active {
                    color: var(--primary-color1);
                }

i {
                    width: 30px;
                    font-size: 14px;
                    text-align: center;
                    color: #fff;
                    font-style: normal;
                    position: absolute;
                    right: -8px;
                    top: 33px;
                    z-index: 999;
                    cursor: pointer;
                    display: none;
                }

ul.sub-menu {
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: auto;
                    margin: 0;
                    padding: 0;
                    opacity: 0;
                    visibility: hidden;
                    min-width: 215px;
                    background: #0B0F14;
                    text-align: left;
                    transition: all .5s ease-out 0s;
                    transform: translateY(20px);

>li {
                        padding: 0 10px;

i {
                            position: absolute;
                            top: 10px;
                            right: 6px;
                            display: block;
                        }

padding: 0;
                        display: block;
                        // border-bottom: 1px solid rgba(#383838, 0.5);
                        position: relative;

&:hover {
                                color: var(--primary-color1);
                                margin-left: 10px;
                            }
                        }

a.active {
                            color: var(--primary-color1);
                        }

.sub-menu {
                            left: 215px;
                            position: absolute;
                            max-width: 230px;
                            min-width: 215px;
                            background: #0B0F14;
                            top: 0;

@media only screen and (max-width: 1199px) {
                                margin-left: 10px;
                                position: unset;
                                max-width: 230px;
                                min-width: 215px;
                                background: transparent;
                                top: 0;
                            }

li i {
                                display: block;
                            }
                        }

&:last-child {
                            border-bottom: none;
                        }
                    }
                }

&:hover {
                    >ul.sub-menu {
                        visibility: visible;
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
            }

li.menu-item-has-children>i {
                display: block;
            }
        }
    }

@media only screen and (max-width: 1199px) {
        .main-nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 280px;
            padding: 30px 20px !important;
            z-index: 99999;
            height: 100%;
            overflow: auto;
            background: var(--text-primary);
            -webkit-transform: translateX(-260px);
            transform: translateX(-100%);
            -webkit-transition: -webkit-transform .3s ease-in;
            transition: -webkit-transform .3s ease-in;
            transition: transform .3s ease-in;
            transition: transform .3s ease-in, -webkit-transform .3s ease-in;

&.show-menu {
                transform: translateX(0);
            }

.mobile-menu-logo {
                text-align: left;
                padding-top: 20px;
                display: block;
                padding-bottom: 8px;
            }

ul {
                float: none;
                text-align: left;
                padding: 35px 10px 10px 0;

li {
                    display: block;
                    position: relative;
                    padding: 0 5px;

i {
                        display: block;
                    }

a {
                        padding: 10px 0;
                        display: block;
                        font-weight: 300;
                    }

.bi {
                        top: 12px;
                        font-size: 16px;
                    }
                }
            }
        }

// .main-nav.slidenav {
        //     -webkit-transform: translateX(0);

// }

.mobile-menu {
            position: relative;
            top: 2px;
            padding: 0 5px;
            border-radius: 50%;
            display: inline-block;
        }

span {
                width: 100%;
                height: 2px;
                background: var(--primary-color1);
                display: block;
                position: absolute;
                right: 0;
                -webkit-transition: all .3s;
                transition: all .3s;
            }

.cross-top {
                top: 0;
            }

.cross-middle {
                top: 50%;
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
                width: 100%;
            }

.cross-bottom {
                bottom: 0;
                width: 100%;
            }
        }

.cross-btn.h-active {
            span.cross-top {
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
                top: 50%;
                margin-top: -1px;
            }

span.cross-middle {
                -webkit-transform: translateX(-30px);
                transform: translateX(-30px);
                opacity: 0;
            }

span.cross-bottom {
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
                bottom: 50%;
                margin-bottom: -1px;
            }
        }
    }
}

.phone-call {
    .icon {
        margin-right: 10px;

svg {
            fill: var(--white);
        }
    }

.number {
        span {
            @include font(14px, 400, var(--white));
            font-family: var(--font-work-sans);
        }

h5 {
            white-space: nowrap;
            margin-bottom: 0px;

a {
                @include font(16px, 500, var(--white));
                font-family: var(--font-work-sans);
            }
        }
    }

&.sibling2 {
        svg {
            fill: var(--icon-primary);
        }

.number {
            margin-top: -5px;
            span {
                @include font(14px, 400, var(--text-primary));
                font-family: var(--font-work-sans);
            }

h5 {
                white-space: nowrap;

a {
                    @include font(16px, 500, var(--text-primary));
                    font-family: var(--font-work-sans);
                }
            }
        }
    }

&.sibling3 {
        margin-right: 30px;

&:hover {
            svg {
                fill: var(--primary-color3);
            }
        }

svg {
            fill: var(--text-primary);
            transition: all 0.4s ease;
        }

.number {
            span {
                @include font(14px, 400, var(--text-primary));
                font-family: var(--font-work-sans);
            }

h5 {
                white-space: nowrap;

a {
                    @include font(16px, 500, var(--text-primary));
                    font-family: var(--font-work-sans);
                }
            }
        }
    }

&.sibling4 {
        margin-right: 20px;

&:hover {
            svg {
                fill: var(--primary-color2);
            }
        }

svg {
            fill: var(--text-primary);
            transition: all 0.4s ease;
        }

.number {
            span {
                @include font(14px, 400, var(--text-primary));
                font-family: var(--font-work-sans);
            }

h5 {
                white-space: nowrap;

a {
                    @include font(16px, 500, var(--text-primary));
                    font-family: var(--font-work-sans);
                }
            }
        }
    }
}

.header-social-area {
    position: relative;
    padding-right: 20px;
    padding-left: 9%;

&::after {
        content: '';
        position: absolute;
        right: 0px;
        top: 50%;
        transform: translateY(-50%);
        height: 20px;
        width: 1px;
        background-color: var(--white);

@include xl-down-device() {
            content: unset;
        }
    }

ul.header-social {
        @include list(none, 0, 0);
        display: flex;
        flex-direction: row;
        gap: 25px;

li {
            a {
                i {
                    @include font(18px, 500, Var(--white));
                    transition: all 0.35s ease;

&:hover {
                        color: var(--primary-color1);
                    }
                }
            }
        }
    }

&.sibling-2 {
        ul.header-social {
            gap: 20px;

li {
                a {
                    i {
                        @include font(18px, 500, Var(--text-primary));
                        transition: all 0.35s ease;

&:hover {
                            color: var(--primary-color2);
                        }
                    }
                }
            }
        }
    }
}

.sidebar-btn {
    cursor: pointer;

i {
        font-size: 25px;
        color: var(--white);
        font-weight: 600;
    }
}

.mobile-menu-btn {
    @extend .sidebar-btn;
}

header.style-2 {
    background-color: var(--white);
    width: 100%;
    position: relative;
    z-index: 99;
    padding: 0px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 3px 3px 30px rgba(32, 35, 56, 0.06);

@include xl-device() {
        padding: 0px 2%;
    }

@include lg-device() {
        padding: 0px 2%;
    }

@include md-device() {
        padding: 0px 4%;
        top: 0;
    }

@include md-down-device() {
        top: 0;
        padding: 0px 4%;
    }

&.sticky {
        position: fixed;
        top: 0px;
        left: 0;
        z-index: 999;
        background: var(--white);
        // transition: 0.2s ease;
        box-shadow: 5px 3px 40px rgba(0, 72, 88, 0.1);
        animation: smooth-header 0.65s linear;

@keyframes smooth-header {
            0% {
                transform: translateY(-30px);
            }

100% {
                transform: translateY(0px);
            }

}
    }

// end navbar-right
    .header-logo {
        @include xl-device() {
            padding: 21px 0px;
        }

@include lg-device() {
            padding: 15px 0px;
        }

@include lg-down-device() {
            padding: 15px 0px;
        }

img {
            min-width: 120px;
            max-width: 100%;
        }
    }

.main-nav {
        display: inline-block;
        .mobile-menu-logo {
            display: none;
        }
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            li {
                display: inline-block;
                position: relative;
                padding: 0 20px;
                 a {
                    font-size: 18px;
                    color: var(--text-primary);
                    font-weight: 500;
                    display: block;
                    text-transform: capitalize;
                    padding: 30px 0;
                    position: relative;
                    font-family: var(--font-work-sans);
                    -webkit-transition: all .5s ease-out 0s;
                    -moz-transition: all .5s ease-out 0s;
                    -ms-transition: all .5s ease-out 0s;
                    -o-transition: all .5s ease-out 0s;
                    transition: all .5s ease-out 0s;
                    position: relative;
                    &:hover {
                        color: var(--primary-color1);
                        &:after{
                            opacity: 1;
                            width: 100%;
                        }
                    }
                    &::after{
                        content: '';
                        position: absolute;
                        bottom: 25px;
                        left:0;
                        width: 0%;
                        height: 2px;
                        border-radius: 30px;
                        display: block;
                        background: linear-gradient(90deg, var(--primary-color1),transparent);
                        opacity: 0;
                        transition: all .5s ease-out 0s;
                    }
                }

a.active {
                    color: var(--primary-color1);
                }

i {
                    width: 30px;
                    font-size: 14px;
                    text-align: center;
                    color: var(--text-primary);
                    font-style: normal;
                    position: absolute;
                    right: -8px;
                    top: 35px;
                    z-index: 999;
                    cursor: pointer;
                    display: none;
                }

ul.sub-menu {
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: auto;
                    margin: 0;
                    padding: 0;
                    opacity: 0;
                    visibility: hidden;
                    min-width: 215px;
                    background: #0B0F14;
                    text-align: left;
                    transition: all .55s ease-in-out;
                    transform: translateY(20px);

>li {
                        i {
                            position: absolute;
                            top: 10px;
                            right: 6px;
                            display: block;
                            color: var(--white);
                        }

padding: 0;
                        display: block;
                        border-bottom: 1px solid rgba(#383838, 0.5);
                        position: relative;

a {
                            display: block;
                            padding: 15px 15px;
                            color: #fff;
                            font-weight: 300;
                            text-transform: capitalize;
                            font-size: 16px;
                            line-height: 1;
                            -webkit-transition: all .4s ease-out 0s;
                            transition: all .4s ease-out 0s;
                            position: relative;
                            &::after{
                                content: '';
                                position: absolute;
                                bottom: 0px;
                                left: 0px;
                                width: 0px;
                                height: 1px;
                                border-radius: 30px;
                                display: block;
                                background: linear-gradient(90deg, var(--primary-color1),transparent);
                                transition: all 0.5s ease-in-out; 
                            }

&:hover {
                                color: var(--primary-color1);
                                &:after{
                                    width: 100%;
                                }
                            }
                        }

a.active {
                            color: var(--primary-color1);
                        }

li i {
                                display: block;
                            }
                        }

&:last-child {
                            border-bottom: none;
                        }
                    }
                }

li.menu-item-has-children>i {
                display: block;
            }
        }
    }

@media only screen and (max-width: 991px) {
        .main-nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 280px;
            padding: 30px 20px !important;
            z-index: 99999;
            height: 100%;
            overflow: auto;
            background: var(--white);
            -webkit-transform: translateX(-260px);
            transform: translateX(-100%);
            -webkit-transition: -webkit-transform .3s ease-in;
            transition: -webkit-transform .3s ease-in;
            transition: transform .3s ease-in;
            transition: transform .3s ease-in, -webkit-transform .3s ease-in;
            box-shadow: 0px 2px 20px rgba(#000, 0.03);

&.show-menu {
                transform: translateX(0);
            }

.mobile-menu-logo {
                text-align: left;
                padding-top: 20px;
                display: block;
                padding-bottom: 8px;
            }

ul {
                float: none;
                text-align: left;
                padding: 35px 10px 10px 0;

li {
                    display: block;
                    position: relative;
                    padding: 0 5px;

i {
                        display: block;
                    }

a {
                        padding: 10px 0;
                        display: block;
                        font-weight: 500;
                        font-size: 18px;
                    }

ul.sub-menu {
                        position: static;
                        min-width: 200px;
                        background: 0 0;
                        border: none;
                        opacity: 1;
                        visibility: visible;
                        -webkit-box-shadow: none;
                        box-shadow: none;
                        -webkit-transform: none;
                        transform: none;
                        -webkit-transition: none;
                        transition: none;
                        display: none;
                        margin-top: 0 !important;
                        transform: translateY(0px);
                        >li {
                            border-bottom: 1px solid transparent;
    
                            a {
                                color: var(--text-primary);
                                font-size: 17px;
                                font-weight: 500;
    
                                &:hover {
                                    color: var(--primary-color1);
                                    margin-left: 10px;
                                }
                            }
    
                            a.active {
                                color: var(--primary-color1);
                            }
                            i{
                                color: var(--text-primary);
                                right: -13px;
                            }
                        }
                    }

.bi {
                        top: 12px;
                        font-size: 16px;
                    }
                }
            }
        }

.mobile-menu {
            position: relative;
            top: 2px;
            padding: 0 5px;
            border-radius: 50%;
            display: inline-block;
        }

.cross-btn {
            display: inline-block !important;
            position: relative;
            width: 30px !important;
            height: 22px !important;
            cursor: pointer;
            border: 3px solid transparent !important;
            span {
                width: 100%;
                height: 2px;
                background: var(--primary-color1);
                display: block;
                position: absolute;
                right: 0;
                -webkit-transition: all .3s;
                transition: all .3s;
            }

.cross-top {
                top: 0;
            }

.cross-middle {
                top: 50%;
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
                width: 100%;
            }

.cross-bottom {
                bottom: 0;
                width: 100%;
            }
        }

span.cross-middle {
                -webkit-transform: translateX(-30px);
                transform: translateX(-30px);
                opacity: 0;
            }

span.cross-bottom {
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
                bottom: 50%;
                margin-bottom: -1px;
            }
        }
    }
}
// header-style-four
header.style-4 {
    background-color: var(--white);
    width: 100%;
    position: relative;
    z-index: 99;
    padding: 0px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 3px 3px 30px rgba(32, 35, 56, 0.06);

@include xl-device() {
        padding: 0px 2%;
    }

@include lg-device() {
        padding: 0px 2%;
    }

@include md-device() {
        padding: 0px 4%;
        top: 0;
    }

@include md-down-device() {
        top: 0;
        padding: 0px 4%;
    }

@keyframes smooth-header {
            0% {
                transform: translateY(-30px);
            }

100% {
                transform: translateY(0px);
            }

}
    }

// end navbar-right
    .header-logo {
        @include xl-device() {
            padding: 21px 0px;
        }

@include lg-device() {
            padding: 15px 0px;
        }

@include lg-down-device() {
            padding: 15px 0px;
        }

img {
            min-width: 75px;
            max-width: 100%;
        }
    }

.main-nav {
        display: inline-block;
        .mobile-menu-logo {
            display: none;
        }
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            li {
                display: inline-block;
                position: relative;
                padding: 0 12px;
                 a {
                    font-size: 18px;
                    color: var(--text-primary);
                    font-weight: 500;
                    display: block;
                    text-transform: capitalize;
                    padding: 30px 0;
                    position: relative;
                    font-family: var(--font-work-sans);
                    -webkit-transition: all .5s ease-out 0s;
                    -moz-transition: all .5s ease-out 0s;
                    -ms-transition: all .5s ease-out 0s;
                    -o-transition: all .5s ease-out 0s;
                    transition: all .5s ease-out 0s;
                    position: relative;
                    &:hover {
                        color: var(--primary-color2);
                        &:after{
                            opacity: 1;
                            width: 100%;
                        }
                    }
                    &::after{
                        content: '';
                        position: absolute;
                        bottom: 25px;
                        left:0;
                        width: 0%;
                        height: 2px;
                        border-radius: 30px;
                        display: block;
                        background: linear-gradient(90deg, var(--primary-color2),transparent);
                        opacity: 0;
                        transition: all .5s ease-out 0s;
                    }
                }

a.active {
                    color: var(--primary-color2);
                }

i {
                    width: 24px;
                    font-size: 14px;
                    text-align: center;
                    color: var(--icon-primary);
                    font-style: normal;
                    position: absolute;
                    right: -8px;
                    top: 35px;
                    z-index: 999;
                    cursor: pointer;
                    display: none;
                }

ul.sub-menu {
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: auto;
                    margin: 0;
                    padding: 0;
                    opacity: 0;
                    visibility: hidden;
                    min-width: 215px;
                    background: #0B0F14;
                    text-align: left;
                    transition: all .55s ease-in-out;
                    transform: translateY(20px);

padding: 0;
                        display: block;
                        border-bottom: 1px solid rgba(#383838, 0.5);
                        position: relative;

a {
                            display: block;
                            padding: 15px 15px;
                            color: #fff;
                            font-weight: 300;
                            text-transform: capitalize;
                            font-size: 16px;
                            line-height: 1;
                            -webkit-transition: all .4s ease-out 0s;
                            transition: all .4s ease-out 0s;
                            position: relative;
                            &::after{
                                content: '';
                                position: absolute;
                                bottom: 0px;
                                left: 0px;
                                width: 0px;
                                height: 1px;
                                border-radius: 30px;
                                display: block;
                                background: linear-gradient(90deg ,var(--primary-color2),var(--primary-color2));
                                transition: all 0.5s ease-in-out; 
                            }

&:hover {
                                color: var(--primary-color2);
                                &:after{
                                    width: 100%;
                                }
                            }
                        }

a.active {
                            color: var(--primary-color2);
                        }