/* .coming-soon-section{width: 100%; height:50px;} */
/* 13110fc9 */
/* 372d1f */

*{margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif;}

.highlight{color: orange;}
.bg-color{background-color: #ededed42;}
.main-page.container-fluid{padding: 0 !important; 
    margin-top: -9rem !important;
}
.navigation-section.container-fluid{padding: 0 !important;}
.coming-section{
    background: linear-gradient(rgba(0,0,0,0.5), #372d1fd6), url(../images/office-banner.jpg);
    background-size: cover;
    height: 100vh;
    /* padding: 20px 6%; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.coming-banner-section{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
}
.coming-banner-section h3{
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
}
.coming-banner-section h1{
    color: #fff;
    font-size: 52px;
    /* font-weight: 400; */
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: -10px;
}
.coming-banner-section p{
    font-size: 16px;
    padding: 10px 30%;
}
.time-couter{
    display: flex;
    column-gap: 40px;
    align-items: center;
    margin: 10px 0;
}
.time-couter .counter{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.time-couter .counter .number,
.time-couter .counter .text{
    font-weight: 500;
}
.counter .number{
    font-size: 40px;
}
.counter .text{
    font-size: 12px;
    text-transform: capitalize;
    margin-top: -10px;
}
.email-signup{
    margin-top: 20px;
    background-color: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
}
.email-signup input{
    flex: 1;
    width: 200px;
    border: 0;
    outline: 0;
    margin-left: 10px;
}
.email-signup button{
    display: inline-flex;
    background-color: #45341b;
    color: #fff;
    border: 0;
    outline: 0;
    font-size: 16px;
    padding: 10px 6px;
    cursor: pointer;
    transition: all 0.5s;
}
.email-signup button:hover{
    background-color: #2c2110;
}
@media (max-width: 1080px){
    .coming-banner-section p{
        padding: 10px 15%;
    }
}

@media (max-width: 750px){
    .coming-banner-section p{
        padding: 10px 8%;
    }
}
@media (max-width: 480px){
    .coming-banner-section h1{
        font-size: 40px;
    }
    .coming-banner-section p{
        padding: 10px 3%;
        font-size: 14px;
    }
    .counter .number{
        font-size: 34px;
    } 
    .counter .text{
        font-size: 10px;
    } 
}

/* navigation css */
ul.links{display: flex; gap: 2rem; display: none;}
ul.links li{ list-style: none;}
ul.links li a{ text-decoration: none; color: #fff; font-size: 1rem; font-weight: 500; padding: 10px 15px; transition: all 0.5s;}
ul.links li a:hover{ color: orange;}

header{position: relative; padding: 0 2rem;
     /* background: rgba(0,0,0,0.5); */
    }
header .navbar{width: 100%; height: auto;  }
.logo .logo-img{width: 100%; height: 120px; object-fit: cover;}
.navbar .toggle-btn{color: #fff; font-size: 1.5rem; cursor: pointer; display: none;}
.action-btn{background-color: orange; color: #fff;padding: 0.5rem 1rem; border: 0; outline: 0; border-radius: 20px; font-size: .8rem; font-weight: bold; cursor: pointer; text-decoration: none; transition: scale .2 ease-in-out; display: none;}
.action-btn:hover{scale: 1.05; color: #fff;}
.action-btn:active{scale: 0.95; color: #fff;}
.dropdownMenu{position: absolute; right: 2rem; top: 60px; width: 300px; height: 0px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px); border-radius: 10px; overflow: hidden; display: none; transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.dropdownMenu.open{height: auto;}
.dropdownMenu li{list-style: none; padding: .7rem; display: flex; justify-content: center; align-items: center;}
.dropdownMenu li a{text-decoration: none; color: #fff; font-size: 1rem; font-weight: 500; }
.dropdownMenu li a.action-btn{width: 100%; display: flex; justify-content: center; align-items: center;}

@media (max-width: 992px) {
    .navbar .links, .action-btn{display: none;}    
    /* .navbar .toggle-btn{display: block;} */
    .dropdownMenu{display: block;}
    .logo .logo-img{width: 100%; height: 70px; object-fit: cover;}
}
@media (max-width: 576px){
    .dropdownMenu{left: 2rem; width: unset;}
}




/* contact page css */

.contact-section{background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.5)), url(../images/contact-banner.jpeg);
    background-size: cover;
    height: 80vh;
    /* padding: 20px 6%; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;}

    .padding-section{padding: 4rem 0;}
    .connect-section h3{font-size: 16px; color: orange; position: relative; display: inline-block;}
    .connect-section h3::after{content: ""; position: absolute; left: -25px; bottom: 7px; width: 20px; height: 1.5px; background-color: orange;}
    .connect-section h3::before{content: ""; position: absolute; right: -25px; bottom: 7px; width: 20px; height: 1.5px; background-color: orange;}
    .connect-section h4{font-size: 2rem; color: #0f172b; font-weight: 600; }
    .connect-section p{color: #475569; font-size: 16px; margin-top: 10px;}

    .connect-options{display: flex; gap: 2rem; margin-top: 30px;}
    .connect-options .option{flex: 1;  padding: 20px; border-radius: 10px; display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
    /* .connect-options .option:hover{box-shadow: inset 0 4px 6px 0px rgba(0, 0, 0, 0.1);} */
    .connect-options .option:hover{box-shadow: 0 -5px 0px orange; transform: translateY(-5px);}
    .connect-options .option div{background: #0f172b14;
    width: 40px;
    height: 40px;
    /* display: inline-block; */
    text-align: center;
    padding: .5rem 0;
    border-radius: 5px;}
    .connect-options .option div i{color: orange;}
    .connect-options .option h5{color: #0f172b; font-size: 1.2rem; margin-top: 1rem;}
    .connect-options .option p{color: #475569; font-size: 14px; margin-top: 10px;}
    .connect-options .option a{color: orange; font-size: 14px; margin-top: 10px; text-decoration: none;}

    .contact-details{padding-right: 10rem;}
    .contact-details h3{font-size: 16px; color: orange; position: relative; display: inline-block; padding-left: 1.5rem;}
    .contact-details h3::after{content: ""; position: absolute; left: 0px; bottom: 7px; width: 20px; height: 1.5px; background-color: orange;}
    .contact-details h3::before{content: ""; position: absolute; right: -25px; bottom: 7px; width: 20px; height: 1.5px; background-color: orange;}
    .contact-details h4{font-size: 2rem; color: #0f172b; font-weight: 500; }
    .contact-details h4 span{color: orange;}
    .contact-details p{color: #475569; font-size: 14px; margin: 10px 0 1.6rem;}

    .contact-options .options-details{display: flex; gap: 2rem; align-items: center; margin: 1rem 0;}
    .contact-options .options-details .icons{background: #0f172b14; padding: .5rem .8rem; border-radius: 10px; color: orange;}
    .contact-options .options-details .details p{color: #475569; font-size: 14px; margin-top: 0px;
    margin-bottom: 0px;}

 .contact-form{box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1); padding: 3rem 2rem; border-radius: 20px;}
    .contact-form h4{font-size: 2rem; color: #0f172b; font-weight: 500; }
    .contact-form p{color: #475569; font-size: 14px; margin: 10px 0 1.6rem;}
    .contact-form .form-div{display: flex; gap: 1rem; margin-bottom: 1rem;}
    .input-group input{padding: .5rem; border-radius: 5px; border: 1px solid #cbd5e1; outline: 0; width: 100%;}
    .input-group input:focus{border-color: orange;}
    .input-group input::placeholder{color: #94a3b8b6; font-size: 14px;}
    .input-group textarea{padding: .5rem; border-radius: 5px; border: 1px solid #cbd5e1; outline: 0; width: 100%;}
    .input-group textarea:focus{border-color: orange;}
    .input-group textarea::placeholder{color: #94a3b8b6; font-size: 14px;}
    .contact-form button{background-color: orange; color: #fff; border: 0; outline: 0; padding: .5rem 1rem; border-radius: 5px; font-size: 14px; cursor: pointer; transition: all 0.5s; margin-top: 1rem; width: 100%;}
    .contact-form button:hover{background-color: #5c3c0d;}