main.inst-det {
    overflow: hidden;
    margin-top: 0;
    background: linear-gradient(180deg, #000 6.33%, #343434 93.63%), #333;
}

    main.inst-det * {
        box-sizing: border-box;
    }


/* CSS @property declarations */
@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 9%;
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 55%;
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 85%;
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%;
}

@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 0%, 0.49);
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 5%;
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 52%;
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 82%;
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 13%;
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(53.999999999999886, 0%, 0%, 0.49);
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 0%, 0.49);
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 13%;
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 68%;
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 24%;
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 7%;
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 0%, 0.49);
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 15%;
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 68%;
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 24%;
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 7%;
}

/* 3D HERO ANIMATION (GREEN) */
@keyframes hero-gradient-3d-animation {
    0% {
        --s-start-0: 9%;
        --s-end-0: 55%;
        --x-0: 85%;
        --y-0: 80%;
        --c-0: hsla(67.73274212866907, 100%, 12%, 1);
        --s-start-1: 5%;
        --s-end-1: 52%;
        --y-1: 82%;
        --x-1: 13%;
        --c-1: hsla(53.999999999999886, 0%, 0%, 0.49);
        --c-2: hsla(118.23529411764706, 43%, 30%, 1);
        --s-start-2: 13%;
        --s-end-2: 68%;
        --x-2: 24%;
        --y-2: 7%;
    }

    100% {
        --s-start-0: 9%;
        --s-end-0: 55%;
        --x-0: 31%;
        --y-0: 94%;
        --c-0: hsla(212.4424400464951, 100%, 15%, 1);
        --s-start-1: 5%;
        --s-end-1: 52%;
        --y-1: 20%;
        --x-1: 98%;
        --c-1: hsla(54.00000000000036, 0%, 0%, 0.49);
        --c-2: hsla(118.23529411764706, 43%, 30%, 1);
        --s-start-2: 13%;
        --s-end-2: 68%;
        --x-2: 95%;
        --y-2: 92%;
    }
}

.td_hero_animation {
    --x-0: 85%;
    --y-0: 80%;
    --c-0: hsla(67.73274212866907, 100%, 12%, 1);
    --y-1: 82%;
    --x-1: 13%;
    --c-1: hsla(53.999999999999886, 0%, 0%, 0.49);
    --c-2: hsla(118.23529411764706, 43%, 30%, 1);
    --x-2: 24%;
    --y-2: 7%;
    background-color: hsla(0, 0%, 0%, 1);
    background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2));
    animation: hero-gradient-3d-animation 10s linear infinite alternate;
    background-blend-mode: normal, normal, normal;
}

/* GAMING HERO ANIMATION (RED) */
@keyframes hero-gradient-gaming-animation {
    0% {
        --s-start-0: 9%;
        --s-end-0: 55%;
        --x-0: 85%;
        --y-0: 80%;
        --c-0: hsla(266.9999999999955, 0%, 7%, 1);
        --s-start-1: 5%;
        --s-end-1: 72%;
        --x-1: 160%;
        --y-1: 124%;
        --c-1: hsla(335.9999999999995, 5%, 33%, 1);
        --s-start-2: 5%;
        --s-end-2: 52%;
        --c-2: hsla(53.999999999999886, 0%, 0%, 0.49);
        --x-2: 13%;
        --y-2: 82%;
        --s-start-3: 15%;
        --s-end-3: 68%;
        --y-3: 7%;
        --x-3: 24%;
        --c-3: hsla(361.84660194176, 98%, 41%, 1);
    }

    100% {
        --s-start-0: 9%;
        --s-end-0: 55%;
        --x-0: 94%;
        --y-0: 94%;
        --c-0: hsla(264.0000000000036, 0%, 0%, 0.49);
        --s-start-1: 5%;
        --s-end-1: 72%;
        --x-1: 125%;
        --y-1: 125%;
        --c-1: hsla(335.9999999999995, 5%, 33%, 1);
        --x-2: 98%;
        --y-2: 20%;
        --s-start-3: 13%;
        --s-end-3: 52%;
        --c-2: hsla(54.0000000000036, 0%, 0%, 0.49);
        --x-3: 90%;
        --y-3: 90%;
        --c-3: hsla(361.84660194176, 98%, 41%, 1);
    }
}

