/* --------------- Banner Section --------------- - START */

.carousel-inner {
    height: 88vh;
}

.carousel-item {
    height: 88vh;
}

.index-banner-image {
    object-fit: cover;
    height: 100vh;
}

.index-banner-grey-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    /* adjust opacity as needed */
    z-index: 1;
}

.index-banner-text-btn {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    padding: 2rem;
    z-index: 5;
}

.index-banner-btn {
    border: none;
    padding: 5px 10px;
    font-family: AvenirLTStd-Light;
}

.index-banner-btn a {
    text-decoration: none;
    color: black;
    font-size: large;
}

.index-banner-heading {
    font-family: AvenirLTStd-Heavy;
    font-size: 5.5rem;
}

.index-banner-subheading {
    font-family: AvenirLTStd-Light;
    font-size: 1.5rem;
}

/* --------------- Banner Section --------------- - END */




/* Carousel Banner Fonts - START  */

/* Responsiveness - START */
@media (min-width: 2560px) {

    /* .custom-padding-left {
        padding-left: 38rem !important;
    } */

}

@media (min-width: 1441px) and (max-width: 2559px) {
    /* .custom-padding-left {
        padding-left: 16rem !important;
    } */
}

/* @media (max-width: 1440px) {
    .custom-padding-left {
      padding-left: 0 !important;
    }
  } */

/* Responsiveness - END */


/* Carousel Banner Fonts - END  */

/* --------------- Three cards --------------- - START */

.custom-card-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    /* Optional spacing between cards */
}

/* Default: wide screens (3 in a row) */
.custom-card {
    flex: 1 1 30%;
    /* Or adjust as needed */
}

.quote-container h1 {
    color: grey;
    font-size: 3rem;
    /* For screens wider than 767px */
}

.quote-container p {
    color: grey;
    font-size: 1.875rem;
    /* For screens wider than 767px */
}

.quote-container {
    /* height: clamp(25rem, 65vw, 50rem); */
    height: clamp(25rem, 65vw, 40rem);
    /* Grows from 25rem up to 40rem as screen widens */
}

.image-dark-overlay {
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.0);
    z-index: 1;
}

.overlay-text {
    bottom: 0;
    left: 0;
    z-index: 2;
    color: white;
}



/* Hovering of cards - START */
.hover-inset-border {
    position: relative;
    overflow: hidden;
}

.hover-inset-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 10px solid rgba(225, 225, 225, 0.659);
    transform: scale(1.2);
    /* Start larger */
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
    box-sizing: border-box;
}

.hover-inset-border:hover::before {
    transform: scale(1);
    opacity: 1;
}

/* Hovering of cards - END */

/* Three cards section - START */

/* @media (min-width: 1400px) {

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        max-width: 1490px;
    }
} */

/* Three cards section - END */


/* --------------- Three cards --------------- - END */




/* --------------- Above Footer  ---------------  - START */

.quote-container {
    background-image: url('./Assets/Home Page/quote_background.png');
    /* ✅ Change this to your actual image path */
    background-size: cover;
    /* ensures the image covers the container */
    background-position: center;
    /* centers the image */
    background-repeat: no-repeat;
    /* avoids tiling */
    width: 100%;
    /* full width */
    /* min-height: 100vh; */
    min-height: 65vh;
    /* full viewport height */
    display: flex;
    /* to center content */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    /* adjust for readability */
    padding: 2rem;
}

.quote-container h1 {
    color: grey;
    font-size: 3rem;
    /* For screens wider than 767px */
}

.quote-container p {
    color: grey;
    font-size: 1.875rem;
    /* For screens wider than 767px */
}

/* Above Footer Gradient Bar - START */
.animated-gradient-bar {
    background-image: linear-gradient(90deg, rgb(41, 191, 255), rgb(162, 49, 255), rgb(13, 236, 205), rgb(41, 191, 255));
    background-repeat: repeat-x;
    background-size: 133vw 4px;
    height: 4px;
    animation: gradientScroll 4s linear infinite;
    padding-bottom: 2rem;
}

/* Above Footer Gradient Bar - END */

/* --------------- Above Footer ---------------  - END */


/* Three cards Responsiveness - START */

