/* --------------- Font Family ---------------  - START */
@font-face {
    font-family: 'AvenirLTStd-Black';
    src: url('../Font/Avenir-font/AvenirLTStd-Black.otf') format('opentype');
    /* font-weight: 900; */
    /* font-style: normal; */
}

@font-face {
    font-family: 'AvenirLTStd-BlackOblique';
    src: url('../Font/Avenir-font/AvenirLTStd-BlackOblique.otf') format('opentype');
    /* font-weight: 900; */
    /* font-style: oblique; */
}

@font-face {
    font-family: 'AvenirLTStd-Book';
    src: url('../Font/Avenir-font/AvenirLTStd-Book.otf') format('opentype');
    /* font-weight: 400; */
    /* font-style: normal; */
}

@font-face {
    font-family: 'AvenirLTStd-BookOblique';
    src: url('../Font/Avenir-font/AvenirLTStd-BookOblique.otf') format('opentype');
    /* font-weight: 400; */
    /* font-style: oblique; */
}

@font-face {
    font-family: 'AvenirLTStd-Heavy';
    src: url('../Font/Avenir-font/AvenirLTStd-Heavy.otf') format('opentype');
    /* font-weight: 800; */
    /* font-style: normal; */
}

@font-face {
    font-family: 'AvenirLTStd-HeavyOblique';
    src: url('../Font/Avenir-font/AvenirLTStd-HeavyOblique.otf') format('opentype');
    /* font-weight: 800; */
    /* font-style: oblique; */
}

@font-face {
    font-family: 'AvenirLTStd-Light';
    src: url('../Font/Avenir-font/AvenirLTStd-Light.otf') format('opentype');
    /* font-weight: 300; */
    /* font-style: normal; */
}

@font-face {
    font-family: 'AvenirLTStd-LightOblique';
    src: url('../Font/Avenir-font/AvenirLTStd-LightOblique.otf') format('opentype');
    /* font-weight: 300; */
    /* font-style: oblique; */
}

@font-face {
    font-family: 'AvenirLTStd-Medium';
    src: url('../Font/Avenir-font/AvenirLTStd-Medium.otf') format('opentype');
    /* font-weight: 500; */
    /* font-style: normal; */
}

@font-face {
    font-family: 'AvenirLTStd-MediumOblique';
    src: url('../Font/Avenir-font/AvenirLTStd-MediumOblique.otf') format('opentype');
    /* font-weight: 500; */
    /* font-style: oblique; */
}

@font-face {
    font-family: 'AvenirLTStd-Oblique';
    src: url('../Font/Avenir-font/AvenirLTStd-Oblique.otf') format('opentype');
    /* font-weight: 600; */
    /* font-style: oblique; */
}

@font-face {
    font-family: 'AvenirLTStd-Roman';
    src: url('../Font/Avenir-font/AvenirLTStd-Roman.otf') format('opentype');
    /* font-weight: 600; */
    /* font-style: normal; */
}

/* --------------- Font Family ---------------  - END */

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

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

.training-banner-text {
    position: absolute;
    top: 25%;
    left: 0;
    padding: 2rem;
    z-index: 5;
}

.training-banner-heading {
    font-family: AvenirLTStd-Heavy;
    font-size: 5.5rem;
    color: #fffdfd;
}

.training-banner-subheading {
    font-family: AvenirLTStd-Light;
    font-size: 1.5rem;
    color: #fffdfd;
    padding-left: 1%;
}

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


/* 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;
}


/* Keyframes for scrolling effect */
@keyframes gradientScroll {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -133vw 0;
    }
}

/* Above Footer Gradient Bar - END */

/* Training Cards - START  */

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5rem;
    justify-content: center;
    margin: 30px 0px;
}

