@import"https://fonts.googleapis.com/css2?family=Kanit: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&display=swap";

@import"https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap";

@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=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap";

@import"https://fonts.googleapis.com/css2?family=Khand:wght@300;400;500;600;700&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=Space+Grotesk:wght@300..700&display=swap";



:root {

    --primary: #121212;

    --secondary: #555555;

    --border: rgba(18, 18, 18, 0.08);

    --theme: #121212;

    --black: #121212;

    --black-2: #555555;

    --white: #FFFFFF;

    --white-2: #999999;

    --action: #FFCD4D
}



:root .dark {

    --primary: #ffffff;

    --secondary: #999999;

    --border: rgba(255, 255, 255, 0.08)
}



.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_kanit: "Kanit", sans-serif;

    --font_awesome: "Font Awesome 6 Free"

}



* {

    margin: 0;

    padding: 0
}



body {

    font-family: var(--font_kanit);

    line-height: 1
}



html {

    scroll-behavior: smooth
}



h1,

h2,

h3,

h4,

h5,

h6 {

    padding: 0;

    margin: 0;

    color: var(--primary)
}



ul,

ol {

    padding: 0;

    margin: 0
}



li {

    list-style: none
}



a {

    text-decoration: none;

    transition: all .3s;

    color: inherit
}



a:hover {

    color: var(--secondary);
}



button {

    background-color: rgba(0, 0, 0, 0);

    border: 0
}



p {

    padding: 0;

    margin: 0;

    line-height: 1.41;

    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: "recoleta";

    src: url("../fonts/recoleta/Latinotype - Recoleta Medium.otf");

    font-display: swap
}



@font-face {

    font-family: "beatricetrial";

    src: url("../fonts/Beatrice/BeatriceTRIAL-Regular-BF64829e8f591fb.ttf");

    font-weight: 400;

    font-display: swap
}



@font-face {

    font-family: "beatricetrial";

    src: url("../fonts/Beatrice/BeatriceTRIAL-Medium-BF64829e8f63463.ttf");

    font-weight: 500;

    font-display: swap
}



@font-face {

    font-family: "getaway";

    src: url("../fonts/getaway/getaway.otf");

    font-display: swap
}



@font-face {

    font-family: "canelatrial";

    src: url("../fonts/Canela-Medium-Trial/Canela-Thin-Trial.otf");

    font-display: swap
}



@font-face {

    font-family: "bonvivant";

    src: url("../fonts/BonVivant/BonVivant-Regular.ttf");

    font-display: swap
}



:root {

    --font_recoleta: "recoleta";

    --font_teko: "Teko", sans-serif;

    --font_dmsans: "DM Sans", sans-serif;

    --font_plusjakartasans: "Plus Jakarta Sans", sans-serif;

    --font_beatricetrial: "beatricetrial";

    --font_khand: "Khand", sans-serif;

    --font_getaway: "getaway";

    --font_instrumentsans: "Instrument Sans", sans-serif;

    --font_spacegrotesk: "Space Grotesk", sans-serif;

    --font_canelatrial: "canelatrial";

    --font_bonvivant: "bonvivant"

}



.font-heading-recoleta-medium h1,

.font-heading-recoleta-medium h2,

.font-heading-recoleta-medium h3,

.font-heading-recoleta-medium h4,

.font-heading-recoleta-medium h5,

.font-heading-recoleta-medium h6 {

    font-family: var(--font_recoleta);

    font-weight: 500;

    line-height: 1.05
}



.font-heading-teko-bold h1,

.font-heading-teko-bold h2,

.font-heading-teko-bold h3,

.font-heading-teko-bold h4,

.font-heading-teko-bold h5,

.font-heading-teko-bold h6 {

    font-family: var(--font_teko);

    font-weight: 400;

    line-height: .94
}



.font-heading-dmsans-medium h1,

.font-heading-dmsans-medium h2,

.font-heading-dmsans-medium h3,

.font-heading-dmsans-medium h4,

.font-heading-dmsans-medium h5,

.font-heading-dmsans-medium h6 {

    font-family: var(--font_dmsans);

    font-weight: 500;

    line-height: 1
}



.font-heading-plusjakartasans-regular h1,

.font-heading-plusjakartasans-regular h2,

.font-heading-plusjakartasans-regular h3,

.font-heading-plusjakartasans-regular h4,

.font-heading-plusjakartasans-regular h5,

.font-heading-plusjakartasans-regular h6 {

    font-family: var(--font_plusjakartasans);

    font-weight: 400;

    line-height: 1
}



.font-heading-plusjakartasans-regular-2 h1,

.font-heading-plusjakartasans-regular-2 h2,

.font-heading-plusjakartasans-regular-2 h3,

.font-heading-plusjakartasans-regular-2 h4,

.font-heading-plusjakartasans-regular-2 h5,

.font-heading-plusjakartasans-regular-2 h6 {

    font-family: var(--font_plusjakartasans);

    font-weight: 400;

    line-height: 1.08
}



.font-heading-beatricetrial-regular h1,

.font-heading-beatricetrial-regular h2,

.font-heading-beatricetrial-regular h3,

.font-heading-beatricetrial-regular h4,

.font-heading-beatricetrial-regular h5,

.font-heading-beatricetrial-regular h6 {

    font-family: var(--font_beatricetrial);

    font-weight: 400;

    line-height: 1.07
}



.font-heading-beatricetrial-regular-2 h1,

.font-heading-beatricetrial-regular-2 h2,

.font-heading-beatricetrial-regular-2 h3,

.font-heading-beatricetrial-regular-2 h4,

.font-heading-beatricetrial-regular-2 h5,

.font-heading-beatricetrial-regular-2 h6 {

    font-family: var(--font_beatricetrial);

    font-weight: 400;

    line-height: 1.08
}



.font-heading-beatricetrial-medium h1,

.font-heading-beatricetrial-medium h2,

.font-heading-beatricetrial-medium h3,

.font-heading-beatricetrial-medium h4,

.font-heading-beatricetrial-medium h5,

.font-heading-beatricetrial-medium h6 {

    font-family: var(--font_beatricetrial);

    font-weight: 500;

    line-height: 1.08
}



.font-heading-khand-bold h1,

.font-heading-khand-bold h2,

.font-heading-khand-bold h3,

.font-heading-khand-bold h4,

.font-heading-khand-bold h5,

.font-heading-khand-bold h6 {

    font-family: var(--font_khand);

    font-weight: 700;

    line-height: .88
}



.font-heading-instumentsans-medium h1,

.font-heading-instumentsans-medium h2,

.font-heading-instumentsans-medium h3,

.font-heading-instumentsans-medium h4,

.font-heading-instumentsans-medium h5,

.font-heading-instumentsans-medium h6 {

    font-family: var(--font_instrumentsans);

    font-weight: 500;

    line-height: 1
}



.font-heading-instumentsans-semibold h1,

.font-heading-instumentsans-semibold h2,

.font-heading-instumentsans-semibold h3,

.font-heading-instumentsans-semibold h4,

.font-heading-instumentsans-semibold h5,

.font-heading-instumentsans-semibold h6 {

    font-family: var(--font_instrumentsans);

    font-weight: 600;

    line-height: 1
}



.font-heading-spacegrotesk-bold h1,

.font-heading-spacegrotesk-bold h2,

.font-heading-spacegrotesk-bold h3,

.font-heading-spacegrotesk-bold h4,

.font-heading-spacegrotesk-bold h5,

.font-heading-spacegrotesk-bold h6 {

    font-family: var(--font_spacegrotesk);

    font-weight: 700;

    line-height: 1
}



.font-heading-canelatrial-thin h1,

.font-heading-canelatrial-thin h2,

.font-heading-canelatrial-thin h3,

.font-heading-canelatrial-thin h4,

.font-heading-canelatrial-thin h5,

.font-heading-canelatrial-thin h6 {

    font-family: var(--font_canelatrial);

    font-weight: 300;

    line-height: 1.2
}



.cf_parallax_image {

    overflow: hidden
}



@keyframes wcBubble {

    0% {

        scale: 1
    }



    50% {

        scale: 1.5
    }



    100% {

        scale: 1
    }

}



@keyframes wcZoom {

    0% {

        scale: 1
    }



    50% {

        scale: .5
    }



    100% {

        scale: 1
    }

}



@keyframes wcZoom_2 {

    0% {

        scale: 1
    }



    50% {

        scale: .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)
    }

}



.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
}



::-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
}



.dir-rtl .pagination.style-1 li a img {

    transform: rotate(180deg)
}



.pagination.style-1 li a.current {

    color: #999
}



.register-form-box {

    background-color: var(--white);

    border-radius: 30px;

    width: 420px;

    padding: 70px 45px 80px;

    position: relative;

    text-align: center
}



@media only screen and (max-width: 767px) {

    .register-form-box {

        margin: 0 10px;

        padding: 50px 25px 60px;

        width: calc(100% - 20px)
    }

}



.register-form-box .close-btn {

    width: 45px;

    height: 45px;

    border: 1px solid var(--border);

    border-radius: 50%
}



.register-form-box .btn-wrapper {

    position: absolute;

    right: 10px;

    top: 10px
}



