/* ==========================================================================

   MODERN RESPONSIVE CSS MEDIA QUERIES

   ========================================================================== */



/* Base styles (Mobile First - 320px+) */



/* ==========================================================================

   BREAKPOINT VARIABLES (for reference)

   ========================================================================== */

/*

  xs: 0px (default - mobile first)

  sm: 576px (small devices)

  md: 768px (tablets)

  lg: 992px (laptops)

  xl: 1200px (desktops)

  xxl: 1400px (large desktops)

*/



/* ==========================================================================

   SMALL DEVICES (Landscape phones, 576px and up)

   ========================================================================== */

@media (max-width: 576px) {

  .container {

  width: 100%;

  padding: 0 16px;

  margin: 0 auto;

}



  .nri-contact .d-flex{

   display: block!important;

  }

  .nri-contact .d-flex button{

    width: 100%;

    margin-bottom: 0.5rem;

  }

}



/* ==========================================================================

   MEDIUM DEVICES (Tablets, 768px and up)

   ========================================================================== */

@media (min-width: 768px) {

 

}



/* ==========================================================================

   LARGE DEVICES (Laptops/Desktops, 992px and up)

   ========================================================================== */

@media (min-width: 992px) {

  .container {

    max-width: 960px;

    padding: 0 32px;

  }

  

  .grid {

    grid-template-columns: repeat(4, 1fr);

    gap: 2rem;

  }

  

  .text-lg-2xl {

    font-size: 1.5rem;

  }

  

  .sidebar-layout {

    display: grid;

    grid-template-columns: 250px 1fr;

    gap: 2rem;

  }

}



/* ==========================================================================

   EXTRA LARGE DEVICES (Large Desktops, 1200px and up)

   ========================================================================== */

@media (min-width: 1200px) {

  .container {

    max-width: 1140px;

    padding: 0 40px;

  }

  

  .grid {

    grid-template-columns: repeat(6, 1fr);

    gap: 2.5rem;

  }

  

  .text-xl-3xl {

    font-size: 1.875rem;

  }

  

  .sidebar-layout {

    grid-template-columns: 300px 1fr;

    gap: 3rem;

  }

}



/* ==========================================================================

   EXTRA EXTRA LARGE DEVICES (Large Desktops, 1400px and up)

   ========================================================================== */

@media (min-width: 1400px) {

  .container {

    max-width: 1320px;

    padding: 0 48px;

  }

  

  .grid {

    gap: 3rem;

  }

  

  .text-xxl-4xl {

    font-size: 2.25rem;

  }

}



/* ==========================================================================

   CUSTOM BREAKPOINTS

   ========================================================================== */



/* Ultra-wide screens (1600px+) */

@media (min-width: 1600px) {

  .container {

    max-width: 1500px;

  }

  

  .ultra-wide-grid {

    grid-template-columns: repeat(8, 1fr);

  }

}



/* ==========================================================================

   DEVICE-SPECIFIC QUERIES

   ========================================================================== */



/* Tablets in portrait mode */

@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {

.exp-onging .col-md-4{

  width: 50%!important;

}

.complete-prj .col-md-4{

  width: 50%!important;

}

    .meet-founder .col-md-6{

    width: 100%!important;

  }

     .meet-founder .col-md-6:last-child article {

    margin-top: 1rem;

}

  .tablet-portrait {

    grid-template-columns: repeat(2, 1fr);

  }

   .exp-project-card{

        margin-bottom: 2rem!important;

    }

    .project-price-card::before, .project-price-card::after{

      height: 66px;

    }

    .what-apart article img{

      width: 84px;

    }

    .what-apart article{

     min-height: 320px;

    }

    .what-apart .main-button{

      width: auto;

    }

    .build-today .col-md-1{

      display: none;

    }

    .build-today .col-md-4, .col-md-6{

      width: 50%;

    }

    .invest{

      padding-bottom: 0;

    }

    .your-mother .parent-three {

      display: block;

    }

    .your-mother .parent-three .grid{

      margin-bottom: 2rem;

    }

    .your-mother .parent-three .grid:last-child{

      margin-bottom: 0;

    }

    .your-mother .parent-five {

      padding-top: 0;

      display: block;

    }

    .your-mother .parent-five .grid{

      margin-bottom: 2rem;

    }



    

}



/* Tablets in landscape mode */