.training-card {
    background-image: url('../Assets/About Page/Training/Training Course Icon.jpg');
    background-size: cover;
    background-position: center;
    /* background: #fff; */
    margin-left: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 450px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.training-card:hover {
    transform: scale(1.03); /* Slight zoom */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Stronger shadow */
    cursor: pointer; /* Optional: Indicates interactivity */
}


.card-link h5 {
    color: gray;
    font-weight: 600;
}

.card-link {
    text-decoration: none;
}

.card-link * {
    text-decoration: none !important;
}

.training-card h5 {
    margin: 0;
}

.training-card h5.black {
    color: black;
}

.training-card h5.gray {
    color: gray;
}

.training-card h3 {
    margin: 4px 0 0 0;
    color: #0079c1;
    /* light blue */
    font-weight: 600;
}

.training-card h6 {
    margin: 4px 0 0 0;
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-icon {
    width: 16px;
    height: 16px;
    fill: #555;
}

.bottom-row {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.star-rating {
    display: flex;
    align-items: center;
    gap: 2px;
}

.star {
    width: 18px;
    height: 18px;
    fill: gold;
    cursor: default;
}

.star.empty {
    fill: #ccc;
}

.icon-button {
    cursor: pointer;
    margin-left: 12px;
    user-select: none;
    font-size: 20px;
    color: #555;
    transition: color 0.3s ease;
}

.icon-button:hover {
    color: #007bff;
}

/* Training Cards - END  */



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

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

    /*---------- Banner Section ----------*/
    .carousel-banner-img {
        height: 100vh;
        object-fit: cover;
    }

    #carouselExampleSlidesOnly {
        position: relative;
    }

    .custom-padding-left {
        width: 74%;
        top: 35%;
        padding: 1rem 33rem;
        text-align: center;
        align-items: center;
        text-align: left;
    }

    .custom-padding-left h1 {
        font-size: 5.5rem;
    }

    .custom-padding-left p {
        font-size: 1.7rem;
        padding-left: 0;
    }

    /*---------- Training Card Section ----------*/
    
    .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 2.8rem;
        justify-content: center;
        margin: 30px 0px;
    }

    .training-card {
        width: 32rem;
        gap: 0;
        height: 16rem;
    }

    .card-link h5{
        font-size: 1.5rem;
        
    }

    .card-link h3{
        font-size: 1.7rem;

    }

    .card-duration h5 {
        font-size: 1.5rem;

    }
    .banner-img{
        background-image: url("../Assets/About Page/Training/2560-1080-10.jpg");
        height: 87vh;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
}

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

    /*---------- Banner Section ----------*/
    .carousel-banner-img {
        height: 100vh;
        object-fit: cover;
    }

    #carouselExampleSlidesOnly {
        position: relative;
    }

    .custom-padding-left {
        width: 74%;
        top: 35%;
        padding: 1rem 33rem;
        text-align: center;
        align-items: center;
        text-align: left;
    }

    .custom-padding-left h1 {
        font-size: 5.5rem;
    }

    .custom-padding-left p {
        font-size: 1.7rem;
        padding-left: 0;
    }

    /*---------- Training Card Section ----------*/
    
    .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 2.8rem;
        justify-content: center;
        margin: 30px 0px;
    }

    .training-card {
        width: 32rem;
        gap: 0;
        height: 16rem;
    }

    .card-link h5{
        font-size: 1.5rem;
        
    }

    .card-link h3{
        font-size: 1.7rem;

    }

    .card-duration h5 {
        font-size: 1.5rem;

    }
    .banner-img{
        background-image: url("../Assets/About Page/Training/2560-1080-10.jpg");
        height: 87vh;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
}

