/* ========== 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: 1.25rem;
}     
.content-wrapper>section>.container{
    padding: 4rem 1.25rem;
}
section.hero-section>.container{
    padding: 0 1.25rem;
}

footer.site-footer {
    padding: 4rem 1.25rem; 
    margin: 0.625rem;   
}
.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) {

.content-wrapper>section.bg{
    margin:  0rem;
}    
.ceo {
    padding: 0;
} 

}

/* Medium Screens (Tablets & small laptops ≤ 1024px) */
@media (max-width: 1024px) {
.content-wrapper>section>.container{
    padding: 4rem 0.938rem;
}
section.hero-section>.container{
    padding: 0 0.938rem;
}
.process-parent {
    flex-direction: column;
    gap: 2.5rem;
}    
.work-tags {
    display: flex;
    flex-wrap: wrap;
    padding-top: 1.25rem;
}
.checkboxes {
    flex-wrap: wrap;
    gap: 2.5rem;
}
.footer-top {
    flex-direction: column;
    gap: 80px;
}
/*
.service-area {
    flex: 0 0 50%;
}*/
}

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

section {
    padding: 0 0.313rem;
}
.main-header{
    padding: 0;
}
.menu-toggle{
    display: block;
}
.nav-container, .cta-container{
    display: none !important;
}
.about-info {
    flex-flow: column;
}
.f-work-header {
    flex-direction: column;
    align-items: start;
    padding-bottom: 2.5rem;    
}

.service-content {
    flex-direction: column;
}
.service-area, .service-video {
    width: 100%;
}
.service-text {
    justify-content: space-between;
}
.stat-number, span.plus, span.percent, .number-range {
    font-size: 2.5em;
}
.reviews-header {
    flex-direction: column;
}
.reviews-header {
    flex-direction: column;
    gap: 2.5rem;
}
}

/* Small Tablets & Large Phones ≤ 768px */
@media (max-width: 768px) {
html, body {
  max-width: 100%;
  overflow-x: hidden;
}    
.site-header {
    background: var(--bg);
}
.hedear-section.header-container{
    padding:0.625rem 1.25rem;
}
.default-btn {
    font-size: var(--font-xsm);
}
.content-bg{
  height: max-content;
}
.title{
    padding-bottom: 2.25rem;
}
.title br{
    display: none;
}
.container{
    flex-direction: column;
}
section.hero-section>.container{
    min-height: max-content;
}

.hero-section .container, .gallery{
    height: 400px;
}
.content-wrapper>section.hero-section>.container{
    flex-direction: column;
}
.hero-info {
    padding-top: 9.75rem;
    padding-bottom: 0;
}    
.hero-proof {
    flex-direction: column;
    gap: 60px;    
}
.hero-profile {
    padding: 5px;
}
.p-right,.p-left  {
    gap: 20px;
}

.brand-container{
    flex-direction: row;
    padding: 2.5rem 1.25rem !important;    
}

.about-wrapper {
    flex-direction: column;
    gap: 2.5rem;
}

.about-left, .about-right{
    width:100%;
}
.about-box1, .about-box2{
    gap: 1.25rem;
}
.about-box1:hover .btn-icon.hover, .about-box2:hover .btn-icon.hover{
    top: 1.25rem;
}
.work-wrapper {
    flex-direction: column;
}
.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;
}

.why-us-container{
    gap: 2.5rem;
}
.why-title{
    position: relative;
    top: 0;
}
.point-icon {
    padding: 1.25rem 1.25rem 0;
}
.title-icon-wrapper{
    padding: 0 1.25rem 1.25rem;    
}
.point-description{
    padding: 1.25rem;
}
.process-wrapper {
    margin: 0;
}
.process-parent {
    flex-direction: column;
}
.process-detils{
    padding: 1.25rem;
}
.service-area {
    padding: 1.25rem 1.25rem 2rem;
}
.video-container>video {
    transform: scale(1.1);
    max-height: 250px;
    width: max-content;
}
.service-text {
    flex-direction: column;
}
.service-left, .service-right {
    width: 100%;
}

.stats-header {
    text-align: left;
}
.stat-content {
    grid-template-columns: 1fr;
}
.stat-item{
    padding: 1.25rem;
}
.stats-grid {
    grid-template-columns: 1fr;
}
.stat-label {
    width: 100%;
}

.reviews-section{
    padding-top: 2.5rem;
}
.agency-rating.reviews-card .platforms svg {
    width: 250px;
}
.avg-rating {
    font-size: 3em;
}

.faq-area{
    flex-direction: column;
}
.faq-cta {
    margin: 7px;
}
.faq-question {
    margin-right: 20px;
    padding: 1.25rem;
}
.faq-item{
    padding: 0 1.25rem 0 0;
}
.faq-item .toggle-icon {
    right: -20px;
}
.ceo .testimonial-footer, .faq-additional {
    padding: 1.25rem;
}

.faq-cta a.no_.default-btn.hero-btn {
    margin-right: 7px;
}
.faq-email>svg {
    display: none;
}
.contact-area {
    flex-direction: column;
}
.contact-box {
    grid-template-columns: 1fr;  /* one column */
    grid-template-rows: auto auto auto; /* three rows */
}

/* reset custom grid-area so they flow normally */
.contact-email.box,
.contact-call.box,
.full-width.box {
    grid-area: auto;
}
.checkboxes {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
.contact-txt br {
    display: none;
}
.blog-post{
    flex: 0 0 100%;
}

.footer-top, .footer-services, .footer-bottom {
    flex-direction: column;
    gap: 2.5rem;
}
.bottom-left {
    order: 1;
}
.footer-services {
    padding-top: 2.5rem;
}
.footer-container {
    gap: 2.5rem;
    padding: 0;
}
.foter-md h3{
    padding-bottom: 1.25rem;
    padding-right: 1.25rem;
}
.foter-md p {
    margin-bottom: .625rem;
}
.foter-md a {
    font-size: var(--font-xsm);
}




}

/* Small Phones ≤ 576px */
@media (max-width: 576px) {

   
.hero-info {
    width: 100%;
}    

.word-rotator-wrapper, .word {
    height: 3.5rem;
}
.work-content {
    flex-direction: column;
}

.field-left, .field-right {
    flex: 0 0 100%;
}
.hero {
    right: -80%;
}
.service-title{
    padding-top: 7px;
    letter-spacing: -1px;    
}
.service-left>p {
    margin: 0;
}
.service-video img {
    margin-bottom: -7px;
}
.form{
    padding: 2.5rem 1.25rem;
}
.post-thumb-content{
    padding: 2.5rem 1.25rem;
    margin-top: -7px;    
}
.footer-services {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.foter-md {
    flex: 1 1 45%;
}
.home-base, .bottom-title{
    padding-bottom: .625rem;
}
}