/* ======================================================
   RESPONSIVE FIXES FOR ALL BREAKPOINTS
====================================================== */

/* --- 1366px (Laptop) --- */
@media only screen and (max-width: 1366px) {

   /* General spacing adjustments for smaller laptops */

   .about-section,
   .our-clients-section,
   .testimonial-section,
   .our-services-section {
      padding: 60px 0 60px 0 !important;
   }

   /* Testimonial Fixes */
   .testimonial-badge-top {
      left: 30px;
   }

   .testimonial-badge-bottom {
      right: 30px;
   }

   .testimonial-content {
      padding-left: 30px;
   }

   .testimonial-title {
      font-size: 40px;
   }

   .about-paragraph-detail {
      font-size: 14px;
   }
}

/* --- 1200px+ (Large Desktop Enhancements) --- */
@media (min-width: 1200px) {
   .sustainable-section {
      min-height: 500px;
   }

   .sustainable-title {
      font-size: 60px;
   }

   .sustainable-title .text-transparent-outline {
      font-size: 70px;
   }
}

/* --- 992px+ (Desktop Section Ordering) --- */
@media (min-width: 992px) {
   .sustainable-left-col {
      order: 1;
      margin-top: 0;
   }

   .sustainable-right-col {
      justify-content: flex-end;
      order: 2;
   }
}

/* --- 992px (Tablet Landscape / Small Laptop) --- */
@media only screen and (max-width: 992px) {
   .whatsapp-float {
      bottom: 80px;
   }

   .whatsapp-float img {
      width: 30px;
      /* Adjust size */
      height: 30px;
   }

   .footer-header h3 {
      font-size: 24px;
   }

   .recent-projects-section {
      padding: 60px 0px 30px 0px;
   }

   .work-card {
      min-height: 300px;
   }

   .main-footer-box {
      padding: 30px 0px;
   }

   .newsletter-button {
      font-size: 15px;
   }

   .blankspace-section {
      padding: 70px;
   }

   .footer-section {
      padding: 28px 30px 40px;
   }

   .footer-contact {
      margin-bottom: 20px;
   }

   .about-quick-links,
   .about-services,
   .newsletter {
      /* margin-top:30px; */
      text-align: center;
   }

   .newsletter {
      max-width: 100%;
   }


   /* Header & Navigation Fixes */
   .header-nav {
      display: none !important;
   }

   .navbar-toggler {
      display: inline-block !important;
   }

   /* Typography Scaling */
   .hero-title {
      font-size: 38px !important;
      line-height: 1.2 !important;
   }

   .section-title,
   .services-title {
      font-size: 38px !important;
   }

   /* Layout Adjustments */
   .about-images-wrapper {
      margin-bottom: 40px;
      padding-right: 40px;
      padding-bottom: 50px;
      max-width: 500px;
      margin: 0 auto;
   }

   .about-content {
      padding: 0px 0px 0px 20px;
   }

   .about-img-sub {
      width: 200px;
      height: 220px;
   }

   /* Works Section */
   .our-works-img {
      width: 100%;
   }

   .our-works-image-wrapper {
      margin-top: 50px;
      margin-right: 20px;
   }

   .our-works-blue-box {
      top: 20px;
      right: -20px;
      bottom: -20px;
      left: 20px;
   }

   /* Stats & Grids */
   .about-stats {
      flex-wrap: wrap;
      gap: 15px;
   }

   /* Testimonial Alignment */
   .testimonial-img-wrapper {
      margin-bottom: 40px;
   }

   .testimonial-title {
      font-size: 36px;
   }

   /* Sliders & Carousels Height */
   .client-logo-box {
      height: 120px !important;
   }

   .service-slide-box {
      height: 150px !important;
   }

   /* Blog Cards */
   .blog-card .blog-title {
      font-size: 18px;
   }

   .work-text{
      font-size: 14px;
   }

   .testimonial-text{
      font-size: 16px;
   }

   .contact-section-title{
      font-size: 36px;
   }

   .contact-paragraph{
      font-size: 14px;
   }

   .blog-card-normal {
      height: 240px;
   }
}


/* --- 991px (Tablet / Below Desktop) --- */
@media (max-width: 991px) {
   /* FAQ and Recent Projects */
   .faq-image {
      min-height: 360px;
   }

   .faq-accordion {
      padding: 50px 30px;
      min-height: auto;
   }

   .faq-title {
      font-size: 38px;
   }

   .rp-title {
      font-size: 36px;
   }
}

