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

body{
    font-family: "Roboto", sans-serif!important;
    overflow-x: hidden!important; 
}
.overlay-desk{ 
    background:#fff!important;
    /* max-height: 820px !important;  */
    min-height:100vh!important;
    position: relative;
    overflow: hidden!important;
}

.bg-blue-desktop{
    background:#fff url("../images/bg-blue.png")no-repeat;
    height:355px!important;
    background-size: cover!important;
    position: relative;    
}
.dk-row{
  padding-top:42px!important;
}
.logo{
    width: 117.8px;
    object-fit: contain!important;
    height: 70px!important;
    margin-left: -5%!important;
}

.modal{
    background-color: rgba(0, 0, 0, 0.5) !important; 
    z-index: 1990 !important;
}

.modal-dialog {
  max-width: 700px!important; 
  width: 100%!important;       
  margin: 0;        
}
 .modal-backdrop{
  background-color: rgba(0, 0, 0, 0.9)!important;
  z-index: 3!important;
}
 .modal-backdrop.show{
  opacity: 1!important;
}
.waitlistmodal .modal-dialog .modal-content{
  background:#fff!important;
  text-align:center!important;
  color: #222!important;
  /*height: 60vh!important;*/
  overflow: hidden!important;
  align-items: center!important;
}
.waitlistmodal .modal-dialog {
margin: 20px auto!important;
} 
.waitlistmodal .modal-dialog .modal-body{
  padding:15px 50px!important;
  text-align: left!important;
}
.modal-title{
  font-size:45px!important;
}
.modal-body p{
  font-size:18px!important;
}
.btn-pop a{
  background: #282561 !important;
  padding: 15px 20px !important;
  border-radius: 30px !important;
  color: #fff !important;
  text-decoration: none;
}
.btn-close{
  position: absolute;
  right: 10px;
  z-index: 3;
  top: 10px !important;
}
.modal-content{
  border-radius: 18px!important;
}
.glass-box{
    width: 941px!important;
    /*height: 420px!important;*/
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    z-index:2;
    padding: 35px;  
    margin:0 auto!important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* backdrop-filter: blur(3px); */
    object-fit: contain;  
    border-radius: 24px;  
   /* background-color: rgba(125, 179, 226, 0.1); */
    margin-top:1%!important;    

    background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(4px);
	box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.3),
    inset -2px -2px 2px 1px rgba(255, 255, 255, 0.3), 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);;
    
}