.register-form-box .title {

    font-size: 30px
}



.register-form-box .title span {

    font-weight: 400;

    color: var(--primary)
}



.register-form-box .icon {

    margin-top: 20px;

    margin-bottom: 45px
}



.register-form-box .input-field input {

    width: 100%;

    height: 60px;

    border: 1px solid var(--border);

    border-radius: 30px;

    padding: 0 30px;

    outline: none
}



.register-form-box .input-field input:focus {

    border-color: var(--theme)
}



.register-form-box .input-field:not(:first-child) {

    margin-top: 12px
}



.register-form-box .policy-field {

    margin-top: 20px;

    margin-bottom: 42px;

    display: flex;

    gap: 10px;

    align-items: flex-start
}



.register-form-box .policy-field label {

    font-size: 14px
}



.register-form-box .policy-field label a {

    font-weight: 600;

    text-decoration: underline
}



.register-form-box .note {

    margin-top: 15px;

    text-align: start
}



.register-form-box .note p {

    font-size: 14px
}



.register-form-box .note p a {

    font-weight: 600;

    text-decoration: underline
}



.register-form-box button {

    width: 100%
}



.register-form-box .alternative-title {

    font-size: 16px;

    position: relative;

    margin-top: 38px
}



.register-form-box .alternative-title::before {

    position: absolute;

    content: "";

    width: 100%;

    height: 1px;

    background-color: var(--border);

    left: 0;

    top: 50%;

    transform: translateY(-50%)
}



.register-form-box .alternative-title span {

    padding: 0 18px;

    background-color: var(--white);

    display: inline-block;

    position: relative
}



.register-form-box .social-links {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    margin-top: 37px
}



.register-form-box .social-links a {

    width: 60px;

    height: 60px;

    background-color: #f5f5f5;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    color: var(--primary)
}



.register-form-box .social-links a:hover {

    background-color: var(--theme)
}



.login-form-box {

    background-color: var(--white);

    border-radius: 30px;

    width: 420px;

    padding: 70px 45px 80px;

    position: relative;

    text-align: center
}



@media only screen and (max-width: 767px) {

    .login-form-box {

        margin: 0 10px;

        padding: 50px 25px 60px;

        width: calc(100% - 20px)
    }

}



.login-form-box .close-btn {

    width: 45px;

    height: 45px;

    border: 1px solid var(--border);

    border-radius: 50%
}



.login-form-box .btn-wrapper {

    position: absolute;

    right: 10px;

    top: 10px
}



.login-form-box .title {

    font-size: 30px
}



.login-form-box .title span {

    font-weight: 400;

    color: var(--primary)
}



.login-form-box .icon {

    margin-top: 20px;

    margin-bottom: 45px
}



.login-form-box .input-field input {

    width: 100%;

    height: 60px;

    border: 1px solid var(--border);

    border-radius: 30px;

    padding: 0 30px;

    outline: none
}



.login-form-box .input-field input:focus {

    border-color: var(--theme)
}



.login-form-box .input-field:not(:first-child) {

    margin-top: 12px
}



.login-form-box .policy-field {

    margin-top: 15px;

    margin-bottom: 42px;

    display: flex;

    gap: 10px;

    align-items: flex-start
}



.login-form-box .policy-field label {

    font-size: 14px
}



.login-form-box .policy-field label a {

    font-weight: 600;

    text-decoration: underline
}



.login-form-box .note {

    margin-top: 15px;

    text-align: start
}



.login-form-box .note p {

    font-size: 14px
}



.login-form-box .note p a {

    font-weight: 600;

    text-decoration: underline
}



.login-form-box button {

    width: 100%
}



.login-form-box .forget-password {

    font-size: 14px;

    color: var(--theme);

    margin-left: auto
}



.pos-abs {

    position: absolute
}



.header-area {

    transition: .3s
}



.header-area.sticky {

    position: fixed !important;

    background-color: var(--white);

    z-index: 9999
}



.dark .header-area.sticky {

    background-color: #121212
}



.header-area.sticky .header-area__inner {

    height: 70px !important
}



.header-area.sticky button i {

    color: var(--primary)
}



.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
}



.form-search input {

    width: 100%;

    height: 55px;

    background: rgba(0, 0, 0, 0);

    border: 0;

    color: var(--white)
}



.form-search input:focus {

    outline: 0
}



.form-search {

    display: flex;

    gap: 10px;

    border: 1px solid #19242b;

    border-radius: 70px;

    padding: 0 15px
}



.form-search button i {

    color: var(--white)
}



.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)
}



@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
    }

}



.circle-text {

    width: 140px;

    height: 140px;

    position: relative;

    border-radius: 100px;

    background-color: rgba(0, 0, 0, 0);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 14px;

    overflow: hidden
}



@media only screen and (max-width: 991px) {

    .circle-text {

        width: 120px;

        height: 120px
    }

}



.circle-text .text {

    animation: spinner 5s infinite linear;

    padding: 2px
}



.circle-text .icon {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%)
}



.circle-text:before {

    position: absolute;

    content: "";

    width: 100%;

    height: 100%;

    border: 37px solid rgba(0, 0, 0, 0);

    border-radius: 50%
}



.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
}



.has-top-line {

    position: relative;

    padding-top: 10px
}



.has-top-line:before {

    position: absolute;

    content: "";

    width: 100%;

    height: 1px;

    background-color: currentColor;

    top: 0;

    left: 0
}



.has-bottom-line {

    position: relative;

    padding-bottom: 10px
}



.has-bottom-line:after {

    position: absolute;

    content: "";

    width: 100%;

    height: 1px;

    background-color: currentColor;

    bottom: 0;

    left: 0
}



.has-left-line {

    position: relative;

    padding-inline-start: 35px;

    display: inline-block
}



.has-left-line:before {

    position: absolute;

    content: "";

    width: 30px;

    height: 1px;

    background-color: currentColor;

    inset-inline-start: 0;

    top: 50%;

    transform: translateY(-50%)
}



.has-right-line {

    position: relative;

    padding-inline-end: 35px;

    display: inline-block
}



.has-right-line:after {

    position: absolute;

    content: "";

    width: 30px;

    height: 1px;

    background-color: currentColor;

    inset-inline-end: 0;

    top: 50%;

    transform: translateY(-50%)
}



.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 .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;

    z-index: 1
}



.lines {

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    display: flex;

    justify-content: space-between;

    z-index: -1
}



.lines .line {

    width: 1px;

    height: 100%;

    background-color: var(--border);

    display: inline-block;

    position: relative;

    z-index: 1
}



.wc-btn-icon i {

    transform: rotate(-45deg);

    transition: all .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)
}



.list-check li {

    position: relative;

    padding-inline-start: 30px;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.4;

    margin-bottom: 10px
}



.list-check li::before {

    content: "";

    position: absolute;

    inset-inline-start: 0;

    background-image: url("../imgs/electrician/check-mark.webp");

    background-repeat: no-repeat;

    width: 14px;

    height: 14px;

    top: 4px;

    transform: rotateY(0deg)
}



.dir-rtl .list-check li::before {

    transform: rotateY(180deg)
}



.list-check li:last-child {

    margin-bottom: 0
}



.list-plus li {

    position: relative;

    padding-inline-start: 30px;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.4;

    display: inline-block;

    width: 100%
}



.list-plus li::before {

    content: "+";

    position: absolute;

    inset-inline-start: 0;

    top: -10px;

    font-size: 30px;

    font-weight: 300;

    line-height: 1
}



.list-plus li:not(:last-child) {

    margin-bottom: 10px
}



.pos-center {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 1
}



.pagination-with-dash {

    font-size: 14px;

    display: flex;

    gap: 10px;

    color: var(--primary);

    align-items: center
}



.pagination-with-dash .dash {

    width: 100px;

    height: 1px;

    background-color: var(--primary)
}



.pagination-with-dash .swiper-pagination-current {

    display: flex;

    gap: 5px;

    align-items: center
}



.pagination-with-dash .swiper-pagination-total {

    display: flex;

    gap: 5px;

    align-items: center
}



.wcf__toggle_switcher .slide-toggle-wrapper {

    display: flex;

    justify-content: center
}



.wcf__toggle_switcher .slide-toggle-btn {

    --switcher-width: 40px;

    --switcher-border-width: 2px;

    --switcher-indicator-width: 16px;

    background-color: #f0f7f8;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    -webkit-user-select: none;

    -moz-user-select: none;

    user-select: none
}



.wcf__toggle_switcher .slide-toggle-btn input {

    display: none
}



.wcf__toggle_switcher .before_label,

.wcf__toggle_switcher .after_label {

    cursor: pointer;

    font-size: 18px;

    color: var(--primary)
}



.wcf__toggle_switcher .toggle-pane {

    display: none
}



.wcf__toggle_switcher .toggle-pane.show {

    display: block
}



.wcf__toggle_switcher.style-1 .switcher {

    display: inline-block;

    width: var(--switcher-width);

    height: 20px;

    background-color: #999;

    border: var(--switcher-border-width) solid #999;

    border-radius: 10px;

    position: relative;

    cursor: pointer
}



