@import url("https://fonts.googleapis.com/css2?family=Biryani:wght@200;300;400;600;700&family=Comfortaa:wght@300;400;500;600;700&family=League+Spartan:wght@100;200;300;400;500;600;700;800;900&family=Lexend:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600&family=Poiret+One&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Biryani:wght@200;300;400;600;700&family=Comfortaa:wght@300;400;500;600;700&family=League+Spartan:wght@100;200;300;400;500;600;700;800;900&family=Lexend:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600&family=Poiret+One&family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend+Tera:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: "eurostile";
    src: url("../fonts/eurostile.TTF");
}
@font-face {
    font-family: "dgb";
    src: url("../fonts/DharmaGothicE-Bold.ttf");
}
@font-face {
    font-family: "agbold";
    src: url("../fonts/AktivGrotesk-Black.otf");
}
@font-face {
    font-family: "dgr";
    src: url("../fonts/DharmaGothicE-Regular.ttf");
}
@font-face {
    font-family: "dgel";
    src: url("../fonts/DharmaGothicE-ExLight.ttf");
}
@font-face {
    font-family: "agl";
    src: url("../fonts/AktivGrotesk-Light.otf");
}
@font-face {
    font-family: "agm";
    src: url("../fonts/AktivGrotesk-Medium.otf");
}
@font-face {
    font-family: "agb";
    src: url("../fonts/AktivGrotesk-BlackItalic.otf");
}
@font-face{
    font-family: "agr";
    src: url("../fonts/AktivGrotesk-Regular.otf");
}
@font-face {
    font-family: "agxb";
    src: url("../fonts/AktivGrotesk-XBoldItalic.otf");
}
body{
  background-color: #ffffff;
    font-family: "Source Sans Pro";
    height: 100vh;
}
html,body{
padding: 0;
margin: 0;
overflow-x: hidden;
}

/* navbar */
.navbar{
    display: flex;
    width: 100%;
    height: 5vw;
    position: fixed;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    transition: all 0.5s ease;
}
.navbar ul{
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 35%;
}
.logo{
    width: 6vw;
    padding-left: 3vw;
}
.navbar ul li a{
    text-decoration: none;
    color: white;
    font-family: "eurostile";
}
#nav-toggler{
    display: none;
}
.logo-mob{
    display: none;
}
.nav-active{
    background-color: #2fa5e1;
}

#loader{
width: 100vw;
height: 100vh;
position: fixed;
z-index: 5000;
background-color: #00000071;
display: none;
}
.ld-r{
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center; 
}
.lder{
  width: 60px;
}

.top{
width: 100%;
height: 20vh;
background-image: url(../images/form-bg.jpg);
background-size: cover;
background-position: 0% 20%;
background-repeat: no-repeat;
}

.top-overlay{
    width: 100%;
height: 20vh;
background-color: #000000d5;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.date-palce{
  color: white;
  font-size: 1.1vw;
  margin: 1vw;
}
.eventlogo{
    width: 10vw;
}


.form-container {
  width: 100%;
  top: 3%;
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  height: 76vh;
  overflow-y: auto;
  overflow-x: hidden;
}


