.box .platform-name {
    width: 100px;
    margin: 0 auto;
}

.box img,
.copyright img,
.counnt-img,
.gallery img,
.genere-slider img,
.nav-icon,
img.logo {
    object-fit: contain
}

.bg-d .icona:hover .icon,
.clr-l button:hover,
.clr-l.btn:hover,
.nav-bar .icona:hover .icon,
.text-white .icona:hover .icon {
    background: rgba(var(--clr-2), 1) !important;
    box-shadow: -3px -3px 0 rgba(var(--clr-1), 1)
}

.nav-icon,
img.logo {
    object-position: left
}

.box,
a {
    cursor: pointer
}

*,
:after,
:before,
ul.c-list li:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body,
html,
select {
    scrollbar-color: rgba(var(--dark-color), 1) #fff0
}

body,
html {
    scroll-behavior: smooth
}

body,
select {
    scrollbar-width: 8px
}

html,
select {
    scrollbar-width: thin
}

::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-image: linear-gradient(rgba(var(--dark-color), 1), rgba(var(--dark-color), 1))
}

::-moz-selection {
    color: rgba(var(--clr-2), 1);
    background: rgba(var(--dark-color), 1)
}

::selection {
    color: rgba(var(--clr-2), 1);
    background: rgba(var(--dark-color), 1)
}

html {
    scroll-snap-type: y mandatory
}

body {
    margin: 0;
    right: 0;
    -webkit-transition: margin-left .3s ease-in-out;
    transition: margin-left .3s ease-in-out;
    -webkit-overflow-scrolling: touch;
    font-family: Lato, sans-serif !important;
    line-height: 1.5;
    color: rgba(var(--dark-color), 1);
    background: rgba(var(--light-color), 1);
    overflow-x: hidden;
    font-size: 15px
}

.box,
.box .heading,
.box h1,
.box h2,
.box h3,
.box h4,
.box h5,
.box h6,
.box img,
.gallery img,
.icon {
    transition: .8s
}

footer,
section {
    overflow-x: hidden;
    overflow-y: clip
}

* {
    box-sizing: border-box
}

:after,
:before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit
}

a {
    outline: 0;
    text-decoration: none;
    color: inherit
}