.wcf__toggle_switcher.style-1 .switcher::before {

    content: "";

    position: absolute;

    top: 50%;

    left: 0;

    width: var(--switcher-indicator-width);

    height: var(--switcher-indicator-width);

    background-color: #fff;

    border-radius: 50%;

    transition: transform .3s;

    transform: translate(0px, -50%)
}



.wcf__toggle_switcher.style-1 input:checked+.switcher::before {

    transform: translate(calc(var(--switcher-width) - (var(--switcher-indicator-width) + 2 * var(--switcher-border-width))), -50%)
}



.wcf__toggle_switcher.style-1 input:checked+.switcher {

    background-color: #000;

    border-color: #000
}



.wcf__toggle_switcher.style-2 .before_label,

.wcf__toggle_switcher.style-2 .after_label {

    padding: 22px 38px;

    position: relative;

    z-index: 2;

    font-size: 16px;

    line-height: 1;

    color: var(--primary)
}



.wcf__toggle_switcher.style-2 .before_label:after,

.wcf__toggle_switcher.style-2 .after_label:after {

    content: "";

    width: 100%;

    height: 100%;

    border-radius: 60px;

    position: absolute;

    left: 0;

    top: 0;

    background-color: var(--theme);

    z-index: -1;

    opacity: 0;

    visibility: hidden;

    transition: transform .3s
}



.wcf__toggle_switcher.style-2 .before_label.active,

.wcf__toggle_switcher.style-2 .after_label.active {

    color: var(--primary)
}



.wcf__toggle_switcher.style-2 .before_label.active:after,

.wcf__toggle_switcher.style-2 .after_label.active:after {

    opacity: 1;

    visibility: visible;

    transform: translatex(0)
}



.wcf__toggle_switcher.style-2 .before_label:after {

    transform: translatex(100%)
}



.wcf__toggle_switcher.style-2 .after_label:after {

    transform: translatex(-100%)
}



.wcf__toggle_switcher.style-2 .slide-toggle-btn {

    gap: 0;

    border-radius: 60px
}



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
    }

}



@media only screen and (max-width: 767px) {

    html {

        --container-max-widths: 540px
    }

}



body {

    background-color: #f5f5f5;

    color: var(--secondary)
}



.dark body {

    background-color: #121212
}



.body-wrapper {

    background-color: var(--white);

    overflow: hidden
}



.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: 1px;

    text-underline-offset: 4px
}



.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
}



.line-divider-sm {

    height: .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 .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 .5s;

    background-color: currentColor
}



.menu-hover-default li a:hover {

    color: var(--primary)
}



.menu-hover-space li a:hover {

    letter-spacing: 1px
}



.blog-img-leftmove img {

    transform: scale(1.1);

    transition: all .5s
}



.blog-img-leftmove:hover img {

    transform: scale(1.1) translateX(4%)
}



.blog-img-zoom {

    overflow: hidden
}



.blog-img-zoom img {

    transform: scale(1);

    transition: all 1s
}



.blog-img-zoom:hover img {

    transform: scale(1.1)
}



.anim_img_zoom img {

    transform: scale(1);

    transition: all 1s
}



.anim_img_zoom:hover img {

    transform: scale(1.1)
}



.title-hover-flip {

    overflow: hidden;

    perspective: 1000px
}



.title-hover-flip strong {

    font-weight: 400;

    position: relative;

    display: inline-block;

    transition: transform .5s;

    transform-origin: 50% 0;

    transform-style: preserve-3d
}



.title-hover-flip strong:before {

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    height: 100%;

    content: attr(data-hover);

    transition: all .5s;

    transform: rotateX(-90deg);

    transform-origin: 50% 0
}



.title-hover-flip:hover strong {

    transform: rotateX(90deg) translateY(-22px)
}



.service-hover-default:hover {

    background-color: var(--white-6)
}



.service-rollover-right {

    position: relative;

    transition: all .5s
}



.service-rollover-right::after {

    position: absolute;

    content: "";

    width: 0%;

    height: 100%;

    top: 0;

    left: 0;

    background-color: var(--white-6);

    transition: all .5s cubic-bezier(0.42, 0, 0.58, 1)
}



.service-rollover-right:hover::after {

    width: 100%;

    left: auto;

    right: 0%
}



.service-rollover-left {

    position: relative;

    transition: all .5s
}



.service-rollover-left::after {

    position: absolute;

    content: "";

    width: 0%;

    height: 100%;

    top: 0;

    right: 0;

    background-color: var(--white-6);

    transition: all .3s cubic-bezier(0.42, 0, 0.58, 1);

    z-index: -1
}



.service-rollover-left:hover::after {

    width: 100%;

    right: auto;

    left: 0%
}



.service-rollover-top {

    position: relative;

    transition: all .5s
}



.service-rollover-top::after {

    position: absolute;

    content: "";

    width: 100%;

    height: 0%;

    left: 0;

    bottom: 0;

    background-color: var(--white-6);

    transition: all .5s cubic-bezier(0.42, 0, 0.58, 1)
}



.service-rollover-top:hover::after {

    height: 100%;

    bottom: auto;

    top: 0%
}



.service-rollover-bottom {

    position: relative;

    transition: all .5s
}



.service-rollover-bottom::after {

    position: absolute;

    content: "";

    width: 100%;

    height: 0%;

    top: 0;

    left: 0;

    background-color: var(--white-6);

    transition: all .5s cubic-bezier(0.42, 0, 0.58, 1)
}



.service-rollover-bottom:hover::after {

    height: 100%;

    top: auto;

    bottom: 0%
}



.container-preloader {

    align-items: center;

    cursor: none;

    display: flex;

    height: 100%;

    justify-content: center;

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    z-index: 900
}



.container-preloader .animation-preloader {

    position: absolute;

    z-index: 100
}



.container-preloader .animation-preloader .spinner {

    animation: spinner 1s infinite linear;

    border-radius: 50%;

    height: 9em;

    width: 9em;

    border: 10px solid var(--white);

    border-top-color: var(--primary);

    margin: 0 auto 3.5em auto
}



@media only screen and (max-width: 767px) {

    .container-preloader .animation-preloader .spinner {

        margin: 0 auto .2em auto
    }

}



.container-preloader .animation-preloader .txt-loading {

    font: bold 5em "Montserrat", sans-serif;

    text-align: center;

    -webkit-user-select: none;

    -moz-user-select: none;

    user-select: none
}



.container-preloader .animation-preloader .txt-loading .characters {

    color: var(--white);

    position: relative;

    display: inline-block
}



.dark .container-preloader .animation-preloader .txt-loading .characters {

    color: rgba(0, 0, 0, .2)
}



@media only screen and (max-width: 767px) {

    .container-preloader .animation-preloader .txt-loading .characters {

        font-size: 50px
    }

}



.container-preloader .animation-preloader .txt-loading .characters:before {

    color: var(--primary);

    content: attr(data-text);

    animation: characters 4s infinite;

    left: 0;

    top: 0;

    opacity: 0;

    position: absolute;

    transform: rotateY(-90deg)
}



.container-preloader .animation-preloader .txt-loading .characters:nth-child(2):before {

    animation-delay: .2s
}



.container-preloader .animation-preloader .txt-loading .characters:nth-child(3):before {

    animation-delay: .4s
}



.container-preloader .animation-preloader .txt-loading .characters:nth-child(4):before {

    animation-delay: .6s
}



.container-preloader .animation-preloader .txt-loading .characters:nth-child(5):before {

    animation-delay: .8s
}



.container-preloader .animation-preloader .txt-loading .characters:nth-child(6):before {

    animation-delay: 1s
}



.container-preloader .loader-section {

    background-color: var(--black);

    height: 100%;

    position: fixed;

    top: 0;

    width: calc(50% + 1px)
}



.dark .container-preloader .loader-section {

    background-color: var(--white)
}



.container-preloader .loader-section.section-left {

    left: 0
}



.container-preloader .loader-section.section-right {

    right: 0
}



.loaded .animation-preloader {

    opacity: 0;

    transition: .3s ease-out
}



.loaded .loader-section.section-left {

    transform: translateX(-101%);

    transition: .7s .3s all cubic-bezier(0.1, 0.1, 0.1, 1)
}



.loaded .loader-section.section-right {

    transform: translateX(101%);

    transition: .7s .3s all cubic-bezier(0.1, 0.1, 0.1, 1)
}



.scroll__down {

    display: flex;

    gap: 20px;

    align-items: center
}



.scroll__down p {

    font-weight: 500;

    font-size: 14px;

    line-height: 1.9;

    text-transform: uppercase;

    color: var(--white)
}



.scroll__down span {

    width: 66px;

    height: 106px;

    border: 1px solid var(--black-6);

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 89px
}



.scroll__down span i {

    color: var(--white)
}



.scroll__down-wrapper {

    height: 425px;

    display: flex;

    align-items: center;

    justify-content: center
}



@media only screen and (max-width: 1399px) {

    .scroll__down-wrapper {

        height: 380px
    }

}



@media only screen and (max-width: 1199px) {

    .scroll__down-wrapper {

        height: 350px
    }

}



@media only screen and (max-width: 767px) {

    .scroll__down-wrapper {

        height: auto;

        padding: 40px 0
    }

}