.gaming_hero_animation {
    --s-start-0: 9%;
    --s-end-0: 55%;
    --x-0: 85%;
    --y-0: 80%;
    --c-0: hsla(266.9999999999955, 0%, 7%, 1);
    --s-start-1: 5%;
    --s-end-1: 72%;
    --x-1: 160%;
    --y-1: 124%;
    --c-1: hsla(335.9999999999995, 5%, 33%, 1);
    --s-start-2: 5%;
    --s-end-2: 52%;
    --c-2: hsla(53.999999999999886, 0%, 0%, 0.49);
    --x-2: 13%;
    --y-2: 82%;
    --s-start-3: 15%;
    --s-end-3: 68%;
    --y-3: 7%;
    --x-3: 24%;
    --c-3: hsla(361.84660194176, 98%, 41%, 1);
    background-color: hsla(0, 0%, 0%, 1);
    background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3));
    animation: hero-gradient-gaming-animation 10s linear infinite alternate;
    background-blend-mode: normal, normal, normal;
}

/* ARCHITECTURAL HERO ANIMATION (YELLOW) */
@keyframes hero-gradient-architectural-animation {
    0% {
        --x-0: 85%;
        --c-0: hsla(45, 81%, 3%, 1);
        --s-start-0: 9%;
        --s-end-0: 55%;
        --y-0: 80%;
        --s-start-1: 5%;
        --s-end-1: 52%;
        --x-1: 13%;
        --c-1: hsla(53.999999999999886, 0%, 0%, 0.49);
        --y-1: 82%;
        --s-start-2: 13%;
        --s-end-2: 68%;
        --c-2: hsla(52.941176470588154, 53%, 15%, 1);
        --y-2: 7%;
        --x-2: 24%;
    }

    100% {
        --x-0: 31%;
        --c-0: hsla(48, 80%, 8%, 1);
        --s-start-0: 9%;
        --s-end-0: 55%;
        --y-0: 94%;
        --s-start-1: 5%;
        --s-end-1: 52%;
        --x-1: 98%;
        --c-1: hsla(50, 41%, 13%, 0.49);
        --y-1: 20%;
        --s-start-2: 13%;
        --s-end-2: 68%;
        --c-2: hsla(55.58823529411766, 87%, 38%, 0.65);
        --y-2: 92%;
        --x-2: 95%;
    }
}

.architectural_hero_animation {
    --x-0: 85%;
    --c-0: hsla(45, 81%, 3%, 1);
    --y-0: 80%;
    --x-1: 13%;
    --c-1: hsla(53.999999999999886, 0%, 0%, 0.49);
    --y-1: 82%;
    --c-2: hsla(52.941176470588154, 53%, 15%, 1);
    --y-2: 7%;
    --x-2: 24%;
    background-color: hsla(0, 0%, 0%, 1);
    background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2));
    animation: hero-gradient-architectural-animation 10s linear infinite alternate;
    background-blend-mode: normal, normal, normal;
}
/* GRAPHIC DESIGN HERO ANIMATION (PINK) */
@keyframes hero-gradient-graphic-animation {
    0% {
        --c-0: hsla(173, 81%, 8%, 1); /* brighter so movement is visible */
        --x-0: 85%;
        --y-0: 80%;
        --x-1: 13%;
        --y-1: 82%; /* on-screen */
        --c-1: hsla(0, 0%, 0%, 0.49);
        --c-2: hsla(320, 67%, 35%, 1); /* more visible pink */
        --x-2: 24%;
        --y-2: 7%;
    }

    100% {
        --c-0: hsla(173, 81%, 8%, 1);
        --x-0: 31%;
        --y-0: 94%;
        --x-1: 98%;
        --y-1: 20%; /* also moves now */
        --c-1: hsla(0, 0%, 0%, 0.49);
        --c-2: hsla(320, 70%, 55%, 1);
        --x-2: 95%; /* MOVE the pink blob */
        --y-2: 92%;
    }
}

.graphic_design_hero_animation {
    --c-0: hsla(173, 81%, 8%, 1);
    --x-0: 85%;
    --y-0: 80%;
    --x-1: 13%;
    --y-1: 82%;
    --c-1: hsla(0, 0%, 0%, 0.49);
    --c-2: hsla(320, 67%, 35%, 1);
    --x-2: 24%;
    --y-2: 7%;
    background-color: hsla(0, 0%, 0%, 1);
    background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2));
    animation: hero-gradient-graphic-animation 10s linear infinite alternate;
}