.overlay {
    background: linear-gradient(rgba(var(--clr-3), .8), rgba(var(--dark-color), .8))
    }

    .banner .overlay, .footer .overlay {
        background:linear-gradient(rgba(var(--dark-color), .8), rgba(var(--clr-1), .8))
    }

    a.active, a:active, a:focus, a:hover {
        color:#54fff1 !important; outline:0 !important; text-decoration:none
    }

    audio, img, video {
        max-width:100%; height:auto
    }

    .fw-700, b, strong {
        font-weight:700
    }

    .heading, h1, h2, h3, h4, h5, h6 {
        font-style:normal; font-family:"Protest Strike", sans-serif; line-height:1.5
    }

    .f-45 {
        font-size:45px
    }

    .f-30 {
        font-size:30px
    }

    .f-24 {
        font-size:24px
    }

    .f-18 {
        font-size:18px
    }

    .clr-1 {
        color:rgba(var(--clr-1), 1)
    }

    .clr-2 {
        color:rgba(var(--clr-2), 1)
    }

    .btn, .clr-l, button {
        color:rgba(var(--light-color), 1) !important
    }

    .bg-1 {
        background:rgba(var(--clr-1), 1); background:rgba(var(--clr-2), 1)
    }

    .bg-l {
        background:rgba(var(--light-color), 1)
    }

    * .slick-dots li.slick-active button, .bg-d, .bg-d .iti__country-list, .bg-d select option, .box:hover, .btn, .icon, .process .box:before, button {
        background:rgba(var(--dark-color), 1)
    }

    .btn, button {
        border:none !important; text-transform:uppercase; padding:10px 22px !important; border-radius:25px !important; box-shadow:3px 3px 0 rgba(var(--clr-1), 1); transition-duration:.8s
    }

    .btn.active, .btn:hover, button.active, button:hover {
        color:rgba(var(--dark-color), 1) !important; background:rgba(var(--clr-1), 1) !important; box-shadow:-3px -3px 0 rgba(var(--clr-2), 1)
    }

    .clr-l .btn, .clr-l button, .side-body button {
        background:rgba(var(--clr-1), 1); color:rgba(var(--light-color), 1) !important; box-shadow:3px 3px 0 rgba(var(--clr-2), 1)
    }

    .clr-l button:hover, .clr-l.btn:hover {
        color:rgba(var(--dark-color), 1) !important
    }

    .form-control, input, select {
        background:0 0; color:inherit !important; border:unset !important; padding:10px 1px !important; box-shadow:unset !important; transition-duration:.8s; height:auto !important; border-radius:unset !important; border-bottom:1px solid rgba(var(--dark-color), 1) !important
    }

    .bg {
        background-attachment:fixed; background-size:cover; background-position:center
    }

    .form-control:focus, input:focus {
        outline:0; background:rgba(var(--light-color), 1); color:rgba(var(--clr-1), 1); border:1px solid rgba(var(--clr-1), 1); box-shadow:none
    }

    .form-control::placeholder, input::placeholder {
        color:rgba(var(--dark-color), 1); opacity:1
    }

    .iti {
        position:relative; display:inline-block; width:100%
    }

    input.phone, input[name=phone] {
        padding-left:75px !important
    }

    .bg-d .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {
        color:rgba(var(--dark-color), 1)
    }

    .bg-d .iti__country .iti__dial-code, .bg-d select option, .box:hover, .c-list li:before, .icon {
        color:rgba(var(--light-color), 1)
    }

    .form-control:focus::placeholder, input:focus::placeholder {
        color:rgba(var(--clr-1), 1)
    }

    .bg-d .form-control, .side-body .form-control, .bg-d input, .bg-d select, .text-white .form-control, .text-white input, .text-white select {
        background:rgba(255, 255, 255, 1) !important; color:rgba(var(--dark-color), 1) !important;
    }

    .text-white .form-control:focus, .text-white input:focus {
        background:rgba(var(--clr-3), 1); border:1px solid rgba(var(--clr-2), 1)
    }

    .text-white .form-control::placeholder, .text-white input::placeholder {
        color:rgba(var(--light-color), 1); opacity:1
    }

    input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
        -webkit-appearance:none; margin:0
    }

    input[type=number] {
        -moz-appearance:textfield
    }

    label.h {
        z-index:-999999999
    }

    input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea {
        font-size:16px
    }

    .counnt-img {
        height:80px; width:80px
    }

    .slick-dots li button:before {
        display:none
    }

    .slick-dots li button {
        box-shadow:none; background:rgba(var(--dark-color), .5); height:10px; width:10px; padding:0 !important
    }

    .slick-dots li {
        width:10px
    }

    * .slick-dots li.slick-active {
        width:20px
    }

    * .slick-dots li.slick-active button {
        height:10px; width:20px
    }

    .slick-dots {
        text-align:left
    }

    @supports (-moz-appearance:none) {
        SELECT {
            -moz-appearance:none !important; background:url(data:image/gif;base64,R0lGODlhBgAGAKEDAFVVVX9/f9TU1CgmNyH5BAEKAAMALAAAAAAGAAYAAAIODA4hCDKWxlhNvmCnGwUAOw==) right center no-repeat !important; background-position:calc(100% - 5px) center !important
        }
    }

    .icon {
        display:flex; border-radius:25px; justify-content:center; align-items:center; box-shadow:3px 3px 0 rgba(var(--clr-2), 1); width:40px; height:40px; justify-content:center; align-items:center; box-shadow:3px 3px 0 rgba(var(--clr-1), 1)
    }

    .icona:hover .icon {
        background:rgba(var(--clr-1), 1); box-shadow:-3px -3px 0 rgba(var(--clr-2), 1); color:rgba(var(--dark-color), 1)
    }

    .bg-d .icon, .nav-bar .icon, .text-white .icon {
        background:rgba(var(--clr-1), 1); box-shadow:3px 3px 0 rgba(var(--clr-2), 1); color:rgba(var(--light-color), 1)
    }

    .box:hover, .cta .bg-d {
        box-shadow:3px 3px 0 rgba(var(--clr-1), 1)
    }

    .cta .bg-d {
        border-radius:0 100px 100px 0
    }

    header {
        position:fixed; top:0; right:0; left:0; background:linear-gradient(rgba(var(--dark-color), 1), rgba(var(--dark-color), .9), rgba(var(--dark-color), .8), rgba(var(--dark-color), 0)); z-index:999
    }

    img.logo {
        width:100%; height:60px
    }

    .drop-down-cont {
        position:absolute; width:100%; max-height:0; transition:height .9s; right:0; top:80%; box-shadow:0 55px 36px rgb(0 52 0 / 40%); background-size:contain; background-repeat:no-repeat; background-position:110% 200px; z-index:9999999999; background-color:#e7fffe; border-radius:0 0 25px 25px; color:#000 !important; overflow:hidden
    }

    .drop-down:hover .drop-down-cont {
        transition:max-height .8s ease-out; max-height:140vh
    }

    .drop-down-cont ul li {
        margin-right:0; display:block
    }

    .drop-down-cont ul li a {
        font-size:14px !important
    }

    .nav-icon {
        width:30px; height:30px; margin-right:3px
    }

    .banner-img, .side-img, .why-choose-img {
        width:100%; object-fit:contain
    }

    .drop-down-cont ul li a:hover .nav-icon {
        filter:invert(48%) sepia(42%) saturate(2375%) hue-rotate(307deg) brightness(97%) contrast(93%)
    }

    .modal {
        z-index:99999999999999999999999999999999999
    }

    button.btn-close {
        padding:10px !important; position:absolute; top:-5px; right:0; opacity:1; background:red; z-index:99999999999
    }

    .c-list li, .cta {
        position:relative
    }

    .c-list li {
        padding:10px 0 10px 35px
    }

    .c-list li:before {
        content:"\e903"; font-family:icomoon; left:5px; border-radius:100%; width:25px; height:25px; padding:2px; position:absolute; background:rgba(var(--clr-1), 1); font-size:10px; display:flex; justify-content:center; align-items:center
    }

    .cta {
        margin-top:-100px; padding-bottom:5px; z-index:9
    }

    .footer-form {
        margin-bottom:-80px
    }

    .cta.right .bg-d {
        border-radius:100px 0 0 100px; box-shadow:-3px 3px 0 rgba(var(--clr-1), 1)
    }

    .banner-img {
        height:600px
    }

    .side-img {
        height:500px
    }

    .why-choose-img {
        height:400px
    }

    .box {
        border-radius:25px; background:#d5fffd; border:1px solid #0a192f; padding:20px; box-shadow:3px 3px 0 rgba(var(--clr-2), 1); min-height:300px
    }

    .why-choose .box {
        min-height:220px
    }

    .process .box {
        min-height:200px
    }

    .box img {
        height:50px; width:50px; margin-bottom:10px
    }

    .box:hover h3 {
        color:rgba(var(--clr-1), 1)
    }

    .box:hover img {
        filter:invert(79%) sepia(41%) saturate(225%) hue-rotate(301deg) brightness(110%) contrast(96%)
    }

    .genere-slider img {
        height:150px; width:160px; ma:initial; margin:0 auto
    }

    progress[value] {
        appearance:none; height:20px
    }

    progress[value]::-webkit-progress-bar {
        appearance:none; background-color:rgba(var(--dark-color), .8); border-radius:3px; box-shadow:0 2px 3px rgba(var(--light-color), .5) inset
    }

    progress[value]::-webkit-progress-value {
        background:rgba(var(--clr-2), 1)
    }

    .gallery {
        width:100%; height:250px
    }

    .gallery img {
        width:100%; height:100%
    }

    .gallery:hover img {
        filter:drop-shadow(5px 5px 5px rgba(var(--dark-color), .5))
    }

    .process {
        border-top:5px solid; padding-top:15px
    }

    .process .box:before {
        content:''; position:absolute; top:-15px; width:5px; height:15px; right:50%; left:50%
    }

    .reviews {
        background-repeat:no-repeat; background-size:contain; background-position:center
    }

    @media screen and (max-width:1367px) {
        .f-45 {
            font-size:40px
        }

        body {
            font-size:14px
        }

        .f-24 {
            font-size:22px
        }
    }

    @media screen and (max-width:1181px) {
        .f-45 {
            font-size:35px
        }

        .f-24 {
            font-size:20px
        }

        .gallery {
            height:240px
        }
    }

    @media screen and (max-width:992px) {
        .box {
            min-height:250px
        }

        .drop-down-cont {
            position:relative; height:auto; max-height:none !important; color:rgba(var(--light-color), 1) !important; box-shadow:unset
        }

        .drop-down-cont, .nav-bar {
            background:rgba(var(--dark-color), 1)
        }

        .nav-bar {
            position:fixed; top:0; right:0; left:0; width:100vw; height:100vh; transform:translateX(200%); z-index:99999999; transition:.8s; padding-left:20px; padding-right:20px; color:rgba(var(--light-color), 1); overflow-y:scroll
        }

        .nav-bar li {
            margin:20px auto
        }

        .drop-down-cont li {
            margin:10px auto !important
        }

        .nav-bar.active {
            transform:translateX(0)
        }
    }

    @media screen and (max-width:576px) {
        .process {
            border-top:none; border-left:5px solid; padding-top:0; padding-left:3px
        }

        .process .box:before {
            top:50%; width:15px; height:5px; right:auto; left:-15px; bottom:50%
        }

        .f-45 {
            font-size:30px
        }

        .gallery {
            height:250px
        }
    }

    @media screen and (max-width:431px) {
        body {
            font-size:12px
        }

        .btn, button {
            padding:10px !important
        }

        .side-img {
            height:200px
        }
    }

    .copyright img {
        height:50px; width:100%
    }

    .banner video {
        position:absolute; top:0; right:0; left:0; object-fit:cover; object-position:center; z-index:-1
    }

    .banner {
        position:relative; overflow:hidden; z-index:1
    }

    .side-bar-sm-frm {
        position:fixed; top:120px; left:0; background:rgba(var(--light-color), 1); transform:translateX(-100%); transition-duration:0.8s; z-index:99
    }

    .br {
        border-radius:25px
    }

    .side-bar-sm-frm.scroll {
        transform:translateX(-100%)
    }

    .side-bar-sm-frm.active {
        transform:translateX(0)
    }

    .side-head {
        transform:rotate(90deg); text-align:center; width:341px; cursor:pointer; height:49px; background:linear-gradient(rgba(var(--clr-1), 1), rgba(var(--clr-3), 1)); position:absolute; left:auto; right:-194px; font-size:24px; top:147px; text-align:center; color:#fff; border-radius:15px 15px 0 0; display:flex; justify-content:center; padding:0 20px; box-shadow:0 -3px 0 rgba(var(--dark-color), 1); align-items:center
    }

    .side-body, .chat-body {
        display:flex; justify-content:center; align-items:center; background-color:rgba(var(--dark-color), 1); color:rgba(var(--light-color), 1); box-shadow:0 0 36px rgba(var(--dark-color), .1)
    }

    .side-chat {
        position:fixed; right:0; top:200px; display:flex; transform:translateX(62%); z-index:9999
    }

    .side-call {
        position:fixed; right:0; top:150px; display:flex; transform:translateX(72%); z-index:9999
    }

    .side-email {
        position:fixed; right:0; top:250px; display:flex; transform:translateX(83%); z-index:9999
    }

    .side-fb {
        position:fixed; right:0; top:300px; display:flex; transform:translateX(77%); z-index:9999
    }

    .side-insta {
        position:fixed; right:0; top:350px; display:flex; transform:translateX(74%); z-index:9999
    }

    .side-chat:hover, .side-call:hover, .side-email:hover, .side-fb:hover, .side-insta:hover {
        transform:translateX(0)
    }

    .side-chat, .side-call, .side-email, .side-fb, .side-insta {
        transition:0.8s
    }

    .side-chat .icon, .side-call .icon, .side-email .icon, .side-fb .icon, .side-insta .icon {
        border-radius:25px 0 0 25px; background:linear-gradient(rgba(var(--clr-3), 1), rgba(var(--clr-1), 1)); color:rgba(var(--light-color), 1); box-shadow:-3px 0 0 rgba(var(--dark-color), 1); height:40px; width:50px
    }

    .clr-l .icon {
        background:rgba(var(--clr-1), 1); box-shadow:3px 3px 0 rgba(var(--clr-2), 1)
    }

    @media screen and (max-width:992px) {
        .side-bar-sm-frm, .side-chat, .side-call, .side-email, .side-fb, .side-insta {
            display:none
        }
    }
    
