/*
 * Metafortech - Comprehensive Mobile Responsive CSS
 * Ensures 100% responsiveness on all devices
 */

/* ============================================================
   GLOBAL FIXES
   ============================================================ */

/* Prevent horizontal overflow on all devices */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

*, *::before, *::after {
    box-sizing: border-box;
}

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

/* ============================================================
   TABLET (max-width: 991px)
   ============================================================ */
@media screen and (max-width: 991px) {

    /* ---------- Navbar ---------- */
    .navbar {
        padding: 10px 0;
    }

    .navbar .logo img {
        max-width: 140px;
    }

    .navbar-toggler {
        border: none;
        padding: 8px;
        outline: none !important;
        box-shadow: none !important;
    }

    .navbar-toggler .icon-bar i {
        color: #fff;
        font-size: 22px;
    }

    .navbar .navbar-collapse {
        border-radius: 12px;
        margin-top: 10px;
    }

    .navbar .navbar-nav .nav-link {
        padding: 10px 15px !important;
        font-size: 15px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .navbar .navbar-nav .nav-link:last-child {
        border-bottom: none;
    }

    .lang-switcher {
        padding: 10px 0;
    }

    /* ---------- Slider ---------- */
    .arch-slider {
        min-height: 75vh;
        padding-bottom: 40px;
    }

    .arch-slider .caption {
        padding: 0 10px;
    }

    .arch-slider .caption h1 {
        font-size: 38px;
        line-height: 1.25;
        margin-bottom: 18px;
    }

    .arch-slider .caption p {
        font-size: 15px;
        line-height: 1.8;
        max-width: 90%;
        margin: 0 auto 25px;
        color: rgba(255,255,255,0.75);
    }

    .arch-slider .slider-badge {
        gap: 10px;
        margin-bottom: 18px;
    }

    .arch-slider .slider-badge h5 {
        font-size: 11px !important;
        letter-spacing: 3px;
    }

    .arch-slider .slider-badge .badge-line {
        width: 30px;
    }

    .arch-slider .slider-btn {
        padding: 12px 32px;
        font-size: 14px;
    }

    .arch-slider .caption .explore {
        margin-top: 5px;
    }

    /* ---------- About ---------- */
    .about-ar .img {
        margin-bottom: 40px;
    }

    .about-ar .img .bg-img {
        height: 350px;
        border-radius: 15px;
    }

    .about-ar .content h3 {
        font-size: 26px;
    }

    .about-ar .content p {
        font-size: 14px;
        line-height: 1.9;
    }

    /* ---------- Services ---------- */
    .serv-arch .container-fluid > .row {
        flex-wrap: wrap;
        padding: 0 10px;
    }

    .serv-arch .item {
        min-height: 240px;
        padding: 28px 22px;
        border-radius: 12px;
        margin-bottom: 2px;
    }

    .serv-arch .item h5 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .serv-arch .item p {
        font-size: 13px;
        line-height: 1.8;
    }

    .serv-arch .item .numb {
        font-size: 34px;
        opacity: 0.4;
        margin-bottom: 12px;
    }

    /* ---------- Portfolio ---------- */
    .portfolio .gallery .items {
        margin-bottom: 20px;
    }

    .filtering .filter span {
        margin: 3px 5px;
        font-size: 13px;
    }

    /* ---------- Case Study ---------- */
    .case-study .swiper-slide {
        min-height: 400px;
    }

    .case-study .cont h4 {
        font-size: 22px;
    }

    /* ---------- Team ---------- */
    .team .item.cir .img img {
        width: 100%;
    }

    /* ---------- Testimonials ---------- */
    .testimonials .item {
        padding: 25px;
    }

    .testimonials .item p {
        font-size: 16px;
    }

    /* ---------- Blog ---------- */
    .blog .item .img img {
        width: 100%;
        height: 220px;
        object-fit: cover;
    }

    /* ---------- Contact ---------- */
    .contact-sec .form {
        padding: 30px 20px;
    }

    /* ---------- Footer ---------- */
    footer .item {
        margin-bottom: 30px;
    }

    footer .item .logo img {
        max-width: 160px;
    }
}

/* ============================================================
   MOBILE LANDSCAPE & SMALL TABLETS (max-width: 767px)
   ============================================================ */
@media screen and (max-width: 767px) {

    /* ---------- General Spacing ---------- */
    .section-padding {
        padding: 60px 0;
    }

    .sec-head {
        margin-bottom: 40px !important;
    }

    .sec-head h2 {
        font-size: 28px;
    }

    /* ---------- Navbar ---------- */
    .navbar .logo img {
        max-width: 120px;
    }

    /* ---------- Slider ---------- */
    .arch-slider {
        min-height: 70vh;
        padding-bottom: 30px;
    }

    .arch-slider .caption {
        padding: 0 15px;
    }

    .arch-slider .caption h1 {
        font-size: 32px;
        line-height: 1.3;
        margin-bottom: 15px;
        letter-spacing: 0;
    }

    .arch-slider .caption p {
        font-size: 14px;
        max-width: 95%;
        margin: 0 auto 20px;
        line-height: 1.8;
    }

    .arch-slider .caption .mt-30 {
        margin-top: 10px !important;
    }

    .arch-slider .slider-btn {
        padding: 11px 28px;
        font-size: 13px;
        border-radius: 30px;
    }

    .arch-slider .slider-badge {
        margin-bottom: 14px;
        gap: 8px;
    }

    .arch-slider .slider-badge h5 {
        font-size: 10px !important;
        letter-spacing: 2px;
    }

    .arch-slider .slider-badge .badge-line {
        width: 25px;
    }

    .arch-slider .slider-progress {
        bottom: 15px;
    }

    /* ---------- About ---------- */
    .about-ar {
        padding: 50px 0;
    }

    .about-ar .img .bg-img {
        height: 300px;
    }

    .about-ar .exp h2 {
        font-size: 50px !important;
    }

    .about-ar .content h6 {
        font-size: 12px;
    }

    .about-ar .content h3 {
        font-size: 24px;
    }

    /* ---------- Services ---------- */
    .serv-arch .container-fluid > .row {
        padding: 0 8px;
        gap: 0;
    }

    .serv-arch .item {
        flex: 0 0 50%;
        max-width: 50%;
        min-height: 220px;
        padding: 25px 18px;
        border-radius: 10px;
    }

    .serv-arch .item .numb {
        font-size: 30px;
        margin-bottom: 10px;
        opacity: 0.35;
    }

    .serv-arch .item h5 {
        font-size: 15px;
        line-height: 1.4;
        margin-bottom: 8px;
    }

    .serv-arch .item p {
        font-size: 12px;
        line-height: 1.7;
        opacity: 0.85;
    }

    /* ---------- Portfolio ---------- */
    .portfolio.po-arch {
        padding: 60px 0 40px;
    }

    .portfolio .gallery .items {
        padding: 0 5px;
        margin-bottom: 15px;
    }

    .portfolio .gallery .cont h5 {
        font-size: 16px;
    }

    .filtering .filter {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
    }

    .filtering .filter span {
        font-size: 12px;
        padding: 5px 12px;
    }

    /* ---------- Case Study ---------- */
    .case-study .swiper-slide {
        min-height: 350px;
    }

    .case-study .cont h6 {
        font-size: 13px;
    }

    .case-study .cont h4 {
        font-size: 20px;
    }

    .case-study .controls {
        bottom: 15px;
    }

    /* ---------- Team ---------- */
    .team {
        padding: 60px 0;
    }

    .team .item.cir {
        margin-bottom: 30px;
    }

    .team .item .info h6 {
        font-size: 14px;
    }

    /* ---------- Testimonials ---------- */
    .testimonials {
        padding: 60px 0;
    }

    .testimonials .item {
        padding: 20px 15px;
        margin: 0 5px;
    }

    .testimonials .item .author .img {
        width: 55px;
        height: 55px;
    }

    .testimonials .item .author-name {
        font-size: 15px;
    }

    .testimonials .item .author-details {
        font-size: 12px;
    }

    .testimonials .item p {
        font-size: 14px;
        line-height: 1.8;
    }

    .testimonials .arrows {
        margin-top: 20px;
    }

    .testimonials .arrows .next,
    .testimonials .arrows .prev {
        width: 45px;
        height: 45px;
    }

    .testimonials .arrows .next span,
    .testimonials .arrows .prev span {
        font-size: 22px;
    }

    /* ---------- Blog ---------- */
    .blog {
        padding: 60px 0;
    }

    .blog .item .cont h5 {
        font-size: 16px;
    }

    .blog .item .cont h5 a {
        font-size: 16px;
    }

    .blog .item .img img {
        height: 200px;
    }

    /* ---------- Contact ---------- */
    .contact-sec {
        padding: 60px 0;
    }

    .contact-sec .sec-head h2 {
        font-size: 28px;
    }

    .contact-sec input,
    .contact-sec textarea {
        font-size: 14px;
        padding: 12px 15px;
    }

    .contact-sec .butn {
        padding: 12px 25px;
    }

    .contact-sec .butn h6 {
        font-size: 13px;
    }

    /* ---------- Footer ---------- */
    footer {
        padding: 50px 0 20px;
    }

    footer .item {
        margin-bottom: 35px;
        text-align: center;
    }

    footer .item .title h5 {
        font-size: 16px;
    }

    footer .item ul li {
        justify-content: center;
    }

    footer .social {
        text-align: center;
    }

    footer .social a {
        margin: 0 5px;
    }

    footer .copy-right {
        text-align: center;
    }

    /* RTL Footer adjustments */
    [dir="rtl"] footer .item {
        text-align: center;
    }

    [dir="rtl"] footer .item ul li .icon {
        float: none;
        display: inline-block;
    }

    [dir="rtl"] footer .item ul li .cont {
        text-align: center;
    }

    [dir="rtl"] footer .item ul li {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ============================================================
   MOBILE PHONES (max-width: 575px)
   ============================================================ */
@media screen and (max-width: 575px) {

    /* ---------- General ---------- */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .section-padding {
        padding: 50px 0;
    }

    .sec-head {
        margin-bottom: 35px !important;
    }

    .sec-head h2 {
        font-size: 24px;
    }

    /* ---------- Navbar ---------- */
    .navbar {
        padding: 8px 0;
    }

    .navbar .logo img {
        max-width: 110px;
    }

    .navbar .navbar-collapse {
        max-height: 70vh;
        padding: 12px;
    }

    .navbar .navbar-nav .nav-link {
        padding: 8px 12px !important;
        font-size: 14px;
    }

    .lang-switcher a {
        font-size: 12px;
        padding: 3px 8px;
    }

    /* ---------- Slider ---------- */
    .arch-slider {
        min-height: 65vh;
        padding-bottom: 25px;
    }

    .arch-slider .swiper-slide .bg-img {
        min-height: 65vh;
    }

    .arch-slider .caption {
        padding: 0 12px;
    }

    .arch-slider .slider-badge {
        gap: 6px;
        margin-bottom: 12px;
    }

    .arch-slider .slider-badge h5 {
        font-size: 9px !important;
        letter-spacing: 2px;
    }

    .arch-slider .slider-badge .badge-line {
        width: 20px;
        opacity: 0.6;
    }

    .arch-slider .caption h1 {
        font-size: 26px;
        line-height: 1.35;
        margin-bottom: 12px;
        letter-spacing: 0;
        font-weight: 700;
    }

    .arch-slider .caption p {
        font-size: 13px;
        line-height: 1.75;
        max-width: 100%;
        margin: 0 auto 18px;
        padding: 0 5px;
        color: rgba(255,255,255,0.7);
    }

    .arch-slider .slider-btn {
        padding: 10px 24px;
        font-size: 12px;
        border-radius: 25px;
        letter-spacing: 1px;
    }

    .arch-slider .slider-progress {
        bottom: 10px;
    }

    .arch-slider .slider-progress .swiper-pagination-bullet {
        width: 18px;
        height: 3px;
        margin: 0 3px;
        border-radius: 3px;
    }

    .arch-slider .slider-progress .swiper-pagination-bullet-active {
        width: 32px;
    }

    /* ---------- About ---------- */
    .about-ar {
        padding: 40px 0;
    }

    .about-ar .img {
        margin-bottom: 30px;
    }

    .about-ar .img .bg-img {
        height: 250px;
        border-radius: 10px;
    }

    .about-ar .exp {
        width: 100px;
        height: 100px;
    }

    .about-ar .exp h2 {
        font-size: 40px !important;
    }

    .about-ar .exp p {
        font-size: 10px;
    }

    .about-ar .content h6 {
        font-size: 11px;
        letter-spacing: 3px;
    }

    .about-ar .content h3 {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .about-ar .content p {
        font-size: 13px;
        line-height: 1.8;
    }

    .about-ar .butn {
        margin-top: 20px !important;
    }

    /* ---------- Services ---------- */
    .serv-arch .container-fluid {
        padding: 0 8px;
    }

    .serv-arch .container-fluid > .row {
        padding: 0;
        gap: 0;
    }

    .serv-arch .item {
        flex: 0 0 100%;
        max-width: 100%;
        min-height: auto;
        padding: 22px 20px;
        border-radius: 10px;
        margin-bottom: 1px;
    }

    .serv-arch .item::after {
        border-radius: 10px;
    }

    .serv-arch .item .numb {
        font-size: 26px;
        opacity: 0.3;
        margin-bottom: 6px;
    }

    .serv-arch .item h5 {
        font-size: 15px;
        margin-bottom: 6px;
        font-weight: 600;
    }

    .serv-arch .item p {
        font-size: 12px;
        line-height: 1.7;
    }

    /* ---------- Portfolio ---------- */
    .portfolio.po-arch {
        padding: 50px 0 30px;
    }

    .portfolio .gallery .items {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
        margin-bottom: 15px;
    }

    .portfolio .gallery .item-img img {
        width: 100%;
        height: 220px;
        object-fit: cover;
    }

    .portfolio .gallery .cont h5 {
        font-size: 15px;
        margin-bottom: 5px;
    }

    .portfolio .gallery .cont .tags {
        font-size: 12px;
    }

    .filtering {
        margin-bottom: 25px;
    }

    .filtering .filter span {
        font-size: 11px;
        padding: 4px 10px;
        margin: 2px;
    }

    /* ---------- Case Study ---------- */
    .case-study .swiper-slide {
        min-height: 300px;
    }

    .case-study .cont span {
        font-size: 11px;
    }

    .case-study .cont h6 {
        font-size: 12px;
    }

    .case-study .cont h4 {
        font-size: 18px;
    }

    .case-study .controls .swiper-nav-ctrl {
        width: 40px;
        height: 40px;
    }

    .case-study .controls .swiper-nav-ctrl i {
        font-size: 14px;
    }

    .case-study .swiper-pagination {
        bottom: 10px !important;
    }

    /* ---------- Team ---------- */
    .team {
        padding: 50px 0;
    }

    .team .row > div {
        margin-bottom: 25px;
    }

    .team .item.cir {
        margin-bottom: 15px;
    }

    .team .item.cir .img {
        max-width: 280px;
        margin: 0 auto;
    }

    .team .item .info h6 {
        font-size: 14px;
    }

    .team .item .info span {
        font-size: 12px;
    }

    .team .item.cir #circle svg {
        width: 200px;
        height: 200px;
    }

    /* ---------- Testimonials ---------- */
    .testimonials {
        padding: 50px 0;
    }

    .testimonials .item {
        padding: 20px;
        margin: 0 2px;
    }

    .testimonials .item .info {
        margin-bottom: 15px;
    }

    .testimonials .item .author .img {
        width: 50px;
        height: 50px;
    }

    .testimonials .item .author .img img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        object-fit: cover;
    }

    .testimonials .item .author-name {
        font-size: 14px;
    }

    .testimonials .item .author-details {
        font-size: 11px;
    }

    .testimonials .item p {
        font-size: 13px;
        line-height: 1.7;
    }

    .testimonials .arrows .next,
    .testimonials .arrows .prev {
        width: 40px;
        height: 40px;
    }

    .testimonials .arrows .next span,
    .testimonials .arrows .prev span {
        font-size: 20px;
        line-height: 40px;
    }

    /* ---------- Blog ---------- */
    .blog {
        padding: 50px 0;
    }

    .blog .item {
        margin-bottom: 25px;
    }

    .blog .item .img img {
        height: 180px;
        object-fit: cover;
        border-radius: 8px 8px 0 0;
    }

    .blog .item .cont {
        padding: 15px;
    }

    .blog .item .cont h5,
    .blog .item .cont h5 a {
        font-size: 15px;
        line-height: 1.6;
    }

    .blog .item .cont .info {
        margin-bottom: 8px;
    }

    .blog .item .cont .info span,
    .blog .item .cont .info a {
        font-size: 12px;
    }

    .blog .item .btn-more a {
        font-size: 13px;
    }

    /* ---------- Contact ---------- */
    .contact-sec {
        padding: 50px 0;
    }

    .contact-sec .form {
        padding: 25px 15px;
    }

    .contact-sec input,
    .contact-sec textarea {
        font-size: 13px;
        padding: 10px 12px;
        margin-bottom: 12px;
    }

    .contact-sec textarea {
        min-height: 120px;
    }

    .contact-sec .butn {
        padding: 10px 20px;
    }

    .contact-sec .butn h6 {
        font-size: 13px;
        letter-spacing: 1px;
    }

    /* ---------- Footer ---------- */
    footer {
        padding: 40px 0 15px;
    }

    footer .row > div {
        margin-bottom: 25px;
    }

    footer .item .title h5 {
        font-size: 15px;
        margin-bottom: 15px;
    }

    footer .item ul li {
        margin-bottom: 12px;
    }

    footer .item ul li .icon {
        font-size: 22px;
    }

    footer .item ul li .cont h6 {
        font-size: 13px;
    }

    footer .item ul li .cont p {
        font-size: 13px;
    }

    footer .item .logo img {
        max-width: 130px;
    }

    footer .social a {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        margin: 0 3px;
    }

    footer .copy-right p {
        font-size: 12px;
    }

    /* ---------- Progress scroll button ---------- */
    .progress-wrap {
        width: 40px;
        height: 40px;
        bottom: 15px;
        right: 15px;
    }
}

/* ============================================================
   EXTRA SMALL PHONES (max-width: 400px)
   ============================================================ */
@media screen and (max-width: 400px) {

    .arch-slider {
        min-height: 60vh;
    }

    .arch-slider .swiper-slide .bg-img {
        min-height: 60vh;
    }

    .arch-slider .caption h1 {
        font-size: 22px;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .arch-slider .caption p {
        font-size: 12px;
        line-height: 1.7;
        margin-bottom: 15px;
    }

    .arch-slider .slider-btn {
        padding: 9px 20px;
        font-size: 11px;
        border-radius: 22px;
    }

    .arch-slider .slider-badge {
        margin-bottom: 10px;
    }

    .about-ar .content h3 {
        font-size: 20px;
    }

    .about-ar .exp {
        width: 85px;
        height: 85px;
    }

    .about-ar .exp h2 {
        font-size: 32px !important;
    }

    .sec-head h2 {
        font-size: 22px;
    }

    .serv-arch .item {
        padding: 18px 16px;
    }

    .serv-arch .item h5 {
        font-size: 14px;
    }

    .serv-arch .item p {
        font-size: 11px;
    }

    .serv-arch .item .numb {
        font-size: 22px;
    }

    .serv-arch .item {
        min-height: auto;
    }

    .case-study .swiper-slide {
        min-height: 260px;
    }

    .case-study .cont h4 {
        font-size: 16px;
    }

    .team .item.cir .img {
        max-width: 240px;
    }

    .testimonials .item p {
        font-size: 12px;
    }

    .blog .item .cont h5,
    .blog .item .cont h5 a {
        font-size: 14px;
    }

    .blog .item .img img {
        height: 160px;
    }

    footer .item .title h5 {
        font-size: 14px;
    }
}

/* ============================================================
   RTL-SPECIFIC MOBILE FIXES
   ============================================================ */
@media screen and (max-width: 767px) {

    /* Services RTL center on mobile */
    [dir="rtl"] .serv-arch .item {
        text-align: center;
    }

    [dir="ltr"] .serv-arch .item {
        text-align: center;
    }

    /* About section RTL */
    [dir="rtl"] .about-ar .content {
        text-align: center;
    }

    [dir="ltr"] .about-ar .content {
        text-align: center;
    }

    /* Portfolio RTL */
    [dir="rtl"] .portfolio .cont {
        text-align: center;
    }

    [dir="ltr"] .portfolio .cont {
        text-align: center;
    }

    /* Blog RTL */
    [dir="rtl"] .blog .item .cont {
        text-align: center;
    }

    /* Contact form centered */
    [dir="rtl"] .contact-sec input,
    [dir="rtl"] .contact-sec textarea {
        text-align: right;
    }

    [dir="ltr"] .contact-sec input,
    [dir="ltr"] .contact-sec textarea {
        text-align: left;
    }
}

/* ============================================================
   SLICK CAROUSEL MOBILE FIX (Testimonials)
   ============================================================ */

/* Prevent Slick slides from overflowing */
.testimonials .slick-list {
    overflow: hidden;
}

.testimonials .slick-slide {
    padding: 0 8px;
}

@media screen and (max-width: 991px) {
    .testimonials .slick-slide {
        padding: 0 5px;
    }

    /* Ensure single slide mode looks good */
    .testimonials .item .info .cont {
        text-align: center;
    }

    .testimonials .item .author {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media screen and (max-width: 575px) {
    .testimonials .slick-slide {
        padding: 0 2px;
    }

    .testimonials .item .fz-20 {
        font-size: 14px !important;
    }
}

/* ============================================================
   SERVICES SECTION - MOBILE GRID FIX
   ============================================================ */

/* On touch devices / mobile, show service descriptions always (hover doesn't work) */
@media screen and (max-width: 991px) {
    .serv-arch .item p {
        opacity: 1 !important;
        transform: translateY(0) !important;
        margin-top: 10px;
    }

    .serv-arch .item:after {
        opacity: 0.85;
        border-radius: inherit;
    }

    .serv-arch .item h5 {
        position: relative;
        z-index: 2;
    }

    .serv-arch .item p {
        position: relative;
        z-index: 2;
    }

    .serv-arch .item .numb {
        position: relative;
        z-index: 2;
    }
}

/* Services use col-lg-2 col-md-6 - need proper mobile grid */
@media screen and (max-width: 575px) {
    .serv-arch .container-fluid > .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .serv-arch .item {
        min-height: auto;
        padding: 30px 25px;
    }

    .serv-arch .item .numb {
        font-size: 36px;
        margin-bottom: 8px;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .serv-arch .container-fluid > .row > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* ============================================================
   PORTFOLIO GALLERY - MOBILE FIX (Isotope)
   ============================================================ */
@media screen and (max-width: 575px) {
    .portfolio .gallery .items {
        width: 100% !important;
        padding: 0;
    }

    .portfolio .gallery .item-img {
        overflow: hidden;
        border-radius: 8px;
    }

    .portfolio .gallery .item-img img {
        border-radius: 8px;
    }
}

/* ============================================================
   CASE STUDY (Swiper) - MOBILE FIX
   ============================================================ */
@media screen and (max-width: 767px) {
    .case-study .swiper-slide .container {
        min-height: 55vh;
        padding: 60px 20px;
    }

    .case-study .cont {
        padding: 20px;
    }

    .case-study .cont a {
        display: block;
    }

    .case-study .controls .swiper-button-next,
    .case-study .controls .swiper-button-prev {
        width: 35px;
        height: 35px;
    }

    .case-study .controls .swiper-button-next::after,
    .case-study .controls .swiper-button-prev::after {
        font-size: 12px;
    }
}

@media screen and (max-width: 575px) {
    .case-study .swiper-slide .container {
        min-height: 45vh;
        padding: 40px 15px;
    }

    .case-study .cont h4 {
        font-size: 16px;
        line-height: 1.4;
    }

    .case-study .controls {
        display: flex;
        gap: 8px;
    }

    .case-study .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
    }
}

/* ============================================================
   TEAM SVG CIRCLE - MOBILE FIX
   ============================================================ */
@media screen and (max-width: 575px) {
    .team .item.cir .img #circle svg {
        width: 220px;
        height: 220px;
    }

    .team .item.cir .img {
        max-width: 260px;
        margin: 0 auto;
    }

    .team .item .info {
        text-align: center;
    }
}

/* ============================================================
   CONTACT FORM - FULL WIDTH BUTTON
   ============================================================ */
@media screen and (max-width: 575px) {
    .contact-sec .butn.full-width {
        display: block;
        width: 100%;
        text-align: center;
    }

    .contact-sec .form .row > [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }

    .contact-sec .mt-30 {
        margin-top: 15px !important;
    }
}

/* ============================================================
   FOOTER CONTACT LIST - MOBILE
   ============================================================ */
@media screen and (max-width: 575px) {
    footer .item ul li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 15px;
    }

    footer .item ul li .icon {
        font-size: 24px;
        flex-shrink: 0;
    }

    footer .item ul li .cont p {
        word-break: break-word;
    }

    /* Footer social icons - smaller with better spacing */
    footer .social {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Footer logo */
    footer .item .logo {
        text-align: center;
    }

    footer .item .logo img {
        max-width: 130px;
    }
}

/* ============================================================
   NAVBAR MOBILE TOGGLER ENHANCEMENT
   ============================================================ */
@media screen and (max-width: 991px) {
    .navbar-toggler {
        position: relative;
        z-index: 999;
    }

    .navbar-toggler:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    /* Ensure navbar brand and toggler are properly aligned */
    .navbar .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .navbar .collapse.show,
    .navbar .collapsing {
        width: 100%;
        order: 3;
    }
}

/* ============================================================
   ABOUT SECTION - IMAGE MOBILE FIX
   ============================================================ */
@media screen and (max-width: 767px) {
    .about-ar .img {
        margin-bottom: 30px;
    }

    .about-ar .img .bg-img {
        border-radius: 12px;
    }

    .about-ar .exp {
        bottom: 10px;
    }

    .about-ar .content .butn {
        display: block;
        text-align: center;
    }
}

/* ============================================================
   LOADING SCREEN - MOBILE FIX
   ============================================================ */
@media screen and (max-width: 575px) {
    .loading span {
        font-size: 18px;
    }
}

/* ============================================================
   SECTION SPACING - MOBILE FINE-TUNING
   ============================================================ */
@media screen and (max-width: 575px) {
    .section-padding {
        padding: 45px 0;
    }

    .pb-70 {
        padding-bottom: 30px !important;
    }

    .mt-30 {
        margin-top: 15px !important;
    }

    .md-mb50 {
        margin-bottom: 30px;
    }

    /* Fix any overflow from absolute elements */
    .position-re {
        overflow: hidden;
    }
}

/* ============================================================
   IMAGES - PREVENT OVERFLOW
   ============================================================ */
img {
    max-width: 100%;
    height: auto;
}

.bg-img {
    background-size: cover;
    background-position: center;
}

/* ============================================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================================ */
@media (hover: none) and (pointer: coarse) {

    /* Larger tap targets */
    .navbar .navbar-nav .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .filtering .filter span {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }

    /* Disable hover effects on touch */
    .arch-slider .slider-btn:hover {
        transform: none;
    }

    .portfolio .gallery .item-img a:hover .item-img-overlay {
        opacity: 0.5;
    }

    /* Remove cursor styles */
    .mouse-cursor {
        display: none !important;
    }
}

/* ============================================================
   WHATSAPP FLOATING BUTTON - RESPONSIVE
   ============================================================ */
@media screen and (max-width: 767px) {
    .whatsapp-float {
        width: 48px;
        height: 48px;
        bottom: 20px;
        left: 20px;
    }

    .whatsapp-float svg {
        width: 24px;
        height: 24px;
    }
}

@media screen and (max-width: 400px) {
    .whatsapp-float {
        width: 44px;
        height: 44px;
        bottom: 15px;
        left: 15px;
    }

    .whatsapp-float svg {
        width: 22px;
        height: 22px;
    }
}

/* ============================================================
   SEC-HEAD (subtitle, title, description) - RESPONSIVE
   ============================================================ */
@media screen and (max-width: 991px) {
    .sec-head h2 {
        font-size: 45px;
    }
}

@media screen and (max-width: 767px) {
    .sec-head {
        margin-bottom: 40px !important;
    }

    .sec-head h6 {
        font-size: 13px;
        letter-spacing: 4px;
    }

    .sec-head h2 {
        font-size: 30px;
        letter-spacing: 1px;
    }

    .sec-head p {
        font-size: 14px;
        max-width: 100%;
        padding: 0 10px;
    }
}

@media screen and (max-width: 575px) {
    .sec-head {
        margin-bottom: 30px !important;
    }

    .sec-head h6 {
        font-size: 12px;
        letter-spacing: 3px;
        margin-bottom: 8px;
    }

    .sec-head h2 {
        font-size: 24px;
        letter-spacing: 0;
        word-wrap: break-word;
    }

    .sec-head p {
        font-size: 13px;
        line-height: 1.7;
        padding: 0 5px;
    }
}

@media screen and (max-width: 400px) {
    .sec-head h2 {
        font-size: 20px;
    }

    .sec-head h6 {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .sec-head p {
        font-size: 12px;
    }
}

/* ============================================================
   PORTFOLIO GRID-3 - RESPONSIVE
   ============================================================ */
@media screen and (max-width: 991px) {
    .po-arch .gallery.grid-3 .items .item-img,
    .po-arch .gallery.grid-3 .items .item-img img {
        height: 240px;
    }
}

@media screen and (max-width: 767px) {
    .po-arch .gallery.grid-3 .items {
        margin-bottom: 20px;
    }

    .po-arch .gallery.grid-3 .items .item-img,
    .po-arch .gallery.grid-3 .items .item-img img {
        height: 220px;
        border-radius: 10px;
    }
}

@media screen and (max-width: 575px) {
    .po-arch .gallery.grid-3 .items .item-img,
    .po-arch .gallery.grid-3 .items .item-img img {
        height: 200px;
        border-radius: 8px;
    }

    .po-arch .gallery.grid-3 .items .cont {
        padding: 12px 0;
    }

    .po-arch .gallery.grid-3 .items .cont h5 {
        font-size: 14px;
    }
}

/* ============================================================
   ABOUT PAGE (about.html) - RESPONSIVE
   ============================================================ */
@media screen and (max-width: 991px) {
    .about-cr .img {
        margin-bottom: 40px;
    }

    .team-crv .content {
        margin-bottom: 40px;
    }

    .team-crv .img {
        width: 100%;
    }

    .skills-box .skill-item h6 {
        font-size: 14px;
    }

    .testim-box .head-box h4 {
        font-size: 22px;
    }
}

@media screen and (max-width: 767px) {
    .pages-header .cont h1 {
        font-size: 28px;
    }

    .pages-header .cont p {
        font-size: 14px;
    }

    .about-cr .content h3 {
        font-size: 24px;
    }

    .team-crv .content h3 {
        font-size: 24px;
    }

    .testim-box .slic-item .item p {
        font-size: 14px;
    }
}

@media screen and (max-width: 575px) {
    .pages-header {
        min-height: 50vh;
    }

    .pages-header .cont h1 {
        font-size: 22px;
    }

    .pages-header .cont p {
        font-size: 13px;
        padding: 0 10px;
    }

    .about-cr .content h3 {
        font-size: 20px;
    }

    .skills-box .skill-item h6 {
        font-size: 13px;
    }

    .testim-box .head-box h6 {
        font-size: 13px;
    }

    .testim-box .head-box h4 {
        font-size: 18px;
    }
}

/* ============================================================
   CONTACT PAGE (contact.html) - RESPONSIVE
   ============================================================ */
@media screen and (max-width: 767px) {
    .contact .info .item {
        margin-bottom: 30px;
    }

    .contact .info h5 {
        font-size: 16px;
    }

    .contact .info p {
        font-size: 14px;
    }
}

@media screen and (max-width: 575px) {
    .contact .info h5 {
        font-size: 15px;
    }

    .contact .info p {
        font-size: 13px;
    }

    .contact .info .social a {
        width: 35px;
        height: 35px;
        line-height: 35px;
    }
}

/* ============================================================
   LARGE DESKTOP (1200px+) - FINE-TUNE
   ============================================================ */
@media screen and (min-width: 1200px) {
    .po-arch .gallery.grid-3 .items .item-img,
    .po-arch .gallery.grid-3 .items .item-img img {
        height: 300px;
    }
}

/* ============================================================
   LANDSCAPE ORIENTATION FIXES
   ============================================================ */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .arch-slider {
        min-height: 100vh;
    }

    .arch-slider .caption h1 {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .arch-slider .caption p {
        font-size: 13px;
        margin-bottom: 15px;
    }

    .arch-slider .slider-badge {
        margin-bottom: 10px;
    }
}

/* ============================================================
   SAFE AREA (iPhone notch) SUPPORT
   ============================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
    .whatsapp-float {
        bottom: calc(20px + env(safe-area-inset-bottom));
        left: calc(20px + env(safe-area-inset-left));
    }

    footer {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }

    .navbar {
        padding-top: env(safe-area-inset-top);
    }
}