/*
Responsive CSS
Anwar Services Pro
*/


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


@media (max-width: 992px) {


    .header-inner {

        flex-wrap:wrap;
        gap:20px;

    }



    .main-navigation ul {

        gap:15px;

    }



    .latest-posts-grid,
    .archive-grid {

        grid-template-columns:repeat(2,1fr);

    }



    .footer-content {

        grid-template-columns:repeat(2,1fr);

    }



    .single-title {

        font-size:32px;

    }


}




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


@media (max-width:768px) {



    .container {

        width:92%;

    }



    section {

        padding:40px 0;

    }



    /* الهيدر */


    .header-inner {

        flex-direction:column;
        text-align:center;

    }



    .main-navigation ul {

        flex-direction:column;
        gap:12px;

    }



    .header-inner .btn-primary {

        margin-top:10px;

    }




    /* المقالات */


    .latest-posts-grid,
    .archive-grid {

        grid-template-columns:1fr;

    }



    .single-article {

        padding:20px;

    }



    .single-title {

        font-size:26px;

    }



    .single-content {

        font-size:16px;

    }



    .single-meta {

        flex-direction:column;
        gap:5px;

    }




    /* الفوتر */


    .footer-content {

        grid-template-columns:1fr;
        text-align:center;

    }



}

/*=================================
        HERO RESPONSIVE
=================================*/

@media (max-width:991px){

.hero-wrapper{

display:flex;
flex-direction:column-reverse;
text-align:center;
gap:40px;

}

.hero-text h1{

font-size:40px;

}

.hero-text p{

font-size:17px;

}

.hero-buttons{

justify-content:center;

}

.hero-image img{

max-width:420px;

}

}


@media (max-width:768px){

.hero-section{

padding:60px 0;

}

.hero-text h1{

font-size:32px;

}

.hero-text p{

font-size:16px;
line-height:1.9;

}

.hero-buttons{

flex-direction:column;
align-items:center;

}

.btn-primary,
.btn-secondary{

width:100%;
max-width:260px;
text-align:center;

}

.hero-image img{

max-width:320px;

}

.hero-badge{

font-size:13px;
padding:8px 16px;

}

}