/* ========== Desktop First Responsive Breakpoints ========== */

/* Extra Large Screens (Desktops > 1400px) */
/* Use this only if you need to adjust for ultra-wide monitors */
@media (max-width: 1400px) {

.hedear-section.header-container {
    padding: 0 20px;
}     
 .container{
    padding: 20px;
}
.contant-info, .contant-form {
    flex: 0 0 calc(50% - 20px);
}
.swiper-button-next, .swiper-button-prev {
    top: 102% !important;
}
.swiper-button-next {
    left: 120px !important;
}
.swiper-button-prev {
    left: 20px !important;
}



}

/* Large Screens (Desktops ≤ 1200px) */
@media (max-width: 1200px) {
.ceo {
    padding: 0;
} 

}

/* Medium Screens (Tablets & small laptops ≤ 1024px) */
@media (max-width: 1024px) {
.work-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.checkboxes {
    flex-wrap: wrap;
    gap: 50px;
}
.footer-top {
    flex-direction: column;
    gap: 80px;
}
.service-area {
    flex: 0 0 50%;
}
}

/* Medium Screens (Tablets & small laptops ≤ 992px) */
@media (max-width: 992px){

.menu-toggle{
    display: block;
}
.main-header {
    padding: 20px 0;
}
.nav-container, .cta-container{
    display: none !important;
}
   
.service-content {
    flex-direction: column;
}    
.service-area {
    flex: 0 0 100%;
}    
.service-area, .service-video {
    width: 100%;
}
.service-video {
    margin-top: 40px;
}
.stat-number, span.plus, span.percent {
    font-size: 3em;
}
.stats-grid {
    padding: 40px;
}

}

/* Small Tablets & Large Phones ≤ 768px */
@media (max-width: 768px) {

.container{
    flex-direction: column;
}    

.hero-proof {
    flex-direction: column;
    gap: 60px;    
}
.hero-profile {
    padding: 5px;
}
.p-right,.p-left  {
    gap: 20px;
}

.brand-container {
    padding: 40px 0;
}
video#promoVideo {
    height: 300px;
}
.work-wrapper {
    flex-direction: column;
    padding: 40px;
    max-width: 100vw;    
}
.f-work-header .cta-btn {
    display: none;
}
img.work-image-pic {
    max-width: 100vw;
    transform: scale(1);
    margin-left: -30px;    
}

.work-details, .work-image{
    width: 100%;
}
.swiper.f-work-swiper {
    overflow-x: hidden;
}

.process-wrapper {
    margin: 0;
}
.process-parent {
    flex-direction: column;
}
.process-detils{
    padding: 0 20px 40px 30px;
}
.video-container>video {
    transform: scale(1.1);
    max-height: 250px;
    width: 100%;
}
.service-text {
    flex-direction: column;
}
.service-left, .service-right {
    width: 100%;
}
.service-right {
    padding-top: 40px;
}
.stats-header {
    text-align: left;
}
.stat-item {
    padding: 20px 0 0 40px;
}
.stats-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 40px;
}
.stat-label {
    width: 100%;
}
.reviews-card {
    flex: 0 0 350px;
}
.agency-rating.reviews-card .platforms svg {
    width: 250px;
}
.avg-rating {
    font-size: 3em;
}
.faq-wrapper, .ceo {
    flex: 0 0 100%;
    padding-left: 0px;    
}
.faq-question {
    margin-right: 20px;
}
.faq-item .toggle-icon {
    right: -20px;
}
.blog-post{
    flex: 0 0 100%;
}
.blog-posts {
    gap: 80px;
}
.read-more-btn {
    margin-top: 0px;
}
.footer-top, .footer-services, .footer-bottom {
    flex-direction: column;
    gap: 40px;
}
.bottom-left {
    order: 1;
}
.footer-services {
    padding-top: 40px;
}
.footer-container {
    gap: 40px;
}
















}

/* Small Phones ≤ 576px */
@media (max-width: 576px) {
.hero-bg {
    height: 800px;
}
.hero-section .container {
    height: 800px;
}
.hero-overlay {
    height: 800px;
}

.service-content {
    padding: 40px 0;
}    
section.reviews-section{
    overflow: hidden;
}
.field-left, .field-right {
    flex: 0 0 100%;
}

}