/* Dell Latitude 7490 / Samsung S24C350L Monitor - 1920x1080 */
@media (max-width: 1920px) {
    /* Additional styling for Galaxy S24 Ultra if needed */

    /*---------- Banner Section ----------*/
    .carousel-banner-img {
        height: 100vh;
        object-fit: cover;
    }

    #carouselExampleSlidesOnly {
        position: relative;
    }

    .custom-padding-left {
        width: 69%;
        top: 35%;
        padding: 1rem 16rem;
        text-align: center;
        align-items: center;
        text-align: left;
    }

    .custom-padding-left h1 {
        font-size: 5rem;
    }

    .custom-padding-left p {
        font-size: 1.5rem;
        padding-left: 0;
    }

    /*---------- Training Card Section ----------*/
    
    .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 2.8rem;
        justify-content: center;
        margin: 30px 0px;
    }

    .training-card {
        width: 30rem;
        gap: 0;
        height: 14rem;
    }

    .card-link h5{
        font-size: 1.3rem;
        
    }

    .card-link h3{
        font-size: 1.5rem;

    }

    .card-duration h5 {
        font-size: 1.3rem;

    }
    .banner-img{
        background-image: url("../Assets/About Page/Training/1920-800-09.jpg");
        height: 87vh;
        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) */

    /*---------- Banner Section ----------*/
    .carousel-banner-img {
        height: 100vh;
        object-fit: cover;
    }

    #carouselExampleSlidesOnly {
        position: relative;
    }

    .custom-padding-left {
        width: 69%;
        top: 35%;
        padding: 1rem 16rem;
        text-align: center;
        align-items: center;
        text-align: left;
    }

    .custom-padding-left h1 {
        font-size: 4.8rem;
    }

    .custom-padding-left p {
        font-size: 1.4rem;
        padding-left: 0;
    }

    /*---------- Training Card Section ----------*/
    
    .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 2.8rem;
        justify-content: center;
        margin: 30px 0px;
    }

    .training-card {
        width: 30rem;
        gap: 0;
        height: 14rem;
    }

    .card-link h5{
        font-size: 1.2rem;
        
    }

    .card-link h3{
        font-size: 1.4rem;

    }

    .card-duration h5 {
        font-size: 1.2rem;

    }
    .banner-img{
        background-image: url("../Assets/About Page/Training/1728-760-08.jpg");
        height: 87vh;
        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 */

    /*---------- Banner Section ----------*/
    .carousel-banner-img {
        height: 100vh;
        object-fit: cover;
    }

    #carouselExampleSlidesOnly {
        position: relative;
    }

    .custom-padding-left {
        width: 69%;
        top: 35%;
        padding: 1rem 9rem;
        text-align: center;
        align-items: center;
        text-align: left;
    }

    .custom-padding-left h1 {
        font-size: 4.5rem;
    }

    .custom-padding-left p {
        font-size: 1.4rem;
        padding-left: 0;
    }

    /*---------- Training Card Section ----------*/
    
    .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 2.5rem;
        justify-content: center;
        margin: 30px 0px;
    }

    .training-card {
        width: 30rem;
        gap: 0;
        height: 14rem;
    }

    .card-link h5{
        font-size: 1.2rem;
        
    }

    .card-link h3{
        font-size: 1.4rem;

    }

    .card-duration h5 {
        font-size: 1.2rem;

    }
    .banner-img{
        background-image: url("../Assets/About Page/Training/1366-760-07.jpg");
        height: 87vh;
        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 ----------*/
    .carousel-banner-img {
        height: 100vh;
        object-fit: cover;
    }

    #carouselExampleSlidesOnly {
        position: relative;
    }

    .custom-padding-left {
        width: 65%;
        top: 35%;
        padding: 1rem 5rem;
        text-align: center;
        align-items: center;
        text-align: left;
    }

    .custom-padding-left h1 {
        font-size: 4rem;
    }

    .custom-padding-left p {
        font-size: 1.4rem;
        padding-left: 0;
    }

    /*---------- Training Card Section ----------*/
    
    .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        justify-content: center;
        margin: 30px 0px;
    }

    .training-card {
        width: 28rem;
        gap: 0;
        height: 13rem;
        margin-left: 15px;
    }

    .card-link h5{
        font-size: 1.2rem;
        
    }

    .card-link h3{
        font-size: 1.4rem;

    }

    .card-duration h5 {
        font-size: 1.2rem;

    }
    .banner-img{
        background-image: url("../Assets/About Page/Training/1080-760-06.jpg");
        height: 87vh;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
}