.accordion .accordion-button {
    color: #000 !important;
    background-color: rgba(var(--clr-1), 1) !important; /* Ensure --clr-1 is properly defined */
}

.accordion .accordion-button:hover {
    color: white !important;
    background-color: rgba(var(--dark-color), 1) !important; /* Ensure --dark-color is properly defined */
}


.accordion .accordion-button:not(.collapsed),
.accordion .accordion-button:focus {
    background-color: rgba(var(--clr-1), 1) !important;
    color: #000 !important;
}
    
    
/*    .faq-section {*/
/*    background: #fdfdfd !important;*/
/*    min-height: 100vh;*/
/*    padding: 10vh 0 0;*/
/*}*/
/*.faq-title h2 {*/
/*  position: relative;*/
/*  margin-bottom: 45px;*/
/*  display: inline-block;*/
/*  font-weight: 600;*/
/*  line-height: 1;*/
/*}*/
/*.faq-title h2::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: 50%;*/
/*    width: 60px;*/
/*    height: 2px;*/
/*    background: #E91E63;*/
/*    bottom: -25px;*/
/*    margin-left: -30px;*/
/*}*/
/*.faq-title p {*/
/*  padding: 0 190px;*/
/*  margin-bottom: 10px;*/
/*}*/

/*.faq {*/
/*  background: #FFFFFF;*/
/*  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);*/
/*  border-radius: 4px;*/
/*}*/