@media (max-width: 767px) {
    .custom-card {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .overlay-text p {
        display: none;
    }

    .quote-container h1 {
        font-size: clamp(1rem, 6vw, 2rem);
        ;
    }

    .quote-container p {
        font-size: clamp(0.75rem, 4vw, 1.25rem);
    }


}

@media (min-width: 768px) and (max-width: 1150px) {
    .custom-card {
        flex: 1 1 48%;
        /* Allow 2 per row */
        max-width: 48%;
    }

    .custom-card-row {
        justify-content: flex-start;
        /* Ensures left-alignment of wrapped cards */
    }



}

/* Three cards Responsiveness - END */

/* .custom-card .hover-inset-border {
    height: 100%;
    overflow: hidden;
}

.custom-card img{
    width: 100%;
    height: 260px;
    object-fit: cover;
} */




/*---------------------------------- RESPONSIVENESS SECTION ----------------------------------*/

/* 4K Desktop Monitor - 3840x2160 */
@media (min-width: 2561px) {

    /* Styles for 4K+ screens */
    .index-custom-padding-left {
        padding-left: 36rem;
    }

    .custom-card .hover-inset-border {
        height: 100%;
        overflow: hidden;
    }

    /*---------- Card Section ----------*/

    .overlay-text h3 {
        font-size: 3.5rem;
    }

    .overlay-text h3 {
        font-size: 1.5rem;
    }

    .quote-container {
        background-image: url('./Assets/Home Page/Quote/2560-705-20.jpg');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
    .carousel-item {
        background-image: url('./Assets/Home Page/Banner/2560-1080-10.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
}

/* Ultrawide Monitor - 2560x1080 */
@media (max-width: 2560px) {

    /* Styles for ultrawide monitors */
    .index-custom-padding-left {
        padding-left: 33rem;
    }

    /*---------- Card Section ----------*/

    .overlay-text h3 {
        font-size: 3rem;
    }

    .overlay-text p {
        font-size: x-large;
    }

    .quote-container {
        background-image: url('./Assets/Home Page/Quote/2560-705-20.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
    .carousel-item {
        background-image: url('./Assets/Home Page/Banner/2560-1080-10.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
}

/* Dell Latitude 7490 / Samsung S24C350L Monitor - 1920x1080 */
@media (max-width: 1920px) {
    /* Styles for standard monitors */

    .index-custom-padding-left {
        padding-left: 16rem;
    }

    /*---------- Card Section ----------*/

    .overlay-text h3 {
        font-size: 2.4rem;
    }

    .overlay-text p {
        font-size: large;
    }

    .quote-container {
        background-image: url('./Assets/Home Page/Quote/1920-640-19.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
    .carousel-item {
        background-image: url('./Assets/Home Page/Banner/1920-800-09.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
}

/* MacBook Pro 16" (M3) – Scaled to ~1728x1117 */
@media (max-width: 1728px) {

    /* Styles for retina laptops (can fine-tune height too) */
    .index-custom-padding-left {
        padding-left: 15rem;
    }

    /*---------- Card Section ----------*/

    .overlay-text h3 {
        font-size: 2rem;
    }

    .overlay-text p {
        font-size: medium;
    }

    .quote-container {
        background-image: url('./Assets/Home Page/Quote/1728-640-18.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
    .carousel-item {
        background-image: url('./Assets/Home Page/Banner/1920-800-09.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
}

/* HP EliteBook 820 G3 - 1366x768 */
@media (max-width: 1366px) {
    /* Styles for smaller laptops */

    .index-custom-padding-left {
        padding-left: 9rem;
    }

    /*---------- Card Section ----------*/

    .overlay-text h3 {
        font-size: 1.6rem;
    }

    .overlay-text p {
        font-size: small;
    }

    .quote-container {
        background-image: url('./Assets/Home Page/Quote/1366-640-17.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
    .carousel-item {
        background-image: url('./Assets/Home Page/Banner/1366-760-07.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
}

/* iPad 9th Gen (Landscape) - 1080x810 approx. */
@media (max-width: 1080px) {
    /* Styles for landscape tablets or large phones */

    /*---------- Banner Section ----------*/
    .index-banner-heading {
        font-size: 5rem;
    }

    .index-banner-subheading {
        font-size: 1.3rem;
    }

    .index-banner-btn a {
        text-decoration: none;
        color: black;
        font-size: medium;
    }

    .index-custom-padding-left {
        padding-left: 4rem;
    }

    /*---------- Card Section ----------*/
    .overlay-text h3 {
        font-size: 1.6rem;
    }

    .overlay-text p {
        font-size: small;
    }

    /*---------- Quote Section - Above Footer ----------*/

    .quote-container h1 {
        font-size: 2.4rem;
    }

    .quote-container p {
        font-size: clamp(0.75rem, 4vw, 1.55rem);
    }

    .quote-container {
        background-image: url('./Assets/Home Page/Quote/1080-640-16.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
    .carousel-item {
        background-image: url('./Assets/Home Page/Banner/1080-760-06.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
}

/* iPad 9th Gen (Portrait) - 768x1024 */
@media (max-width: 768px) {
    /* Styles for portrait tablets */

    /*---------- Banner Section ----------*/
    .index-banner-heading {
        font-size: 5rem;
    }

    .index-banner-subheading {
        font-size: 1.1rem;
    }

    .index-banner-btn a {
        text-decoration: none;
        color: black;
        font-size: medium;
    }

    .index-custom-padding-left {
        padding-left: 2rem;
    }

    /*---------- Card Section ----------*/
    .overlay-text h3 {
        font-size: 1.5rem;
    }

    .overlay-text p {
        font-size: small;
    }

    .quote-container {
        background-image: url('./Assets/Home Page/Quote/768-500-15.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
    .carousel-item {
        background-image: url('./Assets/Home Page/Banner/768-760-05.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }


    /*---------- Quote Section - Above Footer ----------*/

    .quote-container h1 {
        font-size: clamp(1rem, 6vw, 2rem);
        ;
    }

    .quote-container p {
        font-size: clamp(0.75rem, 4vw, 1.45rem);
    }



}

/* iPhone 15 Plus / iPhone 15 Pro Max / Galaxy S23 - ~430x932 */
@media (max-width: 430px) {
    /* Styles for large phones */

    /*---------- Banner Section ----------*/
    .index-banner-heading {
        font-size: 4.3rem;
    }

    .index-banner-subheading {
        font-size: 1.2rem;
    }

    .index-banner-btn a {
        text-decoration: none;
        color: black;
        font-size: smaller;
    }

    /*---------- Quote Section - Above Footer ----------*/

    .quote-container {
        min-height: 75vh;
    }

    .quote-container {
        background-image: url('./Assets/Home Page/Quote/430-570-14.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
    .carousel-item {
        background-image: url('./Assets/Home Page/Banner/430-760-04.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
}

/* Motorola G73 / iPhone 15 Pro - 393x852 */
@media (max-width: 393px) {
    /* Styles for Motorola G73 / iPhone 15 Pro */

    /*---------- Banner Section ----------*/
    .index-banner-heading {
        font-size: 4.3rem;
    }

    .index-banner-subheading {
        font-size: 1.2rem;
    }

    .index-banner-btn a {
        text-decoration: none;
        color: black;
        font-size: small;
    }

    /*---------- Quote Section - Above Footer ----------*/

    .quote-container {
        min-height: 75vh;
    }

    .quote-container {
        background-image: url('./Assets/Home Page/Quote/393-570-13.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
    .carousel-item {
        background-image: url('./Assets/Home Page/Banner/393-760-03.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
}

/* Motorola 662 - 360x800 */
@media (max-width: 360px) {
    /* Styles for Motorola 662 or similar */

    /*---------- Banner Section ----------*/
    .index-banner-heading {
        font-size: 4.3rem;
    }

    .index-banner-subheading {
        font-size: 1.2rem;
    }

    .index-banner-btn a {
        text-decoration: none;
        color: black;
        font-size: small;
    }

    /*---------- Quote Section - Above Footer ----------*/

    .quote-container {
        min-height: 75vh;
    }

    .quote-container {
        background-image: url('./Assets/Home Page/Quote/360-570-12.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
    .carousel-item {
        background-image: url('./Assets/Home Page/Banner/360-760-02.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
}

/* iPhone 5 / SE (1st Gen) - 320x568 */
@media (max-width: 320px) {
    /* Styles for very small screens */

    /*---------- Banner Section ----------*/
    .index-banner-heading {
        font-size: 4rem;
    }

    .index-banner-subheading {
        font-size: 1.2rem;
    }

    .index-banner-btn {
        border: none;
        padding: 3px 8px;
        font-family: AvenirLTStd-Light;
    }

    .index-banner-btn a {
        text-decoration: none;
        color: black;
        font-size: small;
    }

    .index-custom-padding-left {
        padding-left: 1rem;
    }

    /*---------- Quote Section - Above Footer ----------*/

    .quote-container {
        min-height: 75vh;
    }

    .quote-container {
        background-image: url('./Assets/Home Page/Quote/320-570-11.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }

    .carousel-item {
        background-image: url('./Assets/Home Page/Banner/320\ -\ 760-01.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
}