.scroll-top {

    width: 50px;

    height: 50px;

    position: fixed;

    right: 15px;

    bottom: 0px;

    z-index: 9999;

    background: var(--white);

    border-radius: 100px;

    mix-blend-mode: exclusion;

    opacity: 0;

    visibility: hidden;

    transition: all .5s
}



.scroll-top.showed {

    opacity: 1;

    visibility: visible;

    bottom: 20px
}



.go-top-writer {

    width: 105px;

    font-size: 16px;

    cursor: pointer;

    text-align: left;

    color: var(--white);

    background-image: url(../imgs/writer/go-top.webp);

    background-position: right center;

    background-repeat: no-repeat;

    right: 16%;

    visibility: hidden;

    opacity: 0;

    z-index: 9;

    transition: all .5s
}



.dark .go-top-writer {

    color: var(--black);

    background-image: url(../imgs/writer/go-top-light.webp)
}



.go-top-writer:hover {

    color: var(--primary)
}



.go-top-writer.showed {

    opacity: 1;

    visibility: visible;

    bottom: 20px
}



@media only screen and (max-width: 767px) {

    .go-top-writer br {

        display: block
    }

}



.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(--black);

    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-flex;

    transition: all .3s
}



.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(--border);

    overflow: hidden;

    transition: all .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 .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: white;

    background-color: var(--primary);

    border: 1px solid var(--primary);

    border-radius: 15px;

    text-transform: capitalize;

    transition: all .3s;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    z-index: 1;

    gap: 30px;

    white-space: nowrap
}



.dark .wc-btn-primary {

    color: var(--black)
}



@media only screen and (max-width: 991px) {

    .wc-btn-primary {

        padding: 16px 25px
    }

}



.wc-btn-primary:hover {

    color: black;

    background-color: var(--primary);

    border-color: var(--primary)
}



.wc-btn-primary.bordered {

    border-color: var(--primary);

    background-color: rgba(0, 0, 0, 0);

    color: var(--primary)
}



.wc-btn-primary.bordered:hover {

    border-color: var(--primary);

    background-color: var(--primary);

    color: var(--white)
}



.dark .wc-btn-primary.bordered:hover {

    color: var(--black)
}



.dir-rtl .wc-btn-primary i {

    transform: rotateY(180deg)
}



.wc-btn-circle {

    text-align: center;

    width: 70px;

    height: 70px;

    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(--white)
}



@media only screen and (max-width: 1199px) {

    .wc-btn-circle {

        width: 50px;

        height: 50px
    }

}



.wc-btn-circle:hover {

    background-color: var(--black);

    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 .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-appointment {

    font-weight: 500;

    font-size: 20px;

    line-height: 24px;

    color: var(--blue-6);

    text-align: center;

    border: 1px solid currentColor;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    height: 215px;

    width: 215px;

    padding: 20px
}



@media only screen and (max-width: 1199px) {

    .wc-btn-appointment {

        width: 200px;

        height: 200px
    }

}



@media only screen and (max-width: 991px) {

    .wc-btn-appointment {

        width: 170px;

        height: 170px;

        font-size: 18px
    }

}



.wc-btn-appointment i {

    font-size: 24px;

    margin-bottom: 10px
}



.wc-btn-appointment:hover {

    color: var(--blue-3)
}



.wc-btn-link {

    font-weight: 500;

    font-size: 14px;

    line-height: 1.7;

    color: var(--white);

    display: inline-block;

    text-transform: uppercase;

    transition: all .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 .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
}



.play_btn_5 {

    height: 100px;

    width: 100px;

    border-radius: 50%;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--white)
}



@media only screen and (max-width: 991px) {

    .play_btn_5 {

        height: 80px;

        width: 80px
    }

}



.play_btn_5:hover {

    border-color: var(--primary)
}



.play_btn_5 i {

    font-size: 20px;

    color: var(--white)
}



.dark .play_btn_5 i {

    color: var(--black)
}



.dark .play_btn_5 img {

    filter: brightness(0)
}



.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
    }

}



.wc-btns-group {

    text-align: center;

    display: flex
}



@media only screen and (max-width: 991px) {

    .wc-btns-group {

        flex-direction: column
    }

}



@media only screen and (max-width: 767px) {

    .wc-btns-group {

        padding: 40px 0
    }



    .wc-btns-group br {

        display: block
    }

}



.wc-btns-group .btn-wrapper a {

    width: 140px;

    height: 140px;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    background: var(--white);

    border-radius: 50%;

    color: var(--black);

    font-weight: 500
}



@media only screen and (max-width: 1199px) {

    .wc-btns-group .btn-wrapper a {

        width: 110px;

        height: 110px
    }

}



.wc-btns-group .btn-wrapper:first-child a {

    margin-inline-end: -15px;

    background-color: var(--primary)
}



@media only screen and (max-width: 991px) {

    .wc-btns-group .btn-wrapper:first-child a {

        margin-inline-end: 0
    }

}



.wc-btns-group .btn-wrapper:first-child a span {

    background-color: var(--white)
}



.wc-btns-group .btn-wrapper:last-child a {

    margin-inline-start: -15px
}



.dark .wc-btns-group .btn-wrapper:last-child a {

    background: var(--black);

    color: var(--white)
}



@media only screen and (max-width: 991px) {

    .wc-btns-group .btn-wrapper:last-child a {

        margin-inline-start: 0;

        margin-top: -15px
    }

}



.wc-btns-group .btn-wrapper:last-child a:hover {

    border: 0
}



.wc-btns-group .btn-wrapper:last-child a span {

    background-color: var(--primary)
}



.wc-btns-group-wrap {

    height: 425px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-bottom: 1px solid var(--black-6)
}



.dark .wc-btns-group-wrap {

    border-color: #f3f2f2
}



@media only screen and (max-width: 1399px) {

    .wc-btns-group-wrap {

        height: 380px
    }

}



@media only screen and (max-width: 1199px) {

    .wc-btns-group-wrap {

        height: 350px
    }

}



@media only screen and (max-width: 767px) {

    .wc-btns-group-wrap {

        height: auto
    }

}



.wc-btns-group a:hover {

    border: 0
}



.wc-btns-group a span {

    background-color: var(--white)
}



.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-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: 14px;

    font-weight: 500;

    letter-spacing: 0;

    color: var(--primary);

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    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: 2px;

    background-color: currentColor;

    transition: .3s
}



.wc-btn-underline i,

.wc-btn-underline img {

    font-size: 10px
}



.dir-rtl .wc-btn-underline i,

.dir-rtl .wc-btn-underline img {

    transform: rotateY(180deg)
}



.wc-btn-normal {

    display: inline-flex;

    position: relative;

    color: var(--secondary);

    text-decoration: none;

    font-size: 18px;

    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 .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 .5s;

    transform: rotateX(-90deg);

    transform-origin: 50% 0;

    text-align: center
}



.wc-btn-group {

    display: flex;

    width: -moz-fit-content;

    width: fit-content
}



.wc-btn-group>*:nth-child(1) {

    transform: scale3d(0.5, 0.5, 1);

    margin-inline-end: -40px
}



.wc-btn-group>*:nth-child(2) {

    transform: scale3d(1, 1, 1)
}



.wc-btn-group>*:nth-child(3) {

    transform: scale3d(1, 1, 1);

    margin-inline-start: 0
}



.wc-btn-group:hover>*:nth-child(1) {

    transform: scale3d(1, 1, 1);

    margin-inline-end: 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-inline-start: -40px
}



@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 .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 .75s;

    opacity: .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 .75s;

    opacity: .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 .75s;

    opacity: .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 .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 .7s steps(22) forwards
}



.btn-hover-mask:hover {

    color: var(--white)
}



.btn-hover-mask:hover::after {

    animation: mask_animation .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 .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 .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 .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 .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 .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 .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 .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%
}



.btn-parallal-border {

    overflow: hidden;

    position: relative;

    transition: all .5s
}



.btn-parallal-border::before {

    position: absolute;

    content: "";

    width: 0%;

    height: 0%;

    bottom: 0;

    left: 0;

    opacity: 0;

    border-bottom: 3px solid var(--primary);

    border-left: 3px solid var(--primary);

    border-radius: 5px;

    transition: all .75s
}



.btn-parallal-border::after {

    position: absolute;

    content: "";

    width: 0%;

    height: 0%;

    top: 0;

    right: 0;

    opacity: 0;

    border-top: 3px solid var(--primary);

    border-right: 3px solid var(--primary);

    border-radius: 5px;

    transition: all .75s
}



.btn-parallal-border:hover {

    border-color: rgba(0, 0, 0, 0);

    color: var(--primary)
}



.btn-parallal-border:hover::before {

    opacity: 1;

    width: 100%;

    height: 100%
}



.btn-parallal-border:hover::after {

    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(--primary)
}



.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%;

    visibility: visible
}



.main-menu li {

    position: relative
}



.main-menu li a {

    display: flex;

    align-items: center;

    font-weight: 400;

    font-size: 16px;

    line-height: 1;

    color: var(--primary);

    padding: 37px 15px;

    text-transform: uppercase
}



.main-menu ul.dp-menu {

    background-color: #232529;

    padding: 18px 0px;

    width: 240px;

    position: absolute;

    inset-inline-start: 10px;

    opacity: 0;

    pointer-events: none;

    z-index: 10;

    transition: all .5s
}



