@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300&display=swap");
html {
  scroll-behavior: smooth; }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

body {
  font-family: "Roboto Condensed", sans-serif;
  color: var(--primary-color); }

.container {
  max-width: 1720px;
  margin: 0 auto;
  padding-left: 30px;
  padding-right: 30px; }
  
h3 {
    font-size:40px;
    text-align: center;
    margin-bottom: 20px; 
    font-weight: normal;
}  
  @media (max-width: 768px) {
    h3 {
      font-size: 7vw;
    } }

#about p {
    margin-bottom:30px;
}

h2 {
  font-size: 64px;
  font-weight: 300;
  position: relative;
  color: #CE202E;
  letter-spacing: 6.4px;
  text-align: center;
  margin-bottom: 40px; }
  @media (max-width: 1200px) {
    h2 {
      font-size: 50px; } }
  @media (max-width: 768px) {
    h2 {
      font-size: 7.5vw;
      padding-bottom: 4vw; } }
  h2:after {
    content: "";
    position: absolute;
    width: 190px;
    height: 19px;
    background-image: url("../images/ornament.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100%; }

p {
  font-size: 24px; }
  @media (max-width: 1200px) {
    p {
      font-size: 20px; } }

header {
  padding-top: 35px;
  padding-bottom: 35px;
  position: sticky;
  z-index: 10;
  top: 0;
  background: white; }
  @media (max-width: 768px) {
    header .logo {
      max-width: 90px;
      position: relative;
      z-index: 14; }
      header .logo img {
        max-width: 100%;
        height: auto; } }
  @media (max-width: 768px) {
    header {
      padding-top: 25px;
      padding-bottom: 25px;
      height: 94px; } }
  header .container {
    display: flex;
    justify-content: space-between;
    align-items: center; }
  header nav.menu {
    display: flex; }
    header nav.menu ul {
      margin: 0;
      padding: 0;
      display: flex; }
      header nav.menu ul li {
        list-style-type: none;
        padding-left: 50px; }
        @media (max-width: 768px) {
          header nav.menu ul li {
            padding-left: 0; } }
        header nav.menu ul li a {
          text-decoration: none;
          color: black;
          font-size: 20px;
          transition: all 0.3s ease; }
          header nav.menu ul li a:hover {
            color: #CE202E; }

section.hero-banner {
  position: relative; }
  section.hero-banner img {
    width: 100%;
    height: auto; }
    @media (max-width: 768px) {
      section.hero-banner img {
        width: 100%;
        object-fit: cover; } }

section.our-mission {
  background-image: url("../images/Pattern.jpg");
  position: relative;
  padding: 190px 15px 90px; }
  @media (max-width: 768px) {
    section.our-mission {
      padding: 150px 15px 40px; } }
  section.our-mission .mission-title {
    box-shadow: 0px 3px 50px #00000029;
    background: white;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 50px 70px;
    z-index: 2; }
    @media (max-width: 1200px) {
      section.our-mission .mission-title {
        padding: 48px; } }
    @media (max-width: 992px) {
      section.our-mission .mission-title {
        padding: 38px;
        width: 500px;
        max-width: 90%; } }
    section.our-mission .mission-title p {
      font-size: 30px;
      font-weight: 300;
      text-align: center; }
      @media (max-width: 768px) {
        section.our-mission .mission-title p {
          font-size: 21px; } }
  section.our-mission .three-columns {
    display: flex;
    justify-content: center; }
    @media (max-width: 768px) {
      section.our-mission .three-columns {
        flex-direction: column;
        align-items: center; } }
    section.our-mission .three-columns .our-mission-item {
      background: #CE202E;
      padding: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      width: 300px;
      margin: 0 30px;
      max-width: 100%; }
      @media (max-width: 1200px) {
        section.our-mission .three-columns .our-mission-item {
          padding: 15px; } }
      @media (max-width: 768px) {
        section.our-mission .three-columns .our-mission-item {
          padding: 50px 15px;
          margin: 15px auto; } }
      section.our-mission .three-columns .our-mission-item img {
        height: 84px;
        width: auto;
        margin-bottom: 30px; }
      section.our-mission .three-columns .our-mission-item p {
        color: white;
        font-size: 24px;
        font-weight: 300; }

section.our-values {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 145px 15px 120px; }
  @media (max-width: 1200px) {
    section.our-values {
      flex-direction: column-reverse;
      padding: 125px 15px 100px; } }
  @media (max-width: 768px) {
    section.our-values {
      padding: 50px 15px 60px; } }
  section.our-values .our-values-info {
    box-shadow: 0px 3px 50px #00000029;
    padding: 160px 100px;
    max-width: 600px;
    text-align: center;
    position: relative;
    z-index: 2;
    margin-right: -100px;
    margin-top: -200px;
    background: white;
    max-width: 80%; }
    @media (max-width: 1200px) {
      section.our-values .our-values-info {
        padding: 40px 20px;
        margin-right: auto;
        margin-left: auto;
        margin-top: -120px; } }
    section.our-values .our-values-info p {
      font-size: 30px;
      font-weight: 300;
      text-align: center;
      line-height: 1.5; }
      @media (max-width: 768px) {
        section.our-values .our-values-info p {
          font-size: 21px; } }
  section.our-values .our-values-image {
    position: relative;
    z-index: 1;
    max-width: 100%; }
    section.our-values .our-values-image img {
      max-width: 100%;
      height: auto; }

section.about-us {
  padding-bottom: 70px; }
  @media (max-width: 768px) {
    section.about-us {
      padding-bottom: 30px; } }
  section.about-us img {
    width: 100%;
    height: auto; }
    @media (max-width: 768px) {
      section.about-us img {
        height: 430px;
        width: 100%;
        object-fit: cover; } }
  section.about-us h2 {
    color: black;
    margin-top: 60px;
    margin-bottom: 60px; }
    @media (max-width: 768px) {
      section.about-us h2 {
        margin-top: 30px;
        margin-bottom: 30px; } }
  section.about-us p {
    max-width: 1030px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    font-size: 22px;
    letter-spacing: 0.55px;
    line-height: 1.5;
    font-weight: 300; }
    @media (max-width: 768px) {
      section.about-us p {
        font-size: 18px; } }

footer {
  background: black;
  padding: 35px 0; }
  @media (max-width: 768px) {
    footer {
      padding: 30px 0; } }
  footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media (max-width: 768px) {
      footer .container img {
        margin-bottom: 20px;
        max-width: 90px; } }
    @media (max-width: 768px) {
      footer .container {
        flex-direction: column; } }
    footer .container div {
      color: white;
      opacity: 0.57;
      letter-spacing: 0.4px;
      font-size: 16px; }
      @media (max-width: 768px) {
        footer .container div:last-child {
          margin: 20px 0 0 0; } }
      footer .container div a {
        color: white; }

@media (max-width: 768px) {
  .white-space {
    width: 100%;
    height: 94px;
    background: white;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0; }
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 35px;
    height: 35px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 14; }
    .hamburger .hamburger-bar {
      width: 100%;
      height: 4px;
      border-radius: 2px;
      background-color: #000;
      transition: transform 0.3s ease; }
      .hamburger .hamburger-bar:nth-child(1) {
        transform-origin: top; }
      .hamburger .hamburger-bar:nth-child(2) {
        transform-origin: center; }
      .hamburger .hamburger-bar:nth-child(3) {
        transform-origin: bottom; }
    .hamburger.is-active .hamburger-bar:nth-child(1) {
      transform: translateY(12px) rotate(45deg); }
    .hamburger.is-active .hamburger-bar:nth-child(2) {
      transform: scaleX(0); }
    .hamburger.is-active .hamburger-bar:nth-child(3) {
      transform: translateY(-12px) rotate(-45deg); }
  .dropdown-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    position: fixed;
    top: 94px;
    left: 0;
    width: 100%;
    transform: translateY(-100vw);
    transition: transform 0.3s ease; }
    .dropdown-menu ul li {
      margin: 10px 0;
      border-top: 1px solid #e2e2e2;
      width: 100%;
      text-align: center;
      margin: 0;
      padding: 15px 0; }
      .dropdown-menu ul li:last-child {
        border-bottom: 1px solid #e2e2e2; }
      .dropdown-menu ul li a {
        color: #000;
        font-size: 24px;
        text-decoration: none;
        text-transform: uppercase; }
    .dropdown-menu ul.is-active {
      transform: translateY(0); } }

@media screen and (min-width: 769px) {
  .hamburger {
    display: none; }
  .white-space {
    display: none; } }

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