:root {
    --body_color: #fff;
    --white: #fff;
    --green: #8BC34A;
    --deep_green: #558B2F;
    --violet: #1c3c9b;
    --font_black: #000000de;
    --para_color: #666666;
    /* --gradient: linear-gradient(-45deg, #9c27b0 20%, #6a1b9a 70%); */
    --gradient: linear-gradient(-45deg, #4ac7cd 20%, #1b3c9a 70%);
    /* --gradient: linear-gradient(-45deg, #3bb86b 20%, #0d877d 70%); */
    /* --gradient: linear-gradient(-45deg, #FFBBBB 20%, #A9F1DF 70%); */
    /* --gradient: linear-gradient(135deg, #be63f9 0%, #0449c4 100%); */
    /* --gradient: radial-gradient( circle farthest-corner at 92.3% 71.5%,  rgba(134,231,214,1) 0%,  rgba(83,138,214,1) 90% ); */


    --hover_gradient: linear-gradient(-45deg, #6a1b9a 20%, #9c27b0 70%);
    --para_family: 'Mulish', sans-serif;
    --bg_gradient: linear-gradient(to bottom right, #ffffff, #f9f3fb, #ffffff, #f9eeff, #ffffff, #f1e7f3);

    --best__seller:#daf9fb;
}
:root body.dark-mode {
    --body_color: #2a2a2a;
    --bg_gradient: linear-gradient(to bottom right, #0e1e4f, #0f1f4d, #1b2f3b, #0e1e4f, #10204e, #213536);
    --para_color: #9e9e9e;
    --gradient: linear-gradient(-45deg, #203536 20%, #0c1d4f 70%);
    /* --white: #686565; */
    --white: #ffffff;
    --font_black: #f2f2f2;
    --best__seller:#daf9fb;
  }

ul {
    padding: 0;
    margin: 0;
}
p {
    margin-bottom: 0;
    font-family: 'Mulish', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: 0;
}


body {
    padding: 0;
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    color: var(--body_color);
}
/* ------header start-------- */
.ml-auto {
    margin-left: auto;
}
.header_area {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 11;
}
.fixed_header {
    position: fixed !important;
    z-index: 9999999 !important;
    width: 100% !important;
    top: 0px !important;
    padding: 0px 0px !important;
    transition: 0.5s !important;
    background: var(--gradient) !important;
    box-shadow: 0 0 45px 0 rgb(62 28 131 / 35%);
}
a.navbar-brand img {
    width: 140px;
}
.header_area .navbar-light .navbar-nav .nav-link.active, .header_area .navbar-light .navbar-nav .nav-link:hover {
    color: var(--green);
    transition: 0.5s;
}
.header_area .navbar-light .navbar-nav .nav-link {
    color: var(--white);
    font-family: 'Mulish', sans-serif;
    padding: 8px 20px;
    transition: 0.5s;
}
.dark-mode .header_area .navbar-light .navbar-nav .nav-link {
    color: #bebcbc;
}
.header_area .navbar-expand-lg .navbar-nav {
    margin-right: 50px;
}
.header_area form {
    align-items: center;
}
.deafult_btn {
    padding: 10px 30px;
    border-radius: 5px;
    position: relative;
    display: inline-flex;
    align-items: center;
    border: 0px;
    overflow: hidden !important;
    color: var(--white) !important;
    background: var(--green);
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Mulish', sans-serif;
    box-shadow: 0 5px 16px rgb(0 0 0 / 15%);
    /* background-size: 140% 100%; */
    transition: all .2s ease-in-out;
}
.deafult_btn:hover {
    background: var(--deep_green);
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.video_btn {
    padding: 10px 30px;
    box-shadow: 0 5px 16px rgb(0 0 0 / 15%);
    padding-left: 10px;
    background: #ffffff1f;
    border-radius: 30px;
    color: var(--white) !important;
    font-family: 'Mulish', sans-serif;
    position: relative;
    z-index: 6;
    text-transform: capitalize;
    font-size: 14px;
}
.video_btn:hover {
    background: var(--hover_gradient);
    transition: 0.5s;
}
.video_btn span {
    display: inline-flex;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
    background: var(--white) !important;
    border-radius: 50%;
    color: var(--violet);
    margin-right: 5px;
    font-size: 12px;
}
.quote_btn:hover {
    box-shadow: 7px 6px 16px rgb(65 65 65 / 15%);
}
.get_started {
    position: relative;
    z-index: 6;
    text-transform: capitalize;
    padding: 12px 30px;
}
.quote_btn span {
    margin-left: 8px;
}
.tel_btn {
    padding: 8px 24px;
    border-radius: 5px;
    position: relative;
    display: inline-flex;
    align-items: center;
    border: 2px solid var(--white);
    overflow: hidden !important;
    color: var(--white) !important;
    background: transparent;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Mulish', sans-serif;
    /* box-shadow: 0 5px 16px rgb(0 0 0 / 15%); */
    /* background-size: 140% 100%; */
    transition: all .2s ease-in-out;
    margin-left: 5px;
    box-shadow: none !important;
}
.dark-mode .tel_btn {
    border: 2px solid #d6d6d6;
    color: #d6d6d6 !important;
}
.tel_btn span {
    display: inline;
    margin-left: 10px;
}
.tel_btn:hover {
    box-shadow: 0 5px 16px rgb(0 0 0 / 15%);
    border: 2px solid var(--green);
    background-color: var(--green);

}
.theme_mode {
    padding: 15px;
    
    /* border-bottom: 1px solid #eee; */
}
.theme_mode b, .language_area b {
    color: #00000099;
    font-family: 'Mulish', sans-serif;
    font-weight: 400;
    margin-bottom: 15px;
    display: inline-block;
}
ul.language_area {
    padding: 15px;
    list-style: none;
    display: grid;
    gap: 3px;
}
ul.language_area li {
    margin-left: 15px;
}
.language_area [type="radio"]:checked,
.language_area [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
.language_area [type="radio"]:checked + label, .language_area [type="radio"]:not(:checked) + label {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: var(--font_black);
    font-size: 14px;
}
.language_area [type="radio"]:checked + label:before,
.language_area [type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 2px solid var(--violet);
    border-radius: 100%;
    background: #fff;
}
.language_area [type="radio"]:checked + label:after, .language_area [type="radio"]:not(:checked) + label:after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--violet);
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.language_area [type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.language_area [type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.dropdown_bg {
    width: 0%;
    height: 0vh;
    position: fixed;
    background: #0000;
    top: 0;
    left: 0;
}
.dropdown_bg.bg_active {
    width: 100%;
    height: 100vh;
    z-index: 10;
}
/* .ripple_eff {
    position: relative;
    overflow: hidden;
}
.ripple_eff::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 0%;
    background-color: #ffffff5e;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.2s;
    border-radius: 50%;
}
.ripple_eff:active::after {
    width: 100%;
    height: 100%;
    transition: 0.1s;
} */
.ripple_eff {
    background-position: center;
    transition: background 0.8s;
  }
  .ripple_eff:active {
    background-color: #f8f8f854;
    background-size: 100%;
    transition: background 0.1s;
}
.quote_btn:focus {
    box-shadow: none;
}
.mob_darkmode_icon {
    width: 42px;
    height: 42px;
    color: var(--green);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 20px rgb(34 34 34 / 16%);
    border-radius: 30px;
    background-color: #fff;
    margin-left: 30px;
    font-size: 18px;
    cursor: pointer;
}
.dark-mode .mob_darkmode_icon {
    background-color: #d6d6d6;
}
.fa-sun,
.active_darkmode .fa-moon {
  display: none;
}
.active_darkmode .fa-sun {
  display: block;
}
/* ------header close-------- */


/* -----banner start--------- */
.banner_section {
    padding: 150px 0 90px;
    background: var(--gradient);
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.banner_content h1 {
    font-size: 50px;
    margin-bottom: 30px;
    color: var(--white);
    font-weight: bold;
}
.banner_content p {
    color: var(--white);
    margin-bottom: 30px;
}
.banner_img img {
    margin-left: auto;
    display: table !important;
    max-width: 450px;
}
.slick-slide img {
    display: block;
    width: 100%;
}
.slideshow {
    position: relative;
    z-index: 99999999;
}
.banner_shape {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    /* overflow: hidden; */
    clip: rect(0px, auto, auto, 0px);
}
.mui-style-ltr-cb6orr-leftDeco {
    left: 0px;
    right: auto;
    width: 1200px;
    height: 1500px;
    transform: scale(0.5);
    transform-origin: left top;
}
.mui-style-ltr-txj4xk-decoration svg {
    fill: rgb(139, 195, 74);
    opacity: 0.15;
    position: fixed;
    top: 0px;
}
.mui-style-ltr-1us3mvo-mainWrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: rgb(255, 255, 255);
    color: rgba(0, 0, 0, 0.87);
}
.banner_shape {
    position: absolute;
    width: 400px;
    height: 400px;
    top: -71px;
    left: -66px;
    /* overflow: hidden; */
    clip: rect(0px, auto, auto, 0px);
}
.banner_shape img {
    opacity: 0.2;
}
.banner_content ul {
    list-style: none;
    display: grid;
    gap: 5px;
    margin-bottom: 30px;
}
.banner_content ul li {
    font-size: 16px;
    color: var(--white);
}
.banner_content ul li span {
    width: 20px;
    height: 20px;
    display: inline-flex;
    background: var(--white);
    border-radius: 50%;
    margin-right: 6px;
    color: var(--violet);
    justify-content: center;
    align-items: center;
    font-size: 14px;
}
.circle.small.square1 {
    left: 18%;
    top: 100%;
    -webkit-animation-name: smallBubble;
    animation-name: smallBubble;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}
.circle.small {
    width: 15px;
    height: 15px;
    opacity: 0.7;
}
.circle {
    background: #ffffff;
    bottom: 0;
    position: absolute;
    border-radius: 50%;
}
.circle.small.square2 {
    left: 36%;
    top: 100%;
    -webkit-animation-name: smallBubble;
    animation-name: smallBubble;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}
.circle.small.square3 {
    left: 54%;
    top: 100%;
    -webkit-animation-name: smallBubble;
    animation-name: smallBubble;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}
.circle.small.square4 {
    left: 72%;
    top: 100%;
    -webkit-animation-name: smallBubble;
    animation-name: smallBubble;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}
.circle.small.square5 {
    left: 90%;
    top: 100%;
    -webkit-animation-name: smallBubble;
    animation-name: smallBubble;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}
.circle.medium {
    width: 35px;
    height: 35px;
    opacity: 0.35;
}
.circle.medium.square1 {
    left: 21%;
    top: 100%;
    -webkit-animation-name: mediumBubble;
    animation-name: mediumBubble;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}
.circle.medium.square2 {
    left: 42%;
    top: 100%;
    -webkit-animation-name: mediumBubble;
    animation-name: mediumBubble;
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}
.circle.medium.square3 {
    left: 63%;
    top: 100%;
    -webkit-animation-name: mediumBubble;
    animation-name: mediumBubble;
    -webkit-animation-duration: 12s;
    animation-duration: 12s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}
.circle.medium.square4 {
    left: 84%;
    top: 100%;
    -webkit-animation-name: mediumBubble;
    animation-name: mediumBubble;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}
.circle.medium.square5 {
    left: 5%;
    top: 100%;
    -webkit-animation-name: mediumBubble;
    animation-name: mediumBubble;
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}
.circle.large {
    width: 100px;
    height: 100px;
    opacity: 0.15;
}
.circle.large.square1 {
    left: 21%;
    top: 100%;
    -webkit-animation-name: bigBubble;
    animation-name: bigBubble;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}
.circle.large.square2 {
    left: 42%;
    top: 100%;
    -webkit-animation-name: bigBubble;
    animation-name: bigBubble;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}
.circle.large.square3 {
    left: 63%;
    top: 100%;
    -webkit-animation-name: bigBubble;
    animation-name: bigBubble;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 13s;
    animation-delay: 13s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}
.circle.large.square4 {
    left: 84%;
    top: 100%;
    -webkit-animation-name: bigBubble;
    animation-name: bigBubble;
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 9s;
    animation-delay: 9s;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

@-webkit-keyframes smallBubble {
    0% {
        top: 100%;
        margin-left: 10px;
    }

    25% {
        margin-left: -10px;
    }

    50% {
        margin-left: 10px;
    }

    75% {
        margin-left: -10px;
    }

    100% {
        top: 0%;
        opacity: 0;
        margin-left: 0px;
    }
}

@keyframes smallBubble {
    0% {
        top: 100%;
        margin-left: 10px;
    }

    25% {
        margin-left: -10px;
    }

    50% {
        margin-left: 10px;
    }

    75% {
        margin-left: -10px;
    }

    100% {
        top: 0%;
        opacity: 0;
        margin-left: 0px;
    }
}

@-webkit-keyframes mediumBubble {
    0% {
        top: 100%;
        margin-left: 15px;
    }

    25% {
        margin-left: -15px;
    }

    50% {
        margin-left: 15px;
    }

    75% {
        margin-left: -15px;
    }

    100% {
        top: 0%;
        opacity: 0;
        margin-left: 0px;
    }
}

@keyframes mediumBubble {
    0% {
        top: 100%;
        margin-left: 15px;
    }

    25% {
        margin-left: -15px;
    }

    50% {
        margin-left: 15px;
    }

    75% {
        margin-left: -15px;
    }

    100% {
        top: 0%;
        opacity: 0;
        margin-left: 0px;
    }
}

@-webkit-keyframes bigBubble {
    0% {
        top: 100%;
        margin-left: 20px;
    }

    25% {
        margin-left: -20px;
    }

    50% {
        margin-left: 20px;
    }

    75% {
        margin-left: -20px;
    }

    100% {
        top: 0%;
        opacity: 0;
        margin-left: 0px;
    }
}

@keyframes bigBubble {
    0% {
        top: 100%;
        margin-left: 20px;
    }

    25% {
        margin-left: -20px;
    }

    50% {
        margin-left: 20px;
    }

    75% {
        margin-left: -20px;
    }

    100% {
        top: 0%;
        opacity: 0;
        margin-left: 0px;
    }
}
.bootom_wave {
    position: absolute;
    width: 100%;
    height: 110px;
    left: 0;
    bottom: -13px;
    background-image: url(../images/wave-shape.png);
    background-repeat: repeat-x;
    background-size: 51% 100px;
    background-position: 397px 0px;
    transform: scale(2.5, 1);
}
.dark-mode .bootom_wave {
    background-image: url(../images/wave-shape-dark.png);
}
.banner_section .owl-carousel .owl-nav button.owl-next, .banner_section .owl-carousel .owl-nav button.owl-prev {
    position: absolute;
    top: 50%;
    width: 60px;
    height: 60px;
    background: #ffffff3d;
    border-radius: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    font-size: 20px;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 16px rgb(144 142 142 / 54%);
}
.banner_section .owl-carousel .owl-nav button.owl-next:hover, .banner_section .owl-carousel .owl-nav button.owl-prev:hover {
    background: var(--hover_gradient);
    color: var(--white);
    transition: 0.5s;
}
.banner_section .owl-carousel .owl-nav button.owl-next {
    right: -10%;
}
.banner_section .owl-carousel .owl-nav button.owl-prev {
    left: -10%;
}
.banner_section .banner_content {
    transform: translateY(30px);
}
.banner_section .owl-item.active .banner_content {
    transform: translateY(0px) !important;
    transition: 2s;
}
/* -----banner start--------- */

/* -----brands section------ */
/* .brands_area {
    background-color: var(--body_color);
    padding-top: 80px;
} */
.brands_area {
    background-color: #1f486e;
    padding-top: 0px;
}
.brands_area .owl-dots {
    display: none;
}
.dark-mode .brands_area {
    background-color: #183d60;
}
.brans_img {
    width: 100%;
    border-radius: 4px;
    /* filter: grayscale(1); */
    transition: 0.5s;
    border-radius: 50%;
    border: 1px solid #7ab5e4;
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.brans_img img {
    max-width: 30px;
    display: table;
    margin: auto;
}
.brands_item:hover .brans_img{
    filter: grayscale(0);
    transition: 0.5s;
}
.brands_area .owl-stage-outer {
    padding: 30px 0;
}
.brands_item {
    padding: 5px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    width: 75px;
    height: 75px;
    margin: auto;
    background: var(--white);
    /* box-shadow: 1px 0px 20px 1px #c8c7c745, -5px -4px 60px 1px #ffffff; */
    position: relative;
    z-index: 9;
}
.dark-mode .brands_item {
    background: #c6c6c6;
    
}
.brands_area .owl-item.active {
    text-align: center;
}
.brands_area .owl-item:nth-child(even) {
    margin-top: 60px;
}
.brand_text {
    color: #000;
}
.brands_area .section_title {
    padding-left: 30px;
}
.brands_area .section_title b, .brands_area .section_title span {
    color: var(--white);
}
.brands_area .section_title span::before {
    
}
/* -----brands section----- */

/* -----service start------ */
.services_sec {
    padding: 120px 0 60px;
    position: relative;
    background: var(--body_color);
}
.service_content span {
    color: #000;
    position: relative;
    z-index: 99;
    font-family: var(--para_family);
    color: var(--para_color);
    display: block;
    margin-bottom: 30px;
}
.read_btn {
    position: relative;
    z-index: 4;
    display: inline-flex;
    align-items: center;
}
.read_btn span {
    color: var(--white);
    margin-bottom: 0;
    margin-left: 10px;
    transition: 0.5s;

}
.read_btn:hover span {
    transform: translateX(5px);
    transition: 0.5s;
}
a.service_img {
    display: block;
    margin-bottom: 15px;
    overflow: hidden;
}
a.service_img img {
    transition: 0.5s;
}
a.service_img:hover img{
    transform: scale(1.2);
    transition: 0.5s;
}
.service_title {
    font-size: 24px;
    display: block;
    color: var(--font_black);
    text-decoration: none !important;
    font-weight: 600;
    transition: 0.5s;
}
.service_title:hover {
    color: var(--deep_green);
    transition: 0.5s;
}
.service_para {
    font-family: var(--para_family);
    color: var(--para_color);
    font-size: 14px;
    display: block;
}
.explore_btn {
    box-shadow: none;
    margin-top: 30px;
    text-transform: capitalize;
    margin-left: 1px;
}
.explore_btn span {
    margin-left: 5px;
    transition: 0.5s;
}
.explore_btn:hover span {
    transform: translateX(5px);
    transition: 0.5s;
}
.service_item {
    padding: 0px;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.service_item img {
    transition: 0.5s;
}
.service_item:hover img {
    transform: scale(1.2);
    transition: 0.5s;

}
.service_item::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    background: linear-gradient(0deg, rgb(28 60 155) 0%, rgba(0,0,0,0) 100%);
    top: 0;
    left: 0;
}
.service_overley {
    position: absolute;
    width: 100%;
    z-index: 3;
    left: 0;
    padding: 15px;
    transition: 0.5s;
    bottom: -106px;
}
.service_item:hover .service_overley {
    top: inherit;
    bottom: 0;
    transition: 0.5s;
}
.service_overley b {
    font-family: var(--para_family);
    display: block;
    margin-bottom: 20px;
    font-size: 22px;
    color: var(--white);
}
.service_overley p {
    color: var(--white);
}
.lineShape {
    position: absolute;
    z-index: 0;
    opacity: .3;
}
.lineshape1 {
    top: 0;
    left: 0;
}
.lineshape2 {
    right: 0;
    bottom: 0;
}
.box_shape {
    position: absolute;
    animation: 3.5s linear infinite alternate jumpThree;
    opacity: .5;
}
.box_shape1 {
    bottom: 2%;
    left: 2%;
}
.box_shape2 {
    right: 2%;
    top: 2%;
}
@keyframes jumpThree {
    0% {
        transform: translateY(-30px);
    }
    100% {
        transform: translateY(30px);
    }
}
@keyframes moveside {
    0% {
        transform: translateX(-10px);
    }
    100% {
        transform: translateX(10px);
    }
}
/* ---dots style--- */
.services_slider .owl-dots {
    text-align: center;
    position: absolute;
    top: -41px;
    right: 0;
}
.services_slider  .owl-dots button.owl-dot {
    width: 18px;
    height: 7px;
    border-radius: 4px;
    display: inline-block;
    background: var(--green);
    margin: 0 3px;
    transition: 0.5s;
}
.services_slider  .owl-dots button.owl-dot.active {
    background-color: var(--deep_green);
    transition: 0.5s;
    width: 24px;
  }
.services_slider  .owl-dots button.owl-dot:focus {
    outline: none;
  }
.services_slider  .owl-nav button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.38) !important;
  }
.services_slider  span {
      font-size: 70px;    
      position: relative;
      top: -5px;
  }
.services_slider  .owl-nav button:focus {
      outline: none;
  }
/* ---dots style--- */

/* -----service close------ */

/* -----about sectio------- */

.section_title {
    position: relative;
    z-index: 99;
}
.section_title span {
    position: relative;
    margin-bottom: 15px;
    display: inline-block;
    padding-left: 15px;
    line-height: 1;
    color: var(--deep_green);
    font-size: 18px;
    font-weight: 500;
    font-family: var(--fontFamily);
}
.section_title span::before {
    content: '';
    width: 3px;
    height: 100%;
    background-color: var(--deep_green);
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.section_title b {
    color: var(--font_black);
    font-size: 36px;
    font-weight: 700;
    display: block;
    line-height: 44px;
    margin-bottom: 30px;
}




/* ---portfolio_sec--------- */
.portfolio_sec {
    padding: 60px 0;
    position: relative;
    background: linear-gradient(to top right, #e6edfb, #e5fbff52, #ffffff, #effdff, #ffffff, #b3f7fa);
}
.dark-mode .portfolio_sec {
    background: var(--bg_gradient);
}

.gallery_img {
    position: relative;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 30px;
}
.gallery_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.gallery_items {
    margin-bottom: 30px;
}
.tab-content {
    position: relative;
    z-index: 5;
}
/* -----tab-- */
.gallery_menu ul {
    list-style: none;
    display: flex;
    max-width: 600px;
    justify-content: space-between;
    margin: 0 auto 50px;
    position: relative;
    z-index: 1;
    padding: 10px;
    box-shadow: 20px 20px 60px #e0e0e0, -20px -20px 60px #ffffff;
    background: #fff;
}
.gallery_menu ul li:hover button{
    color: var(--violet);
    transition: 0.5s;
}
.gallery_menu ul li.active {
    /* background: var(--gradient); */
    color: var(--white);
}
.tab_indicator {
    position: absolute;
    width: calc(11% - 0px);
    height: 42px;
    background: var(--gradient);
    transition: all 300ms ease-in-out !important;
    z-index: 2;
    border-radius: 4px;
}
ul.portfolio_tab {
    list-style: none;
    display: flex;
    max-width: 100%;
    justify-content: space-between;
    margin: 0 auto 50px;
    position: relative;
    z-index: 5;
    padding: 10px;
    box-shadow: 20px 20px 60px #e0e0e0, -20px -20px 60px #ffffff;
    background: #fff;
    border-bottom: none;
}
.dark-mode ul.portfolio_tab {
    box-shadow: 13px 12px 13px #000000, -10px -10px 60px #0e0e0e;
    background: #d6d6d6;
    border-radius: 4px;
}
ul.portfolio_tab li {
    width: 11%;
    position: relative;
    text-align: center;
    border-radius: 4px;
    transition: all 300ms ease-in-out;
    z-index: 3;
    text-transform: capitalize;
    font-size: 18px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: 0.5s;
}
ul.portfolio_tab li .nav-link {
    width: 100%;
    background-color: transparent !important;
    border: none !important;
    color: var(--para_color);
}
.gallery_menu .nav-tabs .nav-link.active {
    color: var(--white);
}
/* -----tab--- */

/* ---portfolio_sec--------- */

/* ------counter section---- */
.counter_sec {
    background: var(--body_color);
}
.counter_inner {
    background-image: url(../images/counter_bg.jpeg);
    position: relative;
    z-index: 1;
    background-size: cover;
    background-attachment: fixed;
    padding: 30px;
    border-radius: 4px;
    overflow: hidden;
}
.counter_inner::after {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--gradient);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0.8;
}
.counter_inner .section_title b, .counter_inner .section_title span {
    color: var(--white);
    position: relative;
    z-index: 9;
}
.counter_inner .section_title span::before {
    background-color: var(--white);
}
.counter_item {
    position: relative;
    z-index: 4 !important;
    text-align: center;
}
.counter_item b {
    color: #fff;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 2px;
    margin-top: 15px;
    display: block;
}
.counter_item p {
    color: var(--white);
}
/* ------counter section-----= */

/* ------we served------------ */
.we_served {
    padding: 80px 0 80px;
    /* background: var(--bg_gradient); */
    /* margin-top: -140px; */
    background: var(--body_color);
}

/* ==== */
.services {
    /* position: relative;
    width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; */
}
.we_service_item {
    display: flex;
    align-items: center;
    box-shadow: 7px 8px 9px #e0e0e0a6, -10px -10px 9px 6px #fdfafd;
    background: #fff;
    padding: 30px 15px 30px 0;
    border-radius: 15px;
    gap: 15px;
    position: relative;
    margin-bottom: 30px;
    transition: 0.5s;
    overflow: hidden;
    transition: 0.5s;
}
.dark-mode .we_service_item {
    box-shadow: rgb(224 224 224 / 10%) 7px 8px 9px, rgb(104 100 104 / 8%) -10px -10px 9px 6px;
    background: #656565;
}
.we_service_item::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: var(--gradient);
    opacity: 0;
    z-index: 1;
}
/* .we_service_item::after {
    width: 50%;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background-image: url(../images/box-shape-45.png);
} */
.we_service_item:hover::before {
    opacity: 1;
    transition: 0.5s;
}
.we_service_item:hover {
    transform: scale(1.1);
    transition: 0.5s;
    z-index: 9;
}
.we_service_item:hover .service_name {
    color: var(--white);
}
.we_service_item:hover .no_span {
    color: #f4defb29;
    transition: 0.5s;
}
.we_service_icon {
    width: 90px;
    height: 69px;
    background: var(--gradient);
    border-radius: 0px 30px 30px 0;
    padding: 12px;
    padding-left: 15px;
    position: relative;
    z-index: 2;
}
.we_service_icon img {
    max-width: 42px;
    filter: brightness(0) invert(1);
}
.service_name {
    font-size: 16px;
    color: #000;
    text-transform: capitalize;
    width: 120px;
    position: relative;
    z-index: 2;
    font-family: 'Mulish', sans-serif;
}
.no_span {
    color: #8020a308;
    font-size: 58px;
    position: absolute;
    right: 15px;
    font-weight: 600;
    top: 41%;
    transform: translateY(-50%);
    z-index: 2;
    opacity: 0.1;
}
/* ==== */
/* ------we served------------ */


/* ====caht banner sec start===== */
section.chat_banner_sec {
background: var(--gradient);
font-family: 'Mulish', sans-serif;
z-index: 1;
position: relative;
overflow: hidden;
}
.chat_banner_text b {
    font-size: 24px;
    display: block;
    font-weight: 100;
    margin-bottom: 10px;
    color: var(--white);
}
.call_btn {
    background: var(--white);
    border: 1px solid var(--white);
    color: var(--violet) !important;
    border-radius: 30px;
    padding: 8px 30px;
    transition: 0.5s;
    box-shadow: 0px 1px 16px rgb(0 0 0 / 15%);
}
.call_btn:hover {
    background: var(--violet);
    transition: 0.5s;
    color: var(--white) !important;
}
.offer_text b {
    display: block;
    text-align: right;
    font-size: 32px;
    text-transform: uppercase;
    color: var(--white);
}  
.offer_text span {
    display: block;
    text-align: right;
    color: var(--white);
} 
.more_options {
    position: relative;
    z-index: 3;
    padding: 80px 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.more_options::before {
    content: "";
    width: 300%;
    height: 101%;
    background: #f8f8f8;
    left: 0px;
    top: -1px;
    clip-path: polygon(8% 0%, 100% 0px, 100% 100%, 0% 100%);
    position: absolute;
}
.dark-mode .more_options::before {
    background: #666666;
}
.chat_btn {
    text-transform: capitalize;
} 
.idea_img img {
    max-width: 160px;
    animation: 1.5s linear infinite alternate moveside;
}
.ideas_text {
    display: flex;
    align-items: center;
}
.chat_banner_text {
    width: calc(100% - 160px);
}
/* ====caht banner sec close===== */

/* ---testimonial sec start---- */
.testimonial_sec {
    padding: 80px 0 80px;
    background: linear-gradient(to top right, #e6edfb, #e5fbff52, #ffffff, #effdff, #ffffff, #b3f7fa);
    overflow: hidden;
    margin-top: 0;
}
.dark-mode .testimonial_sec {
    background: var(--bg_gradient);
}
.testimonial_para {
    color: var(--para_color);
    margin-bottom: 50px;
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
}
.testimonial_item {
    margin-left: 40px;
    margin-right: 15px;
    background: #fff;
    border-radius: 4px;
    padding-left: 55px;
    position: relative;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
}
.dark-mode .testimonial_item {
    background: rgb(220 219 219);
}
.user_article {
    font-family: 'Mulish', sans-serif;
    color: var(--para_color);
    font-size: 14px;
    margin-bottom: 15px;
}
.tes_user_img {
    width: 80px;
    height: 80px;
    top: 28%;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    left: -40px;
    border: 2px solid #fff;
}
.tes_user_img {
    width: 80px;
    height: 80px;
    top: 28%;
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    left: -40px;
    border: 2px solid #fff;
}
.user_info b {
    font-size: 18px;
    font-weight: 500;
    color: var(--font_black);
}
.user_info p {
    font-size: 12px;
    font-family: 'Mulish', sans-serif;
    color: var(--para_color);
}
.rating {
    font-size: 14px;
    color: #f3c61b;
}
.testimonial_sec .owl-stage-outer {
    padding: 15px 0;
}
.testimonial_sec .owl-dots {
    display: none;
}
.testimonial_sec .tes_user {
    display: flex;
    justify-content: space-between;
    align-items: end;
}
.testimonial_inner {
    padding: 15px;
    padding-left: 0;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}
.quote_icon {
    position: absolute;
    top: -15px;
    right: -9px;
    width: 60px;
    height: 60px;
    background: var(--gradient);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.quote_icon img {
    max-width: 23px;
    transform: translateY(4px);
}

/* ------pricing section----- */
section.pricing_sec {
    padding: 80px 0;
    background: var(--body_color);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}
.pricing_tab ul {
    display: grid;
    margin-top: 15px;
    border: none;
}
.pricing_item {
    padding: 15px;
    border-radius: 4px;
    box-shadow: 0px 6px 14.25px 0.75px rgb(0 0 0 / 17%);
    margin: 0 0px 30px;
    position: relative;
    background: var(--body_color);
}
.dark-mode .pricing_item, .dark-mode .card_pricing::after, .dark-mode .pricing_tab .nav-tabs .nav-link {
    background: #5d5d5d;
}
section.pricing_sec .owl-stage-outer {
    padding: 15px 0;
}
.package_head {
    border-bottom: 1px solid #eee;
    padding-bottom: 12px;
    position: relative;
    z-index: 2;
}
.card_pricing {
    width: 95px;
    background: var(--gradient);
    position: absolute;
    height: 112px;
    right: 0px;
    top: -30px;
    padding-top: 30px;
    text-align: center;
    z-index: 3;
    border-radius: 4px;
    border-top-left-radius: 0px;
}
.card_pricing::before {
    content: "";
    width: 14px;
    height: 14px;
    background-color: #06288a;
    top: 1px;
    left: -13px;
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    position: absolute;
}
.card_pricing::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 14px;
    background-color: #fff;
    left: 0;
    bottom: -1px;
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.pricing_symbol {
    font-size: 14px;
    color: #fff;
}
.pricing_no {
    font-size: 24px;
    color: #fff;
    letter-spacing: .5px;
    line-height: 1;
}
.pricing_time {
    font-size: 14px;
    color: #fff;
}
.package_name {
    font-size: 20px;
    color: var(--font_black);
    margin-bottom: 10px;
    font-family: var(--para_family);
    max-width: calc(100% - 100px);
    font-weight: 600;
    min-height: 60px;
}
.package_head label {
    color: var(--para_color);
    font-size: 14px;
    display: block;
    font-family: var(--para_family);
}
.packages_body {
    padding: 15px 0;
    position: relative;
    z-index: 2;
}
.packages_body ul {
    list-style: none;
    display: grid;
    gap: 10px;
    height: 280px;
    overflow-y: scroll;
}
.packages_body ul li {
    font-family: var(--para_family);
    font-size: 14px;
    color: var(--para_color);
}
/* .packages_body ul li span {
    width: 25px;
    height: 25px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #fceeff;
    color: #9c27b0;
    margin-right: 5px;
} */
.packages_body ul li span {
    width: 25px;
    height: 25px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #d4dfff;
    color: #1c3c9b;
    margin-right: 5px;
}


.style-3::-webkit-scrollbar-track
{
	/* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
	background-color: #d4dfff;
}

.style-3::-webkit-scrollbar
{
	width: 6px;
	background-color: #d4dfff;
}

.style-3::-webkit-scrollbar-thumb
{
	background-color: #1c3c9b;
}
.order_now {
    display: table;
    margin: 15px 0 5px;
    box-shadow: 0px 1px 16px rgb(0 0 0 / 15%);
    text-transform: capitalize;
    position: relative;
    z-index: 3;
}
.package_footer {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-flow: wrap;
}
.view_details {
    background: transparent;
    border: 2px solid var(--green);
    color:var(--green) !important;
    box-sizing: border-box;
}
.view_details:hover {
    color: var(--white) !important;
    transition: 0.5s;
    border: 2px solid var(--deep_green);
}
.package_footer .order_now {
    display: flex;
}
.order_now:hover {
    box-shadow: none;
    transition: 0.5s;
}
.pricing_item::before {
    content: "";
    position: absolute;
    width: 0%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-color: #c7e9fe;
    z-index: 1;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    transition: 0.5s;
}
.pricing_item::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 100%;
    top: 0;
    right: 0;
    position: absolute;
    background-color: #c7e9fe;
    z-index: 1;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    transition: 0.5s;
}
.pricing_item:hover::after, .pricing_item:hover::before {
    width: 50%;
    transition: 0.5s;
}
.pricing_item:hover .card_pricing::after {
    background-color: #c7e9fe;
}
.pricing_sec .pricing_tab ul {
    padding: 15px;
    box-shadow: -7px 1px 60px #e0e0e0, 13px -2px 60px #ffffff;
    border-radius: 4px;
    position: relative;
    z-index: 5;
    display: flex;
    margin-bottom: 50px;
}
.pricing_sec .pricing_tab ul li {
    flex-grow: 1;
    flex-basis: 0;
}
.dark-mode .pricing_tab ul {
    box-shadow: rgb(19 19 19) -1px 0px 60px, rgb(34 30 30) -5px -6px 60px;
}
.pricing_body {
    position: relative;
    z-index: 5;
}
.pricing_tab ul li button {
    width: 100%;
}
.pricing_tab .nav-tabs .nav-link.active {
    background: var(--gradient) !important;
    color: var(--white);
    border: none;
    border-radius: 4px;
    position: relative;
    box-shadow: none;
    animation: shadow-pulse 1s infinite;
    overflow: hidden;
}
.pricing_tab .nav-tabs .nav-link.active::after {
    content: "";
    width: 11px;
    height: 100%;
    background-color: #ffffff63;
    position: absolute;
    top: 0;
    transform: skewX(-20deg);
    animation: 1s linear infinite rightleft;
}
@keyframes shadow-pulse{ 
    0%{box-shadow:0 0 0 0px #5d9295b9;}
    100%{box-shadow:0 0 0 15px rgba(0, 0, 0, 0);}
}
@keyframes rightleft {
    0% {
        left: -15px;
    }
    100% {
        left: 103%;
    }
}
.pricing_tab .nav-tabs .nav-link {
    border-radius: 4px;
    border: none !important;
    padding: 18px 10px;
    color: var(--para_color);
    box-shadow: inset -5px -7px 12px 3px rgb(222 220 220 / 45%);
}
.pricing_tab .nav-tabs .nav-link:hover {
    background: #41afc43b;
    transition: 0.5s;
}
.pricing_sec .tab-pane.fade {
    transform: translateY(50px);
    opacity: 0;
}
.pricing_sec .tab-pane.fade.active.show {
    transform: translateY(0px);
    transition: 0.5s;
    opacity: 1;
}
.pricing_sec .owl-carousel .owl-nav button.owl-next, .pricing_sec .owl-carousel .owl-nav button.owl-prev {
    width: 50px;
    height: 35px;
    background: var(--gradient);
    font-size: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 4px;
}
.pricing_sec .owl-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
}
/* ------pricing section------ */

/* -----quote start---------- */
.quote_sec {
    padding: 80px 0;
    background: #f8f8f8 ;
    overflow-x: hidden;
}
.dark-mode .quote_sec {
    background: #302f2f;
}
p.quote_para {
    color: var(--para_color);
    margin-bottom: 50px;
}
.quote_content .from-group {
    margin-bottom: 30px;
}
.quote_content .from-group .form-control {
    background-color: #ececec;
    border: 1px solid transparent;
    box-shadow: none !important;
    min-height: 44px;
    font-family: var(--para_family);
    transition: 0.5s;
}
.quote_content .from-group .form-control:focus, .quote_content .from-group .form-control:active {
    border-color: var(--deep_green);
    transition: 0.5s;
}
.get_quote span {
    margin-left: 5px;
    transition: 0.5s;
}
.get_quote:hover span {
    transform: translateX(10px);
    transition: 0.5s;
}
.quote_img {
    padding: 30px;
    position: relative;
}
.quote_img img {
    border-radius: 8px;
    position: relative;
    z-index: 2;
}
.quote_img::before {
    content: "";
    width: 30%;
    height: 30%;
    border-radius: 0px 10px 0px 0px;
    background: var(--gradient);
    clip-path: polygon(100% 0%, 100% 100%, 0% 0%);
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
}
.quote_shape {
    position: absolute;
    top: 4px;
    right: 11px;
    z-index: 1;
}
.quote_shape img {
    
}

/* -----footer start----- */
.footer_area {
    background: url(../images/world-map.png) center no-repeat #1f486e;
    padding: 80px 0 0px;
    position: relative;
    background-attachment: fixed;
}
.dark-mode .footer_area {
    background: url(../images/world-map.png) center no-repeat #071f36;
}
.footer_brand img {
    max-width: 180px;
    margin-bottom: 30px;
}
.brand_para {
    color: var(--white);
    font-family: var(--para_family);
    font-size: 14px;
    line-height: 26px;
    display: block;
    font-weight: 300;
}
.footer_content_info {
    color: var(--white);
    position: relative;
}
.footer_content_title {
    color: var(--white);
    position: relative;
    display: block;
    text-transform: capitalize;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 1px;
    padding-left: 15px;
    margin-bottom: 30px;
}
.footer_content_title::before {
    content: '';
    width: 3px;
    height: 100%;
    background-color: var(--white);
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.footer_content ul {
    list-style: none;
    display: grid;
    gap: 15px;
}
.footer_content ul li {
    
} 
.footer_content ul li a {
    color: var(--white);
    text-decoration: none;
    font-family: var(--para_family);
    display: block;
    text-transform: capitalize;
    padding: 0 5px;
    transition: 0.5s;
    position: relative;
    padding-left: 15px;
}
.footer_content ul li a::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    left: 0;
}
.footer_content ul li a:hover {
    color: var(--green);
    transition: 0.5s;
    padding-left: 25px;
}
.contact_icon {
    width: 50px;
    height: 50px;
    background: #ffffff61;
    border-radius: 4px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.contact_item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}
.contact_info {
    width: calc(100% - 65px);
}
.contact_info b {
    display: block;
    font-size: 14px;
    color: #c9c9c9;
    text-transform: capitalize;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1;
    margin-bottom: 3px;
}
.contact_info span, .contact_info a {
    font-family: var(--para_family);
    color: var(--white);
    font-size: 14px;
    text-decoration: none;
    transition: 0.5s;
}
.contact_info a:hover {
    color: var(--green);
    transition: 0.5s;
}
span.newsletter_para {
    color: var(--white);
    font-family: var(--para_family);
    font-size: 14px;
    line-height: 26px;
    display: block;
    font-weight: 300;
    margin-bottom: 15px;
}
.news_letter_area .form-control {
    background: transparent;
    border: 2px solid #fafafa61;
    height: 44px;
    margin-bottom: 15px;
    color: #fff;
    box-shadow: none !important;
}
.news_letter_area .form-control::placeholder {
    color: #fafafa61;
}
.subscribe_btn span {
    margin-left: 10px;
    transition: 0.5s;
}
.subscribe_btn:hover span {
    transform: translateX(5px);
    transition: 0.5s;
}
.copy_right {
    background: #ffffff21;
    padding: 15px 0;
    margin-top: 30px;
}
.copy_right_text {
    font-size: 14px;
    color: #c3c3c3;
}
.copy_right_text a {
    color: var(--green);
    transition: 0.5s;
    text-decoration: none;
}
.copy_right_text a:hover {
    color: var(--deep_green);
    transition: 0.5s;
}
ul.bootom_navs {
    display: flex;
    justify-content: flex-end;
    list-style: none;
    gap: 15px;
}
ul.bootom_navs li a {
    color: var(--green);
    text-decoration: none;
    transition: 0.5s;
    text-transform: capitalize;
    font-size: 14px;
}
ul.bootom_navs li a:hover {
    color: var(--deep_green);
    transition: 0.5s;
}
.modal {
    z-index: 99999999;
}
.modal-title {
    color: #000;
}
.modal-header {
    border-bottom: none;
}
.modal-content {
    background: var(--bg_gradient);
}
.modalPara {
    color: var(--para_color);
    font-family: var(--para_family);
    font-size: 14px;
    margin-bottom: 15px;
    display: block;
}
.quick_contacts {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}
.contacts_icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gradient);
    justify-content: center;
    align-items: center;
    font-size: 14px;
}
.contacts_info, .contacts_info a {
    color: #000;
    text-decoration: none;
    font-family: var(--para_family);
    font-size: 14px;
    transition: 0.5s;
    max-width: calc(100% - 45px);
    word-break: break-all;
}
.contacts_info a:hover {
    color: var(--deep_green);
    transition: 0.5s;
}
ul.modal_social {
    display: flex;
    gap: 10px;
    list-style: none;
    margin-top: 30px;
}
ul.modal_social li a {
    width: 30px;
    height: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 5px 5px 10px 3px rgb(146 145 145 / 32%);
    color: var(--para_color);
    transition: 0.5s;

}
ul.modal_social li a:hover {
    background: var(--deep_green);
    color: #fff;
    transition: 0.5s;
}
.quotes_form {
    padding: 30px;
    background: var(--white);
    border-radius: 4px;
}
.quotes_form .form-control {
    background: #eee;
    border: none !important;
    box-shadow: none !important;
    font-family: var(--para_family);
}
.quotes_form .form-control:focus, .quotes_form .form-control:active {
    background-color: #cadab6;
}
.form-floating label {
    color: var(--para_color);
}
.quotes_form textarea.form-control {
    min-height: 100px;
}
.sub_quote {
    margin-left: auto;
    display: table;
}
button.btn-close {
    background: #f8d7da;
    color: red !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    right: 23px;
    position: absolute;
    box-shadow: none !important;
}
button.btn-close:hover i {
    transform: rotate(90deg);
    transition: 0.5s;
}



/* =====================================
deatils page start
======================================== */
.soft_banner {
    position: relative;
    z-index: 3;
}
.soft_banner::after {
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #0000005c;
    position: absolute;
    z-index: 1;
}
.softbanner_overley {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    z-index: 2;
}
.dark-mode .soft_banner::after {
    background: #000000c2;
}
.softbanner_overley b {
    font-size: 36px;
    text-transform: capitalize;
    font-weight: 300;
    color: var(--white);
}
.breadcrumb {
    margin-top: 30px;
    margin-bottom: 0;
    font-family: 'Mulish', sans-serif;
}
.breadcrumb-item a {
    color: var(--white);
    text-decoration: none;
    transition: 0.5s;
}
.breadcrumb-item a:hover {
    color: var(--green);
    transition: 0.5s;
}
.breadcrumb-item.active, .breadcrumb-item+.breadcrumb-item::before {
    color: #b3b3b3;
}
section.package_details_sec {
    padding: 80px 0;
    background: var(--body_color);
}
.discount_amount {
    /* font-family: var(--para_family); */
    font-weight: 300;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}
.package_details_item .card_pricing {
    padding-top: 20px;
}
.package_details_item.pricing_item::before, .package_details_item.pricing_item::after {
    display: none;
}
.package_details_item .card_pricing::after {
    background-color: var(--white) !important;
}
.dark-mode .package_details_item .card_pricing::after {
    background-color: #5d5d5d !important;
}
.dark-mode .card_pricing::before {
    background-color: #0a122c;
}
.package_details_item .package_head {
    padding-bottom: 20px;
}
.pricing_content span {
    color: #000;
    text-align: center;
    margin: 30px 0 0;
    display: block;
    font-family: var(--para_family);
}
.pricing_content .order_now {
    display: table;
    margin: 30px auto 30px;
}
.chat_btn {
    border-radius: 30px;
    color: var(--deep_green);
    display: inline-flex;
    gap: 5px;
    transition: 0.5s;
}
.chat_btn:hover {
    background: var(--deep_green);
    color: var(--white);
    transition: 0.5s;
}
ul.more_chat {
    display: flex;
    list-style: none;
    gap: 20px;
}
ul.more_chat li {
    position: relative;
}
ul.more_chat li::after {
    width: 1px;
    height: 84%;
    content: "";
    right: -9px;
    position: absolute;
    background: #c5c0c0;
    top: 3px;
}
ul.more_chat li:nth-child(2)::after {
    display: none;
}
.badge_icon img {
    display: table;
    margin: 15px auto 0;
}
.package_details_sec .section_title b {
    margin-bottom: 60px;
}
.package_details_info label {
    color: #000;
    display: block;
    border-bottom: 1px solid #eee;
    font-size: 16px;
    margin-bottom: 15px;
}
ul.package_detail_listing {
    list-style: none;
    display: grid;
    gap: 15px;
}
ul.package_detail_listing li {
    color: var(--para_color);
    font-family: var(--para_family);
    font-size: 14px;
}
ul.package_detail_listing li i {
    width: 20px;
    height: 20px;
    display: inline-flex;
    background: #faf5fb;
    border-radius: 50%;
    margin-right: 6px;
    color: var(--violet);
    justify-content: center;
    align-items: center;
    font-size: 14px;
}
ul.package_detail_listing {
    list-style: none;
    display: grid;
    gap: 15px;
    
    max-height: 470px;
    overflow-y: scroll;
}
ul.package_detail_listing li span {
    width: calc(100% - 26px);
}



/* ============================================
about page
=============================================== */
.ref_banner {
    overflow: hidden;
    background-size: 200%;
    background-repeat: no-repeat;
    background-image: url("../images/soft-banner-bg.png");
    -webkit-animation: background-colors 20s infinite linear forwards;
    animation: background-colors 20s infinite linear forwards;
    position: relative;
    padding: 150px 0 100px;
}

/* -----about sectio------- */
section.about_sec {
    padding: 80px 0;
    background: var(--bg_gradient);
    overflow: hidden;
}
.about-img-2 {
    position: relative;
    padding: 30px;
}
.about-img-2 .main-img {
    border-radius: 15px;
    position: relative;
    z-index: 2;
}
.about-img-2 .shape .shape1 {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    transition: 1s;
}
.about-img-2 .shape .shape2 {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 0;
    transition: 1s;
}
.about_sec img {
    max-width: 100%;
    height: auto;
}
.about-img-2 .about-exp {
    text-align: center;
    border-radius: 10px;
    display: inline-block;
    padding: 20px  20px 15px;
    background-color: var(--white);
    -webkit-box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}
.about-img-2 .about-exp h4 {
    font-size: 26px;
    color: var(--font_black);
}
.about-img-2 .about-exp p {
    color: var(--para_color);
    font-size: 14px;
}
.section_title {
    position: relative;
    z-index: 99;
}
.section_title span {
    position: relative;
    margin-bottom: 15px;
    display: inline-block;
    padding-left: 15px;
    line-height: 1;
    color: var(--deep_green);
    font-size: 18px;
    font-weight: 500;
    font-family: var(--fontFamily);
}
.section_title span::before {
    content: '';
    width: 3px;
    height: 100%;
    background-color: var(--deep_green);
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.section_title b {
    color: var(--font_black);
    font-size: 36px;
    font-weight: 700;
    display: block;
    line-height: 44px;
    margin-bottom: 30px;
}
.dark-mode .section_title b {
    color: #cbcbcbde;
}
.about_content p {
    color: var(--para_color);
    margin-bottom: 50px;
}
.about_content ul {
    list-style: none;
}
.about_content ul li {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}
.article_info {
    width: calc(100% - 75px);
}
.article_icon {
    width: 60px;
    height: 60px;
    background: var(--hover_gradient);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}
.article_info b {
    font-family: 'Mulish', sans-serif;
    font-size: 16px;
    font-weight: 400;
    display: block;
    color: var(--font_black);
}
.article_info span {
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
    font-weight: 400;
    display: block;
    color: var(--para_color);
}
.modal-backdrop.show {
    opacity: .7;
  }

  .pricing_item.best_seller{
    /* background-color: var(--best__seller); */
  }
  .best_seller_label{
    background: var(--bs-yellow);
    color: #000;
  }
  .best_seller .card_pricing{
    padding-top:15px;
  }
  .best_seller .card_pricing::after{
    /* background-color: var(--best__seller); */
  }
  .addp{
    background-color: var(--bs-success);
    padding: 10px 10px;
    color: #fff !important;
    }
  
/* ----about section------- */