.header-area .main-header {
    padding: 0px 130px
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
    .header-area .main-header {
        padding: 0px 30px
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header-area .main-header {
        padding: 0px 15px
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .header-area .main-header {
        padding: 22px 50px
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .header-area .main-header {
        padding: 22px 20px
    }
}

@media (max-width: 575px) {
    .header-area .main-header {
        padding: 22px 14px
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1600px) {
    .header-area .main-header .main-menu {
        margin-right: 30px
    }
}

.header-area .main-header .main-menu ul li {
    display: inline-block;
    position: relative;
    z-index: 1
}

.header-area .main-header .main-menu ul li a {
    color: #102039;
    font-weight: 600;
    padding: 39px 27px;
    display: block;
    font-size: 16px;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    text-transform: capitalize;
    position: relative;
    font-family: "Muli", sans-serif
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header-area .main-header .main-menu ul li a {
        padding: 39px 15px
    }
}

.header-area .main-header .main-menu ul li:hover>a {
    color: #3a9c95;
}

.header-area .main-header .main-menu ul ul.submenu {
    position: absolute;
    width: 170px;
    background: rgba(255, 255, 255, 0.9);
    left: 0;
    top: 80%;
    visibility: hidden;
    opacity: 0;
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05);
    padding: 17px 0;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    transition: .3s
}

.header-area .main-header .main-menu ul ul.submenu>li {
    margin-left: 7px;
    display: block
}

.header-area .main-header .main-menu ul ul.submenu>li>a {
    padding: 6px 10px !important;
    font-size: 16px;
    text-transform: capitalize;
    margin: 0
}

.header-area .main-header .main-menu ul ul.submenu>li>a:hover {
    color: #0f61ef;
    background: none
}







.blog-section{
    padding:100px 0;
    background:#f8fbfc;
}

/* Featured Blog */

.featured-blog{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;
    margin-bottom:80px;
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.featured-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.featured-content{
    padding:50px;
}

.category{
    background:#19857d;
    color:#fff;
    padding:8px 18px;
    border-radius:50px;
    display:inline-block;
}

.featured-content h2{
    color:#044b47;
    font-size:38px;
    margin:20px 0;
}

.featured-content p{
    color:#666;
    line-height:1.8;
}

.read-btn{
    display:inline-block;
    margin-top:20px;
    background:#d9aa4a;
    color:#fff;
    padding:12px 30px;
    border-radius:50px;
    text-decoration:none;
    transition:.4s;
}

.read-btn:hover{
    background:#044b47;
}

/* Blog Grid */

.blog-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.blog-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.4s;
}

.blog-card:hover{
    transform:translateY(-10px);
}

.blog-img{
    overflow:hidden;
}

.blog-img img{
    width:100%;
    transition:.7s;
}

.blog-card:hover .blog-img img{
    transform:scale(1.1);
}

.blog-content{
    padding:25px;
}

.blog-content span{
    color:#19857d;
    font-weight:600;
}

.blog-content h3{
    color:#044b47;
    margin:15px 0;
    font-size:24px;
}

.blog-content p{
    color:#666;
    line-height:1.7;
}

.blog-content a{
    color:#d9aa4a;
    text-decoration:none;
    font-weight:600;
}

/* Responsive */

@media(max-width:991px){

    .featured-blog{
        grid-template-columns:1fr;
    }

    .blog-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .blog-banner h1{
        font-size:45px;
    }
}

@media(max-width:767px){

    .blog-grid{
        grid-template-columns:1fr;
    }

    .blog-banner h1{
        font-size:34px;
    }

    .featured-content{
        padding:30px;
    }

    .featured-content h2{
        font-size:28px;
    }
}

.blog-card{
    border:1px solid rgba(4,75,71,.08);
}

.blog-card:hover{
    border-color:#d9aa4a;
}