/* --- 768px (Tablet Portrait) --- */
@media only screen and (max-width: 768px) {

   .footer-ad {
      justify-content: center;
   }

   .about-quick-links,
   .newsletter {
      padding: 20px 0px;
   }

   .testimonial-content {
      padding-left: 0;
      margin-top: 0px;
   }

   .p-i-boxe {
      height: auto;
      aspect-ratio: 4 / 3;
   }

   .our-imagination-section .title-divider {
      margin: 0px 0px 30px 0px;
   }

   .about-services {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px;
   }

   .about-quick-links {
      margin: 0px 0px 0px 0px;
   }

   .about-content-one {
      text-align: center;
      max-width: max-content;
   }

   .about-icon {
      justify-content: center;
   }

   /* Hero Section */
   .hero-slider-section {
      height: 70vh;
   }

   .hero-title {
      font-size: 32px !important;
   }

   .hero-subtitle {
      font-size: 16px !important;
   }

   .hero-desc {
      font-size: 14px !important;
   }

   /* Section Titles */
   .section-title,
   .clients-title,
   .services-title {
      font-size: 36px !important;
   }

   .sustainable-title-top {
      font-size: 36px;
   }

   .about-title {
      font-size: 36px !important;
   }

   /* About section */
   .about-stats {
      flex-wrap: wrap;
      gap: 20px;
   }

   .stat-divider {
      display: none;
   }

   .stat-item {
      width: 45%;
      margin-bottom: 15px;
   }

   .about-img-main {
      height: 350px;
   }

   .about-img-sub {
      width: 160px;
      height: 180px;
   }

   /* Cards Adjustments */
   .blog-card-normal,
   .blog-card-tall {
      margin-bottom: 25px;
   }

   .blog-card-normal,
   .blog-card-tall {
      height: 300px;
   }

   /* Sliders Adjustments */
   .client-logo-box {
      height: 100px !important;
   }

   .service-slide-box {
      height: 120px !important;
   }

   /* Sidebar */
   .right-sidebar {
      padding: 15px 8px;
      gap: 12px;
   }

   .right-sidebar .social-link {
      font-size: 16px;
      width: 25px;
      height: 25px;
   }

   /* Contact */
   .contact-form-wrapper {
      padding: 25px;
      margin: 0px 0px 30px 0px;
   }

   /* Footer Layout Fixes */
   .footer-widget {
      margin-bottom: 30px;
   }

   /* Inner Pages Fixes */
   .inner-banner-section {
      padding: 60px 0 !important;
      height: 300px;
   }

   .inner-banner-section .banner-title,
   .banner-title {
      font-size: 36px !important;
   }

   .imagination-title {
      font-size: 40px;
   }

   .stat-number span {
      font-size: 40px;
   }

   .imagination-stat-item .stat-number {
      font-size: 40px;
   }

   .textimonial-text {
      font-size: 16px;
   }

   /* Sustainable Section */
   .sustainable-badge {
      top: -20px;
      right: 0;
      width: 100px;
      height: 100px;
   }

   .badge-inner-circle {
      width: 40px;
      height: 40px;
   }

   .badge-inner-circle i {
      font-size: 18px !important;
   }

   .badge-text-circle svg {
      width: 100px;
      height: 100px;
   }

   .sustainable-title {
      font-size: 32px;
   }

   .sustainable-title .text-transparent-outline {
      font-size: 36px;
   }

   .sustainable-content {
      margin-top: 10px;
   }

   /* Clients Section */
   .client-logo-card {
      width: 140px;
      height: 72px;
      padding: 10px 14px;
   }

   .clients-marquee-wrap::before,
   .clients-marquee-wrap::after {
      width: 60px;
   }

   .faq-title{
      font-size: 36px;
   }
}

/* --- 720px (Small Tablet / Large Mobile) --- */
@media (max-width: 720px) {
   .blankspace-section {
      padding: 60px 40px;
   }

   .footer-section {
      padding: 28px 20px 40px;
   }

   .logo-side {
      justify-content: center;
      margin-bottom: 20px;
   }

   .footer-contact {
      align-items: flex-start;
   }

   .about-content {
      max-width: 100%;
   }

   .newsletter-form {
      width: 65%;
   }

   .newsletter-button {
      width: 35%;
   }

   .last-part .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   .lp-content p,
   .lp-content a {
      white-space: nowrap;
   }
}

