/* =========================================================
   RESPONSIVE STYLES
   =========================================================
   
   Mobile-first approach with breakpoints organized from
   largest (1299px) to smallest (380px) screens.
   
   Uses CSS variables defined in styles.css for consistent
   responsive adjustments across all breakpoints.
   
   Breakpoint Reference:
   - 1399px and down   : Up Large Desktop adjustments
   - 1299px and down   : Large Desktop adjustments
   - 1199px and down   : Laptop/Large Tablet adjustments
   - 991px and down    : Tablet adjustments
   - 767px and down    : Mobile Large adjustments
   - 575px and down    : Mobile adjustments
   - 480px and down    : Small Mobile adjustments
   - 380px and down    : Extra Small Mobile adjustments
   
   ========================================================= */


/* =========================================================
   BREAKPOINT: ≤1299px (Large Desktop)
   =========================================================
   
   Subtle adjustments for screens transitioning from full
   desktop to large laptop size. Mainly padding reductions
   and spacing tweaks.
   
   ========================================================= */

@media (max-width: 1399px) {

}
@media (max-width: 1299px) {
    /* footer section start */
	.footer-inner .row {
        --bs-gutter-x: clamp(24px, 4vw, 50px);
    }
    .footer-about {
        max-width: clamp(300px, 70vw, 400px);
    }
    /* footer section start */

}


/* =========================================================
   BREAKPOINT: ≤1199px (Laptop)
   =========================================================
   
   Significant layout adjustments for traditional laptop
   screens. Menu spacing reduced, layout shifts to column
   stacking for certain sections.
   
   ========================================================= */

@media (max-width: 1199px) {


}


/* =========================================================
   BREAKPOINT: ≤991px (Tablet)
   =========================================================
   
   Major responsive changes for tablet devices. Typography
   scales down, layout changes to single column for many
   sections, padding/margins reduced.
   
   ========================================================= */

@media (max-width: 991px) {

    /*  */
    .project-details-wrapper .col,
    .project-details-wrapper .col-auto{
        flex: 1 0 100%;
    }
    /*  */

	/* footer section start */
    .footer-inner .col-auto,
    .footer-inner .col{
        flex: 1 0 50%;
    }
    .footer-col--about {
        margin-right: 0;
    }
    .footer-about {
        max-width: 100%;
    }
	/* footer section end */

}


/* =========================================================
   BREAKPOINT: ≤767px (Mobile Large)
   =========================================================
   
   Tablet-to-mobile transition. Significant typography
   reduction, layout adjustments, and spacing changes.
   Navigation moves to hamburger menu primarily.
   
   ========================================================= */

@media (max-width: 767px) {

	/* footer section start */
    .footer-bottom .col,
    .footer-inner .col-auto,
    .footer-inner .col{
        flex: 1 0 100%;
    }
	/* footer section start */
}


/* =========================================================
   BREAKPOINT: ≤575px (Mobile)
   =========================================================
   
   Compact mobile view. Smaller logo, reduced button sizes,
   further spacing reductions. Optimized for phone screens.
   
   ========================================================= */

@media (max-width: 575px) {

	

}


/* =========================================================
   BREAKPOINT: ≤480px (Small Mobile)
   =========================================================
   
   Very small phones (e.g., iPhone SE, older devices).
   Aggressive typography reduction and spacing adjustments.
   Single-column layout prioritized.
   
   ========================================================= */

@media (max-width: 480px) {

	

}


/* =========================================================
   BREAKPOINT: ≤380px (Extra Small Mobile)
   =========================================================
   
   Minimum breakpoint for smallest mobile devices and
   unusual aspect ratios. Final typography reduction and
   layout optimization.
   
   ========================================================= */

@media (max-width: 380px) {


}

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