@charset "UTF-8";
/*-----------------------------------------------------------------------------------

  Theme Name: Axtra - Digital Agency HTML5 Template
  Author: Crowdyflow
  Support: habib.crowdyflow@gmail.com
  Description: BUILDY – is a  Constructor HTML5 template that comes with high-quality 3 Pre build Home Pages and many built-in awesome inner pages  which are perfect for any creative agencies, designers, digital agencies, freelancers, developers, designers, marketing, startup, blog and portfolio.
  Version: 1.0

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************

  01. VARIBALES CSS START
  02. BASE CSS START
  03. TYPOGRAPHY CSS START
  04. BUTTON CSS START
  05. TITLE CSS START
  06. WIDGET CSS START
  07. ANIMATION CSS START
  08. SCROLL CSS START
  09. LOADING CSS START
  10. MODAL CSS START
  11. HEADER CSS START
  12. HERO CSS START
  13. OFFCANVAS CSS START
  14. BREADCRUMB CSS START
  15. SLIDER CSS START
  16. ABOUT CSS START
  17. SERVICE CSS START
  18. COUNTER CSS START
  19. CASE STUDY CSS START
  20. FAQ CSS START
  21. TESTIMONIAL CSS START
  22. TEAM CSS START
  23. PORTFOLIO CSS START
  24. COMPANY CSS START
  25. FEATURE CSS START
  26. PROGRESS CSS START
  27. WORKFLOW CSS START
  28. STEP CSS START
  29. GALLERY CSS START
  30. BLOG CSS START
  31. CONTACT CSS START
  32. 404 CSS START
  33. FOOTER CSS START
**********************************************/
/*----------------------------------------*/
/*  01. VARIBALES CSS START
/*----------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,700&family=Prata&display=swap&family=Bentham&display=swap&family=Teko:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@100;200;300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Overlock:wght@400;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Macondo&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playwrite+NZ:wght@100..400&display=swap");
:root {
  --primary: #0c2444;
  --secondary: #4085c4;
  --primarydark: #07223a;
  --black: #000;
  --black-2: #1C1D20;
  --black-3: #212125;
  --black-4: #262629;
  --black-5: #27272B;
  --black-6: #333337;
  --black-7: #27292D;
  --black-8: #222227;
  --black-9: #999999;
  --black-10: #272422;
  --black-11: #1D1917;
  --black-12: #343231;
  --black-13: #3C3636;
  --black-14: #39393D;
  --black-15: #141415;
  --black-16: #202C58;
  --white: #fff;
  --white-2: #F9F9F9;
  --white-3: #F3F3F3;
  --white-4: #EFEFEF;
  --white-5: #C1C1C1;
  --white-6: #C9C6DE;
  --white-7: #CDCDCD;
  --white-8: #C7C7D7;
  --white-9: #F5F5F5;
  --white-10: #F0EDEB;
  --white-11: #F0ECE9;
  --white-12: #DDD2CC;
  --white-13: #F6EEEA;
  --white-14: #F4F0ED;
  --white-15: #F3F0E4;
  --white-16: #F2F0E5;
  --white-17: #F8F8FC;
  --white-18: #F6F3F0;
  --white-19: #f7f9fb;
  --gray: #666666;
  --gray-2: #D9D9D9;
  --gray-3: #636376;
  --gray-4: #999999;
  --gray-5: #232327;
  --gray-6: #44454A;
  --gray-7: #63637B;
  --gray-8: #3B3B3F;
  --gray-9: #3F3A36;
  --gray-10: #555555;
  --gray-11: #89827A;
  --gray-12: #756F68;
  --gray-13: #E9E9E9;
  --gray-14: #3F4044;
  --orange: #FD8F77;
  --orange-deep: #EF6C22;
  --orange-light: #BAB0AA;
  --orange-2: #F56C1F;
  --orange-3: #F3A072;
  --blue-light: #52526C;
  --blue-2: #134485;
  --blue-3: #6A6BBF;
  --blue-4: #494B6C;
  --blue-5: #BBBCD2;
  --blue-6: #3F4061;
  --blue-7: #433E5F;
  --blue-8: #393B5A;
  --blue-9: #58597D;
  --yellow: #F4D8BB;
  --yellow-light: #E8E0DB;
  --yellow-2: #C2B7A1;
  --yellow-3: #FFC700;
  --yellow-4: #F59B14;
  --yellow-5: #F2DCA1;
  --purple: #AF89FF;
  --purple-2: #D4BFFF;
  --purple-3: #8181CB;
  --purple-4: #324f87;
  --purple-5: #252D44;
  --pink: #F8D3D3;
  --pink-2: #FFA98D;
  --pink-3: #F4E5D3;
  --pink-4: #F2EDE1;
  --pink-5: #FFD6B0;
  --pink-6: #E7E2D1;
  --pink-7: #DAD6C6;
  --pink-8: #FDC1B4;
  --pink-9: #F4E6D5;
  --pink-10: #EEE5DC;
  --pink-11: #DCAF82;
  --pink-12: #E4DDD5;
  --pink-13: #F2F1F0;
  --pink-14: #FCF8F5;
  --green: #3C524C;
  --green-2: #668D7F;
  --green-3: #7BD1C4;
  --green-4: #B1E9B9;
  --green-5: #4D605A;
  --green-6: #3F524C;
  --green-7: #89D0C3;
  --green-8: #4C605A;
  --green-9: #A0C1A8;
  --green-10: #81C9BC;
  --green-11: #D2EAF1;
  --blue-1: #0D3570;
  --blue-2: #E2F3FF;
  --red: #F02E27;
}

/*----------------------------------------*/
/*  01. MIXIN CSS START
/*----------------------------------------*/
/*----------------------------------------*/
/*  01. SPACE CSS START
/*----------------------------------------*/
.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: 1199px) {
  .mt-100 {
    margin-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .mt-100 {
    margin-top: 30px;
  }
}

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

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

/*----------------------------------------*/
/*  01. TYPOGRAPHY CSS START
/*----------------------------------------*/
@font-face {
  font-family: euclid_Circular_B;
  src: url("../fonts/euclid-circular-b/Euclid-Circular-B-Light.ttf");
  font-weight: 300;
}
@font-face {
  font-family: euclid_Circular_B;
  src: url("../fonts/euclid-circular-b/Euclid-Circular-B-Regular.ttf");
  font-weight: 400;
}
@font-face {
  font-family: euclid_Circular_B;
  src: url("../fonts/euclid-circular-b/Euclid-Circular-B-Medium.ttf");
  font-weight: 500;
}
@font-face {
  font-family: euclid_Circular_B;
  src: url("../fonts/euclid-circular-b/Euclid-Circular-B-SemiBold.ttf");
  font-weight: 600;
}
@font-face {
  font-family: euclid_Circular_B;
  src: url("../fonts/euclid-circular-b/Euclid-Circular-B-Bold.ttf");
  font-weight: 700;
}
@font-face {
  font-family: Estedad;
  src: url("../fonts/estedad/Estedad-SemiBold.ttf");
  font-weight: 600;
}
@font-face {
  font-family: Estedad;
  src: url("../fonts/estedad/Estedad-Medium.ttf");
  font-weight: 500;
}
@font-face {
  font-family: Estedad;
  src: url("../fonts/estedad/Estedad-Regular.ttf");
  font-weight: 400;
}
@font-face {
  font-family: newYork;
  src: url("../fonts/newyork/FontsFree-Net-NewYork.ttf");
  font-weight: 400;
}
@font-face {
  font-family: gallient;
  src: url("../fonts/gallient/GallientRegular-eZoMp.ttf");
  font-weight: 400;
}
@font-face {
  font-family: RomanStory;
  src: url("../fonts/roman/Romans-Story.ttf");
  font-weight: 400;
}
@font-face {
  font-family: ClashDisplay;
  src: url("../fonts/ClashDisplay/ClashDisplay-Light.ttf");
  font-weight: 300;
}
@font-face {
  font-family: ClashDisplay;
  src: url("../fonts/ClashDisplay/ClashDisplay-Regular.ttf");
  font-weight: 400;
}
@font-face {
  font-family: ClashDisplay;
  src: url("../fonts/ClashDisplay/ClashDisplay-Medium.ttf");
  font-weight: 500;
}
@font-face {
  font-family: ClashDisplay;
  src: url("../fonts/ClashDisplay/ClashDisplay-Semibold.ttf");
  font-weight: 600;
}
@font-face {
  font-family: ClashDisplay;
  src: url("../fonts/ClashDisplay/ClashDisplay-Bold.ttf");
  font-weight: 700;
}
@font-face {
  font-family: Glorify DEMO;
  src: url("../fonts/glorify/Glorifydemo-BW3J3.otf");
  font-weight: 400;
}
@font-face {
  font-family: Canela;
  src: url("../fonts/canela/Canela-Regular-Trial.otf");
  font-weight: 400;
}
@font-face {
  font-family: Canela;
  src: url("../fonts/canela/Canela-Medium-Trial.otf");
  font-weight: 500;
}
@font-face {
  font-family: Graphik;
  src: url("../fonts/graphik/GraphikBold.otf");
  font-weight: 700;
}
@font-face {
  font-family: Graphik;
  src: url("../fonts/graphik/GraphikMedium.otf");
  font-weight: 500;
}
@font-face {
  font-family: Graphik;
  src: url("../fonts/graphik/GraphikRegular.otf");
  font-weight: 400;
}
@font-face {
  font-family: Graphik;
  src: url("../fonts/graphik/GraphikSemibold.otf");
  font-weight: 600;
}
@font-face {
  font-family: tropline;
  src: url("../fonts/tropline/Tropiline-Regular.ttf");
  font-weight: 400;
}
@font-face {
  font-family: tropline;
  src: url("../fonts/tropline/Tropiline-SemiBold.ttf");
  font-weight: 600;
}
@font-face {
  font-family: tropline;
  src: url("../fonts/tropline/Tropiline-Bold.ttf");
  font-weight: 700;
}
@font-face {
  font-family: larken;
  src: url("../fonts/larken/LarkenDEMO-Regular.otf");
  font-weight: 400;
}
@font-face {
  font-family: moret;
  src: url("../fonts/moret/Moret-Book.otf");
  font-weight: 350;
}
@font-face {
  font-family: moret;
  src: url("../fonts/moret/Moret-Regular.otf");
  font-weight: 400;
}
@font-face {
  font-family: moret;
  src: url("../fonts/moret/Moret-Semibold.otf");
  font-weight: 600;
}
@font-face {
  font-family: moret;
  src: url("../fonts/moret/Moret-Bold.otf");
  font-weight: 700;
}
@font-face {
  font-family: moret;
  src: url("../fonts/moret/Moret-Extrabold.otf");
  font-weight: 800;
}
@font-face {
  font-family: monument;
  src: url("../fonts/monument/MonumentExtended-Regular.otf");
  font-weight: 400;
}
@font-face {
  font-family: monument;
  src: url("../fonts/monument/MonumentExtended-Ultrabold.otf");
  font-weight: 800;
}
@font-face {
  font-family: SangBleu;
  src: url("../fonts/sangBleu/SangBleu-Sunrise.ttf");
  font-weight: 400;
}
:root {
  --font_primary: 'euclid_Circular_B';
  --font_estedad: 'Estedad';
  --font_newyork: 'newYork';
  --font_gallient: 'gallient';
  --font_lora: 'Lora', serif;
  --font_prata: 'Prata', serif;
  --font_bentham: 'Bentham', serif;
  --font_romanstory: 'RomanStory', serif;
  --font_clashDisplay: 'ClashDisplay';
  --font_glorifydemo: 'Glorify DEMO';
  --font_canela: 'Canela';
  --font_graphik: 'Graphik';
  --font_tropline: 'tropline';
  --font_larken: 'larken';
  --font_moret: 'moret';
  --font_monument: 'monument';
  --font_SangBleu: 'SangBleu';
  --font_outfit: 'Outfit';
  --font_playwrite: 'Playwrite';
  --font_kanit: 'Kanit', sans-serif;
  --font_macondo: 'Macondo', cursive;
  --font_teko: 'Teko', sans-serif;
  --font_jakarta: 'Plus Jakarta Sans', sans-serif;
  --font_kumbh: 'Kumbh Sans', sans-serif;
  --font_overlock: 'Overlock', cursive;
  --font_manrope: 'Manrope', sans-serif;
  --font_awesome: 'Font Awesome 6 Free';
}

.font-body-mont {
  font-family: "Montserrat", sans-serif;
}
.font-body-euclid {
  font-family: "Poppins";
}
.font-body-estedad {
  font-family: "Estedad";
}
.font-body-newyork {
  font-family: "newYork";
}
.font-body-gallient {
  font-family: "gallient";
}
.font-body-lora {
  font-family: "Lora", serif;
}
.font-body-prata {
  font-family: "Prata", serif;
}
.font-body-bentham {
  font-family: "Bentham", serif;
}
.font-body-romanstory {
  font-family: "RomanStory", serif;
}
.font-body-clashDisplay {
  font-family: "ClashDisplay";
}
.font-body-glorifydemo {
  font-family: "Glorify DEMO";
}
.font-body-canela {
  font-family: "Canela";
}
.font-body-graphik {
  font-family: "Graphik";
}
.font-body-kanit {
  font-family: "Kanit", sans-serif;
}
.font-body-macondo {
  font-family: "Macondo", cursive;
}
.font-body-teko {
  font-family: "Teko", sans-serif;
}
.font-body-jakarta {
  font-family: "Plus Jakarta Sans", sans-serif;
}
.font-body-kumbh {
  font-family: "Kumbh Sans", sans-serif;
}
.font-body-overlock {
  font-family: "Overlock", cursive;
}
.font-body-manrope {
  font-family: "Manrope", sans-serif;
}
.font-body-tropline {
  font-family: "tropline";
}
.font-body-monument {
  font-family: "monument";
}
.font-body-SangBleu {
  font-family: "SangBleu";
}
.font-body-moret {
  font-family: "moret";
}
.font-body-moret {
  font-family: "moret";
}
.font-heading-euclid h1,
.font-heading-euclid h2,
.font-heading-euclid h3,
.font-heading-euclid h4,
.font-heading-euclid h5,
.font-heading-euclid h6 {
  font-family: "Poppins";
}
.font-heading-estedad h1,
.font-heading-estedad h2,
.font-heading-estedad h3,
.font-heading-estedad h4,
.font-heading-estedad h5,
.font-heading-estedad h6 {
  font-family: "Estedad";
}
.font-heading-estedad .nav-menu li a {
  font-family: "Estedad";
}
.font-heading-newyork h1,
.font-heading-newyork h2,
.font-heading-newyork h3,
.font-heading-newyork h4,
.font-heading-newyork h5,
.font-heading-newyork h6 {
  font-family: "newYork";
}
.font-heading-newyork .nav-menu li a {
  font-family: "newYork";
}
.font-heading-gallient h1,
.font-heading-gallient h2,
.font-heading-gallient h3,
.font-heading-gallient h4,
.font-heading-gallient h5,
.font-heading-gallient h6 {
  font-family: "gallient";
}
.font-heading-lora h1,
.font-heading-lora h2,
.font-heading-lora h3,
.font-heading-lora h4,
.font-heading-lora h5,
.font-heading-lora h6 {
  font-family: "Lora", serif;
}
.font-heading-prata h1,
.font-heading-prata h2,
.font-heading-prata h3,
.font-heading-prata h4,
.font-heading-prata h5,
.font-heading-prata h6 {
  font-family: "Prata", serif;
}
.font-heading-bentham h1,
.font-heading-bentham h2,
.font-heading-bentham h3,
.font-heading-bentham h4,
.font-heading-bentham h5,
.font-heading-bentham h6 {
  font-family: "Bentham", serif;
}
.font-heading-romanstory h1,
.font-heading-romanstory h2,
.font-heading-romanstory h3,
.font-heading-romanstory h4,
.font-heading-romanstory h5,
.font-heading-romanstory h6 {
  font-family: "RomanStory", serif;
}
.font-heading-clashDisplay h1,
.font-heading-clashDisplay h2,
.font-heading-clashDisplay h3,
.font-heading-clashDisplay h4,
.font-heading-clashDisplay h5,
.font-heading-clashDisplay h6 {
  font-family: "ClashDisplay";
}
.font-heading-glorifydemo h1,
.font-heading-glorifydemo h2,
.font-heading-glorifydemo h3,
.font-heading-glorifydemo h4,
.font-heading-glorifydemo h5,
.font-heading-glorifydemo h6 {
  font-family: "Glorify DEMO";
}
.font-heading-canela h1,
.font-heading-canela h2,
.font-heading-canela h3,
.font-heading-canela h4,
.font-heading-canela h5,
.font-heading-canela h6 {
  font-family: "Canela";
}
.font-heading-graphik h1,
.font-heading-graphik h2,
.font-heading-graphik h3,
.font-heading-graphik h4,
.font-heading-graphik h5,
.font-heading-graphik h6 {
  font-family: "Graphik";
}
.font-heading-kanit h1,
.font-heading-kanit h2,
.font-heading-kanit h3,
.font-heading-kanit h4,
.font-heading-kanit h5,
.font-heading-kanit h6 {
  font-family: "Kanit", sans-serif;
}
.font-heading-teko h1,
.font-heading-teko h2,
.font-heading-teko h3,
.font-heading-teko h4,
.font-heading-teko h5,
.font-heading-teko h6 {
  font-family: "Teko", sans-serif;
}
.font-heading-jakarta h1,
.font-heading-jakarta h2,
.font-heading-jakarta h3,
.font-heading-jakarta h4,
.font-heading-jakarta h5,
.font-heading-jakarta h6 {
  font-family: "Plus Jakarta Sans", sans-serif;
}
.font-heading-kumbh h1,
.font-heading-kumbh h2,
.font-heading-kumbh h3,
.font-heading-kumbh h4,
.font-heading-kumbh h5,
.font-heading-kumbh h6 {
  font-family: "Kumbh Sans", sans-serif;
}
.font-heading-overlock h1,
.font-heading-overlock h2,
.font-heading-overlock h3,
.font-heading-overlock h4,
.font-heading-overlock h5,
.font-heading-overlock h6 {
  font-family: "Overlock", cursive;
}
.font-heading-manrope h1,
.font-heading-manrope h2,
.font-heading-manrope h3,
.font-heading-manrope h4,
.font-heading-manrope h5,
.font-heading-manrope h6 {
  font-family: "Manrope", sans-serif;
}
.font-heading-tropline h1,
.font-heading-tropline h2,
.font-heading-tropline h3,
.font-heading-tropline h4,
.font-heading-tropline h5,
.font-heading-tropline h6 {
  font-family: "tropline";
}
.font-heading-moret h1,
.font-heading-moret h2,
.font-heading-moret h3,
.font-heading-moret h4,
.font-heading-moret h5,
.font-heading-moret h6 {
  font-family: "moret";
}
.font-heading-SangBleu h1,
.font-heading-SangBleu h2,
.font-heading-SangBleu h3,
.font-heading-SangBleu h4,
.font-heading-SangBleu h5,
.font-heading-SangBleu h6 {
  font-family: "SangBleu";
}
.font-heading-monument h1,
.font-heading-monument h2,
.font-heading-monument h3,
.font-heading-monument h4,
.font-heading-monument h5,
.font-heading-monument h6 {
  font-family: "monument";
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Poppins";
}

html {
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
  color: var(--white);
}
.light h1,
.light h2,
.light h3,
.light h4,
.light h5,
.light h6 {
  color: var(--black-2);
}

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

li {
  list-style: none;
}

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

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

p {
  color: #132c5b;
  font-size: 16px;
  margin-bottom: 1rem;
  line-height: 30px;
  font-weight: 400;
}
.light p {
  color: var(--gray);
}

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

/*----------------------------------------*/
/*  01. ANIMATION CSS START
/*----------------------------------------*/
.cf_parallax_image {
  overflow: hidden;
}

@keyframes wcBubble {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.5;
  }
  100% {
    scale: 1;
  }
}
@keyframes wcZoom {
  0% {
    scale: 1;
  }
  50% {
    scale: 0.5;
  }
  100% {
    scale: 1;
  }
}
@keyframes wcZoom_2 {
  0% {
    scale: 1;
  }
  50% {
    scale: 0.9;
  }
  100% {
    scale: 1;
  }
}
@keyframes wcSlideBottom {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(50px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes reveal {
  to {
    opacity: 1;
    filter: blur(0px);
  }
}
@keyframes wcfadeUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    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);
  }
}
/*----------------------------------------*/
/*  01. Global CSS START
/*----------------------------------------*/
.wc-color-white {
  color: var(--white) !important;
}
.light .wc-color-white {
  color: var(--black-2) !important;
}

.wc-color-dark {
  color: var(--black-2) !important;
}

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

.sidebar-left {
  padding-inline-start: 315px;
}
@media only screen and (max-width: 1199px) {
  .sidebar-left {
    padding-inline-start: 260px;
  }
}
@media only screen and (max-width: 991px) {
  .sidebar-left {
    padding-inline-start: 0;
  }
}
.sidebar-left .container {
  max-width: 1170px;
}
@media only screen and (max-width: 1399px) {
  .sidebar-left .container {
    max-width: 1140px;
  }
}
@media only screen and (max-width: 1199px) {
  .sidebar-left .container {
    max-width: 700px;
  }
}
@media only screen and (max-width: 991px) {
  .sidebar-left .container {
    max-width: 720px;
  }
}

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

.icon-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--black-7);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.menu-icon, .menu-icon-2 {
  width: 30px;
  height: 20px;
  position: relative;
  margin-top: 5px;
  display: inline-block;
}
.menu-icon::before, .menu-icon-2::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  top: 0;
  inset-inline-start: 0;
  background: var(--white);
  transition: all 0.3s;
}
.menu-icon::after, .menu-icon-2::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  bottom: 0;
  inset-inline-start: 0;
  background: var(--white);
  transition: all 0.3s;
}
.menu-icon span, .menu-icon-2 span {
  position: absolute;
  content: "";
  width: 18px;
  height: 1px;
  top: 50%;
  inset-inline-end: 0;
  transition: all 0.3s;
  background-color: var(--white);
}
.menu-icon:hover::after, .menu-icon-2:hover::after, .menu-icon:hover::before, .menu-icon-2:hover::before,
.menu-icon:hover span,
.menu-icon-2:hover span {
  background-color: var(--primary);
}
.menu-icon-2 {
  width: 24px;
  height: 18px;
}
.menu-icon-2 span {
  width: 15px;
  inset-inline-end: unset;
  inset-inline-start: 0;
}

.cart {
  color: var(--white);
  display: inline-block;
  margin-inline-end: 40px;
  position: relative;
  transition: all 0.3s;
}
.cart.content-dark img {
  filter: brightness(1);
}
.cart:hover {
  color: var(--primary);
}
@media only screen and (max-width: 767px) {
  .cart {
    display: none;
  }
}
.cart img {
  filter: brightness(10);
}
.light .cart img {
  filter: brightness(1);
}
.cart .busket {
  position: absolute;
  top: 0;
  inset-inline-end: -9px;
  z-index: 2;
}

.busket {
  color: var(--black-2);
  height: 16px;
  width: 16px;
  background: var(--primary);
  border-radius: 50px;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
}

.offcanvas-nav.content-dark img {
  filter: brightness(1);
}
.offcanvas-nav img {
  filter: brightness(10);
}
.light .offcanvas-nav img {
  filter: brightness(1);
}

.double-border {
  position: relative;
}
.double-border::before, .double-border::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  inset-inline-start: 0;
  bottom: 0;
  background-color: #F0ECE9;
}
.double-border::after {
  bottom: 3px;
}

.border-btm {
  z-index: 5;
  position: relative;
  border-bottom: 1px solid var(--blue-4);
}
.light .border-btm {
  border-color: var(--pink-12);
}

.pos-abs {
  position: absolute !important;
  width: 100%;
  height: auto;
  inset-inline-start: 0;
  top: 0;
}

.filter-none {
  filter: none !important;
}

.filter-grayscale {
  filter: grayscale(1);
}

.separator {
  width: 100%;
  height: 1px;
  background-color: var(--blue-9);
}
.separator-2 {
  width: 100%;
  height: 1px;
  position: relative;
  background-color: var(--gray-9);
}
.light .separator-2 {
  background-color: var(--white-3);
}
.separator-3 {
  width: 100%;
  height: 1px;
  background-color: var(--black-6);
}
.separator-4 {
  width: 100%;
  height: 1px;
  background-color: #475272;
}
.light .separator-4 {
  background-color: #EAE6DA !important;
}
.separator-5 {
  width: 100%;
  height: 1px;
  display: inline-block;
  background: var(--white-14);
}
.separator-6 {
  width: 100%;
  height: 1px;
  margin-bottom: 3px;
  background: var(--black-6);
}
.light .separator-6 {
  background-color: var(--white-4);
}

.typed_title {
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2;
  color: var(--primary);
  text-transform: uppercase;
  font-family: "Estedad";
}
@media only screen and (max-width: 767px) {
  .typed_title {
    font-size: 24px;
  }
}

.follow_on_social {
  padding: 10px 20px;
  border-left: 1px solid var(--black-6);
}
@media only screen and (max-width: 767px) {
  .follow_on_social {
    padding: 7px 12px;
  }
}
.follow_on_social .follow-me {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--gray-4);
  padding-bottom: 20px;
  text-transform: uppercase;
}
.follow_on_social li {
  display: inline-block;
}
.follow_on_social li a {
  display: block;
  color: var(--black-9);
  font-size: 20px;
  padding-right: 15px;
  transition: all 0.3s;
}
.follow_on_social li a:hover {
  color: var(--primary);
}
.follow_on_social_ml {
  margin-inline-start: 90px;
}
@media only screen and (max-width: 991px) {
  .follow_on_social_ml {
    margin-inline-start: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .follow_on_social_ml {
    margin-inline-start: 0;
  }
}
.follow_on_social-2 p {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: var(--black-9);
  text-transform: uppercase;
  display: inline-block;
  position: relative;
}
.follow_on_social-2 p::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  inset-inline-start: 0;
  bottom: -4px;
  background-color: var(--white);
}
.follow_on_social-2 p a {
  color: var(--white);
  display: inline-block;
  transition: all 0.3s;
}
.follow_on_social-2 p a:hover {
  color: var(--black-9);
}

.work_experience .experience {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--white);
}
@media only screen and (max-width: 991px) {
  .work_experience .experience {
    padding-bottom: 25px;
    margin-bottom: 25px;
  }
}
.work_experience .experience span {
  display: block;
  font-weight: 400;
  font-size: 80px;
  line-height: 1;
  padding-bottom: 12px;
}
.work_experience-2 .experience {
  font-weight: 400;
  font-size: 600px;
  line-height: 0.95;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 60px;
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 1399px) {
  .work_experience-2 .experience {
    font-size: 400px;
  }
}
@media only screen and (max-width: 767px) {
  .work_experience-2 .experience {
    font-size: 150px;
  }
}
.work_experience-2 .experience span {
  font-weight: 300;
  font-size: 100px;
  line-height: 1;
}
.work_experience-2 .experience-title {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 55px;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  color: var(--white);
}
@media only screen and (max-width: 767px) {
  .work_experience-2 .experience-title {
    font-size: 36px;
  }
}
.work_experience-2 .experience-title span {
  display: block;
  font-weight: 500;
  font-size: 130px;
}
@media only screen and (max-width: 767px) {
  .work_experience-2 .experience-title span {
    font-size: 80px;
  }
}
.work_experience-img {
  gap: 30px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 6;
}
@media only screen and (max-width: 1199px) {
  .work_experience-img {
    margin-top: 80px;
    gap: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .work_experience-img {
    margin-top: 50px;
    margin-bottom: 30px;
  }
  .work_experience-img img {
    max-width: 70px;
  }
}
.work_experience-img .exp-title {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: var(--black-2);
}
.work_experience-img .exp-title span {
  display: block;
  font-size: 60px;
  line-height: 1;
  text-transform: uppercase;
}
@media only screen and (max-width: 991px) {
  .work_experience-img .exp-title span {
    font-size: 48px;
  }
}
.work_experience-img .image-half {
  max-width: 100px;
}
@media only screen and (max-width: 991px) {
  .work_experience-img .image-half {
    max-width: 60px;
  }
}

.work_process {
  display: grid;
  grid-template-columns: 100px auto;
  position: relative;
  z-index: 9;
}
.work_process span {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--white);
  display: flex;
  align-items: center;
}
.work_process a {
  font-size: 20px;
  color: var(--primary);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--black-2);
  transition: all 0.5s;
  position: relative;
  z-index: 9;
}
.work_process a:hover {
  color: var(--black-2);
  background-color: var(--primary);
}
.work_process-2 {
  display: grid;
  align-items: center;
  grid-template-columns: 100px auto;
  gap: 30px;
}
@media only screen and (max-width: 991px) {
  .work_process-2 {
    gap: 15px;
    grid-template-columns: 70px auto;
  }
}
@media only screen and (max-width: 767px) {
  .work_process-2 {
    padding: 40px 0;
  }
}
.work_process-2 .button {
  font-size: 20px;
  color: var(--white);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--black-6);
  position: relative;
  z-index: 9;
  transition: all 0.3s;
}
.light .work_process-2 .button {
  border-color: #F3F2F2;
  color: var(--black-2);
}
@media only screen and (max-width: 991px) {
  .work_process-2 .button {
    width: 70px;
    height: 70px;
  }
}
.work_process-2 .button:hover {
  color: var(--primary);
  border-color: var(--primary);
}
.work_process-2 span {
  font-family: "Estedad";
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--white);
  display: flex;
  align-items: center;
}
.work_process-3 .play-btn {
  width: 85px;
  height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black-2);
  border: 1px solid currentColor;
  border-radius: 50px;
  transition: all 0.3s;
}
.work_process-3 .play-btn:hover {
  color: var(--primary);
}

.work_process_experience .work_experience .experience {
  border-bottom: 1px solid var(--gray-3);
  padding-bottom: 40px;
  margin-bottom: 40px;
  position: relative;
}
@media only screen and (max-width: 991px) {
  .work_process_experience .work_experience .experience {
    padding-bottom: 25px;
    margin-bottom: 25px;
  }
}

.say_hello {
  font-family: "Estedad";
  padding: 40px 50px;
}
@media only screen and (max-width: 1199px) {
  .say_hello {
    padding: 30px;
  }
}
.say_hello p {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--black-2);
  text-transform: uppercase;
}
.say_hello a {
  display: inline-block;
  color: var(--black-2);
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  margin-top: 10px;
  text-transform: initial;
  position: relative;
}
.say_hello a::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 0;
  background: var(--black-2);
  transition: all 0.3s;
}
.say_hello a:hover {
  color: var(--black-2);
}
.say_hello a:hover::after {
  width: 0%;
  background: var(--black-2);
}

.brand_logo_slider .swiper-wrapper {
  transition-timing-function: linear;
}
.brand_logo_slider .swiper-slide {
  width: auto;
}
.brand_logo_slider-width {
  max-width: 930px;
  margin: 0 auto;
}
.brand__logo_flex {
  height: 100%;
  display: flex;
  gap: 80px;
  align-items: center;
}
@media only screen and (max-width: 1399px) {
  .brand__logo_flex {
    gap: 60px;
  }
}
@media only screen and (max-width: 1199px) {
  .brand__logo_flex {
    gap: 40px;
  }
}
@media only screen and (max-width: 991px) {
  .brand__logo_flex {
    flex-wrap: wrap;
  }
}
.brand__logo img {
  max-width: 100px;
}
.brand__title {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  color: var(--gray-4);
  text-transform: uppercase;
}
.brand__title-2 {
  font-family: "Estedad";
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  color: var(--white);
  text-transform: uppercase;
}
@media only screen and (max-width: 767px) {
  .brand__title-2 {
    font-size: 20px;
  }
}