.main-menu ul.dp-menu ul {

    background: #232529;

    padding: 18px 0px;

    width: 230px;

    position: absolute;

    inset-inline-start: calc(100% + 10px);

    top: 0;

    opacity: 0;

    z-index: 10;

    transition: all .5s;

    visibility: hidden
}



.main-menu ul.dp-menu li {

    position: relative;

    padding: 0 25px
}



.main-menu ul.dp-menu li:hover>a {

    color: var(--white);

    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: .5px
}



.main-menu ul.dp-menu li a:after {

    transform: rotate(-90deg);

    margin-left: auto
}



.main-menu ul.dp-menu.col-2 {

    -moz-column-count: 2;

    column-count: 2;

    width: 500px
}

/* 

.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 .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
}



.mega-menu-counter__item {

    text-align: center;

    display: inline-block;

    margin-top: 35%;

    margin-left: 17%;

    position: relative
}



@media only screen and (max-width: 1199px) {

    .mega-menu-counter__item {

        margin: 30px auto 50px
    }

}



.mega-menu-counter__text p {

    font-size: 30px;

    line-height: 28px;

    color: var(--white);

    font-weight: 500
}



.mega-menu-counter__number {

    font-size: 150px;

    font-weight: 600;

    line-height: 1;

    margin-bottom: 24px;

    color: var(--white);

    background: linear-gradient(136deg, #9479FF 0%, #FFA6D6 47.92%, #FFFCE3 100%);

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: rgba(0, 0, 0, 0)
}



@media only screen and (max-width: 1199px) {

    .menu-with-number {

        display: none
    }

}



.menu-with-number li {

    display: inline-block
}



.menu-with-number li a {

    font-weight: 500;

    font-size: 14px;

    line-height: 1.5;

    color: var(--white);

    padding: 34px 40px;

    display: inline-block;

    text-transform: uppercase
}



.menu-with-number li a:hover span {

    color: var(--white)
}



.menu-with-number li a:hover span::before {

    background-color: var(--white)
}



.menu-with-number li a.active span {

    color: var(--white)
}



.menu-with-number li a.active span::before {

    position: absolute;

    content: "";

    width: 35px;

    height: 1px;

    right: 20px;

    top: 50%;

    background-color: var(--white)
}



.menu-with-number li a span {

    display: block;

    font-weight: 500;

    font-size: 12px;

    line-height: 10px;

    text-align: right;

    color: #999;

    position: relative;

    transition: all .5s
}



.menu-with-number li a span::before {

    position: absolute;

    content: "";

    width: 35px;

    height: 1px;

    right: 20px;

    top: 50%;

    transition: all .5s;

    background-color: var(--black-6)
}



.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 .4s ease, box-shadow .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
}



.dark .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand:hover {

    background-color: var(--white-4)
}



.offcanvas__menu-wrapper.mean-container .mean-nav ul li li:first-child {

    border-top: 1px solid var(--black-4)
}



.dark .offcanvas__menu-wrapper.mean-container .mean-nav ul li li:first-child {

    border-color: var(--white-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)
}



.modal__dialog {

    width: 760px;

    max-width: 100%;

    margin-top: 100px
}



@media only screen and (max-width: 991px) {

    .modal__dialog {

        width: 700px;

        margin-top: 80px
    }

}



@media only screen and (max-width: 767px) {

    .modal__dialog {

        width: 350px
    }

}



.modal__content {

    height: 500px
}



@media only screen and (max-width: 767px) {

    .modal__content {

        height: 300px
    }

}



.modal__content iframe {

    width: 100%;

    height: 100%
}



.modal__close {

    position: absolute;

    width: 40px;

    height: 40px;

    top: -15px;

    right: -15px;

    z-index: 9;

    border-radius: 50px;

    font-size: 20px;

    color: var(--white);

    background: var(--black);

    transition: all .3s
}



.modal__close:hover {

    color: var(--primary)
}



.modal__sfluence {

    width: 100%;

    height: 100%;

    padding: 60px
}



@media only screen and (max-width: 767px) {

    .modal__sfluence {

        padding: 20px 10px
    }

}



.modal__sfluence-area {

    width: 100vw;

    height: 100vh;

    background: var(--black);

    position: fixed;

    top: 0;

    left: 0;

    z-index: 9;

    opacity: 0;

    visibility: hidden;

    transition: all .5s;

    transform: scale(0.5)
}



.modal__sfluence-area.showed {

    opacity: 1;

    visibility: visible;

    transform: scale(1)
}



.modal__sfluence-area .close_btn {

    position: absolute;

    width: 60px;

    height: 60px;

    top: 0px;

    right: 20px;

    z-index: 9;

    border-radius: 50px;

    font-size: 30px;

    color: var(--white);

    transition: all .3s;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center
}



.modal__sfluence-area .close_btn:hover {

    color: var(--primary)
}



@media only screen and (max-width: 767px) {

    .modal__sfluence-area .close_btn {

        right: 0
    }

}



.modal__sfluence-area iframe,

.modal__sfluence-area video {

    width: 100%;

    height: 100%
}



@media only screen and (max-width: 767px) {



    .modal__sfluence-area iframe,

    .modal__sfluence-area video {

        height: 300px;

        -o-object-fit: cover;

        object-fit: cover;

        margin-top: 45%
    }

}



.cursor {

    position: fixed;

    pointer-events: none;

    font-weight: 500;

    font-size: 16px;

    line-height: 23px;

    color: var(--var(--white));

    background: var(--black);

    text-transform: capitalize;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100px;

    height: 100px;

    border-radius: 100%;

    transform: translate(-50%, -50%);

    z-index: 999;

    opacity: 0;

    mix-blend-mode: hard-light;

    transition: all .3s
}



.cursor.large {

    width: 180px;

    height: 180px;

    text-align: center;

    font-size: 19px;

    font-weight: 400
}



.cursor1 {

    position: fixed;

    width: 40px;

    height: 40px;

    border: 1px solid var(--primary);

    border-radius: 50%;

    left: 0;

    top: 0;

    pointer-events: none;

    transform: translate(-50%, -50%);

    transition: .15s;

    z-index: 999
}



@media(max-width: 1200px) {

    .cursor1 {

        display: none
    }

}



.cursor2 {

    position: fixed;

    width: 8px;

    height: 8px;

    background-color: var(--primary);

    border-radius: 50%;

    left: 0;

    top: 0;

    pointer-events: none;

    transform: translate(-50%, -50%);

    transition: .2s;

    z-index: 999
}



@media(max-width: 1200px) {

    .cursor2 {

        display: none
    }

}



.cursor-testi {

    position: fixed;

    width: 80px;

    height: 80px;

    background-color: var(--black);

    border-radius: 50%;

    left: 0;

    top: 0;

    pointer-events: none;

    transform: translate(-50%, -50%);

    transition: .2s;

    z-index: 999
}



@media(max-width: 1200px) {

    .cursor-testi {

        display: none
    }

}



@supports(mix-blend-mode: exclusion) {



    .wc-cursor.exclusion,

    .wc-cursor.opaque {

        mix-blend-mode: exclusion
    }

}



@supports(mix-blend-mode: exclusion) {



    .wc-cursor.exclusion:before,

    .wc-cursor.opaque:before {

        background: var(--white)
    }

}



.wc-cursor.normal,

.wc-cursor.text {

    mix-blend-mode: normal
}



.wc-cursor.normal:before,

.wc-cursor.text:before {

    background: currentColor
}



.wc-cursor.inverse {

    color: var(--white)
}



.wc-cursor.visible:before {

    transform: scale(0.2)
}



.wc-cursor.visible.active:before {

    transform: scale(0.23);

    transition-duration: .2s
}



.wc-cursor.pointer:before {

    transform: scale(0.15)
}



.wc-cursor.text:before {

    opacity: .85;

    transform: scale(1.7)
}



.wc-cursor.text.active:before {

    transform: scale(1.6);

    transition-duration: .2s
}



.wc-cursor.opaque:before {

    transform: scale(1.32)
}



.wc-cursor.opaque.active:before {

    transform: scale(1.2)
}



.wc-cursor.sm:before {

    transform: scale(1.25)
}



.wc-cursor.md:before {

    transform: scale(1.5)
}



.wc-cursor.lg:before {

    transform: scale(2)
}



.wc-cursor.xl:before {

    transform: scale(2.5)
}



.wc-cursor.xxl:before {

    transform: scale(3)
}



.wc-cursor.hidden:before {

    transform: scale(0)
}



.color-accent-lilac {

    color: #8d53e9
}



.color-accent-lilac-bg {

    background: #8d53e9
}



.wc-cursor {

    position: fixed;

    top: 0;

    left: 0;

    z-index: 150;

    contain: layout style size;

    pointer-events: none;

    will-change: transform;

    color: var(--primary);

    transition: opacity .3s, color .4s
}



.wc-cursor:before {

    content: "";

    position: absolute;

    top: -24px;

    left: -24px;

    display: block;

    width: 48px;

    height: 48px;

    transform: scale(0);

    background: currentColor;

    border-radius: 50%;

    transition: transform .3s ease-in-out, opacity .1s
}



.wc-cursor-text {

    position: absolute;

    top: -30px;

    left: -30px;

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    transform: scale(0) rotate(10deg);

    opacity: 0;

    color: var(--white);

    font-size: 16px;

    line-height: 20px;

    text-align: center;

    letter-spacing: -0.01em;

    transition: opacity .4s, transform .3s
}



.wc-cursor.text .wc-cursor-text {

    opacity: 1;

    transform: scale(1)
}



@supports(mix-blend-mode: exclusion) {



    .wc-cursor.-exclusion,

    .wc-cursor.-opaque {

        mix-blend-mode: exclusion
    }

}



@supports(mix-blend-mode: exclusion) {



    .wc-cursor.exclusion:before,

    .wc-cursor.opaque:before {

        background: var(--white)
    }

}



.wc-cursor.normal,

.wc-cursor.text {

    mix-blend-mode: normal
}



.wc-cursor.normal:before,

.wc-cursor.text:before {

    background: currentColor
}



.wc-cursor.inverse {

    color: var(--white)
}



.wc-cursor.visible:before {

    transform: scale(0.2)
}



.wc-cursor.visible.active:before {

    transform: scale(0.23);

    transition-duration: .2s
}



.wc-cursor.pointer:before {

    transform: scale(0.15)
}



.wc-cursor.text:before {

    opacity: .85;

    transform: scale(1.7)
}



.wc-cursor.text.active:before {

    transform: scale(1.6);

    transition-duration: .2s
}



.wc-cursor.opaque:before {

    transform: scale(1.32)
}



.wc-cursor.opaque.active:before {

    transform: scale(1.2)
}



.wc-cursor.sm:before {

    transform: scale(1.25)
}



.wc-cursor.md:before {

    transform: scale(1.5)
}



.wc-cursor.lg:before {

    transform: scale(2)
}



.wc-cursor.xl:before {

    transform: scale(2.5)
}



.wc-cursor.xxl:before {

    transform: scale(3)
}



.wc-cursor.xxxl:before {

    transform: scale(3.5)
}



.wc-cursor.hidden:before {

    transform: scale(0)
}



.progress__item p.title,

.progress__item-2 p.title {

    padding: 0;

    font-weight: 500;

    font-size: 15px;

    line-height: 25px;

    color: var(--white);

    padding-bottom: 15px;

    text-transform: uppercase
}



.progress__item-2 {

    padding-bottom: 25px
}



.light .progress__item p.title,

.light .progress__item-2 p.title {

    color: var(--black)
}



.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
}



.dark .cf-cta__btn .wc-btn-default {

    background-color: var(--black);

    color: var(--white)
}



@media only screen and (max-width: 1199px) {

    .cf-cta__btn .wc-btn-default {

        padding: 20px 40px;

        font-weight: 500
    }

}



.dark .cf-cta__btn .wc-btn-default:hover {

    color: var(--black)
}



.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
}



.dark .cf-cta__text p {

    color: #555
}



.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__icon {

    position: fixed;

    width: 50px;

    height: 50px;

    background: var(--white);

    right: 0;

    top: 40%;

    transform: translateY(-50%);

    z-index: 999;

    transition: all .3s;

    mix-blend-mode: exclusion
}



.switcher__icon i {

    color: var(--black)
}



.switcher__icon button {

    font-size: 24px;

    color: var(--black);

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100%;

    width: 100%;

    transition: all .3s
}



.switcher__icon button:hover {

    color: var(--white-2)
}



.switcher__icon button#switcher_open {

    animation: wcSpinner 5s infinite linear
}



.switcher__items {

    width: 280px;

    padding: 50px 30px;

    background: var(--black);

    position: fixed;

    right: -280px;

    top: 40%;

    z-index: 99;

    transform: translateY(-50%);

    font-family: var(--font_primary);

    transition: all .3s
}



.switcher__items .wc-col-2 {

    display: grid;

    grid-template-columns: 1fr 1fr;

    grid-gap: 10px
}



.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: 100%;

    height: 100%;

    padding: 50px 50px 100px;

    z-index: 100000;

    overflow: hidden
}



@media(max-height: 500px) {

    .offcanvas-3__area {

        padding: 40px
    }

}



.offcanvas-3__inner {

    display: grid;

    grid-template-columns: 340px 1fr;

    height: 100%
}



@media only screen and (max-width: 991px) {

    .offcanvas-3__inner {

        grid-template-columns: 260px 1fr
    }

}



@media only screen and (max-width: 767px) {

    .offcanvas-3__inner {

        overflow-y: scroll;

        display: flex;

        flex-direction: column
    }

}



@media(max-height: 500px) {

    .offcanvas-3__inner {

        overflow-y: scroll
    }

}



.offcanvas-3__inner::-webkit-scrollbar {

    width: 0
}



.offcanvas-3__meta li {

    font-size: 18px;

    line-height: 20px;

    color: var(--white);

    text-transform: uppercase
}



.offcanvas-3__meta li:not(:last-child) {

    margin-bottom: 19px
}



.offcanvas-3__meta li a:hover {

    color: var(--secondary)
}



.offcanvas-3__meta-wrapper {

    display: flex;

    flex-direction: column;

    gap: 50px;

    justify-content: space-between
}



.offcanvas-3__social .title {

    font-size: 18px;

    font-weight: 600;

    line-height: 20px;

    color: var(--white);

    text-transform: uppercase;

    margin-bottom: 10px
}



.offcanvas-3__social-links {

    display: flex;

    gap: 20px
}



.offcanvas-3__social-links a {

    font-size: 18px;

    color: var(--white)
}



.offcanvas-3__social-links a:hover {

    color: var(--secondary)
}



.offcanvas-3__menu {

    position: relative;

    width: 100%;

    height: 100%;

    overflow-y: scroll;

    overflow-x: hidden
}



.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: 58px;

    position: relative
}



@media only screen and (max-width: 767px) {

    .offcanvas-3__menu li {

        padding-left: 0
    }

}



.offcanvas-3__menu li:hover>a {

    color: var(--white)
}



.offcanvas-3__menu li:hover:before {

    opacity: 1;

    visibility: visible
}



.offcanvas-3__menu li:before {

    position: absolute;

    content: "";

    width: 17px;

    height: 17px;

    background: var(--white);

    border-radius: 50%;

    border: 4px solid var(--black-2);

    inset-inline-start: 0;

    top: 38%;

    transform: translateY(-50%);

    opacity: 0;

    visibility: hidden;

    transition: .5s
}



@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: 20px
    }

}



.offcanvas-3__menu li a {

    font-size: 120px;

    font-size: 8vh;

    color: var(--secondary);

    text-transform: uppercase;

    line-height: .9;

    position: relative;

    transition: all .5s cubic-bezier(0, 0, 0.23, 1);

    text-decoration: none;

    -webkit-background-clip: text;

    -webkit-text-fill-color: rgba(0, 0, 0, 0);

    background-image: linear-gradient(90deg, #fff, #ddd 50%, #666 0);

    background-size: 200% 100%;

    background-position: 100%;

    transform: perspective(359px) rotateY(-18deg)
}



.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.5vh;

        color: rgba(255, 255, 255, .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 {

    left: 0%;

    opacity: 0;

    visibility: hidden;

    transform: perspective(359px) rotateY(50deg)
}



.offcanvas-3__menu ul li {

    opacity: 0;

    top: -100px;

    position: relative;

    transform: perspective(359px) rotateX(50deg)
}



.offcanvas-3__meta {

    opacity: 0;

    top: -30px;

    position: relative
}



.offcanvas-3__social {

    opacity: 0;

    top: -30px;

    position: relative
}



.close-button {

    width: 70px;

    height: 70px;

    border-radius: 100%;

    background-color: var(--black-2);

    position: relative;

    border: 1px solid #333337;

    transition: all .5s
}



@media only screen and (max-width: 767px) {

    .close-button {

        width: 50px;

        height: 50px
    }

}



.close-button:hover {

    background-color: var(--secondary)
}



.close-button:hover span {

    background-color: var(--primary)
}



.close-button span {

    width: 26px;

    height: 1px;

    display: inline-block;

    background-color: var(--white);

    position: absolute;

    left: 50%;

    top: 50%;

    transition: all .5s
}



@media only screen and (max-width: 767px) {

    .close-button span {

        width: 20px
    }

}



.close-button span:first-child {

    transform: translateX(-50%) rotate(45deg)
}



.close-button span:last-child {

    transform: translateX(-50%) rotate(-45deg)
}



.cf_feature.style-1 .thumb {

    margin-bottom: 50px
}



@media only screen and (max-width: 1199px) {

    .cf_feature.style-1 .thumb {

        margin-bottom: 30px
    }

}



.cf_feature.style-1 .title {

    font-size: 22px;

    font-weight: 700;

    line-height: 1.15;

    margin-bottom: 20px
}



.cf_feature.style-1 .title:hover {

    color: var(--action)
}



.cf_feature.style-1 .text {

    color: var(--primary)
}



.cf_feature.style-1 .btn-wrapper {

    display: none
}



.cf_feature.text-design {

    padding: 60px;

    padding-left: 70px;

    padding-right: 0;

    border-left: 1px solid rgba(18, 18, 18, .06)
}



@media only screen and (max-width: 1199px) {

    .cf_feature.text-design {

        padding-left: 30px
    }

}



@media only screen and (max-width: 991px) {

    .cf_feature.text-design {

        border: 0;

        padding-left: 0
    }

}



@media only screen and (max-width: 767px) {

    .cf_feature.text-design {

        padding-top: 30px;

        padding-bottom: 30px
    }

}



.cf_feature.text-design .thumb {

    margin-bottom: 30px
}



.cf_feature.text-design .title-2 {

    font-size: 30px;

    font-weight: 600;

    line-height: 1.16;

    text-decoration-line: underline;

    margin-bottom: 40px
}



@media only screen and (max-width: 1199px) {

    .cf_feature.text-design .title-2 {

        font-size: 22px;

        margin-bottom: 20px
    }

}



.cf_feature.style-2 {

    padding: 60px;

    border-right: 1px solid rgba(18, 18, 18, .06)
}



@media only screen and (max-width: 1199px) {

    .cf_feature.style-2 {

        padding: 30px
    }

}



@media only screen and (max-width: 767px) {

    .cf_feature.style-2 {

        padding-left: 0
    }

}



.cf_feature.style-2:first-child {

    padding-left: 0
}



.cf_feature.style-2:last-child {

    border-right: 0;

    padding-right: 0
}



.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)
}



.cf_feature.style-3 {

    border-right: 1px solid #f1f1f1;

    border-top: 1px solid #f1f1f1;

    padding: 50px;

    padding-bottom: 0
}



@media only screen and (max-width: 1199px) {

    .cf_feature.style-3 {

        padding: 30px
    }

}



@media only screen and (max-width: 991px) {

    .cf_feature.style-3 {

        flex-basis: 45%;

        border: 0;

        padding-left: 0
    }

}



@media only screen and (max-width: 767px) {

    .cf_feature.style-3 {

        padding-left: 0;

        margin-bottom: 0;

        flex-basis: 100%;

        padding-bottom: 20px
    }

}



.cf_feature.style-3:first-child {

    padding-left: 0
}



.cf_feature.style-3:last-child {

    border-right: 0
}



.cf_feature.style-3:hover .title {

    padding-left: 15px
}



.cf_feature.style-3:hover .title::before {

    left: 0
}



.cf_feature.style-3 .content {

    overflow: hidden
}



.cf_feature.style-3 .count-title {

    color: var(--primary);

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 1;

    margin-bottom: 25px
}



.cf_feature.style-3 .title {

    color: var(--primary);

    font-size: 24px;

    font-weight: 400;

    line-height: 1.25;

    margin-bottom: 25px;

    transition: .3s;

    position: relative
}



.cf_feature.style-3 .title::before {

    content: "";

    position: absolute;

    left: -10px;

    top: 0;

    height: 100%;

    width: 1px;

    background-color: var(--primary)
}



.cf_feature.style-3 .title:hover {

    color: var(--action)
}



.cf_feature.style-3 .text {

    margin-bottom: 100px
}



@media only screen and (max-width: 991px) {

    .cf_feature.style-3 .text {

        margin-bottom: 50px
    }

}



@media only screen and (max-width: 767px) {

    .cf_feature.style-3 .text {

        margin-bottom: 20px
    }

}



.cf_feature.style-3 .btn-underline {

    font-size: 16px;

    font-weight: 600;

    letter-spacing: 0;

    color: var(--primary);

    text-transform: capitalize
}



:root {

    --theme: #C8F31D
}



.section-subtitle {

    font-size: 16px;

    line-height: 1;

    font-weight: 700;

    /* text-transform: uppercase; */

    color: var(--primary);

    display: inline-block
}



