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

html {
  overflow-x: hidden;
}

body {
  font-family: "Raleway", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--sos-black-color);
  overflow-x: hidden;
}

/* Root Variables */
:root {
  --sos-primary-color: #FC4C02;
  --sos-white-color: #ffffff;
  --sos-black-color: #000000;
  --sos-warning-color: #fc0;
  --sos-info-color: #09c;
  --sos-success-color: #6c3;
  --sos-gradient-color: linear-gradient(180deg, #fc7b0f 0%, #fc4c02 47%, #d82c29 100%);
  --sos-grey-color: #9D9D9D;
  /* --sos-gradient-color: transparent linear-gradient(180deg, #fc7b0f 0%, #fc4c02 47%, #d82c29 100%) 0% 0% / auto no-repeat padding-box; */
}

/* Main Container */
.main-container {
  padding-left: 10%;
  padding-right: 10%;
  /* width: 100%;
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto; */
}

@media (max-width:1536px) {
  .main-container {
    padding-left: 8%;
    padding-right: 8%;
  }
}

@media (max-width:1280px) {
  .main-container {
    padding-left: 7%;
    padding-right: 7%;
  }
}

@media (max-width:1280px) {
  .main-container {
    padding-left: 5%;
    padding-right: 5%;
  }
}

@media (max-width:992px) {
  .main-container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* header scrolled class */
.scrolled {
  background-color: #000000bf;
}


/* All Button Styles */
.all-btn-size {
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
  width: 100%;
  max-width: 230px;
  min-width: 230px;
  height: 73px;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* gradient btn */
.all-btn-gradient {
  background: var(--sos-gradient-color);
  color: var(--sos-white-color);
  /* border: 2px solid transparent;  */
}

.all-btn-gradient:hover {
  background: var(--sos-black-color);
  /* border: 2px solid gray; */
  box-shadow: inset 0px 0px 0px 2px grey;
  color: grey;
}

/*  */

.all-btn-simple {
  background: var(--sos-white-color);
  color: var(--sos-primary-color);
  border: 2px solid transparent;
}

.all-btn-simple:hover {
  background: var(--sos-black-color);
  border: 2px solid gray;
  color: grey;
}

/* Footer Social Icons */
.footer-social-icon:hover svg {
  filter: brightness(0) saturate(100%) invert(34%) sepia(28%) saturate(6890%) hue-rotate(2deg) brightness(104%) contrast(98%);
}

.footer-social-icon:hover {
  background-color: transparent;
}

/* Social Bar */
.social-bar svg {
  filter: brightness(0) saturate(100%) invert(34%) sepia(91%) saturate(1516%) hue-rotate(356deg) brightness(94%) contrast(110%);
}

.social-bar:hover svg {
  filter: brightness(0) saturate(100%)
}

.social-bar:hover {
  background-color: transparent;
}

/* Hero Section Image Change on Scroll */
.zoom-animation {
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

.zoom-in {
  animation-name: zoomIn;
}

.zoom-out {
  animation-name: zoomOut;
}

@keyframes zoomIn {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.06);
  }
}

@keyframes zoomOut {
  from {
    transform: scale(1.06);
  }

  to {
    transform: scale(1);
  }
}

.faq-arrow-color {
  filter: brightness(0) saturate(100%) invert(64%) sepia(6%) saturate(7%) hue-rotate(353deg) brightness(98%) contrast(85%);
}

@media (max-width:1360px) {
  .all-btn-size {
    max-width: 200px;
    min-width: 200px;
    font-size: 16px;
    height: 63px;
    border-radius: 16px;
  }
}

@media (max-width:1360px) {
  .all-btn-size {
    max-width: 170px;
    min-width: 170px;
  }
}

/* Header Menu */
.menu-link {
  padding: 21px 0px;
  border-radius: 14px;
  min-width: 80px;
  display: block;
  transition: all 0.3s ease;
}

@media (min-width: 1180px) {
  .menu-link {
    min-width: 90px;
  }
}

@media (min-width: 1360px) {
  .menu-link {
    padding: 22px 6px;
    border-radius: 18px;
    min-width: 100px;
  }
}

@media (min-width: 1460px) {
  .menu-link {
    min-width: 110px;
  }
}

#mobileMenuContainer ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#mobileMenuContainer .menu-link {
  width: 100%;
  min-width: 100%;
  text-align: left;
  padding: 16px 20px;
  border-radius: 16px;
}

#mobileCtaContainer a {
  width: 100%;
  justify-content: center;
  text-align: center;
}