/* INTERIOR DESIGN HERO ANIMATION (TURQUOISE) */
@keyframes hero-gradient-interior-animation {
    0% {
        --c-0: hsla(276.6176470588236, 81%, 3%, 0.5);
        --y-0: 80%;
        --x-0: 85%;
        --s-start-0: 9%;
        --s-end-0: 55%;
        --c-1: hsla(53.999999999999886, 0%, 0%, 0.49);
        --y-1: 182%;
        --x-1: 13%;
        --s-start-2: 13%;
        --s-end-2: 68%;
        --x-2: 24%;
        --y-2: 7%;
        --c-2: hsla(170.64220183486236, 67%, 4%, 1);
    }

    100% {
        --c-0: hsla(276.6176470588236, 81%, 3%, 0.5);
        --y-0: 94%;
        --x-0: 31%;
        --s-start-0: 9%;
        --s-end-0: 55%;
        --c-1: hsla(53.999999999999886, 0%, 0%, 0.49);
        --y-1: 182%;
        --x-1: 13%;
        --x-2: 95%;
        --y-2: 92%;
        --c-2: hsla(170.64220183486236, 63%, 32%, 1);
    }
}

.interior_design_hero_animation {
    --c-0: hsla(276.6176470588236, 81%, 3%, 0.5);
    --y-0: 80%;
    --x-0: 85%;
    --c-1: hsla(53.999999999999886, 0%, 0%, 0.49);
    --y-1: 182%;
    --x-1: 13%;
    --c-2: hsla(170.64220183486236, 67%, 4%, 1);
    --y-2: 7%;
    --x-2: 24%;
    background-color: hsla(0, 0%, 0%, 1);
    background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2));
    animation: hero-gradient-interior-animation 10s linear infinite alternate;
    background-blend-mode: normal, normal, normal;
}


.instructor-hero-sections {
    position: relative;
 /*   z-index: 6;*/
}

.instructor-hero-sections:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient( to bottom, #23232300, #232323FF 100% );
}



main.inst-det section .titlee {
    width: 100%;
    height: 81px;
    position: relative;
    /* padding: 20px 30px; */
    transition: none;
}

    main.inst-det section .titlee h2 {
        color: #FFF;
        font-family: 'Syncopate-Bold';
        font-size: 35px;
        font-style: normal;
        font-weight: 700;
        line-height: 130%; /* 42px */
        letter-spacing: 0.8px;
        position: relative;
        padding: 20px 20px;
        padding-left: 0;
        z-index: 69;
        transition: none;
        opacity: 0;
    }

    main.inst-det section .titlee img {
        width: 50%;
        height: 100%;
        display: block;
        position: absolute;
        /* object-fit: fill; */
        z-index: 1;
        filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.25));
    }

    main.inst-det section .titlee .titletext {
        width: 100%;
        /* max-width: 1257px; */
        margin: 0px auto;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0px 17px;
        max-width: 1440px;
        position: relative;
        z-index: 69;
        /* transition: none; */
    }


main.inst-det section.instructor-description {
    padding-top: 150px;
    /*padding-bottom: 90px;*/
    /* background: linear-gradient(180deg, #000 6.33%, #343434 93.63%), #333; */
}

    main.inst-det section.instructor-description .wrapperwrapper {
        /*     max-width: 911px;*/
        padding: 32px 24px;
        margin: 0 auto;
    }

    main.inst-det section.instructor-description .inst-portrait {
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* margin-bottom: 32px;*/
    }

        main.inst-det section.instructor-description .inst-portrait .portrait {
            width: 30%;
            max-width: 300px;
            aspect-ratio: 5 / 5;
            overflow: hidden;
            border-radius: 50%;
            /* border: 7px solid #d3d3d375; */
            filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.25));
            /* background-color: #FFF;*/
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.30);
        }

            main.inst-det section.instructor-description .inst-portrait .portrait img {
                width: calc(100% - 4px);
                height: calc(100% - 4px);
                object-fit: cover;
                object-position: center;
                border-radius: 50%;
                aspect-ratio: 5 / 5;
                filter: grayscale(1);
            }


        main.inst-det section.instructor-description .inst-portrait .name-title {
            width: 65%;
        }

            main.inst-det section.instructor-description .inst-portrait .name-title h2 {
                color: #FFF;
                font-family: syncopate-bold;
                font-size: 32px;
                font-style: normal;
                font-weight: 700;
                line-height: 52px; /* 162.5% */
                margin-bottom: 15px;
            }
            main.inst-det section.instructor-description .inst-portrait .name-title h3, main.inst-det section.instructor-description .inst-portrait .name-title .second-title {
                color: #FFF;
                font-family: 'catamaran-medium';
                font-size: 18px;
                font-style: normal;
                font-weight: 400;
                line-height: 140%; /* 25.2px */
                letter-spacing: 0.25px;
            }

            main.inst-det section.instructor-description .inst-portrait .name-title h3, main.inst-det section.instructor-description .inst-portrait .name-title .second-title p{
                color: #FFF;
                font-family: 'catamaran-medium';
                font-size: 18px;
                font-style: normal;
                font-weight: 400;
                line-height: 140%; /* 25.2px */
                letter-spacing: 0.25px;
            }

            main.inst-det section.instructor-description .inst-portrait .name-title .social-media {
                display: flex;
                margin-top: 20px;
            }

                main.inst-det section.instructor-description .inst-portrait .name-title .social-media a {
                    display: flex;
                    text-decoration: none;
                    width: 64px;
                    height: 64px;
                }

                    main.inst-det section.instructor-description .inst-portrait .name-title .social-media a img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }

                        main.inst-det section.instructor-description .inst-portrait .name-title .social-media a img.website-icon-2 {
                            display: none;
                        }

                    main.inst-det section.instructor-description .inst-portrait .name-title .social-media a:hover img.website-icon {
                        display: none;
                    }

                    main.inst-det section.instructor-description .inst-portrait .name-title .social-media a:hover img.website-icon-2 {
                        display: block;
                    }

    main.inst-det section.instructor-description .instructor-description * {
        color: #FFF;
        font-family: catamaran-regular;
        font-size: 22px;
        font-style: normal;
        font-weight: 400;
        line-height: 130%;
        letter-spacing: 0.44px;
        margin: 20px auto;
    }

    main.inst-det section.instructor-description .instructor-description p {
        margin-bottom: 30px;
    }

    main.inst-det section.instructor-description .instructor-description h4,
    main.inst-det section.instructor-description .instructor-description h4 *,
    main.inst-det section.instructor-description .instructor-description strong {
        color: #333;
        font-family: catamaran-bold;
        font-size: 22px;
        font-weight: 700;
        line-height: 150%;
        letter-spacing: 0.44px;
    }

