*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
html,body{
    height:100%;
    width:100%;
}
body{
    
     background:#ffffff;
}
.contact-image{
    width: 100%;
    height: 70vh;
    background-color: #ffffff;
}
.contact-image img{
    max-width: 100%;
    margin-top: 80px;
    
}

.contactus-div{
position:relative;
width:100%;
padding:40px 100px;
margin-top: 70px
}
.contactus-div .title-contact{
    
    display:flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    font-family: "Open Sans", verdana, Helvetica, sans-serif;
}

.contactus-div .title-contact h2{
    color:#fff;
    font-weight: 500;
}


.form{
    grid-area: form;
}

.info{
    grid-area: info;
}

.map{
    grid-area: map;
}

.contact{
    padding:40px;
    background:rgb(23,40,82) ;
    box-shadow: 0 5px 35px rgba(0,0,0,0.15);
    border-radius: 2px;
}
.contact-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:#fff;
    font-family: "Open Sans", verdana, Helvetica, sans-serif;
    font-weight: 500;
    font-size: 1.4em;
    margin-bottom: 10px;

}

/* form box */
.formBox{
    position:relative;
    width:100%;
}
.formBox .row50 {
    display:flex;
    gap:20px;
}

 .inputBox{
    display:flex;
    flex-direction: column;
    margin-bottom: 10px;
    width:50%;
    border-radius: 2px;

}

.formBox .row100 .inputBox{
    width:100%;
}
.inputBox span{
    color:white;
    margin-top:10px;
    margin-bottom:5px;
    font-family: "Open Sans", verdana, Helvetica, sans-serif;
    font-weight: 500;
}
.inputBox input{
    padding:10px;
    font-family: "Open Sans", verdana, Helvetica, sans-serif;
    font-size: 1.1em;
    outline: none;
    border:1px solid #05062f;
    
    border-radius: 2px;
}
.inputBox textarea{
    padding:10px;
    font-family: "Open Sans", verdana, Helvetica, sans-serif;
    font-size: 1.1em;
    outline: none;
    border:1px solid #05062f;
    min-height: 220px;
    margin-bottom: 10px;
    border-radius: 2px;
    
}
.inputBox input[type="submit"]{
    background: white;

    color:rgb(23,40,82); 
    border:none;
    font-family: "Open Sans", verdana, Helvetica, sans-serif;
    font-size: 1.3em;
    max-width:120px;
    font-weight: 500;
    cursor: pointer;
    padding:6px 15px;
    border-radius: 2px;

}
.inputBox ::placeholder{
    color:rgb(23,40,82)
}

