/* =========================
   BASIC RESET & GLOBAL STYLES
   ========================= */

   @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;   /* For WebKit browsers (Chrome, Safari) */
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  
  body {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
  }
  body, .montserrat-font {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  
  /* =========================
     MAIN CONTENT
     ========================= */
     .wrapper {
        width: 100%; background: #F2D6E9 url(background-img1.jpg) no-repeat; background-position: top center; background-size: cover;
        padding: 0px 0px 20px; min-height: 100vh;
        margin: 0 auto;
      }
  header{width: 100%; height: auto; text-align: right;}
   .logo{width: 100%; max-width: 84px; display: inline-block; margin: 25px 30px 20px 20px;}
   .logo img{display: inline-block; width: 100%; object-fit: contain; height: auto;}
   /* =========================
   ANIMATIONS
   ========================= */
@keyframes fadeSlideUp {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .coming-text{margin: 0px auto; display: flex; justify-content: center; text-align: center; opacity: 0;
    animation: fadeSlideUp 1.2s ease-out forwards; animation-delay: 0.1s;}
  h1 {
    margin-bottom: 15px; letter-spacing: 16px;
    color: #000000; font-size: 77px;
    font-weight: 700; line-height: 85px;
  }
  h1 span{font-weight: 600; display: block; font-size: 38px; letter-spacing: 18px; line-height: 62px;}
  .container {
    width: 100%;
    max-width: 1200px; padding-left: 15px; padding-right: 15px;
    margin: 0 auto;
  }
  
  @media (max-width: 1400px) {
    h1{line-height: 78px; font-size: 70px;}
    h1 span{font-size: 34px;}
  }

  @media (max-width: 1200px) {
    h1{line-height: 74px; font-size: 64px;}
    h1 span{font-size: 29px;}
    .logo{max-width: 70px;}
  }

  @media (max-width: 991px) {
    h1{line-height: 52px; font-size: 50px; letter-spacing: 8px;}
    h1 span{font-size: 26px; letter-spacing: 9px;}
    .wrapper{background-position: top right -214px;}
    .logo{margin: 15px 30px 7px 20px;}
  }
  @media (max-width: 767px) {
    h1{line-height: 50px; font-size: 40px;}
    h1 span{font-size: 22px;}
    .wrapper{background-position: top right;}
  }
  @media (max-height: 600px) {
    h1{letter-spacing: 5px; font-size: 36px; line-height: 42px;}
    h1 span{letter-spacing: 6px; font-size: 18px; line-height: 42px;}
    .logo{margin: 15px 30px 5px 20px;}
    .wrapper{background-position: top right;}
  }
  @media (max-width: 575px) {
    header{margin-bottom: 20px;}
    h1{font-size: 34px; line-height: 44px; letter-spacing: 6px;}
    h1 span{line-height: 38px; font-size: 22px; letter-spacing: 6px;}
    .wrapper {background-position: top right -256px;}
    .logo{max-width: 60px;}
  }
  @media (max-width: 420px) {
  h1 {
    font-size: 26px;
    line-height: 30px;
    letter-spacing: 5px;
  }
  h1 span{line-height: 38px; font-size: 16px;}
  .logo{max-width: 50px;}
}