.image-frame {
  background-image: url(../imgs/hero/3-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  text-align: center;
}
.image-frame img {
  padding-bottom: 39px;
}
@media only screen and (max-width: 1919px) {
  .image-frame img {
    padding-bottom: 31px;
    max-width: 400px;
  }
}
@media only screen and (max-width: 1199px) {
  .image-frame img {
    padding-bottom: 25px;
    max-width: 325px;
  }
}
@media only screen and (max-width: 991px) {
  .image-frame img {
    padding-bottom: 23px;
    max-width: 299px;
  }
}

.video_frame {
  width: 200px;
  height: 360px;
  position: relative;
  border-radius: 35px;
}
@media only screen and (max-width: 1199px) {
  .video_frame {
    width: 160px;
    height: 290px;
  }
}
.video_frame video {
  width: 100%;
  height: 100%;
  padding-inline-start: 1px;
  border-radius: 40px;
}
.video_frame .frame {
  position: absolute;
  top: 0;
  inset-inline-start: 0px;
  width: 100%;
  height: 100%;
}
.video_frame .caller {
  font-family: "Estedad";
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: var(--white);
  position: absolute;
  width: 100%;
  left: 50%;
  bottom: 75px;
  transform: translateX(-50%);
}
.light .video_frame .caller {
  color: var(--white);
}
@media only screen and (max-width: 767px) {
  .video_frame .caller br {
    display: block;
  }
}
.video_frame-2 {
  position: relative;
}
.video_frame-2 .text {
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: var(--white);
  font-family: "Estedad";
  text-align: center;
  position: absolute;
  inset-inline-start: 30%;
  bottom: 175px;
}
@media only screen and (max-width: 1919px) {
  .video_frame-2 .text {
    inset-inline-start: 35%;
  }
}
@media only screen and (max-width: 1199px) {
  .video_frame-2 .text {
    inset-inline-start: 33%;
    bottom: 120px;
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .video_frame-2 .text {
    inset-inline-start: 30%;
    bottom: 100px;
  }
}
.video_frame-2 .text span {
  display: block;
  font-weight: 400;
  font-size: 14px;
}

.experience__grid {
  display: grid;
  grid-gap: 40px 17%;
  grid-template-columns: 1fr 1fr;
  position: relative;
  padding-inline-start: 55px;
}
@media only screen and (max-width: 991px) {
  .experience__grid {
    grid-gap: 30px 10%;
    padding-inline-start: 35px;
  }
}
@media only screen and (max-width: 767px) {
  .experience__grid {
    padding-inline-start: 30px;
    grid-template-columns: 1fr;
  }
}
.experience__grid::before {
  position: absolute;
  content: "";
  width: 100px;
  height: 100%;
  inset-inline-start: 0;
  bottom: 0;
  background-image: url(../imgs/shape/2.png);
  background-repeat: no-repeat;
  background-repeat: repeat-y;
}
.experience__grid::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  inset-inline-start: calc(59% - 38px);
  bottom: 0;
  background-image: url(../imgs/shape/2.png);
  background-repeat: no-repeat;
  background-repeat: repeat-y;
}
@media only screen and (max-width: 991px) {
  .experience__grid::after {
    inset-inline-start: calc(55% - 20px);
  }
}
@media only screen and (max-width: 767px) {
  .experience__grid::after {
    display: none;
  }
}
.experience__grid-2 {
  display: grid;
  grid-gap: 40px 80px;
  grid-template-columns: 1fr 1fr;
  margin-inline-start: 80px;
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 1399px) {
  .experience__grid-2 {
    margin-inline-start: 40px;
    grid-gap: 20px 40px;
  }
}
@media only screen and (max-width: 1199px) {
  .experience__grid-2 {
    margin-inline-start: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .experience__grid-2 {
    grid-gap: 0;
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 767px) {
  .experience__grid-2 {
    margin-inline-start: 0;
  }
}
.experience__item {
  padding: 35px;
  background-color: var(--black-4);
}
.experience__item:nth-child(even) {
  margin-inline-start: auto;
}
.experience__item.have-timeline {
  padding: 30px 0;
  padding-inline-start: 90px;
  position: relative;
}
@media only screen and (max-width: 1919px) {
  .experience__item.have-timeline {
    padding-inline-start: 60px;
  }
}
.experience__item.have-timeline:before {
  content: url(../imgs/shape/dotted-line-light.png);
  position: absolute;
  inset-inline-start: 12px;
  top: 0;
}
.experience__item.have-timeline:after {
  content: url(../imgs/shape/circle-dot.png);
  position: absolute;
  inset-inline-start: 0;
  top: 27px;
  width: 25px;
  height: 25px;
  background-color: var(--black-2);
  border-radius: 50%;
}
.light .experience__item.have-timeline:after {
  background-color: var(--white);
}
.experience__item .exp-time {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: var(--primary);
  margin-bottom: 10px;
}
.experience__item .exp-time span {
  padding-inline-end: 5px;
}
.experience__item .exp-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: var(--white);
}
.experience__item .company {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-4);
  margin-bottom: 20px;
  text-transform: capitalize;
}

.skill__grid {
  margin-inline-start: 90px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 40px;
}
@media only screen and (max-width: 1399px) {
  .skill__grid {
    margin-inline-start: 25px;
  }
}
@media only screen and (max-width: 1199px) {
  .skill__grid {
    grid-gap: 25px;
  }
}
@media only screen and (max-width: 991px) {
  .skill__grid {
    grid-gap: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .skill__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px 40px;
    margin-inline-start: 0;
  }
}
.skill__item {
  padding: 74px 20px 64px;
  text-align: center;
  border-radius: 100px;
  background-color: var(--black-4);
}
.skill__item:hover img {
  filter: grayscale(0);
}
.skill__item img {
  margin-bottom: 40px;
  filter: grayscale(1);
  transition: 0.5s;
}
.skill__item .percentage {
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  text-align: center;
  color: var(--white);
  text-transform: uppercase;
  padding-bottom: 5px;
}
@media only screen and (max-width: 1199px) {
  .skill__item .percentage {
    font-size: 32px;
  }
}
.skill__item .title {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-4);
  text-transform: uppercase;
}

.total_views {
  padding: 5px 0 15px 70px;
  background-repeat: no-repeat;
  background-image: url(../imgs/social-influence/shape.png);
}
@media only screen and (max-width: 1199px) {
  .total_views {
    padding-inline-start: 50px;
    background-size: 40px;
  }
}
@media only screen and (max-width: 991px) {
  .total_views {
    padding-inline-start: 45px;
  }
}
.total_views .views {
  font-weight: 400;
  font-size: 24px;
  line-height: 24px;
  color: var(--white-11);
  font-family: "RomanStory", serif;
  text-transform: uppercase;
  padding-bottom: 10px;
}
.light .total_views .views {
  color: var(--black-2);
}
@media only screen and (max-width: 1199px) {
  .total_views .views {
    font-size: 20px;
  }
}
.total_views p {
  line-height: 1.3;
  color: var(--black-9);
}
.light .total_views p {
  color: var(--black-2);
}
@media only screen and (max-width: 1199px) {
  .total_views p {
    font-size: 14px;
  }
}
@media only screen and (max-width: 991px) {
  .total_views p br {
    display: none;
  }
}

.subscribe_me {
  display: flex;
  padding: 12px 0;
  justify-content: space-between;
  border-top: 1px solid var(--white-11);
  border-bottom: 1px solid var(--white-11);
  position: relative;
  transition: all 0.3s;
  z-index: 1;
}
.subscribe_me:hover li i {
  color: red;
}
.subscribe_me:hover li img {
  transform: rotate(45deg);
}
.subscribe_me::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 20px;
  inset-inline-start: 100px;
  top: 14px;
  background: var(--white-11);
}
.subscribe_me li {
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--white-11);
  text-transform: uppercase;
  display: flex;
  gap: 10px;
  align-items: center;
}
.subscribe_me li i {
  font-size: 24px;
  transition: all 0.3s;
}
.subscribe_me li img {
  margin-inline-start: 35px;
  transition: all 0.3s;
  transform: rotate(0deg);
}
.light .subscribe_me li img {
  filter: brightness(0.1);
}
@media only screen and (max-width: 991px) {
  .subscribe_me li img {
    margin-inline-start: 20px;
  }
}
.subscribe_me li a {
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--white-11);
  text-transform: uppercase;
}

.global_band {
  display: flex;
  gap: 20px;
}
@media only screen and (max-width: 1199px) {
  .global_band {
    gap: 10px;
  }
}
.global_band .title {
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: var(--white-11);
  text-transform: uppercase;
}
@media only screen and (max-width: 1199px) {
  .global_band .title {
    font-size: 20px;
  }
}
.global_band p {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  padding-inline-start: 30px;
  color: var(--white-11);
}
@media only screen and (max-width: 1199px) {
  .global_band p {
    padding-inline-start: 10px;
  }
}
@media only screen and (max-width: 1199px) {
  .global_band .left img {
    max-width: 40px;
  }
}

.happy_client img {
  margin-bottom: 20px;
}
.happy_client .client-info {
  gap: 15px;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 1399px) {
  .happy_client .client-info {
    gap: 10px;
  }
}
.happy_client .client-info p {
  font-size: 14px;
  color: var(--white);
}
.light .happy_client .client-info p {
  color: #3F4061;
}
.happy_client .total {
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  color: var(--white);
  writing-mode: tb;
  transform: rotate(180deg);
}

.client_rating {
  position: relative;
}
.client_rating .client_rating_text p {
  font-size: 20px;
  max-width: 320px;
  color: var(--white);
}
.light .client_rating .client_rating_text p {
  color: #3F4061;
}
@media only screen and (max-width: 1199px) {
  .client_rating .client_rating_text p {
    font-size: 18px;
    max-width: 260px;
  }
}
@media only screen and (max-width: 767px) {
  .client_rating .client_rating_text p {
    font-size: 16px;
  }
}
.client_rating .client_rating_by p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--white);
}

.happy_client_rating {
  gap: 80px;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 1399px) {
  .happy_client_rating {
    gap: 60px;
  }
}
@media only screen and (max-width: 1399px) {
  .happy_client_rating {
    gap: 40px;
  }
}
.happy_client_rating .client_rating {
  position: relative;
}
.happy_client_rating .client_rating::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  top: 0;
  inset-inline-start: -40px;
  background-color: var(--white);
}
@media only screen and (max-width: 1399px) {
  .happy_client_rating .client_rating::before {
    inset-inline-start: -30px;
  }
}
@media only screen and (max-width: 1199px) {
  .happy_client_rating .client_rating::before {
    inset-inline-start: -20px;
  }
}

.wc_call_us {
  gap: 25px;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 991px) {
  .wc_call_us {
    gap: 15px;
  }
}
.wc_call_us:hover a,
.wc_call_us:hover i {
  color: var(--primary);
}
.wc_call_us a {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  text-align: end;
  color: var(--white);
  position: relative;
}
.wc_call_us span {
  font-size: 14px;
  font-weight: 400;
  display: block;
  color: var(--blue-5);
}
.wc_call_us i {
  font-size: 24px;
  color: var(--white);
  transition: all 0.5s;
  transform: rotate(-45deg);
}
.light .wc_call_us i {
  color: var(--black-2);
}

.btn-wrapper {
  position: relative;
  z-index: 1;
}

.call-us-with-btn {
  display: grid;
  grid-gap: 90px;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--blue-9);
  border-bottom: 1px solid var(--blue-9);
  padding: 18px 0;
  position: relative;
}
@media only screen and (max-width: 1199px) {
  .call-us-with-btn {
    grid-gap: 60px;
  }
}
@media only screen and (max-width: 991px) {
  .call-us-with-btn {
    grid-gap: 30px;
  }
}
.call-us-with-btn::after {
  position: absolute;
  content: "";
  width: 1px;
  height: calc(100% - 20px);
  top: 10px;
  inset-inline-start: 50%;
  background-color: var(--blue-9);
}
.call-us-with-btn i {
  color: var(--primary);
}
.call-us-with-btn a {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--white);
}
@media only screen and (max-width: 767px) {
  .call-us-with-btn a {
    font-size: 16px;
  }
}
.call-us-with-btn a:hover {
  color: var(--primary);
}
.call-us-with-btn a:hover img {
  margin-inline-start: 10px;
}
.call-us-with-btn a img {
  margin-inline-start: 5px;
  transition: all 0.3s;
}
.light .call-us-with-btn a img {
  filter: brightness(0.2);
}

.progress__item .sonny_progressbar .progress-percent, .progress__item-2 .sonny_progressbar .progress-percent {
  font-weight: 500;
  font-size: 15px;
  color: var(--white);
  text-transform: uppercase;
  inset-inline-end: auto;
  inset-inline-end: 0;
}

.skill4_wrapper__title {
  color: var(--white);
  margin-bottom: 60px;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  font-family: "Lora", serif;
}
@media only screen and (max-width: 767px) {
  .skill4_wrapper__title {
    margin-bottom: 50px;
  }
}

.video__full video {
  width: 100%;
  height: 750px;
  object-fit: cover;
}
@media only screen and (max-width: 1399px) {
  .video__full video {
    height: 700px;
  }
}
@media only screen and (max-width: 1199px) {
  .video__full video {
    height: 450px;
  }
}
@media only screen and (max-width: 991px) {
  .video__full video {
    height: 400px;
  }
}
@media only screen and (max-width: 767px) {
  .video__full video {
    height: 300px;
  }
}
.video__full iframe {
  width: 100%;
  height: 750px;
  object-fit: cover;
  margin-bottom: -6px;
}
@media only screen and (max-width: 1399px) {
  .video__full iframe {
    height: 700px;
  }
}
@media only screen and (max-width: 1199px) {
  .video__full iframe {
    height: 450px;
  }
}
@media only screen and (max-width: 991px) {
  .video__full iframe {
    height: 400px;
  }
}
@media only screen and (max-width: 767px) {
  .video__full iframe {
    height: 300px;
  }
}
.video__full img {
  width: 100%;
  height: 750px;
  object-fit: cover;
}
@media only screen and (max-width: 1399px) {
  .video__full img {
    height: 700px;
  }
}
@media only screen and (max-width: 1199px) {
  .video__full img {
    max-height: 500px;
  }
}
@media only screen and (max-width: 991px) {
  .video__full img {
    height: 400px;
  }
}
@media only screen and (max-width: 767px) {
  .video__full img {
    height: 300px;
  }
}

.play_video_on_hover {
  max-width: 100%;
}

.line-pos {
  position: relative;
}
.line-pos::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 200px;
  inset-inline-start: 50%;
  top: -100px;
  background: var(--gray-2);
  z-index: 9;
}
@media only screen and (max-width: 1199px) {
  .line-pos::before {
    height: 120px;
    top: -60px;
  }
}

.instagram__item {
  overflow: hidden;
  position: relative;
}
.instagram__item img {
  width: 100%;
  transition: all 3s;
}
.instagram__item a {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  inset-inline-start: 0;
}
.instagram__item a::after {
  position: absolute;
  content: "";
  width: 0%;
  height: 100%;
  inset-inline-start: 0;
  top: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: all 1s;
  background-color: rgba(0, 0, 0, 0.5);
}
.instagram__item a i {
  display: inline-block;
  position: absolute;
  inset-inline-start: 0%;
  top: 50%;
  z-index: 9;
  font-size: 20px;
  color: var(--white);
  opacity: 0;
  transition: all 1s;
  transform: translate(-50%, -50%);
}
.instagram__item:hover a::after {
  opacity: 1;
  width: 100%;
}
.instagram__item:hover a i {
  opacity: 1;
  inset-inline-start: 50%;
}
.instagram__item:hover img {
  transform: scale(1.1);
}
.instagram__item-2 {
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .instagram__item-2:last-child {
    display: none;
  }
}
.instagram__item-2 img {
  width: 100%;
  transition: all 0.5s;
}

.big-letter {
  font-size: 30px;
  color: var(--white);
  font-family: "Prata", serif;
  text-transform: uppercase;
  display: inline-block;
  line-height: 1;
}

.light .menu-icon::after, .light .menu-icon-2::after, .light .menu-icon::before, .light .menu-icon-2::before,
.light .menu-icon span,
.light .menu-icon-2 span {
  background: var(--black-2);
}
.light .menu-icon:hover::after, .light .menu-icon-2:hover::after, .light .menu-icon:hover::before, .light .menu-icon-2:hover::before,
.light .menu-icon:hover span,
.light .menu-icon-2:hover span {
  background: var(--primary);
}
.light .icon-circle {
  background-color: var(white-2);
}
.light .brand__title {
  color: var(--black-2);
}
.light .follow_on_social {
  border-left: 1px solid var(--gray-4);
}
.light .skill__item {
  background-color: var(--white-3);
}
.light .skill__item .percentage {
  color: var(--black-2);
}
.light .experience__item {
  background-color: var(--white-3);
}
.light .experience__item .exp-title {
  color: var(--black-2);
}
.light .brand__title-2 {
  color: var(--black-2);
}
.light .project_completed .title,
.light .project_completed .text {
  color: var(--black-2);
}
.light .work_process-2 button {
  color: var(--black-6);
}
.light .work_process-2 button:hover {
  color: var(--primary);
}
.light .work_process-2 span {
  color: var(--black-2);
}
.light .global_band .title {
  color: var(--black-2);
}
.light .subscribe_me {
  border-color: var(--black-2);
}
.light .subscribe_me li {
  color: var(--black-2);
}
.light .subscribe_me li a {
  color: var(--black-2);
}
.light .skill4_wrapper__title,
.light .progress__item .sonny_progressbar .progress-percent,
.light .progress__item-2 .sonny_progressbar .progress-percent {
  color: var(--black-2);
}
.light .text-pos,
.light .photographer__hero-thcontent p {
  color: var(--black-2);
}
.light .happy_client_rating .client_rating::before {
  background-color: var(--black-2);
}
.light .client_rating p {
  color: var(--black-2);
}
.light .client_rating .rated-by {
  color: var(--black-2);
}
.light .call-us-with-btn a {
  color: var(--black-2);
}
.light .call-us-with-btn a span {
  color: var(--black-3);
}
.light .separator {
  background-color: var(--blue-5);
}
.light .wc_call_us a {
  color: var(--black-2);
}
.light .wc_call_us a:hover {
  color: var(--primary);
}
.light .wc_call_us a span {
  color: var(--blue-6);
}
.light .separator-4 {
  background-color: var(--black-2);
}

.btn-wrapper {
  display: inline-block;
}