/* info */
/*  */
.info{

background: rgb(23,40,82);

}
.info h3{
    color:#fff;
}
.info .infoBox div{
display:flex;
align-items: center;
margin-bottom: 10px;

}
.info .infoBox div span{
    min-width:40px;
    height:40px;
    color:#fff;
    background:#18b7ff;
    display:flex;
    justify-content: center;
    align-items: center;
    font-family: "Open Sans", verdana, Helvetica, sans-serif;
    font-size:1.5em ;
    border-radius: 50%;
    margin-right: 15px;
    

}
.info .infoBox div p{
    color:#fff;
    font-family: "Open Sans", verdana, Helvetica, sans-serif;
    font-size: 1rem;
}
.info .infoBox div a{
    color:#fff;

    text-decoration: none;
    font-family: "Open Sans", verdana, Helvetica, sans-serif;
    font-size: 1rem;

}
.sci{
    margin-top:40px;
    display:flex;
    justify-content: center;
    
}
.sci li{
    list-style: none;
    margin-right:15px;
}
.sci li a{
    color:#fff;
    font-family: "Open Sans", verdana, Helvetica, sans-serif;
    font-size: 2em;
  


}
.sci li a:hover{
    color:#fff;

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

/* Responsive Design */
@media (max-width:991px){
    body{
        background: rgb(23,40,82);

    }
    .formBox .row50 .select-box{
        width:100%;
    }
 .selected-option {
    /* overflow: hidden; */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top:9%;
}
.formBox .row50 .select-box .selected-option .icon_code::after{
    position: absolute;
    content: "";
    /* right: 0.1rem; */
    right:34.3rem;
    /* align-items: center; */
    top: 50.5%;
    margin-left:18px;
    transform: translateY(-50%) rotate(45deg);
    width: .7rem;
    height: .7rem;
    border-right: .10rem solid rgb(23,40,82);
    border-bottom: .10rem solid rgb(23,40,82);
    transition: .2s;
    display: none;
    
}
.formBox .row50 .selected-option .icon_code{
    font-size: 20px;
    padding:11.5px; 
}
/* .selected-option div .code{
    font-size: 18px;
} */
 /* #code{
    margin-right: 2rem;/
    margin-left: 0.5rem;
}  */
.formBox .row50 .options input::placeholder{
    color:#fff;
    width:100%;
}

.formBox .row50 .selected-option .icon_code.active::after{
    transform: translateY(-50%) rotate(225deg);
}

.formBox .row50 .select-box .options {
    position: absolute;
    /* top: 4rem; */
   width: 100%;
    background-color: #fff;
    border-radius: .5rem;
   display: none;
}

.formBox .row50 .select-box .options.active {
    display: block;
}

.formBox .row50 .select-box .options::before {
    position: absolute;
    content: "";
    left: 1rem;
    top: -1.2rem;
     width: 0;
    height: 0;
    border: .6rem solid transparent;
    border-bottom-color: #eee;

}

.formBox .row50 input.search-box {
    font-size: 16px;
    width:100%;
    background-color: rgb(23,40,82);
    /* color: #fff; */
    border-radius: .5rem .5rem 0 0;
    padding: 1.0rem 1rem;
}

.formBox .row50 .select-box ol {
    list-style: none;
    max-height: 20rem;
    overflow: overlay;
}

.formBox .row50 .select-box ol::-webkit-scrollbar {
    width: 0.6rem;

}

.formBox .row50 .select-box ol::-webkit-scrollbar-thumb {
    width: 0.4rem;
    height: 3rem;
    background-color: #ccc;
    border-radius: .4rem;
}

.formBox .row50 .select-box ol li {
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    /* font-size:1.5rem; */
    font-size: 16px;
}

.formBox .row50 .select-box ol li.hide {
    display: none;
}

.formBox .row50 .select-box ol li:not(:last-child) {
    border-bottom: .1rem solid #eee;
}

.formBox .row50 .select-box ol li:hover {
    background-color: lightcyan;
}

.formBox .row50 .select-box ol li .country-name {
    margin-left: .5rem;
}

  
    .contactus-div{
        padding:20px;
    }

    .contact-box{
        position:relative;
        display:grid;
        grid-template-columns:  1fr;
        grid-template-rows: auto;
        grid-template-areas: 
        "form "
        "info"
        "map";
        grid-gap:20px;
    }
 
    .formBox .row50{
        display:flex;
        gap:0;
        flex-direction:column;
    }
    .inputBox{
      width:100%;
    }
    .contact{
        padding:30px;
        width: 337px
    }
    .map{
        min-height:300px;
        padding:0px;
    }
}


@media (max-width:768px){
 
    .formBox .row50 .select-box{
        width:100%;
    }

    .formBox .row50 .select-box{
        width:100%;
    }
 
 
 
  

.selected-option {
    /* overflow: hidden; */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top:9%;
}



.formBox .row50 .select-box .selected-option .icon_code::after{
    position: absolute;
    content: "";
    /* right: 0.1rem; */
    right:34.3rem;
    /* align-items: center; */
    top: 50.5%;
    margin-left:18px;
    transform: translateY(-50%) rotate(45deg);
    width: .7rem;
    height: .7rem;
    border-right: .10rem solid #eee;
    border-bottom: .10rem solid #eee;
    transition: .2s;
    display: none;
}
.formBox .row50 .selected-option .icon_code{
    font-size: 20px;
    padding:15px 11.5px; 
}

.formBox .row50 .options input::placeholder{
    color:#fff;
    width:100%;
}

.formBox .row50 .selected-option .icon_code.active::after{
    transform: translateY(-50%) rotate(225deg);
}

.formBox .row50 .select-box .options {
    position: absolute;
    /* top: 4rem; */
   width: 100%;
    background-color: #fff;
    border-radius: .5rem;
   display: none;
}

.formBox .row50 .select-box .options.active {
    display: block;
}

.formBox .row50 .select-box .options::before {
    position: absolute;
    content: "";
    left: 1rem;
    top: -1.2rem;
     width: 0;
    height: 0;
    border: .6rem solid transparent;
    /* border-bottom-color: var(--primary); */
    border-bottom-color:#eee; 
}

.formBox .row50 input.search-box {
    font-size: 16px;
    width:100%;
    background-color: rgb(23,40,82);
    /* color: #fff; */
    border-radius: .5rem .5rem 0 0;
    padding: 1.0rem 1rem;
}

.formBox .row50 .select-box ol {
    list-style: none;
    max-height: 20rem;
    overflow: overlay;
}

.formBox .row50 .select-box ol::-webkit-scrollbar {
    width: 0.6rem;

}

.formBox .row50 .select-box ol::-webkit-scrollbar-thumb {
    width: 0.4rem;
    height: 3rem;
    background-color: #ccc;
    border-radius: .4rem;
}

.formBox .row50 .select-box ol li {
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    /* font-size:1.5rem; */
    font-size: 16px;
}

.formBox .row50 .select-box ol li.hide {
    display: none;
}

.formBox .row50 .select-box ol li:not(:last-child) {
    border-bottom: .1rem solid #eee;
}

.formBox .row50 .select-box ol li:hover {
    background-color: lightcyan;
}

.formBox .row50 .select-box ol li .country-name {
    margin-left: .5rem;
}
 

    .contactus-div{
        background:white;
    }
    .contact-image img{
        margin-top: 80px;
       max-width: 100%;
      

    }
    .contact-image{
        height: 34vh;
    }

}





/* contact numbetr */
:root {
    --primary:rgb(23,40,82);
    --secondary: #fd0;
}	



.select-box {
    margin-bottom: 10px;
    width:50%;
    border-radius: 2px;
    /* position: relative;
    width:50%; */ 
}

.selected-option{
    width:100%;
  
}

.select-box input:focus {
    border: .1rem solid var(--primary);
}
 .selected-option .icon_code{
    width:30%;
    font-family: "Open Sans", verdana, Helvetica, sans-serif;
    font-size: 1.1em;
    outline: none;
    border:1px solid #05062f;
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
    display:flex;
    background-color: #eee;
    padding:15px 11.5px; 
    margin:0;
}


.select-box .selected-option input{
    padding:10px;
    font-family: "Open Sans", verdana, Helvetica, sans-serif;
    font-size: 1.1em;
    outline: none;
    font-weight: 500;
    width:90%;
    border:1px solid #05062f;
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
 

}
.selected-option {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top:10%;
}



.selected-option .icon_code::after{
    position: absolute;
    
    content: "";
    /* right: 0.1rem; */
    right:19rem;
    align-items: center;
    top: 29.5%;
    margin-left:15px;
    transform: translateY(-50%) rotate(45deg);
    width: .5rem;
    height: .5rem;
    border-right: .10rem solid rgb(23,40,82);
    border-bottom: .10rem solid rgb(23,40,82);
    transition: .2s;
    display: none;
}
.selected-option .icon_code{
    font-size: 20px;
}
/* .selected-option div .code{
    font-size: 18px;
} */
 /* #code{
    margin-right: 2rem;/
    margin-left: 0.5rem;
}  */
.options input::placeholder{
    color:#fff;
    width:100%;
}

.selected-option .icon_code.active::after{
    transform: translateY(-50%) rotate(225deg);
}

.select-box .options {
    position: absolute;
    /* top: 4rem; */
   width: 50%;
    background-color: #fff;
    border-radius: .5rem;
   display: none;
}

.select-box .options.active {
    display: block;
}

.select-box .options::before {
    position: absolute;
    content: "";
    left: 1rem;
    top: -1.2rem;
     width: 0;
    height: 0;
    border: .6rem solid transparent;
    /* border-bottom-color: var(--primary); */
    border-bottom-color: #eee;
}

input.search-box {
    width:100%;
    background-color: rgb(23,40,82);
    /* color: #fff; */
    border-radius: .5rem .5rem 0 0;
    padding: 1.0rem 1rem;
}

.select-box ol {
    list-style: none;
    max-height: 20rem;
    overflow: overlay;
}

.select-box ol::-webkit-scrollbar {
    width: 0.6rem;
}

.select-box ol::-webkit-scrollbar-thumb {
    width: 0.4rem;
    height: 3rem;
    background-color: #ccc;
    border-radius: .4rem;
}

.select-box ol li {
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    /* font-size:1.5rem; */
    font-size: 16px;
}

.select-box ol li.hide {
    display: none;
}

.select-box ol li:not(:last-child) {
    border-bottom: .1rem solid #eee;
}

.select-box ol li:hover {
    background-color: lightcyan;
}

.select-box ol li .country-name {
    margin-left: .4rem;
}


@media screen and (max-width:1400px){
    .selected-option{
        margin-top: 13%;
    }
}


.form__error {
    /* position: absolute;
    left: 1.5rem;
    bottom: -1.5rem; */
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: .25rem;
    
    display: none;
    pointer-events: none;
    transition: opacity .4s;

  }
 
  
  .form-error i {
    font-size: 1rem;
    color: red;
    
  }
 
  
   .form-error span {
    font-family: "Open Sans", verdana, Helvetica, sans-serif;
    font-style: normal;
    font-size: 1rem;
    font-weight: 500;
    color: red;
  }
  .error{
    font-family: "Open Sans", verdana, Helvetica, sans-serif;
    font-style: normal;
    font-size: 1rem;
    font-weight: 500;
    color: red;
    
  }