.quralyst {
    height: 18px;
    align-self: stretch;
    flex-grow: 0;
    font-size: 16px!important;
    font-weight: 900;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.13;
    letter-spacing: 3.84px;
    text-align: center;
    color: #7db3e2;
  }
  .heading-top{
    width: 796px;
    /* height: 156px;   */
    flex-grow: 0;    
    font-size: 35px!important;  
    font-weight: 600;  
    font-stretch: normal;  
    font-style: normal;  
    line-height: 1.2;  
    letter-spacing: normal;  
    text-align: center;  
    color: #fff;
    margin-bottom: 0px;
  }
  .description-top{
    width: 834.4px;
    /* height: 61px;     */
    font-size: 15px;  
    font-weight: normal;  
    font-stretch: normal;  
    font-style: normal;  
    line-height: 1.5;  
    letter-spacing: normal;  
    text-align: center;  
    color: #fff;
  }
  .form-desktop{
    width: 804.9px;
    height: 63px;  
    border-radius: 60px;  
    box-shadow: 0 8px 25px 0 rgba(13, 10, 44, 0.06);  
    border: solid 1px #eff0f6;  
    background-color: #fff;
  }
  input::placeholder{
    width: 408.5px;
    height: 16.6px;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.11;
    letter-spacing: normal;
    text-align: left;
    color: #6f6c90;
  }
  .form-control{
    border:none!important;
    margin-right: 10px!important;
    padding: 10px 14px; 
    line-height: 1.5;
    height: auto;
  }
  .form-control:focus{
    box-shadow: none!important;
  }
  .form-desktop .btn{
    width: 193px;
    color: #fff!important;
    height: 36.5px;  
    display: flex;  
    flex-direction: row;  
    justify-content: center;  
    align-items: center;  
    gap: 8px;  
    padding: 16px 32px!important;  
    border-radius: 56px!important;  
    box-shadow: 0 3px 12px 0 rgba(74, 58, 255, 0.18)!Important;  
    background-color: #282561!important;
  }
  .fa-check-circle{
   font-size:24px!important;
  color: #282561;
  }
  .para-check{
    width: 702.8px;
  height: 38px;
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.19;
  letter-spacing: normal;
  text-align: left;
  color: #6f6c90;
  }
  .image1 img{
    position: absolute;
    content: '';
    top: 40%;
    left: -26%;
    width: 65%;
    height: auto;
    overflow: hidden!important;
    object-fit: contain;
    transform: rotate(-361.3deg);
    z-index:1;
  }
  .image2 img{
    position: absolute;
    content: '';
    bottom: -60%;
    left: 42%;
    right: 0;
    margin: 0 auto;
    width: 40%;
    flex-grow: 0;
    object-fit: contain;
    z-index: 1;
  }
  .image3 img{
    position: absolute;
    content: '';
    top: 0;
    right: -41%;
    margin: 0 auto;
    width: 66%;
    height: 859px;
    flex-grow: 0;
    object-fit: contain;
    transform: rotate(7.12deg);
    z-index: 1;
  }

  @media(max-width:768px){
      
      body
      {
          overflow-x: hidden!important;
      }
    .logo{
        width: 36%!important;
        height: unset!important;
        object-fit: contain;
    }
    .bg-blue-desktop{
        height:566px!important;
        width:100%!important;
    }
    .dk-row{
      padding-top:35px!important;
    }
    .modal-title{
      font-size:28px!important;
    }
    .modal-body p{
      font-size:18px!important;
    }
    .glass-box{
        width: 320px!important;
        /*height: unset!important;*/
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 25px;
        margin-top:43px!important;
        padding:46px 16px!important;
        border-radius: 24px;
        background-color: rgba(125, 179, 226, 0.1);
    }
    .quralyst{
        height: 18px;
        align-self: stretch;
        flex-grow: 0;
        font-size: 16px;
        font-weight: 900;  
        font-stretch: normal;
        font-style: normal;
        line-height: 1.13;  
        letter-spacing: 3.84px;
        text-align: center;
        color: #7db3e2;
    }   
    .heading-top{
        width: 258px;
        height: 135px;      
        flex-grow: 0; 
        font-size: 28px!important;      
        font-weight: 600;      
        font-stretch: normal;      
        font-style: normal;      
        line-height: 0.96;      
        letter-spacing: normal;      
        text-align: center;      
        color: #fff;
    }
    .description-top{
        height: unset !important;
        flex-grow: 1;
        font-size: 18px!important;  
        line-height: 1.11;      
        padding:0 100%!important;     
        text-align: center;      
        color: #fff;
    }
    .form-desktop{
        height: 63px;     
        flex-grow: 0;      
        display: flex!important;      
        flex-direction: row!important;      
        justify-content: flex-center;      
        align-items: center!important;      
        gap: 135px;      
        width:100%!important;
        padding: 12px 15px;      
        border-radius: 60px;      
        box-shadow: 0 8px 25px 0 rgba(13, 10, 44, 0.06);      
        border: solid 1px #eff0f6;      
        background-color: #fff;
    }
    .input-group{
        padding:0 !important;
        display: flex!important;
        flex-wrap: nowrap!important;
    }
    .form-desktop .btn{
        width: 120px!important;
        color: #fff !important;
        /* height: 36.5px; */
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 8px;
        padding: 16px 5px !important;
        border-radius: 56px !important;
        box-shadow: 0 3px 12px 0 rgba(74, 58, 255, 0.18)!Important;
        background-color: #282561 !important;
        font-size: 14px !important;
    }
    input::placeholder{
        width: 341px;
        height: 16.6px;              
        flex-grow: 0;      
        font-size: 14px!important;
        line-height: 1.43;  
        text-align: left;      
        color: #6f6c90;
      }
      .form-control{
        padding:0!important;
      }
      .para-check{
        width: 224px;
        height: 76px;      
        flex-grow: 0; 
        font-size: 16px;   
        line-height: 1.19;      
        text-align: left;      
        color: #6f6c90;
      }
      .overlay-desk{ 
        background:#fff!important;
        max-height: 940px !important; 
        height:940px!important;
        position: relative;
        overflow: hidden!important;
    }
    .image3 img{        
        top: -22%!important;
        right: -54%;    
        width: 95%!important;       
        transform: rotate(26.12deg)!important;
    }
    .image1 img{
        top:unset!important;
        bottom: -6%!important;
        left: -55%!important;
        width: 100%!important;
    }
    .image2 img{
        bottom: -18%!important;
        left: 0!important;
        right: -110%!important;
        width: 100%!important;
    }
    .modal-dialog{
      max-width:100%!important;
      width:100%!important;
      height:100vh!important;
    }
    .waitlistmodal .modal-dialog .modal-body{
      text-align:center!important;
    }
    .waitlistmodal .modal-dialog .modal-content{
      height:100vh!important;
    }
    .btn-pop{
      margin-top:20px!important;
    }
  }