@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");

:root {
  --font-main: "Outfit", sans-serif;
  --color-primary: #081831;
  --color-secondary: #708090;

  --bg-gray: #f9f9f9;

  --Second-Color: var(--color-primary);

  --section-padding: 100px;
}

*:not(i, span) {
  font-family: var(--font-main);
}

.welcome5-btn,
button[type="submit"] {
  background-color: var(--color-primary) !important;
  color: white !important;

  &:hover {
    background-color: var(--color-secondary) !important;
    color: var(--color-primary) !important;
  }
}

section {
  padding-block: var(--section-padding) !important;
}

.contact5-section-area .contact5-content-area .input-area1 button,
.welcome5-btn {
  border-radius: 0;
}

.site-logo,
.mobile-logo,
.logos img {
  width: 245px;
}

.mobile-logo {
  filter: brightness(0) invert(1);
}

.header-area.header.homepage5.header-sticky:not(.sticky) {
  :where(.site-logo, .mobile-logo, .logos) {
    img {
      filter: brightness(0) invert(1);
    }
  }

  .main-menu-ex.homepage5 ul li a {
    color: white !important;
  }

  .main-menu-ex.homepage5 ul li a:hover {
    color: var(--color-secondary) !important;
  }
}

.header-area .main-menu-ex.homepage5 ul li a {
  color: black !important;
}

.header-area.header-sticky.sticky {
  background-color: white !important;

  .main-menu-ex.homepage5 ul li {
    color: black !important;
  }

  .main-menu-ex.homepage5 ul li a:hover {
    color: var(--color-secondary) !important;
  }
}

header {
  .header-area {
    padding-block: 0.5rem;
    box-shadow: 1px 1px 10px 5px #00000003;
  }

  .header-elements {
    padding: 0;
  }
}

.mobile-sidebar.sidebar5 {
  background-color: white;

  * {
    color: black !important;

    &:not(i) {
      font-family: var(--font-main) !important;
    }

    img {
      filter: unset !important;
    }
  }

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

  .contact-info-single {
    margin-bottom: 0.5rem;
  }
}

#home {
  height: 100vh;
  padding: 0;
  display: flex;
  align-items: center;

  * {
    text-align: center;
  }

  .video-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    &::before {
      content: "";
      position: absolute;
      background-color: black;
      opacity: 0.6;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  h1 {
    @media (max-width: 740px) {
      font-size: 40px;
      line-height: calc(40px * 1.3);
    }

    @media (max-width: 550px) {
      font-size: 30px;
      line-height: calc(30px * 1.3);
    }
  }

  @media (max-width: 550px) {
    .welcome5-textarea span {
      display: none;
    }
  }
}

#about {
}

#services {
  background-color: var(--bg-gray);

  .container-fluid {
    /* padding-inline: 0; */
  }

  .services-row {
    display: flex;
    background-color: white;
    flex-wrap: wrap;

    --gap: 0.5rem;

    @media (max-width: 1300px) {
      background-color: transparent;
      gap: var(--gap);
    }

    .service {
      position: relative;
      width: 25%;
      container: service / inline-size;
      transition: all 0.4s ease;

      @media (max-width: 1300px) {
        width: calc(50% - var(--gap));
        background-color: white;
      }

      @media (max-width: 650px) {
        width: 100%;
      }

      &:not(:last-child) {
        border-right: solid 1px var(--bg-gray);
      }

      &:hover {
        .back {
          max-width: 100%;
          max-height: 100%;
          opacity: 1;
        }
      }

      .front,
      .back {
        padding: 1.5rem;
        padding-block: 2.5rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        transition: all 0.4s ease;
        text-align: center;
        align-items: center;
      }

      .back {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: var(--color-primary);
        max-width: 100%;
        max-height: 100%;
        opacity: 0;

        img {
          filter: brightness(0) invert(1);
        }

        * {
          color: white;
        }
      }

      h3 {
        font-size: 6cqw;
      }

      img {
        width: 20%;
      }

      p {
        font-size: max(1rem, 3.4cqw);
        line-height: max(calc(1.3rem * 1.5), calc(3.4cqw * 1.5));
      }
    }
  }
}

#audience {
  background-color: white;
  padding-bottom: calc(var(--section-padding) + 100px) !important;

  .service5-boxarea:hover .service-content {
    height: 100%;
    width: 100%;
    margin: 0;

    * {
      text-align: center;
      text-wrap: balance;
    }
  }

  .service5-content-area {
    width: 100%;
    height: 120px;

    &::after {
      width: 100%;
      border-radius: 0 43px 0 0;
    }

    a {
      display: block;
      width: 100%;
    }
  }

  .service5-carousel-area.owl-carousel.owl-loaded.owl-drag .owl-nav {
    position: absolute;
    top: unset;
    bottom: -100px;
    right: 0;

    button {
      background-color: var(--color-primary);

      svg,
      svg * {
        fill: white;
      }

      &:hover {
        background-color: var(--color-secondary) !important;

        svg,
        svg * {
          fill: var(--color-primary) !important;
        }
      }
    }
  }
}

#contact-info {
  padding-block: var(--section-padding);

  .cta-contact-area .cta5-author-area {
    background: var(--color-secondary);
  }
}

#contact {
  background-color: var(--bg-gray);
}

footer {
  padding: 1rem !important;
  background-color: var(--color-primary) !important;

  * {
    color: white !important;
  }

  .copyright-pera p {
    padding: 0 !important;
  }
}