@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.container{
    width:98%;
    max-width:1920px;
    margin:auto;
}

/* =======================
   TOP BAR
======================= */

.top-bar{
    background:#111;
    color:#fff;
}

.top-bar-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.top-left{
font-family: 'Poppins', sans-serif;
    padding: 8px 0;
    font-size: 15px;
}

.top-left span{
    color:#ed3237;
    font-weight:700;
}

.top-right{
    display:flex;
    font-family: 'Poppins', sans-serif;
    padding: 8px 0;
    font-size: 15px;
}

.top-box{
font-family:'Poppins',sans-serif;
    background:#ed3237;
    color:#fff;
    text-decoration:none;
    padding:15px 25px;
    display:flex;
    align-items:center;
    gap:10px;
    border-left:1px solid rgba(255,255,255,0.2);
    font-size:15px;
    font-weight:600;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Poppins',sans-serif;
}

.container{
max-width:1600px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
}

/*======================
Top Bar
=======================*/

.top-bar{
background:#1f1f1f;
color:#fff;
font-size:14px;
}

.top-left,
.top-right{
display:flex;
align-items:center;
gap:25px;
}

.top-left a{
color:#fff;
text-decoration:none;
}

.top-left i,
.top-right i{
color:#e30613;
margin-right:8px;
}


/*======================
Main Header
=======================*/

.main-header{
    background: #fff;
    padding: 12px 0;
}

.logo img{
height:70px;
}

.header-info{
display:flex;
gap:45px;
}

.info-box{
display:flex;
align-items:center;
gap:12px;
}

.info-box i{
font-size:22px;
color:#e30613;
}

.info-box h5{
font-size: 16px;
    font-weight: 400;
    margin-bottom: 4px;
}

.info-box span{
font-size:14px;
color:#666;
}

.header-icons{
display:flex;
gap:22px;
font-size:20px;
cursor:pointer;
}


/*======================
Navigation
=======================*/

.nav-wrapper{
margin-top:-8px;
position:relative;
z-index:5;
overflow: hidden;
}

.nav-wrapper .container{

background:#d60018;

padding:0;

height:45px;

}

nav {
    flex: 1;
    display: flex;
}

nav ul {
    display: flex;
    list-style: none;
    width: 100%;
}

nav li{
position:relative;
}

nav a{
display:block;
padding:20px 22px;
color:#fff;
text-decoration:none;
font-weight:600;
text-transform:uppercase;
font-size:14px;
transition:.3s;
    letter-spacing: 1px;
}


.consult-btn{

position:relative;

background:#222;

color:#fff;

width:240px;

height:60px;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

text-decoration:none;

text-transform:uppercase;
    letter-spacing: 1px;


    display: block;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    transition: .3s;
    letter-spacing: 1px;
    text-align: center;
    padding: 20px;


}

.consult-btn:before{

    content: "";
    position: absolute;
    left: -40px;
    top: 0;
    border-top: 60px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 40px solid #222;

}

@media(max-width:991px){

    
nav {
    display: block;
}

.container{
width:95%;
}

.top-bar{
display:none;
}

.main-header{
padding:20px 0;
}

.header-info{
display:none;
}


}

.nav-wrapper{
    position: relative;
    z-index: 999;
    transition:.35s;
}

.nav-wrapper.sticky{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    margin:0;

    background:#d60018;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

    animation:slideDown .4s ease;

}


.nav-wrapper.sticky + section,
.nav-wrapper.sticky + .banner,
.nav-wrapper.sticky + .hero-banner{

    margin-top:60px;

}


@keyframes slideDown{
    from{
        transform: translateY(-100%);
    }
    to{
        transform: translateY(0);
    }
}


@media(max-width:991px){

.nav-wrapper{

    position:absolute;

    top:100%;

    left:0;

    width:100%;

}

}


@media(max-width:991px){

.nav-wrapper.sticky{

    position:fixed;

    top:0;

    left:0;

}

}

@media only screen and (max-width : 1500px){
.nav-wrapper.sticky .container {
    width: 100%;
}

}



@media only screen and (max-width : 1200px){
nav a {
    font-size: 13px;
}

}


@media only screen and (max-width : 1100px){
.top-left {
    font-size: 12px;
}

.top-right {
    font-size: 12px;
}

.info-box h5 {
    font-size: 14px;

}

.consult-btn {
    width: 154px;
        font-size: 14px;
}



}

@media only screen and (max-width : 1100px){
    nav a {
        font-size: 10px;
    }


}

.menu-toggle{
    display:none;
    background:none;
    border:none;
    color:#fff;
    font-size:28px;
    cursor:pointer;
}


@media (max-width:1200px){

.header-info{
    display:none;
}

nav a{
    padding:15px;
    font-size:13px;
}

.consult-btn{
    width:180px;
    font-size:13px;
}

}


@media (max-width:991px){

    .menu-toggle {
        display: flex;
        width: 45px;
        height: 45px;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        background: #d60018;
        color: #fff;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        position: fixed;
        right: 15px;
        top: 15px;
        z-index: 9999;
    }

nav{
    position:fixed;
    top:0;
    left:-320px;
    width:300px;
    height:100vh;
    background:#181818;
    transition:.45s ease;
    z-index:1001;
    overflow-y:auto;
    margin:0;
    padding-top:90px;
    box-shadow:10px 0 30px rgba(0,0,0,.3);
}

.nav-wrapper .container {
    background: transparent;
    padding: 0;
    height: 0;
}

nav.active{
    left:0;
}

nav ul{
    display:block;
}

nav li{
    border-bottom:1px solid rgba(255,255,255,.08);
}

nav a{
    padding:18px 25px;
    color:#fff;
    font-size:15px;
    transition:.3s;
}

nav a:hover{
    background:#d60018;
    padding-left:35px;
}

.consult-btn{
    width:calc(100% - 40px);
    margin:25px 20px;
    border-radius:6px;
    height:55px;
}

.consult-btn:before{
    display:none;
}

.main {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-wrap: wrap;
}


/* Dark Background */

    .menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .55);
        opacity: 0;
        visibility: hidden;
        transition: .4s;
        z-index: 9;
    }

    .main h2 {
    text-align: center;
    width: 100%;
}


.menu-overlay.active{
    opacity:1;
    visibility:visible;
}

.top-bar .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}

.top-left{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

.top-right{
    width:100%;
    margin-top:5px;
}

.main{
    display:flex;
    gap:10px;
    align-items:flex-start;
}
}