/* --- 576px (Large Mobile / Small Devices) --- */
@media only screen and (max-width: 576px) {
   .about-title {
      text-align: left;
   }

   /* Work card adjustments */
   .work-card {
      margin: 0px 0px 0px 0px !important;
      /* min-height: 250px; */
      height: auto;
   }

   .owl-dots {
      display: none;
   }

   .footer-social-icons {
      margin: 0px 0px 20px 0px;
   }

   .recent-projects-section .recent-projects-title {
      font-size: 40px;
   }

   .about-services-section .about-services-title {
      font-size: 40px;
   }

   .upcoming-projects-section .upcoming-projects-title {
      font-size: 40px;
   }

   .our-team-section .team-title {
      font-size: 40px;
   }

   .p-i-box img {
      width: 100%;
   }

   .lp-content {
      text-align: left !important;
   }

   .our-works-image-wrapper {
      margin-right: 0px !important;
   }

   .projects-swiper {
      padding: 0px 0px 0px 0px;
   }

   .about-content {
      padding: 0px !important;
   }

   .project-img-box {
      height: auto;
      aspect-ratio: 4 / 3;
   }

   .testimonial-section {
      padding: 40px 0px 30px 0px !important;
   }

   .testimonial-img-wrapper {
      margin: 0px 0px 20px 0px;
   }

   .about-img-overlay {
      display: none;
   }

   /* 1. Typography Adjustments */
   .hero-title {
      font-size: 32px !important;
      line-height: 1.3 !important;
   }

   .section-title,
   .clients-title,
   .services-title {
      font-size: 34px !important;
      line-height: 1.3 !important;
   }

   p,
   .about-text,
   .work-text,
   .testimonial-text {
      font-size: 15px !important;
      line-height: 1.6 !important;
   }

   /* 2. Navigation & Header */
   /* Ensure hamburger menu is accessible and correctly sized */
   .navbar-toggler {
      padding: 8px 12px;
      font-size: 20px;
   }

   /* 3. Grid & Layout Stacking */
   /* Force elements to stack vertically instead of sitting side-by-side */


   .col-lg-6,
   .col-md-6,
   .col-sm-6,
   .col-12 {
      width: 100% !important;
      flex: 0 0 100% !important;
      max-width: 100% !important;
      margin-bottom: 0px !important;
   }

   /* 4. Images */
   /* Fluid images to prevent horizontal overflow */
   img,
   .img-fluid {
      max-width: 100% !important;
      height: 100% !important;
      display: block;
      /* Removes bottom space */
   }

   .about-images-wrapper {
      padding-right: 0 !important;
      /* Remove right padding to fit screen */
      margin-bottom: 30px;
   }

   /* 5. Cards & Content Boxes */
   .work-card,
   .about-service-card,
   .contact-info-card,
   .blog-card {
      margin-bottom: 20px;
      /* Consistent spacing between stacked cards */
      /* padding: 20px !important; */
      /* comfortable padding */
   }

   .blog-card {
      padding: 0px !important;
   }

   /* 6. Buttons */
   .btn-more-about,
   .btn-send-message,
   .read-more-btn {
      width: 100%;
      /* Full width buttons on mobile */
      text-align: center;
      display: block;
      padding: 12px 20px;
      font-size: 16px;
   }

   .book-now-btn {
      display: none !important;
      /* Hidden to save header space */
   }

   /* 7. Specific Component Fixes */

   /* Stats: Stack vertically */
   .about-stats,
   .imagination-stats-row {
      flex-direction: column;
      align-items: center;
      gap: 15px;
      text-align: center;
   }

   .stat-divider,
   .border-end,
   .border-bottom {
      /* display: none !important; */
      /* Remove borders for stacked layout */
   }

   .stat-item,
   .imagination-stat-item {
      width: 100% !important;
   }

   /* Sliders: Reduce height */
   .client-logo-box,
   .service-slide-box {
      height: auto !important;
      margin-bottom: 15px;
   }

   /* Testimonial adjustments */
   .testimonial-main-img {
      aspect-ratio: 4 / 3;
      min-height: 280px;
      max-height: 420px;
   }

   .testimonial-badge-top,
   .testimonial-badge-bottom {
      display: none;
      /* Hide floating badges to save screen space */
   }

   .testimonial-title {
      font-size: 26px;
      /* text-align: center; */
   }

   .testimonial-text {
      text-align: justify;
   }

   /* Form Fields */
   .contact-form .form-control {
      margin-bottom: 15px;
      font-size: 16px;
      /* Prevents iOS zoom on focus */
   }

   /* Map spacing */
   .contact-map-section iframe {
      height: 300px !important;
   }

   /* 8. Extra Index Page Constraints */
   .imagination-title {
      font-size: 30px;
      line-height: 1.4;
   }

   .watermark-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: center;
      margin-bottom: 25px;
   }

   .our-works-image-wrapper img {
      width: 100%;
      height: auto;
   }

   .title-divider {
      justify-content: flex-start !important;
   }

   .text-center .title-divider {
      justify-content: center !important;
   }
}