.section-title {

    /* text-transform: uppercase; */

    font-size: 80px
}



@media only screen and (max-width: 1919px) {

    .section-title {

        font-size: 65px
    }

}



@media only screen and (max-width: 1199px) {

    .section-title {

        font-size: 50px
    }

}



@media only screen and (max-width: 991px) {

    .section-title {

        font-size: 40px
    }

}



@media only screen and (max-width: 767px) {

    .section-title {

        font-size: 35px
    }

}



.section-title span {

    color: var(--white-2)
}



.dark .section-title span {

    color: #414141
}



.section-spacing {

    padding-top: 140px;

    padding-bottom: 140px
}



@media only screen and (max-width: 1399px) {

    .section-spacing {

        padding-top: 80px;

        padding-bottom: 80px
    }

}



@media only screen and (max-width: 1199px) {

    .section-spacing {

        padding-top: 60px;

        padding-bottom: 60px
    }

}



.section-spacing-top {

    padding-top: 140px
}



@media only screen and (max-width: 1399px) {

    .section-spacing-top {

        padding-top: 80px
    }

}



@media only screen and (max-width: 1199px) {

    .section-spacing-top {

        padding-top: 60px
    }

}



.section-spacing-bottom {

    padding-bottom: 140px
}



@media only screen and (max-width: 1399px) {

    .section-spacing-bottom {

        padding-bottom: 80px
    }

}