/*.faq .card {*/
/*  border: none;*/
/*  background: none;*/
/*  border-bottom: 1px dashed #CEE1F8;*/
/*  width: 100%;*/
/*}*/

/*.faq .card .card-header {*/
/*  padding: 0px;*/
/*  border: none;*/
/*  background: none;*/
/*  -webkit-transition: all 0.3s ease 0s;*/
/*  -moz-transition: all 0.3s ease 0s;*/
/*  -o-transition: all 0.3s ease 0s;*/
/*  transition: all 0.3s ease 0s;*/
/*}*/

/*.faq .card .card-header:hover {*/
/*    background: rgba(233, 30, 99, 0.1);*/
/*    padding-left: 10px;*/
/*}*/
/*.faq .card .card-header .faq-title {*/
/*  width: 100%;*/
/*  text-align: left;*/
/*  padding: 0px;*/
/*  padding-left: 30px;*/
/*  padding-right: 30px;*/
/*  font-weight: 400;*/
/*  font-size: 15px;*/
/*  letter-spacing: 1px;*/
/*  color: #3B566E;*/
/*  text-decoration: none !important;*/
/*  -webkit-transition: all 0.3s ease 0s;*/
/*  -moz-transition: all 0.3s ease 0s;*/
/*  -o-transition: all 0.3s ease 0s;*/
/*  transition: all 0.3s ease 0s;*/
/*  cursor: pointer;*/
/*  padding-top: 20px;*/
/*  padding-bottom: 20px;*/
/*}*/

