.navbar{
    background-color: #FFF;
    height: 80px;
    margin: 20px;
    border-radius: 16px;
    padding: 0.5rem;
    box-shadow: -5px 0px 20px -5px rgba(0,0,0,0.59);
    -webkit-box-shadow: -5px 0px 20px -5px rgba(0,0,0,0.59);
    -moz-box-shadow: -5px 0px 20px -5px rgba(0,0,0,0.59);
}

.navbar-brand{
    font-weight: 500;
    font-size: 24px;
    color: #29ABE2;
    transition: 0.3s color;

}

.FAQ_button{
    background-color: #29ABE2;
    color: #FFF;
    font-size: 14px;
    padding: 8px 20px;
    border-radius: 50px;
    text-decoration: none;
    transition: 0.3s background-color;

}

.FAQ_button:hover{
    background-color: #0000FF;

}

.navbar-toggler{
    border: none;
    font-size: 3rem;

}

.navbar-toggler:focus, .btn-close:focus{
    box-shadow: none;
    outline: none;
}

.nav-link{
    color: #666777;
    font-weight: 500;
    position: relative;
}

.nav-link:hover{
    color: black;
}

@media(min-width: 991px){

    .nav-link::before{
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0%;
        height: 2px;
        background-color: #29ABE2;
        visibility: hidden;
        transition: 0.3s ease-in-out;
    }

    .nav-link:hover::before, .nav-link.active::before{
        width: 100%;
        visibility: visible;
    }
}


.bodies{
    background: linear-gradient(90deg,#0e3959 0%, #0e3959 30%, #29ABE2 30%, #29ABE2 100%);
}

.ContactUs{
    position: relative;
    width: 100%;
    padding: 40px 100px;
}
.ContactUs .title{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
}

.ContactUs .title h2{
    color: #FFF;
    font-weight: 500;
}

.form{
    grid-area: form;
}

.info{
    grid-area: info;
}

.map{
    grid-area: map;
}

.contact{
    padding: 40px;
    background: #FFF;
    box-shadow:0 5px 35px rgba(0,0,0,0.15 );
}

.box{
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 5fr 4fr;
    grid-template-areas: 
    "form info"
    "form map";
    grid-gap: 20px;
    margin-top: 20px;
}

.contact h3{
    color: #9E005D;
    font-weight: 500;
    font-size: 1.4em;
    margin-bottom: 10px;
}

/* form css*/

.formbox{
    position: relative;
    width: 100%;
}

.formbox .row50{
    display: flex;
    gap: 20px;

}

.inputbox{
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    width: 50%;
}

.formbox .row100 .inputbox{
    width: 100%;
}
.inputbox span{
    color: #9E005D;
    margin-top: 10px;
    margin-bottom: 5px;
    font-weight: 500;
}

.inputbox input{
    padding: 10px;
    font-size: 1.1em;
    outline: none;
    border: 1px solid #9E005D;
    border-radius: 50px;
}

.inputbox .drop{
    padding: 10px;
    font-size: 1.1em;
    outline: none;
    border: 1px solid #9E005D;
    border-radius: 50px;
}

.inputbox textarea{
    padding: 10px;
    font-size: 1.1em;
    outline: none;
    border: 1px solid #9E005D;
    border-radius: 20px;
    resize: none;
    min-height: 220px;
    margin-bottom: 10px;
}

.inputbox input[type="submit"]{
    background: #9E005D;
    color: #FFF;
    border: none;
    font-size: 1.1em;
    max-width: 120px;
    font-weight: 500;
    cursor: pointer;
    padding: 14px 15px;
}
.inputbox::placeholder{
    color: #999;
}

.info{
    background: #fff;
}

.info hr{
    color: #FFF;
}

.info .infobox div{
    display: flex;
    align-items: center;
    margin-bottom: 10px;

}

.info .infobox div span{
    min-width: 40px;
    height: 40px;
    color: #9E005D;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    border-radius: 50%;
    margin-right: 15px;
}

.info .infobox div p{
    color: #9E005D;
    font-size: 1.1em;
}

.info .infobox div a{
    color: #9E005D;
    text-decoration: none;
}

.info .infobox div ul{
    color: #9E005D;
    text-decoration: none;
    font-size: 1.1em;
}

.sci{
    margin-top: 40px;
    display: flex;
}

.sci li{
    list-style: none;
    margin-right: 15px;
}

.sci li a{
    color: #9E005D;
    font-size: 2em;

}

.sci li a:hover{
   color: #29ABE2; 
}

.map{
    padding: 0;
}

.map iframe{
    width: 100%;
    height: 100%;
}

@media (max-width:991px){
    .bodies{
        background: #29ABE2;

    }

    .ContactUs{
        padding: 20px;

    }
    .box{
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: 
        "form"
        "info"
        "map";
    }
    
    .formbox .row50{
        display: flex;
        gap: 0;
        color: #29ABE2;
        flex-direction: column;
    }
    .inputbox{
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
        width: 100%;
    }
    .contact{
        padding: 30px;
    }
    .map{
        padding: 0;
        min-height: 300px;

    }
}


.whatsapp_float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #fff;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
  }
  .whatsapp-icon {
    margin-top: 16px;
  }

  /* for mobile */
  @media screen and (max-width: 767px){
    .whatsapp-icon {
      margin-top: 10px;
    }
    .whatsapp_float {
      width: 40px;
      height: 40px;
      bottom: 20px;
      right: 10px;
      font-size: 22px;
    }
  }