.form-h{
  width: 100%;
  height: 50px;
  background: linear-gradient(to right,#2078a4,#2fa5e1 30%);
color: white;
text-transform: uppercase;
font-family: "Kanit";
font-size: 1.4vw;
display: flex;
align-items: center;
}
.fh{
  margin: 0px 10px;
}
.form-fin-h{
  width: 100%;
  height: 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.fin-h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 1.5vw;
text-align: center;
font-weight: 600;
}
.fin-h2{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}
form{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.input-boxes{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.input-box{
  width: 40%;
  margin:10px 20px;
}
.input-box label{
  font-family: "Poppins";
  font-weight: 300;
  font-size: 12px;
}

.form input{
width: 100%;
height: 30px;
border: 2px solid rgb(239, 239, 239);
border-radius: 5px;
background-color: rgb(247, 246, 246);
}
.form select{
  width: 100%;
height: 30px;
border: 2px solid rgb(239, 239, 239);
border-radius: 5px;
background-color: rgb(247, 246, 246);
}
.phone-input{
  display: flex;
}
.phone-input select{
  width: 30%;
  border: 2px solid rgb(239, 239, 239);
border-radius: 5px;
background-color: rgb(247, 246, 246);
}
.f-l-h{
  width: 85%;
  font-family: "Poppins";
  font-size: 13px;
  margin-top: 5px;
  margin-left: 12px;
}
.intr-in{
  width: 100%;
  margin-left: 100px;
}
.radio-box{
  display: flex;
  margin: 10px;
}
.radio-box input{
  width: 10px;
  height: 10px;
}
.radio-box label{
  font-family: "Poppins";
  font-size: 0.9vw;
}
.checks{
  width: 70%;
}
.check-box{
  display: flex;
  width: 80%;
  margin: 10px 0px;
  margin-left: 7.5%;
}
.check-box input{
  width: 0.8vw;
  height: 0.8vw;
  position: absolute;
  transform: translateX(-1.5vw);
}
.check-box label{
  font-family: "Poppins";
  font-size: 0.9vw;
}
.f-btns{
  width: 100%;
  font-size: 1.04vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.f-btn{
  background: linear-gradient(to right,#2fa5e1,#2fa5e1 30%);
    
  border: none;
  color: white;
  padding: 0.9vw;
  font-family: "Poppins";
}
.results{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
#result{
  color: #000000;
  font-family: "POPPINS";
  font-size: 20px;
  width: 100%;
  text-align: center;
}
#r-button{
  width: 100px;
  height: 35px;
  background-color: #430d63;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  margin: 20px 0px;
  color: white;
  display: none;
}
button:hover{
    cursor: pointer;
    background: linear-gradient(to right,#2580ad,#185a7b 30%);
    
}
footer {
    font-family: "Titillium Web";
    color: rgb(255, 255, 255);
    background-color: #000000;
    height: 4vh;
    text-align: center;
  }
  footer a {
    color: #2fa5e1;
    text-decoration: none;
    font-family: "Lexend Tera";
  }
  

  @media screen and (max-width: 450px) {
    body,html{
        overflow-x: hidden !important;
      }
       .navbar{
        width: 100vw;
        height: 100vh;
        background-color: rgba(104, 104, 104, 0.712);
        backdrop-filter: blur(8px);
        align-items: center;
        justify-content: center;
        left: -100vw;
       }
       .logo{
       position: fixed;
       top: 1vw;
       left: 100vw;
       width: 15vw;
       }
       .navbar ul{
        padding: 0;
        margin: 0;
        flex-direction: column;
        width: 100%;
       }
       .navbar ul li{
        margin: 4vw 0vw;
       }
       #nav-toggler{
        /* display: block; */
        position: fixed;
        font-size: 7vw;
        appearance: none;
        color: white;
        right: 3vw;
        top: 2vw;
        transition: all 0.5s ease;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        display: none;
       }
       #nav-toggler:checked {
        transform:translate(-41vw,65vw);
      }
      #nav-toggler:checked ~ .navbar{
        left: 0;
      }
      #nav-toggler:checked::before {
        content: "\f00d";
        color: rgb(250, 250, 250);
        transition: 0.2s linear 0.2s;
      }
      #nav-toggler:checked::after{
        content: "";
        width: 10vw;
        height: 3px;
        background-color: #55cbf9;
        display: block;
        margin-top: 1vw;
      }
    .eventlogo{
      width: 30vw;
    }
    .date-palce {
      color: white;
      font-size: 3vw;
      margin: 2vw;
  }
    .top-overlay{
      height: 15vh;
    }
    .top{
      height: 15vh;
    }
    .form-container{
      height: auto;
      padding-bottom: 15vw;
    }
    .input-box {
      width: 40%;
      margin: 5px 20px;
  }
  .form-h {
    font-size: 5vw;
  }
  footer{
    height: fit-content;
  }
    .celeb-logo {
      display: none;
    }
    .celeb-logo-mob {
      width: 200px;
      position: fixed;
      top: 0;
      z-index: 10000;
      display: block;
    }
    .date-place {
      margin: 50px 0px;
  }

.input-box{
  width: 84%;
}
.fin-h1{
  font-size: 5.5vw;
}
.checks {
  width: 95%;
  margin-left: 5%;
}
.check-box label {
  font-size: 2.9vw;
}
.check-box input {
  width: 3.1vw;
  height: 3.1vw;
  position: relative;
}
.recom{
  width: 90%;
}
.f-line{
  font-size: 15px;
}
#result{
  font-size: 14px;
}
  }
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    
  
    body,html{
        overflow-x: hidden !important;
      }
       .navbar{
        width: 100vw;
        height: 100vh;
        background-color: rgba(104, 104, 104, 0.712);
        backdrop-filter: blur(8px);
        align-items: center;
        justify-content: center;
        left: -100vw;
       }
       .logo{
        position: fixed;
        left: 100vw;
        top: 2vw;
        width: 10vw;
       }
       .navbar ul{
        padding: 0;
        margin: 0;
        flex-direction: column;
        width: 100%;
       }
       .navbar ul li{
        margin: 4vw 0vw;
       }
       .navbar ul li a{
        font-size: 3vw;
       }
       #nav-toggler{
        /* display: block; */
        position: fixed;
        font-size: 7vw;
        appearance: none;
        color: white;
        right: 3vw;
        top: 2vw;
        transition: all 0.5s ease;
        z-index: 1000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        display: none;
       }
       #nav-toggler:checked {
        transform:translate(-41vw,31vw);
      }
      #nav-toggler:checked ~ .navbar{
        left: 0;
      }
    
      #nav-toggler:checked::before {
        content: "\f00d";
        color: rgb(250, 250, 250);
        transition: 0.2s linear 0.2s;
      }
      #nav-toggler:checked::after{
        content: "";
        width: 10vw;
        height: 3px;
        background-color: #55cbf9;
        /* display: block; */
        margin-top: 1vw;
      }
    .eventlogo{
      width: 35vw;
    }
    .date-palce {
      font-size: 2.9vw;
      margin: 2vw;
  }
  .form-h{
    font-size: 2.5vw;
  }
    .celeb-logo {
      display: none;
    }
    .celeb-logo-mob {
      width: 200px;
      position: fixed;
      top: 0;
      z-index: 10000;
      display: block;
    }
    form{
      width: 95%;
    }
    .fin-h1{
      font-size: 2.5vw;
    }
    .chk label {
      width: 45%;
  }
  .checks{
    width: 95%;
  }
  .check-box label {
    font-size: 1.7vw;
}
  .chk input{
    width: 5%;
  }
  .budget label {
    width: 26%;
}
.budget input{
  width: 5%;
}
.check-box input {
    width: 2vw;
    height: 2vw;
    margin-left: -1vw;
  }
  }

  @media screen and (min-width: 1200px) and (max-width: 1400px) {
    
  }