@import "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap";
@import "https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap";
@import "https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap";
@import "https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap";
:root {
    --primary: #072032;
    --secondary: #5c6972;
    --border: #ebedef;
    --theme: #ff845d;
    --black: #072032;
    --black-2: #5c6972;
    --white: #fff;
    --white-2: #9ba0a3;
    --action: #ffcd4d;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-15 {
    padding-bottom: 15px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-25 {
    padding-bottom: 25px;
}

.pb-30 {
    padding-bottom: 30px;
}

@media only screen and (max-width: 767px) {
    .pb-30 {
        padding-bottom: 25px;
    }
}

.pb-35 {
    padding-bottom: 35px;
}

@media only screen and (max-width: 767px) {
    .pb-35 {
        padding-bottom: 30px;
    }
}

.pb-40 {
    padding-bottom: 40px;
}

@media only screen and (max-width: 767px) {
    .pb-40 {
        padding-bottom: 30px;
    }
}

.pb-45 {
    padding-bottom: 45px;
}

@media only screen and (max-width: 767px) {
    .pb-45 {
        padding-bottom: 30px;
    }
}

.pb-50 {
    padding-bottom: 50px;
}

@media only screen and (max-width: 767px) {
    .pb-50 {
        padding-bottom: 30px;
    }
}

.pb-55 {
    padding-bottom: 55px;
}

@media only screen and (max-width: 991px) {
    .pb-55 {
        padding-bottom: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-55 {
        padding-bottom: 30px;
    }
}

.pb-60 {
    padding-bottom: 60px;
}

@media only screen and (max-width: 991px) {
    .pb-60 {
        padding-bottom: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-60 {
        padding-bottom: 30px;
    }
}

.pb-65 {
    padding-bottom: 65px;
}

@media only screen and (max-width: 991px) {
    .pb-65 {
        padding-bottom: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-65 {
        padding-bottom: 30px;
    }
}

.pb-70 {
    padding-bottom: 70px;
}

@media only screen and (max-width: 991px) {
    .pb-70 {
        padding-bottom: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-70 {
        padding-bottom: 35px;
    }
}

.pb-75 {
    padding-bottom: 75px;
}

@media only screen and (max-width: 991px) {
    .pb-75 {
        padding-bottom: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-75 {
        padding-bottom: 35px;
    }
}

.pb-80 {
    padding-bottom: 80px;
}

@media only screen and (max-width: 991px) {
    .pb-80 {
        padding-bottom: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-80 {
        padding-bottom: 35px;
    }
}

.pb-85 {
    padding-bottom: 85px;
}

@media only screen and (max-width: 991px) {
    .pb-85 {
        padding-bottom: 60px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-85 {
        padding-bottom: 35px;
    }
}

.pb-90 {
    padding-bottom: 90px;
}

@media only screen and (max-width: 1199px) {
    .pb-90 {
        padding-bottom: 70px;
    }
}

@media only screen and (max-width: 991px) {
    .pb-90 {
        padding-bottom: 60px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-90 {
        padding-bottom: 40px;
    }
}

.pb-95 {
    padding-bottom: 95px;
}

@media only screen and (max-width: 1199px) {
    .pb-95 {
        padding-bottom: 70px;
    }
}

@media only screen and (max-width: 991px) {
    .pb-95 {
        padding-bottom: 60px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-95 {
        padding-bottom: 40px;
    }
}

.pb-100 {
    padding-bottom: 100px;
}

@media only screen and (max-width: 991px) {
    .pb-100 {
        padding-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-100 {
        padding-bottom: 60px;
    }
}

.pb-105 {
    padding-bottom: 105px;
}

@media only screen and (max-width: 991px) {
    .pb-105 {
        padding-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-105 {
        padding-bottom: 60px;
    }
}

.pb-110 {
    padding-bottom: 110px;
}

@media only screen and (max-width: 1399px) {
    .pb-110 {
        padding-bottom: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pb-110 {
        padding-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pb-110 {
        padding-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-110 {
        padding-bottom: 60px;
    }
}

.pb-115 {
    padding-bottom: 115px;
}

@media only screen and (max-width: 1399px) {
    .pb-115 {
        padding-bottom: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pb-115 {
        padding-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pb-115 {
        padding-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-115 {
        padding-bottom: 60px;
    }
}

.pb-120 {
    padding-bottom: 120px;
}

@media only screen and (max-width: 1399px) {
    .pb-120 {
        padding-bottom: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pb-120 {
        padding-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pb-120 {
        padding-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-120 {
        padding-bottom: 60px;
    }
}

.pb-125 {
    padding-bottom: 125px;
}

@media only screen and (max-width: 1399px) {
    .pb-125 {
        padding-bottom: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pb-125 {
        padding-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pb-125 {
        padding-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-125 {
        padding-bottom: 60px;
    }
}

.pb-130 {
    padding-bottom: 130px;
}

@media only screen and (max-width: 1399px) {
    .pb-130 {
        padding-bottom: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pb-130 {
        padding-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pb-130 {
        padding-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-130 {
        padding-bottom: 60px;
    }
}

.pb-135 {
    padding-bottom: 135px;
}

@media only screen and (max-width: 1399px) {
    .pb-135 {
        padding-bottom: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pb-135 {
        padding-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pb-135 {
        padding-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-135 {
        padding-bottom: 60px;
    }
}

.pb-140 {
    padding-bottom: 140px;
}

@media only screen and (max-width: 1399px) {
    .pb-140 {
        padding-bottom: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pb-140 {
        padding-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pb-140 {
        padding-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-140 {
        padding-bottom: 60px;
    }
}

.pb-145 {
    padding-bottom: 145px;
}

@media only screen and (max-width: 1399px) {
    .pb-145 {
        padding-bottom: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pb-145 {
        padding-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pb-145 {
        padding-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-145 {
        padding-bottom: 60px;
    }
}

.pb-150 {
    padding-bottom: 150px;
}

@media only screen and (max-width: 1399px) {
    .pb-150 {
        padding-bottom: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pb-150 {
        padding-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pb-150 {
        padding-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-150 {
        padding-bottom: 60px;
    }
}

.pb-160 {
    padding-bottom: 160px;
}

@media only screen and (max-width: 1399px) {
    .pb-160 {
        padding-bottom: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pb-160 {
        padding-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pb-160 {
        padding-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-160 {
        padding-bottom: 60px;
    }
}

.pb-170 {
    padding-bottom: 170px;
}

@media only screen and (max-width: 1399px) {
    .pb-170 {
        padding-bottom: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pb-170 {
        padding-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pb-170 {
        padding-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-170 {
        padding-bottom: 60px;
    }
}

.pb-180 {
    padding-bottom: 180px;
}

@media only screen and (max-width: 1399px) {
    .pb-180 {
        padding-bottom: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pb-180 {
        padding-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pb-180 {
        padding-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-180 {
        padding-bottom: 60px;
    }
}

.pb-190 {
    padding-bottom: 190px;
}

@media only screen and (max-width: 1199px) {
    .pb-190 {
        padding-bottom: 150px;
    }
}

@media only screen and (max-width: 991px) {
    .pb-190 {
        padding-bottom: 120px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-190 {
        padding-bottom: 100px;
    }
}

.pb-200 {
    padding-bottom: 200px;
}

@media only screen and (max-width: 1199px) {
    .pb-200 {
        padding-bottom: 150px;
    }
}

@media only screen and (max-width: 991px) {
    .pb-200 {
        padding-bottom: 120px;
    }
}

@media only screen and (max-width: 767px) {
    .pb-200 {
        padding-bottom: 100px;
    }
}

.pt-10 {
    padding-top: 10px;
}

.pt-15 {
    padding-top: 15px;
}

.pt-20 {
    padding-top: 20px;
}

.pt-25 {
    padding-top: 25px;
}

.pt-30 {
    padding-top: 30px;
}

@media only screen and (max-width: 767px) {
    .pt-30 {
        padding-top: 25px;
    }
}

.pt-35 {
    padding-top: 35px;
}

@media only screen and (max-width: 767px) {
    .pt-35 {
        padding-top: 30px;
    }
}

.pt-40 {
    padding-top: 40px;
}

@media only screen and (max-width: 767px) {
    .pt-40 {
        padding-top: 30px;
    }
}

.pt-45 {
    padding-top: 45px;
}

@media only screen and (max-width: 767px) {
    .pt-45 {
        padding-top: 30px;
    }
}

.pt-50 {
    padding-top: 50px;
}

@media only screen and (max-width: 767px) {
    .pt-50 {
        padding-top: 30px;
    }
}

.pt-55 {
    padding-top: 55px;
}

@media only screen and (max-width: 991px) {
    .pt-55 {
        padding-top: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-55 {
        padding-top: 30px;
    }
}

.pt-60 {
    padding-top: 60px;
}

@media only screen and (max-width: 991px) {
    .pt-60 {
        padding-top: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-60 {
        padding-top: 30px;
    }
}

.ptf-60 {
    padding-top: 60px;
}

.pt-65 {
    padding-top: 65px;
}

@media only screen and (max-width: 991px) {
    .pt-65 {
        padding-top: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-65 {
        padding-top: 30px;
    }
}

.pt-70 {
    padding-top: 70px;
}

@media only screen and (max-width: 991px) {
    .pt-70 {
        padding-top: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-70 {
        padding-top: 35px;
    }
}

.pt-75 {
    padding-top: 75px;
}

@media only screen and (max-width: 991px) {
    .pt-75 {
        padding-top: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-75 {
        padding-top: 35px;
    }
}

.pt-80 {
    padding-top: 80px;
}

@media only screen and (max-width: 991px) {
    .pt-80 {
        padding-top: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-80 {
        padding-top: 35px;
    }
}

.pt-85 {
    padding-top: 85px;
}

@media only screen and (max-width: 991px) {
    .pt-85 {
        padding-top: 60px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-85 {
        padding-top: 35px;
    }
}

.pt-90 {
    padding-top: 90px;
}

@media only screen and (max-width: 1199px) {
    .pt-90 {
        padding-top: 70px;
    }
}

@media only screen and (max-width: 991px) {
    .pt-90 {
        padding-top: 60px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-90 {
        padding-top: 40px;
    }
}

.pt-95 {
    padding-top: 95px;
}

@media only screen and (max-width: 1199px) {
    .pt-95 {
        padding-top: 70px;
    }
}

@media only screen and (max-width: 991px) {
    .pt-95 {
        padding-top: 60px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-95 {
        padding-top: 40px;
    }
}

.pt-100 {
    padding-top: 100px;
}

@media only screen and (max-width: 991px) {
    .pt-100 {
        padding-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-100 {
        padding-top: 60px;
    }
}

.pt-105 {
    padding-top: 105px;
}

@media only screen and (max-width: 991px) {
    .pt-105 {
        padding-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-105 {
        padding-top: 60px;
    }
}

.pt-110 {
    padding-top: 110px;
}

@media only screen and (max-width: 1399px) {
    .pt-110 {
        padding-top: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pt-110 {
        padding-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pt-110 {
        padding-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-110 {
        padding-top: 60px;
    }
}

.pt-115 {
    padding-top: 115px;
}

@media only screen and (max-width: 1399px) {
    .pt-115 {
        padding-top: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pt-115 {
        padding-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pt-115 {
        padding-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-115 {
        padding-top: 60px;
    }
}

.pt-120 {
    padding-top: 120px;
}

@media only screen and (max-width: 1399px) {
    .pt-120 {
        padding-top: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pt-120 {
        padding-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pt-120 {
        padding-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-120 {
        padding-top: 60px;
    }
}

.pt-125 {
    padding-top: 125px;
}

@media only screen and (max-width: 1399px) {
    .pt-125 {
        padding-top: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pt-125 {
        padding-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pt-125 {
        padding-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-125 {
        padding-top: 60px;
    }
}

.pt-130 {
    padding-top: 130px;
}

@media only screen and (max-width: 1399px) {
    .pt-130 {
        padding-top: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pt-130 {
        padding-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pt-130 {
        padding-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-130 {
        padding-top: 60px;
    }
}

.pt-135 {
    padding-top: 135px;
}

@media only screen and (max-width: 1399px) {
    .pt-135 {
        padding-top: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pt-135 {
        padding-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pt-135 {
        padding-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-135 {
        padding-top: 60px;
    }
}

.pt-140 {
    padding-top: 140px;
}

@media only screen and (max-width: 1399px) {
    .pt-140 {
        padding-top: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pt-140 {
        padding-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pt-140 {
        padding-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-140 {
        padding-top: 60px;
    }
}

.pt-145 {
    padding-top: 145px;
}

@media only screen and (max-width: 1399px) {
    .pt-145 {
        padding-top: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pt-145 {
        padding-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pt-145 {
        padding-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-145 {
        padding-top: 60px;
    }
}

.pt-150 {
    padding-top: 150px;
}

@media only screen and (max-width: 1399px) {
    .pt-150 {
        padding-top: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pt-150 {
        padding-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pt-150 {
        padding-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-150 {
        padding-top: 60px;
    }
}

.pt-160 {
    padding-top: 160px;
}

@media only screen and (max-width: 1399px) {
    .pt-160 {
        padding-top: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pt-160 {
        padding-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pt-160 {
        padding-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-160 {
        padding-top: 60px;
    }
}

.pt-170 {
    padding-top: 170px;
}

@media only screen and (max-width: 1399px) {
    .pt-170 {
        padding-top: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pt-170 {
        padding-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pt-170 {
        padding-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-170 {
        padding-top: 60px;
    }
}

.pt-180 {
    padding-top: 180px;
}

@media only screen and (max-width: 1399px) {
    .pt-180 {
        padding-top: 120px;
    }
}

@media only screen and (max-width: 1199px) {
    .pt-180 {
        padding-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .pt-180 {
        padding-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-180 {
        padding-top: 60px;
    }
}

.pt-190 {
    padding-top: 190px;
}

@media only screen and (max-width: 1199px) {
    .pt-190 {
        padding-top: 150px;
    }
}

@media only screen and (max-width: 991px) {
    .pt-190 {
        padding-top: 120px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-190 {
        padding-top: 100px;
    }
}

.pt-200 {
    padding-top: 200px;
}

@media only screen and (max-width: 1199px) {
    .pt-200 {
        padding-top: 150px;
    }
}

@media only screen and (max-width: 991px) {
    .pt-200 {
        padding-top: 120px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-200 {
        padding-top: 100px;
    }
}

.pt-210 {
    padding-top: 210px;
}

@media only screen and (max-width: 1919px) {
    .pt-210 {
        padding-top: 170px;
    }
}

@media only screen and (max-width: 1199px) {
    .pt-210 {
        padding-top: 160px;
    }
}

@media only screen and (max-width: 991px) {
    .pt-210 {
        padding-top: 150px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-210 {
        padding-top: 130px;
    }
}

.pt-230 {
    padding-top: 230px;
}

@media only screen and (max-width: 1919px) {
    .pt-230 {
        padding-top: 190px;
    }
}

@media only screen and (max-width: 1199px) {
    .pt-230 {
        padding-top: 180px;
    }
}

@media only screen and (max-width: 991px) {
    .pt-230 {
        padding-top: 170px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-230 {
        padding-top: 150px;
    }
}

.pt-250 {
    padding-top: 250px;
}

@media only screen and (max-width: 1919px) {
    .pt-250 {
        padding-top: 200px;
    }
}

@media only screen and (max-width: 1199px) {
    .pt-250 {
        padding-top: 200px;
    }
}

@media only screen and (max-width: 1199px) {
    .pt-250 {
        padding-top: 190px;
    }
}

@media only screen and (max-width: 767px) {
    .pt-250 {
        padding-top: 160px;
    }
}

.pl-5 {
    padding-inline-start: 5px;
}

@media only screen and (max-width: 767px) {
    .pl-5 {
        padding-inline-start: 0;
    }
}

.pl-10 {
    padding-inline-start: 10px;
}

@media only screen and (max-width: 767px) {
    .pl-10 {
        padding-inline-start: 0;
    }
}

.pl-15 {
    padding-inline-start: 15px;
}

@media only screen and (max-width: 767px) {
    .pl-15 {
        padding-inline-start: 0;
    }
}

.pl-20 {
    padding-inline-start: 20px;
}

@media only screen and (max-width: 991px) {
    .pl-20 {
        padding-inline-start: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .pl-20 {
        padding-inline-start: 0;
    }
}

.pl-25 {
    padding-inline-start: 25px;
}

@media only screen and (max-width: 1199px) {
    .pl-25 {
        padding-inline-start: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .pl-25 {
        padding-inline-start: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .pl-25 {
        padding-inline-start: 0;
    }
}

.pl-30 {
    padding-inline-start: 30px;
}

@media only screen and (max-width: 1199px) {
    .pl-30 {
        padding-inline-start: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .pl-30 {
        padding-inline-start: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .pl-30 {
        padding-inline-start: 0;
    }
}

.pl-35 {
    padding-inline-start: 35px;
}

@media only screen and (max-width: 1399px) {
    .pl-35 {
        padding-inline-start: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .pl-35 {
        padding-inline-start: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .pl-35 {
        padding-inline-start: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .pl-35 {
        padding-inline-start: 0;
    }
}

.pl-40 {
    padding-inline-start: 40px;
}

@media only screen and (max-width: 1399px) {
    .pl-40 {
        padding-inline-start: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .pl-40 {
        padding-inline-start: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .pl-40 {
        padding-inline-start: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .pl-40 {
        padding-inline-start: 0;
    }
}

.pl-45 {
    padding-inline-start: 45px;
}

@media only screen and (max-width: 1919px) {
    .pl-45 {
        padding-inline-start: 40px;
    }
}

@media only screen and (max-width: 1399px) {
    .pl-45 {
        padding-inline-start: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .pl-45 {
        padding-inline-start: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .pl-45 {
        padding-inline-start: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .pl-45 {
        padding-inline-start: 0;
    }
}

.pl-50 {
    padding-inline-start: 50px;
}

@media only screen and (max-width: 1919px) {
    .pl-50 {
        padding-inline-start: 40px;
    }
}

@media only screen and (max-width: 1399px) {
    .pl-50 {
        padding-inline-start: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .pl-50 {
        padding-inline-start: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .pl-50 {
        padding-inline-start: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .pl-50 {
        padding-inline-start: 0;
    }
}

.pl-55 {
    padding-inline-start: 55px;
}

@media only screen and (max-width: 1919px) {
    .pl-55 {
        padding-inline-start: 40px;
    }
}

@media only screen and (max-width: 1399px) {
    .pl-55 {
        padding-inline-start: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .pl-55 {
        padding-inline-start: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .pl-55 {
        padding-inline-start: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .pl-55 {
        padding-inline-start: 0;
    }
}

.pl-60 {
    padding-inline-start: 60px;
}

@media only screen and (max-width: 1919px) {
    .pl-60 {
        padding-inline-start: 40px;
    }
}

@media only screen and (max-width: 1399px) {
    .pl-60 {
        padding-inline-start: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .pl-60 {
        padding-inline-start: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .pl-60 {
        padding-inline-start: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .pl-60 {
        padding-inline-start: 0;
    }
}

.pl-65 {
    padding-inline-start: 65px;
}

@media only screen and (max-width: 1919px) {
    .pl-65 {
        padding-inline-start: 40px;
    }
}

@media only screen and (max-width: 1399px) {
    .pl-65 {
        padding-inline-start: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .pl-65 {
        padding-inline-start: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .pl-65 {
        padding-inline-start: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .pl-65 {
        padding-inline-start: 0;
    }
}

.pl-70 {
    padding-inline-start: 70px;
}

@media only screen and (max-width: 1919px) {
    .pl-70 {
        padding-inline-start: 50px;
    }
}

@media only screen and (max-width: 1399px) {
    .pl-70 {
        padding-inline-start: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .pl-70 {
        padding-inline-start: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .pl-70 {
        padding-inline-start: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .pl-70 {
        padding-inline-start: 0;
    }
}

.pl-75 {
    padding-inline-start: 75px;
}

@media only screen and (max-width: 1919px) {
    .pl-75 {
        padding-inline-start: 50px;
    }
}

@media only screen and (max-width: 1399px) {
    .pl-75 {
        padding-inline-start: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .pl-75 {
        padding-inline-start: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .pl-75 {
        padding-inline-start: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .pl-75 {
        padding-inline-start: 0;
    }
}

.pl-80 {
    padding-inline-start: 80px;
}

@media only screen and (max-width: 1919px) {
    .pl-80 {
        padding-inline-start: 50px;
    }
}

@media only screen and (max-width: 1399px) {
    .pl-80 {
        padding-inline-start: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .pl-80 {
        padding-inline-start: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .pl-80 {
        padding-inline-start: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .pl-80 {
        padding-inline-start: 0;
    }
}

.pl-85 {
    padding-inline-start: 85px;
}

@media only screen and (max-width: 1919px) {
    .pl-85 {
        padding-inline-start: 50px;
    }
}

@media only screen and (max-width: 1399px) {
    .pl-85 {
        padding-inline-start: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .pl-85 {
        padding-inline-start: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .pl-85 {
        padding-inline-start: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .pl-85 {
        padding-inline-start: 0;
    }
}

.pl-90 {
    padding-inline-start: 90px;
}

@media only screen and (max-width: 1919px) {
    .pl-90 {
        padding-inline-start: 50px;
    }
}

@media only screen and (max-width: 1399px) {
    .pl-90 {
        padding-inline-start: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .pl-90 {
        padding-inline-start: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .pl-90 {
        padding-inline-start: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .pl-90 {
        padding-inline-start: 0;
    }
}

.pl-100 {
    padding-inline-start: 100px;
}

@media only screen and (max-width: 1919px) {
    .pl-100 {
        padding-inline-start: 50px;
    }
}

@media only screen and (max-width: 1399px) {
    .pl-100 {
        padding-inline-start: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .pl-100 {
        padding-inline-start: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .pl-100 {
        padding-inline-start: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .pl-100 {
        padding-inline-start: 0;
    }
}

.plr-50 {
    padding-inline-start: 50px;
    padding-inline-end: 50px;
}

@media only screen and (max-width: 991px) {
    .plr-50 {
        padding-inline-start: 30px;
        padding-inline-end: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .plr-50 {
        padding-inline-start: 15px;
        padding-inline-end: 15px;
    }
}

.plr-100 {
    padding-inline-start: 100px;
    padding-inline-end: 100px;
}

@media only screen and (min-width: 1600px) {
    .box-layout .plr-100 {
        padding-inline-start: 30px;
        padding-inline-end: 30px;
    }
}

@media only screen and (max-width: 1919px) {
    .plr-100 {
        padding-inline-start: 30px;
        padding-inline-end: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .plr-100 {
        padding-inline-start: 15px;
        padding-inline-end: 15px;
    }
}

.plr-150 {
    padding-inline-start: 150px;
    padding-inline-end: 150px;
}

@media only screen and (min-width: 1600px) {
    .box-layout .plr-150 {
        padding-inline-start: 30px;
        padding-inline-end: 30px;
    }
}

@media only screen and (max-width: 1919px) {
    .plr-150 {
        padding-inline-start: 30px;
        padding-inline-end: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .plr-150 {
        padding-inline-start: 15px;
        padding-inline-end: 15px;
    }
}

.plr-200 {
    padding-inline-start: 200px;
    padding-inline-end: 200px;
}

@media only screen and (min-width: 1600px) {
    .box-layout .plr-200 {
        padding-inline-start: 50px;
        padding-inline-end: 50px;
    }
}

@media only screen and (max-width: 1919px) {
    .plr-200 {
        padding-inline-start: 50px;
        padding-inline-end: 50px;
    }
}

@media only screen and (max-width: 1199px) {
    .plr-200 {
        padding-inline-start: 30px;
        padding-inline-end: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .plr-200 {
        padding-inline-start: 15px;
        padding-inline-end: 15px;
    }
}

.plr-250 {
    padding-inline-start: 250px;
    padding-inline-end: 250px;
}

@media only screen and (min-width: 1600px) {
    .box-layout .plr-250 {
        padding-inline-start: 50px;
        padding-inline-end: 50px;
    }
}

@media only screen and (max-width: 1919px) {
    .plr-250 {
        padding-inline-start: 50px;
        padding-inline-end: 50px;
    }
}

@media only screen and (max-width: 1199px) {
    .plr-250 {
        padding-inline-start: 30px;
        padding-inline-end: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .plr-250 {
        padding-inline-start: 15px;
        padding-inline-end: 15px;
    }
}

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

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

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

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

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

@media only screen and (max-width: 767px) {
    .mt-30 {
        margin-top: 25px;
    }
}

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

@media only screen and (max-width: 767px) {
    .mt-35 {
        margin-top: 30px;
    }
}

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

@media only screen and (max-width: 767px) {
    .mt-40 {
        margin-top: 30px;
    }
}

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

@media only screen and (max-width: 767px) {
    .mt-45 {
        margin-top: 30px;
    }
}

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

@media only screen and (max-width: 767px) {
    .mt-50 {
        margin-top: 30px;
    }
}

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

@media only screen and (max-width: 991px) {
    .mt-55 {
        margin-top: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-55 {
        margin-top: 30px;
    }
}

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

@media only screen and (max-width: 991px) {
    .mt-60 {
        margin-top: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-60 {
        margin-top: 30px;
    }
}

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

@media only screen and (max-width: 991px) {
    .mt-65 {
        margin-top: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-65 {
        margin-top: 30px;
    }
}

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

@media only screen and (max-width: 991px) {
    .mt-70 {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-70 {
        margin-top: 35px;
    }
}

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

@media only screen and (max-width: 991px) {
    .mt-75 {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-75 {
        margin-top: 35px;
    }
}

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

@media only screen and (max-width: 991px) {
    .mt-80 {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-80 {
        margin-top: 35px;
    }
}

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

@media only screen and (max-width: 991px) {
    .mt-85 {
        margin-top: 60px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-85 {
        margin-top: 35px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mt-90 {
        margin-top: 70px;
    }
}

@media only screen and (max-width: 991px) {
    .mt-90 {
        margin-top: 60px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-90 {
        margin-top: 40px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mt-95 {
        margin-top: 70px;
    }
}

@media only screen and (max-width: 991px) {
    .mt-95 {
        margin-top: 60px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-95 {
        margin-top: 40px;
    }
}

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

@media only screen and (max-width: 991px) {
    .mt-100 {
        margin-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-100 {
        margin-top: 60px;
    }
}

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

@media only screen and (max-width: 991px) {
    .mt-105 {
        margin-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-105 {
        margin-top: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mt-110 {
        margin-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mt-110 {
        margin-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-110 {
        margin-top: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mt-115 {
        margin-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mt-115 {
        margin-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-115 {
        margin-top: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mt-120 {
        margin-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mt-120 {
        margin-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-120 {
        margin-top: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mt-125 {
        margin-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mt-125 {
        margin-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-125 {
        margin-top: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mt-130 {
        margin-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mt-130 {
        margin-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-130 {
        margin-top: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mt-135 {
        margin-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mt-135 {
        margin-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-135 {
        margin-top: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mt-140 {
        margin-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mt-140 {
        margin-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-140 {
        margin-top: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mt-145 {
        margin-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mt-145 {
        margin-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-145 {
        margin-top: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mt-150 {
        margin-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mt-150 {
        margin-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-150 {
        margin-top: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mt-160 {
        margin-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mt-160 {
        margin-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-160 {
        margin-top: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mt-170 {
        margin-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mt-170 {
        margin-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-170 {
        margin-top: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mt-180 {
        margin-top: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mt-180 {
        margin-top: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-180 {
        margin-top: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mt-190 {
        margin-top: 150px;
    }
}

@media only screen and (max-width: 991px) {
    .mt-190 {
        margin-top: 120px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-190 {
        margin-top: 100px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mt-200 {
        margin-top: 150px;
    }
}

@media only screen and (max-width: 991px) {
    .mt-200 {
        margin-top: 120px;
    }
}

@media only screen and (max-width: 767px) {
    .mt-200 {
        margin-top: 100px;
    }
}

.mlr-200 {
    margin-left: 200px !important;
    margin-right: 200px !important;
}

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

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

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

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

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

@media only screen and (max-width: 767px) {
    .mb-30 {
        margin-bottom: 25px;
    }
}

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

@media only screen and (max-width: 767px) {
    .mb-35 {
        margin-bottom: 30px;
    }
}

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

@media only screen and (max-width: 767px) {
    .mb-40 {
        margin-bottom: 30px;
    }
}

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

@media only screen and (max-width: 767px) {
    .mb-45 {
        margin-bottom: 30px;
    }
}

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

@media only screen and (max-width: 767px) {
    .mb-50 {
        margin-bottom: 30px;
    }
}

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

@media only screen and (max-width: 991px) {
    .mb-55 {
        margin-bottom: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-55 {
        margin-bottom: 30px;
    }
}

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

@media only screen and (max-width: 991px) {
    .mb-60 {
        margin-bottom: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-60 {
        margin-bottom: 30px;
    }
}

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

@media only screen and (max-width: 991px) {
    .mb-65 {
        margin-bottom: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-65 {
        margin-bottom: 30px;
    }
}

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

@media only screen and (max-width: 991px) {
    .mb-70 {
        margin-bottom: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-70 {
        margin-bottom: 35px;
    }
}

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

@media only screen and (max-width: 991px) {
    .mb-75 {
        margin-bottom: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-75 {
        margin-bottom: 35px;
    }
}

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

@media only screen and (max-width: 991px) {
    .mb-80 {
        margin-bottom: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-80 {
        margin-bottom: 35px;
    }
}

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

@media only screen and (max-width: 991px) {
    .mb-85 {
        margin-bottom: 60px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-85 {
        margin-bottom: 35px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mb-90 {
        margin-bottom: 70px;
    }
}

@media only screen and (max-width: 991px) {
    .mb-90 {
        margin-bottom: 60px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-90 {
        margin-bottom: 40px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mb-95 {
        margin-bottom: 70px;
    }
}

@media only screen and (max-width: 991px) {
    .mb-95 {
        margin-bottom: 60px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-95 {
        margin-bottom: 40px;
    }
}

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

@media only screen and (max-width: 991px) {
    .mb-100 {
        margin-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-100 {
        margin-bottom: 60px;
    }
}

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

@media only screen and (max-width: 991px) {
    .mb-105 {
        margin-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-105 {
        margin-bottom: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mb-110 {
        margin-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mb-110 {
        margin-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-110 {
        margin-bottom: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mb-115 {
        margin-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mb-115 {
        margin-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-115 {
        margin-bottom: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mb-120 {
        margin-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mb-120 {
        margin-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-120 {
        margin-bottom: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mb-125 {
        margin-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mb-125 {
        margin-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-125 {
        margin-bottom: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mb-130 {
        margin-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mb-130 {
        margin-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-130 {
        margin-bottom: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mb-135 {
        margin-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mb-135 {
        margin-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-135 {
        margin-bottom: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mb-140 {
        margin-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mb-140 {
        margin-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-140 {
        margin-bottom: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mb-145 {
        margin-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mb-145 {
        margin-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-145 {
        margin-bottom: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mb-150 {
        margin-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mb-150 {
        margin-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-150 {
        margin-bottom: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mb-160 {
        margin-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mb-160 {
        margin-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-160 {
        margin-bottom: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mb-170 {
        margin-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mb-170 {
        margin-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-170 {
        margin-bottom: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mb-180 {
        margin-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .mb-180 {
        margin-bottom: 90px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-180 {
        margin-bottom: 60px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mb-190 {
        margin-bottom: 150px;
    }
}

@media only screen and (max-width: 991px) {
    .mb-190 {
        margin-bottom: 120px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-190 {
        margin-bottom: 100px;
    }
}

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

@media only screen and (max-width: 1199px) {
    .mb-200 {
        margin-bottom: 150px;
    }
}

@media only screen and (max-width: 991px) {
    .mb-200 {
        margin-bottom: 120px;
    }
}

@media only screen and (max-width: 767px) {
    .mb-200 {
        margin-bottom: 100px;
    }
}

.ml-5 {
    margin-left: 5px;
}

@media only screen and (max-width: 767px) {
    .ml-5 {
        margin-left: 0;
    }
}

.ml-10 {
    margin-left: 10px;
}

@media only screen and (max-width: 767px) {
    .ml-10 {
        margin-left: 0;
    }
}

.ml-15 {
    margin-left: 15px;
}

@media only screen and (max-width: 767px) {
    .ml-15 {
        margin-left: 0;
    }
}

.ml-20 {
    margin-left: 20px;
}

@media only screen and (max-width: 991px) {
    .ml-20 {
        margin-left: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .ml-20 {
        margin-left: 0;
    }
}

.ml-25 {
    margin-left: 25px;
}

@media only screen and (max-width: 1199px) {
    .ml-25 {
        margin-left: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .ml-25 {
        margin-left: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .ml-25 {
        margin-left: 0;
    }
}

.ml-30 {
    margin-left: 30px;
}

@media only screen and (max-width: 1199px) {
    .ml-30 {
        margin-left: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .ml-30 {
        margin-left: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .ml-30 {
        margin-left: 0;
    }
}

.ml-35 {
    margin-left: 35px;
}

@media only screen and (max-width: 1399px) {
    .ml-35 {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .ml-35 {
        margin-left: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .ml-35 {
        margin-left: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .ml-35 {
        margin-left: 0;
    }
}

.ml-40 {
    margin-left: 40px;
}

@media only screen and (max-width: 1399px) {
    .ml-40 {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .ml-40 {
        margin-left: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .ml-40 {
        margin-left: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .ml-40 {
        margin-left: 0;
    }
}

.ml-45 {
    margin-left: 45px;
}

@media only screen and (max-width: 1919px) {
    .ml-45 {
        margin-left: 40px;
    }
}

@media only screen and (max-width: 1399px) {
    .ml-45 {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .ml-45 {
        margin-left: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .ml-45 {
        margin-left: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .ml-45 {
        margin-left: 0;
    }
}

.ml-50 {
    margin-left: 50px;
}

@media only screen and (max-width: 1919px) {
    .ml-50 {
        margin-left: 40px;
    }
}

@media only screen and (max-width: 1399px) {
    .ml-50 {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .ml-50 {
        margin-left: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .ml-50 {
        margin-left: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .ml-50 {
        margin-left: 0;
    }
}

.ml-55 {
    margin-left: 55px;
}

@media only screen and (max-width: 1919px) {
    .ml-55 {
        margin-left: 40px;
    }
}

@media only screen and (max-width: 1399px) {
    .ml-55 {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .ml-55 {
        margin-left: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .ml-55 {
        margin-left: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .ml-55 {
        margin-left: 0;
    }
}

.ml-60 {
    margin-left: 60px;
}

@media only screen and (max-width: 1919px) {
    .ml-60 {
        margin-left: 40px;
    }
}

@media only screen and (max-width: 1399px) {
    .ml-60 {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .ml-60 {
        margin-left: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .ml-60 {
        margin-left: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .ml-60 {
        margin-left: 0;
    }
}

.ml-65 {
    margin-left: 65px;
}

@media only screen and (max-width: 1919px) {
    .ml-65 {
        margin-left: 40px;
    }
}

@media only screen and (max-width: 1399px) {
    .ml-65 {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .ml-65 {
        margin-left: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .ml-65 {
        margin-left: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .ml-65 {
        margin-left: 0;
    }
}

.ml-70 {
    margin-left: 70px;
}

@media only screen and (max-width: 1919px) {
    .ml-70 {
        margin-left: 50px;
    }
}

@media only screen and (max-width: 1399px) {
    .ml-70 {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .ml-70 {
        margin-left: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .ml-70 {
        margin-left: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .ml-70 {
        margin-left: 0;
    }
}

.ml-75 {
    margin-left: 75px;
}

@media only screen and (max-width: 1919px) {
    .ml-75 {
        margin-left: 50px;
    }
}

@media only screen and (max-width: 1399px) {
    .ml-75 {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .ml-75 {
        margin-left: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .ml-75 {
        margin-left: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .ml-75 {
        margin-left: 0;
    }
}

.ml-80 {
    margin-left: 80px;
}

@media only screen and (max-width: 1919px) {
    .ml-80 {
        margin-left: 50px;
    }
}

@media only screen and (max-width: 1399px) {
    .ml-80 {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .ml-80 {
        margin-left: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .ml-80 {
        margin-left: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .ml-80 {
        margin-left: 0;
    }
}

.ml-85 {
    margin-left: 85px;
}

@media only screen and (max-width: 1919px) {
    .ml-85 {
        margin-left: 50px;
    }
}

@media only screen and (max-width: 1399px) {
    .ml-85 {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .ml-85 {
        margin-left: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .ml-85 {
        margin-left: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .ml-85 {
        margin-left: 0;
    }
}

.ml-90 {
    margin-left: 90px;
}

@media only screen and (max-width: 1919px) {
    .ml-90 {
        margin-left: 50px;
    }
}

@media only screen and (max-width: 1399px) {
    .ml-90 {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .ml-90 {
        margin-left: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .ml-90 {
        margin-left: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .ml-90 {
        margin-left: 0;
    }
}

.ml-100 {
    margin-left: 100px;
}

@media only screen and (max-width: 1919px) {
    .ml-100 {
        margin-left: 50px;
    }
}

@media only screen and (max-width: 1399px) {
    .ml-100 {
        margin-left: 30px;
    }
}

@media only screen and (max-width: 1199px) {
    .ml-100 {
        margin-left: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .ml-100 {
        margin-left: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .ml-100 {
        margin-left: 0;
    }
}

.ptf-70 {
    padding-top: 70px;
}

.ptf-80 {
    padding-top: 80px;
}

@media only screen and (max-width: 767px) {
    .sm-pb-30 {
        padding-bottom: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .sm-pb-40 {
        padding-bottom: 40px;
    }
}

.mbm-1 {
    margin-bottom: -1px;
}

:root {
    --font_primary: "DM Sans", sans-serif;
    --font_secondary: "DM Sans", sans-serif;
    --font_awesome: "Font Awesome 6 Free";
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font_primary);
    line-height: 1;
}

html {
    scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 0;
    margin: 0;
    color: var(--primary);
    font-family: var(--font_secondary);
}

ul,
ol {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    transition: all 0.3s;
    color: inherit;
}

a:hover {
    color: var(--primary);
}

button {
    background-color: white;
    border: 0;
}

p {
    padding: 0;
    margin: 0;
    line-height: 1.44;
    font-weight: 400;
    font-size: 18px;
    color: var(--secondary);
}

strong {
    font-weight: 500;
}

video,
iframe,
img {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
}

.medium {
    font-weight: 600;
}

.bold {
    font-weight: 700;
}

@media only screen and (max-width: 767px) {
    .g-0 {
        padding-right: 15px;
        padding-left: 15px;
    }
    .row.g-0 {
        padding-right: 0;
        padding-left: 0;
    }
    br {
        display: none;
    }
}

main {
    display: inline-block;
    width: 100%;
}

h1 {
    font-size: 48px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 32px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 20px;
}

h6 {
    font-size: 18px;
}

@font-face {
    font-family: colasta;
    src: url("../fonts/Colasta/Colasta-Bold.otf");
    font-weight: 700;
}

@font-face {
    font-family: colasta;
    src: url("../fonts/Colasta/Colasta.otf");
    font-weight: 400;
}

@font-face {
    font-family: tropiline;
    src: url("../fonts/tropiline/Tropiline-Regular.ttf");
    font-weight: 400;
}

@font-face {
    font-family: tropiline;
    src: url("../fonts/tropiline/Tropiline-SemiBold.ttf");
    font-weight: 600;
}

@font-face {
    font-family: tropiline;
    src: url("../fonts/tropiline/Tropiline-Bold.ttf");
    font-weight: 700;
}

@font-face {
    font-family: tropiline;
    src: url("../fonts/tropiline/Tropiline-Black.otf");
    font-weight: 900;
}

@font-face {
    font-family: beatrice;
    src: url("../fonts/beatrice/BeatriceTRIAL-Regular-BF64829e8f591fb.ttf");
    font-weight: 400;
}

@font-face {
    font-family: beatrice;
    src: url("../fonts/beatrice/BeatriceTRIAL-Medium-BF64829e8f63463.ttf");
    font-weight: 500;
}

@font-face {
    font-family: beatrice;
    src: url("../fonts/beatrice/BeatriceTRIAL-Semibold-BF64829e8f17d4c.ttf");
    font-weight: 600;
}

@font-face {
    font-family: beatrice;
    src: url("../fonts/beatrice/BeatriceTRIAL-Bold-BF64829e8fd7dc6.otf");
    font-weight: 700;
}

@font-face {
    font-family: instrument;
    src: url("../fonts/Instrument-Sans/InstrumentSans-Regular.ttf");
    font-weight: 400;
}

@font-face {
    font-family: instrument;
    src: url("../fonts/Instrument-Sans/InstrumentSans-Medium.ttf");
    font-weight: 500;
}

@font-face {
    font-family: instrument;
    src: url("../fonts/Instrument-Sans/InstrumentSans-SemiBold.ttf");
    font-weight: 600;
}

@font-face {
    font-family: instrument;
    src: url("../fonts/Instrument-Sans/InstrumentSans-Bold.ttf");
    font-weight: 700;
}

@font-face {
    font-family: PPFragment;
    src: url("../fonts/PPFragment/PPFragment-TextRegular.otf");
    font-weight: 400;
}

:root {
    --font_colasta: "colasta";
    --font_instrument: "Instrument Sans", sans-serif;
    --font_tropiline: "tropiline", sans-serif;
    --font_beatrice: "beatrice";
    --font_pt-serif: "PT Serif", serif;
    --font_plus-jakarta-sans: "Plus Jakarta Sans", sans-serif;
    --font_PPFragment: "PPFragment";
    --font-onest: "Onest", sans-serif;
}

.font-heading-colasta-bold h1,
.font-heading-colasta-bold h2,
.font-heading-colasta-bold h3,
.font-heading-colasta-bold h4,
.font-heading-colasta-bold h5,
.font-heading-colasta-bold h6 {
    font-family: var(--font_colasta);
    font-weight: 700;
    line-height: 1;
}

.font-heading-instrument-bold h1,
.font-heading-instrument-bold h2,
.font-heading-instrument-bold h3,
.font-heading-instrument-bold h4,
.font-heading-instrument-bold h5,
.font-heading-instrument-bold h6 {
    font-family: var(--font_instrument);
    font-weight: 700;
    line-height: 1.08;
}

.font-heading-instrument-semibold h1,
.font-heading-instrument-semibold h2,
.font-heading-instrument-semibold h3,
.font-heading-instrument-semibold h4,
.font-heading-instrument-semibold h5,
.font-heading-instrument-semibold h6 {
    font-family: var(--font_instrument);
    font-weight: 600;
    line-height: 1.08;
}

.font-heading-tropiline-regular h1,
.font-heading-tropiline-regular h2,
.font-heading-tropiline-regular h3,
.font-heading-tropiline-regular h4,
.font-heading-tropiline-regular h5,
.font-heading-tropiline-regular h6 {
    font-family: var(--font_tropiline);
    font-weight: 400;
    line-height: 1;
}

.font-heading-tropiline-bold h1,
.font-heading-tropiline-bold h2,
.font-heading-tropiline-bold h3,
.font-heading-tropiline-bold h4,
.font-heading-tropiline-bold h5,
.font-heading-tropiline-bold h6 {
    font-family: var(--font_tropiline);
    font-weight: 700;
    line-height: 1.08;
}

.font-heading-beatrice-medium h1,
.font-heading-beatrice-medium h2,
.font-heading-beatrice-medium h3,
.font-heading-beatrice-medium h4,
.font-heading-beatrice-medium h5,
.font-heading-beatrice-medium h6 {
    font-weight: 500;
    line-height: 1.08;
}

.font-heading-pt-serif-regular h1,
.font-heading-pt-serif-regular h2,
.font-heading-pt-serif-regular h3,
.font-heading-pt-serif-regular h4,
.font-heading-pt-serif-regular h5,
.font-heading-pt-serif-regular h6 {
    font-family: var(--font_pt-serif);
    font-weight: 400;
    line-height: 1.16;
}

.font-heading-plus-jakarta-sans-medium h1,
.font-heading-plus-jakarta-sans-medium h2,
.font-heading-plus-jakarta-sans-medium h3,
.font-heading-plus-jakarta-sans-medium h4,
.font-heading-plus-jakarta-sans-medium h5,
.font-heading-plus-jakarta-sans-medium h6 {
    font-family: var(--font_plus-jakarta-sans);
    font-weight: 500;
    line-height: 1.16;
}

.font-heading-PPFragment-TextRegular h1,
.font-heading-PPFragment-TextRegular h2,
.font-heading-PPFragment-TextRegular h3,
.font-heading-PPFragment-TextRegular h4,
.font-heading-PPFragment-TextRegular h5,
.font-heading-PPFragment-TextRegular h6 {
    font-family: var(--font_PPFragment);
    font-weight: 400;
    line-height: 1.08;
}

.cf_parallax_image {
    overflow: hidden;
}

@keyframes wcBubble {
    0% {
        scale: 1;
    }
    50% {
        scale: 1.5;
    }
    100% {
        scale: 1;
    }
}

@keyframes wcZoom {
    0% {
        scale: 1;
    }
    50% {
        scale: 0.5;
    }
    100% {
        scale: 1;
    }
}

@keyframes wcZoom_2 {
    0% {
        scale: 1;
    }
    50% {
        scale: 0.9;
    }
    100% {
        scale: 1;
    }
}

@keyframes wcSlideBottom {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(50px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes reveal {
    to {
        opacity: 1;
        filter: blur(0px);
    }
}

@keyframes wcfadeUp {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spinner {
    to {
        transform: rotateZ(360deg);
    }
}

@keyframes characters {
    0%,
    75%,
    100% {
        opacity: 0;
        transform: rotateY(-90deg);
    }
    25%,
    50% {
        opacity: 1;
        transform: rotateY(0deg);
    }
}

@keyframes sheen {
    50% {
        transform: translateY(-20px);
        color: var(--primary);
    }
}

.wc-y-anim {
    animation: wc-y-anim 3s ease-in-out infinite alternate;
}

@keyframes wc-y-anim {
    0% {
        transform: translateY(-30px);
    }
    100% {
        transform: translateY(0);
    }
}

.body-overlay {
    position: fixed;
    z-index: 9;
    pointer-events: none;
    top: 0;
    opacity: 1;
    inset-inline-start: 0;
    width: 100vw;
    height: 100vh;
    background-repeat: repeat;
    background-position: top left;
    background-image: url(../imgs/writer/body-bg.webp);
}

.container-xl {
    max-width: 1550px;
}

.text-slider-active .swiper-slide {
    width: auto;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #d6d6d6;
}

::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.pagination.style-1 {
    display: flex;
    gap: 20px;
}

.pagination.style-1 li:last-child {
    padding-inline-start: 20px;
}

.pagination.style-1 li a {
    display: flex;
    align-items: center;
    gap: 10px;
}
 

.pagination.style-1 li a.current {
    color: #999;
}
  
 
.pos-abs {
    position: absolute;
}

.header-area {
    transition: 0.3s;
}

.header-area.sticky {
    position: fixed !important;
    background-color: var(--white);
    z-index: 99999;
}

.header-area.sticky .header-area__inner {
    height: 60px !important;
}

.header-area.sticky button i {
    color: #a51931;
    font-size: 26px;
}

.modal {
    z-index: 99999;
}

.modal-content {
    background-color: rgba(0, 0, 0, 0);
    border: 0;
}

.btn-primary {
    background-color: rgba(0, 0, 0, 0);
    color: unset;
    border: unset;
    outline: unset;
}

.btn-primary:hover {
    background-color: unset;
}

.btn-primary:focus {
    outline: unset;
    background-color: unset;
    border: unset;
}
 

.btn-close {
    content: "";
    font-family: "icomoon";
    font-size: 16px;
    opacity: 1;
    filter: brightness(100) contrast(0);
    border-radius: 50px;
    width: 2em;
    height: 2em;
    border: 1px solid var(--white);
    position: absolute;
    inset-inline-end: 20px;
    top: 20px;
    transition: unset;
}

.modal {
    background-color: var(--primary);
}

.swiper-slide {
    cursor: grab;
}

.active-page {
    --theme-color: #20be72;
    color: var(--theme-color, --primary) !important;
}

@media only screen and (max-width: 767px) {
    .body-wrapper {
        overflow: hidden;
    }
}

@media screen and (min-width: 1550px) {
    .container-large {
        max-width: 1630px;
    }
    .container-x-large {
        max-width: 1790px;
    }
    .container-hd {
        max-width: 1920px;
        margin-left: auto;
        margin-right: auto;
    }
}
 

.p-relative {
    position: relative;
}

.p-absolute {
    position: absolute;
}

.fix {
    overflow: hidden;
}

.bg-full {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.bg-full img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
 
 

.wc-btn-play {
    width: 56px;
    height: 56px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1.5px solid currentColor;
    color: var(--primary);
    border-radius: 50%;
    transition: all 0.5s;
    font-size: 14px;
}

@media only screen and (max-width: 767px) {
    .wc-btn-play {
        width: 50px;
        height: 50px;
        font-size: 12px;
        border-width: 1px;
    }
}

.wc-btn-play:hover {
    color: var(--theme, --action);
}

.wc-btn-play.light {
    color: var(--white);
}

.wc-btn-play.light:hover {
    color: var(--white);
}

.wc-btn-play.dark {
    color: var(--black);
}

.wc-btn-play.dark:hover {
    color: var(--black);
}

.show-light {
    display: inline-block;
}

.dark .show-light {
    display: none;
}

.show-dark {
    display: none;
}

.dark .show-dark {
    display: inline-block;
}

.line-area {
    position: relative;
}

.lines {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
}

.lines .line {
    width: 1px;
    height: 100%;
    background-color: rgba(0, 81, 83, 0.031372549);
    display: inline-block;
    position: relative;
    z-index: 1;
}

.wc-btn-icon i {
    transform: rotate(-45deg);
    transition: all 0.3s;
    font-size: 20px;
    color: var(--primary);
}

.dir-rtl .wc-btn-icon i {
    transform: rotate(-135deg);
}

.wc-btn-icon:hover i {
    transform: rotate(0);
}

.dir-rtl .wc-btn-icon:hover i {
    transform: rotate(-180deg);
}
  
.pos-center {
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    z-index: 1;
    padding: 15px 30px;
    /* border: 1px solid rgba(255, 255, 255, 0.3); */
    /* border-radius: 50px; */
    /* margin-left: 15px; */
    /* background: white; */
    margin-bottom: 0;
}
 
 
html {
    --container-max-widths: 1320px;
}

@media only screen and (max-width: 1399px) {
    html {
        --container-max-widths: 1140px;
    }
}

@media only screen and (max-width: 1199px) {
    html {
        --container-max-widths: 960px;
    }
}

@media only screen and (max-width: 991px) {
    html {
        --container-max-widths: 720px;
    }
    .pos-center {
        display: none;
    }
}

@media only screen and (max-width: 767px) {
    html {
        --container-max-widths: 540px;
    }
}

body {
    background-color: #f5f5f5;
    color: var(--secondary);
    position: inherit !important;
    top: 0px !important;
}

.body-wrapper {
    background-color: var(--white);
}

.dark .body-wrapper {
    background-color: var(--black);
}

.img_anim_reveal {
    visibility: hidden;
    overflow: hidden;
}

.img_anim_reveal img {
    -o-object-fit: cover;
    object-fit: cover;
    transform-origin: left;
}

.anim-reveal {
    overflow: hidden;
}

.anim-reveal-line {
    overflow: hidden;
}

.color-white {
    color: var(--white);
}

.color-black {
    color: var(--black);
}

.color-primary {
    color: var(--primary);
}

.color-secondary {
    color: var(--secondary);
}

.wc-bg-white {
    background-color: var(--white);
}

.wc-bg-black {
    background-color: var(--black);
}

.wc-bg-primary {
    background-color: var(--primary);
}

.wc-bg-secondary {
    background-color: var(--secondary);
}

.wc-bg-transparent {
    background-color: rgba(0, 0, 0, 0) !important;
}

.zi-1 {
    z-index: 1;
}

.zi-2 {
    z-index: 2;
}

.zi-0 {
    z-index: 0;
}

.zi--1 {
    z-index: -1;
}

.box-layout {
    max-width: 1600px;
    margin: 0 auto;
    overflow: hidden !important;
}

.text-underline {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.header__area-6 {
    position: unset;
}

.vertically-center {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.text-indent-40 {
    text-indent: 40px;
}

.text-indent-50 {
    text-indent: 50px;
}

header {
    margin-bottom: -1px;
    z-index: 100;
}

section {
    margin-bottom: -1px;
}

.dir-rtl {
    direction: rtl;
}

.show-dark {
    display: inline-block;
}

.dark .show-dark {
    display: none;
}

.show-light {
    display: none;
}

.dark .show-light {
    display: inline-block;
}

.line-divider-sm {
    height: 0.5px;
    background-color: var(--black-9);
}

.dark .line-divider-sm {
    background-color: #e9e9e9;
}

.admin-bar header,
.admin-bar .body-wrapper {
    margin-top: 32px;
}

.swiper,
.swiper-container {
    direction: ltr;
}

.border-e-0 {
    border-inline-end: 0 !important;
}

.border-s-0 {
    border-inline-start: 0 !important;
}

.hover-zoom li a:hover {
    transform: scale(1.1);
}

.hover-rotate li a i {
    transition: all 1s;
}

.hover-rotate li a:hover i {
    transform: rotate(360deg);
}

.hover-space li a:hover {
    letter-spacing: 1px;
}

.hover-border-move li a {
    position: relative;
    transition: all 0.5s;
}

.hover-border-move li a:hover::after {
    width: 100%;
    left: auto;
    right: 0;
}

.hover-border-move li a::after {
    position: absolute;
    content: "";
    width: 0%;
    height: 1px;
    bottom: 0;
    left: 0;
    transition: all 0.5s;
    background-color: currentColor;
}

.menu-hover-default li a:hover {
    color: var(--primary);
}

.menu-hover-space li a:hover {
    letter-spacing: 1px;
}
 
.anim_img_zoom img {
    transform: scale(1);
    transition: all 1s;
}

.anim_img_zoom:hover img {
    transform: scale(1.1);
}
 

.service-hover-default:hover {
    background-color: var(--white-6);
}
  
.loaded .animation-preloader {
    opacity: 0;
    transition: 0.3s ease-out;
}
  
.progress-wrap {
    position: fixed;
    right: 20px;
    bottom: 20px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 200ms linear;
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.progress-wrap::after {
    position: absolute;
    content: "";
    font: var(--fa-font-solid);
    text-align: center;
    line-height: 46px;
    font-size: 20px;
    color: var(--primary);
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    z-index: 1;
    transition: all 200ms linear;
    border-radius: 50px;
}

.progress-wrap svg path {
    fill: var(--black-6);
}

.progress-wrap svg.progress-circle path {
    fill: var(--white);
    stroke: var(--theme);
    stroke-width: 5;
    box-sizing: border-box;
    transition: all 200ms linear;
}

.light .scroll__down p {
    color: var(--black);
}

.light .scroll__down span {
    border-color: var(--white-3);
}

.light .scroll__down span i {
    color: var(--black);
}

.light.go-top-writer {
    color: var(--black);
    background-color: rgba(0, 0, 0, 0);
    background-image: url(../imgs/writer/go-top-light.webp);
}

.light.progress-wrap {
    margin: 0;
    background-color: rgba(0, 0, 0, 0);
}

.light.progress-wrap svg path {
    fill: var(--black);
}

.light.progress-wrap::after {
    color: var(--white);
}

.b-radius {
    border-radius: 12px;
}

.wc-btn {
    display: inline-block;
}

.wc-btn-default {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--white);
    text-transform: capitalize;
    background: rgba(0, 0, 0, 0);
    border-radius: 100px;
    padding: 17px 35px;
    display: inline-flex;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--black-6);
    overflow: hidden;
    transition: all 0.3s;
}

.wc-btn-default:hover {
    color: var(--white);
}

.dark .wc-btn-default {
    color: var(--black);
}

.dark .wc-btn-default:hover {
    color: var(--black);
}

.dir-rtl .wc-btn-default i {
    transform: rotateY(180deg);
}

.wc-btn-border {
    gap: 10px;
    display: inline-flex;
    align-items: center;
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    padding: 16px 30px;
    border: 1px solid var(--white);
    overflow: hidden;
    transition: all 0.3s;
    z-index: 1;
    position: relative;
}

.wc-btn-border:hover {
    color: var(--white);
}

.dark .wc-btn-border {
    color: var(--black);
    border-color: var(--black);
}

.dark .wc-btn-border:hover {
    color: var(--black);
}

.wc-btn-primary {
    padding: 21px 30px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    color: var(--white);
    background-color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 15px;
    text-transform: capitalize;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
    gap: 30px;
    white-space: nowrap;
}

@media only screen and (max-width: 991px) {
    .wc-btn-primary {
        padding: 16px 25px;
    }
}

.wc-btn-primary:hover {
    color: var(--white);
    background-color: var(--primary);
    border-color: var(--primary);
}

.wc-btn-primary.bordered {
    border-color: var(--theme);
    background-color: #2d2a4a;
    color: white;
    border: 2px solid white;
}

.wc-btn-primary.bordered:hover {
    border-color: var(--primary);
    background-color: var(--primary);
    color: var(--white);
}

.dir-rtl .wc-btn-primary i {
    transform: rotateY(180deg);
}

.wc-btn-circle {
    text-align: center;
    width: 140px;
    height: 140px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--black);
    border-radius: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
}

@media only screen and (max-width: 1199px) {
    .wc-btn-circle {
        width: 130px;
        height: 130px;
    }
}

.wc-btn-circle:hover {
    color: var(--white);
}

.wc-btn-oval {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    color: var(--white);
    border: 1px solid #3f3a36;
    display: inline-block;
    padding: 32px 52px;
    text-align: center;
    transition: all 0.3s;
    border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
}

.dark .wc-btn-oval {
    color: var(--black);
}

.wc-btn-oval:hover {
    color: var(--primary);
}

.wc-btn-light {
    color: var(--white) !important;
    border-color: var(--white) !important;
}

.wc-btn-light:hover {
    color: var(--black) !important;
}

.wc-btn-light span {
    background-color: var(--white) !important;
}

.wc-btn-ellipse {
    font-size: 16px;
    font-weight: 500;
    color: var(--white);
    padding: 45px 45px;
    position: relative;
    display: inline-block;
    background-color: var(--white);
    border-radius: 100%;
    border-top-left-radius: 200%;
    border-bottom-right-radius: 200%;
    z-index: 1;
}

.dark .wc-btn-ellipse {
    color: var(--black);
    background-color: var(--black);
}

.wc-btn-ellipse:before {
    position: absolute;
    content: "";
    width: calc(100% - 14px);
    height: calc(100% - 2px);
    background-color: var(--black);
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    border-top-left-radius: 200%;
    border-bottom-right-radius: 200%;
}

.dark .wc-btn-ellipse:before {
    background-color: #ededed;
}
 
.wc-btn-link {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.7;
    color: var(--white);
    display: inline-block;
    text-transform: uppercase;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.dark .wc-btn-link {
    color: var(--black);
}

.wc-btn-link i {
    transform: rotate(-45deg);
    transition: all 0.3s;
}

.wc-btn-link:hover {
    color: var(--primary);
}

.wc-btn-link:hover i {
    transform: rotate(0);
    color: var(--primary);
}

.about-btn {
    display: inline-block;
    padding: 15px 30px;
    background-color: var(--primary);
    color: var(--black);
    font-weight: 500;
    font-size: 16px;
    line-height: 26px;
    text-align: center;
}

.about-btn img {
    padding-left: 15px;
}

.readmore-btn img {
    margin-bottom: 3px;
}
 

.get-touch {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: var(--white-11);
    padding: 13px 18px;
    display: inline-block;
    text-transform: uppercase;
    border: 1px solid var(--white);
    margin-inline-end: 40px;
}

.get-touch:hover {
    color: var(--white);
}

@media only screen and (max-width: 767px) {
    .get-touch {
        padding: 12px 10px;
        margin-inline-end: 12px;
    }
}
 

.btn-hover-bgchange {
    overflow: hidden;
    position: relative;
    z-index: 5;
}

.btn-hover-bgchange span {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    left: 50%;
    top: 50%;
    z-index: -1;
    border-radius: 100%;
    transition: all 1s;
    background-color: var(--primary);
    transform: translate(-50%, -50%);
}

.btn-hover-bgchange:hover {
    color: var(--black);
    border: 1px solid var(--primary);
}

.btn-hover-bgchange:hover span {
    width: 400px;
    height: 400px;
}

.wc-btn-underline {
    color: var(--primary);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 3.6px;
    text-transform: uppercase;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.wc-btn-underline:hover {
    color: var(--action);
}

.wc-btn-underline:hover::before {
    width: 0;
}

.wc-btn-underline::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--primary);
    transition: 0.3s;
}

.wc-btn-link-none {
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.85;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 30px;
}

.wc-btn-link-none:hover {
    color: var(--action);
}

.wc-btn-underline {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--primary);
    text-transform: capitalize;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 30px;
    padding-bottom: 4px;
    white-space: nowrap;
}

.wc-btn-underline:hover::before {
    width: 0;
}

.wc-btn-underline::before {
    position: absolute;
    content: "";
    inset-inline-start: 0;
    bottom: 0px;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transition: 0.3s;
}

.wc-btn-underline i {
    font-size: 10px;
}

.dir-rtl .wc-btn-underline i {
    transform: rotateY("180deg");
}

.wc-btn-normal {
    display: inline-flex;
    position: relative;
    color: var(--secondary);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    align-items: center;
    gap: 5px;
}

.wc-btn-normal:hover {
    color: var(--theme);
}

.wc-btn-normal i {
    font-size: 14px;
}

.dir-rtl .wc-btn-normal i {
    transform: rotateY(180deg);
}

.btn-text-flip {
    perspective: 1000px;
}

.btn-text-flip:hover span {
    transform: rotateX(90deg) translateY(-12px);
    color: inherit;
}

.btn-text-flip span {
    position: relative;
    display: inline-block;
    padding: 0;
    transition: transform 0.5s;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
}

.btn-text-flip span:before {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    content: attr(data-text);
    transition: color 0.5s;
    transform: rotateX(-90deg);
    transform-origin: 50% 0;
    text-align: center;
}

.wc-btn-group {
    display: flex;
}

.wc-btn-group > *:nth-child(1) {
    transform: scale3d(0.5, 0.5, 1);
    margin-right: -70px;
}

.wc-btn-group > *:nth-child(2) {
    transform: scale3d(1, 1, 1);
}

.wc-btn-group > *:nth-child(3) {
    transform: scale3d(1, 1, 1);
    margin-left: 0;
}

.wc-btn-group:hover > *:nth-child(1) {
    transform: scale3d(1, 1, 1);
    margin-right: 0;
}

.wc-btn-group:hover > *:nth-child(2) {
    transform: scale3d(1, 1, 1);
}

.wc-btn-group:hover > *:nth-child(3) {
    transform: scale3d(0.5, 0.5, 1);
    margin-left: -70px;
}

@keyframes mask_animation {
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}

@keyframes mask_animation_2 {
    from {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
    to {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}

.btn-hover-default {
    transition: all 0.5s;
}

.btn-hover-default:hover {
    color: var(--black);
    background-color: var(--white);
}

.btn-hover-cross {
    overflow: hidden;
    position: relative;
    transition: all 1s;
}

.btn-hover-cross::after {
    position: absolute;
    content: "";
    width: 150%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: var(--primary);
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
    transition: all 0.75s;
    opacity: 0.5;
    z-index: -1;
}

.btn-hover-cross:hover {
    border-color: var(--primary);
    background-color: rgba(0, 0, 0, 0);
}

.btn-hover-cross:hover::after {
    height: 120%;
    opacity: 1;
}

.btn-hover-divide {
    overflow: hidden;
    position: relative;
    transition: all 1s;
    z-index: 1;
}

.btn-hover-divide::after {
    position: absolute;
    content: "";
    width: 150%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: var(--primary);
    transform: translateX(-50%) translateY(-50%) rotate(90deg);
    transition: all 0.75s;
    opacity: 0.5;
    z-index: -1;
}

.btn-hover-divide:hover {
    border-color: var(--primary);
    background-color: rgba(0, 0, 0, 0) !important;
    border-color: rgba(0, 0, 0, 0);
}

.btn-hover-divide:hover::after {
    height: 400%;
    opacity: 1;
}

.btn-hover-cropping {
    overflow: hidden;
    position: relative;
    transition: all 1s;
}

.btn-hover-cropping::after {
    position: absolute;
    content: "";
    width: 150%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: var(--primary);
    transform: translateX(-50%) translateY(-50%) rotate(25deg);
    transition: all 0.75s;
    opacity: 0.5;
    z-index: -1;
}

.btn-hover-cropping:hover {
    border-color: var(--primary);
    background-color: rgba(0, 0, 0, 0);
}

.btn-hover-cropping:hover::after {
    height: 400%;
    opacity: 1;
}

.btn-hover-mask {
    gap: 10px;
    display: inline-flex;
    align-items: center;
    padding: 15px 30px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s;
    border-radius: 5px;
    color: var(--white);
    font-weight: 400;
    font-size: 16px;
    border: 1px solid var(--white);
    z-index: 1;
}

.btn-hover-mask::after {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--black);
    position: absolute;
    content: attr(data-text);
    cursor: pointer;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--white);
    -webkit-mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.webp");
    mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.webp");
    -webkit-mask-size: 2300% 100%;
    mask-size: 2300% 100%;
    animation: mask_animation_2 0.7s steps(22) forwards;
}

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

.btn-hover-mask:hover::after {
    animation: mask_animation 0.7s steps(22) forwards;
}

.dark .btn-hover-mask {
    border-color: var(--black);
}

.dark .btn-hover-mask::after {
    z-index: -1;
    color: var(--white);
    background-color: var(--black);
}

.dark .btn-hover-mask:hover {
    color: var(--black);
}

.btn-rollover-top {
    position: relative;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.btn-rollover-top:before {
    position: absolute;
    left: 0px;
    bottom: 0px;
    height: 0px;
    width: 100%;
    z-index: -1;
    content: "";
    background-color: var(--primary);
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.btn-rollover-top:hover {
    border-color: var(--primary);
    background-color: rgba(0, 0, 0, 0);
}

.btn-rollover-top:hover::before {
    top: 0%;
    bottom: auto;
    height: 100%;
}

.btn-rollover-left {
    position: relative;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.btn-rollover-left::before {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: "";
    background-color: var(--primary);
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}

.btn-rollover-left:hover {
    border-color: var(--primary);
    background-color: rgba(0, 0, 0, 0);
}

.btn-rollover-left:hover::before {
    left: 0%;
    right: auto;
    width: 100%;
}

.btn-rollover-cross {
    overflow: hidden;
    position: relative;
    transition: all 0.5s;
}

.btn-rollover-cross::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    bottom: 100%;
    left: 100%;
    opacity: 0;
    border-bottom: 3px solid var(--primary);
    border-left: 3px solid var(--primary);
    transition: all 0.75s;
}

.btn-rollover-cross::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 100%;
    right: 100%;
    opacity: 0;
    border-top: 3px solid var(--primary);
    border-right: 3px solid var(--primary);
    transition: all 0.75s;
}

.btn-rollover-cross:hover {
    border-color: rgba(0, 0, 0, 0);
    color: var(--primary);
}

.btn-rollover-cross:hover::before {
    bottom: 0;
    left: 0;
    opacity: 1;
    width: 100%;
    height: 100%;
}

.btn-rollover-cross:hover::after {
    top: 0;
    right: 0;
    opacity: 1;
    width: 100%;
    height: 100%;
}
 

.main-menu.menu-dark > ul > li > a {
    color: var(--black);
}

.main-menu.menu-light > ul > li > a {
    color: var(--white);
}

.main-menu > ul {
    display: flex;
}

.main-menu > ul > li:hover > a {
    color: var(--theme);
}

.main-menu > ul > li:hover > ul {
    opacity: 1;
    pointer-events: all;
    inset-inline-start: 0;
}

.main-menu > ul > li:hover > ul.dp-menu li:hover > ul {
    opacity: 1;
    pointer-events: all;
    inset-inline-start: 100%;
}

.main-menu li {
    position: relative;
}

.main-menu li a {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    color: white;
    padding: 10px 15px;
}

.dark .main-menu li a {
    color: var(--black);
}

.main-menu ul.dp-menu {
    background-color: #ffffff;
    padding: 18px 0px;
    width: 250px;
    position: absolute;
    inset-inline-start: 10px;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transition: all 0.5s;
}

.main-menu ul.dp-menu ul {
    background: var(--black);
    padding: 18px 0px;
    width: 300px;
    position: absolute;
    inset-inline-start: calc(100% + 10px);
    top: 0;
    opacity: 0;
    z-index: 10;
    transition: all 0.5s;
}

.main-menu ul.dp-menu li {
    position: relative;
    padding: 0 25px;
}

.main-menu ul.dp-menu li:hover > a {
    color: var(--theme);
    background-color: rgba(0, 0, 0, 0);
}

.main-menu ul.dp-menu li:hover > ul {
    opacity: 1;
    transform: none !important;
    pointer-events: all;
}

.main-menu ul.dp-menu li a {
    font-size: 16px;
    font-weight: 500;
    color: #999;
    padding: 10px 0;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 8px;
    text-transform: capitalize;
}

.main-menu ul.dp-menu li a:hover {
    letter-spacing: 0.5px;
}

.main-menu ul.dp-menu li a:after {
    transform: rotate(-90deg);
    margin-left: auto;
}

.main-menu .has-mega-menu {
    position: static;
}

.main-menu li.menu-item-has-children > a:after {
    content: "";
    font-family: var(--font_awesome);
    margin-inline-start: 5px;
    font-weight: 600;
    font-size: 14px;
}

.main-menu .mega-menu {
    background-color: var(--black);
    padding: 30px 50px;
    width: 100%;
    position: absolute;
    left: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    -moz-column-gap: 50px;
    column-gap: 50px;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transition: all 0.5s;
}

@media only screen and (max-width: 1399px) {
    .main-menu .mega-menu {
        -moz-column-gap: 30px;
        column-gap: 30px;
    }
}

.main-menu .mega-menu li:has(ul) > a:after {
    content: "";
}

.main-menu .mega-menu li a {
    font-size: 16px;
    font-weight: 500;
    color: #999;
    height: 40px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--black);
    border-radius: 8px;
    overflow: hidden;
}

.main-menu .mega-menu li a:hover {
    color: var(--white);
    background: #2c2c2f;
}

.main-menu .mega-menu .title {
    font-weight: 600;
    color: var(--white);
    text-transform: uppercase;
    border-bottom: 1px solid #333337;
    padding-bottom: 20px;
    margin-bottom: 20px;
    pointer-events: none;
    border-radius: 0;
}

.main-menu .mega-style-2 {
    padding: 0 15%;
    gap: 0;
    grid-template-columns: repeat(2, 1fr);
}

.main-menu .mega-style-2 .title {
    height: 70px;
    padding-bottom: 0;
    margin-bottom: 0;
    position: relative;
    overflow: visible;
    padding-left: 30px;
}

.main-menu .mega-style-2 .title:after {
    position: absolute;
    content: "";
    width: 5000px;
    height: 1px;
    background-color: #333337;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
}

.main-menu .mega-style-2 > li:not(:first-child) {
    border-left: 1px solid #333337;
}

.main-menu .mega-style-2 ul {
    -moz-column-count: 2;
    column-count: 2;
    position: relative;
    padding: 20px 0;
}

.main-menu .mega-style-2 ul:after {
    position: absolute;
    content: "";
    width: 1px;
    height: 700px;
    background-color: #333337;
    top: 0;
    left: 50%;
    z-index: 1;
}

.main-menu .mega-style-2 ul li a {
    padding-left: 30px;
}

.main-menu .mega-style-3 {
    padding: 0 0 0 20px;
    gap: 0;
    grid-template-columns: repeat(3, 1fr);
}

.main-menu .mega-style-3 .title {
    height: 70px;
    padding-bottom: 0;
    margin-bottom: 0;
    position: relative;
    overflow: visible;
    padding-left: 30px;
}

.main-menu .mega-style-3 .title:after {
    position: absolute;
    content: "";
    width: 5000px;
    height: 1px;
    background-color: #333337;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
}

.main-menu .mega-style-3 > li:not(:first-child) {
    border-left: 1px solid #333337;
}

.main-menu .mega-style-3 > li:last-child {
    border: none;
    width: 36vw;
}

@media only screen and (max-width: 1399px) {
    .main-menu .mega-style-3 > li:last-child {
        width: 32vw;
    }
}

.main-menu .mega-style-3 ul {
    -moz-column-count: 2;
    column-count: 2;
    position: relative;
    padding: 20px 0;
    -moz-column-gap: 0;
    column-gap: 0;
}

.main-menu .mega-style-3 ul:after {
    position: absolute;
    content: "";
    width: 1px;
    height: 700px;
    background-color: #333337;
    top: 0;
    left: 50%;
    z-index: 1;
}

.main-menu .mega-style-3 ul li {
    margin: 0 10px;
}

.main-menu .mega-style-3 ul li a {
    padding-left: 20px;
}

.main-menu .mega-grid-6 {
    grid-template-columns: repeat(6, 1fr);
}

.main-menu .mega-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 60px;
}

.main-menu .list-3-column ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 50px;
    column-gap: 50px;
}

@media only screen and (max-width: 1399px) {
    .main-menu .list-3-column ul {
        -moz-column-gap: 30px;
        column-gap: 30px;
    }
}

.main-menu .span-first-item ul li:first-child {
    grid-column: 1/-1;
    -moz-column-span: all;
    column-span: all;
}

.main-menu .new {
    font-size: 10px;
    font-weight: 600;
    background: #ffa38e;
    color: var(--black);
    padding: 3px 7px;
    line-height: 1;
    border-radius: 2px;
    margin-inline-start: 8px;
    display: inline-block;
}

@media only screen and (max-width: 1199px) {
    .main-menu-2 {
        display: none;
    }
}

.main-menu-2 li {
    display: inline-block;
    padding: 0 10px;
}

.main-menu-2 li a {
    display: block;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.5;
    color: var(--white);
    padding: 10px;
    text-transform: capitalize;
}

.main-menu-2 li a:hover {
    color: var(--primary);
}

@media only screen and (max-width: 1399px) {
    .main-menu-2 li a {
        padding: 5px 0;
    }
}

.main-menu-3 li {
    display: inline-block;
    margin-right: 45px;
}

@media only screen and (max-width: 1199px) {
    .main-menu-3 li {
        margin-right: 25px;
    }
}

.main-menu-3 li:last-child {
    margin-right: 0;
}

.main-menu-3 li a {
    color: var(--white);
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
}

.main-menu-3 li a:hover {
    color: var(--primary);
}

.main-menu-4 li {
    display: inline-block;
    margin-right: 50px;
}

.main-menu-4 li a {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--white);
    text-transform: uppercase;
}

.main-menu-4 li a:hover {
    color: var(--primary);
}

.mega-menu-thumb {
    width: 108%;
    aspect-ratio: 100/83;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
}

@media only screen and (max-width: 1199px) {
    .mega-menu-thumb {
        width: 100%;
        height: 100%;
    }
}

.mega-menu-thumb:after {
    position: absolute;
    content: "";
    width: 76%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(270deg, rgba(28, 29, 32, 0) 0%, #1c1d20 100%);
}

.mega-menu-thumb .laptop-view {
    width: 70%;
    aspect-ratio: 100/114;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center top;
    object-position: center top;
    position: absolute;
    right: 70px;
    bottom: 0;
}
  
.sidebar-menu li {
    display: block;
    padding-bottom: 15px;
}

@media only screen and (max-width: 1919px) {
    .sidebar-menu li {
        padding-bottom: 10px;
    }
}

.sidebar-menu li a {
    display: block;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    color: var(--white);
    padding: 10px 0;
    text-transform: uppercase;
}

.sidebar-menu li a:hover,
.sidebar-menu li a.active {
    color: var(--primary);
}

@media only screen and (max-width: 1399px) {
    .sidebar-menu li a {
        padding: 5px 0;
    }
}

.offcanvas__menu-wrapper.mean-container .mean-nav > ul {
    padding: 0;
    margin: 0;
    width: 100%;
    list-style-type: none;
    display: block !important;
}

.offcanvas__menu-wrapper.mean-container .mean-nav > ul > li:last-child > a {
    border-bottom: 1px solid var(--black-4);
}

.offcanvas__menu-wrapper.mean-container .mean-nav {
    background: none;
    margin-top: 0;
}

.offcanvas__menu-wrapper.mean-container .mean-nav .new {
    font-size: 10px;
    font-weight: 600;
    background: #ffa38e;
    color: var(--black);
    padding: 3px 7px;
    line-height: 1;
    display: flex;
    align-items: center;
    border-radius: 2px;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    width: 100%;
    padding: 15px 0;
    padding-inline-start: 15px;
    font-weight: 400;
    font-size: 22px;
    line-height: 1;
    color: var(--white);
    text-transform: capitalize;
    border-top: 1px solid var(--black-4);
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
    outline: none;
    transform: translateY(var(--y)) translateZ(0);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-sizing: border-box;
}

.dark .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    color: var(--black);
    border-color: var(--white-4);
}

@media only screen and (max-width: 767px) {
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
        font-size: 20px;
    }
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    width: 54px;
    height: 54px;
    justify-content: center;
    font-weight: 300;
    border: none !important;
}

.dark .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    background-color: var(--white-4);
}

.dir-rtl .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    right: 275px;
}

@media only screen and (max-width: 767px) {
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
        height: 50px;
    }
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand:hover {
    background: var(--secondary);
    opacity: 1;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li li:first-child {
    border-top: 1px solid var(--black-4);
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    font-size: 20px;
    text-transform: capitalize;
    border-top: none !important;
    padding: 12px 0;
    padding-inline-start: 30px;
}

@media only screen and (max-width: 767px) {
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
        font-size: 18px;
    }
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
    height: 58px;
}

@media only screen and (max-width: 991px) {
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
        height: 25px;
    }
}

@media only screen and (max-width: 767px) {
    .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a.mean-expand {
        height: 22px;
    }
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li li li:last-child {
    border-bottom: 1px solid var(--black-4);
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
    padding-left: 40px;
}

.offcanvas__menu-wrapper.mean-container .mean-bar {
    padding: 0;
    background: none;
    max-height: auto;
    overflow-y: scroll;
}

.offcanvas__menu-wrapper.mean-container .mean-bar::-webkit-scrollbar {
    width: 0;
}

.offcanvas__menu-wrapper.mean-container a.meanmenu-reveal {
    display: none !important;
}

.light .main-menu li a:hover {
    color: var(--primary);
}

.light .main-menu-2 li a {
    color: var(--black);
}

.light .main-menu-2 li a:hover {
    color: var(--primary);
}

.light .main-menu-3 li a {
    color: var(--black);
}

.light .main-menu-3 li a:hover {
    color: var(--primary);
}

.light .sidebar-menu li a {
    color: var(--black);
}

.light .sidebar-menu li a:hover {
    color: var(--primary);
}

.light .menu-with-number li a {
    color: var(--black);
}

.light .menu-with-number li a:hover span {
    color: var(--black);
}

.light .menu-with-number li a:hover span::before {
    background-color: var(--black);
}

.light .menu-with-number li a span {
    color: var(--black-9);
}

.light .menu-with-number li a span::before {
    background-color: var(--black-9);
}

.light .menu-with-number li a.active span {
    color: var(--black);
}

.light .menu-with-number li a.active span::before {
    background-color: var(--black);
}
  

.color-accent-lilac {
    color: #8d53e9;
}

.color-accent-lilac-bg {
    background: #8d53e9;
}
 
 
.light .developer-skill__resume .sonny_progressbar .progress-percent {
    color: var(--black);
}

.cf-cta__text-wrapper {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: space-between;
    grid-gap: 45px;
}

@media only screen and (max-width: 991px) {
    .cf-cta__text-wrapper {
        grid-template-columns: 1fr;
    }
}

.cf-cta__btn .wc-btn-default {
    font-size: 18px;
    font-weight: 600;
    padding: 35px 75px;
    background-color: var(--white);
    color: var(--black);
    text-transform: uppercase;
    border-width: 0;
}

@media only screen and (max-width: 1199px) {
    .cf-cta__btn .wc-btn-default {
        padding: 20px 40px;
        font-weight: 500;
    }
}

.cf-cta__text {
    max-width: 250px;
    position: absolute;
    inset-inline-end: -30px;
    top: 47%;
    transform: translateY(-50%);
}

@media only screen and (max-width: 1199px) {
    .cf-cta__text {
        inset-inline-end: -130px;
        max-width: 270px;
    }
}

@media only screen and (max-width: 991px) {
    .cf-cta__text {
        inset-inline-end: 0;
        max-width: 270px;
    }
}

@media only screen and (max-width: 767px) {
    .cf-cta__text {
        position: static;
        transform: none;
    }
}

.cf-cta__text p {
    font-size: 18px;
}

.cf-cta__sec-title-wrapper {
    position: relative;
}

@media only screen and (max-width: 767px) {
    .cf-cta__sec-title-wrapper .sec-title-18 {
        margin-bottom: 20px;
        font-size: 40px;
    }
}

.switcher__area {
    position: relative;
    direction: ltr;
}

@media only screen and (max-width: 767px) {
    .switcher__area {
        display: none;
    }
}
 
  

.switcher__item {
    margin-bottom: 30px;
}

@media only screen and (max-width: 1399px) {
    .switcher__item:nth-child(3) {
        display: none;
    }
}

.switcher__item:last-child {
    margin-bottom: 0;
}

.switcher__title {
    font-weight: 500;
    font-size: 20px;
    line-height: 1.5;
    color: var(--white) !important;
    text-transform: capitalize;
    padding-bottom: 10px;
}

.switcher__btn button {
    display: inline-block;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: var(--white-2);
    background: #2b2b2f;
    border-radius: 4px;
    padding: 10px 15px;
    text-transform: capitalize;
}

.switcher__btn button:hover,
.switcher__btn button.active {
    color: var(--white);
}

.switcher__btn select {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--white-2);
    width: 100%;
    border: none;
    padding: 9px 10px;
    border-radius: 4px;
    background: #2b2b2f;
    text-transform: capitalize;
    outline: none;
    cursor: pointer;
}

#switcher_close {
    display: none;
}

.overlay-switcher-close {
    position: fixed;
    z-index: 99;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    display: none;
}

.overlay-switcher-close.show-overlay {
    display: block;
}

.offcanvas-3__area {
    background: var(--primary);
    position: fixed;
    width: 80%;
    height: 100%;
    padding: 15px;
    z-index: 100000;
    overflow: hidden;
}
 
.offcanvas-3__menu {
    position: relative;
    width: 100%;
    height: 100%;
}

.offcanvas-3__menu ul {
    position: relative;
}

.offcanvas-3__menu ul:before {
    position: absolute;
    content: "";
    width: 1px;
    height: 100%;
    background: #333337;
    inset-inline-start: 8px;
    top: 0;
}

@media only screen and (max-width: 767px) {
    .offcanvas-3__menu ul:before {
        display: none;
    }
}

@media (max-height: 500px) {
    .offcanvas-3__menu ul:before {
        height: 100%;
    }
}

.offcanvas-3__menu li {
    padding-inline-start: 0px;
    position: relative;
}

@media only screen and (max-width: 767px) {
    .offcanvas-3__menu li {
        padding-left: 0;
    }
}

ul.custom-dropdown-menu a img {
    height: 20px;
    width: 20px;
}

.offcanvas-3__menu li:hover > a {
    color: var(--white);
}

.offcanvas-3__menu li:hover:before {
    opacity: 1;
    visibility: visible;
}

 

@media only screen and (max-width: 767px) {
    .offcanvas-3__menu li:before {
        display: none;
    }
}

.offcanvas-3__menu li:not(:last-child) {
    margin-bottom: 26px;
}

@media only screen and (max-width: 991px) {
    .offcanvas-3__menu li:not(:last-child) {
        margin-bottom: 0px;
    }
}

.offcanvas-3__menu li a {
    font-size: 120px;
    font-size: 8vh;
    color: var(--secondary);
    text-transform: uppercase;
    line-height: 0.9;
    position: relative;  
    background-image: linear-gradient(90deg, #fff, #ddd 50%, #666 0);
    background-size: 200% 100%;
    background-position: 100%;
}

.offcanvas-3__menu li a:hover {
    background-position: 0;
    color: #fff;
    letter-spacing: 1.5px;
}

@media only screen and (max-width: 1399px) {
    .offcanvas-3__menu li a {
        font-size: 7vh;
    }
}

@media only screen and (max-width: 1199px) {
    .offcanvas-3__menu li a {
        font-size: 6vh;
    }
}

@media only screen and (max-width: 991px) {
    .offcanvas-3__menu li a {
        font-size: 2.2vh;
        color: rgba(255, 255, 255, 0.6705882353);
        background-image: unset;
        -webkit-text-fill-color: unset;
    }
}

.offcanvas-3__menu-wrapper {
    display: flex;
    align-items: flex-end;
    overflow-y: hidden;
}

.offcanvas-3__area { 
    visibility: hidden; 
}

.offcanvas-3__menu ul li { 
    position: relative; 
}

.offcanvas-3__meta {
    opacity: 0;
    top: -30px;
    position: relative;
}

.offcanvas-3__social {
    opacity: 0;
    top: -30px;
    position: relative;
}
 
.submenu {
    display: none;
    background: rgba(0, 0, 0, 0);
    font-size: 14px;
}

.submenu li {
    border-bottom: 1px solid rgba(49, 49, 49, 0.3764705882);
    margin-left: 15px;
}

.submenu a {
    display: block;
    text-decoration: none;
    color: #d9d9d9;
    padding: 10px 0px;
    transition: all 0.25s ease;
}

.submenu a:hover {
    background: rgba(0, 0, 0, 0);
    color: #fff;
}

.offcanvas-area {
    background-color: #1c1c1c;
    padding: 30px;
    position: fixed;
    left: -100%;
    top: 0;
    z-index: 100;
    width: 360px;
    max-width: 360px;
    transition: 0.7s;
    opacity: 0;
    visibility: hidden;
    height: 100%;
    overflow-y: scroll;
    z-index: 200;
}

@media (max-width: 767px) {
    .offcanvas-area {
        width: 100%;
    }
}

.offcanvas-area.show {
    opacity: 1;
    visibility: visible;
    left: 0;
}

#open_offcanvas {
    border: 0;
    background: #000;
    padding: 0px;
    outline: 0;
}

.close-offcanvas {
    cursor: pointer;
    display: inline-block;
    background: white;
    border-radius: 42px;
    padding: 5px 7px;
    margin: 0 0 0 auto;
    display: flex;
}
  

.font-heading-Beatricetrial h1,
.font-heading-Beatricetrial h2,
.font-heading-Beatricetrial h3,
.font-heading-Beatricetrial h4,
.font-heading-Beatricetrial h5,
.font-heading-Beatricetrial h6 {
    font-family: var(--font_beatricetrial);
}
 

.header-area.style-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* background-color: #ffffff; */
}

.header-area.style-1 .header-area__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: white;
    position: relative;
    padding: 40px 20px;
    height: 90px;
}

.header-area.style-1 .header-area__inner > *:first-child {
    margin-inline-end: auto;
}

.header-area.style-1 .main-menu li a {
    /* font-size: 16px; */
    font-weight: 500;
    max-width: 100%;
    color: black;
}

.header-area.style-1 .search-icon {
    color: var(--primary);
}

@media (max-width: 575px) {
    .header-area.style-1 .header__meta {
        display: none;
    }
}

.header-area.style-1 .wc-btn-primary {
    padding: 14px 25px;
}

@media only screen and (max-width: 991px) {
    .header-area.style-1 .wc-btn-primary {
        padding: 15px 25px;
        font-size: 16px;
    }
}

.dir-rtl .header-area.style-1 .header__navicon img {
    transform: rotateY(180deg);
}

.footer-area.style-2 .footer-area-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 50px 60px;
    justify-content: space-between;
    padding: 0px 0 80px;
}

@media only screen and (max-width: 1919px) {
    .footer-area.style-2 .footer-area-inner {
        padding-top: 25px;
        padding-bottom: 35px;
    }
}

@media only screen and (max-width: 991px) {
    .footer-area.style-2 .footer-area-inner {
        padding-top: 78px;
        padding-bottom: 71px;
    }
}

@media only screen and (max-width: 767px) {
    .footer-area.style-2 .footer-area-inner {
        padding-top: 25px;
        padding-bottom: 25px;
        grid-template-columns: 100%;
    }
}

.footer-area.style-2 .footer-area-inner > * {
    min-width: 130px;
}

.footer-area.style-2 .footer-logo img {
    max-height: 100px;
    margin-bottom: 2rem;
}

@media only screen and (max-width: 1199px) {
    .footer-area.style-2 .footer-logo img {
        max-height: 34px;
        margin-bottom: 1rem;
    }
}

footer.footer-area {
    padding: 38px 0 0;
}

@media only screen and (max-width: 1199px) {
    .footer-area.style-2 .description-text {
        margin-top: 31px;
    }
}

@media only screen and (max-width: 991px) {
    .footer-area.style-2 .description-text {
        margin-top: 21px;
    }
}

.footer-area.style-2 .description-text .text {
    max-width: 300px;
}

.footer-area.style-2 .footer-widget-wrapper .title {
    font-size: 20px;
}

@media only screen and (max-width: 1199px) {
    .footer-area.style-2 .footer-widget-wrapper .title {
        font-size: 20px;
    }
}

.footer-area.style-2 .footer-nav-list {
    margin-top: 24px;
}

.footer-area.style-2 .footer-nav-list li {
    font-size: 16px;
    line-height: 30px;
}

.footer-area.style-2 .footer-nav-list li a:hover {
    color: var(--primary);
    letter-spacing: 0.4px;
}

.footer-area.style-2 .social-links {
    display: flex;
    gap: 24px;
}

.footer-area.style-2 .social-links li {
    line-height: 1;
    padding: 10px;
    border-radius: 50%;
    height: 45px;
    width: 45px;
    display: flex;
    justify-content: center;
    background: #2d2a4a;
}
.footer-area.style-2 .social-links li {
    color: white;
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
}

.footer-area.style-2 .social-links li:hover {
    background: #a51931;
}

.footer-area.style-2 .social-links li:hover a:hover {
    color: #fff;
}

.header-area.sticky a.wc-btn.wc-btn-primary {
    background: #a51931;
}
.header-area.sticky a.wc-btn.wc-btn-primary.bordered {
    background: #333;
}

.footer-area.style-2 .copyright-text .text {
    font-size: 14px;
    color: white;
}

.footer-area.style-2 .copyright-text .text a {
    color: white;
}

.footer-area.style-2 .copyright-area-inner {
    border-top: 1px solid rgba(7, 32, 50, 0.08);
    display: flex;
    flex-wrap: wrap;
    gap: 10px 60px;
    justify-content: center;
    padding: 10px 0;
    background-color: #2d2a4a;
}

@media only screen and (max-width: 1919px) {
    .footer-area.style-2 .copyright-area-inner {
        padding: 28px 0;
    }
}

@media only screen and (max-width: 767px) {
    .footer-area.style-2 .copyright-area-inner {
        flex-direction: column;
        align-items: center;
    }
    .footer-area .text-wrapper p {
        font-size: 11px !important;
    }
}

.subscribe-form {
    margin-top: 36px;
}

.subscribe-form .input-field {
    position: relative;
    background-color: #282828;
    border-radius: 10px;
    overflow: hidden;
}

.subscribe-form .input-field input {
    border: 0;
    padding: 19px 20px;
    background-color: #fafafa;
    color: var(--primary);
    width: 100%;
    padding-inline-end: 50px;
    padding-inline-start: 50px;
    width: 100%;
}

.subscribe-form .input-field input::-moz-placeholder {
    color: #abb1b6;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}

.subscribe-form .input-field input::placeholder {
    color: #abb1b6;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}

.subscribe-form .input-field input:focus {
    outline: 0;
}

.subscribe-form .input-field .subscribe-btn {
    position: absolute;
    inset-inline-end: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.dir-rtl .subscribe-form .input-field .subscribe-btn img,
.dir-rtl .subscribe-form .input-field .subscribe-btn i {
    transform: rotateY(180deg);
}

.subscribe-form .input-field .icon {
    color: #abb1b6;
    position: absolute;
    inset-inline-start: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.subscribe-form .policy-field {
    margin-top: 20px;
}

.subscribe-form .policy-field label {
    font-size: 14px;
    margin-inline-start: 6px;
}

.subscribe-form .policy-field label span {
    color: var(--primary);
    font-weight: 500;
}

:root {
    --theme: #2d2a4a;
}

.wc-btn-primary {
    background-color: #a51931;

    color: white;
    border-radius: 70px;
    padding: 15px 28px;
}

@media only screen and (max-width: 1919px) {
    .wc-btn-primary {
        padding: 15px 15px;
        font-size: 14px;
    }
}

.wc-btn-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
}

.wc-btn-primary.primary-bg {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.section-title {
    font-size: 40px;
}

@media only screen and (max-width: 1919px) {
    .section-title {
        font-size: 50px;
    }
}

@media only screen and (max-width: 1199px) {
    .section-title {
        font-size: 40px;
    }
}

@media only screen and (max-width: 991px) {
    .section-title {
        font-size: 30px;
    }
}

@media only screen and (max-width: 767px) {
    .section-title {
        font-size: 28px;
    }
}

.section-spacing {
    padding-top: 100px;
}

@media only screen and (max-width: 1919px) {
    .section-spacing {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

@media only screen and (max-width: 991px) {
    .section-spacing {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}

@media only screen and (max-width: 767px) {
    .section-spacing {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

@media only screen and (max-width: 767px) {
    .body-wrapper {
        overflow: hidden;
    }
}

.header-area {
    transition: 0.3s;
}

.header-area.sticky {
    position: fixed !important;
    background-color: white;
    z-index: 99999;
    padding: 15px 0px;
}

.header-area.sticky .header-area__inner {
    height: 60px !important;
}

.header-area.sticky .main-menu > ul > li > a {
    color: black;
}

.header-area.sticky .wc-btn-primary {
    background-color: #2d2a4a;
    color: white;
}

.header-area.sticky .normal-logo {
    display: none;
}

.header-area.sticky .sticky-logo {
    display: block;
}

.sticky-logo {
    display: none;
}

.header-area .wc-btn-primary {
    border-radius: 70px;
}

.hero-area {
    padding-top: 220px;
}

@media only screen and (max-width: 1919px) {
    .hero-area {
        padding-top: 190px;
    }
}

@media only screen and (max-width: 991px) {
    .hero-area {
        padding-top: 170px;
    }
}

@media only screen and (max-width: 767px) {
    .hero-area {
        padding-top: 150px;
    }
}

.hero-area .section-title {
    font-size: 90px;
    line-height: 1;
}

@media only screen and (max-width: 1919px) {
    .hero-area .section-title {
        font-size: 60px;
    }
}

@media only screen and (max-width: 991px) {
    .hero-area .section-title {
        font-size: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .hero-area .section-title {
        font-size: 35px;
    }
}

.hero-area .text-wrapper {
    margin-top: 24px;
}

.hero-area .btn-wrapper {
    margin-top: 43px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

@media only screen and (max-width: 1199px) {
    .hero-area .btn-wrapper {
        margin-top: 23px;
    }
}

@media only screen and (max-width: 767px) {
    .hero-area .btn-wrapper {
        flex-wrap: nowrap;
        gap: 15px;
    }
}

.hero-area .content-bottom {
    border-top: 1px solid var(--border);
    margin-top: 50px;
    display: flex;
    gap: 53px;
}

@media only screen and (max-width: 1199px) {
    .hero-area .content-bottom {
        margin-top: 30px;
    }
}

.hero-area .customer-box-wrapper {
    padding-top: 33px;
}

@media only screen and (max-width: 1199px) {
    .hero-area .customer-box-wrapper {
        padding-top: 23px;
    }
}

.hero-area .video-btn-wrapper {
    border-inline-start: 1px solid var(--border);
    padding-inline-start: 50px;
}

@media only screen and (max-width: 1199px) {
    .hero-area .video-btn-wrapper {
        padding-inline-start: 30px;
    }
}

.hero-area .video-btn-wrapper .btn-wrapper {
    margin-top: 34px;
}

@media only screen and (max-width: 1199px) {
    .hero-area .video-btn-wrapper .btn-wrapper {
        margin-top: 24px;
    }
}

.hero-area .video-btn-wrapper .text {
    font-size: 18px;
    line-height: 1.1;
    color: var(--primary);
}

.hero-area .video-btn-wrapper .text-wrapper {
    margin-top: 19px;
}

.hero-area .section-content {
    max-width: 450px;
}

@media only screen and (max-width: 991px) {
    .hero-area .section-content {
        max-width: 560px;
    }
}

@media only screen and (max-width: 767px) {
    .hero-area .section-content {
        max-width: 100%;
    }
}

.hero-area .customer-box .title {
    font-size: 50px;
    font-weight: 500;
    line-height: 1;
    min-width: 105px;
}

.hero-area .customer-box .text {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.11;
    max-width: 166px;
    color: var(--primary);
}

.hero-area .customer-box .content {
    margin-top: 15px;
    display: flex;
    gap: 0px;
    align-items: center;
}

.hero-area .customer-box .thumbs {
    display: flex;
}

.hero-area .customer-box .thumbs img {
    width: 55px;
    border-radius: 50%;
    border: 3px solid var(--white);
}

.hero-area .customer-box .thumbs img:not(:first-child) {
    margin-inline-start: -20px;
}

.hero-area-inner {
    display: flex;
    gap: 40px 80px;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    align-items: flex-start;
}

@media only screen and (max-width: 991px) {
    .hero-area-inner {
        flex-direction: column;
        align-items: center;
    }
}

.hero-area-inner .area-shape-1 {
    position: absolute;
    top: -220px;
    inset-inline-end: 50%;
    z-index: -1;
}

.dir-rtl .hero-area-inner .area-shape-1 {
    transform: rotateY(180deg);
}

.hero-area-inner .area-shape-2 {
    position: absolute;
    width: 988.54px;
    height: 473.3px;
    inset-inline-end: 45%;
    top: -220px;
    background: linear-gradient(120.51deg, #87d4ff 11.58%, #f3ffac 82.42%);
    opacity: 0.8;
    filter: blur(250px);
    transform: matrix(-1, 0, 0, 1, 0, 0);
    z-index: -1;
}
  
@media only screen and (max-width: 1919px) {
    .features-area {
        padding-top: 82px;
    }
}

@media only screen and (max-width: 991px) {
    .features-area {
        padding-top: 62px;
    }
}

@media only screen and (max-width: 767px) {
    .features-area {
        padding-top: 30px;
    }
}

.features-area .section-header {
    text-align: left;
}

.features-area .section-header .section-title {
    max-width: 829px;
    color: var(--black);
    margin: 0 auto;
}

.features-area .section-header .text {
    max-width: 750px;
    color: #9ba0a3;
    margin: 0 auto;
}

.features-area .section-header .text-wrapper {
    margin-top: 27px;
}

.features-area .section-content {
    margin-top: 63px;
    display: grid;
    gap: 40px 70px;
    grid-template-columns: 0.5fr 1fr;
}

@media only screen and (max-width: 1919px) {
    .features-area .section-content {
        margin-top: 43px;
    }
}

@media only screen and (max-width: 1199px) {
    .features-area .section-content {
        grid-template-columns: 0.9fr 1fr;
    }
}

@media only screen and (max-width: 991px) {
    .features-area .section-content {
        margin-top: 33px;
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 991px) {
    .features-area .section-content .accordion-wrapper {
        order: 2;
    }
}

.features-area .accordion .accordion-button {
    font-size: 24px;
    line-height: 1.25;
    color: var(--white);
    padding-top: 31px;
    padding-bottom: 25px;
    padding-inline-start: 40px;
    padding-inline-end: 40px;
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    text-align: start;
}

@media only screen and (max-width: 1399px) {
    .features-area .accordion .accordion-button {
        font-size: 20px;
    }
}

@media only screen and (max-width: 991px) {
    .features-area .accordion .accordion-button {
        padding-top: 21px;
        padding-bottom: 15px;
    }
}

@media only screen and (max-width: 767px) {
    .features-area .accordion .accordion-button {
        padding-inline-start: 25px;
        padding-inline-end: 25px;
    }
}

@media only screen and (max-width: 1199px) {
    .features-area .accordion .accordion-button br {
        display: none;
    }
}

.features-area .accordion .accordion-button::after {
    content: "+";
    color: #f8f5f3;
    background-image: none;
    line-height: 1;
    width: auto;
    height: auto;
    font-size: 22px;
    margin-inline-start: 50px;
    margin-inline-start: auto;
    margin-inline-end: 0;
}

.features-area .accordion .accordion-button:not(.collapsed) {
    pointer-events: none;
}

.features-area .accordion .accordion-button:not(.collapsed)::after {
    content: "-";
}

.features-area .accordion .accordion-item {
    border-bottom: 0;
    background-color: #10293a;
    border-radius: 20px;
}

.features-area .accordion .accordion-item:not(:first-child) {
    margin-top: 15px;
}

.features-area .accordion .accordion-body {
    font-size: 18px;
    line-height: 1.44;
    padding-inline-start: 40px;
    padding-inline-end: 40px;
    padding-bottom: 33px;
    padding-top: 0;
    color: #9ba0a3;
}

@media only screen and (max-width: 991px) {
    .features-area .accordion .accordion-body {
        padding-bottom: 23px;
    }
}

@media only screen and (max-width: 767px) {
    .features-area .accordion .accordion-body {
        padding-inline-start: 25px;
        padding-inline-end: 25px;
    }
}

.features-area .accordion .accordion-body span {
    font-weight: 600;
    color: #f8f5f3;
}

.product-area .section-content {
    max-width: 580px;
}

.product-area .section-content .text-wrapper {
    margin-top: 27px;
}

.product-area .section-content .btn-wrapper {
    margin-top: 40px;
}

.product-area .section-content .wc-btn.wc-btn-underline:hover {
    color: var(--theme);
}

.product-area-inner {
    display: flex;
    gap: 40px 80px;
    justify-content: space-between;
    align-items: center;
}

@media only screen and (max-width: 991px) {
    .product-area-inner {
        flex-direction: column;
    }
}

.product-thumb {
    position: relative;
    min-width: 280px;
}

.product-thumb .shape-1 {
    position: absolute;
    top: 7%;
    inset-inline-start: 6%;
    width: 38%;
    z-index: 1;
    filter: drop-shadow(0px 30px 30px rgba(28, 32, 49, 0.13));
}

.product-thumb .shape-2 {
    position: absolute;
    bottom: 0;
    inset-inline-end: 6%;
    width: 82%;
    filter: drop-shadow(0px -30px 50px rgba(40, 41, 54, 0.15));
}

.team-video-area .team-video-thumb {
    max-width: 550px;
}

@media only screen and (max-width: 991px) {
    .team-video-area .section-content {
        max-width: 550px;
    }
}

.team-video-area .section-content .text-wrapper {
    margin-top: 5px;
}

.team-video-area .section-content .reaching-list {
    margin-top: 26px;
}

.team-video-area .section-content .reaching-list .title {
    font-size: 18px;
    font-weight: 500;
    color: var(--primary);
}

.team-video-area .section-content .reaching-list ul {
    margin-top: 18px;
}

.team-video-area .section-content .reaching-list ul li {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.44;
    color: var(--white);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.team-video-area .section-content .reaching-list ul li:not(:first-child) {
    margin-top: 10px;
}

.team-video-area .section-content .reaching-list ul li img {
    margin-top: 2px;
}

.team-video-area-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px 80px;
}

@media only screen and (max-width: 991px) {
    .team-video-area-inner {
        flex-direction: column-reverse;
    }
    .team-video-area-inner.ecn {
        flex-direction: column;
        margin-top: 4rem;
    }
}

.testimonial-area {
    background-color: #fafafa;
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    overflow: hidden;
    background-image: url("../imgs/banner/world-map-bg-2.png");
}

.testimonial-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.9); /* White overlay */
    z-index: 1;
}

.testimonial-area-inner {
    position: relative;
    z-index: 2;
}

.swiper-slide .testimonial-box {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    overflow: hidden;
    background-image: url("../imgs/banner/testimonial-img.jpg");
}

.testimonial-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: -1;
    border-radius: 16px;
}

@media only screen and (max-width: 1919px) {
    .testimonial-area {
        padding-top: 82px;
    }
}

@media only screen and (max-width: 991px) {
    .testimonial-area {
        padding-top: 62px;
    }
}

@media only screen and (max-width: 767px) {
    .testimonial-area {
        padding-top: 42px;
    }
}

.testimonial-area .section-header {
    text-align: center;
}

.testimonial-area .section-header .section-title {
    margin: 0 auto;
}

.testimonial-area .section-header .text {
    max-width: 580px;
    margin: 0 auto;
}

.testimonial-area .testimonial-wrapper-box {
    margin-top: 63px;
}

@media only screen and (max-width: 1919px) {
    .testimonial-area .testimonial-wrapper-box {
        margin-top: 43px;
    }
}

@media only screen and (max-width: 991px) {
    .testimonial-area .testimonial-wrapper-box {
        margin-top: 33px;
    }
}

.testimonial-box {
    background-color: var(--white);
    padding: 45px 40px;
    border-radius: 20px;
    border: 1px solid gray;
    position: relative;
    z-index: 1;
}

@media only screen and (max-width: 991px) {
    .testimonial-box {
        padding: 25px 25px;
    }
}

.testimonial-box .author {
    display: flex;
    align-items: center;
    gap: 20px;
}

.testimonial-box .avatar img {
    border-radius: 50%;
}

.testimonial-box .name {
    font-size: 22px;
    line-height: 1;
    color: white;
}

.testimonial-box .meta-title {
    font-size: 14px;
    line-height: 1;
    margin-top: 9px;
    display: inline-block;
    color: white;
}

.testimonial-box .text {
    margin-top: 33px;
    font-size: 16px;
    line-height: 1.36;
    color: rgb(207, 207, 207);

    display: -webkit-box;
    -webkit-line-clamp: 4; /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media only screen and (max-width: 1919px) {
    .testimonial-box .text {
        font-size: 19px;
    }
}

.testimonial-box .ratings-list {
    margin-top: 23px;
}

.testimonial-box .ratings-list ul {
    display: flex;
    align-items: center;
    gap: 4px;
}
  
.wcf__toggle_switcher .slide-toggle-btn {
    background-color: #fafafa;
}

.user-area .section-header {
    text-align: center;
}

.user-area .section-header .section-title {
    max-width: 700px;
    margin: 0 auto;
}

.user-area .section-header .text {
    max-width: 450px;
    margin: 0 auto 20px auto;
}

.user-area .section-header .text-wrapper {
    margin-top: 27px;
}

@media only screen and (max-width: 991px) {
    .user-area .section-header .text-wrapper {
        margin-top: 17px;
    }
}

.user-area .brand-logos {
    max-width: 1170px;
    margin: 0 auto;
    margin-top: 63px;
}

@media only screen and (max-width: 1919px) {
    .user-area .brand-logos {
        margin-top: 43px;
    }
}

@media only screen and (max-width: 991px) {
    .user-area .brand-logos {
        margin-top: 33px;
    }
}

.user-area .brand-logos .logo img {
    filter: contrast(0);
}

.user-area-inner {
    border-radius: 20px;
    padding-inline-start: 20px;
    padding-inline-end: 20px;
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
    z-index: 3;
}

@media only screen and (max-width: 1919px) {
    .user-area-inner {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

@media only screen and (max-width: 991px) {
    .user-area-inner {
        padding-top: 62px;
    }
}

@media only screen and (max-width: 767px) {
    .user-area-inner {
        padding-top: 42px;
    }
}

.progress-wrap svg.progress-circle path {
    stroke: var(--theme);
}

.hero-area {
    width: 100%;
    overflow: hidden;
    padding: 0;
}

.hero-area-inner {
    width: 100%;
    height: 950px;
    position: relative;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.hero-slide {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    padding-left: 40px;
}

.hero-content {
    /* padding: 40px; */
    border-radius: 12px;
    max-width: 700px;
    position: relative;
    z-index: 1;
    text-align: left;
    padding-top: 20rem;
}

.hero-title {
    font-size: 54px;
    line-height: 70px !important;
    color: #ffffff;
    margin: 0 0 40px;
}

.hero-desc {
    font-size: 18px;
    color: #ffffff;
    margin: 0;
}

/* Swiper Pagination and Navigation */
.swiper-pagination {
    position: absolute;
    bottom: 20px;
    z-index: 2;
}

.swiper-button-next,
.swiper-button-prev {
    color: #fff;
    z-index: 2;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-area-inner {
        height: 80vh;
    }

    .hero-slide {
        padding-left: 20px;
        background-size: cover;
        background-position: center;
        height: 100%;
    }

    .hero-content {
        padding: 8rem 0px 0rem;
        max-width: 95%;
    }

    .hero-title {
        font-size: 32px;
    }

    .hero-desc {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .hero-area-inner {
        height: 60vh;
    }
    .hero-title {
        margin: 0 0 10px;
    }

    .hero-slide {
        padding-left: 15px;
        background-size: cover;
        background-position: center;
        height: 100%;
    }

    .hero-title {
        font-size: 30px;
        line-height: 1.2 !important;
    }

    .hero-desc {
        font-size: 14px;
    }
    .section-title-wrapper .title-wrapper h2 {
        font-size: 22px !important;
    }
    .section-title-wrapper .title-wrapper p {
        font-size: 14px;
    }
}
.account-btn .header__button .wc-btn-primary {
    margin-top: 40px;
    padding: 15px 30px;
    gap: 20px;
}
.header__logo img {
    width: 150px;
    background-color: white;
    padding: 4px 10px;
    border-radius: 5px;
}
.header__button {
    display: flex !important;
    justify-content: start;
    align-items: center;
    gap: 20px;
}
.user-area-inner .header__button {
    justify-content: center;
}

/*======================= feature css ====================*/
.features-area {
    background-color: white;
    padding-top: 60px;
    padding-bottom: 80px !important;
    position: relative;
    overflow: hidden;
}

.features-area .section-title {
    max-width: 586px;
}
@media only screen and (max-width: 1199px) {
    .features-area .section-title {
        max-width: 486px;
    }
}
.features-area .section-header {
    display: flex;
    gap: 30px 80px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}
@media only screen and (max-width: 767px) {
    .features-area .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
}
.features-area .section-header .text {
    max-width: 380px;
}
.features-area .features-wrapper-box {
    position: relative;
    z-index: 1;
}
.features-area .features-wrapper-box .shape-1 {
    position: absolute;
    top: -36%;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    max-width: inherit;
    opacity: 0.5;
    height: 45rem;
}
.dir-rtl .features-area .features-wrapper-box .shape-1 {
    transform: rotateY(180deg) translateX(50%);
}
.features-area .features-wrapper-box .shape-2 {
    position: absolute;
    top: 66%;
    inset-inline-start: -10%;
    width: 60px;
    z-index: -1;
}
.dir-rtl .features-area .features-wrapper-box .shape-2 {
    transform: rotateY(180deg);
}
.features-area .features-wrapper {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 30px;
    position: relative;
    z-index: 1;
}
@media only screen and (max-width: 1919px) {
    .features-area .features-wrapper {
        margin-top: 51px;
    }
}
@media only screen and (max-width: 991px) {
    .features-area .features-wrapper {
        margin-top: 41px;
    }
}
@media only screen and (max-width: 767px) {
    .features-area .features-wrapper {
        margin-top: 36px;
    }
    .features-area .features-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    .feature-box {
        padding: 14px 9px 15px !important;
    }
}
.feature-box {
    border: 1px solid var(--border);
    border-radius: 20px;
    background-color: var(--white);
    text-align: center;
    padding: 30px 25px 30px;
    transition: all 0.3s;
}
@media only screen and (max-width: 1399px) {
    .feature-box {
        padding: 40px 30px 37px;
    }
}
.feature-box:hover {
    border-color: #2d2a4a;
}
.feature-box:hover .wc-btn i {
    transform: translateX(5px);
}
.feature-box .wc-btn {
    margin-top: 20px;
}
@media only screen and (max-width: 1399px) {
    .feature-box .wc-btn {
        margin-top: 20px !important;
    }
}
.feature-box .wc-btn i {
    transition: 0.5s;
}
.feature-box .title {
    font-size: 24px;
    line-height: 1.25;
}
@media only screen and (max-width: 991px) {
    .feature-box .title {
        font-size: 20px;
    }
}
.feature-box .text {
    margin-top: 23px;
}
.feature-box .content {
    margin-top: 10px;
}
@media only screen and (max-width: 1399px) {
    .feature-box .content {
        margin-top: 10px;
    }
}

/* Container */
.max-w-7xl {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}

/*======================= Market Section Layout ============================*/
/* Market Section Layout */
.market-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .market-section {
        flex-direction: row;
    }
}

/* Left Column (Table) */
.market-section-table {
    flex: 2;
    background-color: #ffffff;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    max-width: 744px;
    overflow-x: auto;
}

/* Tabs */
.market-section-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.market-section-tab {
    padding: 0.5rem 1rem;
    background-color: #e5e7eb;
    border: none;
    border-radius: 9999px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.market-section-tab:hover {
    background-color: #d1d5db;
}

.market-section-tab.active {
    background: #2d2a4a;
    color: #ffffff;
}

/* Tab Content */
.market-section-tab-content {
    display: none;
    overflow-x: auto;
}

.market-section-tab-content.active {
    display: block;
}

.market-section-tab-content.hidden {
    display: none;
}

/* Table Styles */
table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
}

thead th {
    text-align: left;
    color: #6b7280;
    font-weight: 600;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

tbody td {
    padding: 1.5rem 0;
    vertical-align: middle;
    border-bottom: 1px solid #f3f4f6;
}

tbody tr:hover {
    background-color: rgb(236, 247, 255);
}

tbody td img {
    width: 1.25rem;
    vertical-align: middle;
    margin-right: 0.5rem;
}

.market-section-green {
    color: #22c55e;
    font-weight: 600;
}

.market-section-red {
    color: #ef4444;
    font-weight: 600;
}

.market-section-trade-btn {
    padding: 0.375rem 1rem;
    background-color: #eff6ff;
    border: none;
    border-radius: 9999px;
    color: #2d2a4a;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.market-section-trade-btn:hover {
    background-color: #dbeafe;
}

/* Right Column (Cards) */
.market-section-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.market-section-card {
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 1rem;
    height: 16rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #ffffff;
    transition: all 0.3s ease-in-out;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.market-section-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.market-section-label {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: rgba(76, 76, 76, 0.5);
    padding: 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
}

.market-section-card-text h4 {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
}

.market-section-card-text p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--white);
}

/* Note */
.market-section-note {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 1rem;
}

/* ------------------- Responsive Styling ------------------- */

/* Scrollbar for Tab Content */
.market-section-tab-content::-webkit-scrollbar {
    height: 6px;
}
.market-section-tab-content::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 10px;
}

/* Tablet Screens */
@media (max-width: 1024px) {
    .market-section {
        flex-direction: column;
    }

    .market-section-cards {
        flex-direction: column;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .market-section-card {
        flex: auto;
        height: 12rem;
        background-repeat: no-repeat;
        background-size: cover;
    }
}

/* Mobile Screens */
@media (max-width: 768px) {
    .market-section-table {
        padding: 1rem;
    }

    .market-section-tabs {
        gap: 0.5rem;
    }

    .market-section-tab {
        font-size: 0.75rem;
        padding: 0.4rem 0.75rem;
    }

    thead th,
    tbody td {
        font-size: 0.75rem;
        padding: 1rem 0.5rem;
    }

    .market-section-trade-btn {
        padding: 0.25rem 0.75rem;
        font-size: 0.75rem;
    }

    .market-section-card {
        height: 10rem;
        padding: 8rem 1rem 1rem;
        flex: 1 1 calc(50% - 0.5rem);
    }

    .market-section-card-text h4 {
        font-size: 1.25rem;
    }
    .SpeedMeetmockup img {
        height: 20rem;
        width: 100%;
        object-fit: contain;
    }
    .feature-item .thumb img {
        height: 10rem !important;
    }

    .market-section-card-text p {
        font-size: 0.75rem;
    }
}

/*=============================== speed meter =====================================*/
.SpeedMeetsfeature {
    background: url("../imgs/markets/ttbackgroundsection.png") no-repeat center
        center fixed;
    background-size: cover;
    padding: 80px 20px;
    text-align: center;
}
section.SpeedMeetsfeature .section-title-wrapper {
    margin-bottom: 2rem;
}
.section-title-wrapper .title-wrapper h2 {
    font-size: 40px;
}

.SpeedMeetsfeature-section {
    display: flex;
    justify-content: center;
    transform: translateY(100px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.SpeedMeetsfeature-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.SpeedMeetsfeature-container {
    max-width: 1300px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    padding-bottom: 40px;
    flex-wrap: wrap;
}

.SpeedMeetsfeature-list {
    display: flex;
    flex-direction: column;
    gap: 50px;
    flex: 1;
    min-width: 300px;
}

.SpeedMeetsfeature-box {
    text-align: center;
    max-width: 320px;
    margin: auto;
}

.SpeedMeetsfeature-box img.SpeedMeetsicon {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
}

.SpeedMeetsfeature-box h3 {
    font-size: 21px;
    font-weight: 500;
    color: #0f172a;
    margin-bottom: 10px;
}

.SpeedMeetsfeature-box p {
    font-size: 16px;
    color: #475569;
    line-height: 1.6;
}

.SpeedMeetmockup {
    flex: 1;
    min-width: 320px;
    text-align: center;
}

.SpeedMeetmockup img {
    width: 100%;
    border-radius: 28px;
}
.SpeedMeetsbutton-section {
    text-align: center;
    position: relative;
}

.SpeedMeetsbutton-image {
    max-width: 320px;
    width: 100%;
    border-radius: 28px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.SpeedMeetsbutton-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    background: #1e2a44;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    width: auto;
    margin-top: 20px;
}

.SpeedMeetsbutton-create {
    padding: 10px 12px;
    background: #2d2a4a;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
}

.SpeedMeetsbutton-create:hover {
    background: #1c86ee;
}

.SpeedMeetsbutton-app {
    padding: 10px 20px;
    background: #fff;
    color: #1e2a44;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background 0.3s ease;
}

.SpeedMeetsbutton-app:hover {
    background: #f0f0f0;
}

.SpeedMeetsbutton-app img {
    width: 50px;
    height: auto;
}

.header-area.style-1 .main-menu li a img {
    border-radius: 50px;
}

@media (max-width: 992px) {
    .SpeedMeetsfeature-container {
        flex-direction: column;
        align-items: center;
    }
}

/* key features */
.key-feature-area .section-heading {
    margin: auto;
    text-align: center;
    margin-bottom: 60px;
    padding-top: 100px;
}

section.key-feature-area {
    padding-bottom: 100px;
}
.key-feature-area .key-items {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}
@media only screen and (max-width: 767px) {
    .key-feature-area .key-items {
        justify-content: center;
    }
}
.key-feature-area .key-item {
    max-width: 430px;
    padding: 25px 30px;
    border: 1px solid #ebedef;
    border-radius: 20px;
    transition: 0.5s;
    height: 22rem;
    background: #f1f1f1;
}
@media only screen and (max-width: 1399px) {
    .key-feature-area .key-item {
        max-width: 410px;
        padding: 30px;
    }
}
@media only screen and (max-width: 1199px) {
    .key-feature-area .key-item {
        max-width: 290px;
    }
}
@media only screen and (max-width: 991px) {
    .key-feature-area .key-item {
        max-width: 47%;
    }
}
@media only screen and (max-width: 767px) {
    .key-feature-area .key-item {
        max-width: 100%;
        height: auto;
    }
}
.key-feature-area .key-item:hover {
    background-color: #edf5ff;
}
.key-feature-area .key-item .icon {
    padding-bottom: 29px;
}
.key-feature-area .key-item .title-wrapper {
    margin-bottom: 20px;
}
.key-feature-area .key-item .title {
    font-size: 24px;
}
@media only screen and (max-width: 767px) {
    .video-area .section-heading {
        padding-bottom: 30px;
    }
}

section.team-video-area.section-spacing {
    background-color: #2d2a4a;
    padding-bottom: 0px !important;
}

.feature-area {
    padding-top: 100px;
    padding-bottom: 100px;
}
@media only screen and (max-width: 1199px) {
    .feature-area {
        padding-top: 80px;
    }
}
@media only screen and (max-width: 991px) {
    .feature-area {
        padding: 40px 0;
    }
}
.feature-area .section-heading {
    margin: auto;
    text-align: center;
    margin-bottom: 63px;
}
@media only screen and (max-width: 767px) {
    .feature-area .section-heading {
        margin-bottom: 30px;
    }
}
.feature-item {
    padding: 40px 30px 0px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 40px;
    background-color: #f1f1f1;
    position: relative;
}
@media only screen and (max-width: 1199px) {
    .feature-item {
        padding: 20px;
    }
}
@media only screen and (max-width: 767px) {
    .feature-item {
        padding: 30px 20px;
        text-align: left;
    }
}
.feature-item:hover .wc-btn-primary {
    background-color: var(--action);
    border: 1px solid rgba(0, 0, 0, 0);
}
.feature-item .thumb img {
    height: 15rem;
}

@media only screen and (max-width: 1199px) {
    .feature-item .thumb {
        margin: auto;
    }
}
@media only screen and (max-width: 767px) {
    .feature-item .thumb {
        padding-bottom: 16px;
    }
}
.feature-item .title {
    font-size: 24px;
    padding-bottom: 16px;
}
@media only screen and (max-width: 1199px) {
    .feature-item .title {
        font-size: 18px;
    }
}
@media only screen and (max-width: 991px) {
    .feature-item .title {
        max-width: 180px;
        padding-bottom: 10px;
    }
}

.feature-item .text {
    padding-bottom: 32px;
    padding-top: 15px;
    font-size: 16px;
}

@media only screen and (max-width: 991px) {
    .feature-item .text {
        padding-bottom: 20px;
    }
}
.feature-item .btn-wrapper {
    display: inline-block;
}
.feature-item .wc-btn-primary {
    border-radius: 50px;
    padding: 0;
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background-color: rgba(0, 0, 0, 0);
}
@media only screen and (max-width: 767px) {
    .feature-item .wc-btn-primary {
        height: 50px;
        width: 50px;
    }
    .team-video-area .team-video-thumb img {
        height: 20rem !important;
    }
}
.feature-item .wc-btn-primary img {
    transform: rotate(-45deg);
}

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

.user-area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* black overlay */
    z-index: 2;
}

.user-area .background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.product-thumb .shape-main img {
    animation: slowBounce 2s ease-in-out infinite;
}
@keyframes slowBounce {
    0%,
    100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}
.key-feature-area .key-item .icon img {
    border: 1px solid #dfdfdf;
    border-radius: 50%;
    height: 120px;
    width: 120px;
    padding: 5px;
    background: white;
}

.team-video-area .team-video-thumb img {
    height: 30rem;
}
section.product-area.section-spacing {
    padding-bottom: 100px !important;
}
.footer-area .content-disc {
    background-color: #2d2a4a;
    padding: 2rem 0rem 1rem;
}
.footer-area .title-wrapper h2 {
    color: white;
    font-size: 16px;
    padding-bottom: 10px;
}
.footer-area .text-wrapper p {
    color: rgb(196, 196, 196);
    font-size: 14px;
    padding-bottom: 10px;
    line-height: 1.8;
}

.step-number {
    position: absolute;
    counter-increment: stepno;
    content: counter(stepno);
    font-weight: 600;
    font-size: 5rem;
    line-height: 9.7rem;
    background: linear-gradient(
        180deg,
        rgba(17, 20, 87, 0.22) 0%,
        rgba(17, 20, 87, 0) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    position: absolute;
    top: -28px;
    right: 20px;
}

/* language selector */
.header-area.style-1 .container {
    max-width: 1690px;
}

.language-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    width: 100%;
    margin: 20px auto;
    position: absolute;
    left: 0;
    top: 5px;
}

.language-column {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    border-radius: 10px;
    padding: 10px;
    margin: 0 10px;
}

#languageDropdown {
    display: none;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 900px;
    z-index: 2;
    background-color: var(--white);
    border-radius: 12px;
    padding: 20px;
    flex-wrap: wrap;
    justify-content: center;
    overflow-y: auto;
    max-height: 400px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
}

#languageDropdown.active {
    display: flex;
}

.language-item {
    display: flex;
    align-items: center;
    margin: 5px 0;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 8px;
}

.language-item img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.language-item span {
    font-size: 14px;
}

.language-item.selected {
    background-color: var(--black);
    color: white;
}

.language-item:hover {
    background-color: var(--black);
    color: white;
}

.partnership {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    color: #888;
}

.current-language {
    position: relative;
    z-index: 3;
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    border: 2px solid rgba(165, 165, 165, 0.2);
    padding: 10px 18px;
    border-radius: 5px;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.current-language img {
    width: 24px;
    height: 24px;
    margin-right: 6px;
}

.current-language span {
    font-size: 14px;
    margin-right: 4px;
    color: rgb(0, 0, 0);
}

.description {
    text-align: center;
    font-size: 14px;
    color: #bbb;
    margin-top: 460px;
}

@media (max-width: 768px) {
    .language-section {
        display: none;
    }
    .language-selector {
        max-width: 90%;
    }

    .language-group {
        padding: 8px 12px;
    }

    .language-group h4 {
        font-size: 12px;
    }

    .language-item span {
        font-size: 13px;
    }

    .language-dropdown {
        max-height: 250px;
    }
}

@media (max-width: 480px) {
    .current-language {
        font-size: 14px;
        padding: 8px 12px;
    }

    .language-item img {
        width: 18px;
        height: 18px;
    }

    .language-item span {
        font-size: 12px;
    }
    .login-btns {
        display: none;
    }
}

/* ================================================== header css===================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Martel+Sans:wght@200;300;400;600;700;800;900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

/* --------------- Menu --------------- */

.navbar {
    position: absolute;
    left: 0;
    top: 0px;
    margin: 0;
    width: 100%;
    background: #ffffff00;
    z-index: 1;
    padding: 20px 0;
}

.navbar.nav-scroll {
    padding: 0;
    position: fixed;
    top: -80px;
    padding: 15px 0;
    -webkit-transition: -webkit-transform 0.8s;
    transition: -webkit-transform 0.8s;
    -o-transition: transform 0.8s;
    transition: transform 0.8s;
    transition: transform 0.8s, -webkit-transform 0.8s;
    -webkit-transform: translateY(80px);
    -ms-transform: translateY(80px);
    transform: translateY(80px);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 20;
}

.navbar-expand-lg .navbar-collapse {
    justify-content: center;
}

.navbar .logo {
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: white;
}

.navbar .logo img {
    width: 7rem;
}

.navbar .navbar-nav {
    padding: 15px 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    margin-left: 15px;
    background: white;
    margin-bottom: 0;
}

.navbar .navbar-nav .nav-link {
    padding: 5px 20px;
    border-radius: 30px;
    font-size: 18px;
    color: black;
}

.navbar .navbar-nav .nav-link.active {
    background: rgba(255, 255, 255, 0.1);
}

.butn {
    padding: 7px 30px;
    background: #1b65af;
    color: #ffffff;
    margin-right: 15px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 5px;
}

.butn span {
    color: white;
}

a.butn.btn-2.butn-rounded {
    padding: 7px 30px;
    background: linear-gradient(
        30deg,
        #de9f17 2%,
        #cf9a15 31%,
        #fff68a 68%,
        #ffcf45 96%
    );
    color: #000000;
    margin-right: 15px;
    font-size: 16px;
    border-radius: 5px;
}

a.butn.btn-2.butn-rounded span {
    color: black;
}

 
/* ==========================================header lNG================== */

#loading {
    background-color: #fff;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 999999;
    margin-top: 0px;
    top: 0px;
}
#loading-center {
    position: relative;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.preloader {
    position: relative;
    background: url("../imgs/logo/logo.png") no-repeat center;
    background-size: 90px;
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.preloader::after {
    position: absolute;
    content: "";
    top: 0px;
    left: 0;
    transform: translateX(-50px);
    border-top: 2px solid #0c1387;
    border-radius: 50%;
    width: 150px;
    height: 150px;
    animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ============================================header css=============================== */

/* Header Base */
.custom-header {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 999;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* On Scroll Effect */
.custom-header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

/* Container */
.custom-container {
    max-width: 1300px;
    margin: auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.custom-logo img {
    height: 50px;
    transition: transform 0.3s ease;
}
.custom-logo img:hover {
    transform: scale(1.05);
}

/* Navbar */
.custom-navbar {
    display: flex;
}

.custom-nav-list {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 24px;
}

/* Nav Links */
.custom-nav-link {
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    color: #222;
    padding: 12px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    transition: color 0.3s ease;
}

.custom-nav-link:hover {
    color: #0071ff;
}

/* Add a small underline hover effect */
.custom-nav-link::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #0071ff;
    transition: width 0.3s ease;
}
.custom-nav-link:hover::after {
    width: 100%;
}

/* Down Arrow Styling */
.custom-arrow {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-left: 2px solid #555;
    border-bottom: 2px solid #555;
    transform: rotate(-45deg);
    transition: transform 0.3s ease;
}
.custom-dropdown.active .custom-arrow {
    transform: rotate(135deg);
}

/* Dropdown Menu */
.custom-dropdown {
    position: relative;
}

.custom-dropdown-menu {
    position: absolute;
    top: 90%;
    left: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    display: none;
    flex-direction: column;
    min-width: 230px;

    padding: 8px 0;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 1000;
}

.custom-dropdown-menu li a {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: background 0.3s ease, padding-left 0.3s ease;
}

/* Hover effect for dropdown items */
.custom-dropdown-menu li a:hover {
    background: rgba(0, 113, 255, 0.08);
    padding-left: 22px;
    color: #0071ff;
}

/* Show dropdown on hover for desktop */
.custom-dropdown:hover .custom-dropdown-menu {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

/* Divider inside dropdown */
.custom-dropdown-menu hr {
    margin: 8px 0;
    border: none;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
}

/* Dropdown headings */
.custom-dropdown-menu h6 {
    font-size: 13px;
    color: #777;
    font-weight: 600;
    padding: 6px 16px;
    text-transform: uppercase;
}

/* Mobile Menu Toggle */
.custom-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 1001;
}

.custom-menu-toggle span {
    width: 28px;
    height: 3px;
    background: #333;
    transition: 0.3s;
}

/* Rotate burger when active */
.custom-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translateY(8px);
}
.custom-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}
.custom-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translateY(-8px);
}

/* Overlay */
.popup-overlay {
    display: none; /* hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* dark background */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.popup-content {
    background: linear-gradient(
        30deg,
        #de9f17 2%,
        #cf9a15 31%,
        #fff68a 68%,
        #ffcf45 96%
    );
    padding: 7px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: #000;
    background: linear-gradient(135deg, #de9f17, #cf9a15, #fff68a, #ffcf45);
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 33px;
    text-align: center;
}

.popup-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .pos-center {
        left: 40%;
    }

    .header-area.style-1 .header-area__inner {
        padding: 0px 20px;
    }

    .custom-nav-list {
        gap: 10px;
    }

    .main-menu li a {
        font-size: 16px;
        padding: 10px 10px;
    }
}

/* Responsive Styles */
@media (max-width: 991px) {
    .header__navicon.d-xl-none i {
        font-size: 26px !important;
    }
    .custom-menu-toggle {
        display: flex;
    }

    .custom-navbar {
        position: absolute;
        top: 70px;
        left: -100%;
        background: #fff;
        width: 100%;
        flex-direction: column;
        transition: left 0.3s ease;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        padding-bottom: 15px;
    }

    .custom-navbar.active {
        left: 0;
    }

    .custom-nav-list {
        flex-direction: column;
        gap: 0;
        width: 100%;
        align-items: self-start;
    }

    .custom-nav-link {
        padding: 15px;
        width: 100%;
        justify-content: space-between;
    }

    /* Dropdowns on mobile */
    .custom-dropdown-menu {
        position: static;
        box-shadow: none;
        border-radius: 0;
        background: #f8f9ff;
        padding: 0;
        display: none;
        opacity: 1;
        transform: translateY(0);
        transition: none;
        width: 100%;
    }

    .custom-dropdown.active .custom-dropdown-menu {
        display: flex;
    }

    .custom-dropdown-menu li a {
        padding: 14px 20px;
        font-size: 15px;
        width: 100%;
        text-transform: capitalize;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hero-area-inner {
        height: 33vh;
    }

    .hero-area-inner .hero-title {
        font-size: 26px;
        line-height: 38px !important;
        margin: 0;
    }

    .hero-content {
        padding: 9rem 0px 0;
    }

    .features-area .features-wrapper {
        margin-top: 20px;
        gap: 10px;
    }

    .feature-box {
        padding: 10px 16px 16px;
    }

    .feature-box .title {
        font-size: 14px;
    }

    .feature-box .wc-btn {
        margin-top: 6px !important;
        font-size: 13px;
    }

    .key-feature-area .key-items {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .key-feature-area .key-item {
        max-width: 100%;
        padding: 10px;
        height: auto;
    }

    .feature-item .text {
        padding-bottom: 20px;
        text-align: left;
    }

    .feature-item .title {
        max-width: 100%;
        padding-bottom: 0;
        text-align: left;
    }
    .feature-item .text {
        padding-bottom: 20px;
        text-align: left;
    }
}

@media (max-width: 767px) {
    .offcanvas-3__area .wc-btn-primary {
        padding: 12px 30px;
        font-size: 15px;
    }

    .hide-mobile {
        display: none;
    }

    .header-area.style-1 .header-area__inner {
        padding: 0px 10px;
    }
    .header__logo img {
        width: 100px;
        padding: 0;
    }

    .header-area.style-1 .wc-btn-primary {
        padding: 12px 15px;
        font-size: 16px;
    }

    .header__navicon.d-xl-none .fa-solid,
    .fas {
        font-size: 18px;
        color: #a51931;
    }

    .user-area-inner .wc-btn-primary {
        padding: 13px 35px;
        font-size: 14px;
    }

    .footer-area.style-2 .footer-nav-list li {
        font-size: 14px;
        line-height: 26px;
    }

    .footer-area.style-2 .footer-nav-list {
        margin-top: 15px;
    }

    .footer-area.style-2 .footer-logo img {
        max-height: 55px;
        margin-bottom: 0.5rem;
    }

    .custom-dropdown-menu li a img {
        width: 20px;
        border-radius: 50%;
    }
}

.custom-dropdown-menu {
  display: none;
  padding-left: 15px;
}

.custom-dropdown.open > .custom-dropdown-menu {
  display: block;
}