@media (max-width: 810px) {
    .custom-padding-left p {
        font-size: 1.4rem;
        padding-left: 0;
        width: 32.5rem;
    }
    .training-card{
        margin-left: 15px;
    }

}

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

    /*---------- Banner Section ----------*/
    .carousel-banner-img {
        height: 100vh;
        object-fit: cover;
    }

    #carouselExampleSlidesOnly {
        position: relative;
    }

    .custom-padding-left {
        width: 77%;
        top: 35%;
        padding: 1rem 2rem;
        text-align: center;
        align-items: center;
        text-align: left;
    }

    .custom-padding-left h1 {
        font-size: 4rem;
    }

    .custom-padding-left p {
        font-size: 1.4rem;
        padding-left: 0;
        width: 345px;
    }

    /*---------- Training Card Section ----------*/
    
    .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
        margin: 30px 0px;
    }

    .training-card {
        width: 25rem;
        gap: 0;
        height: 13rem;
        margin-left: 0px !important;
    }

    .card-link h5{
        font-size: 1rem;
        
    }

    .card-link h3{
        font-size: 1.3rem;

    }

    .card-duration h5 {
        font-size: 1rem;

    }
    .banner-img{
        background-image: url("../Assets/About Page/Training/768-760-05.jpg");
        height: 87vh;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }

}



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

    /*---------- Banner Section ----------*/
    .carousel-banner-img {
        height: 100vh;
        object-fit: cover;
    }

    #carouselExampleSlidesOnly {
        position: relative;
    }

    .custom-padding-left {
        width: 100%;
        top: 35%;
        padding: 1rem;
        text-align: center;
        align-items: center;
        text-align: left;
    }

    .custom-padding-left h1 {
        font-size: 4rem;
    }

    .custom-padding-left p {
        font-size: 1.2rem;
        padding-left: 0;
        width: 345px;
    }

    /*---------- Training Card Section ----------*/
    
    .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
        margin: 30px 0px;
    }

    .training-card {
        width: 25.5rem;
        gap: 0;
    }

    .card-link h5{
        font-size: 1rem;
        
    }

    .card-link h3{
        font-size: 1.3rem;

    }

    .card-duration h5 {
        font-size: 1rem;

    }
    .banner-img{
        background-image: url("../Assets/About Page/Training/430-760-04.jpg");
        height: 87vh;
        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 ----------*/
    .carousel-banner-img {
        height: 100vh;
        object-fit: cover;
    }

    #carouselExampleSlidesOnly {
        position: relative;
    }

    .custom-padding-left {
        width: 100%;
        top: 30%;
        padding: 1rem;
        text-align: center;
        align-items: center;
        text-align: left;
    }

    .custom-padding-left h1 {
        font-size: 4rem;
    }

    .custom-padding-left p {
        font-size: 1.2rem;
        padding-left: 0;
    }

    /*---------- Training Card Section ----------*/
    
    .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
        margin: 30px 0px;
    }

    .training-card {
        width: 23.5rem;
        gap: 0;
    }

    .card-link h5{
        font-size: 1rem;
        
    }

    .card-link h3{
        font-size: 1.3rem;

    }

    .card-duration h5 {
        font-size: 1rem;

    }
    .banner-img{
        background-image: url("../Assets/About Page/Training/393-760-03.jpg");
        height: 87vh;
        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 ----------*/
    .carousel-banner-img {
        height: 100vh;
        object-fit: cover;
    }

    #carouselExampleSlidesOnly {
        position: relative;
    }

    .custom-padding-left {
        width: 100%;
        top: 30%;
        padding: 1rem;
        text-align: center;
        align-items: center;
        text-align: left;
    }

    .custom-padding-left h1 {
        font-size: 4rem;
    }

    .custom-padding-left p {
        font-size: 1.2rem;
        padding-left: 0;
    }

    /*---------- Training Card Section ----------*/
    
    .card-container {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        justify-content: center;
        margin: 30px 0px;
    }

    .training-card {
        width: 21.75rem;
        gap: 0;
    }

    .card-link h5{
        font-size: 1rem;
        
    }

    .card-link h3{
        font-size: 1.3rem;

    }

    .card-duration h5 {
        font-size: 1rem;

    }
    .banner-img{
        background-image: url("../Assets/About Page/Training/360-760-02.jpg");
        height: 87vh;
        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 ----------*/
    .carousel-banner-img {
        height: 100vh;
        object-fit: cover;
    }

    #carouselExampleSlidesOnly {
        position: relative;
    }

    .custom-padding-left {
        width: 100%;
        top: 30%;
        padding: 1rem;
        text-align: center;
        align-items: center;
        text-align: left;
    }

    .custom-padding-left h1 {
        font-size: 4rem;
    }

    .custom-padding-left p {
        font-size: 1.2rem;
        padding-left: 0;
        width: 18rem;
    }

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

    .training-card {
        width: 18.75rem;
        gap: 0;
    }

    .card-link h5{
        font-size: 1rem;
        
    }

    .card-link h3{
        font-size: 1.3rem;

    }

    .card-duration h5 {
        font-size: 1rem;

    }
    .banner-img{
        background-image: url("../Assets/About Page/Training/320-760-01.jpg");
        height: 87vh;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 100%;
    }
}