.subscribe-circle {
  width: 150px;
  height: 150px;
  position: relative;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.subscribe-circle .text {
  animation: spinner 4s infinite linear;
}
.subscribe-circle .arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.subscribe-circle-wrap {
  position: absolute;
  inset-inline-end: 200px;
  top: 59%;
  z-index: 3;
}
@media only screen and (max-width: 1919px) {
  .subscribe-circle-wrap {
    inset-inline-end: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .subscribe-circle-wrap {
    top: unset;
    bottom: 12%;
  }
}
.subscribe-circle-2 {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.1;
  text-align: center;
  color: var(--black-2);
  background: var(--white);
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.subscribe-circle-2 span {
  width: 106px;
  height: 106px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.subscribe-circle-2 span::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  inset-inline-start: 0;
  top: 0;
  border-radius: 50%;
  border: 1px dashed var(--black-2);
  animation: spinner 6s 0s infinite linear;
}

.hover-border {
  position: relative;
}
.hover-border:hover::after {
  width: 100%;
  inset-inline-end: auto;
  inset-inline-start: 0;
}
.hover-border::after {
  position: absolute;
  content: "";
  width: 0%;
  height: 3px;
  inset-inline-end: 0;
  bottom: 0;
  transition: all 0.5s;
  background-color: var(--black-2);
}

.text__slider .swiper-wrapper {
  transition-timing-function: linear;
}
.text__slider .text-slide-content {
  gap: 20px;
  display: flex;
  align-items: center;
}
.text__slider .swiper-slide {
  width: auto;
}
.text__slider .title {
  color: var(--white);
}
.light .text__slider .title {
  color: var(--black-2);
}

.hover-left-right {
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-image: linear-gradient(to right, var(--primary) 45%, var(--white) 55%);
  transition: all 1s ease-out;
}
.hover-left-right:hover {
  background-position: 0% 50%;
}

.light .hover-left-right {
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-image: linear-gradient(to right, var(--primary) 45%, var(--black-2) 55%);
  transition: all 1s ease-out;
}
.light .hover-left-right:hover {
  background-position: 0% 50%;
}

.char-lg {
  font-size: 54px;
  font-weight: 500;
  line-height: 1;
  color: var(--white);
  padding-inline-end: 10px;
  text-transform: uppercase;
  float: left;
}
.light .char-lg {
  color: var(--black-2);
}

.price__btn {
  display: flex;
  margin-top: 32px;
}
.price__btn .price {
  display: inline-block;
  height: 55px;
  width: 55px;
  border-radius: 50px;
  text-align: center;
  line-height: 55px;
  background-color: var(--green);
  color: var(--white);
  font-weight: 500;
  z-index: 2;
  margin-inline-start: -27px;
  margin-top: -32px;
}

.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.png");
  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;
  margin-bottom: 10px;
  display: inline-block;
  width: 100%;
}
.list-plus li::before {
  content: "+";
  position: absolute;
  inset-inline-start: 0;
  top: -10px;
  font-size: 30px;
  font-weight: 300;
}
.list-plus li:last-child {
  margin-bottom: 0;
}

.light .subscribe-circle-2 {
  color: var(--white);
  background: var(--black-2);
}
.light .subscribe-circle-2 span::after {
  border-color: var(--white);
}

.text_invert > div {
  background-image: linear-gradient(to right, rgb(255, 255, 255) 50%, rgb(66, 60, 60) 50%);
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
.light .text_invert > div {
  background-image: linear-gradient(to right, rgb(0, 0, 0) 50%, rgba(66, 60, 60, 0.5) 50%);
}

.timeline-wrapper {
  position: relative;
}
.timeline-wrapper.dark-about-wrap::before {
  background-color: var(--gray-9);
}
.timeline-wrapper::before {
  content: "";
  width: 1px;
  height: 100%;
  background-color: var(--gray);
  position: absolute;
  inset-inline-end: 50%;
  top: 0;
}
.light .timeline-wrapper::before {
  background-color: #E9E9E9;
}
@media only screen and (max-width: 991px) {
  .timeline-wrapper::before {
    display: none;
  }
}
.timeline-item {
  max-width: 50%;
  padding-inline-end: 80px;
  grid-gap: 65px;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  text-align: end;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 1399px) {
  .timeline-item {
    grid-gap: 40px;
  }
}
@media only screen and (max-width: 1199px) {
  .timeline-item {
    grid-template-columns: auto;
    padding-inline-end: 60px;
  }
}
@media only screen and (max-width: 991px) {
  .timeline-item {
    max-width: 92%;
    grid-template-columns: auto auto;
  }
}
@media only screen and (max-width: 767px) {
  .timeline-item {
    text-align: center;
    grid-template-columns: auto;
    max-width: 100%;
    padding-inline-end: 0;
  }
}
.timeline-item:nth-child(even) {
  margin-inline-start: auto;
  padding-inline-end: 0;
  padding-inline-start: 80px;
}
@media only screen and (max-width: 1199px) {
  .timeline-item:nth-child(even) {
    padding-inline-start: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .timeline-item:nth-child(even) {
    padding-inline-start: 0;
  }
}
.timeline-item:nth-child(even) .timeline-content {
  order: 2;
  text-align: start;
}
@media only screen and (max-width: 1199px) {
  .timeline-item:nth-child(even) .timeline-content {
    order: unset;
  }
}
@media only screen and (max-width: 991px) {
  .timeline-item:nth-child(even) .timeline-content {
    order: 2;
  }
}
@media only screen and (max-width: 767px) {
  .timeline-item:nth-child(even) .timeline-content {
    text-align: center;
    order: 1;
  }
}
.timeline-item:nth-child(even) .timeline-thumb {
  order: 1;
}
@media only screen and (max-width: 1199px) {
  .timeline-item:nth-child(even) .timeline-thumb {
    text-align: start;
    order: unset;
  }
}
@media only screen and (max-width: 991px) {
  .timeline-item:nth-child(even) .timeline-thumb {
    order: 1;
  }
}
@media only screen and (max-width: 767px) {
  .timeline-item:nth-child(even) .timeline-thumb {
    text-align: center;
    order: 2;
  }
}
@media only screen and (max-width: 767px) {
  .dir-rtl .timeline-item:nth-child(even) .timeline-thumb {
    text-align: center;
  }
}
.timeline-item:nth-child(even) .timeline-count {
  right: auto;
  left: 0;
  transform: translateY(-50%) translateX(-50%);
}
@media only screen and (max-width: 767px) {
  .timeline-item:nth-child(even) .timeline-count {
    right: 50%;
    left: unset;
  }
  .dir-rtl .timeline-item:nth-child(even) .timeline-count {
    transform: translateX(-50%);
  }
}
.timeline-item:nth-child(even) .timeline-count::before {
  inset-inline-end: unset;
  inset-inline-start: calc(100% + 20px);
}
@media only screen and (max-width: 991px) {
  .timeline-item:not(:last-child) {
    margin-bottom: 70px;
  }
}
.timeline-since {
  font-weight: 400;
  font-size: 50px;
  line-height: 1;
  display: block;
  color: var(--white);
}
@media only screen and (max-width: 991px) {
  .timeline-since {
    font-size: 30px;
  }
}
.timeline-ititle {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  color: var(--white);
  display: block;
  margin-top: 18px;
  margin-bottom: 34px;
}
.timeline-idis p {
  font-size: 18px;
  line-height: 1.3;
}
@media only screen and (max-width: 767px) {
  .timeline-idis p {
    max-width: 400px;
    margin: 0 auto;
  }
}
.timeline-count {
  font-weight: 400;
  font-size: 30px;
  line-height: 70px;
  background: var(--black-10);
  color: var(--white);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateX(50%);
  z-index: 1;
}
@media only screen and (max-width: 767px) {
  .timeline-count {
    display: none;
  }
}
.timeline-count::before {
  content: "";
  height: 1px;
  width: 70px;
  background: var(--white);
  position: absolute;
  top: 50%;
  inset-inline-end: calc(100% + 20px);
}

.cf__classDetails-wrapper {
  text-align: center;
}
.cf__classDetails-subtitle {
  font-size: 18px;
  line-height: 1.2;
}
@media only screen and (max-width: 991px) {
  .cf__classDetails-subtitle br {
    display: none;
  }
}
.cf__classDetails-title {
  font-weight: 400;
  font-size: 180px;
  line-height: 1.1;
}
@media only screen and (max-width: 1399px) {
  .cf__classDetails-title {
    font-size: 90px;
  }
}
@media only screen and (max-width: 991px) {
  .cf__classDetails-title {
    font-size: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .cf__classDetails-title {
    font-size: 60px;
  }
}
.cf__classDetails-dis {
  font-weight: 400;
  font-size: 50px;
}
@media only screen and (max-width: 1399px) {
  .cf__classDetails-dis {
    font-size: 40px;
  }
}
@media only screen and (max-width: 991px) {
  .cf__classDetails-dis {
    font-size: 30px;
  }
}
.cf__classDetails-content {
  text-align: start;
}
.cf__classDetails-title2 {
  font-weight: 400;
  font-size: 90px;
  line-height: 1;
  display: block;
}
@media only screen and (max-width: 1399px) {
  .cf__classDetails-title2 {
    font-size: 70px;
  }
}
@media only screen and (max-width: 1199px) {
  .cf__classDetails-title2 {
    font-size: 60px;
  }
}
@media only screen and (max-width: 991px) {
  .cf__classDetails-title2 {
    font-size: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .cf__classDetails-title2 {
    font-size: 40px;
  }
}
@media only screen and (max-width: 991px) {
  .cf__classDetails-title2 br {
    display: none;
  }
}
.cf__classDetails-dis2 p {
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
}
@media only screen and (max-width: 991px) {
  .cf__classDetails-dis2 p {
    font-size: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .cf__classDetails-dis2 p {
    font-size: 18px;
  }
}
.cf__classDetails-items {
  text-align: start;
}
.cf__classDetails-itemwrap {
  text-align: start;
}
.cf__classDetails-itemwrap p {
  padding-bottom: 30px;
}
.cf__classDetails-ltitle {
  font-family: "gallient";
  font-weight: 400;
  font-size: 50px;
  line-height: 1.2;
  color: var(--white);
}
.cf__classDetails-ltitle.yoga-ltitle {
  text-align: start;
}
@media only screen and (max-width: 1399px) {
  .cf__classDetails-ltitle.yoga-ltitle {
    padding-bottom: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .cf__classDetails-ltitle.yoga-ltitle {
    font-size: 30px;
  }
}
.cf__classDetails-servicelist {
  column-count: 2;
  margin-top: 20px;
}
@media only screen and (max-width: 1199px) {
  .cf__classDetails-servicelist {
    column-count: 1;
  }
}
.cf__classDetails-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media only screen and (max-width: 991px) {
  .cf__classDetails-item {
    grid-template-columns: 1fr 1.3fr;
  }
}
@media only screen and (max-width: 767px) {
  .cf__classDetails-item {
    grid-template-columns: 1fr;
  }
}
.cf__classDetails-item:not(:first-child) {
  margin-top: 60px;
}
@media only screen and (max-width: 767px) {
  .cf__classDetails-item:not(:first-child) {
    margin-top: 40px;
  }
}
.cf__classDetails-thumb1 {
  margin-top: 30px;
}
@media only screen and (max-width: 1199px) {
  .cf__classDetails-thumb1 img {
    max-width: 100%;
  }
}
@media only screen and (max-width: 767px) {
  .cf__classDetails-left {
    padding-bottom: 10px;
  }
}
.cf__classDetails-list {
  font-size: 50px;
  color: var(--white);
  display: flex;
  gap: 35px;
}
@media only screen and (max-width: 1399px) {
  .cf__classDetails-list {
    font-size: 40px;
  }
}
@media only screen and (max-width: 1199px) {
  .cf__classDetails-list {
    gap: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .cf__classDetails-list {
    gap: 10px;
    font-size: 30px;
  }
}
.cf__classDetails-right p {
  font-size: 18px;
}

.cf_details-image-wrapper {
  display: inline-block;
}
.cf_details-image-title {
  font-size: 14px !important;
}
.cf_details-contentmiddle {
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  gap: 30px;
}
@media only screen and (max-width: 1399px) {
  .cf_details-contentmiddle {
    grid-template-columns: 1fr;
  }
}
@media only screen and (max-width: 1199px) {
  .cf_details-contentmiddle {
    gap: 20px;
  }
}

.has-left-line {
  position: relative;
  padding-inline-start: 37px;
  display: inline-block;
}
.has-left-line:before {
  position: absolute;
  content: "";
  width: 30px;
  height: 1px;
  background-color: currentColor;
  inset-inline-start: 0;
  border-inline-start: 1px;
  top: 50%;
}

.pos-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.circle-text {
  width: 150px;
  height: 150px;
  position: relative;
  border-radius: 100px;
  background: var(--black-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle-text .text {
  animation: spinner 5s infinite linear;
}
.circle-text .icon {
  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (max-width: 767px) {
  .circle-text {
    width: 120px;
    height: 120px;
  }
}

.has-indent-line {
  position: relative;
  text-indent: 250px;
}
@media (max-width: 575px) {
  .has-indent-line {
    text-indent: 75px;
  }
}
.has-indent-line:before {
  position: absolute;
  content: "";
  width: 225px;
  height: 1px;
  background: currentColor;
  inset-inline-start: 0;
  top: 30px;
}
@media only screen and (max-width: 1199px) {
  .has-indent-line:before {
    top: 18px;
  }
}
@media (max-width: 575px) {
  .has-indent-line:before {
    width: 50px;
  }
}

.brand__text {
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--white);
  display: inline-block;
  padding: 0 10px;
  text-transform: uppercase;
  transform: translateY(-100%);
  background-color: var(--black-2);
}
.light .brand__text {
  color: var(--black-2);
  background-color: var(--white);
}
.brand__text.sfluence {
  background-color: #272422;
}
.light .brand__text.sfluence {
  background-color: #F0ECE9;
}
.brand__text-wrap {
  text-align: center;
  border-top: 1px solid var(--gray-9);
}
.light .brand__text-wrap {
  border-color: #D7D0CC;
}

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

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

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

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

.swiper-button-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/*
  Default search styles 
*/
.info-search__area {
  position: fixed;
  width: 300px;
  right: 60px;
  top: 120%;
  padding: 15px 20px;
  background-color: transparent;
  border-radius: 10px;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  border: 1px solid var(--white);
}
.info-search__area.visible {
  opacity: 1;
  visibility: visible;
  top: 140%;
}
.info-search__area form {
  display: grid;
  grid-template-columns: 1fr 20px;
  gap: 10px;
}
.info-search__area input, .info-search__area .cf-details-comment__field textarea, .cf-details-comment__field .info-search__area textarea {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--white);
}
.info-search__area input::placeholder, .info-search__area .cf-details-comment__field textarea::placeholder, .cf-details-comment__field .info-search__area textarea::placeholder {
  font-size: 12px;
  color: var(--white-3);
}
.info-search__area input:focus, .info-search__area .cf-details-comment__field textarea:focus, .cf-details-comment__field .info-search__area textarea:focus {
  outline: 0;
}

.search-icon {
  width: 15px;
}

#search_close {
  display: none;
  cursor: pointer;
}

.container-area {
  container-type: inline-size;
}

/* custom grid layouts */
.grid-cxs-1-auto {
  display: grid;
}
@container (width > 575px) {
  .grid-cxs-1-auto {
    grid-template-columns: auto;
  }
}
.grid-cxs-2-auto {
  display: grid;
}
@container (width > 575px) {
  .grid-cxs-2-auto {
    grid-template-columns: auto auto;
  }
}
.grid-cxs-3-auto {
  display: grid;
}
@container (width > 575px) {
  .grid-cxs-3-auto {
    grid-template-columns: auto auto auto;
  }
}
.grid-cxs-4-auto {
  display: grid;
}
@container (width > 575px) {
  .grid-cxs-4-auto {
    grid-template-columns: auto auto auto auto;
  }
}
.grid-cxs-1-fr {
  display: grid;
}
@container (width > 575px) {
  .grid-cxs-1-fr {
    grid-template-columns: 1fr;
  }
}
.grid-cxs-2-fr {
  display: grid;
}
@container (width > 575px) {
  .grid-cxs-2-fr {
    grid-template-columns: 1fr 1fr;
  }
}
.grid-cxs-3-fr {
  display: grid;
}
@container (width > 575px) {
  .grid-cxs-3-fr {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.grid-cxs-4-fr {
  display: grid;
}
@container (width > 575px) {
  .grid-cxs-4-fr {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.grid-csm-1-auto {
  display: grid;
}
@container (width > 767px) {
  .grid-csm-1-auto {
    grid-template-columns: auto;
  }
}
.grid-csm-2-auto {
  display: grid;
}
@container (width > 767px) {
  .grid-csm-2-auto {
    grid-template-columns: auto auto;
  }
}
.grid-csm-3-auto {
  display: grid;
}
@container (width > 767px) {
  .grid-csm-3-auto {
    grid-template-columns: auto auto auto;
  }
}
.grid-csm-4-auto {
  display: grid;
}
@container (width > 767px) {
  .grid-csm-4-auto {
    grid-template-columns: auto auto auto auto;
  }
}
.grid-csm-1-fr {
  display: grid;
}
@container (width > 767px) {
  .grid-csm-1-fr {
    grid-template-columns: 1fr;
  }
}
.grid-csm-2-fr {
  display: grid;
}
@container (width > 767px) {
  .grid-csm-2-fr {
    grid-template-columns: 1fr 1fr;
  }
}
.grid-csm-3-fr {
  display: grid;
}
@container (width > 767px) {
  .grid-csm-3-fr {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.grid-csm-4-fr {
  display: grid;
}
@container (width > 767px) {
  .grid-csm-4-fr {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.grid-cmd-1-auto {
  display: grid;
}
@container (width > 991px) {
  .grid-cmd-1-auto {
    grid-template-columns: auto;
  }
}
.grid-cmd-2-auto {
  display: grid;
}
@container (width > 991px) {
  .grid-cmd-2-auto {
    grid-template-columns: auto auto;
  }
}
.grid-cmd-3-auto {
  display: grid;
}
@container (width > 991px) {
  .grid-cmd-3-auto {
    grid-template-columns: auto auto auto;
  }
}
.grid-cmd-4-auto {
  display: grid;
}
@container (width > 991px) {
  .grid-cmd-4-auto {
    grid-template-columns: auto auto auto auto;
  }
}
.grid-cmd-1-fr {
  display: grid;
}
@container (width > 991px) {
  .grid-cmd-1-fr {
    grid-template-columns: 1fr;
  }
}
.grid-cmd-2-fr {
  display: grid;
}
@container (width > 991px) {
  .grid-cmd-2-fr {
    grid-template-columns: 1fr 1fr;
  }
}
.grid-cmd-3-fr {
  display: grid;
}
@container (width > 991px) {
  .grid-cmd-3-fr {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.grid-cmd-4-fr {
  display: grid;
}
@container (width > 991px) {
  .grid-cmd-4-fr {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
.grid-clg-1-auto {
  display: grid;
}
@container (width > 1199px) {
  .grid-clg-1-auto {
    grid-template-columns: auto;
  }
}
.grid-clg-2-auto {
  display: grid;
}
@container (width > 1199px) {
  .grid-clg-2-auto {
    grid-template-columns: auto auto;
  }
}
.grid-clg-3-auto {
  display: grid;
}
@container (width > 1199px) {
  .grid-clg-3-auto {
    grid-template-columns: auto auto auto;
  }
}
.grid-clg-4-auto {
  display: grid;
}
@container (width > 1199px) {
  .grid-clg-4-auto {
    grid-template-columns: auto auto auto auto;
  }
}
.grid-clg-1-fr {
  display: grid;
}
@container (width > 1199px) {
  .grid-clg-1-fr {
    grid-template-columns: 1fr;
  }
}
.grid-clg-2-fr {
  display: grid;
}
@container (width > 1199px) {
  .grid-clg-2-fr {
    grid-template-columns: 1fr 1fr;
  }
}
.grid-clg-3-fr {
  display: grid;
}
@container (width > 1199px) {
  .grid-clg-3-fr {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.grid-clg-4-fr {
  display: grid;
}
@container (width > 1199px) {
  .grid-clg-4-fr {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.gap-x-20 {
  column-gap: 20px;
}
.gap-x-30 {
  column-gap: 30px;
}
.gap-x-40 {
  column-gap: 40px;
}
.gap-x-50 {
  column-gap: 50px;
}
.gap-y-20 {
  row-gap: 20px;
}
.gap-y-30 {
  row-gap: 30px;
}
.gap-y-40 {
  row-gap: 40px;
}
.gap-y-50 {
  row-gap: 50px;
}

/* Circular Progress Bars Design start */
@keyframes progress {
  0% {
    --percentage: 0;
  }
  100% {
    --percentage: var(--value);
  }
}
@property --percentage {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
[role=progressbar] {
  --percentage: var(--value);
  --primary: #9A9EFF;
  --secondary: #233259;
  --color-value: #FCFAF5;
  --size: 110px;
  animation: progress 5s 0.5s forwards;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

[role=progressbar]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: conic-gradient(var(--primary) calc(var(--percentage) * 1%), var(--secondary) 0);
  mask: radial-gradient(white 55%, transparent 0);
  mask-mode: alpha;
  -webkit-mask: radial-gradient(rgba(0, 0, 0, 0) 55%, #000 0);
  -webkit-mask-mode: alpha;
}

[role=progressbar]::after {
  counter-reset: percentage var(--value);
  content: counter(percentage) "%";
  font-size: calc(var(--size) / 6);
  font-weight: 600;
  color: var(--color-value);
}

/* dot progress bar design start */
.dot-progress {
  --percentage: var(--value);
  --primary: #9A9EFF;
  --secondary: #233259;
  width: 110px;
  height: 13px;
  -webkit-mask: radial-gradient(circle closest-side, #000 94%, rgba(0, 0, 0, 0)) 0/20%;
  background: radial-gradient(var(--primary) 0 0) 0/0% no-repeat var(--secondary);
  background-size: calc(var(--percentage) * 1%);
  animation: progress 3s linear;
}

/*
   GLOBAL GALLARY
 */
.wc-gallary__area-photo img {
  max-width: 100%;
}
@media only screen and (max-width: 767px) {
  .wc-gallary__area-photo img {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
  }
}

/*
// pagination circle 
*/
.pagination-circle {
  display: flex;
  gap: 18px;
  align-items: center;
}
.pagination-circle li {
  color: var(--white);
}
.light .pagination-circle li {
  color: var(--black-2);
}
.pagination-circle li a.active {
  background-color: var(--black-6);
  height: 50px;
  width: 50px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.light .pagination-circle li a.active {
  color: var(--white);
}
.pagination-circle li a.active:hover {
  background-color: var(--primary);
}
.light .pagination-circle li a img {
  filter: brightness(0);
}

/*----------------------------------------*/
/*  01. THEME CSS START
/*----------------------------------------*/
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: var(--white-9);
  color: var(--gray-4);
}
body.light {
  color: var(--gray);
}

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

.img_anim_reveal {
  visibility: hidden;
  overflow: hidden;
}
.img_anim_reveal img {
  object-fit: cover;
  transform-origin: left;
}

.anim-reveal {
  overflow: hidden;
}

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

.color-white {
  color: var(--white) !important;
}
.light .color-white {
  color: var(--black-2) !important;
}
.color-dark {
  color: var(--black-2) !important;
}
.color-black {
  color: var(--black) !important;
}
.color-gray {
  color: var(--gray) !important;
}
.color-primary {
  color: var(--primary) !important;
}
.color-primarydark {
  color: var(--primarydark) !important;
}
.color-secondary {
  color: var(--secondary) !important;
}
.color-blue {
  color: #6A6BBF !important;
}
.color-blue-2 {
  color: #3F4061 !important;
}
.color-red {
  color: #D20A0A;
}
.color-green {
  color: #83B002;
}
.color-light {
  color: var(--white);
}
.light .color-light {
  color: var(--black-2);
}
.color-purple-light {
  color: #202C58 !important;
}

.wc-bg-dark {
  background-color: #1C1D20 !important;
}
.wc-bg-dark-2 {
  background-color: #272422 !important;
}
.wc-bg-dark-3 {
  background-color: #262629 !important;
}
.wc-bg-dark-4 {
  background-color: #141415 !important;
}
.wc-bg-dark-5 {
  background-color: #212125 !important;
}
.wc-bg-light {
  background-color: #fff !important;
}
.wc-bg-light-2 {
  background-color: #F2F0E5 !important;
}
.wc-bg-light-3 {
  background-color: #F9F9F9 !important;
}
.wc-bg-light-4 {
  background-color: #F2F1F0 !important;
}
.wc-bg-light-5 {
  background-color: #F2F1F0 !important;
}
.wc-bg-light-6 {
  background-color: #F6F3F0 !important;
}
.wc-bg-light-7 {
  background-color: #E4F2F6 !important;
}
.wc-bg-light-8 {
  background-color: #F6F6FA !important;
}
.wc-bg-light-9 {
  background-color: #FBF8F3 !important;
}
.wc-bg-pink {
  background-color: #F2EDE1 !important;
}
.wc-bg-pink-2 {
  background-color: #F4F0ED !important;
}
.wc-bg-purple {
  background-color: #D4BFFF !important;
}
.wc-bg-green {
  background-color: #3C524C !important;
}
.wc-bg-blue-6 {
  background-color: var(--blue-6) !important;
}
.wc-bg-blue-7 {
  background-color: var(--blue-7) !important;
}
.wc-bg-blue-8 {
  background-color: var(--blue-8) !important;
}
.wc-bg-transparent {
  background-color: transparent !important;
}

.zi-0 {
  z-index: 0;
  position: relative;
}
.zi-1 {
  z-index: 1;
  position: relative;
}
.zi-2 {
  z-index: 2;
  position: relative;
}
.zi-3 {
  z-index: 3;
  position: relative;
}
.zi_3 {
  z-index: 3;
}
.zi-5 {
  z-index: 5;
  position: relative;
}
.zi-6 {
  z-index: 6;
  position: relative;
}
.zi-7 {
  z-index: 7;
  position: relative;
}
.zi-8 {
  z-index: 8;
  position: relative;
}
.zi-9 {
  z-index: 9;
  position: relative;
}

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

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

.header__area-6 {
  position: unset;
}

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

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

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

section {
  margin-bottom: -1px;
}

.dir-rtl {
  direction: rtl;
}

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

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

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

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

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

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

.light .icon-circle {
  background-color: var(--white-3);
}

.light .developer-skill__area {
  background-color: var(--white-2);
}
.light .developer-portfolio__area {
  background-color: var(--white-2);
}
.light .developer-brand__area {
  background-color: var(--white-2);
}
.light .developer-hero__title {
  color: var(--black-2);
}
.light .developer-hero__left p {
  color: var(--black-2);
}
.light .developer-hero__social-wrapper {
  border-color: var(--gray-2);
}
.light .developer-hero__social-wrapper .follow-me {
  color: var(--gray);
}
.light .developer-experience__item {
  background-color: var(--white-3);
}
.light .developer-experience__item .exp-title {
  color: var(--black-2);
}
.light .developer-experience__item .company {
  color: var(--gray);
}
.light .developer-award__title {
  color: var(--black-2);
}
.light .developer-award__date {
  color: var(--gray);
}
.light .developer-skill__item {
  background-color: var(--white-3);
}
.light .developer-skill__percentage {
  color: var(--black-2);
}
.light .developer-skill__title {
  color: var(--gray);
}
.light .developer-skill__grid .sonny_progressbar .progress-percent {
  color: var(--black-2);
}
.light .developer-resume__tab-menu ul {
  background-color: var(--white-3);
}
.light .developer-resume__tab-menu ul li a {
  color: var(--black-2);
}
.light .developer-about__top .experience {
  color: var(--black-2);
}
.light .developer-about__top .experience-title {
  color: var(--black-2);
}
.light .developer-about__info li strong {
  color: var(--black-2);
}
.light .developer-about__slide {
  color: var(--white-3);
}
.light .developer-portfolio__title {
  color: var(--black-2);
}
.light .developer-portfolio__date {
  color: var(--gray);
}
.light .developer-service__item a {
  background-color: var(--white-2);
}
.light .developer-service__title {
  color: var(--black-2);
}
.light .developer-testimonial__slider .btn-swiper {
  border: 1px solid var(--gray-4);
}
.light .developer-testimonial__slide p {
  color: var(--black-2);
}
.light .developer-testimonial__slide .client-name {
  color: var(--black-2);
}
.light .developer-testimonial__slide .client-role {
  color: var(--gray);
}
.light .developer-brand__title {
  color: var(--black-2);
}
.light .developer-blog__title a {
  color: var(--black-2);
}
.light .developer-blog__meta li a {
  color: var(--gray);
  background-color: var(--white-3);
}
.light .developer-blog__meta li a:hover {
  color: var(--black-2);
}
.light .developer-blog__link {
  color: var(--gray);
}
.light .developer-blog__link::after {
  background: var(--gray);
}
.light .developer-blog__link:hover {
  color: var(--black-2);
}

/*----------------------------------------*/
/*   INDEX LIGHT VERSION
/*----------------------------------------*/
.light .sidebar-menu li a {
  color: var(--white);
}
.light .pdesigner-blog__area {
  background: var(--white);
}
.light .footer__area-2 {
  background: var(--white);
}
.light .pdesigner-hero__title {
  color: var(--black-2);
}
.light .pdesigner-service__title {
  color: var(--black-2);
}
.light .pdesigner-service__title::before {
  background-color: var(--black-2);
}
.light .pdesigner-service__item {
  border-color: var(--gray-2);
}
.light .pdesigner-service__item:hover .pdesigner-service__number {
  color: var(--black-2);
}
.light .pdesigner-service__item ul li {
  color: var(--black-2);
}
.light .pdesigner-portfolio__btn-list button {
  color: var(--black-2);
}
.light .pdesigner-contact__info {
  padding-left: 1px;
}
.light .pdesigner-contact__type .icon {
  border-color: var(--white-6);
}

/*----------------------------------------*/
/*   FREELANCER LIGHT VERSION
/*----------------------------------------*/
.light .header__area-3::before {
  background: var(--white);
}
.light .sec-title-2 {
  color: var(--white);
}
.light .sec-title-2 {
  color: var(--black-2);
}
.light .footer__address p {
  color: var(--black-2);
}

/*----------------------------------------*/
/*   MARKETER LIGHT VERSION
/*----------------------------------------*/
.light .marketer__expertise, .light .marketer__testimonial {
  background-color: var(--white-2);
}
.light .marketer__hero-line span, .light .marketer__about-left::after {
  background-color: var(--black-9);
}
.light .marketer__hero-shape2, .light .marketer__hero-shape3, .light .marketer__hero-shape6, .light .marketer__hero-shape9 {
  filter: invert(0.8);
}
.light .marketer__work-date {
  color: var(--white);
}
.light .marketer__expertise-dis p, .light .marketer__award-content span, .light .marketer__testimonial-position, .light .marketer__work-workdetails p, .light .marketer__expertise-footer p {
  color: var(--gray);
}
.light .marketer__expertise-item {
  background: linear-gradient(180deg, var(--white-3) 0%, rgba(255, 255, 255, 0) 100%);
}
.light .marketer__expertise-item:hover {
  background-color: var(--white-3);
}
.light .marketer__experience-items {
  border-color: var(--black-9);
}
.light .marketer__experience-items.b-left::before {
  background-color: var(--black-9);
}
.light .marketer__testimonial-item {
  background-color: var(--white-4);
}
.light .marketer__testimonial-wrapper .swiper-pagination span {
  color: var(--black-2);
}
.light .marketer__testimonial-wrapper .dash {
  background: var(--black-2);
}
.light .marketer__about .sec-title-3 {
  color: var(--black-2);
}
.light .marketer__counter-item .text p {
  color: var(--black-2);
}
.light .marketer__about-right a {
  color: var(--black-2);
}
.light .marketer__textslider .title {
  color: var(--black-2);
}

/*----------------------------------------*/
/*   FASHION LIGHT VERSION
/*----------------------------------------*/
.light .fashion__hero {
  background-color: var(--white);
}
.light .fashion__about {
  background-color: var(--white-2);
}
.light .fashion__work {
  background-color: var(--white);
}
.light .fashion__service {
  padding-bottom: 150px;
  background-color: var(--white);
}
.light .fashion__nominated {
  background-color: var(--white);
}
.light .fashion__contact {
  background-color: var(--white);
}
.light .fashion__footer {
  background-color: var(--white-2);
}

/*----------------------------------------*/
/*   ARCHITECHT LIGHT VERSION
/*----------------------------------------*/
.light .architect-hero__area {
  background-color: var(--white);
}
.light .architect-cta__area .line {
  border-color: var(--white-4);
  border-bottom: 2px solid var(--white-4);
}
.light .architect-text__area .title {
  color: var(--black-2);
}
.light .architect-portfolio__title {
  color: var(--black-2);
}
.light .architect-award__title {
  color: var(--black-2);
}
.light .architect-award__item {
  border-color: var(--white-4);
}
.light .architect-cta__title {
  color: var(--black-2);
}

/*----------------------------------------*/
/*   YOGATRAINER LIGHT VERSION
/*----------------------------------------*/
.light .plan__item {
  border-color: var(--gray-4);
}

.light .joya__contact-formfield input::placeholder, .light .joya__contact-formfield .cf-details-comment__field textarea::placeholder, .cf-details-comment__field .light .joya__contact-formfield textarea::placeholder {
  color: var(--black-2);
}
.light .joya__contact-msg input::placeholder, .light .joya__contact-msg .cf-details-comment__field textarea::placeholder, .cf-details-comment__field .light .joya__contact-msg textarea::placeholder {
  color: var(--black-2);
}
.light .joya__contact-checkbox input, .light .joya__contact-checkbox .cf-details-comment__field textarea, .cf-details-comment__field .light .joya__contact-checkbox textarea {
  border: 1px solid var(--black-2);
}
.light .joya__contact-checkbox label::before {
  filter: brightness(0);
}
.light .photographertwo__photo-title2 {
  color: var(--black-2);
}

/*----------------------------------------*/
/*   WRITER LIGHT VERSION
/*----------------------------------------*/
.light .writer-hero__area::after {
  position: absolute;
  background: linear-gradient(180deg, rgba(28, 29, 32, 0) 0%, var(--white-9) 85%);
}
.light .writer-about__area .sec-title-11::after {
  background: var(--gray-2);
}
.light .writer-blog__area .sec-title-wrap::after {
  background: var(--gray-2);
}
.light .writer-blog__area .sec-title-wrap a {
  color: var(--gray-10);
}
.light .writer-blog__area .sec-title-wrap a:hover {
  color: var(--black-2);
}
.light .writer-hero__top .link {
  color: var(--black-2);
  border-top: 1px solid var(--black-2);
}
.light .writer-hero__top .link::after {
  filter: invert(1);
}
.light .writer-hero__top .link img {
  filter: invert(1);
}
.light .writer-hero__title {
  color: var(--black-2);
}
.light .writer-hero__btm .right p {
  color: var(--black-2);
}
.light .writer-about__content .read {
  color: var(gray-10);
}
.light .writer-featured__title {
  color: var(--black-2);
}
.light .writer-portfolio__top {
  border-color: var(--gray-2);
}
.light .writer-portfolio__item .date {
  color: var(--gray-10);
}
.light .writer-portfolio__item .title {
  color: var(--black-2);
}
.light .writer-portfolio__info a {
  color: var(--gray-10);
  border-color: var(--gray-10);
}
.light .writer-portfolio__info a:hover {
  color: var(--black-2);
  border-color: var(--black-2);
}
.light .writer-publish__title {
  color: var(--black-2);
}
.light .writer-publish__sub-title {
  color: var(--black-2);
}
.light .writer-publish__sub-title span {
  background: var(--black-2);
}
.light .writer-publish__year .year {
  color: var(--black-2);
}
.light .writer-publish__book .name {
  color: var(--gray-10);
}
.light .writer-publish__book p {
  color: var(--gray-10);
}
.light .writer-publish__note {
  border-color: var(--gray-2);
}
.light .writer-publish__note p {
  border-color: var(--gray-2);
  color: var(--gray-10);
}
.light .writer-publish__note p span {
  color: var(--black-2);
}
.light .writer-award__title {
  color: var(--black-2);
}
.light .writer-award__title span {
  color: var(--white);
  background-color: var(--black-2);
}
.light .writer-award__content p {
  color: var(--gray-10);
}
.light .writer-award__content p span {
  color: var(--black-2);
}
.light .writer-award__content p a {
  color: var(--black-2);
}
.light .writer-award__content p a::after {
  background-color: var(--black-2);
}
.light .writer-award__right .title {
  color: var(--black-2);
  border-color: var(--gray-2);
}
.light .follow-instagram p::after {
  background-color: var(--black-2);
}
.light .follow-instagram p a {
  color: var(--black-2);
}
.light .follow-instagram p a:hover {
  color: var(--gray-10);
}

/*----------------------------------------*/
/*   ARTIST LIGHT VERSION
/*----------------------------------------*/
.light .artist__textslider-area {
  background-color: var(--black-2);
}
.light .artist__header-menu li a {
  color: var(--black-2);
}
.light .artist__header-menu li a:hover {
  color: var(--primary);
}
.light .artist__showcase-name {
  color: var(--black-2);
}
.light .artist__showcase-title {
  color: var(--black-2);
}
.light .artist__gallary-content span {
  color: var(--black-2);
}
.light .artist__exhibition-title {
  color: var(--black-2);
}
.light .artist__exhibition-location * {
  color: var(--black-2);
}
.light .artist__exhibition-location, .light .artist__exhibition-item {
  border-color: var(--gray-4);
}
.light .artist__profile-name {
  color: var(--black-2);
}
.light .artist__profile-item span:last-of-type {
  color: var(--black-2);
}

/*----------------------------------------*/
/*   SOCIAL INFLUENCE LIGHT VERSION
/*----------------------------------------*/
.light .double-border::before,
.light .double-border::after {
  background-color: var(--black-2);
}
.light .get-touch {
  color: var(--black-2);
  border-color: var(--black-2);
}
.light .sfluence-brand__area {
  border-color: var(--white-11);
}
.light .sfluence-brand__area .text {
  background-color: var(--white-2);
}
.light .sfluence-blog__area .sec-text p {
  color: var(--gray-10);
}
.light .sfluence-blog__area .sec-text a {
  filter: invert(0);
}
.light .sfluence-hero__mid p {
  color: var(--gray-10);
}
.light .sfluence-hero__mid .subscribe {
  border-color: var(--gray-10);
}
.light .sfluence-hero__mid .subscribe::after {
  background: var(--gray-10);
}
.light .sfluence-hero__mid .subscribe li {
  color: var(--gray-10);
}
.light .sfluence-hero__mid .subscribe li img {
  filter: invert(1);
}
.light .sfluence-hero__mid .subscribe li a {
  color: var(--gray-10);
}
.light .sfluence-hero__top .video-wrap button {
  color: var(--black-2);
}
.light .sfluence-hero__top .wrap {
  background-image: url(../imgs/social-influence/shape-5.png);
}
.light .sfluence-hero__btm .sub-title {
  color: var(--black-2);
}
.light .sfluence-hero__btm .band p {
  color: var(--black-2);
}
.light .sfluence-hero__btm .band img {
  filter: invert(1);
}
.light .sfluence-hero__btm .arrow {
  filter: invert(1);
}
.light .sfluence-service__title {
  color: var(--black-2);
}
.light .sfluence-service__title::before {
  background-color: var(--black-2);
}
.light .sfluence-service__top p {
  color: var(--gray-10);
}
.light .sfluence-service__list {
  border-color: #D7D0CC;
}
.light .sfluence-service__info .logos::before {
  background-color: #D7D0CC;
}
.light .sfluence-service__btm .wc-btn {
  color: var(--black-2);
  border-color: var(--black-2);
}
.light .sfluence-service__btm .arrow {
  filter: invert(1);
}
.light .sfluence-blog__item::after {
  background-color: #D7D0CC;
}
.light .sfluence-blog__item .thumb:hover {
  border-color: #D7D0CC;
}
.light .sfluence-video__title {
  color: var(--black-2);
}
.light .sfluence-video__top p {
  color: var(--black-2);
}
.light .sfluence-video__btm .mid-line {
  background: var(--black-2);
}
.light .sfluence-video__btm .swiper-pagination-fraction {
  color: var(--black-2);
}
.light .sfluence-event__top p {
  color: var(--gray-10);
}
.light .sfluence-event__top p::before {
  background: var(--black-2);
}
.light .sfluence-event__list a {
  border-color: var(--gray-10);
}
.light .sfluence-event__item .title,
.light .sfluence-event__item .text,
.light .sfluence-event__item .date,
.light .sfluence-event__item .location {
  color: var(--black-2);
}
.light .sfluence-event__item .link img {
  filter: invert(1);
}

.line {
  position: relative;
}
.line-col-4 div {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--black-5);
}
.line-col-4 div:nth-child(2) {
  left: 33.33%;
}
.line-col-4 div:nth-child(3) {
  left: 66.66%;
}
.line-col-4 div:nth-child(4) {
  left: 100%;
}
.line-col-3 div {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  top: 0;
  left: 0;
  background: var(--black-5);
}
.line-col-3 div:nth-child(2) {
  left: 50%;
}
.line-col-3 div:nth-child(3) {
  left: 100%;
}

.light .line-col-4 div, .light .line-col-3 div {
  background: var(--white-4);
}

/* Preloader */
.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 0.2em auto;
  }
}
.container-preloader .animation-preloader .txt-loading {
  font: bold 5em "Montserrat", sans-serif;
  text-align: center;
  user-select: none;
}
.container-preloader .animation-preloader .txt-loading .characters {
  color: var(--white);
  position: relative;
  display: inline-block;
}
.light .container-preloader .animation-preloader .txt-loading .characters {
  color: rgba(0, 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: 0.2s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(3):before {
  animation-delay: 0.4s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(4):before {
  animation-delay: 0.6s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(5):before {
  animation-delay: 0.8s;
}
.container-preloader .animation-preloader .txt-loading .characters:nth-child(6):before {
  animation-delay: 1s;
}
.container-preloader .loader-section {
  background-color: var(--black-2);
  height: 100%;
  position: fixed;
  top: 0;
  width: calc(50% + 1px);
}
.light .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: 0.3s ease-out;
}
.loaded .loader-section.section-left {
  transform: translateX(-101%);
  transition: 0.7s 0.3s all cubic-bezier(0.1, 0.1, 0.1, 1);
}
.loaded .loader-section.section-right {
  transform: translateX(101%);
  transition: 0.7s 0.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 0.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.png);
  background-position: right center;
  background-repeat: no-repeat;
  right: 16%;
  visibility: hidden;
  opacity: 0;
  z-index: 9;
  transition: all 0.5s;
}
.light .go-top-writer {
  color: var(--black-2);
  background-image: url(../imgs/writer/go-top-light.png);
}
.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: "\f062";
  font: var(--fa-font-solid);
  text-align: center;
  line-height: 46px;
  font-size: 20px;
  color: var(--white);
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 1;
  transition: all 200ms linear;
}

.progress-wrap svg path {
  fill: var(--black-6);
}

.progress-wrap svg.progress-circle path {
  stroke: var(--primary);
  stroke-width: 4;
  box-sizing: border-box;
  transition: all 200ms linear;
}

.light .scroll__down p {
  color: var(--black-2);
}
.light .scroll__down span {
  border-color: var(--white-3);
}
.light .scroll__down span i {
  color: var(--black-2);
}
.light.go-top-writer {
  color: var(--black-2);
  background-color: transparent;
  background-image: url(../imgs/writer/go-top-light.png);
}
.light.progress-wrap {
  margin: 0;
  background-color: transparent;
}
.light.progress-wrap svg path {
  fill: var(--black-2);
}
.light.progress-wrap::after {
  color: var(--white);
}

/*----------------------------------------*/
/*  01. Button CSS START
/*----------------------------------------*/
.b-radius {
  border-radius: 12px;
}

.wc-btn {
  display: inline-block;
}
.wc-btn-default {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--white);
  background: transparent;
  border-radius: 100px;
  padding: 17px 35px;
  display: inline-flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--black-6);
  overflow: hidden;
  transition: all 0.3s;
}
.wc-btn-default:hover {
  color: var(--white);
}
.light .wc-btn-default {
  color: var(--black-2);
}
.light .wc-btn-default:hover {
  color: var(--black-2);
}
.dir-rtl .wc-btn-default i {
  transform: rotateY(180deg);
}
.wc-btn-border {
  gap: 10px;
  display: inline-flex;
  align-items: center;
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  padding: 16px 30px;
  border: 1px solid var(--white);
  overflow: hidden;
  transition: all 0.3s;
  z-index: 1;
  position: relative;
}
.wc-btn-border:hover {
  color: var(--white);
}
.light .wc-btn-border {
  color: var(--black-2);
  border-color: var(--black-2);
}
.light .wc-btn-border:hover {
  color: var(--black-2);
}
.wc-btn-primary {
  padding: 22px 40px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  color: var(--black-2);
  background-color: var(--primary);
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  z-index: 1;
  border-radius: 0.25rem;
  gap: 10px;
  color: #FFF;
  border: 2px solid var(--primary);
}
.wc-btn-primary:hover {
  color: var(--black-2);
  background-color: var(--white);
  border: 2px solid var(--primary);
  color: var(--primary);
}
.light .wc-btn-primary:hover {
  color: var(--white);
  background-color: var(--black-2);
}
.dir-rtl .wc-btn-primary i {
  transform: rotateY(180deg);
}
.wc-btn-transparent {
  background: transparent;
}
.wc-btn-transparent-white {
  color: #FFF !important;
  border-color: #FFF;
}
.wc-btn-transparent-white:hover {
  color: var(--primary) !important;
}
.wc-btn-circle {
  text-align: center;
  width: 140px;
  height: 140px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--black-2);
  border-radius: 100%;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  background-color: var(--primary);
}
@media only screen and (max-width: 1199px) {
  .wc-btn-circle {
    width: 130px;
    height: 130px;
  }
}
.wc-btn-circle:hover {
  color: var(--white);
}
.wc-btn-oval {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--white);
  border: 1px solid #3F3A36;
  display: inline-block;
  padding: 32px 52px;
  text-align: center;
  transition: all 0.3s;
  border-radius: 50% 50% 50% 50%/50% 50% 50% 50%;
}
.light .wc-btn-oval {
  color: var(--black-2);
}
.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-2) !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;
}
.light .wc-btn-ellipse {
  color: var(--black-2);
  background-color: var(--black-2);
}
.wc-btn-ellipse:before {
  position: absolute;
  content: "";
  width: calc(100% - 14px);
  height: calc(100% - 2px);
  background-color: var(--black-2);
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  border-top-left-radius: 200%;
  border-bottom-right-radius: 200%;
}
.light .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-underline {
  gap: 10px;
  align-items: center;
  display: inline-flex;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: var(--white);
  padding-bottom: 5px;
  position: relative;
}
.wc-btn-underline::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 0;
  background-color: currentColor;
  transition: all 0.3s;
}
.light .wc-btn-underline {
  color: var(--black-2);
}
.wc-btn-underline:hover {
  color: var(--primary);
}
.wc-btn-underline:hover::after {
  width: 0%;
}
.wc-btn-link {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.7;
  color: var(--white);
  display: inline-block;
  text-transform: uppercase;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.light .wc-btn-link {
  color: var(--black-2);
}
.wc-btn-link i {
  transform: rotate(-45deg);
  transition: all 0.3s;
}
.wc-btn-link:hover {
  color: var(--primary);
}
.wc-btn-link:hover i {
  transform: rotate(0);
  color: var(--primary);
}

.about-btn {
  display: inline-block;
  padding: 15px 30px;
  background-color: var(--primary);
  color: var(--black-2);
  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);
}
.light .play_btn_5 i {
  color: var(--black-2);
}
.light .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-2);
  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;
}
.light .wc-btns-group .btn-wrapper:last-child a {
  background: var(--black-2);
  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);
}
.light .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-2);
  border: 1px solid var(--primary);
}
.btn-hover-bgchange:hover span {
  width: 400px;
  height: 400px;
}

@keyframes mask_animation {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}
@keyframes mask_animation_2 {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.btn-hover-default {
  transition: all 0.5s;
}
.btn-hover-default:hover {
  color: var(--black-2);
  background-color: var(--white);
}
.btn-hover-cross {
  overflow: hidden;
  position: relative;
  transition: all 1s;
}
.btn-hover-cross::after {
  position: absolute;
  content: "";
  width: 150%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: var(--primary);
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transition: all 0.75s;
  opacity: 0.5;
  z-index: -1;
}
.btn-hover-cross:hover {
  border-color: var(--primary);
  background-color: transparent;
}
.btn-hover-cross:hover::after {
  height: 120%;
  opacity: 1;
}
.btn-hover-divide {
  overflow: hidden;
  position: relative;
  transition: all 1s;
  z-index: 1;
}
.btn-hover-divide::after {
  position: absolute;
  content: "";
  width: 150%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: var(--primary);
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
  transition: all 0.75s;
  opacity: 0.5;
  z-index: -1;
}
.btn-hover-divide:hover {
  border-color: var(--primary);
  background-color: transparent !important;
  border-color: transparent;
}
.btn-hover-divide:hover::after {
  height: 400%;
  opacity: 1;
}
.btn-hover-cropping {
  overflow: hidden;
  position: relative;
  transition: all 1s;
}
.btn-hover-cropping::after {
  position: absolute;
  content: "";
  width: 150%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: var(--primary);
  transform: translateX(-50%) translateY(-50%) rotate(25deg);
  transition: all 0.75s;
  opacity: 0.5;
  z-index: -1;
}
.btn-hover-cropping:hover {
  border-color: var(--primary);
  background-color: transparent;
}
.btn-hover-cropping:hover::after {
  height: 400%;
  opacity: 1;
}
.btn-hover-mask {
  gap: 10px;
  display: inline-flex;
  align-items: center;
  padding: 15px 30px;
  position: relative;
  overflow: hidden;
  transition: all 0.5s;
  border-radius: 5px;
  color: var(--white);
  font-weight: 400;
  font-size: 16px;
  border: 1px solid var(--white);
  z-index: 1;
}
.btn-hover-mask::after {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black-2);
  position: absolute;
  content: attr(data-text);
  cursor: pointer;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: var(--white);
  mask: url("https://raw.githubusercontent.com/robin-dela/css-mask-animation/master/img/nature-sprite.png");
  mask-size: 2300% 100%;
  animation: mask_animation_2 0.7s steps(22) forwards;
}
.btn-hover-mask:hover {
  color: var(--white);
}
.btn-hover-mask:hover::after {
  animation: mask_animation 0.7s steps(22) forwards;
}
.light .btn-hover-mask {
  border-color: var(--black-2);
}
.light .btn-hover-mask::after {
  z-index: -1;
  color: var(--white);
  background-color: var(--black-2);
}
.light .btn-hover-mask:hover {
  color: var(--black-2);
}
.btn-rollover-top {
  position: relative;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.btn-rollover-top:before {
  position: absolute;
  left: 0px;
  bottom: 0px;
  height: 0px;
  width: 100%;
  z-index: -1;
  content: "";
  background-color: var(--primary);
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.btn-rollover-top:hover {
  border-color: var(--primary);
  background-color: transparent;
}
.btn-rollover-top:hover::before {
  top: 0%;
  bottom: auto;
  height: 100%;
}
.btn-rollover-left {
  position: relative;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.btn-rollover-left::before {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 0px;
  z-index: -1;
  content: "";
  background-color: var(--primary);
  transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
}
.btn-rollover-left:hover {
  border-color: var(--primary);
  background-color: transparent;
}
.btn-rollover-left:hover::before {
  left: 0%;
  right: auto;
  width: 100%;
}
.btn-rollover-cross {
  overflow: hidden;
  position: relative;
  transition: all 0.5s;
}
.btn-rollover-cross::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  bottom: 100%;
  left: 100%;
  opacity: 0;
  border-bottom: 3px solid var(--primary);
  border-left: 3px solid var(--primary);
  transition: all 0.75s;
}
.btn-rollover-cross::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 100%;
  right: 100%;
  opacity: 0;
  border-top: 3px solid var(--primary);
  border-right: 3px solid var(--primary);
  transition: all 0.75s;
}
.btn-rollover-cross:hover {
  border-color: transparent;
  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 0.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 0.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 0.75s;
}
.btn-parallal-border:hover {
  border-color: transparent;
  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%;
}

/*----------------------------------------*/
/*  01. TITLE CSS START
/*----------------------------------------*/
.sec-title {
  font-weight: 600;
  font-size: 40px;
  line-height: 1.1;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 1399px) {
  .sec-title {
    font-size: 36px;
  }
}
@media only screen and (max-width: 1199px) {
  .sec-title {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title {
    font-size: 24px;
  }
}
.sec-title-2 {
  font-weight: 600;
  font-size: 28px;
  line-height: 1.3;
}
@media only screen and (max-width: 1399px) {
  .sec-title-2 {
    font-size: 24px;
  }
}
@media only screen and (max-width: 991px) {
  .sec-title-2 {
    font-size: 22px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-2 {
    text-align: start;
    font-size: 28px;
    padding-bottom: 40px;
  }
  .sec-title-2 br {
    display: block;
  }
}
.sec-title-2 span {
  font-weight: 400;
  font-family: "Macondo", cursive;
}
.sec-title-3 {
  font-size: 60px;
  font-weight: 500;
  line-height: 1.1;
}
@media only screen and (max-width: 1399px) {
  .sec-title-3 {
    font-size: 40px;
  }
}
@media only screen and (max-width: 991px) {
  .sec-title-3 {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-3 br {
    display: block;
  }
}
.sec-title-4 {
  font-size: 60px;
  font-weight: 500;
}
.sec-title-5 {
  font-weight: 600;
  font-size: 65px;
  line-height: 1.1;
}
@media only screen and (max-width: 1399px) {
  .sec-title-5 {
    font-size: 60px;
  }
}
@media only screen and (max-width: 1199px) {
  .sec-title-5 {
    font-size: 48px;
  }
}
.sec-title-5 span {
  display: block;
  font-weight: 400;
  font-family: "newYork";
  padding-inline-start: 100px;
  position: relative;
}
.sec-title-5 span::before {
  position: absolute;
  content: "";
  inset-inline-start: 0;
  top: 50%;
  width: 80px;
  height: 1px;
  background-color: var(--white);
}
.sec-title-6 {
  font-weight: 400;
  font-size: 80px;
  line-height: 1;
  color: var(--white-11);
  text-transform: uppercase;
}
@media only screen and (max-width: 1399px) {
  .sec-title-6 {
    font-size: 60px;
  }
}
@media only screen and (max-width: 1199px) {
  .sec-title-6 {
    font-size: 48px;
  }
}
@media only screen and (max-width: 991px) {
  .sec-title-6 {
    font-size: 36px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-6 {
    font-size: 30px;
  }
}
.sec-title-7 {
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  text-transform: uppercase;
}
@media only screen and (max-width: 1399px) {
  .sec-title-7 {
    font-size: 48px;
  }
}
@media only screen and (max-width: 1199px) {
  .sec-title-7 {
    font-size: 36px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-7 {
    font-size: 30px;
  }
}
.sec-title-8 {
  font-weight: 400;
  font-size: 60px;
  line-height: 1.2;
  text-transform: capitalize;
}
@media only screen and (max-width: 1199px) {
  .sec-title-8 {
    font-size: 35px;
  }
}
@media only screen and (max-width: 991px) {
  .sec-title-8 {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-8 {
    font-size: 30px;
  }
}
.sec-title-9 {
  font-weight: 500;
  font-size: 60px;
  line-height: 1.1;
}
@media only screen and (max-width: 1399px) {
  .sec-title-9 {
    font-size: 48px;
  }
}
@media only screen and (max-width: 1199px) {
  .sec-title-9 {
    font-size: 36px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-9 {
    font-size: 32px;
  }
}
.sec-title-10 {
  font-weight: 400;
  font-size: 100px;
  line-height: 1.08;
}
@media only screen and (max-width: 1399px) {
  .sec-title-10 {
    font-size: 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .sec-title-10 {
    font-size: 70px;
  }
}
@media only screen and (max-width: 991px) {
  .sec-title-10 {
    font-size: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-10 {
    font-size: 50px;
  }
}
.sec-title-10 span {
  display: block;
  padding-inline-start: 150px;
}
@media only screen and (max-width: 1199px) {
  .sec-title-10 span {
    padding-inline-start: 100px;
  }
}
.sec-title-11 {
  font-weight: 400;
  font-size: 60px;
  line-height: 1.15;
  text-transform: uppercase;
  text-indent: 130px;
  background-image: url(../imgs/writer/shape-4.png);
  background-size: 25px;
  background-repeat: no-repeat;
  background-position: 85px 18px;
}
.dir-rtl .sec-title-11 {
  background-position: calc(100% - 85px) 18px;
}
@media only screen and (max-width: 1199px) {
  .sec-title-11 {
    font-size: 48px;
    background-position: 88px 10px;
  }
}
@media only screen and (max-width: 991px) {
  .sec-title-11 {
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-11 {
    font-size: 32px;
    text-indent: 60px;
    background-position: 20px 3px;
  }
}
.sec-title-12 {
  font-weight: 400;
  font-size: 100px;
  line-height: 1.05;
}
@media only screen and (max-width: 1399px) {
  .sec-title-12 {
    font-size: 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .sec-title-12 {
    font-size: 70px;
  }
}
@media only screen and (max-width: 991px) {
  .sec-title-12 {
    font-size: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-12 {
    font-size: 48px;
  }
  .sec-title-12 br {
    display: block;
  }
}
.sec-title-13 {
  font-weight: 400;
  font-size: 80px;
  line-height: 1.2;
}
@media only screen and (max-width: 1399px) {
  .sec-title-13 {
    font-size: 70px;
  }
}
@media only screen and (max-width: 1199px) {
  .sec-title-13 {
    font-size: 60px;
  }
}
@media only screen and (max-width: 991px) {
  .sec-title-13 {
    font-size: 48px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-13 {
    font-size: 40px;
  }
}
.sec-title-13 span {
  color: var(--primary);
}
.sec-title-14 {
  font-size: 60px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
@media only screen and (max-width: 1399px) {
  .sec-title-14 {
    font-size: 40px;
  }
}
@media only screen and (max-width: 991px) {
  .sec-title-14 {
    font-size: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-14 br {
    display: block;
  }
}
.sec-title-15 {
  font-size: 80px;
  line-height: 1;
  font-weight: 600;
  color: var(--black-2);
}
@media only screen and (max-width: 1199px) {
  .sec-title-15 {
    font-size: 60px;
  }
}
@media only screen and (max-width: 991px) {
  .sec-title-15 {
    font-size: 48px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-15 {
    font-size: 28px;
  }
}
.sec-title-16 {
  font-size: 70px;
  line-height: 1;
  font-weight: 500;
  color: var(--white-14);
}
@media only screen and (max-width: 1399px) {
  .sec-title-16 {
    font-size: 60px;
  }
}
@media only screen and (max-width: 1199px) {
  .sec-title-16 {
    font-size: 50px;
  }
}
@media only screen and (max-width: 991px) {
  .sec-title-16 {
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-16 {
    font-size: 36px;
  }
}
.sec-title-17 {
  font-size: 70px;
  line-height: 0.9;
  font-weight: 400;
  color: var(--white-15);
}
.light .sec-title-17 {
  color: var(--green-6);
}
@media only screen and (max-width: 1399px) {
  .sec-title-17 {
    font-size: 60px;
  }
}
@media only screen and (max-width: 1199px) {
  .sec-title-17 {
    font-size: 50px;
  }
}
@media only screen and (max-width: 991px) {
  .sec-title-17 {
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-17 {
    font-size: 36px;
  }
}
.sec-title-18 {
  font-size: 170px;
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
}
@media only screen and (max-width: 1919px) {
  .sec-title-18 {
    font-size: 140px;
  }
}
@media only screen and (max-width: 1399px) {
  .sec-title-18 {
    font-size: 120px;
  }
}
@media only screen and (max-width: 1199px) {
  .sec-title-18 {
    font-size: 90px;
  }
}
@media only screen and (max-width: 991px) {
  .sec-title-18 {
    font-size: 70px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-title-18 {
    font-size: 60px;
  }
}
.sec-sub-title {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--primary);
  position: relative;
  z-index: 1;
}
.light .sec-sub-title {
  color: var(--primary);
}
.sec-sub-title-2 {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--primary);
  text-transform: capitalize;
}
.sec-sub-title-3 {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: var(--black-2);
  text-transform: uppercase;
}
.sec-sub-title-4 {
  font-size: 14px;
  line-height: 1.7;
  color: var(--white);
  position: relative;
  padding-inline-start: 100px;
  text-transform: uppercase;
}
@media only screen and (max-width: 991px) {
  .sec-sub-title-4 {
    padding-inline-start: 50px;
  }
}
.sec-sub-title-4::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 80px;
  height: 1px;
  background-color: var(--white);
}
@media only screen and (max-width: 991px) {
  .sec-sub-title-4::before {
    width: 40px;
  }
}
.sec-sub-title-5 {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  text-transform: uppercase;
}
.sec-sub-title-6 {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  height: 40px;
  padding: 7px 25px;
  display: inline-block;
  color: var(--white-14);
  background-image: url(../imgs/motivational-speaker/shape-3.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.sec-sub-title-11 {
  font-weight: 400;
  font-size: 14px;
  line-height: 26px;
  color: var(--black-9);
  text-align: center;
  text-transform: uppercase;
}
.sec-sub-title-18 {
  font-size: 24px;
  text-transform: uppercase;
}

.hero-title {
  font-weight: 600;
  font-size: 90px;
  line-height: 1;
  text-transform: uppercase;
}
.hero-title-5 {
  font-weight: 500;
  font-size: 150px;
  line-height: 1;
  color: var(--black-2);
}

.section-right p {
  font-size: 24px;
}

@media only screen and (max-width: 767px) {
  .section_wrapper {
    flex-wrap: wrap;
  }
}

.dis_6 {
  font-size: 18px;
  border-bottom: 1px solid #3F3A36;
}

.sec-title-4.about-title-7 {
  font-family: "newYork";
  font-weight: 400;
}

.title-7 {
  font-size: 100px;
  line-height: 1;
}
@media only screen and (max-width: 1199px) {
  .title-7 {
    font-size: 60px;
  }
}
@media only screen and (max-width: 991px) {
  .title-7 {
    font-size: 60px;
  }
}
@media only screen and (max-width: 767px) {
  .title-7 {
    font-size: 30px;
  }
}
.title-7.title-6 {
  text-transform: uppercase;
}
@media only screen and (max-width: 1199px) {
  .title-7.title-6 {
    font-size: 60px;
    text-align: center;
  }
}
@media only screen and (max-width: 991px) {
  .title-7.title-6 {
    font-size: 60px;
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
  .title-7.title-6 {
    font-size: 30px;
    text-align: center;
    padding: 15px 0;
  }
}
.title-7.title-6 span {
  padding-inline-start: 150px;
}
@media only screen and (max-width: 767px) {
  .title-7.title-6 span {
    padding-inline-start: 0;
  }
}

.light .sec-sub-title-6 {
  background-image: url(../imgs/motivational-speaker/shape-4.png);
}
.light .sec-title-11 {
  background-image: url(../imgs/writer/start-dark.png);
}
.light .sec-title-5 span {
  padding-inline-start: 70px;
}
.light .sec-title-5 span::before {
  width: 60px;
  background-color: var(--black-2);
}
.light .sec-sub-title-4::before {
  background-color: var(--black-2);
}
.light .sec-sub-title-11 {
  color: var(--gray-10);
}

/*----------------------------------------*/
/*  01. MENU CSS START
/*----------------------------------------*/
.main-menu.menu-dark > ul > li > a {
  color: var(--black-2);
}
.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%;
}
.main-menu li {
  position: relative;
}
.main-menu li a {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: var(--white);
  padding: 30px 25px;
}
.light .main-menu li a {
  color: var(--black-2);
}
.main-menu ul.dp-menu {
  background-color: #FFF;
  padding: 18px 0px;
  width: 250px;
  position: absolute;
  inset-inline-start: 10px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: all 0.5s;
}
.main-menu ul.dp-menu ul {
  background: var(--black-2);
  padding: 18px 0px;
  width: 300px;
  position: absolute;
  inset-inline-start: calc(100% + 10px);
  top: 0;
  opacity: 0;
  z-index: 10;
  transition: all 0.5s;
}
.main-menu ul.dp-menu li {
  position: relative;
  padding: 0 25px;
}
.main-menu ul.dp-menu li:hover > a {
  color: var(--primary);
  background-color: transparent;
}
.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: #999999;
  padding: 10px 0;
  background-color: transparent;
  border-radius: 8px;
  text-transform: capitalize;
}
.main-menu ul.dp-menu li a:after {
  transform: rotate(-90deg);
  margin-left: auto;
}
.main-menu .has-mega-menu {
  position: static;
}
.main-menu li.menu-item-has-children > a:after {
  content: "\f107";
  font-family: var(--font_awesome);
  margin-inline-start: 5px;
  font-weight: 600;
  font-size: 14px;
}
.main-menu .mega-menu {
  background-color: var(--black-2);
  padding: 30px 50px;
  width: 100%;
  position: absolute;
  left: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 50px;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  transition: all 0.5s;
}
@media only screen and (max-width: 1399px) {
  .main-menu .mega-menu {
    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: #999999;
  height: 40px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--black-2);
  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 {
  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 {
  column-count: 2;
  position: relative;
  padding: 20px 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);
  column-gap: 50px;
}
@media only screen and (max-width: 1399px) {
  .main-menu .list-3-column ul {
    column-gap: 30px;
  }
}
.main-menu .span-first-item ul li:first-child {
  grid-column: 1/-1;
  column-span: all;
}
.main-menu .new {
  font-size: 10px;
  font-weight: 600;
  background: #FFA38E;
  color: var(--black-2);
  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;
  object-fit: cover;
  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: transparent;
}

@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: #999999;
  position: relative;
  transition: all 0.5s;
}
.menu-with-number li a span::before {
  position: absolute;
  content: "";
  width: 35px;
  height: 1px;
  right: 20px;
  top: 50%;
  transition: all 0.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;
  }
}

/* mean menu customize */
.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-2);
  padding: 3px 7px;
  line-height: 1;
  display: flex;
  align-items: center;
  border-radius: 2px;
}
.offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 15px 0;
  padding-inline-start: 15px;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--white);
  text-transform: capitalize;
  border-top: 1px solid var(--black-4);
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
  outline: none;
  transform: translateY(var(--y)) translateZ(0);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  box-sizing: border-box;
}
.light .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
  color: var(--black-2);
  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;
}
.light .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;
}
.light .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);
}
.light .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-2);
}
.light .main-menu-2 li a:hover {
  color: var(--primary);
}
.light .main-menu-3 li a {
  color: var(--black-2);
}
.light .main-menu-3 li a:hover {
  color: var(--primary);
}
.light .sidebar-menu li a {
  color: var(--black-2);
}
.light .sidebar-menu li a:hover {
  color: var(--primary);
}
.light .menu-with-number li a {
  color: var(--black-2);
}
.light .menu-with-number li a:hover span {
  color: var(--black-2);
}
.light .menu-with-number li a:hover span::before {
  background-color: var(--black-2);
}
.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-2);
}
.light .menu-with-number li a.active span::before {
  background-color: var(--black-2);
}

/*----------------------------------------*/
/*  01. CURSOR CSS START
/*----------------------------------------*/
.cursor {
  position: fixed;
  pointer-events: none;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  color: var(--var(--white));
  background: var(--black-2);
  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 0.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: 0.15s;
  z-index: 999;
  mix-blend-mode: difference;
}
@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: 0.2s;
  z-index: 999;
  mix-blend-mode: difference;
}
@media (max-width: 1200px) {
  .cursor2 {
    display: none;
  }
}

.cursor-testi {
  position: fixed;
  width: 80px;
  height: 80px;
  background-color: var(--black-2);
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: 0.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 {
  -webkit-transform: scale(0.2);
  -moz-transform: scale(0.2);
  -ms-transform: scale(0.2);
  -o-transform: scale(0.2);
  transform: scale(0.2);
}

.wc-cursor.visible.active:before {
  -webkit-transform: scale(0.23);
  -moz-transform: scale(0.23);
  -ms-transform: scale(0.23);
  -o-transform: scale(0.23);
  transform: scale(0.23);
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

.wc-cursor.pointer:before {
  -webkit-transform: scale(0.15);
  -moz-transform: scale(0.15);
  -ms-transform: scale(0.15);
  -o-transform: scale(0.15);
  transform: scale(0.15);
}

.wc-cursor.text:before {
  opacity: 0.85;
  -webkit-transform: scale(1.7);
  -moz-transform: scale(1.7);
  -ms-transform: scale(1.7);
  -o-transform: scale(1.7);
  transform: scale(1.7);
}

.wc-cursor.text.active:before {
  transform: scale(1.6);
  transition-duration: 0.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;
}

/* Cursor CSS */
.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 0.3s, color 0.4s;
}
@media (max-width: 1200px) {
  .wc-cursor {
    display: none;
  }
}

.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 0.3s ease-in-out, opacity 0.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 0.4s, transform 0.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: 0.2s;
}

.wc-cursor.pointer:before {
  transform: scale(0.15);
}

.wc-cursor.text:before {
  opacity: 0.85;
  transform: scale(1.7);
}

.wc-cursor.text.active:before {
  transform: scale(1.6);
  transition-duration: 0.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);
}

/*----------------------------------------*/
/*  01. HERO CSS START
/*----------------------------------------*/
.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-2);
}
.light .developer-skill__resume .sonny_progressbar .progress-percent {
  color: var(--black-2);
}

.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 0.3s;
  mix-blend-mode: exclusion;
}
.switcher__icon i {
  color: var(--black-2);
}
.switcher__icon button {
  font-size: 24px;
  color: var(--black-2);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  transition: all 0.3s;
}
.switcher__icon button:hover {
  color: var(--gray-2);
}
.switcher__icon button#switcher_open {
  animation: wcSpinner 5s infinite linear;
}
.switcher__items {
  width: 280px;
  padding: 50px 30px;
  background: var(--black-2);
  position: fixed;
  right: -280px;
  top: 40%;
  z-index: 99;
  transform: translateY(-50%);
  font-family: "Poppins";
  transition: all 0.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(--gray-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(--gray-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: transparent;
  display: none;
}

.overlay-switcher-close.show-overlay {
  display: block;
}

/*----------------------------------------*/
/*  01. HEADER CSS START
/*----------------------------------------*/
#navbar {
  position: fixed;
  top: 0;
  width: 100%;
  display: block;
  transition: top 0.3s;
}

.header__area-2 {
  position: fixed;
  width: 315px;
  height: 100vh;
  inset-inline-start: 0;
  top: 0;
  z-index: 1;
  padding: 80px 50px;
  background-color: var(--black-5);
  transition: all 0.5s;
  padding-top: 100px;
}
.light .header__area-2 {
  background-color: var(--white-4);
}
@media only screen and (max-width: 1199px) {
  .header__area-2 {
    width: 260px;
    padding: 35px 20px 40px;
  }
}
@media only screen and (max-width: 991px) {
  .header__area-2 {
    left: -320px;
    padding: 30px 20px 40px;
  }
}
@media only screen and (max-width: 767px) {
  .header__area-2 {
    width: 300px;
    padding: 30px;
  }
}
.header__area-2 form {
  position: relative;
}
.header__area-2 .icon-search {
  color: var(--gray);
  position: absolute;
  right: 0;
  top: 5px;
}
.header__area-2 .copyright {
  text-align: left;
  padding-top: 100px;
}
@media only screen and (max-width: 1919px) {
  .header__area-2 .copyright {
    padding-top: 90px;
  }
}
@media only screen and (max-width: 1399px) {
  .header__area-2 .copyright {
    padding-top: 55px;
  }
}
@media only screen and (max-width: 767px) {
  .header__area-2 .copyright {
    padding-top: 60px;
  }
}
.header__area-3 {
  padding: 32px 50px;
  position: relative;
  position: relative;
  z-index: 1;
}
.header__area-3::before {
  position: absolute;
  content: "";
  width: calc(50% - var(--container-max-widths) * 0.25);
  height: 100%;
  background-color: var(--black-3);
  inset-inline-start: 0;
  top: 0;
  z-index: -1;
}
.light .header__area-3::before {
  background-color: var(--white-2);
}
@media only screen and (max-width: 767px) {
  .header__area-3::before {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .header__area-3 {
    padding: 20px 15px;
  }
}
.header__area-9 {
  padding: 20px 50px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;
}
@media only screen and (max-width: 991px) {
  .header__area-9 {
    padding: 20px 30px;
  }
}
@media only screen and (max-width: 767px) {
  .header__area-9 {
    padding: 20px 15px;
  }
}
.header__area-10 {
  padding-left: 100px;
  padding-right: 100px;
  padding-top: 30px;
}
@media only screen and (max-width: 1199px) {
  .header__area-10 {
    padding-left: 50px;
    padding-right: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .header__area-10 {
    padding-left: 10px;
    padding-right: 10px;
  }
}
.header-absolute {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
.header-fixed {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}
.header__developer {
  padding: 20px 50px;
}
@media only screen and (max-width: 991px) {
  .header__developer {
    padding: 20px;
  }
}
.header__sfluence {
  padding: 0 100px;
}
@media only screen and (max-width: 1199px) {
  .header__sfluence {
    padding: 0 20px;
  }
}
@media only screen and (max-width: 767px) {
  .header__sfluence {
    padding: 15px 0;
  }
}
.header__sfluence .header__inner {
  padding-bottom: 4px;
}
@media only screen and (max-width: 1199px) {
  .header__sfluence .header__inner {
    padding-top: 15px;
    padding-bottom: 19px;
  }
}
.header__sfluence .main-menu li a {
  font-size: 14px;
  padding: 41px 25px;
  text-transform: uppercase;
}
.header__inner {
  display: flex;
  column-gap: 50px;
  justify-content: space-between;
  align-items: center;
  min-height: 80px;
}
@media only screen and (max-width: 767px) {
  .header__inner {
    column-gap: 20px;
  }
}
.header__inner.menu-left {
  grid-template-columns: auto auto 1fr;
}
@media only screen and (max-width: 1199px) {
  .header__inner.menu-left {
    grid-template-columns: 1fr 1fr;
  }
}
.header__inner.menu-center {
  grid-template-columns: 0.5fr auto 0.5fr;
}
@media only screen and (max-width: 1199px) {
  .header__inner.menu-center {
    grid-template-columns: 1fr 1fr;
  }
}
.header__inner.menu-right {
  grid-template-columns: 1fr auto auto;
}
@media only screen and (max-width: 1199px) {
  .header__inner.menu-right {
    grid-template-columns: 1fr 1fr;
  }
}
.header__inner.menu-none {
  grid-template-columns: auto auto;
  justify-content: space-between;
}
.header__logo {
  display: flex;
  align-items: center;
  max-width: 130px;
}
.header__logo img {
  max-height: 105px;
}
.header__logo-2 {
  padding-bottom: 90px;
}
.header__logo-2 img {
  max-height: 45px;
}
@media only screen and (max-width: 1399px) {
  .header__logo-2 {
    padding-bottom: 80px;
  }
}
@media only screen and (max-width: 767px) {
  .header__logo-2 {
    padding-bottom: 60px;
  }
}
.header__logo-3 {
  max-width: 130px;
}
.header__logo-3 img {
  max-height: 45px;
}
.header__nav {
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 1199px) {
  .header__nav {
    display: none;
  }
}
.header__navicon {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}
.header__navicon-2 {
  display: none;
}
@media only screen and (max-width: 991px) {
  .header__navicon-2 {
    display: block;
  }
}
.header__navicon-2 .icon {
  width: 24px;
}
.header__navicon-2 .close {
  position: absolute;
  right: 10px;
  top: 40px;
  width: 30px;
  height: 30px;
  color: var(--white);
  font-size: 20px;
}
.light .header__navicon-2 .close {
  color: var(--black-2);
}
.header__search-2 {
  padding-top: 50px;
}
.header__search-2 input, .header__search-2 .cf-details-comment__field textarea, .cf-details-comment__field .header__search-2 textarea {
  font-weight: 400;
  font-size: 14px;
  width: 100%;
  line-height: 1.6;
  color: var(--gray);
  background-color: transparent;
  border: none;
  outline: none;
  padding: 6px 30px 6px 0;
  text-transform: capitalize;
  border-bottom: 1px solid var(--gray-6);
}
.header__search-2 input::placeholder, .header__search-2 .cf-details-comment__field textarea::placeholder, .cf-details-comment__field .header__search-2 textarea::placeholder {
  opacity: 1;
}

.light.header__area-2 {
  background-color: var(--white-3);
}
.light.header__area-3 {
  background-color: var(--white);
  border-bottom: 2px solid var(--white-4);
}
.light.header__area-3::before {
  background: var(--white-2);
}
.light.header__sfluence {
  background-color: var(--white-2);
}
.light .header__search-2 input, .light .header__search-2 .cf-details-comment__field textarea, .cf-details-comment__field .light .header__search-2 textarea {
  border-bottom: 1px solid var(--gray);
}

.menu-icon.menu-icon-4::before, .menu-icon-4.menu-icon-2::before,
.menu-icon::after,
.menu-icon-2::after,
.menu-icon span,
.menu-icon-2 span {
  background: var(--white);
}

.mobile-menu .mean-bar {
  margin-bottom: 30px;
}
.mobile-menu .mean-bar .mean-nav li {
  margin-bottom: 20px;
}
.mobile-menu .mean-bar .mean-nav li a {
  color: var(--white);
}

.mean-container a.meanmenu-reveal {
  display: none;
}

.offcanvas__area .offcanvas {
  text-align: center;
  padding: 75px 50px;
  background-color: var(--black-3);
  overflow-y: scroll;
}
.light .offcanvas__area .offcanvas {
  background-color: var(--white-2);
}
@media only screen and (max-width: 1399px) {
  .offcanvas__area .offcanvas {
    padding: 50px 40px;
  }
}
@media only screen and (max-width: 1199px) {
  .offcanvas__area .offcanvas {
    padding: 40px 30px;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas__area .offcanvas {
    padding: 20px 0;
  }
}
.dir-rtl .offcanvas__area .offcanvas.offcanvas-end {
  left: 0;
  right: auto;
  transform: translateX(-100%);
}
.offcanvas__area .offcanvas.show:not(.hiding),
.offcanvas__area .offcanvas .showing {
  transform: none;
}
.offcanvas__area-2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: var(--black-3);
  opacity: 0;
  visibility: hidden;
}
.offcanvas__inner-2 {
  display: grid;
  grid-template-columns: 1fr 2.3fr;
}
.offcanvas__left-2 {
  height: 100vh;
  padding: 60px 50px 30px;
  background-color: var(--black-2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.offcanvas__right-2 {
  padding: 60px 50px 30px 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--black-3);
}
.offcanvas__contact li {
  padding-bottom: 30px;
}
.offcanvas__contact li:first-child {
  padding-bottom: 40px;
}
.offcanvas__contact li:first-child p {
  font-weight: 600;
  padding-bottom: 10px;
  text-transform: uppercase;
}
.offcanvas__contact li:first-child a {
  font-size: 30px;
  font-weight: 600;
  text-transform: uppercase;
}
.offcanvas__contact li p {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--gray-4);
  padding-bottom: 5px;
}
.offcanvas__contact li a,
.offcanvas__contact li span {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.3;
  color: var(--white);
  display: inline-block;
}
.offcanvas__close {
  position: absolute;
  top: 15px;
  inset-inline-end: 15px;
  font-size: 20px;
  color: var(--white);
  padding: 0 10px;
  z-index: 99;
}
.light .offcanvas__close {
  color: var(--black-2);
}
.offcanvas__close:hover {
  color: var(--primary);
}
.offcanvas__close-2 button {
  width: 80px;
  height: 80px;
  border-radius: 100%;
  background: var(--black-6);
  position: relative;
}
.offcanvas__close-2 button span {
  width: 30px;
  height: 1px;
  display: inline-block;
  background-color: var(--primary);
  position: absolute;
  left: 50%;
  top: 50%;
}
.offcanvas__close-2 button span:first-child {
  transform: translateX(-50%) rotate(45deg);
}
.offcanvas__close-2 button span:last-child {
  transform: translateX(-50%) rotate(-45deg);
}
.offcanvas__logo {
  position: relative;
  padding-bottom: 140px;
}
@media only screen and (max-width: 1399px) {
  .offcanvas__logo {
    padding-bottom: 70px;
  }
}
@media only screen and (max-width: 1199px) {
  .offcanvas__logo {
    padding-bottom: 20px;
    text-align: left;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas__logo {
    padding: 0 15px;
  }
}
.offcanvas__logo::after {
  position: absolute;
  content: "";
  width: 140px;
  height: 1px;
  bottom: 70px;
  left: calc(50% - 70px);
  background-color: var(--black-6);
}
@media only screen and (max-width: 1399px) {
  .offcanvas__logo::after {
    bottom: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .offcanvas__logo::after {
    display: none;
  }
}
.offcanvas__logo img {
  margin-bottom: 40px;
}
@media only screen and (max-width: 1199px) {
  .offcanvas__logo img {
    max-width: 110px;
    margin-bottom: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas__logo img {
    max-width: 90px;
  }
}
@media only screen and (max-width: 1199px) {
  .offcanvas__logo p {
    display: none;
  }
}
.offcanvas__menu {
  display: none;
}
@media only screen and (max-width: 1199px) {
  .offcanvas__menu {
    display: block;
  }
}
.offcanvas__menu-area {
  overflow: hidden;
  display: none;
  position: relative;
  padding-bottom: 140px;
}
@media only screen and (max-width: 1399px) {
  .offcanvas__menu-area {
    padding-bottom: 70px;
  }
}
@media only screen and (max-width: 1199px) {
  .offcanvas__menu-area {
    padding-bottom: 20px;
    display: block;
  }
}
.offcanvas__menu-area::after {
  position: absolute;
  content: "";
  width: 140px;
  height: 1px;
  bottom: 70px;
  left: calc(50% - 70px);
  background-color: var(--black-6);
}
@media only screen and (max-width: 1399px) {
  .offcanvas__menu-area::after {
    bottom: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .offcanvas__menu-area::after {
    display: none;
  }
}
.offcanvas__menu-2 li {
  padding-bottom: 10px;
}
.offcanvas__menu-2 li a {
  font-weight: 600;
  font-size: 70px;
  line-height: 89px;
  color: var(--gray-14);
  text-transform: uppercase;
  position: relative;
  display: inline-block;
}
.offcanvas__menu-2 li a::before {
  position: absolute;
  content: "";
  width: 0;
  height: 8px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--primary);
  transition: all 0.5s;
  opacity: 0;
}
.offcanvas__menu-2 li a::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 30px;
  left: 65px;
  top: 5px;
  background-color: var(--primary);
  transform: scale(0);
  transition: all 0.5s;
  z-index: -1;
}
.offcanvas__menu-2 li a:hover {
  color: var(--white);
  padding-left: 70px;
}
.offcanvas__menu-2 li a:hover::before {
  width: 60px;
  opacity: 1;
}
.offcanvas__menu-2 li a:hover::after {
  transform: scale(1);
}
.offcanvas__lang {
  gap: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.offcanvas__lang .language {
  gap: 30px;
  display: flex;
}
.offcanvas__lang .language li a {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--white);
  display: inline-block;
  text-transform: capitalize;
  position: relative;
}
.offcanvas__lang .language li a::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 0;
  transition: all 0.3s;
  background-color: var(--white);
}
.offcanvas__lang .language li a:hover {
  color: var(--primary);
}
.offcanvas__lang .language li a:hover::after {
  width: 0;
}
.offcanvas__follow-2 {
  text-align: right;
  position: relative;
}
.offcanvas__follow-2 span {
  position: absolute;
  content: "";
  bottom: 0;
  right: 0;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  display: inline-block;
  background-color: var(--black-6);
}
.offcanvas__follow-2 a {
  font-size: 14px;
  line-height: 1.8;
  font-weight: 600;
  color: var(--white);
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  writing-mode: tb-rl;
  transform: rotate(180deg) translate(28px, 30px);
}
.offcanvas__follow-2 a:hover {
  color: var(--primary);
}
.offcanvas__title {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--white);
  padding-bottom: 20px;
  text-transform: capitalize;
}
.offcanvas__gallery {
  position: relative;
  padding-bottom: 140px;
}
@media only screen and (max-width: 1399px) {
  .offcanvas__gallery {
    padding-bottom: 70px;
  }
}
@media only screen and (max-width: 1199px) {
  .offcanvas__gallery {
    display: none;
  }
}
.offcanvas__gallery::after {
  position: absolute;
  content: "";
  width: 140px;
  height: 1px;
  bottom: 67px;
  left: calc(50% - 70px);
  background-color: var(--black-6);
}
@media only screen and (max-width: 1399px) {
  .offcanvas__gallery::after {
    bottom: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas__gallery::after {
    bottom: 20px;
  }
}
.offcanvas__media li {
  display: inline-block;
}
.offcanvas__media li a {
  display: block;
  color: var(--gray);
  font-size: 20px;
  padding: 0 10px;
}
.offcanvas__media li a:hover {
  color: var(--primary);
}
.offcanvas__footer-2 {
  gap: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.offcanvas__footer-2 a {
  color: var(--white);
}
.offcanvas__footer-2 a:hover {
  color: var(--primary);
}
.offcanvas__footer-2 form {
  width: 220px;
}
.offcanvas__footer-2 form input, .offcanvas__footer-2 form .cf-details-comment__field textarea, .cf-details-comment__field .offcanvas__footer-2 form textarea {
  width: 100%;
  font-size: 14px;
  color: var(--gray);
  border: none;
  outline: none;
  padding-bottom: 5px;
  background-color: transparent;
  border-bottom: 1px solid var(--gray-6);
  background-image: url(../imgs/icons/search.png);
  background-repeat: no-repeat;
  background-position: right 0;
}
.offcanvas__footer-2 form input:hover, .offcanvas__footer-2 form .cf-details-comment__field textarea:hover, .cf-details-comment__field .offcanvas__footer-2 form textarea:hover {
  opacity: 1;
  color: var(--gray);
}
.offcanvas-3__area {
  background: var(--primary);
  position: fixed;
  width: 100%;
  height: 100%;
  padding: 50px 30px 100px;
  z-index: 1000;
  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);
}
.offcanvas-3__meta li:not(:last-child) {
  margin-bottom: 19px;
}
.offcanvas-3__meta-wrapper {
  display: flex;
  flex-direction: column;
  gap: 50px;
  justify-content: space-between;
}
.offcanvas-3__social .title {
  font-size: 18px;
  line-height: 20px;
  color: var(--white);
  text-transform: uppercase;
  font-family: "Glorify DEMO";
  margin-bottom: 10px;
}
.offcanvas-3__social-links {
  display: flex;
  gap: 20px;
}
.offcanvas-3__social-links a {
  font-size: 18px;
  color: var(--white);
}
.offcanvas-3__menu {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 30px;
}
.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: 0.5s;
}
@media only screen and (max-width: 767px) {
  .offcanvas-3__menu li:before {
    display: none;
  }
}
.offcanvas-3__menu li:first-child {
  padding-top: 0;
  margin-top: 0;
  border: none;
}
.offcanvas-3__menu li a {
  font-size: 120px;
  font-size: 8vh;
  color: #FFF;
  line-height: 0.9;
  position: relative;
  text-decoration: none;
}
@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: 20px;
  }
}
.offcanvas-3__menu-wrapper {
  display: flex;
  align-items: flex-end;
  overflow-y: hidden;
}
.offcanvas-4__area {
  background-color: #F5EDE9;
  position: fixed;
  width: 100%;
  height: 100%;
  padding: 50px;
  z-index: 1;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .offcanvas-4__area {
    padding: 40px;
  }
}
.offcanvas-4__social-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--black-2);
}
.offcanvas-4__social-title.has-left-line {
  padding-left: 60px;
}
.offcanvas-4__social-title.has-left-line:before {
  width: 50px;
}
.offcanvas-4__social {
  display: flex;
  align-items: center;
  transform: rotate(270deg) translateX(-50%);
  gap: 30px;
  transform-origin: 0% 0;
  margin-right: auto;
}
.offcanvas-4__social-links {
  display: flex;
  flex-direction: row-reverse;
  gap: 15px;
}
.offcanvas-4__social-links a {
  font-size: 20px;
  color: var(--black-2);
}
.offcanvas-4__content-wrapper {
  display: grid;
  grid-template-columns: 30px 22% 1fr 255px;
  grid-gap: 140px;
  align-items: center;
  flex-grow: 1;
  overflow: hidden;
}
@media only screen and (max-width: 1700px) {
  .offcanvas-4__content-wrapper {
    grid-gap: 80px;
  }
}
@media only screen and (max-width: 1399px) {
  .offcanvas-4__content-wrapper {
    grid-gap: 40px;
  }
}
@media only screen and (max-width: 1199px) {
  .offcanvas-4__content-wrapper {
    grid-template-columns: 30px 22% 1fr 195px;
  }
}
@media only screen and (max-width: 991px) {
  .offcanvas-4__content-wrapper {
    grid-template-columns: 80px 1fr 195px;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas-4__content-wrapper {
    grid-template-columns: 1fr 170px;
  }
}
@media (max-width: 575px) {
  .offcanvas-4__content-wrapper {
    grid-template-columns: 1fr;
  }
}
.offcanvas-4__inner {
  display: flex;
  flex-direction: column;
  gap: 50px;
  height: 100%;
}
.offcanvas-4__menu {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
.offcanvas-4__menu a {
  font-size: 4vw;
  font-family: "gallient";
  line-height: 1;
  color: var(--black-2);
}
@media only screen and (max-width: 767px) {
  .offcanvas-4__menu a {
    font-size: 6vw;
  }
}
.offcanvas-4__menu li:not(:last-child) {
  margin-bottom: 26px;
}
.offcanvas-4__menu.hover-border-move li a::after {
  bottom: 15px;
}
.offcanvas-4__menu-wrapper {
  height: 100%;
  overflow: hidden;
}
.offcanvas-4__meta li {
  font-size: 16px;
  color: var(--black-2);
}
.offcanvas-4__meta li:not(:last-child) {
  margin-bottom: 30px;
}
@media (max-width: 575px) {
  .offcanvas-4__meta li:not(:last-child) {
    margin-bottom: 10px;
  }
}
.offcanvas-4__button-wrapper {
  position: absolute;
  right: 50px;
  top: 50px;
}
@media only screen and (max-width: 767px) {
  .offcanvas-4__button-wrapper {
    right: 40px;
    top: 40px;
  }
}
.offcanvas-5__area {
  background-color: #6C7DB8;
  position: fixed;
  width: 100%;
  height: 100%;
  padding: 60px 50px 100px;
  z-index: 1;
}
@media only screen and (max-width: 767px) {
  .offcanvas-5__area {
    padding: 40px;
  }
}
.offcanvas-5__inner {
  display: grid;
  grid-gap: 235px;
  grid-template-columns: auto 1fr auto;
  height: 100%;
}
@media only screen and (max-width: 1199px) {
  .offcanvas-5__inner {
    grid-gap: 120px;
  }
}
@media only screen and (max-width: 991px) {
  .offcanvas-5__inner {
    display: flex;
    flex-direction: column;
    gap: 60px;
  }
}
.offcanvas-5__logo-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 50px;
}
@media only screen and (max-width: 991px) {
  .offcanvas-5__logo-wrapper {
    flex-direction: row;
    align-items: center;
  }
}
.offcanvas-5__content-wrapper {
  display: flex;
  gap: 50px;
  flex-direction: column;
  justify-content: space-between;
}
.offcanvas-5__meta-wrapper {
  display: flex;
  gap: 100px;
}
@media only screen and (max-width: 767px) {
  .offcanvas-5__meta-wrapper {
    flex-direction: column;
    gap: 40px;
  }
}
.offcanvas-5__lang {
  display: flex;
  gap: 30px;
}
.offcanvas-5__lang a {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
}
.offcanvas-5__menu a {
  font-size: 5.7vw;
  font-family: var(--font_romanstory);
  line-height: 1;
}
.offcanvas-5__menu a:hover {
  color: var(--white);
}
.offcanvas-5__menu li:not(:last-child) {
  margin-bottom: -12px;
}
@media only screen and (max-width: 1919px) {
  .offcanvas-5__menu li:not(:last-child) {
    margin-bottom: 0;
  }
}
.offcanvas-5__menu > ul > li {
  counter-increment: menu-item;
}
.offcanvas-5__menu > ul > li > a {
  display: flex;
  gap: 10px;
}
.offcanvas-5__menu > ul > li > a:after {
  content: counter(menu-item, decimal-leading-zero);
  font-size: 14px;
  line-height: 26px;
}
.offcanvas-5__meta li {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-transform: uppercase;
}
.offcanvas-5__meta li:not(:last-child) {
  margin-bottom: 20px;
}
.offcanvas-5__social-title {
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  color: var(--black-2);
  font-weight: 600;
  margin-bottom: 10px;
}
.offcanvas-5__social-links {
  display: flex;
  gap: 20px;
}
.offcanvas-5__social-links a {
  font-size: 18px;
}
.offcanvas-5__social-links a:hover {
  color: var(--white);
}
.offcanvas-6__area {
  background-color: #AF89FF;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
@media only screen and (max-width: 767px) {
  .offcanvas-6__area {
    background-color: #F4E5D3;
  }
}
.offcanvas-6__inner {
  display: grid;
  grid-template-columns: 1fr 615px;
  height: 100%;
  overflow-y: scroll;
  position: relative;
}
@media only screen and (max-width: 1399px) {
  .offcanvas-6__inner {
    grid-template-columns: 1fr 460px;
  }
}
@media only screen and (max-width: 991px) {
  .offcanvas-6__inner {
    grid-template-columns: 1fr auto;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas-6__inner {
    grid-template-columns: 1fr;
  }
}
.offcanvas-6__menu-wrapper {
  background: #F4E5D3;
  border-right: 3px solid var(--black-2);
  padding-left: 80px;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 50px;
}
@media only screen and (max-width: 1399px) {
  .offcanvas-6__menu-wrapper {
    padding-bottom: 55px;
  }
}
@media only screen and (max-width: 1399px) {
  .offcanvas-6__menu-wrapper {
    padding-bottom: 35px;
    padding-left: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas-6__menu-wrapper {
    border-right: 0;
    padding-right: 40px;
  }
}
.offcanvas-6__logo {
  border-bottom: 3px solid var(--black-2);
  padding: 40px 0;
}
@media only screen and (max-width: 767px) {
  .offcanvas-6__logo {
    padding: 20px 0;
  }
}
.offcanvas-6__logo img {
  max-height: 50px;
}
.offcanvas-6__menu {
  overflow-y: scroll;
}
.offcanvas-6__menu a {
  font-size: 5vw;
  font-weight: 600;
  font-family: var(--font_clashDisplay);
  line-height: 1;
  line-height: 0.7;
  position: relative;
  transition: all 0.5s cubic-bezier(0, 0, 0.23, 1);
  text-decoration: none;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #AF89FF, #AF89FF 50%, #080808 0);
  background-size: 200% 100%;
  background-position: 100%;
  transform: perspective(359px) rotateY(-18deg);
}
@media only screen and (max-width: 1919px) {
  .offcanvas-6__menu a {
    font-size: 4vw;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas-6__menu a {
    font-size: 8.2vw;
    font-weight: 500;
  }
}
.offcanvas-6__menu a:hover {
  background-position: 0;
  color: #AF89FF;
  letter-spacing: 1.5px;
}
.offcanvas-6__menu a:after {
  position: absolute;
  content: "";
  background-image: url(../imgs/content-creator/smile.png);
  background-size: contain;
  width: 80px;
  height: 80px;
  left: calc(100% + 40px);
  top: 50%;
  transform: translateY(-50%) rotate(-30deg);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
@media only screen and (max-width: 1919px) {
  .offcanvas-6__menu a:after {
    width: 70px;
    height: 70px;
  }
}
@media only screen and (max-width: 1199px) {
  .offcanvas-6__menu a:after {
    display: none;
  }
}
.offcanvas-6__menu a:hover:after {
  opacity: 1;
  visibility: visible;
}
.offcanvas-6__menu li {
  margin-right: 200px;
  margin-top: 20px;
}
@media only screen and (max-width: 1919px) {
  .offcanvas-6__menu li {
    margin-right: 140px;
  }
}
@media only screen and (max-width: 1199px) {
  .offcanvas-6__menu li {
    margin-right: 60px;
  }
}
.offcanvas-6__menu li:not(:last-child) {
  margin-bottom: 47px;
}
@media only screen and (max-width: 767px) {
  .offcanvas-6__menu li:not(:last-child) {
    margin-bottom: 27px;
  }
}
.offcanvas-6__meta-wrapper {
  padding: 60px 80px 150px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  justify-content: flex-end;
  background-color: #AF89FF;
}
@media only screen and (max-width: 1399px) {
  .offcanvas-6__meta-wrapper {
    padding: 60px 60px 65px;
  }
}
@media only screen and (max-width: 991px) {
  .offcanvas-6__meta-wrapper {
    padding: 40px 40px 45px;
  }
}
@media only screen and (max-width: 767px) {
  .offcanvas-6__meta-wrapper {
    background-color: #F4E5D3;
    display: none;
  }
}
.offcanvas-6__close-button {
  position: absolute;
  top: 60px;
  right: 65px;
  z-index: 2;
}
@media only screen and (max-width: 767px) {
  .offcanvas-6__close-button {
    top: 40px;
    right: 45px;
  }
}
.offcanvas-6__links-wrapper {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.offcanvas-6__meta-title {
  font-size: 30px;
  font-weight: 600;
  color: var(--black-2);
  font-family: var(--font_clashDisplay);
  margin-bottom: 20px;
}
@media only screen and (max-width: 767px) {
  .offcanvas-6__meta-title {
    font-size: 26px;
  }
}
.offcanvas-6__meta li {
  font-size: 20px;
  line-height: 25px;
  font-family: var(--font_clashDisplay);
  font-weight: 600;
  color: var(--black);
}
@media only screen and (max-width: 767px) {
  .offcanvas-6__meta li {
    font-size: 18px;
  }
}
.offcanvas-6__meta li:not(:last-child) {
  margin-bottom: 15px;
}
.offcanvas-6__social-title {
  font-size: 30px;
  font-weight: 600;
  color: var(--black-2);
  font-family: var(--font_clashDisplay);
  margin-bottom: 25px;
}
@media only screen and (max-width: 767px) {
  .offcanvas-6__social-title {
    font-size: 26px;
  }
}
.offcanvas-6__social-links {
  display: flex;
  gap: 22px;
}
.offcanvas-6__social-links a {
  width: 95px;
  height: 95px;
  background-color: var(--white);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  border-radius: 30px;
  border: 3px solid var(--black-2);
  filter: drop-shadow(5px 5px 0 black);
  color: var(--black-2);
}
@media only screen and (max-width: 1399px) {
  .offcanvas-6__social-links a {
    width: 60px;
    height: 60px;
    font-size: 22px;
    border-radius: 10px;
  }
}
@media only screen and (max-width: 991px) {
  .offcanvas-6__social-links a {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }
}
.offcanvas-6__social-links a:hover {
  background-color: var(--yellow-3);
}

.shadow-close-button {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background-color: var(--white);
  position: relative;
  border: 3px solid var(--black-2);
  filter: drop-shadow(5px 5px 0 var(--black-2));
  transition: all 0.3s;
}
.shadow-close-button:hover {
  background-color: var(--yellow-3);
}
.shadow-close-button span {
  width: 30px;
  height: 3px;
  display: inline-block;
  background-color: var(--black-2);
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 3px;
}
.shadow-close-button span:first-child {
  transform: translateX(-50%) rotate(45deg);
}
.shadow-close-button span:last-child {
  transform: translateX(-50%) rotate(-45deg);
}

.cross-button {
  width: 130px;
  height: 130px;
  position: relative;
}
@media only screen and (max-width: 991px) {
  .cross-button {
    width: 60px;
    height: 60px;
  }
}
.cross-button span {
  width: 100%;
  height: 1px;
  display: inline-block;
  background-color: var(--black-2);
  position: absolute;
  left: 50%;
  top: 50%;
}
.cross-button span:first-child {
  transform: translateX(-50%) rotate(45deg);
}
.cross-button span:last-child {
  transform: translateX(-50%) rotate(-45deg);
}

.text-close-button {
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.text-close-button .bars {
  width: 40px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.text-close-button .bars span {
  width: 100%;
  height: 1px;
  background: var(--black-2);
}

.close-button {
  width: 70px;
  height: 70px;
  border-radius: 100%;
  background: #FFF;
  position: relative;
  border: 1px solid #FFF;
}
@media only screen and (max-width: 767px) {
  .close-button {
    width: 50px;
    height: 50px;
  }
}
.close-button span {
  width: 26px;
  height: 1px;
  display: inline-block;
  background-color: #3b82f6;
  position: absolute;
  left: 50%;
  top: 50%;
}
@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);
}

.gallery__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.gallery__item {
  position: relative;
}
.gallery__item a {
  display: block;
}
.gallery__item a:hover span {
  opacity: 1;
  visibility: visible;
}
.gallery__item span {
  color: var(--white);
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  background: rgba(0, 0, 0, 0.4);
}

#offcanvas6 {
  visibility: hidden;
}

.offcanvas-6__menu-wrapper {
  left: -100%;
  position: relative;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  transform: perspective(359px) rotateY(25deg);
}

.offcanvas-6__meta-wrapper {
  left: 100%;
  position: relative;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  transform: perspective(359px) rotateY(-25deg);
}

.offcanvas-6__menu ul li {
  opacity: 0;
  left: -100px;
  position: relative;
}

.second_level_canvas {
  opacity: 0;
  scale: 0.8;
}

.offcanvas-6__social-title {
  opacity: 0;
  position: relative;
  left: -50px;
  overflow: hidden;
}

.offcanvas-6__social-links a {
  opacity: 0;
  scale: 0.8;
  left: -15px;
}

#main_btn {
  position: relative;
  z-index: 999999;
  background-color: red;
  padding: 30px;
}

.offcanvas-4__area {
  top: -20%;
  opacity: 0;
  visibility: hidden;
  transform: perspective(359px) rotateX(25deg);
}

.offcanvas-4__menu ul li {
  opacity: 0;
  visibility: hidden;
  transform: perspective(250px) rotateX(90deg);
  top: -10px;
}

.offcanvas-4__thumb {
  opacity: 0;
  left: 50px;
  visibility: hidden;
  position: relative;
}

.offcanvas-4__meta {
  opacity: 0;
  left: -50px;
  visibility: hidden;
  position: relative;
}

.offcanvas-3__area {
  left: 0;
  opacity: 0;
  display: none;
  visibility: hidden;
}

.offcanvas-3__menu ul li {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  margin-top: 15px;
  margin-bottom: 0;
}

.offcanvas__left-2 {
  opacity: 0;
  top: -50%;
  position: relative;
}

.offcanvas__right-2 {
  opacity: 0;
  bottom: -50%;
  position: relative;
}

.offcanvas__menu-2 ul li {
  overflow: hidden;
  bottom: -60px;
  opacity: 0;
  position: relative;
}

.offcanvas__area-2 {
  overflow: hidden;
}

body .btn4 {
  position: absolute;
  z-index: 999999;
}

/*
    COMMON STYLES IN CHEF TEMPLATE
*/
.fe-body {
  background-color: #FFF;
}
.fe-body p {
  color: var(--primary);
  font-size: 16px;
}
.fe-body h1,
.fe-body h2,
.fe-body h3,
.fe-body h4,
.fe-body h5,
.fe-body h6 {
  color: #222;
}
.light .fe-body {
  background-color: var(--white-19);
  color: var(--purple-4);
}
.light .fe-body h1,
.light .fe-body h2,
.light .fe-body h3,
.light .fe-body h4,
.light .fe-body h5,
.light .fe-body h6 {
  color: var(--purple-4);
}
.light .fe-body p {
  color: var(--purple-4);
}

.fraisembal-subscribe {
  background-color: var(--white-19);
  width: 120px;
  height: 120px;
}
.light .fraisembal-subscribe {
  background-color: var(--purple-4);
}

.fraisembal-subscribe-wrap {
  position: unset;
}

/* Styling vertical lines within a container */
.lines {
  display: flex;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  padding-left: 0;
  padding-right: 0;
  margin-left: 6px;
}
.lines .line {
  height: 100%;
  width: 1px;
  background: linear-gradient(180deg, #313950 0%, rgba(56, 67, 100, 0.41) 100%);
  top: 0;
}
.light .lines .line {
  background: linear-gradient(180deg, #EBDFD5 0%, rgba(235, 223, 213, 0.2) 100%);
}
@media only screen and (max-width: 767px) {
  .lines .line {
    display: none;
  }
}

/* Styling images within specific shapes */
.image-shapes .shape-image {
  position: absolute;
  /* Positioning for each image shape */
}
.image-shapes .shape-image:nth-child(1) {
  top: 370px;
  right: 0;
}
@media only screen and (max-width: 767px) {
  .image-shapes .shape-image:nth-child(1) {
    top: 270px;
  }
}
.image-shapes .shape-image:nth-child(2) {
  bottom: 260px;
  left: 160px;
}
.image-shapes .shape-image:nth-child(3) {
  top: 90px;
  left: 540px;
}

/* Styling brand images within specific shapes */
.brand-image-shapes .shape-image {
  position: absolute;
  bottom: 90px;
  left: 3.385vw;
}
@media only screen and (max-width: 767px) {
  .brand-image-shapes .shape-image {
    display: none;
  }
}
@media (min-width: 1919px) {
  .brand-image-shapes .shape-image {
    left: 65px;
  }
}
.brand-image-shapes .shape-image img {
  width: 13.021vw;
}
@media (min-width: 1919px) {
  .brand-image-shapes .shape-image img {
    width: 100%;
  }
}

/* section title  */
.fraisembal-sec-title {
  font-size: 50px;
  font-weight: 700;
  line-height: 1.11;
}
@media only screen and (max-width: 1199px) {
  .fraisembal-sec-title {
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .fraisembal-sec-title {
    font-size: 28px;
  }
}
.fraisembal-sec-title span {
  font-weight: 400;
}
.light .fraisembal-sec-title span {
  color: var(--purple-4);
}
.fraisembal-sec-title strong {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  position: relative;
  color: var(--white-19);
}

/* INTRO TEXT BACKGROUND IMAGE ANIMATION */
@keyframes slide {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -512px -512px;
  }
}
/*
    CHEF TEMPLATE MAIN STYLES
*/
.fe-header {
  /*
      CHEF TEMPLATE HEADER STYLE
  */
}
.fe-header__area {
  /*
      No padding is necessary in the header as it is already within the container.
  */
}
@media only screen and (max-width: 767px) {
  .dir-rtl .fe-header__area .menu-icon-2 {
    margin-left: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .fe-header__area {
    padding-left: 0;
    padding-right: 0;
  }
}
.fe-header__navicon .search-icon {
  color: var(--white);
}
.light .fe-header__navicon .search-icon {
  color: var(--purple-4);
}
.fe-header__nav ul li a {
  color: var(--white);
  font-family: var(--font_outfit);
  color: var(--white-19);
  font-size: 16px;
  padding: 38px 25px;
}
.fe-header__navicon #lang-default {
  color: var(--white);
}
.light .fe-header__navicon #lang-default {
  color: var(--purple-4);
}
.fe-header__navicon .menu-icon-2::before {
  background-color: var(--white);
}
.light .fe-header__navicon .menu-icon-2::before {
  background-color: var(--purple-4);
}
.fe-header__navicon .menu-icon-2::after {
  background-color: var(--white);
}
.light .fe-header__navicon .menu-icon-2::after {
  background-color: var(--purple-4);
}
.fe-header__search button i {
  color: var(--white);
}
.fe-intro__area {
  /*
      CHEF TEMPLATE INTRO STYLE
  */
  padding-top: 160px;
  padding-bottom: 160px;
  background-color: var(--primary);
  position: relative;
}
.light .fe-intro__area {
  background-color: #F5EEE8;
}
@media only screen and (max-width: 991px) {
  .fe-intro__area {
    padding-bottom: 10px;
    padding-top: 110px;
  }
}
.fe-intro__area-main-thumb {
  position: absolute;
  left: 32vw;
  bottom: 0;
  z-index: 2;
}
@media (min-width: 1919px) {
  .fe-intro__area-main-thumb {
    left: 50%;
    transform: translateX(-50%);
  }
}
@media only screen and (max-width: 991px) {
  .fe-intro__area-main-thumb {
    left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .fe-intro__area-main-thumb {
    display: none;
  }
}
.fe-intro__area-main-thumb img {
  width: 33vw;
}
@media (min-width: 1919px) {
  .fe-intro__area-main-thumb img {
    width: 100%;
  }
}
.fe-intro__area-content-wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  .fe-intro__area-content-wrap {
    flex-wrap: wrap;
    gap: 70px;
  }
}
.fe-intro__area-sub-title {
  font-size: 3.646vw;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 30px;
}
@media (min-width: 1919px) {
  .fe-intro__area-sub-title {
    font-size: 70px;
  }
}
@media only screen and (max-width: 991px) {
  .fe-intro__area-sub-title {
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .fe-intro__area-sub-title {
    font-size: 30px;
  }
}
.fe-intro__area {
  /* Styling for the title element using background clip */
}
.fe-intro__area-title {
  font-family: var(--font_outfit) !important;
  font-size: 195px;
  text-transform: uppercase;
  background: url("https://frais-embal.fr/img/home/video.mp4");
  background-position: bottom left;
  background-repeat: repeat;
  background-size: 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1.5vw;
  font-weight: 900;
  position: relative;
  animation: slide 30s linear infinite;
  text-align: center;
  line-height: 1;
}
.dir-rtl .fe-intro__area-title {
  letter-spacing: 60px;
}
@media (min-width: 1800px) {
  .fe-intro__area-title {
    font-size: 400px;
    letter-spacing: 105px;
  }
}
@media only screen and (max-width: 767px) {
  .fe-intro__area-title {
    text-align: start;
  }
}
.fe-intro__area-btn {
  background-color: var(--primary);
  padding: 22px 50px;
  color: #FFF;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  border-radius: 4px;
}
.light .fe-intro__area-btn {
  background-color: var(--purple-4);
  color: var(--white-19);
}
@media only screen and (max-width: 767px) {
  .fe-intro__area-btn {
    padding: 12px 20px;
    font-size: 16px;
  }
}
.fe-intro__area-item-right {
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
}
@media only screen and (max-width: 1919px) {
  .fe-intro__area-item-right {
    padding-bottom: 30px;
  }
}
.fe-intro__area-subscribe-text {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 275px;
}
.fe-intro__area-subscribe-text .title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.fe-intro__area-disc {
  max-width: 270px;
}
.fe-intro__area-disc p {
  font-size: 18px;
  font-weight: 300;
}
.fe-intro__area-disc p span {
  font-weight: 500;
}
.fe-intro__area-thumb {
  position: absolute;
  top: 100%;
  outline: 1px solid var(--white-19);
  outline-offset: 10px;
}
.light .fe-intro__area-thumb {
  outline: 1px solid var(--purple-4);
}
@media only screen and (max-width: 991px) {
  .fe-intro__area-thumb {
    position: unset;
  }
}
@media only screen and (max-width: 767px) {
  .fe-intro__area-thumb {
    margin-left: 15px;
  }
}
.fe-buybutton__area {
  /*
      CHEF TEMPLATE BUY BUTTON STYLE
  */
  padding-top: 90px;
  padding-bottom: 150px;
  position: relative;
}
@media only screen and (max-width: 991px) {
  .fe-buybutton__area {
    padding-bottom: 50px;
  }
}
.fe-buybutton__area .shape-image {
  position: absolute;
  top: -160px;
  inset-inline-start: 160px;
}
.fe-buybutton__area-content {
  max-width: 330px;
  margin-left: 330px;
}
@media only screen and (max-width: 1199px) {
  .fe-buybutton__area-content {
    margin-left: unset;
  }
}
.fe-buybutton__area-buybtn {
  display: grid;
  grid-template-columns: 1fr 20px;
  align-items: center;
  gap: 115px;
  color: var(--white-19);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  position: relative;
  padding-bottom: 25px;
  font-family: var(--font_tropline);
  overflow: hidden;
  transition: 0.5s;
}
.light .fe-buybutton__area-buybtn {
  color: var(--purple-4);
}
.fe-buybutton__area-buybtn:hover {
  color: var(--primary);
}
.fe-buybutton__area-buybtn:hover::before {
  width: 0;
}
.fe-buybutton__area-buybtn:hover::after {
  width: 100%;
}
.fe-buybutton__area-buybtn::before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: var(--white);
  transition: 0.5s;
}
.light .fe-buybutton__area-buybtn::before {
  background-color: var(--purple-4);
}
.fe-buybutton__area-buybtn::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background-color: var(--primary);
  transition: 1s;
}
.fe-buybutton__area-buybtn .arrow-up {
  filter: brightness(10);
  transition: 1s;
}
.light .fe-buybutton__area-buybtn .arrow-up {
  filter: brightness(0);
}
.fe-brand__area {
  /*
      CHEF TEMPLATE HEADER STYLE
  */
  position: relative;
  padding-bottom: 150px;
}
@media only screen and (max-width: 991px) {
  .fe-brand__area {
    padding-bottom: 50px;
  }
}
.fe-brand__area-title-wrap {
  text-align: center;
}
.fe-brand__area-title {
  font-size: 16px;
  font-weight: 700;
  display: inline-block;
  background-color: var(--purple-4);
  padding: 0 10px;
  margin-bottom: -10px;
  transform: translateY(10px);
}
.light .fe-brand__area-title {
  background-color: var(--white-19);
}
.fe-brand__area-wrapper {
  margin: auto;
  gap: 80px;
  padding: 40px 0;
}
.light .fe-brand__area-wrapper {
  border: 1px solid #EAE6DA;
}
@media only screen and (max-width: 767px) {
  .fe-brand__area-wrapper {
    padding: 20px 0px;
  }
}
.fe-skills__area {
  /*
      CHEF TEMPLATE SKILLS STYLES
  */
  padding-bottom: 150px;
}
@media only screen and (max-width: 1199px) {
  .fe-skills__area {
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .fe-skills__area {
    padding-bottom: 50px;
  }
}
.fe-skills__area-sec-wrap {
  margin-bottom: 45px;
}
.fe-skills__area-content {
  max-width: 300px;
}
.fe-skills__area-content .nav-link {
  padding: 30px 0 30px 70px;
  position: relative;
  cursor: pointer;
}
@media only screen and (max-width: 1199px) {
  .fe-skills__area-content .nav-link {
    padding: 20px 0 20px 50px;
  }
}
.fe-skills__area-content .nav-link:first-child {
  padding: 0 0 30px 70px;
}
.dir-rtl .fe-skills__area-content .nav-link:first-child {
  padding-inline-start: 70px;
}
@media only screen and (max-width: 1199px) {
  .fe-skills__area-content .nav-link:first-child {
    padding: 0 0 20px 50px;
  }
  .dir-rtl .fe-skills__area-content .nav-link:first-child {
    padding-inline-start: 50px;
  }
}
.fe-skills__area-content .nav-link:last-child {
  padding: 30px 0 0 70px;
}
.dir-rtl .fe-skills__area-content .nav-link:last-child {
  padding-inline-start: 70px;
}
@media only screen and (max-width: 1199px) {
  .fe-skills__area-content .nav-link:last-child {
    padding: 20px 0 0 50px;
  }
}
.fe-skills__area-content .nav-link::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  height: 100%;
  width: 1px;
  background-color: var(--white-19);
  transition: 0.3s;
  opacity: 0.2;
}
.light .fe-skills__area-content .nav-link::before {
  background-color: #EAE6DA;
}
.fe-skills__area-content .nav-link.active::before {
  opacity: 1;
  visibility: visible;
}
.fe-skills__area-content .nav-link.active .fraisembal-skills__area-menu .title {
  color: var(--white-19);
  font-weight: 700;
}
.light .fe-skills__area-content .nav-link.active .fraisembal-skills__area-menu .title {
  color: #9F9987;
}
.fe-skills__area-content .nav-link.active .disc p {
  color: #ADB2C2;
}
.light .fe-skills__area-content .nav-link.active .disc p {
  color: #9F9987;
}
.fe-skills__area-menu {
  text-align: start;
}
.fe-skills__area-menu .title {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #747D97;
  transition: 0.3s;
}
.fe-skills__area-menu .disc p {
  color: #747D97;
  transition: 0.3s;
}
.fe-skills__area-skillImg {
  position: relative;
}
.fe-skills__area-skillImg.has-shadow {
  margin: 80px 80px 0 0;
}
.fe-skills__area-skillImg.has-shadow::before {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  background-color: #475274;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 767px) {
  .fe-skills__area-skillImg.has-shadow::before {
    top: -30px;
  }
}
.fe-skills__area-skillImg img {
  position: relative;
  z-index: 2;
  width: 100%;
}
.fe-experience__area {
  /*
      CHEF TEMPLATE EXPERIENCE STYLES
  */
  padding-bottom: 180px;
  position: relative;
}
@media only screen and (max-width: 1199px) {
  .fe-experience__area {
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .fe-experience__area {
    padding-bottom: 50px;
  }
}
.fe-experience__area .shape-1 {
  position: absolute;
  bottom: -135px;
  right: 0;
}
.fe-experience__area .shape-1 img {
  width: 10.313vw;
}
@media (min-width: 1919px) {
  .fe-experience__area .shape-1 img {
    width: 100%;
  }
}
.fe-experience__area-ex-wrap {
  background-color: #475274;
  text-align: center;
  padding: 70px 40px;
  max-width: 225px;
}
.light .fe-experience__area-ex-wrap {
  background-color: #F5EEE8;
}
@media only screen and (max-width: 991px) {
  .fe-experience__area-ex-wrap {
    padding: 40px 30px;
  }
}
.fe-experience__area-ex-wrap .title {
  font-size: 50px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 10px;
}
.fe-experience__area-ex-wrap .disc p {
  font-size: 26px;
  line-height: 1.23;
  font-weight: 600;
  font-family: var(--font_tropline);
}
@media only screen and (max-width: 991px) {
  .fe-experience__area-content {
    padding-top: 50px;
  }
}
.fe-experience__area-signature {
  margin-top: 70px;
  max-width: 165px;
}
@media only screen and (max-width: 1199px) {
  .fe-experience__area-signature {
    margin-top: 40px;
  }
}
.fe-gallary__area {
  /*
      CHEF TEMPLATE GALLARY STYLES
  */
  padding-bottom: 70px;
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 1199px) {
  .fe-gallary__area {
    padding-bottom: 30px;
  }
}
@media only screen and (max-width: 991px) {
  .fe-gallary__area {
    padding-bottom: 0;
  }
}
.fe-gallary__area .shape-1 {
  position: absolute;
  left: 12.5vw;
  bottom: 380px;
}
.fe-gallary__area .shape-1 img {
  width: 12.5vw;
}
@media (min-width: 1919px) {
  .fe-gallary__area .shape-1 {
    left: 240px;
  }
  .fe-gallary__area .shape-1 img {
    width: 100%;
  }
}
.fe-gallary__area-title {
  font-size: 14.583vw;
  font-weight: 400;
  line-height: 1;
  text-align: center;
}
@media (min-width: 1919px) {
  .fe-gallary__area-title {
    font-size: 280px;
  }
}
.fe-gallary__area-rect {
  background-color: #475274;
  width: 1085px;
  height: 490px;
  position: absolute;
  left: 0;
  top: 700px;
  z-index: -1;
}
.light .fe-gallary__area-rect {
  background-color: #F5EEE8;
}
@media only screen and (max-width: 767px) {
  .fe-gallary__area-rect {
    display: none;
  }
}
.fe-gallary__area-items {
  padding-top: 85px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media only screen and (max-width: 991px) {
  .fe-gallary__area-items {
    gap: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .fe-gallary__area-items {
    grid-template-columns: 1fr;
    padding-top: 50px;
  }
}
.fe-gallary__area-item {
  margin-bottom: 50px;
}
.fe-gallary__area-item:nth-child(3n+1) {
  max-width: 350px;
}
.fe-gallary__area-item:nth-child(3n+2) {
  margin-top: 190px;
  max-width: 660px;
}
@media only screen and (max-width: 767px) {
  .fe-gallary__area-item:nth-child(3n+2) {
    margin-top: 0;
  }
}
.fe-gallary__area-item:nth-child(3n+2) .fraisembal-gallary__area-content {
  text-align: right;
  padding-right: 25px;
  margin-right: 45px;
}
.fe-gallary__area-item:nth-child(3n+2) .fraisembal-gallary__area-content::before {
  left: auto;
  right: 0;
}
.fe-gallary__area-item:nth-child(3n+3) {
  grid-column-start: 1;
  grid-column-end: -1;
  max-width: fit-content;
  margin: 45px auto;
  margin-top: 0;
  max-width: 470px;
  padding-left: 30px;
}
.fe-gallary__area-item:hover img {
  transform: scale(1.1);
  transition: 1s;
}
.fe-gallary__area-thumb {
  margin-bottom: 30px;
  overflow: hidden;
}
.fe-gallary__area-thumb img {
  transition: 1s;
  width: 100%;
}
.fe-gallary__area-content {
  position: relative;
  padding-left: 25px;
  margin-left: 45px;
}
.dir-rtl .fe-gallary__area-content {
  padding-inline-start: 25px;
  margin-inline-start: 45px;
}
.fe-gallary__area-content::before {
  content: "";
  position: absolute;
  left: 0;
  width: 1px;
  height: 170px;
  background-color: var(--white-19);
  bottom: 0;
}
.dir-rtl .fe-gallary__area-content::before {
  inset-inline-start: 0;
}
.light .fe-gallary__area-content::before {
  background-color: var(--purple-4);
}
.fe-gallary__area-content .title {
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
}
.fe-testimonial__area {
  /*
      CHEF TEMPLATE TESTIMONIAL STYLES
  */
  padding-bottom: 140px;
}
@media only screen and (max-width: 1199px) {
  .fe-testimonial__area {
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .fe-testimonial__area {
    padding-bottom: 50px;
  }
}
.fe-testimonial__area-wrapper {
  position: relative;
}
.fe-testimonial__area-wrapper .swiper-pagination span {
  color: var(--white-19);
  font-size: 14px;
}
.light .fe-testimonial__area-wrapper .swiper-pagination span {
  color: var(--purple-4);
}
.fe-testimonial__area-wrapper .swiper-pagination-current {
  position: relative;
  padding: 0 7px;
}
.fe-testimonial__area-wrapper .swiper-pagination-current::before {
  content: "0";
  position: absolute;
  left: -5px;
  top: -1px;
}
.fe-testimonial__area-wrapper .swiper-pagination-current::after {
  content: "";
  position: absolute;
  left: -20px;
  background-image: url(../imgs/chef/test-arrow-left.png);
  background-repeat: no-repeat;
  background-size: contain;
  height: 13px;
  width: 9px;
  top: 3px;
}
.light .fe-testimonial__area-wrapper .swiper-pagination-current::after {
  filter: brightness(0);
}
.fe-testimonial__area-wrapper .swiper-pagination-total {
  padding: 0 22px;
  position: relative;
}
.fe-testimonial__area-wrapper .swiper-pagination-total::before {
  content: "0";
  position: absolute;
  left: 10px;
  top: -1px;
}
.fe-testimonial__area-wrapper .swiper-pagination-total::after {
  content: "";
  position: absolute;
  right: 5px;
  background-image: url(../imgs/chef/test-arrow-right.png);
  background-repeat: no-repeat;
  background-size: contain;
  height: 13px;
  width: 9px;
  top: 4px;
}
.light .fe-testimonial__area-wrapper .swiper-pagination-total::after {
  filter: brightness(0);
}
.fe-testimonial__area-wrapper .dash {
  width: 100px;
  height: 1px;
  margin-bottom: 5px;
  display: inline-block;
  background: var(--white-19);
}
.light .fe-testimonial__area-wrapper .dash {
  background: var(--purple-4);
}
.fe-testimonial__area-quote {
  width: 237.815px;
  height: 152px;
  transform: rotate(-30deg);
  border: 1px solid var(--white-19);
  border-radius: 50%;
  margin: auto;
  margin-bottom: -25px;
  padding-top: 40px;
}
.light .fe-testimonial__area-quote {
  border: 1px solid var(--purple-4);
}
@media only screen and (max-width: 767px) {
  .fe-testimonial__area-quote {
    width: 137.815px;
    height: 100px;
  }
}
.fe-testimonial__area-quote .quote-image {
  transform: rotate(30deg);
}
.light .fe-testimonial__area-quote .quote-image img {
  filter: brightness(0);
}
.fe-testimonial__area-content {
  max-width: 910px;
  margin: auto;
  text-align: center;
  padding-top: 50px;
  padding-bottom: 120px;
}
@media only screen and (max-width: 991px) {
  .fe-testimonial__area-content {
    padding-bottom: 60px;
  }
}
.fe-testimonial__area-title {
  font-size: 50px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 50px;
}
@media only screen and (max-width: 991px) {
  .fe-testimonial__area-title {
    font-size: 35px;
    margin-bottom: 25px;
  }
}
@media only screen and (max-width: 767px) {
  .fe-testimonial__area-title {
    font-size: 28px;
  }
}
.fe-testimonial__area-name {
  font-size: 20px;
  font-weight: 700;
}
.fe-testimonial__area-post p {
  color: #ACB2C2;
  font-size: 14px;
}
.fe-video__area {
  /*
      CHEF TEMPLATE VIDEO STYLES
  */
  padding-bottom: 150px;
}
@media only screen and (max-width: 1199px) {
  .fe-video__area {
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .fe-video__area {
    padding-bottom: 50px;
  }
}
.fe-video__area.video-about {
  padding-bottom: 110px;
}
.fe-video__area-item {
  position: relative;
}
.fe-video__area-item video {
  width: 100%;
}
@media only screen and (max-width: 1199px) {
  .fe-video__area-item video {
    height: 400px;
    object-fit: cover;
  }
}
@media only screen and (max-width: 767px) {
  .fe-video__area-item video {
    height: 200px;
    object-fit: cover;
  }
}
.fe-counter__area {
  /*
      CHEF TEMPLATE COUNTER STYLES
  */
  padding-bottom: 150px;
}
@media only screen and (max-width: 1199px) {
  .fe-counter__area {
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .fe-counter__area {
    padding-bottom: 50px;
  }
}
.fe-counter__area-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .fe-counter__area-items {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.fe-counter__area-counter {
  font-size: 100px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
@media only screen and (max-width: 1199px) {
  .fe-counter__area-counter {
    font-size: 70px;
  }
}
@media only screen and (max-width: 991px) {
  .fe-counter__area-counter {
    font-size: 50px;
  }
}
.fe-counter__area-title {
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}
@media only screen and (max-width: 991px) {
  .fe-counter__area-title {
    font-size: 24px;
  }
}
.fe-counter__area-thumb {
  max-width: 840px;
  margin: auto;
}
.fe-tutorial__area {
  /*
      CHEF TEMPLATE tutorial STYLES
  */
  padding-top: 140px;
  padding-bottom: 140px;
}
@media only screen and (max-width: 1199px) {
  .fe-tutorial__area {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .fe-tutorial__area {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}
.fe-tutorial__area-sec-wrap {
  text-align: center;
  margin-bottom: 55px;
}
@media only screen and (max-width: 991px) {
  .fe-tutorial__area-sec-wrap {
    margin-bottom: 30px;
  }
}
.fe-tutorial__area-blogs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
}
@media only screen and (max-width: 991px) {
  .fe-tutorial__area-blogs {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .fe-tutorial__area-blogs {
    grid-template-columns: 1fr;
  }
}
.fe-tutorial__area-blog {
  max-width: 390px;
}
.fe-tutorial__area-thumb {
  margin-bottom: 40px;
  overflow: hidden;
}
@media only screen and (max-width: 991px) {
  .fe-tutorial__area-thumb {
    margin-bottom: 20px;
  }
}
.fe-tutorial__area-thumb:hover img {
  transform: scale(1.1);
}
.fe-tutorial__area-thumb img {
  width: 100%;
  transition: 0.7s;
}
.fe-tutorial__area-meta {
  display: flex;
  gap: 40px;
  margin-bottom: 15px;
}
.fe-tutorial__area-meta li {
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  position: relative;
}
.fe-tutorial__area-meta li:last-child {
  font-weight: 300;
  color: #747D97;
}
.fe-tutorial__area-meta li::after {
  content: "";
  position: absolute;
  inset-inline-end: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 1px;
  background-color: var(--white-19);
}
.light .fe-tutorial__area-meta li::after {
  background-color: var(--purple-4);
}
.fe-tutorial__area-meta li:last-child::after {
  display: none;
}
.fe-tutorial__area-meta li:first-child {
  color: var(--white-19);
}
.light .fe-tutorial__area-meta li:first-child {
  color: var(--purple-4);
}
.fe-tutorial__area-title {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  transition: 0.5s;
}
@media only screen and (max-width: 991px) {
  .fe-tutorial__area-title {
    font-size: 22px;
  }
}
.fe-tutorial__area-title:hover {
  color: var(--primary);
}
.fe-booking__area {
  /*
      CHEF TEMPLATE BOOKING STYLES
  */
  background: url("../imgs/chef/cooking-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 140px;
  position: relative;
}
@media only screen and (max-width: 1199px) {
  .fe-booking__area {
    padding-top: 100px;
  }
}
.fe-booking__area::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #273459;
  opacity: 0.4;
}
.light .fe-booking__area::before {
  opacity: 0.9;
}
@media only screen and (max-width: 991px) {
  .fe-booking__area {
    padding-top: 50px;
  }
}
.fe-booking__area-sec-wrap {
  margin-bottom: 90px;
  text-align: center;
}
.fe-booking__area-sec-wrap .fraisembal-sec-title {
  color: var(--white-19) !important;
}
@media only screen and (max-width: 991px) {
  .fe-booking__area-sec-wrap {
    margin-bottom: 40px;
  }
}
.fe-booking__area-booking-form {
  max-width: 850px;
  margin: auto;
  padding-bottom: 150px;
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 991px) {
  .fe-booking__area-booking-form {
    padding-bottom: 50px;
  }
}
.fe-booking__area-fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 60px 30px;
}
@media only screen and (max-width: 991px) {
  .fe-booking__area-fields {
    gap: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .fe-booking__area-fields {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.fe-booking__area-fields input,
.fe-booking__area-fields textarea,
.fe-booking__area-fields select {
  width: 100%;
  background-color: transparent;
  border: 0;
  height: 45px;
  color: var(--white-19);
  border-bottom: 1px solid #4a5474;
  font-size: 30px;
  font-weight: 400;
  font-family: var(--font_tropline);
  resize: none;
  overflow-y: hidden;
  padding-bottom: 7px;
  transition: 0.5s;
}
.light .fe-booking__area-fields input,
.light .fe-booking__area-fields textarea,
.light .fe-booking__area-fields select {
  border-bottom: 1px solid #4F5B80;
}
@media only screen and (max-width: 991px) {
  .fe-booking__area-fields input,
  .fe-booking__area-fields textarea,
  .fe-booking__area-fields select {
    font-size: 18px;
  }
}
.fe-booking__area-fields input::placeholder,
.fe-booking__area-fields textarea::placeholder,
.fe-booking__area-fields select::placeholder {
  color: var(--white-19);
  text-transform: capitalize;
}
.fe-booking__area-fields input:focus,
.fe-booking__area-fields textarea:focus,
.fe-booking__area-fields select:focus {
  outline: 0;
  border-bottom: 1px solid rgba(251, 250, 247, 0.4117647059);
}
.fe-booking__area-fields button {
  padding: 20px 45px;
  background-color: var(--white-19);
  color: var(--purple-4);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  height: unset;
  font-family: var(--font_tropline);
  grid-column: 1/-1;
  max-width: fit-content;
  margin: auto;
  margin-top: 10px;
  border-bottom: 0;
}
.fe-booking__area-fields button:focus {
  border-bottom: 0;
}
.fe-booking__area-fields textarea {
  grid-column: 1/-1;
}
.fe-booking__area-fields select option {
  color: var(--purple-4);
}
.fe-booking__area-thumb {
  text-align: center;
  position: relative;
  z-index: 1;
}
@media only screen and (max-width: 991px) {
  .fe-booking__area-thumb img {
    width: 50%;
  }
}
.fe-booking__area-thumb::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 50%;
  background: var(--purple-4);
  bottom: 0;
  left: 0;
  z-index: -1;
}
.light .fe-booking__area-thumb::before {
  background-color: var(--white-19);
}
.fe-footer__area {
  /*
      CHEF TEMPLATE FOOTER STYLES
  */
  padding-top: 60px;
  background: var(--primary);
}
@media only screen and (max-width: 991px) {
  .fe-footer__area {
    padding-top: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .fe-footer__area {
    padding: 60px 15px 20px;
  }
}
.fe-footer__area-top {
  max-width: 790px;
  margin: auto;
}
.fe-footer__area-logo {
  max-width: 408px;
  margin: auto;
  margin-bottom: 50px;
}
@media only screen and (max-width: 991px) {
  .fe-footer__area-logo {
    max-width: 150px;
  }
}
.fe-footer__area-logo img {
  width: 100%;
}
.fe-footer__area-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 60px;
  position: relative;
  max-width: 635px;
  margin: auto;
  margin-bottom: 60px;
}
@media only screen and (max-width: 767px) {
  .fe-footer__area-info {
    margin-bottom: 0px;
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .fe-footer__area-info .address {
    font-size: 14px;
    max-width: 200px;
    margin: 15px 0;
    display: block;
    opacity: 0.75;
  }
}
.fe-footer__area-info i {
  display: none;
}
@media only screen and (max-width: 767px) {
  .fe-footer__area-info a {
    text-align: left;
    padding: 15px 0 10px;
    margin: 10px 0;
    color: #FFF;
    display: block;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 20px;
    font-weight: bold;
  }
  .fe-footer__area-info a i {
    display: inline-block;
    color: #5aa0cd;
  }
}
.fe-footer__area-info li {
  color: var(--white-19);
}
@media screen and (min-width: 768px) {
  .fe-footer__area-info li:nth-child(odd) {
    text-align: end;
  }
  .fe-footer__area-info li:nth-child(even) {
    text-align: start;
  }
}
@media screen and (min-width: 768px) {
  .fe-footer__area-info::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    height: 100%;
    width: 1px;
    background-color: #FFFFFF;
  }
}
.fe-footer__area-bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  padding: 24px 0px;
}
@media only screen and (max-width: 767px) {
  .fe-footer__area-bottom {
    grid-template-columns: 1fr;
    gap: 15px;
    text-align: center;
    display: block;
    padding: 15px 0;
    opacity: 0.75;
  }
}
.fe-footer__area-copyright-text p {
  font-size: 16px;
  color: var(--white-19);
}
.light .fe-footer__area-copyright-text p {
  color: var(--white-19);
}
@media only screen and (max-width: 767px) {
  .fe-footer__area-copyright-text p {
    font-size: 12px;
    text-align: left;
    margin-bottom: 0;
  }
}
.fe-footer__area-menu {
  display: flex;
  gap: 40px;
  justify-content: center;
}
@media only screen and (max-width: 767px) {
  .fe-footer__area-menu {
    justify-content: flex-start;
  }
}
.fe-footer__area-menu li {
  position: relative;
  line-height: 1;
}
.fe-footer__area-menu li:last-child::before {
  display: none;
}
.fe-footer__area-menu li::before {
  content: "";
  position: absolute;
  right: -20px;
  top: 2px;
  height: 15px;
  width: 1px;
  background-color: var(--white-19);
}
.fe-footer__area-menu li a {
  color: var(--white-19);
  font-size: 16px;
  font-weight: 400;
}
@media screen and (max-width: 768px) {
  .fe-footer__area-menu li a {
    font-size: 12px;
  }
}
.fe-footer__area-right {
  text-align: end;
}
@media only screen and (max-width: 767px) {
  .fe-footer__area-right {
    text-align: center;
    background: rgba(255, 255, 255, 0.025);
    padding: 15px 0;
    border-radius: 0.75em;
    margin-top: 30px;
  }
}
.fe-footer__area-right .go-top__btn {
  font-size: 16px;
  font-weight: 400;
  color: var(--white-19);
  font-family: var(--font_primary);
}
.fe-inab__intro {
  /*
      CHEF TEMPLATE ABOUT STYLES
  */
  padding: 190px 0;
  background-color: var(--purple-5);
}
.light .fe-inab__intro {
  background-color: #F5EEE8;
}
@media only screen and (max-width: 1919px) {
  .fe-inab__intro {
    padding: 200px 0 100px 0;
  }
}
@media only screen and (max-width: 767px) {
  .fe-inab__intro {
    padding: 150px 0 50px 0;
  }
}
.fe-inab__intro-title-wrap {
  position: relative;
}
.fe-inab__intro-title {
  font-size: 14.583vw;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
}
@media (min-width: 1919px) {
  .fe-inab__intro-title {
    font-size: 280px;
  }
}
.fe-inab__intro-title span {
  font-weight: 600;
}
.fe-inab__intro-thumb {
  max-width: 21.354vw;
  position: absolute;
  inset-inline-end: 0;
  top: 0;
}
@media only screen and (max-width: 991px) {
  .fe-inab__intro-thumb {
    padding-top: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .fe-inab__intro-thumb {
    max-width: unset;
    position: unset;
  }
}
@media (min-width: 1919px) {
  .fe-inab__intro-thumb {
    max-width: 410px;
  }
}
.fe-inab__intro-thumb img {
  border-radius: 5px;
}
.fe-inab__intro-thumb .fraisembal-subscribe-wrap {
  text-align: end;
  margin-top: -50px;
  margin-inline-end: -50px;
}
@media only screen and (max-width: 991px) {
  .fe-inab__intro-thumb .fraisembal-subscribe-wrap {
    margin-inline-end: -10px;
  }
}
@media only screen and (max-width: 767px) {
  .fe-inab__intro-thumb .fraisembal-subscribe-wrap {
    text-align: start;
  }
}
.fe-inab__intro-thumb .fraisembal-subscribe {
  background-color: var(--purple-4);
}
.fe-inab__counter {
  /*
      CHEF TEMPLATE COUNTER STYLES
  */
  padding-top: 150px;
}
@media only screen and (max-width: 1199px) {
  .fe-inab__counter {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 991px) {
  .fe-inab__counter {
    padding-top: 50px;
  }
}
.fe-inab__counter-content {
  padding-bottom: 120px;
}
@media only screen and (max-width: 1199px) {
  .fe-inab__counter-content {
    padding-bottom: 70px;
  }
}
@media only screen and (max-width: 991px) {
  .fe-inab__counter-content {
    padding-bottom: 50px;
  }
}
.fe-inab__counter-title {
  text-align: center;
  font-size: 70px;
  font-weight: 700;
  line-height: 1.7;
}
@media only screen and (max-width: 991px) {
  .fe-inab__counter-title {
    font-size: 40px;
    line-height: 1.5;
  }
}
.fe-inab__counter-disc {
  max-width: 630px;
  margin: auto;
  text-align: center;
  margin-bottom: 30px;
}
.fe-inab__counter-disc p {
  color: #ADB2C2;
}
.fe-inp__intro {
  /*
      CHEF TEMPLATE INTRO STYLES
  */
  padding-top: 220px;
}
@media only screen and (max-width: 1199px) {
  .fe-inp__intro {
    padding-top: 150px;
  }
}
@media only screen and (max-width: 991px) {
  .fe-inp__intro {
    padding-top: 100px;
  }
}
.fe-inpd__details {
  /*
      CHEF TEMPLATE PROJECT DETAILS STYLES
  */
  padding-top: 240px;
}
@media only screen and (max-width: 1199px) {
  .fe-inpd__details {
    padding-top: 150px;
  }
}
.fe-inpd__details-title {
  text-align: center;
}
@media only screen and (max-width: 991px) {
  .fe-inpd__details-title {
    font-size: 40px;
  }
}
.fe-inpd__details-thumb {
  padding-top: 65px;
}
@media only screen and (max-width: 991px) {
  .fe-inpd__details-thumb {
    padding-top: 30px;
  }
}
.fe-inpd__details-content {
  padding-top: 80px;
  padding-bottom: 40px;
}
@media only screen and (max-width: 991px) {
  .fe-inpd__details-content {
    padding-top: 50px;
    padding-bottom: 0;
  }
}
.fe-inpd__details-disc {
  padding-bottom: 30px;
}
.fe-inpd__details-disc p {
  color: #ADB2C2;
}
.fe-inb__blog {
  /*
      CHEF TEMPLATE BLOG STYLES
  */
  padding-top: 240px;
}
@media only screen and (max-width: 1199px) {
  .fe-inb__blog {
    padding-top: 150px;
  }
}
@media only screen and (max-width: 991px) {
  .fe-inb__blog {
    padding-top: 150px;
  }
}
.fe-inbd__details {
  /*
      CHEF TEMPLATE BLOG DETAILS STYLES
  */
}
.fe-inbd__details .blog__details-wrap.fraisembal-box-wrap {
  background-color: var(--purple-4);
}
.light .fe-inbd__details .blog__details-wrap.fraisembal-box-wrap {
  background-color: var(--white-19);
}
.fe-contact__area {
  /*
      CHEF TEMPLATE CONTACT STYLES
  */
}
.fe-contact__area .pdesigner-contact__type .icon {
  border: 1px solid #ADB2C2;
}
.fe-contact__area-form .input-item input,
.fe-contact__area-form .input-item textarea {
  background-color: rgba(37, 45, 68, 0.3764705882);
}
.fe-contact__area-form .input-item input::placeholder,
.fe-contact__area-form .input-item textarea::placeholder {
  color: #ADB2C2;
}
@media only screen and (max-width: 767px) {
  .fe-place__area .tg-sec-title-wrapper {
    padding-top: 40px;
  }
}
.fe-place__area-wrap {
  display: grid;
  grid-template-columns: 40% 100%;
}
@media only screen and (max-width: 991px) {
  .fe-place__area-wrap {
    grid-template-columns: 50% 100%;
    align-items: center;
  }
}
@media only screen and (max-width: 767px) {
  .fe-place__area-wrap {
    grid-template-columns: 100%;
    gap: 30px;
  }
}
.fe-place__area-disc {
  max-width: 350px;
}
.fe-place__area-short-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}
.fe-place__area-short-text img {
  margin-right: 5px;
}
.fe-place__area-btn-wrap .wc-btn-default {
  border: 1px solid #405F8A;
  padding: 22px 27px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.85;
  text-transform: uppercase;
  display: inline-block;
}
.fe-place__area-item {
  position: relative;
}
@media only screen and (max-width: 991px) {
  .fe-place__area-item {
    max-height: 400px;
  }
}
@media only screen and (max-width: 991px) {
  .fe-place__area-item.inner-item {
    max-height: unset;
  }
}
@media only screen and (max-width: 767px) {
  .fe-place__area-item.inner-item {
    margin: auto;
  }
}
.fe-place__area-item:hover img {
  transform: scale(1.1);
}
.fe-place__area-item:hover .wc-btn-default {
  background-color: var(--white);
  color: var(--blue-1) !important;
}
.fe-place__area-item:hover .tg-place__area-thumb::after {
  opacity: 1;
  visibility: visible;
}
.fe-place__area-thumb {
  overflow: hidden;
  position: relative;
}
.fe-place__area-thumb::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}
.fe-place__area-thumb img {
  transform: scale(1);
  transition: all 1.5s;
  object-fit: cover;
  transform-origin: left;
}
@media only screen and (max-width: 767px) {
  .fe-place__area-thumb img {
    width: 100%;
  }
}
.fe-place__area-content {
  position: absolute;
  bottom: 35px;
  left: 35px;
}
.fe-place__area-title {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 30px;
  transition: 4s;
  color: var(--white) !important;
}
@media only screen and (max-width: 1199px) {
  .fe-place__area-title {
    font-size: 22px;
  }
}
.fe-place__area-item-btn .wc-btn-default {
  padding: 15px;
  border: 1.5px solid var(--white);
  font-size: 14px;
  font-weight: 500;
  color: var(--white) !important;
}
.fe-place__area-item-btn .wc-btn-default i {
  display: inline-block;
  margin-left: 5px;
}

.fe-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 15px;
}
.fe-page-title__area {
  padding-top: 165px;
  padding-bottom: 165px;
  position: relative;
  background: var(--primary) !important;
}
@media screen and (min-width: 768px) {
  .fe-page-title__area:after {
    content: "";
    background-image: url(https://frais-embal.fr/img/bg/wave-gradient.png);
    background-repeat: no-repeat;
    background-position: top left;
    left: 0;
    top: 0;
    width: 60%;
    height: 300px;
    position: absolute;
    z-index: 0;
    background-size: cover;
  }
}
.fe-page-title__area .fe-page-title__left {
  position: relative;
  z-index: 9;
}
.fe-page-title__area h1 {
  color: #ffffff !important;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 42px;
  margin-bottom: 15px;
}
@media only screen and (max-width: 767px) {
  .fe-page-title__area h1 {
    font-size: 30px;
  }
}
@media only screen and (max-width: 1399px) {
  .fe-page-title__area {
    padding-top: 220px;
    padding-bottom: 150px;
  }
}
@media only screen and (max-width: 1199px) {
  .fe-page-title__area {
    padding-top: 180px;
    padding-bottom: 130px;
  }
}
@media only screen and (max-width: 767px) {
  .fe-page-title__area {
    padding-top: 70px;
    padding-bottom: 0;
  }
}
.fe-page-title__shape {
  position: absolute;
  bottom: 290px;
  left: 33%;
}
@media only screen and (max-width: 1919px) {
  .fe-page-title__shape {
    left: 28%;
  }
}
@media only screen and (max-width: 1399px) {
  .fe-page-title__shape {
    bottom: 260px;
  }
}
@media only screen and (max-width: 1199px) {
  .fe-page-title__shape {
    bottom: 240px;
  }
}
@media only screen and (max-width: 991px) {
  .fe-page-title__shape {
    bottom: 80px;
  }
}
.dir-rtl .fe-page-title__shape {
  left: 66%;
}
.fe-page-title__inner {
  display: grid;
  grid-gap: 60px;
  grid-template-columns: 1fr 1fr;
}
@media only screen and (max-width: 767px) {
  .fe-page-title__inner {
    grid-template-columns: 1fr;
  }
}
.fe-page-title__right {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  right: 0;
  object-fit: cover;
}
@media only screen and (max-width: 767px) {
  .fe-page-title__right {
    position: unset;
    width: 100%;
    height: auto;
  }
}
.dir-rtl .fe-page-title__right {
  right: unset;
  left: 0;
}
.fe-page-title__right img {
  width: 100%;
  border-top-left-radius: 5rem;
  height: 100%;
  object-fit: cover;
  margin-left: 60px;
}
@media only screen and (max-width: 767px) {
  .fe-page-title__right img {
    margin: 0 -15px;
    width: calc(100% + 30px);
    height: 240px;
    border-top-left-radius: 0;
    border-top-right-radius: 5rem;
  }
}
.fe-page-title__text p {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--white-15);
  max-width: 270px;
}
.fe-page-title__rating {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--white-15);
  padding-bottom: 10px;
}
.light .fe-page-title__rating {
  color: var(--white-15);
}
.fe-page-title__rating i {
  font-size: 14px;
  margin-left: 2px;
  margin-right: 10px;
  color: var(--yellow-4);
}
.dir-rtl .fe-page-title__rating i {
  margin-left: 10px;
  margin-right: 3px;
}
.fe-page-title__left h1, .fe-page-title__left p {
  color: #FFF !important;
}
@media screen and (max-width: 768px) {
  .fe-page-title__left p {
    font-size: 14px;
    line-height: 24px;
  }
}
.fe-page-title__left .creator-page-title__imgs .last,
.fe-page-title__left .creator-page-title__imgs img {
  width: 50px;
  height: 50px;
  background: var(--green-9);
  border-color: var(--green-2);
}
.dir-rtl .fe-page-title__left .creator-page-title__imgs .last,
.dir-rtl .fe-page-title__left .creator-page-title__imgs img {
  margin-right: unset;
  margin-left: -20px;
}
.fe-page-title__title {
  font-weight: 400;
  font-size: 130px;
  line-height: 0.85;
  color: var(--white-15);
}
@media only screen and (max-width: 1399px) {
  .fe-page-title__title {
    font-size: 100px;
  }
}
@media only screen and (max-width: 1199px) {
  .fe-page-title__title {
    font-size: 80px;
  }
}
@media only screen and (max-width: 991px) {
  .fe-page-title__title {
    font-size: 60px;
  }
}
.light .fe-page-title__title {
  color: var(--white-15);
}
.fe-page-title__title a {
  font-family: "Poppins";
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  color: var(--white-15);
  display: inline-block;
  border: 2px solid var(--white-15);
  padding: 10px 25px;
  border-radius: 50px;
  text-align: center;
  position: relative;
  top: -18px;
}
@media only screen and (max-width: 1199px) {
  .fe-page-title__title a {
    top: -8px;
    padding: 8px 24px;
  }
}
@media only screen and (max-width: 991px) {
  .fe-page-title__title a {
    top: 0;
    padding: 3px 20px;
  }
}
@media only screen and (max-width: 767px) {
  .fe-page-title__title a br {
    display: block;
  }
}
.fe-product__area {
  background-color: var(--green);
}
.fe-product__area .sec-title-wrap {
  text-align: center;
}
@media only screen and (max-width: 1399px) {
  .fe-product__list {
    grid-gap: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .fe-product__list {
    grid-gap: 20px;
  }
}
@media only screen and (max-width: 991px) {
  .fe-product__list {
    grid-gap: 40px;
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (max-width: 767px) {
  .fe-product__list {
    grid-template-columns: 1fr;
  }
}
.fe-product__list .fe-product__label {
  position: absolute;
  z-index: 9;
  background: #eff1ff;
  padding: 4px 10px 2px 30px;
  border-radius: 50px;
  font-size: 12px;
  top: 15px;
  left: 15px;
  color: #688baa;
}
.fe-product__list .fe-product__label span {
  border-radius: 50px;
  background: #3d4175;
  position: absolute;
  left: 10px;
  top: 8px;
  z-index: 9;
  width: 9px;
  height: 9px;
}
.fe-product__item {
  border-radius: 0.75rem;
  height: 100%;
  margin-bottom: 30px;
  background: #FFF;
  position: relative;
}
.fe-product__thumb {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
}
.fe-product__thumb img {
  padding: 45px;
}
@media screen and (max-width: 768px) {
  .fe-product__thumb img {
    max-height: 230px;
    padding: 30px 0;
  }
}
.fe-product__thumb:hover .buy-now {
  opacity: 1;
  visibility: visible;
}
.fe-product__thumb img {
  width: 100%;
}
.fe-product__thumb .buy-now {
  font-size: 14px;
  line-height: 1.3;
  display: block;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
  position: absolute;
  background: transparent;
  color: var(--primary);
  font-weight: bold;
  border-bottom: 3px solid;
  padding: 5px 0px;
  width: auto;
  border-radius: 0;
  margin: auto;
}
@media only screen and (max-width: 1199px) {
  .fe-product__thumb .buy-now {
    opacity: 1;
    visibility: visible;
    bottom: 0;
  }
}
.fe-product__title {
  line-height: 1;
  transition: all 0.3s;
  font-size: 20px;
  font-weight: bold;
  color: var(--primarydark) !important;
}
.light .fe-product__title {
  color: var(--green-6);
}
@media only screen and (max-width: 1199px) {
  .fe-product__title {
    font-size: 22px;
  }
}
@media only screen and (max-width: 767px) {
  .fe-product__title {
    font-size: 18px;
  }
}
.fe-product__title:hover {
  color: var(--primary);
}
.fe-product__content {
  text-align: center;
  padding: 0 15px;
}
.fe-product__content p {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  padding-top: 10px;
  color: #222;
}
.fe-product__btn {
  text-align: center;
}
.fe-product__btn a {
  font-size: 18px;
  color: var(--green-6);
  background-color: var(--white-15);
}
.fe-inab {
  /*
      TRAVEL ABOUT PAGE
  */
}
.fe-inab__area {
  position: relative;
  height: 120vh;
  background: linear-gradient(180deg, #E2EEFE 0%, #E0EDFF 0.01%, rgba(226, 238, 254, 0) 100%);
  background-color: var(--white);
  padding-top: 200px;
}
@media only screen and (max-width: 1919px) {
  .fe-inab__area {
    padding-top: 150px;
    height: 80vh;
  }
}
.fe-inab__area-title-wrap {
  position: relative;
}
.fe-inab__area-title {
  color: var(--blue-1);
  text-align: center;
  font-size: 11.667vw;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}
.fe-inab__area-highlight-text {
  max-width: 260px;
  margin-left: auto;
  padding-top: 20px;
}
@media only screen and (max-width: 767px) {
  .fe-inab__area-highlight-text {
    margin-left: unset;
    text-align: center;
    max-width: 100%;
    padding-top: 10px;
  }
}
.fe-inab__area-highlight-text .text {
  color: var(--blue-1);
  font-size: 3.125vw;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
@media only screen and (max-width: 991px) {
  .fe-inab__area-highlight-text .text {
    font-size: 22px;
  }
}
.fe-inab__area-thumb {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
@media only screen and (max-width: 1919px) {
  .fe-inab__area-thumb {
    max-width: 400px;
  }
}
.fe-inab__area-shape-1 {
  position: absolute;
  top: 27.22vh;
  left: 8.33vw;
}
@media only screen and (max-width: 991px) {
  .fe-inab__area-shape-1 {
    top: 12.22vh;
  }
}
@media only screen and (max-width: 767px) {
  .fe-inab__area-shape-1 {
    display: none;
  }
}
.fe-inab__area-shape-2 {
  position: absolute;
  bottom: 340px;
  left: 48px;
}
@media only screen and (max-width: 767px) {
  .fe-inab__area-shape-2 {
    bottom: 390px;
  }
}
.fe-inab__area-shape-3 {
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: 466px;
}
.fe-inab__area-shape-4 {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 400px;
}
.fe-inab__area-shape-5 {
  position: absolute;
  bottom: 200px;
  right: 195px;
  max-width: 65px;
}
@media only screen and (max-width: 1919px) {
  .fe-inab__area-shape-5 {
    bottom: 66px;
    right: 30px;
  }
}
.fe-inab__area-shape-6 {
  position: absolute;
  bottom: 32.77vh;
  left: 21.87vw;
  max-width: 65px;
}
@media only screen and (max-width: 767px) {
  .fe-inab__area-shape-6 {
    display: none;
  }
}
.fe-inab__about {
  position: relative;
  padding: 80px 0;
  position: relative;
  background-image: url(https://frais-embal.fr/img/bg/wave-gradient_blue.png);
  background-size: auto 280px;
  background-repeat: no-repeat;
  background-position: top left;
  z-index: 999;
  margin-top: -50px;
  border-bottom: 1px solid #EEE;
}
@media screen and (max-width: 768px) {
  .fe-inab__about {
    margin-top: 0px;
    background: none;
    border-bottom: 1px solid #EEE;
    padding-bottom: 50px;
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 1199px) {
  .fe-inab__about {
    padding-top: 100px;
  }
}
.fe-inab__about .shape-2 {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  margin-top: -190px;
  z-index: 9;
}
@media only screen and (max-width: 767px) {
  .fe-inab__about .shape-2 {
    max-width: 100px;
  }
}
.dir-rtl .fe-inab__about .shape-2 img {
  transform: rotateY(180deg);
}
.fe-inab__about-sec-title {
  line-height: 1.2;
  margin-bottom: 30px;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 42px;
}
@media only screen and (max-width: 1199px) {
  .fe-inab__about-sec-title {
    font-size: 50px;
  }
}
@media only screen and (max-width: 991px) {
  .fe-inab__about-sec-title {
    font-size: 40px;
  }
}
.fe-inab__about-wrap {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 125px;
  position: relative;
  margin-top: 90px;
}
@media only screen and (max-width: 1919px) {
  .fe-inab__about-wrap {
    padding-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .fe-inab__about-wrap {
    margin-top: 35px;
  }
}
.fe-inab__about-wrap .tg-intro__area-social {
  inset-inline-start: -350px;
  top: 50%;
  transform: translateY(-50%);
  bottom: unset;
  transform: rotate(-90deg);
  transform-origin: center center;
}
@media only screen and (max-width: 1919px) {
  .fe-inab__about-wrap .tg-intro__area-social {
    inset-inline-start: 0;
    top: unset;
    bottom: 0;
    transform: rotate(0);
  }
}
@media only screen and (max-width: 991px) {
  .fe-inab__about-wrap .tg-intro__area-social {
    inset-inline-start: unset;
    inset-inline-end: 0;
  }
}
@media only screen and (max-width: 767px) {
  .fe-inab__about-wrap .tg-intro__area-social {
    inset-inline-start: 0;
  }
}
.fe-inab__about-wrap .tg-intro__area-social li::after {
  background-color: var(--white);
}
.light .fe-inab__about-wrap .tg-intro__area-social li::after {
  background-color: var(--blue-1);
}
.fe-inab__about-wrap .tg-intro__area-social li a {
  color: var(--white);
}
.light .fe-inab__about-wrap .tg-intro__area-social li a {
  color: var(--blue-1);
}
@media only screen and (max-width: 1199px) {
  .fe-inab__about-wrap {
    gap: 50px;
  }
}
@media only screen and (max-width: 991px) {
  .fe-inab__about-wrap {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
.fe-inab__about-content {
  padding-top: 40px;
}
@media only screen and (max-width: 991px) {
  .fe-inab__about-content {
    padding-top: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .fe-inab__about-content {
    padding-top: 0;
  }
}
.fe-inab__about-content img {
  margin-bottom: 30px;
  width: 80px;
}
.fe-inab__about-content p {
  color: #132c5b !important;
  font-size: 16px;
  margin-bottom: 1rem;
  line-height: 30px;
  font-weight: 400;
}
.fe-inab__about-thumb {
  max-width: 480px;
}
.fe-inab__about-thumb-2 {
  max-width: 320px;
  margin-inline-start: auto;
}
@media only screen and (max-width: 991px) {
  .fe-inab__about-thumb-2 {
    margin-inline-start: unset;
    padding-top: 20px;
  }
}
.fe-inab__counter {
  padding-top: 220px;
}
@media only screen and (max-width: 1199px) {
  .fe-inab__counter {
    padding-top: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .fe-inab__counter {
    padding-top: 0;
  }
}
.fe-intro__area {
  /*
      CHEF TEMPLATE INTRO STYLE
  */
  padding-top: 160px;
  padding-bottom: 160px;
  background-color: var(--primary);
  position: relative;
}
.light .fe-intro__area {
  background-color: #F5EEE8;
}
@media only screen and (max-width: 991px) {
  .fe-intro__area {
    padding-bottom: 10px;
    padding-top: 110px;
  }
}
.fe-intro__area-main-thumb {
  position: absolute;
  left: 32vw;
  bottom: 0;
  z-index: 2;
}
@media (min-width: 1919px) {
  .fe-intro__area-main-thumb {
    left: 50%;
    transform: translateX(-50%);
  }
}
@media only screen and (max-width: 991px) {
  .fe-intro__area-main-thumb {
    left: 0;
  }
}
@media only screen and (max-width: 767px) {
  .fe-intro__area-main-thumb {
    display: none;
  }
}
.fe-intro__area-main-thumb img {
  width: 33vw;
}
@media (min-width: 1919px) {
  .fe-intro__area-main-thumb img {
    width: 100%;
  }
}
.fe-intro__area-content-wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  .fe-intro__area-content-wrap {
    flex-wrap: wrap;
    gap: 70px;
  }
}
.fe-intro__area-sub-title {
  font-size: 3.646vw;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 30px;
}
@media (min-width: 1919px) {
  .fe-intro__area-sub-title {
    font-size: 70px;
  }
}
@media only screen and (max-width: 991px) {
  .fe-intro__area-sub-title {
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .fe-intro__area-sub-title {
    font-size: 30px;
  }
}
.fe-intro__area {
  /* Styling for the title element using background clip */
}
.fe-intro__area-title {
  font-family: var(--font_outfit) !important;
  font-size: 195px;
  text-transform: uppercase;
  background: url("https://frais-embal.fr/img/home/video.mp4");
  background-position: bottom left;
  background-repeat: repeat;
  background-size: 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1.5vw;
  font-weight: 900;
  position: relative;
  animation: slide 30s linear infinite;
  text-align: center;
  line-height: 1;
}
.dir-rtl .fe-intro__area-title {
  letter-spacing: 60px;
}
@media (min-width: 1800px) {
  .fe-intro__area-title {
    font-size: 400px;
    letter-spacing: 105px;
  }
}
@media only screen and (max-width: 767px) {
  .fe-intro__area-title {
    text-align: start;
  }
}
.fe-intro__area-btn {
  background-color: var(--primary);
  padding: 22px 50px;
  color: #FFF;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  border-radius: 4px;
}
.light .fe-intro__area-btn {
  background-color: var(--purple-4);
  color: var(--white-19);
}
@media only screen and (max-width: 767px) {
  .fe-intro__area-btn {
    padding: 12px 20px;
    font-size: 16px;
  }
}
.fe-intro__area-item-right {
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
}
@media only screen and (max-width: 1919px) {
  .fe-intro__area-item-right {
    padding-bottom: 30px;
  }
}
.fe-intro__area-subscribe-text {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 275px;
}
.fe-intro__area-subscribe-text .title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.fe-intro__area-disc {
  max-width: 270px;
}
.fe-intro__area-disc p {
  font-size: 18px;
  font-weight: 300;
}
.fe-intro__area-disc p span {
  font-weight: 500;
}
.fe-intro__area-thumb {
  position: absolute;
  top: 100%;
  outline: 1px solid var(--white-19);
  outline-offset: 10px;
}
.light .fe-intro__area-thumb {
  outline: 1px solid var(--purple-4);
}
@media only screen and (max-width: 991px) {
  .fe-intro__area-thumb {
    position: unset;
  }
}
@media only screen and (max-width: 767px) {
  .fe-intro__area-thumb {
    margin-left: 15px;
  }
}
.fe-products__area-slide {
  padding-right: 5rem;
}
.fe-products__area-slide img {
  width: 100%;
}
.fe-products__area-slide::after {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  background: #224381;
  width: 30%;
  height: 400px;
}
.fe-products__area .fe-products__width {
  margin-inline-start: auto;
  max-width: 50%;
}
.fe-products__area .sec-title-wrap {
  max-width: 50%;
  margin-inline-start: auto;
}
@media only screen and (max-width: 991px) {
  .fe-products__area .sec-title-wrap {
    max-width: 100%;
  }
}
.light .fe-products__area .sec-title-wrap .sec-title-9 {
  color: var(--white);
}
.fe-faq__list {
  max-width: 1070px;
  position: relative;
  z-index: 1;
}
.fe-faq__list .accordion-button {
  gap: 75px;
  font-size: 14px;
  border: 0;
  color: var(--white);
  padding: 20px;
  background-color: transparent;
  text-align: start;
  font-weight: bold;
}
.light .fe-faq__list .accordion-button {
  color: var(--black-2);
}
.fe-faq__list .accordion-button:last-of-type {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.fe-faq__list .accordion-button:focus {
  outline: 0;
  box-shadow: none;
}
@media only screen and (max-width: 767px) {
  .fe-faq__list .accordion-button {
    gap: 30px;
  }
}
.fe-faq__list .accordion-button::after {
  background-image: none;
  position: absolute;
  content: "\f107";
  font-family: "Font Awesome 6 Free";
  font-weight: 700;
  inset-inline-end: 0;
  transform: unset;
  transition: all 0.5s;
  font-size: 18px;
  right: 15px;
}
.light .fe-faq__list .accordion-button::after {
  color: var(--green-6);
}
.dir-rtl .fe-faq__list .accordion-button::after {
  margin-left: unset;
  margin-inline-end: auto;
}
.fe-faq__list .accordion-button:not(.collapsed) {
  border-color: transparent !important;
  box-shadow: none;
}
.fe-faq__list .accordion-button:not(.collapsed)::after {
  content: "\f077";
}
.fe-faq__list .accordion-button span {
  opacity: 0.5;
  margin-left: 5px;
  font-weight: 400;
}
.fe-faq__list .accordion-item {
  border: 0;
  border-radius: 0;
  background-color: #f2f6fc;
  border: none !important;
  margin-bottom: 15px;
  border-radius: 8px;
}
.light .fe-faq__list .accordion-item {
  border-color: var(--pink-7);
}
.fe-faq__list .accordion-item p {
  font-size: 18px;
  color: var(--white-15);
}
.light .fe-faq__list .accordion-item p {
  color: var(--green-6);
}
@media only screen and (max-width: 767px) {
  .fe-faq__list .accordion-item p {
    padding-inline-end: 0;
  }
}
.fe-faq__list .accordion-body {
  gap: 60px;
  display: flex;
  padding: 0 20px 20px;
}
@media only screen and (max-width: 767px) {
  .fe-faq__list .accordion-body {
    gap: 18px;
  }
}
.fe-faq__list .accordion-body span {
  font-size: 45px;
  display: inline-block;
  color: var(--white-15);
  text-transform: uppercase;
  font-family: "newYork";
  max-width: 105px;
}
.light .fe-faq__list .accordion-body span {
  color: var(--green-6);
}
.fe-faq__area {
  background-color: var(--green);
  position: relative;
}
.fe-faq__area .sec-title-wrap {
  text-align: center;
}
.fe-faq__leaf {
  position: absolute;
  left: 20px;
  top: 170px;
  z-index: 0;
  max-width: 280px;
}
@media only screen and (max-width: 1919px) {
  .fe-faq__leaf {
    top: 15px;
    left: 15px;
  }
}
@media only screen and (max-width: 1399px) {
  .fe-faq__leaf {
    max-width: 230px;
  }
}
@media only screen and (max-width: 1199px) {
  .fe-faq__leaf {
    max-width: 190px;
  }
}
@media only screen and (max-width: 991px) {
  .fe-faq__leaf {
    max-width: 160px;
  }
}
@media only screen and (max-width: 767px) {
  .fe-faq__leaf {
    max-width: 100px;
  }
}
.fe-faq__leaf-2 {
  position: absolute;
  bottom: 0;
  inset-inline-end: 0;
  max-width: 180px;
  z-index: 0;
}
@media only screen and (max-width: 1199px) {
  .fe-faq__leaf-2 {
    max-width: 150px;
  }
}
.fe-faq__btm {
  text-align: center;
}
.fe-faq__btm p {
  font-size: 18px;
  padding: 7px 24px;
  border-radius: 30px;
  color: var(--white-15);
  display: inline-block;
  background-color: var(--green-8);
}
.fe-faq__btm p a {
  line-height: 1;
  display: inline-block;
  color: var(--white-15);
  border-bottom: 1px solid currentColor;
}
.fe-faq__btm p a:hover {
  color: var(--primary);
}

.main-blog__grid {
  display: grid;
  grid-gap: 70px;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 1399px) {
  .main-blog__grid {
    grid-gap: 50px 40px;
  }
}
@media only screen and (max-width: 991px) {
  .main-blog__grid {
    grid-gap: 20px 30px;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (max-width: 767px) {
  .main-blog__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .main-blog__grid {
    grid-template-columns: 1fr;
  }
}
.main-blog__grid .freelancer-blog__meta li a,
.main-blog__grid .freelancer-blog__meta li span {
  font-size: 16px;
}

.blog__details {
  padding-bottom: 35px;
}
@media only screen and (max-width: 767px) {
  .blog__details {
    padding-bottom: 15px;
  }
}
.blog__details-top img {
  max-width: 100%;
}
.blog__details-info ul {
  gap: 80px;
  display: flex;
  align-items: center;
  padding-bottom: 70px;
}
@media only screen and (max-width: 991px) {
  .blog__details-info ul {
    padding-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .blog__details-info ul {
    flex-wrap: wrap;
    gap: 30px 50px;
  }
}
.blog__details-info ul li {
  position: relative;
}
.blog__details-info ul li::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  top: 0;
  inset-inline-end: -40px;
  background-color: var(--black-6);
}
.light .blog__details-info ul li::after {
  background-color: var(--white-4);
}
@media only screen and (max-width: 767px) {
  .blog__details-info ul li::after {
    inset-inline-end: -26px;
  }
}
.blog__details-info ul li:last-child::after {
  display: none;
}
.blog__details-info ul li:last-child a {
  cursor: inherit;
}
.blog__details-info ul span {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--black-9);
}
.blog__details-info a {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--white);
  display: block;
  transition: all 0.3s;
}
.light .blog__details-info a {
  color: var(--black-2);
}
.blog__details-info a:hover {
  color: var(--primary);
}
.blog__details-info .author {
  gap: 15px;
  display: flex;
  align-items: center;
}
.blog__details-info .author img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}
.blog__details-wrap {
  max-width: 1070px;
  margin: 0 auto;
  margin-top: -110px;
  z-index: 1;
  position: relative;
  padding: 60px 110px;
  background: var(--black-2);
}
.light .blog__details-wrap {
  background-color: var(--white);
}
@media only screen and (max-width: 1399px) {
  .blog__details-wrap {
    max-width: 1000px;
    padding: 60px 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .blog__details-wrap {
    max-width: 840px;
    padding: 50px 50px;
  }
}
@media only screen and (max-width: 991px) {
  .blog__details-wrap {
    max-width: 640px;
    padding: 40px 30px;
    margin-top: -70px;
  }
}
@media only screen and (max-width: 767px) {
  .blog__details-wrap {
    max-width: 100%;
    padding: 40px 0px;
    margin-top: 0;
  }
}
.blog__details_title {
  font-weight: 600;
  font-size: 60px;
  line-height: 1.1;
  color: var(--white);
  font-family: "Estedad";
  padding-bottom: 35px;
}
@media only screen and (max-width: 1399px) {
  .blog__details_title {
    font-size: 52px;
  }
}
@media only screen and (max-width: 1199px) {
  .blog__details_title {
    font-size: 48px;
  }
}
@media only screen and (max-width: 991px) {
  .blog__details_title {
    font-size: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .blog__details_title {
    font-size: 32px;
  }
}
.blog__details h1,
.blog__details h2,
.blog__details h3,
.blog__details h4,
.blog__details h5,
.blog__details h6 {
  font-weight: 600;
  line-height: 1.2;
  color: var(--white);
  padding-top: 30px;
  padding-bottom: 20px;
  font-family: "Estedad";
}
.light .blog__details h1,
.light .blog__details h2,
.light .blog__details h3,
.light .blog__details h4,
.light .blog__details h5,
.light .blog__details h6 {
  color: var(--black-2);
}
@media only screen and (max-width: 991px) {
  .blog__details h1,
  .blog__details h2,
  .blog__details h3,
  .blog__details h4,
  .blog__details h5,
  .blog__details h6 {
    padding-top: 20px;
  }
}
.blog__details h1 {
  font-size: 48px;
}
.blog__details h2 {
  font-size: 36px;
}
@media only screen and (max-width: 767px) {
  .blog__details h2 {
    font-size: 26px;
  }
}
.blog__details h3 {
  font-size: 32px;
}
.blog__details h4 {
  font-size: 24px;
}
.blog__details h5 {
  font-size: 20px;
}
.blog__details h6 {
  font-size: 18px;
}
.blog__details p {
  line-height: 1.6;
  padding-bottom: 30px;
}
.blog__details img {
  max-width: 100%;
  margin-bottom: 40px;
}
@media only screen and (max-width: 991px) {
  .blog__details img {
    margin-bottom: 30px;
  }
}
.blog__details ul {
  padding-bottom: 38px;
}
.blog__details ul li {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--white);
  position: relative;
  padding-bottom: 3px;
}
.light .blog__details ul li {
  color: var(--black-2);
}
.blog__tag {
  gap: 5px;
  display: flex;
  align-items: center;
}
.blog__tag-title {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--black-9);
  font-family: "Estedad";
}
.blog__tag ul {
  gap: 3px;
  display: flex;
}
.blog__tag ul li a {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--white);
  font-family: "Estedad";
}
.light .blog__tag ul li a {
  color: var(--black-2);
}
.blog__pagination.pt-120 {
  padding-top: 60px;
}
.blog__pagination ul {
  gap: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog__pagination li a {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--white);
  text-transform: capitalize;
}
.light .blog__pagination li a {
  color: var(--black-2);
}
.blog__pagination li a:hover {
  color: var(--primary);
}
.blog__pagination .prev {
  padding-inline-end: 15px;
}
.blog__pagination .prev i {
  padding-inline-end: 7px;
}
.dir-rtl .blog__pagination .prev i {
  transform: rotateY(180deg);
}
.blog__pagination .next {
  padding-inline-start: 15px;
}
.blog__pagination .next i {
  padding-inline-start: 7px;
}
.dir-rtl .blog__pagination .next i {
  transform: rotateY(180deg);
}
.blog__pagination .active a {
  color: var(--black-9);
}
.light .blog__pagination .active a {
  color: var(--black-9);
}
.blog__related .sec-title-wrapper {
  text-align: center;
  padding-bottom: 60px;
  border-top: 1px solid var(--black-6);
}
.light .blog__related .sec-title-wrapper {
  border-color: var(--white-4);
}
@media only screen and (max-width: 991px) {
  .blog__related .sec-title-wrapper {
    padding-bottom: 40px;
  }
}
.blog__related .sec-title-2 {
  font-size: 40px;
  text-align: center;
}
.blog__related-grid {
  display: grid;
  grid-gap: 70px;
  grid-template-columns: repeat(4, 1fr);
}
@media only screen and (max-width: 1399px) {
  .blog__related-grid {
    grid-gap: 60px 40px;
  }
}
@media only screen and (max-width: 991px) {
  .blog__related-grid {
    grid-gap: 20px 30px;
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (max-width: 767px) {
  .blog__related-grid {
    grid-template-columns: 1fr;
  }
}
.blog__related-grid .freelancer-blog__meta li a,
.blog__related-grid .freelancer-blog__meta li span {
  font-size: 16px;
}

.cf_details__quote {
  display: grid;
  grid-template-columns: 70px auto;
  gap: 30px 70px;
}
@media (max-width: 575px) {
  .cf_details__quote {
    grid-template-columns: auto;
  }
}

.list-tags {
  display: flex;
  gap: 8px;
}

.list-social-media {
  display: flex;
  gap: 10px;
}

.cf-details-comment__title {
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .cf-details-comment__title {
    font-size: 25px;
  }
}
.cf-details-comment__field label {
  display: block;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-transform: capitalize;
}
.light .cf-details-comment__field label {
  color: #555555;
}
.cf-details-comment__field input, .cf-details-comment__field textarea {
  width: 100%;
  height: 60px;
  padding: 20px;
  background-color: #212125;
  border: 0;
  color: var(--white);
}
.light .cf-details-comment__field input, .light .cf-details-comment__field textarea {
  background-color: #F5F5F5;
  color: var(--black-2);
}
.cf-details-comment__field input::placeholder, .cf-details-comment__field textarea::placeholder {
  color: #BEBEBE;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}
.light .cf-details-comment__field input::placeholder, .light .cf-details-comment__field textarea::placeholder {
  color: #999999;
}
.cf-details-comment__field input:focus, .cf-details-comment__field textarea:focus {
  outline: 0;
}
.cf-details-comment__field textarea {
  height: 120px;
  resize: none;
}
.cf-details-comment__btn-wrapper .wc-btn-default {
  background-color: #FFA38E;
  border-color: #FFA38E;
  color: var(--black-2);
  font-size: 16px;
  padding: 16px 35px;
}
.cf-details-comment__btn-wrapper .wc-btn-default:hover {
  border-color: var(--white);
  background-color: transparent;
  color: var(--white);
}
.light .cf-details-comment__btn-wrapper .wc-btn-default:hover {
  border-color: var(--black-2);
  color: var(--black-2);
}

.cf-sidebar__widget {
  background-color: var(--black-3);
  padding: 19px;
}
.light .cf-sidebar__widget {
  background-color: #F9F9F9;
}
.cf-sidebar__contact {
  text-align: center;
  padding: 25px 0;
}
.cf-sidebar__contact-subtitle {
  color: var(--primary);
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
}
.cf-sidebar__contact-title {
  font-size: 28px;
  margin-bottom: 32px;
}
@media only screen and (max-width: 1399px) {
  .cf-sidebar__contact-title {
    font-size: 24px;
  }
}
.cf-sidebar__contact .wc-btn-primary {
  padding: 17px 46px;
}
.cf-sidebar__w-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--white);
  display: inline-block;
  padding: 8px 15px;
  background-color: var(--black-4);
}
.light .cf-sidebar__w-title {
  color: var(--black-2);
  text-decoration-color: var(--black-2);
}
.cf-sidebar__recent-item {
  border-bottom: 1px dashed var(--black-9);
  padding-bottom: 30px;
  margin-bottom: 30px;
}
.cf-sidebar__recent-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border: 0;
}
.cf-sidebar__recent-item-date {
  display: inline-block;
  margin-bottom: 10px;
}
.cf-sidebar__recent-item-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
}
.light .cf-sidebar__recent-item-title {
  color: var(--black-2);
}
@media only screen and (max-width: 1399px) {
  .cf-sidebar__recent-item-title {
    font-size: 16px;
  }
}
.cf-sidebar__recent-item-title:hover {
  color: var(--primary);
}

/*
    Default Breadcrumb
*/
.header__area-8.default-blog-header .lawyer-header__inner {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2509803922);
}
.header__area-8.default-blog-header .lawyer-header__inner::before {
  background: rgba(255, 255, 255, 0.2509803922);
}
.header__area-8.default-blog-header .default-blog-menu li a {
  color: var(--white);
}
.header__area-8.default-blog-header .phone {
  color: var(--white);
}
.header__area-8.default-blog-header .menu-icon-8 img {
  filter: brightness(100);
}

.int-inab-sub-title {
  font-size: 24px;
  color: var(--white);
  text-transform: uppercase;
}

.default-blog__grid.no-sidebar {
  grid-template-columns: 1fr;
  max-width: 860px;
  margin: auto;
}
.default-blog__grid.right-sidebar {
  grid-template-columns: 1fr 300px;
}
.default-blog__grid.right-sidebar .default-blog__item {
  order: 2;
}
.default-blog__grid.right-sidebar .default-blog__item-content {
  order: 1;
}

.default-breadcrumb__area {
  background-image: url("../imgs/default-blog/breadcrumb-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}
@media only screen and (max-width: 767px) {
  .default-breadcrumb__area {
    padding-top: 130px;
  }
}
.default-breadcrumb__area::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(33, 33, 37, 0.7490196078);
  opacity: 0.75;
  z-index: -2;
}
.default-breadcrumb__title {
  font-size: 80px;
  font-weight: 400;
  margin-bottom: 15px;
}
.light .default-breadcrumb__title {
  color: var(--white);
}
@media only screen and (max-width: 991px) {
  .default-breadcrumb__title {
    font-size: 50px;
  }
}
.default-breadcrumb__list {
  display: flex;
  gap: 14px;
}
.default-breadcrumb__list li.active {
  color: var(--white);
}
.default-breadcrumb__list li {
  color: var(--black-9);
  text-transform: capitalize;
}
.default-breadcrumb__list li i {
  padding-inline-start: 5px;
  font-size: 12px;
}

/*
    Default Main Blog
*/
.default-blog__grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 90px;
}
@media only screen and (max-width: 1199px) {
  .default-blog__grid {
    gap: 30px;
  }
}
@media only screen and (max-width: 991px) {
  .default-blog__grid {
    grid-template-columns: 260px 1fr;
    gap: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .default-blog__grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .default-blog__grid .default-blog__details-content {
    order: 1;
  }
  .default-blog__grid .default-blog__item {
    order: 2;
  }
}
.default-blog__item-content h2 {
  font-size: 40px;
  margin-bottom: 40px;
  transition: 0.3s;
}
@media only screen and (max-width: 1199px) {
  .default-blog__item-content h2 {
    font-size: 35px;
  }
}
@media only screen and (max-width: 991px) {
  .default-blog__item-content h2 {
    font-size: 28px;
    margin-bottom: 20px;
  }
}
.default-blog__item-content h2:hover {
  color: var(--primary);
}
.default-blog__item-content p {
  margin-bottom: 60px;
}
@media only screen and (max-width: 991px) {
  .default-blog__item-content p {
    margin-bottom: 30px;
  }
}
.default-blog__item-content .wc-btn-underline {
  color: var(--black-9);
}
.default-blog__item-content .wc-btn-underline img {
  width: unset;
}
.default-blog__item-content .wc-btn-underline:hover {
  color: var(--primary);
}
.default-blog__item-content .wc-btn-underline i {
  color: var(--black-9);
}
.default-blog__item-single img {
  width: 100%;
}
.default-blog__meta {
  margin-bottom: 24px;
}
.default-blog__item-title {
  font-size: 40px;
}
@media only screen and (max-width: 1199px) {
  .default-blog__item-title {
    font-size: 30px;
  }
}
@media only screen and (max-width: 991px) {
  .default-blog__item-title {
    font-size: 22px;
  }
}
.default-blog__content {
  border: 1px solid var(--black-6);
  border-top: 0;
  padding: 40px;
}
.light .default-blog__content {
  border: 1px solid #F1F1F1;
}
@media only screen and (max-width: 991px) {
  .default-blog__content {
    padding: 22px;
  }
}
@media only screen and (max-width: 767px) {
  .default-blog__content {
    padding: 0;
    border: 0 !important;
    padding-top: 10px;
  }
}
.default-blog__details-content > img {
  margin-bottom: 45px;
  width: unset;
}
.default-blog__details-content p {
  margin-bottom: 25px;
}
.default-sidebar__widget {
  background-color: var(--black-3);
}
.light .default-sidebar__widget {
  background-color: #F9F9F9;
}
.default-sidebar__widget.baner {
  text-align: center;
  padding: 30px 0;
}
.light .default-sidebar__widget.baner .title {
  color: var(--white);
}
.light .default-sidebar__widget.baner {
  background-color: var(--black-2);
}
.default-sidebar__widget.baner .wc-btn-primary {
  padding: 17px 46px;
}
.default-sidebar__content {
  padding: 19px;
}
.default-sidebar__content form {
  position: relative;
}
.default-sidebar__content form input, .default-sidebar__content form .cf-details-comment__field textarea, .cf-details-comment__field .default-sidebar__content form textarea {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--white);
  padding-right: 30px;
}
.light .default-sidebar__content form input, .light .default-sidebar__content form .cf-details-comment__field textarea, .cf-details-comment__field .light .default-sidebar__content form textarea {
  color: var(--black-2);
}
.default-sidebar__content form input::placeholder, .default-sidebar__content form .cf-details-comment__field textarea::placeholder, .cf-details-comment__field .default-sidebar__content form textarea::placeholder {
  font-size: 14px;
  color: var(--black-9);
}
.default-sidebar__content form input:focus, .default-sidebar__content form .cf-details-comment__field textarea:focus, .cf-details-comment__field .default-sidebar__content form textarea:focus {
  outline: 0;
}
.default-sidebar__content form button {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--white);
}
.light .default-sidebar__content form button {
  color: var(--black-2);
}
.default-sidebar__content .subtitle {
  color: var(--primary);
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 500;
}
.default-sidebar__content .title {
  font-size: 28px;
  color: var(--white);
  margin-bottom: 32px;
}
.light .default-sidebar__content .title {
  color: var(--black-2);
}
.default-sidebar__w-title {
  font-size: 20px;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 10px;
  text-decoration-color: var(--white);
  text-decoration-thickness: 1px;
  text-transform: capitalize;
}
.light .default-sidebar__w-title {
  color: var(--black-2);
  text-decoration-color: var(--black-2);
}
.default-sidebar__catlinks li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  color: var(--white);
}
.light .default-sidebar__catlinks li {
  color: var(--black-2);
}
.default-sidebar__catlinks li a {
  padding: 5px 0;
}
.default-sidebar__catlinks li a:hover {
  color: var(--primary);
}
.default-sidebar__recent-item {
  border-bottom: 1px dashed var(--black-9);
  padding-bottom: 30px;
  margin-bottom: 30px;
}
.default-sidebar__recent-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border: 0;
}
.default-sidebar__recent-item i {
  color: var(--black-9);
}
.default-sidebar__recent-item p {
  color: var(--white);
  display: block;
  margin-top: 5px;
  font-weight: 500;
  transition: 0.3s;
}
.default-sidebar__recent-item p:hover {
  color: var(--primary);
}
.light .default-sidebar__recent-item p {
  color: var(--black-2);
}
.default-sidebar__gallary {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.default-sidebar__tagslink {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.default-sidebar__tagslink li {
  background-color: var(--black-5);
  padding: 10px;
  font-size: 12px;
  color: var(--white);
  font-weight: 500;
  transition: 0.5s;
}
.default-sidebar__tagslink li:hover {
  color: var(--white);
  background-color: var(--primary);
}
.light .default-sidebar__tagslink li {
  background-color: #EFEFEF;
  color: var(--black-2);
}
.default-details__content h2 {
  font-size: 60px;
  margin-bottom: 25px;
}
@media only screen and (max-width: 991px) {
  .default-details__content h2 {
    font-size: 35px;
  }
}
.default-details__content h3 {
  font-size: 30px;
  text-transform: capitalize;
  margin-bottom: 25px;
}
.default-details__content ul {
  margin-bottom: 15px;
}
.default-details__content ul li {
  position: relative;
  -webkit-padding-start: 30px;
  padding-inline-start: 30px;
  color: var(--gray-4);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 10px;
}
.light .default-details__content ul li {
  color: var(--gray-10);
}
.default-details__content ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  background-image: url(../imgs/electrician/check-mark.png);
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.default-details__content blockquote {
  font-size: 28px;
  color: var(--white);
}
@media only screen and (max-width: 991px) {
  .default-details__content blockquote {
    font-size: 18px;
  }
}
.default-details-tags {
  display: flex;
  gap: 8px;
}
.default-details-tags li {
  padding: 10px;
  background-color: var(--black-3);
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
}
.light .default-details-tags li {
  background-color: #F9F9F9;
  color: var(--black-2);
}
.default-details-share__wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}
@media only screen and (max-width: 991px) {
  .default-details-share__wrapper {
    gap: 15px;
    justify-content: flex-start;
    padding-top: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .default-details-share__wrapper {
    justify-content: flex-start;
    margin-top: 15px;
  }
}
.default-details-share__wrapper p {
  color: var(--white);
  margin-bottom: 0;
}
.light .default-details-share__wrapper p {
  color: var(--black-2);
}
.default-details-share__wrapper p {
  font-size: 12px;
}
.default-details-share__wrapper p i {
  padding-right: 5px;
}
.default-details-social-media li {
  display: inline-block;
}
.default-details-social-media li a {
  display: inline-block;
  padding-right: 20px;
  color: var(--white);
  font-size: 13px;
}
.light .default-details-social-media li a {
  color: var(--black-2);
}
.default-details-comment-title {
  font-size: 36px;
}
@media only screen and (max-width: 991px) {
  .default-details-comment-title {
    font-size: 22px;
  }
}
.default-details-comment-wrapper {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  position: relative;
}
.default-details-comment-wrapper.has-reply::before {
  position: absolute;
  content: "";
  inset-inline-start: 30px;
  top: 80px;
  width: 35px;
  height: 100%;
  background-color: transparent;
  border-left: 1px solid var(--black-6);
  border-bottom: 1px solid var(--black-6);
  border-bottom-left-radius: 10px;
}
.light .default-details-comment-wrapper.has-reply::before {
  border-left: 1px solid #F1F1F1;
  border-bottom: 1px solid #F1F1F1;
}
.dir-rtl .default-details-comment-wrapper.has-reply::before {
  border-right: 1px solid var(--black-6);
  border-left: 0;
}
.default-details-comment-wrapper.reply-msg {
  margin-inline-start: 80px;
}
@media only screen and (max-width: 767px) {
  .default-details-comment-wrapper.reply-msg {
    margin-inline-start: 25px;
  }
}
.default-details-comment-thumb {
  max-width: 60px;
}
.default-details-comment-name {
  font-size: 18px;
  text-transform: capitalize;
  padding-bottom: 5px;
}
.default-details-comment-date {
  font-size: 12px;
  color: var(--black-9);
  margin-bottom: 30px;
}
.default-details-comment-date span {
  display: inline-block;
  width: 1px;
  height: 12px;
  background-color: var(--black-6);
  margin-left: 10px;
  margin-right: 10px;
}
.default-details-share-btn {
  color: var(--white);
}
.light .default-details-share-btn {
  color: var(--black-2);
}
.default-details-share-btn img {
  width: 17px;
  margin-right: 10px;
}
.default-error__content {
  text-align: center;
}
.default-error__title {
  font-size: 180px;
}
@media only screen and (max-width: 1199px) {
  .default-error__title {
    font-size: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .default-error__title {
    font-size: 60px;
  }
}
.default-error__sub-title {
  font-size: 60px;
}
@media only screen and (max-width: 1199px) {
  .default-error__sub-title {
    font-size: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .default-error__sub-title {
    font-size: 30px;
  }
}
.default-search__area .default-blog__content {
  border: 1px solid var(--black-6);
}
.light .default-search__area .default-blog__content {
  border: 1px solid #F1F1F1;
}
.default-search__again-form {
  max-width: 600px;
  margin: auto;
  margin-bottom: 60px;
}
.default-search__again-form p {
  text-align: center;
  font-size: 18px;
  margin-bottom: 20px;
}
.default-search__again-form form {
  position: relative;
}
.default-search__again-form form input, .default-search__again-form form .cf-details-comment__field textarea, .cf-details-comment__field .default-search__again-form form textarea {
  width: 100%;
  height: 70px;
  padding: 30px;
  background-color: var(--black-3);
  border: 0;
  color: var(--white);
  padding-right: 50px;
}
.light .default-search__again-form form input, .light .default-search__again-form form .cf-details-comment__field textarea, .cf-details-comment__field .light .default-search__again-form form textarea {
  background-color: #F9F9F9;
  color: var(--black-2);
}
.default-search__again-form form input:focus, .default-search__again-form form .cf-details-comment__field textarea:focus, .cf-details-comment__field .default-search__again-form form textarea:focus {
  outline: 0;
}
.default-search__again-form form button {
  position: absolute;
  inset-inline-end: 26px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--white);
}
.light .default-search__again-form form button {
  color: var(--black-2);
}

.pagination-circle {
  display: flex;
  gap: 18px;
  align-items: center;
}
.pagination-circle li {
  color: var(--white);
}
.light .pagination-circle li {
  color: var(--black-2);
}
.pagination-circle li a.active {
  background-color: var(--black-6);
  height: 50px;
  width: 50px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.light .pagination-circle li a.active {
  color: var(--white);
}
.pagination-circle li a.active:hover {
  background-color: var(--primary);
}
.light .pagination-circle li a img {
  filter: brightness(0);
}

.blog-details__quote {
  display: grid;
  grid-gap: 70px;
  grid-template-columns: 75px auto;
}
@media only screen and (max-width: 1399px) {
  .blog-details__quote {
    grid-gap: 50px;
  }
}
@media only screen and (max-width: 1199px) {
  .blog-details__quote {
    grid-gap: 40px;
  }
}
@media only screen and (max-width: 991px) {
  .blog-details__quote {
    grid-gap: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .blog-details__quote {
    gap: 0;
    grid-template-columns: 1fr;
  }
}

.dancer__blogdetails img {
  width: 100%;
}

@media only screen and (max-width: 767px) {
  .blog-details__quote img {
    margin-bottom: 20px;
  }
}

.blog-details__quote-text p {
  font-weight: 500;
  font-size: 28px;
  line-height: 1.3;
  color: var(--white);
  margin-bottom: 0;
}
@media only screen and (max-width: 1199px) {
  .blog-details__quote-text p {
    font-size: 20px;
  }
  .blog-details__quote-text p br {
    display: none;
  }
}
@media only screen and (max-width: 991px) {
  .blog-details__quote-text p {
    font-size: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .blog-details__quote-text p {
    font-size: 20px;
  }
}

.default-blog__item-meta {
  color: var(--white);
}
.light .default-blog__item-meta {
  color: var(--black-2);
}
.default-blog__item-meta span {
  display: inline-block;
  width: 25px;
  height: 1px;
  background-color: var(--white);
  transform: translateY(-5px);
  margin: 0 10px;
}
.light .default-blog__item-meta span {
  background-color: var(--black-2);
}

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

.bg-transparent {
  background-color: transparent;
}

.default-details__cmtbtn .wc-btn-primary i {
  color: var(--black-2);
}

@media only screen and (max-width: 767px) {
  .default-comment-wrap {
    padding-top: 20px;
  }
}

.wc-btn-underline img {
  width: unset;
}

.children {
  padding-inline-start: 80px;
}
@media only screen and (max-width: 991px) {
  .children {
    padding-inline-start: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .children {
    padding-inline-start: 15px;
  }
}

ul li ul li ul li:last-child .default-details-comment-wrapper.has-reply::before {
  display: none;
}

.children .default-details-comment-wrapper.has-reply::before {
  display: none;
}

ul li:last-child .default-details-comment-wrapper.has-reply::before {
  display: none;
}

.footer__area {
  background-color: var(--black-3);
}
.light .footer__area {
  background-color: var(--white-2);
}
.footer__area .sec-sub-title {
  padding-bottom: 18px;
}
.footer__area-2 {
  padding-inline-start: 5px;
  padding-inline-end: 5px;
  background-color: var(--black-3);
}
.light .footer__area-2 {
  background-color: var(--white-2);
}
.footer__area-3 {
  position: relative;
  z-index: 1;
}
.footer__area-3::before {
  position: absolute;
  content: "";
  width: calc(50% - var(--container-max-widths) * 0.25);
  height: 100%;
  background-color: var(--black-3);
  inset-inline-start: 0;
  top: 0;
  z-index: -1;
}
.light .footer__area-3::before {
  background-color: var(--white-2);
}
@media only screen and (max-width: 767px) {
  .footer__area-3::before {
    display: none;
  }
}
.footer__area-3 .sec-title-wrapper {
  padding-inline-end: 110px;
}
@media only screen and (max-width: 1399px) {
  .footer__area-3 .sec-title-wrapper {
    padding-inline-end: 90px;
  }
}
@media only screen and (max-width: 1199px) {
  .footer__area-3 .sec-title-wrapper {
    padding-inline-end: 15px;
  }
}
.footer__area-5 {
  border-top: 1px solid var(--black-5);
}
.light .footer__area-5 {
  border-color: var(--white-4);
}
.footer__area-5 .line {
  padding-top: 30px;
  padding-bottom: 30px;
}
@media only screen and (max-width: 991px) {
  .footer__area-5 .line {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
.footer-writer__area {
  display: block;
  padding-bottom: 20px;
}
.footer-writer__title {
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  text-transform: uppercase;
  color: var(--white);
  padding-bottom: 15px;
  border-bottom: 1px solid var(--black-6);
  margin-bottom: 55px;
}
@media only screen and (max-width: 767px) {
  .footer-writer__title {
    padding-bottom: 5px;
    margin-bottom: 20px;
  }
}
.footer-writer__top {
  display: grid;
  grid-gap: 40px;
  grid-template-columns: 1fr 0.8fr 1.2fr;
}
@media only screen and (max-width: 767px) {
  .footer-writer__top {
    grid-template-columns: 1fr;
  }
}
.footer-writer__menu .quick-links {
  padding-inline-end: 10px;
}
.footer-writer__menu .quick-links li a {
  font-family: "Prata", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: var(--white);
  padding-bottom: 3px;
  text-transform: uppercase;
  transition: all 0.3s;
}
@media only screen and (max-width: 991px) {
  .footer-writer__menu .quick-links li a {
    font-size: 18px;
  }
}
.footer-writer__menu .quick-links li a:hover {
  color: var(--black-9);
}
.footer-writer__newsletter form {
  position: relative;
}
.footer-writer__newsletter input, .footer-writer__newsletter .cf-details-comment__field textarea, .cf-details-comment__field .footer-writer__newsletter textarea {
  font-family: "Prata", serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  color: var(--white);
  width: 100%;
  border: none;
  background: transparent;
  padding-inline-end: 50px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--white);
}
@media only screen and (max-width: 991px) {
  .footer-writer__newsletter input, .footer-writer__newsletter .cf-details-comment__field textarea, .cf-details-comment__field .footer-writer__newsletter textarea {
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .footer-writer__newsletter input, .footer-writer__newsletter .cf-details-comment__field textarea, .cf-details-comment__field .footer-writer__newsletter textarea {
    padding-bottom: 10px;
  }
}
.footer-writer__newsletter input, .footer-writer__newsletter .cf-details-comment__field textarea, .cf-details-comment__field .footer-writer__newsletter textarea {
  outline: none;
}
.footer-writer__newsletter input::placeholder, .footer-writer__newsletter .cf-details-comment__field textarea::placeholder, .cf-details-comment__field .footer-writer__newsletter textarea::placeholder {
  opacity: 1;
  color: var(--white);
}
.footer-writer__newsletter .submit {
  position: absolute;
  inset-inline-end: 0;
  top: 10px;
}
.footer-writer__newsletter .submit:hover i {
  color: var(--primary) !important;
}
.footer-writer__newsletter .submit i {
  color: var(--white);
  font-size: 20px;
  transition: all 0.3s;
}
.light .footer-writer__newsletter .submit i {
  color: var(--black-2);
}
.footer-writer__btm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 60px;
  padding-top: 20px;
  border-top: 1px solid var(--black-6);
}
.footer-writer__btm p a {
  display: block;
  color: var(--white);
  transition: all 0.3s;
}
.footer-writer__btm p a:hover {
  color: var(--black-9);
}
.footer-sfluence__area {
  display: block;
  padding-top: 100px;
}
@media only screen and (max-width: 767px) {
  .footer-sfluence__area {
    padding-top: 60px;
  }
}
.footer-sfluence__logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 60px;
  position: relative;
  background-image: url(../imgs/social-influence/arrow.png);
  background-position: right 60px;
  background-repeat: no-repeat;
}
.dir-rtl .footer-sfluence__logo {
  background-position: left 60px;
}
@media only screen and (max-width: 991px) {
  .footer-sfluence__logo {
    background-size: 20px;
  }
}
.footer-sfluence__logo::after {
  position: absolute;
  content: "";
  width: 890px;
  height: 1px;
  inset-inline-start: 260px;
  background-color: var(--gray-9);
}
@media only screen and (max-width: 991px) {
  .footer-sfluence__logo::after {
    width: 330px;
  }
}
@media only screen and (max-width: 767px) {
  .footer-sfluence__logo::after {
    width: 80px;
    inset-inline-start: 206px;
  }
}
.footer-sfluence__logo img {
  max-width: 210px;
}
.light .footer-sfluence__logo img {
  filter: brightness(0.2);
}
@media only screen and (max-width: 767px) {
  .footer-sfluence__logo img {
    max-width: 160px;
  }
}
.footer-sfluence__logo p {
  font-size: 14px;
  text-transform: uppercase;
  color: var(--white-11);
}
.footer-sfluence__top {
  gap: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .footer-sfluence__top {
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
}
.footer-sfluence__top::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 75px;
  inset-inline-start: 55%;
  top: 0;
  background-color: var(--gray-9);
}
@media only screen and (max-width: 1199px) {
  .footer-sfluence__top::before {
    inset-inline-start: 52%;
  }
}
@media only screen and (max-width: 991px) {
  .footer-sfluence__top::before {
    inset-inline-start: 47%;
  }
}
@media only screen and (max-width: 767px) {
  .footer-sfluence__top::before {
    inset-inline-start: 0;
    top: 70px;
    width: 100%;
    height: 1px;
  }
}
.footer-sfluence__menu ul {
  columns: 3;
  gap: 100px;
}
@media only screen and (max-width: 1399px) {
  .footer-sfluence__menu ul {
    gap: 70px;
  }
}
@media only screen and (max-width: 1199px) {
  .footer-sfluence__menu ul {
    gap: 50px;
  }
}
@media only screen and (max-width: 991px) {
  .footer-sfluence__menu ul {
    columns: 2;
    gap: 30px;
  }
}
@media only screen and (max-width: 767px) {
  .footer-sfluence__menu ul {
    gap: 50px;
  }
}
.footer-sfluence__menu ul li a {
  display: inline-block;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  color: var(--white-11);
  text-transform: uppercase;
  position: relative;
}
.footer-sfluence__menu ul li a::after {
  position: absolute;
  content: "";
  width: 0%;
  height: 1px;
  inset-inline-start: 0;
  bottom: 0;
  background-color: var(--white-11);
  transition: all 0.5s;
}
.footer-sfluence__menu ul li a:hover::after {
  width: 100%;
}
.footer-sfluence__social ul {
  gap: 50px;
  display: flex;
  justify-content: right;
}
@media only screen and (max-width: 1399px) {
  .footer-sfluence__social ul {
    gap: 35px;
  }
}
@media only screen and (max-width: 991px) {
  .footer-sfluence__social ul {
    gap: 25px;
  }
}
.footer-sfluence__social ul li {
  text-align: end;
}
.footer-sfluence__social ul li a {
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: var(--white-11);
  transition: all 0.3s;
  display: inline-block;
}
@media only screen and (max-width: 991px) {
  .footer-sfluence__social ul li a {
    font-size: 14px;
  }
}
.footer-sfluence__social ul li a:hover {
  color: var(--primary);
}
.footer-sfluence__social ul li a span {
  display: block;
  font-size: 24px;
  margin-bottom: 15px;
}
@media only screen and (max-width: 991px) {
  .footer-sfluence__social ul li a span {
    font-size: 20px;
    margin-bottom: 0;
  }
}
.footer-sfluence__gallery {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 100px;
}
@media only screen and (max-width: 1199px) {
  .footer-sfluence__gallery {
    grid-gap: 20px;
    padding-top: 70px;
  }
}
@media only screen and (max-width: 991px) {
  .footer-sfluence__gallery {
    padding-top: 50px;
    grid-gap: 10px;
  }
}
@media only screen and (max-width: 767px) {
  .footer-sfluence__gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
.footer-sfluence__item img {
  width: 100%;
}
.footer-sfluence__btm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 0;
}
@media only screen and (max-width: 767px) {
  .footer-sfluence__btm {
    gap: 15px;
    flex-wrap: wrap;
    justify-content: unset;
    flex-direction: column;
  }
}
.footer-sfluence__btm p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--black-9);
  text-transform: uppercase;
}
.footer-sfluence__btm p a {
  color: var(--white-11);
  transition: all 0.3s;
}
.light .footer-sfluence__btm p a {
  color: var(--black-2);
}
.footer-sfluence__btm p a:hover {
  color: var(--black-9);
}
.footer-sfluence__btm li a {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--black-9);
  text-transform: uppercase;
  transition: all 0.3s;
}
.footer-sfluence__btm li a:hover {
  color: var(--white);
}
.footer__top .line {
  padding-top: 70px;
  padding-bottom: 70px;
}
.footer__logo {
  height: 100%;
  display: flex;
  align-items: center;
  max-width: 130px;
}
@media only screen and (max-width: 991px) {
  .footer__logo {
    height: auto;
    justify-content: center;
    margin-bottom: 60px;
  }
}
.footer__logo-3 {
  max-width: 160px;
}
.footer__logo-5 {
  text-align: center;
  position: relative;
}
@media only screen and (max-width: 767px) {
  .footer__logo-5 {
    grid-row: 1;
  }
}
.footer__logo-5 a {
  display: inline-block;
  padding: 30px 35px;
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 25px 25px 0 0;
  border: 1px solid var(--black-5);
  background-color: var(--black-2);
}
@media only screen and (max-width: 767px) {
  .footer__logo-5 a {
    border-radius: 25px;
  }
}
.footer__title {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-4);
  padding-bottom: 10px;
  text-transform: uppercase;
}
@media only screen and (max-width: 991px) {
  .footer__title {
    padding-bottom: 5px;
  }
}
.footer__title-3 {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-4);
  padding-bottom: 10px;
  text-transform: capitalize;
}
.light .footer__title-3 {
  color: var(--gray);
}
.footer__title-9 {
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: var(--white) !important;
  margin-bottom: 115px;
}
@media only screen and (max-width: 1399px) {
  .footer__title-9 {
    margin-bottom: 80px;
  }
}
@media only screen and (max-width: 1199px) {
  .footer__title-9 {
    margin-bottom: 50px;
  }
}
@media only screen and (max-width: 767px) {
  .footer__title-9 {
    margin-bottom: 35px;
  }
}
.footer__link {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--white);
}
.light .footer__link {
  color: var(--black-2);
}
@media only screen and (max-width: 991px) {
  .footer__link {
    font-size: 16px;
  }
}
.footer__link:hover {
  color: var(--primary);
}
.footer__content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
@media only screen and (max-width: 767px) {
  .footer__content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
.footer__info {
  display: flex;
  gap: 140px;
  justify-content: flex-end;
  position: relative;
  z-index: 99;
}
@media only screen and (max-width: 1399px) {
  .footer__info {
    gap: 80px;
  }
}
@media only screen and (max-width: 991px) {
  .footer__info {
    justify-content: center;
  }
}
@media only screen and (max-width: 767px) {
  .footer__info {
    gap: 50px;
    flex-direction: column;
  }
}
.footer__info-3 {
  margin-inline-start: 80px;
  display: flex;
  gap: 60px;
  justify-content: space-between;
  padding-bottom: 100px;
  border-bottom: 1px solid var(--black-6);
  position: relative;
}
@media only screen and (max-width: 1399px) {
  .footer__info-3 {
    margin-inline-start: 40px;
    padding-bottom: 80px;
    gap: 30px;
  }
}
@media only screen and (max-width: 1199px) {
  .footer__info-3 {
    margin-inline-start: 20px;
    flex-wrap: wrap;
    gap: 50px;
  }
}
@media only screen and (max-width: 991px) {
  .footer__info-3 {
    gap: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .footer__info-3 {
    margin-inline-start: 0;
    gap: 30px;
    padding-bottom: 40px;
  }
}
.footer__info-3 div {
  position: relative;
}
@media only screen and (max-width: 1199px) {
  .footer__info-3 div {
    width: 45%;
  }
}
@media only screen and (max-width: 767px) {
  .footer__info-3 div {
    text-align: start;
  }
}
@media (max-width: 575px) {
  .footer__info-3 div {
    width: 100%;
  }
}
.footer__info-3 div::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 60px;
  inset-inline-start: -40px;
  background-color: var(--black-6);
}
@media only screen and (max-width: 1399px) {
  .footer__info-3 div::before {
    display: none;
  }
}
.footer__info-3 div:first-child::before {
  position: unset;
}
@media only screen and (max-width: 1199px) {
  .footer__info-3 div:nth-child(3)::before {
    position: unset;
  }
}
@media only screen and (max-width: 767px) {
  .footer__contact {
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
  .footer__email {
    text-align: center;
  }
}
.footer__address p {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--white);
}
@media only screen and (max-width: 767px) {
  .footer__social {
    text-align: center;
  }
}
.footer__social li {
  padding-inline-start: 15px;
  display: inline-block;
}
.footer__social li:first-child {
  padding-inline-start: 0;
}
.footer__social li a {
  display: block;
  font-size: 20px;
  color: var(--gray-4);
  transition: all 0.3s;
}
.footer__social li a:hover {
  color: var(--primary);
}
.footer__social-2 {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
@media only screen and (max-width: 1199px) {
  .footer__social-2 {
    flex-wrap: wrap;
    justify-content: center;
  }
}
.footer__social-2 li a {
  font-size: 14px;
  color: var(--gray-4);
  padding: 21px 30px;
  font-weight: 500;
  border-radius: 40px;
  text-transform: uppercase;
  border: transparent;
  background-color: var(--black-4);
}
.light .footer__social-2 li a {
  color: var(--black-2);
  background-color: var(--white-2);
}
@media only screen and (max-width: 767px) {
  .footer__social-2 li a {
    padding: 18px 22px;
  }
}
.footer__social-2 li a::after {
  background-color: var(--black-4);
  z-index: -1;
}
.light .footer__social-2 li a::after {
  background-color: var(--white-3);
}
.footer__social-2 li a:hover {
  color: var(--black-2);
  background-color: var(--primary);
}
.light .footer__social-2 li a:hover {
  color: var(--black-2);
  background-color: var(--primary);
}
.footer__social-2 li a:hover span::after {
  background-color: var(--black-2);
}
.light .footer__social-2 li a:hover span::after {
  background-color: var(--black-2);
}
.footer__social-2 li a span {
  font-size: 18px;
  position: relative;
  padding-inline-end: 30px;
}
@media only screen and (max-width: 767px) {
  .footer__social-2 li a span {
    padding-inline-end: 20px;
  }
}
.footer__social-2 li a span::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 30px;
  inset-inline-end: 10px;
  top: -4px;
  background-color: var(--gray-8);
  transition: all 0.3s;
}
.light .footer__social-2 li a span::after {
  background-color: var(--gray-2);
}
@media only screen and (max-width: 767px) {
  .footer__social-2 li a span::after {
    height: 20px;
    top: 0;
  }
}
.footer__social-2 li a.btn-hover-divide::after {
  background-color: var(--primary);
}
.footer__social-5 {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
@media only screen and (max-width: 767px) {
  .footer__social-5 {
    grid-row: 2;
    margin-top: 20px;
    justify-content: center;
    margin-bottom: 20px;
  }
}
.footer__social-5 li {
  display: inline-block;
}
.footer__social-5 li a {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--white);
  text-transform: capitalize;
}
.footer__social-5 li a:hover {
  color: var(--gray-4);
}
.footer__btm {
  padding: 30px 0;
  border-top: 1px solid var(--black-5);
}
.footer__btm-3 {
  margin-inline-start: 80px;
  display: flex;
  justify-content: space-between;
  padding: 50px 0;
}
@media only screen and (max-width: 1399px) {
  .footer__btm-3 {
    margin-inline-start: 40px;
  }
}
@media only screen and (max-width: 1199px) {
  .footer__btm-3 {
    margin-inline-start: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .footer__btm-3 {
    margin-inline-start: 0;
    flex-direction: column;
    gap: 30px;
  }
  .footer__btm-3 br {
    display: block;
  }
}
.footer__btm-3 .copyright {
  text-align: start;
}

.copyright {
  text-align: center;
}
.copyright p a {
  color: var(--white);
}
.copyright p a:hover {
  color: var(--primary);
}
.copyright-5 {
  height: 100%;
  display: flex;
  align-items: center;
}
@media only screen and (max-width: 767px) {
  .copyright-5 {
    grid-row: 3;
    text-align: center;
    justify-content: center;
  }
}
.copyright-5 p a {
  color: var(--white);
}
.copyright-5 p a:hover {
  color: var(--primary);
}

.light.footer__area-2 {
  background-color: var(--white-2);
}
.light.footer__area-3 {
  background-color: var(--white);
}
.light.footer__area-3::before {
  background: var(--white-2);
}
.light.footer-sfluence__area {
  background: #F0ECE9;
}
.light .footer__info-3 {
  border-color: var(--white-4);
}
.light .footer__info-3 div::before {
  background-color: var(--white-4);
}
.light .footer-writer__title {
  color: var(--black-2);
  border-color: var(--gray-2);
}
.light .footer-writer__menu .quick-links li a {
  color: var(--black-2);
}
.light .footer-writer__menu .quick-links li a:hover {
  color: var(--gray);
}
.light .footer-writer__newsletter input, .light .footer-writer__newsletter .cf-details-comment__field textarea, .cf-details-comment__field .light .footer-writer__newsletter textarea {
  color: var(--black-2);
  border-color: var(--black-2);
}
.light .footer-writer__newsletter input::placeholder, .light .footer-writer__newsletter .cf-details-comment__field textarea::placeholder, .cf-details-comment__field .light .footer-writer__newsletter textarea::placeholder {
  color: var(--black-2);
}
.light .footer-writer__btm {
  border-color: var(--gray-2);
}
.light .footer-writer__btm p a {
  color: var(--black-2);
}
.light .footer-writer__btm p a:hover {
  color: var(--black-9);
}
.light .footer-sfluence__logo {
  background-image: url(../imgs/social-influence/shape-6.png);
}
.light .footer-sfluence__logo p {
  color: var(--black-2);
}
.light .footer-sfluence__menu ul li a {
  color: var(--black-2);
}
.light .footer-sfluence__menu ul li a::after {
  background-color: var(--black-2);
}
.light .footer-sfluence__social ul li a {
  color: var(--black-2);
}
.light .footer-sfluence__social ul li a:hover {
  color: var(--primary);
}
.light .footer-sfluence__btm p {
  color: var(--gray-10);
}
.light .footer-sfluence__btm li a {
  color: var(--gray-10);
}
.light .footer-sfluence__btm li a:hover {
  color: var(--black-2);
}
.light.footer__area {
  background-color: var(--white-2);
}
.light.footer__area-5 {
  border-top: 2px solid var(--white-4);
}
.light .footer__title {
  color: var(--gray);
}
.light .footer__social li a {
  color: var(--gray);
}
.light .footer__social li a:hover {
  color: var(--primary);
}
.light .footer__social-5 li a {
  color: var(--black-2);
}
.light .footer__social-5 li a:hover {
  color: var(--primary);
}
.light .footer__btm {
  border-color: var(--white-4);
}
.light .footer__logo-5 a {
  border-color: var(--white-4);
  background-color: var(--white);
}
.light .copyright p a {
  color: var(--black-2);
}
.light .copyright p a:hover {
  color: var(--primary);
}
.light .copyright-5 p a {
  color: var(--black-2);
}

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

@media only screen and (max-width: 1199px) {
  .footer__links {
    justify-content: center;
  }
}
@media only screen and (max-width: 1199px) {
  .footer__links {
    margin-bottom: 30px;
  }
}
.footer__links li {
  margin-bottom: 0;
}
.footer__links li a {
  color: var(--white);
  font-weight: 400;
  font-size: 18px;
  line-height: 35px;
}
.footer__links7 li {
  margin-inline-end: 25px;
  position: relative;
  text-transform: uppercase;
}
.footer__links7 li:last-child {
  margin-inline-end: 0;
}
.footer__links7 li:last-child::before {
  display: none;
}
.footer__links7 li::before {
  content: "";
  position: absolute;
  inset-inline-end: -13px;
  top: 5px;
  height: 16px;
  width: 1px;
  background-color: #3F3A36;
}
@media only screen and (max-width: 991px) {
  .footer__links7 li::before {
    display: none;
  }
}

.footer__social-5.social_6 {
  justify-content: flex-start;
  position: relative;
  padding-bottom: 40px;
}
.footer__social-5.social_6 li {
  padding-inline-end: 20px;
  padding-inline-start: 0;
}
.footer__social-5.social_6::before {
  position: absolute;
  content: "";
  inset-inline-start: 0;
  bottom: 20px;
  width: 100px;
  height: 1px;
  background-color: #3F3A36;
}

.newsletter form input, .newsletter form .cf-details-comment__field textarea, .cf-details-comment__field .newsletter form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #3C3636;
  background-color: transparent;
  color: var(--white);
  padding: 10px 30px 10px 0;
}
.newsletter form input:focus, .newsletter form .cf-details-comment__field textarea:focus, .cf-details-comment__field .newsletter form textarea:focus {
  outline: 0;
}

.submit_btn {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-80%);
}
.dir-rtl .submit_btn img {
  transform: rotateY(180deg);
}

@media only screen and (max-width: 767px) {
  .copyright__6 {
    text-align: center !important;
  }
}

.hover-zoom li a:hover {
  transform: scale(1.1);
}
.hover-rotate li a i {
  transition: all 1s;
}
.hover-rotate li a:hover i {
  transform: rotate(360deg);
}
.hover-space li a:hover {
  letter-spacing: 1px;
}
.hover-border-move li a {
  position: relative;
  transition: all 0.5s;
}
.hover-border-move li a:hover::after {
  width: 100%;
  left: auto;
  right: 0;
}
.hover-border-move li a::after {
  position: absolute;
  content: "";
  width: 0%;
  height: 1px;
  bottom: 0;
  left: 0;
  transition: all 0.5s;
  background-color: currentColor;
}

.menu-hover-default li a:hover {
  color: var(--primary);
}
.menu-hover-space li a:hover {
  letter-spacing: 1px;
}

.blog-img-leftmove img {
  transform: scale(1.1);
  transition: all 0.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 0.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 0.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 0.5s;
}
.service-rollover-right::after {
  position: absolute;
  content: "";
  width: 0%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: var(--white-6);
  transition: all 0.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 0.5s;
}
.service-rollover-left::after {
  position: absolute;
  content: "";
  width: 0%;
  height: 100%;
  top: 0;
  right: 0;
  background-color: var(--white-6);
  transition: all 0.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 0.5s;
}
.service-rollover-top::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0%;
  left: 0;
  bottom: 0;
  background-color: var(--white-6);
  transition: all 0.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 0.5s;
}
.service-rollover-bottom::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0%;
  top: 0;
  left: 0;
  background-color: var(--white-6);
  transition: all 0.5s cubic-bezier(0.42, 0, 0.58, 1);
}
.service-rollover-bottom:hover::after {
  height: 100%;
  top: auto;
  bottom: 0%;
}

/*# sourceMappingURL=master.css.map */