/*.faq .card .card-header .faq-title .badge {*/
/*  display: inline-block;*/
/*  width: 20px;*/
/*  height: 20px;*/
/*  line-height: 14px;*/
/*  float: left;*/
/*  -webkit-border-radius: 100px;*/
/*  -moz-border-radius: 100px;*/
/*  border-radius: 100px;*/
/*  text-align: center;*/
/*  background: #E91E63;*/
/*  color: #fff;*/
/*  font-size: 12px;*/
/*  margin-right: 20px;*/
/*}*/

/*.faq .card .card-body {*/
/*  padding: 30px;*/
/*  padding-left: 35px;*/
/*  padding-bottom: 16px;*/
/*  font-weight: 400;*/
/*  font-size: 16px;*/
/*  color: #6F8BA4;*/
/*  line-height: 28px;*/
/*  letter-spacing: 1px;*/
/*  border-top: 1px solid #F3F8FF;*/
/*}*/

/*.faq .card .card-body p {*/
/*  margin-bottom: 14px;*/
/*}*/

/*@media (max-width: 991px) {*/
/*  .faq {*/
/*    margin-bottom: 30px;*/
/*  }*/
/*  .faq .card .card-header .faq-title {*/
/*    line-height: 26px;*/
/*    margin-top: 10px;*/
/*  }*/
/*}*/