/* --- 575px (Mobile / Extra Small Devices) --- */
@media (max-width: 575px) {
   .main-footer-box {
      padding: 10px 0px;
   }

   .blankspace-section {
      padding: 50px 20px;
   }

   .footer-section {
      padding: 30px 15px;
   }

   .footer-contact {
      flex-direction: column;
      align-items: center;
      text-align: center;
   }

   .footer-icon {
      margin-bottom: 10px;
   }

   .about-icon {
      flex-wrap: wrap;
   }

   .about-icon-div {
      margin-bottom: 10px;
   }

   .newsletter-form {
      width: 60%;
      padding: 10px 15px;
   }

   .newsletter-button {
      width: 40%;
      font-size: 16px;
      padding: 14px 10px;
   }

   .lp-content {
      text-align: center;
      margin-bottom: 10px;
   }

   .text-end {
      text-align: center !important;
   }

   .clients-badge {
      font-size: 11px;
      padding: 6px 12px 6px 8px;
   }

   /* FAQ Section */
   .faq-accordion {
      padding: 40px 20px;
   }

   .faq-title {
      font-size: 30px;
   }

   /* Recent Projects */
   .rp-title {
      font-size: 26px;
   }

   .rp-card-img {
      height: 220px;
   }

   .rp-btn {
      padding: 8px 15px;
      font-size: 14px;
      font-weight: 600;
   }
}

/* --- 320px (Very Small Mobile / Small Phones) --- */
@media only screen and (max-width: 320px) {
   .work-card {
      /* min-height: 250px; */
      min-height: 340px;
   }

   .imagination-stat-item .stat-number {
      font-size: 40px;
   }

   .about-img-sub {
      display: none;
   }

   .about-images-wrapper {
      padding: 0px 0px 0px 0px;
   }

   .about-img-overlay {
      display: none;
   }

   .about-section {
      padding: 60px 0 60px 0 !important;
   }

   .blankspace-section {
      padding: 40px 10px;
   }

   .footer-section {
      padding: 25px 10px;
   }

   .footer-contact-h4 h5 {
      font-size: 20px;
   }

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

   .about-heading h5,
   .about-quick-links h5,
   .services-heading h5,
   .newsletter h3 {
      font-size: 20px;
   }

   .newsletter-form {
      width: 58%;
      font-size: 14px;
   }

   .newsletter-button {
      width: 42%;
      font-size: 14px;
      padding: 12px 8px;
   }



   .project-img-box {
      height: auto;
      aspect-ratio: 4 / 3;
   }

   .quote-icon svg {
      width: 30px !important;
      height: 30px !important;
   }

   .testimonial-main-img {
      aspect-ratio: 4 / 5;
      min-height: 220px !important;
      max-height: 320px;
   }

   /* 1. Extremely small screen typography */
   .hero-title {
      font-size: 28px !important;
      text-align: left;
   }

   .section-title,
   .clients-title,
   .services-title {
      font-size: 40px !important;
      margin-bottom: 15px !important;
   }

   .clients-title {
      font-size: 26px;
   }

   .btn-more-about {
      margin: 0px 0px 0px 0px !important;
   }

   .ab-con p,
   .about-text {
      font-size: 14px !important;
      margin: 0px 0px 20px 0px;
   }

   /* 2. Sliders & Elements */
   .client-logo-box,
   .service-slide-box {
      /* height: 140px !important; */
   }

   /* 3. Button tweaks */
   .btn-more-about,
   .btn-send-message {
      padding: 10px 15px;
      font-size: 15px;
   }

   /* 4. Global Spacing Reduction */
   .py-5,
   .section-padding {
      padding-top: 1.5rem !important;
      padding-bottom: 1.5rem !important;
   }

   /* .mb-5 {
      margin-bottom: 1.5rem !important;
   } */

   /* Tighter padding on cards */
   
   .work-card,
   .about-service-card,
   .contact-info-card {
      padding: 15px !important;
   }

   /* 5. Extra Index Page Constraints */
   .imagination-title {
      font-size: 26px !important;
   }

   .watermark-logo {
      flex-direction: column;
      margin-top: 20px;
   }

   .counter {
      font-size: 28px !important;
   }

   .about-title {
      font-size: 26px !important;
   }

   .title-divider {
      justify-content: flex-start !important;
   }

   .text-center .title-divider {
      justify-content: center !important;
   }

   .footer-width {
      padding: 0px;
   }

   .clients-section {
      padding: 30px 0px;
   }


   .blog-section-title {
      font-size: 36px;
   }

   .our-team-section .team-title {
      font-size: 36px;
      font-weight: 600;
   }
}