@media only screen and (max-width: 1199px) {

    .section-spacing-bottom {

        padding-bottom: 60px
    }

}



@media(min-width: 1600px) {

    .container.large {

        max-width: 1520px
    }

}



.wc-btn-circle {

    width: 170px;

    height: 170px;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    background-color: rgba(0, 0, 0, 0);

    border: 1px solid var(--border);

    border-radius: 50%;

    color: var(--primary);

    font-size: 18px;

    font-weight: 400;

    line-height: 1.05
}



.wc-btn-circle:hover {

    background-color: rgba(0, 0, 0, 0);

    color: var(--white)
}



.dark .wc-btn-circle:hover {

    color: var(--black)
}



.wc-btn-underline {

    text-transform: uppercase
}



.header-area {

    position: absolute;

    top: 0;

    inset-inline-start: 0;

    inset-inline-end: 0;

    width: 100%;

    border-bottom: 1px solid var(--border);

    background-color: var(--white)
}



.dark .header-area {

    background-color: var(--black)
}



.header-area .header-area__inner {

    display: flex;

    align-items: center;

    gap: 20px;

    position: relative;

    height: 100px
}



@media only screen and (max-width: 1919px) {

    .header-area .header-area__inner {

        height: 80px
    }

}



.header-area .header-area__inner>*:first-child {

    margin-inline-end: auto
}



.header-area .main-menu li a {

    font-size: 22px;

    font-weight: 400;

    font-family: var(--font_teko);

    text-transform: uppercase
}



.header-area .search-icon {

    color: var(--primary)
}



@media(max-width: 575px) {

    .header-area .header__meta {

        display: none
    }

}



.header-area .wc-btn-primary {

    padding: 14px 25px
}



@media only screen and (max-width: 991px) {

    .header-area .wc-btn-primary {

        padding: 11px 20px
    }

}



.dir-rtl .header-area .header__navicon img {

    transform: rotateY(180deg)
}



.cta-area {

    background-color: var(--black)
}



.dark .cta-area {

    background-color: #1b1b1b
}



.cta-area .section-subtitle {

    font-size: 40px;

    font-weight: 700;

    line-height: 1;

    font-family: var(--font_teko);

    text-transform: uppercase;

    color: var(--white)
}



@media only screen and (max-width: 1399px) {

    .cta-area .section-subtitle {

        font-size: 30px
    }

}



.cta-area .section-subtitle img {

    margin-top: -6px
}



.cta-area .section-title {

    font-size: 190px;

    line-height: .82;

    max-width: 800px;

    margin: 0 auto;

    color: var(--white)
}



@media only screen and (max-width: 1919px) {

    .cta-area .section-title {

        font-size: 150px
    }

}



@media only screen and (max-width: 1399px) {

    .cta-area .section-title {

        font-size: 130px
    }

}



@media only screen and (max-width: 1199px) {

    .cta-area .section-title {

        font-size: 100px;

        max-width: 500px
    }

}



@media only screen and (max-width: 991px) {

    .cta-area .section-title {

        font-size: 60px
    }

}



@media(max-width: 575px) {

    .cta-area .section-title {

        font-size: 40px
    }

}



.cta-area .section-header {

    text-align: center
}



.cta-area .section-header .title-wrapper {

    margin-top: 42px
}



@media only screen and (max-width: 1399px) {

    .cta-area .section-header .title-wrapper {

        margin-top: 32px
    }

}



.cta-area .section-header .btn-wrapper {

    margin-top: 18px
}



.cta-area .section-header .wc-btn-underline {

    font-size: 50px;

    padding-bottom: 8px;

    text-transform: none;

    color: var(--white);

    font-weight: 400
}



@media only screen and (max-width: 1919px) {

    .cta-area .section-header .wc-btn-underline {

        font-size: 35px
    }

}



@media only screen and (max-width: 1399px) {

    .cta-area .section-header .wc-btn-underline {

        font-size: 28px
    }

}



@media only screen and (max-width: 1199px) {

    .cta-area .section-header .wc-btn-underline {

        font-size: 22px;

        padding-bottom: 5px
    }

}



.cta-area .section-header .wc-btn-underline::before {

    height: 3px
}



