/*==================================================
 ABC Publishers Responsive CSS
==================================================*/

*{
    box-sizing:border-box;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

.container{
    width:100%;
    max-width:1320px;
    margin:auto;
    padding-left:15px;
    padding-right:15px;
}

/*==========================
 Large Desktop
==========================*/

@media (min-width:1400px){

.container{
    max-width:1320px;
}

}

/*==========================
 Laptop
==========================*/

@media (max-width:1200px){

.container{
    max-width:1140px;
}

}

/*==========================
 Tablet
==========================*/

@media (max-width:992px){

.container{
    max-width:960px;
    padding-left:20px;
    padding-right:20px;
}

}

/*==========================
 Mobile
==========================*/

@media (max-width:768px){

.container{
    width:100%;
    padding-left:15px;
    padding-right:15px;
}

body{
    overflow-x:hidden;
}

img{
    max-width:100%;
    height:auto;
}

}

/*==========================
 Small Mobile
==========================*/

@media (max-width:480px){

.container{
    padding-left:12px;
    padding-right:12px;
}

}

/*==================================================
PART 2 : HEADER & NAVBAR RESPONSIVE
==================================================*/

/* ---------- Laptop ---------- */

@media (max-width:1200px){

    .site-header,
    header{
        padding:15px 0;
    }
    
    .site-logo img,
    .custom-logo,
    .logo img{
        max-height:70px;
        width:auto;
    }
    
    .navbar-nav{
        gap:18px;
    }
    
    }
    
    
    /* ---------- Tablet ---------- */
    
    @media (max-width:992px){
    
    .site-header,
    header{
        padding:12px 0;
    }
    
    .site-logo img,
    .custom-logo,
    .logo img{
        max-height:60px;
    }
    
    .navbar-nav{
        gap:12px;
        font-size:15px;
    }
    
    .contact-btn{
        padding:10px 18px;
        font-size:14px;
    }
    
    }
    
    
    /* ---------- Mobile ---------- */
    
    @media (max-width:768px){
    
    .site-header,
    header{
        padding:10px 0;
    }
    
    .site-logo,
    .logo{
        flex:1;
    }
    
    .site-logo img,
    .custom-logo,
    .logo img{
        max-height:55px;
        width:auto;
        margin:0 auto;
    }
    
    .navbar-toggler,
    .menu-toggle{
        width:45px;
        height:45px;
        border-radius:10px;
    }
    
    .navbar-collapse{
    
        background:#fff;
    
        padding:15px;
    
        margin-top:15px;
    
        border-radius:15px;
    
        box-shadow:0 15px 40px rgba(0,0,0,.10);
    
    }
    
    .navbar-nav{
    
        display:flex;
    
        flex-direction:column;
    
        gap:12px;
    
    }
    
    .navbar-nav li{
    
        width:100%;
    
    }
    
    .navbar-nav a{
    
        display:block;
    
        width:100%;
    
        padding:12px 16px;
    
        border-radius:10px;
    
    }
    
    .contact-btn{
    
        width:100%;
    
        text-align:center;
    
        margin-top:12px;
    
    }
    
    }
    
    
    /* ---------- Small Mobile ---------- */
    
    @media (max-width:480px){
    
    .site-logo img,
    .custom-logo,
    .logo img{
    
        max-height:48px;
    
    }
    
    .navbar-toggler,
    .menu-toggle{
    
        width:42px;
    
        height:42px;
    
    }
    
    }

    /*==================================================
PART 3 : HERO SECTION RESPONSIVE
==================================================*/

/* ---------- Laptop ---------- */

@media (max-width:1200px){

    .hero-section,
    .hero{
    
        padding:70px 0;
    
    }
    
    .hero-content h1{
    
        font-size:48px;
        line-height:1.2;
    
    }
    
    .hero-content p{
    
        font-size:18px;
    
    }
    
    .hero-buttons{
    
        gap:15px;
    
    }
    
    .hero-image img{
    
        max-width:90%;
        margin:auto;
    
    }
    
    }
    
    
    /* ---------- Tablet ---------- */
    
    @media (max-width:992px){
    
    .hero-section,
    .hero{
    
        padding:60px 0;
    
    }
    
    .hero-row{
    
        display:flex;
        flex-direction:column;
        text-align:center;
        gap:35px;
    
    }
    
    .hero-content{
    
        order:1;
    
    }
    
    .hero-image{
    
        order:2;
    
    }
    
    .hero-content h1{
    
        font-size:38px;
    
    }
    
    .hero-content p{
    
        font-size:17px;
    
    }
    
    .hero-buttons{
    
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        gap:15px;
    
    }
    
    .hero-image img{
    
        max-width:420px;
        margin:auto;
    
    }
    
    }
    
    
    /* ---------- Mobile ---------- */
    
    @media (max-width:768px){
    
    .hero-section,
    .hero{
    
        padding:45px 0;
    
    }
    
    .hero-content{
    
        text-align:center;
    
    }
    
    .hero-content h1{
    
        font-size:32px;
        line-height:1.3;
    
    }
    
    .hero-content p{
    
        font-size:16px;
        line-height:1.8;
    
    }
    
    .hero-buttons{
    
        display:flex;
        flex-direction:column;
        gap:15px;
        margin-top:25px;
    
    }
    
    .hero-buttons a,
    .hero-buttons .btn{
    
        width:100%;
    
    }
    
    .hero-image{
    
        margin-top:35px;
    
    }
    
    .hero-image img{
    
        width:100%;
        max-width:330px;
        margin:auto;
    
    }
    
    }
    
    
    /* ---------- Small Mobile ---------- */
    
    @media (max-width:480px){
    
    .hero-content h1{
    
        font-size:28px;
    
    }
    
    .hero-content p{
    
        font-size:15px;
    
    }
    
    .hero-image img{
    
        max-width:280px;
    
    }
    
    }

    /*==================================================
PART 4 : HERO (ACTUAL HTML)
==================================================*/

/* Tablet */

@media (max-width:991.98px){

    .hero .row{
    
    display:flex;
    
    flex-direction:column;
    
    text-align:center;
    
    }
    
    .hero .col-lg-6{
    
    width:100%;
    
    max-width:100%;
    
    flex:0 0 100%;
    
    }
    
    .hero-image{
    
    display:block;
    
    margin:35px auto 0;
    
    max-width:420px;
    
    width:100%;
    
    height:auto;
    
    }
    
    .hero-buttons{
    
    display:flex;
    
    justify-content:center;
    
    flex-wrap:wrap;
    
    gap:15px;
    
    }
    
    .hero-stats{
    
    display:grid;
    
    grid-template-columns:repeat(2,1fr);
    
    gap:15px;
    
    margin-top:30px;
    
    }
    
    .hero-stat-card{
    
    width:100%;
    
    }
    
    }
    
    
    /* Mobile */
    
    @media (max-width:767.98px){
    
    .hero{
    
    padding:60px 0;
    
    }
    
    .hero h1{
    
    font-size:32px;
    
    line-height:1.3;
    
    }
    
    .hero p{
    
    font-size:16px;
    
    }
    
    .hero-buttons{
    
    flex-direction:column;
    
    }
    
    .hero-buttons .btn{
    
    width:100%;
    
    }
    
    .hero-image{
    
    max-width:300px;
    
    margin-top:30px;
    
    }
    
    .hero-stats{
    
    grid-template-columns:1fr;
    
    }
    
    .hero-stat-card{
    
    padding:18px;
    
    }
    
    .hero-stat-value{
    
    font-size:28px;
    
    }
    
    }
    
    
    /* Small Mobile */
    
    @media (max-width:480px){
    
    .hero h1{
    
    font-size:28px;
    
    }
    
    .hero-tag{
    
    font-size:13px;
    
    }
    
    .hero-image{
    
    max-width:250px;
    
    }
    
    .hero-stat-card{
    
    padding:15px;
    
    }
    
    }

    /*==================================================
HERO LAYOUT FIX
==================================================*/

@media (max-width:991.98px){

    .hero .row{
    
    display:flex !important;
    
    flex-direction:column !important;
    
    align-items:center !important;
    
    }
    
    .hero .col-lg-6{
    
    width:100% !important;
    
    max-width:100% !important;
    
    flex:0 0 100% !important;
    
    }
    
    .hero .col-lg-6:first-child{
    
    order:1;
    
    }
    
    .hero .col-lg-6:last-child{
    
    order:2;
    
    margin-top:35px;
    
    }
    
    .hero-image{
    
    max-width:380px !important;
    
    margin:auto;
    
    display:block;
    
    }
    
    .hero-stats{
    
    display:grid !important;
    
    grid-template-columns:repeat(2,minmax(0,1fr));
    
    gap:15px;
    
    width:100%;
    
    }
    
    .hero-stat-card{
    
    min-width:unset !important;
    
    padding:18px 15px;
    
    }
    
    }
    
    @media (max-width:575.98px){
    
    .hero h1{
    
    font-size:30px;
    
    }
    
    .hero-buttons{
    
    display:flex;
    
    flex-direction:column;
    
    gap:12px;
    
    }
    
    .hero-buttons .btn{
    
    width:100%;
    
    }
    
    .hero-stats{
    
    grid-template-columns:1fr;
    
    }
    
    .hero-image{
    
    max-width:280px !important;
    
    }
    
    .hero-stat-value{
    
    font-size:30px;
    
    }
    
    }