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

:root {
   --primary-color: #f38126;
   --lighter-primary-color: #f381261a;
   --secondary-color: #fff;
   --screen-bg-color: #44240b;
   --black-color: #000;
   --max-w-xxl: 1400px;
   --main-heading: 60px;
   --sub-heading1: 40px;
   --sub-heading2: 36px;
   --sub-heading3: 30px;
   --fs-48: 48px;
   --fs-24: 24px;
   --fs-20: 20px;
   --fs-18: 18px;
   --fs-16: 16px;
   --fs-14: 14px;
   --box-shadow: 0 4px 4px rgba(243, 129, 38, 0.15);
   --letter-spacing: 0.5px;
}

*,
html {
   scroll-behavior: smooth;
}

body {
   min-height: 100vh;
   background: var(--screen-bg-color);
   color: var(--secondary-color);
   font-size: 1rem;
   font-family: "Quicksand", sans-serif;
   letter-spacing: var(--letter-spacing);
}

/* Common CSS Classes */
.max-w-xxl {
   max-width: var(--max-w-xxl);
   margin: 0 auto;
}

.logo {
   width: 200px;
}

.w-fit {
   width: fit-content;
}

.primary-btn {
   background: var(--primary-color);
   color: var(--secondary-color);
   padding: 12px 32px;
   line-height: 1.2;
   border: 1px solid var(--primary-color) !important;
}

.primary-btn:hover {
   background: var(--lighter-primary-color);
   color: var(--primary-color);
   box-shadow: var(--box-shadow);
   transition: all 0.5s;
}

.black-btn {
   background: var(--black-color);
   color: var(--secondary-color);
   padding: 12px 32px;
   line-height: 1.2;
   border: 1px solid var(--black-color) !important;
}

.black-btn:hover {
   color: var(--black-color);
   box-shadow: var(--box-shadow);
   transition: all 0.5s;
}

.input-h {
   height: 40px;
}

.input-h:focus-within {
   border: 1px solid var(--primary-color);
   box-shadow: 0 0 10px var(--secondary-color);
}

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

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

.border-lighter-primary {
   border: 1px solid var(--lighter-primary-color);
}

.cursor-pointer {
   cursor: pointer;
}

.scrolled {
   background-color: var(--screen-bg-color) !important;
   box-shadow: 0 0.125rem 0.25rem var(--lighter-primary-color) !important;
}

.lang-dropdown .dropdown-menu {
   --bs-dropdown-min-width: 6rem;
   border: 1px solid var(--primary-color);
   box-shadow: var(--box-shadow);
   border-radius: 16px;
}

.main-heading {
   font-size: var(--main-heading);
}

.sub-heading1 {
   font-size: var(--sub-heading2);
   position: relative;
}

.sub-heading1::after {
   content: "";
   width: 100px;
   height: 4px;
   display: block;
   background: var(--primary-color);
   border-radius: 5px;
}

.sub-heading2 {
   font-size: var(--sub-heading3);
   position: relative;
}

.fs-24 {
   font-size: var(--fs-24);
}

.ic-bg-effect {
   width: 80px;
   height: 80px;
   filter: blur(3px);
}

.ic-want-work {
   margin-top: -40px;
   margin-left: 24px;
}

.ic-bg-effect-white {
   width: 80px;
   height: 80px;
   filter: blur(3px);
   background: var(--secondary-color);
   opacity: 0.25;
}

.ic-why-work {
   margin-top: -40px;
   margin-left: 24px;
}

.hero-sub-heading {
   font-size: var(--fs-18);
}

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

.box-shadow {
   box-shadow: var(--box-shadow);
}

.toast-bg {
   background: var(--screen-bg-color);
   border: 3px solid var(--lighter-primary-color) !important;
}

/* Media Queries */
@media only screen and (max-width: 1200px) {
   .main-heading {
      font-size: var(--fs-48);
   }

   .fs-24 {
      font-size: var(--fs-20);
   }
}

@media only screen and (max-width: 992px) {
   .main-heading {
      font-size: var(--sub-heading2);
   }

   .hero-sub-heading {
      font-size: inherit;
   }

   .sub-heading1 {
      font-size: var(--sub-heading3);
   }

   .sub-heading2 {
      font-size: var(--fs-24);
   }
}

@media only screen and (max-width: 768px) {
   .main-heading {
      font-size: var(--sub-heading3);
   }

   .hero-sub-heading {
      font-size: inherit;
   }

   .fs-24 {
      font-size: var(--fs-18);
   }
}

@media only screen and (max-width: 576px) {
   .logo {
      width: 150px;
   }

   /* .toast-body {
      font-size: 12px !important;
   } */

   .toast {
      --bs-toast-max-width: 320px;
   }

   .g-recaptcha {
      overflow-x: auto;
   }
}