@media only screen and (max-width: 1199px) {

    .cta-area .section-header .wc-btn-underline::before {

        height: 2px
    }

}



.footer-area {
    background-color: var(--black)
}

.dark .footer-area {
    background-color: #1b1b1b
}

.footer-area .footer-nav-list {
    display: flex;
    gap: 45px
}

@media only screen and (max-width: 1199px) {
    .footer-area .footer-nav-list {
        gap: 30px
    }
}

.footer-area .footer-nav-list li a {
    font-size: 22px;
    color: var(--white);
    font-family: var(--font_teko);
    text-transform: uppercase;
    line-height: 1
}

@media only screen and (max-width: 1919px) {
    .footer-area .footer-nav-list li a {
        font-size: 20px
    }
}

@media only screen and (max-width: 1399px) {
    .footer-area .footer-nav-list li a {
        font-size: 18px
    }
}

.footer-area .footer-nav-list li a:hover {
    color: var(--secondary)
}

.footer-area .social-links {
    display: flex;
    gap: 20px
}

.footer-area .social-links li {
    line-height: 1
}

.footer-area .social-links li a {
    font-size: 17px;
    color: var(--white)
}

@media only screen and (max-width: 1199px) {
    .footer-area .social-links li a {
        font-size: 14px
    }
}

.footer-area .social-links li a:hover {
    color: var(--secondary)
}

.footer-area .copyright-text .text {
    font-size: 22px;
    color: var(--white);
    font-family: var(--font_teko);
    text-transform: uppercase;
    line-height: 1
}

@media only screen and (max-width: 1919px) {
    .footer-area .copyright-text .text {
        font-size: 20px
    }
}

@media only screen and (max-width: 1399px) {
    .footer-area .copyright-text .text {
        font-size: 18px
    }
}

.footer-area .copyright-text .text a {
    color: var(--white)
}

.footer-area .copyright-area-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 60px;
    justify-content: space-between;
    padding: 0 0 38px
}

@media only screen and (max-width: 1919px) {
    .footer-area .copyright-area-inner {
        padding: 0 0 28px
    }
}

@media only screen and (max-width: 767px) {
    .footer-area .copyright-area-inner {
        flex-direction: column;
        align-items: center
    }
}

.subscribe-form {

    margin-top: 38px
}



.subscribe-form .input-field {

    background-color: #202020;

    border-radius: 5px;

    display: flex;

    gap: 10px;

    align-items: center;

    padding: 25px 25px
}



@media only screen and (max-width: 1399px) {

    .subscribe-form .input-field {

        padding: 18px 25px
    }

}



.subscribe-form .input-field input {

    border: 0;

    background-color: #202020;

    color: var(--white);

    width: 100%
}



.subscribe-form .input-field input::-moz-placeholder {

    color: var(--white-2);

    font-size: 14px;

    font-weight: 400;

    line-height: 1
}



.subscribe-form .input-field input::placeholder {

    color: var(--white-2);

    font-size: 14px;

    font-weight: 400;

    line-height: 1
}



.subscribe-form .input-field input:focus {

    outline: 0
}



.subscribe-form .input-field .subscribe-btn img,

.subscribe-form .input-field .subscribe-btn i {

    color: var(--theme)
}



.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: var(--white-2)
}



.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
}



.copyright-area-inner {

    /* border-top: 1px solid rgba(255, 255, 255, .08); */

    padding: 32px 0;

    position: relative
}



@media only screen and (max-width: 1399px) {

    .copyright-area-inner {

        padding: 22px 0
    }

}



.copyright-area .copyright-text .text {

    text-align: center;

    font-weight: 500;

    color: var(--white-2)
}



.copyright-area .copyright-text .text a {

    color: var(--white)
}



.hero-area-inner {

    padding-top: 217px;

    padding-bottom: 30px;

    margin-inline-end: calc((100vw - var(--container-max-widths))/-2 - 12px)
}



@media only screen and (max-width: 1919px) {

    .hero-area-inner {

        padding-top: 147px
    }

}



@media only screen and (max-width: 1199px) {

    .hero-area-inner {

        padding-top: 127px
    }

}



@media only screen and (max-width: 991px) {

    .hero-area-inner {

        padding-top: 127px
    }

}



@media only screen and (max-width: 767px) {

    .hero-area-inner {

        margin-inline-end: 0
    }

}



.hero-area .section-title {

    margin-top: 0
}



.hero-area .contact-box {

    padding: 85px 30px 40px;

    background-color: var(--black);

    position: relative;

    z-index: 1
}



.dark .hero-area .contact-box {

    background-color: #171717
}



.hero-area .contact-box .title {

    font-size: 18px;

    color: var(--white-2);

    line-height: 1;

    display: inline-block
}



.hero-area .contact-box .link {

    font-size: 24px;

    line-height: 1;

    margin-top: 12px;

    color: var(--white)
}



.hero-area .contact-box .shape-1 {

    position: absolute;

    top: 10px;

    inset-inline-end: 10px;

    z-index: -1
}



.hero-area .section-content {

    display: grid;

    gap: 40px 60px;

    grid-template-columns: 1fr 960px
}



@media only screen and (max-width: 1919px) {

    .hero-area .section-content {

        grid-template-columns: 1fr 840px
    }

}



@media only screen and (max-width: 1399px) {

    .hero-area .section-content {

        grid-template-columns: 1fr 760px
    }

}



@media only screen and (max-width: 1199px) {

    .hero-area .section-content {

        grid-template-columns: 1fr 580px
    }

}



@media only screen and (max-width: 991px) {

    .hero-area .section-content {

        grid-template-columns: 1fr
    }

}



.hero-area .content-last {

    display: grid;

    gap: 30px;

    grid-template-columns: 300px 1fr;

    align-items: flex-end
}



@media only screen and (max-width: 1199px) {

    .hero-area .content-last {

        grid-template-columns: 260px 1fr
    }

}



@media only screen and (max-width: 767px) {

    .hero-area .content-last {

        gap: 15px
    }

}



@media(max-width: 575px) {

    .hero-area .content-last {

        grid-template-columns: 1fr
    }

}



.hero-area .content-last .col-first {

    display: grid;

    gap: 30px
}



@media only screen and (max-width: 767px) {

    .hero-area .content-last .col-first {

        gap: 15px
    }

}



.hero-area .content-last .col-second {

    display: grid;

    gap: 30px
}



@media only screen and (max-width: 767px) {

    .hero-area .content-last .col-second {

        gap: 15px
    }

}



.contact-area .section-title {

    max-width: 850px
}



.contact-area .section-header {

    display: grid;

    gap: 20px 60px;

    grid-template-columns: 1fr auto
}



@media only screen and (max-width: 991px) {

    .contact-area .section-header {

        grid-template-columns: 1fr
    }

}



.contact-area .section-header .text {

    max-width: 300px
}



.contact-area .contact-formwrap {

    display: grid;

    gap: 50px 30px;

    grid-template-columns: repeat(2, 1fr)
}



@media only screen and (max-width: 767px) {

    .contact-area .contact-formwrap {

        grid-template-columns: repeat(1, 1fr);

        gap: 10px 30px
    }

}



.contact-area .contact-formwrap .messages {

    grid-column: span 2
}



@media only screen and (max-width: 767px) {

    .contact-area .contact-formwrap .messages {

        grid-column: auto
    }

}



.contact-area .contact-formfield input {

    width: 100%;

    height: 40px;

    border: none;

    border-bottom: 1px solid var(--border);

    outline: none;

    background-color: rgba(0, 0, 0, 0);

    transition: all .5s
}



.contact-area .contact-formfield input:focus {

    border-color: var(--primary)
}



.contact-area .submit-btn {

    margin-top: 60px
}



@media only screen and (max-width: 767px) {

    .contact-area .submit-btn {

        margin-top: 20px
    }

}



.contact-area .section-content {

    display: grid;

    gap: 40px 60px;

    grid-template-columns: 1fr 740px;

    margin-top: 112px
}



@media only screen and (max-width: 1919px) {

    .contact-area .section-content {

        margin-top: 72px
    }

}



@media only screen and (max-width: 1399px) {

    .contact-area .section-content {

        grid-template-columns: 1fr 640px
    }

}



@media only screen and (max-width: 1199px) {

    .contact-area .section-content {

        grid-template-columns: 1fr 600px;

        margin-top: 42px
    }

}



@media only screen and (max-width: 991px) {

    .contact-area .section-content {

        grid-template-columns: 1fr
    }

}



.contact-area .info-box .text {

    font-size: 26px;

    line-height: 1.25;

    font-weight: 500;

    color: var(--primary);

    max-width: 360px
}



.contact-area .contact-list {

    margin-top: 26px
}



.contact-area .contact-list li {

    font-size: 18px;

    line-height: 24px
}



.contact-area .contact-list li:not(:first-child) {

    margin-top: 15px
}



.contact-area .contact-list li a {

    text-decoration: underline;

    text-underline-offset: 2px
}
 @media only screen and (max-width: 991px) {

       .hero-area .contact-box {
               padding: 98px 5px 58px !important;
        }
        .contact-area-inner{
                    padding-top: 0px !important;
        }

    }
/*# sourceMappingURL=master-web-agency.css.map */