@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    --primary: #10c581;
    --secondary: #f2f2f2;
    --text: #333;
    --background: #fff;
    --shadow: rgba(0,0,0,0.1);
    --font-jost: "Jost", sans-serif;
    --font-Instrument: "Jost", sans-serif;
    --theme-color: rgba(245, 240, 234, 1);
    --theme-color-two: rgba(231, 235, 235, 1);
    --primary-color: rgb(0, 255, 135);
    --primary-color-opc: rgba(16, 197, 129, 0.5);
    --primary-color-opc-2: rgba(16, 197, 129, 0.1);
    --title-color: rgb(55, 0, 60);
    --title-color-opp: rgba(17, 17, 17, 0.9);
    --white-color: rgba(255, 255, 255, 1);
    --white-color-opp: rgba(255, 255, 255, 0.7);
    --paragraph-color-1: rgba(102, 102, 102, 1);
    --paragraph-color-2: rgba(255, 255, 255, 0.8);
    --paragraph-color-3: rgba(88, 88, 88, 1);
    --border-color: rgba(153, 153, 153, 1);
    --border-color-1: rgba(224, 224, 224, 0.1);
    --border-color-2: rgba(0, 0, 0, 0.1);
    --border-color-3: rgba(17, 17, 17, 0.25);
    --border-color-4: rgba(255, 255, 255, 0.25);
    --fpl-purple: #37003c;
    --fpl-green: #00ff87;
    --fpl-pink: #ff0050;
    --fpl-blue: #00d4ff;
    --fpl-yellow: #ffd700;
    --fpl-dark: #1a1a1a;
    --fpl-light: #f8f9fa;
    --fpl-gray: #6c757d;
    --fpl-white: #ffffff;
    --shadow-light: 0 4px 15px rgba(0,0,0,0.08);
    --shadow-medium: 0 8px 25px rgba(0,0,0,0.12);
    --shadow-heavy: 0 15px 35px rgba(0,0,0,0.15);
    --c-pl-yellow:#ebff00;
    --c-pl-blue:#05f0ff;
    --c-pl-lilac:#953bff;
    --c-pl-green:#00ff87;
    --c-pl-orange:#ff6900;
    --c-pl-pink:#ff2882;
    --c-pl-purple:#37003c;
    --c-pl-green-hovered:#03f283;
    --c-competition-champions-league:#102de6;
    --c-competition-europa-league:#ff6900;
    --c-competition-conference-league:#00be14;
    --c-pl-purple-rgb:55,0,60;
    --c-blue:#0c33ff;
    --c-red:#fe1313;
    --c-mono-black:#000;
    --c-mono-p2:#faf9fa;
    --c-mono-p5:#f5f2f5;
    --c-mono-p10:#ebe5eb;
    --c-mono-p20:#d7ccd8;
    --c-mono-p30:#c3b2c4;
    --c-mono-p40:#af99b1;
    --c-mono-p50:#9b809d;
    --c-mono-p60:#87668a;
    --c-mono-p70:#7d5980;
    --c-mono-p80:#541e5d;
    --c-mono-p90:#41054b;
    --c-mono-p100:var(--c-pl-purple);
    --c-mono-p110:#28002b;
    --c-mono-p120:#1e0021;
    --c-mono-white:#fff;
    --c-mono-900:#0b0b0b;
    --c-mono-800:#191919;
    --c-mono-700:#262626;
    --c-mono-600:#404040;
    --c-mono-500:#595959;
    --c-mono-400:#8c8c8c;
    --c-mono-300:#b2b2b2;
    --c-mono-200:#e5e5e5;
    --c-mono-100:#faf9fa;
    --c-mono-white-rgb:255,255,255;
    --c-mono-black-rgb:0,0,0;
    --c-system-error:#e60023;
    --c-system-success:#34a853;
    --c-system-dark:#161616;
    --c-system-light:#fafcff;
    --c-system-error-light:#fff2f4;
    --c-gradient-001:linear-gradient(90deg,var(--c-pl-green),var(--c-pl-yellow));
    --c-gradient-002:linear-gradient(90deg,var(--c-pl-purple),var(--c-pl-blue));
    --c-gradient-003:linear-gradient(90deg,var(--c-pl-purple),var(--c-pl-green));
    --c-gradient-004:linear-gradient(90deg,var(--c-pl-purple),var(--c-pl-lilac));
    --c-gradient-005:linear-gradient(90deg,var(--c-pl-lilac),var(--c-pl-blue));
    --c-gradient-006:linear-gradient(90deg,var(--c-pl-lilac),var(--c-pl-pink));
    --c-gradient-007:linear-gradient(90deg,var(--c-pl-orange),var(--c-pl-pink));
    --c-gradient-fpl:linear-gradient(90deg,var(--c-pl-blue),var(--c-pl-lilac));
    --c-gradient-epl:linear-gradient(90deg,var(--c-pl-yellow),var(--c-pl-green));
    --c-gradient-fan-passport:linear-gradient(57.48deg,var(--c-pl-yellow) 2.92%,var(--c-pl-green) 11.51%,var(--c-pl-blue) 28.69%,var(--c-pl-lilac) 51.02%,var(--c-pl-pink) 71.2%,var(--c-pl-orange) 88.81%);
    --c-gradient-fan-passport-progress:linear-gradient(157.48deg,var(--c-pl-yellow) 2.92%,var(--c-pl-green) 11.51%,var(--c-pl-blue) 28.69%,var(--c-pl-lilac) 51.02%,var(--c-pl-pink) 71.2%,var(--c-pl-orange) 88.81%);
    --opacity-purple-5:rgba(var(--c-pl-purple-rgb),0.05);
    --opacity-purple-10:rgba(var(--c-pl-purple-rgb),0.1);
    --opacity-purple-15:rgba(var(--c-pl-purple-rgb),0.15);
    --opacity-purple-20:rgba(var(--c-pl-purple-rgb),0.2);
    --opacity-purple-25:rgba(var(--c-pl-purple-rgb),0.25);
    --opacity-purple-30:rgba(var(--c-pl-purple-rgb),0.3);
    --opacity-purple-35:rgba(var(--c-pl-purple-rgb),0.35);
    --opacity-purple-40:rgba(var(--c-pl-purple-rgb),0.4);
    --opacity-purple-45:rgba(var(--c-pl-purple-rgb),0.45);
    --opacity-purple-50:rgba(var(--c-pl-purple-rgb),0.5);
    --opacity-purple-55:rgba(var(--c-pl-purple-rgb),0.55);
    --opacity-purple-60:rgba(var(--c-pl-purple-rgb),0.6);
    --opacity-purple-65:rgba(var(--c-pl-purple-rgb),0.65);
    --opacity-purple-70:rgba(var(--c-pl-purple-rgb),0.7);
    --opacity-purple-75:rgba(var(--c-pl-purple-rgb),0.75);
    --opacity-purple-80:rgba(var(--c-pl-purple-rgb),0.8);
    --opacity-purple-85:rgba(var(--c-pl-purple-rgb),0.85);
    --opacity-purple-90:rgba(var(--c-pl-purple-rgb),0.9);
    --opacity-purple-95:rgba(var(--c-pl-purple-rgb),0.95);
    --opacity-black-5:rgba(var(--c-mono-black-rgb),0.05);
    --opacity-black-10:rgba(var(--c-mono-black-rgb),0.1);
    --opacity-black-15:rgba(var(--c-mono-black-rgb),0.15);
    --opacity-black-20:rgba(var(--c-mono-black-rgb),0.2);
    --opacity-black-25:rgba(var(--c-mono-black-rgb),0.25);
    --opacity-black-30:rgba(var(--c-mono-black-rgb),0.3);
    --opacity-black-35:rgba(var(--c-mono-black-rgb),0.35);
    --opacity-black-40:rgba(var(--c-mono-black-rgb),0.4);
    --opacity-black-45:rgba(var(--c-mono-black-rgb),0.45);
    --opacity-black-50:rgba(var(--c-mono-black-rgb),0.5);
    --opacity-black-55:rgba(var(--c-mono-black-rgb),0.55);
    --opacity-black-60:rgba(var(--c-mono-black-rgb),0.6);
    --opacity-black-65:rgba(var(--c-mono-black-rgb),0.65);
    --opacity-black-70:rgba(var(--c-mono-black-rgb),0.7);
    --opacity-black-75:rgba(var(--c-mono-black-rgb),0.75);
    --opacity-black-80:rgba(var(--c-mono-black-rgb),0.8);
    --opacity-black-85:rgba(var(--c-mono-black-rgb),0.85);
    --opacity-black-90:rgba(var(--c-mono-black-rgb),0.9);
    --opacity-black-95:rgba(var(--c-mono-black-rgb),0.95);
    --opacity-white-5:rgba(var(--c-mono-white-rgb),0.05);
    --opacity-white-10:rgba(var(--c-mono-white-rgb),0.1);
    --opacity-white-15:rgba(var(--c-mono-white-rgb),0.15);
    --opacity-white-20:rgba(var(--c-mono-white-rgb),0.2);
    --opacity-white-25:rgba(var(--c-mono-white-rgb),0.25);
    --opacity-white-30:rgba(var(--c-mono-white-rgb),0.3);
    --opacity-white-35:rgba(var(--c-mono-white-rgb),0.35);
    --opacity-white-40:rgba(var(--c-mono-white-rgb),0.4);
    --opacity-white-45:rgba(var(--c-mono-white-rgb),0.45);
    --opacity-white-50:rgba(var(--c-mono-white-rgb),0.5);
    --opacity-white-55:rgba(var(--c-mono-white-rgb),0.55);
    --opacity-white-60:rgba(var(--c-mono-white-rgb),0.6);
    --opacity-white-65:rgba(var(--c-mono-white-rgb),0.65);
    --opacity-white-70:rgba(var(--c-mono-white-rgb),0.7);
    --opacity-white-75:rgba(var(--c-mono-white-rgb),0.75);
    --opacity-white-80:rgba(var(--c-mono-white-rgb),0.8);
    --opacity-white-85:rgba(var(--c-mono-white-rgb),0.85);
    --opacity-white-90:rgba(var(--c-mono-white-rgb),0.9);
    --opacity-white-95:rgba(var(--c-mono-white-rgb),0.95)
}

*{
    margin:0;
    padding:0;
    scroll-behavior:smooth
}
html{
    font-size:100%;
    scroll-behavior:smooth
}
body{
    margin:0;
    padding:0;
    font-family:var(--font-jost);
    color:var(--title-color);
    font-size:16px;
    font-weight:400;
    line-height:30px;
}
h1,h2,h3,h4,h5,h6{
    font-family:var(--font-jost);
    font-weight:600;
    line-height:1.4;
    color:var(--title-color)
}
input{
    border:none;
    outline:none
}
button{
    outline:none;
    border:none
}
i.bx{
    vertical-align:middle
}
img{
    max-width:100%;
    height:auto
}
a{
    text-decoration:none
}
p{
    font-family:var(--font-jost);
    font-size:18px;
    font-weight:400;
    line-height:30px;
    margin-bottom:0px
}
ul{
    margin:0;
    padding:0;
    list-style:none
}
.pb-80{
    padding-bottom:80px
}
@media(min-width: 992px)and (max-width: 1199px){
    .pb-80{
        padding-bottom:60px
    }
}
.pb-90{
    padding-bottom:90px
}
@media(max-width: 991px){
    .pb-90{
        padding-bottom:80px
    }
}
@media(max-width: 767px){
    .pb-90{
        padding-bottom:70px
    }
}
.pb-190{
    padding-bottom:190px
}
.pb-30{
    padding-bottom:30px
}
.pb-8{
    padding-bottom:8px
}
.pb-18{
    padding-bottom:18px
}
.pb-32{
    padding-bottom:32px
}
.pb-35{
    padding-bottom:35px
}
.pb-40{
    padding-bottom:40px
}
@media(max-width: 1399px){
    .pb-40{
        padding-bottom:20px
    }
}
.pb-44{
    padding-bottom:44px
}
@media(max-width: 1399px){
    .pb-44{
        padding-bottom:30px
    }
}
.pb-46{
    padding-bottom:46px
}
.pb-10{
    padding-bottom:10px
}
.pb-12{
    padding-bottom:12px
}
.pb-14{
    padding-bottom:14px
}
.pb-16{
    padding-bottom:16px
}
.pb-20{
    padding-bottom:20px
}
.pb-24{
    padding-bottom:24px
}
.pb-28{
    padding-bottom:28px
}
.pb-12{
    padding-bottom:12px
}
.pb-14{
    padding-bottom:14px
}
.pt-50{
    padding-top:54px
}
.pt-60{
    padding-top:60px
}
.pt-65{
    padding-top:65px
}
.pt-117{
    padding-top:117px
}
.pt-100{
    padding-top:100px
}
@media(max-width: 1499px){
    .pt-100{
        padding-top:70px
    }
}
.pt-110{
    padding-top:110px
}
@media(min-width: 992px)and (max-width: 1199px){
    .pt-110{
        padding-top:90px
    }
}
@media(max-width: 991px){
    .pt-110{
        padding-top:70px
    }
}
.pt-70{
    padding-top:70px
}
.pt-85{
    padding-top:85px
}
.pt-80{
    padding-top:80px
}
.pt-88{
    padding-top:88px
}
.pt-125{
    padding-top:125px
}
@media(min-width: 992px)and (max-width: 1199px){
    .pt-125{
        padding-top:100px
    }
}
@media(max-width: 991px){
    .pt-125{
        padding-top:90px
    }
}
@media(max-width: 767px){
    .pt-125{
        padding-top:70px
    }
}
.pb-125{
    padding-bottom:125px
}
@media(min-width: 992px)and (max-width: 1199px){
    .pb-125{
        padding-bottom:100px
    }
}
@media(max-width: 991px){
    .pb-125{
        padding-bottom:90px
    }
}
.pt-155{
    padding-top:155px
}
@media(min-width: 992px)and (max-width: 1199px){
    .pt-155{
        padding-top:145px
    }
}
@media(max-width: 991px){
    .pt-155{
        padding-top:120px
    }
}
.mb-8{
    margin-bottom:8px
}
.mb-10{
    margin-bottom:10px
}
.mb-14{
    margin-bottom:14px
}
.mb-16{
    margin-bottom:1px
}
.mb-60{
    margin-bottom:60px
}
.mb-65{
    margin-bottom:65px
}
@media(min-width: 768px)and (max-width: 991px){
    .mb-65{
        margin-bottom:45px
    }
}
.mb-20{
    margin-bottom:20px
}
.mb-22{
    margin-bottom:22px
}
.mb-24{
    margin-bottom:24px
}
.mb-28{
    margin-bottom:28px
}
.mb-35{
    margin-bottom:35px
}
.mb-40{
    margin-bottom:40px
}
@media(max-width: 991px){
    .mb-40{
        margin-bottom:30px
    }
}
.mb-44{
    margin-bottom:44px
}
@media(max-width: 991px){
    .mb-44{
        margin-bottom:0px
    }
}
.mb-45{
    margin-bottom:45px
}
.mb-50{
    margin-bottom:50px
}
@media(max-width: 1199px){
    .mb-50{
        margin-bottom:40px
    }
}
.mb-48{
    margin-bottom:48px
}
@media(max-width: 1399px){
    .mb-48{
        margin-bottom:30px
    }
}
.mb-55{
    margin-bottom:55px
}
.mb-60{
    margin-bottom:60px
}
@media(max-width: 991px){
    .mb-60{
        margin-bottom:50px
    }
}
.mb-70{
    margin-bottom:70px
}
@media(min-width: 992px)and (max-width: 1199px){
    .mb-70{
        margin-bottom:60px
    }
}
@media(max-width: 991px){
    .mb-70{
        margin-bottom:50px
    }
}
@media(max-width: 767px){
    .mb-70{
        margin-bottom:50px
    }
}
.mb-80{
    margin-bottom:80px
}
@media(max-width: 991px){
    .mb-80{
        margin-bottom:70px
    }
}
@media(max-width: 767px){
    .mb-80{
        margin-bottom:50px
    }
}
.mb-150{
    margin-bottom:150px
}
.mb-28{
    margin-bottom:28px
}
@media(max-width: 767px){
    .mb-28{
        margin-bottom:14px
    }
}
.mb-24{
    margin-bottom:24px
}
.mb-40{
    margin-bottom:40px
}
.pb-170{
    padding-bottom:170px
}
@media(max-width: 1499px){
    .pb-170{
        padding-bottom:150px
    }
}
.pt-170{
    padding-top:170px
}
@media(min-width: 1400px)and (max-width: 1599px){
    .pt-170{
        padding-top:100px
    }
}
@media(max-width: 991px){
    .pt-170{
        padding-top:120px
    }
}
@media(max-width: 375px){
    .pt-170{
        padding-top:120px
    }
}
.pb-120{
    padding-bottom:120px
}
@media(max-width: 1199px){
    .pb-120{
        padding-bottom:100px
    }
}
@media(max-width: 991px){
    .pb-120{
        padding-bottom:90px
    }
}
.pb-164{
    padding-bottom:164px
}
@media(max-width: 991px){
    .pb-164{
        padding-bottom:90px
    }
}
@media(max-width: 375px){
    .pb-164{
        padding-bottom:100px
    }
}
.pb-50{
    padding-bottom:50px
}
.pb-54{
    padding-bottom:54px
}
.pb-14{
    padding-bottom:14px
}
@media(max-width: 1199px){
    .pb-14{
        padding-bottom:10px
    }
}
.pb-70{
    padding-bottom:70px
}
.pb-100{
    padding-bottom:100px
}
@media(max-width: 1499px){
    .pb-100{
        padding-bottom:70px
    }
}
.pt-95{
    padding-top:95px
}
@media(max-width: 991px){
    .pt-95{
        padding-top:80px
    }
}
@media(max-width: 767px){
    .pt-95{
        padding-top:70px
    }
}
.pb-95{
    padding-bottom:95px
}
@media(max-width: 991px){
    .pb-95{
        padding-bottom:80px
    }
}
@media(max-width: 767px){
    .pb-95{
        padding-bottom:70px
    }
}
.pb-65{
    padding-bottom:65px
}
.pb-110{
    padding-bottom:110px
}
.pb-150{
    padding-bottom:150px
}
@media(min-width: 992px)and (max-width: 1199px){
    .pb-150{
        margin-top:100px
    }
}
@media(max-width: 991px){
    .pb-150{
        margin-top:90px
    }
}
.pt-200{
    padding-top:200px
}
@media(max-width: 991px){
    .pt-200{
        padding-top:85px
    }
}
@media(max-width: 767px){
    .pt-200{
        padding-top:26px
    }
}
.mr-80{
    margin-right:80px
}
.ml-300{
    margin-left:300px
}
.mt-75{
    margin-top:75px
}
.mt-80{
    margin-top:80px
}
@media(min-width: 768px)and (max-width: 991px){
    .mt-80{
        margin-top:50px
    }
}
@media(max-width: 425px){
    .mt-80{
        margin-top:40px
    }
}
.mb-8{
    margin-bottom:8px
}
@media(min-width: 768px)and (max-width: 991px){
    .mb-8{
        margin-bottom:15px
    }
}
@media(max-width: 767px){
    .mb-8{
        margin-bottom:15px
    }
}
.mb-20{
    margin-bottom:20px
}
.mb-24{
    margin-bottom:24px
}
@media(max-width: 1199px){
    .mb-24{
        margin-bottom:15px
    }
}
.mb-80{
    margin-bottom:80px
}
@media(min-width: 768px)and (max-width: 991px){
    .mb-80{
        margin-bottom:50px
    }
}
@media(max-width: 425px){
    .mb-80{
        margin-bottom:30px
    }
}
.mb-100{
    margin-bottom:100px
}
@media(max-width: 1399px){
    .mb-100{
        margin-bottom:50px
    }
}
.pl-85{
    margin-left:85px
}
.mt-100{
    margin-top:110px !important
}
@media(max-width: 991px){
    .mt-100{
        margin-top:80px !important
    }
}
.mt-120{
    margin-top:120px
}
@media(min-width: 992px)and (max-width: 1199px){
    .mt-120{
        margin-top:100px
    }
}
@media(max-width: 991px){
    .mt-120{
        margin-top:90px
    }
}
.mt-130{
    margin-top:130px
}
@media(min-width: 992px)and (max-width: 1199px){
    .mt-130{
        margin-top:100px
    }
}
@media(max-width: 991px){
    .mt-130{
        margin-top:90px
    }
}
.mb-80{
    margin-bottom:80px
}
@media(min-width: 992px)and (max-width: 1199px){
    .mb-80{
        margin-bottom:70px
    }
}
@media(max-width: 991px){
    .mb-80{
        margin-bottom:70px
    }
}
.mb-90{
    margin-bottom:90px
}
@media(max-width: 991px){
    .mb-90{
        margin-bottom:70px
    }
}
@media(max-width: 767px){
    .mb-90{
        margin-bottom:50px
    }
}
.mb-100{
    margin-bottom:100px
}
@media(max-width: 991px){
    .mb-100{
        margin-bottom:80px
    }
}
@media(max-width: 767px){
    .mb-100{
        margin-bottom:60px
    }
}
.mb-110{
    margin-bottom:110px
}
@media(min-width: 992px)and (max-width: 1199px){
    .mb-110{
        margin-bottom:90px
    }
}
@media(max-width: 991px){
    .mb-110{
        margin-bottom:80px
    }
}
.mb-120{
    margin-bottom:120px
}
@media(min-width: 992px)and (max-width: 1199px){
    .mb-120{
        margin-bottom:80px
    }
}
@media(max-width: 991px){
    .mb-120{
        margin-bottom:60px
    }
}
.mb-130{
    margin-bottom:130px
}
@media(min-width: 992px)and (max-width: 1199px){
    .mb-130{
        margin-bottom:100px
    }
}
@media(max-width: 991px){
    .mb-130{
        margin-bottom:90px
    }
}
.pt-40{
    padding-top:40px
}
.pt-42{
    padding-top:42px
}
.mb-15{
    margin-bottom:15px
}
.pb-150{
    padding-bottom:150px
}
.mb-122{
    margin-bottom:122px
}
.mb-10{
    margin-bottom:10px
}
.pt-90{
    padding-top:90px
}
@media(max-width: 991px){
    .pt-90{
        padding-top:80px
    }
}
@media(max-width: 767px){
    .pt-90{
        padding-top:70px
    }
}
.pt-110{
    padding-top:110px
}
@media(min-width: 992px)and (max-width: 1199px){
    .pt-110{
        padding-top:90px
    }
}
@media(max-width: 991px){
    .pt-110{
        padding-top:70px
    }
}
.pt-120{
    padding-top:120px
}
@media(max-width: 1199px){
    .pt-120{
        padding-top:100px
    }
}
@media(max-width: 991px){
    .pt-120{
        padding-top:90px
    }
}
.pt-135{
    padding-top:135px
}
@media(min-width: 992px)and (max-width: 1199px){
    .pt-135{
        padding-top:120px
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .pt-135{
        padding-top:110px
    }
}
@media(max-width: 576px){
    .pt-135{
        padding-top:80px
    }
}
.pt-150{
    padding-top:150px
}
@media(min-width: 992px)and (max-width: 1199px){
    .pt-150{
        padding-top:120px
    }
}
@media(max-width: 991px){
    .pt-150{
        padding-top:120px
    }
}
@media(max-width: 576px){
    .pt-150{
        padding-top:80px
    }
}
.pt-95{
    padding-top:95px
}
.pt-80{
    padding-top:80px
}
.pt-50{
    padding-top:50px
}
@media(min-width: 992px)and (max-width: 1199px){
    .pt-50{
        padding-top:40px
    }
}
@media(max-width: 991px){
    .pt-50{
        padding-top:30px
    }
}
.pt-40{
    padding-top:40px
}
.pt-35{
    padding-top:35px
}
.pt-32{
    padding-top:32px
}
.pt-30{
    padding-top:30px
}
.pe-80{
    padding-right:80px
}
.pb-60{
    padding-bottom:60px
}
.pl-110{
    padding-left:110px
}
@media(min-width: 1400px)and (max-width: 1599px){
    .pl-110{
        padding-left:70px
    }
}
@media(min-width: 1200px)and (max-width: 1399px){
    .pl-110{
        padding-left:40px
    }
}
@media(max-width: 1199px){
    .pl-110{
        padding-left:unset
    }
}
.pb-48{
    padding-bottom:48px
}
@media(max-width: 767px){
    .pb-48{
        padding-bottom:30px
    }
}
.mt-15{
    margin-top:15px
}
.mt-25{
    margin-top:25px
}
.mt-30{
    margin-top:30px
}
.mt-32{
    margin-top:32px
}
.mt-40{
    margin-top:40px
}
.mt-50{
    margin-top:50px
}
.mt-60{
    margin-top:60px
}
@media(max-width: 767px){
    .mt-60{
        margin-top:40px
    }
}
.mt-70{
    margin-top:70px
}
@media(max-width: 767px){
    .mt-70{
        margin-top:40px
    }
}
.mb-20{
    margin-bottom:20px
}
.mb-25{
    margin-bottom:25px
}
@media(max-width: 1199px){
    .mb-25{
        margin-bottom:15px
    }
}
.mb-30{
    margin-bottom:30px
}
.mb-34{
    margin-bottom:34px
}
.mb-40{
    margin-bottom:40px
}
@media(max-width: 1199px){
    .mb-40{
        margin-bottom:30px
    }
}
.mb-50{
    margin-bottom:50px
}
.mb-54{
    margin-bottom:54px
}
.mb-80{
    margin-bottom:86px
}
@media(max-width: 1199px){
    .mb-80{
        margin-bottom:50px
    }
}
@media(max-width: 767px){
    .mb-80{
        margin-bottom:40px
    }
}
.mb-100{
    margin-bottom:100px
}
@media(max-width: 991px){
    .mb-100{
        margin-bottom:60px
    }
}
@media(max-width: 767px){
    .mb-100{
        margin-bottom:40px
    }
}
.mb-50{
    margin-bottom:50px
}
@media(max-width: 1199px){
    .mb-50{
        margin-bottom:35px
    }
}
@media(max-width: 767px){
    .mb-50{
        margin-bottom:40px
    }
}
.mt-60{
    margin-top:60px
}
@media(max-width: 767px){
    .mt-60{
        margin-top:40px
    }
}
.mt-70{
    margin-top:70px
}
@media(max-width: 991px){
    .mt-70{
        margin-top:40px
    }
}
.container-fplfiesta{
    max-width:1620px
}
@media(max-width: 991px){
    .container-fplfiesta{
        max-width:720px
    }
}
.circle-container{
    background:rgba(0,0,0,0);
    position:fixed;
    right:30px;
    bottom:55px;
    height:40px;
    width:40px;
    cursor:pointer;
    display:block;
    border-radius:50px;
    box-shadow:inset 0 0 0 2px #10c581;
    z-index:999;
    opacity:0;
    visibility:hidden;
    transform:translateY(15px);
    transition:all 200ms linear
}
.circle-container.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0)
}
.circle-container::after{
    position:absolute;
    font-family:"Bootstrap-icons";
    content:"";
    text-align:center;
    line-height:40px;
    font-size:28px;
    color:var(--primary-color);
    left:0;
    top:0;
    height:40px;
    width:40px;
    cursor:pointer;
    display:block;
    z-index:1;
    transition:all 200ms linear
}
.circle-container:hover svg path{
    fill:var(--primary-color);
    transition:.5s
}
.circle-container:hover::after{
    color:var(--white-color)
}
.circle-container svg path{
    fill:none
}
.circle-container svg.circle-progress path{
    stroke:var(--primary-color);
    stroke-width:5;
    box-sizing:border-box;
    transition:all 200ms linear
}
.slider-btn-grp{
    display:flex;
    align-items:center;
    gap:20px;
    position:absolute;
    z-index:1
}
.slider-btn-grp .slider-btn{
    min-width:35px;
    max-width:35px;
    height:35px;
    border:1px solid var(--primary-color);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.5s
}
.slider-btn-grp .slider-btn svg{
    fill:var(--white-color);
    transition:.5s
}
.slider-btn-grp .slider-btn:hover{
    background-color:var(--primary-color)
}
.slider-btn-grp .slider-btn.swiper-button-disabled{
    opacity:.2
}
.slider-btn-grp.two{
    bottom:19%;
    right:29%
}
.slider-btn-grp.two .slider-btn svg{
    fill:var(--white-color)
}
.slider-btn-grp.two .slider-btn:hover{
    border-color:var(--primary-color);
    background-color:var(--primary-color)
}
.slider-btn-grp.two .slider-btn:hover svg{
    fill:var(--white-color)
}
.slider-btn-grp.three{
    display:grid;
    gap:30px;
    top:38%;
    right:23%
}
@media(max-width: 1699px){
    .slider-btn-grp.three{
        right:25%
    }
}
@media(max-width: 1499px){
    .slider-btn-grp.three{
        right:22%
    }
}
@media(min-width: 1400px)and (max-width: 1599px){
    .slider-btn-grp.three{
        right:16%
    }
}
@media(max-width: 1399px){
    .slider-btn-grp.three{
        right:15%
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .slider-btn-grp.three{
        right:14%;
        top:45%
    }
}
@media(max-width: 991px){
    .slider-btn-grp.three{
        top:40%;
        right:12%
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .slider-btn-grp.three{
        display:none
    }
}
@media(max-width: 767px){
    .slider-btn-grp.three{
        display:none
    }
}
.slider-btn-grp.three .slider-btn{
    border:none
}
.slider-btn-grp.three .slider-btn:hover{
    background-color:var(--title-color)
}
.slider-btn-grp.three .page-up-down{
    margin-left:9px
}
.slider-btn-grp.three .page-up-down h4{
    color:var(--white-color-opp);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:1;
    writing-mode:vertical-lr;
    transform:rotate(180deg);
    margin-left:0
}
.slider-btn-grp.three.hover{
    background-color:var(--white-color)
}
.line-break{
    height:27px;
    display:block
}
.line-break-3{
    height:15px;
    display:block
}
.primary-btn{
    font-family:var(--font-Instrument);
    font-size:16px;
    font-weight:500;
    line-height:18px;
    color:var(--white-color);
    background-color:var(--primary-color);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:17px 35px;
    transition:.5s;
    position:relative;
    overflow:hidden;
    z-index:1;
    white-space:nowrap;
    border-radius:5px
}
.primary-btn.dark::after{
    background-color:var(--white-color)
}
.primary-btn.dark:hover{
    color:var(--title-color)
}
.primary-btn.dark:hover svg path{
    fill:var(--title-color)
}
.primary-btn.style-3{
    border-radius:50px;
    background-color:var(--title-color);
    padding:13px 29px;
    font-size:14px;
    font-weight:500;
    line-height:18px
}
.primary-btn.style-3 svg{
    transition:all .3s ease-in-out
}
.primary-btn.style-3::after{
    position:absolute;
    content:"";
    display:block;
    left:0;
    top:0;
    height:100%;
    width:100%;
    bottom:0;
    background-color:var(--primary-color);
    transform:scale(0, 1);
    transform-origin:left;
    z-index:-1;
    transition:all .5s ease-out 0s
}
.primary-btn.style-3:hover{
    color:var(--white-color)
}
.primary-btn.style-3:hover::after{
    transform:scale(1, 1)
}
.primary-btn.style-3:hover svg{
    transform:rotate(45deg);
    transition:all .3s ease-in-out
}
.primary-btn .arrow{
    transform:rotate(0);
    transition:.5s
}
.primary-btn::after{
    position:absolute;
    content:"";
    display:block;
    left:0;
    top:0;
    height:100%;
    width:100%;
    bottom:0;
    background-color:var(--title-color);
    transform:scale(0, 1);
    transform-origin:left;
    z-index:-1;
    transition:all .5s ease-out 0s
}
.primary-btn:hover{
    color:var(--white-color)
}
.primary-btn:hover::after{
    transform:scale(1, 1)
}
.primary-btn:hover svg path{
    fill:var(--white-color)
}
.primary-btn-two {
    font-family: var(--font-Instrument);
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    color: var(--white-color);
    background-color: var(--title-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding:15px 40px;
    transition: color 0.5s ease-out;
    position: relative;
    overflow: hidden;
    z-index: 1;
    white-space: nowrap;
    border-radius: 5px;
}

.primary-btn-two::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, rgb(0, 255, 135), rgb(5, 240, 255));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease-out;
    z-index: 0;
}

.primary-btn-two:hover::after {
    transform: scaleX(1);
}

.primary-btn-two:hover {
    color: var(--white-color);
}

.primary-btn-two svg,
.primary-btn-two svg path {
    z-index: 1;
}

.primary-btn-two > * {
    position: relative;
    z-index: 1;
}

/* Responsive styles */
@media (max-width: 576px) {
    .primary-btn-two {
        padding: 20px 25px;
    }
}
@media (max-width: 375px) {
    .primary-btn-two {
        padding: 15px 20px;
        font-size: 14px;
    }
}
.primary-btn-two.style-2 {
    padding: 17px 38px;
    border-radius: 10px;
}

.primary-btn-three{
    font-family:var(--font-Instrument);
    font-size:16px;
    font-weight:500;
    line-height:18px;
    color:var(--white-color);
    background-color:var(--primary-color);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:17px 35px;
    transition:.5s;
    position:relative;
    overflow:hidden;
    z-index:1;
    white-space:nowrap;
    border-radius:5px
}
.primary-btn-three.error-btn{
    padding:21px 39px
}
.primary-btn-three.two{
    background-color:var(--white-color);
    color:var(--title-color);
    padding:21px 47px
}
.primary-btn-three.three{
    padding:17px 32px
}
.primary-btn-three.three:hover{
    color:var(--title-color)
}
.primary-btn-three.three::after{
    background-color:var(--white-color)
}
.primary-btn-three.white{
    background-color:var(--white-color);
    border-radius:50px;
    color:var(--title-color);
    padding:13px 32px
}
.primary-btn-three.white::after{
    background-color:var(--primary-color)
}
.primary-btn-three::after{
    position:absolute;
    content:"";
    display:block;
    left:0;
    top:0;
    height:100%;
    width:100%;
    bottom:0;
    background-color:var(--title-color);
    transform:scale(0, 1);
    transform-origin:left;
    z-index:-1;
    transition:all .5s ease-out 0s
}
.primary-btn-three:hover{
    color:var(--white-color)
}
.primary-btn-three:hover::after{
    transform:scale(1, 1)
}
.primary-btn-three:hover svg path{
    fill:var(--white-color)
}
.primary-btn-four{
    font-family:var(--font-Instrument);
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding:15px 40px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    white-space: nowrap;
    border-radius: 5px;
    color:var(--title-color);
    border:1px solid rgba(17,17,17,.25);

}
.primary-btn-four.style-2{
    padding:19px 37px
}
.primary-btn-four.style-3{
    padding:19px 40px
}
.primary-btn-four.style-4{
    padding:19px 39px
}
.primary-btn-four::after{
    position:absolute;
    content:"";
    display:block;
    left:0;
    top:0;
    height:100%;
    width:100%;
    bottom:0;
    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    transform:scale(0, 1);
    transform-origin:left;
    z-index:-1;
    transition:all .5s ease-out 0s
}
.primary-btn-four:hover{
    color:var(--white-color);
    border:1px solid var(--primary-color)
}
.primary-btn-four:hover::after{
    transform:scale(1, 1)
}
.read-btn{
    display:inline-flex;
    align-items:center;
    gap:5px;
    text-decoration:none
}
.read-btn span{
    color:rgba(17,17,17,.6);
    font-family:var(--font-Instrument);
    font-size:18px;
    font-weight:500;
    line-height:16px;
    text-transform:capitalize;
    white-space:nowrap;
    padding-bottom:2px;
    background:linear-gradient(to bottom, rgba(17, 17, 17, 0.6) 0%, rgba(17, 17, 17, 0.6) 98%);
    background-size:100% 1px;
    background-repeat:no-repeat;
    background-position:left 100%;
    transition:background-size .75s
}
.read-btn i{
    color:rgba(17,17,17,.6);
    font-size:18px;
    transition:.5s
}
.read-btn svg{
    fill:var(--primary-color);
    margin-bottom:2px;
    transition:.5s
}
.read-btn.two span{
    font-size:15px
}
.read-btn:hover span{
    color:var(--primary-color);
    background-size:0 1px;
    background-position:0% 100%
}
.read-btn:hover i{
    color:var(--primary-color)
}
.read-btn:hover svg{
    fill:rgba(17,17,17,.6);
    transform:rotate(30deg)
}
.nice-select{
    width:100%;
    background:rgba(0,0,0,0);
    height:50px;
    display:flex;
    align-items:center;
    line-height:1;
    outline:none !important;
    box-shadow:none !important;
    border:1px solid var(--border-color)
}
@media(max-width: 576px){
    .nice-select{
        padding:0px 18px
    }
}
.nice-select::after{
    height:8px;
    width:8px;
    border-bottom:1px solid var(--title-color);
    border-right:1px solid var(--title-color);
    right:28px;
    margin-top:-5px
}
@media(max-width: 576px){
    .nice-select::after{
        right:20px
    }
}
.nice-select .current{
    color:rgba(var(--title-color-opc), 0.5);
    font-family:var(--font-syne);
    font-size:14px;
    font-weight:500
}
.nice-select:focus{
    border-color:var(--primary-color);
    background-color:var(--white-color)
}
.nice-select .list{
    border:none;
    border-radius:5px;
    width:100%;
    max-height:250px;
    overflow-y:auto
}
.nice-select .list::-webkit-scrollbar{
    width:5px
}
.nice-select .list::-webkit-scrollbar-track{
    background:#f1f1f1
}
.nice-select .list::-webkit-scrollbar-thumb{
    background:rgba(var(--title-color-opc), 0.7)
}
.nice-select .list .option{
    color:var(--title-color);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:24px;
    padding-left:25px;
    padding-right:25px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%
}
.nice-select .list .option:hover{
    color:var(--white-color);
    background-color:var(--primary-color)
}
.section-title .sub-title{
    font-family:var(--font-jost);
    font-size:14px;
    font-weight:500;
    line-height:20px;
    letter-spacing:.05em;
    color:var(--title-color);
    border:1px solid var(--primary-color-opc);
    border-radius:30px;
    text-transform:uppercase;
    margin-bottom:15px;
    padding:4px 19px;
    display:inline-block
}
.section-title .sub-title.two{
    border:1px solid rgba(102,102,102,.5);
    border-radius:10px;
    color:var(--title-color);
    padding:7px 12px;
    text-transform:capitalize;
    font-size:15px;
    line-height:16px;
    margin-bottom:15px;
    font-weight:400
}
.section-title .sub-title.dark-white{
    border:1px solid var(--border-color-4);
    border-radius:10px;
    padding:6px 13px;
    color:var(--white-color);
    text-transform:capitalize;
    font-size:15px;
    line-height:16px
}
.section-title .sub-title-three{
    font-family:var(--font-Instrument);
    font-size:16px;
    font-weight:400;
    line-height:26px;
    color:var(--primary-color);
    border:1px solid rgba(17,17,17,.3);
    border-radius:50px;
    text-transform:capitalize;
    margin-bottom:15px;
    padding:2px 25px;
    display:inline-block;
    position:relative
}
.section-title .sub-title-three::before{
    content:"";
    position:absolute;
    width:4px;
    height:4px;
    background-color:var(--primary-color);
    border-radius:50%;
    top:47%;
    left:9%
}
.section-title .sub-title-three::after{
    content:"";
    position:absolute;
    width:4px;
    height:4px;
    background-color:var(--primary-color);
    border-radius:50%;
    top:47%;
    right:9%
}
.section-title .title-tag{
    margin-bottom:10px
}
.section-title .title-tag a{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:14px;
    line-height:16px;
    color:var(--primary-color);
    margin:0;
    padding:5px 20px;
    border:1px solid var(--primary-color);
    border-radius:30px;
    display:inline-block
}
.section-title .title-tag.two ul li a{
    color:var(--paragraph-color-2);
    border:1px solid var(--border-color)
}
.section-title.dark-white h2{
    color:var(--white-color)
}
.section-title h2{
    font-family:var(--font-Instrument);
    font-weight:600;
    font-size:46px;
    line-height:55px;
    color:var(--title-color);
    margin:0;
    text-transform:capitalize
}
@media(max-width: 1199px){
    .section-title h2{
        font-size:34px
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .section-title h2{
        font-size:38px;
        line-height:1.2;
        margin-bottom:0
    }
}
@media(max-width: 991px){
    .section-title h2{
        font-size:40px;
        line-height:1.2;
        margin-bottom:20px
    }
}
@media(max-width: 576px){
    .section-title h2{
        font-size:33px
    }
}
.section-title h5{
    margin:0
}
.section-title h5 a{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:18px;
    line-height:30px;
    color:var(--white-color);
    margin:0
}
.section-title.dark-white p{
    color:rgba(255,255,255,.7)
}
.section-title p{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:18px;
    line-height:28px;
    color:var(--paragraph-color-1);
    margin:0;
    margin-top:25px
}
.section-title p.two{
    color:var(--paragraph-color-2)
}
@media(max-width: 576px){
    .section-title p{
        font-size:16px;
        line-height:1.4
    }
}
.section-title.two h2{
    font-family:var(--font-Instrument);
    font-size:60px;
    font-weight:600;
    line-height:65px;
    color:var(--title-color);
    margin:0
}
.section-title.two h2 span{
    color:var(--primary-color)
}
.section-title.three h2{
    font-family:var(--font-Instrument);
    font-size:50px;
    font-weight:600;
    line-height:60px;
    color:var(--title-color);
    margin:0
}
@media(min-width: 992px)and (max-width: 1199px){
    .section-title.three h2{
        font-size:45px;
        line-height:50px
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .section-title.three h2{
        font-size:40px;
        line-height:45px
    }
}
@media(max-width: 767px){
    .section-title.three h2{
        font-size:40px;
        line-height:45px
    }
}
@media(max-width: 425px){
    .section-title.three h2{
        font-size:35px;
        line-height:45px
    }
}
.section-title.three p{
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:24px;
    color:var(--paragraph-color-1);
    margin:0
}
.section-title.style-4{
    display:flex;
    align-items:baseline;
    gap:15px
}
.section-title.white h2{
    color:var(--white-color)
}
@media(min-width: 992px)and (max-width: 1199px){
    .section-title.white h2{
        margin-bottom:20px;
        font-size:35px;
        line-height:40px
    }
}
@media(max-width: 991px){
    .section-title.white h2{
        margin-bottom:25px;
        font-size:40px;
        line-height:45px
    }
}
@media(max-width: 767px){
    .section-title.white h2{
        font-size:38px;
        line-height:45px
    }
}
@media(max-width: 576px){
    .section-title.white h2{
        font-size:40px;
        line-height:45px
    }
}
@media(max-width: 375px){
    .section-title.white h2{
        font-size:35px;
        line-height:3rem
    }
}
.section-title.white p{
    color:var(--white-color-opp)
}
.section-title.green h2{
    color:var(--primary-color-2)
}
.right-sidebar-menu{
    position:fixed;
    top:0;
    right:0;
    width:500px;
    z-index:99999;
    height:100%;
    overflow:auto;
    background-color:var(--white-color);
    transform:translateX(120%);
    transform-origin:right;
    transition:transform .5s ease-in;
    box-shadow:0px 2px 20px rgba(0,0,0,.03)
}
.right-sidebar-menu::-webkit-scrollbar{
    width:0px
}
@media(max-width: 576px){
    .right-sidebar-menu{
        width:320px
    }
}
.right-sidebar-menu.show-right-menu{
    transform:translateX(0)
}
.right-sidebar-menu .right-sidebar-close-btn{
    height:32px;
    width:32px;
    border-radius:50%;
    border:1px solid rgba(102,102,102,.5);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.35s
}
.right-sidebar-menu .right-sidebar-close-btn i{
    font-size:26px;
    line-height:1;
    margin-top:2px;
    color:#3f444b;
    transition:.35s
}
.right-sidebar-menu .right-sidebar-close-btn:hover{
    background-color:var(--primary-color);
    border:1px solid var(--primary-color)
}
.right-sidebar-menu .right-sidebar-close-btn:hover i{
    color:var(--white-color)
}
.right-sidebar-menu .sidebar-logo-area{
    text-align:left;
    padding:30px;
    display:block;
    border-bottom:1px solid rgba(var(--primary-color3-opc), 0.1)
}
.sidebar-logo-wrap img {

}

@media(max-width: 576px){
    .right-sidebar-menu .sidebar-logo-area{
        padding:20px
    }
}
.right-sidebar-menu .sidebar-content-wrap{
    padding:50px 0
}
@media(max-width: 576px){
    .right-sidebar-menu .sidebar-content-wrap{
        padding:40px 0
    }
}
.right-sidebar-menu .sidebar-content-wrap .title-area{
    margin-bottom:50px;
    padding:0 30px
}
@media(min-width: 1400px)and (max-width: 1599px){
    .right-sidebar-menu .sidebar-content-wrap .title-area{
        margin-bottom:40px
    }
}
@media(max-width: 1399px){
    .right-sidebar-menu .sidebar-content-wrap .title-area{
        margin-bottom:40px
    }
}
@media(max-width: 576px){
    .right-sidebar-menu .sidebar-content-wrap .title-area{
        padding:0 20px;
        margin-bottom:35px
    }
}

.right-sidebar-menu .sidebar-content-wrap .title-area span{
    color:var(--primary-color);
    font-family:var(--font-jost);
    font-size:13px;
    font-weight:500;
    line-height:1;
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:10px
}
.right-sidebar-menu .sidebar-content-wrap .title-area span svg{
    fill:rgba(63,68,75,.3)
}
.right-sidebar-menu .sidebar-content-wrap .title-area h2{
    color:var(--title-color);
    font-family:var(--font-jost);
    font-size:35px;
    font-weight:700;
    line-height:1.1;
    margin-bottom:15px
}
@media(max-width: 576px){
    .right-sidebar-menu .sidebar-content-wrap .title-area h2{
        font-size:28px
    }
}
.right-sidebar-menu .sidebar-content-wrap .title-area p{
    color:rgba(var(--title-color-opc), 0.7);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:1.8;
    margin-bottom:0
}
@media(max-width: 576px){
    .right-sidebar-menu .sidebar-content-wrap .title-area p{
        font-size:15px
    }
}
.right-sidebar-menu .sidebar-content-wrap .contact-area{
    padding:0;
    margin:0;
    list-style:none;
    margin:0 50px;
    max-width:245px;
    width:100%
}
@media(max-width: 576px){
    .right-sidebar-menu .sidebar-content-wrap .contact-area{
        margin:0 30px
    }
}
.right-sidebar-menu .sidebar-content-wrap .contact-area .single-contact{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:45px
}
@media(max-width: 991px){
    .right-sidebar-menu .sidebar-content-wrap .contact-area .single-contact{
        margin-bottom:40px
    }
}
@media(max-width: 576px){
    .right-sidebar-menu .sidebar-content-wrap .contact-area .single-contact{
        margin-bottom:35px
    }
}
.right-sidebar-menu .sidebar-content-wrap .contact-area .single-contact:last-child{
    margin-bottom:0
}
.right-sidebar-menu .sidebar-content-wrap .contact-area .single-contact .icon svg{
    fill:var(--primary-color)
}
.right-sidebar-menu .sidebar-content-wrap .contact-area .single-contact .content{
    position:relative;
    line-height:1;
    text-align:start
}
.right-sidebar-menu .sidebar-content-wrap .contact-area .single-contact .content::after{
    content:"";
    height:35px;
    width:1px;
    background-color:rgba(var(--title-color2-opc), 0.15);
    position:absolute;
    left:-10px;
    top:50%;
    transform:translateY(-50%)
}
.right-sidebar-menu .sidebar-content-wrap .contact-area .single-contact .content span{
    font-family:var(--font-jost);
    font-weight:500;
    font-size:14px;
    line-height:1;
    color:#000;
    margin-bottom:6px;
    display:inline-block
}
.right-sidebar-menu .sidebar-content-wrap .contact-area .single-contact .content h6{
    margin-bottom:0;
    line-height:1
}
.right-sidebar-menu .sidebar-content-wrap .contact-area .single-contact .content h6 a{
    font-family:var(--font-jost);
    font-weight:500;
    font-size:16px;
    line-height:1.5;
    color:var(--paragraph-color-1);
    transition:.5s
}
@media(max-width: 576px){
    .right-sidebar-menu .sidebar-content-wrap .contact-area .single-contact .content h6 a{
        font-size:16px
    }
}
.right-sidebar-menu .sidebar-content-wrap .contact-area .single-contact .content h6 a:hover{
    color:var(--primary-color)
}
.right-sidebar-menu .sidebar-content-wrap .social-area{
    padding:50px 30px 0
}
@media(max-width: 576px){
    .right-sidebar-menu .sidebar-content-wrap .social-area{
        padding:40px 20px 0
    }
}
.right-sidebar-menu .sidebar-content-wrap .social-area h6{
    color:var(--title-color);
    font-family:var(--font-jost);
    font-size:18px;
    font-weight:400;
    line-height:1.2;
    border-bottom:1px solid var(--background-color);
    display:inline-block;
    margin-bottom:20px
}
@media(max-width: 576px){
    .right-sidebar-menu .sidebar-content-wrap .social-area h6{
        font-size:17px
    }
}
.right-sidebar-menu .sidebar-content-wrap .social-area .social-list-area{
    padding:0;
    margin:0;
    list-style:none;
    display:flex;
    align-items:center;
    gap:32px
}
@media(max-width: 576px){
    .right-sidebar-menu .sidebar-content-wrap .social-area .social-list-area{
        gap:20px
    }
}
.right-sidebar-menu .sidebar-content-wrap .social-area .social-list-area li a{
    display:block;
    text-align:center
}
.right-sidebar-menu .sidebar-content-wrap .social-area .social-list-area li a i{
    color:var(--title-color);
    font-size:18px;
    transition:.5s
}
.right-sidebar-menu .sidebar-content-wrap .social-area .social-list-area li a span{
    color:var(--title-color);
    font-family:var(--font-jost);
    font-size:12px;
    font-weight:400;
    line-height:15.64px;
    display:block
}
.right-sidebar-menu .sidebar-content-wrap .social-area .social-list-area li:hover a i{
    color:var(--primary-color)
}
.right-sidebar-menu .sidebar-content-wrap .social-area .social-list-area li:hover a span{
    color:var(--primary-color)
}
.right-sidebar-menu.two{
    background-color:#0e1117
}
.right-sidebar-menu.two .right-sidebar-close-btn{
    border:1px solid #fff
}
.right-sidebar-menu.two .right-sidebar-close-btn i{
    color:#fff
}
.right-sidebar-menu.two .right-sidebar-close-btn:hover{
    background-color:var(--white-color)
}
.right-sidebar-menu.two .right-sidebar-close-btn:hover i{
    color:var(--title-color)
}
.right-sidebar-menu.two .sidebar-logo-area{
    border-bottom:1px solid rgba(255,255,255,.2)
}
.right-sidebar-menu.two .sidebar-content-wrap .title-area span svg{
    fill:rgba(255,255,255,.4)
}
.right-sidebar-menu.two .sidebar-content-wrap .title-area h2{
    color:var(--white-color)
}
.right-sidebar-menu.two .sidebar-content-wrap .title-area p{
    color:rgba(255,255,255,.7)
}
.right-sidebar-menu.two .sidebar-content-wrap .contact-area .single-contact .content::after{
    background-color:rgba(255,255,255,.15)
}
.right-sidebar-menu.two .sidebar-content-wrap .contact-area .single-contact .content span{
    color:var(--white-color)
}
.right-sidebar-menu.two .sidebar-content-wrap .contact-area .single-contact .content h6 a{
    color:rgba(255,255,255,.8)
}
.right-sidebar-menu.two .sidebar-content-wrap .contact-area .single-contact .content h6 a:hover{
    color:var(--primary-color)
}
.right-sidebar-menu.two .sidebar-content-wrap .social-area h6{
    color:var(--white-color);
    border-bottom:1px solid var(--white-color)
}
.right-sidebar-menu.two .sidebar-content-wrap .social-area .social-list li a i{
    color:var(--white-color)
}
.right-sidebar-menu.two .sidebar-content-wrap .social-area .social-list li a span{
    color:var(--white-color)
}
.right-sidebar-menu.two .sidebar-content-wrap .social-area .social-list li:hover a i{
    color:var(--primary-color)
}
.right-sidebar-menu.two .sidebar-content-wrap .social-area .social-list li:hover a span{
    color:var(--primary-color)
}
header{
    position:relative;
    width:100%;
    z-index:999;
    transition:all .8s ease-out 0s;
    background-color:var(--white-color)
}
header.transparent{
    background-color:var(--white-color);
    border-bottom:1px solid var(--border-color-2)
}
header.transparent.sticky{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding-top:0 !important;
    padding-bottom:0 !important;
    box-sizing:border-box;
    background-color:var(--white-color);
    box-shadow:5px 3px 40px rgba(0,72,88,.1);
    z-index:9999
}
@keyframes smooth-header{
    0%{
        transform:translateY(-30px)
    }
    100%{
        transform:translateY(0px)
    }
}
header.transparent .main-menu{
    display:inline-block;
    position:relative
}
header.transparent .main-menu.show-menu{
    transform:translateX(0)
}
header.transparent .main-menu>ul{
    list-style:none;
    margin:0;
    padding:0
}
header.transparent .main-menu>ul>li{
    display:inline-block;
    position:relative;
    padding:1px 25px
}
@media(max-width: 1399px){
    header.transparent .main-menu>ul>li{
        padding:0 20px
    }
}
@media(max-width: 991px){
    header.transparent .main-menu>ul>li{
        padding:0px 12px
    }
}
header.transparent .main-menu>ul>li:hover i{
    color:var(--primary-color);
    font-size:20px
}
@media(min-width: 992px){
    header.transparent .main-menu>ul>li:first-child{
        padding-left:0
    }
    header.transparent .main-menu>ul>li:first-child a{
        padding-left:0
    }
    header.transparent .main-menu>ul>li:last-child{
        padding-right:0
    }
}
header.transparent .main-menu>ul>li>a{
    position:relative;
    font-family:var(--font-jost);
    font-size:14px;
    font-weight:400;
    line-height:18.24px;
    letter-spacing:.08em;
    color:var(--title-color);
    display:block;
    padding:35px 0px;
    transition:all .5s ease-out 0s;
    text-transform:uppercase
}
@media(min-width: 1200px)and (max-width: 1399px){
    header.transparent .main-menu>ul>li>a{
        padding:22px 0
    }
}
header.transparent .main-menu>ul>li i{
    font-size:20px;
    text-align:center;
    color:var(--title-color);
    font-style:normal;
    position:absolute;
    right:-5px;
    top:35px;
    z-index:999;
    cursor:pointer;
    display:none;
    transition:all .5s ease-out 0s;
    opacity:0
}
@media(max-width: 991px){
    header.transparent .main-menu>ul>li i{
        opacity:1
    }
}
header.transparent .main-menu>ul>li i.active{
    color:var(--title-color)
}
header.transparent .main-menu>ul>li i.active::before{
    content:""
}
header.transparent .main-menu>ul>li ul.sub-menu{
    position:absolute;
    left:0;
    right:0;
    top:auto;
    margin:0;
    display:none;
    min-width:220px;
    background:var(--white-color);
    box-shadow:0px 30px 80px rgba(134,117,212,.08);
    text-align:left;
    transform-origin:top
}
@media(max-width: 1199px){
    header.transparent .main-menu>ul>li ul.sub-menu{
        box-shadow:none
    }
}
header.transparent .main-menu>ul>li ul.sub-menu>li i{
    position:absolute;
    top:14px;
    right:6px;
    display:block;
    color:var(--title-color);
    font-size:14px
}
header.transparent .main-menu>ul>li ul.sub-menu>li .dropdown-icon{
    color:var(--title-color);
    opacity:1;
    top:14px;
    font-size:14px;
    right:10px
}
@media(max-width: 991px){
    header.transparent .main-menu>ul>li ul.sub-menu>li .dropdown-icon{
        right:0;
        top:8px;
        font-size:20px
    }
}
header.transparent .main-menu>ul>li ul.sub-menu>li{
    padding:0;
    display:block;
    position:relative
}
header.transparent .main-menu>ul>li ul.sub-menu>li>a{
    display:block;
    padding:15px 15px;
    color:var(--title-color);
    font-weight:400;
    font-family:var(--font-jost);
    font-size:13px;
    line-height:1.3;
    transition:all .4s ease-out 0s;
    position:relative;
    border-bottom:1px solid #e1e1e1
}
header.transparent .main-menu>ul>li ul.sub-menu>li>a::before{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    background:linear-gradient(90deg, #fff, var(--primary-color), #fff);
    width:100%;
    height:1px;
    transform:scaleX(0);
    transform-origin:left;
    transition:.4s ease-in;
    z-index:1
}
@media(max-width: 991px){
    header.transparent .main-menu>ul>li ul.sub-menu>li>a{
        border-color:rgba(233,228,228,.5)
    }
    header.transparent .main-menu>ul>li ul.sub-menu>li>a::before{
        background:linear-gradient(90deg, #ddd, #10c581, #ddd)
    }
}
header.transparent .main-menu>ul>li ul.sub-menu>li>a:hover{
    color:var(--primary-color)
}
header.transparent .main-menu>ul>li ul.sub-menu>li>a:hover::before{
    transform:scale(1)
}
header.transparent .main-menu>ul>li ul.sub-menu>li>a.active{
    color:var(--primary-color)
}
header.transparent .main-menu>ul>li ul.sub-menu>li>a.active::before{
    transform:scale(1)
}
header.transparent .main-menu>ul>li ul.sub-menu>li:last-child a{
    border-bottom:none
}
header.transparent .main-menu>ul>li ul.sub-menu>li:last-child a::before{
    display:none
}
header.transparent .main-menu>ul>li ul.sub-menu>li:hover>a{
    color:var(--primary-color)
}
header.transparent .main-menu>ul>li ul.sub-menu>li:hover .dropdown-icon{
    color:var(--primary-color)
}
header.transparent .main-menu>ul>li ul.sub-menu>li.active>a{
    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
header.transparent .main-menu>ul>li ul.sub-menu>li.active .dropdown-icon{
    color:var(--primary-color)
}
header.transparent .main-menu>ul>li ul.sub-menu>li .sub-menu{
    left:220px;
    position:absolute;
    max-width:230px;
    min-width:215px;
    background:var(--white-color);
    box-shadow:0px 30px 80px rgba(8,0,42,.08);
    top:0
}
@media(max-width: 1199px){
    header.transparent .main-menu>ul>li ul.sub-menu>li .sub-menu{
        box-shadow:none
    }
}
header.transparent .main-menu>ul>li ul.sub-menu>li .sub-menu::before{
    display:none;
    visibility:hidden
}
@media only screen and (max-width: 991px){
    header.transparent .main-menu>ul>li ul.sub-menu>li .sub-menu{
        position:unset;
        max-width:230px;
        min-width:215px;
        background:rgba(0,0,0,0);
        top:0
    }
}
header.transparent .main-menu>ul>li ul.sub-menu>li .sub-menu>li i{
    display:block
}
@media(min-width: 992px){
    header.transparent .main-menu>ul>li ul.sub-menu>li:hover>.sub-menu{
        display:block;
        animation:fade-down .45s linear
    }
}
header.transparent .main-menu>ul>li.menu-item-has-children{
    transition:all .55s ease-in-out
}
header.transparent .main-menu>ul>li.menu-item-has-children::after{
    content:"";
    font-family:"bootstrap-icons";
    font-weight:800;
    position:absolute;
    top:29px;
    right:7px;
    font-size:12px;
    color:var(--title-color);
    transition:all .55s ease-in-out
}
@media(min-width: 1200px)and (max-width: 1399px){
    header.transparent .main-menu>ul>li.menu-item-has-children::after{
        right:0px;
        top:20px
    }
}
@media(max-width: 1199px){
    header.transparent .main-menu>ul>li.menu-item-has-children::after{
        right:0
    }
}
@media(max-width: 991px){
    header.transparent .main-menu>ul>li.menu-item-has-children::after{
        display:none;
        visibility:hidden
    }
}
header.transparent .main-menu>ul>li.menu-item-has-children:hover::after{
    color:var(--primary-color);
    content:""
}
@media(min-width: 992px){
    header.transparent .main-menu>ul>li:hover>ul.sub-menu{
        display:block;
        animation:fade-down .45s linear
    }
}
@keyframes fade-up{
    0%{
        opacity:0;
        transform:scaleY(0);
        visibility:hidden
    }
    100%{
        opacity:1;
        transform:scaleY(1);
        visibility:visible
    }
}
header.transparent .main-menu>ul>li:hover>a{
    color:var(--primary-color)
}
header.transparent .main-menu>ul>li:hover>a::after{
    transform-origin:left center;
    transform:scale(1, 1)
}
header.transparent .main-menu>ul>li:hover::after{
    color:var(--title-color)
}
header.transparent .main-menu>ul>li:hover .dropdown-icon2{
    color:var(--primary-color)
}
header.transparent .main-menu>ul>li.active>a{
    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
header.transparent .main-menu>ul>li.active::after{
    color:var(--primary-color)
}
header.transparent .main-menu>ul>li.active .dropdown-icon2{
    color:var(--primary-color)
}
header.transparent .main-menu>ul>li.active.position-inherit>a::after{
    color:var(--primary-color)
}
header.transparent .main-menu>ul li.menu-item-has-children>i{
    display:block
}
@media only screen and (max-width: 991px){
    header.transparent .mobile-logo-area .menu-close-btn{
        height:32px;
        width:32px;
        border-radius:50%;
        border:1px solid var(--title-color);
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        transition:.35s
    }
    header.transparent .mobile-logo-area .menu-close-btn i{
        font-size:26px;
        line-height:1;
        margin-top:2px;
        color:var(--title-color);
        transition:.35s
    }
    header.transparent .mobile-logo-area .menu-close-btn:hover{
        background-color:var(--title-color)
    }
    header.transparent .mobile-logo-area .menu-close-btn:hover i{
        color:var(--white-color)
    }
    header.transparent .dropdown-icon{
        color:var(--white-color)
    }
    header.transparent .main-menu{
        position:fixed;
        top:0;
        left:0;
        width:280px;
        padding:30px 20px !important;
        z-index:99999;
        height:100%;
        overflow:auto;
        background:#fff;
        border-right:1px solid #eee;
        transform:translateX(-100%);
        transition:transform .3s ease-in;
        box-shadow:0px 2px 20px rgba(0,0,0,.03)
    }
    header.transparent .main-menu.show-menu{
        transform:translateX(0)
    }
    header.transparent .main-menu .mobile-menu-logo{
        text-align:left;
        padding-top:20px;
        display:block;
        padding-bottom:8px
    }
    header.transparent .main-menu .menu-list{
        padding-top:50px;
        padding-bottom:30px
    }
    header.transparent .main-menu>ul{
        float:none;
        text-align:left;
        padding:5px 0px 20px 0
    }
    header.transparent .main-menu>ul>li{
        display:block;
        position:relative;
        padding:0
    }
    header.transparent .main-menu>ul>li i{
        display:block
    }
    header.transparent .main-menu>ul>li a{
        padding:10px 0;
        display:block
    }
    header.transparent .main-menu>ul>li ul.sub-menu{
        position:static;
        min-width:200px;
        background:0 0;
        border:none;
        opacity:1;
        visibility:visible;
        box-shadow:none;
        transform:none;
        transition:none;
        display:none;
        margin-top:0 !important;
        transform:translateY(0px);
        padding-left:10px
    }
    header.transparent .main-menu>ul>li ul.sub-menu>li{
        border-bottom:1px solid rgba(0,0,0,0)
    }
    header.transparent .main-menu>ul>li ul.sub-menu>li a{
        color:var(--title-color);
        padding:12px 0px
    }
    header.transparent .main-menu>ul>li ul.sub-menu>li a:hover{
        color:var(--primary-color);
        margin-left:10px
    }
    header.transparent .main-menu>ul>li ul.sub-menu>li a.active{
        color:var(--primary-color)
    }
    header.transparent .main-menu>ul>li ul.sub-menu>li i{
        color:var(--primary-color);
        right:-13px
    }
    header.transparent .main-menu>ul>li .bi{
        top:8px;
        font-size:20px;
        color:var(--title-color);
        line-height:1
    }
}
header.dark-color{
    position:absolute;
    background-color:rgba(0,0,0,0);
    border-bottom:1px solid rgba(255,255,255,.1)
}
header.dark-color.sticky{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding-top:0 !important;
    padding-bottom:0 !important;
    box-sizing:border-box;
    background-color:var(--white-color);
    box-shadow:5px 3px 40px rgba(0,72,88,.1);
    z-index:9999;
    background-color:var(--title-color)
}
@keyframes smooth-header{
    0%{
        transform:translateY(-30px)
    }
    100%{
        transform:translateY(0px)
    }
}
header.dark-color .main-menu{
    display:inline-block;
    position:relative
}
header.dark-color .main-menu.show-menu{
    transform:translateX(0)
}
header.dark-color .main-menu>ul{
    list-style:none;
    margin:0;
    padding:0
}
header.dark-color .main-menu>ul>li{
    display:inline-block;
    position:relative;
    padding:0 25px
}
@media(max-width: 1399px){
    header.dark-color .main-menu>ul>li{
        padding:0 20px
    }
}
@media(max-width: 991px){
    header.dark-color .main-menu>ul>li{
        padding:0px 12px
    }
}
header.dark-color .main-menu>ul>li:hover i{
    color:var(--primary-color);
    font-size:20px
}
@media(min-width: 992px){
    header.dark-color .main-menu>ul>li:first-child{
        padding-left:0
    }
    header.dark-color .main-menu>ul>li:first-child a{
        padding-left:0
    }
    header.dark-color .main-menu>ul>li:last-child{
        padding-right:0
    }
}
header.dark-color .main-menu>ul>li>a{
    color:var(--white-color);
    display:block;
    padding:35px 0px;
    position:relative;
    font-family:var(--font-jost);
    font-size:14px;
    font-weight:400;
    line-height:18.24px;
    letter-spacing:.08em;
    transition:all .5s ease-out 0s;
    text-transform:uppercase
}
@media(min-width: 768px)and (max-width: 991px){
    header.dark-color .main-menu>ul>li>a{
        color:var(--title-color)
    }
}
@media(max-width: 767px){
    header.dark-color .main-menu>ul>li>a{
        color:var(--title-color)
    }
}
header.dark-color .main-menu>ul>li i{
    font-size:20px;
    text-align:center;
    color:var(--title-color);
    font-style:normal;
    position:absolute;
    right:-5px;
    top:35px;
    z-index:999;
    cursor:pointer;
    display:none;
    transition:all .5s ease-out 0s;
    opacity:0
}
@media(max-width: 991px){
    header.dark-color .main-menu>ul>li i{
        opacity:1
    }
}
header.dark-color .main-menu>ul>li i.active{
    color:var(--title-color)
}
header.dark-color .main-menu>ul>li i.active::before{
    content:""
}
header.dark-color .main-menu>ul>li ul.sub-menu{
    position:absolute;
    left:0;
    right:0;
    top:auto;
    margin:0;
    display:none;
    min-width:220px;
    background:var(--white-color);
    box-shadow:0px 30px 80px rgba(134,117,212,.08);
    text-align:left;
    transform-origin:top
}
@media(max-width: 1199px){
    header.dark-color .main-menu>ul>li ul.sub-menu{
        box-shadow:none
    }
}
header.dark-color .main-menu>ul>li ul.sub-menu>li i{
    position:absolute;
    top:14px;
    right:6px;
    display:block;
    color:var(--title-color);
    font-size:14px
}
header.dark-color .main-menu>ul>li ul.sub-menu>li .dropdown-icon{
    color:var(--title-color);
    opacity:1;
    top:14px;
    font-size:14px;
    right:10px
}
@media(max-width: 991px){
    header.dark-color .main-menu>ul>li ul.sub-menu>li .dropdown-icon{
        right:0;
        top:8px;
        font-size:20px
    }
}
header.dark-color .main-menu>ul>li ul.sub-menu>li{
    padding:0;
    display:block;
    position:relative
}
header.dark-color .main-menu>ul>li ul.sub-menu>li>a{
    display:block;
    padding:15px 15px;
    color:var(--title-color);
    font-weight:400;
    font-family:var(--font-jost);
    font-size:13px;
    line-height:1.3;
    transition:all .4s ease-out 0s;
    position:relative;
    border-bottom:1px solid #e1e1e1
}
header.dark-color .main-menu>ul>li ul.sub-menu>li>a::before{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    background:linear-gradient(90deg, #fff, var(--primary-color), #fff);
    width:100%;
    height:1px;
    transform:scaleX(0);
    transform-origin:left;
    transition:.4s ease-in;
    z-index:1
}
@media(max-width: 991px){
    header.dark-color .main-menu>ul>li ul.sub-menu>li>a{
        border-color:rgba(233,228,228,.5)
    }
    header.dark-color .main-menu>ul>li ul.sub-menu>li>a::before{
        background:linear-gradient(90deg, #ddd, #10c581, #ddd)
    }
}
header.dark-color .main-menu>ul>li ul.sub-menu>li>a:hover{
    color:var(--primary-color)
}
header.dark-color .main-menu>ul>li ul.sub-menu>li>a:hover::before{
    transform:scale(1)
}
header.dark-color .main-menu>ul>li ul.sub-menu>li>a.active{
    color:var(--primary-color)
}
header.dark-color .main-menu>ul>li ul.sub-menu>li>a.active::before{
    transform:scale(1)
}
header.dark-color .main-menu>ul>li ul.sub-menu>li:last-child a{
    border-bottom:none
}
header.dark-color .main-menu>ul>li ul.sub-menu>li:last-child a::before{
    display:none
}
header.dark-color .main-menu>ul>li ul.sub-menu>li:hover>a{
    color:var(--primary-color)
}
header.dark-color .main-menu>ul>li ul.sub-menu>li:hover .dropdown-icon{
    color:var(--primary-color)
}
header.dark-color .main-menu>ul>li ul.sub-menu>li.active>a{
    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
header.dark-color .main-menu>ul>li ul.sub-menu>li.active .dropdown-icon{
    color:var(--primary-color)
}
header.dark-color .main-menu>ul>li ul.sub-menu>li .sub-menu{
    left:220px;
    position:absolute;
    max-width:230px;
    min-width:215px;
    background:var(--white-color);
    box-shadow:0px 30px 80px rgba(8,0,42,.08);
    top:0
}
@media(max-width: 1199px){
    header.dark-color .main-menu>ul>li ul.sub-menu>li .sub-menu{
        box-shadow:none
    }
}
header.dark-color .main-menu>ul>li ul.sub-menu>li .sub-menu::before{
    display:none;
    visibility:hidden
}
@media only screen and (max-width: 991px){
    header.dark-color .main-menu>ul>li ul.sub-menu>li .sub-menu{
        position:unset;
        max-width:230px;
        min-width:215px;
        background:rgba(0,0,0,0);
        top:0
    }
}
header.dark-color .main-menu>ul>li ul.sub-menu>li .sub-menu>li i{
    display:block
}
@media(min-width: 992px){
    header.dark-color .main-menu>ul>li ul.sub-menu>li:hover>.sub-menu{
        display:block;
        animation:fade-down .45s linear
    }
}
header.dark-color .main-menu>ul>li.menu-item-has-children{
    transition:all .55s ease-in-out
}
header.dark-color .main-menu>ul>li.menu-item-has-children::after{
    content:"";
    font-family:"bootstrap-icons";
    font-weight:800;
    position:absolute;
    top:28px;
    right:7px;
    font-size:12px;
    color:var(--white-color);
    transition:all .55s ease-in-out
}
@media(min-width: 1200px)and (max-width: 1399px){
    header.dark-color .main-menu>ul>li.menu-item-has-children::after{
        right:0px
    }
}
@media(max-width: 1199px){
    header.dark-color .main-menu>ul>li.menu-item-has-children::after{
        right:0
    }
}
@media(max-width: 991px){
    header.dark-color .main-menu>ul>li.menu-item-has-children::after{
        display:none;
        visibility:hidden
    }
}
header.dark-color .main-menu>ul>li.menu-item-has-children:hover::after{
    color:var(--primary-color);
    content:""
}
@media(min-width: 992px){
    header.dark-color .main-menu>ul>li:hover>ul.sub-menu{
        display:block;
        animation:fade-down .45s linear
    }
}
@keyframes fade-up{
    0%{
        opacity:0;
        transform:scaleY(0);
        visibility:hidden
    }
    100%{
        opacity:1;
        transform:scaleY(1);
        visibility:visible
    }
}
header.dark-color .main-menu>ul>li:hover>a{
    color:var(--primary-color)
}
header.dark-color .main-menu>ul>li:hover>a::after{
    transform-origin:left center;
    transform:scale(1, 1)
}
header.dark-color .main-menu>ul>li:hover::after{
    color:var(--title-color)
}
header.dark-color .main-menu>ul>li:hover .dropdown-icon2{
    color:var(--primary-color)
}
header.dark-color .main-menu>ul>li.active>a{
    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
header.dark-color .main-menu>ul>li.active::after{
    color:var(--primary-color)
}
header.dark-color .main-menu>ul>li.active .dropdown-icon2{
    color:var(--primary-color)
}
header.dark-color .main-menu>ul>li.active.position-inherit>a::after{
    color:var(--primary-color)
}
header.dark-color .main-menu>ul li.menu-item-has-children>i{
    display:block
}
@media only screen and (max-width: 991px){
    header.dark-color .mobile-logo-area .menu-close-btn{
        height:32px;
        width:32px;
        border-radius:50%;
        border:1px solid var(--title-color);
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        transition:.35s
    }
    header.dark-color .mobile-logo-area .menu-close-btn i{
        font-size:26px;
        line-height:1;
        margin-top:2px;
        color:var(--title-color);
        transition:.35s
    }
    header.dark-color .mobile-logo-area .menu-close-btn:hover{
        background-color:var(--title-color)
    }
    header.dark-color .mobile-logo-area .menu-close-btn:hover i{
        color:var(--white-color)
    }
    header.dark-color .dropdown-icon{
        color:var(--white-color)
    }
    header.dark-color .main-menu{
        position:fixed;
        top:0;
        left:0;
        width:280px;
        padding:30px 20px !important;
        z-index:99999;
        height:100%;
        overflow:auto;
        background:#fff;
        border-right:1px solid #eee;
        transform:translateX(-100%);
        transition:transform .3s ease-in;
        box-shadow:0px 2px 20px rgba(0,0,0,.03)
    }
    header.dark-color .main-menu.show-menu{
        transform:translateX(0)
    }
    header.dark-color .main-menu .mobile-menu-logo{
        text-align:left;
        padding-top:20px;
        display:block;
        padding-bottom:8px
    }
    header.dark-color .main-menu .menu-list{
        padding-top:50px;
        padding-bottom:30px
    }
    header.dark-color .main-menu>ul{
        float:none;
        text-align:left;
        padding:5px 0px 20px 0
    }
    header.dark-color .main-menu>ul>li{
        display:block;
        position:relative;
        padding:0
    }
    header.dark-color .main-menu>ul>li i{
        display:block
    }
    header.dark-color .main-menu>ul>li a{
        padding:10px 0;
        display:block
    }
    header.dark-color .main-menu>ul>li ul.sub-menu{
        position:static;
        min-width:200px;
        background:0 0;
        border:none;
        opacity:1;
        visibility:visible;
        box-shadow:none;
        transform:none;
        transition:none;
        display:none;
        margin-top:0 !important;
        transform:translateY(0px);
        padding-left:10px
    }
    header.dark-color .main-menu>ul>li ul.sub-menu>li{
        border-bottom:1px solid rgba(0,0,0,0)
    }
    header.dark-color .main-menu>ul>li ul.sub-menu>li a{
        color:var(--title-color);
        padding:12px 0px
    }
    header.dark-color .main-menu>ul>li ul.sub-menu>li a:hover{
        color:var(--primary-color);
        margin-left:10px
    }
    header.dark-color .main-menu>ul>li ul.sub-menu>li a.active{
        color:var(--primary-color)
    }
    header.dark-color .main-menu>ul>li ul.sub-menu>li i{
        color:var(--primary-color);
        right:-13px
    }
    header.dark-color .main-menu>ul>li .bi{
        top:8px;
        font-size:20px;
        color:var(--title-color);
        line-height:1
    }
}
header.dark-color .nav-right{
    display:flex;
    align-items:center;
    gap:32px
}
@media(max-width: 1199px){
    header.dark-color .nav-right{
        gap:25px
    }
}
header.dark-color .nav-right .right-sidebar-button{
    cursor:pointer
}
header.dark-color .nav-right .right-sidebar-button svg{
    fill:var(--title-color)
}
@keyframes qode-draw{
    0%,100%{
        -webkit-clip-path:inset(-2px -2px);
        clip-path:inset(-2px -2px)
    }
    42%{
        -webkit-clip-path:inset(-2px -2px -2px 100%);
        clip-path:inset(-2px -2px -2px 100%)
    }
    43%{
        -webkit-clip-path:inset(-2px 100% -3px -2px);
        clip-path:inset(-2px 100% -3px -2px)
    }
}
header.dark-color .nav-right .right-sidebar-button:hover svg{
    animation:qode-draw .75s cubic-bezier(0.57, 0.39, 0, 0.86) 1 forwards
}
header.dark-color .nav-right .mobile-menu-btn{
    display:none;
    visibility:hidden
}
@media(max-width: 991px){
    header.dark-color .nav-right .mobile-menu-btn{
        display:flex;
        flex-direction:column;
        align-items:end;
        visibility:visible;
        justify-content:center;
        position:relative
    }
    header.dark-color .nav-right .mobile-menu-btn svg path{
        fill:var(--white-color)
    }
}
header.dark-color .nav-right .primary-btn svg{
    margin-right:8px
}
header.style-1{
    border-bottom:1px solid rgba(17,17,17,.1)
}
header.style-1.sticky{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding-top:0 !important;
    padding-bottom:0 !important;
    box-sizing:border-box;
    background-color:var(--white-color);
    box-shadow:5px 3px 40px rgba(0,72,88,.1);
    z-index: 1000; /* Reduced from 9999 to 1000 */
}
@keyframes smooth-header{
    0%{
        transform:translateY(-30px)
    }
    100%{
        transform:translateY(0px)
    }
}
header.style-1 .main-menu{
    display:inline-block;
    position:relative
}
header.style-1 .main-menu.show-menu{
    transform:translateX(0)
}
header.style-1 .main-menu>ul{
    list-style:none;
    margin:0;
    padding:0
}
header.style-1 .main-menu>ul>li{
    display:inline-block;
    position:relative;
    padding:1px 25px
}
@media(max-width: 1399px){
    header.style-1 .main-menu>ul>li{
        padding:0 20px
    }
}
@media(max-width: 991px){
    header.style-1 .main-menu>ul>li{
        padding:0px 12px
    }
}
header.style-1 .main-menu>ul>li:hover i{
    color:var(--primary-color);
    font-size:20px
}
@media(min-width: 992px){
    header.style-1 .main-menu>ul>li:first-child{
        padding-left:0
    }
    header.style-1 .main-menu>ul>li:first-child a{
        padding-left:0
    }
    header.style-1 .main-menu>ul>li:last-child{
        padding-right:0
    }
}
header.style-1 .main-menu>ul>li>a{
    position:relative;
    font-family:var(--font-jost);
    font-size:17px;
    font-weight:400;
    line-height:22.15px;
    color:var(--title-color);
    display:block;
    padding:35px 0px;
    transition:all .5s ease-out 0s;
    text-transform:capitalize
}
@media(min-width: 1200px)and (max-width: 1399px){
    header.style-1 .main-menu>ul>li>a{
        padding:22px 0
    }
}
header.style-1 .main-menu>ul>li i{
    font-size:20px;
    text-align:center;
    color:var(--title-color);
    font-style:normal;
    position:absolute;
    right:-5px;
    top:35px;
    z-index:999;
    cursor:pointer;
    display:none;
    transition:all .5s ease-out 0s;
    opacity:0
}
@media(max-width: 991px){
    header.style-1 .main-menu>ul>li i{
        opacity:1
    }
}
header.style-1 .main-menu>ul>li i.active{
    color:var(--title-color)
}
header.style-1 .main-menu>ul>li i.active::before{
    content:""
}
header.style-1 .main-menu>ul>li ul.sub-menu{
    position:absolute;
    left:0;
    right:0;
    top:auto;
    margin:0;
    display:none;
    min-width:220px;
    background:var(--white-color);
    box-shadow:0px 30px 80px rgba(134,117,212,.08);
    text-align:left;
    transform-origin:top
}
@media(max-width: 1199px){
    header.style-1 .main-menu>ul>li ul.sub-menu{
        box-shadow:none
    }
}
header.style-1 .main-menu>ul>li ul.sub-menu>li i{
    position:absolute;
    top:14px;
    right:6px;
    display:block;
    color:var(--title-color);
    font-size:14px
}
header.style-1 .main-menu>ul>li ul.sub-menu>li .dropdown-icon{
    color:var(--title-color);
    opacity:1;
    top:14px;
    font-size:14px;
    right:10px
}
@media(max-width: 991px){
    header.style-1 .main-menu>ul>li ul.sub-menu>li .dropdown-icon{
        right:0;
        top:8px;
        font-size:20px
    }
}
header.style-1 .main-menu>ul>li ul.sub-menu>li{
    padding:0;
    display:block;
    position:relative
}
header.style-1 .main-menu>ul>li ul.sub-menu>li>a{
    display:block;
    padding:15px 15px;
    color:var(--title-color);
    font-weight:400;
    font-family:var(--font-jost);
    font-size:13px;
    line-height:1.3;
    transition:all .4s ease-out 0s;
    position:relative;
    border-bottom:1px solid #e1e1e1
}
header.style-1 .main-menu>ul>li ul.sub-menu>li>a::before{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    background:linear-gradient(90deg, #fff, var(--primary-color), #fff);
    width:100%;
    height:1px;
    transform:scaleX(0);
    transform-origin:left;
    transition:.4s ease-in;
    z-index:1
}
@media(max-width: 991px){
    header.style-1 .main-menu>ul>li ul.sub-menu>li>a{
        border-color:rgba(233,228,228,.5)
    }
    header.style-1 .main-menu>ul>li ul.sub-menu>li>a::before{
        background:linear-gradient(90deg, #ddd, #10c581, #ddd)
    }
}
header.style-1 .main-menu>ul>li ul.sub-menu>li>a:hover{
    color:var(--primary-color)
}
header.style-1 .main-menu>ul>li ul.sub-menu>li>a:hover::before{
    transform:scale(1)
}
header.style-1 .main-menu>ul>li ul.sub-menu>li>a.active{
    color:var(--primary-color)
}
header.style-1 .main-menu>ul>li ul.sub-menu>li>a.active::before{
    transform:scale(1)
}
header.style-1 .main-menu>ul>li ul.sub-menu>li:last-child a{
    border-bottom:none
}
header.style-1 .main-menu>ul>li ul.sub-menu>li:last-child a::before{
    display:none
}
header.style-1 .main-menu>ul>li ul.sub-menu>li:hover>a{
    color:var(--primary-color)
}
header.style-1 .main-menu>ul>li ul.sub-menu>li:hover .dropdown-icon{
    color:var(--primary-color)
}
header.style-1 .main-menu>ul>li ul.sub-menu>li.active>a{
    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
header.style-1 .main-menu>ul>li ul.sub-menu>li.active .dropdown-icon{
    color:var(--primary-color)
}
header.style-1 .main-menu>ul>li ul.sub-menu>li .sub-menu{
    left:220px;
    position:absolute;
    max-width:230px;
    min-width:215px;
    background:var(--white-color);
    box-shadow:0px 30px 80px rgba(8,0,42,.08);
    top:0
}
@media(max-width: 1199px){
    header.style-1 .main-menu>ul>li ul.sub-menu>li .sub-menu{
        box-shadow:none
    }
}
header.style-1 .main-menu>ul>li ul.sub-menu>li .sub-menu::before{
    display:none;
    visibility:hidden
}
@media only screen and (max-width: 991px){
    header.style-1 .main-menu>ul>li ul.sub-menu>li .sub-menu{
        position:unset;
        max-width:230px;
        min-width:215px;
        background:rgba(0,0,0,0);
        top:0
    }
}
header.style-1 .main-menu>ul>li ul.sub-menu>li .sub-menu>li i{
    display:block
}
@media(min-width: 992px){
    header.style-1 .main-menu>ul>li ul.sub-menu>li:hover>.sub-menu{
        display:block;
        animation:fade-down .45s linear
    }
}
header.style-1 .main-menu>ul>li.menu-item-has-children{
    transition:all .55s ease-in-out
}
header.style-1 .main-menu>ul>li.menu-item-has-children::after{
    content:"";
    font-family:"bootstrap-icons";
    font-weight:800;
    position:absolute;
    top:33px;
    right:7px;
    font-size:12px;
    color:var(--title-color);
    transition:all .55s ease-in-out
}
@media(min-width: 1200px)and (max-width: 1399px){
    header.style-1 .main-menu>ul>li.menu-item-has-children::after{
        right:0px;
        top:20px
    }
}
@media(max-width: 1199px){
    header.style-1 .main-menu>ul>li.menu-item-has-children::after{
        right:0
    }
}
@media(max-width: 991px){
    header.style-1 .main-menu>ul>li.menu-item-has-children::after{
        display:none;
        visibility:hidden
    }
}
header.style-1 .main-menu>ul>li.menu-item-has-children:hover::after{
    color:var(--primary-color);
    content:""
}
@media(min-width: 992px){
    header.style-1 .main-menu>ul>li:hover>ul.sub-menu{
        display:block;
        animation:fade-down .45s linear
    }
}
@keyframes fade-up{
    0%{
        opacity:0;
        transform:scaleY(0);
        visibility:hidden
    }
    100%{
        opacity:1;
        transform:scaleY(1);
        visibility:visible
    }
}
header.style-1 .main-menu>ul>li:hover>a{

    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
header.style-1 .main-menu>ul>li:hover>a::after{
    transform-origin:left center;
    transform:scale(1, 1)
}
header.style-1 .main-menu>ul>li:hover::after{
    color:var(--title-color)
}
header.style-1 .main-menu>ul>li:hover .dropdown-icon2{
    color:var(--primary-color)
}
header.style-1 .main-menu>ul>li.active>a{
    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
header.style-1 .main-menu>ul>li.active::after{
    color:var(--primary-color)
}
header.style-1 .main-menu>ul>li.active .dropdown-icon2{
    color:var(--primary-color)
}
header.style-1 .main-menu>ul>li.active.position-inherit>a::after{
    color:var(--primary-color)
}
header.style-1 .main-menu>ul li.menu-item-has-children>i{
    display:block
}
@media only screen and (max-width: 991px){
    header.style-1 .mobile-logo-area .menu-close-btn{
        height:32px;
        width:32px;
        border-radius:50%;
        border:1px solid var(--title-color);
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        transition:.35s
    }
    header.style-1 .mobile-logo-area .menu-close-btn i{
        font-size:26px;
        line-height:1;
        margin-top:2px;
        color:var(--title-color);
        transition:.35s
    }
    header.style-1 .mobile-logo-area .menu-close-btn:hover{
        background-color:var(--title-color)
    }
    header.style-1 .mobile-logo-area .menu-close-btn:hover i{
        color:var(--white-color)
    }
    header.style-1 .dropdown-icon{
        color:var(--white-color)
    }
    header.style-1 .main-menu{
        position:fixed;
        top:0;
        left:0;
        width:280px;
        padding:30px 20px !important;
        z-index:99999;
        height:100%;
        overflow:auto;
        background:#fff;
        border-right:1px solid #eee;
        transform:translateX(-100%);
        transition:transform .3s ease-in;
        box-shadow:0px 2px 20px rgba(0,0,0,.03)
    }
    header.style-1 .main-menu.show-menu{
        transform:translateX(0)
    }
    header.style-1 .main-menu .mobile-menu-logo{
        text-align:left;
        padding-top:20px;
        display:block;
        padding-bottom:8px
    }
    header.style-1 .main-menu .menu-list{
        padding-top:50px;
        padding-bottom:30px
    }
    header.style-1 .main-menu>ul{
        float:none;
        text-align:left;
        padding:5px 0px 20px 0
    }
    header.style-1 .main-menu>ul>li{
        display:block;
        position:relative;
        padding:0
    }
    header.style-1 .main-menu>ul>li i{
        display:block
    }
    header.style-1 .main-menu>ul>li a{
        padding:10px 0;
        display:block
    }
    header.style-1 .main-menu>ul>li ul.sub-menu{
        position:static;
        min-width:200px;
        background:0 0;
        border:none;
        opacity:1;
        visibility:visible;
        box-shadow:none;
        transform:none;
        transition:none;
        display:none;
        margin-top:0 !important;
        transform:translateY(0px);
        padding-left:10px
    }
    header.style-1 .main-menu>ul>li ul.sub-menu>li{
        border-bottom:1px solid rgba(0,0,0,0)
    }
    header.style-1 .main-menu>ul>li ul.sub-menu>li a{
        color:var(--title-color);
        padding:12px 0px
    }
    header.style-1 .main-menu>ul>li ul.sub-menu>li a:hover{
        color:var(--primary-color);
        margin-left:10px
    }
    header.style-1 .main-menu>ul>li ul.sub-menu>li a.active{
        color:var(--primary-color)
    }
    header.style-1 .main-menu>ul>li ul.sub-menu>li i{
        color:var(--primary-color);
        right:-13px
    }
    header.style-1 .main-menu>ul>li .bi{
        top:8px;
        font-size:20px;
        color:var(--title-color);
        line-height:1
    }
}
header.style-2{
    border-bottom:none
}
header.style-2.sticky{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding-top:0 !important;
    padding-bottom:0 !important;
    box-sizing:border-box;
    background-color:var(--white-color);
    box-shadow:5px 3px 40px rgba(0,72,88,.1);
    z-index:9999
}
@keyframes smooth-header{
    0%{
        transform:translateY(-30px)
    }
    100%{
        transform:translateY(0px)
    }
}
header.style-2 .main-menu{
    display:inline-block;
    position:relative
}
header.style-2 .main-menu.show-menu{
    transform:translateX(0)
}
header.style-2 .main-menu>ul{
    list-style:none;
    margin:0;
    padding:0
}
header.style-2 .main-menu>ul>li{
    display:inline-block;
    position:relative;
    padding:1px 25px
}
@media(max-width: 1399px){
    header.style-2 .main-menu>ul>li{
        padding:0 20px
    }
}
@media(max-width: 991px){
    header.style-2 .main-menu>ul>li{
        padding:0px 12px
    }
}
header.style-2 .main-menu>ul>li:hover i{
    color:var(--primary-color);
    font-size:20px
}
@media(min-width: 992px){
    header.style-2 .main-menu>ul>li:first-child{
        padding-left:0
    }
    header.style-2 .main-menu>ul>li:first-child a{
        padding-left:0
    }
    header.style-2 .main-menu>ul>li:last-child{
        padding-right:0
    }
}
header.style-2 .main-menu>ul>li>a{
    position:relative;
    font-family:var(--font-jost);
    font-size:14px;
    font-weight:400;
    line-height:18.24px;
    letter-spacing:.08em;
    color:var(--title-color);
    display:block;
    padding:35px 0px;
    transition:all .5s ease-out 0s;
    text-transform:uppercase
}
header.style-2 .main-menu>ul>li i{
    font-size:20px;
    text-align:center;
    color:var(--title-color);
    font-style:normal;
    position:absolute;
    right:-5px;
    top:35px;
    z-index:999;
    cursor:pointer;
    display:none;
    transition:all .5s ease-out 0s;
    opacity:0
}
@media(max-width: 991px){
    header.style-2 .main-menu>ul>li i{
        opacity:1
    }
}
header.style-2 .main-menu>ul>li i.active{
    color:var(--title-color)
}
header.style-2 .main-menu>ul>li i.active::before{
    content:""
}
header.style-2 .main-menu>ul>li ul.sub-menu{
    position:absolute;
    left:0;
    right:0;
    top:auto;
    margin:0;
    display:none;
    min-width:220px;
    background:var(--white-color);
    box-shadow:0px 30px 80px rgba(134,117,212,.08);
    text-align:left;
    transform-origin:top
}
@media(max-width: 1199px){
    header.style-2 .main-menu>ul>li ul.sub-menu{
        box-shadow:none
    }
}
header.style-2 .main-menu>ul>li ul.sub-menu>li i{
    position:absolute;
    top:14px;
    right:6px;
    display:block;
    color:var(--title-color);
    font-size:14px
}
header.style-2 .main-menu>ul>li ul.sub-menu>li .dropdown-icon{
    color:var(--title-color);
    opacity:1;
    top:14px;
    font-size:14px;
    right:10px
}
@media(max-width: 991px){
    header.style-2 .main-menu>ul>li ul.sub-menu>li .dropdown-icon{
        right:0;
        top:8px;
        font-size:20px
    }
}
header.style-2 .main-menu>ul>li ul.sub-menu>li{
    padding:0;
    display:block;
    position:relative
}
header.style-2 .main-menu>ul>li ul.sub-menu>li>a{
    display:block;
    padding:15px 15px;
    color:var(--title-color);
    font-weight:400;
    font-family:var(--font-jost);
    font-size:13px;
    line-height:1.3;
    transition:all .4s ease-out 0s;
    position:relative;
    border-bottom:1px solid #e1e1e1
}
header.style-2 .main-menu>ul>li ul.sub-menu>li>a::before{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    background:linear-gradient(90deg, #fff, var(--primary-color), #fff);
    width:100%;
    height:1px;
    transform:scaleX(0);
    transform-origin:left;
    transition:.4s ease-in;
    z-index:1
}
@media(max-width: 991px){
    header.style-2 .main-menu>ul>li ul.sub-menu>li>a{
        border-color:rgba(233,228,228,.5)
    }
    header.style-2 .main-menu>ul>li ul.sub-menu>li>a::before{
        background:linear-gradient(90deg, #ddd, #10c581, #ddd)
    }
}
header.style-2 .main-menu>ul>li ul.sub-menu>li>a:hover{
    color:var(--primary-color)
}
header.style-2 .main-menu>ul>li ul.sub-menu>li>a:hover::before{
    transform:scale(1)
}
header.style-2 .main-menu>ul>li ul.sub-menu>li>a.active{
    color:var(--primary-color)
}
header.style-2 .main-menu>ul>li ul.sub-menu>li>a.active::before{
    transform:scale(1)
}
header.style-2 .main-menu>ul>li ul.sub-menu>li:last-child a{
    border-bottom:none
}
header.style-2 .main-menu>ul>li ul.sub-menu>li:last-child a::before{
    display:none
}
header.style-2 .main-menu>ul>li ul.sub-menu>li:hover>a{
    color:var(--primary-color)
}
header.style-2 .main-menu>ul>li ul.sub-menu>li:hover .dropdown-icon{
    color:var(--primary-color)
}
header.style-2 .main-menu>ul>li ul.sub-menu>li.active>a{
    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
header.style-2 .main-menu>ul>li ul.sub-menu>li.active .dropdown-icon{
    color:var(--primary-color)
}
header.style-2 .main-menu>ul>li ul.sub-menu>li .sub-menu{
    left:220px;
    position:absolute;
    max-width:230px;
    min-width:215px;
    background:var(--white-color);
    box-shadow:0px 30px 80px rgba(8,0,42,.08);
    top:0
}
@media(max-width: 1199px){
    header.style-2 .main-menu>ul>li ul.sub-menu>li .sub-menu{
        box-shadow:none
    }
}
header.style-2 .main-menu>ul>li ul.sub-menu>li .sub-menu::before{
    display:none;
    visibility:hidden
}
@media only screen and (max-width: 991px){
    header.style-2 .main-menu>ul>li ul.sub-menu>li .sub-menu{
        position:unset;
        max-width:230px;
        min-width:215px;
        background:rgba(0,0,0,0);
        top:0
    }
}
header.style-2 .main-menu>ul>li ul.sub-menu>li .sub-menu>li i{
    display:block
}
@media(min-width: 992px){
    header.style-2 .main-menu>ul>li ul.sub-menu>li:hover>.sub-menu{
        display:block;
        animation:fade-down .45s linear
    }
}
header.style-2 .main-menu>ul>li.menu-item-has-children{
    transition:all .55s ease-in-out
}
header.style-2 .main-menu>ul>li.menu-item-has-children::after{
    content:"";
    font-family:"bootstrap-icons";
    font-weight:800;
    position:absolute;
    top:30px;
    right:7px;
    font-size:12px;
    color:var(--title-color);
    transition:all .55s ease-in-out
}
@media(min-width: 1200px)and (max-width: 1399px){
    header.style-2 .main-menu>ul>li.menu-item-has-children::after{
        right:0px
    }
}
@media(max-width: 1199px){
    header.style-2 .main-menu>ul>li.menu-item-has-children::after{
        right:0
    }
}
@media(max-width: 991px){
    header.style-2 .main-menu>ul>li.menu-item-has-children::after{
        display:none;
        visibility:hidden
    }
}
header.style-2 .main-menu>ul>li.menu-item-has-children:hover::after{
    color:var(--primary-color);
    content:""
}
@media(min-width: 992px){
    header.style-2 .main-menu>ul>li:hover>ul.sub-menu{
        display:block;
        animation:fade-down .45s linear
    }
}
@keyframes fade-up{
    0%{
        opacity:0;
        transform:scaleY(0);
        visibility:hidden
    }
    100%{
        opacity:1;
        transform:scaleY(1);
        visibility:visible
    }
}
header.style-2 .main-menu>ul>li:hover>a{
    color:var(--primary-color)
}
header.style-2 .main-menu>ul>li:hover>a::after{
    transform-origin:left center;
    transform:scale(1, 1)
}
header.style-2 .main-menu>ul>li:hover::after{
    color:var(--title-color)
}
header.style-2 .main-menu>ul>li:hover .dropdown-icon2{
    color:var(--primary-color)
}
header.style-2 .main-menu>ul>li.active>a{
    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent; }
header.style-2 .main-menu>ul>li.active::after{
    color:var(--primary-color)
}
header.style-2 .main-menu>ul>li.active .dropdown-icon2{
    color:var(--primary-color)
}
header.style-2 .main-menu>ul>li.active.position-inherit>a::after{
    color:var(--primary-color)
}
header.style-2 .main-menu>ul li.menu-item-has-children>i{
    display:block
}
@media only screen and (max-width: 991px){
    header.style-2 .mobile-logo-area .menu-close-btn{
        height:32px;
        width:32px;
        border-radius:50%;
        border:1px solid var(--title-color);
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        transition:.35s
    }
    header.style-2 .mobile-logo-area .menu-close-btn i{
        font-size:26px;
        line-height:1;
        margin-top:2px;
        color:var(--title-color);
        transition:.35s
    }
    header.style-2 .mobile-logo-area .menu-close-btn:hover{
        background-color:var(--title-color)
    }
    header.style-2 .mobile-logo-area .menu-close-btn:hover i{
        color:var(--white-color)
    }
    header.style-2 .dropdown-icon{
        color:var(--white-color)
    }
    header.style-2 .main-menu{
        position:fixed;
        top:0;
        left:0;
        width:280px;
        padding:30px 20px !important;
        z-index:99999;
        height:100%;
        overflow:auto;
        background:#fff;
        border-right:1px solid #eee;
        transform:translateX(-100%);
        transition:transform .3s ease-in;
        box-shadow:0px 2px 20px rgba(0,0,0,.03)
    }
    header.style-2 .main-menu.show-menu{
        transform:translateX(0)
    }
    header.style-2 .main-menu .mobile-menu-logo{
        text-align:left;
        padding-top:20px;
        display:block;
        padding-bottom:8px
    }
    header.style-2 .main-menu .menu-list{
        padding-top:50px;
        padding-bottom:30px
    }
    header.style-2 .main-menu>ul{
        float:none;
        text-align:left;
        padding:5px 0px 20px 0
    }
    header.style-2 .main-menu>ul>li{
        display:block;
        position:relative;
        padding:0
    }
    header.style-2 .main-menu>ul>li i{
        display:block
    }
    header.style-2 .main-menu>ul>li a{
        padding:10px 0;
        display:block
    }
    header.style-2 .main-menu>ul>li ul.sub-menu{
        position:static;
        min-width:200px;
        background:0 0;
        border:none;
        opacity:1;
        visibility:visible;
        box-shadow:none;
        transform:none;
        transition:none;
        display:none;
        margin-top:0 !important;
        transform:translateY(0px);
        padding-left:10px
    }
    header.style-2 .main-menu>ul>li ul.sub-menu>li{
        border-bottom:1px solid rgba(0,0,0,0)
    }
    header.style-2 .main-menu>ul>li ul.sub-menu>li a{
        color:var(--title-color);
        padding:12px 0px
    }
    header.style-2 .main-menu>ul>li ul.sub-menu>li a:hover{
        color:var(--primary-color);
        margin-left:10px
    }
    header.style-2 .main-menu>ul>li ul.sub-menu>li a.active{
        color:var(--primary-color)
    }
    header.style-2 .main-menu>ul>li ul.sub-menu>li i{
        color:var(--primary-color);
        right:-13px
    }
    header.style-2 .main-menu>ul>li .bi{
        top:8px;
        font-size:20px;
        color:var(--title-color);
        line-height:1
    }
}
header.style-3{
    background-color:rgba(0,0,0,0);
    padding:0;
    position:absolute
}
header.style-3 .main-menu{
    display:inline-block;
    position:relative
}
header.style-3 .main-menu.show-menu{
    transform:translateX(0)
}
header.style-3 .main-menu>ul{
    list-style:none;
    margin:0;
    padding:0
}
header.style-3 .main-menu>ul>li{
    display:inline-block;
    position:relative;
    padding:1px 25px
}
@media(max-width: 1399px){
    header.style-3 .main-menu>ul>li{
        padding:0 20px
    }
}
@media(max-width: 991px){
    header.style-3 .main-menu>ul>li{
        padding:0px 12px
    }
}
header.style-3 .main-menu>ul>li:hover i{
    color:var(--primary-color);
    font-size:20px
}
@media(min-width: 992px){
    header.style-3 .main-menu>ul>li:first-child{
        padding-left:0
    }
    header.style-3 .main-menu>ul>li:first-child a{
        padding-left:0
    }
    header.style-3 .main-menu>ul>li:last-child{
        padding-right:0
    }
}
header.style-3 .main-menu>ul>li>a{
    position:relative;
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:16px;
    color:var(--title-color);
    display:block;
    padding:27px 0px;
    transition:all .5s ease-out 0s;
    text-transform:capitalize
}
@media(min-width: 1200px)and (max-width: 1399px){
    header.style-3 .main-menu>ul>li>a{
        padding:22px 0
    }
}
header.style-3 .main-menu>ul>li i{
    font-size:20px;
    text-align:center;
    color:var(--title-color);
    font-style:normal;
    position:absolute;
    right:-5px;
    top:35px;
    z-index:999;
    cursor:pointer;
    display:none;
    transition:all .5s ease-out 0s;
    opacity:0
}
@media(max-width: 991px){
    header.style-3 .main-menu>ul>li i{
        opacity:1
    }
}
header.style-3 .main-menu>ul>li i.active{
    color:var(--title-color)
}
header.style-3 .main-menu>ul>li i.active::before{
    content:""
}
header.style-3 .main-menu>ul>li ul.sub-menu{
    position:absolute;
    left:0;
    right:0;
    top:auto;
    margin:0;
    display:none;
    min-width:220px;
    background:var(--white-color);
    box-shadow:0px 30px 80px rgba(134,117,212,.08);
    text-align:left;
    transform-origin:top
}
@media(max-width: 1199px){
    header.style-3 .main-menu>ul>li ul.sub-menu{
        box-shadow:none
    }
}
header.style-3 .main-menu>ul>li ul.sub-menu>li i{
    position:absolute;
    top:14px;
    right:6px;
    display:block;
    color:var(--title-color);
    font-size:14px
}
header.style-3 .main-menu>ul>li ul.sub-menu>li .dropdown-icon{
    color:var(--title-color);
    opacity:1;
    top:14px;
    font-size:14px;
    right:10px
}
@media(max-width: 991px){
    header.style-3 .main-menu>ul>li ul.sub-menu>li .dropdown-icon{
        right:0;
        top:8px;
        font-size:20px
    }
}
header.style-3 .main-menu>ul>li ul.sub-menu>li{
    padding:0;
    display:block;
    position:relative
}
header.style-3 .main-menu>ul>li ul.sub-menu>li>a{
    display:block;
    padding:15px 15px;
    color:var(--title-color);
    font-weight:400;
    font-family:var(--font-jost);
    font-size:13px;
    line-height:1.3;
    transition:all .4s ease-out 0s;
    position:relative;
    border-bottom:1px solid #e1e1e1
}
header.style-3 .main-menu>ul>li ul.sub-menu>li>a::before{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    background:linear-gradient(90deg, #fff, var(--primary-color), #fff);
    width:100%;
    height:1px;
    transform:scaleX(0);
    transform-origin:left;
    transition:.4s ease-in;
    z-index:1
}
@media(max-width: 991px){
    header.style-3 .main-menu>ul>li ul.sub-menu>li>a{
        border-color:rgba(233,228,228,.5)
    }
    header.style-3 .main-menu>ul>li ul.sub-menu>li>a::before{
        background:linear-gradient(90deg, #ddd, #10c581, #ddd)
    }
}
header.style-3 .main-menu>ul>li ul.sub-menu>li>a:hover{
    color:var(--primary-color)
}
header.style-3 .main-menu>ul>li ul.sub-menu>li>a:hover::before{
    transform:scale(1)
}
header.style-3 .main-menu>ul>li ul.sub-menu>li>a.active{
    color:var(--primary-color)
}
header.style-3 .main-menu>ul>li ul.sub-menu>li>a.active::before{
    transform:scale(1)
}
header.style-3 .main-menu>ul>li ul.sub-menu>li:last-child a{
    border-bottom:none
}
header.style-3 .main-menu>ul>li ul.sub-menu>li:last-child a::before{
    display:none
}
header.style-3 .main-menu>ul>li ul.sub-menu>li:hover>a{
    color:var(--primary-color)
}
header.style-3 .main-menu>ul>li ul.sub-menu>li:hover .dropdown-icon{
    color:var(--primary-color)
}
header.style-3 .main-menu>ul>li ul.sub-menu>li.active>a{
    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
header.style-3 .main-menu>ul>li ul.sub-menu>li.active .dropdown-icon{
    color:var(--primary-color)
}
header.style-3 .main-menu>ul>li ul.sub-menu>li .sub-menu{
    left:220px;
    position:absolute;
    max-width:230px;
    min-width:215px;
    background:var(--white-color);
    box-shadow:0px 30px 80px rgba(8,0,42,.08);
    top:0
}
@media(max-width: 1199px){
    header.style-3 .main-menu>ul>li ul.sub-menu>li .sub-menu{
        box-shadow:none
    }
}
header.style-3 .main-menu>ul>li ul.sub-menu>li .sub-menu::before{
    display:none;
    visibility:hidden
}
@media only screen and (max-width: 991px){
    header.style-3 .main-menu>ul>li ul.sub-menu>li .sub-menu{
        position:unset;
        max-width:230px;
        min-width:215px;
        background:rgba(0,0,0,0);
        top:0
    }
}
header.style-3 .main-menu>ul>li ul.sub-menu>li .sub-menu>li i{
    display:block
}
@media(min-width: 992px){
    header.style-3 .main-menu>ul>li ul.sub-menu>li:hover>.sub-menu{
        display:block;
        animation:fade-down .45s linear
    }
}
header.style-3 .main-menu>ul>li.menu-item-has-children{
    transition:all .55s ease-in-out
}
header.style-3 .main-menu>ul>li.menu-item-has-children::after{
    content:"";
    font-family:"bootstrap-icons";
    font-weight:800;
    position:absolute;
    top:21px;
    right:7px;
    font-size:12px;
    color:var(--title-color);
    transition:all .55s ease-in-out
}
@media(min-width: 1200px)and (max-width: 1399px){
    header.style-3 .main-menu>ul>li.menu-item-has-children::after{
        right:0px;
        top:20px
    }
}
@media(max-width: 1199px){
    header.style-3 .main-menu>ul>li.menu-item-has-children::after{
        right:0
    }
}
@media(max-width: 991px){
    header.style-3 .main-menu>ul>li.menu-item-has-children::after{
        display:none;
        visibility:hidden
    }
}
header.style-3 .main-menu>ul>li.menu-item-has-children:hover::after{
    color:var(--primary-color);
    content:""
}
@media(min-width: 992px){
    header.style-3 .main-menu>ul>li:hover>ul.sub-menu{
        display:block;
        animation:fade-down .45s linear
    }
}
@keyframes fade-up{
    0%{
        opacity:0;
        transform:scaleY(0);
        visibility:hidden
    }
    100%{
        opacity:1;
        transform:scaleY(1);
        visibility:visible
    }
}
header.style-3 .main-menu>ul>li:hover>a{
    color:var(--primary-color)
}
header.style-3 .main-menu>ul>li:hover>a::after{
    transform-origin:left center;
    transform:scale(1, 1)
}
header.style-3 .main-menu>ul>li:hover::after{
    color:var(--title-color)
}
header.style-3 .main-menu>ul>li:hover .dropdown-icon2{
    color:var(--primary-color)
}
header.style-3 .main-menu>ul>li.active>a{
    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
header.style-3 .main-menu>ul>li.active::after{
    color:var(--primary-color)
}
header.style-3 .main-menu>ul>li.active .dropdown-icon2{
    color:var(--primary-color)
}
header.style-3 .main-menu>ul>li.active.position-inherit>a::after{
    color:var(--primary-color)
}
header.style-3 .main-menu>ul li.menu-item-has-children>i{
    display:block
}
header.style-3 .border-btm{
    border-bottom:1px solid rgba(17,17,17,.1)
}
header.style-3.sticky{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding-top:0 !important;
    padding-bottom:0 !important;
    box-sizing:border-box;
    background-color:var(--white-color);
    box-shadow:5px 3px 40px rgba(0,72,88,.1);
    z-index:9999
}
@keyframes smooth-header{
    0%{
        transform:translateY(-30px)
    }
    100%{
        transform:translateY(0px)
    }
}
@media only screen and (max-width: 991px){
    header.style-3 .mobile-logo-area .menu-close-btn{
        height:32px;
        width:32px;
        border-radius:50%;
        border:1px solid var(--title-color);
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        transition:.35s
    }
    header.style-3 .mobile-logo-area .menu-close-btn i{
        font-size:26px;
        line-height:1;
        margin-top:2px;
        color:var(--title-color);
        transition:.35s
    }
    header.style-3 .mobile-logo-area .menu-close-btn:hover{
        background-color:var(--title-color)
    }
    header.style-3 .mobile-logo-area .menu-close-btn:hover i{
        color:var(--white-color)
    }
    header.style-3 .dropdown-icon{
        color:var(--white-color)
    }
    header.style-3 .main-menu{
        position:fixed;
        top:0;
        left:0;
        width:280px;
        padding:30px 20px !important;
        z-index:99999;
        height:100%;
        overflow:auto;
        background:#fff;
        border-right:1px solid #eee;
        transform:translateX(-100%);
        transition:transform .3s ease-in;
        box-shadow:0px 2px 20px rgba(0,0,0,.03)
    }
    header.style-3 .main-menu.show-menu{
        transform:translateX(0)
    }
    header.style-3 .main-menu .mobile-menu-logo{
        text-align:left;
        padding-top:20px;
        display:block;
        padding-bottom:8px
    }
    header.style-3 .main-menu .menu-list{
        padding-top:50px;
        padding-bottom:30px
    }
    header.style-3 .main-menu>ul{
        float:none;
        text-align:left;
        padding:5px 0px 20px 0
    }
    header.style-3 .main-menu>ul>li{
        display:block;
        position:relative;
        padding:0
    }
    header.style-3 .main-menu>ul>li i{
        display:block
    }
    header.style-3 .main-menu>ul>li a{
        padding:10px 0;
        display:block
    }
    header.style-3 .main-menu>ul>li ul.sub-menu{
        position:static;
        min-width:200px;
        background:0 0;
        border:none;
        opacity:1;
        visibility:visible;
        box-shadow:none;
        transform:none;
        transition:none;
        display:none;
        margin-top:0 !important;
        transform:translateY(0px);
        padding-left:10px
    }
    header.style-3 .main-menu>ul>li ul.sub-menu>li{
        border-bottom:1px solid rgba(0,0,0,0)
    }
    header.style-3 .main-menu>ul>li ul.sub-menu>li a{
        color:var(--title-color);
        padding:12px 0px
    }
    header.style-3 .main-menu>ul>li ul.sub-menu>li a:hover{
        color:var(--primary-color);
        margin-left:10px
    }
    header.style-3 .main-menu>ul>li ul.sub-menu>li a.active{
        color:var(--primary-color)
    }
    header.style-3 .main-menu>ul>li ul.sub-menu>li i{
        color:var(--primary-color);
        right:-13px
    }
    header.style-3 .main-menu>ul>li .bi{
        top:8px;
        font-size:20px;
        color:var(--title-color);
        line-height:1
    }
}
@media(max-width: 1699px){
    header{
        padding:0 30px
    }
}
@media(max-width: 991px){
    header{
        padding:0 40px
    }
}
@media(max-width: 576px){
    header{
        padding:0 20px
    }
}
header.inner-page{
    position:relative;
    background-color:var(--white-color)
}
@media(max-width: 991px){
    header .header-logo{
        padding:15px 0
    }
}
header .header-logo a img{
    width:134px
}
header .nav-right{
    display:flex;
    align-items:center;
    gap:35px
}
@media(max-width: 1199px){
    header .nav-right{
        gap:25px
    }
}
header .nav-right .right-sidebar-button{
    cursor:pointer
}
header .nav-right .right-sidebar-button svg{
    fill:var(--title-color)
}
@keyframes qode-draw{
    0%,100%{
        -webkit-clip-path:inset(-2px -2px);
        clip-path:inset(-2px -2px)
    }
    42%{
        -webkit-clip-path:inset(-2px -2px -2px 100%);
        clip-path:inset(-2px -2px -2px 100%)
    }
    43%{
        -webkit-clip-path:inset(-2px 100% -3px -2px);
        clip-path:inset(-2px 100% -3px -2px)
    }
}
header .nav-right .right-sidebar-button:hover svg{
    animation:qode-draw .75s cubic-bezier(0.57, 0.39, 0, 0.86) 1 forwards
}
header .nav-right .mobile-menu-btn{
    display:none;
    visibility:hidden
}
@media(max-width: 991px){
    header .nav-right .mobile-menu-btn{
        display:flex;
        flex-direction:column;
        align-items:end;
        visibility:visible;
        justify-content:center;
        position:relative
    }
    header .nav-right .mobile-menu-btn svg{
        fill:var(--title-color)
    }
}
header .main-menu{
    display:inline-block;
    position:relative
}
header .main-menu.show-menu{
    transform:translateX(0)
}
header .main-menu>ul{
    list-style:none;
    margin:0;
    padding:0
}
header .main-menu>ul>li{
    display:inline-block;
    position:relative;
    padding:0 25px
}
@media(max-width: 1399px){
    header .main-menu>ul>li{
        padding:0 20px
    }
}
@media(max-width: 991px){
    header .main-menu>ul>li{
        padding:0px 12px
    }
}
header .main-menu>ul>li:hover i{
    color:var(--primary-color);
    font-size:20px
}
@media(min-width: 992px){
    header .main-menu>ul>li:first-child{
        padding-left:0
    }
    header .main-menu>ul>li:first-child a{
        padding-left:0
    }
    header .main-menu>ul>li:last-child{
        padding-right:0
    }
}
header .main-menu>ul>li>a{
    color:var(--title-color);
    display:block;
    padding:35px 0px;
    position:relative;
    font-family:var(--font-jost);
    font-weight:400;
    font-size:17px;
    line-height:22.15px;
    transition:all .5s ease-out 0s;
    position:relative
}
@media(min-width: 1200px)and (max-width: 1399px){
    header .main-menu>ul>li>a{
        padding:22px 0
    }
}
header .main-menu>ul>li i{
    font-size:20px;
    text-align:center;
    color:var(--title-color);
    font-style:normal;
    position:absolute;
    right:-5px;
    top:35px;
    z-index:999;
    cursor:pointer;
    display:none;
    transition:all .5s ease-out 0s;
    opacity:0
}
@media(max-width: 991px){
    header .main-menu>ul>li i{
        opacity:1
    }
}
header .main-menu>ul>li i.active{
    color:var(--title-color)
}
header .main-menu>ul>li i.active::before{
    content:""
}
header .main-menu>ul>li ul.sub-menu{
    position:absolute;
    left:0;
    right:0;
    top:auto;
    margin:0;
    display:none;
    min-width:220px;
    background:var(--white-color);
    box-shadow:0px 30px 80px rgba(134,117,212,.08);
    text-align:left;
    transform-origin:top
}
@media(max-width: 1199px){
    header .main-menu>ul>li ul.sub-menu{
        box-shadow:none
    }
}
header .main-menu>ul>li ul.sub-menu>li i{
    position:absolute;
    top:14px;
    right:6px;
    display:block;
    color:var(--title-color);
    font-size:14px
}
header .main-menu>ul>li ul.sub-menu>li .dropdown-icon{
    color:var(--title-color);
    opacity:1;
    top:14px;
    font-size:14px;
    right:10px
}
@media(max-width: 991px){
    header .main-menu>ul>li ul.sub-menu>li .dropdown-icon{
        right:0;
        top:8px;
        font-size:20px
    }
}
header .main-menu>ul>li ul.sub-menu>li{
    padding:0;
    display:block;
    position:relative
}
header .main-menu>ul>li ul.sub-menu>li>a{
    display:block;
    padding:15px 15px;
    color:var(--title-color);
    font-weight:400;
    font-family:var(--font-jost);
    font-size:13px;
    line-height:1.3;
    transition:all .4s ease-out 0s;
    position:relative;
    border-bottom:1px solid #e1e1e1
}
header .main-menu>ul>li ul.sub-menu>li>a::before{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    background:linear-gradient(90deg, #fff, var(--primary-color), #fff);
    width:100%;
    height:1px;
    transform:scaleX(0);
    transform-origin:left;
    transition:.4s ease-in;
    z-index:1
}
@media(max-width: 991px){
    header .main-menu>ul>li ul.sub-menu>li>a{
        border-color:rgba(233,228,228,.5)
    }
    header .main-menu>ul>li ul.sub-menu>li>a::before{
        background:linear-gradient(90deg, #ddd, #10c581, #ddd)
    }
}
header .main-menu>ul>li ul.sub-menu>li>a:hover{
    color:var(--primary-color)
}
header .main-menu>ul>li ul.sub-menu>li>a:hover::before{
    transform:scale(1)
}
header .main-menu>ul>li ul.sub-menu>li>a.active{
    color:var(--primary-color)
}
header .main-menu>ul>li ul.sub-menu>li>a.active::before{
    transform:scale(1)
}
header .main-menu>ul>li ul.sub-menu>li:last-child a{
    border-bottom:none
}
header .main-menu>ul>li ul.sub-menu>li:last-child a::before{
    display:none
}
header .main-menu>ul>li ul.sub-menu>li:hover>a{
    color:var(--primary-color)
}
header .main-menu>ul>li ul.sub-menu>li:hover .dropdown-icon{
    color:var(--primary-color)
}
header .main-menu>ul>li ul.sub-menu>li.active>a{
    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent; }
header .main-menu>ul>li ul.sub-menu>li.active .dropdown-icon{
    color:var(--primary-color)
}
header .main-menu>ul>li ul.sub-menu>li .sub-menu{
    left:220px;
    position:absolute;
    max-width:230px;
    min-width:215px;
    background:var(--white-color);
    box-shadow:0px 30px 80px rgba(8,0,42,.08);
    top:0
}
@media(max-width: 1199px){
    header .main-menu>ul>li ul.sub-menu>li .sub-menu{
        box-shadow:none
    }
}
header .main-menu>ul>li ul.sub-menu>li .sub-menu::before{
    display:none;
    visibility:hidden
}
@media only screen and (max-width: 991px){
    header .main-menu>ul>li ul.sub-menu>li .sub-menu{
        position:unset;
        max-width:230px;
        min-width:215px;
        background:rgba(0,0,0,0);
        top:0
    }
}
header .main-menu>ul>li ul.sub-menu>li .sub-menu>li i{
    display:block
}
@media(min-width: 992px){
    header .main-menu>ul>li ul.sub-menu>li:hover>.sub-menu{
        display:block;
        animation:fade-down .45s linear
    }
}
header .main-menu>ul>li.menu-item-has-children{
    transition:all .55s ease-in-out
}
header .main-menu>ul>li.menu-item-has-children::after{
    content:"";
    font-family:"bootstrap-icons";
    font-weight:800;
    position:absolute;
    top:24px;
    right:7px;
    font-size:12px;
    color:var(--title-color);
    transition:all .55s ease-in-out
}
@media(min-width: 1200px)and (max-width: 1399px){
    header .main-menu>ul>li.menu-item-has-children::after{
        right:0px;
        top:20px
    }
}
@media(max-width: 1199px){
    header .main-menu>ul>li.menu-item-has-children::after{
        right:0
    }
}
@media(max-width: 991px){
    header .main-menu>ul>li.menu-item-has-children::after{
        display:none;
        visibility:hidden
    }
}
header .main-menu>ul>li.menu-item-has-children:hover::after{
    color:var(--primary-color);
    content:""
}
@media(min-width: 992px){
    header .main-menu>ul>li:hover>ul.sub-menu{
        display:block;
        animation:fade-down .45s linear
    }
}
@keyframes fade-up{
    0%{
        opacity:0;
        transform:scaleY(0);
        visibility:hidden
    }
    100%{
        opacity:1;
        transform:scaleY(1);
        visibility:visible
    }
}
header .main-menu>ul>li:hover>a{
    color:var(--primary-color)
}
header .main-menu>ul>li:hover>a::after{
    transform-origin:left center;
    transform:scale(1, 1)
}
header .main-menu>ul>li:hover::after{
    color:var(--title-color)
}
header .main-menu>ul>li:hover .dropdown-icon2{
    color:var(--primary-color)
}
header .main-menu>ul>li.active>a{
    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
header .main-menu>ul>li.active::after{
    color:var(--primary-color)
}
header .main-menu>ul>li.active .dropdown-icon2{
    color:var(--primary-color)
}
header .main-menu>ul>li.active.position-inherit>a::after{
    color:var(--primary-color)
}
header .main-menu>ul li.menu-item-has-children>i{
    display:block
}
@media only screen and (max-width: 991px){
    header .mobile-logo-area .menu-close-btn{
        height:32px;
        width:32px;
        border-radius:50%;
        border:1px solid var(--title-color);
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        transition:.35s
    }
    header .mobile-logo-area .menu-close-btn i{
        font-size:26px;
        line-height:1;
        margin-top:2px;
        color:var(--title-color);
        transition:.35s
    }
    header .mobile-logo-area .menu-close-btn:hover{
        background-color:var(--title-color)
    }
    header .mobile-logo-area .menu-close-btn:hover i{
        color:var(--white-color)
    }
    header .dropdown-icon{
        color:var(--white-color)
    }
    header .main-menu{
        position:fixed;
        top:0;
        left:0;
        width:280px;
        padding:30px 20px !important;
        z-index:99999;
        height:100%;
        overflow:auto;
        background:#fff;
        border-right:1px solid #eee;
        transform:translateX(-100%);
        transition:transform .3s ease-in;
        box-shadow:0px 2px 20px rgba(0,0,0,.03)
    }
    header .main-menu.show-menu{
        transform:translateX(0)
    }
    header .main-menu .mobile-menu-logo{
        text-align:left;
        padding-top:20px;
        display:block;
        padding-bottom:8px
    }
    header .main-menu .menu-list{
        padding-top:50px;
        padding-bottom:30px
    }
    header .main-menu>ul{
        float:none;
        text-align:left;
        padding:5px 0px 20px 0
    }
    header .main-menu>ul>li{
        display:block;
        position:relative;
        padding:0
    }
    header .main-menu>ul>li i{
        display:block
    }
    header .main-menu>ul>li a{
        padding:10px 0;
        display:block
    }
    header .main-menu>ul>li ul.sub-menu{
        position:static;
        min-width:200px;
        background:0 0;
        border:none;
        opacity:1;
        visibility:visible;
        box-shadow:none;
        transform:none;
        transition:none;
        display:none;
        margin-top:0 !important;
        transform:translateY(0px);
        padding-left:10px
    }
    header .main-menu>ul>li ul.sub-menu>li{
        border-bottom:1px solid rgba(0,0,0,0)
    }
    header .main-menu>ul>li ul.sub-menu>li a{
        color:var(--title-color);
        padding:12px 0px
    }
    header .main-menu>ul>li ul.sub-menu>li a:hover{
        color:var(--primary-color);
        margin-left:10px
    }
    header .main-menu>ul>li ul.sub-menu>li a.active{
        color:var(--primary-color)
    }
    header .main-menu>ul>li ul.sub-menu>li i{
        color:var(--primary-color);
        right:-13px
    }
    header .main-menu>ul>li .bi{
        top:8px;
        font-size:20px;
        color:var(--title-color);
        line-height:1
    }
}
@keyframes fade-down{
    0%{
        opacity:0;
        transform:scaleY(0);
        visibility:hidden
    }
    100%{
        opacity:1;
        transform:scaleY(1);
        visibility:visible
    }
}
@keyframes textRotation{
    to{
        transform:rotate(360deg)
    }
}
@keyframes waves{
    0%{
        transform:scale(0.2, 0.2);
        opacity:0
    }
    50%{
        opacity:.9
    }
    100%{
        transform:scale(0.9, 0.9);
        opacity:0
    }
}
.social-list-one{
    padding:0;
    margin:0;
    list-style:none;
    position:absolute;
    top:50%;
    right:-45px;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:46px;
    z-index:1
}
@media(max-width: 1799px){
    .social-list-one{
        right:-35px
    }
}
@media(min-width: 1400px)and (max-width: 1599px){
    .social-list-one{
        right:-30px
    }
}
@media(max-width: 1399px){
    .social-list-one{
        right:-30px
    }
}
.social-list-one.home-2{
    background-color:#fff
}
@media(max-width: 1199px){
    .social-list-one{
        right:-25px
    }
}
@media(max-width: 991px){
    .social-list-one{
        display:none
    }
}
.social-list-one li{
    position:relative;
    line-height:1
}
.social-list-one li a svg path{
    transition:all .3s
}
.social-list-one li a:hover svg path{
    transition:all .3s;
    fill:var(--primary-color)
}
.social-list-one li::before{
    content:"";
    position:absolute;
    top:-23px;
    left:50%;
    transform:translateX(-50%);
    background:rgba(17,17,17,.2);
    width:3px;
    height:3px;
    border-radius:50%
}
@media(min-width: 1200px)and (max-width: 1399px){
    .social-list-one li::before{
        top:-15px
    }
}
.social-list-one li:first-child::before{
    display:none
}
.banner-section{
    position:relative;
    padding:100px 0;
    background-image:url("../image/banner-img/home-1-background.png");
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover
}
@media(max-width: 1699px){
    .banner-section{
        padding:100px 60px 100px 30px;
        background-position:left
    }
}
@media(max-width: 991px){
    .banner-section{
        padding:70px 40px
    }
}
@media(max-width: 576px){
    .banner-section{
        padding:50px 20px
    }
}
.banner-section .banner-content .sub-title{
    display:inline-block;
    font-family:var(--font-jost);
    font-weight:400;
    font-size:16px;
    line-height:20px;
    letter-spacing:.05em;
    color:#37003c;
    background: linear-gradient(90deg, rgb(0, 255, 135), rgb(5, 240, 255));
    padding:9px 20px;
    border:1px solid rgba(16,197,129,.1);
    border-radius:30px;
    margin-bottom:18px
}
@media(max-width: 576px){
    .banner-section .banner-content .sub-title{
        font-size:14px;
        line-height:18px;
        padding:7px 15px
    }
}
.banner-section .banner-content h1{
    color:var(--title-color);
    font-family:var(--font-Instrument);
    font-weight:600;
    font-size:50px;
    line-height:50px;
    max-width:644px;
    width:100%;
    margin:0;
    padding-bottom:35px;
    letter-spacing:.01em
}
@media(min-width: 1400px)and (max-width: 1599px){
    .banner-section .banner-content h1{
        font-size:75px;
        line-height:80px;
        padding-bottom:30px
    }
}
@media(max-width: 1399px){
    .banner-section .banner-content h1{
        font-size:55px;
        line-height:1.1;
        padding-bottom:16px;
        max-width:544px;
        width:100%
    }
}
@media(max-width: 991px){
    .banner-section .banner-content h1{
        font-size:60px;
        max-width:100%
    }
}
@media(max-width: 576px){
    .banner-section .banner-content h1{
        font-size:48px
    }
}
@media(max-width: 375px){
    .banner-section .banner-content h1{
        font-size:36px;
        line-height:1.3
    }
}
.banner-section .banner-content h1 > span {
    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; /* For Firefox */
    color: transparent;
}

.banner-section .banner-content h1 .hero-title-img{
    display:flex;
    align-items:center;
    gap:22px;
    color:var(--primary-color)
}
.banner-section .banner-content h1 .hero-title-img img{
    border-radius:30px
}
.banner-section .banner-content h1 .span-two{
    font-weight:300;
    color:var(--title-color);
    letter-spacing:.32px
}
@media(max-width: 375px){
    .banner-section .banner-content h1 .span-two{
        font-size:26px
    }
}
.banner-section .banner-content p{
    color:var(--paragraph-color-1);
    font-family:var(--font-jost);
    font-weight:400;
    font-size:22px;
    line-height:1.6;

    max-width:688px;
    width:100%;
    margin-bottom:30px
}
@media(min-width: 1400px)and (max-width: 1599px){
    .banner-section .banner-content p{
        max-width:590px;
        width:100%
    }
}
@media(max-width: 1399px){
    .banner-section .banner-content p{
        max-width:450px;
        width:100%;
        font-size:18px
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .banner-section .banner-content p{
        max-width:550px;
        width:100%
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .banner-section .banner-content p{
        font-size:18px;
        margin-bottom:25px;
        max-width:430px;
        width:100%
    }
}
@media(max-width: 991px){
    .banner-section .banner-content p{
        font-size:20px;
        max-width:100%
    }
}
@media(max-width: 576px){
    .banner-section .banner-content p{
        font-size:18px
    }
}
@media(max-width: 375px){
    .banner-section .banner-content p{
        font-size:16px
    }
}
.banner-section .content-bottom-area{
    display:flex;
    align-items:center;
    gap:36px;
    flex-wrap:wrap
}
@media(max-width: 767px){
    .banner-section .content-bottom-area{
        gap:25px
    }
}
.banner-section .content-bottom-area .video-area{
    display:flex;
    align-items:center;
    gap:12px
}
.banner-section .content-bottom-area .video-area .icon{
    height:58px;
    width:58px;
    background-color:var(--primary-color);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:999
}
@media(max-width: 375px){
    .banner-section .content-bottom-area .video-area .icon{
        height:48px;
        width:48px
    }
}
.banner-section .content-bottom-area .video-area .icon .wrapper{
    display:inline-block;
    position:absolute;
    top:62px;
    left:61px
}
@media(max-width: 375px){
    .banner-section .content-bottom-area .video-area .icon .wrapper{
        top:56px;
        left:56px
    }
}
.banner-section .content-bottom-area .video-area .icon .waves{
    position:absolute;
    width:95px;
    height:95px;
    background:rgba(16,197,129,.7);
    opacity:0;
    border-radius:100%;
    right:-15px;
    bottom:-15px;
    z-index:-1;
    animation:waves 3s ease-in-out infinite
}
.banner-section .content-bottom-area .video-area .icon .waves.wave-1{
    animation-delay:0s
}
.banner-section .content-bottom-area .video-area .icon .waves.wave-2{
    animation-delay:1s
}
.banner-section .content-bottom-area .video-area .icon .waves.wave-3{
    animation-delay:2s
}
.banner-section .content-bottom-area .video-area h6{
    font-family:var(--font-Instrument);
    font-size:16px;
    font-weight:400;
    line-height:19.52px;
    color:var(--paragraph-color-1);
    margin:0
}
@media(max-width: 576px){
    .banner-section .content-bottom-area .video-area h6{
        display:none
    }
}
@media(max-width: 991px){
    .banner-section .banner-img-wrap{
        margin-bottom:50px
    }
}
@media(max-width: 576px){
    .banner-section .banner-img-wrap{
        margin-bottom:30px
    }
}
.banner-section .banner-img-wrap img{
    border-radius:15px;
    -o-object-fit:cover;
    object-fit:cover
}
@media(min-width: 1200px)and (max-width: 1399px){
    .banner-section .banner-img-wrap img{
        min-height:500px
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .banner-section .banner-img-wrap img{
        min-height:420px
    }
}
@media(max-width: 991px){
    .banner-section .banner-img-wrap img{
        height:500px;
        width:100%
    }
}
@media(max-width: 576px){
    .banner-section .banner-img-wrap img{
        height:auto
    }
}
.banner-section .circle-area{
    position:absolute;
    bottom:-11%;
    left:52%;
    transform:translate(-50%, -50%);
    width:146px;
    height:146px;
    border-radius:50%;
    background-color:var(--title-color);
    z-index:999
}
@media(max-width: 1499px){
    .banner-section .circle-area{
        bottom:-11%;
        left:50%
    }
}
@media(min-width: 1400px)and (max-width: 1599px){
    .banner-section .circle-area{
        bottom:-11%;
        left:50%
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .banner-section .circle-area{
        bottom:-14%;
        left:58%
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .banner-section .circle-area{
        display:none
    }
}
@media(max-width: 767px){
    .banner-section .circle-area{
        display:none
    }
}
.banner-section .circle-area>svg{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%)
}
.banner-section .circle-area>svg text{
    fill:var(--white-color);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:20.85px;
    animation:rotateClockwise 10s linear infinite
}
.banner-section .circle-area .arrow-down-icon .scroll-down-btn{
    width:62px;
    height:62px;
    border-radius:50%;
    background-color:#f5f0ea;
    border:1px solid rgba(0,0,0,.3);
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index:1
}
.banner-section .circle-area .arrow-down-icon svg{
    margin-left:2px;
    transition:.5s
}
@keyframes rotateClockwise{
    from{
        transform:rotate(0deg);
        transform-origin:62.5px 62.5px
    }
    to{
        transform:rotate(360deg);
        transform-origin:62.5px 62.5px
    }
}
@media(max-width: 576px){
    .about-section{
        padding-left:15px;
        padding-right:15px
    }
}
.about-section {
    padding: 1.6rem 0.8rem;
    /*background: linear-gradient(to right, rgb(0, 255, 135), rgb(149, 59, 255));*/
    color:var(--title-color);
}
.about-section.style-2 .featured-card li{
    display:flex;
    gap:24px;
    margin-bottom:45px
}
.about-section.style-2 .featured-card li:last-child{
    margin-bottom:0
}
@media(min-width: 992px)and (max-width: 1199px){
    .about-section.style-2 .featured-card li{
        margin-bottom:25px
    }
}
@media(max-width: 767px){
    .about-section.style-2 .featured-card li{
        margin-bottom:45px
    }
}
.about-section.style-2 .featured-card li .icon{
    height:40px;
    width:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    background-color:var(--primary-color-opc-2);
    border-radius:50%
}
.about-section.style-2 .featured-card li .content{
    max-width:355px;
    width:100%
}
.about-section.style-2 .featured-card li .content h5{
    font-family:var(--font-Instrument);
    font-weight:500;
    font-size:20px;
    line-height:27px;
    color:var(--title-color);
    margin-bottom:5px
}
@media(max-width: 1399px){
    .about-section.style-2 .featured-card li .content h5{
        margin-bottom:105x
    }
}
.about-section.style-2 .featured-card li .content p{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:15px;
    line-height:24px;
    color:var(--paragraph-color-1)
}
@media(max-width: 991px){
    .about-section .about-content{
        margin-top:50px
    }
}
.about-section .about-content .section-title{
    margin-bottom:35px
}
.about-section .about-content .featured-card{
    margin-bottom:40px
}
.about-section .about-content .featured-card li{
    display:flex;
    gap:24px;
    margin-bottom:20px
}
@media(min-width: 992px)and (max-width: 1199px){
    .about-section .about-content .featured-card li{
        margin-bottom:25px
    }
}
@media(max-width: 767px){
    .about-section .about-content .featured-card li{
        margin-bottom:45px
    }
}
.about-section .about-content .featured-card li .icon{
    height:40px;
    width:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:6px;
    background-color:var(--primary-color-opc-2);
    border-radius:50%
}
.about-section .about-content .featured-card li .content{
    max-width:355px;
    width:100%
}
.about-section .about-content .featured-card li .content h5{
    font-family:var(--font-Instrument);
    font-weight:500;
    font-size:20px;
    line-height:27px;
    color:var(--title-color);
    margin-bottom:5px
}
.about-section .about-content .featured-card li .content p{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:16px;
    line-height:24px;
    color:var(--paragraph-color-1)
}
.about-section img{
    border-radius:5px
}
.about-img-wrap{
    padding:0;
    margin:0;
    height:100%
}
.about-img-wrap .work-experience-back{
    max-width:100%;
    width:-moz-max-content;
    width:max-content;
    padding:4px;
    margin:0 auto;
    margin-bottom:30px;
    border-radius:10px
}
@media(max-width: 576px){
    .about-img-wrap .work-experience-back{
        margin-bottom:0
    }
}
.about-img-wrap .work-experience-back.two{
    margin-top:30px;
    margin-bottom:0;
    padding:4px;
    border-radius:10px
}
@media(max-width: 576px){
    .about-img-wrap .work-experience-back.two{
        margin-top:0
    }
}
.about-img-wrap .work-experience-back .work-experience-area{
    padding:23px 23px 47px 23px;
    display:flex;
    border-radius:10px;
    align-items:baseline;
    gap:17px;
    max-width:100%;
    width:-moz-max-content;
    width:max-content;
    position:relative;
    z-index:10
}
@media(max-width: 1199px){
    .about-img-wrap .work-experience-back .work-experience-area{
        gap:12px
    }
}
@media(max-width: 425px){
    .about-img-wrap .work-experience-back .work-experience-area{
        padding-left:15px;
        padding-right:15px
    }
}
.about-img-wrap .work-experience-back .work-experience-area .bg-shape{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:-1
}
.about-img-wrap .work-experience-back .work-experience-area.two{
    padding:42px 31px 31px 31px;
    border-radius:10px
}
@media(max-width: 425px){
    .about-img-wrap .work-experience-back .work-experience-area.two{
        padding-left:15px;
        padding-right:15px
    }
}
@media(max-width: 576px){
    .about-img-wrap .work-experience-back .work-experience-area .icon{
        display:none
    }
}
.about-img-wrap .work-experience-back .work-experience-area .content .number{
    display:flex;
    align-items:center
}
.about-img-wrap .work-experience-back .work-experience-area .content .number h5,.about-img-wrap .work-experience-back .work-experience-area .content .number span{
    font-family:var(--font-Instrument);
    font-weight:600;
    font-size:40px;
    line-height:1.4;
    color:var(--white-color);
    margin:0;
    word-break:break-all
}
@media(max-width: 1399px){
    .about-img-wrap .work-experience-back .work-experience-area .content .number h5,.about-img-wrap .work-experience-back .work-experience-area .content .number span{
        font-size:40px
    }
}
@media(max-width: 1199px){
    .about-img-wrap .work-experience-back .work-experience-area .content .number h5,.about-img-wrap .work-experience-back .work-experience-area .content .number span{
        font-size:35px
    }
}
@media(max-width: 991px){
    .about-img-wrap .work-experience-back .work-experience-area .content .number h5,.about-img-wrap .work-experience-back .work-experience-area .content .number span{
        font-size:50px
    }
}
@media(max-width: 767px){
    .about-img-wrap .work-experience-back .work-experience-area .content .number h5,.about-img-wrap .work-experience-back .work-experience-area .content .number span{
        width:-moz-max-content;
        width:max-content
    }
}
@media(max-width: 576px){
    .about-img-wrap .work-experience-back .work-experience-area .content .number h5,.about-img-wrap .work-experience-back .work-experience-area .content .number span{
        font-size:40px
    }
}
@media(max-width: 425px){
    .about-img-wrap .work-experience-back .work-experience-area .content .number h5,.about-img-wrap .work-experience-back .work-experience-area .content .number span{
        font-size:30px
    }
}
.about-img-wrap .work-experience-back .work-experience-area .content h5{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:16px;
    line-height:1.4;
    color:var(--white-color);
    margin:0
}
@media(max-width: 1199px){
    .about-img-wrap .work-experience-back .work-experience-area .content h5{
        font-size:14px
    }
}
@media(max-width: 991px){
    .about-img-wrap .work-experience-back .work-experience-area .content h5{
        font-size:18px
    }
}
@media(max-width: 767px){
    .about-img-wrap .work-experience-back .work-experience-area .content h5{
        max-width:200px;
        width:100%
    }
}
@media(max-width: 576px){
    .about-img-wrap .work-experience-back .work-experience-area .content h5{
        font-size:16px
    }
}
@media(max-width: 425px){
    .about-img-wrap .work-experience-back .work-experience-area .content h5{
        font-size:12px
    }
}
.service-section{
    background-image:url("../image/banner-img/home1-service-bg.png");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    overflow:hidden
}
@media(max-width: 576px){
    .service-section{
        padding-left:15px;
        padding-right:15px
    }
}
.service-section .section-title h2{
    max-width:563px;
    width:100%;
    margin:0 auto
}
.service-section .section-title p{
    max-width:455px;
    width:100%;
    margin-bottom:20px;
    margin-top:0
}
@media(max-width: 991px){
    .service-section .section-title p{
        margin-bottom:30px
    }
}
.service-section .section-title .view-btn{
    display:flex;
    align-items:center
}
.service-section .section-title .view-btn .icon svg{
    transition:all .3s ease-in-out
}
.service-section .section-title .view-btn .icon svg path{
    fill:var(--primary-color)
}
.service-section .section-title .view-btn .primary-button{
    color:var(--primary-color);
    font-family:var(--font-Instrument);
    font-size:16px;
    font-weight:400;
    line-height:1.2;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    background:linear-gradient(to bottom, #10c581 0%, #10c581 98%);
    background-size:100% 1px;
    background-repeat:no-repeat;
    background-position:left 100%;
    transition:all .3s ease-in-out
}
.service-section .section-title .view-btn:hover .primary-button{
    color:var(--white-color);
    background-size:0 1px;
    background-position:0% 100%;
    transition:all .3s ease-in-out
}
.service-section .section-title .view-btn:hover svg{
    transform:rotate(45deg);
    transition:all .3s ease-in-out
}
.service-section .section-title .view-btn:hover svg path{
    fill:var(--white-color);
    transition:all .3s ease-in-out
}
.service-section.style-2{
    background-image:none;
    background-color:var(--white-color)
}
.service-section.style-2 .section-title .view-btn{
    display:flex;
    align-items:center
}
.service-section.style-2 .section-title .view-btn .icon svg{
    transition:all .3s ease-in-out
}
.service-section.style-2 .section-title .view-btn .icon svg path{
    fill:var(--primary-color)
}
.service-section.style-2 .section-title .view-btn .primary-button{
    color:var(--primary-color);
    font-family:var(--font-Instrument);
    font-size:16px;
    font-weight:400;
    line-height:1.2;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    background:linear-gradient(to bottom, #10c581 0%, #10c581 98%);
    background-size:100% 1px;
    background-repeat:no-repeat;
    background-position:left 100%;
    transition:all .3s ease-in-out
}
.service-section.style-2 .section-title .view-btn:hover .primary-button{
    color:var(--title-color);
    background-size:0 1px;
    background-position:0% 100%;
    transition:all .3s ease-in-out
}
.service-section.style-2 .section-title .view-btn:hover svg{
    transform:rotate(45deg);
    transition:all .3s ease-in-out
}
.service-section.style-2 .section-title .view-btn:hover svg path{
    fill:var(--title-color);
    transition:all .3s ease-in-out
}
.service-section.style-2 .services-wrap .single-services{
    transition:.5s;
    border-bottom:1px solid rgba(17,17,17,.1);
    position:relative;
    display:grid;
    grid-template-columns:10% 47% 33% 10%;
    z-index:1
}
@media(min-width: 768px)and (max-width: 991px){
    .service-section.style-2 .services-wrap .single-services{
        grid-template-columns:10% 40% 38% 0%
    }
}
@media(max-width: 767px){
    .service-section.style-2 .services-wrap .single-services{
        display:block;
        border-bottom:none;
        border:1px solid rgba(17,17,17,.1);
        padding:20px 40px
    }
}
@media(max-width: 425px){
    .service-section.style-2 .services-wrap .single-services{
        padding:15px 25px
    }
}
.service-section.style-2 .services-wrap .single-services:last-child{
    border-bottom:none
}
@media(max-width: 767px){
    .service-section.style-2 .services-wrap .single-services:last-child{
        border-bottom:1px solid rgba(17,17,17,.1)
    }
}
.service-section.style-2 .services-wrap .single-services .step-no{
    margin-left:15px;
    border-right:1px solid rgba(17,17,17,.1);
    padding:45px 45px
}
@media(min-width: 992px)and (max-width: 1199px){
    .service-section.style-2 .services-wrap .single-services .step-no{
        padding:45px 30px
    }
}
@media(max-width: 576px){
    .service-section.style-2 .services-wrap .single-services .step-no{
        padding:0
    }
}
@media(max-width: 1499px){
    .service-section.style-2 .services-wrap .single-services .step-no{
        margin-left:0
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .service-section.style-2 .services-wrap .single-services .step-no{
        margin-left:0;
        padding:0px 12px 0px
    }
}
@media(max-width: 767px){
    .service-section.style-2 .services-wrap .single-services .step-no{
        padding:0;
        border-right:none
    }
}
@media(max-width: 576px){
    .service-section.style-2 .services-wrap .single-services .step-no{
        margin-left:0;
        border-right:0
    }
}
.service-section.style-2 .services-wrap .single-services .step-no h2{
    transition:all .3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; /* For Firefox */
    color: transparent;
    font-family:var(--font-jost);
    font-size:36px;
    line-height:60px;
    font-weight:500;
    margin:0;
    transition:all .3s ease-in-out
}
@media(min-width: 768px)and (max-width: 991px){
    .service-section.style-2 .services-wrap .single-services .step-no h2{
        font-size:30px
    }
}
.service-section.style-2 .services-wrap .single-services h5{
    padding:47px 80px 45px;
    margin-bottom:0
}
@media(min-width: 768px)and (max-width: 991px){
    .service-section.style-2 .services-wrap .single-services h5{
        padding:40px 25px 30px
    }
}
@media(max-width: 767px){
    .service-section.style-2 .services-wrap .single-services h5{
        padding:0
    }
}
.service-section.style-2 .services-wrap .single-services h5 a{
    color:var(--title-color);
    font-family:var(--font-Instrument);
    font-size:32px;
    line-height:1.5;
    font-weight:500;
    margin-bottom:0;
    transition:all .3s ease-in-out
}
@media(max-width: 991px){
    .service-section.style-2 .services-wrap .single-services h5 a{
        font-size:21px
    }
}
@media(max-width: 767px){
    .service-section.style-2 .services-wrap .single-services h5 a{
        font-size:27px
    }
}
.service-section.style-2 .services-wrap .single-services .services-img{

    position:absolute;
    top:-95px;
    left:0;
    opacity:0;
    z-index:-1;
    transition:opacity .3s,transform .7s cubic-bezier(0.23, 1, 0.32, 1);

    pointer-events:none
}
@media(max-width: 767px){
    .service-section.style-2 .services-wrap .single-services .services-img{
        display:none;
        visibility:hidden
    }
}
.service-section.style-2 .services-wrap .single-services .content{
    padding:30px
}
@media(max-width: 767px){
    .service-section.style-2 .services-wrap .single-services .content{
        margin-bottom:10px;
        line-height:26px;
        padding:0
    }
}
.service-section.style-2 .services-wrap .single-services .content p{
    color:rgba(104,104,104,.7);
    font-family:var(--font-Instrument);
    font-size:16px;
    font-weight:400;
    line-height:27.2px;
    margin-bottom:0
}
.service-section.style-2 .services-wrap .single-services .icon{
    margin-right:30px;
    padding:45px 45px;
    border-left:1px solid rgba(17,17,17,.1);
    transition:all .3s ease-in-out
}
@media(min-width: 768px)and (max-width: 991px){
    .service-section.style-2 .services-wrap .single-services .icon{
        padding:44px 15px
    }
}
@media(max-width: 767px){
    .service-section.style-2 .services-wrap .single-services .icon{
        padding:20px 10px;
        border-left:none
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .service-section.style-2 .services-wrap .single-services .icon{
        margin-right:0
    }
}
.service-section.style-2 .services-wrap .single-services .icon a{
    height:60px;
    width:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(17,17,17,.25);
    border-radius:50%;
    transition:all .3s ease-in-out
}
.service-section.style-2 .services-wrap .single-services .icon a svg path{
    fill:rgba(17,17,17,.7)
}
@media(max-width: 1399px){
    .service-section.style-2 .services-wrap .single-services .icon a{
        height:50px;
        width:50px
    }
}
@media(max-width: 576px){
    .service-section.style-2 .services-wrap .single-services .icon{
        border-left:0
    }
}
.service-section.style-2 .services-wrap .single-services:hover .step-no h2{
    transition: all 0.3s ease-in-out;
    background: linear-gradient(90deg, #05f0ff 0%, var(--primary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; /* For Firefox */
    color: transparent;
}
.service-section.style-2 .services-wrap .single-services:hover h5 a{
    transition:all .3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; /* For Firefox */
    color: transparent;
}
.service-section.style-2 .services-wrap .single-services:hover .services-img{
    opacity:1
}
.service-section.style-2 .services-wrap .single-services:hover .icon a{
    background-color:var(--primary-color);
    border:1px solid var(--primary-color);
    transition:all .3s ease-in-out;
    transform:rotate(45deg)
}
.service-section.style-2 .services-wrap .single-services:hover .icon a svg path{
    fill:var(--white-color)
}
.service-section.style-2 .services-wrap .single-services:hover .explore-btn{
    color:var(--primary-color);
    background-size:100% 1px;
    background-position:0% 100%
}
.service-section.style-2 .services-wrap .single-services:hover .explore-btn svg{
    fill:var(--primary-color);
    transform:rotate(45deg)
}
.service-section .right-content p{
    max-width:460px;
    width:100%;
    color:rgba(255,255,255,.7);
    margin-bottom:15px
}
.service-section .right-content .view-btn{
    display:flex;
    align-items:center
}
.service-section .right-content .view-btn .icon svg{
    transition:all .3s ease-in-out
}
.service-section .right-content .view-btn .primary-button{
    color:var(--primary-color);
    font-family:var(--font-Instrument);
    font-size:16px;
    font-weight:400;
    line-height:1.2;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    background:linear-gradient(to bottom, rgba(16, 197, 129, 0), rgba(16, 197, 129, 0.9));
    background-size:100% 1px;
    background-repeat:no-repeat;
    background-position:left 100%;
    transition:all .3s ease-in-out
}
.service-section .right-content .view-btn .primary-button:hover{
    color:var(--white-color);
    background-size:0 1px;
    background-position:0% 100%;
    transition:all .3s ease-in-out
}
.service-section .right-content .view-btn .primary-button:hover svg{
    transform:rotate(45deg);
    transition:all .3s ease-in-out
}
.service-section .right-content .view-btn .primary-button:hover svg path{
    fill:var(--white-color);
    transition:all .3s ease-in-out
}
.service-section .right-content .view-btn:hover{
    color:var(--white-color);
    background-size:0 1px;
    background-position:0% 100%;
    transition:all .3s ease-in-out
}
.service-section .right-content .view-btn:hover svg{
    transform:rotate(45deg);
    transition:all .3s ease-in-out
}
.service-section .right-content .view-btn:hover svg path{
    fill:var(--white-color);
    transition:all .3s ease-in-out
}
.services-wrap .single-services{
    transition:.5s;
    border-bottom:1px solid var(--border-color-1);
    position:relative;
    display:grid;
    grid-template-columns:10% 47% 33% 10%;
    z-index:1;
    transition:all .3s ease-in-out
}
@media(min-width: 992px)and (max-width: 1199px){
    .services-wrap .single-services{
        grid-template-columns:10% 44% 34% 12%
    }
}
@media(max-width: 767px){
    .services-wrap .single-services{
        display:block;
        border-bottom:none;
        border:1px solid var(--border-color-1);
        padding:30px 40px
    }
}
@media(max-width: 576px){
    .services-wrap .single-services{
        padding:20px
    }
}
.services-wrap .single-services:last-child{
    border-bottom:none
}
@media(max-width: 767px){
    .services-wrap .single-services:last-child{
        border-bottom:1px solid var(--border-color-1)
    }
}
.services-wrap .single-services .step-no{
    margin-left:15px;
    border-right:1px solid var(--border-color-1);
    padding:45px 45px;
    transition:all .3s ease-in-out;
    display:flex;
    align-items:center
}
@media(min-width: 992px)and (max-width: 1199px){
    .services-wrap .single-services .step-no{
        padding:24px 30px
    }
}
@media(max-width: 576px){
    .services-wrap .single-services .step-no{
        padding:0
    }
}
@media(max-width: 1499px){
    .services-wrap .single-services .step-no{
        margin-left:0
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .services-wrap .single-services .step-no{
        margin-left:0;
        padding:25px 12px 0px
    }
}
@media(max-width: 767px){
    .services-wrap .single-services .step-no{
        padding:0;
        border-right:none
    }
}
@media(max-width: 576px){
    .services-wrap .single-services .step-no{
        margin-left:0;
        border-right:0
    }
}
.services-wrap .single-services .step-no h2{
    -webkit-text-fill-color:rgba(0,0,0,0);
    -webkit-text-stroke:1px var(--primary-color);
    font-family:var(--font-jost);
    font-size:36px;
    line-height:60px;
    font-weight:500;
    margin:0;
    transition:all .3s ease-in-out
}
.services-wrap .single-services h5{
    padding:47px 80px 45px;
    margin-bottom:0;
    transition:all .3s ease-in-out
}
@media(min-width: 992px)and (max-width: 1199px){
    .services-wrap .single-services h5{
        padding:37px 0 43px 45px
    }
}
@media(max-width: 991px){
    .services-wrap .single-services h5{
        padding:50px 30px 25px
    }
}
@media(max-width: 767px){
    .services-wrap .single-services h5{
        padding:0
    }
}
.services-wrap .single-services h5 a{
    color:var(--white-color);
    font-family:var(--font-Instrument);
    font-size:32px;
    line-height:60px;
    font-weight:400;
    margin-bottom:0;
    transition:all .3s ease-in-out
}
@media(min-width: 768px)and (max-width: 991px){
    .services-wrap .single-services h5 a{
        font-size:25px
    }
}
@media(max-width: 991px){
    .services-wrap .single-services h5 a{
        font-size:25px
    }
}
.services-wrap .single-services .services-img{
    width:187px;
    height:187px;
    position:absolute;
    top:-95px;
    left:0;
    opacity:0;
    z-index:-1;
    transition:opacity .3s,transform .7s cubic-bezier(0.23, 1, 0.32, 1);

    overflow:hidden;
    pointer-events:none
}
@media(max-width: 767px){
    .services-wrap .single-services .services-img{
        display:none;
        visibility:hidden
    }
}
.services-wrap .single-services .content{
    padding:45px 0px;
    max-width:300px;
    width:100%
}
@media(min-width: 992px)and (max-width: 1199px){
    .services-wrap .single-services .content{
        max-width:285px;
        width:100%
    }
}
@media(max-width: 767px){
    .services-wrap .single-services .content{
        margin-bottom:10px;
        line-height:26px;
        padding:0
    }
}
.services-wrap .single-services .content p{
    color:rgba(255,255,255,.7);
    font-family:var(--font-inter);
    font-size:16px;
    font-weight:400;
    line-height:27.2px;
    margin-bottom:0
}
.services-wrap .single-services .icon{
    margin-right:30px;
    padding:45px 45px;
    border-left:1px solid var(--border-color-1);
    transition:all .3s ease-in-out
}
@media(max-width: 767px){
    .services-wrap .single-services .icon{
        padding:20px 0;
        border-left:none
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .services-wrap .single-services .icon{
        margin-right:0
    }
}
.services-wrap .single-services .icon a{
    height:60px;
    width:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--white-color);
    border-radius:50%;
    transition:all .3s ease-in-out
}
.services-wrap .single-services .icon a svg path{
    fill:var(--white-color)
}
@media(max-width: 1399px){
    .services-wrap .single-services .icon a{
        height:50px;
        width:50px
    }
}
@media(max-width: 576px){
    .services-wrap .single-services .icon{
        border-left:0
    }
}
.services-wrap .single-services:hover .step-no{
    transition:all .3s ease-in-out
}
.services-wrap .single-services:hover .step-no h2{
    -webkit-text-fill-color:var(--primary-color);
    transition:all .3s ease-in-out
}
.services-wrap .single-services:hover .services-img{
    opacity:1
}
.services-wrap .single-services:hover .icon a{
    background-color:var(--primary-color);
    border:1px solid var(--primary-color);
    transition:all .3s ease-in-out;
    transform:rotate(45deg)
}
.services-wrap .single-services:hover .explore-btn{
    color:var(--primary-color);
    background-size:100% 1px;
    background-position:0% 100%;
    transition:all .3s ease-in-out
}
.services-wrap .single-services:hover .explore-btn svg{
    fill:var(--primary-color);
    transform:rotate(45deg);
    transition:all .3s ease-in-out
}
@keyframes qodef-animate-image-out{
    0%{
        transform:scale(1) translateZ(0);
        -webkit-clip-path:inset(0 0 0 0);
        clip-path:inset(0 0 0 0)
    }
    100%{
        transform:scale(1);
        -webkit-clip-path:inset(0 0 0 0);
        clip-path:inset(0 0 0 0)
    }
}
@keyframes qodef-animate-image-in{
    0%{
        transform:scale(1.05) translateZ(0);
        -webkit-clip-path:inset(0 100% 0 0);
        clip-path:inset(0 100% 0 0)
    }
    100%{
        transform:scale(1);
        -webkit-clip-path:inset(0 0 0 0);
        clip-path:inset(0 0 0 0)
    }
}
.latest-project-section{
    position:relative
}
.latest-project-section.style-2{
    background-color:var(--white-color)
}
@media(max-width: 576px){
    .latest-project-section{
        padding-left:15px;
        padding-right:15px
    }
}
.latest-project-section .section-title h2{
    max-width:515px;
    width:100%
}
@media(min-width: 992px)and (max-width: 1199px){
    .latest-project-section .section-title h2{
        margin-bottom:0
    }
}
.latest-project-section .section-title p{
    max-width:540px;
    width:100%;
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:24px;
    color:#686868;
    margin:0 auto
}
@media(max-width: 767px){
    .latest-project-section .latest-project-card:nth-child(even) .row{
        flex-direction:column-reverse
    }
    .latest-project-section .latest-project-card:not(:first-child){
        margin-top:50px
    }
}
.latest-project-section .project-card-image{
    overflow:hidden;
    position:relative;
    border-radius:10px;
    height:100%
}
.latest-project-section .project-card-image img{
    height:100%;
    -o-object-fit:cover;
    object-fit:cover;
    transition:all .3s ease-in-out
}
@media(max-width: 576px){
    .latest-project-section .project-card-image img{
        min-height:250px
    }
}
.latest-project-section .project-card-image::after{
    position:absolute;
    width:500%;
    height:0%;
    left:50%;
    top:50%;
    background-color:rgba(255,255,255,.3);
    transform:translate(-50%, -50%) rotate(-45deg);
    content:"";
    z-index:1
}
.latest-project-section .project-card-image:hover img{
    transform:scale(1.1)
}
.latest-project-section .project-card-image:hover::after{
    height:250%;
    transition:all 600ms linear;
    background-color:rgba(0,0,0,0)
}
.latest-project-section .project-content{
    background-color:var(--white-color);
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    padding:46px 27px;
    border-radius:10px;
    transition:all .3s ease-in-out
}
@media(max-width: 1399px){
    .latest-project-section .project-content{
        padding:23px
    }
}
.latest-project-section .project-content .section-title{
    max-width:400px;
    width:100%
}
.latest-project-section .project-content .section-title .title-tag a{
    transition:.5s
}
.latest-project-section .project-content .section-title h3{
    margin-bottom:20px;
    transition:all .3s ease-in-out
}
.latest-project-section .project-content .section-title h3 a{
    color:var(--title-color);
    transition:all .3s ease-in-out;
    font-family:var(--font-Instrument);
    font-size:29px;
    font-weight:600;
    line-height:36px;
    letter-spacing:.02em
}
@media(min-width: 375px)and (max-width: 576px){
    .latest-project-section .project-content .section-title h3 a{
        font-size:28px
    }
}
.latest-project-section .project-content .section-title p{
    margin-bottom:37px;
    color:var(--paragraph-color-1);
    transition:all .3s ease-in-out
}
.latest-project-section .project-content .latest-btn{
    border:1px solid var(--primary-color);
    color:var(--primary-color);
    font-family:var(--font-Instrument);
    font-size:16px;
    font-weight:400;
    line-height:19.2px;
    display:inline-block;
    padding:15px 31px;
    border-radius:5px
}
.latest-project-section .project-content:hover{
    background-color:var(--primary-color);
    transition:all .3s ease-in-out
}
.latest-project-section .project-content:hover .title-tag a{
    color:var(--white-color);
    border:1px solid rgba(255,255,255,.5)
}
.latest-project-section .project-content:hover .category a{
    border:1px solid var(--white-color-opp);
    color:var(--white-color);
    transition:all .3s ease-in-out
}
.latest-project-section .project-content:hover h3 a{
    color:var(--white-color);
    transition:all .3s ease-in-out
}
.latest-project-section .project-content:hover p{
    color:var(--paragraph-color-2);
    transition:all .3s ease-in-out
}
.latest-project-section .project-content:hover .latest-btn{
    background-color:var(--title-color);
    color:var(--white-color);
    transition:all .3s ease-in-out
}
.news-and-testimonial{
    background-image:url("../image/banner-img/news-bg.png");
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    position:relative;
    padding:90px 40px
}
@media(min-width: 1400px)and (max-width: 1599px){
    .news-and-testimonial{
        padding:65px 20px
    }
}
@media(max-width: 1399px){
    .news-and-testimonial{
        padding:90px 25px;
        background-position:left
    }
}
@media(max-width: 991px){
    .news-and-testimonial{
        padding:90px 40px
    }
}
@media(max-width: 576px){
    .news-and-testimonial{
        padding:90px 15px
    }
}
.news-and-testimonial .section-title h2{
    margin-bottom:13px
}
.news-and-testimonial .testimonial-content{
    max-width:591px;
    width:100%
}
.news-and-testimonial .testimonial-content P{
    text-transform:none
}
.news-and-testimonial .bottom-content{
    padding:0;
    margin:0;
    list-style:none;
    display:flex;
    gap:50px;
    flex-wrap:wrap;
    margin-top:50px
}
@media(min-width: 375px)and (max-width: 576px){
    .news-and-testimonial .bottom-content{
        gap:30px
    }
}
.news-and-testimonial .bottom-content .rating-area .ratting-wrap{
    display:flex;
    flex-direction:row-reverse;
    gap:8px
}
.news-and-testimonial .bottom-content .rating-area .ratting-wrap .star-ratting{
    background-color:#666;
    position:relative;
    width:123px;
    height:22px;
    -webkit-mask-image:url("../image/svg/star-icon.svg");
    mask-image:url("../image/svg/star-icon.svg");
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-size:contain;
    mask-size:contain
}
.news-and-testimonial .bottom-content .rating-area .ratting-wrap .star-ratting .star-svg{
    position:absolute;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2
}
.news-and-testimonial .bottom-content .rating-area .ratting-wrap .star-ratting .star-fill{
    position:absolute;
    top:0%;
    left:0%;
    height:100%;
    background-color:var(--primary-color);
    z-index:1
}
.news-and-testimonial .bottom-content .rating-area .ratting-wrap .ratting-number span{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:24px;
    line-height:12px;
    color:var(--white-color);
    margin:0
}
.news-and-testimonial .bottom-content .rating-area .content span{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:16px;
    line-height:16px;
    margin:0;
    color:var(--white-color-opp)
}
.testimonial-card{
    background-color:var(--white-color);
    padding:30px 35px;
    border-radius:10px;
    position:relative
}
@media(min-width: 1400px)and (max-width: 1599px){
    .testimonial-card{
        padding:30px 29px
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .testimonial-card{
        padding:30px 20px
    }
}
@media(max-width: 767px){
    .testimonial-card{
        padding:30px 20px
    }
}
.testimonial-card p{
    font-family:var(--font-jost);
    font-weight:300;
    font-size:22px;
    line-height:37.4px;
    letter-spacing:.01em
}
@media(max-width: 1399px){
    .testimonial-card p{
        font-size:20px;
        line-height:30px
    }
}
@media(max-width: 576px){
    .testimonial-card p{
        font-size:16px;
        line-height:24px
    }
}
.testimonial-card .quote-icon2{
    text-align:right;
    margin-top:3px
}
.testimonial-card .author-area{
    display:flex;
    align-items:end;
    gap:10px
}
.testimonial-card .author-area .author-img img{
    min-width:60px;
    max-width:60px;
    height:60px;
    border-radius:50%
}
.testimonial-card .author-area .author-content h5{
    color:var(--title-color);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:1;
    margin-bottom:2px
}
.testimonial-card .author-area .author-content span{
    color:var(--paragraph-color-1);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:1;
    margin:0
}
.testimonial-swiper-wrapper{
    background-color:rgba(255,255,255,.05);
    border:1px solid rgba(16,197,129,.1);
    padding:57px 60px 0;
    border-radius:30px;
    position:relative
}
@media(min-width: 992px)and (max-width: 1199px){
    .testimonial-swiper-wrapper{
        padding:43px 40px 0
    }
}
@media(max-width: 576px){
    .testimonial-swiper-wrapper{
        padding:0
    }
}
.testimonial-swiper-wrapper .testimonial-ellipse{
    position:absolute;
    top:2%;
    left:2%
}
.testimonial-swiper-wrapper .testimonial-slider-card .swiper-slide-active span{
    animation:fadeInDown 1.7s
}
.testimonial-swiper-wrapper .testimonial-slider-card .swiper-slide-active p{
    animation:fadeInDown 1.7s
}
.testimonial-swiper-wrapper .testimonial-slider-card .swiper-slide-active .author-and-logo-area{
    animation:fadeInUp 1.7s
}
.swiper-pagination1{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:unset;
    z-index:9;
    bottom:unset;
    gap:12px;
    margin-top:24px;
    margin-bottom:18px
}
@media(min-width: 992px)and (max-width: 1199px){
    .swiper-pagination1{
        margin-top:30px
    }
}
@media(max-width: 767px){
    .swiper-pagination1{
        gap:8px
    }
}
@media(max-width: 576px){
    .swiper-pagination1{
        gap:6px
    }
}
.swiper-pagination1 .swiper-pagination-bullet{
    height:16px;
    width:16px;
    background-color:rgba(0,0,0,0);
    border:1px solid rgba(255,255,255,.5);
    opacity:1;
    position:relative
}
.swiper-pagination1 .swiper-pagination-bullet::after{
    content:"";
    height:9px;
    width:9px;
    border-radius:50%;
    background-color:rgba(255,255,255,.5);
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%)
}
.swiper-pagination1 .swiper-pagination-bullet.swiper-pagination-bullet-active{
    border-color:var(--primary-color);
    height:16px;
    width:16px
}
.swiper-pagination1 .swiper-pagination-bullet.swiper-pagination-bullet-active::after{
    width:8px;
    height:8px;
    background-color:var(--primary-color)
}
@media(max-width: 576px){
    .team-section{
        padding-left:25px;
        padding-right:25px
    }
}
@media(max-width: 425px){
    .team-section{
        padding-left:15px;
        padding-right:15px
    }
}
.team-section .section-title h2{
    margin-bottom:0
}
.team-section.style-2{
    background-color:var(--white-color)
}
.team-slider-area .team-card{
    background-color:var(--white-color);
    border-radius:10px;
    border:1px solid rgba(16,197,129,.2);
    transition:all .3s ease-in-out;
    padding:12px
}
.team-slider-area .team-card .team-img{
    position:relative;
    overflow:hidden;
    border-radius:5px
}
.team-slider-area .team-card .team-img img{
    transition:all .5s ease-out;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto;
    width:100%
}
.team-slider-area .team-card .team-content{
    padding:20px 0 13px;
    text-align:center;
    position:relative;
    overflow:hidden
}
@media(min-width: 992px)and (max-width: 1199px){
    .team-slider-area .team-card .team-content{
        padding:25px 50px 25px 50px
    }
}
@media(max-width: 767px){
    .team-slider-area .team-card .team-content{
        padding:25px 20px
    }
}
@media(max-width: 576px){
    .team-slider-area .team-card .team-content{
        padding:25px 25px
    }
}
.team-slider-area .team-card .team-content h5{
    font-family:var(--font-Instrument);
    font-size:22px;
    font-weight:500;
    line-height:28px;
    margin-bottom:-5px;
    color:var(--title-color)
}
.team-slider-area .team-card .team-content span{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:14px;
    line-height:18px;
    color:var(--paragraph-color-1);
    margin:0
}
.team-slider-area .team-card .team-content .social-list-team{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    padding-top:11px
}
.team-slider-area .team-card .team-content .social-list-team li a{
    border:1px solid rgba(102,102,102,.5);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .3s ease-in-out;
    width:24px;
    height:24px
}
.team-slider-area .team-card .team-content .social-list-team li a svg path{
    fill:#666
}
.team-slider-area .team-card .team-content .social-list-team li a:hover{
    background-color:var(--primary-color);
    border:1px solid var(--primary-color);
    transition:all .3s ease-in-out
}
.team-slider-area .team-card .team-content .social-list-team li a:hover svg path{
    fill:var(--white-color);
    transition:all .3s ease-in-out
}
.team-slider-area .team-card:hover{
    border:1px solid var(--primary-color);
    transition:all .3s ease-in-out
}
.team-slider-area .team-card:hover .team-img img{
    transform:scale(1.1)
}
.team-slider-area .pagination-area{
    padding-top:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:55px
}
@media(max-width: 991px){
    .team-slider-area .pagination-area{
        gap:35px
    }
}
@media(max-width: 767px){
    .team-slider-area .pagination-area{
        padding-top:40px
    }
}
.team-slider-area .pagination-area .swiper-pagination2{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:unset;
    z-index:9;
    bottom:unset;
    gap:12px
}
@media(max-width: 767px){
    .team-slider-area .pagination-area .swiper-pagination2{
        gap:8px
    }
}
@media(max-width: 576px){
    .team-slider-area .pagination-area .swiper-pagination2{
        gap:6px
    }
}
.team-slider-area .pagination-area .swiper-pagination2 .swiper-pagination-bullet{
    height:16px;
    width:16px;
    background-color:rgba(0,0,0,0);
    border:1px solid rgba(16,197,129,.5);
    opacity:1;
    position:relative
}
.team-slider-area .pagination-area .swiper-pagination2 .swiper-pagination-bullet::after{
    content:"";
    height:8px;
    width:8px;
    border-radius:50%;
    background-color:rgba(16,197,129,.5);
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%)
}
.team-slider-area .pagination-area .swiper-pagination2 .swiper-pagination-bullet.swiper-pagination-bullet-active{
    border-color:var(--primary-color);
    height:16px;
    width:16px
}
.team-slider-area .pagination-area .swiper-pagination2 .swiper-pagination-bullet.swiper-pagination-bullet-active::after{
    width:8px;
    height:8px;
    background-color:var(--primary-color)
}
.team-slider-area .pagination-area svg{
    max-width:372px;
    width:100%
}
@media(max-width: 991px){
    .team-slider-area .pagination-area svg{
        display:none
    }
}
.team-slider-area .pagination-area svg linearGradient stop{
    stop-color:#95a0b1
}
.faq-section{
    position:relative;
    background-color:#eee9e3
}
.faq-section .section-title h2{
    margin-bottom:13px
}
.faq-section .section-title p{
    max-width:670px;
    width:100%;
    margin-bottom:0
}
.faq-section .faq-area .section-title-and-filter{
    display:flex;
    align-items:center;
    justify-content:space-between
}
@media(max-width: 767px){
    .faq-section .faq-area .section-title-and-filter{
        flex-wrap:wrap;
        gap:20px
    }
}
.faq-section .faq-area .faq-wrap .accordion .accordion-item{
    border-radius:10px;
    border:none;
    margin-bottom:15px;
    background-color:rgba(0,0,0,0);
    border:1px solid #eee9e3;
    background-color:var(--white-color)
}
.faq-section .faq-area .faq-wrap .accordion .accordion-item:last-child{
    margin-bottom:0
}
.faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-header{
    border-radius:10px;
    background-color:rgba(0,0,0,0);
    border-radius:10px
}
.faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-header .accordion-button{
    font-family:var(--font-Instrument);
    font-size:20px;
    font-weight:500;
    line-height:28px;
    text-align:left;
    color:var(--title-color);
    padding:30px 40px 28px;
    border-radius:10px;
    background-color:var(--white-color);
    text-transform:capitalize
}
@media(max-width: 767px){
    .faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-header .accordion-button{
        font-size:18px;
        line-height:25px;
        padding:30px 34px 28px
    }
}
@media(max-width: 576px){
    .faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-header .accordion-button{
        padding:15px 45px 15px 15px
    }
}
@media(max-width: 375px){
    .faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-header .accordion-button{
        font-size:17px
    }
}
.faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-header .accordion-button::after{
    flex-shrink:0;
    width:unset;
    height:unset;
    margin-left:auto;
    background-image:none;
    background-repeat:unset;
    background-size:unset;
    font-family:bootstrap-icons !important;
    position:absolute;
    right:40px;
    content:"";
    transition:unset;
    font-size:20px;
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    background:#eee9e3;
    color:var(--title-color)
}
@media(min-width: 992px)and (max-width: 1199px){
    .faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-header .accordion-button::after{
        right:15px
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-header .accordion-button::after{
        right:15px
    }
}
@media(max-width: 767px){
    .faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-header .accordion-button::after{
        right:10px
    }
}
@media(max-width: 576px){
    .faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-header .accordion-button::after{
        width:30px;
        height:30px;
        font-size:15px
    }
}
.faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed){
    box-shadow:none;
    background-color:var(--white-color);
    color:var(--title-color);
    border-radius:10px 10px 0 0
}
.faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after{
    background-image:none;
    transform:unset;
    font-family:bootstrap-icons !important;
    content:"";
    color:var(--white-color);
    background:var(--primary-color);
    border:none
}
@media(max-width: 576px){
    .faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after{
        width:30px;
        height:30px
    }
}
.faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-header .accordion-button:focus{
    border:rgba(0,0,0,0);
    border-radius:10px;
    box-shadow:none;
    border-bottom:none;
    border-radius:10px 10px 0 0
}
.faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-body{
    padding:0 79px 30px;
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:28px;
    color:var(--paragraph-color-1);
    max-width:1005px;
    width:100%
}
@media(max-width: 576px){
    .faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-body{
        padding:0px 15px 15px 15px;
        font-size:16px
    }
}
.faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-body .opening-time{
    padding-top:20px
}
.faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-body .opening-time h6{
    font-family:var(--font-jost);
    font-size:18px;
    font-weight:600;
    line-height:1;
    text-align:left;
    color:var(--paragraph-color)
}
.faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-body .opening-time ul{
    padding:0;
    margin:0;
    list-style:none;
    margin-top:15px
}
.faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-body .opening-time ul li{
    display:flex;
    align-items:center;
    gap:20px
}
.faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-body .opening-time ul li span{
    font-family:var(--font-jost);
    font-size:14px;
    font-weight:500;
    line-height:2;
    text-align:left;
    color:var(--paragraph-color);
    text-transform:uppercase
}
.faq-section .faq-area .faq-wrap .accordion .accordion-item .accordion-body .opening-time ul li span svg{
    fill:var(--paragraph-color)
}
.faq-section .faq-area .faq-wrap button{
    white-space:wrap
}
.faq-section .single-widget{
    border:1px solid #eee9e3;
    border-radius:10px
}
.faq-section .single-widget ul li a span{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:18px;
    line-height:1.2;
    margin:0;
    color:var(--title-color);
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid rgba(17,17,17,.15);
    padding:24px;
    text-transform:capitalize;
    transition:all .3s ease-in-out
}
.faq-section .single-widget ul li a span:hover{
    background-color:var(--primary-color);
    transition:all .3s ease-in-out;
    color:var(--white-color)
}
.faq-section .single-widget ul li a span:hover svg path{
    fill:var(--white-color);
    transition:all .3s ease-in-out
}
.faq-section .single-widget ul li:last-child a span{
    border-bottom:none
}
.faq-section .faq-wrap{
    border-radius:10px
}
.faq-section.style-2{
    background-color:var(--white-color)
}
@media(max-width: 576px){
    .faq-section.style-2{
        padding-left:15px;
        padding-right:15px
    }
}
@media(min-width: 1200px){
    .faq-section.style-2 .section-title.style-3{
        margin-left:35px
    }
}
.faq-section.style-2 .faq-area .faq-wrap .accordion .accordion-item{
    border:1px solid #eee9e3;
    overflow:hidden
}
.faq-section.style-2 .faq-area .faq-wrap .accordion .accordion-item .accordion-header .accordion-button{
    font-family:var(--font-Instrument);
    font-size:22px;
    font-weight:500;
    line-height:28px;
    border-radius:0px;
    color:var(--title-color)
}
@media(max-width: 991px){
    .faq-section.style-2 .faq-area .faq-wrap .accordion .accordion-item .accordion-header .accordion-button{
        font-size:21px
    }
}
@media(max-width: 767px){
    .faq-section.style-2 .faq-area .faq-wrap .accordion .accordion-item .accordion-header .accordion-button{
        font-size:18px
    }
}
@media(max-width: 576px){
    .faq-section.style-2 .faq-area .faq-wrap .accordion .accordion-item .accordion-header .accordion-button{
        font-size:18px;
        line-height:1.4
    }
}
.faq-section.style-2 .faq-area .faq-wrap .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed){
    border-radius:0px;
    border:1px solid rgba(0,0,0,0);
    border-bottom:none
}
.faq-section.style-2 .faq-area .faq-wrap .accordion .accordion-item .accordion-body{
    max-width:900px;
    width:100%;
    border:none;
    border-radius:0px;
    border-top:none
}
.faq-section.style-2 .faq-area .faq-wrap .accordion .accordion-item .accordion-body .opening-time h6{
    font-family:var(--font-jost);
    font-size:18px;
    font-weight:700;
    line-height:1;
    text-align:left
}
.faq-section.style-2 .nav-button-wrapper .nav-pills{
    border:1px solid rgba(17,17,17,.1);
    display:grid;
    border-radius:10px;
    overflow:hidden
}
@media(min-width: 1200px){
    .faq-section.style-2 .nav-button-wrapper .nav-pills{
        margin-top:36px
    }
}
.faq-section.style-2 .nav-button-wrapper .nav-pills .nav-link{
    color:rgba(17,17,17,.7);
    width:100%;
    border-bottom:1px solid rgba(17,17,17,.15)
}
.faq-section.style-2 .nav-button-wrapper .nav-pills .nav-link span{
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-transform:capitalize;
    padding:15px;
    font-family:var(--font-jost);
    font-size:18px;
    font-weight:400;
    line-height:20px
}
.faq-section.style-2 .nav-button-wrapper .nav-pills .nav-link span svg path{
    fill:rgba(17,17,17,.7)
}
.faq-section.style-2 .nav-button-wrapper .nav-pills .nav-link.active{
    background-color:var(--primary-color);
    width:100%;
    border-radius:unset;
    color:var(--white-color)
}
.faq-section.style-2 .nav-button-wrapper .nav-pills .nav-link.active span svg path{
    fill:#fff
}
.faq-section .faq-right-side-text{
    top:40%;
    right:8%;
    position:absolute
}
@media(max-width: 1199px){
    .faq-section .faq-right-side-text{
        display:none
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .faq-section .faq-right-side-text{
        right:1%
    }
}
@media(max-width: 991px){
    .faq-section .faq-right-side-text{
        display:none
    }
}
@media(max-width: 991px){
    .faq-section .faq-right-side-text{
        display:none
    }
}
.faq-section .verticle-text h2{
    color:rgba(0,0,0,.1);
    font-family:var(--font-jost);
    font-size:100px;
    font-weight:500;
    line-height:1;
    letter-spacing:5px;
    text-transform:uppercase;
    writing-mode:vertical-lr;
    margin-bottom:0
}
@media(max-width: 991px){
    .faq-section .verticle-text h2{
        font-size:80px
    }
}
@media(max-width: 767px){
    .faq-section .verticle-text h2{
        font-size:60px
    }
}
.blog-section.style-2{
    background-color:var(--white-color)
}
@media(max-width: 576px){
    .blog-section{
        padding-left:15px;
        padding-right:15px
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .blog-section .section-title h2{
        margin-bottom:0
    }
}
.blog-section .section-title p{
    max-width:545px;
    width:100%;
    margin-bottom:0
}
.innerpage-pagination-area .paginations{
    padding:0;
    margin:0;
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    border:1px solid rgba(215,202,202,.5);
    border-radius:75px;
    padding:12px 25px
}
@media(max-width: 991px){
    .innerpage-pagination-area .paginations{
        gap:24px
    }
}
@media(max-width: 425px){
    .innerpage-pagination-area .paginations{
        padding:0;
        border:none
    }
}
.innerpage-pagination-area .paginations .page-item a,.innerpage-pagination-area .paginations .page-item span{
    color:var(--paragraph-color-1);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:500;
    line-height:1;
    width:36px;
    height:36px;
    border-radius:40px;
    border:1px solid rgba(215,202,202,.5);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.5s
}
.innerpage-pagination-area .paginations .page-item a:hover{
    background-color:var(--primary-color);
    background-color:var(--primary-color);
    border:1px solid var(--primary-color);
    color:var(--white-color)
}
.innerpage-pagination-area .paginations .page-item.active a{
    background-color:var(--primary-color);
    border-color:var(--primary-color2);
    color:var(--white-color)
}
.innerpage-pagination-area .paginations .page-item.paginations-button a{
    width:unset;
    height:unset;
    border:unset;
    background-color:unset
}
.innerpage-pagination-area .paginations .page-item.paginations-button a svg{
    fill:rgba(63,68,75,.5);
    transition:.5s
}
.innerpage-pagination-area .paginations .page-item.paginations-button a:hover svg{
    fill:var(--primary-color2)
}
.blog-card{
    border:1px solid rgba(17,17,17,.1);
    border-radius:10px
}
.blog-card.two{
    border:none
}
.blog-card .blog-card-img-wrap{
    position:relative;
    overflow:hidden;
    border-radius:10px 10px 0 0
}
@media(max-width: 1199px){
    .blog-card .blog-card-img-wrap{
        height:100%
    }
}
.blog-card .blog-card-img-wrap.two{
    border-radius:10px
}
@media(max-width: 1199px){
    .blog-card .blog-card-img-wrap.two{
        height:100%
    }
}
.blog-card .blog-card-img-wrap .card-img{
    position:relative;
    overflow:hidden;
    display:block;
    transition:all .5s ease-out
}
.blog-card .blog-card-img-wrap .card-img img{
    transition:all .5s ease-out;
    width:100%
}
@media(max-width: 1199px){
    .blog-card .blog-card-img-wrap .card-img img{
        height:100%;
        -o-object-fit:cover;
        object-fit:cover
    }
}
@media(max-width: 991px){
    .blog-card .blog-card-img-wrap .card-img img{
        width:100%
    }
}
.blog-card .blog-card-img-wrap .card-img::after{
    position:absolute;
    width:200%;
    height:0%;
    left:50%;
    top:50%;
    background-color:rgba(255,255,255,.3);
    transform:translate(-50%, -50%) rotate(-45deg);
    content:"";
    z-index:1
}
.blog-card .blog-card-img-wrap .top-button{
    color:var(--white-color);
    font-family:var(--font-jost);
    font-size:14px;
    line-height:24px;
    font-weight:500;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:3px 17px;
    background-color:var(--primary-color);
    border-radius:0 5px 5px 0;
    position:absolute;
    top:33px;
    left:0px;
    z-index:1
}
.blog-card .blog-card-img-wrap .top-button svg{
    fill:var(--white-color)
}
.blog-card .blog-card-img-wrap .date{
    color:#000;
    font-family:var(--font-jost);
    font-size:14px;
    font-weight:500;
    line-height:1;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:10px 16px;
    background-color:#000;
    position:absolute;
    top:0;
    right:0;
    z-index:1
}
.blog-card .card-content{
    padding:25px 30px
}
@media(max-width: 1199px){
    .blog-card .card-content{
        padding:25px 20px
    }
}
.blog-card .card-content h4{
    margin-bottom:15px;
    line-height:1
}
.blog-card .card-content h4 a{
    color:var(--title-color);
    font-family:var(--font-jost);
    font-weight:500;
    font-size:24px;
    line-height:30px;
    text-transform:capitalize;
    transition:all .3s ease-in-out
}
@media(min-width: 992px)and (max-width: 1199px){
    .blog-card .card-content h4 a{
        font-size:18px;
        line-height:1.4
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .blog-card .card-content h4 a{
        font-size:20px;
        line-height:1
    }
}
@media(max-width: 576px){
    .blog-card .card-content h4 a{
        font-size:22px
    }
}
.blog-card .card-content h4 a:hover{
    color:var(--primary-color);
    transition:all .3s ease-in-out
}
.blog-card .card-content.two{
    border:none
}
.blog-card .card-content.two h4{
    margin-bottom:14px
}
.blog-card .card-content.two h4 a{
    font-size:40px;
    line-height:50px
}
@media(max-width: 1199px){
    .blog-card .card-content.two h4 a{
        font-size:28px;
        line-height:35px
    }
}
.blog-card .card-content.two p{
    text-transform:capitalize;
    font-size:16px;
    line-height:1.7
}
@media(max-width: 991px){
    .blog-card .card-content.two .primary-btn-four{
        display:inline-block
    }
}
.blog-card .card-content.two .blog-details-bottom-area .blog-meta{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:start;
    flex-wrap:wrap;
    line-height:1;
    margin-bottom:12px
}
.blog-card .card-content.two .blog-details-bottom-area .blog-meta li{
    color:var(--paragraph-color-1);
    font-family:var(--font-inter);
    font-weight:500;
    font-size:16px;
    letter-spacing:.3px;
    margin-right:50px;
    display:flex;
    align-items:center;
    position:relative;
    transition:.25s ease;
    text-transform:capitalize
}
@media(min-width: 576px)and (max-width: 768px){
    .blog-card .card-content.two .blog-details-bottom-area .blog-meta li{
        margin-right:20px
    }
}
@media(max-width: 576px){
    .blog-card .card-content.two .blog-details-bottom-area .blog-meta li{
        margin-right:16px;
        line-height:1.2
    }
}
.blog-card .card-content.two .blog-details-bottom-area .blog-meta li svg{
    margin-right:8px;
    fill:rgba(var(--title-color-opc), 0.5);
    transition:.25s ease
}
@media(max-width: 767px){
    .blog-card .card-content.two .blog-details-bottom-area .blog-meta li svg{
        width:14px
    }
}
@media(min-width: 576px)and (max-width: 768px){
    .blog-card .card-content.two .blog-details-bottom-area .blog-meta li svg{
        margin-right:5px
    }
}
@media(max-width: 576px){
    .blog-card .card-content.two .blog-details-bottom-area .blog-meta li svg{
        margin-right:5px
    }
}
.blog-card .card-content.two .blog-details-bottom-area .blog-meta li a{
    color:rgba(var(--title-color-opc), 0.5);
    transition:.5s
}
.blog-card .card-content.two .blog-details-bottom-area .blog-meta li:hover a{
    color:var(--primary-color)
}
.blog-card .card-content.two .blog-details-bottom-area .blog-meta li:hover a svg{
    fill:var(--primary-color)
}
.blog-card .card-content.two .blog-details-bottom-area .blog-meta li::before{
    content:"";
    position:absolute;
    right:-25px;
    top:3px;
    width:1px;
    height:10px;
    line-height:5px;
    background-color:#686868;
    border-radius:4px
}
@media(min-width: 576px)and (max-width: 768px){
    .blog-card .card-content.two .blog-details-bottom-area .blog-meta li::before{
        right:-16px
    }
}
@media(max-width: 576px){
    .blog-card .card-content.two .blog-details-bottom-area .blog-meta li::before{
        right:-16px
    }
}
@media(max-width: 425px){
    .blog-card .card-content.two .blog-details-bottom-area .blog-meta li::before{
        display:none
    }
}
.blog-card .card-content.two .blog-details-bottom-area .blog-meta li:last-child{
    margin-right:0
}
.blog-card .card-content.two .blog-details-bottom-area .blog-meta li:last-child::before{
    display:none;
    visibility:hidden
}
.blog-card .card-content p{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:15px;
    line-height:25px;
    color:var(--paragraph-color-1);
    margin:0;
    padding-bottom:45px;
    text-transform:capitalize
}
@media(max-width: 991px){
    .blog-card .card-content p{
        padding-bottom:25px
    }
}
.blog-card .card-content ul{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    flex-wrap:wrap
}
.blog-card .card-content ul.two{
    display:flex;
    justify-content:start;
    gap:20px
}
.blog-card .card-content ul .date a{
    display:flex;
    align-items:center;
    gap:4px;
    color:var(--paragraph-color-1);
    font-family:var(--font-jost);
    font-size:14px;
    font-weight:400;
    line-height:14px
}
.blog-card .card-content ul .date a svg path{
    stroke:var(--primary-color)
}
.blog-card .card-content ul .blog-comment a{
    color:var(--paragraph-color-1);
    font-family:var(--font-jost);
    font-size:14px;
    font-weight:400;
    line-height:14px;
    display:flex;
    align-items:center;
    gap:4px
}
.blog-card .card-content ul .blog-comment a svg path{
    stroke:var(--primary-color)
}
.blog-card:hover .blog-card-img-wrap .card-img img{
    transform:scale(1.1)
}
.blog-card:hover .blog-card-img-wrap .card-img::after{
    height:250%;
    transition:all 600ms linear;
    background-color:rgba(0,0,0,0)
}
.blog-card.style-2{
    border-radius:10px;
    border:1px solid rgba(var(--title-color-opc), 0.1)
}
.blog-card.style-2 .blog-card-img-wrap{
    border-radius:10px 10px 0 0
}
.blog-card.style-2 .blog-card-img-wrap .card-img img{
    border-radius:10px 10px 0 0
}
.blog-card.style-2 .blog-card-img-wrap .date{
    position:absolute;
    top:6px;
    left:6px;
    text-align:center;
    width:72px;
    height:72px;
    border-radius:50%;
    background:rgba(11,12,12,.4);
    -webkit-backdrop-filter:blur(22.5px);
    backdrop-filter:blur(22.5px);
    transition:.5s;
    z-index:9;
    display:flex;
    align-items:center;
    justify-content:center
}
@media(max-width: 576px){
    .blog-card.style-2 .blog-card-img-wrap .date{
        width:65px;
        height:65px
    }
}
.blog-card.style-2 .blog-card-img-wrap .date span{
    color:var(--white-color);
    text-align:center;
    font-family:var(--font-jost);
    font-size:11px;
    font-weight:500;
    line-height:1;
    letter-spacing:.22px;
    display:block
}
.blog-card.style-2 .blog-card-img-wrap .date span strong{
    font-size:22px;
    font-weight:700;
    font-family:var(--font-jost);
    margin-bottom:5px;
    display:block
}
@media(max-width: 576px){
    .blog-card.style-2 .blog-card-img-wrap .date span strong{
        font-size:20px
    }
}
.blog-card.style-2 .card-content{
    padding:30px 25px
}
@media(max-width: 1199px){
    .blog-card.style-2 .card-content{
        padding:25px 20px
    }
}
@media(min-width: 1200px)and (max-width: 1399px){
    .blog-card.style-2 .card-content h4 a{
        font-size:23px
    }
}
@media(max-width: 1199px){
    .blog-card.style-2 .card-content h4 a{
        font-size:22px
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .blog-card.style-2 .card-content h4 a{
        font-size:20px
    }
}
.blog-card.style-2.two{
    border:none
}
.blog-card.style-2.two .card-content{
    padding:30px 0 0
}
@media(max-width: 1199px){
    .blog-card.style-2.two .card-content{
        padding:25px 0px 0
    }
}
.blog-card.style-2:hover .blog-card-img-wrap .date{
    background-color:var(--primary-color1)
}
.cta-section.style-2{
    background-color:var(--white-color)
}
.cta-section .cta-wrapper{

    background-image: url(https://fantasy.premierleague.com/assets/pattern-1-1236-CLcKfGdk.png), linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    background-position: right top -197px, 0 0;
    background-repeat: no-repeat;
    background-size: 204px 315px, auto;    border-radius:10px;
    position:relative;
    margin-bottom:-150px;
    padding:75px 82px 59px
}
@media(min-width: 992px)and (max-width: 1199px){
    .cta-section .cta-wrapper{
        padding:40px 70px
    }
}
@media(max-width: 991px){
    .cta-section .cta-wrapper{
        padding:40px 70px
    }
}
@media(max-width: 767px){
    .cta-section .cta-wrapper{
        padding:30px 45px 30px
    }
}
@media(max-width: 576px){
    .cta-section .cta-wrapper{
        padding:50px 30px;
        border-radius:0;
        margin-bottom:-80px
    }
}
.cta-section .cta-wrapper .section-title{
    max-width:677px;
    width:100%
}
@media(min-width: 992px)and (max-width: 1199px){
    .cta-section .cta-wrapper .section-title{
        max-width:650px;
        width:100%
    }
}
.cta-section .cta-wrapper .section-title h2{
    font-family:var(--font-Instrument);
    font-size:44px;
    font-weight:600;
    line-height:62px;
    letter-spacing:.02em;
    color:var(--white-color)
}
@media(min-width: 992px)and (max-width: 1199px){
    .cta-section .cta-wrapper .section-title h2{
        line-height:1.2
    }
}
@media(max-width: 991px){
    .cta-section .cta-wrapper .section-title h2{
        line-height:1.2;
        font-size:38px
    }
}
@media(max-width: 576px){
    .cta-section .cta-wrapper .section-title h2{
        font-size:30px;
        line-height:1.4
    }
}
@media(max-width: 375px){
    .cta-section .cta-wrapper .section-title h2{
        font-size:26px;
        line-height:1.4
    }
}
.cta-section .cta-wrapper .cta-information{
    margin:12px 0 27px;
    max-width:677px;
    width:100%
}
@media(min-width: 768px)and (max-width: 991px){
    .cta-section .cta-wrapper .cta-information{
        max-width:330px;
        width:100%;
        margin-top:25px
    }
}
@media(max-width: 767px){
    .cta-section .cta-wrapper .cta-information{
        margin-top:20px
    }
}
.cta-section .cta-wrapper .cta-information ul{
    display:flex;
    align-items:center;
    gap:40px
}
@media(max-width: 1399px){
    .cta-section .cta-wrapper .cta-information ul{
        gap:20px
    }
}
@media(max-width: 425px){
    .cta-section .cta-wrapper .cta-information ul{
        flex-direction:column;
        align-items:start
    }
}
.cta-section .cta-wrapper .cta-information ul .social-info{
    display:flex;
    align-items:center
}
.cta-section .cta-wrapper .cta-information ul .social-info a{
    color:#ebebeb;
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:16px;
    letter-spacing:.02em;
    margin:0
}
@media(min-width: 768px)and (max-width: 991px){
    .cta-section .cta-wrapper .cta-information ul .social-info.style-2{
        margin-top:-20px
    }
}
@media(max-width: 991px){
    .cta-section .cta-wrapper .primary-btn-three{
        padding:20px 30px
    }
}
.cta-section .cta-wrapper .cta-image{

    position:absolute;
    top:0%;
    right:0%;
    height:100%;
    border-radius:8px
}
.cta-section .cta-wrapper .cta-image img{
    height:100%
}
@media(min-width: 992px)and (max-width: 1199px){
    .cta-section .cta-wrapper .cta-image{
        width:56%;
        height:100%;
        border-radius:10px
    }
}
@media(max-width: 991px){
    .cta-section .cta-wrapper .cta-image{
        display:none
    }
}
.footer-section{

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-color: #28002b;
}
/* Overlay */


@media(max-width: 576px){
    .footer-section{
        padding-left:15px;
        padding-right:15px
    }
}
.footer-section .shape-rectangle{
    position:absolute;
    bottom:0%
}
.footer-section .shape-rectangle.two{
    right:0%;
    top:0%
}
.footer-section .footer-top-contact{
    background-color:var(--title-color);
    border-bottom:1px solid rgba(255,255,255,.1);
    padding:48px 0px;
    position:relative
}
.footer-section .footer-top-contact .section-title h2{
    font-family:var(--font-jost);
    font-weight:600;
    font-size:64px;
    line-height:4.7rem;
    color:var(--white-color);
    margin-bottom:40px
}
.footer-section .footer-top-contact .section-title ul{
    display:flex;
    align-items:center;
    gap:40px
}
.footer-section .footer-top-contact .section-title ul li a{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:18px;
    line-height:30px;
    color:var(--white-color-opp)
}
.footer-section .footer-top-contact .section-title ul li a svg{
    margin-right:9px
}
.footer-section .footer-top-contact .contact-btn .button-area{
    height:127px;
    width:127px;
    border-radius:50%;
    border:1px solid var(--white-color-opp);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.8s
}
.footer-section .footer-top-contact .contact-btn .button-area .details-button{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:16px;
    line-height:24px;
    margin:0;
    border:1px solid var(--white-color-opp);
    height:127px;
    width:127px;
    border-radius:50%;
    color:var(--white-color);
    display:flex;
    align-items:center;
    justify-content:center
}
.footer-section .footer-top-contact .contact-btn .button-area:hover{
    box-shadow:inset 0 0 0 10em var(--primary-color);
    border-color:var(--primary-color)
}
.footer-section .footer-top-contact .contact-btn .button-area:hover .details-button{
    --background-size: 0%;
    --stroke-dashoffset: 26;
    --stroke-duration: 0.3s;
    --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
    --stroke-delay: 0.195s
}
.footer-section .footer-top-contact .contact-btn .button-area:hover .details-button::after{
    opacity:0;
    transition-delay:0s
}
.footer-section .footer-top-contact .contact-image-wrap{
    background-color:red;
    display:flex;
    align-items:center;
    justify-content:end
}
.footer-section .footer-top-contact .contact-image-wrap img{
    border-radius:10px
}
.footer-section .footer-menu-wrap{
    padding:90px 0;
    border-bottom:1px solid rgba(255,255,255,.1)
}
.footer-section .footer-menu-wrap .logo-and-social-media-area .footer-logo{
    padding-bottom:20px
}
.footer-section .footer-menu-wrap .logo-and-social-media-area .footer-content p{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:16px;
    line-height:28px;
    max-width:344px;
    width:100%;
    color:rgba(255,255,255,.6);
    text-transform:capitalize;
    margin-bottom:26px
}
.footer-section .footer-menu-wrap .logo-and-social-media-area .footer-social-list{
    display:flex;
    align-items:center;
    gap:20px
}
.footer-section .footer-menu-wrap .logo-and-social-media-area .footer-social-list li a{
    border:1px solid var(--white-color);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    padding:6px;
    transition:.5s
}
.footer-section .footer-menu-wrap .logo-and-social-media-area .footer-social-list li a:hover{
    background-color:var(--primary-color);
    border:1px solid var(--primary-color)
}
.footer-section .footer-menu-wrap .logo-and-social-media-area .footer-social-list li a:hover svg path{
    fill:var(--white-color)
}
.footer-section .footer-menu-wrap .footer-widget .widget-title h4{
    font-family:var(--font-jost);
    font-size:19px;
    font-weight:500;
    line-height:23.18px;
    letter-spacing:.05em;
    color:var(--white-color);
    margin-bottom:24px;
    position:relative
}
.footer-section .footer-menu-wrap .footer-widget .widget-title h4::after{
    content:"";
    position:absolute;
    bottom:-40%;
    left:0;
    width:83px;
    height:1px;
    border-radius:10px;
    background:linear-gradient(90.01deg, #ffffff 0.01%, rgba(255, 255, 255, 0) 102.8%)
}
@media(min-width: 992px)and (max-width: 1199px){
    .footer-section .footer-menu-wrap .footer-widget .widget-title h4{
        font-size:19px
    }
}
.footer-section .footer-menu-wrap .footer-widget .menu-container .widget-list li{
    padding-bottom:8px
}
.footer-section .footer-menu-wrap .footer-widget .menu-container .widget-list li a{
    margin:0;
    color:rgba(255,255,255,.6);
    font-family:var(--font-jost);
    font-weight:400;
    font-size:15px;
    line-height:18.3px;
    letter-spacing:.05em;
    display:inline-block;
    background:linear-gradient(to bottom, #10c581 0%, #10c581 98%);
    background-repeat:no-repeat;
    background-size:0 1px;
    background-position:0% 100%;
    transition:background-size .75s
}
.footer-section .footer-menu-wrap .footer-widget .menu-container .widget-list li a:hover{
    background-position:left 100%;
    background-size:100% 1px;
    color:var(--primary-color)
}
.footer-section .footer-menu-wrap .newsletter-area .content p{
    font-family:var(--font-jost);
    font-size:19px;
    font-weight:500;
    line-height:23.18px;
    color:var(--white-color);
    margin:0;
    padding-bottom:28px
}
.footer-section .footer-menu-wrap .subscribe-form-wrap input{
    width:100%;
    color:var(--white-color);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:26px;
    border-radius:5px;
    background:rgba(0,0,0,0);
    border:1px solid rgba(255,255,255,.1);
    max-width:350px;
    width:100%;
    height:44px;
    padding:10px 10px 10px 20px;
    margin-bottom:20px
}
.footer-section .footer-menu-wrap .subscribe-form-wrap button{
    display:inline-flex;
    border-radius:6px
}
.footer-section .footer-menu-wrap .subscribe-form-wrap button a{
    font-family:var(--font-jost);
    font-weight:500;
    font-size:14px;
    line-height:14px;
    background-color:var(--white-color);
    color:var(--title-color);
    margin:0;
    padding:16px 30px;
    border-radius:6px
}
.footer-section .footer-menu-wrap .subscribe-form-wrap button a:hover{
    background-color:var(--primary-color);
    color:var(--white-color);
    transition:all .5s ease-out
}
.footer-section .footer-bottom-wrap .footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    display:flex;
    padding:28px 0;
    flex-wrap:wrap
}
@media(min-width: 768px)and (max-width: 991px){
    .footer-section .footer-bottom-wrap .footer-bottom{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:5px
    }
}
@media(max-width: 767px){
    .footer-section .footer-bottom-wrap .footer-bottom{
        display:flex;
        align-items:center;
        justify-content:center
    }
}
@media(max-width: 576px){
    .footer-section .footer-bottom-wrap .footer-bottom{
        display:flex;
        align-items:center;
        justify-content:flex-start;
        gap:5px
    }
}
.footer-section .footer-bottom-wrap .footer-bottom .copy-write-area p{
    font-family:var(--font-jost);
    font-size:13px;
    font-weight:500;
    line-height:16.8px;
    color:rgba(255,255,255,.6);
    margin:0;
    text-transform:capitalize
}
@media(min-width: 768px)and (max-width: 991px){
    .footer-section .footer-bottom-wrap .footer-bottom .copy-write-area p{
        font-size:17px
    }
}
@media(max-width: 767px){
    .footer-section .footer-bottom-wrap .footer-bottom .copy-write-area p{
        font-size:15px;
        line-height:1.5
    }
}
.footer-section .footer-bottom-wrap .footer-bottom .copy-write-area p span{
    color:var(--primary-color)
}
.footer-section .footer-bottom-wrap .footer-bottom .footer-bottom-right ul{
    display:flex;
    align-items:center;
    gap:44px
}
@media(min-width: 768px)and (max-width: 991px){
    .footer-section .footer-bottom-wrap .footer-bottom .footer-bottom-right ul{
        gap:20px
    }
}
@media(max-width: 767px){
    .footer-section .footer-bottom-wrap .footer-bottom .footer-bottom-right ul{
        gap:20px
    }
}
@media(max-width: 425px){
    .footer-section .footer-bottom-wrap .footer-bottom .footer-bottom-right ul{
        gap:15px
    }
}
.footer-section .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li{
    position:relative
}
.footer-section .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li a{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:14px;
    line-height:16.8px;
    color:rgba(255,255,255,.6);
    margin:0
}
.footer-section .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li:not(:last-child):after{
    position:absolute;
    top:0%;
    left:143px;
    content:" | ";
    font-size:16px;
    color:rgba(255,255,255,.25)
}
@media(max-width: 767px){
    .footer-section .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li:not(:last-child):after{
        left:130px
    }
}
.banner-section-two{
    position:relative;
    background-color:var(--white-color)
}
.banner-section-two .banner-background{
    background-repeat:no-repeat;
    position:absolute;
    background-size:cover;
    top:0;
    left:0;
    width:60%;
    height:100%;
    content:" ";
    border-radius:0 100px 100px 0
}
@media(max-width: 991px){
    .banner-section-two .banner-background{
        width:90%
    }
}
@media(max-width: 767px){
    .banner-section-two .banner-background{
        width:95%
    }
}
@media(max-width: 576px){
    .banner-section-two .banner-background{
        width:100%
    }
}
@media(max-width: 1699px){
    .banner-section-two .banner-wrapper{
        border-radius:0 100px 100px 0
    }
}
@media(min-width: 1400px)and (max-width: 1599px){
    .banner-section-two .banner-wrapper{
        border-radius:0 80px 80px 0
    }
}
@media(min-width: 1200px)and (max-width: 1399px){
    .banner-section-two .banner-wrapper{
        border-radius:0 50px 50px 0
    }
}
@media(max-width: 1199px){
    .banner-section-two .banner-wrapper{
        max-width:700px;
        width:100%;
        border-radius:0 50px 50px 0
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .banner-section-two .banner-wrapper{
        max-width:900px;
        width:100%
    }
}
.banner-section-two .banner-wrapper .banner-content-wrap{
    padding:200px 0;
    position:relative;
    max-width:675px;
    max-width:700px
}
@media(max-width: 1699px){
    .banner-section-two .banner-wrapper .banner-content-wrap{
        padding:140px 0;
        padding-left:100px
    }
}
@media(min-width: 1400px)and (max-width: 1599px){
    .banner-section-two .banner-wrapper .banner-content-wrap{
        padding:130px 0;
        padding-left:90px
    }
}
@media(min-width: 1200px)and (max-width: 1399px){
    .banner-section-two .banner-wrapper .banner-content-wrap{
        padding:130px 0;
        padding-left:90px;
        padding-left:80px;
        padding-right:110px
    }
}
@media(max-width: 1199px){
    .banner-section-two .banner-wrapper .banner-content-wrap{
        padding:70px 140px 95px 40px
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .banner-section-two .banner-wrapper .banner-content-wrap{
        padding:95px 0px 95px 40px
    }
}
@media(max-width: 767px){
    .banner-section-two .banner-wrapper .banner-content-wrap{
        padding:100px 30px
    }
}
@media(max-width: 375px){
    .banner-section-two .banner-wrapper .banner-content-wrap{
        padding:80px 20px
    }
}
.banner-section-two .banner-wrapper .banner-content-wrap .section-title h1{
    font-family:var(--font-Instrument);
    font-size:80px;
    font-weight:600;
    line-height:1.1;
    color:var(--title-color);
    text-transform:capitalize;
    margin-bottom:34px
}
@media(max-width: 1699px){
    .banner-section-two .banner-wrapper .banner-content-wrap .section-title h1{
        font-size:75px
    }
}
@media(min-width: 1400px)and (max-width: 1599px){
    .banner-section-two .banner-wrapper .banner-content-wrap .section-title h1{
        font-size:65px;
        line-height:1.2
    }
}
@media(min-width: 1200px)and (max-width: 1399px){
    .banner-section-two .banner-wrapper .banner-content-wrap .section-title h1{
        font-size:55px;
        line-height:1.1;
        margin-bottom:35px
    }
}
@media(max-width: 1199px){
    .banner-section-two .banner-wrapper .banner-content-wrap .section-title h1{
        max-width:550px;
        width:100%;
        font-size:55px;
        line-height:1.1;
        margin-bottom:21px
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .banner-section-two .banner-wrapper .banner-content-wrap .section-title h1{
        font-size:45px;
        max-width:400px;
        width:100%
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .banner-section-two .banner-wrapper .banner-content-wrap .section-title h1{
        max-width:800px;
        width:100%
    }
}
@media(max-width: 767px){
    .banner-section-two .banner-wrapper .banner-content-wrap .section-title h1{
        font-size:44px;
        line-height:1.2
    }
}
@media(max-width: 576px){
    .banner-section-two .banner-wrapper .banner-content-wrap .section-title h1{
        font-size:38px
    }
}
@media(max-width: 375px){
    .banner-section-two .banner-wrapper .banner-content-wrap .section-title h1{
        font-size:35px
    }
}
.banner-section-two .banner-wrapper .banner-content-wrap .section-title h1 span{
    color:var(--primary-color)
}
.banner-section-two .banner-wrapper .banner-content-wrap .section-title p{
    color:var(--paragraph-color-1);
    font-family:var(--font-jost);
    font-size:18px;
    font-weight:400;
    line-height:26px;
    margin-bottom:57px;
    max-width:629px;
    width:100%;
    text-transform:none
}
@media(min-width: 1400px)and (max-width: 1599px){
    .banner-section-two .banner-wrapper .banner-content-wrap .section-title p{
        max-width:610px;
        width:100%
    }
}
@media(min-width: 1200px)and (max-width: 1399px){
    .banner-section-two .banner-wrapper .banner-content-wrap .section-title p{
        margin-bottom:50px
    }
}
@media(max-width: 1199px){
    .banner-section-two .banner-wrapper .banner-content-wrap .section-title p{
        max-width:500px;
        width:100%;
        margin-bottom:50px
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .banner-section-two .banner-wrapper .banner-content-wrap .section-title p{
        max-width:400px;
        width:100%;
        margin-bottom:30px
    }
}
@media(max-width: 576px){
    .banner-section-two .banner-wrapper .banner-content-wrap .section-title p{
        font-size:16px
    }
}
.banner-section-two .banner-wrapper .banner-content-wrap .bottom-area{
    gap:30px;
    flex-wrap:wrap
}
@media(min-width: 992px)and (max-width: 1199px){
    .banner-section-two .banner-wrapper .banner-content-wrap .bottom-area{
        gap:20px
    }
}
@media(max-width: 991px){
    .banner-section-two .banner-wrapper .banner-content-wrap .bottom-area{
        gap:15px
    }
}
.banner-section-two .banner-wrapper .banner-content-wrap .bottom-area .primary-btn-two{
    border-radius:10px;
    padding:20px 36px
}
.banner-section-two .banner-wrapper .banner-content-wrap .bottom-area .primary-btn-four{
    border-radius:10px;
    padding:19px 35px
}
.banner-section-two .banner-wrapper .banner-content-wrap .bottom-area .primary-btn-four.style-2{
    padding:19px 39px
}
@media(max-width: 576px){
    .banner-section-two .banner-wrapper .banner-content-wrap .bottom-area a{
        width:50%;
        display:flex;
        align-items:center;
        justify-content:center
    }
}
@media(max-width: 425px){
    .banner-section-two .banner-wrapper .banner-content-wrap .bottom-area a{
        width:100%
    }
}
.banner-section-two .banner-right-image{
    position:absolute;
    top:0%;
    right:0%;
    padding:45px 0;
    width:50%;
    overflow:hidden;
    height:100%
}
@media(max-width: 1699px){
    .banner-section-two .banner-right-image{
        width:48%
    }
}
@media(min-width: 1400px)and (max-width: 1599px){
    .banner-section-two .banner-right-image{
        width:50%
    }
}
@media(min-width: 1200px)and (max-width: 1399px){
    .banner-section-two .banner-right-image{
        width:45%
    }
}
@media(max-width: 1199px){
    .banner-section-two .banner-right-image{
        width:45%
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .banner-section-two .banner-right-image{
        width:45%
    }
}
@media(max-width: 991px){
    .banner-section-two .banner-right-image{
        display:none
    }
}
.banner-section-two .banner-right-image img{
    width:100%;
    height:100%;
    -o-object-fit:cover;
    object-fit:cover;
    border-radius:80px 0 0 80px
}
.banner-section-two .circle-area{
    position:absolute;
    bottom:33%;
    left:50%;
    transform:translate(-50%, -50%);
    width:146px;
    height:146px;
    border-radius:50%;
    background-color:rgba(255,255,255,.3);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(0,0,0,.3);
    z-index:999
}
@media(max-width: 1699px){
    .banner-section-two .circle-area{
        left:52%;
        bottom:33%
    }
}
@media(min-width: 1400px)and (max-width: 1599px){
    .banner-section-two .circle-area{
        bottom:30%;
        left:50%
    }
}
@media(min-width: 1200px)and (max-width: 1399px){
    .banner-section-two .circle-area{
        left:55%;
        bottom:26%
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .banner-section-two .circle-area{
        bottom:18%;
        left:55%
    }
}
@media(max-width: 991px){
    .banner-section-two .circle-area{
        display:none
    }
}
.banner-section-two .circle-area>svg{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%)
}
.banner-section-two .circle-area>svg text{
    fill:var(--title-color);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:20.85px;
    animation:rotateClockwise 10s linear infinite
}
.banner-section-two .circle-area .arrow-down-icon .scroll-down-btn{
    width:62px;
    height:62px;
    border-radius:50%;
    background-color:#f5f0ea;
    border:1px solid rgba(0,0,0,.3);
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    z-index:1
}
.banner-section-two .circle-area .arrow-down-icon svg{
    margin-left:2px;
    transition:.5s
}
@keyframes rotateClockwise{
    from{
        transform:rotate(0deg);
        transform-origin:62.5px 62.5px
    }
    to{
        transform:rotate(360deg);
        transform-origin:62.5px 62.5px
    }
}
.banner-section-two .social-list-two{
    padding:0;
    margin:0;
    list-style:none;
    position:absolute;
    top:49%;
    left:-90px;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:46px;
    z-index:1
}
@media(max-width: 1699px){
    .banner-section-two .social-list-two{
        left:30px
    }
}
@media(min-width: 1400px)and (max-width: 1599px){
    .banner-section-two .social-list-two{
        left:20px;
        top:45%
    }
}
@media(max-width: 1399px){
    .banner-section-two .social-list-two{
        left:20px;
        top:45%
    }
}
@media(max-width: 1199px){
    .banner-section-two .social-list-two{
        display:none
    }
}
.banner-section-two .social-list-two li{
    position:relative;
    line-height:1;
    transition:.3s
}
.banner-section-two .social-list-two li::before{
    content:"";
    position:absolute;
    top:-23px;
    left:50%;
    transform:translateX(-50%);
    background:rgba(17,17,17,.2);
    width:3px;
    height:3px;
    border-radius:50%
}
@media(min-width: 1200px)and (max-width: 1399px){
    .banner-section-two .social-list-two li::before{
        top:-15px
    }
}
.banner-section-two .social-list-two li:first-child::before{
    display:none
}
.banner-section-two .social-list-two li a svg path{
    transition:all .3s
}
.banner-section-two .social-list-two li:hover a svg path{
    transition:all .3s;
    fill:var(--primary-color)
}
.experience-section{
    background-color:var(--white-color)
}
@media(max-width: 576px){
    .experience-section{
        padding-left:15px;
        padding-right:15px
    }
}
.experience-section .experience-coundown-area .single-coundown{
    position:relative
}
.experience-section .experience-coundown-area .single-coundown::before{
    content:"";
    height:67px;
    width:1px;
    background:linear-gradient(rgba(254, 94, 58, 0), var(--primary-color), rgba(254, 94, 58, 0));
    box-shadow:0 0 10px rgba(255,99,71,.5);
    position:absolute;
    right:-88px;
    top:50%;
    transform:translateY(-50%)
}
@media(max-width: 991px){
    .experience-section .experience-coundown-area .single-coundown::before{
        display:none
    }
}
.experience-section .experience-coundown-area .two:last-child::before{
    display:none
}
.experience-section .experience-coundown-area .number{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:5px
}
.experience-section .experience-coundown-area .number h5{
    font-family:var(--font-Instrument);
    font-size:50px;
    font-weight:600;
    line-height:48px;
    text-align:center;
    color:var(--title-color);
    margin-bottom:0
}
@media(max-width: 1199px){
    .experience-section .experience-coundown-area .number h5{
        font-size:40px
    }
}
.experience-section .experience-coundown-area .number span{
    font-family:var(--font-Instrument);
    font-size:50px;
    font-weight:600;
    line-height:48px;
    text-align:center;
    color:var(--title-color);
    margin-bottom:0
}
@media(max-width: 1199px){
    .experience-section .experience-coundown-area .number span{
        font-size:40px
    }
}
.experience-section .experience-coundown-area .content p{
    font-family:var(--font-jost);
    font-size:17px;
    font-weight:400;
    line-height:24px;
    text-align:center;
    color:var(--paragraph-color-1)
}
@media(max-width: 1199px){
    .experience-section .experience-coundown-area .content p{
        font-size:15px
    }
}
.vision-section{
    background-color:var(--white-color);
    position:relative;
    overflow:hidden
}
@media(max-width: 576px){
    .vision-section{
        padding-left:15px;
        padding-right:15px
    }
}
.vision-section .section-title h2{
    font-size:59px;
    margin-bottom:27px
}
@media(min-width: 992px)and (max-width: 1199px){
    .vision-section .section-title h2{
        margin-bottom:25px;
        font-size:44px;
        line-height:55px
    }
}
@media(max-width: 991px){
    .vision-section .section-title h2{
        margin-bottom:25px;
        font-size:45px;
        line-height:50px
    }
}
@media(max-width: 767px){
    .vision-section .section-title h2{
        font-size:45px;
        line-height:50px
    }
}
@media(max-width: 576px){
    .vision-section .section-title h2{
        font-size:40px;
        line-height:45px
    }
}
@media(max-width: 375px){
    .vision-section .section-title h2{
        font-size:35px;
        line-height:3rem
    }
}
.vision-section .section-title p{
    margin-bottom:35px
}
.vision-section ul{
    -moz-columns:2;
    columns:2;
    margin-bottom:30px
}
.vision-section ul li{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-Instrument);
    font-size:15px;
    font-weight:500;
    line-height:16px;
    margin-bottom:30px
}
.vision-section ul li:last-child{
    margin-bottom:0
}
.vision-section .experience-percentage-wrap{
    margin-bottom:40px
}
.vision-section .experience-percentage-wrap .eg-progress-wrap .eg-progress-bar-single{
    margin-bottom:32px
}
.vision-section .experience-percentage-wrap .eg-progress-wrap .eg-progress-bar-single .eg-progress-bar-title h6{
    color:var(--title-color);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    margin-bottom:12px;
    line-height:16px
}
.vision-section .experience-percentage-wrap .eg-progress-wrap .eg-progress-bar-single .eg-progress-bar{
    height:7px;
    background-color:rgba(102,102,102,.5);
    border-radius:25px
}
.vision-section .experience-percentage-wrap .eg-progress-wrap .eg-progress-bar-single .eg-progress-bar .experience-bar-per{
    height:7px;
    background-color:var(--title-color);
    border-radius:25px;
    width:0;
    transition:1s linear;
    position:relative
}
.vision-section .experience-percentage-wrap .eg-progress-wrap .eg-progress-bar-single .eg-progress-bar .experience-bar-per:before{
    content:attr(data-per);
    position:absolute;
    color:var(--title-color);
    font-size:14px;
    font-weight:500;
    font-family:var(--font-jost);
    line-height:1;
    top:-30px;
    right:0;
    transform:translateX(50%);
    z-index:1
}
@media(max-width: 576px){
    .vision-section .experience-percentage-wrap .eg-progress-wrap .eg-progress-bar-single .eg-progress-bar .experience-bar-per:before{
        right:10px
    }
}
.vision-section .primary-btn-three{
    background-color:var(--title-color);
    border-radius:10px;
    padding:17px 38px
}
.vision-section .primary-btn-three:hover{
    background-color:var(--primary-color)
}
.vision-section .vision-content-part{
    position:relative
}
.vision-section .vision-content-part .image-wrapper-1{
    position:relative;
    z-index:999
}
.vision-section .vision-content-part .image-wrapper-1 .vision-image-1{
    border-radius:10px
}
@media(max-width: 1199px){
    .vision-section .vision-content-part .image-wrapper-1 .vision-image-1{
        width:68%
    }
}
@media(max-width: 991px){
    .vision-section .vision-content-part .image-wrapper-1 .vision-image-1{
        width:65%
    }
}
@media(max-width: 576px){
    .vision-section .vision-content-part .image-wrapper-1 .vision-image-1{
        width:97%
    }
}
@media(max-width: 375px){
    .vision-section .vision-content-part .image-wrapper-1 .vision-image-1{
        width:100%
    }
}
.vision-section .vision-content-part .image-wrapper-2 .vision-image-2{
    position:absolute;
    bottom:0%;
    right:0%;
    border-radius:10px;
    z-index:1
}
@media(max-width: 1199px){
    .vision-section .vision-content-part .image-wrapper-2 .vision-image-2{
        width:50%
    }
}
@media(max-width: 576px){
    .vision-section .vision-content-part .image-wrapper-2 .vision-image-2{
        display:none
    }
}
.vision-section .vision-content-part .author-area{
    position:relative;
    z-index:1;
    background-color:#ffeae6;
    max-width:254px;
    width:100%;
    padding:15px;
    display:flex;
    align-items:center;
    gap:12px;
    border-radius:72px;
    margin-top:30px
}
.vision-section .vision-content-part .author-area .author-img img{
    border-radius:50%
}
.vision-section .vision-content-part .author-area .author-content h4{
    font-family:var(--font-Instrument);
    color:var(--title-color);
    font-size:17px;
    font-weight:500;
    line-height:16px;
    margin-bottom:7px
}
.vision-section .vision-content-part .author-area .author-content h5{
    font-family:var(--font-jost);
    font-size:15px;
    font-weight:400;
    line-height:16px;
    margin:0;
    color:var(--paragraph-color-1);
    text-transform:capitalize
}
.vision-section .vision-content-part .red-back-shape{
    position:absolute;
    top:15%;
    left:20%
}
@media(min-width: 768px)and (max-width: 991px){
    .vision-section .vision-content-part .red-back-shape{
        top:10%;
        left:10%;
        width:80%
    }
}
@media(max-width: 576px){
    .vision-section .vision-content-part .red-back-shape{
        display:none
    }
}
@media(max-width: 1199px){
    .vision-section .vision-content-part .red-back-shape img{
        width:90%
    }
}
.solutions-section{
    background-image:url("../image/banner-img/solution-bg.png");
    background-position:center;
    background-repeat:no-repeat;
    overflow:hidden;
    background-size:cover
}
@media(max-width: 576px){
    .solutions-section{
        padding-left:15px;
        padding-right:15px
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .solutions-section .section-title h2{
        max-width:550px;
        width:100%
    }
}
.solutions-section .section-title p{
    max-width:460px;
    width:100%;
    color:rgba(255,255,255,.7);
    margin-bottom:11px
}
.solutions-section .section-title .view-btn{
    display:flex;
    align-items:center
}
.solutions-section .section-title .view-btn .icon svg{
    transition:all .3s ease-in-out
}
.solutions-section .section-title .view-btn .primary-button{
    color:var(--primary-color);
    font-family:var(--font-Instrument);
    font-size:16px;
    font-weight:400;
    line-height:1.2;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    background:linear-gradient(to bottom, rgba(16, 197, 129, 0), rgba(16, 197, 129, 0.9));
    background-size:100% 1px;
    background-repeat:no-repeat;
    background-position:left 100%;
    transition:all .3s ease-in-out
}
.solutions-section .section-title .view-btn .primary-button:hover{
    background-size:0 1px;
    background-position:0% 100%;
    transition:all .3s ease-in-out
}
.solutions-section .section-title .view-btn:hover .primary-button{
    color:var(--primary-color);
    background-size:0 1px;
    background-position:0% 100%;
    transition:all .3s ease-in-out
}
.solutions-section .section-title .view-btn:hover svg{
    transform:rotate(45deg);
    transition:all .3s ease-in-out
}
.solutions-section .section-title .view-btn:hover svg path{
    fill:var(--primary-color);
    transition:all .3s ease-in-out
}
.solutions-section .service-img-group{
    margin:0;
    padding:0;
    list-style:none;
    min-height:620px;
    height:100%;
    width:100%;
    position:relative;
    overflow:hidden;
    border-radius:10px
}
@media(min-width: 992px)and (max-width: 1199px){
    .solutions-section .service-img-group{
        min-height:0
    }
}
@media(max-width: 991px){
    .solutions-section .service-img-group{
        display:none;
        visibility:hidden
    }
}
.solutions-section .service-img-group li{
    position:relative
}
.solutions-section .service-img-group li .service-img{
    min-height:620px;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    animation:qodef-animate-image-out 1s .1s cubic-bezier(0.78, 0.2, 0.21, 0.88) forwards;
    z-index:12
}
.solutions-section .service-img-group li .service-img img{
    border-radius:10px
}
.solutions-section .service-img-group li .service-img.active{
    animation:qodef-animate-image-in 1s cubic-bezier(0.78, 0.2, 0.21, 0.88) forwards;
    z-index:15
}
.solutions-section .service-img-group li .service-img{
    min-height:620px;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    animation:qodef-animate-image-out 1s .1s cubic-bezier(0.78, 0.2, 0.21, 0.88) forwards;
    z-index:12
}
.solutions-section .service-img-group li.active .service-img{
    animation:qodef-animate-image-in 1s cubic-bezier(0.78, 0.2, 0.21, 0.88) forwards;
    z-index:15
}
@keyframes qodef-animate-image-out{
    0%{
        transform:scale(1) translateZ(0);
        -webkit-clip-path:inset(0 0 0 0);
        clip-path:inset(0 0 0 0)
    }
    100%{
        transform:scale(1);
        -webkit-clip-path:inset(0 0 0 0);
        clip-path:inset(0 0 0 0)
    }
}
@keyframes qodef-animate-image-in{
    0%{
        transform:scale(1.05) translateZ(0);
        -webkit-clip-path:inset(0 100% 0 0);
        clip-path:inset(0 100% 0 0)
    }
    100%{
        transform:scale(1);
        -webkit-clip-path:inset(0 0 0 0);
        clip-path:inset(0 0 0 0)
    }
}
.solutions-section .services-list{
    width:100%
}
.solutions-section .services-list .single-service{
    display:flex;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,.1);
    position:relative;
    transition:.5s
}
.solutions-section .services-list .single-service:last-child{
    border-bottom:unset
}
.solutions-section .services-list .single-service h4{
    color:var(--white-color);
    border-right:1px solid rgba(255,255,255,.1);
    font-family:var(--font-Instrument);
    font-size:30px;
    font-weight:500;
    line-height:60px;
    padding:52px 47px;
    margin:0;
    width:40px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .3s ease-in-out
}
@media(max-width: 767px){
    .solutions-section .services-list .single-service h4{
        padding:52px 37px
    }
}
@media(max-width: 425px){
    .solutions-section .services-list .single-service h4{
        padding:52px 30px
    }
}
.solutions-section .services-list .single-service h3 a{
    color:var(--white-color);
    font-family:var(--font-Instrument);
    font-size:35px;
    font-weight:500;
    line-height:48px;
    margin:0;
    padding-left:52px;
    transition:all .3s ease-in-out
}
@media(max-width: 767px){
    .solutions-section .services-list .single-service h3 a{
        padding-left:30px;
        font-size:30px
    }
}
@media(max-width: 425px){
    .solutions-section .services-list .single-service h3 a{
        padding-left:25px
    }
}
@media(max-width: 375px){
    .solutions-section .services-list .single-service h3 a{
        padding-left:20px
    }
}
.solutions-section .services-list .single-service .single-hover{
    background-color:rgba(17,17,17,.9);
    padding:25px;
    border:1px solid #fff;
    border-radius:10px;
    width:327px;
    height:276px;
    opacity:0;
    visibility:hidden;
    position:absolute;
    right:-312px;
    z-index:999;
    transition:.5s;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px)
}
@media(max-width: 991px){
    .solutions-section .services-list .single-service .single-hover{
        right:-100px;
        width:290px;
        height:265px
    }
}
@media(max-width: 767px){
    .solutions-section .services-list .single-service .single-hover{
        width:300px;
        height:250px;
        right:0
    }
}
@media(max-width: 576px){
    .solutions-section .services-list .single-service .single-hover{
        display:none
    }
}
.solutions-section .services-list .single-service .single-hover .icon{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:25px
}
.solutions-section .services-list .single-service .single-hover .icon svg path{
    fill:var(--white-color)
}
.solutions-section .services-list .single-service .single-hover p{
    text-align:center;
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:24px;
    text-align:center;
    color:var(--white-color);
    margin-bottom:35px;
    text-transform:capitalize
}
@media(max-width: 991px){
    .solutions-section .services-list .single-service .single-hover p{
        margin-bottom:20px
    }
}
.solutions-section .services-list .single-service .single-hover .read-more-btn{
    font-family:Jost;
    font-size:16px;
    font-weight:500;
    line-height:24px;
    color:var(--primary-color);
    transition:all .3s ease-in-out;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0
}
.solutions-section .services-list .single-service .single-hover .read-more-btn svg{
    margin-left:5px
}
.solutions-section .services-list .single-service .single-hover .read-more-btn svg path{
    fill:var(--primary-color)
}
.solutions-section .services-list .single-service .single-hover .read-more-btn:hover{
    color:var(--primary-color);
    transition:all .3s ease-in-out
}
.solutions-section .services-list .single-service .single-hover .read-more-btn:hover svg path{
    fill:var(--primary-color);
    transition:all .3s ease-in-out
}
.solutions-section .services-list .single-service:hover .single-hover{
    visibility:visible;
    opacity:1
}
.solutions-section .services-list .single-service:hover h4{
    color:var(--primary-color)
}
.solutions-section .services-list .single-service:hover h3 a{
    color:var(--primary-color)
}
.project-section{
    background-color:var(--white-color)
}
@media(max-width: 576px){
    .project-section{
        padding-left:15px;
        padding-right:15px
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .project-section .section-title h2{
        font-size:44px;
        line-height:55px
    }
}
@media(max-width: 991px){
    .project-section .section-title h2{
        font-size:40px;
        line-height:45px
    }
}
.project-section .project-card{
    position:relative
}
@media(min-width: 992px)and (max-width: 1199px){
    .project-section .project-card.two .project-image img{
        min-height:480px;
        height:100%;
        -o-object-fit:cover;
        object-fit:cover
    }
}
@media(max-width: 991px){
    .project-section .project-card.two .project-image img{
        min-height:355px;
        height:100%;
        -o-object-fit:cover;
        object-fit:cover
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .project-section .project-card.three .project-image img{
        min-height:345px;
        height:100%;
        -o-object-fit:cover;
        object-fit:cover
    }
}
@media(max-width: 991px){
    .project-section .project-card.three .project-image img{
        min-height:253px;
        height:100%;
        -o-object-fit:cover;
        object-fit:cover
    }
}
.project-section .project-card .project-image{
    overflow:hidden;
    position:relative;
    border-radius:10px
}
.project-section .project-card .project-image img{
    transition:all .5s ease-out
}
@media(max-width: 991px){
    .project-section .project-card .project-image img{
        width:100%
    }
}
@media(max-width: 576px){
    .project-section .project-card .project-image img{
        min-height:330px;
        height:100%;
        -o-object-fit:cover;
        object-fit:cover
    }
}
.project-section .project-card .project-image::after{
    position:absolute;
    width:500%;
    height:0%;
    left:50%;
    top:50%;
    background-color:rgba(255,255,255,.3);
    transform:translate(-50%, -50%) rotate(-45deg);
    content:"";
    z-index:1
}
.project-section .project-card .project-content-wrap{
    position:absolute;
    left:0%;
    bottom:0%;
    padding:24px;
    background-color:rgba(17,17,17,.5);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-radius:0 10px;
    transition:all .3s ease-in-out;
    border-top:1px solid rgba(64,64,64,.6);
    border-right:1px solid rgba(64,64,64,.6)
}
.project-section .project-card .project-content-wrap .project-content h4{
    margin:0
}
.project-section .project-card .project-content-wrap .project-content h4 a{
    font-family:var(--font-Instrument);
    font-weight:600;
    font-size:25px;
    line-height:33px;
    margin:0;
    color:var(--white-color);
    text-transform:capitalize
}
@media(max-width: 991px){
    .project-section .project-card .project-content-wrap .project-content h4 a{
        font-size:20px
    }
}
.project-section .project-card .project-content-wrap .project-content h5{
    margin:0;
    font-family:var(--font-jost);
    font-weight:400;
    font-size:15px;
    line-height:16px;
    margin-bottom:5px;
    color:rgba(255,255,255,.7);
    text-transform:capitalize
}
.project-section .project-card .project-image:hover img{
    transition:.5s;
    transform:scale(1.1)
}
.project-section .project-card .project-image:hover::after{
    height:250%;
    transition:all 600ms linear;
    background-color:rgba(0,0,0,0)
}
.project-section .project-card:hover .project-content-wrap{
    background-color:var(--primary-color);
    transition:all .3s ease-in-out
}
.work-process-section{
    background-color:var(--white-color);
    position:relative
}
@media(max-width: 576px){
    .work-process-section{
        padding-left:15px;
        padding-right:15px
    }
}
.work-process-section .section-title h2{
    max-width:532px;
    width:100%
}
@media(min-width: 992px)and (max-width: 1199px){
    .work-process-section .section-title h2{
        margin-bottom:25px;
        font-size:44px;
        line-height:55px
    }
}
@media(max-width: 991px){
    .work-process-section .section-title h2{
        margin-bottom:25px;
        font-size:45px;
        line-height:50px
    }
}
@media(max-width: 767px){
    .work-process-section .section-title h2{
        font-size:45px;
        line-height:50px
    }
}
@media(max-width: 576px){
    .work-process-section .section-title h2{
        font-size:40px;
        line-height:45px
    }
}
@media(max-width: 375px){
    .work-process-section .section-title h2{
        font-size:35px;
        line-height:3rem
    }
}
.work-process-section .section-title p{
    max-width:416px;
    width:100%;
    margin-bottom:0
}
.work-process-section .process-card-wrapper{
    position:relative
}
@media(max-width: 991px){
    .work-process-section .process-card-wrapper .single-process .dot{
        display:none
    }
}
.work-process-section .process-card-wrapper .single-process .dot span{
    position:absolute;
    bottom:156%;
    left:48%;
    width:10px;
    height:10px;
    border-radius:50%;
    background-color:#666;
    display:inline-flex;
    z-index:1
}
.work-process-section .process-card-wrapper .single-process .dot span svg{
    position:absolute;
    left:5%;
    top:100%
}
@media(min-width: 992px)and (max-width: 1199px){
    .work-process-section .process-card-wrapper .single-process .dot span svg{
        width:75%;
        top:50%
    }
}
@media(max-width: 767px){
    .work-process-section .process-card-wrapper .single-process .dot span svg{
        display:none
    }
}
.work-process-section .process-card-wrapper .single-process .dot.two span{
    bottom:136.8%
}
@media(min-width: 992px)and (max-width: 1199px){
    .work-process-section .process-card-wrapper .single-process .dot.two span{
        bottom:136.8%
    }
}
.work-process-section .process-card-wrapper .single-process .dot.two span::after{
    height:90px;
    top:0
}
@media(min-width: 992px)and (max-width: 1199px){
    .work-process-section .process-card-wrapper .single-process .dot.two.lg-display-none{
        display:none
    }
}
.work-process-section .process-card-wrapper .single-process .process-card{
    background-color:#f9ebff;
    border:3px solid var(--title-color);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:98px;
    border-radius:25px 25px 25px 5px;
    transform:rotate(-45deg);
    margin:0 auto;
    height:174px;
    width:174px;
    transition:.5s
}
.work-process-section .process-card-wrapper .single-process .process-card:hover{
    transform:rotate(-45deg) scale(1.05);
    transition:.5s
}
@media(max-width: 1199px){
    .work-process-section .process-card-wrapper .single-process .process-card{
        padding:75px
    }
}
.work-process-section .process-card-wrapper .single-process .process-card.two{
    background-color:#ebfbff
}
.work-process-section .process-card-wrapper .single-process .process-card.three{
    background-color:#f1ffeb
}
.work-process-section .process-card-wrapper .single-process .process-card.four{
    background-color:#ffefeb
}
.work-process-section .process-card-wrapper .single-process .process-card .icon{
    transform:rotate(45deg)
}
.work-process-section .process-card-wrapper .single-process .process-card .step-no{
    background-color:var(--primary-color);
    border-radius:25px 0 25px;
    color:#fff;
    font-family:var(--font-jost);
    font-weight:500;
    font-size:24px;
    line-height:68px;
    margin:0;
    padding:25px;
    width:51px;
    height:61px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    right:-2%;
    top:71%
}
@media(min-width: 1400px)and (max-width: 1599px){
    .work-process-section .process-card-wrapper .single-process .process-card .step-no{
        top:70%
    }
}
@media(max-width: 1199px){
    .work-process-section .process-card-wrapper .single-process .process-card .step-no{
        right:-1%;
        top:64%
    }
}
.work-process-section .process-card-wrapper .single-process .process-content{
    max-width:277px;
    width:100%;
    text-align:center;
    padding-top:50px;
    margin:0 auto
}
.work-process-section .process-card-wrapper .single-process .process-content h3{
    font-size:32px;
    font-weight:500;
    line-height:48px;
    text-align:center;
    font-family:var(--font-jost);
    margin-bottom:3px
}
.work-process-section .process-card-wrapper .single-process .process-content p{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:14px;
    line-height:22px;
    color:var(--paragraph-color-1)
}
.work-process-section .divider{
    position:relative
}
.work-process-section .divider::before{
    content:"";
    position:absolute;
    top:6.5%;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    height:1px;
    background-color:rgba(17,17,17,.5)
}
@media(min-width: 992px)and (max-width: 1199px){
    .work-process-section .divider::before{
        top:65px
    }
}
@media(max-width: 991px){
    .work-process-section .divider::before{
        display:none
    }
}
.testimonials-section{
    background-color:var(--title-color);
    position:relative;
    z-index:1
}
@media(max-width: 576px){
    .testimonials-section{
        padding-left:15px;
        padding-right:15px
    }
}
.testimonials-section .section-title p{
    max-width:409px;
    width:100%;
    color:var(--white-color);
    margin-bottom:0
}
@media(max-width: 991px){
    .testimonials-section .section-title p{
        margin-bottom:0
    }
}
.testimonials-section .section-title.style-4{
    position:relative
}
.testimonials-section .section-title.style-4 h2{
    font-family:var(--font-Instrument);
    font-size:18px;
    font-weight:500;
    line-height:38px;
    color:var(--white-color);
    text-transform:uppercase
}
.testimonials-section .section-title.style-4 h2 span{
    color:var(--primary-color)
}
.testimonials-section .section-title.style-4 .left-line::before{
    content:"";
    position:absolute;
    bottom:43%;
    right:-35%;
    width:83px;
    height:2px;
    border-radius:10px;
    background:linear-gradient(90.01deg, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0))
}
@media(min-width: 992px)and (max-width: 1199px){
    .testimonials-section .section-title.style-4 .left-line::before{
        bottom:45%
    }
}
@media(max-width: 991px){
    .testimonials-section .section-title.style-4 .left-line::before{
        display:none
    }
}
.testimonials-section .section-title.style-4 .left-line::after{
    content:"";
    position:absolute;
    width:7px;
    height:7px;
    background-color:rgba(255,255,255,.4);
    border-radius:50%;
    top:45%;
    right:-2%
}
@media(min-width: 992px)and (max-width: 1199px){
    .testimonials-section .section-title.style-4 .left-line::after{
        top:45%
    }
}
@media(max-width: 991px){
    .testimonials-section .section-title.style-4 .left-line::after{
        display:none
    }
}
.testimonials-section .section-title.style-4 .right-line::after{
    content:"";
    position:absolute;
    width:7px;
    height:7px;
    background-color:rgba(255,255,255,.4);
    border-radius:50%;
    top:45%;
    left:-2%
}
@media(min-width: 992px)and (max-width: 1199px){
    .testimonials-section .section-title.style-4 .right-line::after{
        top:46%
    }
}
@media(max-width: 991px){
    .testimonials-section .section-title.style-4 .right-line::after{
        display:none
    }
}
.testimonials-section .section-title.style-4 .right-line::before{
    content:"";
    position:absolute;
    bottom:43%;
    left:-35%;
    width:83px;
    height:2px;
    border-radius:10px;
    background:linear-gradient(90.01deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.4) 102.8%)
}
@media(min-width: 992px)and (max-width: 1199px){
    .testimonials-section .section-title.style-4 .right-line::before{
        bottom:42%
    }
}
@media(max-width: 991px){
    .testimonials-section .section-title.style-4 .right-line::before{
        display:none
    }
}
.testimonials-section .logo-wrap .logo-area .logo-wrap{
    overflow:hidden;
    margin:0 auto
}
.testimonials-section .logo-wrap .logo-area .logo-wrap a{
    margin-left:70px
}
.testimonials-section .testimonial-section{
    position:relative;
    z-index:1
}
.testimonials-section .testimonial-slider .swiper-wrapper .swiper-slide .author-image{
    margin-right:-50px
}
@media(max-width: 991px){
    .testimonials-section .testimonial-slider .swiper-wrapper .swiper-slide .author-image{
        display:none
    }
}
.testimonials-section .testimonial-slider .swiper-wrapper .swiper-slide .author-image img{
    border-radius:10px
}
.testimonials-section .testimonial-slider .swiper-wrapper .swiper-slide .testimonial-content{
    background-color:rgba(64,64,64,.6);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    padding:30px 55px;
    border-radius:10px;
    max-width:656px;
    width:100%
}
@media(min-width: 992px)and (max-width: 1199px){
    .testimonials-section .testimonial-slider .swiper-wrapper .swiper-slide .testimonial-content{
        padding:25px 30px
    }
}
@media(max-width: 767px){
    .testimonials-section .testimonial-slider .swiper-wrapper .swiper-slide .testimonial-content{
        padding:30px 30px
    }
}
@media(max-width: 576px){
    .testimonials-section .testimonial-slider .swiper-wrapper .swiper-slide .testimonial-content{
        padding:30px 30px
    }
}
.testimonials-section .testimonial-slider .swiper-wrapper .swiper-slide .testimonial-content p{
    font-family:var(--font-jost);
    font-size:22px;
    font-weight:300;
    line-height:37.4px;
    letter-spacing:.01em;
    color:var(--white-color);
    margin:0
}
@media(min-width: 992px)and (max-width: 1199px){
    .testimonials-section .testimonial-slider .swiper-wrapper .swiper-slide .testimonial-content p{
        font-size:19px
    }
}
@media(max-width: 767px){
    .testimonials-section .testimonial-slider .swiper-wrapper .swiper-slide .testimonial-content p{
        font-size:21px
    }
}
.testimonials-section .testimonial-slider .swiper-wrapper .swiper-slide .testimonial-content .qoute-icon-1{
    margin-bottom:20px
}
.testimonials-section .testimonial-slider .swiper-wrapper .swiper-slide .testimonial-content .qoute-icon-2{
    margin-top:20px;
    text-align:end
}
.testimonials-section .testimonial-slider .swiper-wrapper .swiper-slide .testimonial-content .author-img img{
    border-radius:50%
}
.testimonials-section .testimonial-slider .swiper-wrapper .swiper-slide .testimonial-content .author-area{
    display:flex;
    align-items:center;
    gap:13px
}
.testimonials-section .testimonial-slider .swiper-wrapper .swiper-slide .testimonial-content .author-area .content h6{
    font-family:var(--font-Instrument);
    font-size:17px;
    font-weight:500;
    line-height:16px;
    letter-spacing:.02em;
    color:var(--white-color);
    margin-bottom:0
}
.testimonials-section .testimonial-slider .swiper-wrapper .swiper-slide .testimonial-content .author-area .content span{
    font-family:Jost;
    font-size:14px;
    font-weight:400;
    line-height:16px;
    color:var(--primary-color);
    margin:0
}
.testimonials-section .testimonial-slider .swiper-slide-active p,.testimonials-section .testimonial-slider .swiper-slide-active .author-area{
    animation:fadeInDown 1.7s
}
.testimonials-section .testimonial-slider .swiper-slide-active .author-area{
    animation:fadeInUp 1.7s
}
.testimonials-section .slider-btn-grp{
    display:flex;
    align-items:center;
    gap:20px;
    position:absolute;
    z-index:1
}
.testimonials-section .slider-btn-grp .slider-btn{
    min-width:35px;
    max-width:35px;
    height:35px;
    border:1px solid var(--primary-color);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.5s
}
.testimonials-section .slider-btn-grp .slider-btn svg{
    fill:var(--white-color);
    transition:.5s
}
.testimonials-section .slider-btn-grp .slider-btn:hover{
    background-color:var(--primary-color)
}
.testimonials-section .slider-btn-grp .slider-btn.swiper-button-disabled{
    opacity:.2
}
.testimonials-section .slider-btn-grp.three{
    display:grid;
    gap:30px;
    top:39%;
    right:23%
}
@media(max-width: 1699px){
    .testimonials-section .slider-btn-grp.three{
        right:20%
    }
}
@media(max-width: 1499px){
    .testimonials-section .slider-btn-grp.three{
        right:22%
    }
}
@media(min-width: 1400px)and (max-width: 1599px){
    .testimonials-section .slider-btn-grp.three{
        right:16%;
        top:40%
    }
}
@media(max-width: 1399px){
    .testimonials-section .slider-btn-grp.three{
        right:15%
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .testimonials-section .slider-btn-grp.three{
        right:13%;
        top:36%
    }
}
@media(max-width: 991px){
    .testimonials-section .slider-btn-grp.three{
        top:40%;
        right:12%
    }
}
@media(min-width: 768px)and (max-width: 991px),(max-width: 767px){
    .testimonials-section .slider-btn-grp.three{
        display:none
    }
}
.testimonials-section .slider-btn-grp.three .slider-btn{
    border:none
}
.testimonials-section .slider-btn-grp.three .slider-btn:hover{
    background-color:var(--title-color)
}
.testimonials-section .slider-btn-grp.three .page-up-down{
    margin-left:9px
}
.testimonials-section .slider-btn-grp.three .page-up-down h4{
    color:var(--white-color-opp);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:1;
    writing-mode:vertical-lr;
    transform:rotate(180deg);
    margin-left:0
}
.testimonials-section .slider-btn-grp.three.hover{
    background-color:var(--white-color)
}
.team-section-two{
    background-color:var(--white-color)
}
@media(max-width: 576px){
    .team-section-two{
        padding-left:15px;
        padding-right:15px
    }
}
.team-section-two .section-title h2{
    max-width:590px;
    width:100%
}
@media(min-width: 992px)and (max-width: 1199px){
    .team-section-two .section-title h2{
        font-size:44px;
        line-height:55px
    }
}
@media(max-width: 991px){
    .team-section-two .section-title h2{
        font-size:40px;
        line-height:45px;
        margin-bottom:0
    }
}
.team-section-two .team-member-card .single-team-card .team-image{
    overflow:hidden;
    position:relative;
    border-radius:10px
}
.team-section-two .team-member-card .single-team-card .team-image img{
    transition:all .5s ease-out;
    width:100%
}
@media(max-width: 991px){
    .team-section-two .team-member-card .single-team-card .team-image img{
        width:100%
    }
}
.team-section-two .team-member-card .single-team-card .team-image .team-social-list{
    padding:0;
    margin:0;
    list-style:none;
    position:absolute;
    bottom:16px;
    left:50%;
    background-color:rgba(17,17,17,.55);
    -webkit-backdrop-filter:blur(2.5px);
    backdrop-filter:blur(2.5px);
    border-radius:10px;
    line-height:1;
    padding:13px 26px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:42px;
    opacity:0;
    transform:scaleY(0) translateX(-50%);
    transform-origin:bottom;
    max-width:260px;
    width:100%;
    margin:0 auto;
    transition:.5s ease-in-out;
    border:1px solid rgba(16,197,129,.3)
}
@media(max-width: 1399px){
    .team-section-two .team-member-card .single-team-card .team-image .team-social-list{
        max-width:220px;
        width:100%;
        gap:35px
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .team-section-two .team-member-card .single-team-card .team-image .team-social-list{
        max-width:200px;
        width:100%;
        gap:25px
    }
}
@media(max-width: 767px){
    .team-section-two .team-member-card .single-team-card .team-image .team-social-list{
        max-width:300px;
        width:100%;
        gap:50px
    }
}
.team-section-two .team-member-card .single-team-card .team-image .team-social-list li{
    position:relative
}
.team-section-two .team-member-card .single-team-card .team-image .team-social-list li::before{
    content:"";
    position:absolute;
    left:-22px;
    top:50%;
    transform:translateY(-50%);
    background:rgba(255,255,255,.2);
    width:4px;
    height:4px;
    border-radius:50%
}
.team-section-two .team-member-card .single-team-card .team-image .team-social-list li:first-child::before{
    display:none
}
.team-section-two .team-member-card .single-team-card .team-image .team-social-list li a i{
    color:var(--white-color);
    font-size:22px;
    transition:.5s
}
.team-section-two .team-member-card .single-team-card .team-image .team-social-list li a i.bi-twitter-x{
    font-size:16px
}
.team-section-two .team-member-card .single-team-card .team-image .team-social-list li a i:hover{
    color:var(--primary-color)
}
.team-section-two .team-member-card .single-team-card .team-content{
    margin:14px 0 0 31px
}
.team-section-two .team-member-card .single-team-card .team-content h3{
    font-family:var(--font-jost);
    font-weight:500;
    font-size:24px;
    line-height:38px;
    color:var(--title-color);
    margin:0
}
@media(min-width: 992px)and (max-width: 1199px){
    .team-section-two .team-member-card .single-team-card .team-content h3{
        font-size:21px
    }
}
.team-section-two .team-member-card .single-team-card .team-content p{
    font-family:var(--font-jost);
    font-size:15px;
    font-weight:400;
    line-height:28px;
    text-align:left;
    text-underline-position:from-font;
    -webkit-text-decoration-skip-ink:none;
    text-decoration-skip-ink:none;
    color:var(--paragraph-color-1);
    margin:0
}
.team-section-two .team-member-card .single-team-card:hover{
    transition:.5s
}
.team-section-two .team-member-card .single-team-card:hover .team-image img{
    transform:scale(1.1)
}
.team-section-two .team-member-card .single-team-card:hover .team-image .team-social-list{
    opacity:1;
    transform:scaleY(1) translateX(-50%)
}
.business-section{
    background-color:var(--white-color)
}
@media(max-width: 576px){
    .business-section{
        padding-left:15px;
        padding-right:15px
    }
}
.business-section .section-title h2{
    max-width:724px;
    width:100%
}
@media(min-width: 992px)and (max-width: 1199px){
    .business-section .section-title h2{
        margin-bottom:25px;
        font-size:44px;
        line-height:55px
    }
}
@media(max-width: 991px){
    .business-section .section-title h2{
        margin-bottom:25px;
        font-size:45px;
        line-height:50px
    }
}
@media(max-width: 767px){
    .business-section .section-title h2{
        font-size:45px;
        line-height:50px
    }
}
@media(max-width: 576px){
    .business-section .section-title h2{
        font-size:40px;
        line-height:45px
    }
}
@media(max-width: 375px){
    .business-section .section-title h2{
        font-size:35px;
        line-height:3rem
    }
}
.business-section .section-title p{
    max-width:438px;
    width:100%;
    margin-bottom:0
}
@media(max-width: 991px){
    .business-section .section-title p{
        margin-bottom:0
    }
}
.business-section .blog-card-two{
    background-color:#f6fff7;
    border:1px solid var(--border-color-2);
    padding:35px;
    border-radius:10px
}
.business-section .blog-card-two.two{
    padding:25px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background-color:rgba(0,0,0,0);
    margin-bottom:34px;
    gap:25px
}
.business-section .blog-card-two.two:last-child{
    margin-bottom:0
}
@media(max-width: 1199px){
    .business-section .blog-card-two.two{
        justify-content:flex-start;
        gap:30px
    }
}
@media(max-width: 767px){
    .business-section .blog-card-two.two{
        display:block
    }
}
.business-section .blog-card-two.two .blog-card-img-wrap{
    position:relative;
    overflow:hidden;
    border-radius:10px 10px 0 0
}
@media(max-width: 1199px){
    .business-section .blog-card-two.two .blog-card-img-wrap{
        height:100%
    }
}
.business-section .blog-card-two.two .blog-card-img-wrap .card-img{
    position:relative;
    overflow:hidden;
    display:block;
    transition:all .5s ease-out;
    border-radius:10px;
    border:1px solid rgba(17,17,17,.25)
}
@media(max-width: 767px){
    .business-section .blog-card-two.two .blog-card-img-wrap .card-img{
        margin-bottom:20px;
        max-width:none;
        width:100%
    }
}
.business-section .blog-card-two.two .blog-card-img-wrap .card-img img{
    transition:all .5s ease-out;
    min-height:240px;
    height:100%;
    -o-object-fit:cover;
    object-fit:cover;
    width:100%
}
@media(max-width: 1399px){
    .business-section .blog-card-two.two .blog-card-img-wrap .card-img img{
        min-height:200px
    }
}
@media(max-width: 1199px){
    .business-section .blog-card-two.two .blog-card-img-wrap .card-img img{
        height:100%;
        -o-object-fit:cover;
        object-fit:cover
    }
}
@media(max-width: 991px){
    .business-section .blog-card-two.two .blog-card-img-wrap .card-img img{
        width:100%
    }
}
@media(max-width: 767px){
    .business-section .blog-card-two.two .blog-card-img-wrap .card-img img{
        height:235px
    }
}
.business-section .blog-card-two.two .blog-card-img-wrap .card-img::after{
    position:absolute;
    width:200%;
    height:0%;
    left:50%;
    top:50%;
    background-color:rgba(255,255,255,.3);
    transform:translate(-50%, -50%) rotate(-45deg);
    content:"";
    z-index:1
}
.business-section .blog-card-two.two .card-content{
    max-width:335px;
    width:100%
}
@media(min-width: 1200px)and (max-width: 1399px){
    .business-section .blog-card-two.two .card-content{
        padding:0 17px
    }
}
.business-section .blog-card-two.two .card-content h4{
    margin-bottom:75px
}
@media(max-width: 1399px){
    .business-section .blog-card-two.two .card-content h4{
        margin-bottom:47px
    }
}
.business-section .blog-card-two.two .card-content h4 a{
    color:var(--title-color);
    font-family:var(--font-jost);
    font-weight:500;
    font-size:24px;
    line-height:1.4;
    transition:all .3s ease-in-out;
    text-transform:capitalize
}
@media(min-width: 768px)and (max-width: 991px){
    .business-section .blog-card-two.two .card-content h4 a{
        font-size:25px
    }
}
@media(max-width: 767px){
    .business-section .blog-card-two.two .card-content h4 a{
        font-size:25px
    }
}
@media(max-width: 576px){
    .business-section .blog-card-two.two .card-content h4 a{
        font-size:22px
    }
}
.business-section .blog-card-two.two .card-content h4 a:hover{
    color:var(--primary-color);
    transition:all .3s ease-in-out
}
.business-section .blog-card-two.two .card-content .read-more-btn{
    font-family:var(--font-jost);
    font-weight:400;
    color:rgba(17,17,17,.6);
    font-size:16px;
    line-height:1;
    text-decoration:underline;
    transition:all .3s ease-in-out
}
.business-section .blog-card-two.two .card-content .read-more-btn svg{
    margin-left:5px
}
.business-section .blog-card-two.two .card-content .read-more-btn svg path{
    fill:rgba(17,17,17,.6)
}
.business-section .blog-card-two.two .card-content .read-more-btn:hover{
    color:var(--primary-color);
    transition:all .3s ease-in-out
}
.business-section .blog-card-two.two .card-content .read-more-btn:hover svg path{
    fill:var(--primary-color);
    transition:all .3s ease-in-out
}
.business-section .blog-card-two.two .card-content p{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:14px;
    line-height:26px;
    color:var(--paragraph-color-1);
    margin:0;
    padding-bottom:27px
}
@media(max-width: 1199px){
    .business-section .blog-card-two.two .card-content p{
        font-size:17px
    }
}
.business-section .blog-card-two.two .card-content .blog-meta{
    display:flex;
    align-items:center
}
.business-section .blog-card-two.two .card-content .blog-meta .category a{
    display:flex;
    align-items:center;
    gap:4px;
    color:var(--paragraph-color-1)
}
.business-section .blog-card-two.two .card-content .blog-meta .blog-comment span{
    color:var(--paragraph-color-1)
}
.business-section .blog-card-two.two .blog-meta{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    gap:40px;
    flex-wrap:wrap;
    line-height:1;
    margin-bottom:10px
}
@media(max-width: 767px){
    .business-section .blog-card-two.two .blog-meta{
        margin-bottom:25px
    }
}
@media(max-width: 576px){
    .business-section .blog-card-two.two .blog-meta{
        gap:20px
    }
}
.business-section .blog-card-two.two .blog-meta li{
    display:flex;
    align-items:center;
    position:relative;
    transition:.5s
}
.business-section .blog-card-two.two .blog-meta li svg{
    margin-right:8px;
    fill:rgba(var(--title-color-opc), 0.5);
    transition:.25s ease
}
@media(max-width: 767px){
    .business-section .blog-card-two.two .blog-meta li svg{
        width:14px
    }
}
@media(min-width: 576px)and (max-width: 768px){
    .business-section .blog-card-two.two .blog-meta li svg{
        margin-right:5px
    }
}
@media(max-width: 576px){
    .business-section .blog-card-two.two .blog-meta li svg{
        margin-right:5px
    }
}
.business-section .blog-card-two.two .blog-meta li:not(:last-child):after{
    content:"";
    position:absolute;
    top:10%;
    right:-20px;
    width:1px;
    height:12px;
    background-color:var(--paragraph-color-1)
}
.business-section .blog-card-two.two:hover .blog-card-img-wrap .card-img img{
    transform:scale(1.1)
}
.business-section .blog-card-two.two:hover .blog-card-img-wrap .card-img::after{
    height:250%;
    transition:all 600ms linear;
    background-color:rgba(0,0,0,0)
}
.business-section .blog-card-two .blog-card-img-wrap{
    position:relative;
    overflow:hidden;
    border-radius:10px 10px 0 0
}
@media(max-width: 1199px){
    .business-section .blog-card-two .blog-card-img-wrap{
        height:100%
    }
}
.business-section .blog-card-two .blog-card-img-wrap .card-img{
    position:relative;
    overflow:hidden;
    display:block;
    transition:all .5s ease-out;
    border-radius:10px;
    border:1px solid rgba(17,17,17,.25)
}
.business-section .blog-card-two .blog-card-img-wrap .card-img img{
    transition:all .5s ease-out;
    min-height:240px;
    height:100%;
    -o-object-fit:cover;
    object-fit:cover;
    width:100%
}
@media(max-width: 1199px){
    .business-section .blog-card-two .blog-card-img-wrap .card-img img{
        height:100%;
        -o-object-fit:cover;
        object-fit:cover
    }
}
@media(max-width: 991px){
    .business-section .blog-card-two .blog-card-img-wrap .card-img img{
        width:100%
    }
}
.business-section .blog-card-two .blog-card-img-wrap .card-img::after{
    position:absolute;
    width:200%;
    height:0%;
    left:50%;
    top:50%;
    background-color:rgba(255,255,255,.3);
    transform:translate(-50%, -50%) rotate(-45deg);
    content:"";
    z-index:1
}
@media(min-width: 1200px)and (max-width: 1399px){
    .business-section .blog-card-two .card-content{
        padding:0 17px
    }
}
.business-section .blog-card-two .card-content h4{
    margin-bottom:37px
}
@media(min-width: 992px)and (max-width: 1199px){
    .business-section .blog-card-two .card-content h4{
        margin-bottom:18px
    }
}
.business-section .blog-card-two .card-content h4 a{
    color:var(--title-color);
    font-family:var(--font-jost);
    font-weight:500;
    font-size:36px;
    line-height:42px;
    transition:all .3s ease-in-out;
    text-transform:capitalize
}
@media(max-width: 1399px){
    .business-section .blog-card-two .card-content h4 a{
        font-size:30px;
        line-height:1.3
    }
}
@media(max-width: 576px){
    .business-section .blog-card-two .card-content h4 a{
        font-size:24px
    }
}
.business-section .blog-card-two .card-content h4 a:hover{
    color:var(--primary-color);
    transition:all .3s ease-in-out
}
.business-section .blog-card-two .card-content .blog-meta{
    display:flex;
    align-items:center
}
.business-section .blog-card-two .card-content .blog-meta.two{
    display:flex;
    gap:10px
}
.business-section .blog-card-two .card-content .blog-meta .category a{
    display:flex;
    align-items:center;
    gap:4px;
    color:var(--paragraph-color-1)
}
.business-section .blog-card-two .card-content .blog-meta .blog-comment span{
    color:var(--paragraph-color-1)
}
.business-section .blog-card-two .blog-meta{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    gap:40px;
    flex-wrap:wrap;
    line-height:1;
    margin-bottom:19px
}
@media(max-width: 767px){
    .business-section .blog-card-two .blog-meta{
        margin-bottom:25px
    }
}
@media(max-width: 576px){
    .business-section .blog-card-two .blog-meta{
        gap:10px 30px
    }
}
.business-section .blog-card-two .blog-meta li{
    position:relative
}
.business-section .blog-card-two .blog-meta li a{
    display:flex;
    align-items:center;
    transition:.5s;
    text-transform:capitalize;
    color:#666;
    font-family:var(--font-Instrument);
    font-size:15px;
    font-weight:400;
    line-height:16.8px;
    margin:0
}
@media(max-width: 576px){
    .business-section .blog-card-two .blog-meta li a{
        line-height:1.2
    }
}
.business-section .blog-card-two .blog-meta li a svg{
    margin-right:8px;
    fill:rgba(var(--title-color-opc), 0.5);
    transition:.25s ease
}
@media(max-width: 767px){
    .business-section .blog-card-two .blog-meta li a svg{
        width:14px
    }
}
@media(min-width: 576px)and (max-width: 768px){
    .business-section .blog-card-two .blog-meta li a svg{
        margin-right:5px
    }
}
@media(max-width: 576px){
    .business-section .blog-card-two .blog-meta li a svg{
        margin-right:5px
    }
}
.business-section .blog-card-two .blog-meta li a:hover{
    color:var(--primary-color)
}
.business-section .blog-card-two .blog-meta li:not(:last-child):after{
    content:"";
    position:absolute;
    top:10%;
    right:-20px;
    width:1px;
    height:12px;
    background-color:var(--paragraph-color-1)
}
@media(max-width: 576px){
    .business-section .blog-card-two .blog-meta li:not(:last-child):after{
        display:none
    }
}
.business-section .blog-card-two:hover .blog-card-img-wrap .card-img img{
    transform:scale(1.1)
}
.business-section .blog-card-two:hover .blog-card-img-wrap .card-img::after{
    height:250%;
    transition:all 600ms linear;
    background-color:rgba(0,0,0,0)
}
.footer-top-contact{
    background-image:url("../image/shape/home2-footer-bg-shape-1.png");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    border-bottom:1px solid rgba(255,255,255,.1);
    overflow:hidden;
    margin-bottom:-1px
}
@media(max-width: 576px){
    .footer-top-contact{
        padding-left:30px;
        padding-right:30px
    }
}
.footer-top-contact .footer-top-elements{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}
@media(max-width: 576px){
    .footer-top-contact .footer-top-elements{
        flex-direction:column;
        align-items:flex-start
    }
}
.footer-top-contact .section-title h2{
    font-family:var(--font-jost);
    font-weight:600;
    font-size:64px;
    line-height:4.7rem;
    color:var(--white-color);
    margin-bottom:40px
}
@media(max-width: 1499px){
    .footer-top-contact .section-title h2{
        font-size:55px;
        line-height:4rem
    }
}
@media(min-width: 1400px)and (max-width: 1599px){
    .footer-top-contact .section-title h2{
        font-size:50px;
        line-height:1.2;
        margin-bottom:20px
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .footer-top-contact .section-title h2{
        margin-bottom:20px;
        font-size:45px;
        line-height:50px
    }
}
@media(max-width: 991px){
    .footer-top-contact .section-title h2{
        margin-bottom:20px;
        line-height:50px;
        font-size:40px
    }
}
.footer-top-contact .section-title ul{
    display:flex;
    align-items:center;
    gap:10px 35px;
    flex-wrap:wrap
}
@media(max-width: 576px){
    .footer-top-contact .section-title ul{
        flex-direction:column;
        align-items:flex-start
    }
}
.footer-top-contact .section-title ul li a{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:18px;
    line-height:30px;
    color:var(--white-color-opp);
    transition:all .3s ease-in-out
}
.footer-top-contact .section-title ul li a svg{
    margin-right:9px
}
.footer-top-contact .section-title ul li a:hover{
    color:var(--primary-color);
    transition:all .3s ease-in-out
}
.footer-top-contact .section-title ul li a:hover svg path{
    stroke:var(--primary-color);
    transition:all .3s ease-in-out
}
.footer-top-contact .contact-btn .button-area{
    height:127px;
    width:127px;
    border-radius:50%;
    border:1px solid var(--white-color-opp);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.8s
}
.footer-top-contact .contact-btn .button-area .details-button{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:16px;
    line-height:24px;
    margin:0;
    height:127px;
    width:127px;
    border-radius:50%;
    color:var(--white-color);
    display:flex;
    align-items:center;
    justify-content:center
}
.footer-top-contact .contact-btn .button-area:hover{
    box-shadow:inset 0 0 0 10em var(--primary-color);
    border-color:var(--primary-color)
}
.footer-top-contact .contact-btn .button-area:hover .details-button{
    --background-size: 0%;
    --stroke-dashoffset: 26;
    --stroke-duration: 0.3s;
    --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
    --stroke-delay: 0.195s
}
.footer-top-contact .contact-btn .button-area:hover .details-button::after{
    opacity:0;
    transition-delay:0s
}
@media(min-width: 576px)and (max-width: 768px){
    .footer-top-contact .footer-right-img{
        display:none
    }
}
@media(max-width: 576px){
    .footer-top-contact .footer-right-img{
        display:none
    }
}
.footer-section-two{
    background-image:url("../image/shape/home2-footer-bg-shape.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover
}
@media(max-width: 576px){
    .footer-section-two{
        padding-left:15px;
        padding-right:15px
    }
}
.footer-section-two .footer-menu-wrap{
    padding:100px 0;
    border-bottom:1px solid rgba(255,255,255,.1)
}
.footer-section-two .footer-menu-wrap .logo-and-social-media-area .footer-logo{
    padding-bottom:20px
}
.footer-section-two .footer-menu-wrap .logo-and-social-media-area .footer-content p{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:16px;
    line-height:28px;
    max-width:344px;
    width:100%;
    color:rgba(255,255,255,.7);
    text-transform:capitalize;
    margin-bottom:26px
}
.footer-section-two .footer-menu-wrap .logo-and-social-media-area .footer-social-list{
    display:flex;
    align-items:center;
    gap:20px
}
.footer-section-two .footer-menu-wrap .logo-and-social-media-area .footer-social-list li a{
    border:1px solid var(--white-color);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    padding:6px;
    transition:.5s
}
.footer-section-two .footer-menu-wrap .logo-and-social-media-area .footer-social-list li a:hover{
    background-color:var(--primary-color);
    border:1px solid var(--primary-color)
}
.footer-section-two .footer-menu-wrap .logo-and-social-media-area .footer-social-list li a:hover svg path{
    fill:var(--white-color)
}
.footer-section-two .footer-menu-wrap .footer-widget .widget-title h4{
    font-family:var(--font-jost);
    font-size:19px;
    font-weight:500;
    line-height:23.18px;
    letter-spacing:.05em;
    color:var(--white-color);
    margin-bottom:24px;
    position:relative
}
.footer-section-two .footer-menu-wrap .footer-widget .widget-title h4::after{
    content:"";
    position:absolute;
    bottom:-40%;
    left:0;
    width:83px;
    height:1px;
    border-radius:10px;
    background:linear-gradient(90.01deg, #ffffff 0.01%, rgba(255, 255, 255, 0) 102.8%)
}
@media(min-width: 992px)and (max-width: 1199px){
    .footer-section-two .footer-menu-wrap .footer-widget .widget-title h4{
        font-size:19px
    }
}
.footer-section-two .footer-menu-wrap .footer-widget .menu-container .widget-list li{
    padding-bottom:8px
}
.footer-section-two .footer-menu-wrap .footer-widget .menu-container .widget-list li a{
    margin:0;
    color:rgba(255,255,255,.7);
    font-family:var(--font-jost);
    font-weight:400;
    font-size:15px;
    line-height:18.3px;
    letter-spacing:.05em;
    display:inline-block;
    background:linear-gradient(to bottom, #10c581 0%, #10c581 98%);
    background-repeat:no-repeat;
    background-size:0 1px;
    background-position:0% 100%;
    transition:background-size .75s
}
.footer-section-two .footer-menu-wrap .footer-widget .menu-container .widget-list li a:hover{
    background-position:left 100%;
    background-size:100% 1px;
    color:var(--primary-color)
}
.footer-section-two .footer-menu-wrap .newsletter-area .content p{
    font-family:var(--font-jost);
    font-size:19px;
    font-weight:500;
    line-height:23.18px;
    color:var(--white-color);
    margin:0;
    padding-bottom:26px
}
.footer-section-two .footer-menu-wrap .subscribe-form-wrap input{
    width:100%;
    color:var(--white-color);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:26px;
    border-radius:5px;
    background:rgba(0,0,0,0);
    border:1px solid rgba(255,255,255,.1);
    max-width:350px;
    width:100%;
    height:44px;
    padding:10px 10px 10px 20px;
    margin-bottom:34px
}
.footer-section-two .footer-menu-wrap .subscribe-form-wrap button{
    display:inline-flex;
    border-radius:6px
}
.footer-section-two .footer-menu-wrap .subscribe-form-wrap button a{
    font-family:var(--font-jost);
    font-weight:500;
    font-size:14px;
    line-height:14px;
    background-color:var(--white-color);
    color:var(--title-color);
    margin:0;
    padding:16px 30px;
    border-radius:6px
}
.footer-section-two .footer-menu-wrap .subscribe-form-wrap button a:hover{
    background-color:var(--primary-color);
    color:var(--white-color);
    transition:all .5s ease-out
}
.footer-section-two .footer-bottom-wrap .footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    display:flex;
    padding:28px 0;
    flex-wrap:wrap
}
@media(min-width: 768px)and (max-width: 991px){
    .footer-section-two .footer-bottom-wrap .footer-bottom{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:5px
    }
}
@media(max-width: 767px){
    .footer-section-two .footer-bottom-wrap .footer-bottom{
        justify-content:center
    }
}
@media(max-width: 576px){
    .footer-section-two .footer-bottom-wrap .footer-bottom{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:5px
    }
}
.footer-section-two .footer-bottom-wrap .footer-bottom .copy-write-area p{
    font-family:var(--font-jost);
    font-size:13px;
    font-weight:500;
    line-height:16.8px;
    color:rgba(255,255,255,.7);
    margin:0
}
@media(min-width: 768px)and (max-width: 991px){
    .footer-section-two .footer-bottom-wrap .footer-bottom .copy-write-area p{
        font-size:17px;
        line-height:1.4
    }
}
@media(max-width: 767px){
    .footer-section-two .footer-bottom-wrap .footer-bottom .copy-write-area p{
        font-size:15px;
        line-height:1.4
    }
}
@media(min-width: 375px)and (max-width: 576px){
    .footer-section-two .footer-bottom-wrap .footer-bottom .copy-write-area p{
        text-align:center;
        font-size:16px
    }
}
@media(max-width: 425px){
    .footer-section-two .footer-bottom-wrap .footer-bottom .copy-write-area p{
        font-size:13px
    }
}
.footer-section-two .footer-bottom-wrap .footer-bottom .copy-write-area p span{
    color:var(--primary-color)
}
.footer-section-two .footer-bottom-wrap .footer-bottom .footer-bottom-right ul{
    display:flex;
    align-items:center;
    gap:44px
}
@media(min-width: 768px)and (max-width: 991px){
    .footer-section-two .footer-bottom-wrap .footer-bottom .footer-bottom-right ul{
        gap:20px
    }
}
@media(max-width: 767px){
    .footer-section-two .footer-bottom-wrap .footer-bottom .footer-bottom-right ul{
        gap:20px
    }
}
@media(max-width: 425px){
    .footer-section-two .footer-bottom-wrap .footer-bottom .footer-bottom-right ul{
        gap:15px
    }
}
.footer-section-two .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li{
    position:relative
}
.footer-section-two .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li a{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:14px;
    line-height:16.8px;
    color:rgba(255,255,255,.7);
    margin:0
}
.footer-section-two .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li:not(:last-child):after{
    position:absolute;
    top:0%;
    left:143px;
    content:" | ";
    font-size:16px;
    color:#10c581
}
@media(max-width: 767px){
    .footer-section-two .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li:not(:last-child):after{
        left:130px
    }
}
.banner-section-three{
    background-color:var(--white-color);
    background-image:url("../image/shape/home3-bg-shape.png");
    background-repeat:no-repeat;
    position:relative;
    background-size:cover;
    padding-top:135px
}
@media(max-width: 576px){
    .banner-section-three{
        padding-left:15px;
        padding-right:15px
    }
}
.banner-section-three .banner-title h1{
    font-family:var(--font-Instrument);
    font-size:72px;
    font-weight:600;
    line-height:76px;
    text-align:center;
    text-decoration:underline;
    text-decoration-thickness:3%;
    text-underline-offset:4%;
    color:var(--title-color);
    max-width:1112px;
    width:100%;
    margin:0 auto
}
@media(min-width: 1400px)and (max-width: 1599px){
    .banner-section-three .banner-title h1{
        font-size:65px
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .banner-section-three .banner-title h1{
        font-size:55px
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .banner-section-three .banner-title h1{
        font-size:45px;
        line-height:1.4
    }
}
@media(max-width: 767px){
    .banner-section-three .banner-title h1{
        font-size:34px;
        line-height:1;
        text-align:center
    }
}
@media(max-width: 576px){
    .banner-section-three .banner-title h1{
        line-height:1.3
    }
}
.banner-section-three .banner-title h1 .star-one{
    margin-right:35px
}
@media(min-width: 768px)and (max-width: 991px){
    .banner-section-three .banner-title h1 .star-one{
        width:9%;
        margin-right:25px
    }
}
@media(max-width: 767px){
    .banner-section-three .banner-title h1 .star-one{
        width:7%;
        margin-right:25px
    }
}
@media(max-width: 576px){
    .banner-section-three .banner-title h1 .star-one{
        display:none
    }
}
@media(max-width: 375px){
    .banner-section-three .banner-title h1 .star-one{
        display:none
    }
}
.banner-section-three .banner-title h1 .star-two{
    margin-left:35px
}
@media(min-width: 768px)and (max-width: 991px){
    .banner-section-three .banner-title h1 .star-two{
        width:9%;
        margin-left:25px
    }
}
@media(max-width: 767px){
    .banner-section-three .banner-title h1 .star-two{
        width:7%;
        margin-left:25px
    }
}
@media(max-width: 576px){
    .banner-section-three .banner-title h1 .star-two{
        display:none
    }
}
@media(max-width: 375px){
    .banner-section-three .banner-title h1 .star-two{
        display:none
    }
}
.banner-section-three .banner-content{
    background-color:#ffe7e1;
    padding:64px 47px;
    border-radius:50px 0 50px 0
}
@media(max-width: 991px){
    .banner-section-three .banner-content{
        padding:40px 30px
    }
}
.banner-section-three .banner-content p{
    font-family:var(--font-jost);
    font-size:18px;
    font-weight:400;
    line-height:26px;
    color:var(--paragraph-color-1);
    text-transform:capitalize;
    text-align:center;
    margin-bottom:26px
}
.banner-section-three .banner-content .clients-image{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:10px
}
.banner-section-three .banner-content .clients-image .images{
    display:flex;
    gap:0
}
.banner-section-three .banner-content .clients-image .images img{
    border-radius:50%;
    border:2px solid var(--white-color);
    height:45px
}
.banner-section-three .banner-content .clients-image .images .child1{
    margin-left:-12px;
    border-radius:50%
}
.banner-section-three .banner-content .clients-image .more-number .plus{
    background-color:var(--title-color);
    color:var(--white-color);
    padding:15px;
    border-radius:50%;
    height:44px;
    width:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left:-12px;
    border:2px solid var(--white-color)
}
.banner-section-three .banner-content .content p{
    font-family:var(--font-jost);
    font-size:15px;
    font-weight:400;
    line-height:18px;
    color:var(--paragraph-color-3);
    margin-bottom:31px
}
.banner-section-three .banner-content .banner-button{
    display:flex;
    align-items:center;
    justify-content:center
}
.banner-section-three .banner-content .banner-button .explore-button{
    border:1px solid var(--title-color);
    color:var(--title-color);
    flex-direction:column;
    text-align:center;
    transition:all .3s ease-in-out;
    height:120px;
    width:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    border-radius:50%;
    line-height:125%
}
.banner-section-three .banner-content .banner-button .explore-button span{
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:500;
    line-height:22px;
    text-align:center;
    margin:0
}
.banner-section-three .banner-content .banner-button .explore-button svg{
    transform:rotate(0);
    transition:.35s
}
.banner-section-three .banner-content .banner-button .explore-button:hover{
    background-color:var(--primary-color);
    border:1px solid var(--primary-color);
    color:var(--white-color);
    transition:all .3s ease-in-out
}
.banner-section-three .banner-content .banner-button .explore-button:hover svg{
    transform:rotate(45deg);
    transition:all .3s ease-in-out
}
.banner-section-three .banner-content .banner-button .explore-button:hover svg path{
    fill:var(--white-color);
    transition:all .3s ease-in-out
}
.banner-section-three .banner-image{
    position:relative;
    overflow:hidden;
    height:100%;
    border-radius:0 50px 0 50px
}
.banner-section-three .banner-image::after{
    content:"";
    position:absolute;
    width:500%;
    height:0%;
    left:50%;
    top:50%;
    background-color:rgba(255,255,255,.3);
    transform:translate(-50%, -50%) rotate(-45deg);
    z-index:1
}
.banner-section-three .banner-image .banner-img{
    transition:.5s;
    height:100%;
    -o-object-fit:cover;
    object-fit:cover
}
.banner-section-three .banner-image:hover .banner-img{
    transition:.5s;
    transform:scale(1.1)
}
.banner-section-three .banner-image:hover::after{
    height:250%;
    transition:all 600ms linear;
    background-color:rgba(0,0,0,0)
}
.our-partner-section{
    background-color:var(--white-color)
}
@media(max-width: 576px){
    .our-partner-section{
        padding-left:15px;
        padding-right:15px
    }
}
.our-partner-section .logo-area .logo-title{
    font-family:var(--font-Instrument);
    font-size:20px;
    font-weight:500;
    line-height:38px;
    color:#000;
    margin:0;
    position:relative
}
.our-partner-section .logo-area .logo-title::before{
    position:absolute;
    content:"";
    width:90%;
    height:1px;
    background-color:rgba(17,17,17,.1);
    right:0%;
    top:50%
}
@media(min-width: 992px)and (max-width: 1199px){
    .our-partner-section .logo-area .logo-title::before{
        width:85%
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .our-partner-section .logo-area .logo-title::before{
        width:80%
    }
}
@media(max-width: 767px){
    .our-partner-section .logo-area .logo-title::before{
        display:none
    }
}
.our-partner-section .logo-area .logo-details{
    font-family:var(--font-Instrument);
    font-size:16px;
    font-weight:400;
    line-height:38px;
    color:#585858;
    display:flex;
    align-items:center;
    justify-content:end;
    margin:0;
    position:relative
}
@media(max-width: 767px){
    .our-partner-section .logo-area .logo-details{
        justify-content:start
    }
}
.our-partner-section .logo-area .logo-details::before{
    position:absolute;
    content:"";
    width:81%;
    height:1px;
    background-color:rgba(17,17,17,.1);
    left:0%;
    bottom:45%
}
@media(min-width: 992px)and (max-width: 1199px){
    .our-partner-section .logo-area .logo-details::before{
        width:73%
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .our-partner-section .logo-area .logo-details::before{
        width:63%
    }
}
@media(max-width: 767px){
    .our-partner-section .logo-area .logo-details::before{
        display:none
    }
}
.our-partner-section .logo-area .logo-wrap{
    overflow:hidden;
    margin:0 auto;
    padding:17px 0 10px 0
}
.our-partner-section .logo-area .logo-wrap a{
    margin-left:70px
}
.who-we-are-section{
    background-color:var(--white-color)
}
@media(max-width: 576px){
    .who-we-are-section{
        padding-left:15px;
        padding-right:15px
    }
}
.who-we-are-section .section-title h2{
    padding-bottom:60px
}
@media(max-width: 767px){
    .who-we-are-section .section-title h2{
        padding-bottom:40px
    }
}
@media(max-width: 991px){
    .who-we-are-section .section-title h2{
        font-size:45px;
        line-height:55px
    }
}
@media(max-width: 767px){
    .who-we-are-section .section-title h2{
        font-size:35px;
        line-height:45px
    }
}
.who-we-are-section .who-we-img{
    position:relative;
    overflow:hidden
}
.who-we-are-section .who-we-img::after{
    content:"";
    position:absolute;
    width:500%;
    height:0%;
    left:50%;
    top:50%;
    background-color:rgba(255,255,255,.3);
    transform:translate(-50%, -50%) rotate(-45deg);
    z-index:1
}
.who-we-are-section .who-we-img .who-image{
    height:100%;
    -o-object-fit:cover;
    object-fit:cover;
    transition:.5s
}
.who-we-are-section .who-we-img:hover .who-image{
    transition:.5s;
    transform:scale(1.1)
}
.who-we-are-section .who-we-img:hover::after{
    height:250%;
    transition:all 600ms linear;
    background-color:rgba(0,0,0,0)
}
.who-we-are-section .who-we-img-two{
    position:relative;
    overflow:hidden;
    margin-top:-60px;
    height:100%
}
.who-we-are-section .who-we-img-two::after{
    content:"";
    position:absolute;
    width:500%;
    height:0%;
    left:50%;
    top:50%;
    background-color:rgba(255,255,255,.3);
    transform:translate(-50%, -50%) rotate(-45deg);
    z-index:1
}
@media(min-width: 1200px)and (max-width: 1399px){
    .who-we-are-section .who-we-img-two{
        height:90%;
        margin-top:-10px
    }
}
@media(max-width: 1199px){
    .who-we-are-section .who-we-img-two{
        height:80%;
        margin-top:50px
    }
}
@media(max-width: 991px){
    .who-we-are-section .who-we-img-two{
        height:91%;
        margin-top:40px
    }
}
.who-we-are-section .who-we-img-two .who-image{
    height:100%;
    -o-object-fit:cover;
    object-fit:cover;
    transition:.5s
}
.who-we-are-section .who-we-img-two:hover .who-image{
    transition:.5s;
    transform:scale(1.1)
}
.who-we-are-section .who-we-img-two:hover::after{
    height:250%;
    transition:all 600ms linear;
    background-color:rgba(0,0,0,0)
}
.who-we-are-section .who-we-content{
    display:flex;
    align-items:center;
    padding:76px 50px 55px;
    justify-content:space-between
}
@media(min-width: 992px)and (max-width: 1199px){
    .who-we-are-section .who-we-content{
        flex-wrap:wrap;
        padding:0;
        margin-left:40px
    }
}
@media(max-width: 991px){
    .who-we-are-section .who-we-content{
        padding:50px 10px 0;
        justify-content:start
    }
}
@media(max-width: 767px){
    .who-we-are-section .who-we-content{
        flex-wrap:wrap
    }
}
.who-we-are-section .who-we-content .who-about-content{
    max-width:446px;
    width:100%
}
.who-we-are-section .who-we-content .who-about-content p{
    font-family:var(--font-jost);
    font-size:17px;
    font-weight:400;
    line-height:30px;
    color:#676767;
    margin-bottom:36px
}
.who-we-are-section .who-we-content .who-about-content ul{
    margin-bottom:36px
}
@media(max-width: 767px){
    .who-we-are-section .who-we-content .who-about-content ul{
        margin-bottom:0
    }
}
.who-we-are-section .who-we-content .who-about-content ul li{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-jost);
    font-size:18px;
    font-weight:400;
    line-height:24px;
    color:var(--title-color);
    margin-bottom:18px
}
.who-we-are-section .who-we-content .who-about-content ul li:last-child{
    margin-bottom:0
}
.who-we-are-section .who-we-content .explore-button{
    border:1px solid var(--title-color);
    height:120px;
    width:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    text-align:center;
    color:var(--title-color);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:500;
    line-height:22px;
    transition:all .3s ease-in-out
}
@media(max-width: 991px){
    .who-we-are-section .who-we-content .explore-button{
        height:105px;
        width:105px
    }
}
@media(max-width: 767px){
    .who-we-are-section .who-we-content .explore-button{
        margin:30px 0;
        height:120px;
        width:120px
    }
}
@media(max-width: 425px){
    .who-we-are-section .who-we-content .explore-button{
        margin-top:30px;
        margin-left:10px;
        height:120px;
        width:120px
    }
}
.who-we-are-section .who-we-content .explore-button:hover{
    box-shadow:inset 0 0 0 10em var(--primary-color);
    border-color:var(--primary-color);
    color:var(--white-color);
    transition:.8s
}
.who-we-are-section .who-we-content .explore-button:hover .explore-button{
    --background-size: 0%;
    --stroke-dashoffset: 26;
    --stroke-duration: 0.3s;
    --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
    --stroke-delay: 0.195s
}
.who-we-are-section .who-we-content .explore-button:hover .explore-button::after{
    opacity:0;
    transition-delay:0s
}
.service-section-three{
    background-color:#ebfbff;
    overflow:hidden
}
@media(max-width: 576px){
    .service-section-three{
        padding-left:15px;
        padding-right:15px
    }
}
.service-section-three .section-title h2{
    max-width:660px;
    width:100%
}
@media(min-width: 992px)and (max-width: 1199px){
    .service-section-three .section-title h2{
        font-size:36px
    }
}
@media(max-width: 991px){
    .service-section-three .section-title h2{
        margin-bottom:20px
    }
}
.service-section-three .section-title P{
    max-width:420px;
    width:100%;
    position:relative
}
.service-section-three .section-title P::before{
    content:"";
    position:absolute;
    top:10%;
    left:-20%;
    width:1px;
    height:70px;
    background-color:rgba(17,17,17,.1)
}
@media(min-width: 1400px)and (max-width: 1599px){
    .service-section-three .section-title P::before{
        top:7%;
        left:-25%
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .service-section-three .section-title P::before{
        display:none
    }
}
@media(max-width: 991px){
    .service-section-three .section-title P::before{
        display:none
    }
}
.service-section-three .service-part{
    display:flex;
    justify-content:space-between;
    gap:220px;
    border-top:1px solid rgba(17,17,17,.1);
    padding:30px 0
}
@media(min-width: 992px)and (max-width: 1199px){
    .service-section-three .service-part{
        gap:60px
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .service-section-three .service-part{
        gap:30px
    }
}
@media(max-width: 767px){
    .service-section-three .service-part{
        gap:30px;
        flex-wrap:wrap
    }
}
@media(max-width: 576px){
    .service-section-three .service-part{
        flex-direction:column
    }
}
.service-section-three .service-part:last-child{
    border-bottom:1px solid rgba(17,17,17,.1)
}
.service-section-three .service-part .service-content .title-and-no{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:25px
}
@media(min-width: 992px)and (max-width: 1199px){
    .service-section-three .service-part .service-content .title-and-no{
        gap:5px
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .service-section-three .service-part .service-content .title-and-no{
        gap:5px
    }
}
@media(max-width: 767px){
    .service-section-three .service-part .service-content .title-and-no{
        margin-top:10px
    }
}
.service-section-three .service-part .service-content .title-and-no h3{
    margin:0;
    font-family:var(--font-Instrument);
    font-size:20px;
    font-weight:600;
    line-height:58px;
    color:var(--title-color)
}
.service-section-three .service-part .service-content .title-and-no h2{
    margin:0;
    font-family:var(--font-Instrument);
    font-size:39px;
    font-weight:600;
    line-height:58px;
    color:var(--title-color)
}
@media(min-width: 992px)and (max-width: 1199px){
    .service-section-three .service-part .service-content .title-and-no h2{
        font-size:27px
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .service-section-three .service-part .service-content .title-and-no h2{
        font-size:28px
    }
}
@media(max-width: 767px){
    .service-section-three .service-part .service-content .title-and-no h2{
        font-size:24px
    }
}
.service-section-three .service-part .service-content .service-bottom-wrap{
    position:static;
    transition:none;
    display:none;
    margin-left:50px;
    margin-top:20px
}
@media(min-width: 992px)and (max-width: 1199px){
    .service-section-three .service-part .service-content .service-bottom-wrap{
        margin-top:0
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .service-section-three .service-part .service-content .service-bottom-wrap{
        margin-top:5px;
        margin-left:33px
    }
}
@media(max-width: 767px){
    .service-section-three .service-part .service-content .service-bottom-wrap{
        margin-top:0
    }
}
.service-section-three .service-part .service-content .service-bottom-wrap p{
    max-width:420px;
    width:100%;
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:24px;
    color:#676767;
    margin-bottom:28px
}
@media(min-width: 992px)and (max-width: 1199px){
    .service-section-three .service-part .service-content .service-bottom-wrap p{
        max-width:500px;
        width:100%
    }
}
.service-section-three .service-part .service-content .service-bottom-wrap ul{
    max-width:260px;
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap
}
.service-section-three .service-part .service-content .service-bottom-wrap ul li a{
    font-family:var(--font-jost);
    font-size:14px;
    font-weight:400;
    line-height:24px;
    color:var(--title-color);
    border:1px solid rgba(17,17,17,.5);
    padding:6px 19px;
    border-radius:50px
}
.service-section-three .service-part .right-side-content{
    display:flex;
    align-items:center;
    gap:175px;
    margin-right:54px
}
@media(min-width: 992px)and (max-width: 1199px){
    .service-section-three .service-part .right-side-content{
        gap:80px
    }
}
@media(max-width: 767px){
    .service-section-three .service-part .right-side-content{
        gap:50px
    }
}
.service-section-three .service-part .right-side-content .service-btn-right a{
    font-family:var(--font-Instrument);
    font-size:16px;
    font-weight:500;
    line-height:58px;
    color:var(--title-color);
    border:1px solid var(--title-color);
    width:110px;
    height:110px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    border-radius:50%;
    transition:all .3s ease-in-out
}
.service-section-three .service-part .right-side-content .service-btn-right a svg{
    fill:var(--title-color);
    transition:all .3s ease-in-out
}
@media(min-width: 768px)and (max-width: 991px){
    .service-section-three .service-part .right-side-content .service-btn-right a{
        width:90px;
        height:90px;
        font-size:14px
    }
}
@media(max-width: 767px){
    .service-section-three .service-part .right-side-content .service-btn-right a{
        width:80px;
        height:80px;
        font-size:12px
    }
}
.service-section-three .service-part .right-side-content .service-btn-right a:hover{
    background-color:var(--primary-color);
    border:1px solid var(--primary-color);
    color:var(--white-color);
    transition:all .3s ease-in-out
}
.service-section-three .service-part .right-side-content .service-btn-right a:hover svg{
    transform:rotate(45deg)
}
.service-section-three .service-part .right-side-content .service-btn-right a:hover svg path{
    fill:var(--white-color);
    transition:all .3s ease-in-out
}
.service-section-three .service-part .right-side-content .service-img-wrap{
    position:static;
    transition:none;
    display:none
}
.service-section-three .service-part .right-side-content .service-img-wrap img{
    border-radius:5px
}
@media(max-width: 991px){
    .service-section-three .service-part .right-side-content .service-img-wrap img{
        display:none
    }
}
.portfolio-section{
    background-color:var(--white-color)
}
@media(max-width: 576px){
    .portfolio-section{
        padding-left:15px;
        padding-right:15px
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .portfolio-section .section-title h2{
        margin-bottom:0
    }
}
@media(max-width: 991px){
    .portfolio-section .section-title h2{
        margin-bottom:0
    }
}
.portfolio-section .portfolio-card{
    border:1px solid rgba(0,0,0,.1)
}
.portfolio-section .portfolio-card .portfolio-image{
    position:relative;
    overflow:hidden
}
.portfolio-section .portfolio-card .portfolio-image::after{
    content:"";
    position:absolute;
    width:500%;
    height:0%;
    left:50%;
    top:50%;
    background-color:rgba(255,255,255,.3);
    transform:translate(-50%, -50%) rotate(-45deg);
    z-index:1
}
.portfolio-section .portfolio-card .portfolio-image .portfolio-img{
    height:100%;
    width:100%;
    -o-object-fit:cover;
    object-fit:cover;
    transition:.5s
}
.portfolio-section .portfolio-card .portfolio-image:hover .portfolio-img{
    transition:.5s;
    transform:scale(1.1)
}
.portfolio-section .portfolio-card .portfolio-image:hover::after{
    height:250%;
    transition:all 600ms linear;
    background-color:rgba(0,0,0,0)
}
.portfolio-section .portfolio-card .portfolio-content{
    padding:24px
}
.portfolio-section .portfolio-card .portfolio-content h6{
    font-family:var(--font-jost);
    font-size:14px;
    font-weight:500;
    line-height:24px;
    letter-spacing:.05em;
    color:var(--primary-color);
    margin-bottom:2.5px;
    text-transform:uppercase
}
.portfolio-section .portfolio-card .portfolio-content h3{
    margin-bottom:28px
}
.portfolio-section .portfolio-card .portfolio-content h3 a{
    font-family:var(--font-Instrument);
    font-size:27px;
    font-weight:500;
    line-height:24px;
    color:var(--title-color);
    margin:0;
    transition:all .3s ease-in-out
}
@media(min-width: 1200px)and (max-width: 1399px){
    .portfolio-section .portfolio-card .portfolio-content h3 a{
        font-size:23px
    }
}
@media(max-width: 1199px){
    .portfolio-section .portfolio-card .portfolio-content h3 a{
        font-size:19px
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .portfolio-section .portfolio-card .portfolio-content h3 a{
        font-size:22px
    }
}
@media(max-width: 767px){
    .portfolio-section .portfolio-card .portfolio-content h3 a{
        font-size:25px
    }
}
.portfolio-section .portfolio-card .portfolio-content h3 a:hover{
    color:var(--primary-color)
}
.portfolio-section .portfolio-card .portfolio-content .view-btn{
    display:flex;
    align-items:center;
    max-width:100px;
    width:100%
}
.portfolio-section .portfolio-card .portfolio-content .view-btn .icon svg{
    transition:all .3s ease-in-out
}
.portfolio-section .portfolio-card .portfolio-content .view-btn .icon svg path{
    fill:rgba(17,17,17,.7)
}
.portfolio-section .portfolio-card .portfolio-content .view-btn .primary-button{
    color:rgba(17,17,17,.7);
    font-family:var(--font-Instrument);
    font-size:14px;
    font-weight:500;
    line-height:17px;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    background:linear-gradient(to bottom, #111111 0%, #111111 98%);
    background-size:100% 1px;
    background-repeat:no-repeat;
    background-position:left 100%;
    transition:all .3s ease-in-out
}
.portfolio-section .portfolio-card .portfolio-content .view-btn .primary-button:hover{
    color:var(--primary-color);
    background-size:0 1px;
    background-position:0% 100%;
    transition:all .3s ease-in-out
}
.portfolio-section .portfolio-card .portfolio-content .view-btn:hover .primary-button{
    color:var(--primary-color);
    background-size:0 1px;
    background-position:0% 100%;
    transition:all .3s ease-in-out
}
.portfolio-section .portfolio-card .portfolio-content .view-btn:hover .icon svg{
    transform:rotate(45deg);
    transition:all .3s ease-in-out
}
.portfolio-section .portfolio-card .portfolio-content .view-btn:hover .icon svg path{
    fill:var(--primary-color);
    transition:all .3s ease-in-out
}
.portfolio-section .view-content-and-button{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap
}
.portfolio-section .view-content-and-button p{
    font-family:var(--font-Instrument);
    font-size:16px;
    font-weight:400;
    line-height:24px;
    margin:0;
    color:#585858
}
.portfolio-section .view-content-and-button .view-btn{
    display:flex;
    align-items:center;
    margin-left:16px
}
.portfolio-section .view-content-and-button .view-btn .icon svg{
    transition:all .3s ease-in-out
}
.portfolio-section .view-content-and-button .view-btn .icon svg path{
    fill:var(--title-color)
}
.portfolio-section .view-content-and-button .view-btn .primary-button{
    color:var(--title-color);
    font-family:var(--font-Instrument);
    font-size:16px;
    font-weight:400;
    line-height:1.2;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    background:linear-gradient(to bottom, #111111 0%, #111111 98%);
    background-size:100% 1px;
    background-repeat:no-repeat;
    background-position:left 100%;
    transition:all .3s ease-in-out
}
.portfolio-section .view-content-and-button .view-btn .primary-button:hover{
    color:var(--primary-color);
    background-size:0 1px;
    background-position:0% 100%;
    transition:all .3s ease-in-out
}
.portfolio-section .view-content-and-button .view-btn .primary-button:hover svg{
    transform:rotate(45deg);
    transition:all .3s ease-in-out
}
.portfolio-section .view-content-and-button .view-btn .primary-button:hover svg path{
    fill:var(--primary-color);
    transition:all .3s ease-in-out
}
.portfolio-section .view-content-and-button .view-btn:hover .primary-button{
    color:var(--primary-color);
    background-size:0 1px;
    background-position:0% 100%;
    transition:all .3s ease-in-out
}
.portfolio-section .view-content-and-button .view-btn:hover svg{
    transform:rotate(45deg);
    transition:all .3s ease-in-out
}
.portfolio-section .view-content-and-button .view-btn:hover svg path{
    fill:var(--primary-color);
    transition:all .3s ease-in-out
}
.why-choose-section{
    background-image:url("../image/banner-img/why-choose-us.png");
    background-size:cover;
    background-repeat:no-repeat
}
@media(max-width: 576px){
    .why-choose-section{
        padding-left:15px;
        padding-right:15px
    }
}
.why-choose-section .section-title h2{
    margin-bottom:26px
}
@media(min-width: 992px)and (max-width: 1199px){
    .why-choose-section .section-title h2{
        font-size:36px;
        line-height:48px
    }
}
.why-choose-section .section-title P{
    line-height:32px;
    max-width:587px;
    width:100%;
    color:#676767;
    margin-bottom:50px
}
.why-choose-section .choose-countdown-area ul{
    display:flex;
    align-items:center;
    gap:71px;
    flex-wrap:wrap
}
@media(max-width: 576px){
    .why-choose-section .choose-countdown-area ul{
        gap:40px
    }
}
@media(max-width: 375px){
    .why-choose-section .choose-countdown-area ul{
        gap:30px
    }
}
.why-choose-section .choose-countdown-area ul .single-countdown{
    position:relative
}
.why-choose-section .choose-countdown-area ul .single-countdown::before{
    content:"";
    height:45px;
    width:1px;
    background:rgba(17,17,17,.1);
    position:absolute;
    right:-35px;
    top:50%;
    transform:translateY(-50%)
}
@media(max-width: 576px){
    .why-choose-section .choose-countdown-area ul .single-countdown::before{
        display:none
    }
}
.why-choose-section .choose-countdown-area ul .single-countdown:last-child::before{
    display:none
}
.why-choose-section .choose-countdown-area ul .single-countdown .content{
    position:relative
}
.why-choose-section .choose-countdown-area ul .single-countdown .content::before{
    content:"";
    height:76px;
    width:1px;
    background:linear-gradient(rgba(17, 17, 17, 0), rgba(17, 17, 17, 0.5), rgba(17, 17, 17, 0));
    position:absolute;
    right:-33px;
    top:70%;
    transform:translateY(-50%)
}
.why-choose-section .choose-countdown-area ul .single-countdown .content:last-child::before{
    display:none
}
.why-choose-section .choose-countdown-area ul .single-countdown .content .number{
    display:flex;
    justify-content:center
}
.why-choose-section .choose-countdown-area ul .single-countdown .content .number h5{
    font-family:var(--font-Instrument);
    font-size:32px;
    font-weight:600;
    line-height:1;
    color:var(--title-color);
    margin:0
}
.why-choose-section .choose-countdown-area ul .single-countdown .content .number span{
    font-family:var(--font-Instrument);
    font-size:32px;
    font-weight:600;
    line-height:1;
    color:var(--title-color);
    margin-bottom:2px
}
.why-choose-section .choose-countdown-area ul .single-countdown .content span{
    font-family:var(--font-jost);
    font-size:14px;
    font-weight:400;
    line-height:28px;
    color:var(--paragraph-color-3);
    margin:0
}
@media(min-width: 992px)and (max-width: 1199px){
    .why-choose-section .choose-countdown-area ul .single-countdown .content span{
        font-size:11px
    }
}
@media(max-width: 767px){
    .why-choose-section .choose-countdown-area ul .single-countdown .content span{
        font-size:13px
    }
}
.why-choose-section .right-side-feature .single-feature{
    display:flex;
    justify-content:center;
    gap:28px;
    margin-bottom:51px
}
@media(min-width: 768px)and (max-width: 991px){
    .why-choose-section .right-side-feature .single-feature{
        display:flex;
        justify-content:start
    }
}
@media(max-width: 767px){
    .why-choose-section .right-side-feature .single-feature{
        display:flex;
        justify-content:start
    }
}
.why-choose-section .right-side-feature .single-feature:last-child{
    margin-bottom:0
}
.why-choose-section .right-side-feature .single-feature{
    position:relative
}
.why-choose-section .right-side-feature .single-feature::before{
    content:"";
    height:100px;
    width:1px;
    background:rgba(17,17,17,.1);
    position:absolute;
    left:24%;
    top:100%;
    transform:translateY(-50%)
}
@media(min-width: 992px)and (max-width: 1199px){
    .why-choose-section .right-side-feature .single-feature::before{
        left:62px
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .why-choose-section .right-side-feature .single-feature::before{
        left:4.5%
    }
}
@media(max-width: 767px){
    .why-choose-section .right-side-feature .single-feature::before{
        left:6%
    }
}
.why-choose-section .right-side-feature .single-feature:last-child::before{
    display:none
}
.why-choose-section .right-side-feature .single-feature .icon{
    background-color:#fff;
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    padding:16px;
    position:relative;
    z-index:1
}
.why-choose-section .right-side-feature .single-feature .content{
    max-width:303px;
    width:100%
}
.why-choose-section .right-side-feature .single-feature .content h3{
    font-family:var(--font-Instrument);
    font-size:28px;
    font-weight:600;
    line-height:28px;
    color:var(--title-color);
    margin-bottom:8px
}
@media(max-width: 576px){
    .why-choose-section .right-side-feature .single-feature .content h3{
        font-size:25px
    }
}
.why-choose-section .right-side-feature .single-feature .content p{
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:24px;
    color:var(--paragraph-color-1);
    margin:0
}
.why-choose-section .right-side-feature .single-feature:hover .icon svg{
    animation:bounceIn 1s linear
}
.contact-section-three{
    background-color:var(--white-color);
    position:relative
}
@media(max-width: 576px){
    .contact-section-three{
        padding-left:15px;
        padding-right:15px
    }
}
.contact-section-three .section-title .sub-title-three{
    text-transform:capitalize
}
.contact-section-three .section-title h2{
    margin-bottom:20px
}
@media(min-width: 992px)and (max-width: 1199px){
    .contact-section-three .section-title h2{
        font-size:35px;
        line-height:40px;
        margin-bottom:20px
    }
}
@media(max-width: 991px){
    .contact-section-three .section-title h2{
        max-width:540px;
        width:100%
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .contact-section-three .section-title h2{
        font-size:40px;
        line-height:45px
    }
}
.contact-section-three .section-title P{
    max-width:520px;
    width:100%;
    margin-bottom:155px;
    text-transform:none
}
@media(min-width: 992px)and (max-width: 1199px){
    .contact-section-three .section-title P{
        margin-bottom:55px
    }
}
@media(max-width: 991px){
    .contact-section-three .section-title P{
        margin-bottom:55px
    }
}
.contact-section-three .vector-shape{
    position:absolute;
    bottom:40%;
    right:61%
}
@media(min-width: 1200px)and (max-width: 1399px){
    .contact-section-three .vector-shape{
        display:none
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .contact-section-three .vector-shape{
        display:none
    }
}
@media(max-width: 991px){
    .contact-section-three .vector-shape{
        display:none
    }
}
.contact-section-three .contact-info-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap
}
@media(min-width: 992px)and (max-width: 1199px){
    .contact-section-three .contact-info-wrapper{
        display:flex;
        align-items:center;
        justify-content:space-around;
        gap:50px
    }
}
@media(max-width: 576px){
    .contact-section-three .contact-info-wrapper{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:40px
    }
}
.contact-section-three .contact-info-wrapper .single-info{
    position:relative
}
.contact-section-three .contact-info-wrapper .single-info::before{
    content:"";
    height:76px;
    width:1px;
    background:linear-gradient(rgba(17, 17, 17, 0), rgba(17, 17, 17, 0.5), rgba(17, 17, 17, 0));
    position:absolute;
    right:-33px;
    top:70%;
    transform:translateY(-50%)
}
@media(min-width: 1200px)and (max-width: 1399px){
    .contact-section-three .contact-info-wrapper .single-info::before{
        display:none
    }
}
@media(max-width: 1199px){
    .contact-section-three .contact-info-wrapper .single-info::before{
        content:"";
        height:50px;
        width:1px;
        background:linear-gradient(rgba(17, 17, 17, 0), rgba(17, 17, 17, 0.5), rgba(17, 17, 17, 0));
        position:absolute;
        right:-70px;
        top:80%;
        transform:translateY(-50%)
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .contact-section-three .contact-info-wrapper .single-info::before{
        display:none
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .contact-section-three .contact-info-wrapper .single-info::before{
        display:none
    }
}
@media(max-width: 767px){
    .contact-section-three .contact-info-wrapper .single-info::before{
        display:none
    }
}
.contact-section-three .contact-info-wrapper .single-info:last-child::before{
    display:none
}
.contact-section-three .contact-info-wrapper .single-info .icon{
    background-color:#cffbea;
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    padding:14px;
    margin:0 auto
}
.contact-section-three .contact-info-wrapper .single-info .icon svg path{
    fill:var(--title-color)
}
.contact-section-three .contact-info-wrapper .single-info .content{
    margin-top:24px
}
.contact-section-three .contact-info-wrapper .single-info .content h6{
    margin-bottom:9px;
    text-align:center
}
.contact-section-three .contact-info-wrapper .single-info .content h6 a{
    font-family:var(--font-jost);
    font-size:18px;
    font-weight:400;
    line-height:20px;
    letter-spacing:.01em;
    margin-bottom:20px;
    color:var(--title-color)
}
.contact-section-three .contact-info-wrapper .single-info .content h6 a:last-child{
    margin-bottom:0
}
.contact-section-three .contact-info-wrapper .single-info:hover .icon svg{
    animation:bounceIn 1s linear
}
.contact-section-three .inquiry-form{
    background-color:#f4f6fc;
    padding:28px 44px;
    border-radius:20px
}
.contact-section-three .inquiry-form .title h3{
    color:var(--title-color);
    font-family:var(--font-Instrument);
    font-size:36px;
    font-weight:500;
    line-height:58px;
    margin-bottom:12px
}
@media(min-width: 992px)and (max-width: 1199px){
    .contact-section-three .inquiry-form .title h3{
        font-size:35px;
        margin-bottom:22px
    }
}
@media(max-width: 375px){
    .contact-section-three .inquiry-form .title h3{
        font-size:33px
    }
}
.contact-section-three .inquiry-form .title p{
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:24px;
    color:var(--paragraph-color-3);
    margin-bottom:35px
}
.contact-section-three .inquiry-form .form-inner{
    position:relative;
    line-height:1
}
.contact-section-three .inquiry-form .form-inner label{
    color:var(--title-color);
    font-family:var(--font-jost);
    font-size:18px;
    font-weight:400;
    line-height:24px;
    display:block;
    margin:0
}
.contact-section-three .inquiry-form .form-inner label span{
    font-size:16px;
    font-weight:400;
    line-height:24px;
    color:var(--paragraph-color-3);
    margin:0
}
.contact-section-three .inquiry-form .form-inner textarea{
    border:none
}
.contact-section-three .inquiry-form .form-inner input,.contact-section-three .inquiry-form .form-inner textarea{
    color:var(--title-color);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    width:100%;
    outline:none;
    border-bottom:1px solid rgba(17,17,17,.25);
    background-color:rgba(0,0,0,0);
    margin-bottom:50px;
    padding-bottom:15px
}
.contact-section-three .inquiry-form .nice-select{
    border:none;
    background-color:rgba(0,0,0,0);
    border-bottom:1px solid rgba(17,17,17,.25);
    margin-bottom:40px;
    width:100%;
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400
}
.contact-section-three .inquiry-form .nice-select::after{
    height:unset;
    width:unset;
    border-bottom:unset;
    border-right:unset;
    right:28px;
    margin-top:-5px;
    transform:unset;
    transition:all .15s ease-in-out;
    content:url(../image/svg/arrow-up-icon.svg)
}
.contact-section-three .inquiry-form .nice-select.open::after{
    content:url(../image/svg/arrow-down-icon.svg)
}
.contact-section-three .inquiry-form .nice-select:focus{
    border-color:var(--primary-color)
}
.contact-section-three .inquiry-form .nice-select .current{
    color:var(--title-color);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:24px;
    margin:0
}
.contact-section-three .inquiry-form .nice-select .list .option{
    color:var(--title-color)
}
.contact-section-three .inquiry-form .nice-select .list .option.selected.focus{
    background-color:var(--primary-color)
}
.contact-section-three .inquiry-form .nice-select .list .option:hover{
    color:var(--white-color);
    background-color:var(--primary-color)
}
.contact-section-three .primary-btn-two{
    border-radius:50px;
    padding:13px 26px
}
.testimonials-section-three{
    background-image:url("../image/banner-img/home3-testimonial-bg.png");
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center
}
@media(max-width: 576px){
    .testimonials-section-three{
        padding-left:15px;
        padding-right:15px
    }
}
@media(max-width: 991px){
    .testimonials-section-three .section-title h2{
        margin-bottom:20px
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .testimonials-section-three .section-title h2{
        font-size:42px
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .testimonials-section-three .section-title h2{
        max-width:600px
    }
}
.testimonials-section-three .section-title P{
    max-width:430px;
    width:100%;
    position:relative;
    margin-bottom:0
}
.testimonials-section-three .section-title P::before{
    content:"";
    position:absolute;
    top:10%;
    left:-22%;
    width:1px;
    height:70px;
    background-color:rgba(17,17,17,.1)
}
@media(min-width: 992px)and (max-width: 1199px){
    .testimonials-section-three .section-title P::before{
        display:none
    }
}
@media(max-width: 991px){
    .testimonials-section-three .section-title P::before{
        display:none
    }
}
.testimonials-section-three .testimonial-card{
    padding:28px 36px;
    border-radius:10px;
    background-color:var(--white-color);
    border:1px solid rgba(var(--primary-color3-opc), 0.1)
}
.testimonials-section-three .testimonial-card .qoute{
    margin-bottom:33px
}
.testimonials-section-three .testimonial-card .testimonial-content{
    margin-bottom:39px
}
.testimonials-section-three .testimonial-card .testimonial-content p{
    font-family:var(--font-jost);
    font-size:18px;
    font-weight:400;
    line-height:30px;
    letter-spacing:.01em;
    color:#676767
}
.testimonials-section-three .testimonial-card .author-content .author-area{
    display:flex;
    align-items:center;
    gap:8px
}
.testimonials-section-three .testimonial-card .author-content .author-area .author-img img{
    border-radius:50%
}
.testimonials-section-three .testimonial-card .author-content .author-area .author-name-and-design h4{
    font-family:var(--font-Instrument);
    font-size:16px;
    font-weight:400;
    line-height:16px;
    color:var(--title-color);
    margin-bottom:5px
}
.testimonials-section-three .testimonial-card .author-content .author-area .author-name-and-design span{
    font-family:var(--font-jost);
    font-size:15px;
    font-weight:400;
    line-height:16px;
    color:var(--paragraph-color-1);
    margin:0
}
.testimonials-section-three .testimonial-slider-three-wrap{
    position:relative
}
.testimonials-section-three .testimonial-slider-three-wrap .slider-btn-grp .slider-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:-100px;
    z-index:1
}
@media(min-width: 1400px)and (max-width: 1599px){
    .testimonials-section-three .testimonial-slider-three-wrap .slider-btn-grp .slider-btn{
        left:-38px
    }
}
@media(max-width: 1399px){
    .testimonials-section-three .testimonial-slider-three-wrap .slider-btn-grp .slider-btn{
        left:-20px
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .testimonials-section-three .testimonial-slider-three-wrap .slider-btn-grp .slider-btn{
        left:-15px
    }
}
@media(max-width: 991px){
    .testimonials-section-three .testimonial-slider-three-wrap .slider-btn-grp .slider-btn{
        display:none
    }
}
.testimonials-section-three .testimonial-slider-three-wrap .slider-btn-grp .slider-btn.testimonial-slider-next{
    left:unset;
    right:-100px
}
@media(min-width: 1400px)and (max-width: 1599px){
    .testimonials-section-three .testimonial-slider-three-wrap .slider-btn-grp .slider-btn.testimonial-slider-next{
        right:-38px
    }
}
@media(max-width: 1399px){
    .testimonials-section-three .testimonial-slider-three-wrap .slider-btn-grp .slider-btn.testimonial-slider-next{
        right:-20px
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .testimonials-section-three .testimonial-slider-three-wrap .slider-btn-grp .slider-btn.testimonial-slider-next{
        right:-15px
    }
}
.testimonials-section-three .testimonial-btm-area{
    padding-top:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap
}
@media(max-width: 767px){
    .testimonials-section-three .testimonial-btm-area{
        padding-top:40px
    }
}
@media(max-width: 576px){
    .testimonials-section-three .testimonial-btm-area{
        flex-direction:column;
        justify-content:center
    }
}
.testimonials-section-three .testimonial-btm-area .swiper-pagination1{
    position:relative;
    display:inline-flex;
    align-items:center;
    width:unset;
    z-index:9;
    bottom:unset;
    gap:8px
}
@media(max-width: 576px){
    .testimonials-section-three .testimonial-btm-area .swiper-pagination1{
        justify-content:center;
        gap:6px
    }
}
.testimonials-section-three .testimonial-btm-area .swiper-pagination1 .swiper-pagination-bullet{
    height:16px;
    width:16px;
    background-color:rgba(0,0,0,0);
    border:1px solid #111;
    opacity:1;
    position:relative
}
.testimonials-section-three .testimonial-btm-area .swiper-pagination1 .swiper-pagination-bullet::after{
    content:"";
    height:9px;
    width:9px;
    border-radius:50%;
    background-color:rgba(17,17,17,.5);
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%)
}
.testimonials-section-three .testimonial-btm-area .swiper-pagination1 .swiper-pagination-bullet.swiper-pagination-bullet-active{
    border-color:var(--title-color);
    height:16px;
    width:16px
}
.testimonials-section-three .testimonial-btm-area .swiper-pagination1 .swiper-pagination-bullet.swiper-pagination-bullet-active::after{
    width:8px;
    height:8px;
    background-color:var(--title-color)
}
.cta-section-three{
    background-image:url("../image/banner-img/home3-cta-image.png");
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover
}
@media(max-width: 576px){
    .cta-section-three{
        padding-left:15px;
        padding-right:15px
    }
}
.cta-section-three .section-title h2{
    max-width:570px;
    width:100%;
    font-family:var(--font-Instrument);
    font-size:64px;
    font-weight:600;
    line-height:76px;
    color:var(--white-color);
    margin:0
}
@media(min-width: 1400px)and (max-width: 1599px){
    .cta-section-three .section-title h2{
        font-size:60px
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .cta-section-three .section-title h2{
        font-size:50px;
        line-height:65px
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .cta-section-three .section-title h2{
        font-size:36px;
        line-height:45px
    }
}
@media(max-width: 767px){
    .cta-section-three .section-title h2{
        font-size:40px;
        line-height:3.3rem;
        margin-bottom:25px
    }
}
@media(max-width: 375px){
    .cta-section-three .section-title h2{
        font-size:36px
    }
}
.cta-section-three .inquiry-form-area .inquiry-form .form-inner{
    position:relative;
    line-height:1;
    max-width:570px;
    width:100%
}
.cta-section-three .inquiry-form-area .inquiry-form .form-inner input{
    color:rgba(255,255,255,.8);
    font-family:var(--font-jost);
    font-size:18px;
    font-weight:400;
    line-height:24px;
    display:block;
    padding-bottom:10px;
    outline:none;
    border-bottom:1px solid var(--border-color);
    background-color:rgba(0,0,0,0);
    width:100%
}
.cta-section-three .explore-button{
    background-color:var(--white-color);
    height:172px;
    width:172px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    text-align:center;
    margin:0 auto;
    color:var(--title-color);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:500;
    line-height:24px;
    transition:.8s
}
@media(min-width: 992px)and (max-width: 1199px){
    .cta-section-three .explore-button{
        height:140px;
        width:140px
    }
}
@media(min-width: 768px)and (max-width: 991px){
    .cta-section-three .explore-button{
        height:100px;
        width:100px;
        font-size:14px;
        margin-right:20px
    }
}
@media(max-width: 767px){
    .cta-section-three .explore-button{
        height:100px;
        width:100px;
        font-size:14px;
        margin-left:0
    }
}
.cta-section-three .explore-button:hover{
    box-shadow:inset 0 0 0 10em var(--primary-color);
    border-color:var(--primary-color);
    color:var(--white-color);
    transition:.8s
}
.cta-section-three .explore-button:hover .explore-button{
    --background-size: 0%;
    --stroke-dashoffset: 26;
    --stroke-duration: 0.3s;
    --stroke-easing: cubic-bezier(0.3, 1.5, 0.5, 1);
    --stroke-delay: 0.195s
}
.cta-section-three .explore-button:hover .explore-button::after{
    opacity:0;
    transition-delay:0s
}
.latest-blog-section-three{
    background-color:var(--white-color)
}
@media(max-width: 576px){
    .latest-blog-section-three{
        padding-left:15px;
        padding-right:15px
    }
}
.latest-blog-section-three .section-title h2{
    max-width:689px;
    width:100%
}
@media(min-width: 768px)and (max-width: 991px){
    .latest-blog-section-three .section-title h2{
        max-width:550px;
        width:100%
    }
}
.latest-blog-section-three .section-title P{
    max-width:430px;
    width:100%;
    position:relative;
    margin-bottom:0
}
.latest-blog-section-three .latest-card .latest-card-img-wrap .card-img{
    position:relative;
    overflow:hidden;
    display:block;
    transition:all .5s ease-out
}
@media(max-width: 1199px){
    .latest-blog-section-three .latest-card .latest-card-img-wrap .card-img{
        height:100%
    }
}
.latest-blog-section-three .latest-card .latest-card-img-wrap .card-img img{
    transition:all .5s ease-out;
    width:100%
}
@media(max-width: 1199px){
    .latest-blog-section-three .latest-card .latest-card-img-wrap .card-img img{
        height:100%;
        -o-object-fit:cover;
        object-fit:cover
    }
}
@media(max-width: 991px){
    .latest-blog-section-three .latest-card .latest-card-img-wrap .card-img img{
        width:100%
    }
}
.latest-blog-section-three .latest-card .latest-card-img-wrap .card-img::after{
    position:absolute;
    width:200%;
    height:0%;
    left:50%;
    top:50%;
    background-color:rgba(255,255,255,.3);
    transform:translate(-50%, -50%) rotate(-45deg);
    content:"";
    z-index:1
}
.latest-blog-section-three .latest-card .card-content{
    padding:24px;
    background-color:var(--white-color);
    border:1px solid rgba(17,17,17,.1)
}
.latest-blog-section-three .latest-card .card-content .top-content span{
    font-family:var(--font-Instrument);
    font-size:16px;
    font-weight:500;
    line-height:24px;
    color:var(--paragraph-color-3);
    margin-left:28px;
    position:relative
}
@media(max-width: 1199px){
    .latest-blog-section-three .latest-card .card-content .top-content span{
        margin-left:0
    }
    .latest-blog-section-three .latest-card .card-content .top-content span::before{
        display:none
    }
}
.latest-blog-section-three .latest-card .card-content .top-content span::before{
    content:"";
    background-color:#676767;
    width:20px;
    height:2px;
    position:absolute;
    top:45%;
    left:-20%;
    transform:translateX(-50%)
}
.latest-blog-section-three .latest-card .card-content .top-content .date{
    font-family:var(--font-Instrument);
    font-size:15px;
    font-weight:500;
    line-height:24px;
    color:var(--primary-color);
    margin-left:34px;
    position:relative
}
.latest-blog-section-three .latest-card .card-content .top-content .date::before{
    content:"";
    background-color:var(--primary-color);
    width:1px;
    height:12px;
    position:absolute;
    top:16%;
    left:-20%;
    transform:translateX(-50%)
}
.latest-blog-section-three .latest-card .card-content h3{
    margin-top:10px;
    margin-bottom:25px;
    line-height:30px
}
.latest-blog-section-three .latest-card .card-content h3 a{
    font-family:var(--font-Instrument);
    font-weight:600;
    font-size:24px;
    line-height:30px;
    color:var(--title-color);
    transition:all .3s ease-in-out
}
@media(max-width: 991px){
    .latest-blog-section-three .latest-card .card-content h3 a{
        line-height:1;
        font-size:19px
    }
}
@media(max-width: 767px){
    .latest-blog-section-three .latest-card .card-content h3 a{
        font-size:25px
    }
}
.latest-blog-section-three .latest-card .card-content h3 a:hover{
    color:var(--primary-color);
    transition:all .3s ease-in-out
}
.latest-blog-section-three .latest-card .card-content .view-btn{
    display:flex;
    align-items:center;
    gap:5px
}
.latest-blog-section-three .latest-card .card-content .view-btn .icon svg{
    transition:all .3s ease-in-out
}
.latest-blog-section-three .latest-card .card-content .view-btn .icon svg path{
    fill:rgba(17,17,17,.7)
}
.latest-blog-section-three .latest-card .card-content .view-btn .primary-button{
    color:rgba(17,17,17,.7);
    font-family:var(--font-Instrument);
    font-size:16px;
    font-weight:500;
    line-height:1.2;
    white-space:nowrap;
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    background:linear-gradient(to bottom, #111111 70%, #111111 70%);
    background-size:100% 1px;
    background-repeat:no-repeat;
    background-position:left 100%;
    transition:all .3s ease-in-out
}
.latest-blog-section-three .latest-card .card-content .view-btn .primary-button:hover{
    color:var(--primary-color);
    background-size:0 1px;
    background-position:0% 100%;
    transition:all .3s ease-in-out
}
.latest-blog-section-three .latest-card .card-content .view-btn .primary-button:hover svg{
    transform:rotate(45deg);
    transition:all .3s ease-in-out
}
.latest-blog-section-three .latest-card .card-content .view-btn .primary-button:hover svg path{
    fill:var(--primary-color);
    transition:all .3s ease-in-out
}
.latest-blog-section-three .latest-card .card-content .view-btn:hover .primary-button{
    color:var(--primary-color);
    background-size:0 1px;
    background-position:0% 100%;
    transition:all .3s ease-in-out
}
.latest-blog-section-three .latest-card .card-content .view-btn:hover svg{
    transform:rotate(45deg);
    transition:all .3s ease-in-out
}
.latest-blog-section-three .latest-card .card-content .view-btn:hover svg path{
    fill:var(--primary-color);
    transition:all .3s ease-in-out
}
.latest-blog-section-three .latest-card:hover .latest-card-img-wrap .card-img img{
    transform:scale(1.1)
}
.latest-blog-section-three .latest-card:hover .latest-card-img-wrap .card-img::after{
    height:250%;
    transition:all 600ms linear;
    background-color:rgba(0,0,0,0)
}
.footer-section-three{
    background-color:var(--title-color);
    position:relative;
    overflow:hidden
}
@media(max-width: 576px){
    .footer-section-three{
        padding-left:15px;
        padding-right:15px;
        padding-top:30px
    }
}
.footer-section-three .footer-top-item .widget-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:1px solid rgba(255,255,255,.1);
    border-radius:5px;
    padding:32px 50px;
    flex-wrap:wrap
}
@media(min-width: 768px)and (max-width: 991px){
    .footer-section-three .footer-top-item .widget-wrapper .single-widget .footer-logo{
        margin-bottom:40px
    }
}
@media(min-width: 576px)and (max-width: 768px){
    .footer-section-three .footer-top-item .widget-wrapper .single-widget .footer-logo{
        margin-bottom:30px
    }
}
@media(max-width: 576px){
    .footer-section-three .footer-top-item .widget-wrapper .single-widget .footer-logo{
        margin-bottom:20px
    }
}
.footer-section-three .footer-top-item .widget-wrapper .single-widget{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:180px;
    position:relative
}
@media(min-width: 992px)and (max-width: 1199px){
    .footer-section-three .footer-top-item .widget-wrapper .single-widget{
        gap:100px
    }
}
@media(min-width: 576px)and (max-width: 768px){
    .footer-section-three .footer-top-item .widget-wrapper .single-widget{
        gap:30px
    }
}
@media(max-width: 576px){
    .footer-section-three .footer-top-item .widget-wrapper .single-widget{
        gap:20px
    }
}
.footer-section-three .footer-top-item .widget-wrapper .single-widget::before{
    content:"";
    height:54px;
    width:1px;
    background:rgba(255,255,255,.1);
    position:absolute;
    right:-800px;
    top:50%;
    transform:translateY(-50%)
}
@media(max-width: 576px){
    .footer-section-three .footer-top-item .widget-wrapper .single-widget::before{
        display:none
    }
}
.footer-section-three .footer-top-item .widget-wrapper .single-widget:last-child::before{
    display:none
}
.footer-section-three .footer-top-item .widget-wrapper .single-widget h6{
    font-family:var(--font-jost);
    font-size:20px;
    font-weight:400;
    line-height:20px;
    letter-spacing:.01em;
    color:rgba(255,255,255,.46)
}
.footer-section-three .footer-top-item .widget-wrapper .single-widget a{
    font-family:var(--font-jost);
    font-size:25px;
    font-weight:500;
    line-height:32px;
    letter-spacing:.01em;
    margin:0;
    color:var(--white-color);
    transition:all .3s ease-in-out
}
.footer-section-three .footer-top-item .widget-wrapper .single-widget a:hover{
    color:var(--primary-color);
    transition:all .3s ease-in-out
}
.footer-section-three .footer-menu-wrap{
    padding:80px 0;
    border-bottom:1px solid rgba(255,255,255,.3)
}
.footer-section-three .footer-menu-wrap .logo-and-social-media-area .footer-logo{
    padding-bottom:20px
}
.footer-section-three .footer-menu-wrap .logo-and-social-media-area .footer-content p{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:16px;
    line-height:28px;
    max-width:344px;
    width:100%;
    color:var(--white-color-opp);
    text-transform:capitalize;
    margin-bottom:36px
}
.footer-section-three .footer-menu-wrap .footer-widget .widget-title h4{
    font-family:var(--font-Instrument);
    font-size:24px;
    font-weight:500;
    line-height:29.28px;
    color:var(--white-color);
    margin-bottom:26px
}
@media(min-width: 992px)and (max-width: 1199px){
    .footer-section-three .footer-menu-wrap .footer-widget .widget-title h4{
        font-size:19px
    }
}
.footer-section-three .footer-menu-wrap .footer-widget .widget-title.line h4{
    position:relative
}
.footer-section-three .footer-menu-wrap .footer-widget .widget-title.line h4::before{
    content:"";
    position:absolute;
    bottom:-40%;
    left:0;
    width:83px;
    height:1px;
    border-radius:10px;
    background:linear-gradient(90.01deg, #ffffff 0.01%, rgba(255, 255, 255, 0) 102.8%)
}
.footer-section-three .footer-menu-wrap .footer-widget .widget-title.two h4{
    margin-bottom:12px
}
.footer-section-three .footer-menu-wrap .footer-widget .widget-title .single-rating a{
    display:flex;
    align-items:center;
    gap:8px
}
@media(max-width: 991px){
    .footer-section-three .footer-menu-wrap .footer-widget .widget-title .single-rating .review{
        display:grid;
        gap:10px
    }
}
.footer-section-three .footer-menu-wrap .footer-widget .widget-title .single-rating .review span{
    font-family:var(--font-jost);
    font-size:14px;
    font-weight:400;
    line-height:20px;
    color:rgba(255,255,255,.7);
    margin:0
}
@media(min-width: 992px)and (max-width: 1199px){
    .footer-section-three .footer-menu-wrap .footer-widget .widget-title .single-rating .review span{
        font-size:11px
    }
}
.footer-section-three .footer-menu-wrap .footer-widget .widget-title .single-rating .review img{
    margin-top:-10px
}
.footer-section-three .footer-menu-wrap .footer-widget .widget-title .single-rating .rating{
    max-width:150px;
    width:100%
}
@media(max-width: 991px){
    .footer-section-three .footer-menu-wrap .footer-widget .widget-title .single-rating .rating{
        display:grid;
        gap:10px
    }
}
.footer-section-three .footer-menu-wrap .footer-widget .widget-title .single-rating .rating .star{
    display:flex;
    align-items:center;
    gap:4px;
    line-height:1.2
}
.footer-section-three .footer-menu-wrap .footer-widget .widget-title .single-rating .rating .star li i{
    color:#e62415;
    font-size:12px
}
.footer-section-three .footer-menu-wrap .footer-widget .widget-title .single-rating .rating span{
    font-family:var(--font-jost);
    font-size:14px;
    font-weight:400;
    line-height:20px;
    color:rgba(255,255,255,.7)
}
.footer-section-three .footer-menu-wrap .footer-widget .widget-title .single-rating.google .rating .star li i{
    color:#ffc107
}
.footer-section-three .footer-menu-wrap .footer-widget .footer-social-list{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:50px
}
.footer-section-three .footer-menu-wrap .footer-widget .footer-social-list li a{
    background-color:rgba(255,255,255,.25);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    padding:6px;
    transition:all .3s ease-in-out
}
.footer-section-three .footer-menu-wrap .footer-widget .footer-social-list li a:hover{
    background-color:var(--primary-color);
    transition:all .3s ease-in-out
}
.footer-section-three .footer-menu-wrap .footer-widget .footer-social-list li a:hover svg path{
    fill:var(--white-color)
}
.footer-section-three .footer-menu-wrap .footer-widget .menu-container .widget-list li{
    padding-bottom:8px
}
.footer-section-three .footer-menu-wrap .footer-widget .menu-container .widget-list li a{
    margin:0;
    color:rgba(255,255,255,.7);
    font-family:var(--font-jost);
    font-size:18px;
    font-weight:400;
    line-height:24px;
    display:inline-block;
    background:linear-gradient(to bottom, #10c581 0%, #10c581 98%);
    background-repeat:no-repeat;
    background-size:0 1px;
    background-position:0% 100%;
    transition:background-size .75s
}
.footer-section-three .footer-menu-wrap .footer-widget .menu-container .widget-list li a:hover{
    background-position:left 100%;
    background-size:100% 1px;
    color:var(--primary-color)
}
.footer-section-three .footer-menu-wrap .newsletter-area .content p{
    font-family:var(--font-Instrument);
    font-size:24px;
    font-weight:500;
    line-height:29.28px;
    color:var(--white-color);
    margin:0;
    padding-bottom:33px
}
.footer-section-three .footer-menu-wrap .subscribe-form-wrap input{
    width:100%;
    color:var(--white-color);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:26px;
    border-radius:5px;
    background:rgba(255,255,255,.1);
    height:55px;
    padding:10px 10px 10px 20px;
    margin-bottom:20px
}
.footer-section-three .footer-bottom-wrap .footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    display:flex;
    padding:28px 0;
    flex-wrap:wrap
}
@media(min-width: 768px)and (max-width: 991px){
    .footer-section-three .footer-bottom-wrap .footer-bottom{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px
    }
}
@media(max-width: 767px){
    .footer-section-three .footer-bottom-wrap .footer-bottom{
        justify-content:center;
        gap:5px
    }
}
@media(max-width: 576px){
    .footer-section-three .footer-bottom-wrap .footer-bottom{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:5px
    }
}
.footer-section-three .footer-bottom-wrap .footer-bottom .copy-write-area p{
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:16px;
    color:rgba(255,255,255,.7);
    margin:0;
    text-transform:capitalize
}
.footer-section-three .footer-bottom-wrap .footer-bottom .copy-write-area p a{
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:16px;
    color:var(--primary-color)
}
@media(min-width: 768px)and (max-width: 991px){
    .footer-section-three .footer-bottom-wrap .footer-bottom .copy-write-area p{
        font-size:17px
    }
}
@media(max-width: 375px){
    .footer-section-three .footer-bottom-wrap .footer-bottom .copy-write-area p{
        text-align:center
    }
}
@media(min-width: 375px)and (max-width: 576px){
    .footer-section-three .footer-bottom-wrap .footer-bottom .copy-write-area p{
        text-align:center;
        font-size:16px
    }
}
@media(max-width: 425px){
    .footer-section-three .footer-bottom-wrap .footer-bottom .copy-write-area p{
        font-size:13px
    }
}
.footer-section-three .footer-bottom-wrap .footer-bottom .copy-write-area p span{
    color:var(--primary-color)
}
.footer-section-three .footer-bottom-wrap .footer-bottom .footer-bottom-right ul{
    display:flex;
    align-items:center;
    gap:44px
}
@media(min-width: 768px)and (max-width: 991px){
    .footer-section-three .footer-bottom-wrap .footer-bottom .footer-bottom-right ul{
        gap:20px
    }
}
@media(max-width: 767px){
    .footer-section-three .footer-bottom-wrap .footer-bottom .footer-bottom-right ul{
        gap:20px
    }
}
@media(max-width: 425px){
    .footer-section-three .footer-bottom-wrap .footer-bottom .footer-bottom-right ul{
        gap:15px
    }
}
.footer-section-three .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li{
    position:relative
}
.footer-section-three .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li a{
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:16px;
    color:rgba(255,255,255,.7);
    margin:0
}
.footer-section-three .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li:not(:last-child):after{
    position:absolute;
    top:0%;
    left:160px;
    content:" | ";
    font-size:16px;
    color:rgba(255,255,255,.25)
}
@media(max-width: 767px){
    .footer-section-three .footer-bottom-wrap .footer-bottom .footer-bottom-right ul li:not(:last-child):after{
        left:149px
    }
}
.error-page{
    background-color:var(--white-color)
}
.error-page .section-title P{
    max-width:695px;
    width:100%;
    font-family:var(--font-jost);
    font-size:18px;
    font-weight:400;
    line-height:28px;
    color:var(--paragraph-color-1)
}
.error-page .btn-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px
}
@media(max-width: 767px){
    .error-page .btn-wrapper{
        gap:10px
    }
}
@media(max-width: 425px){
    .error-page .btn-wrapper{
        display:block
    }
}
@media(max-width: 375px){
    .error-page .btn-wrapper{
        display:block
    }
}
.error-page .btn-wrapper .support span{
    color:var(--title-color);
    border:1px solid var(--title-color);
    padding:20px 29px;
    border-radius:5px;
    font-family:var(--font-Instrument);
    font-size:16px;
    font-weight:400;
    line-height:19.2px;
    transition:all .3s ease-in-out
}
.error-page .btn-wrapper .support span:hover{
    background-color:var(--title-color);
    transition:all .3s ease-in-out;
    color:var(--white-color)
}
.breadcrumb-section{
    background-image: url('https://fantasy.premierleague.com/assets/pattern-1-1236-CLcKfGdk.png'),
    linear-gradient(135deg, #667eea 0%, #923fff 100%);
    color: white;
    padding: 3rem 0;
    background-position: right top -197px, 0 0;
    background-repeat: no-repeat;
    background-size: 204px 315px, auto;
}
@media(min-width: 992px)and (max-width: 1199px){
    .breadcrumb-section{
        padding:210px 0px 120px
    }
}
@media(max-width: 991px){
    .breadcrumb-section{
        padding:150px 0 90px
    }
}
@media(max-width: 767px){
    .breadcrumb-section{
        padding:130px 0 90px
    }
}
@media(max-width: 576px){
    .breadcrumb-section{
        padding-left:15px;
        padding-right:15px;
        padding-bottom:90px
    }
}
.breadcrumb-section .banner-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap
}
.breadcrumb-section .banner-wrapper .banner-content h1{
    color:var(--white-color);
    font-family:var(--font-Instrument);
    font-size:64px;
    font-weight:600;
    line-height:78.08px;
    letter-spacing:.02em;
    max-width:693px;
    width:100%;
    margin:0;
    padding-bottom:25px;
    text-transform:capitalize
}
@media(max-width: 767px){
    .breadcrumb-section .banner-wrapper .banner-content h1{
        font-size:55px;
        line-height:1.4
    }
}
@media(max-width: 576px){
    .breadcrumb-section .banner-wrapper .banner-content h1{
        font-size:50px
    }
}
@media(max-width: 425px){
    .breadcrumb-section .banner-wrapper .banner-content h1{
        font-size:46px
    }
}
.breadcrumb-section .banner-wrapper .banner-content p{
    font-family:var(--font-jost);
    font-size:18px;
    font-weight:400;
    line-height:28px;
    letter-spacing:.02em;
    color:var(--white-color);
    max-width:512px;
    width:100%
}
@media(max-width: 1399px){
    .breadcrumb-section .banner-wrapper .banner-content p{
        max-width:450px;
        width:100%
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .breadcrumb-section .banner-wrapper .banner-content p{
        font-size:18px
    }
}
@media(max-width: 991px){
    .breadcrumb-section .banner-wrapper .banner-content p{
        margin-bottom:35px
    }
}
@media(max-width: 576px){
    .breadcrumb-section .banner-wrapper .banner-content p{
        font-size:15px;
        margin-bottom:20px
    }
}
.breadcrumb-section .banner-wrapper .breadcrumb-list{
    background-color:rgba(153,153,153,.1);
    border-bottom:1px solid #657298;
    padding:20px 44px;
    border-radius:35px
}
@media(max-width: 767px){
    .breadcrumb-section .banner-wrapper .breadcrumb-list{
        padding:10px 30px
    }
}
.breadcrumb-section .banner-wrapper .breadcrumb-list ul{
    display:flex;
    align-items:center;
    gap:10px
}
.breadcrumb-section .banner-wrapper .breadcrumb-list ul li a{
    color:var(--white-color);
    font-family:var(--font-Instrument);
    font-size:18px;
    font-weight:400;
    line-height:28px;
    letter-spacing:.02em;
    text-transform:capitalize
}
@media(max-width: 767px){
    .breadcrumb-section .banner-wrapper .breadcrumb-list ul li a{
        font-size:14px
    }
}
.breadcrumb-section .banner-wrapper .breadcrumb-list ul li span{
    color:var(--white-color)
}
.breadcrumb-section .banner-wrapper .breadcrumb-list ul li:last-child a{
    color:var(--primary-color)
}
.contact-section{
    background-color:var(--white-color)
}
.contact-section .section-title h2{
    font-family:var(--font-Instrument);
    font-size:48px;
    font-weight:600;
    line-height:60px;
    color:var(--title-color);
    margin:0;
    text-align:start
}
@media(max-width: 1399px){
    .contact-section .section-title h2{
        font-size:34px;
        line-height:1.4
    }
}
.contact-section .section-title h3{
    font-family:var(--font-Instrument);
    font-size:48px;
    font-weight:600;
    line-height:60px;
    color:var(--title-color);
    text-align:start;
    margin-bottom:15px
}
@media(max-width: 1399px){
    .contact-section .section-title h3{
        font-size:34px;
        line-height:40px
    }
}
.contact-section .section-title p{
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:24px;
    text-align:start;
    color:#686868
}
.contact-section .contact-wrapper{
    text-align:center
}
.contact-section .contact-wrapper .section-title{
    margin-bottom:50px
}
.contact-section .contact-wrapper .section-title svg{
    fill:rgba(var(--title-color2-opc), 0.3);
    margin-top:25px
}
.contact-section .contact-wrapper ul{
    padding:0;
    margin:0;
    list-style:none
}
@media(min-width: 768px)and (max-width: 991px){
    .contact-section .contact-wrapper ul{
        display:flex;
        gap:25px;
        flex-wrap:wrap
    }
}
.contact-section .contact-wrapper ul .single-contact{
    display:flex;
    gap:24px;
    margin-bottom:50px
}
@media(min-width: 768px)and (max-width: 991px){
    .contact-section .contact-wrapper ul .single-contact{
        width:45%
    }
}
.contact-section .contact-wrapper ul .single-contact:last-child{
    margin-bottom:0
}
.contact-section .contact-wrapper ul .single-contact .icon{
    background-color:var(--white-color);
    border-radius:50%;
    height:60px;
    width:60px;
    display:flex;
    align-items:center;
    justify-content:center
}
.contact-section .contact-wrapper ul .single-contact .content{
    position:relative;
    line-height:1;
    text-align:start;
    max-width:205px;
    width:100%
}
.contact-section .contact-wrapper ul .single-contact .content::after{
    content:"";
    height:35px;
    width:1px;
    background-color:rgba(var(--title-color2-opc), 0.15);
    position:absolute;
    left:-10px;
    top:50%;
    transform:translateY(-50%)
}
.contact-section .contact-wrapper ul .single-contact .content span{
    font-family:var(--font-jost);
    font-weight:500;
    font-size:24px;
    line-height:1.2;
    letter-spacing:.16px;
    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; 
    text-fill-color: transparent; 
    margin-bottom:10px;
    display:inline-block
}
.contact-section .contact-wrapper ul .single-contact .content h6{
    margin-bottom:0;
    line-height:1
}
.contact-section .contact-wrapper ul .single-contact .content h6 a{
    font-family:var(--font-inter);
    font-weight:400;
    font-size:18px;
    line-height:30px;
    color:#333;
    transition:.5s;
    letter-spacing:.16px
}
.contact-section .contact-wrapper ul .single-contact .content h6 a:hover{
    color:var(--primary-color)
}
.contact-section .contact-wrapper.two .section-title h2{
    color:var(--title-color)
}
.contact-section .contact-wrapper.two .section-title h2 span{
    color:var(--primary-color)
}
.contact-section .inquiry-form-area .title-2{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:30px
}
.contact-section .inquiry-form-area .title-2 h3{
    font-family:var(--font-Instrument);
    font-size:28px;
    font-weight:500;
    line-height:38.4px;
    color:var(--title-color);
    margin-bottom:27px;
    text-transform:capitalize
}
@media(max-width: 576px){
    .contact-section .inquiry-form-area .title-2 h3{
        font-size:25px
    }
}
.inquiry-form-area .inquiry-form {
    background-color: #f4f6fc;
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 45px 55px;
    border-radius: 10px;
    max-width: 676px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.inquiry-form-area .inquiry-form::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    background-size: contain;
    background: url('https://www.premierleague.com/resources/v1.26.27/i/svg-files/elements/backgrounds/wave-bg-gradient.svg') no-repeat bottom;
    z-index: -1;
    pointer-events: none;
}


@media(max-width: 767px){
    .contact-section .inquiry-form-area .inquiry-form{
        padding:45px 30px
    }
}
@media(max-width: 576px){
    .contact-section .inquiry-form-area .inquiry-form{
        padding:40px 25px;
        border-radius:15px
    }
}
.contact-section .inquiry-form-area .inquiry-form .form-inner{
    position:relative;
    line-height:1
}
.contact-section .inquiry-form-area .inquiry-form .form-inner label{
    color:var(--title-color);
    font-family:var(--font-jost);
    font-size:16px;
    line-height:1.18;
    font-weight:400;
    display:block;
    margin-bottom:10px
}
.contact-section .inquiry-form-area .inquiry-form .form-inner input{
    background-color:var(--white-color);
    color:var(--title-color);
    font-family:var(--font-inter);
    font-size:14px;
    font-weight:500;
    height:50px;
    width:100%;
    padding:10px 20px;
    outline:none;
    border-radius:5px
}
.contact-section .inquiry-form-area .inquiry-form .form-inner input::-moz-placeholder{
    color:#7c7c7c;
    font-weight:400
}
.contact-section .inquiry-form-area .inquiry-form .form-inner input::placeholder{
    color:#7c7c7c;
    font-weight:400
}
.contact-section .inquiry-form-area .inquiry-form .form-inner input:focus{
    border:1px solid var(--primary-color)
}
.contact-section .inquiry-form-area .inquiry-form .form-inner textarea{
    background-color:var(--white-color);
    color:var(--title-color);
    font-family:var(--font-syne);
    font-size:14px;
    font-weight:400;
    width:100%;
    padding:20px 20px;
    outline:none;
    min-height:128px;
    border-radius:5px;
    border:none
}
.contact-section .inquiry-form-area .inquiry-form .form-inner textarea::-moz-placeholder{
    color:#7c7c7c
}
.contact-section .inquiry-form-area .inquiry-form .form-inner textarea::placeholder{
    color:#7c7c7c
}
.contact-section .inquiry-form-area .inquiry-form .form-inner textarea:focus{
    border:1px solid var(--primary-color)
}
.contact-section .inquiry-form-area .inquiry-form button{
    border:unset
}
.contact-section .inquiry-form-area .inquiry-form button.primary-btn2{
    background-color:var(--primary-color);
    color:var(--white-color);
    font-size:16px;
    line-height:1.9;
    padding:13px 36px;
    text-transform:capitalize
}
.contact-section .form-inner2{
    margin-bottom:42px
}
.contact-section .form-inner2 .form-check{
    min-height:unset;
    margin-bottom:0;
    display:flex;
    align-items:normal;
    gap:11px
}
.contact-section .form-inner2 .form-check .form-check-input{
    cursor:pointer;
    height:14px;
    width:14px;
    margin-top:5px;
    border:1px solid var(--border-color);
    background-color:rgba(0,0,0,0)
}
.contact-section .form-inner2 .form-check .form-check-input:focus{
    box-shadow:none;
    border-color:var(--primary-color3)
}
.contact-section .form-inner2 .form-check .form-check-input:checked{
    background-color:var(--primary-color);
    border-color:var(--primary-color)
}
.contact-section .form-inner2 .form-check .form-check-label{
    cursor:pointer;
    color:var(--paragraph-color-1);
    font-family:var(--font-jost);
    font-size:14px;
    font-weight:400;
    text-transform:capitalize;
    margin:0
}
@media(max-width: 576px){
    .contact-section .form-inner2 .form-check .form-check-label{
        font-size:12px
    }
}
.contact-section .nice-select{
    border:none;
    background-color:var(--white-color);
    margin-bottom:40px;
    width:100%;
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    padding-left:30px;
    border-radius:5px
}
.contact-section .nice-select::after{
    height:unset;
    width:unset;
    border-bottom:unset;
    border-right:unset;
    right:28px;
    margin-top:-5px;
    transform:unset;
    transition:all .15s ease-in-out;
    content:url(../image/svg/arrow-up-icon.svg)
}
.contact-section .nice-select.open::after{
    content:url(../image/svg/arrow-down-icon.svg)
}
.contact-section .nice-select:focus{
    border-color:var(--primary-color)
}
.contact-section .nice-select .current{
    color:rgba(17,17,17,.5);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:24px;
    margin:0
}
.contact-section .nice-select .list .option{
    color:var(--title-color)
}
.contact-section .nice-select .list .option.selected.focus{
    background-color:var(--primary-color)
}
.contact-section .nice-select .list .option:hover{
    color:var(--white-color);
    background-color:var(--primary-color)
}
.contact-map-section{
    margin-bottom:-11px
}
.contact-map-section iframe{
    width:100%;
    height:100%;
    min-height:650px;
    filter:invert(1) hue-rotate(180deg) brightness(1) grayscale(1)
}
@media(max-width: 1399px){
    .contact-map-section iframe{
        min-height:550px
    }
}
@media(max-width: 767px){
    .contact-map-section iframe{
        min-height:450px
    }
}
.portfolio-details{
    background-color:var(--white-color)
}
@media(max-width: 576px){
    .portfolio-details{
        padding-left:15px;
        padding-right:15px
    }
}
.portfolio-details .portfolio-details-thumb img{
    border-radius:10px;
    height:100%;
    -o-object-fit:cover;
    object-fit:cover;
    min-height:500px
}
.portfolio-details .single-widget{
    background-color:#fff8f5;
    border:1px solid rgba(17,17,17,.05);
    border-radius:10px;
    padding:24px 32px;
    max-width:420px;
    width:100%
}
@media(max-width: 767px){
    .portfolio-details .single-widget{
        max-width:495px;
        width:100%
    }
}
.portfolio-details .single-widget .widget-title{
    font-family:var(--font-jost);
    font-weight:500;
    font-size:28px;
    line-height:2.3;
    margin:0;
    text-align:center;
    border-bottom:1px solid rgba(17,17,17,.15);
    padding-bottom:32px
}
.portfolio-details .single-widget ul li a span{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:18px;
    line-height:1.2;
    margin:0;
    color:var(--title-color);
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid rgba(17,17,17,.15);
    padding:24px;
    transition:all .3s ease-in-out
}
.portfolio-details .single-widget ul li a span:hover{
    background-color:var(--primary-color);
    transition:all .3s ease-in-out;
    color:var(--white-color)
}
.portfolio-details .single-widget ul li a span:hover svg path{
    fill:var(--white-color);
    transition:all .3s ease-in-out
}
.portfolio-details .project-description-content h3{
    font-family:var(--font-Instrument);
    font-size:48px;
    font-weight:600;
    line-height:58.56px;
    color:var(--title-color);
    margin-bottom:24px
}
@media(min-width: 375px)and (max-width: 576px){
    .portfolio-details .project-description-content h3{
        font-size:35px;
        line-height:1.1;
        margin-bottom:15px
    }
}
.portfolio-details .project-description-content p{
    font-family:var(--font-jost);
    font-size:18px;
    font-weight:400;
    line-height:30.6px;
    color:#676767;
    margin:0
}
@media(max-width: 767px){
    .portfolio-details .project-description-content p{
        margin-bottom:30px
    }
}
@media(min-width: 375px)and (max-width: 576px){
    .portfolio-details .project-description-content p{
        margin-bottom:0
    }
}
.portfolio-details .project-description-content img{
    border-radius:20px
}
.portfolio-details .project-description-content h5{
    font-family:var(--font-jost);
    font-size:22px;
    font-weight:500;
    line-height:26px;
    letter-spacing:.02em;
    margin-bottom:10px;
    color:var(--title-color)
}
.portfolio-details .project-description-content .widget-title{
    font-family:var(--font-jost);
    font-size:30px;
    font-weight:500;
    line-height:28px;
    color:var(--title-color);
    margin-bottom:23px
}
.portfolio-details .project-description-content .widget-list{
    -moz-columns:2;
    columns:2
}
@media(max-width: 767px){
    .portfolio-details .project-description-content .widget-list{
        -moz-columns:1;
        columns:1
    }
}
@media(max-width: 576px){
    .portfolio-details .project-description-content .widget-list{
        -moz-columns:1;
        columns:1
    }
}
.portfolio-details .project-description-content .widget-list li{
    display:flex;
    gap:10px;
    padding-bottom:15px
}
@media(max-width: 767px){
    .portfolio-details .project-description-content .widget-list li span{
        line-height:1.2
    }
}
.portfolio-details .project-description-content .widget-list li:last-child{
    padding-bottom:36px
}
.portfolio-details .project-intro-card{
    background-color:#fff8f5;
    border:1px solid rgba(17,17,17,.05);
    border-radius:10px;
    padding:33px 32px 24px;
    max-width:420px;
    width:100%;
    height:586px;
    position:sticky;
    top:110px
}
@media(max-width: 991px){
    .portfolio-details .project-intro-card{
        max-width:100%
    }
}
.portfolio-details .project-intro-card .project-content h3{
    font-family:var(--font-Instrument);
    font-size:28px;
    font-weight:500;
    line-height:38px;
    text-align:center;
    border-bottom:1px solid rgba(17,17,17,.15);
    padding-bottom:25px;
    margin:0
}
@media(max-width: 991px){
    .portfolio-details .project-intro-card .project-content h3{
        text-align:left
    }
}
.portfolio-details .project-intro-card .project-content h6{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:18px;
    line-height:1.5;
    letter-spacing:.32px;
    color:var(--paragraph-color-1);
    margin:0;
    padding:10px 0 8px
}
.portfolio-details .project-intro-card .project-content h5{
    font-family:var(--font-jost);
    font-size:18px;
    font-weight:500;
    line-height:20px;
    margin:0;
    color:var(--title-color);
    border-bottom:1px solid rgba(17,17,17,.15);
    padding-bottom:14px
}
.portfolio-details .project-intro-card .project-content .social-list-team{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    padding:24px 0
}
@media(max-width: 991px){
    .portfolio-details .project-intro-card .project-content .social-list-team{
        justify-content:flex-start
    }
}
.portfolio-details .project-intro-card .project-content .social-list-team li a{
    border:1px solid rgba(17,17,17,.5);
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .4s ease-in-out
}
.portfolio-details .project-intro-card .project-content .social-list-team li a svg path{
    fill:var(--title-color);
    transition:all .4s ease-in-out
}
.portfolio-details .project-intro-card .project-content .social-list-team li a:hover{
    border:1px solid var(--primary-color);
    background-color:var(--primary-color);
    transition:all .4s ease-in-out
}
.portfolio-details .project-intro-card .project-content .social-list-team li a:hover svg path{
    fill:var(--white-color);
    transition:all .4s ease-in-out
}
.portfolio-details .details-navigation{
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:1px solid var(--border-color-2);
    border-radius:10px;
    padding:17px 20px
}
.portfolio-details .details-navigation .single-navigation{
    display:flex;
    align-items:center;
    gap:12px
}
.portfolio-details .details-navigation .single-navigation .icon{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid var(--primary-color);
    transition:all .3s ease-in-out
}
.portfolio-details .details-navigation .single-navigation .icon svg path{
    fill:var(--primary-color)
}
.portfolio-details .details-navigation .single-navigation .icon:hover{
    background-color:var(--primary-color);
    transition:all .3s ease-in-out
}
.portfolio-details .details-navigation .single-navigation .icon:hover svg path{
    fill:var(--white-color);
    transition:all .3s ease-in-out
}
.portfolio-details .details-navigation .single-navigation h6{
    margin:0
}
.portfolio-details .details-navigation .single-navigation h6 a{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:16px;
    line-height:1.5;
    color:var(--title-color);
    text-transform:capitalize
}
.service-details{
    background-color:var(--white-color)
}
@media(max-width: 576px){
    .service-details{
        padding-left:15px;
        padding-right:15px
    }
}
.service-details .service-details-thumb{
    margin-bottom:48px
}
.service-details .service-details-thumb img{
    border-radius:10px;
    height:100%;
    -o-object-fit:cover;
    object-fit:cover
}
.service-details .single-widget{
    background-color:#fff8f5;
    border:1px solid rgba(17,17,17,.05);
    border-radius:10px;
    padding:24px 0;
    width:100%;
    height:-moz-max-content;
    height:max-content
}
@media(max-width: 767px){
    .service-details .single-widget{
        max-width:495px;
        width:100%
    }
}
.service-details .single-widget .widget-title{
    font-family:var(--font-jost);
    font-weight:500;
    font-size:28px;
    line-height:1.3;
    margin:0;
    text-align:center;
    border-bottom:1px solid rgba(17,17,17,.15);
    padding-bottom:24px;
    margin:0 32px
}
@media(max-width: 1199px){
    .service-details .single-widget .widget-title{
        margin:0 18px
    }
}
.service-details .service-description-content h3{
    font-family:var(--font-Instrument);
    font-size:48px;
    font-weight:600;
    line-height:1.4;
    color:var(--title-color);
    margin-bottom:18px
}
@media(max-width: 576px){
    .service-details .service-description-content h3{
        font-size:38px;
        line-height:1.1;
        margin-bottom:15px
    }
}
.service-details .service-description-content p{
    font-family:var(--font-jost);
    font-size:17px;
    font-weight:400;
    line-height:30px;
    color:#676767;
    margin-bottom:21px
}
.service-details .service-description-content p:last-child{
    margin-bottom:0
}
@media(max-width: 767px){
    .service-details .service-description-content p{
        margin-bottom:30px
    }
}
@media(min-width: 375px)and (max-width: 576px){
    .service-details .service-description-content p{
        margin-bottom:15px
    }
}
.service-details .service-description-content .title-paragraph{
    margin-bottom:27px
}
.service-details .service-description-content h5{
    font-family:var(--font-jost);
    font-size:22px;
    font-weight:500;
    line-height:26px;
    letter-spacing:.02em;
    margin-bottom:10px;
    color:var(--title-color)
}
.service-details .service-description-content .widget-title{
    font-family:var(--font-jost);
    font-size:30px;
    font-weight:500;
    line-height:1.4;
    color:var(--title-color);
    margin-bottom:23px
}
.service-details .service-description-content .widget-title.two{
    margin-bottom:14px
}
.service-details .service-description-content .widget-list{
    -moz-columns:2;
    columns:2;
    gap:92px
}
@media(max-width: 767px){
    .service-details .service-description-content .widget-list{
        -moz-columns:1;
        columns:1
    }
}
@media(max-width: 576px){
    .service-details .service-description-content .widget-list{
        -moz-columns:1;
        columns:1
    }
}
.service-details .service-description-content .widget-list li{
    display:flex;
    gap:10px;
    padding-bottom:28px
}
@media(max-width: 767px){
    .service-details .service-description-content .widget-list li span{
        line-height:1.2
    }
}
.service-details .service-description-content .widget-list li:last-child{
    padding-bottom:36px
}
.service-details .project-intro-card{
    background-color:#fff8f5;
    border:1px solid rgba(17,17,17,.05);
    border-radius:10px;
    padding:33px 32px 24px;
    max-width:420px;
    width:100%;
    height:586px
}
.service-details .project-intro-card .project-content h3{
    font-family:var(--font-Instrument);
    font-size:28px;
    font-weight:500;
    line-height:38px;
    text-align:center;
    border-bottom:1px solid rgba(17,17,17,.15);
    padding-bottom:25px;
    margin:0
}
.service-details .project-intro-card .project-content h6{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:18px;
    line-height:1.5;
    letter-spacing:.32px;
    color:var(--paragraph-color-1);
    margin:0;
    padding:10px 0 8px
}
.service-details .project-intro-card .project-content h5{
    font-family:var(--font-jost);
    font-size:18px;
    font-weight:500;
    line-height:20px;
    margin:0;
    color:var(--title-color);
    border-bottom:1px solid rgba(17,17,17,.15);
    padding-bottom:14px
}
.service-details .project-intro-card .project-content .social-list-team{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    padding:24px 0
}
.service-details .project-intro-card .project-content .social-list-team li a{
    border:1px solid rgba(17,17,17,.5);
    padding:9px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all .4s ease-in-out
}
.service-details .project-intro-card .project-content .social-list-team li a svg path{
    fill:var(--title-color);
    transition:all .4s ease-in-out
}
.service-details .project-intro-card .project-content .social-list-team li a:hover{
    border:1px solid var(--primary-color);
    background-color:var(--primary-color);
    transition:all .4s ease-in-out
}
.service-details .project-intro-card .project-content .social-list-team li a:hover svg path{
    fill:var(--white-color);
    transition:all .4s ease-in-out
}
.service-details .details-navigation{
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:1px solid var(--border-color-2);
    border-radius:10px;
    padding:17px 20px
}
.service-details .details-navigation .single-navigation{
    display:flex;
    align-items:center;
    gap:12px
}
.service-details .details-navigation .single-navigation .icon{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid var(--primary-color);
    transition:all .3s ease-in-out
}
.service-details .details-navigation .single-navigation .icon svg path{
    fill:var(--primary-color)
}
.service-details .details-navigation .single-navigation .icon:hover{
    background-color:var(--primary-color);
    transition:all .3s ease-in-out
}
.service-details .details-navigation .single-navigation .icon:hover svg path{
    fill:var(--white-color);
    transition:all .3s ease-in-out
}
.service-details .details-navigation .single-navigation h6{
    margin:0
}
.service-details .details-navigation .single-navigation h6 a{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:16px;
    line-height:1.5;
    color:var(--title-color);
    text-transform:capitalize
}
.pricing-section{
    background-color:var(--white-color);
    overflow:hidden
}
@media(max-width: 576px){
    .pricing-section{
        padding-left:15px;
        padding-right:15px
    }
}
.pricing-section .section-title{
    margin-bottom:22px
}
.pricing-section .section-title p{
    max-width:610px;
    width:100%;
    margin-bottom:3px
}
.pricing-section .nav-button-wrapper .nav-pills{
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(17,17,17,.1);
    max-width:-moz-max-content;
    max-width:max-content;
    width:100%;
    border-radius:100px;
    padding:9px;
    margin:0 auto
}
.pricing-section .nav-button-wrapper .nav-pills .nav-link{
    color:var(--title-color);
    border-radius:50px
}
.pricing-section .nav-button-wrapper .nav-pills .nav-link.active{
    background-color:var(--primary-color);
    border-radius:50px;
    color:var(--white-color)
}
.pricing-section .nav-button-wrapper .pricing-card{
    background-color:#f5f0ea;
    padding:37px;
    border-radius:10px;
    transition:all .3s ease-in-out;
    position:relative;
    overflow:hidden
}
@media(max-width: 425px){
    .pricing-section .nav-button-wrapper .pricing-card{
        padding:30px 20px
    }
}
.pricing-section .nav-button-wrapper .pricing-card .pricing-badge{
    background-color:var(--primary-color);
    color:#fff;
    font-family:var(--font-Instrument);
    font-size:14px;
    font-weight:400;
    line-height:18px;
    position:absolute;
    z-index:1;
    top:32px;
    right:-50px;
    width:180px;
    text-align:center;
    padding:5px;
    transform:rotate(45deg)
}
.pricing-section .nav-button-wrapper .pricing-card .pricing-top span{
    font-family:var(--font-Instrument);
    font-size:22px;
    font-weight:500;
    line-height:28px;
    letter-spacing:.01em;
    color:#686868;
    text-transform:capitalize
}
.pricing-section .nav-button-wrapper .pricing-card .pricing-top h2{
    margin:14px 0px 20px 0px
}
.pricing-section .nav-button-wrapper .pricing-card .pricing-top h2 span{
    font-family:var(--font-Instrument);
    font-size:50px;
    font-weight:500;
    line-height:56px;
    letter-spacing:.02em;
    color:var(--title-color)
}
@media(max-width: 1199px){
    .pricing-section .nav-button-wrapper .pricing-card .pricing-top h2 span{
        font-size:40px;
        line-height:1.4
    }
}
.pricing-section .nav-button-wrapper .pricing-card .pricing-top h2 sub{
    font-family:var(--font-Instrument);
    font-size:20px;
    font-weight:400;
    line-height:18px;
    letter-spacing:.02em;
    color:var(--title-color)
}
.pricing-section .nav-button-wrapper .pricing-card .pricing-top p{
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:18px;
    color:#686868;
    margin-bottom:27px
}
.pricing-section .nav-button-wrapper .pricing-card .pricing-top .popular .red-shape{
    position:absolute;
    top:-3.2%;
    right:-5.1%
}
@media(min-width: 992px)and (max-width: 1199px){
    .pricing-section .nav-button-wrapper .pricing-card .pricing-top .popular .red-shape{
        top:-3.2%;
        right:-4.7%
    }
}
@media(max-width: 991px){
    .pricing-section .nav-button-wrapper .pricing-card .pricing-top .popular .red-shape{
        top:-3.1%;
        right:-6.2%
    }
}
@media(max-width: 767px){
    .pricing-section .nav-button-wrapper .pricing-card .pricing-top .popular .red-shape{
        top:-3.2%;
        right:-3.9%
    }
}
@media(min-width: 375px)and (max-width: 576px){
    .pricing-section .nav-button-wrapper .pricing-card .pricing-top .popular .red-shape{
        right:-5%
    }
}
.pricing-section .nav-button-wrapper .pricing-card .pricing-top .popular h6{
    font-family:var(--font-Instrument);
    font-size:14px;
    font-weight:400;
    line-height:18px;
    color:var(--white-color);
    letter-spacing:.02em;
    position:absolute;
    top:4%;
    right:5%;
    transform:rotate(40deg);
    z-index:1
}
@media(max-width: 767px){
    .pricing-section .nav-button-wrapper .pricing-card .pricing-top .popular h6{
        top:5%;
        right:2%
    }
}
.pricing-section .nav-button-wrapper .pricing-card .pricing-content{
    position:relative
}
.pricing-section .nav-button-wrapper .pricing-card .pricing-content h6{
    background-color:rgba(16,197,129,.1);
    color:var(--title-color);
    font-family:var(--font-jost);
    font-weight:400;
    padding:11px 20px;
    max-width:171px;
    width:100%;
    border-radius:50px;
    margin:0 auto
}
@media(max-width: 767px){
    .pricing-section .nav-button-wrapper .pricing-card .pricing-content h6{
        margin:0
    }
}
.pricing-section .nav-button-wrapper .pricing-card .pricing-content .line-1{
    content:"";
    position:absolute;
    bottom:-40%;
    left:2%;
    top:7%;
    width:69px;
    height:1px;
    border-radius:10px;
    background:linear-gradient(90.01deg, rgba(0, 0, 0, 0), rgba(51, 51, 51, 0.7))
}
@media(min-width: 1200px)and (max-width: 1399px){
    .pricing-section .nav-button-wrapper .pricing-card .pricing-content .line-1{
        display:none
    }
}
@media(max-width: 1199px){
    .pricing-section .nav-button-wrapper .pricing-card .pricing-content .line-1{
        display:none
    }
}
.pricing-section .nav-button-wrapper .pricing-card .pricing-content .dot-1{
    content:"";
    position:absolute;
    bottom:-40%;
    left:21%;
    top:6.3%;
    width:6px;
    height:6px;
    border-radius:10px;
    background:rgba(51,51,51,.7)
}
@media(min-width: 1200px)and (max-width: 1399px){
    .pricing-section .nav-button-wrapper .pricing-card .pricing-content .dot-1{
        display:none
    }
}
@media(max-width: 1199px){
    .pricing-section .nav-button-wrapper .pricing-card .pricing-content .dot-1{
        display:none
    }
}
.pricing-section .nav-button-wrapper .pricing-card .pricing-content .dot-2{
    content:"";
    position:absolute;
    bottom:-40%;
    right:21%;
    top:6.3%;
    width:6px;
    height:6px;
    border-radius:10px;
    background:rgba(51,51,51,.7)
}
@media(min-width: 1200px)and (max-width: 1399px){
    .pricing-section .nav-button-wrapper .pricing-card .pricing-content .dot-2{
        display:none
    }
}
@media(max-width: 1199px){
    .pricing-section .nav-button-wrapper .pricing-card .pricing-content .dot-2{
        display:none
    }
}
.pricing-section .nav-button-wrapper .pricing-card .pricing-content .line-2{
    content:"";
    position:absolute;
    bottom:-40%;
    right:2%;
    top:7%;
    width:69px;
    height:1px;
    border-radius:10px;
    background:linear-gradient(90.01deg, rgba(51, 51, 51, 0.7), rgba(0, 0, 0, 0))
}
@media(min-width: 1200px)and (max-width: 1399px){
    .pricing-section .nav-button-wrapper .pricing-card .pricing-content .line-2{
        display:none
    }
}
@media(max-width: 1199px){
    .pricing-section .nav-button-wrapper .pricing-card .pricing-content .line-2{
        display:none
    }
}
.pricing-section .nav-button-wrapper .pricing-card .pricing-content ul{
    margin-top:27px
}
.pricing-section .nav-button-wrapper .pricing-card .pricing-content ul li{
    display:flex;
    align-items:center;
    gap:12px;
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:1.4;
    color:var(--title-color);
    margin-bottom:25px
}
.pricing-section .nav-button-wrapper .pricing-card .pricing-content ul li svg path{
    fill:#10c581
}
.pricing-section .nav-button-wrapper .pricing-card .pricing-content ul li:last-child{
    margin-bottom:40px
}
.pricing-section .nav-button-wrapper .pricing-card .purchase-btn{
    background-color:var(--title-color);
    color:var(--white-color);
    width:100%;
    padding:19px;
    display:inline-block;
    text-align:center;
    border-radius:50px;
    transition:all .3s ease-in-out
}
@media(max-width: 576px){
    .pricing-section .nav-button-wrapper .pricing-card .purchase-btn{
        padding:15px 30px;
        width:-moz-max-content;
        width:max-content
    }
}
.pricing-section .nav-button-wrapper .pricing-card:hover{
    background-color:var(--title-color);
    transition:all .3s ease-in-out
}
.pricing-section .nav-button-wrapper .pricing-card:hover .pricing-top span{
    color:rgba(255,255,255,.8);
    transition:all .3s ease-in-out
}
.pricing-section .nav-button-wrapper .pricing-card:hover .pricing-top h2 span{
    transition:all .3s ease-in-out;
    color:var(--white-color)
}
.pricing-section .nav-button-wrapper .pricing-card:hover .pricing-top h2 sub{
    transition:all .3s ease-in-out;
    color:var(--white-color)
}
.pricing-section .nav-button-wrapper .pricing-card:hover .pricing-top p{
    transition:all .3s ease-in-out;
    color:rgba(255,255,255,.8)
}
.pricing-section .nav-button-wrapper .pricing-card:hover .pricing-top .popular h6{
    z-index:999
}
.pricing-section .nav-button-wrapper .pricing-card:hover .pricing-top .popular .red-shape{
    z-index:1
}
.pricing-section .nav-button-wrapper .pricing-card:hover .pricing-content h6{
    background-color:rgba(221,248,237,.8);
    color:var(--title-color);
    transition:all .3s ease-in-out
}
.pricing-section .nav-button-wrapper .pricing-card:hover .pricing-content .line-1{
    transition:all .3s ease-in-out;
    background:linear-gradient(90.01deg, rgba(0, 0, 0, 0), rgb(245, 240, 234))
}
.pricing-section .nav-button-wrapper .pricing-card:hover .pricing-content .line-2{
    transition:all .3s ease-in-out;
    background:linear-gradient(90.01deg, rgb(245, 240, 234), rgba(0, 0, 0, 0))
}
.pricing-section .nav-button-wrapper .pricing-card:hover .pricing-content .dot-1{
    background-color:#f5f0ea;
    transition:all .3s ease-in-out
}
.pricing-section .nav-button-wrapper .pricing-card:hover .pricing-content .dot-2{
    background-color:#f5f0ea;
    transition:all .3s ease-in-out
}
.pricing-section .nav-button-wrapper .pricing-card:hover .pricing-content ul li{
    transition:all .3s ease-in-out;
    color:var(--white-color)
}
.pricing-section .nav-button-wrapper .pricing-card:hover .purchase-btn{
    background-color:var(--primary-color);
    transition:all .3s ease-in-out
}
.blog-grid-sidebar-page{
    background-color:var(--white-color)
}
@media(max-width: 576px){
    .blog-grid-sidebar-page{
        padding-left:15px;
        padding-right:15px
    }
}
.sidebar-area .widget-title{
    color:var(--title-color);
    font-family:var(--font-jost);
    font-size:24px;
    font-weight:400;
    line-height:1.75;
    letter-spacing:.32px;
    display:inline-block;
    margin-bottom:30px;
    text-decoration:underline;
    text-transform:capitalize
}
.sidebar-area .single-widget{
    padding:37.5px 32px;
    border-radius:10px;
    border:1px solid rgba(17,17,17,.1)
}
.sidebar-area .single-widget.style-2{
    padding:0;
    border:0
}
@media(min-width: 992px)and (max-width: 1199px){
    .sidebar-area .single-widget{
        padding:30px 20px
    }
}
@media(max-width: 576px){
    .sidebar-area .single-widget{
        padding:30px 20px
    }
}
.sidebar-area .single-widget .category-list{
    padding:0;
    margin:0;
    list-style:none
}
.sidebar-area .single-widget .category-list .category-list-wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 0 28px
}
.sidebar-area .single-widget .category-list .category-list-wrap span{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:16px;
    line-height:1;
    margin:0;
    color:var(--paragraph-color-1)
}
.sidebar-area .single-widget .category-list .category-list-wrap .form-check{
    min-height:unset;
    margin-bottom:0;
    display:flex;
    align-items:center;
    gap:8px
}
.sidebar-area .single-widget .category-list .category-list-wrap .form-check .form-check-input{
    background-color:rgba(0,0,0,0);
    border:1px solid var(--paragraph-color-1);
    cursor:pointer;
    height:16px;
    width:16px
}
.sidebar-area .single-widget .category-list .category-list-wrap .form-check .form-check-input:focus{
    box-shadow:none
}
.sidebar-area .single-widget .category-list .category-list-wrap .form-check .form-check-input:checked{
    background-color:var(--primary-color);
    border-color:var(--primary-color)
}
.sidebar-area .single-widget .category-list .category-list-wrap .form-check .form-check-input[type=checkbox]{
    border-radius:3px
}
.sidebar-area .single-widget .category-list .category-list-wrap .form-check .form-check-label{
    cursor:pointer;
    color:var(--paragraph-color-1);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:1.25;
    text-transform:capitalize;
    margin-bottom:-4px
}
.sidebar-area .single-widget .recent-post-widget{
    display:flex;
    align-items:center;
    gap:15px
}
@media(max-width: 576px){
    .sidebar-area .single-widget .recent-post-widget{
        flex-direction:column;
        align-items:flex-start
    }
}
.sidebar-area .single-widget .recent-post-widget .recent-post-img{
    border-radius:5px
}
@media(max-width: 576px){
    .sidebar-area .single-widget .recent-post-widget .recent-post-img{
        width:100%
    }
}
.sidebar-area .single-widget .recent-post-widget .recent-post-img img{
    min-width:92px;
    max-width:92px;
    height:71px;
    border-radius:5px
}
@media(max-width: 576px){
    .sidebar-area .single-widget .recent-post-widget .recent-post-img img{
        max-width:100%;
        width:100%;
        -o-object-fit:cover;
        object-fit:cover;
        height:100%
    }
}
.sidebar-area .single-widget .recent-post-widget .recent-post-content{
    line-height:1
}
.sidebar-area .single-widget .recent-post-widget .recent-post-content>a{
    color:#686868;
    font-family:var(--font-Instrument);
    font-size:16px;
    font-weight:400;
    line-height:19.2px;
    display:block;
    margin-bottom:8px;
    transition:.5s
}
@media(max-width: 576px){
    .sidebar-area .single-widget .recent-post-widget .recent-post-content>a{
        margin-bottom:5px
    }
}
.sidebar-area .single-widget .recent-post-widget .recent-post-content>a:hover{
    color:var(--primary-color)
}
.sidebar-area .single-widget .recent-post-widget .recent-post-content h6{
    margin-bottom:0
}
.sidebar-area .single-widget .recent-post-widget .recent-post-content h6 a{
    color:var(--title-color);
    font-family:var(--font-Instrument);
    font-size:18px;
    font-weight:400;
    line-height:20px;
    transition:.5s
}
@media(min-width: 992px)and (max-width: 1199px){
    .sidebar-area .single-widget .recent-post-widget .recent-post-content h6 a{
        font-size:14px
    }
}
@media(max-width: 576px){
    .sidebar-area .single-widget .recent-post-widget .recent-post-content h6 a{
        font-size:16px
    }
}
.sidebar-area .single-widget .recent-post-widget .recent-post-content h6 a:hover{
    color:var(--primary-color)
}
.sidebar-area .single-widget .tag-list{
    padding:0;
    margin:0;
    list-style:none;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap
}
@media(min-width: 1200px)and (max-width: 1399px){
    .sidebar-area .single-widget .tag-list{
        gap:15px
    }
}
@media(min-width: 992px)and (max-width: 1199px){
    .sidebar-area .single-widget .tag-list{
        gap:15px
    }
}
.sidebar-area .single-widget .tag-list li a{
    color:var(--paragraph-color-1);
    font-family:var(--font-jost);
    font-size:14px;
    font-weight:400;
    display:block;
    line-height:1;
    padding:9px 12px;
    border-radius:100px;
    background-color:var(--white-color);
    transition:.5s;
    border:1px solid rgba(17,17,17,.1)
}
.sidebar-area .single-widget .tag-list li:hover a{
    color:var(--white-color);
    background-color:var(--primary-color)
}
.sidebar-area .single-widget .search-box{
    display:flex;
    align-items:center
}
.sidebar-area .single-widget .search-box input{
    width:100%;
    padding:8px 20px;
    font-family:var(--font-jost);
    font-size:18px;
    line-height:1;
    font-weight:400;
    color:var(--border-color);
    height:60px;
    border-radius:10px 0 0 10px;
    border:1px solid rgba(17,17,17,.1)
}
.sidebar-area .single-widget .search-box input:focus{
    border:1px solid #ddd
}
.sidebar-area .single-widget .search-box input::-moz-placeholder{
    color:rgba(var(--title-color-opc), 0.4)
}
.sidebar-area .single-widget .search-box input::placeholder{
    color:rgba(var(--title-color-opc), 0.4)
}
.sidebar-area .single-widget .search-box button{
    background-color:var(--primary-color);
    min-width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    position:relative;
    border-radius:0 10px 10px 0;
    z-index:1
}
@media(max-width: 1399px){
    .sidebar-area .single-widget .search-box button{
        min-width:75px
    }
}
.sidebar-area .single-widget .search-box button::after{
    position:absolute;
    content:"";
    display:block;
    left:15%;
    right:-20%;
    top:-4%;
    height:150%;
    width:150%;
    bottom:0;
    border-radius:2px;
    background-color:var(--title-color);
    transform:skewX(45deg) scale(0, 1);
    z-index:-1;
    transition:all .5s ease-out 0s
}
.sidebar-area .single-widget .search-box button i{
    color:var(--white-color);
    font-size:24px
}
@media(max-width: 576px){
    .sidebar-area .single-widget .search-box button{
        min-width:70px
    }
}
.sidebar-area .single-widget .search-box button:hover{
    color:var(--white-color)
}
.sidebar-area .single-widget .search-box button:hover::after{
    transform:skewX(45deg) scale(1, 1)
}
.sidebar-area .single-widget .social-list{
    display:flex;
    align-items:center;
    gap:30px
}
.sidebar-area .single-widget .social-list li{
    display:block;
    text-align:center
}
.sidebar-area .single-widget .social-list li a i{
    color:var(--text-color);
    transition:.5s
}
.sidebar-area .single-widget .social-list li a span{
    color:var(--text-color);
    font-family:var(--font-jost);
    font-size:12px;
    font-weight:400;
    line-height:1;
    display:block;
    padding-top:2px;
    transition:.5s
}
.sidebar-area .single-widget .social-list li:hover a i{
    color:var(--primary-color1)
}
.sidebar-area .single-widget .social-list li:hover a svg{
    fill:var(--primary-color1)
}
.sidebar-area .single-widget .social-list li:hover a span{
    color:var(--primary-color1)
}
.sidebar-area .social-area{
    border-radius:10px
}
.sidebar-area .social-area h6{
    color:var(--title-color);
    font-family:var(--font-jost);
    font-size:24px;
    font-weight:400;
    line-height:1.19;
    letter-spacing:.32px;
    text-decoration:underline;
    border-bottom:1px solid var(--white-color);
    display:inline-block;
    margin-bottom:32px
}
.sidebar-area .social-area .social-list{
    padding:0;
    margin:0;
    list-style:none;
    display:flex;
    align-items:center;
    gap:24px;
    flex-wrap:wrap
}
@media(max-width: 767px){
    .sidebar-area .social-area .social-list{
        justify-content:start
    }
}
.sidebar-area .social-area .social-list li{
    display:block;
    text-align:center
}
.sidebar-area .social-area .social-list li a{
    display:grid;
    align-items:center
}
.sidebar-area .social-area .social-list li a i{
    color:var(--paragraph-color-1);
    font-size:18px;
    transition:all .3s ease-in-out
}
.sidebar-area .social-area .social-list li a span{
    color:var(--paragraph-color-1);
    font-family:var(--font-jost);
    font-weight:400;
    font-size:14px;
    line-height:1;
    margin:0;
    transition:all .3s ease-in-out
}
.sidebar-area .social-area .social-list li:hover a{
    transition:all .3s ease-in-out
}
.sidebar-area .social-area .social-list li:hover a i{
    color:var(--primary-color)
}
.sidebar-area .social-area .social-list li:hover a span{
    color:var(--primary-color)
}
.service-sidebar-area ul.category-list li a{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:18px;
    line-height:1.2;
    margin:0;
    color:var(--title-color);
    display:flex;
    padding:24px 32px 0;
    transition:all .3s ease-in-out
}
@media(max-width: 1199px){
    .service-sidebar-area ul.category-list li a{
        padding:24px 18px 0
    }
}
.service-sidebar-area ul.category-list li a svg path{
    stroke:#111
}
.service-sidebar-area ul.category-list li a:hover{
    background-color:var(--primary-color);
    transition:all .3s ease-in-out;
    color:var(--white-color)
}
.service-sidebar-area ul.category-list li a:hover svg path{
    stroke:var(--white-color);
    transition:all .3s ease-in-out
}
.service-sidebar-area ul.category-list li a span{
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid rgba(17,17,17,.15);
    padding-bottom:24px;
    width:100%
}
.service-sidebar-area ul.category-list li:last-child a span{
    border-bottom:none
}
.service-sidebar-area .social-area{
    border-radius:10px;
    padding:8px 32px
}
.service-sidebar-area .social-area h6{
    color:var(--title-color);
    font-family:var(--font-jost);
    font-size:24px;
    font-weight:400;
    line-height:1.19;
    letter-spacing:.32px;
    text-decoration:underline;
    border-bottom:1px solid var(--white-color);
    display:inline-block;
    margin-bottom:32px
}
.service-sidebar-area .social-area .social-list{
    padding:0;
    margin:0;
    list-style:none;
    display:flex;
    align-items:center;
    gap:24px;
    flex-wrap:wrap
}
@media(max-width: 767px){
    .service-sidebar-area .social-area .social-list{
        justify-content:start
    }
}
.service-sidebar-area .social-area .social-list li{
    display:block;
    text-align:center
}
.service-sidebar-area .social-area .social-list li a{
    display:grid;
    align-items:center
}
.service-sidebar-area .social-area .social-list li a i{
    color:var(--paragraph-color-1);
    font-size:18px;
    transition:all .3s ease-in-out
}
.service-sidebar-area .social-area .social-list li a span{
    color:var(--paragraph-color-1);
    font-family:var(--font-jost);
    font-weight:400;
    font-size:14px;
    line-height:1;
    margin:0;
    transition:all .3s ease-in-out
}
.service-sidebar-area .social-area .social-list li:hover a{
    transition:all .3s ease-in-out
}
.service-sidebar-area .social-area .social-list li:hover a i{
    color:var(--primary-color)
}
.service-sidebar-area .social-area .social-list li:hover a span{
    color:var(--primary-color)
}
.blog-details-page{
    background-color:var(--white-color)
}
@media(max-width: 576px){
    .blog-details-page{
        padding-left:15px;
        padding-right:15px
    }
}
@media(max-width: 1199px){
    .blog-details-page .blog-details-bottom-area{
        max-width:830px
    }
}
.blog-details-page .blog-details-bottom-area .blog-meta{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    line-height:1;
    margin-bottom:30px;
    gap:15px 50px
}
@media(max-width: 767px){
    .blog-details-page .blog-details-bottom-area .blog-meta{
        margin-bottom:25px
    }
}
.blog-details-page .blog-details-bottom-area .blog-meta li{
    color:var(--paragraph-color-1);
    font-family:var(--font-inter);
    font-weight:500;
    font-size:15px;
    letter-spacing:.3px;
    display:flex;
    align-items:center;
    position:relative;
    transition:.25s ease;
    text-transform:capitalize
}
.blog-details-page .blog-details-bottom-area .blog-meta li svg{
    margin-right:8px;
    fill:rgba(var(--title-color-opc), 0.5);
    transition:.25s ease
}
@media(max-width: 767px){
    .blog-details-page .blog-details-bottom-area .blog-meta li svg{
        width:14px
    }
}
@media(min-width: 576px)and (max-width: 768px){
    .blog-details-page .blog-details-bottom-area .blog-meta li svg{
        margin-right:5px
    }
}
@media(max-width: 576px){
    .blog-details-page .blog-details-bottom-area .blog-meta li svg{
        margin-right:5px
    }
}
.blog-details-page .blog-details-bottom-area .blog-meta li a{
    color:rgba(var(--title-color-opc), 0.5);
    transition:.5s
}
.blog-details-page .blog-details-bottom-area .blog-meta li:hover a{
    color:var(--primary-color)
}
.blog-details-page .blog-details-bottom-area .blog-meta li:hover a svg{
    fill:var(--primary-color)
}
.blog-details-page .blog-details-bottom-area .blog-meta li::before{
    content:"";
    position:absolute;
    right:-25px;
    top:3px;
    width:1px;
    height:10px;
    line-height:5px;
    background-color:var(--paragraph-color-1);
    border-radius:4px
}
@media(max-width: 767px){
    .blog-details-page .blog-details-bottom-area .blog-meta li::before{
        display:none
    }
}
.blog-details-page .blog-details-bottom-area .blog-meta li:last-child{
    margin-right:0
}
.blog-details-page .blog-details-bottom-area .blog-meta li:last-child::before{
    display:none;
    visibility:hidden
}
.blog-details-page .blog-details-thumb img{
    border-radius:20px
}
@media(max-width: 576px){
    .blog-details-page .blog-details-thumb img{
        min-height:250px;
        -o-object-fit:cover;
        object-fit:cover;
        border-radius:10px
    }
}
.blog-details-page .blog-details-content h2{
    color:var(--title-color);
    font-family:var(--font-jost);
    font-size:55px;
    font-weight:500;
    line-height:1.1;
    margin-bottom:18px
}
@media(max-width: 1199px){
    .blog-details-page .blog-details-content h2{
        font-size:45px;
        margin-bottom:30px
    }
}
@media(max-width: 991px){
    .blog-details-page .blog-details-content h2{
        font-size:40px;
        margin-bottom:25px
    }
}
@media(max-width: 767px){
    .blog-details-page .blog-details-content h2{
        font-size:38px
    }
}
@media(max-width: 576px){
    .blog-details-page .blog-details-content h2{
        font-size:32px;
        margin-bottom:20px
    }
}
.blog-details-page .blog-details-content h5{
    font-family:var(--font-jost);
    font-weight:400;
    font-size:24px;
    line-height:1.75;
    margin-bottom:11px
}
.blog-details-page .blog-details-content p{
    color:var(--paragraph-color-1);
    font-family:var(--font-jost);
    font-size:17px;
    font-weight:400;
    line-height:30px
}
@media(max-width: 576px){
    .blog-details-page .blog-details-content p{
        font-size:17px
    }
}
.blog-details-page .blog-details-content .blog-details-image img{
    border-radius:10px
}
.blog-details-page .blog-details-content h3{
    color:var(--title-color);
    font-family:var(--font-syne);
    font-size:35px;
    font-weight:700;
    line-height:1.2;
    margin-bottom:0
}
@media(max-width: 767px){
    .blog-details-page .blog-details-content h3{
        font-size:32px
    }
}
@media(max-width: 576px){
    .blog-details-page .blog-details-content h3{
        font-size:28px
    }
}
.blog-details-page .blog-details-content .comment-and-client-name{
    background:linear-gradient(270deg, rgba(16, 197, 129, 0.15), rgba(23, 133, 92, 0.15));
    padding:40px 60px;
    border-radius:20px
}
@media(min-width: 992px)and (max-width: 1199px){
    .blog-details-page .blog-details-content .comment-and-client-name{
        padding:28px 30px
    }
}
@media(max-width: 767px){
    .blog-details-page .blog-details-content .comment-and-client-name{
        padding:28px 25px
    }
}
@media(max-width: 576px){
    .blog-details-page .blog-details-content .comment-and-client-name{
        padding:28px 20px
    }
}
.blog-details-page .blog-details-content .comment-and-client-name .content p{
    color:var(--paragraph-color-1);
    font-family:var(--font-syne);
    font-size:20px;
    font-weight:400;
    line-height:2;
    letter-spacing:.16px;
    padding-top:20px;
    margin-bottom:25px;
    text-transform:capitalize
}
.blog-details-page .blog-details-content .comment-and-client-name .content h3{
    color:var(--title-color);
    font-family:var(--font-jost);
    font-size:20px;
    font-weight:400;
    text-transform:capitalize;
    line-height:1.2;
    margin-bottom:0
}
.blog-details-page .blog-details-content .comment-and-client-name .content h3 svg{
    margin-right:5px
}
@media(max-width: 767px){
    .blog-details-page .blog-details-content .comment-and-client-name .content h3{
        font-size:18px
    }
}
.blog-details-page .blog-details-content .blog-details-img-grp img{
    border-radius:10px
}
.blog-details-page .blog-details-content ul{
    padding:0;
    margin:0;
    list-style:none
}
@media(max-width: 576px){
    .blog-details-page .blog-details-content ul{
        -moz-columns:unset;
        columns:unset
    }
}
.blog-details-page .blog-details-content ul li{
    display:flex;
    gap:12px;
    margin-bottom:16px
}
.blog-details-page .blog-details-content ul li .content p{
    font-family:var(--font-jost);
    font-size:17px;
    font-weight:400;
    line-height:30px;
    color:#676767;
    margin:0
}
.blog-details-page .blog-details-content ul li .content p b{
    color:var(--title-color)
}
.blog-details-page .blog-details-content ul li span{
    color:var(--paragraph-color-1);
    letter-spacing:.16px
}
.blog-details-page .blog-details-content ul li:last-child{
    margin-bottom:0
}
.blog-details-page .tag-and-social-area{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    flex-wrap:wrap;
    padding:20px 0;
    border-top:1px solid var(--border-color-2);
    border-bottom:1px solid var(--border-color-2)
}
.blog-details-page .tag-and-social-area .single-widget{
    color:var(--title-color);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:1.125;
    letter-spacing:.16px;
    display:inline-block;
    text-transform:capitalize;
    display:flex;
    align-items:baseline;
    gap:12px
}
.blog-details-page .tag-and-social-area .single-widget .tag-list{
    padding:0;
    margin:0;
    list-style:none;
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap
}
@media(min-width: 992px)and (max-width: 1199px){
    .blog-details-page .tag-and-social-area .single-widget .tag-list{
        gap:15px
    }
}
.blog-details-page .tag-and-social-area .single-widget .tag-list li a{
    color:var(--paragraph-color-1);
    font-family:var(--font-jost);
    font-size:14px;
    font-weight:400;
    display:block;
    line-height:1;
    padding:9px 12px;
    border-radius:100px;
    background:rgba(16,197,129,.05);
    transition:.5s;
    border:1px solid rgba(17,17,17,.05)
}
.blog-details-page .tag-and-social-area .single-widget .tag-list li:hover a{
    color:var(--white-color);
    background-color:var(--primary-color)
}
.blog-details-page .tag-and-social-area .social-area{
    display:flex;
    align-items:center;
    gap:12px
}
.blog-details-page .tag-and-social-area .social-area h6{
    color:var(--title-color);
    font-family:var(--font-syne);
    font-size:18px;
    font-weight:400;
    line-height:1;
    margin-bottom:0
}
.blog-details-page .tag-and-social-area .social-area .social-link{
    padding:0;
    margin:0;
    list-style:none;
    display:flex;
    align-items:center;
    gap:12px;
    line-height:1
}
.blog-details-page .tag-and-social-area .social-area .social-link li a i{
    font-size:18px;
    color:rgba(var(--title-color-opc), 0.4);
    transition:.5s
}
.blog-details-page .tag-and-social-area .social-area .social-link li a i.bi-twitter-x{
    font-size:15px
}
.blog-details-page .tag-and-social-area .social-area .social-link li a:hover i{
    color:var(--primary-color2)
}
.blog-details-page .details-navigation{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    flex-wrap:wrap;
    padding:15px 0;
    border-bottom:1px solid #d9d9d9
}
@media(max-width: 767px){
    .blog-details-page .details-navigation{
        padding:25px 0
    }
}
.blog-details-page .details-navigation .navigation-arrow{
    display:flex;
    align-items:center;
    gap:9px;
    transition:.5s;
    font-family:var(--font-jost);
    font-weight:400;
    font-size:16px;
    line-height:1.12;
    color:var(--paragraph-color-1);
    text-transform:capitalize
}
.blog-details-page .details-navigation .navigation-arrow svg{
    margin-right:5px
}
.blog-details-page .details-navigation .navigation-arrow p{
    font-family:var(--font-Instrument);
    font-size:16px;
    font-weight:500;
    line-height:22px;
    color:var(--title-color);
    max-width:248px;
    width:100%;
    margin:24px
}
@media(min-width: 992px)and (max-width: 1199px){
    .blog-details-page .details-navigation .navigation-arrow p{
        max-width:170px;
        width:100%
    }
}
@media(max-width: 991px){
    .blog-details-page .details-navigation .navigation-arrow p{
        max-width:200px;
        width:100%
    }
}
@media(max-width: 767px){
    .blog-details-page .details-navigation .navigation-arrow p{
        display:none
    }
}
.blog-details-page .comment-area .title{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:35px
}
.blog-details-page .comment-area .title h3{
    color:var(--title-color);
    font-family:var(--font-syne);
    font-size:32px;
    font-weight:400;
    margin-bottom:0;
    line-height:1.375
}
@media(max-width: 576px){
    .blog-details-page .comment-area .title h3{
        font-size:25px
    }
}
.blog-details-page .comment-area .comment{
    margin:0;
    padding:0;
    list-style:none
}
.blog-details-page .comment-area .comment>li{
    margin-bottom:27px
}
.blog-details-page .comment-area .comment .single-comment-area{
    display:flex;
    gap:20px;
    margin-bottom:30px
}
@media(max-width: 576px){
    .blog-details-page .comment-area .comment .single-comment-area{
        gap:10px
    }
}
.blog-details-page .comment-area .comment .single-comment-area .author-img img{
    max-width:62px;
    min-width:62px;
    height:62px;
    border-radius:50%
}
@media(max-width: 576px){
    .blog-details-page .comment-area .comment .single-comment-area .author-img img{
        max-width:70px;
        min-width:70px;
        height:70px;
        border-radius:10px
    }
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content .author-name-date{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:16px;
    flex-wrap:wrap
}
@media(max-width: 767px){
    .blog-details-page .comment-area .comment .single-comment-area .comment-content .author-name-date{
        margin-bottom:15px
    }
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content .author-name-date h4{
    line-height:1.375;
    margin-bottom:0;
    color:var(--title-color);
    font-family:var(--font-jost);
    font-size:22px;
    font-weight:400;
    text-transform:capitalize
}
@media(max-width: 767px){
    .blog-details-page .comment-area .comment .single-comment-area .comment-content .author-name-date h4{
        font-size:22px
    }
}
@media(max-width: 576px){
    .blog-details-page .comment-area .comment .single-comment-area .comment-content .author-name-date h4{
        font-size:20px
    }
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content .author-name-date span{
    color:var(--paragraph-color-1);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:1
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content p{
    color:var(--paragraph-color-1);
    font-family:var(--font-inter);
    font-size:16px;
    font-weight:400;
    line-height:1.75;
    margin-bottom:12px;
    text-transform:capitalize
}
@media(max-width: 576px){
    .blog-details-page .comment-area .comment .single-comment-area .comment-content p{
        font-size:15px
    }
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn .details-button a{
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:18px;
    margin:0;
    color:var(--title-color);
    transition:all .3s ease-in-out
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn .details-button a svg{
    margin-right:8px
}
.blog-details-page .comment-area .comment .single-comment-area .comment-content .replay-btn .details-button:hover a{
    color:var(--primary-color);
    transition:all .3s ease-in-out
}
.blog-details-page .comment-area .comment .single-comment-area.comment{
    margin-left:75px;
    margin-bottom:0
}
.blog-details-page .inquiry-form-area .title-2{
    margin-bottom:47px
}
.blog-details-page .inquiry-form-area .title-2 h3{
    font-family:var(--font-Instrument);
    font-size:32px;
    font-weight:500;
    line-height:39.04px;
    text-align:left;
    text-decoration-line:underline;
    text-decoration-thickness:5%;
    text-underline-offset:8%;
    text-transform:capitalize;
    color:var(--title-color)
}
@media(max-width: 576px){
    .blog-details-page .inquiry-form-area .title-2 h3{
        font-size:25px
    }
}
.blog-details-page .inquiry-form-area .inquiry-form{
    background-color:#f4f6fc;
    border:1px solid rgba(17,17,17,.1);
    padding:45px 55px;
    border-radius:10px
}
@media(max-width: 767px){
    .blog-details-page .inquiry-form-area .inquiry-form{
        padding:45px 30px
    }
}
@media(max-width: 576px){
    .blog-details-page .inquiry-form-area .inquiry-form{
        padding:40px 25px;
        border-radius:15px
    }
}
.blog-details-page .inquiry-form-area .inquiry-form .form-inner{
    position:relative;
    line-height:1
}
.blog-details-page .inquiry-form-area .inquiry-form .form-inner label{
    color:var(--paragraph-color-1);
    font-family:var(--font-jost);
    font-size:16px;
    line-height:1.18;
    font-weight:400;
    display:block;
    margin-bottom:10px
}
.blog-details-page .inquiry-form-area .inquiry-form .form-inner input{
    background-color:var(--white-color);
    color:var(--title-color);
    font-family:var(--font-inter);
    font-size:14px;
    font-weight:500;
    height:50px;
    width:100%;
    padding:10px 20px;
    outline:none;
    border-radius:5px
}
.blog-details-page .inquiry-form-area .inquiry-form .form-inner input::-moz-placeholder{
    color:#7c7c7c;
    font-weight:400
}
.blog-details-page .inquiry-form-area .inquiry-form .form-inner input::placeholder{
    color:#7c7c7c;
    font-weight:400
}
.blog-details-page .inquiry-form-area .inquiry-form .form-inner input:focus{
    border:1px solid var(--primary-color)
}
.blog-details-page .inquiry-form-area .inquiry-form .form-inner textarea{
    background-color:var(--white-color);
    color:var(--title-color);
    font-family:var(--font-jost);
    font-size:16px;
    font-weight:400;
    line-height:19.2px;
    letter-spacing:.01em;
    width:100%;
    padding:20px 20px;
    outline:none;
    min-height:184px;
    border-radius:5px;
    border:none;
    text-transform:capitalize
}
.blog-details-page .inquiry-form-area .inquiry-form .form-inner textarea::-moz-placeholder{
    color:#7c7c7c
}
.blog-details-page .inquiry-form-area .inquiry-form .form-inner textarea::placeholder{
    color:#7c7c7c
}
.blog-details-page .inquiry-form-area .inquiry-form .form-inner textarea:focus{
    border:1px solid var(--primary-color)
}
.blog-details-page .inquiry-form-area .inquiry-form button{
    border:unset
}
.blog-details-page .inquiry-form-area .inquiry-form button.primary-btn2{
    background-color:var(--primary-color);
    color:var(--white-color);
    font-size:16px;
    line-height:1.9;
    padding:13px 36px;
    text-transform:capitalize
}
.blog-details-page .form-inner2{
    margin-bottom:42px
}
.blog-details-page .form-inner2 .form-check{
    min-height:unset;
    margin-bottom:0;
    display:flex;
    align-items:normal;
    gap:11px
}
.blog-details-page .form-inner2 .form-check .form-check-input{
    cursor:pointer;
    height:14px;
    width:14px;
    margin-top:5px;
    border:1px solid var(--border-color);
    background-color:rgba(0,0,0,0)
}
.blog-details-page .form-inner2 .form-check .form-check-input:focus{
    box-shadow:none;
    border-color:var(--primary-color3)
}
.blog-details-page .form-inner2 .form-check .form-check-input:checked{
    background-color:var(--primary-color);
    border-color:var(--primary-color)
}
.blog-details-page .form-inner2 .form-check .form-check-label{
    cursor:pointer;
    color:var(--paragraph-color-1);
    font-family:var(--font-jost);
    font-size:14px;
    font-weight:400;
    text-transform:capitalize;
    margin:0
}
@media(max-width: 576px){
    .blog-details-page .form-inner2 .form-check .form-check-label{
        font-size:12px
    }
}
.responsive-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.responsive-buttons a {
    width: 100%;
}

@media (min-width: 992px) {
    .responsive-buttons {
        flex-direction: row;
    }

    .responsive-buttons a {
        width: auto;
    }
}



.right-sidebar-menu::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    background: url(https://www.premierleague.com/resources/v1.26.27/i/svg-files/elements/backgrounds/wave-bg-gradient.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    z-index: -1;
    pointer-events: none; /* ensures it doesn’t interfere with clicks */
}




@media (max-width: 767px) {
    .tool-card {
        margin-bottom: 20px;
    }
    .player-select-container {
        margin-bottom: 15px;
    }
    .comparison-table td, .comparison-table th {
        padding: 8px 5px;
        font-size: 14px;
    }
    .player-photo {
        width: 40px;
        height: 40px;
        margin-right: 10px;
    }
}

/* Enhanced styles for all devices */
.tool-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tool-card::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    background: url(https://www.premierleague.com/resources/v1.26.27/i/svg-files/elements/backgrounds/wave-bg-gradient.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom;
    z-index: -1;
    pointer-events: none;
}

.tool-header {
    border-radius: 12px 12px 0 0;
    background-image:
            url('https://fantasy.premierleague.com/assets/pattern-1-1236-CLcKfGdk.png'),
            linear-gradient(90deg, #05f0ff 0%, #953bff 100%);

    background-repeat: no-repeat;
    background-size: auto, cover;
    color: white;
    padding: 20px;
}

.tool-body {
    padding: 20px;
}

.tool-header h3 {
    color:  var(--title-color);
    font-weight: 700;
}
.player-photo {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    object-fit: cover;
    margin-right: 15px;
}
.fdr-badge {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    color: white;
    font-weight: bold;
}
.fdr-1 { background-color: #375523; }
.fdr-2 { background-color: #01FC7A; }
.fdr-3 { background-color: #E7E7E7; }
.fdr-4 { background-color: #ff1751; }
.fdr-5 { background-color: #80072D; }
.select2-container--default .select2-selection--single {
    height: 45px;
    border-radius: 4px;
    border: 1px solid #ddd;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 45px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 43px;
}
.player-option {
    display: flex;
    align-items: center;
}
.filter-controls {
    margin-bottom: 20px;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
}
.comparison-table th {
    background: #f8f9fa;
}
.player-stats-card {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}
.player-stats-card h5 {
    margin-bottom: 15px;
    color:  var(--title-color);
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.stat-item {
    text-align: center;
}
.stat-value {
    font-size: 18px;
    font-weight: bold;
    color: #2c3e50;
}
.stat-label {
    font-size: 12px;
    color: #7f8c8d;
}
/* Style for Select2 selection */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 45px;
    padding-left: 10px;
}

.player-selection {
    display: flex;
    align-items: center;
    height: 100%;
    overflow: hidden;
}

.player-selection-photo {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    object-fit: cover;
    margin-right: 8px;
}

.player-selection-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 40px);
    display: inline-block;
    vertical-align: middle;
}

/* Adjust dropdown to show full content */
.select2-container--open .select2-dropdown {
    z-index: 1060; /* Make sure it appears above other elements */
}

/* Make sure the selection container has enough height */
.select2-container--default .select2-selection--single {
    height: 45px;
}


/* Button loading state */
.btn-loading {
    position: relative;
    pointer-events: none;
}
.btn-loading:after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: button-spinner .6s linear infinite;
    margin-left: 10px;
    vertical-align: middle;
}
@keyframes button-spinner {
    to { transform: rotate(360deg); }
}

/* Ensure images have fallbacks */
img {
    object-fit: contain;
}
.tool-card-link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
}


.tool-card-body {
    padding: 2rem;
    background: white;
}
.tool-card-footer {

    padding: 1rem;

    text-align: center;
}
.mini-league-card .tool-header {
    background-image:
            url('https://fantasy.premierleague.com/assets/pattern-1-1236-CLcKfGdk.png'),
            linear-gradient(90deg, #ff7b00 0%, #ff0084 100%);
}
.coming-soon-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: white;
    color: #05f0ff;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Comparison results */
.comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.comparison-table th {
    text-align: center;
    padding: 5px;
    background: #f8f9fa;
}

.comparison-table td {
    padding: 12px 15px;
    background: #fff;
    border: 1px solid #eee;
}

.comparison-table .player-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.comparison-table .player-photo {
    width: 75px;
    height: 75px;
    margin: 5px;
    object-fit: contain;
}

.comparison-table .better-stat {
    background: #e6f7ee;
    color: #28a745;
    font-weight: bold;
}

.comparison-table .worse-stat {
    background: #fce8e8;
    color: #dc3545;
    font-weight: bold;
}



@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.loading-btn .spinner-border {
    margin-right: 8px;
}

 .feature-icon i {
     background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     display: inline-block;
 }


 .fdr-box {
     width: 30px;
     height: 30px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 4px;
     margin: 2px;
     font-weight: bold;
     color: white;
 }

.fixture-row {
    border-bottom: 1px solid #eee;
    padding: 5px 0;
    transition: background-color 0.3s;
}
.fixture-row:hover {
    background-color: #f8f9fa;
}
.team-badge-sm {
    width: 25px;
    height: 25px;
    margin-right: 8px;
}
.fdr-legend {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    flex-wrap: wrap;
}
.fdr-legend-item {
    display: flex;
    align-items: center;
    margin: 0 10px;
}
.fdr-legend-color {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    margin-right: 5px;
}
.fixture-card {
    background: white;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.fixture-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}


.shimmer-loader {
    background: #f6f7f8;
    background-image:
            linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%),
            url('https://www.premierleague.com/resources/v1.26.39/i/svg-files/elements/backgrounds/content-card-vector.svg');
    background-repeat: no-repeat, no-repeat;
    background-size: 800px 104px, cover;
    background-position: 0 0, center;

    display: inline-block;
    position: relative;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeholderShimmer;
    animation-timing-function: linear;

    height: 38px;
    width: 100%;
    border-radius: 4px;
}

.team-badge-sm {
    width: 20px;
    height: 20px;
    object-fit: contain;
    vertical-align: middle;
    margin-right: 5px;
}

.team-badge-select {
    width: 18px;
    height: 18px;
    object-fit: contain;
    margin-right: 5px;
}

.fixture-row {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}

@media (max-width: 576px) {
    .fixture-row .col-md-2,
    .fixture-row .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
        margin-bottom: 6px;
    }
    .fixture-row .col-md-2.text-end {
        text-align: center !important;
    }
    .fixture-header h4 {
        font-size: 1rem;
    }
}
.bg-fplfiesta {
    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%) !important;
}
.bg-fplfiestagw {
    background: linear-gradient(90deg, #05f0ff 0%, #00FF87FF 100%) !important;
}
.btn-sm-block {
    display: block;
    width: 100%;
}

@media (min-width: 576px) {
    .btn-sm-block {
        display: inline-block;
        width: auto;
    }
}

 .player-card {
     background: white;
     background-image: url('https://www.premierleague.com/resources/v1.26.39/i/svg-files/elements/backgrounds/content-card-vector.svg');
     background-repeat: no-repeat;
     background-position: 100%;
     background-size: cover;

     border-radius: 1.6rem;
     padding:5px;
     margin-bottom: 15px;
     box-shadow: 0 2px 8px rgba(0,0,0,0.05);
     transition: transform 0.3s ease;

     display: flex;
     flex-direction: row;
     gap: 1.6rem;
     align-items: flex-end;
     word-break: break-word; /* use break-word for cleaner wrapping */
     position: relative;
 }


.player-image {
    width: 75px;
    height: 75px;
    object-fit: contain;

}


.recommendation-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.form-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 3px;
}
.form-excellent { background-color: #2ecc71; }
.form-good { background-color: #27ae60; }
.form-average { background-color: #f39c12; }
.form-poor { background-color: #e74c3c; }

/* Login/Register Section */
.login-section {
    background-color: #f8f9fa;
    padding: 100px 0;
}

.login-section .section-title h2 {
    font-family: var(--font-Instrument);
    font-size: 42px;
    font-weight: 600;
    line-height: 52px;
    color: #38003c; /* FPL purple */
    margin: 0 0 15px 0;
    text-align: start;
}

.login-section .section-title h3 {
    font-family: var(--font-Instrument);
    font-size: 32px;
    font-weight: 600;
    line-height: 42px;
    color: #38003c; /* FPL purple */
    text-align: start;
    margin-bottom: 20px;
}

.login-section .section-title p {
    font-family: var(--font-jost);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: start;
    color: #666;
}

.login-section .login-wrapper {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.login-section .login-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #00ff85 0%, var(--fpl-blue) 100%); /* FPL gradient */
}

.login-section .login-tabs {
    display: flex;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
}

.login-section .login-tab {
    padding: 12px 25px;
    font-family: var(--font-jost);
    font-weight: 500;
    font-size: 18px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.login-section .login-tab.active {
    color: #38003c;
    border-bottom: 3px solid #00ff85; /* FPL green */
}

.login-section .login-tab:hover {
    color: #38003c;
}

.login-section .form-inner {
    margin-bottom: 25px;
}

 .form-inner label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-jost);
    font-weight: 500;
    color: #38003c;
}

 .form-inner input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: var(--font-jost);
    transition: all 0.3s ease;
}

.form-inner input:focus {
    border-color: #00ff85;

}

 .form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

 .form-check {
    display: flex;
    align-items: center;
}

 .form-check-input {
    margin-right: 8px;
    accent-color: #00ff85; /* FPL green */
}

 .forgot-password {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

 .forgot-password:hover {
    color: #38003c;
}

 .login-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(90deg, #00ff85 0%, #38003c 100%);
    color: white;
    border: none;
    border-radius: 5px;
    font-family: var(--font-jost);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

 .login-btn:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

 .divider {
    display: flex;
    align-items: center;
    margin: 25px 0;
    color: #666;
}

 .divider::before,
 .divider::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #eee;
}

 .divider::before {
    margin-right: 15px;
}

 .divider::after {
    margin-left: 15px;
}

 .social-login {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

 .social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: 5px;
    font-family: var(--font-jost);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

 .social-btn i {
    margin-right: 10px;
    font-size: 18px;
}

 .google-btn {
    background: #fff;
    color: #666;
    border: 1px solid #ddd;
}

 .google-btn:hover {
    background: #f8f9fa;
}

 .facebook-btn {
    background: #3b5998;
    color: white;
}

 .facebook-btn:hover {
    background: #344e86;
}

 .register-link {
    text-align: center;
    margin-top: 20px;
    color: #666;
}

 .register-link a {
    color: #00ff85;
    text-decoration: none;
    font-weight: 500;
}

 .register-link a:hover {
    text-decoration: underline;
}

/* Security Tips */
 .security-tips {
    background: #f0f7ff;
    border-left: 4px solid #00ff85;
    padding: 20px;
    border-radius: 5px;
    margin-top: 30px;
}

 .security-tips h4 {
    color: #38003c;
    margin-bottom: 15px;
    font-family: var(--font-Instrument);
}

 .security-tips ul {
    padding-left: 20px;
    margin: 0;
}

 .security-tips li {
    margin-bottom: 10px;
    color: #666;
    font-family: var(--font-jost);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .login-section {
        padding: 60px 0;
    }

    .login-section .login-wrapper {
        padding: 30px;
    }

    .login-section .section-title h2 {
        font-size: 32px;
        line-height: 42px;
    }

    .login-section .section-title h3 {
        font-size: 26px;
        line-height: 36px;
    }
}

@media (max-width: 576px) {
    .login-section .login-wrapper {
        padding: 25px 20px;
    }

    .login-section .login-tabs {
        justify-content: center;
    }

    .login-section .login-tab {
        padding: 10px 15px;
        font-size: 16px;
    }
}

 .toast-container {
     position: fixed;
     top: 20px;
     right: 20px;
     z-index: 9999;
 }

.toast {
    background: #38003c;
    color: white;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    max-width: 350px;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(100%);
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-success {
    background: linear-gradient(90deg, #00ff85 0%, #38003c 100%);
}

.toast-error {
    background: linear-gradient(90deg, #ff3e3e 0%, #38003c 100%);
}

.toast-icon {
    margin-right: 12px;
    font-size: 24px;
}

.toast-close {
    margin-left: auto;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.toast-close:hover {
    opacity: 1;
}
.step-container {
    display: block;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}
.step-container.active {
    opacity: 1;
    height: auto;
    overflow: visible;
    pointer-events: auto;
}
/* Progress Bar Styling */
.progress-bar-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    background: #f8f9fa;
    border-radius: 50px;
    padding: 5px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.progress-step {
    flex: 1;
    text-align: center;
    padding: 10px 5px;
    position: relative;
    font-weight: bold;
    font-size: 14px;
    z-index: 1;
    cursor: default;
    transition: all 0.3s ease;
    background: #e9ecef;
    margin: 0 2px;
    border-radius: 50px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.progress-step.active {
    color: white;
    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.progress-step.completed {
    color: white;
    background: #38003c;
}

.progress-step.future {
    background: #e9ecef;
    color: #666;
    opacity: 0.7;
}

/* Mobile Responsive Styles */
@media (max-width: 576px) {
    .progress-bar-container {
        padding: 3px;
        margin-bottom: 20px;
    }

    .progress-step {
        font-size: 10px;
        padding: 8px 2px;
        margin: 0 1px;
    }
}

/* Tablet Responsive Styles */
@media (min-width: 577px) and (max-width: 768px) {
    .progress-step {
        font-size: 12px;
        padding: 8px 3px;
    }
}

/* Optional: Add connecting lines between steps */
.progress-step:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -15px;
    width: 15px;
    height: 2px;
    background: #dee2e6;
    transform: translateY(-50%);
    z-index: -1;
}

.progress-step.active:not(:first-child)::before,
.progress-step.completed:not(:first-child)::before {
    background: #38003c;
}

@media (max-width: 576px) {
    .progress-step:not(:first-child)::before {
        left: -10px;
        width: 10px;
    }
}

/* Form Styling */
.login-wrapper {
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    padding: 40px;
    margin: 0 auto;
    max-width: 600px;
}

/* Instruction Box */
.instruction-box {
    background: #f8f9fa;
    border-left: 4px solid #00ff85;
    padding: 15px;
    margin: 20px 0;
    border-radius: 0 5px 5px 0;
}

/* Verification Success */
.verification-success {
    background: rgba(0, 255, 133, 0.1);
    border-left: 4px solid #00ff85;
    padding: 15px;
    margin: 20px 0;
    border-radius: 0 5px 5px 0;
    display: none;
}

/* Loading spinner */
.spinner-container {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}

/* Club Badge Styling */
.club-badge-container {
    text-align: center;
    margin: 15px 0;
}
#club-badge {
    max-height: 80px;
    max-width: 80px;
    border-radius: 50%;
    background: #f8f9fa;
    padding: 5px;
    border: 2px solid #e9ecef;
    display: none;
}
#no-badge-message {
    font-style: italic;
    color: #6c757d;
    display: none;
}




/* Dashboard Banner */
.dashboard-banner {
    background-image: url('https://fantasy.premierleague.com/assets/pattern-1-1236-CLcKfGdk.png'),
    linear-gradient(135deg, #667eea 0%, #923fff 100%);
    color: white;
    padding: 3rem 0;
    background-position: right top -197px, 0 0;
    background-repeat: no-repeat;
    background-size: 204px 315px, auto;
}



.user-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;

    transition: transform 0.3s ease;

    /* Gradient border implementation */
    border: 4px solid transparent;
    background:
        /* Inner background (white or any color you want) */
            content-box padding-box white,
                /* Gradient border */
            border-box var(--c-gradient-fan-passport);

    /* Ensure the padding matches your border width */
    padding: 4px;
    box-sizing: border-box;
}

.user-avatar:hover {
    transform: scale(1.05);
}
.profile-button {
    --profile-btn-logged-out-size-desktop: 3.8rem;
    --profile-btn-logged-out-size-mobile: 3.2rem;
    --profile-btn-logged-in-size-desktop: 4rem;
    --profile-btn-logged-in-size-mobile: 3.2rem;
    --border-width: 0.2rem;
    background-image: var(--c-gradient-fan-passport);
    border-radius: 99.99rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--profile-btn-logged-in-size-desktop);
    min-width: var(--profile-btn-logged-in-size-desktop);
    position: relative;
}


.wallet-balance {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 1rem;
    text-align: center;

    border: 1px solid rgba(255, 255, 255, 0.1);
}

.wallet-balance h4 {
    color: var(--title-color);
    margin-bottom: 0.5rem;
}



.dashboard-banner .container {
    position: relative;
    z-index: 2;
}

.wallet-amount {
    font-size: 2rem;
    font-weight: bold;
    color: var(--c-mono-white);

    margin: 0.5rem 0;
}

.rank-display {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 1rem;
    margin-top: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.rank-display h5 {
  color: var(--title-color);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

/* Dashboard Content */
.dashboard-content {
    background: var(--fpl-light);
    border-radius: 30px 30px 0 0;
    margin-top: -20px;
    position: relative;
    z-index: 10;
    min-height: 80vh;
}
.stat-card {
    background-image:
            url('https://fantasy.premierleague.com/assets/pattern-1-1236-CLcKfGdk.png'),
            linear-gradient(90deg, #00d4ff 0%, #953bff 100%);
    background-position: right center, 0 0;
    background-repeat: no-repeat;
    background-size: 150px, cover;

    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    color: white;
    text-align: left;
    transition: all 0.3s ease;
    position: relative;
}

.stat-card .card-value {
    font-size: 1.8rem;
    font-weight: 900;
    color: white;
    margin-bottom: 0.25rem;
}

.stat-card .card-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #e0e0e0;
    font-weight: 600;
}





.stat-card:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);

}



.stat-card i {

    margin-top: 1rem;
    color: var(--title-color);
}


/* Enhanced Tab Pills */
.nav-pills {
    background: white;
    border-radius: 20px;
    padding: 0.5rem;
    box-shadow: var(--shadow-light);
    margin-bottom: 2rem;
}

.nav-pills .nav-link {
    color: var(--fpl-purple);
    font-weight: 600;
    border-radius: 15px;
    padding: 1rem 1.5rem;
    margin: 0 0.25rem;
    transition: all 0.3s ease;
    border: none;
}

.nav-pills .nav-link:hover {
    background: rgba(55, 0, 60, 0.1);

}

.nav-pills .nav-link.active {
    background: linear-gradient(45deg, var(--fpl-purple), #4a0e4e);
    color: white;
    box-shadow: 0 8px 25px rgba(55, 0, 60, 0.3);
}

/* Enhanced Challenge Cards */
.challenge-card {
    background: white;
    border: none;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-light);
    margin-bottom: 2rem;
}

.challenge-card:hover {
    box-shadow: var(--shadow-heavy);

}


.challenge-card .card-header {
    border-radius: 12px 12px 0 0;
    background-image:
            url('https://fantasy.premierleague.com/assets/pattern-1-1236-CLcKfGdk.png'),
            linear-gradient(90deg, #05f0ff 0%, #953bff 100%);

    background-repeat: no-repeat;
    background-size: auto, cover;
    color: white;
    padding: 1.5rem;
    border: none;
}

.challenge-card .card-header h5 {
    font-weight: 700;
    margin: 0;
}

.challenge-item {
    background: linear-gradient(135deg, #f8f9fa, white);
    border: 2px solid transparent;
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    position: relative;
}

.challenge-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(45deg, var(--fpl-green), var(--fpl-blue));
    border-radius: 0 10px 10px 0;
}

.challenge-item:hover {
    border-color: var(--fpl-green);

}

/* Enhanced Buttons */
.btn-fpl {
    background: linear-gradient(45deg, var(--fpl-purple), #4a0e4e);
    color: white;
    border: none;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(55, 0, 60, 0.3);
}

.btn-fpl:hover {
    background: linear-gradient(45deg, #4a0e4e, var(--fpl-purple));
    color: white;

    box-shadow: 0 8px 25px rgba(55, 0, 60, 0.4);
}

.btn-outline-fpl {
    border: 2px solid var(--fpl-purple);
    color: var(--fpl-purple);
    background: transparent;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.btn-outline-fpl:hover {
    background: var(--fpl-purple);
    color: white;

}

.btn-fpl-green {
    background: linear-gradient(45deg, var(--fpl-green), var(--fpl-blue));
    color: var(--fpl-dark);
    border: none;
    font-weight: 700;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 255, 135, 0.3);
}

.btn-fpl-green:hover {
    color: var(--fpl-dark);

    box-shadow: 0 8px 25px rgba(0, 255, 135, 0.4);
}

/* Progress Bars */
.progress {
    height: 10px;
    border-radius: 10px;
    background: #e9ecef;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(45deg, var(--fpl-green), var(--fpl-blue));
    border-radius: 10px;
    transition: width 0.3s ease;
}

/* Badges */
.badge {
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
    font-weight: 600;
}

.bg-success {
    background: linear-gradient(45deg, var(--fpl-green),var(--fpl-green)) !important;
}

.bg-warning {
    background: linear-gradient(45deg, var(--fpl-yellow), #ffc107) !important;
    color: var(--fpl-dark) !important;
}

.bg-danger {
    background: linear-gradient(45deg, var(--fpl-pink), #dc3545) !important;
}

/* Tables */
.table {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow-light);
}

.table thead th {
    background: linear-gradient(135deg, var(--fpl-purple), #4a0e4e);
    color: white;
    border: none;
    font-weight: 700;
    padding: 1rem;
}

.table tbody td {
    padding: 1rem;
    vertical-align: middle;
    border-color: #e9ecef;
}

.table tbody tr:hover {
    background: rgba(55, 0, 60, 0.05);
}

.highlight-row {
    background: linear-gradient(90deg, rgba(0, 255, 135, 0.1), rgba(0, 212, 255, 0.1)) !important;
    border-left: 4px solid var(--fpl-green) !important;
}

/* Quick Actions Card */
.quick-actions {
    background: linear-gradient(135deg, var(--fpl-purple), #4a0e4e);
    color: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--shadow-medium);
}

.quick-actions .card-header {
    background: transparent;
    border: none;
    padding: 0 0 1rem 0;
}

.quick-actions .btn {
    width: 100%;
    margin-bottom: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-weight: 600;
    border-radius: 12px;
    padding: 0.75rem;
    transition: all 0.3s ease;
}

.quick-actions .btn:hover {
    background: rgba(255, 255, 255, 0.2);

}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--fpl-gray);
}

.empty-state i {

    color: var(--fpl-gray);
    margin-bottom: 1.5rem;
    opacity: 0.5;
}

.empty-state h5 {
    color: var(--fpl-dark);
    margin-bottom: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .user-avatar {
        width: 80px;
        height: 80px;
    }

    .stat-card .card-value {

    }

    .wallet-amount {

    }

    .dashboard-banner {
        padding: 2rem 0;
        text-align: center;
    }

    .nav-pills .nav-link {
        padding: 0.75rem 1rem;

    }

    .challenge-item {
        padding: 1rem;
    }
}

@media (max-width: 576px) {
    .dashboard-content {
        border-radius: 20px 20px 0 0;
    }

    .stat-card {
        padding: 1.5rem;
    }

    .challenge-card .card-header {
        padding: 1rem;
    }
}

/* Animation Classes */
@keyframes fadeInUp {
    from {
        opacity: 0;

    }
    to {
        opacity: 1;

    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

/* Custom Scrollbar */
.tab-content::-webkit-scrollbar {
    width: 8px;
}

.tab-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.tab-content::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, var(--fpl-purple), var(--fpl-green));
    border-radius: 10px;
}

.tab-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, var(--fpl-green), var(--fpl-purple));
}

 .glass-nav-dark {
     background: rgba(55, 0, 60);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border-radius: 12px;
     padding: 8px;
     border: 1px solid rgba(255, 255, 255, 0.08);
     box-shadow: 0 8px 32px 0 rgba(55, 0, 60, 0.3);
 }

.glass-nav-dark .nav-link {
    color: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    margin: 0 4px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: none;
    background: transparent;
    position: relative;
    overflow: hidden;
}

.glass-nav-dark .nav-link:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.glass-nav-dark .nav-link.active {
    color: white;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass-nav-dark .nav-link.active::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, #00d4ff, #953bff);
    border-radius: 3px;
}

.glass-nav-dark .nav-link i {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .glass-nav-dark {
        padding: 6px;
    }
    .glass-nav-dark .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
    .glass-nav-dark .nav-link i {
        margin-right: 4px;
    }
}
/* Common wallet buttons */
.wallet-btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 10px;
}

/* Reduce font and padding on small screens */
@media (max-width: 576px) {
    .wallet-btn {
        font-size: 0.75rem;
        padding: 0.3rem 0.5rem;
    }

    .wallet-btn i {
        margin-right: 4px;
        font-size: 0.85rem;
    }
}
.elite-badge {
    width: 40px;
    height: auto;
    margin: 5px;
}

.elite5 { filter: drop-shadow(0 0 5px gold); }
.elite4 { filter: drop-shadow(0 0 4px #aaaaff); }
.elite3 { filter: drop-shadow(0 0 3px #88f); }
.elite2 { filter: drop-shadow(0 0 2px #5cd); }
.elite1 { filter: drop-shadow(0 0 1px #ccc); }

.card-challenge {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #e0e0e0;
}

.card-challenge:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.card-challenge .header {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.card-challenge .header h5 {
    color: #333;
    font-size: 1.1rem;
    margin-bottom: 5px;
    font-weight: 600;
}

.card-challenge .user {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.card-challenge .user h3 {
    font-size: 1rem;
    color: #444;
    margin: 0;
    font-weight: 500;
}

.card-challenge .user div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.card-challenge .challenge-details {
    margin-bottom: 15px;
}

.card-challenge .challenge-details p {
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #555;
}

.card-challenge .challenge-details p strong {
    color: #333;
}

.card-challenge .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.card-challenge .footer button {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.card-challenge .footer button:hover {
    background-color: #e9ecef;
}

.card-challenge .footer .opt-in {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.card-challenge .footer .opt-in:hover {
    background-color: #218838;
}

.card-challenge .footer .opt-in a {
    color: white;
    text-decoration: none;
}

.card-challenge .footer .activate-challenge-btn {
    background-color: #007bff;
    color: white;
    border: none;
}

.card-challenge .footer .activate-challenge-btn:hover {
    background-color: #0069d9;
}

.card-challenge .footer .joined-text {
    color: #28a745;
    font-weight: 500;
    font-size: 0.9rem;
}

.card-challenge .footer .text-warning {
    color: #ffc107;
    font-size: 0.8rem;
    margin: 0;
}

.card-challenge .footer .text-danger {
    color: #dc3545;
    font-size: 0.8rem;
    margin: 0;
}

.card-challenge .footer .share-container {
    display: flex;
    align-items: center;
}

.card-challenge .footer .share-container i {
    color: #6c757d;
    cursor: pointer;
    font-size: 1.1rem;
    transition: color 0.3s ease;
}

.card-challenge .footer .share-container i:hover {
    color: #495057;
}

.about-btn {
    background-color: #6c757d;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 5px;
}

.about-btn:hover {
    background-color: #5a6268;
}

.view-winners-btn {
    background-color: #17a2b8;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.view-winners-btn:hover {
    background-color: #138496;
}

/* Status badges - assuming these are span elements with classes */
.chal-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 8px;
}

.chal-status.active {
    background-color: #d4edda;
    color: #155724;
}

.chal-status.pending {
    background-color: #fff3cd;
    color: #856404;
}

.chal-status.completed {
    background-color: #d1ecf1;
    color: #0c5460;
}

.chal-status.cancelled {
    background-color: #f8d7da;
    color: #721c24;
}

 .challenge-card-compact {
     background: white;
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.08);
     margin-bottom: 16px;
     overflow: hidden;
     transition: all 0.3s ease;
     border: 1px solid #eaeaea;
 }

.card-header-compact {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.card-header-compact:hover {
    background: linear-gradient(135deg, #f1f3f5 0%, #ffffff 100%);
}

.header-content {
    flex: 1;
    min-width: 0;
}

.card-title {
    font-weight: 600;
    font-size: 1rem;
    color: #38003c;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-meta {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    color: #666;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.badge-sm {
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.badge-primary {
    background: rgba(56, 0, 60, 0.1);
    color: #38003c;
}

.badge-success {
    background: rgba(0, 255, 133, 0.1);
    color: #00a55e;
}

.badge-warning {
    background: rgba(255, 193, 7, 0.1);
    color: #b08d00;
}

.action-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, #00ff85 0%, #00cc6a 100%);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 255, 133, 0.3);
}

.btn-outline {
    background: transparent;
    border: 1px solid #ddd;
    color: #666;
}

.btn-outline:hover {
    background: #f8f9fa;
}

.card-body-compact {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.card-expanded .card-body-compact {
    max-height: 1000px;
    padding: 16px;
    border-top: 1px solid #f0f0f0;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.detail-item {
    font-size: 0.85rem;
}

.detail-label {
    font-weight: 500;
    color: #666;
    margin-bottom: 4px;
}

.detail-value {
    font-weight: 600;
    color: #333;
}

.currency {
    color: #00a55e;
}

.about-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #eee;
}

.about-text {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.5;
}

.footer-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.expand-icon {
    transition: transform 0.3s ease;
}

.card-expanded .expand-icon {
    transform: rotate(180deg);
}

@media (max-width: 576px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .card-meta {
        flex-wrap: wrap;
        gap: 6px;
    }
}

 .leaderboard-container {
     background: #fff;
     border-radius: 8px;
     overflow: hidden;
 }

/* Modal specific styling */
.modal-leaderboard {
    margin: 0;
    box-shadow: none;
    border-radius: 0;
}

.leaderboard-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    text-align: center;
}

.leaderboard-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.leaderboard-list {
    padding: 0;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    transition: all 0.3s ease;
    position: relative;
}

.leaderboard-item:hover {
    background-color: #f8f9fa;
    transform: translateY(-2px);
}

.leaderboard-item:last-child {
    border-bottom: none;
}

/* Rank Section */
.rank-section {
    display: flex;
    align-items: center;
    min-width: 80px;
    margin-right: 15px;
}

.rank-number {
    font-size: 1.5rem;
    font-weight: bold;
    color: #666;
    margin-right: 10px;
}

.rank-icon {
    font-size: 1.5rem;
    margin-right: 10px;
}

.rank-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.rank-badge.gold {
    background: linear-gradient(45deg, #ffd700, #ffed4e);
    color: #b45309;
}

.rank-badge.silver {
    background: linear-gradient(45deg, #c0c0c0, #e5e7eb);
    color: #374151;
}

.rank-badge.bronze {
    background: linear-gradient(45deg, #cd7f32, #d2691e);
    color: #fff;
}

.rank-badge.default {
    background: #e5e7eb;
    color: #6b7280;
}

/* Manager Section */
.manager-section {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 15px;
}

.manager-info {
    flex: 1;
}

.manager-name {
    font-weight: 600;
    font-size: 1.1rem;
    color: #1f2937;
    margin-bottom: 4px;
}

.team-name {
    color: #6b7280;
    font-size: 0.9rem;
}

.manager-badge {
    margin-left: 15px;
}

/* Points Section */
.points-section {
    text-align: center;
    min-width: 80px;
}

.points-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: #059669;
}

.points-label {
    font-size: 0.75rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mobile-badge {
    margin-left: 15px;
}

/* Ranking Highlights */
.first-place {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    border-left: 4px solid #ffd700;
}

.second-place {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    border-left: 4px solid #c0c0c0;
}

.third-place {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    border-left: 4px solid #cd7f32;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.empty-state h4 {
    margin: 0 0 10px 0;
    color: #1f2937;
}

.empty-state p {
    margin: 0;
    color: #6b7280;
}

/* Mobile Responsive - Modal optimized */
@media (max-width: 768px) {
    .modal-leaderboard .leaderboard-item {
        padding: 12px 10px;
    }

    .rank-section {
        min-width: 55px;
        margin-right: 8px;
    }

    .manager-section {
        margin-right: 8px;
    }

    .manager-name {
        font-size: 0.95rem;
    }

    .team-name {
        font-size: 0.8rem;
    }

    .points-section {
        min-width: 65px;
    }

    .points-value {
        font-size: 1.2rem;
    }

    .mobile-badge {
        margin-left: 8px;
    }
}

@media (max-width: 576px) {
    .modal-leaderboard .leaderboard-item {
        padding: 10px 8px;
    }

    .rank-section {
        min-width: 45px;
        margin-right: 6px;
    }

    .manager-section {
        margin-right: 6px;
    }

    .manager-name {
        font-size: 0.9rem;
        line-height: 1.2;
    }

    .team-name {
        font-size: 0.75rem;
        line-height: 1.1;
    }

    .points-section {
        min-width: 55px;
    }

    .points-value {
        font-size: 1.1rem;
    }

    .mobile-badge {
        margin-left: 6px;
    }

    .rank-badge {
        font-size: 0.7rem;
        padding: 3px 6px;
    }
}

 .share-modal-content {
     border: none;
     border-radius: 20px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     overflow: hidden;
     background: #fff;
 }

.share-modal-header {
    background-image:
            url('https://fantasy.premierleague.com/assets/pattern-1-1236-CLcKfGdk.png'),
            linear-gradient(90deg, #05f0ff 0%, #953bff 100%);

    background-repeat: no-repeat;
    background-size: auto, cover;
    color: white;
    border: none;
    padding: 25px;
    position: relative;
}

.share-header-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.share-icon-wrapper {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.share-icon-wrapper i {
    font-size: 1.5rem;
    color: white;
}

.modal-title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
}

.share-subtitle {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
    color: rgba(255, 255, 255, 0.9);
}

.share-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: none;
    color: white;
    font-size: 1.1rem;
}

.share-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.share-modal-body {
    padding: 30px 25px;
    background: #f8fafc;
}

.share-section {
    margin-bottom: 25px;
}

.share-section:last-child {
    margin-bottom: 0;
}

.share-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.share-section-title:before {
    content: '';
    width: 4px;
    height: 16px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 2px;
}

/* Quick Actions */
.share-quick-actions {
    display: flex;
    gap: 12px;
}

.share-quick-btn {
    flex: 1;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: #374151;
}

.share-quick-btn:hover {
    border-color: #667eea;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.2);
    color: #667eea;
}

.share-btn-icon {
    width: 35px;
    height: 35px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
}

.share-btn-text {
    font-weight: 500;
    font-size: 0.95rem;
}

.share-btn-feedback {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #10b981;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.share-quick-btn.copied .share-btn-feedback {
    opacity: 1;
}

.share-quick-btn.copied .share-btn-icon,
.share-quick-btn.copied .share-btn-text {
    opacity: 0;
}

/* Social Media Grid */
.share-social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.share-social-btn {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #374151;
    transition: all 0.3s ease;
    cursor: pointer;
}

.share-social-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.share-social-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.share-social-text {
    font-weight: 500;
    font-size: 0.9rem;
}

/* Social Platform Colors */
.whatsapp:hover {
    border-color: #25D366;
    color: #25D366;
}
.whatsapp .share-social-icon {
    background: #25D366;
}

.telegram:hover {
    border-color: #0088cc;
    color: #0088cc;
}
.telegram .share-social-icon {
    background: #0088cc;
}

.twitter:hover {
    border-color: #000;
    color: #000;
}
.twitter .share-social-icon {
    background: #000;
}

.facebook:hover {
    border-color: #1877f2;
    color: #1877f2;
}
.facebook .share-social-icon {
    background: #1877f2;
}

.email:hover {
    border-color: #ea4335;
    color: #ea4335;
}
.email .share-social-icon {
    background: #ea4335;
}

.more:hover {
    border-color: #667eea;
    color: #667eea;
}
.more .share-social-icon {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

/* Challenge Preview */
.challenge-preview {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.challenge-preview-icon {
    width:96px;
    height: 96px;

    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

.challenge-preview-content h6 {
    margin: 0 0 5px 0;
    font-weight: 600;
    color: #111827;
}

.challenge-preview-desc {
    margin: 0;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Mobile Optimizations */
@media (max-width: 576px) {
    .share-modal-header {
        padding: 20px;
    }

    .share-modal-body {
        padding: 20px 20px;
    }

    .share-quick-actions {
        flex-direction: column;
    }

    .share-social-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .share-social-btn {
        padding: 14px 10px;
        gap: 8px;
    }

    .share-social-icon {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .share-social-text {
        font-size: 0.85rem;
    }

    .challenge-preview {
        padding: 15px;
        gap: 12px;
    }

    .challenge-preview-icon {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
    }
}

/* Animation for copied state */
@keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.share-quick-btn.copied .share-btn-feedback {
    animation: pulse 0.3s ease-out;
}

.header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
    padding-right: 8px;
}

.compact-action {
    padding: 4px 8px;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Hide body actions when card is collapsed */
.challenge-card-compact:not(.expanded) .body-actions {
    display: none;
}

/* Hide header actions when card is expanded */
.challenge-card-compact.expanded .header-actions {
    display: none;
}
.detail-label i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
    color: var(--title-color);
}

 .transaction-icon {
     width: 40px;
     height: 40px;
     background: rgba(0,0,0,0.05);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

.table-hover tbody tr:hover {
    background-color: rgba(0,0,0,0.02);
}

.font-monospace {
    font-family: var(--font-jost), serif;
}

.transaction-details {
    background: rgba(0,0,0,0.02);
    border-radius: 8px;
    padding: 8px;
}

.card[data-bs-toggle="tooltip"] {
    cursor: pointer;
}

.card[data-bs-toggle="tooltip"]:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

@media (max-width: 576px) {
    .card-body {
        padding: 1rem !important;
    }
}

     /* Desktop Table Styles */
 .league-table {
     background: white;
     border-radius: var(--border-radius);
     overflow: hidden;
     box-shadow: var(--shadow-md);
     border: 1px solid var(--border-color);
 }

.league-table th {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    font-weight: 600;
    border: none;
    color: var(--dark-text);
    font-size: 0.875rem;
    padding: 1.25rem 1rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.league-table td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    transition: var(--transition);
}



.team-shirt {
    width: 32px;
    height: 38px;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: var(--transition);
}

.team-shirt:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Mobile Styles */
.mobile-row {
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.mobile-row:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.mobile-main-content {
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-manager-info {
    display: flex;
    align-items: center;
    flex: 1;
}

.mobile-rank {
    background: linear-gradient(135deg, #05f0ff 0%, #953bff 100%);
    color: white;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    margin-right: 1rem;
    box-shadow: 0 3px 12px rgba(58, 134, 255, 0.3);
}

.mobile-name-section {
    flex: 1;
}

.mobile-team-name {
    font-weight: 600;
    color: var(--dark-text);
    margin-bottom: 4px;
    font-size: 1rem;
}

.mobile-manager-name {
    font-size: 0.875rem;
    color: var(--muted-color);
}

.mobile-points {
    text-align: right;
}

.mobile-total-points {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--dark-text);
    line-height: 1;
}

.mobile-points-label {
    font-size: 0.75rem;
    color: var(--muted-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mobile-details {
    background: linear-gradient(135deg, #f8faff 0%, #f0f4f8 100%);
    border-top: 1px solid rgba(58, 134, 255, 0.15);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-details.show {
    max-height: 300px;
    padding: 1.5rem;
}

.mobile-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.mobile-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(58, 134, 255, 0.1);
    transition: var(--transition);
    backdrop-filter: blur(10px);
}

.mobile-detail-item:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateX(4px);
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
}

.mobile-detail-label {
    font-size: 0.875rem;
    color: var(--muted-color);
    font-weight: 500;
}

.mobile-detail-value {
    font-weight: 600;
    color: var(--dark-text);
    font-size: 0.875rem;
}

.mobile-toggle-btn {
    background: linear-gradient(135deg, #05f0ff 0%, #953bff 100%);
    color: white;
    border: none;
    padding: 1rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.mobile-toggle-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s;
}

.mobile-toggle-btn:hover::before {
    left: 100%;
}

.mobile-toggle-btn:hover {
    background: linear-gradient(135deg, #953bff 0%, #953bff 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgb(5, 240, 255);
}

.mobile-toggle-btn.collapsed .toggle-icon {
    transform: rotate(0deg);
}

.mobile-toggle-btn:not(.collapsed) .toggle-icon {
    transform: rotate(180deg);
}

.toggle-icon {
    margin-left: 0.75rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 0.875rem;
}

/* Chart Styles */
.chart-card {
    background: white;
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: var(--shadow-md);
    height: 100%;
    border: 1px solid var(--border-color);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.chart-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--info-color) 100%);
}

.chart-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.chart-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f7fafc;
}

.chart-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark-text);
    margin-bottom: 0.5rem;
    font-family: 'Inter', sans-serif;
}

.chart-subtitle {
    font-size: 0.875rem;
    color: var(--muted-color);
    font-weight: 500;
}

.chart-container {
    position: relative;
    height: 320px;
    width: 100%;
}

/* Summary Cards */
.summary-card {
    display: flex;
    align-items: center;
    background: white;
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    transition: var(--transition);
    height: 100%;
}

.summary-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.summary-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.25rem;
    color: white;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    flex-shrink: 0;
}

.summary-content h5 {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--dark-text);
}

.summary-content p {
    margin-bottom: 0;
    font-size: 0.875rem;
    color: var(--muted-color);
    line-height: 1.4;
}

/* Form Badges */
.badge.form-excellent {
    background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.75rem;
}

.badge.form-good {
    background: linear-gradient(135deg, #05f0ff 0%, #953bff 100%);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.75rem;
}

.badge.form-average {
    background: linear-gradient(135deg, var(--warning-color) 0%, #f59e0b 100%);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.75rem;
}

.badge.form-poor {
    background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.75rem;
}

/* Trend Indicators */
.trend-up {
    color: var(--success-color);
    font-weight: 600;
}

.trend-down {
    color: var(--danger-color);
    font-weight: 600;
}

.trend-same {
    color: var(--muted-color);
    font-weight: 500;
}

/* Info Card */
.info-card {
    background: linear-gradient(135deg, #f8faff 0%, #e3f2fd 100%);
    border-radius: var(--border-radius);
    padding: 3rem 2rem;
    margin: 2rem 0;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(58, 134, 255, 0.1);
    text-align: center;
}

.info-card i {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.info-card h4 {
    margin: 1rem 0;
    color: var(--dark-text);
    font-weight: 600;
}

.info-card p {
    color: var(--muted-color);
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

/* Countdown Styles */
.countdown-container {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}

.countdown-box {
    background: linear-gradient(135deg, rgba(58, 134, 255, 0.1) 0%, rgba(139, 69, 19, 0.05) 100%);
    border: 2px solid rgba(58, 134, 255, 0.2);
    border-radius: var(--border-radius-sm);
    padding: 1rem 1.25rem;
    min-width: 80px;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: var(--transition);
}

.countdown-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(58, 134, 255, 0.15);
}

.countdown-value {
    font-size: 1.75rem;
    font-weight: 700;
    display: block;
    color: var(--primary-color);
    line-height: 1;
}

.countdown-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    display: block;
    opacity: 0.8;
    margin-top: 0.25rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Responsive Design */
@media (min-width: 768px) {
    .mobile-view { display: none !important; }
    .mobile-details-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

@media (max-width: 767px) {
    .desktop-view { display: none !important; }

    .chart-container {
        height: 280px;
    }

    .chart-card {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .summary-card {
        margin-bottom: 1rem;
    }

    .countdown-container {
        gap: 0.75rem;
    }

    .countdown-box {
        padding: 0.75rem 1rem;
        min-width: 70px;
    }

    .countdown-value {
        font-size: 1.5rem;
    }
}

@media (max-width: 576px) {
    .chart-card {
        padding: 1.25rem;
    }

    .chart-container {
        height: 250px;
    }

    .mobile-details-grid {
        gap: 0.75rem;
    }

    .mobile-detail-item {
        padding: 0.875rem;
    }

    .countdown-container {
        gap: 0.5rem;
    }

    .countdown-box {
        padding: 0.625rem 0.75rem;
        min-width: 65px;
    }

    .countdown-value {
        font-size: 1.25rem;
    }
}

/* Smooth Animations */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-row {
    animation: slideIn 0.3s ease-out;
}


     /* Top Players Styles */
 .top-player-card {
     height: 100%;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
 }

.top-player-card:hover {
    transform: translateY(-5px);
}

.top-player-card .card-header {
    padding: 12px 15px;
    border-bottom: none;
}

.top-players-list {
    padding: 10px 0;
}

.top-player-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.top-player-first {
    background-color: rgba(0, 0, 0, 0.02);
}

.top-player-rank {
    width: 30px;
    text-align: center;
    margin-right: 10px;
}

.top-player-photo {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    border-radius: 50%;
    overflow: hidden;
}

.top-player-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top-player-info {
    flex: 1;
}

.top-player-stats {
    margin-top: 5px;
}

.top-player-stats .badge {
    margin-right: 5px;
    font-size: 0.7rem;
    padding: 3px 6px;
}

@media (max-width: 767px) {
    .top-player-card {
        margin-bottom: 20px;
    }
}



     /* Social Media Banner Styles */
 .social-media-banner {
     background-image: url(https://fantasy.premierleague.com/assets/pattern-1-1236-CLcKfGdk.png), linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
     background-position: right top -197px, 0 0;
     background-repeat: no-repeat;
     background-size: 204px 315px, auto;    border-radius:10px;
     position:relative;

     padding: 80px 0;
     position: relative;
     overflow: hidden;
 }

.social-media-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="30" cy="20" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="30" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="70" cy="40" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
    animation: float 20s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.social-banner-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.social-banner-title {
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.social-banner-subtitle {
    color: rgba(255,255,255,0.9);
    font-size: 1.2rem;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.social-platforms {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.social-platform {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
    color: white;
    min-width: 180px;
}

.social-platform:hover {
    transform: translateY(-10px);
    background: rgba(255,255,255,0.2);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    color: white;
    text-decoration: none;
}

.social-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

.social-platform-name {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}

.social-platform-handle {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Social Media Section Styles */
.social-media-section {
    padding: 100px 0;
    background: #f8f9fa;
}

.social-section-title {
    text-align: center;
    margin-bottom: 3rem;
}

.social-section-title h2 {
    color: #111111;
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.social-section-title p {
    color: #666;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

.social-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.social-card {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.social-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    border-color: #05f0ff;
}

.social-card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
}

.twitter-card .social-card-icon { background: #1DA1F2; }
.instagram-card .social-card-icon { background: linear-gradient(45deg, #E4405F, #FCCC63); }
.discord-card .social-card-icon { background: #5865F2; }
.youtube-card .social-card-icon { background: #FF0000; }
.tiktok-card .social-card-icon { background: #000000; }
.facebook-card .social-card-icon { background: #1877F2; }

.social-card h3 {
    color: #111111;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.social-card p {
    color: #666;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.social-card-btn {
    background: linear-gradient(90deg, #05f0ff 0%, #953bff 100%);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
    display: inline-block;
}

.social-card-btn:hover {
    background: #953bff;
    transform: scale(1.05);
    color: white;
    text-decoration: none;
}

.community-stats {
    background: white;
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
}

.stat-item h4 {
    color: #10C581;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.stat-item p {
    color: #666;
    font-size: 0.9rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .social-banner-title {
        font-size: 2rem;
    }

    .social-platforms {
        gap: 1rem;
    }

    .social-platform {
        min-width: 150px;
        padding: 1rem 1.5rem;
    }

    .social-cards {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

#cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--background);
    box-shadow: 0 -2px 10px var(--shadow);
    padding: 1.5rem;
    display: none;
    flex-direction: column;
    gap: 1rem;
    font-family: sans-serif;
    z-index: 1000;
}

.cookie-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cookie-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0;
}

.cookie-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.cookie-preferences {
    display: none;
    margin: 1rem 0;
}

.cookie-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.5rem 0;
}

.cookie-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.cookie-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.cookie-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .cookie-slider {
    background-color: var(--primary);
}

input:checked + .cookie-slider:before {
    transform: translateX(26px);
}

.cookie-buttons {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.cookie-btn {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    font-weight: bold;
    min-width: 120px;
}

.accept-btn {
    background: var(--primary);
    color: white;
}

.reject-btn {
    background: var(--secondary);
    color: var(--text);
}

.preference-btn {
    background: none;
    border: none;
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.cookie-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

@media (max-width: 768px) {
    .cookie-buttons {
        flex-direction: column;
    }

    .cookie-btn {
        width: 100%;
    }
}



/* Glass overlay styles */
.glass-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.7);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-direction: column;
}

.auth-box {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    width: 95%;
    max-width: 550px;
    text-align: center;
}

.auth-icon {
    font-size: 3rem;
    color: #3a7bd5;
    margin-bottom: 20px;
}


.blur-content {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
}