@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {

  .tablet-landscape {

    grid-template-columns: repeat(4, 1fr);

  } 



}

/* Mobile landscape */

@media (max-width: 767px) {

  .emi-cal .modal-dialog .modal-content {

    margin-top: 0!important;

  }

  .whatsapp-container {

    bottom: 53px!important;

  }

  .contact-location h4{

    padding-top: 1rem;

  }

  .contact-location .custom-arrows{

    top: 12px!important;

  }

  .contact-location{

    padding-top: 0;

  }

  .contact-details h4{

    padding-top: 3rem;

  }

  .contact-details .col-md-6:first-child{

    padding: 0 1rem;

  }

     .exp-project-card{

        margin-bottom: 2rem!important;

    }

  .exp-project-grid{

    display: block;

  }

  .exp-project-form{

    margin: 0;

  }

  .modal.show .modal-dialog{

    margin-top: 5rem;

  }

  .project-location{

    padding-top: 0;

  }

  .project-price-card{

    border-radius: 30px;

    -webkit-border-radius: 30px;

    -moz-border-radius: 30px;

    -ms-border-radius: 30px;

    -o-border-radius: 30px;

    top: 0;

    margin-top: 1rem;

}

  .ribbon{

    display: none;

  }

  .project-price-card::before,

.project-price-card::after{

  display: none;

}

  .parent-five, .parent-three{

    display: block!important;

  }

  .parent-three .grid{

    display: block!important;

    margin-bottom: 1rem;

  }

  .parent-three .grid:last-child{

    margin-bottom: unset!important;

  }

  .your-mother .parent-five{

    padding-top: 0!important;

  }

  .parent-five .grid{

    display: block!important;

    margin-bottom: 1rem;

  }

  .invest{

    padding-bottom: 0;

  }

  .build-today{

    padding-left: 1rem;

    padding-right: 1rem;

  }

  .build-today .col-md-6 p:first-child{

    padding: 1rem 0;

  }

  .what-apart .main-button{

    width: unset!important;

    margin-bottom: 1rem;

  }

  .what-apart p{

    padding: 0 0 1rem;

  }

  .what-apart article{

    margin-bottom: 1rem;

  }

  .what-apart .heading h3{

    margin-bottom: 0;

  }

  .why-choose,.what-apart {

    padding: 0 1rem;

  }

  .parent-grid{

    display: block;

  }

  .meet-founder  .col-md-6:last-child article {

    margin-top: 1rem;

  }



.meet-founder article{



  min-height: unset;

}

.onarrow-mob .swiper-button-next:after, .onarrow-mob .swiper-button-prev:after{

  display: none;

}



  .overlay-content{

    width: 100%;

    margin: 0;

  }

  .ongoing .overlay-content .arrow{

    float: unset;

  }

  .drop-bar-style{

   display: block;

   width: 80%;

   padding: 1rem;

   box-shadow: rgba(255, 255, 255, 0.04) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.9) 0px 30px 60px -30px;

  }

  .drop-button{

    width: 100%;

    margin:1rem 0;

  }

  .drop-button img {

  transform: translateX(27px);

  left: unset!important;



}

.why-us h4{

    font-size: 2rem;

}



.homeowners .swiper-slide{

    width: inherit!important;

}

.testi-card{

    margin: 0 1rem;

}

.testi-card .quote{

    width: 32px;

}

.testi-card .img-group img{

    height: 55px;

}

.blog-card{

    margin-bottom: 1rem;

}

.mob-center{

    text-align: center;

}

.mob-center img{

    width: 160px!important;

    padding-bottom: 1rem;

}

.mob-width{

    width: 50%;

    padding: 1rem;

}

.mx-auto{

  margin-right: unset!important;

  margin-left: unset!important;

}

}



/* ==========================================================================

   HIGH DPI / RETINA DISPLAYS

   ========================================================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

  .retina-image {

    background-image: url('image@2x.jpg');

    background-size: contain;

  }

}



/* ==========================================================================

   PREFER REDUCED MOTION

   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  * {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

  }

}









/* ==========================================================================

   CONTAINER QUERIES (Modern browsers)

   ========================================================================== */

@container (min-width: 400px) {

  .card-responsive {

    display: flex;

    flex-direction: row;

  }

}



@container (min-width: 600px) {

  .card-responsive .content {

    flex: 1;

    padding: 2rem;

  }

}