/* Featured Projects Section */
section.instructor-projects {
    position: relative;
    padding: 48px 0;
    overflow: hidden;
}

    section.instructor-projects .projects-carousel {
        padding-top: 48px;
    }

    /* Project Card Base Styles */
    section.instructor-projects .project-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 24px;
        padding: 20px;
        min-height: 460px;
        border: 0.75px solid #fff;
        overflow: hidden;
        box-shadow: 0 8px 30px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.03);
        color: #fff;
        transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    section.instructor-projects .project-image {
        max-width: 300px;
        height: 420px;
        overflow: hidden;
        justify-self: center;
    }

        section.instructor-projects .project-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

    section.instructor-projects .project-info {
        color: #FFF;
        font-family: catamaran-regular;
        font-style: normal;
        text-align: left;
    }

    section.instructor-projects .project-title {
        color: #FFF;
        font-feature-settings: 'liga' off, 'clig' off;
        font-size: 28px;
        font-weight: 700;
        line-height: 100%;
        letter-spacing: 0.5px;
        margin: 0 0 8px 0;
    }

    section.instructor-projects .project-meta {
        font-size: 16px;
        font-weight: 400;
        line-height: 140%;
        letter-spacing: 0.25px;
        margin: 0 0 24px 0;
    }

    section.instructor-projects .project-description {
        font-size: 16px;
        font-weight: 400;
        line-height: 130%;
        letter-spacing: 0.32px;
    }

/* Desktop Layouts (1024px and above) */
@media only screen and (min-width: 1025px) {

    /* ONE PROJECT - Centered with fixed width */
    section.instructor-projects .projects-carousel[data-project-count="1"] {
        display: flex;
        justify-content: center;
    }

        section.instructor-projects .projects-carousel[data-project-count="1"] .project-card {
            width: 620px;
            max-width: 620px;
        }

    /* TWO PROJECTS - 50% width each, no carousel */
    section.instructor-projects .projects-carousel[data-project-count="2"] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        max-width: 1440px;
        margin: 0 auto;
        padding-left: 20px;
        padding-right: 20px;
    }

        section.instructor-projects .projects-carousel[data-project-count="2"] .project-card {
            width: 100%;
            max-width: none;
        }

    /* THREE OR MORE PROJECTS - Fixed width cards with carousel */
    section.instructor-projects .projects-carousel:not([data-project-count="1"]):not([data-project-count="2"]) .project-card {
        max-width: 620px;
        flex-shrink: 0;
    }
}

