/* ============================================================
   responsive.css — Mobile First Breakpoints
   Author  : Touhid Aktar
   Method  : Mobile First (min-width)
   Default : xs — Extra Small (0px → 575px) — No query needed
   ============================================================ */

/* ============================================================
   [sm] Small — min-width: 576px
   📱 Large mobile / Portrait tablet
   ============================================================ */
@media (min-width: 576px) {
   .gallery-gride {
      columns: 2;
   }
}

/* ============================================================
   [md] Medium — min-width: 768px
   📟 Tablet / Landscape mobile
   ============================================================ */
@media (min-width: 768px) {
   .navbar-brand img {
      width: 60px;
   }

   .why-choose-us-main {
      padding: 60px 25px;
   }

   .why-choose-us-item {
      display: flex;
      align-items: center;
   }

   .why-choose-us-heading {
      width: 75%;
   }

   .why-choose-us-item-content {
      width: 52%;
   }

   #painting-service {
      margin: 60px 0px 80px 0px;
   }

   .painting-service-heading {
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   .painting-service-heading-text {
      width: 65%;
   }

   #interior-service {
      padding: 60px 0px 80px 0px;
   }

   #enquiry-form {
      margin: 60px 0px;
   }

   #about {
      padding: 60px 0;
   }

   .about-heading {
      margin-bottom: 36px;
   }

   .about-main img {
      float: left;
      width: 350px;
      margin-right: 25px;
      margin-bottom: 10px;
   }

   .about-main::after {
      content: "";
      display: table;
      clear: both;
   }

   #counter {
      padding: 60px 0;
   }

   #counter .counter-main {
      grid-template-columns: repeat(2, 1fr);
   }

   #counter .counter-item {
      padding: 15px 0px;
   }

   #gallery {
      margin: 60px 0;
   }

   .gallery-grid {
      columns: 3;
      column-gap: 14px;
   }

   .gallery-item {
      margin-bottom: 14px;
   }

   .gallery-item-overlay {
      opacity: 1;
      background: linear-gradient(to top, rgba(26, 26, 26, 0.6) 0%, transparent 50%);
   }

   .gallery-item:hover .gallery-item-overlay {
      background: linear-gradient(to top, rgba(26, 26, 26, 0.88) 0%, transparent 60%);
   }

   .gallery-btn {
      margin-top: 25px;
   }

   #enquiry-form {
      padding: 60px 0;
   }

   .enquiry-form-main {
      grid-template-columns: 1fr 1.4fr;
      gap: 60px;
      align-items: center;
   }

   .enquiry-form-box {
      padding: 40px 32px;
   }

   #review {
      padding: 60px 0;
   }

   .review-btn {
      flex-direction: row;
      justify-content: center;
   }

   #cta {
      margin-top: 60px;
      padding: 30px 25px;
   }

   .cta-main {
      flex-direction: row;
      justify-content: space-between;
   }

   .cta-left {
      align-items: flex-start;
      gap: 0px;
   }

   .cta-left p {
      margin: 0px;
   }

   #footer {
      padding-top: 60px;
   }

   .footer-bottom {
      flex-direction: row;
      justify-content: space-between;
      text-align: left;
      padding: 16px 28px;
   }

   .sub-banner-image {
      height: 50vh;
   }

   #service {
      margin: 60px 0px;
   }

   .service-main {
      grid-template-columns: repeat(2, 1fr);
   }

   #gallery-main {
      margin: 60px 0px;
   }

   .gallery-main {
      grid-template-columns: repeat(2, 1fr);
   }

   .contact-map {
      display: flex;
      flex-direction: row;
      gap: 20px;
   }
}

/* ============================================================
   [lg] Large — min-width: 992px
   💻 Small laptop / Desktop
   ============================================================ */
@media (min-width: 992px) {
   .navbar-brand img {
      width: 75px;
   }

   .dropdown-menu {
      display: none;
      border-radius: 10px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
   }

   .navbar .dropdown:hover .dropdown-menu {
      display: block;
   }

   .banner-item {
      height: 100vh;
   }

   .why-choose-us-main {
      padding: 80px 25px;
   }

   .why-choose-us-heading {
      width: 50%;
   }

   .why-choose-us-item-content {
      width: 35%;
   }

   #painting-service {
      margin: 80px 0px 100px 0px;
   }

   .painting-service-heading-text {
      width: 45%;
   }

   #interior-service {
      padding: 80px 0px 100px 0px;
   }

   #enquiry-form {
      margin: 80px 0px;
   }

   #about {
      padding: 80px 0;
   }

   #counter {
      padding: 80px 0;
   }

   #counter .counter-main {
      grid-template-columns: repeat(4, 1fr);
   }

   #counter .counter-item {
      padding: 25px 0px;
   }

   #gallery {
      margin: 80px 0;
   }

   .gallery-grid {
      columns: 4;
      column-gap: 16px;
   }

   .gallery-item {
      margin-bottom: 16px;
   }

   .gallery-item-overlay {
      opacity: 0;
   }

   .gallery-item:hover .gallery-item-overlay {
      opacity: 1;
   }

   #enquiry-form {
      padding: 80px 0;
   }

   .enquiry-form-box {
      padding: 48px 40px;
   }

   #review {
      padding: 80px 0;
   }

   .about-main img {
      width: 50%;
   }

   #cta {
      margin-top: 80px;
   }

   #footer {
      padding-top: 80px;
   }

   .footer-main {
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
      gap: 40px;
      padding: 0 40px 56px;
   }

   .sub-banner-image {
      height: 65vh;
   }

   #service {
      margin: 80px 0px;
   }

   .service-main {
      grid-template-columns: repeat(3, 1fr);
   }

   #gallery-main {
      margin: 80px 0px;
   }

   .gallery-main {
      grid-template-columns: repeat(3, 1fr);
   }
}

/* ============================================================
   [xl] Extra Large — min-width: 1200px
   🖥️ Large desktop
   ============================================================ */
@media (min-width: 1200px) {}

/* ============================================================
   [xxl] 2X Large — min-width: 1400px
   🖥️ Widescreen / 4K monitor
   ============================================================ */
@media (min-width: 1400px) {}