/* Tablet and Mobile - Stack vertically */
@media only screen and (max-width: 1024px) {
    section.instructor-projects .projects-carousel {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    section.instructor-projects .project-card {
        width: 100%;
    }

    section.instructor-projects .project-image {
        max-width: unset;
    }

    section.instructor-projects .project-card:nth-child(even) .project-image {
        order: 2;
    }

    section.instructor-projects .project-card:nth-child(even) .project-info {
        order: 1;
    }
}

/* Mobile - Adjust card layout */
@media only screen and (max-width: 767px) {
    section.instructor-projects .project-card {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    section.instructor-projects .project-image {
        width: 100%;
        height: 300px;
    }

    section.instructor-projects .project-card .project-image {
        order: 1 !important;
    }

    section.instructor-projects .project-card .project-info {
        order: 2 !important;
    }

    main.inst-det section.instructor-description .inst-portrait .name-title .social-media a {
        width: 40px;
        height: 40px;
    }
}

/* Owl Carousel Overrides for 3+ projects */
section.instructor-projects .owl-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}

section.instructor-projects .owl-carousel .project-card {
    display: grid;
}


main.inst-det section.intro {
    width: 100%;
    height: fit-content;
    padding: 0px 30px;
    position: relative;
    z-index: 1;
}

    main.inst-det section.intro .container {
        width: 100%;
        max-width: 1310px;
        margin: 0px auto;
        height: fit-content;
        display: flex;
        column-gap: 2%;
        justify-content: space-between;
        flex-direction: row-reverse;
    }

        main.inst-det section.intro .container .left {
            width: 47%;
            height: fit-content;
            min-height: 567px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-top: 112px;
            padding-bottom: 113px;
        }

            main.inst-det section.intro .container .left img.program-logo {
                width: 109px;
                margin-bottom: 25px;
            }


            main.inst-det section.intro .container .left h2 {
                color: var(--bb);
                font-family: 'catamaran-medium';
                font-size: 38px;
                font-style: normal;
                font-weight: 500;
                line-height: 120%; /* 60px */
                letter-spacing: 1px;
                margin-bottom: 19px;
            }

                main.inst-det section.intro .container .left h2 span {
                    font-family: 'catamaran-bold';
                }

            main.inst-det section.intro .container .left p {
                /* color: var(--bb); */
                font-family: 'catamaran-medium';
                font-size: 22px;
                line-height: 180%;
                letter-spacing: 0.44px;
            }

            main.inst-det section.intro .container .left ul {
                list-style: none;
                display: flex;
                flex-wrap: wrap;
                column-gap: 4%;
                row-gap: 30px;
                padding-left: 0px;
                margin-top: 40px;
                margin-bottom: 15px;
            }

                main.inst-det section.intro .container .left ul li {
                    width: 48%;
                    display: flex;
                    column-gap: 16.5px;
                    align-items: center;
                    font-family: 'catamaran-medium';
                    line-height: 140%;
                    letter-spacing: 0.33px;
                }

                    main.inst-det section.intro .container .left ul li img {
                        width: 40px;
                        height: 40px;
                        object-fit: contain;
                    }

        main.inst-det section.intro .container .right {
            max-height: 100%;
            height: 100%;
            width: 47%;
            position: absolute;
            /* margin-right: -63px; */
            left: 0px;
            top: 0px;
        }

            main.inst-det section.intro .container .right img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

    main.inst-det section.intro.intro-program-specific {
        background-color: var(--bb);
    }

main.inst-det.l-23-b2-ps section.intro img.program-logo {
    width: 100%;
    max-width: fit-content;
    max-height: 100px;
    /* margin-top: 69px; */
    margin-bottom: 25px;
}

main.inst-det section.intro * {
    color: #FFF !important;
}

main.inst-det section.career-opportunity {
    background-color: #333;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.40) 100%), #333;
    width: 100%;
    padding-top: 75px;
    padding-bottom: 95px;
    display: flex;
    justify-content: center;
    overflow-y: visible;
    /* overflow-x: hidden; */
}

    main.inst-det section.career-opportunity .left {
        max-width: 1257px;
        /* margin: 0px auto; */
        width: 100%;
        padding: 0 17px;
        position: relative;
        /* z-index: 70; */
    }


        main.inst-det section.career-opportunity .left h3 {
            color: #3BB04F;
            text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
            font-family: catamaran-regular;
            font-size: 65px;
            font-style: normal;
            font-weight: 400;
            line-height: 100%; /* 65px */
            letter-spacing: 1.3px;
            margin-bottom: 75px;
            position: relative;
            z-index: 70;
        }

        main.inst-det section.career-opportunity .left h4 {
            color: #FFF;
            font-family: catamaran-bold;
            font-size: 32px;
            font-style: normal;
            font-weight: 700;
            line-height: 120%; /* 38.4px */
            letter-spacing: 0.64px;
            margin-bottom: 22px;
        }


        main.inst-det section.career-opportunity .left h3 span {
            font-family: catamaran-bold;
        }

        main.inst-det section.career-opportunity .left .list-of-jobs {
            display: flex;
            padding-left: 30px;
            max-width: 636px;
            justify-content: space-between;
            position: relative;
            z-index: 70;
        }

            main.inst-det section.career-opportunity .left .list-of-jobs * {
                color: #FFF;
                font-family: catamaran-regular;
                font-size: 22px;
                font-style: normal;
                font-weight: 400;
                line-height: 180%; /* 39.6px */
                letter-spacing: 0.44px;
            }

            main.inst-det section.career-opportunity .left .list-of-jobs ul {
                width: 46%;
            }

        main.inst-det section.career-opportunity .left .anchor {
            width: 100%;
            max-width: 636px;
            height: 1px;
            /* position: relative; */
        }

            main.inst-det section.career-opportunity .left .anchor img.floating-space-person {
                width: 100%;
                /* aspect-ratio: 5 / 6; */
                /* height: 702px; */
                object-fit: contain;
                position: absolute;
                right: -82px;
                bottom: -99px;
                z-index: 69;
                /* max-width: 636px; */
                width: 658px;
                height: 702px;
            }

    main.inst-det section.career-opportunity .right {
        display: none;
    }

main.inst-det section.campus-cta {
    position: relative;
    z-index: 69;
}




@media only screen and (max-width: 1240px) {

    main.inst-det section .titlee {
        height: 60px;
    }

        main.inst-det section .titlee h2 {
            font-size: 20px;
            font-weight: 700;
            line-height: 120%;
            letter-spacing: 0.8px;
        }
}


@media only screen and (max-width:1048px) {



    main.inst-det section.instructor-description {
    }


        main.inst-det section.instructor-description .inst-portrait .name-title h3 {
        }

        main.inst-det section.instructor-description .instructor-description * {
            /*font-size: 22px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%;*/ /* 33px */
            /*letter-spacing: 0.44px;*/
        }

        main.inst-det section.instructor-description .instructor-description h4,
        main.inst-det section.instructor-description .instructor-description h4 *,
        main.inst-det section.instructor-description .instructor-description strong {
            font-size: 22px;
            font-style: normal;
            font-weight: 700;
            line-height: 150%; /* 33px */
            letter-spacing: 0.44px;
        }

    main.inst-det section.intro .container .left img.program-logo {
        width: 79px;
        margin-bottom: 25px;
    }





    main.inst-det section.intro .container .left h2 {
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: 120%; /* 33.6px */
        letter-spacing: 0.56px;
    }

    main.inst-det section.intro .container .left p {
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 180%; /* 32.4px */
        letter-spacing: 0.36px;
    }

    main.inst-det section.career-opportunity {
        justify-content: flex-start;
        padding-top: 0;
        padding-bottom: 0;
    }

        main.inst-det section.career-opportunity .left {
            width: 42%;
            padding-top: 101px;
            padding-bottom: 44px;
        }

            main.inst-det section.career-opportunity .left h3 {
                color: #3BB04F;
                text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                font-family: catamaran-regular;
                font-size: 28px;
                font-style: normal;
                font-weight: 400;
                line-height: 120%; /* 33.6px */
                letter-spacing: 0.56px;
                margin-bottom: 30px;
            }

                main.inst-det section.career-opportunity .left h3 br {
                    display: none;
                }

            main.inst-det section.career-opportunity .left h4 {
                display: none;
            }

            main.inst-det section.career-opportunity .left .list-of-jobs {
                flex-direction: column;
            }

                main.inst-det section.career-opportunity .left .list-of-jobs ul {
                    width: 100%;
                }

            main.inst-det section.career-opportunity .left .anchor {
                display: none;
            }

                main.inst-det section.career-opportunity .left .anchor img.floating-space-person {
                    top: -179px;
                    width: 183%;
                    left: 46%;
                }

        main.inst-det section.career-opportunity .right {
            display: block;
            width: 58%;
            padding-bottom: 80px;
            position: relative;
        }

            main.inst-det section.career-opportunity .right img {
                width: 113%;
                display: block;
                margin: 0;
                position: absolute;
                right: -54px;
                top: -35px;
                object-fit: contain;
            }
}

@media only screen and (max-width:1024px) {

    main.inst-det section.instructor-description .inst-portrait .name-title h2 {
        font-size: 25px;
        margin-bottom: 0px;
    }

    main.inst-det section.instructor-description .inst-portrait .name-title h3, main.inst-det section.instructor-description .inst-portrait .name-title .second-title p {
        font-size: 14px;
    }
    main.inst-det section.instructor-description .inst-portrait .name-title h3, main.inst-det section.instructor-description .inst-portrait .name-title .second-title {
        font-size: 14px;
    }


    main.inst-det section.instructor-description .instructor-description * {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px; /* 125% */
        letter-spacing: 0.32px;
    }

    main.inst-det section.instructor-description .instructor-description p {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px; /* 125% */
        letter-spacing: 0.32px;
    }
}


@media only screen and (max-width: 800px) {
    main.inst-det section.instructor-description .inst-portrait .name-title h2 {
        text-align: center;
    }

    main.inst-det section.instructor-description .inst-portrait .name-title h3, main.inst-det section.instructor-description .inst-portrait .name-title .second-title p {
        text-align: center;
    }
    main.inst-det section.instructor-description .inst-portrait .name-title h3, main.inst-det section.instructor-description .inst-portrait .name-title .second-title {
        text-align: center;
    }
    main.inst-det section .titlee h2 {
        font-size: 20px;
        font-weight: 700;
        line-height: 120%;
        letter-spacing: 0.8px;
        padding: 0;
        width: 100%;
    }


    main.inst-det section .titlee img {
        width: 90%;
        max-width: 455px;
    }

    main.inst-det section .titlee .borderline {
        display: none;
    }

    main.inst-det section.instructor-description .inst-portrait .name-title .social-media {
        justify-content: center;
        margin-top: 16px;
    }

    main.inst-det section.instructor-description {
        padding-top: 50px;
        /* padding-bottom: 34px;*/
    }

        main.inst-det section.instructor-description .wrapperwrapper {
            max-width: 911px;
            margin: 0 auto;
        }

        main.inst-det section.instructor-description .inst-portrait {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: column-reverse;
            row-gap: 16px;
        }

            main.inst-det section.instructor-description .inst-portrait .portrait {
                width: 100%;
                max-width: 196px;
                aspect-ratio: 5 / 5;
                overflow: hidden;
                border-radius: 50%;
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;
            }

                main.inst-det section.instructor-description .inst-portrait .portrait img {
                    width: calc(100% - 4px);
                    height: calc(100% - 4px);
                    object-fit: cover;
                    object-position: center;
                    border-radius: 50%;
                    aspect-ratio: 5 / 5;
                }


            main.inst-det section.instructor-description .inst-portrait .name-title {
                width: 100%;
                /*     text-align: center;*/
            }

        main.inst-det section.instructor-description .inst-des-socia {
            display: flex;
            flex-direction: column-reverse;
        }



        main.inst-det section.instructor-description .instructor-description h4,
        main.inst-det section.instructor-description .instructor-description h4 *,
        main.inst-det section.instructor-description .instructor-description strong {
            color: #333;
            font-family: catamaran-bold;
            font-size: 22px;
            font-weight: 700;
            line-height: 150%;
            letter-spacing: 0.44px;
        }





    main.inst-det section.intro {
        width: 100%;
        height: fit-content;
        padding: 0px 0px;
        position: relative;
        z-index: 1;
    }

        main.inst-det section.intro .container {
            width: 100%;
            margin: 0px auto;
            height: fit-content;
            display: flex;
            column-gap: 2%;
            justify-content: space-between;
            flex-direction: column;
        }

            main.inst-det section.intro .container .left {
                width: 100%;
                height: fit-content;
                min-height: unset;
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding-top: 50px;
                padding-bottom: 25px;
                padding-left: 20px;
                padding-right: 20px;
            }

                main.inst-det section.intro .container .left img.program-logo {
                    width: 67px;
                    margin-bottom: 25px;
                }


                main.inst-det section.intro .container .left h2 {
                    color: var(--bb);
                    font-family: 'catamaran-medium';
                    font-size: 6.5vw;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 120%; /* 60px */
                    letter-spacing: 1px;
                    margin-bottom: 30px;
                }

                    main.inst-det section.intro .container .left h2 span {
                        font-family: 'catamaran-bold';
                    }

                main.inst-det section.intro .container .left p {
                    /* color: var(--bb); */
                    font-family: 'catamaran-medium';
                    font-size: 18px;
                    line-height: 180%;
                    letter-spacing: 0.44px;
                }

                main.inst-det section.intro .container .left ul {
                    list-style: none;
                    display: flex;
                    flex-wrap: wrap;
                    column-gap: 4%;
                    row-gap: 30px;
                    padding-left: 0px;
                    margin-top: 40px;
                    margin-bottom: 15px;
                }

                    main.inst-det section.intro .container .left ul li {
                        width: 48%;
                        display: flex;
                        column-gap: 16.5px;
                        align-items: center;
                        font-family: 'catamaran-medium';
                        line-height: 140%;
                        letter-spacing: 0.33px;
                    }

                        main.inst-det section.intro .container .left ul li img {
                            width: 40px;
                            height: 40px;
                            object-fit: contain;
                        }

            main.inst-det section.intro .container .right {
                max-height: unset;
                height: 203px;
                min-height: unset;
                width: 100%;
                aspect-ratio: 34 / 3;
                position: unset;
                /* margin-right: -63px; */
                left: 0px;
                top: 0px;
            }

                main.inst-det section.intro .container .right img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

        main.inst-det section.intro.intro-program-specific {
            background-color: var(--bb);
        }

    main.inst-det.l-23-b2-ps section.intro img.program-logo {
        width: 100%;
        max-width: fit-content;
        max-height: 100px;
        /* margin-top: 69px; */
        margin-bottom: 25px;
    }

    main.inst-det section.intro * {
        color: #FFF !important;
    }

    main.inst-det section.career-opportunity {
        background-color: #333;
        width: 100%;
        padding-top: 0px;
        padding-bottom: 19px;
        display: flex;
        justify-content: center;
        overflow-y: visible;
        /* overflow-x: hidden; */
        flex-direction: column-reverse;
        align-items: center;
    }

        main.inst-det section.career-opportunity .left {
            max-width: 511px;
            /* margin: 0px auto; */
            width: 100%;
            padding: 0 17px;
        }


            main.inst-det section.career-opportunity .left h3 {
                color: #3BB04F;
                text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                font-family: catamaran-regular;
                font-size: 6.5vw;
                font-style: normal;
                font-weight: 400;
                line-height: 100%; /* 65px */
                letter-spacing: 1.3px;
                margin-bottom: 45px;
            }

            main.inst-det section.career-opportunity .left h4 {
                color: #FFF;
                font-family: catamaran-bold;
                font-size: 32px;
                font-style: normal;
                font-weight: 700;
                line-height: 120%; /* 38.4px */
                letter-spacing: 0.64px;
                margin-bottom: 22px;
            }


            main.inst-det section.career-opportunity .left h3 span {
                font-family: catamaran-bold;
            }

            main.inst-det section.career-opportunity .left .list-of-jobs {
                display: flex;
                padding-left: 30px;
                max-width: 636px;
                justify-content: space-between;
            }

                main.inst-det section.career-opportunity .left .list-of-jobs * {
                    color: #FFF;
                    font-family: catamaran-regular;
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 180%; /* 39.6px */
                    letter-spacing: 0.44px;
                }

                main.inst-det section.career-opportunity .left .list-of-jobs ul {
                    width: 100%;
                }

            main.inst-det section.career-opportunity .left .anchor {
                width: 100%;
                max-width: 636px;
                height: 1px;
                position: relative;
                display: none;
            }

                main.inst-det section.career-opportunity .left .anchor img.floating-space-person {
                    width: 1140px;
                    aspect-ratio: 5 / 5;
                    /* height: 702px; */
                    object-fit: contain;
                    position: absolute;
                    right: -1027px;
                    top: -429px;
                    z-index: 69;
                }

        main.inst-det section.career-opportunity .right {
            /* display: none; */
            width: 100%;
            margin-bottom: 30px;
            padding-bottom: 0px;
            aspect-ratio: 31 / 22;
            height: auto;
            position: relative;
        }

            main.inst-det section.career-opportunity .right img {
                /* display: none; */
                width: 100%;
                height: 100%;
                right: 0px;
                /* top: -14px; */
                bottom: 0;
                /* transform: scale(1.4); */
                z-index: 49;
            }



    main.inst-det section.campus-cta {
        margin-top: -1px;
    }

        main.inst-det section.campus-cta .campus-cta-container {
            align-items: center !important;
        }

            main.inst-det section.campus-cta .campus-cta-container h2 {
                text-align: center !important;
            }

            main.inst-det section.campus-cta .campus-cta-container p {
                text-align: center !important;
                width: 100%;
            }
}


@media only screen and (max-width:575px) {


    main.inst-det section.instructor-description .wrapperwrapper {
        padding: 32px 0px;
    }

    main.inst-det section.instructor-description {
        padding-top: 102px;
    }

        main.inst-det section.instructor-description .inst-portrait .name-title .instructor-description {
            text-align: left;
        }
}

@media only screen and (max-width:390px) {

    main.inst-det section .titlee .titletext {
        height: 100%;
        /* aspect-ratio: 100 / 16; */
    }

    main.inst-det section .titlee h2 {
        font-size: 4.7vmin;
        white-space: nowrap;
        padding: 0px;
        padding-top: 5px;
    }

    main.inst-det section.program-overview .titlee img {
        width: 95%;
    }
}