@font-face {
    font-family: 'Montserrat';
    src: url("fonts/Montserrat-Black.eot");
    src: local("☺"), url("fonts/Montserrat-Black.woff") format("woff"), url("fonts/Montserrat-Black.ttf") format("truetype"), url("fonts/Montserrat-Black.svg") format("svg");
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url("fonts/Montserrat-Bold.eot");
    src: local("☺"), url("fonts/Montserrat-Bold.woff") format("woff"), url("fonts/Montserrat-Bold.ttf") format("truetype"), url("fonts/Montserrat-Bold.svg") format("svg");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url("fonts/Montserrat-Regular.eot");
    src: local("☺"), url("fonts/Montserrat-Regular.woff") format("woff"), url("fonts/Montserrat-Regular.ttf") format("truetype"), url("fonts/Montserrat-Regular.svg") format("svg");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url("fonts/Montserrat-Light.eot");
    src: local("☺"), url("fonts/Montserrat-Light.woff") format("woff"), url("fonts/Montserrat-Light.ttf") format("truetype"), url("fonts/Montserrat-Light.svg") format("svg");
    font-weight: 300;
    font-style: normal;
}


/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    max-width: 100%;
    margin: 0 auto;
}



article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}



audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],
template {
    display: none;
}

a {
    background-color: transparent;
}

a:active,
a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}




b,
strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: 0.67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}




sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em;
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}



figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}






button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto
}

input[type="search"] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: bold
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td,
th {
    padding: 0
}

::-moz-selection {
    background: #FFF498
}

::selection {
    background: #FFF498
}

::-moz-selection {
    background: #FFF498
}

img::-moz-selection {
    background: transparent
}

img::selection {
    background: transparent
}

img::-moz-selection {
    background: transparent
}

body {
    -webkit-tap-highlight-color: #FFF498
}

body {
    background-color: #0c0c0c;
    font-size: 14px;
    line-height: 1.6;
    font-family: "Montserrat", sans-serif;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%
}

.l-viewport {
    position: relative;
    width: 100%;
    height: 100vh;
    box-shadow: 0 0 45px 5px rgba(0, 0, 0, 0.85);
    overflow: hidden
}

.l-wrapper {
    position: relative;
    width: 1440px;
    max-width: 90%;
    height: 100%;
    margin: 0 auto
}











.l-side-nav {
    position: absolute;
    left: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}













.l-side-nav::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 2px;
    height: 70%;
    max-height: 750px;
    background-color: #555;
    opacity: .35;
    z-index: 10
}

@media (max-width: 1180px) {
    .l-side-nav {
        display: none;
    }
}

@media (min-width: 11790px) {
    .l-side-nav {
        display: block;
    }
}

.l-main-content {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none
}

.l-section {
    position: absolute;
    width: 100%;
    height: 100%
}



/* ========== TEMP DEBUG STYLES ========== */
/* Top-level sections bright backgrounds */
.intro {
    background: rgb(93, 59, 59) !important;
}

.skills {
    background: rgb(58, 74, 79) !important;
}

.works {
    background: rgb(37, 52, 37) !important;
}

.experience {
    background: rgb(73, 71, 49) !important;
}

.education {
    background: rgb(59, 44, 59) !important;
}

 .accolades {
    background: rgb(91, 86, 63) !important;
}

.contact {
    background: rgb(56, 42, 36) !important;
}

.hire {
    background: rgb(41, 57, 56) !important;
}

/* Normalize top-level parents */
.l-section>div {
    width: 100%;
    min-height: 100vh;
    /* test: each fills the screen */
    box-sizing: border-box;
}

/* ========== END DEBUG STYLES ========== */


.copy {
    text-align: center;
    position: relative;
    top: 0px;
    width: 100%;
    margin: 0 auto;
    font-size: 0.6875rem;
}





.section {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .4s ease-in-out, visibility 0s .4s;
    transition: opacity .4s ease-in-out, visibility 0s .4s
}

.section--is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    -webkit-transition: opacity .4s ease-in-out .4s;
    transition: opacity .4s ease-in-out .4s
}

.section--next {
    -webkit-transform: translateY(-45px);
    transform: translateY(-45px);
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: -webkit-transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out
}



.section--prev {
    -webkit-transform: translateY(45px);
    transform: translateY(45px);
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: -webkit-transform .4s ease-in-out;
    transition: transform .4s ease-in-out;
    transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out
}



/* --- FIXING OVERFLOW ON SMALL SCREENS --- */





/* Ensure no overflow */
body,
html {
    overflow-x: hidden;
    /* Prevent horizontal scrolling */
}



/* <header> = main header container */
.header {
    position: fixed;
    top: -10px;
    left: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 70px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    z-index: 5000;
}


/* (parent) = brand logo + brand name  */
.header--logo {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-decoration: none;
    color: #fff;
    /* white */
}

/* brand logo */
.header--logo img {
    width: 30px;
    height: 30px;
    border-radius: 90%;
    margin-left: 20px;
}

/* brand name */
.header--logo__name {
    margin: 0 0 0 10px;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #c0c0c0be;
    /* silver-gray (semi-transparent) */
}


/* (parent) = hamburger menu icon */
.header--nav-toggle {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 50px;
    height: 50px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer
}

/* hamburger menu icon */
.header--nav-toggle span,
.header--nav-toggle::before,
.header--nav-toggle::after {
    content: "";
    position: relative;
    width: 16px;
    height: 2px;
    background-color: #fff;
    /* white */
}

/* top hamburger bar */
.header--nav-toggle::before {
    bottom: 5px;
    width: 23px
}

/* bottom hamburger bar */
.header--nav-toggle::after {
    top: 5px;
    width: 23px
}

/*End of Header*/




/*Side Nav*/

.side-nav {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100px;
    height: 70%;
    max-height: 750px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    margin: 0;
    padding: 0;
    list-style-position: inside;
    z-index: 10;
}




.side-nav>li {
    position: relative;
    top: -5px;
    color: #fff;
    font-size: 6px;
    cursor: pointer
}



.side-nav>li span {
    position: relative;
    top: 3px;
    left: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    opacity: 0;
    visibility: hidden
}

.side-nav>li::before {
    position: absolute;
    top: 3px;
    left: 10px;
    color: #555;
    font-size: 14px;
    font-weight: 300
}

.side-nav li:nth-child(1)::before {
    content: "01"
}

.side-nav li:nth-child(2)::before {
    content: "02"
}

.side-nav li:nth-child(3)::before {
    content: "03"
}

.side-nav li:nth-child(4)::before {
    content: "04"
}


.side-nav li:nth-child(5)::before {
    content: "05"
}

.side-nav li:nth-child(6)::before {
    content: "06"
}

.side-nav li:nth-child(7)::before {
    content: "07"
}

.side-nav li:nth-child(8)::before {
    content: "08"
}


.side-nav li.is-active {
    color: #0f33ff;
    -webkit-transition: color .4s ease-in-out;
    transition: color .4s ease-in-out
}

.side-nav li.is-active span {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity .4s ease-in-out;
    transition: opacity .4s ease-in-out
}

.side-nav li.is-active::before {
    left: -33px;
    color: #fff
}

/*End of Side Nav*/



/* Section 01 Home*/

/* (Parent) = intro--banner + intro--options */
.intro {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 900px;
    max-width: 75%;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    top: 0;
}

@media (max-width: 1180px) {
    .intro {
        max-width: 100%
    }
}

/* (Parent) = h1 + h3 + button + image + lines (top area) */
.intro--banner {
    position: relative;
    height: 475px
}


/* Page Title = (Innovative) */
.intro--banner h1 {
    position: relative;
    font-size: 4.0625rem;
    font-weight: 900;
    line-height: 1;
    z-index: 1
}

/* Page Sub-Title = (By Damien) */
.intro--banner h3 {
    position: relative;
    font-size: 1.25rem;
    font-weight: 300;
    margin: 10px 0 30px 0;
    color: #ffffffb3;
    /* white, 70% opacity */
    z-index: 1
}


/* Button = hire us (container styles) */
.intro--banner button {
    position: relative;
    padding: 5px 17px 5px 12px;
    font-weight: 700;
    text-transform: uppercase;
    background-color: transparent;
    border: none
}

/* blue box */
.intro--banner button .btn-background {
    position: absolute;
    top: 0;
    left: -3px;
    right: 0;
    height: 100%;
    background-color: #0f33ff;
    /* vivid blue */
    z-index: -1;
    -webkit-transition: left .2s ease-in-out;
    transition: left .2s ease-in-out
}

/* [animation] = Blue box (sliding background effect) */
.intro--banner button:hover .btn-background {
    left: 0
}

/* remove blue outline*/
.intro--banner button:focus {
    outline: none
}

/* Arrow icon */
.intro--banner button svg {
    position: relative;
    left: 15px;
    width: 5px;
    fill: #fff;
    /* white */
}

/* [animation] = Arrow icon (sliding background effect) */
.intro--banner button:hover svg {
    left: 20px;
    transition: left .2s ease-in-out;
}

/*
.cta2 {
    position: relative;
    left: 120px;
    z-index: 1;
}
*/

/* image = (Astronaut)  */
.intro--banner img {
    position: absolute;
    bottom: 41px;
    right: -12px;
}


/* line = gray*/
.intro--banner::before {
    content: "";
    position: absolute;
    bottom: 20px;
    left: -15px;
    right: 0;
    height: 2px;
    background-color: #282828;
    /* dark gray */
}

/* line = blue*/
.intro--banner::after {
    content: "";
    position: absolute;
    bottom: 18px;
    left: 0;
    width: 30px;
    height: 4px;
    background-color: #0f33ff;
    /* vivid blue */
}

/* end of intro banner */



/* (Parent) = a + h3 + p (3 boxes under banner) */
.intro--options {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

/* Text boxes */
.intro--options>a {
    max-width: 230px;
    text-decoration: none;
    color: #5a5656;
    /* medium gray */
    -webkit-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
    border: 4px solid #ffffff0a;
    /* white, 4% opacity */
    border-radius: 10px;
    padding: 20px;
}

/* [animation]Text boxes = (titles) */
.intro--options>a:hover h3 {
    color: #e827ab96;
    /* pink-magenta, ~60% opacity */
}

/* [animation] Text boxes = (descriptions) */
.intro--options>a:hover p {
    color: #fff;
    /* white */
}


/* Text boxes = (titles) */
.intro--options h3 {
    font-size: 1rem;
    text-transform: uppercase;
    color: #f1f1f1;
    /* very light gray */
}

/* Text boxes = (descriptions) */
.intro--options p {
    margin-bottom: 0;
    color: #ffffff86;
    /* white, 86% opacity */
}

/* end of intro options */




/* Media query: large screens (1181px and up) */
@media (min-width: 1181px) {

    /* banner container */
    .intro--banner {
        height: 380px;
        margin: 10px;
    }

    /* page title */
    .intro--banner h1 {
        font-size: 3.4375rem;
        /* 55px */
        width: 75%;
    }

    /* astronaut image */
    .intro--banner img {
        display: block;
        margin: 0 auto;
        width: 100%;
        max-width: 450px;
        height: auto;
        position: relative;
        top: -306px;
        left: 165px;
        transform: none;
    }

    /* option cards (links) */
    .intro--options>a {
        margin-right: 40px;
        background: #181818;
        /* very dark gray */
        border-radius: 8px;
        color: #fff;
        /* white */
        text-decoration: none;
        box-shadow: 0 2px 8px 0 #0002;
        /* black @ ~12% */
        transition: background 0.2s;
    }

    /* last card has no margin */
    .intro--options>a:last-child {
        margin-right: 0;
    }

    /* hover = darker background */
    .intro--options a:hover {
        background: #151414;
        /* near-black */
    }

    /* hover = gold title */
    .intro--options>a:hover h3 {
        color: #FFD700;
        /* gold */
    }
}

/* Media query: medium screens (1180px and below) */
@media (max-width: 1180px) {

    /* banner container */
    .intro--banner {
        height: 380px;
        margin: 10px;
    }

    /* page title */
    .intro--banner h1 {
        font-size: 3.4375rem;
        /* 55px */
        width: 75%;
    }

    /* astronaut image */
    .intro--banner img {
        display: block;
        margin: 0 auto;
        width: 100%;
        max-width: 400px;
        height: auto;
        position: relative;
        top: -246px;
        left: 185px;
        transform: none;
    }

    /* option cards (links) */
    .intro--options>a {
        margin-right: 30px;
        background: #181818;
        /* very dark gray */
        border-radius: 8px;
        color: #fff;
        /* white */
        text-decoration: none;
        box-shadow: 0 2px 8px 0 #0002;
        /* black @ ~12% */
        transition: background 0.2s;
    }

    .intro--options>a:last-child {
        margin-right: 0;
    }

    .intro--options a:hover {
        background: #151414;
        /* near-black */
    }

    .intro--options>a:hover h3 {
        color: #FFD700;
        /* gold */
    }
}

/* Media query: screens between 965px and 1179px */
@media (min-width: 965px) and (max-width: 1179px) {

    /* banner container */
    .intro--banner {
        height: 380px;
        margin: 10px;
    }

    /* page title */
    .intro--banner h1 {
        font-size: 3.125rem;
        /* 50px */
    }

    /* astronaut image */
    .intro--banner img {
        display: block;
        margin: 0 auto;
        width: 100%;
        max-width: 400px;
        height: auto;
        position: relative;
        top: -246px;
        left: 145px;
        transform: none;
    }

    /* option cards (links) */
    .intro--options>a {
        margin-right: 30px;
        background: #181818;
        /* very dark gray */
        border-radius: 8px;
        color: #fff;
        /* white */
        text-decoration: none;
        box-shadow: 0 2px 8px 0 #0002;
        /* black @ ~12% */
        transition: background 0.2s;
    }

    .intro--options>a:last-child {
        margin-right: 0;
    }

    .intro--options a:hover {
        background: #151414;
        /* near-black */
    }

    .intro--options>a:hover h3 {
        color: #FFD700;
        /* gold */
    }
}

/* Media query: screens between 710px and 964px */
@media (min-width: 710px) and (max-width: 964px) {

    /* banner container */
    .intro--banner {
        height: 380px;
        margin: 10px;
    }

    /* page title */
    .intro--banner h1 {
        font-size: 3.125rem;
        /* 50px */
    }

    /* astronaut image */
    .intro--banner img {
        display: block;
        margin: 0 auto;
        width: 100%;
        max-width: 360px;
        height: auto;
        position: relative;
        top: -209px;
        left: 125px;
        transform: none;
    }

    /* option cards (links) */
    .intro--options>a {
        margin-right: 30px;
        background: #181818;
        /* very dark gray */
        border-radius: 8px;
        color: #fff;
        /* white */
        text-decoration: none;
        box-shadow: 0 2px 8px 0 #0002;
        /* black @ ~12% */
        transition: background 0.2s;
    }

    .intro--options>a:last-child {
        margin-right: 0;
    }

    .intro--options a:hover {
        background: #151414;
        /* near-black */
    }

    .intro--options>a:hover h3 {
        color: #FFD700;
        /* gold */
    }
}


/*phone*/

/* Media query: screens between 640px and 709px */
@media (min-width: 640px) and (max-width: 709px) {

    /* intro container */
    .intro {
        width: 100%;
        padding: 1rem 0.5rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        background: transparent;
    }

    /* page title */
    .intro--banner h1 {
        font-size: 2rem;
    }

    /* sub-title + option titles */
    .intro--banner h3,
    .intro--options h3 {
        font-size: 1.2rem;
    }

    /* hire us button */
    .intro--banner button {
        padding: 7px 15px;
        font-size: 0.8125rem;
        margin-bottom: 10px;
        width: 100%;
        max-width: 220px;
        box-sizing: border-box;
    }

    /* blue box background */
    .intro--banner button .btn-background {
        position: relative;
        left: -7px;
        padding: 7px 15px;
        font-size: 0.8125rem;
        margin-bottom: 10px;
        width: 100%;
        max-width: 220px;
        box-sizing: border-box;
        background-color: #0f33ff;
        /* vivid blue */
        z-index: -1;
        transition: left .2s ease-in-out;
    }

    /* sliding blue box on hover */
    .intro--banner button:hover .btn-background {
        left: 0;
    }

    /* remove outline */
    .intro--banner button:focus {
        outline: none;
    }

    /* arrow icon */
    .intro--banner button svg {
        position: relative;
        left: 5px;
        width: 15px;
        fill: #fff;
        /* white */
    }

    /* cta button wrapper */
    .intro--banner .cta {
        display: block;
        width: 100%;
        max-width: 220px;
        margin: 0 auto 1rem auto;
        padding: 0.6rem 0.8rem;
        font-size: 0.95rem;
        font-weight: 700;
        color: #fff;
        /* white */
        border: none;
        border-radius: 6px;
        cursor: pointer;
        text-align: center;
        position: relative;
        left: -200px;
        z-index: 2;
    }

    /* astronaut image */
    .intro--banner img {
        display: block;
        margin: 0 auto;
        width: 100%;
        max-width: 320px;
        height: auto;
        position: relative;
        top: -150px;
        left: 80px;
        transform: none;
    }

    /* options container */
    .intro--options {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        justify-content: center;
    }

    /* option cards */
    .intro--options a {
        display: block;
        width: 95%;
        max-width: 580px;
        background: #181818;
        /* very dark gray */
        border-radius: 8px;
        color: #fff;
        /* white */
        text-decoration: none;
        box-shadow: 0 2px 8px 0 #0002;
        /* black @ ~12% */
        transition: background 0.2s;
        margin: 0 auto;
    }

    /* hover = darker background */
    .intro--options a:hover {
        background: #151414;
        /* near-black */
    }

    /* option titles */
    .intro--options h3 {
        font-size: 0.95rem;
        margin: 0 0 0.5rem 0;
        font-weight: 700;
    }

    /* hover = gold title */
    .intro--options>a:hover h3 {
        color: #FFD700;
        /* gold */
    }

    /* option descriptions */
    .intro--options p {
        font-size: 0.9rem;
        margin: 0;
        line-height: 1.4;
    }
}

/* Media query: screens between 480px and 639px */
@media (min-width: 480px) and (max-width: 639px) {

    /* intro container */
    .intro {
        width: 100%;
        padding: 1rem 0.5rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        background: transparent;
    }

    /* page title */
    .intro--banner h1 {
        font-size: 1.7rem;
    }

    /* sub-title + option titles */
    .intro--banner h3,
    .intro--options h3 {
        font-size: 1.1rem;
    }

    /* hire us button */
    .intro--banner button {
        padding: 7px 15px;
        font-size: 0.8125rem;
        margin-bottom: 10px;
        width: 100%;
        max-width: 220px;
        box-sizing: border-box;
    }

    /* blue box */
    .intro--banner button .btn-background {
        position: relative;
        left: -7px;
        padding: 7px 15px;
        font-size: 0.8125rem;
        margin-bottom: 10px;
        width: 100%;
        max-width: 220px;
        box-sizing: border-box;
        background-color: #0f33ff;
        /* vivid blue */
        z-index: -1;
        transition: left .2s ease-in-out;
    }

    /* hover = sliding blue box */
    .intro--banner button:hover .btn-background {
        left: 0;
    }

    /* remove outline */
    .intro--banner button:focus {
        outline: none;
    }

    /* arrow icon */
    .intro--banner button svg {
        position: relative;
        left: 5px;
        width: 15px;
        fill: #fff;
        /* white */
    }

    /* CTA button wrapper */
    .intro--banner .cta {
        display: block;
        width: 100%;
        max-width: 220px;
        margin: 0 auto 1rem auto;
        padding: 0.6rem 0.8rem;
        font-size: 0.95rem;
        font-weight: 700;
        color: #fff;
        /* white */
        border: none;
        border-radius: 6px;
        cursor: pointer;
        text-align: center;
        position: relative;
        left: -140px;
        z-index: 2;
    }

    /* astronaut image */
    .intro--banner img {
        display: block;
        margin: 0 auto;
        width: 100%;
        max-width: 280px;
        height: auto;
        position: relative;
        top: -90px;
        left: 40px;
        transform: none;
    }

    /* options container */
    .intro--options {
        width: 100%;
        max-width: 490px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        justify-content: center;
    }

    /* option cards */
    .intro--options a {
        display: block;
        width: 90%;
        max-width: 490px;
        background: #181818;
        /* very dark gray */
        border-radius: 8px;
        color: #fff;
        /* white */
        text-decoration: none;
        box-shadow: 0 2px 8px 0 #0002;
        /* black @ ~12% */
        transition: background 0.2s;
        margin: 0 auto;
    }

    /* hover = darker background */
    .intro--options a:hover {
        background: #151414;
        /* near-black */
    }

    /* option titles */
    .intro--options h3 {
        font-size: 0.95rem;
        margin: 0 0 0.5rem 0;
        font-weight: 700;
    }

    /* hover = gold title */
    .intro--options>a:hover h3 {
        color: #FFD700;
        /* gold */
    }

    /* option descriptions */
    .intro--options p {
        font-size: 0.9rem;
        margin: 0;
        line-height: 1.4;
    }
}

/* Media query: screens between 400px and 479px */
@media (min-width: 400px) and (max-width: 479px) {

    /* intro container */
    .intro {
        width: 100%;
        height: auto;
        padding: 1rem 0.5rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        background: transparent;
    }

    /* banner container */
    .intro--banner {
        position: relative;
        top: 50px;
    }

    /* page title */
    .intro--banner h1 {
        font-size: 1.4rem;
    }

    /* sub-title + option titles */
    .intro--banner h3,
    .intro--options h3 {
        font-size: 1rem;
    }

    /* hire us button */
    .intro--banner button {
        padding: 7px 15px;
        font-size: 0.8125rem;
        margin-bottom: 10px;
        width: 100%;
        max-width: 220px;
        box-sizing: border-box;
    }

    /* blue box */
    .intro--banner button .btn-background {
        position: relative;
        left: -7px;
        padding: 7px 15px;
        font-size: 0.8125rem;
        margin-bottom: 10px;
        width: 100%;
        max-width: 220px;
        box-sizing: border-box;
        background-color: #0f33ff;
        /* vivid blue */
        z-index: -1;
        transition: left .2s ease-in-out;
    }

    /* hover = sliding blue box */
    .intro--banner button:hover .btn-background {
        left: 0;
    }

    /* remove outline */
    .intro--banner button:focus {
        outline: none;
    }

    /* arrow icon */
    .intro--banner button svg {
        position: relative;
        left: 5px;
        width: 15px;
        fill: #fff;
        /* white */
    }

    /* CTA wrapper */
    .intro--banner .cta {
        display: block;
        width: 100%;
        max-width: 220px;
        margin: 0 auto 1rem auto;
        padding: 0.6rem 0.8rem;
        font-size: 0.95rem;
        font-weight: 700;
        color: #fff;
        /* white */
        border: none;
        border-radius: 6px;
        cursor: pointer;
        text-align: center;
        position: relative;
        left: -100px;
        z-index: 2;
    }

    /* astronaut image */
    .intro--banner img {
        display: block;
        margin: 0 auto;
        width: 100%;
        max-width: 260px;
        height: auto;
        position: relative;
        top: -57px;
        left: 52px;
        transform: none;
    }

    /* options container */
    .intro--options {
        width: 100%;
        max-width: 295px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        justify-content: center;
        position: relative;
        top: 50px;
    }

    /* option cards */
    .intro--options a {
        display: block;
        width: 88%;
        max-width: 380px;
        background: #181818;
        /* dark gray */
        border-radius: 8px;
        color: #fff;
        /* white */
        text-decoration: none;
        box-shadow: 0 2px 8px 0 #0002;
        /* subtle black shadow */
        transition: background 0.2s;
        margin: 0 auto;
    }

    /* hover = darker background */
    .intro--options a:hover {
        background: #151414;
        /* near-black */
    }

    /* option titles */
    .intro--options h3 {
        font-size: 0.95rem;
        margin: 0 0 0.5rem 0;
        font-weight: 700;
    }

    /* hover = gold title */
    .intro--options>a:hover h3 {
        color: #FFD700;
        /* gold */
    }

    /* option descriptions */
    .intro--options p {
        font-size: 0.9rem;
        margin: 0;
        line-height: 1.4;
    }
}

@media (max-width: 399px) {
    .intro {
        width: 100%;
        padding: 1rem 0.5rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        background: transparent;
    }

    .intro--banner {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;

    }

    .intro--banner h1 {
        font-size: 1.2rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 5%;
    }

    .intro--banner h3 {
        font-size: 0.95rem;
        text-align: center;
        margin: 0 0 1rem 0;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: 5%;
    }



    .intro--banner button {
        padding: 7px 15px;
        font-size: 0.8125rem;
        margin-bottom: 10px;
        width: 100%;
        max-width: 220px;
        box-sizing: border-box;
    }

    .intro--banner button .btn-background {
        position: relative;
        left: -7px;
        padding: 7px 15px;
        font-size: 0.8125rem;
        margin-bottom: 10px;
        width: 100%;
        max-width: 220px;
        box-sizing: border-box;
        background-color: #0f33ff;
        z-index: -1;
        transition: left .2s ease-in-out;
    }

    .intro--banner button:hover .btn-background {
        left: 0;
    }

    .intro--banner button:focus {
        outline: none;
    }

    .intro--banner button svg {
        position: relative;
        left: 5px;
        width: 15px;
        fill: #fff;
    }

    .intro--banner .cta {
        display: block;
        width: 100%;
        max-width: 220px;
        margin: 0 auto 1rem auto;
        padding: 0.6rem 0.8rem;
        font-size: 0.95rem;
        font-weight: 700;
        color: #fff;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        text-align: center;
        position: relative;
        top: 190px;
        z-index: 2;
    }

    .intro--banner img {
        display: block;
        margin: 0 auto;
        width: 85%;
        max-width: 220px;
        height: auto;
        position: relative;
        top: -25px;
        left: auto;
        transform: none;
    }



    .intro--options {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        justify-content: center;
    }

    .intro--options a {
        display: block;
        width: 85%;
        max-width: 280px;
        background: #181818;
        border-radius: 8px;
        color: #fff;
        text-decoration: none;
        box-shadow: 0 2px 8px 0 #0002;
        transition: background 0.2s;
        margin: 0 auto;
    }

    .intro--banner h1::before {
        content: "";
        position: relative;
        top: 150px;
        left: 3px;
        width: 30px;
        height: 30px;
        background-color: #0f33ff;
        border-radius: 50%;
        scale: 0.6;
    }

    .intro--banner h1::after {
        content: "";
        position: relative;
        top: 0px;
        left: 5px;
        width: 10px;
        height: 10px;
        background-color: #FFD700;
    }

    .intro--options a:hover {
        background: #151414;
    }

    .intro--options h3 {
        font-size: 0.95rem;
        margin: 0 0 0.5rem 0;
        font-weight: 700;
    }

    .intro--options>a:hover h3 {
        color: #FFD700;
    }

    .intro--options p {
        font-size: 0.9rem;
        margin: 0;
        line-height: 1.4;
    }


}


/*End of Home*/








/*Skills*/

/* (Parent) = (badge-row / .skills--banner) + skills--lockup + (intro--options / skills--options)*/
.skills {
    position: relative;
    top: 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 960px;
    max-width: 80%;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto
}

@media (max-width: 1180px) {
    .skills {
        max-width: 100%;
    }
}

/* (parent) = title + subtitle */
.skills--banner {
    position: relative;
    top: 50px;
    left: 10%;
    width: 100%;
}

/* title */
.skills--banner h1 {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 0.5rem 0;
    color: #fff;
    /* white */
    text-transform: uppercase;
}

/* subtitle */
.skills--banner h3 {
    font-size: 1.25rem;
    font-weight: 400;
    margin: 0;
    color: #c0c0c0be;
    /* silver-gray (semi-transparent) */
}

/* end of (parent) = title + subtitle */



/* (parent) = slider + left button + right button */
.skills--lockup {
    position: relative;
    top: -5px;
}




/* (parent) = slider--item + right item + center item + left item + right item*/
.skills--lockup .slider {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 80%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}


/* (parent) = a */
.skills--lockup .slider--item {
    position: absolute;
    display: none;
    text-align: center
}

/* (parent) = image + title + description */
.skills--lockup .slider--item a {
    text-decoration: none;
    color: #858585;
    /* medium gray */
}

/* (parent) = Image */
.skills--lockup .slider--item-image {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden
}

/* Image */
.skills--lockup .slider--item-image img {
    width: 100%
}

/* title*/
.skills--lockup .slider--item-title {
    margin-top: 10px;
    font-size: 0.857rem;
    font-weight: 700;
    text-transform: uppercase
}

/* description*/
.skills--lockup .slider--item-description {
    display: none;
    max-width: 250px;
    margin: 0 auto
}

/* End of(parent) = image + title + description */





/* Left Item */
.skills--lockup .slider--item-left {
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
}

/* Right Item */
.skills--lockup .slider--item-right {
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: block;
}


/* (parent) Center Item = a  */
.skills--lockup .slider--item-center {
    position: relative;
    top: 30px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: block;
}

/* (parent) image + title + description */
.skills--lockup .slider--item-center a {
    color: #fff;
    /* white */
}

/* Image */
.skills--lockup .slider--item-center .slider--item-image {
    width: 300px;
    height: 300px
}

/* title*/
.skills--lockup .slider--item-center .slider--item-title {
    margin-top: 25px;
    font-size: 1rem;
}

/* description*/
.skills--lockup .slider--item-center .slider--item-description {
    display: block
}

/* end of (parent) image + title + description */




/* end of  (parent) = slider--item + right item + center item + left item + right item*/





/* (parent) = buttons  */

.skills--lockup .slider--next,
.skills--lockup .slider--prev {
    position: absolute;
    top: 160px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 50px;
    height: 50px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #2828282e;
    border-radius: 50%;
    cursor: pointer
}

/* (parent) = svg (right button) */
.skills--lockup .slider--next {
    right: 0;
}

/* (parent) = svg (left button) */
.skills--lockup .slider--prev {
    left: 0;
}

/* arrow */
.skills--lockup .slider--next svg,
.skills--lockup .slider--prev svg {
    width: 20px;
    fill: #fff;
    /* white */
}

/* end of (parent) = buttons  */



/* (parent) = a  */

.skills-options {
    width: 100%;
    height: auto;
    max-width: 660px;
    margin: 0 auto;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    left: -20px;
}


/* (parent) = title + description  */

.skills-options a {
    display: block;
    width: 100%;
    max-width: 280px;
    background: #181818;
    /* near-black gray */
    border-radius: 8px;
    color: #fff;
    /* white */
    text-decoration: none;
    box-shadow: 0 2px 8px 0 #0002;
    /* black (13% opacity) */
    transition: background 0.2s;
    margin: 0 auto;
}

/* [animation] = change background color on hover  */
.intro--options a:hover {
    background: #151414;
    /* very-black gray */
}

/* title */
.intro--options h3 {
    font-size: 0.95rem;
    margin: 0 0 0.5rem 0;
    font-weight: 700;
}

/* [animation] = change background color on hover  */
.intro--options>a:hover h3 {
    color: #FFD700;
    /* gold */
}

/* description */
.intro--options p {
    font-size: 0.9rem;
    margin: 0;

}

/* end of (parent) = title + description  */





@media (min-width: 1181px) {

    /* (Parent) = (badge-row / .skills--banner) + skills--lockup + (intro--options / skills--options)*/
    .skills {
        width: 100%;
        height: 100vh;
        padding: 1rem 0.5rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        background: transparent;
        scale: 0.9;
    }

    /* (parent) = title + subtitle */
    .skills--banner {
        position: relative;
        top: 0px;
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        scale: 1;
    }

    /* title */
    .skills h1 {
        font-size: 1.3rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 15%;
    }

    /* sub-title */
    .skills--banner h3 {
        font-size: 0.85rem;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: 15%;
        left: 0px;
        font-weight: 500;
        width: 95%;
    }

    /* end of (parent) = title + subtitle */



    /* (parent) = slider + left button + right button */
    .skills--lockup {
        position: relative;
        top: -5px;
    }




    /* (parent) = slider--item + right item + center item + left item + right item*/
    .skills--lockup .slider {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 75%;
        margin: 0 auto;
        padding: 0;
        list-style: none;
        scale: 0.75;
        position: relative;
        top: -50px;
    }

    /* (parent) = a */
    .skills--lockup .slider--item {
        position: absolute;
        display: none;
        text-align: center
    }

    /* (parent) = image + title + description */
    .skills--lockup .slider--item a {
        text-decoration: none;
        color: #858585;
        /* medium gray */
    }

    /* title*/
    .skills--lockup .slider--item-title {
        margin-top: 10px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase
    }

    /* description */
    .skills--lockup .slider--item-description {
        display: none;
        max-width: 250px;
        margin: 0 auto
    }

    /* (parent) = image */
    .skills--lockup .slider--item-image {
        width: 150px;
        height: 150px;
        margin: 0 auto;
        border-radius: 50%;
        overflow: hidden
    }

    /*  image */
    .skills--lockup .slider--item-image img {
        width: 100%
    }

    /* End of(parent) = image + title + description */



    /* left item */
    .skills--lockup .slider--item-left {
        top: 50%;
        left: -200px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: block;
    }

    /* right item */
    .skills--lockup .slider--item-right {
        top: 50%;
        right: -200px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: block;
    }

    /* (parent) Center Item = a */
    .skills--lockup .slider--item-center {
        position: relative;
        top: 30px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        display: block;
    }

    /* (parent) image + title + description */
    .skills--lockup .slider--item-center a {
        color: #fff;
    }

    /* title*/
    .skills--lockup .slider--item-center .slider--item-title {
        margin-top: 25px;
        font-size: 16px
    }

    /* description */
    .skills--lockup .slider--item-center .slider--item-description {
        display: block
    }

    /* (parent) = image */
    .skills--lockup .slider--item-center .slider--item-image {
        width: 300px;
        height: 300px
    }

    /* end of (parent) image + title + description */


    /* end of (parent) = slider--item + right item + center item + left item + right item*/



    /* (parent) = buttons  */
    .skills--lockup .slider--next,
    .skills--lockup .slider--prev {
        position: absolute;
        top: 300px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        display: -ms-flexbox;
        display: flex;
        width: 50px;
        height: 50px;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        background-color: #282828;
        border-radius: 50%;
        cursor: pointer
    }

    /* arrow */
    .skills--lockup .slider--next svg,
    .skills--lockup .slider--prev svg {
        width: 20px;
        fill: #fff
    }

    /* (parent) = svg (right button) */
    .skills--lockup .slider--next {
        right: 0;
    }

    /* (parent) = svg (left button) */
    .skills--lockup .slider--prev {
        left: 0;
    }

    /* end of (parent) = buttons  */



    /* (parent) = a  */
    .skills-options {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        margin: 0 auto;
        padding: 0;
        list-style: none;
        position: relative;
        left: 0px;
        top: -50px;
        gap: 2.8rem;
        /* Optional: adds space between items */
    }

    /* (parent) = title + description  */
    .skills-options a {
        display: block;
        width: 100%;
        /* Fill available space */
        max-width: 580px;
        background: #181818;
        border-radius: 8px;
        color: #fff;
        text-decoration: none;
        box-shadow: 0 2px 8px 0 #0002;
        transition: background 0.2s;
        margin: 0;
        flex: 1 1 0;
        /* Allow items to grow/shrink equally */
    }

}

@media (max-width: 1180px) {

    /* (Parent) = (badge-row / .skills--banner) + skills--lockup + (intro--options / skills--options)*/
    .skills {
        width: 100%;
        height: 100vh;
        padding: 1rem 0.5rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        background: transparent;
    }

    /* (parent) = .skills--banner */
    .skills--banner {
        position: relative;
        top: 0px;
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* title */
    .skills h1 {
        font-size: 1.3rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 15%;

    }

    /* description */
    .skills--banner h3 {
        font-size: 0.85rem;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: 15%;
        left: 0px;
        font-weight: 500;
        width: 95%;
    }




    /* (parent) = slider + left button + right button */
    .skills--lockup {
        position: relative;
        top: -5px;
    }




    /* (parent) = slider */
    .skills--lockup .slider {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 50%;
        margin: 0 auto;
        padding: 0;
        list-style: none;
        scale: 0.75;
        position: relative;
        top: -50px;
    }

    /* (parent) = slider item */
    .skills--lockup .slider--item {
        position: absolute;
        display: none;
        text-align: center
    }

    /* (parent) = slider item link */
    .skills--lockup .slider--item a {
        text-decoration: none;
        color: #858585
    }

    /* (parent) = slider item title */
    .skills--lockup .slider--item-title {
        margin-top: 10px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase
    }



    /* (parent) = slider item description */
    .skills--lockup .slider--item-description {
        display: none;
        max-width: 250px;
        margin: 0 auto
    }

    /* (parent) = slider item image */
    .skills--lockup .slider--item-image {
        width: 150px;
        height: 150px;
        margin: 0 auto;
        border-radius: 50%;
        overflow: hidden
    }

    /* image */
    .skills--lockup .slider--item-image img {
        width: 100%
    }

    /* End of(parent) = image + title + description */


    /* left item */
    .skills--lockup .slider--item-left {
        top: 50%;
        left: -200px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: block;
    }

    /* right item */
    .skills--lockup .slider--item-right {
        top: 50%;
        right: -200px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: block;
    }

    /* (parent) Center Item = a */
    .skills--lockup .slider--item-center {
        position: relative;
        top: 30px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        display: block;
    }

    /* (parent) image + title + description */
    .skills--lockup .slider--item-center a {
        color: #fff;
    }

    /* title */
    .skills--lockup .slider--item-center .slider--item-title {
        margin-top: 25px;
        font-size: 16px
    }

    /* (parent) = slider item description */
    .skills--lockup .slider--item-center .slider--item-description {
        display: block
    }

    /* (parent) = slider item image */
    .skills--lockup .slider--item-center .slider--item-image {
        width: 300px;
        height: 300px
    }

    /* end of (parent) image + title + description */



    /* (parent) = buttons */
    .skills--lockup .slider--next,
    .skills--lockup .slider--prev {
        position: absolute;
        top: 300px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 50px;
        height: 50px;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        background-color: #282828;
        border-radius: 50%;
        cursor: pointer
    }

    /* arrow */
    .skills--lockup .slider--next svg,
    .skills--lockup .slider--prev svg {
        width: 20px;
        fill: #fff
    }

    /* (parent) = slider item next */
    .skills--lockup .slider--next {
        right: 0;
    }

    /* (parent) = slider item previous */
    .skills--lockup .slider--prev {
        left: 0;
    }

    /* end of (parent) = buttons */




    /* (parent) = a  */
    .skills-options {
        display: flex;
        flex-direction: row;
        /* Ensure items are in a row */
        justify-content: space-between;
        align-items: stretch;
        margin: 0 auto;
        padding: 0;
        list-style: none;
        position: relative;
        left: 0px;
        top: -50px;
        gap: 1rem;
        /* Optional: adds space between items */
    }

    /* (parent) = title + description */
    .skills-options a {
        display: block;
        width: 100%;
        /* Fill available space */
        max-width: 280px;
        background: #181818;
        border-radius: 8px;
        color: #fff;
        text-decoration: none;
        box-shadow: 0 2px 8px 0 #0002;
        transition: background 0.2s;
        margin: 0;
        flex: 1 1 0;
        /* Allow items to grow/shrink equally */
    }
}

@media (min-width: 965px) and (max-width: 1179px) {

    /* (Parent) = (badge-row / .skills--banner) + skills--lockup + (intro--options / skills--options)*/
    .skills {
        width: 100%;
        height: 100vh;
        padding: 1rem 0.5rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        background: transparent;
    }

    /* (parent) = skills--banner */
    .skills--banner {
        position: relative;
        top: 0px;
        width: 100%;
        left: 200px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    /* title */
    .skills h1 {
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 5px;
        left: 0px;
    }

    /* subtitle */
    .skills--banner h3 {
        font-size: 0.85rem;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: -20px;
        left: 200px;
        font-weight: 500;
        width: 95%;
    }

    /* end of (parent) = title + subtitle */


    /* (parent) = slider + left button + right button */
    .skills--lockup {
        position: relative;
        top: -5px;
    }




    /* (parent) = slider--item + right item + center item + left item + right item*/
    .skills--lockup .slider {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 50%;
        margin: 0 auto;
        padding: 0;
        list-style: none;
        scale: 0.75;
        position: relative;
        top: -50px;
    }

    /* (parent) = a */
    .skills--lockup .slider--item {
        position: absolute;
        display: none;
        text-align: center
    }

    /* (parent) = image + title + description */
    .skills--lockup .slider--item a {
        text-decoration: none;
        color: #858585;
        /* gray */
    }

    /* title */
    .skills--lockup .slider--item-title {
        margin-top: 10px;
        font-size: 1rem;
        font-weight: 700;
        text-transform: uppercase
    }

    /* description */
    .skills--lockup .slider--item-description {
        display: none;
        max-width: 250px;
        margin: 0 auto
    }

    /* (parent) = image */
    .skills--lockup .slider--item-image {
        width: 150px;
        height: 150px;
        margin: 0 auto;
        border-radius: 50%;
        overflow: hidden
    }

    /* image */
    .skills--lockup .slider--item-image img {
        width: 100%
    }

    /* End of(parent) = image + title + description */



    /* left item */
    .skills--lockup .slider--item-left {
        top: 50%;
        left: -200px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: block;
    }

    /* right item */
    .skills--lockup .slider--item-right {
        top: 50%;
        right: -200px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: block;
    }

    /* (parent) Center Item = a */
    .skills--lockup .slider--item-center {
        position: relative;
        top: 30px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        display: block;
    }

    /* (parent) image + title + description */
    .skills--lockup .slider--item-center a {
        color: #fff;
        /* white */
    }

    /* title */
    .skills--lockup .slider--item-center .slider--item-title {
        margin-top: 25px;
        font-size: 16px
    }

    /* description */
    .skills--lockup .slider--item-center .slider--item-description {
        display: block
    }

    /* (parent) = image */
    .skills--lockup .slider--item-center .slider--item-image {
        width: 300px;
        height: 300px
    }

    /* End of (parent) = image + title + description */




    /* button */
    .skills--lockup .slider--next,
    .skills--lockup .slider--prev {
        position: absolute;
        top: 300px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 50px;
        height: 50px;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        background-color: #282828;
        border-radius: 50%;
        cursor: pointer
    }

    /* arrow*/
    .skills--lockup .slider--next svg,
    .skills--lockup .slider--prev svg {
        width: 20px;
        fill: #fff;
        /* white */
    }

    /* (parent) = svg (right button) */
    .skills--lockup .slider--next {
        right: 0;
    }

    /* (parent) = svg (left button) */
    .skills--lockup .slider--prev {
        left: 0;
    }

    /* button */




    /* (parent) = a */
    .skills-options {
        display: flex;
        flex-direction: row;
        /* Ensure items are in a row */
        justify-content: space-between;
        align-items: stretch;
        margin: 0 auto;
        padding: 0;
        list-style: none;
        position: relative;
        left: 0px;
        top: -50px;
        gap: 1rem;
        /* Optional: adds space between items */
    }

    /* (parent) = title + description  */
    .skills-options a {
        display: block;
        width: 100%;
        /* Fill available space */
        max-width: 280px;
        background: #181818;
        /* near-black gray */
        border-radius: 8px;
        color: #fff;
        /* white */
        text-decoration: none;
        box-shadow: 0 2px 8px 0 #0002;
        /* subtle shadow */
        transition: background 0.2s;
        margin: 0;
        flex: 1 1 0;
        /* Allow items to grow/shrink equally */
    }
}

@media (min-width: 710px) and (max-width: 964px) {

    /* (Parent) = (badge-row / .skills--banner) + skills--lockup + (intro--options / skills--options) */
    .skills {
        width: 100%;
        height: 100vh;
        padding: 1rem 0.5rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        background: transparent;
    }

    /* (parent) = title + subtitle */
    .skills--banner {
        position: relative;
        top: 0px;
        width: 100%;
        left: 200px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    /* title  */
    .skills h1 {
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 5px;
        left: 0px;
    }

    /* subtitle */
    .skills--banner h3 {
        font-size: 0.85rem;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: -20px;
        left: 200px;
        font-weight: 500;
        width: 95%;
    }

    /* end of (parent) = title + subtitle */



    /* (parent) = slider + left button + right button */
    .skills--lockup {
        position: relative;
        top: -5px;
    }

    /* (parent) = slider--item + right item + center item + left item + right item*/
    .skills--lockup .slider {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 50%;
        margin: 0 auto;
        padding: 0;
        list-style: none;
        scale: 0.75;
        position: relative;
        top: -50px;
    }

    /* (parent) = a */
    .skills--lockup .slider--item {
        position: absolute;
        display: none;
        text-align: center
    }

    /* (parent) = image + title + description */
    .skills--lockup .slider--item a {
        text-decoration: none;
        color: #858585
    }

    /* title*/
    .skills--lockup .slider--item-title {
        margin-top: 10px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase
    }

    /* description*/
    .skills--lockup .slider--item-description {
        display: none;
        max-width: 250px;
        margin: 0 auto
    }

    /* (parent) = image */
    .skills--lockup .slider--item-image {
        width: 150px;
        height: 150px;
        margin: 0 auto;
        border-radius: 50%;
        overflow: hidden
    }

    /* (child) = img */
    .skills--lockup .slider--item-image img {
        width: 100%
    }



    /* left item */
    .skills--lockup .slider--item-left {
        top: 50%;
        left: -200px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: block;
    }

    /* right item */
    .skills--lockup .slider--item-right {
        top: 50%;
        right: -200px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: block;
    }

    /* (parent) Center Item = a */
    .skills--lockup .slider--item-center {
        position: relative;
        top: 30px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        display: block;
    }

    /* (parent) image + title + description */
    .skills--lockup .slider--item-center a {
        color: #fff;
    }

    /* title */
    .skills--lockup .slider--item-center .slider--item-title {
        margin-top: 25px;
        font-size: 16px
    }

    /* description */
    .skills--lockup .slider--item-center .slider--item-description {
        display: block
    }

    /* (parent) = image */
    .skills--lockup .slider--item-center .slider--item-image {
        width: 300px;
        height: 300px
    }

    /* End of (parent) = image + title + description */




    /* (parent) = button */
    .skills--lockup .slider--next,
    .skills--lockup .slider--prev {
        position: absolute;
        top: 300px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 50px;
        height: 50px;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        background-color: #282828;
        border-radius: 50%;
        cursor: pointer
    }

    /* arrow */
    .skills--lockup .slider--next svg,
    .skills--lockup .slider--prev svg {
        width: 20px;
        fill: #fff
    }

    /* (parent) = svg (right button) */
    .skills--lockup .slider--next {
        right: 0;
    }

    /* (parent) = svg (left button) */
    .skills--lockup .slider--prev {
        left: 0;
    }

    /*(parent) = button */




    /* (parent) = a  */
    .skills-options {
        display: flex;
        flex-direction: row;
        /* Ensure items are in a row */
        justify-content: space-between;
        align-items: stretch;
        margin: 0 auto;
        padding: 0;
        list-style: none;
        position: relative;
        left: 0px;
        top: -50px;
        gap: 1rem;
        /* Optional: adds space between items */
    }

    /* (parent) = title + description  */
    .skills-options a {
        display: block;
        width: 100%;
        /* Fill available space */
        max-width: 280px;
        background: #181818;
        border-radius: 8px;
        color: #fff;
        text-decoration: none;
        box-shadow: 0 2px 8px 0 #0002;
        transition: background 0.2s;
        margin: 0;
        flex: 1 1 0;
        /* Allow items to grow/shrink equally */
    }
}




@media (min-width: 600px) and (max-width: 709px) {

    /* (Parent) = (badge-row / .skills--banner) + skills--lockup + (intro--options / skills--options)*/
    .skills {
        width: 100%;
        height: 100vh;
        padding: 1rem 0.5rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        background: transparent;
    }

    /* (Parent) = (badge-row / .skills--banner) + skills--lockup + (intro--options / skills--options) */
    .skills--banner {
        position: relative;
        top: 0px;
        width: 100%;
        left: 100px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    /* title */
    .skills h1 {
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 5px;
        left: 0px;
    }

    /* subtitle */
    .skills--banner h3 {
        font-size: 0.85rem;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: -20px;
        left: 200px;
        font-weight: 500;
        width: 95%;
    }

    /* end of (parent) = title + subtitle */



    /* (parent) = slider + left button + right button */
    .skills--lockup {
        position: relative;
        top: -5px;
    }


    /* (parent) = slider--item + right item + center item + left item + right item*/
    .skills--lockup .slider {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 50%;
        margin: 0 auto;
        padding: 0;
        list-style: none;
        scale: 0.75;
        position: relative;
        top: -50px;
    }

    /* (parent) = a */
    .skills--lockup .slider--item {
        position: absolute;
        display: none;
        text-align: center
    }

    /* (parent) = image + title + description */
    .skills--lockup .slider--item a {
        text-decoration: none;
        color: #858585
    }

    /* (parent) = title */
    .skills--lockup .slider--item-title {
        margin-top: 10px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase
    }

    /* description */
    .skills--lockup .slider--item-description {
        display: none;
        max-width: 250px;
        margin: 0 auto
    }

    /* (parent) = image */
    .skills--lockup .slider--item-image {
        width: 150px;
        height: 150px;
        margin: 0 auto;
        border-radius: 50%;
        overflow: hidden
    }

    /* image */
    .skills--lockup .slider--item-image img {
        width: 100%
    }

    /* End of(parent) = image + title + description */

    /* left item */
    .skills--lockup .slider--item-left {
        top: 50%;
        left: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: none;
    }

    /* right item */
    .skills--lockup .slider--item-right {
        top: 50%;
        right: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: none;
    }

    /* (parent) Center Item = a */
    .skills--lockup .slider--item-center {
        position: relative;
        top: 30px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        display: block;
    }

    /* (parent) image + title + description */
    .skills--lockup .slider--item-center a {
        color: #fff;
    }

    /* title */
    .skills--lockup .slider--item-center .slider--item-title {
        margin-top: 25px;
        font-size: 16px
    }

    /* description */
    .skills--lockup .slider--item-center .slider--item-description {
        display: block
    }

    /* (parent) = image */
    .skills--lockup .slider--item-center .slider--item-image {
        width: 300px;
        height: 300px
    }

    /* End of (parent) = image + title + description */


    /* (parent) = button */
    .skills--lockup .slider--next,
    .skills--lockup .slider--prev {
        position: absolute;
        top: 300px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 50px;
        height: 50px;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        background-color: #282828;
        border-radius: 50%;
        cursor: pointer
    }

    /* arrow */
    .skills--lockup .slider--next svg,
    .skills--lockup .slider--prev svg {
        width: 20px;
        fill: #fff
    }

    /* (parent) = svg (right button) */
    .skills--lockup .slider--next {
        right: 0;
    }

    /* (parent) = svg (left button) */
    .skills--lockup .slider--prev {
        left: 0;
    }

    /* End of (parent) = button */



    .skills-options {
        width: 100%;
        height: 100%;
        max-height: 300px;
        max-width: 320px;
        margin: 0 auto;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        justify-content: center;
        padding: 0;
        box-sizing: border-box;
        position: relative;
        left: 0px;
        top: -50px;
    }

    .skills-options a {
        display: block;
        width: 90%;
        max-width: 280px;
        background: #181818;
        border-radius: 8px;
        color: #fff;
        text-decoration: none;
        box-shadow: 0 2px 8px 0 #0002;
        transition: background 0.2s;
        margin: 0 auto;
    }

    .skills-options a:first-child {
        display: none;
    }
}

@media (min-width: 500px) and (max-width: 599px) {

    /* (Parent) = (badge-row / .skills--banner) + skills--lockup + (intro--options / skills--options)*/
    .skills {
        width: 100%;
        height: 100vh;
        padding: 1rem 0.5rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        background: transparent;
    }

    /* (parent) = title + subtitle */
    .skills--banner {
        position: relative;
        top: 0px;
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* title */
    .skills h1 {
        font-size: 1.3rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 15%;

    }

    /* subtitle */
    .skills--banner h3 {
        font-size: 0.85rem;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: 15%;
        left: 0px;
        font-weight: 500;
        width: 95%;
    }

    /* end of (parent) = title + subtitle */



    /* (parent) = slider + left button + right button */
    .skills--lockup {
        position: relative;
        top: -5px;
    }

    /* (parent) = slider--item + right item + center item + left item + right item*/
    .skills--lockup .slider {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 50%;
        margin: 0 auto;
        padding: 0;
        list-style: none;
        scale: 0.75;
        position: relative;
        top: -50px;
    }

    /* (parent) = a */
    .skills--lockup .slider--item {
        position: absolute;
        display: none;
        text-align: center
    }

    /* (parent) = image + title + description */
    .skills--lockup .slider--item a {
        text-decoration: none;
        color: #858585
    }

    /* title */
    .skills--lockup .slider--item-title {
        margin-top: 10px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase
    }

    /* description */
    .skills--lockup .slider--item-description {
        display: none;
        max-width: 250px;
        margin: 0 auto
    }

    /* (parent) = image */
    .skills--lockup .slider--item-image {
        width: 150px;
        height: 150px;
        margin: 0 auto;
        border-radius: 50%;
        overflow: hidden
    }

    /* image */
    .skills--lockup .slider--item-image img {
        width: 100%
    }

    /* left item */
    .skills--lockup .slider--item-left {
        top: 50%;
        left: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: none;
    }

    /* right item */
    .skills--lockup .slider--item-right {
        top: 50%;
        right: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: none;
    }

    /* (parent) = center item = a */
    .skills--lockup .slider--item-center {
        position: relative;
        top: 30px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        display: block;
    }

    /* (parent) image + title + description */
    .skills--lockup .slider--item-center a {
        color: #fff;
    }

    /* title */
    .skills--lockup .slider--item-center .slider--item-title {
        margin-top: 25px;
        font-size: 16px
    }

    /* description */
    .skills--lockup .slider--item-center .slider--item-description {
        display: block
    }

    /* (parent) = image */
    .skills--lockup .slider--item-center .slider--item-image {
        width: 300px;
        height: 300px
    }



    /* button */
    .skills--lockup .slider--next,
    .skills--lockup .slider--prev {
        position: absolute;
        top: 300px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 50px;
        height: 50px;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        background-color: #282828;
        border-radius: 50%;
        cursor: pointer
    }

    /* arrow */
    .skills--lockup .slider--next svg,
    .skills--lockup .slider--prev svg {
        width: 20px;
        fill: #fff
    }

    /* (parent) = svg (right button) */
    .skills--lockup .slider--next {
        right: 0;
    }

    /* (parent) = svg (left button) */
    .skills--lockup .slider--prev {
        left: 0;
    }

    /* end of (parent) = button */



    /* (parent) = a */
    .skills-options {
        width: 100%;
        height: 100%;
        max-height: 300px;
        max-width: 320px;
        margin: 0 auto;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        justify-content: center;
        padding: 0;
        box-sizing: border-box;
        position: relative;
        left: 0px;
        top: -50px;
    }

    /* (parent) = title + description */
    .skills-options a {
        display: block;
        width: 90%;
        max-width: 280px;
        background: #181818;
        border-radius: 8px;
        color: #fff;
        text-decoration: none;
        box-shadow: 0 2px 8px 0 #0002;
        transition: background 0.2s;
        margin: 0 auto;
    }

    /* first box */
    .skills-options a:first-child {
        display: none;
    }
}

@media (min-width: 400px) and (max-width: 499px) {

    /* (Parent) = (badge-row / .skills--banner) + skills--lockup + (intro--options / skills--options)*/
    .skills {
        width: 100%;
        height: 100vh;
        padding: 1rem 0.5rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        background: transparent;
    }

    /* (parent) = title + subtitle */
    .skills--banner {
        position: relative;
        top: 0px;
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* title */
    .skills h1 {
        font-size: 1.3rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 15%;

    }

    /* subtitle */
    .skills--banner h3 {
        font-size: 0.85rem;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: 15%;
        left: 0px;
        font-weight: 500;
        width: 95%;
    }

    /* end of (parent) = title + subtitle */




    /* (parent) = slider + left button + right button */
    .skills--lockup {
        position: relative;
        top: -5px;
    }

    /* (parent) = slider item + right item + center item + left item + rights item */
    .skills--lockup .slider {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 50%;
        margin: 0 auto;
        padding: 0;
        list-style: none;
        scale: 0.75;
        position: relative;
        top: -50px;
    }

    /* (parent) = a */
    .skills--lockup .slider--item {
        position: absolute;
        display: none;
        text-align: center
    }


    /* (parent) = image + title + description */
    .skills--lockup .slider--item a {
        text-decoration: none;
        color: #858585
    }

    /* title */
    .skills--lockup .slider--item-title {
        margin-top: 10px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase
    }

    /* description */
    .skills--lockup .slider--item-description {
        display: none;
        max-width: 250px;
        margin: 0 auto
    }

    /* (parent) = image */
    .skills--lockup .slider--item-image {
        width: 150px;
        height: 150px;
        margin: 0 auto;
        border-radius: 50%;
        overflow: hidden
    }

    /* (child) = img */
    .skills--lockup .slider--item-image img {
        width: 100%
    }

    /* end of (parent) = image + title + description */



    /* item left */
    .skills--lockup .slider--item-left {
        top: 50%;
        left: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: none;
    }

    /* item right */
    .skills--lockup .slider--item-right {
        top: 50%;
        right: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: none;
    }

    /* (parent) Center Item = a */
    .skills--lockup .slider--item-center {
        position: relative;
        top: 30px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        display: block;
    }


    /* (parent) = image + title + description */
    .skills--lockup .slider--item-center a {
        color: #fff;
    }

    /* title */
    .skills--lockup .slider--item-center .slider--item-title {
        margin-top: 25px;
        font-size: 16px
    }

    /* description */
    .skills--lockup .slider--item-center .slider--item-description {
        display: block
    }

    /* (parent) = image */
    .skills--lockup .slider--item-center .slider--item-image {
        width: 300px;
        height: 300px
    }

    /* end of (parent) = image + title + description */



    /* (parent) = buttons */
    .skills--lockup .slider--next,
    .skills--lockup .slider--prev {
        position: absolute;
        top: 300px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 50px;
        height: 50px;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        background-color: #282828;
        border-radius: 50%;
        cursor: pointer
    }

    /* arrow */
    .skills--lockup .slider--next svg,
    .skills--lockup .slider--prev svg {
        width: 20px;
        fill: #fff
    }

    /* (parent) = svg (right button) */
    .skills--lockup .slider--next {
        right: 0;
    }

    /* (parent) = svg (left button) */
    .skills--lockup .slider--prev {
        left: 0;
    }

    /* end of (parent) = buttons */



    /* (parent) = a */
    .skills-options {
        width: 100%;
        height: 100%;
        max-height: 300px;
        max-width: 290px;
        margin: 0 auto;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        justify-content: center;
        padding: 0;
        box-sizing: border-box;
        position: relative;
        left: 0px;
        top: -50px;
    }

    /* (parent) = title + description */
    .skills-options a {
        display: block;
        width: 90%;
        max-width: 280px;
        background: #181818;
        border-radius: 8px;
        color: #fff;
        text-decoration: none;
        box-shadow: 0 2px 8px 0 #0002;
        transition: background 0.2s;
        margin: 0 auto;
    }

    /* first box */
    .skills-options a:first-child {
        display: none;
    }
}

@media (max-width: 399px) {

    /* (Parent) = (badge-row / .skills--banner) + skills--lockup + (intro--options / skills--options)*/
    .skills {
        width: 100%;
        height: 100vh;
        padding: 1rem 0.5rem;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        background: transparent;
    }

    /* (parent) = title + subtitle */
    .skills--banner {
        position: relative;
        top: 0px;
        width: 100%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* title */
    .skills h1 {
        font-size: 1.3rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 15%;

    }

    /* subtitle */
    .skills--banner h3 {
        font-size: 0.85rem;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: 15%;
        left: 0px;
        font-weight: 500;
        width: 95%;
    }

    /* end of (parent) = title + subtitle */


    /* (parent) = slider + left button + right button */
    .skills--lockup {
        position: relative;
        top: -5px;
    }




    /* (parent) = slider--item + right item + center item + left item + right item*/
    .skills--lockup .slider {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 50%;
        margin: 0 auto;
        padding: 0;
        list-style: none;
        scale: 0.75;
        position: relative;
        top: -50px;
    }

    /* (parent) = a */
    .skills--lockup .slider--item {
        position: absolute;
        display: none;
        text-align: center
    }

    /* (parent) = image + title + description */
    .skills--lockup .slider--item a {
        text-decoration: none;
        color: #858585
    }

    /* title */
    .skills--lockup .slider--item-title {
        margin-top: 10px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase
    }

    /* description */
    .skills--lockup .slider--item-description {
        display: none;
        max-width: 250px;
        margin: 0 auto
    }

    /* (parent) = image */
    .skills--lockup .slider--item-image {
        width: 150px;
        height: 150px;
        margin: 0 auto;
        border-radius: 50%;
        overflow: hidden
    }

    /* image */
    .skills--lockup .slider--item-image img {
        width: 100%
    }

    /* left item */
    .skills--lockup .slider--item-left {
        top: 50%;
        left: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: none;
    }

    /* right item */
    .skills--lockup .slider--item-right {
        top: 50%;
        right: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        display: none;
    }

    /* (parent) Center Item = a */
    .skills--lockup .slider--item-center {
        position: relative;
        top: 30px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        display: block;
    }

    /* (parent) image + title + description */
    .skills--lockup .slider--item-center a {
        color: #fff;
    }

    /* title */
    .skills--lockup .slider--item-center .slider--item-title {
        margin-top: 25px;
        font-size: 16px
    }

    /* description */
    .skills--lockup .slider--item-center .slider--item-description {
        display: block
    }

    /* (parent) = image */
    .skills--lockup .slider--item-center .slider--item-image {
        width: 300px;
        height: 300px
    }

    /* End of (parent) = image + title + description */



    /* (parent) = buttons */
    .skills--lockup .slider--next,
    .skills--lockup .slider--prev {
        position: absolute;
        top: 300px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 50px;
        height: 50px;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        background-color: #282828;
        border-radius: 50%;
        cursor: pointer
    }

    /* arrow */
    .skills--lockup .slider--next svg,
    .skills--lockup .slider--prev svg {
        width: 20px;
        fill: #fff
    }

    /* (parent) = svg (right button) */
    .skills--lockup .slider--next {
        right: 0;
    }

    /* (parent) = svg (left button) */
    .skills--lockup .slider--prev {
        left: 0;
    }

    /* end of (parent) = buttons */



    /* (parent) = a */
    .skills-options {
        width: 100%;
        height: 100%;
        max-height: 320px;
        max-width: 320px;
        margin: 0 auto;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
        box-sizing: border-box;
        position: relative;
        left: 0px;
        top: -50px;
    }

    /* (parent) = title + description */
    .skills-options a {
        display: block;
        width: 85%;
        max-width: 280px;
        background: #181818;
        border-radius: 8px;
        color: #fff;
        text-decoration: none;
        box-shadow: 0 2px 8px 0 #0002;
        transition: background 0.2s;
        margin: 0 auto;
        margin-right: 40px;

    }

    /* first box */
    .skills-options a:first-child {
        display: none;
    }
}

/*End of skills*/












/*Works*/
/* (parent) = works--banner + works--options + button */
.works {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 900px;
    max-width: 75%;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    top: 150px;
}

/* (parent) = title + Date + button + image + lines */
.works--banner {
    position: relative;
    top: 140px;
    height: 475px
}

/* title */
.works--banner h2 {
    position: relative;
    margin-top: 35px;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    z-index: 1
}

/* date */
.works--banner h3 {
    position: relative;
    margin-top: 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    z-index: 1
}



/* (parent) = a */
.works--banner button {
    position: relative;
    top: 60px;
    left: -20px;
    z-index: 1100;
    padding: 5px 10px 5px 5px;
    cursor: pointer;
    background-color: #0f33ff;
    border: 2px solid #0f33ff;
    text-transform: capitalize;
}

/* [animation] (parent) = a */
.works--banner button:hover {
    background-color: #181818;
    border: 2px solid #0f33ff;
    z-index: 1100;
    padding: 5px 18px 5px 5px;
    border-radius: 5px;
    text-transform: uppercase;
}

/* (parent) = button text + arrow + blue box */
.works--banner a {
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 0.79rem;
}




/* arrow */
.works--banner a svg {
    position: relative;
    top: 0px;
    left: 5px;
    width: 15px;
    fill: #fff;
    -webkit-transition: left .2s ease-in-out;
    transition: left .2s ease-in-out
}

/* [animation] = arrow */
.works--banner a:hover svg {
    left: 10px
}



/* end of (parent) = button text + arrow + blue box */


/* image of damien */
.works--banner img {
    position: absolute;
    bottom: -90px;
    right: -12px;
}


/* blue square */
.works--banner h2::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 218px;
    width: 30px;
    height: 30px;
    background-color: #0f33ff;
    border-radius: 50%
}

/* yellow circle */
.works--banner h2::after {
    content: "";
    position: absolute;
    top: 255px;
    left: 255px;
    width: 10px;
    height: 10px;
    background-color: #ffd900;
}


/* gray line */
.works--banner::before {
    content: "";
    position: absolute;
    top: 350px;
    left: 3px;
    height: 2px;
    width: 90%;
    background-color: #3841a729;
    -webkit-transform: rotate(-25deg);
    transform: rotate(180deg);
}

/* blue line */
.works--banner::after {
    content: "";
    position: absolute;
    top: 350px;
    left: 16px;
    width: 30px;
    height: 4px;
    border: 1px solid #0f33ff;
    background-color: #0f33ff;
}

/* end of (parent) = title + Date + button + image + shapes + lines */





/* (parent) = 7 options + resume box */
.works--options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
    max-width: 600px;
    margin: 2rem auto 0 auto;
    justify-items: center;
    align-items: center;
    position: relative;
    top: -150px;
    left: 0px;
}

/* (parent) = titles */
.works--options>a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    text-decoration: none;
    color: #fff;
    border: 3px solid #080808;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 0 10px;
    font-weight: bold;
    text-transform: uppercase;
}

/* [animation] = titles  */
.works--options>a:hover {
    border: 3px solid #ffd9001d;
}


/* phillies */
.works--options>a:nth-child(1) {
    background-image: url("../img/about-winners.jpg");
}

/* airbnb */
.works--options>a:nth-child(2) {
    background-image: url("../img/airbnb.jpg")
}

/* cerave */
.works--options>a:nth-child(3) {
    background-image: url("../img/cerave.jpg")
}

/* amazon */
.works--options>a:nth-child(4) {
    background-image: url("../img/amazon.jpg")
}

/* pringles */
.works--options>a:nth-child(5) {
    background-image: url("../img/pring.jpg")
}

/* hims */
.works--options>a:nth-child(6) {
    background-image: url("../img/hims.jpg")
}

/* smokefree */
.works--options>a:nth-child(7) {
    background-image: url("../img/smokefree.jpg")
}



/* titles */
.works--options h5 {
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    transition: transform 0.3s ease;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* [animation] = titles */
.works--options>a:hover h5 {
    transform: translateY(-10px);
    color: #FFD700;
}

/* [animation] = titles = spacing */
.works--options h5 span {
    opacity: 0;
}


/* resume */
.works--options .resume {
    width: 100%;
    border: 3px solid #0f33ff;
}

/* [animation] = resume */
.works--options .resume:hover {
    border-color: #FFD700;
}






/* ----------- Responsive Works Section ----------- */


/* max-width: 399px */
@media (max-width: 399px) {

    /* (parent) = works--banner + works--options + button */
    .works {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 600px;
        height: 100%;
        margin: 0 auto;
        top: 0px;
        left: 0;
    }

    /* (parent) = title + Date + button + image + lines */
    .works--banner {
        position: relative;
        top: 157px;
        height: 475px;
        width: 80%;
        max-width: 400px;
    }

    /* title */
    .works--banner h2 {
        font-size: 20px;
        width: 75%;
        position: relative;
        top: 50px;
        left: -20px;
    }

    /* date */
    .works--banner h3 {
        font-size: 14px;
        position: relative;
        top: 52px;
        left: -20px;
        width: 45%;
    }



    /* (parent) = a */
    .works--banner button {
        position: relative;
        top: 60px;
        left: -20px;
        z-index: 1100;
        padding: 5px 10px 5px 5px;
        cursor: pointer;
        background-color: #0f33ff;
        border: 2px solid #0f33ff;
        text-transform: capitalize;
    }

    /* [animation] (parent) = a */
    .works--banner button:hover {
        background-color: #181818;
        border: 2px solid #0f33ff;
        z-index: 1100;
        padding: 5px 18px 5px 5px;
        border-radius: 5px;
        text-transform: uppercase;
    }

    /* (parent) = button text + arrow + blue box */
    .works--banner a {
        text-decoration: none;
        color: #fff;
        font-weight: 700;
        font-size: 0.79rem;
    }


    /* arrow */
    .works--banner a svg {
        position: relative;
        top: 0px;
        left: 5px;
        width: 15px;
        fill: #fff;

        text-align: center;
    }

    /* [animation] = arrow */
    .works--banner a:hover svg {
        left: 10px;
        -webkit-transition: left .2s ease-in-out;
        transition: left .2s ease-in-out;
    }

    /* end of (parent) = button text + arrow + blue box */



    /* image of damien */
    .works--banner img {
        position: relative;
        top: -200px;
        left: 60px;
        width: 100%;
        height: auto;
        max-width: 300px;
        max-height: 400px;
    }


    /* blue square */
    .works--banner h2::before {
        content: "";
        position: absolute;
        top: 165px;
        left: 233px;
        width: 30px;
        height: 30px;
        background-color: #0f33ff;
        border-radius: 50%;
        scale: 0.6;
    }

    /* yellow circle */
    .works--banner h2::after {
        content: "";
        position: absolute;
        top: 125px;
        left: 215px;
        width: 10px;
        height: 10px;
        background-color: #FFD700;
    }


    /* gray line */
    .works--banner::before {
        content: "";
        position: absolute;
        top: 280px;
        left: -23px;
        height: 2px;
        width: 100%;
        background-color: #282828;
    }

    /* blue line */
    .works--banner::after {
        content: "";
        position: absolute;
        top: 278px;
        left: 1px;
        width: 30px;
        height: 4px;
        border: 1px solid #0f33ff;
        background-color: #0f33ff;
    }

    /* end of (parent) = title + Date + button + image + shapes + lines */





    /* (parent) = 7 options + resume box */
    .works--options {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
        scale: 0.7;
        width: 100%;
        max-width: 400px;
        margin: 2rem auto 0 auto;
        justify-items: center;
        align-items: center;
        position: relative;
        top: -100px;
        left: -30px;
    }

    /* (parent) = titles */
    .works--options>a {
        border: 3px solid #3841a75d;
        border-radius: 10px;
    }

    /* titles */
    .works--options h5 {
        font-size: 1rem;
        font-weight: bold;
        text-transform: uppercase;
        color: #fff;
        transition: transform 0.3s ease;
        margin: 0;
        position: relative;
        top: -60px;
        z-index: 1;
        width: 100%;
    }

    /* [animation] = titles */
    .works--options>a:hover h5 {
        transform: translateY(-10px);
        color: #FFD700;
    }

    /* [animation] = titles = spacing */
    .works--options h5 span {
        opacity: 0;
    }

}

@media (min-width: 400px) and (max-width: 499px) {

    /* (parent) = works--banner + works--options + button */
    .works {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 600px;
        height: 100%;
        margin: 0 auto;
        top: 45px;
        left: 0;
    }

    /* (parent) = title + Date + button + image + lines */
    .works--banner {
        position: relative;
        top: 157px;
        height: 475px;
        width: 100%;
        max-width: 400px;
    }

    /* title */
    .works--banner h2 {
        font-size: 24px;
        width: 75%;
        position: relative;
        top: -135px;
        left: 25px;
    }

    /* date */
    .works--banner h3 {
        font-size: 14px;
        position: relative;
        top: -135px;
        left: 25px;
        width: 45%;
    }




    /* (parent) = a */
    .works--banner button {
        position: relative;
        top: 60px;
        left: -20px;
        z-index: 1100;
        padding: 5px 10px 5px 5px;
        cursor: pointer;
        background-color: #0f33ff;
        border: 2px solid #0f33ff;
        text-transform: capitalize;
    }

    /* [animation] (parent) = a */
    .works--banner button:hover {
        background-color: #181818;
        border: 2px solid #0f33ff;
        z-index: 1100;
        padding: 5px 18px 5px 5px;
        border-radius: 5px;
        text-transform: uppercase;
    }

    /* (parent) = button text + arrow + blue box */
    .works--banner a {
        text-decoration: none;
        color: #fff;
        font-weight: 700;
        font-size: 0.79rem;
    }




    /* arrow */
    .works--banner a svg {
        position: relative;
        left: 5px;
        width: 15px;
        fill: #fff;
        -webkit-transition: left .2s ease-in-out;
        transition: left .2s ease-in-out
    }

    /* [animation] = arrow */
    .works--banner a:hover svg {
        left: 10px
    }



    /* end of (parent) = button text + arrow + blue box */




    /* image of damien */
    .works--banner img {
        position: absolute;
        top: -250px;
        right: -40px;
        width: 100%;
        height: auto;
        max-width: 300px;
        max-height: 400px;
    }



    /* blue square */
    .works--banner h2::before {
        content: "";
        position: absolute;
        top: 115px;
        left: 233px;
        width: 30px;
        height: 30px;
        background-color: #8c0b42;
        border-radius: 50%;
        scale: 0.6;
    }

    /* yellow circle */
    .works--banner h2::after {
        content: "";
        position: absolute;
        top: 165px;
        left: 85px;
        width: 10px;
        height: 10px;
        background-color: #FFD700;
    }


    /* gray line */
    .works--banner::before {
        content: "";
        position: absolute;
        top: 90px;
        left: 0px;
        height: 2px;
        width: 100%;
        max-width: 400px;
        background-color: #282828;
    }

    /* blue line */
    .works--banner::after {
        content: "";
        position: absolute;
        top: 88px;
        left: 1px;
        width: 30px;
        height: 4px;
        border: 1px solid #8c0b42;
        background-color: #8c0b42;
    }


    /* end of (parent) = title + Date + button + image + shapes + lines */





    /* (parent) = 7 options + resume box */
    .works--options {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2.8rem;
        width: 100%;
        max-width: 630px;
        margin: 2rem auto 0 auto;
        justify-items: center;
        align-items: center;
        position: relative;
        top: 20px;
        left: 0px;
        scale: 0.85;
    }

    /* (parent) = titles */
    .works--options>a {
        /* border: 3px solid #3841a75d; */
        border: 3px solid #8c0b42;
        border-radius: 10px;
    }

    /* [animation] = titles  */
    .works--options>a:hover {
        border: 3px solid #ffd9001d;
    }

    /* titles */
    .works--options h5 {
        font-size: 1rem;
        font-weight: bold;
        text-transform: uppercase;
        color: #fff;
        transition: transform 0.3s ease;
        margin: 0;
        position: relative;
        top: -60px;
        z-index: 1;
        width: 100%;
    }

    /* [animation] = titles = spacing */
    .works--options h5 span {
        opacity: 0;
    }


    /* resume */
    .works--options .resume {
        width: 100%;
        border: 3px solid #0f33ff;
    }

    /* [animation] = resume */
    .works--options .resume:hover {
        border-color: #FFD700;
    }
}

@media (min-width: 500px) and (max-width: 709px) {

    /* (parent) = works--banner + works--options + button */
    .works {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* Center horizontally */
        width: 100%;
        max-width: 600px;
        height: 100%;
        margin: 0 auto;
        top: -50px;
    }

    /* (parent) = title + Date + button + image + lines */
    .works--banner {
        position: relative;
        top: 187px;
        height: auto;
        margin: 25px 0;
    }

    /* title */
    .works--banner h2 {
        font-size: 1.75rem;
        width: 75%;
        position: relative;
        top: 85px;
        left: -90px;
    }

    /* date */
    .works--banner h3 {
        font-size: 14px;
        position: relative;
        top: 95px;
        left: -100px;
        text-align: center;
        width: 45%;
    }




    /* (parent) = a */
    .works--banner button {
        position: relative;
        top: 60px;
        left: -20px;
        z-index: 1100;
        padding: 5px 10px 5px 5px;
        cursor: pointer;
        background-color: #0f33ff;
        border: 2px solid #0f33ff;
        text-transform: capitalize;
    }

    /* [animation] (parent) = a */
    .works--banner button:hover {
        background-color: #181818;
        border: 2px solid #0f33ff;
        z-index: 1100;
        padding: 5px 18px 5px 5px;
        border-radius: 5px;
        text-transform: uppercase;
    }

    /* (parent) = button text + arrow + blue box */
    .works--banner a {
        text-decoration: none;
        color: #fff;
        font-weight: 700;
        font-size: 0.79rem;
    }

    /* arrow */
    .works--banner a:hover svg {
        left: 10px
    }

    /* [animation] = arrow */
    .works--banner a svg {
        position: relative;
        left: 5px;
        width: 15px;
        fill: #fff;
        -webkit-transition: left .2s ease-in-out;
        transition: left .2s ease-in-out
    }

    /* end of (parent) = button text + arrow + blue box */



    /* image of damien */
    .works--banner img {
        position: relative;
        top: -200px;
        left: 120px;
        width: 100%;
        height: auto;
        max-width: 300px;
        max-height: 400px;
    }


    /* blue square */
    .works--banner h2::before {
        content: "";
        position: absolute;
        top: 170px;
        left: 343px;
        width: 30px;
        height: 30px;
        background-color: #0f33ff;
        border-radius: 50%;
        scale: 0.6;
    }

    /* yellow circle */
    .works--banner h2::after {
        content: "";
        position: absolute;
        top: 185px;
        left: 25px;
        width: 10px;
        height: 10px;
        background-color: #FFD700;
    }



    /* gray line */
    .works--banner::before {
        content: "";
        position: absolute;
        top: 350px;
        left: -83px;
        height: 2px;
        width: 400px;
        background-color: #282828
    }

    /* blue line */
    .works--banner::after {
        content: "";
        position: absolute;
        top: 348px;
        left: -41px;
        width: 30px;
        height: 4px;
        border: 1px solid #0f33ff;
        background-color: #0f33ff;
    }

    /* end of (parent) = title + Date + button + image + shapes + lines */




    /* (parent) = 7 options + resume box */
    .works--options {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
        width: 100%;
        max-width: 400px;
        margin: 2rem auto 0 auto;
        justify-items: center;
        align-items: center;
        position: relative;
        top: -110px;
        left: -50px;
        scale: 0.8;
        /* Remove position, top, and fixed width */
    }

    /* (parent) = titles */
    .works--options>a {
        border: 3px solid #3841a75d;
        border-radius: 10px;
    }

    /* [animation] = titles  */
    .works--options>a:hover {
        border: 3px solid #ffd9001d;
    }

    /* titles */
    .works--options h5 {
        font-size: 1rem;
        font-weight: bold;
        text-transform: uppercase;
        color: #fff;
        transition: transform 0.3s ease;
        margin: 0;
        position: relative;
        top: -60px;
        z-index: 1;
        width: 100%;
    }

    /* [animation] = titles = spacing */
    .works--options h5 span {
        opacity: 0;
    }


    /* resume */
    .works--options .resume {
        width: 100%;
        border: 3px solid #0f33ff;
    }

    /* [animation] = resume */
    .works--options .resume:hover {
        border-color: #FFD700;
    }
}


@media (min-width: 710px) and (max-width:809px) {
    .works {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* or center */
        justify-content: flex-start;
        width: 80%;
        max-width: 1100px;
        margin: 0 auto;
        /* Remove position: relative and height: 100% */
    }

    .works--banner {
        margin: 40px 0 0 0;
        width: 100%;
        position: relative;

    }


    .works--banner h2 {
        font-size: 2.4rem;
        width: 75%;
        position: relative;
        top: -170px;
        left: -10px;
    }

    .works--banner h3 {
        font-size: 14px;
        position: relative;
        top: -180px;
        left: -10px;
        width: 45%;
    }


    /* (parent) = a */
    .works--banner button {
        position: relative;
        top: 60px;
        left: -20px;
        z-index: 1100;
        padding: 5px 10px 5px 5px;
        cursor: pointer;
        background-color: #0f33ff;
        border: 2px solid #0f33ff;
        text-transform: capitalize;
    }

    /* [animation] (parent) = a */
    .works--banner button:hover {
        background-color: #181818;
        border: 2px solid #0f33ff;
        z-index: 1100;
        padding: 5px 18px 5px 5px;
        border-radius: 5px;
        text-transform: uppercase;
    }

    /* (parent) = button text + arrow + blue box */
    .works--banner a {
        text-decoration: none;
        color: #fff;
        font-weight: 700;
        font-size: 0.79rem;
    }



    /* arrow */
    .works--banner a svg {
        position: relative;
        left: 5px;
        width: 15px;
        fill: #fff;
        -webkit-transition: left .2s ease-in-out;
        transition: left .2s ease-in-out
    }

    /* [animation] = arrow */
    .works--banner a:hover svg {
        left: 10px
    }


    /* end of (parent) = button text + arrow + blue box */



    /* image of damien */
    .works--banner img {
        position: absolute;
        bottom: 130px;
        right: -92px;
        scale: 0.7;
    }


    /* blue square */
    .works--banner::before {
        content: "";
        position: absolute;
        top: 100px;
        left: -23px;
        height: 2px;
        width: 100%;
        background-color: #282828
    }

    /* yellow circle */
    .works--banner::after {
        content: "";
        position: absolute;
        top: 98px;
        left: 1px;
        width: 30px;
        height: 4px;
        border: 1px solid #0f33ff;
        background-color: #0f33ff;
    }


    /* gray line */
    .works--banner h2::before {
        content: "";
        position: absolute;
        top: 150px;
        left: 283px;
        width: 30px;
        height: 30px;
        background-color: #0f33ff;
        border-radius: 50%;
        scale: 0.6;
    }

    /* blue line */
    .works--banner h2::after {
        content: "";
        position: absolute;
        top: 125px;
        left: 215px;
        width: 10px;
        height: 10px;
        background-color: #FFD700;
    }

    /* end of (parent) = title + Date + button + image + shapes + lines */




    /* (parent) = 7 options + resume box */
    .works--options {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 40px;
        width: 90%;
        max-width: 600px;
        margin: 20px 0 0 0;
        /* Remove position, left, scale, height, max-height */
        scale: 0.8;
        padding: 50px;
        position: relative;
        left: -125px;
    }

    /* (parent) = titles */
    .works--options>a {
        border: 3px solid #3841a75d;
        border-radius: 10px;
    }

    /* [animation] = titles  */
    .works--options>a:hover {
        border: 3px solid #ffd9001d;
    }

    /* titles */
    .works--options h5 {
        font-size: 1rem;
        font-weight: bold;
        text-transform: uppercase;
        color: #fff;
        transition: transform 0.3s ease;
        margin: 0;
        position: relative;
        top: -60px;
        z-index: 1;
        width: 100%;
    }

    /* [animation] = titles = spacing */
    .works--options h5 span {
        opacity: 0;
    }


    /* resume */
    .works--options .resume {
        width: 100%;
        border: 3px solid #0f33ff;
    }

    /* [animation] = resume */
    .works--options .resume:hover {
        border-color: #FFD700;
    }

}

@media (min-width: 810px) and (max-width:979px) {

    /* (parent) = works--banner + works--options + button */
    .works {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* or center */
        justify-content: flex-start;
        width: 80%;
        max-width: 1100px;
        margin: 0 auto;
        /* Remove position: relative and height: 100% */
    }

    /* (parent) = title + Date + button + image + lines */
    .works--banner {
        margin: 40px 0 0 0;
        width: 100%;
        position: relative;

    }

    /* title */
    .works--banner h2 {
        font-size: 2.8rem;
        width: 75%;
        position: relative;
        top: -190px;
        left: -10px;
    }

    /* date */
    .works--banner h3 {
        font-size: 14px;
        position: relative;
        top: -200px;
        left: -10px;
        width: 45%;
    }



    /* (parent) = a */
    .works--banner button {
        position: relative;
        top: 60px;
        left: -20px;
        z-index: 1100;
        padding: 5px 10px 5px 5px;
        cursor: pointer;
        background-color: #0f33ff;
        border: 2px solid #0f33ff;
        text-transform: capitalize;
    }

    /* [animation] (parent) = a */
    .works--banner button:hover {
        background-color: #181818;
        border: 2px solid #0f33ff;
        z-index: 1100;
        padding: 5px 18px 5px 5px;
        border-radius: 5px;
        text-transform: uppercase;
    }

    /* (parent) = button text + arrow + blue box */
    .works--banner a {
        text-decoration: none;
        color: #fff;
        font-weight: 700;
        font-size: 0.79rem;
    }



    /* arrow */
    .works--banner a svg {
        position: relative;
        left: 5px;
        width: 15px;
        fill: #fff;
        -webkit-transition: left .2s ease-in-out;
        transition: left .2s ease-in-out
    }

    /* [animation] = arrow */
    .works--banner a:hover svg {
        left: 10px
    }

    /* end of (parent) = button text + arrow + blue box */



    /* image of damien */
    .works--banner img {
        position: absolute;
        bottom: 150px;
        right: -72px;
        scale: 0.8;
    }



    /* blue square */
    .works--banner h2::before {
        content: "";
        position: absolute;
        top: 150px;
        left: 283px;
        width: 30px;
        height: 30px;
        background-color: #0f33ff;
        border-radius: 50%;
        scale: 0.6;
    }

    /* yellow circle */
    .works--banner h2::after {
        content: "";
        position: absolute;
        top: 125px;
        left: 215px;
        width: 10px;
        height: 10px;
        background-color: #FFD700;
    }



    /* gray line */
    .works--banner::before {
        content: "";
        position: absolute;
        top: 120px;
        left: -23px;
        height: 2px;
        width: 100%;
        background-color: #282828
    }

    /* blue line */
    .works--banner::after {
        content: "";
        position: absolute;
        top: 118px;
        left: 1px;
        width: 30px;
        height: 4px;
        border: 1px solid #0f33ff;
        background-color: #0f33ff;
    }

    /* end of (parent) = title + Date + button + image + shapes + lines */



    /* (parent) = 7 options + resume box */
    .works--options {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 50px;
        width: 90%;
        max-width: 600px;
        margin: 20px 0 0 0;
        /* Remove position, left, scale, height, max-height */
        scale: 0.8;
        padding: 50px;
        position: relative;
        left: -100px;
    }

    /* (parent) = titles */
    .works--options>a {
        border: 3px solid #3841a75d;
        border-radius: 10px;
    }

    /* [animation] = titles  */
    .works--options>a:hover {
        border: 3px solid #ffd9001d;
    }

    /* titles */
    .works--options h5 {
        font-size: 1rem;
        font-weight: bold;
        text-transform: uppercase;
        color: #fff;
        transition: transform 0.3s ease;
        margin: 0;
        position: relative;
        top: -60px;
        z-index: 1;
        width: 100%;
    }

    /* [animation] = titles */
    .works--options>a:hover h5 {
        transform: translateY(-10px);
        color: #FFD700;
    }

    /* [animation] = titles = spacing */
    .works--options h5 span {
        opacity: 0;
    }

    /* [animation] = titles = spacing */
    .works--options h5 span {
        opacity: 0;
    }


    /* resume */
    .works--options .resume {
        width: 100%;
        border: 3px solid #0f33ff;
    }

    /* [animation] = resume */
    .works--options .resume:hover {
        border-color: #FFD700;
    }

}

@media (min-width: 980px) and (max-width:1179px) {

    /* (parent) = works--banner + works--options + button */
    .works {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* or center */
        justify-content: flex-start;
        width: 80%;
        max-width: 1100px;
        margin: 0 auto;
        /* Remove position: relative and height: 100% */
    }

    /* (parent) = title + Date + button + image + lines */
    .works--banner {
        margin: 40px 0 0 0;
        width: 100%;
        position: relative;

    }

    /* title */
    .works--banner h2 {
        font-size: 2.9rem;
        width: 75%;
        position: relative;
        top: -190px;
        left: -10px;
    }

    /* date */
    .works--banner h3 {
        font-size: 14px;
        position: relative;
        top: -200px;
        left: -10px;
        width: 45%;
    }



    /* (parent) = a */
    .works--banner button {
        position: relative;
        top: 60px;
        left: -20px;
        z-index: 1100;
        padding: 5px 10px 5px 5px;
        cursor: pointer;
        background-color: #0f33ff;
        border: 2px solid #0f33ff;
        text-transform: capitalize;
    }

    /* [animation] (parent) = a */
    .works--banner button:hover {
        background-color: #181818;
        border: 2px solid #0f33ff;
        z-index: 1100;
        padding: 5px 18px 5px 5px;
        border-radius: 5px;
        text-transform: uppercase;
    }

    /* (parent) = button text + arrow + blue box */
    .works--banner a {
        text-decoration: none;
        color: #fff;
        font-weight: 700;
        font-size: 0.79rem;
    }



    /* arrow */
    .works--banner a svg {
        position: relative;
        left: 5px;
        width: 15px;
        fill: #fff;
        -webkit-transition: left .2s ease-in-out;
        transition: left .2s ease-in-out
    }

    /* [animation] = arrow */
    .works--banner a:hover svg {
        left: 10px
    }




    /* image of damien */
    .works--banner img {
        position: absolute;
        bottom: 220px;
        right: -52px;
        scale: 0.9;
    }




    /* blue square */
    .works--banner h2::before {
        content: "";
        position: absolute;
        top: 150px;
        left: 283px;
        width: 30px;
        height: 30px;
        background-color: #0f33ff;
        border-radius: 50%;
        scale: 0.6;
    }

    /* yellow circle */
    .works--banner h2::after {
        content: "";
        position: absolute;
        top: 125px;
        left: 215px;
        width: 10px;
        height: 10px;
        background-color: #FFD700;
    }


    /* gray line */
    .works--banner::before {
        content: "";
        position: absolute;
        top: 120px;
        left: -23px;
        height: 2px;
        width: 100%;
        background-color: #282828
    }

    /* blue line */
    .works--banner::after {
        content: "";
        position: absolute;
        top: 118px;
        left: 1px;
        width: 30px;
        height: 4px;
        border: 1px solid #0f33ff;
        background-color: #0f33ff;
    }


    /* end of (parent) = title + Date + button + image + shapes + lines */




    /* (parent) = 7 options + resume box */
    .works--options {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 70px;
        width: 100%;
        max-width: 1179px;
        margin: 20px 0 0 0;
        /* Remove position, left, scale, height, max-height */
        scale: 0.9;
        position: relative;
        left: 40%;
        transform: translateX(-50%);

    }

    /* (parent) = titles */
    .works--options>a {
        border: 3px solid #3841a75d;
        border-radius: 10px;
    }

    /* [animation] = titles  */
    .works--options>a:hover {
        border: 3px solid #ffd9001d;
    }

    /* titles */
    .works--options h5 {
        font-size: 1rem;
        font-weight: bold;
        text-transform: uppercase;
        color: #fff;
        transition: transform 0.3s ease;
        margin: 0;
        position: relative;
        top: -60px;
        z-index: 1;
        width: 100%;
    }

    /* [animation] = titles = spacing */
    .works--options h5 span {
        opacity: 0;
    }


    /* resume */
    .works--options .resume {
        width: 100%;
        border: 3px solid #0f33ff;
    }

    /* [animation] = resume */
    .works--options .resume:hover {
        border-color: #FFD700;
    }
}

@media (min-width: 1180px) {

    /* (parent) = works--banner + works--options + button */
    .works {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 900px;
        max-width: 75%;
        height: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin: 0 auto;
        top: 370px;
    }

    /* (parent) = title + Date + button + image + lines */
    .works--banner {
        height: 375px;
        width: 900px;
        position: relative;
        top: 120px;
    }

    /*  title */
    .works--banner h2 {
        font-size: 50px;
        width: 100%;
        position: relative;
        top: -50px;
    }

    /*  date */
    .works--banner h3 {
        font-size: 14px;
        position: relative;
        top: -70px;
        left: -160px;
        text-align: center;
        width: 45%;
    }




    /* (parent) = a */
    .works--banner button {
        position: relative;
        top: 60px;
        left: -20px;
        z-index: 1100;
        padding: 5px 10px 5px 5px;
        cursor: pointer;
        background-color: #0f33ff;
        border: 2px solid #0f33ff;
        text-transform: capitalize;
    }

    /* [animation] (parent) = a */
    .works--banner button:hover {
        background-color: #181818;
        border: 2px solid #0f33ff;
        z-index: 1100;
        padding: 5px 18px 5px 5px;
        border-radius: 5px;
        text-transform: uppercase;
    }

    /* (parent) = button text + arrow + blue box */
    .works--banner a {
        text-decoration: none;
        color: #fff;
        font-weight: 700;
        font-size: 0.79rem;
    }



    /* arrow */
    .works--banner a svg {
        position: relative;
        top: 0px;
        left: 5px;
        width: 15px;
        fill: #fff;
        -webkit-transition: left .2s ease-in-out;
        transition: left .2s ease-in-out
    }

    /* [animation] = arrow */
    .works--banner a:hover svg {
        left: 10px
    }

    /* end of (parent) = button text + arrow + blue box */




    /* image of damien */
    .works--banner img {
        position: absolute;
        bottom: -55px;
        right: 22px;
        width: 380px;
    }



    /* blue square */
    .works--banner::before {
        content: "";
        position: absolute;
        top: 280px;
        left: 3px;
        height: 2px;
        width: 90%;
        background-color: #282828;

    }

    /* yellow circle */
    .works--banner::after {
        content: "";
        position: absolute;
        top: 280px;
        left: 16px;
        width: 30px;
        height: 4px;
        border: 1px solid #0f33ff;
        background-color: #0f33ff;
    }


    /* gray line */
    .works--banner h2::before {
        content: "";
        position: absolute;
        top: 20px;
        left: 520px;
        width: 30px;
        height: 30px;
        background-color: #0f33ff;
        border-radius: 50%
    }

    /* yellow circle */
    .works--banner h2::after {
        content: "";
        position: absolute;
        top: 225px;
        left: 315px;
        width: 10px;
        height: 10px;
        background-color: #FFD700;
    }

    /* end of (parent) = title + Date + button + image + shapes + lines */




    /* (parent) = 7 options + resume box */
    .works--options {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 140px;
        width: 1000px;
        max-width: 100%;
        padding: 100px;
        list-style: none;
        margin: 0 auto;
        scale: 0.72;
        position: relative;
        top: -15px;
        left: -120px;
    }

    /* (parent) = titles */
    .works--options>a {
        border: 3px solid #3841a75d;
        border-radius: 10px;
        position: relative;
        left: -70px;
    }

    /* [animation] = titles  */
    .works--options>a:hover {
        border: 3px solid #ffd9001d;
    }

    /* titles */
    .works--options h5 {
        font-size: 1rem;
        font-weight: bold;
        text-transform: uppercase;
        color: #fff;
        transition: transform 0.3s ease;
        margin: 0;
        position: relative;
        top: -57px;
        z-index: 1;
        width: 100%;
    }

    /* [animation] = titles = spacing */
    .works--options h5 span {
        opacity: 0;
    }


    /* resume */
    .works--options .resume {
        width: 100%;
        border: 3px solid #0f33ff;
    }

    /* [animation] = resume */
    .works--options .resume:hover {
        border-color: #FFD700;
    }
}

/*
@media (max-width: 1180px) {
    .works--banner {
        position: relative;
        top: 27px;
        height: 475px;
        scale: 0.82;
    }

    .works--banner::before {
        content: "";
        position: absolute;
        top: 380px;
        left: 3px;
        height: 2px;
        width: 90%;
        background-color: #3841a729;
        -webkit-transform: rotate(-25deg);
        transform: rotate(180deg);
    }

    .works--banner::after {
        content: "";
        position: absolute;
        top: 380px;
        left: 16px;
        width: 30px;
        height: 4px;
        border: 1px solid #0f33ff;
        background-color: #0f33ff;
    }

    .works--banner h2 {
        font-size: 50px;
        width: 75%;
    }

    .works--banner h2::before {
        content: "";
        position: absolute;
        top: 90px;
        left: 540px;
        width: 30px;
        height: 30px;
        background-color: #0f33ff;
        border-radius: 50%
    }

    .works--banner h2::after {
        content: "";
        position: absolute;
        top: 225px;
        left: 315px;
        width: 10px;
        height: 10px;
        background-color: #FFD700;
    }

    .works--options {
        grid-template-columns: repeat(3, 1fr);
        gap: 60px;
        position: relative;
        top: -20px;
        left: -110px;
        width: 100%;

    }

    .works--options h5 {
        font-size: 1rem;
        font-weight: bold;
        text-transform: uppercase;
        color: #fff;
        transition: transform 0.3s ease;
        margin: 0;
        position: relative;
        top: -90px;
        z-index: 1;
        width: 100%;
    }

    .works--options>a {
        border: 3px solid #3841a75d;
        border-radius: 10px;
    }
}
*/





/* End of works */






/* 04-Experience  */
/* (parent) = title & subtitle  + tooltip + certs + boxes */
.experience-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    top: 146px;
    height: 100%;
}

/* (parent) = 3 boxes */
.experience-container {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    flex-wrap: wrap;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    position: relative;
    top: -220px;
    left: -70px;
    scale: 0.8;
}

.exp {
    flex: 1;
    margin: 10px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 5.5);
}

.exp h2 {
    margin-top: 0;
}

h2 strong {
    color: gold;
}

.exp p {
    max-height: 150px;
    /* Adjust this value as needed */
    overflow-y: auto;
    /* Adds a scrollbar if the content exceeds the max-height */
    margin-top: 10px;
    /* Adds space between the title and the paragraph */
    font-size: 1rem;
}

p strong {
    color: blanchedalmond;
}

.info {
    position: relative;
    top: 5px;
    left: 260px;
    color: #bbbbbba6;
    font-size: 22px;
}

.info::before {
    content: "ℹ";
    color: #0f33ff;
    font-size: 22px;
    display: inline;
    margin-right: 0;
    padding-right: 0;
    line-height: 0.5;
}

.info .info-text {
    display: none;
    position: absolute;
    background-color: #080808;
    color: #f1f1f1;
    padding: 5px;
    border-radius: 5px;
    top: -45px;
    left: -6px;
    font-size: 14px;
    width: 30px;
    height: auto;
}

.info:hover .info-text {
    display: block;
}

.info a:visited {
    width: 50px;
    height: auto;
    color: white;
}


.info2 {
    position: relative;
    top: 5px;
    left: 260px;
    color: #bbbbbba6;
    font-size: 22px;
}

.info2::before {
    content: "ℹ";
    color: #0f33ff;
    font-size: 22px;
    display: inline;
    margin-right: 0;
    padding-right: 0;
    line-height: 0.5;
}

.info2 .info2-text {
    display: none;
    position: absolute;
    background-color: #080808;
    color: #f1f1f1;
    padding: 5px;
    border-radius: 5px;
    top: -55px;
    left: -6px;
    font-size: 14px;
    width: 50px;
    height: auto;
}

.info2:hover .info2-text {
    display: block;
}

.info2 a:visited {
    width: 50px;
    height: auto;
    color: white;
}


.info-3 {
    position: relative;
    top: -1135px;
    right: -157px;
    color: #0f33ffd9;
    font-size: 26px;
}

.info-3 .info-3-text {
    display: none;
    position: absolute;
    background-color: #080808;
    color: #f1f1f1;
    padding: 5px;
    border-radius: 5px;
    top: 5px;
    left: -6px;
    font-size: 14px;
    width: 90px;
    height: auto;
}

.info-3:hover .info-3-text {
    display: block;
}


.info-3 a:visited {
    width: 50px;
    height: auto;
    color: white;
}

.badge-row {
    display: flex;
    justify-content: left;
    margin-top: 15px;
    margin-bottom: -3px;
    max-width: 800px;
    width: 100%;
}

.badge-row img {
    margin: -2px 25px;
    height: 168px;
    width: 164px;
}

.badge {
    transition: transform 0.3s ease;
    cursor: pointer;
    height: 100px;
    width: 100px;
}

.badge:hover {
    transform: scale(2.2);
    /* Scale up the badge on hover */
}

.inf {
    opacity: 0;
}


/* Desktop Styles. */
@media (min-width: 1600px) {
    .top-badges {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: -10px;
        left: -214px;
        z-index: 100;
        width: 100%;
    }

    .top-badges h1 {
        position: relative;
        top: 0px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
    }

    .top-badges p {
        position: relative;
        top: -40px;
        width: 100%;
        max-width: 400px;
        left: 115px;
        font-size: 12px;
    }

    .info-3 {
        position: fixed;
        top: 80px;
        left: 85%;
        transform: translateX(-50%);
        text-align: center;
        color: #0f33ffd9;
        font-size: 26px;
        z-index: 9;
    }

    .info-3 .info-3-text {
        display: none;
        position: absolute;
        background-color: transparent;
        color: #f1f1f1;
        padding: 5px;
        border-radius: 5px;
        top: 145px;
        left: -230px;
        font-size: 14px;
        width: 90px;
        height: auto;
    }

    .arrow-buttons {
        display: none;
    }

    .experience-options {
        display: none;
    }

    .experience-container {
        display: flex;
        width: 131%;
        max-width: 1175px;
        max-height: 550px;
        scale: 0.75;
        gap: 23px;
        z-index: 4;
        padding: 27px 534px;
        position: relative;
        top: -70px;
        left: 0px;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        align-content: flex-start;
        /* border: 2px solid #007bff6b;*/
    }

    .experience-container .exp:first-of-type {
        min-height: 440px;
        max-height: 450px;
    }

    .exp {
        background-color: #ffffff06;
        box-shadow: 0 2px 5px #0f33ff41;
        border: 2px solid #007bffce;
        padding: 0 20px;
        margin: 0 10px;
        border-radius: 8px;
        box-sizing: border-box;
        min-height: 400px;
        max-height: 450px;
        width: 48%;
        box-shadow: 0px 40px 20px 20px #2d2e3021;
        position: relative;
        left: -200px;
        z-index: 3;
    }

    .exp h2 {
        margin: 24px auto;
        text-align: center;
        font-size: 1.7rem;
    }

    .exp p {
        margin: 0;
        /* Remove default margin */
        font-size: 0.9rem;
        line-height: 1.4;
        overflow-y: auto;
        /* Allow p tags to scroll vertically */
        white-space: normal;
        /* Prevent horizontal scrolling of text */
        max-height: 180px;
        /* Height limit for text inside .exp */
        scrollbar-color: transparent rgba(0, 0, 0, 0.451);
        scrollbar-width: thin;
        position: relative;
        top: -35px;
    }

    .exp.chunked {
        display: block;

    }

    /* Keywords list styling */
    .chunked-keywords {
        display: flex;
        gap: 23px;
        list-style-type: none;
        padding: 0;
        margin: 15px auto;
        width: 111%;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        position: relative;
        top: -40px;
        border-radius: 15px;
        left: -30px;
    }

    .exp:nth-of-type(1) .chunked-keywords {
        position: relative;
        top: 5px;
    }

    .exp:nth-of-type(2) .chunked-keywords {
        position: relative;
        top: 0px;
    }

    .exp:nth-of-type(3) .chunked-keywords {
        position: relative;
        top: -5px;
    }

    /* Keyword item styling */
    .chunked-keywords li {
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1.1rem;
        font-weight: 400;
        text-align: center;
        background-color: #ffffff0b;
        color: #007BFF;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }

    /* Glow-on-hover styling */
    .glow-on-hover {
        background-color: #ffffff0b;
        color: #007BFF;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
    }

    /* Animated border */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }

    /* Keyframes for border animation */
    @keyframes border-glow {
        0% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 0 0;
        }

        25% {
            border-image-source: linear-gradient(45deg, #ffd700, white, #ffd700, #ffd700, #0f33ff);
            background-position: 100% 0;

        }

        50% {
            border-image-source: linear-gradient(45deg, #0f33ff, white, #0f33ff, white, #0f33ff);
            background-position: 200% 0;
        }

        75% {
            border-image-source: linear-gradient(45deg, #ffffff, white, #0f33ff, white, #0f33ff, );
            background-position: 300% 0;
        }

        100% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 400% 0;
        }
    }

    /* Supporting paragraph styling */
    .exp.chunked p {
        font-size: 1.5rem;
        line-height: 1.5;
        margin: 0;
        color: #ffffff;
        text-align: left;
        font-family: "utile", sans-serif;
        font-weight: 500;
        font-style: normal;
    }

    .exp:first-of-type p {
        position: relative;
        top: -3px;
    }

    /* Glow-on-hover styling */
    .glow-on-hover {
        background-color: #ffffff0b;
        color: #007BFF;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
    }

    /* Animated border */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }

    /* Keyframes for border animation */
    @keyframes border-glow {
        0% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 0 0;
        }

        25% {
            border-image-source: linear-gradient(45deg, #ffd700, white, #ffd700, #ffd700, #0f33ff);
            background-position: 100% 0;

        }

        50% {
            border-image-source: linear-gradient(45deg, #0f33ff, white, #0f33ff, white, #0f33ff);
            background-position: 200% 0;
        }

        75% {
            border-image-source: linear-gradient(45deg, #ffffff, white, #0f33ff, white, #0f33ff, );
            background-position: 300% 0;
        }

        100% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 400% 0;
        }
    }

    @-webkit-keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    .certs {
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 140px 154px 186px 223px #0d0d0d;
        padding: 50px;
        height: 240px;
        overflow: hidden;
        margin: auto;
        position: relative;
        top: 20px;
        left: 126px;
        width: 100%;
        max-width: 1390px;
        background-color: transparent;
        transition: all 0.5s ease;
        z-index: 0;
    }

    .certs::before,
    .cert::after {
        /*  background: linear-gradient(to right, #0d0d0d 0%, rgba(255, 255, 255, 0) 100%);*/
        content: "";
        padding: 50px;
        height: 244px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }

    .certs::after {
        right: 0px;
        top: 0;
    }

    .certs::before {
        left: 0px;
        top: 0;
        background: linear-gradient(to right, #0d0d0d 0%, rgba(255, 255, 255, 0) 100%);
    }

    .certs .track {
        -webkit-animation: scroll 40s linear infinite;
        animation: scroll 40s linear infinite;
        display: flex;
    }

    .cert-shadow {
        position: absolute;
        top: 0;
        right: -90px;
        height: 100%;
        width: 213px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }

    .cert-shadow-2 {
        position: absolute;
        top: 0;
        left: -120px;
        height: 105%;
        width: 48px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }

    .certs .badge {
        height: 100px;
        width: 250px;
    }



    .badge-row img {
        margin: -2px 7px;
        height: 220px;
        width: 220px;
    }

    .badge {
        transition: transform 0.3s ease;
        cursor: pointer;
        height: 100px;
        width: 100px;
    }

    .badge:hover {
        transform: scale(1.5);
        /* Scale up the badge on hover */
    }


    .big-sizes {
        display: none;
    }

    .badge-copy {
        display: block;
    }



    .info {
        position: relative;
        top: -65px;
        left: 480px;
        color: #bbbbbba6;
        font-size: 12px;
    }

    .info2 {
        position: relative;
        top: -65px;
        left: 480px;
        color: #bbbbbba6;
        font-size: 12px;
    }
}

@media (min-width: 1401px) and (max-width:1599px) {
    .top-badges {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: -10px;
        left: -214px;
        z-index: 100;
        width: 100%;
    }

    .top-badges h1 {
        position: relative;
        top: 0px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
    }

    .top-badges p {
        position: relative;
        top: -40px;
        width: 100%;
        max-width: 400px;
        left: 115px;
        font-size: 12px;
    }

    .info-3 {
        position: fixed;
        top: 80px;
        left: 85%;
        transform: translateX(-50%);
        text-align: center;
        color: #0f33ffd9;
        font-size: 26px;
        z-index: 9;
    }

    .info-3 .info-3-text {
        display: none;
        position: absolute;
        background-color: transparent;
        color: #f1f1f1;
        padding: 5px;
        border-radius: 5px;
        top: 145px;
        left: -230px;
        font-size: 14px;
        width: 90px;
        height: auto;
    }

    .experience-options {
        display: none;
    }

    .experience-container {
        display: flex;
        width: 131%;
        max-width: 1175px;
        max-height: 550px;
        scale: 0.75;
        gap: 12px;
        z-index: 4;
        padding: 27px 534px;
        position: relative;
        top: -100px;
        left: -104px;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        align-content: flex-start;
        /* border: 2px solid #007bff6b; */
        scale: 0.6;
    }

    .exp {
        background-color: #ffffff06;
        box-shadow: 0 2px 5px #0f33ff41;
        border: 2px solid #007bff3d;
        padding: 0 20px;
        margin: 0 10px;
        border-radius: 8px;
        box-sizing: border-box;
        min-height: 400px;
        max-height: 450px;
        width: 48%;
        box-shadow: 0px 40px 20px 20px #2d2e3021;
    }

    .experience-container .exp:first-of-type {
        min-height: 408px;
        max-height: 450px;
    }

    .exp h2 {
        margin: 24px auto;
        text-align: center;
        font-size: 1.5rem;
    }

    .exp p {
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.4;
        overflow-y: auto;
        white-space: normal;
        max-height: 150px;
        scrollbar-color: transparent rgba(0, 0, 0, 0.451);
        scrollbar-width: thin;
        position: relative;
        top: -35px;
    }

    .exp.chunked {
        display: block;
    }

    /* Keywords list styling */
    .chunked-keywords {
        display: flex;
        gap: 23px;
        list-style-type: none;
        padding: 0;
        margin: 15px auto;
        width: 111%;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        position: relative;
        top: -40px;
        border-radius: 15px;
        left: -30px;
    }

    .exp:nth-of-type(1) .chunked-keywords {
        position: relative;
        top: 5px;
    }

    .exp:nth-of-type(2) .chunked-keywords {
        position: relative;
        top: 0px;
    }

    .exp:nth-of-type(3) .chunked-keywords {
        position: relative;
        top: -5px;
    }

    /* Keyword item styling */
    .chunked-keywords li {
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1.1rem;
        font-weight: 400;
        text-align: center;
        background-color: #ffffff0b;
        color: #007bff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }

    /* Glow-on-hover styling */
    .glow-on-hover {
        background-color: #ffffff0b;
        color: #007BFF;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
    }

    /* Animated border */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }

    /* Keyframes for border animation */
    @keyframes border-glow {
        0% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 0 0;
        }

        25% {
            border-image-source: linear-gradient(45deg, #ffd700, white, #ffd700, #ffd700, #0f33ff);
            background-position: 100% 0;

        }

        50% {
            border-image-source: linear-gradient(45deg, #0f33ff, white, #0f33ff, white, #0f33ff);
            background-position: 200% 0;
        }

        75% {
            border-image-source: linear-gradient(45deg, #ffffff, white, #0f33ff, white, #0f33ff, );
            background-position: 300% 0;
        }

        100% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 400% 0;
        }
    }

    /* Supporting paragraph styling */
    .exp.chunked p {
        font-size: 1.5rem;
        line-height: 1.5;
        margin: 0;
        color: #ffffff;
        text-align: left;
        font-family: "utile", sans-serif;
        font-weight: 500;
        font-style: normal;
    }

    .exp:first-of-type p {
        position: relative;
        top: -3px;
    }

    /* Glow-on-hover styling */
    .glow-on-hover {
        background-color: #ffffff0b;
        color: #007BFF;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
    }

    /* Animated border */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }

    /* Keyframes for border animation */
    @keyframes border-glow {
        0% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 0 0;
        }

        25% {
            border-image-source: linear-gradient(45deg, #ffd700, white, #ffd700, #ffd700, #0f33ff);
            background-position: 100% 0;

        }

        50% {
            border-image-source: linear-gradient(45deg, #0f33ff, white, #0f33ff, white, #0f33ff);
            background-position: 200% 0;
        }

        75% {
            border-image-source: linear-gradient(45deg, #ffffff, white, #0f33ff, white, #0f33ff, );
            background-position: 300% 0;
        }

        100% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 400% 0;
        }
    }

    @-webkit-keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }


    .certs {
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 140px 154px 186px 223px #0d0d0d;
        padding: 50px 70px;
        height: 244px;
        overflow: hidden;
        margin: auto;
        position: relative;
        top: 45px;
        left: 80px;
        width: 100%;
        max-width: 1290px;
        background-color: transparent;
    }

    .certs::before,
    .cert::after {
        /*  background: linear-gradient(to right, #0d0d0d 0%, rgba(255, 255, 255, 0) 100%);*/
        content: "";
        padding: 50px;
        height: 244px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }

    .certs::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .certs::before {
        left: 0;
        top: 0;
        background: linear-gradient(to right, #0d0d0d 0%, rgba(255, 255, 255, 0) 100%);
    }

    .certs .track {
        -webkit-animation: scroll 40s linear infinite;
        animation: scroll 40s linear infinite;
        display: flex;
        width: calc(250px * 10);
    }

    .cert-shadow {
        position: absolute;
        top: 0;
        right: -45px;
        height: 100%;
        width: 149px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }

    .cert-shadow-2 {
        position: absolute;
        top: 0;
        left: -40px;
        height: 100%;
        width: 30px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }

    .certs .badge {
        height: 100px;
        width: 250px;
    }

    .badge-row img {
        margin: -2px 7px;
        height: 220px;
        width: 220px;
    }

    .badge {
        transition: transform 0.3s ease;
        cursor: pointer;
        height: 100px;
        width: 100px;
    }

    .badge:hover {
        transform: scale(1.5);
        /* Scale up the badge on hover */
    }


    .big-sizes {
        display: none;
    }

    .badge-copy {
        display: block;
    }


    .info {
        position: relative;
        top: -65px;
        left: 455px;
        color: #bbbbbba6;
        font-size: 12px;
    }

    .info2 {
        position: relative;
        top: -65px;
        left: 455px;
        color: #bbbbbba6;
        font-size: 12px;
    }
}

@media (min-width: 1286px) and (max-width:1400px) {
    .top-badges {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: -10px;
        left: -214px;
        z-index: 100;
        width: 100%;
    }

    .top-badges h1 {
        position: relative;
        top: 0px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
    }

    .top-badges p {
        position: relative;
        top: -40px;
        width: 100%;
        max-width: 400px;
        left: 115px;
        font-size: 12px;
    }

    .experience-container {
        display: flex;
        width: 100%;
        max-width: 1293px;
        max-height: 550px;
        overflow-y: auto;
        gap: 49px;
        scrollbar-color: #007bff2e #ffffff06;
        scrollbar-width: thin;
        padding: 27px 34px;
        position: relative;
        top: -235px;
        left: 50px;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        align-content: flex-start;
        scale: 0.65;
        z-index: 99;
        /* border: 2px solid #007bff6b;*/
    }

    .exp {
        background-color: #ffffff06;
        box-shadow: 0 2px 5px #0f33ff41;
        border: 2px solid #007bff3d;
        padding: 0 20px;
        margin: 0 10px;
        border-radius: 8px;
        box-sizing: border-box;
        min-height: 400px;
        max-height: 450px;
        width: 46%;
        box-shadow: 0px 40px 20px 20px #2d2e3021;

    }

    .exp h2 {
        margin: 24px auto;
        text-align: center;
        font-size: 1.5rem;
    }

    .exp p {
        margin: 0;
        /* Remove default margin */
        font-size: 0.9rem;
        line-height: 1.4;
        overflow-y: auto;
        /* Allow p tags to scroll vertically */
        white-space: normal;
        /* Prevent horizontal scrolling of text */
        max-height: 150px;
        /* Height limit for text inside .exp */
        scrollbar-color: transparent rgba(0, 0, 0, 0.451);
        scrollbar-width: thin;
        position: relative;
        top: -35px;
    }


    .exp.chunked {
        display: block;
    }

    /* Keywords list styling */
    .chunked-keywords {
        display: flex;
        gap: 23px;
        list-style-type: none;
        padding: 0;
        margin: 15px auto;
        width: 111%;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        position: relative;
        top: 0px;
        border-radius: 15px;
        left: -30px;
        scale: 0.9;
    }

    .exp:nth-of-type(1) .chunked-keywords {
        position: relative;
        top: 0px;
    }

    .exp:nth-of-type(2) .chunked-keywords {
        position: relative;
        top: -5px;
    }

    .exp:nth-of-type(3) .chunked-keywords {
        position: relative;
        top: -5px;
    }

    /* Keyword item styling */
    .chunked-keywords li {
        background-color: #ffffff0b;
        color: #007BFF;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1.1rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }

    /* Supporting paragraph styling */
    .exp.chunked p {
        font-size: 1.4rem;
        line-height: 1.5;
        margin: 0;
        color: #ffffff;
        text-align: left;
        font-family: "utile", sans-serif;
        font-weight: 500;
        font-style: normal;
    }

    .exp:first-of-type p {
        position: relative;
        top: -3px;
    }

    /* Glow-on-hover styling */
    .glow-on-hover {
        background-color: #ffffff0b;
        color: #007BFF;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
    }

    /* Animated border */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }

    /* Keyframes for border animation */
    @keyframes border-glow {
        0% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 0 0;
        }

        25% {
            border-image-source: linear-gradient(45deg, #ffd700, white, #ffd700, #ffd700, #0f33ff);
            background-position: 100% 0;

        }

        50% {
            border-image-source: linear-gradient(45deg, #0f33ff, white, #0f33ff, white, #0f33ff);
            background-position: 200% 0;
        }

        75% {
            border-image-source: linear-gradient(45deg, #ffffff, white, #0f33ff, white, #0f33ff, );
            background-position: 300% 0;
        }

        100% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 400% 0;
        }
    }

    @-webkit-keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }


    .certs {
        /* box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);*/
        box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
        padding: 50px 70px;
        height: 244px;
        overflow: hidden;
        margin: auto;
        position: relative;
        top: -80px;
        left: 100px;
        width: 90%;
        max-width: 1290px;
        background-color: transparent;
    }

    .certs::before,
    .cert::after {
        /*  background: linear-gradient(to right, #0d0d0d 0%, rgba(255, 255, 255, 0) 100%);*/
        content: "";
        padding: 50px;
        height: 244px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }

    .certs::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .certs::before {
        left: 0;
        top: 0;
        background: linear-gradient(to right, #0d0d0d 0%, rgba(255, 255, 255, 0) 100%);
    }

    .certs .track {
        -webkit-animation: scroll 40s linear infinite;
        animation: scroll 40s linear infinite;
        display: flex;
        width: calc(250px * 10);
    }

    .cert-shadow {
        position: absolute;
        top: 0;
        right: 110px;
        height: 100%;
        width: 49px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }

    .cert-shadow-2 {
        position: absolute;
        top: 0;
        left: -50px;
        height: 100%;
        width: 30px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }

    .certs .badge {
        height: 100px;
        width: 250px;
    }

    .badge-row img {
        margin: -2px 7px;
        height: 200px;
        width: 200px;
    }

    .badge {
        transition: transform 0.3s ease;
        cursor: pointer;
        height: 100px;
        width: 100px;
    }

    .badge:hover {
        transform: scale(1.5);
        /* Scale up the badge on hover */
    }


    .big-sizes {
        display: none;
    }

    .badge-copy {
        display: block;
    }

    .info {
        position: relative;
        top: -65px;
        left: 465px;
        color: #bbbbbba6;
        font-size: 12px;
    }

    .info2 {
        position: relative;
        top: -65px;
        left: 465px;
        color: #bbbbbba6;
        font-size: 12px;
    }

    .info-3 {
        position: fixed;
        top: 80px;
        left: 85%;
        transform: translateX(-50%);
        text-align: center;
        color: #11d61bd9;
        font-size: 26px;
        z-index: 9;
    }

    .info-3 .info-3-text {
        display: none;
        position: absolute;
        background-color: transparent;
        color: #f1f1f1;
        padding: 5px;
        border-radius: 5px;
        top: 65px;
        left: -110px;
        font-size: 14px;
        width: 90px;
        height: auto;
    }

    .info4 {
        position: relative;
        left: -449px;
        top: 67px;
        color: #0f33ffd9;
        font-size: 26px;
    }






}

@media (min-width: 1166px) and (max-width:1285px) {
    .top-badges {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: -78px;
        left: -100px;
        z-index: 100;
        width: 100%;
    }

    .top-badges h1 {
        position: relative;
        top: 0px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;

    }

    .top-badges p {
        position: relative;
        top: -40px;
        width: 100%;
        max-width: 400px;
        left: 115px;
        font-size: 12px;
    }

    .info-3 {
        position: fixed;
        top: 80px;
        left: 85%;
        transform: translateX(-50%);
        text-align: center;
        color: #0f33ffd9;
        font-size: 26px;
        z-index: 9;
    }

    .info-3 .info-3-text {
        display: none;
        position: absolute;
        background-color: transparent;
        color: #f1f1f1;
        padding: 5px;
        border-radius: 5px;
        top: 145px;
        left: -30px;
        font-size: 14px;
        width: 90px;
        height: auto;
    }

    .experience-container {
        display: flex;
        width: 130%;
        max-width: 1200px;
        max-height: 550px;
        overflow-y: auto;
        gap: 29px;
        scrollbar-color: #007bff2e #ffffff06;
        scrollbar-width: thin;
        padding: 27px 34px;
        position: relative;
        top: -120px;
        left: 40px;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        align-content: flex-start;
        scale: 0.65;
        z-index: 99;
        /* border: 2px solid #007bff6b;*/
    }

    .exp {
        background-color: #ffffff06;
        box-shadow: 0 2px 5px #0f33ff41;
        border: 2px solid #007bff3d;
        padding: 0 20px;
        margin: 0 10px;
        border-radius: 8px;
        box-sizing: border-box;
        min-height: 400px;
        max-height: 450px;
        width: 48%;
        box-shadow: 0px 40px 20px 20px #2d2e3021;

    }

    .exp h2 {
        margin: 24px auto;
        text-align: center;
    }

    .exp p {
        margin: 0;
        font-size: 1.5rem;
        line-height: 1.4;
        overflow-y: auto;
        white-space: normal;
        max-height: 140px;
        scrollbar-color: transparent rgba(0, 0, 0, 0.451);
        scrollbar-width: thin;
        position: relative;
        top: -35px;
    }

    .exp.chunked {
        display: block;
    }

    /* Keywords list styling */
    .chunked-keywords {
        display: flex;
        gap: 23px;
        list-style-type: none;
        padding: 0;
        margin: 0 0 15px 0;
        width: 100%;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        position: relative;
        top: -10px;
    }

    .exp:nth-of-type(1) .chunked-keywords {
        position: relative;
        top: 20px;
    }

    .exp:nth-of-type(2) .chunked-keywords {
        position: relative;
        top: 8px;
    }

    .exp:nth-of-type(3) .chunked-keywords {
        position: relative;
        top: 5px;
    }

    /* Keyword item styling */
    .chunked-keywords li {
        background-color: #ffffff0b;
        color: #007BFF;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1.1rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }

    /* Supporting paragraph styling */
    .exp.chunked p {
        font-size: 1.5rem;
        line-height: 1.5;
        margin: 0;
        color: #ffffff;
        text-align: left;
        font-family: "utile", sans-serif;
        font-weight: 500;
        font-style: normal;
    }

    .exp:first-of-type p {
        position: relative;
        top: -5px;
    }

    /* Glow-on-hover styling */
    .glow-on-hover {
        background-color: #ffffff0b;
        color: #007BFF;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
    }

    /* Animated border */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }

    /* Keyframes for border animation */
    @keyframes border-glow {
        0% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 0 0;
        }

        25% {
            border-image-source: linear-gradient(45deg, #ffd700, white, #ffd700, #ffd700, #0f33ff);
            background-position: 100% 0;

        }

        50% {
            border-image-source: linear-gradient(45deg, #0f33ff, white, #0f33ff, white, #0f33ff);
            background-position: 200% 0;
        }

        75% {
            border-image-source: linear-gradient(45deg, #ffffff, white, #0f33ff, white, #0f33ff, );
            background-position: 300% 0;
        }

        100% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 400% 0;
        }
    }

    @-webkit-keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    .certs {
        /* box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);*/
        box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);
        padding: 50px 70px;
        height: 244px;
        overflow: hidden;
        margin: auto;
        position: relative;
        top: 20px;
        left: 100px;
        width: 100%;
        max-width: 1290px;
        background-color: transparent;
    }

    .certs::before,
    .cert::after {
        /*  background: linear-gradient(to right, #0d0d0d 0%, rgba(255, 255, 255, 0) 100%);*/
        content: "";
        padding: 50px;
        height: 244px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }

    .certs::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .certs::before {
        left: 0;
        top: 0;
        background: linear-gradient(to right, #0d0d0d 0%, rgba(255, 255, 255, 0) 100%);
    }

    .certs .track {
        -webkit-animation: scroll 40s linear infinite;
        animation: scroll 40s linear infinite;
        display: flex;
        width: calc(250px * 10);
    }

    .cert-shadow {
        position: absolute;
        top: 0;
        right: 190px;
        height: 100%;
        width: 49px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }

    .cert-shadow-2 {
        position: absolute;
        top: 0;
        left: -50px;
        height: 100%;
        width: 30px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }

    .certs .badge {
        height: 100px;
        width: 250px;
    }


    .badge-row img {
        margin: -2px 7px;
        height: 200px;
        width: 200px;
    }

    .badge {
        transition: transform 0.3s ease;
        cursor: pointer;
        height: 100px;
        width: 100px;
    }

    .badge:hover {
        transform: scale(1.5);
        /* Scale up the badge on hover */
    }

    .big-sizes {
        display: none;
    }

    .badge-copy {
        display: block;
    }

    .info {
        position: relative;
        top: -65px;
        left: 435px;
        color: #bbbbbba6;
        font-size: 12px;
    }

    .info2 {
        position: relative;
        top: -65px;
        left: 435px;
        color: #bbbbbba6;
        font-size: 12px;
    }
}


/* Tablet Styles. */

@media (min-width: 1130px) and (max-width:1165px) {
    .top-badges {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: -77px;
        left: -187px;
        z-index: 100;
        width: 100%;
    }

    .top-badges h1 {
        position: relative;
        top: 0px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
    }

    .top-badges p {
        position: relative;
        top: -38px;
        width: 100%;
        max-width: 400px;
        left: 100px;
        font-size: 12px;
    }

    .info-3 {
        position: fixed;
        top: 60px;
        left: 85%;
        transform: translateX(-50%);
        text-align: center;
        color: wheat;
        font-size: 26px;
        z-index: 9;
    }

    .info-3 .info-3-text {
        display: none;
        position: absolute;
        background-color: transparent;
        color: #f1f1f1;
        padding: 5px;
        border-radius: 5px;
        top: 65px;
        left: -30px;
        font-size: 14px;
        width: 90px;
        height: auto;
    }

    .experience-container {
        display: flex;
        width: 131%;
        max-width: 1113px;
        max-height: 550px;
        overflow-y: auto;
        gap: 19px;
        scrollbar-color: #007bff2e #ffffff06;
        scrollbar-width: thin;
        padding: 27px 34px;
        position: relative;
        top: -170px;
        left: 0px;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        align-content: flex-start;
        scale: 0.65;
        z-index: 1000;
        /* border: 2px solid #007bff6b;*/
    }

    .exp {
        background-color: #ffffff06;
        box-shadow: 0 2px 5px #0f33ff41;
        border: 2px solid #007bff3d;
        padding: 0 20px;
        margin: 0 10px;
        border-radius: 8px;
        box-sizing: border-box;
        min-height: 400px;
        max-height: 450px;
        width: 50%;
    }

    .exp h2 {
        margin: 24px auto;
        text-align: center;
    }

    .exp p {
        margin: 0;
        /* Remove default margin */
        font-size: 0.9rem;
        line-height: 1.4;
        overflow-y: auto;
        /* Allow p tags to scroll vertically */
        white-space: normal;
        /* Prevent horizontal scrolling of text */
        max-height: 160px;
        /* Height limit for text inside .exp */
        scrollbar-color: transparent rgba(0, 0, 0, 0.451);
        scrollbar-width: thin;
        position: relative;
        top: -35px;
    }



    .exp.chunked {
        display: block;
        padding: 0 20px;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: linear-gradient(to bottom, #8c0b4357 10%, #cf1c1c06 60%);
        border-radius: 10px;
        margin: 0 auto;
        max-width: 838px;
        height: 200px;
        scale: 0.9;
    }

    .exp.chunked:hover {
        background: linear-gradient(to bottom, #000000 10%, #cf1c1c06 60%);
    }

    /* Keywords list styling */
    .chunked-keywords {
        display: flex;
        gap: 23px;
        list-style-type: none;
        padding: 0;
        margin: 0 0 15px 0;
        width: 100%;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        position: relative;
        top: -10px;
    }

    .exp:nth-of-type(1) .chunked-keywords {
        position: relative;
        top: 12px;
    }

    .exp:nth-of-type(2) .chunked-keywords {
        position: relative;
        top: 0px;
    }

    .exp:nth-of-type(3) .chunked-keywords {
        position: relative;
        top: 0px;
    }

    /* Keyword item styling */
    .chunked-keywords li {
        background-color: #ffffff0b;
        color: #007BFF;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }

    /* Supporting paragraph styling */
    .exp.chunked p {
        font-size: 1.5rem;
        line-height: 1.5;
        margin: 0;
        color: #ffffff;
        text-align: left;
        font-family: "utile", sans-serif;
        font-weight: 500;
        font-style: normal;
    }

    .exp:first-of-type p {
        /* Your styles here */
        position: relative;
        top: -5px;
    }

    /* Glow-on-hover styling */
    .glow-on-hover {
        background-color: #ffffff0b;
        color: #007BFF;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
    }

    /* Animated border */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }

    /* Keyframes for border animation */
    @keyframes border-glow {
        0% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 0 0;
        }

        25% {
            border-image-source: linear-gradient(45deg, #ffd700, white, #ffd700, #ffd700, #0f33ff);
            background-position: 100% 0;

        }

        50% {
            border-image-source: linear-gradient(45deg, #0f33ff, white, #0f33ff, white, #0f33ff);
            background-position: 200% 0;
        }

        75% {
            border-image-source: linear-gradient(45deg, #ffffff, white, #0f33ff, white, #0f33ff, );
            background-position: 300% 0;
        }

        100% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 400% 0;
        }
    }

    @-webkit-keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }


    .certs {
        /* box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);*/
        padding: 50px 70px;
        height: 244px;
        overflow: hidden;
        margin: auto;
        position: relative;
        top: -30px;
        left: 0px;
        width: 100%;
    }

    .certs::before,
    .cert::after {
        /*background: linear-gradient(to right, #0d0d0d 0%, rgba(255, 255, 255, 0) 100%);*/
        content: "";
        padding: 50px;
        height: 244px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }

    .certs::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .certs::before {
        left: 0;
        top: 0;
    }

    .certs .track {
        -webkit-animation: scroll 40s linear infinite;
        animation: scroll 40s linear infinite;
        display: flex;
        width: calc(250px * 10);
    }

    .cert-shadow {
        position: absolute;
        top: 0;
        right: -94px;
        height: 100%;
        width: 49px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }

    .cert-shadow-2 {
        position: absolute;
        top: 0;
        left: -60px;
        height: 100%;
        width: 30px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }

    .certs .badge {
        height: 100px;
        width: 250px;
    }



    .badge-row img {
        margin: -2px 7px;
        height: 200px;
        width: 200px;
    }

    .badge {
        transition: transform 0.3s ease;
        cursor: pointer;
        height: 100px;
        width: 100px;
    }

    .badge:hover {
        transform: scale(1.6);
        /* Scale up the badge on hover */
    }


    .big-sizes {
        display: none;
    }

    .badge-copy {
        display: block;
    }




    .info {
        position: relative;
        top: -65px;
        left: 410px;
        color: #bbbbbba6;
        font-size: 12px;
    }

    .info2 {
        position: relative;
        top: -65px;
        left: 410px;
        color: #bbbbbba6;
        font-size: 12px;
    }
}

@media (min-width: 1048px) and (max-width: 1129px) {
    .top-badges {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: -77px;
        left: -160px;
        z-index: 100;
        width: 100%;
    }

    .top-badges h1 {
        position: relative;
        top: 0px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
    }

    .top-badges p {
        position: relative;
        top: -38px;
        width: 100%;
        max-width: 400px;
        left: 100px;
        font-size: 12px;
    }

    .info-3 {
        position: fixed;
        top: 60px;
        left: 85%;
        transform: translateX(-50%);
        text-align: center;
        color: wheat;
        font-size: 26px;
        z-index: 9;
    }

    .info-3 .info-3-text {
        display: none;
        position: absolute;
        background-color: transparent;
        color: #f1f1f1;
        padding: 5px;
        border-radius: 5px;
        top: 65px;
        left: -30px;
        font-size: 14px;
        width: 90px;
        height: auto;
    }

    .experience-container {
        display: flex;
        width: 131%;
        max-width: 1113px;
        max-height: 550px;
        overflow-y: auto;
        gap: 19px;
        scrollbar-color: #007bff2e #ffffff06;
        scrollbar-width: thin;
        padding: 27px 34px;
        position: relative;
        top: -120px;
        left: 0px;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        align-content: flex-start;
        scale: 0.8;
        z-index: 1000;
        scale: 0.65;
        /* border: 2px solid #007bff6b;*/
    }

    .exp {
        background-color: #ffffff06;
        box-shadow: 0 2px 5px #0f33ff41;
        border: 2px solid #007bff3d;
        padding: 0 20px;
        margin: 0 10px;
        border-radius: 8px;
        box-sizing: border-box;
        min-height: 400px;
        max-height: 450px;
        width: 48%;
    }

    .exp h2 {
        margin: 24px auto;
        text-align: center;
    }

    .exp p {
        margin: 0;
        /* Remove default margin */
        font-size: 0.9rem;
        line-height: 1.4;
        overflow-y: auto;
        /* Allow p tags to scroll vertically */
        white-space: normal;
        /* Prevent horizontal scrolling of text */
        max-height: 160px;
        /* Height limit for text inside .exp */
        scrollbar-color: transparent rgba(0, 0, 0, 0.451);
        scrollbar-width: thin;
        position: relative;
        top: -35px;
    }

    .exp:first-of-type p {
        position: relative;
        top: -5px;
    }


    .exp.chunked {
        display: block;
        padding: 0 20px;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: linear-gradient(to bottom, #8c0b4357 10%, #cf1c1c06 60%);
        border-radius: 10px;
        margin: 0 auto;
        max-width: 838px;
        height: 200px;
        scale: 0.9;
    }

    .exp.chunked:hover {
        background: linear-gradient(to bottom, #000000 10%, #cf1c1c06 60%);
    }

    /* Keywords list styling */
    .chunked-keywords {
        display: flex;
        gap: 23px;
        list-style-type: none;
        padding: 0;
        margin: 0 0 15px 0;
        width: 100%;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        position: relative;
        top: -10px;
    }

    .exp:nth-of-type(1) .chunked-keywords {
        position: relative;
        top: 8px;
    }

    .exp:nth-of-type(2) .chunked-keywords {
        position: relative;
        top: 0px;
    }

    .exp:nth-of-type(3) .chunked-keywords {
        position: relative;
        top: 0px;
    }

    /* Keyword item styling */
    .chunked-keywords li {
        background-color: #ffffff0b;
        color: #007BFF;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }

    /* Supporting paragraph styling */
    .exp.chunked p {
        font-size: 1.5rem;
        line-height: 1.5;
        margin: 0;
        color: #ffffff;
        text-align: left;
        font-family: "utile", sans-serif;
        font-weight: 500;
        font-style: normal;
    }

    /* Glow-on-hover styling */
    .glow-on-hover {
        background-color: #ffffff0b;
        color: #007BFF;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
    }

    /* Animated border */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }

    /* Keyframes for border animation */
    @keyframes border-glow {
        0% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 0 0;
        }

        25% {
            border-image-source: linear-gradient(45deg, #ffd700, white, #ffd700, #ffd700, #0f33ff);
            background-position: 100% 0;

        }

        50% {
            border-image-source: linear-gradient(45deg, #0f33ff, white, #0f33ff, white, #0f33ff);
            background-position: 200% 0;
        }

        75% {
            border-image-source: linear-gradient(45deg, #ffffff, white, #0f33ff, white, #0f33ff, );
            background-position: 300% 0;
        }

        100% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 400% 0;
        }
    }

    @-webkit-keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    .certs {
        /* box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);*/
        padding: 50px 70px;
        height: 244px;
        overflow: hidden;
        margin: auto;
        position: relative;
        top: 20px;
        left: 70px;
        width: 100%;
    }

    .certs::before,
    .cert::after {
        background: linear-gradient(to right, #0d0d0d 0%, rgba(255, 255, 255, 0) 100%);
        content: "";
        padding: 50px;
        height: 244px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }

    .certs::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .certs::before {
        left: 0;
        top: 0;
    }

    .certs .track {
        -webkit-animation: scroll 40s linear infinite;
        animation: scroll 40s linear infinite;
        display: flex;
        width: calc(250px * 10);
    }


    .cert-shadow {
        position: absolute;
        top: 0;
        right: -24px;
        height: 100%;
        width: 49px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }

    .cert-shadow-2 {
        position: absolute;
        top: 0;
        left: -166px;
        height: 100%;
        width: 30px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }

    .certs .badge {
        height: 100px;
        width: 250px;
    }



    .badge-row img {
        margin: -2px 7px;
        height: 200px;
        width: 200px;
    }

    .badge {
        transition: transform 0.3s ease;
        cursor: pointer;
        height: 100px;
        width: 100px;
    }

    .badge:hover {
        transform: scale(1.6);
        /* Scale up the badge on hover */
    }

    .big-sizes {
        display: none;
    }

    .badge-copy {
        display: block;
    }


    .info {
        position: relative;
        top: -65px;
        left: 415px;
        color: #bbbbbba6;
        font-size: 12px;
    }

    .info2 {
        position: relative;
        top: -65px;
        left: 415px;
        color: #bbbbbba6;
        font-size: 12px;
    }
}

@media (min-width: 1003px) and (max-width: 1047px) {
    .top-badges {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: -77px;
        left: -120px;
        z-index: 100;
        width: 100%;
    }

    .top-badges h1 {
        position: relative;
        top: 0px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
    }

    .top-badges p {
        position: relative;
        top: -38px;
        width: 100%;
        max-width: 400px;
        left: 100px;
        font-size: 12px;
    }

    .info-3 {
        position: fixed;
        top: 60px;
        left: 85%;
        transform: translateX(-50%);
        text-align: center;
        color: wheat;
        font-size: 26px;
        z-index: 9;
    }

    .info-3 .info-3-text {
        display: none;
        position: absolute;
        background-color: transparent;
        color: #f1f1f1;
        padding: 5px;
        border-radius: 5px;
        top: 65px;
        left: -30px;
        font-size: 14px;
        width: 90px;
        height: auto;
    }

    .experience-container {
        display: flex;
        width: 129%;
        max-width: 1113px;
        max-height: 550px;
        overflow-y: auto;
        gap: 19px;
        scrollbar-color: #007bff2e #ffffff06;
        scrollbar-width: thin;
        padding: 27px 34px;
        position: relative;
        top: -120px;
        left: 10px;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        align-content: flex-start;
        scale: 0.8;
        z-index: 1000;
        scale: 0.65;
        /* border: 2px solid #007bff6b;*/
    }

    .exp {
        background-color: #ffffff06;
        box-shadow: 0 2px 5px #0f33ff41;
        border: 2px solid #007bff3d;
        padding: 0 20px;
        margin: 0 10px;
        border-radius: 8px;
        box-sizing: border-box;
        min-height: 400px;
        max-height: 450px;
        width: 48%;
    }

    .exp h2 {
        margin: 24px auto;
        text-align: center;
    }

    .exp p {
        margin: 0;
        /* Remove default margin */
        font-size: 0.9rem;
        line-height: 1.4;
        overflow-y: auto;
        /* Allow p tags to scroll vertically */
        white-space: normal;
        /* Prevent horizontal scrolling of text */
        max-height: 150px;
        /* Height limit for text inside .exp */
        scrollbar-color: transparent rgba(0, 0, 0, 0.451);
        scrollbar-width: thin;
        position: relative;
        top: -35px;
    }

    .exp:first-of-type p {
        /* Your styles here */
        position: relative;
        top: -10px;
    }


    .exp.chunked {
        display: block;
        padding: 0 20px;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: linear-gradient(to bottom, #8c0b4357 10%, #cf1c1c06 60%);
        border-radius: 10px;
        margin: 0 auto;
        max-width: 838px;
        height: 200px;
        scale: 0.9;
    }

    .exp.chunked:hover {
        background: linear-gradient(to bottom, #000000 10%, #cf1c1c06 60%);
    }

    /* Keywords list styling */
    .chunked-keywords {
        display: flex;
        gap: 23px;
        list-style-type: none;
        padding: 0;
        margin: 0 0 15px 0;
        width: 100%;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        position: relative;
        top: 10px;
    }

    .exp:nth-of-type(1) .chunked-keywords {
        position: relative;
        top: 10px;
    }

    .exp:nth-of-type(2) .chunked-keywords {
        position: relative;
        top: 5px;
    }

    .exp:nth-of-type(3) .chunked-keywords {
        position: relative;
        top: 0px;
    }

    /* Keyword item styling */
    .chunked-keywords li {
        background-color: #ffffff0b;
        color: #007BFF;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }

    /* Supporting paragraph styling */
    .exp.chunked p {
        font-size: 1.5rem;
        line-height: 1.5;
        margin: 0;
        color: #ffffff;
        text-align: left;
        font-family: "utile", sans-serif;
        font-weight: 500;
        font-style: normal;
    }

    /* Glow-on-hover styling */
    .glow-on-hover {
        background-color: #ffffff0b;
        color: #007BFF;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
    }

    /* Animated border */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }

    /* Keyframes for border animation */
    @keyframes border-glow {
        0% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 0 0;
        }

        25% {
            border-image-source: linear-gradient(45deg, #ffd700, white, #ffd700, #ffd700, #0f33ff);
            background-position: 100% 0;

        }

        50% {
            border-image-source: linear-gradient(45deg, #0f33ff, white, #0f33ff, white, #0f33ff);
            background-position: 200% 0;
        }

        75% {
            border-image-source: linear-gradient(45deg, #ffffff, white, #0f33ff, white, #0f33ff, );
            background-position: 300% 0;
        }

        100% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 400% 0;
        }
    }


    @-webkit-keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }


    .certs {
        /* box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);*/
        padding: 50px 70px;
        height: 244px;
        overflow: hidden;
        margin: auto;
        position: relative;
        top: 20px;
        left: 40px;
        width: 100%;
    }

    .certs::before,
    .cert::after {
        /*background: linear-gradient(to right, #0d0d0d 0%, rgba(255, 255, 255, 0) 100%);*/
        content: "";
        padding: 50px;
        height: 244px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }

    .certs::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .certs::before {
        left: 0;
        top: 0;
    }

    .certs .track {
        -webkit-animation: scroll 40s linear infinite;
        animation: scroll 40s linear infinite;
        display: flex;
        width: calc(250px * 10);
    }

    .cert-shadow {
        position: absolute;
        top: 0;
        right: -20px;
        height: 100%;
        width: 49px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }

    .cert-shadow-2 {
        position: absolute;
        top: 0;
        left: -48px;
        height: 100%;
        width: 30px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }

    .certs .badge {
        height: 100px;
        width: 250px;
    }



    .badge-row img {
        margin: -2px 7px;
        height: 200px;
        width: 200px;
    }

    .badge {
        transition: transform 0.3s ease;
        cursor: pointer;
        height: 100px;
        width: 100px;
    }

    .badge:hover {
        transform: scale(1.6);
        /* Scale up the badge on hover */
    }

    .big-sizes {
        display: none;
    }

    .badge-copy {
        display: block;
    }

    .info {
        position: relative;
        top: -65px;
        left: 415px;
        color: #bbbbbba6;
        font-size: 12px;
    }

    .info2 {
        position: relative;
        top: -65px;
        left: 415px;
        color: #bbbbbba6;
        font-size: 12px;
    }
}

@media (min-width: 822px) and (max-width: 1002px) {
    .top-badges {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: -77px;
        left: -100px;
        z-index: 100;
        width: 100%;
    }

    .top-badges h1 {
        position: relative;
        top: 0px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
    }

    .top-badges p {
        position: relative;
        top: -38px;
        width: 100%;
        max-width: 400px;
        left: 100px;
        font-size: 12px;
    }

    .info-3 {
        position: fixed;
        top: 60px;
        left: 85%;
        transform: translateX(-50%);
        text-align: center;
        color: wheat;
        font-size: 26px;
        z-index: 9;
    }

    .info-3 .info-3-text {
        display: none;
        position: absolute;
        background-color: transparent;
        color: #f1f1f1;
        padding: 5px;
        border-radius: 5px;
        top: 65px;
        left: -30px;
        font-size: 14px;
        width: 90px;
        height: auto;
    }

    .experience-container {
        display: flex;
        width: 147%;
        max-width: 1300px;
        max-height: 470px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: #8c0b4357 #ffffff21;
        scrollbar-width: thin;
        gap: 10px;
        padding: 20px 0;
        position: relative;
        top: -100px;
        left: 0px;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        align-content: flex-start;
        z-index: 1000;
        scale: 0.75;

    }

    .experience-container .exp:first-of-type {
        min-height: 430px;
        max-height: 470px;
    }

    .exp {
        background-color: #ffffff06;
        box-shadow: 0 2px 5px #0f33ff41;
        border: 2px solid #007bff3d;
        padding: 0 20px;
        margin: 0 10px;
        border-radius: 8px;
        box-sizing: border-box;
        min-height: 400px;
        max-width: 650px;
        width: 48%;
    }



    .exp h2 {
        margin: 24px auto;
        text-align: center;
    }

    .exp p {
        margin: 0;
        /* Remove default margin */
        font-size: 0.9rem;
        line-height: 1.4;
        overflow-y: auto;
        /* Allow p tags to scroll vertically */
        white-space: normal;
        /* Prevent horizontal scrolling of text */
        max-height: 180px;
        /* Height limit for text inside .exp */
        scrollbar-color: transparent rgba(0, 0, 0, 0.451);
        scrollbar-width: thin;
        position: relative;
        top: 0px;
    }

    .exp:first-of-type p {
        position: relative;
        top: 20px;
    }

    .exp::-webkit-scrollbar {
        width: 8px;
    }

    .exp::-webkit-scrollbar-thumb {
        background-color: rgba(128, 128, 128, 0.5);
        border-radius: 4px;
    }

    .big-sizes {
        display: none;
    }

    .badge-copy {
        display: block;
    }

    /* Style for chunked section */

    .exp.chunked {
        display: block;
        padding: 0 20px;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: linear-gradient(to bottom, #8c0b4357 10%, #cf1c1c06 60%);
        border-radius: 10px;
        margin: 0 auto;
        max-width: 838px;
        height: 200px;
        scale: 0.9;
    }

    .exp.chunked:hover {
        background: linear-gradient(to bottom, #000000 10%, #cf1c1c06 60%);
    }

    /* Keywords list styling */
    .chunked-keywords {
        display: flex;
        gap: 16px;
        list-style-type: none;
        padding: 0;
        margin: 0 auto;
        width: 100%;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        position: relative;
        top: 30px;
        left: 0px;
    }

    .exp:first-of-type .chunked-keywords {
        /* Your styles here */
        position: relative;
        top: 40px;
        gap: 16px;
    }

    /* Keyword item styling */
    .chunked-keywords li {
        background-color: #ffffff0b;
        color: #ffd700b4;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }



    /* Supporting paragraph styling */
    .exp.chunked p {
        font-size: 1.5rem;
        line-height: 1.5;
        margin: 0;
        color: #ffffff;
        display: block;
        text-align: left;
        font-family: "utile", sans-serif;
        font-weight: 500;
        font-style: normal;
    }


    /* Glow-on-hover styling */
    .glow-on-hover {
        background-color: #ffffff0b;
        color: #007BFF;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
    }

    /* Animated border */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }

    /* Keyframes for border animation */
    @keyframes border-glow {
        0% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 0 0;
        }

        25% {
            border-image-source: linear-gradient(45deg, #ffd700, white, #ffd700, #ffd700, #0f33ff);
            background-position: 100% 0;

        }

        50% {
            border-image-source: linear-gradient(45deg, #0f33ff, white, #0f33ff, white, #0f33ff);
            background-position: 200% 0;
        }

        75% {
            border-image-source: linear-gradient(45deg, #ffffff, white, #0f33ff, white, #0f33ff, );
            background-position: 300% 0;
        }

        100% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 400% 0;
        }
    }



    @-webkit-keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }


    .certs {
        /* box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);*/
        padding: 50px;
        height: 244px;
        overflow: hidden;
        margin: auto;
        position: relative;
        top: 40px;
        left: -60px;
        width: 100%;
    }

    .certs::before,
    .cert::after {
        background: linear-gradient(to right, #0d0d0d 0%, rgba(255, 255, 255, 0) 100%);
        content: "";
        padding: 50px;
        height: 244px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }

    .certs::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .certs::before {
        left: 0;
        top: 0;
    }

    .certs .track {
        -webkit-animation: scroll 40s linear infinite;
        animation: scroll 40s linear infinite;
        display: flex;
        width: calc(250px * 10);
    }

    .cert-shadow {
        position: absolute;
        top: 0;
        right: -81px;
        height: 100%;
        width: 49px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }

    .cert-shadow-2 {
        position: absolute;
        top: 0;
        left: -98px;
        height: 100%;
        width: 48px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }

    .certs .badge {
        height: 100px;
        width: 250px;
    }

    .badge-row img {
        margin: -2px 7px;
        height: 200px;
        width: 200px;
    }

    .badge {
        transition: transform 0.3s ease;
        cursor: pointer;
        height: 100px;
        width: 100px;
    }

    .badge:hover {
        transform: scale(1.5);
        /* Scale up the badge on hover */
    }

    .info {
        position: relative;
        top: -40px;
        left: 330px;
        color: #bbbbbba6;
        font-size: 12px;
    }

    .info2 {
        position: relative;
        top: -40px;
        left: 330px;
        color: #bbbbbba6;
        font-size: 12px;
    }



}

@media (min-width: 736px) and (max-width: 821px) {
    .top-badges {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: -77px;
        left: -10px;
        z-index: 100;
        width: 100%;
    }

    .top-badges h1 {
        position: relative;
        top: 0px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
    }

    .top-badges p {
        position: relative;
        top: -38px;
        width: 100%;
        max-width: 400px;
        left: 100px;
        font-size: 12px;
    }

    .info-3 {
        position: fixed;
        top: 60px;
        left: 85%;
        transform: translateX(-50%);
        text-align: center;
        color: wheat;
        font-size: 26px;
        z-index: 9;
    }

    .info-3 .info-3-text {
        display: none;
        position: absolute;
        background-color: transparent;
        color: #f1f1f1;
        padding: 5px;
        border-radius: 5px;
        top: 65px;
        left: 0px;
        font-size: 14px;
        width: 90px;
        height: auto;
    }

    .experience-container {
        display: flex;
        width: 147%;
        max-width: 1300px;
        max-height: 470px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: #8c0b4357 #ffffff21;
        scrollbar-width: thin;
        gap: 10px;
        padding: 20px 0;
        position: relative;
        top: -100px;
        left: 0px;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        align-content: flex-start;
        z-index: 1000;
        scale: 0.75;
    }

    .experience-container .exp:first-of-type {
        min-height: 430px;
        max-height: 470px;
    }

    .exp {
        background-color: #ffffff06;
        box-shadow: 0 2px 5px #0f33ff41;
        border: 2px solid #007bff3d;
        padding: 0 20px;
        margin: 0 10px;
        border-radius: 8px;
        box-sizing: border-box;
        min-height: 400px;
        max-width: 650px;
        width: 48%;
    }



    .exp h2 {
        margin: 24px auto;
        text-align: center;
    }

    .exp p {
        margin: 0;
        /* Remove default margin */
        font-size: 0.9rem;
        line-height: 1.4;
        overflow-y: auto;
        /* Allow p tags to scroll vertically */
        white-space: normal;
        /* Prevent horizontal scrolling of text */
        max-height: 180px;
        /* Height limit for text inside .exp */
        scrollbar-color: transparent rgba(0, 0, 0, 0.451);
        scrollbar-width: thin;
        position: relative;
        top: 0px;
    }

    .exp:first-of-type p {
        position: relative;
        top: 20px;
    }

    .exp::-webkit-scrollbar {
        width: 8px;
    }

    .exp::-webkit-scrollbar-thumb {
        background-color: rgba(128, 128, 128, 0.5);
        border-radius: 4px;
    }

    .big-sizes {
        display: none;
    }

    .badge-copy {
        display: block;
    }

    /* Style for chunked section */

    .exp.chunked {
        display: block;
        padding: 0 20px;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: linear-gradient(to bottom, #8c0b4357 10%, #cf1c1c06 60%);
        border-radius: 10px;
        margin: 0 auto;
        max-width: 838px;
        height: 200px;
        scale: 0.9;
    }

    .exp.chunked:hover {
        background: linear-gradient(to bottom, #000000 10%, #cf1c1c06 60%);
    }

    /* Keywords list styling */
    .chunked-keywords {
        display: flex;
        gap: 3px;
        list-style-type: none;
        padding: 0;
        margin: 0 auto;
        width: 100%;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        position: relative;
        top: 90px;
        left: 12px;
    }

    .exp:first-of-type .chunked-keywords {
        /* Your styles here */
        position: relative;
        top: 100px;
        gap: 3px;
    }

    /* Keyword item styling */
    .chunked-keywords li {
        background-color: #ffffff0b;
        color: #ffd700b4;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }



    /* Supporting paragraph styling */
    .exp.chunked p {
        font-size: 1.5rem;
        line-height: 1.5;
        margin: 0;
        color: #ffffff;
        display: block;
        text-align: left;
        font-family: "utile", sans-serif;
        font-weight: 500;
        font-style: normal;
    }


    /* Glow-on-hover styling */
    .glow-on-hover {
        background-color: #ffffff0b;
        color: #007BFF;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
    }

    /* Animated border */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }

    /* Keyframes for border animation */
    @keyframes border-glow {
        0% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 0 0;
        }

        25% {
            border-image-source: linear-gradient(45deg, #ffd700, white, #ffd700, #ffd700, #0f33ff);
            background-position: 100% 0;

        }

        50% {
            border-image-source: linear-gradient(45deg, #0f33ff, white, #0f33ff, white, #0f33ff);
            background-position: 200% 0;
        }

        75% {
            border-image-source: linear-gradient(45deg, #ffffff, white, #0f33ff, white, #0f33ff, );
            background-position: 300% 0;
        }

        100% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 400% 0;
        }
    }



    @-webkit-keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }


    .certs {
        /* box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125);*/
        padding: 50px;
        height: 244px;
        overflow: hidden;
        margin: auto;
        position: relative;
        top: 40px;
        left: -60px;
        width: 100%;
    }

    .certs::before,
    .cert::after {
        background: linear-gradient(to right, #0d0d0d 0%, rgba(255, 255, 255, 0) 100%);
        content: "";
        padding: 50px;
        height: 244px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }

    .certs::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .certs::before {
        left: 0;
        top: 0;
    }

    .certs .track {
        -webkit-animation: scroll 40s linear infinite;
        animation: scroll 40s linear infinite;
        display: flex;
        width: calc(250px * 10);
    }

    .cert-shadow {
        position: absolute;
        top: 0;
        right: -81px;
        height: 100%;
        width: 49px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }

    .cert-shadow-2 {
        position: absolute;
        top: 0;
        left: -98px;
        height: 100%;
        width: 48px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }

    .certs .badge {
        height: 100px;
        width: 250px;
    }

    .badge-row img {
        margin: -2px 7px;
        height: 200px;
        width: 200px;
    }

    .badge {
        transition: transform 0.3s ease;
        cursor: pointer;
        height: 100px;
        width: 100px;
    }

    .badge:hover {
        transform: scale(1.5);
        /* Scale up the badge on hover */
    }

    .info {
        position: relative;
        top: -40px;
        left: 330px;
        color: #bbbbbba6;
        font-size: 12px;
    }

    .info2 {
        position: relative;
        top: -40px;
        left: 330px;
        color: #bbbbbba6;
        font-size: 12px;
    }





}


/* Phone Styles. */
@media (min-width: 710px) and (max-width: 735px) {
    .big-sizes {
        display: none;
    }

    .top-badges {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: -77px;
        left: -40px;
        z-index: 100;
        width: 100%;
    }

    .top-badges h1 {
        position: relative;
        top: 0px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
    }

    .top-badges p {
        position: relative;
        top: -38px;
        width: 100%;
        max-width: 400px;
        left: 100px;
        font-size: 12px;
    }

    .info-3 {
        position: fixed;
        top: 60px;
        left: 85%;
        transform: translateX(-50%);
        text-align: center;
        color: wheat;
        font-size: 26px;
        z-index: 9;
    }

    .info-3 .info-3-text {
        display: none;
        position: absolute;
        background-color: transparent;
        color: #f1f1f1;
        padding: 5px;
        border-radius: 5px;
        top: 65px;
        left: -30px;
        font-size: 14px;
        width: 90px;
        height: auto;
    }

    .experience-container {
        display: flex;
        width: 130%;
        max-width: 1163px;
        max-height: 725px;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        gap: 5px;
        scrollbar-color: #007bff6a #ffffff21;
        scrollbar-width: thin;
        position: relative;
        top: -165px;
        left: 0px;
        flex-wrap: nowrap;
        align-items: center;
        align-content: center;
        flex-direction: column;
        justify-content: space-evenly;
        z-index: 1000;
    }

    /* Hide scrollbar until scroll (Webkit browsers) */
    .experience-container::-webkit-scrollbar {
        width: 8px;
        background: transparent;
    }

    .experience-container:hover::-webkit-scrollbar,
    .experience-container:active::-webkit-scrollbar,
    .experience-container:focus::-webkit-scrollbar {
        background: #ffffff21;
    }

    /* Hide scrollbar thumb until scroll */
    .experience-container::-webkit-scrollbar-thumb {
        background: transparent;
        transition: background 0.2s;
    }

    .experience-container:hover::-webkit-scrollbar-thumb,
    .experience-container:active::-webkit-scrollbar-thumb,
    .experience-container:focus::-webkit-scrollbar-thumb {
        background: #8c0b43;
    }

    /* For Firefox */
    .experience-container {
        scrollbar-width: none;
    }

    .experience-container:hover,
    .experience-container:active,
    .experience-container:focus {
        scrollbar-width: thin;
        scrollbar-color: #8c0b43 #ffffff21;
    }

    .exp {
        background-color: #ffffff06;
        box-shadow: 0 2px 5px #0f33ff41;
        border: 2px solid #007bff3d;
        padding: 20px;
        margin: 0 10px;
        border-radius: 8px;
        box-sizing: border-box;
        min-height: 366px;
        max-height: 800px;
        width: 100%;
    }

    .exp p {
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.4;
        overflow-y: auto;
        white-space: normal;
        max-height: 180px;
        scrollbar-color: transparent rgba(0, 0, 0, 0.451);
        scrollbar-width: thin;
    }

    .exp h2 {
        margin-top: 25px;
        margin-bottom: 15px;
        text-align: center;
        position: relative;
        top: 20px;
    }


    .big-sizes {
        display: none;
    }

    .badge-copy {
        display: block;
    }

    /* Style for chunked section */
    .exp.chunked {
        display: block;
        padding: 0 20px;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: linear-gradient(to bottom, #8c0b4357 10%, #cf1c1c06 60%);
        border-radius: 10px;
        margin: 0 auto;
        max-width: 838px;
        height: 200px;
        scale: 0.9;

        /* border: 2px solid #8c0b42;*/
        /* height: 400px;*/
    }

    .exp.chunked:hover {
        background: linear-gradient(to bottom, #000000 10%, #cf1c1c06 60%);
    }

    /* Keywords list styling */
    .chunked-keywords {
        display: flex;
        gap: 23px;
        list-style-type: none;
        padding: 0;
        margin: 0 0 15px 0;
        width: 100%;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        position: relative;
        top: 100px;
    }

    /* Keyword item styling */
    .chunked-keywords li {
        background-color: #ffffff0b;
        color: #ffd700b4;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }

    /* Supporting paragraph styling */
    .exp.chunked p {
        font-size: 1.3rem;
        line-height: 1.3;
        margin: 0;
        color: #ffffff;
        font-weight: 300;
        text-align: left;
        font-family: "freight-sans-pro", sans-serif;
        font-weight: 500;
        font-style: normal
    }

    /* Glow-on-hover styling */
    .glow-on-hover {
        background-color: #ffffff0b;
        color: #007BFF;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
    }

    /* Animated border */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }

    /* Keyframes for border animation */
    @keyframes border-glow {
        0% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 0 0;
        }

        25% {
            border-image-source: linear-gradient(45deg, #ffd700, white, #ffd700, #ffd700, #0f33ff);
            background-position: 100% 0;

        }

        50% {
            border-image-source: linear-gradient(45deg, #0f33ff, white, #0f33ff, white, #0f33ff);
            background-position: 200% 0;
        }

        75% {
            border-image-source: linear-gradient(45deg, #ffffff, white, #0f33ff, white, #0f33ff, );
            background-position: 300% 0;
        }

        100% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 400% 0;
        }
    }

    @-webkit-keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    .certs {
        /*box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125); */
        padding: 50px;
        height: 200px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
        top: -40px;
        left: 0px;
        width: 90%;
        /* border: 2px solid red;*/
    }

    .cert-shadow {
        position: absolute;
        top: 0;
        right: -111px;
        height: 100%;
        width: 49px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }

    .certs::before,
    .cert::after {
        background: linear-gradient(to right, #0d0d0d 0%, rgba(255, 255, 255, 0) 100%);
        content: "";
        padding: 50px;
        height: 244px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }

    .certs::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .certs::before {
        left: 0;
        top: 0;
    }

    .certs .track {
        -webkit-animation: scroll 40s linear infinite;
        animation: scroll 40s linear infinite;
        display: flex;
        width: calc(250px * 10);
    }

    .certs .badge {
        height: 100px;
        width: 250px;
    }

    @media screen and (max-width: 720px) {
        .certs img {
            width: auto;
        }
    }

    .badge-row img {
        margin: -2px 7px;
        height: 170px;
        width: 170px;
    }

    .badge {
        transition: transform 0.3s ease;
        cursor: pointer;
        height: 100px;
        width: 100px;
    }

    .badge:hover {
        transform: scale(1.6);
        /* Scale up the badge on hover */
    }

    .info {
        position: relative;
        top: -24px;
        left: 430px;
        color: #bbbbbba6;
        font-size: 12px;
    }

    .info2 {
        position: relative;
        top: -24px;
        left: 430px;
        color: #bbbbbba6;
        font-size: 12px;
    }
}

@media (min-width: 640px) and (max-width: 709px) {
    .big-sizes {
        display: none;
    }

    .top-badges {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: -77px;
        left: -30px;
        z-index: 100;
        width: 100%;
    }

    .top-badges h1 {
        position: relative;
        top: 0px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
    }

    .top-badges p {
        position: relative;
        top: -38px;
        width: 100%;
        max-width: 400px;
        left: 100px;
        font-size: 12px;
    }

    .info-3 {
        position: fixed;
        top: 60px;
        left: 85%;
        transform: translateX(-50%);
        text-align: center;
        color: wheat;
        font-size: 26px;
        z-index: 9;
    }

    .info-3 .info-3-text {
        display: none;
        position: absolute;
        background-color: transparent;
        color: #f1f1f1;
        padding: 5px;
        border-radius: 5px;
        top: 65px;
        left: -30px;
        font-size: 14px;
        width: 90px;
        height: auto;
    }

    .experience-container {
        display: flex;
        width: 130%;
        max-width: 1163px;
        max-height: 725px;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        gap: 5px;
        scrollbar-color: #007bff6a #ffffff21;
        scrollbar-width: thin;
        position: relative;
        top: -165px;
        left: 0px;
        flex-wrap: nowrap;
        align-items: center;
        align-content: center;
        flex-direction: column;
        justify-content: space-evenly;
        z-index: 1000;
    }

    /* Hide scrollbar until scroll (Webkit browsers) */
    .experience-container::-webkit-scrollbar {
        width: 8px;
        background: transparent;
    }

    .experience-container:hover::-webkit-scrollbar,
    .experience-container:active::-webkit-scrollbar,
    .experience-container:focus::-webkit-scrollbar {
        background: #ffffff21;
    }

    /* Hide scrollbar thumb until scroll */
    .experience-container::-webkit-scrollbar-thumb {
        background: transparent;
        transition: background 0.2s;
    }

    .experience-container:hover::-webkit-scrollbar-thumb,
    .experience-container:active::-webkit-scrollbar-thumb,
    .experience-container:focus::-webkit-scrollbar-thumb {
        background: #8c0b43;
    }

    /* For Firefox */
    .experience-container {
        scrollbar-width: none;
    }

    .experience-container:hover,
    .experience-container:active,
    .experience-container:focus {
        scrollbar-width: thin;
        scrollbar-color: #8c0b43 #ffffff21;
    }

    .exp {
        background-color: #ffffff06;
        box-shadow: 0 2px 5px #0f33ff41;
        border: 2px solid #007bff3d;
        padding: 20px;
        margin: 0 10px;
        border-radius: 8px;
        box-sizing: border-box;
        min-height: 366px;
        max-height: 800px;
        width: 100%;
    }

    .exp p {
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.4;
        overflow-y: auto;
        white-space: normal;
        max-height: 180px;
        scrollbar-color: transparent rgba(0, 0, 0, 0.451);
        scrollbar-width: thin;
    }

    .exp h2 {
        margin-top: 25px;
        margin-bottom: 15px;
        text-align: center;
        position: relative;
        top: 20px;
    }


    .big-sizes {
        display: none;
    }

    .badge-copy {
        display: block;
    }

    /* Style for chunked section */
    .exp.chunked {
        display: block;
        padding: 0 20px;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: linear-gradient(to bottom, #8c0b4357 10%, #cf1c1c06 60%);

        border-radius: 10px;
        margin: 0 auto;
        max-width: 838px;
        height: 200px;
        scale: 0.9;

        /* border: 2px solid #8c0b42;*/
        /* height: 400px;*/
    }

    .exp.chunked:hover {
        background: linear-gradient(to bottom, #000000 10%, #cf1c1c06 60%);
    }

    /* Keywords list styling */
    .chunked-keywords {
        display: flex;
        gap: 23px;
        list-style-type: none;
        padding: 0;
        margin: 0 0 15px 0;
        width: 100%;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        position: relative;
        top: 90px;
    }

    /* Keyword item styling */
    .chunked-keywords li {
        background-color: #ffffff0b;
        color: #ffd700b4;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }

    /* Supporting paragraph styling */
    .exp.chunked p {
        font-size: 1.3rem;
        line-height: 1.3;
        margin: 0;
        color: #ffffff;
        font-weight: 300;
        text-align: left;
        font-family: "freight-sans-pro", sans-serif;
        font-weight: 500;
        font-style: normal
    }

    /* Glow-on-hover styling */
    .glow-on-hover {
        background-color: #ffffff0b;
        color: #007BFF;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
    }

    /* Animated border */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }

    /* Keyframes for border animation */
    @keyframes border-glow {
        0% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 0 0;
        }

        25% {
            border-image-source: linear-gradient(45deg, #ffd700, white, #ffd700, #ffd700, #0f33ff);
            background-position: 100% 0;

        }

        50% {
            border-image-source: linear-gradient(45deg, #0f33ff, white, #0f33ff, white, #0f33ff);
            background-position: 200% 0;
        }

        75% {
            border-image-source: linear-gradient(45deg, #ffffff, white, #0f33ff, white, #0f33ff, );
            background-position: 300% 0;
        }

        100% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 400% 0;
        }
    }

    @-webkit-keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    .certs {
        /*box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125); */
        padding: 50px;
        height: 200px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
        top: -40px;
        left: 0px;
        width: 90%;
        /* border: 2px solid red;*/
    }


    .cert-shadow {
        position: absolute;
        top: 0;
        right: -111px;
        height: 100%;
        width: 49px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }

    .certs::before,
    .cert::after {
        background: linear-gradient(to right, #0d0d0d 0%, rgba(255, 255, 255, 0) 100%);
        content: "";
        padding: 50px;
        height: 244px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }

    .certs::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .certs::before {
        left: 0;
        top: 0;
    }

    .certs .track {
        -webkit-animation: scroll 40s linear infinite;
        animation: scroll 40s linear infinite;
        display: flex;
        width: calc(250px * 10);
    }

    .certs .badge {
        height: 100px;
        width: 250px;
    }

    @media screen and (max-width: 720px) {
        .certs img {
            width: auto;
        }
    }

    .badge-row img {
        margin: -2px 7px;
        height: 170px;
        width: 170px;
    }

    .badge {
        transition: transform 0.3s ease;
        cursor: pointer;
        height: 100px;
        width: 100px;
    }

    .badge:hover {
        transform: scale(1.6);
        /* Scale up the badge on hover */
    }

    .info {
        position: relative;
        top: -24px;
        left: 430px;
        color: #bbbbbba6;
        font-size: 12px;
    }

    .info2 {
        position: relative;
        top: -24px;
        left: 430px;
        color: #bbbbbba6;
        font-size: 12px;
    }




}

@media (min-width: 540px) and (max-width: 639px) {
    .big-sizes {
        display: none;
    }

    .top-badges {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: -77px;
        left: -30px;
        z-index: 100;
        width: 100%;
    }

    .top-badges h1 {
        position: relative;
        top: 0px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
    }

    .top-badges p {
        position: relative;
        top: -38px;
        width: 100%;
        max-width: 400px;
        left: 100px;
        font-size: 12px;
    }

    .info-3 {
        position: fixed;
        top: 60px;
        left: 85%;
        transform: translateX(-50%);
        text-align: center;
        color: wheat;
        font-size: 26px;
        z-index: 9;
    }

    .info-3 .info-3-text {
        display: none;
        position: absolute;
        background-color: transparent;
        color: #f1f1f1;
        padding: 5px;
        border-radius: 5px;
        top: 65px;
        left: -30px;
        font-size: 14px;
        width: 90px;
        height: auto;
    }

    .experience-container {
        display: flex;
        width: 122%;
        max-width: 963px;
        max-height: 695px;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        gap: 5px;
        scrollbar-color: #007bff6a #ffffff21;
        scrollbar-width: thin;
        position: relative;
        top: -195px;
        left: 0px;
        flex-wrap: nowrap;
        align-items: center;
        align-content: center;
        flex-direction: column;
        justify-content: space-evenly;
        z-index: 1000;
    }

    /* Hide scrollbar until scroll (Webkit browsers) */
    .experience-container::-webkit-scrollbar {
        width: 8px;
        background: transparent;
    }

    .experience-container:hover::-webkit-scrollbar,
    .experience-container:active::-webkit-scrollbar,
    .experience-container:focus::-webkit-scrollbar {
        background: #ffffff21;
    }

    /* Hide scrollbar thumb until scroll */
    .experience-container::-webkit-scrollbar-thumb {
        background: transparent;
        transition: background 0.2s;
    }

    .experience-container:hover::-webkit-scrollbar-thumb,
    .experience-container:active::-webkit-scrollbar-thumb,
    .experience-container:focus::-webkit-scrollbar-thumb {
        background: #8c0b43;
    }

    /* For Firefox */
    .experience-container {
        scrollbar-width: none;
    }

    .experience-container:hover,
    .experience-container:active,
    .experience-container:focus {
        scrollbar-width: thin;
        scrollbar-color: #8c0b43 #ffffff21;
    }

    .exp {
        background-color: #ffffff06;
        box-shadow: 0 2px 5px #0f33ff41;
        border: 2px solid #007bff3d;
        padding: 20px;
        margin: 0 10px;
        border-radius: 8px;
        box-sizing: border-box;
        min-height: 366px;
        max-height: 800px;
        width: 100%;
    }

    .exp p {
        margin-top: 30px;
        font-size: 0.9rem;
        line-height: 1.4;
        overflow-y: auto;
        white-space: normal;
        max-height: 180px;
        scrollbar-color: transparent rgba(0, 0, 0, 0.451);
        scrollbar-width: thin;
    }

    .exp h2 {
        margin-top: 15px;
        margin-bottom: 15px;
        text-align: center;
        position: relative;
        top: 20px;
    }


    .big-sizes {
        display: none;
    }

    .badge-copy {
        display: block;
    }

    /* Style for chunked section */
    .exp.chunked {
        display: block;
        padding: 0 20px;
        background: linear-gradient(to bottom, #8c0b4357 10%, #cf1c1c06 60%);
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        border-radius: 10px;
        margin: 0 auto;
        max-width: 838px;
        height: 200px;
        scale: 0.9;

        /* border: 2px solid #8c0b42;*/
        /* height: 400px;*/
    }

    .exp.chunked:hover {
        background: linear-gradient(to bottom, #000000 10%, #cf1c1c06 60%);
    }

    /* Keywords list styling */
    .chunked-keywords {
        display: flex;
        gap: 23px;
        list-style-type: none;
        padding: 0;
        margin: 0 auto;
        width: 100%;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        position: relative;
        top: 70px;
        left: 20px;
    }

    /* Keyword item styling */
    .chunked-keywords li {
        background-color: #ffffff0b;
        color: #ffd700b4;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }

    /* Supporting paragraph styling */
    .exp.chunked p {
        font-size: 1.3rem;
        line-height: 1.3;
        margin: 20px auto;
        color: #ffffff;
        font-weight: 300;
        text-align: left;
        font-family: "freight-sans-pro", sans-serif;
        font-weight: 500;
        font-style: normal
    }

    /* Glow-on-hover styling */
    .glow-on-hover {
        background-color: #ffffff0b;
        color: #007BFF;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
    }

    /* Animated border */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }

    /* Keyframes for border animation */
    @keyframes border-glow {
        0% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 0 0;
        }

        25% {
            border-image-source: linear-gradient(45deg, #ffd700, white, #ffd700, #ffd700, #0f33ff);
            background-position: 100% 0;

        }

        50% {
            border-image-source: linear-gradient(45deg, #0f33ff, white, #0f33ff, white, #0f33ff);
            background-position: 200% 0;
        }

        75% {
            border-image-source: linear-gradient(45deg, #ffffff, white, #0f33ff, white, #0f33ff, );
            background-position: 300% 0;
        }

        100% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 400% 0;
        }
    }

    @-webkit-keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    .certs {
        /*box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125); */
        padding: 50px;
        height: 200px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
        top: -58px;
        left: 0px;
        width: 85%;
        /* border: 2px solid red;*/
    }

    .cert-shadow {
        position: absolute;
        top: 0;
        right: -111px;
        height: 100%;
        width: 49px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }



    .certs::before,
    .cert::after {
        background: linear-gradient(to right, #0d0d0d 0%, rgba(255, 255, 255, 0) 100%);
        content: "";
        padding: 50px;
        height: 244px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }

    .certs::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .certs::before {
        left: 0;
        top: 0;
    }

    .certs .track {
        -webkit-animation: scroll 40s linear infinite;
        animation: scroll 40s linear infinite;
        display: flex;
        width: calc(250px * 10);
    }

    .certs .badge {
        height: 100px;
        width: 250px;
    }



    @media screen and (max-width: 720px) {
        .certs img {
            width: auto;
        }
    }

    .badge-row img {
        margin: -2px 7px;
        height: 170px;
        width: 170px;
    }

    .badge {
        transition: transform 0.3s ease;
        cursor: pointer;
        height: 100px;
        width: 100px;
    }

    .badge:hover {
        transform: scale(1.6);
        /* Scale up the badge on hover */
    }

    .info {
        position: relative;
        top: -24px;
        left: 430px;
        color: #bbbbbba6;
        font-size: 12px;
    }

    .info2 {
        position: relative;
        top: -24px;
        left: 430px;
        color: #bbbbbba6;
        font-size: 12px;
    }
}

@media (min-width: 480px) and (max-width: 539px) {
    .big-sizes {
        display: none;
    }

    .top-badges {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: -77px;
        left: 0px;
        z-index: 100;
        width: 100%;
    }

    .top-badges h1 {
        position: relative;
        top: 0px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
    }

    .top-badges p {
        position: relative;
        top: -38px;
        width: 100%;
        max-width: 400px;
        left: 80px;
        font-size: 12px;
    }

    .info-3 {
        position: fixed;
        top: 60px;
        left: 85%;
        transform: translateX(-50%);
        text-align: center;
        color: wheat;
        font-size: 26px;
        z-index: 9;
    }

    .info-3 .info-3-text {
        display: none;
        position: absolute;
        background-color: transparent;
        color: #f1f1f1;
        padding: 5px;
        border-radius: 5px;
        top: 65px;
        left: -30px;
        font-size: 14px;
        width: 90px;
        height: auto;
    }

    .experience-container {
        display: flex;
        width: 122%;
        max-width: 963px;
        max-height: 695px;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        gap: 5px;
        scrollbar-color: #007bff6a #ffffff21;
        scrollbar-width: thin;
        position: relative;
        top: -195px;
        left: 0px;
        flex-wrap: nowrap;
        align-items: center;
        align-content: center;
        flex-direction: column;
        justify-content: space-evenly;
        z-index: 1000;
    }

    /* Hide scrollbar until scroll (Webkit browsers) */
    .experience-container::-webkit-scrollbar {
        width: 8px;
        background: transparent;
    }

    .experience-container:hover::-webkit-scrollbar,
    .experience-container:active::-webkit-scrollbar,
    .experience-container:focus::-webkit-scrollbar {
        background: #ffffff21;
    }

    /* Hide scrollbar thumb until scroll */
    .experience-container::-webkit-scrollbar-thumb {
        background: transparent;
        transition: background 0.2s;
    }

    .experience-container:hover::-webkit-scrollbar-thumb,
    .experience-container:active::-webkit-scrollbar-thumb,
    .experience-container:focus::-webkit-scrollbar-thumb {
        background: #8c0b43;
    }

    /* For Firefox */
    .experience-container {
        scrollbar-width: none;
    }

    .experience-container:hover,
    .experience-container:active,
    .experience-container:focus {
        scrollbar-width: thin;
        scrollbar-color: #8c0b43 #ffffff21;
    }

    .exp {
        background-color: #ffffff06;
        box-shadow: 0 2px 5px #0f33ff41;
        border: 2px solid #007bff3d;
        padding: 20px;
        margin: 0 10px;
        border-radius: 8px;
        box-sizing: border-box;
        min-height: 366px;
        max-height: 800px;
        width: 100%;
    }

    .exp p {
        margin-top: 30px;
        font-size: 0.9rem;
        line-height: 1.4;
        overflow-y: auto;
        white-space: normal;
        max-height: 180px;
        scrollbar-color: transparent rgba(0, 0, 0, 0.451);
        scrollbar-width: thin;
    }

    .exp h2 {
        margin-top: 15px;
        margin-bottom: 15px;
        text-align: center;
        position: relative;
        top: 20px;
    }


    .big-sizes {
        display: none;
    }

    .badge-copy {
        display: block;
    }

    /* Style for chunked section */
    .exp.chunked {
        display: block;
        padding: 0 20px;
        background: linear-gradient(to bottom, #8c0b4357 10%, #cf1c1c06 60%);
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        border-radius: 10px;
        margin: 0 auto;
        max-width: 838px;
        height: 200px;
        scale: 0.9;

        /* border: 2px solid #8c0b42;*/
        /* height: 400px;*/
    }

    .exp.chunked:hover {
        background: linear-gradient(to bottom, #000000 10%, #cf1c1c06 60%);
    }

    /* Keywords list styling */
    .chunked-keywords {
        display: flex;
        gap: 23px;
        list-style-type: none;
        padding: 0;
        margin: 0 auto;
        width: 100%;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        position: relative;
        top: 60px;
        left: 20px;
    }

    /* Keyword item styling */
    .chunked-keywords li {
        background-color: #ffffff0b;
        color: #ffd700b4;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }

    /* Supporting paragraph styling */
    .exp.chunked p {
        font-size: 1.3rem;
        line-height: 1.3;
        margin: 20px auto;
        color: #ffffff;
        font-weight: 300;
        text-align: left;
        font-family: "freight-sans-pro", sans-serif;
        font-weight: 500;
        font-style: normal
    }

    /* Glow-on-hover styling */
    .glow-on-hover {
        background-color: #ffffff0b;
        color: #007BFF;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
    }

    /* Animated border */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }

    /* Keyframes for border animation */
    @keyframes border-glow {
        0% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 0 0;
        }

        25% {
            border-image-source: linear-gradient(45deg, #ffd700, white, #ffd700, #ffd700, #0f33ff);
            background-position: 100% 0;

        }

        50% {
            border-image-source: linear-gradient(45deg, #0f33ff, white, #0f33ff, white, #0f33ff);
            background-position: 200% 0;
        }

        75% {
            border-image-source: linear-gradient(45deg, #ffffff, white, #0f33ff, white, #0f33ff, );
            background-position: 300% 0;
        }

        100% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 400% 0;
        }
    }

    @-webkit-keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    .certs {
        /*box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125); */
        padding: 50px;
        height: 200px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
        top: -58px;
        left: 0px;
        width: 85%;
        /* border: 2px solid red;*/
    }

    .cert-shadow {
        position: absolute;
        top: 0;
        right: -111px;
        height: 100%;
        width: 49px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }



    .certs::before,
    .cert::after {
        background: linear-gradient(to right, #0d0d0d 0%, rgba(255, 255, 255, 0) 100%);
        content: "";
        padding: 50px;
        height: 244px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }

    .certs::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .certs::before {
        left: 0;
        top: 0;
    }

    .certs .track {
        -webkit-animation: scroll 40s linear infinite;
        animation: scroll 40s linear infinite;
        display: flex;
        width: calc(250px * 10);
    }

    .certs .badge {
        height: 100px;
        width: 250px;
    }



    @media screen and (max-width: 720px) {
        .certs img {
            width: auto;
        }
    }

    .badge-row img {
        margin: -2px 7px;
        height: 170px;
        width: 170px;
    }

    .badge {
        transition: transform 0.3s ease;
        cursor: pointer;
        height: 100px;
        width: 100px;
    }

    .badge:hover {
        transform: scale(1.6);
        /* Scale up the badge on hover */
    }

    .info {
        position: relative;
        top: -24px;
        left: 430px;
        color: #bbbbbba6;
        font-size: 12px;
    }

    .info2 {
        position: relative;
        top: -24px;
        left: 430px;
        color: #bbbbbba6;
        font-size: 12px;
    }
}

@media (min-width: 440px) and (max-width: 479px) {
    .big-sizes {
        display: none;
    }

    .top-badges {
        position: relative;
        top: -95px;
        text-decoration: underline 6px;
        text-decoration-color: #007bff3b;
    }

    .top-badges h1 {
        position: fixed;
        top: 92px;
        left: 50%;
        transform: translateX(-50%);
        color: #ffffff;
        margin: 0;
        text-align: center;
    }

    .top-badges p {
        display: block;
        width: 100%;
        position: fixed;
        top: 120px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        z-index: 9;
    }


    .experience-container {
        display: flex;
        width: 127%;
        max-width: 963px;
        max-height: 695px;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        gap: 5px;
        scrollbar-color: #007bff6a #ffffff21;
        scrollbar-width: thin;
        position: relative;
        top: -195px;
        left: 5px;
        flex-wrap: nowrap;
        align-items: center;
        align-content: center;
        flex-direction: column;
        justify-content: space-evenly;
        z-index: 1000;
    }

    /* Hide scrollbar until scroll (Webkit browsers) */
    .experience-container::-webkit-scrollbar {
        width: 8px;
        background: transparent;
    }

    .experience-container:hover::-webkit-scrollbar,
    .experience-container:active::-webkit-scrollbar,
    .experience-container:focus::-webkit-scrollbar {
        background: #ffffff21;
    }

    /* Hide scrollbar thumb until scroll */
    .experience-container::-webkit-scrollbar-thumb {
        background: transparent;
        transition: background 0.2s;
    }

    .experience-container:hover::-webkit-scrollbar-thumb,
    .experience-container:active::-webkit-scrollbar-thumb,
    .experience-container:focus::-webkit-scrollbar-thumb {
        background: #8c0b43;
    }

    /* For Firefox */
    .experience-container {
        scrollbar-width: none;
    }

    .experience-container:hover,
    .experience-container:active,
    .experience-container:focus {
        scrollbar-width: thin;
        scrollbar-color: #8c0b43 #ffffff21;
    }

    .exp {
        background-color: #ffffff06;
        box-shadow: 0 2px 5px #0f33ff41;
        border: 2px solid #007bff3d;
        padding: 20px;
        margin: 0 10px;
        border-radius: 8px;
        box-sizing: border-box;
        min-height: 366px;
        max-height: 800px;
        width: 100%;
    }

    .exp p {
        margin-top: 30px;
        font-size: 0.9rem;
        line-height: 1.4;
        overflow-y: auto;
        white-space: normal;
        max-height: 180px;
        scrollbar-color: transparent rgba(0, 0, 0, 0.451);
        scrollbar-width: thin;
    }

    .exp h2 {
        margin-top: 15px;
        margin-bottom: 15px;
        text-align: center;
        position: relative;
        top: 20px;
    }


    .big-sizes {
        display: none;
    }

    .badge-copy {
        display: block;
    }

    /* Style for chunked section */
    .exp.chunked {
        display: block;
        padding: 0 20px;
        background: linear-gradient(to bottom, #8c0b4357 10%, #cf1c1c06 60%);
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        border-radius: 10px;
        margin: 0 auto;
        max-width: 838px;
        height: 200px;
        scale: 0.9;

        /* border: 2px solid #8c0b42;*/
        /* height: 400px;*/
    }

    .exp.chunked:hover {
        background: linear-gradient(to bottom, #000000 10%, #cf1c1c06 60%);
    }

    /* Keywords list styling */
    .chunked-keywords {
        display: flex;
        gap: 23px;
        list-style-type: none;
        padding: 0;
        margin: 0 auto;
        width: 100%;
        align-items: center;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        position: relative;
        top: 60px;
        left: 20px;
    }

    /* Keyword item styling */
    .chunked-keywords li {
        background-color: #ffffff0b;
        color: #ffd700b4;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }

    /* Supporting paragraph styling */
    .exp.chunked p {
        font-size: 1.3rem;
        line-height: 1.3;
        margin: 20px auto;
        color: #ffffff;
        font-weight: 300;
        text-align: left;
        font-family: "freight-sans-pro", sans-serif;
        font-weight: 500;
        font-style: normal
    }

    /* Glow-on-hover styling */
    .glow-on-hover {
        background-color: #ffffff0b;
        color: #007BFF;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
    }

    /* Animated border */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }

    /* Keyframes for border animation */
    @keyframes border-glow {
        0% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 0 0;
        }

        25% {
            border-image-source: linear-gradient(45deg, #ffd700, white, #ffd700, #ffd700, #0f33ff);
            background-position: 100% 0;

        }

        50% {
            border-image-source: linear-gradient(45deg, #0f33ff, white, #0f33ff, white, #0f33ff);
            background-position: 200% 0;
        }

        75% {
            border-image-source: linear-gradient(45deg, #ffffff, white, #0f33ff, white, #0f33ff, );
            background-position: 300% 0;
        }

        100% {
            border-image-source: linear-gradient(45deg, white, #0f33ff, #ffffff, #0f33ff, white);
            background-position: 400% 0;
        }
    }

    @-webkit-keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(calc(-250px * 7));
        }
    }

    .certs {
        /*box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.125); */
        padding: 50px;
        height: 200px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
        top: -58px;
        left: 0px;
        width: 85%;
        /* border: 2px solid red;*/
    }

    .cert-shadow {
        position: absolute;
        top: 0;
        right: -111px;
        height: 100%;
        width: 49px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
    }



    .certs::before,
    .cert::after {
        background: linear-gradient(to right, #0d0d0d 0%, rgba(255, 255, 255, 0) 100%);
        content: "";
        padding: 50px;
        height: 244px;
        position: absolute;
        width: 200px;
        z-index: 2;
    }

    .certs::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
    }

    .certs::before {
        left: 0;
        top: 0;
    }

    .certs .track {
        -webkit-animation: scroll 40s linear infinite;
        animation: scroll 40s linear infinite;
        display: flex;
        width: calc(250px * 10);
    }

    .certs .badge {
        height: 100px;
        width: 250px;
    }



    @media screen and (max-width: 720px) {
        .certs img {
            width: auto;
        }
    }

    .badge-row img {
        margin: -2px 7px;
        height: 170px;
        width: 170px;
    }

    .badge {
        transition: transform 0.3s ease;
        cursor: pointer;
        height: 100px;
        width: 100px;
    }

    .badge:hover {
        transform: scale(1.6);
        /* Scale up the badge on hover */
    }

    .info {
        position: relative;
        top: -24px;
        left: 430px;
        color: #bbbbbba6;
        font-size: 12px;
    }

    .info2 {
        position: relative;
        top: -24px;
        left: 430px;
        color: #bbbbbba6;
        font-size: 12px;
    }

    .info-3 {
        position: relative;
        left: 95px;
        top: -80px;
        color: #0f33ffd9;
        font-size: 26px;
        z-index: 500;
    }



    .info-3 .info-3-text {
        display: none;
        position: absolute;
        background-color: transparent;
        color: #f1f1f1;
        padding: 5px;
        border-radius: 5px;
        top: 65px;
        left: -290px;
        font-size: 14px;
        width: 90px;
        height: auto;
    }

}

/* iPhone SE viewport size Width 375px x Height 553px  */
@media (min-width: 320px) and (max-width: 439px) {
    .experience {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
        position: relative;
        top: 0px;
        gap: 20px;
    }

/*  page title */
    .experience h1 {
        position: relative;
        top: 20px;
        left: 22px;
        text-align: left;
        width: 100%;
        font-size: 1.5rem;
        font-weight: 900;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
    }
/*  page sub-title */
    .experience h3 {
        position: relative;
        top: -14px;
        width: 100%;
        left: 22px;
        font-size: 1.1rem;
        font-weight: 400;
        color: rgb(255 255 255 / 50%);
    }


/*  set height and width of 2 boxes */
    .experience-section {
        width: 100%;
        min-width: 390px;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        padding: 20px;
        box-sizing: border-box;
        position: relative;
        top: -15px;
        left: 70px;
        /* margin: 0 auto;
        width: 85%;
        height: 70%;
        box-shadow: 0 0 32px rgba(0, 0, 0, 0.5);
        position: relative;
        top: 75px; */
    }


/* hover to enlarge button */
    .info-3 {
        position: relative;
        left: 104px;
        top: -70px;
        color: #0f33ffd9;
        font-size: 1.625rem;
        z-index: 99;
        display: none;
    }

/* hover to enlarge button ( text )*/
    .info-3 .info-3-text {
        display: none;
        position: absolute;
        background-color: #080808;
        color: #f1f1f1;
        padding: 5px;
        border-radius: 5px;
        top: 5px;
        left: -6px;
        font-size: 0.875rem;
        width: 90px;
        height: auto;
    }

/* hover to enlarge button ( text )*/
    .info-3:hover .info-3-text {
        display: block;
    }

/* hover to enlarge button ( text )*/
    .info-3 a:visited {
        width: 50px;
        height: auto;
        color: white;
    }




/* (parent) to track */
    .badge-row {
        display: flex;
        justify-content: left;
        margin-top: 15px;
        margin-bottom: -3px;
        max-width: 800px;
        width: 100%;
    }


/* (parent) to track */
    .certs {
        padding: 50px;
        height: 244px;
        overflow: hidden;
        margin: auto;
        position: relative;
        left: -69px;
        top: -50px;
        width: 100%;
        z-index: 0;
        display: none;
    }

    .certs::before,
    .cert::after {
        background: linear-gradient(to right, #0d0d0d 0%, rgba(255, 255, 255, 0) 76%);
        content: "";
        padding: 50px;
        height: 244px;
        position: absolute;
        width: 200px;
        z-index: 2;
        display: none;

    }
    .certs::after {
        right: 0;
        top: 0;
        transform: rotateZ(180deg);
        display: none;

    }
    .certs::before {
        left: 0;
        top: 0;
    }
    .certs .track {
        -webkit-animation: scroll 40s linear infinite;
        animation: scroll 40s linear infinite;
        display: flex;
        width: calc(250px * 10);
        display: none;

    }
    .certs .badge {
        height: 100px;
        width: 250px;
        display: none;

    }


/* left shadow */
    .cert-shadow {
        position: absolute;
        top: 0;
        right: -111px;
        height: 100%;
        width: 49px;
        background: linear-gradient(to right, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
        display: none;
    }
/* right shadow */
    .cert-shadow-left {
        position: absolute;
        top: 0;
        left: -111px;
        height: 100%;
        width: 49px;
        background: linear-gradient(to left, #0d0d0d 0%, #0d0d0d 100%);
        box-shadow: 0 54px 86px 163px #0d0d0d;
        pointer-events: none;
        z-index: 1;
        display: none;
    }



/* (parent) to badge & badge-copy (the cert animation)  */
    .track {
        display: flex;
        animation: scroll 40s linear infinite;
        width: calc(250px * 10);
        display: none;
    }


/* (parent) to badge images */
    .badge {
        transition: transform 0.3s ease;
        cursor: pointer;
        height: 100px;
        width: 100px;
        display: none;

    }

/* (parent) to badge images */
    .badge-copy {
        display: block;
    }

/* [animation] scale badge images larger */
    .badge:hover {
        transform: scale(2.2);
        /* Scale up the badge on hover */
    }


/* badge images */
    .badge-row img {
        margin: -2px 7px;
        height: 175px;
        width: 175px;
        display: none;

    }








/* set shadow + height of content */
    .experience-container {
        width: 100%;
        height: 82%;
        box-shadow: 0 0 32px rgba(0, 0, 0, 0.5);
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: #8c0b43 #ffffff21;
        scrollbar-width: thin;
        border-radius: 18px;
        margin: 0 auto;
        /* Hide scrollbar for Firefox by default */
        scrollbar-width: none;
        position: relative;
        top: -130px;
        /*
        width: 100%;
        min-width: 380px;
        height: 100%;
        min-height: 460px;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: #8c0b43 #ffffff21;
        scrollbar-width: thin;
        border-radius: 18px;
        margin: 0 auto;
        scrollbar-width: none;
        position: relative;
        top: -55px;
        left: -50px;
        justify-content: space-evenly; */
    }


/* content background-colors of the 3 boxes */
    .exp.chunked {
        display: grid;
        grid-template-columns: 1fr;
        /* Single column */
        grid-template-rows: repeat(2, 1fr);
        background: linear-gradient(to bottom, #8c0b4357 10%, #cf1c1c06 90%);
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        border-radius: 18px;
        padding: 20px;
        box-sizing: border-box;
        margin: 0 auto;
        justify-content: space-evenly;
        width: 100%;
        height: 100%;
        flex-wrap: wrap;
        min-width: 270px;
        min-height: 320px;
     
        transform: translateY(20px);
        z-index: 1000;
        position: relative;
        top: -20px;
        /*display: block;
        background: linear-gradient(to bottom, #8c0b4357 10%, #cf1c1c06 60%);
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        border-radius: 10px;
        margin: 30px auto;
        position: relative;
        top: -15px;
        left: 20px;
        width: 100%;
        min-width: 350px;
        height: 60%;
        justify-content: space-evenly; */
    }

/* content background-colors of the 3 boxes */
    .exp {
        padding: 20px;
        margin: 0 auto;
        box-sizing: border-box;
        min-height: 500px;
        width: 100%;
        flex: 1;
    }

/* [animation]content background-colors of the 3 boxes */
    .exp.chunked:hover {
        background: linear-gradient(to bottom, #000000 10%, #cf1c1c06 60%);
    }

/* Uber swipe symbol */
    .swipe-icon {
        position: relative;
        top: -5px;
        left: 290px;
        font-size: 1.5rem;
        color: #fff;
        pointer-events: none;
        user-select: none;
    }

/* web dev swipe symbol */
    .swipe-icon-2 {
        position: relative;
        top: -5px;
        left: 290px;
        font-size: 1.5rem;
        color: #fff;
        pointer-events: none;
        user-select: none;
    }

/* marketing swipe symbol */
    .swipe-icon-3 {
        position: relative;
        top: 420px;
        left: 290px;
        font-size: 1.25rem;
        color: #fff;
        pointer-events: none;
        user-select: none;
    }


/* company title  */
    .exp.chunked h2 {
       width: 100%;
        padding: 0;
        position: relative;
        top: -40px;
        left: -5px;
        font-size: 1.5rem;
        font-weight: 700;
    }

/*
   .exp.chunked  .webdev-title {
        width: 60%;
    }

    .exp.chunked .marketing-title {
        width: 50%;
    }   
*/

/* attendance dates  */
    .exp.chunked h3 {
        position: relative;
        top: -70px;
        left: -5px;
        color: #ffd700;
        width: 250px;
        font-size: 1.3rem;
        font-weight: 700;
    }


/* supporting paragraph */
    .chunked  p {
        position: relative;
        top: -82px;
        left: -5px;
        width: 317px;
        height: 270px;
        font-size: 1.3rem;
        line-height: 1.5;
        font-family: 'Blinker', sans-serif;
        font-weight: 400;
        text-align: left;
        color: #fff;
        flex-wrap: wrap;
        overflow: hidden;
    }

/* [highlighted text] supporting paragraph */
    p strong {
        color: blanchedalmond;
    }




/* Keywords as button points */
    .chunked-keywords {
        display: flex;
        gap: 15px;
        list-style-type: none;
        padding: 0;
        margin: 0 auto;
        width: 100%;
        align-items: center;
        justify-content: center;
        align-content: center;
        text-align: center;
        flex-direction: row;
        flex-wrap: wrap;
        position: relative;
        top: 92px;
        left: 12px;
        flex: 1;
    }





/* Keyword item styling */
    .chunked-keywords li {
        background-color: #ffffff0b;
        color: #ffd700;
        border-radius: 15px;
        font-size: 1.5rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }



















    /* Hide scrollbar until scroll (Webkit browsers) */
    .experience-container::-webkit-scrollbar {
        width: 8px;
        background: transparent;
    }

    .experience-container:hover::-webkit-scrollbar,
    .experience-container:active::-webkit-scrollbar,
    .experience-container:focus::-webkit-scrollbar {
        background: #ffffff21;
    }

    /* Hide scrollbar thumb until scroll */
    .experience-container::-webkit-scrollbar-thumb {
        background: transparent;
        transition: background 0.2s;
    }

    .experience-container:hover::-webkit-scrollbar-thumb,
    .experience-container:active::-webkit-scrollbar-thumb,
    .experience-container:focus::-webkit-scrollbar-thumb {
        background: #8c0b43;
    }

    /* For Firefox */
    .experience-container {
        scrollbar-width: none;
    }

    .experience-container:hover,
    .experience-container:active,
    .experience-container:focus {
        scrollbar-width: thin;
        scrollbar-color: #8c0b43 #ffffff21;
    }






    .big-sizes {
        display: none;
    }


/* (big sizes) hover to enlarge button (Web dev) */
    .info {
        position: relative;
        top: 5px;
        left: 200px;
        color: #bbbbbba6;
        font-size: 1.375rem;
    }

    .inf {
        opacity: 0;
    }

    .info::before {
        content: "ℹ";
        color: #e9eaed;
        font-size: 1.375rem;
        display: inline;
        margin-right: 0;
        padding-right: 0;
        line-height: 0.5;
    }

/* (big sizes) hover to enlarge button ( text ) */
    .info .info-text {
        display: none;
        position: absolute;
        background-color: #080808;
        color: #f1f1f1;
        padding: 5px;
        border-radius: 5px;
        top: -85px;
        left: -6px;
        font-size: 0.875rem;
        width: 60px;
        height: auto;
    }

    .info:hover .info-text {
        display: block;
        color: #f1f1f1;

    }

    .info a:visited {
        width: 50px;
        height: auto;
        color: white;
    }





/* (big sizes) hover to enlarge button (marketing) */
    .info2 {
        position: relative;
        top: 5px;
        left: 260px;
        color: #bbbbbba6;
        font-size: 1.375rem;
    }

    .info2::before {
        content: "ℹ";
        color: #0f33ff;
        font-size: 1.375rem;
        display: inline;
        margin-right: 0;
        padding-right: 0;
        line-height: 0.5;
    }

/* (big sizes) hover to enlarge button ( text ) */
    .info2 .info2-text {
        display: none;
        position: absolute;
        background-color: #080808;
        color: #f1f1f1;
        padding: 5px;
        border-radius: 5px;
        top: -55px;
        left: -6px;
        font-size: 0.875rem;
        width: 50px;
        height: auto;
    }

    .info2:hover .info2-text {
        display: block;
    }

    .info2 a:visited {
        width: 50px;
        height: auto;
        color: white;
    }


/* not using */
    .experience-options {
        display: none;
    }

}




/*End of 04-Experience  */





/*  05 - Education */


.grid--container {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
}

/* Background for CCP */
.grid--image.ccp {
    grid-column: 1 / 7;
    grid-row: 1 / 7;
}

.grid--image img {
    width: 100%;
    /* Make the image fit the width of its container */
    height: auto;
    /* Maintain the aspect ratio */
    object-fit: cover;
    /* Ensure the image covers the container area */
}


/* Background for ASU */
.grid--image.asu {
    grid-column: 1 / 7;
    grid-row: 1 / 7;
}

.grid--content {
    background-color: #8c0b42;
    color: #000;
    grid-column: 6 / -1;
    grid-row: 4 / -1;
}

.card--title {
    font-family: 'Blinker', sans-serif;
}

button {
    border: 1px solid black;
    background-color: transparent;
    color: #fff;
}

button:hover {
    background: #000;
    color: white;
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.2);
}

@media (min-width: 1581px) {
    .grid-wrapper {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        gap: 20px;
        width: 100%;
        padding: 0 20px;
        position: absolute;
        left: 170px;
        top: 134px;
        scale: 0.9;
    }

    .grid--container {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        /* Splits the grid into two columns for images and text */
        grid-template-rows: auto auto;
        /* One row for the images and another for the text */
        gap: 20px;
        /* background-color: #ffffff06; */
        /* box-shadow: 0 2px 5px #0f33ff41; */
    }

    .grid--image {
        grid-column: span 30;
        /* Each image spans 6 columns */
        grid-row: 1;
        width: 100%;
        border-radius: 12px;
        box-shadow: 0 2px 5px #0f33ff41;
    }

    .grid--container:nth-child(1) .grid--image {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        background-color: #8c0b4357;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
    }


    .grid--container:nth-child(2) .grid--image {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        background-color: #4e4e4ea6;
        box-shadow: 0 2px 5px #4e4e4ea6;
        border: 2px solid #4e4e4ea6;
    }

    .grid--content {
        grid-column: span 30;
        /* Each content block spans 6 columns below its image */
        grid-row: 2;
        padding: 0 20px;
        background-color: #ffffff06;
        border: 2px solid #ffd70014;
        color: #fff;
    }

    .grid--container:nth-child(1) .grid--content {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        color: #fff;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: #8c0b4357;
        background-image: linear-gradient(to bottom left, #8c0b42, black 100%);
        background-position: cover;
        background-repeat: no-repeat;
    }

    /* Styles for the second .grid--content */
    .grid--container:nth-child(2) .grid--content {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        color: #fff;
        background-color: #4e4e4ea6;
        background-image: linear-gradient(to bottom right, #4e4e4ea6, black 100%);
        box-shadow: 0 2px 5px #4e4e4ea6;
        border: 2px solid #4e4e4ea6;
    }

    .card--major {
        position: relative;
        top: -14px;
        color: #ffd700;
    }

    .grid--content .card--title br {
        display: none;
        /* Show the break by default */
    }

    .grid--content button {
        margin: 30px;
        background-color: #ffffff0b;
        color: #ffd700;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }

    .grid--container.education-highlights {
        grid-column: 1 / -1;
        /* Full-width below the main sections */
        grid-row: 3;
        /* Positioned as a separate row below the images and text */
        background-color: #8c0b43fa;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        color: #fff;
        border-radius: 12px;
        display: none;
    }

    .highlights-content {
        display: none;
        flex-direction: column;
        gap: 10px;
    }

    .talk {
        position: relative;
        top: 0px;
        width: 100%;
        left: 0px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .talk h1 {
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 5px;
        left: 0px;
    }

    .talk p {
        font-size: 0.85rem;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: -18px;
        left: 180px;
        font-weight: 500;
        width: 95%;
    }

}

@media (min-width: 1481px) and (max-width: 1580px) {
    .grid-wrapper {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        gap: 20px;
        width: 100%;
        padding: 0 20px;
        position: absolute;
        left: 150px;
        top: 134px;
        scale: 0.9;
    }

    .grid--container {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        /* Splits the grid into two columns for images and text */
        grid-template-rows: auto auto;
        /* One row for the images and another for the text */
        gap: 20px;
        /* background-color: #ffffff06; */
        /* box-shadow: 0 2px 5px #0f33ff41; */
    }

    .grid--image {
        grid-column: span 30;
        /* Each image spans 6 columns */
        grid-row: 1;
        width: 100%;
        border-radius: 12px;
        box-shadow: 0 2px 5px #0f33ff41;
    }

    .grid--container:nth-child(1) .grid--image {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        background-color: #8c0b4357;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
    }

    .grid--container:nth-child(2) .grid--image {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        background-color: #4e4e4ea6;
        box-shadow: 0 2px 5px #4e4e4ea6;
        border: 2px solid #4e4e4ea6;
    }

    .grid--content {
        grid-column: span 30;
        /* Each content block spans 6 columns below its image */
        grid-row: 2;
        padding: 0 20px;
        background-color: #ffffff06;
        border: 2px solid #ffd70014;
        color: #fff;
    }

    .grid--container:nth-child(1) .grid--content {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        color: #fff;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: #8c0b4357;
        background-image: linear-gradient(to bottom left, #8c0b42, black 100%);
        background-position: cover;
        background-repeat: no-repeat;
    }

    /* Styles for the second .grid--content */
    .grid--container:nth-child(2) .grid--content {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        color: #fff;
        background-color: #4e4e4ea6;
        background-image: linear-gradient(to bottom right, #4e4e4ea6, black 100%);
        box-shadow: 0 2px 5px #4e4e4ea6;
        border: 2px solid #4e4e4ea6;
    }

    .card--major {
        position: relative;
        top: -14px;
        color: #ffd700;
    }

    .grid--content .card--title br {
        display: none;
        /* Show the break by default */
    }

    .grid--content button {
        margin: 30px;
        background-color: #ffffff0b;
        color: #ffd700;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }

    .grid--container.education-highlights {
        grid-column: 1 / -1;
        /* Full-width below the main sections */
        grid-row: 3;
        /* Positioned as a separate row below the images and text */
        background-color: #8c0b43fa;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        color: #fff;
        border-radius: 12px;
        display: none;
    }

    .highlights-content {
        display: none;
        flex-direction: column;
        gap: 10px;
    }

    .talk {
        position: relative;
        top: 0px;
        width: 100%;
        left: 0px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .talk h1 {
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 5px;
        left: 0px;
    }

    .talk p {
        font-size: 0.85rem;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: -18px;
        left: 180px;
        font-weight: 500;
        width: 95%;
    }
}

@media (min-width: 1381px) and (max-width: 1480px) {
    .grid-wrapper {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        gap: 20px;
        width: 100%;
        padding: 0 20px;
        position: absolute;
        left: 150px;
        top: 170px;
    }

    .grid--container {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        /* Splits the grid into two columns for images and text */
        grid-template-rows: auto auto;
        /* One row for the images and another for the text */
        gap: 20px;
        /* background-color: #ffffff06; */
        /* box-shadow: 0 2px 5px #0f33ff41; */
    }

    .grid--image {
        grid-column: span 26;
        /* Each image spans 6 columns */
        grid-row: 1;
        width: 100%;
        border-radius: 12px;
        box-shadow: 0 2px 5px #0f33ff41;
    }

    .grid--container:nth-child(1) .grid--image {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        background-color: #8c0b4357;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
    }


    .grid--container:nth-child(2) .grid--image {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        background-color: #4e4e4ea6;
        box-shadow: 0 2px 5px #4e4e4ea6;
        border: 2px solid #4e4e4ea6;
    }

    .grid--content {
        grid-column: span 26;
        /* Each content block spans 6 columns below its image */
        grid-row: 2;
        padding: 0 20px;
        background-color: #ffffff06;
        border: 2px solid #ffd70014;
        color: #fff;
    }

    .grid--container:nth-child(1) .grid--content {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        color: #fff;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: #8c0b4357;
        background-image: linear-gradient(to bottom left, #8c0b42, black 100%);
        background-position: cover;
        background-repeat: no-repeat;
    }

    /* Styles for the second .grid--content */
    .grid--container:nth-child(2) .grid--content {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        color: #fff;
        background-color: #4e4e4ea6;
        background-image: linear-gradient(to bottom right, #4e4e4ea6, black 100%);
        box-shadow: 0 2px 5px #4e4e4ea6;
        border: 2px solid #4e4e4ea6;
    }

    .card--major {
        position: relative;
        top: -14px;
        color: #ffd700;
    }

    .grid--content .card--title br {
        display: none;
        /* Show the break by default */
    }

    .grid--content button {
        margin: 30px;
        background-color: #ffffff0b;
        color: #ffd700;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }

    .grid--container.education-highlights {
        grid-column: 1 / -1;
        /* Full-width below the main sections */
        grid-row: 3;
        /* Positioned as a separate row below the images and text */
        background-color: #8c0b43fa;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        color: #fff;
        border-radius: 12px;
        display: none;
    }

    .highlights-content {
        display: none;
        flex-direction: column;
        gap: 10px;
    }

    .talk {
        position: relative;
        top: 0px;
        width: 100%;
        left: 0px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .talk h1 {
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 5px;
        left: 0px;
    }

    .talk p {
        font-size: 0.85rem;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: -18px;
        left: 180px;
        font-weight: 500;
        width: 95%;
    }

}

@media (min-width: 1281px) and (max-width: 1380px) {
    .grid-wrapper {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        gap: 20px;
        width: 100%;
        padding: 0 20px;
        position: absolute;
        left: 130px;
        top: 170px;

    }

    .grid--container {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        /* Splits the grid into two columns for images and text */
        grid-template-rows: auto auto;
        /* One row for the images and another for the text */
        gap: 20px;
        /* background-color: #ffffff06; */
        /* box-shadow: 0 2px 5px #0f33ff41; */
    }

    .grid--image {
        grid-column: span 26;
        /* Each image spans 6 columns */
        grid-row: 1;
        width: 100%;
        border-radius: 12px;
        box-shadow: 0 2px 5px #0f33ff41;
    }

    .grid--container:nth-child(1) .grid--image {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        background-color: #8c0b4357;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
    }


    .grid--container:nth-child(2) .grid--image {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        background-color: #4e4e4ea6;
        box-shadow: 0 2px 5px #4e4e4ea6;
        border: 2px solid #4e4e4ea6;
    }

    .grid--content {
        grid-column: span 26;
        /* Each content block spans 6 columns below its image */
        grid-row: 2;
        padding: 0 20px;
        background-color: #ffffff06;
        border: 2px solid #ffd70014;
        color: #fff;
    }

    .grid--container:nth-child(1) .grid--content {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        color: #fff;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: #8c0b4357;
        background-image: linear-gradient(to bottom left, #8c0b42, black 100%);
        background-position: cover;
        background-repeat: no-repeat;
    }

    /* Styles for the second .grid--content */
    .grid--container:nth-child(2) .grid--content {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        color: #fff;
        background-color: #4e4e4ea6;
        background-image: linear-gradient(to bottom right, #4e4e4ea6, black 100%);
        box-shadow: 0 2px 5px #4e4e4ea6;
        border: 2px solid #4e4e4ea6;
    }

    .card--major {
        position: relative;
        top: -14px;
        color: #ffd700;
    }

    .grid--content .card--title br {
        display: none;
        /* Show the break by default */
    }

    .grid--content button {
        margin: 30px;
        background-color: #ffffff0b;
        color: #ffd700;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }

    .grid--container.education-highlights {
        grid-column: 1 / -1;
        /* Full-width below the main sections */
        grid-row: 3;
        /* Positioned as a separate row below the images and text */
        background-color: #8c0b43fa;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        color: #fff;
        border-radius: 12px;
        display: none;
    }

    .highlights-content {
        display: none;
        flex-direction: column;
        gap: 10px;
    }

    .talk {
        position: relative;
        top: 0px;
        width: 100%;
        left: 0px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .talk h1 {
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 5px;
        left: 0px;
    }

    .talk p {
        font-size: 0.85rem;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: -18px;
        left: 180px;
        font-weight: 500;
        width: 95%;
    }
}

@media (min-width: 1181px) and (max-width: 1280px) {
    .grid-wrapper {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        gap: 20px;
        width: 100%;
        scale: 0.85;
        padding: 0 20px;
        position: absolute;
        left: 90px;
        top: 150px;
    }

    .talk {
        position: relative;
        top: 0px;
        width: 100%;
        left: 0px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .talk h1 {
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 5px;
        left: 0px;
    }

    .talk p {
        font-size: 0.85rem;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: -18px;
        left: 180px;
        font-weight: 500;
        width: 95%;
    }



    .grid--container {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        /* Splits the grid into two columns for images and text */
        grid-template-rows: auto auto;
        /* One row for the images and another for the text */
        gap: 20px;
        /* background-color: #ffffff06; */
        /* box-shadow: 0 2px 5px #0f33ff41; */
    }

    .grid--image {
        grid-column: span 24;
        /* Each image spans 6 columns */
        grid-row: 1;
        width: 100%;
        border-radius: 12px;
        box-shadow: 0 2px 5px #0f33ff41;
    }

    .grid--container:nth-child(1) .grid--image {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        background-color: #8c0b4357;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
    }


    .grid--container:nth-child(2) .grid--image {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        background-color: #4e4e4ea6;
        box-shadow: 0 2px 5px #4e4e4ea6;
        border: 2px solid #4e4e4ea6;
    }

    .grid--content {
        grid-column: span 24;
        /* Each content block spans 6 columns below its image */
        grid-row: 2;
        padding: 0 20px;
        background-color: #ffffff06;
        border: 2px solid #ffd70014;
        color: #fff;
    }

    .grid--container:nth-child(1) .grid--content {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        color: #fff;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: #8c0b4357;
        background-image: linear-gradient(to bottom left, #8c0b42, black 100%);
        background-position: cover;
        background-repeat: no-repeat;
    }

    /* Styles for the second .grid--content */
    .grid--container:nth-child(2) .grid--content {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        color: #fff;
        background-color: #4e4e4ea6;
        background-image: linear-gradient(to bottom right, #4e4e4ea6, black 100%);
        box-shadow: 0 2px 5px #4e4e4ea6;
        border: 2px solid #4e4e4ea6;
    }

    .card--major {
        position: relative;
        top: -14px;
        color: #ffd700;
    }

    .grid--content .card--title br {
        display: none;
        /* Show the break by default */
    }

    .grid--content button {
        margin: 30px;
        background-color: #ffffff0b;
        color: #ffd700;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }

    .grid--container.education-highlights {
        grid-column: 1 / -1;
        /* Full-width below the main sections */
        grid-row: 3;
        /* Positioned as a separate row below the images and text */
        background-color: #8c0b43fa;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        color: #fff;
        border-radius: 12px;
        display: none;
    }

    .highlights-content {
        display: none;
        flex-direction: column;
        gap: 10px;
    }


}






@media (min-width: 1130px) and (max-width: 1180px) {
    .grid-wrapper {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        gap: 20px;
        scale: 0.85;
        width: 100%;
        padding: 0 20px;
        position: relative;
        left: 0px;
        top: -40px;
    }

    .talk {
        position: relative;
        top: 0px;
        width: 100%;
        left: 0px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .talk h1 {
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 5px;
        left: -100px;
    }

    .talk p {
        font-size: 0.85rem;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: -18px;
        left: 80px;
        font-weight: 500;
        width: 95%;
    }


    .grid--container {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        /* Splits the grid into two columns for images and text */
        grid-template-rows: auto auto;
        /* One row for the images and another for the text */
        gap: 20px;
        /* background-color: #ffffff06; */
        /* box-shadow: 0 2px 5px #0f33ff41; */
    }

    .grid--image {
        grid-column: span 25;
        /* Each image spans 6 columns */
        grid-row: 1;
        width: 100%;
        border-radius: 12px;
        box-shadow: 0 2px 5px #0f33ff41;
    }

    .grid--container:nth-child(1) .grid--image {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        background-color: #8c0b4357;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
    }


    .grid--container:nth-child(2) .grid--image {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        background-color: #4e4e4ea6;
        box-shadow: 0 2px 5px #4e4e4ea6;
        border: 2px solid #4e4e4ea6;
    }

    .grid--content {
        grid-column: span 25;
        /* Each content block spans 6 columns below its image */
        grid-row: 2;
        padding: 0 20px;
        background-color: #ffffff06;
        border: 2px solid #ffd70014;
        color: #fff;
    }

    .grid--container:nth-child(1) .grid--content {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        color: #fff;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: #8c0b4357;
        background-image: linear-gradient(to bottom left, #8c0b42, black 100%);
        background-position: cover;
        background-repeat: no-repeat;
    }

    /* Styles for the second .grid--content */
    .grid--container:nth-child(2) .grid--content {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        color: #fff;
        background-color: #4e4e4ea6;
        background-image: linear-gradient(to bottom right, #4e4e4ea6, black 100%);
        box-shadow: 0 2px 5px #4e4e4ea6;
        border: 2px solid #4e4e4ea6;
    }

    .card--major {
        position: relative;
        top: -14px;
        color: #ffd700;
    }

    .grid--content .card--title br {
        display: none;
        /* Show the break by default */
    }

    .grid--content button {
        margin: 30px;
        background-color: #ffffff0b;
        color: #ffd700;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }

    .grid--container.education-highlights {
        grid-column: 1 / -1;
        /* Full-width below the main sections */
        grid-row: 3;
        /* Positioned as a separate row below the images and text */
        background-color: #8c0b43fa;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        color: #fff;
        border-radius: 12px;
        display: none;
    }

    .highlights-content {
        display: none;
        flex-direction: column;
        gap: 10px;
    }


}

@media (min-width: 1030px) and (max-width: 1129px) {
    .grid-wrapper {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        gap: 20px;
        width: 100%;
        scale: 0.9;
        padding: 0 20px;
        position: relative;
        left: 0px;
        top: -20px;
    }

    .talk {
        position: relative;
        top: 0px;
        width: 100%;
        left: 0px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .talk h1 {
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 5px;
        left: -100px;
    }

    .talk p {
        font-size: 0.85rem;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: -18px;
        left: 80px;
        font-weight: 500;
        width: 95%;
    }

    .grid--container {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        /* Splits the grid into two columns for images and text */
        grid-template-rows: auto auto;
        /* One row for the images and another for the text */
        gap: 20px;
        /* background-color: #ffffff06; */
        /* box-shadow: 0 2px 5px #0f33ff41; */
    }

    .grid--image {
        grid-column: span 23;
        /* Each image spans 6 columns */
        grid-row: 1;
        width: 100%;
        border-radius: 12px;
        box-shadow: 0 2px 5px #0f33ff41;
    }

    .grid--container:nth-child(1) .grid--image {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        background-color: #8c0b4357;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
    }


    .grid--container:nth-child(2) .grid--image {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        background-color: #4e4e4ea6;
        box-shadow: 0 2px 5px #4e4e4ea6;
        border: 2px solid #4e4e4ea6;
    }

    .grid--content {
        grid-column: span 23;
        /* Each content block spans 6 columns below its image */
        grid-row: 2;
        padding: 0 20px;
        background-color: #ffffff06;
        border: 2px solid #ffd70014;
        color: #fff;
    }

    .grid--container:nth-child(1) .grid--content {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        color: #fff;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: #8c0b4357;
        background-image: linear-gradient(to bottom left, #8c0b42, black 100%);
        background-position: cover;
        background-repeat: no-repeat;
    }

    /* Styles for the second .grid--content */
    .grid--container:nth-child(2) .grid--content {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        color: #fff;
        background-color: #4e4e4ea6;
        background-image: linear-gradient(to bottom right, #4e4e4ea6, black 100%);
        box-shadow: 0 2px 5px #4e4e4ea6;
        border: 2px solid #4e4e4ea6;
    }

    .card--major {
        position: relative;
        top: -14px;
        color: #ffd700;
    }

    .grid--content .card--title br {
        display: none;
        /* Show the break by default */
    }

    .grid--content button {
        margin: 30px;
        background-color: #ffffff0b;
        color: #ffd700;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }

    .grid--container.education-highlights {
        grid-column: 1 / -1;
        /* Full-width below the main sections */
        grid-row: 3;
        /* Positioned as a separate row below the images and text */
        background-color: #8c0b43fa;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        color: #fff;
        border-radius: 12px;
        display: none;
    }

    .highlights-content {
        display: none;
        flex-direction: column;
        gap: 10px;
    }


}

@media (min-width: 930px) and (max-width: 1029px) {
    .grid-wrapper {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        gap: 20px;
        width: 100%;
        padding: 0 20px;
        scale: 0.8;
        position: relative;
        left: 0px;
        top: -40px;
    }

    .talk {
        position: relative;
        top: 0px;
        width: 100%;
        left: 0px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .talk h1 {
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 5px;
        left: -100px;
    }

    .talk p {
        font-size: 0.85rem;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: -18px;
        left: 80px;
        font-weight: 500;
        width: 95%;
    }

    .grid--container {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        /* Splits the grid into two columns for images and text */
        grid-template-rows: auto auto;
        /* One row for the images and another for the text */
        gap: 20px;
        /* background-color: #ffffff06; */
        /* box-shadow: 0 2px 5px #0f33ff41; */
    }

    .grid--image {
        grid-column: span 22;
        /* Each image spans 6 columns */
        grid-row: 1;
        width: 100%;
        border-radius: 12px;
        box-shadow: 0 2px 5px #0f33ff41;
    }

    .grid--container:nth-child(1) .grid--image {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        background-color: #8c0b4357;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
    }


    .grid--container:nth-child(2) .grid--image {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        background-color: #4e4e4ea6;
        box-shadow: 0 2px 5px #4e4e4ea6;
        border: 2px solid #4e4e4ea6;
    }

    .grid--content {
        grid-column: span 22;
        /* Each content block spans 6 columns below its image */
        grid-row: 2;
        padding: 0 20px;
        background-color: #ffffff06;
        border: 2px solid #ffd70014;
        color: #fff;
    }

    .grid--container:nth-child(1) .grid--content {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        color: #fff;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: #8c0b4357;
        background-image: linear-gradient(to bottom left, #8c0b42, black 100%);
        background-position: cover;
        background-repeat: no-repeat;
    }

    /* Styles for the second .grid--content */
    .grid--container:nth-child(2) .grid--content {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        color: #fff;
        background-color: #4e4e4ea6;
        background-image: linear-gradient(to bottom right, #4e4e4ea6, black 100%);
        box-shadow: 0 2px 5px #4e4e4ea6;
        border: 2px solid #4e4e4ea6;
    }

    .card--major {
        position: relative;
        top: -14px;
        color: #ffd700;
    }

    .grid--content .card--title br {
        display: none;
        /* Show the break by default */
    }

    .grid--content button {
        margin: 30px;
        background-color: #ffffff0b;
        color: #ffd700;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }

    .grid--container.education-highlights {
        grid-column: 1 / -1;
        /* Full-width below the main sections */
        grid-row: 3;
        /* Positioned as a separate row below the images and text */
        background-color: #8c0b43fa;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        color: #fff;
        border-radius: 12px;
        display: none;
    }

    .highlights-content {
        display: none;
        flex-direction: column;
        gap: 10px;
    }


}

@media (min-width: 830px) and (max-width: 929px) {
    .grid-wrapper {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto;
        gap: 20px;
        width: 100%;
        padding: 0 20px;
        scale: 0.8;
        max-width: 900px;
        position: relative;
        left: -50px;
        top: -40px;
    }

    .talk {
        position: relative;
        top: 0px;
        width: 100%;
        left: 0px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .talk h1 {
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 5px;
        left: -100px;
    }

    .talk p {
        font-size: 0.85rem;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: -18px;
        left: 80px;
        font-weight: 500;
        width: 95%;
    }

    .grid--container {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        /* Splits the grid into two columns for images and text */
        grid-template-rows: auto auto;
        /* One row for the images and another for the text */
        gap: 20px;
        /* background-color: #ffffff06; */
        /* box-shadow: 0 2px 5px #0f33ff41; */
    }

    .grid--image {
        grid-column: span 22;
        /* Each image spans 6 columns */
        grid-row: 1;
        width: 100%;
        border-radius: 12px;
        box-shadow: 0 2px 5px #0f33ff41;
    }

    .grid--container:nth-child(1) .grid--image {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        background-color: #8c0b4357;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
    }


    .grid--container:nth-child(2) .grid--image {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        background-color: #4e4e4ea6;
        box-shadow: 0 2px 5px #4e4e4ea6;
        border: 2px solid #4e4e4ea6;
    }

    .grid--content {
        grid-column: span 22;
        /* Each content block spans 6 columns below its image */
        grid-row: 2;
        padding: 0 20px;
        background-color: #ffffff06;
        border: 2px solid #ffd70014;
        color: #fff;
    }

    .grid--container:nth-child(1) .grid--content {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        color: #fff;
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: #8c0b4357;
        background-image: linear-gradient(to bottom left, #8c0b42, black 100%);
        background-position: cover;
        background-repeat: no-repeat;
    }

    /* Styles for the second .grid--content */
    .grid--container:nth-child(2) .grid--content {
        /* background-color: #ffffff06; */
        /* border: 2px solid #ffd70014; */
        color: #fff;
        background-color: #4e4e4ea6;
        background-image: linear-gradient(to bottom right, #4e4e4ea6, black 100%);
        box-shadow: 0 2px 5px #4e4e4ea6;
        border: 2px solid #4e4e4ea6;
    }

    .card--major {
        position: relative;
        top: -14px;
        color: #ffd700;
    }

    .grid--content .card--title br {
        display: none;
        /* Show the break by default */
    }

    .grid--content button {
        margin: 30px;
        background-color: #ffffff0b;
        color: #ffd700;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: 400;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        border: 2px solid rgba(255, 255, 255, 0.138);
    }

    .grid--container.education-highlights {
        grid-column: 1 / -1;
        /* Full-width below the main sections */
        grid-row: 3;
        /* Positioned as a separate row below the images and text */
        background-color: #8c0b43fa;
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        color: #fff;
        border-radius: 12px;
        display: none;
    }

    .highlights-content {
        display: none;
        flex-direction: column;
        gap: 10px;
    }


}



@media (min-width: 736px) and (max-width: 829px) {
    .grid-wrapper {
        width: 100%;
        max-width: 540px;
        height: 100vh;
        max-height: 785px;
        box-shadow: 0 0 32px rgba(0, 0, 0, 0.5);
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: #8c0b43 #ffffff21;
        scrollbar-width: thin;
        border-radius: 18px;
        margin: 0 auto;
        /* Hide scrollbar for Firefox by default */
        scrollbar-width: none;
        position: relative;
        top: 0px;
    }

    .grid--container {
        display: grid;
        grid-template-columns: 1fr;
        /* Single column */
        grid-template-rows: repeat(2, 1fr);
        background: linear-gradient(to bottom, #8c0b4357 10%, #cf1c1c06 90%);
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        border-radius: 18px;
        padding: 20px;
        box-sizing: border-box;
        margin: 0 auto;
        justify-content: space-evenly;
        width: 100%;
        height: 100vh;
        flex-wrap: wrap;
        max-width: 690px;
        max-height: 350px;
        overflow-x: hidden;
        overflow-y: hidden;
        scale: 0.9;
        transform: translateY(20px);
        z-index: 1000;
        position: relative;
        top: -30px;
    }

    .grid--container:nth-child(2) {
        max-height: 350px;
    }

    .grid--container:hover {
        box-shadow: 0 4px 10px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: linear-gradient(to bottom, #000000 10%, #cf1c1c06 60%);
    }

    .talk {
        position: relative;
        top: 0px;
        width: 100%;
        left: -200px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .talk h1 {
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 5px;
        left: -100px;
    }

    .talk p {
        font-size: 0.85rem;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: -18px;
        left: 80px;
        font-weight: 500;
        width: 95%;
    }


    .grid--content .card--title br {
        display: none;
        /* Hides the break, making text flow continuously */
    }

    .ccp-img {
        position: relative;
        top: 62px;
        grid-column: 1 / -1;
        grid-row: 1 / span 4;
        /* The image spans 4 rows */
        border-radius: 18px;
    }

    .ccp-img,
    .asu-img {
        display: none;
    }

    .grid--content {
        color: #000;
        grid-column: 1 / -1;
        grid-row: 1 / -1;
        /* Take up all rows */
        width: 100%;
        height: 100vh;
        flex-wrap: wrap;
        max-width: 590px;
        max-height: 400px;
        position: relative;
        left: -20px;
    }

    .grid--container:nth-child(1) .grid--content {
        background-color: transparent;
        /* Example of a style for the first .grid--content */
        color: white;
        padding: 20px;
        width: 100%;
        height: 100%;
        max-height: 230px;
        max-width: 430px;
        position: relative;
        top: 50px;
    }

    .grid--container:nth-child(2) .grid--content {
        background-color: transparent;
        /* Example of a style for the second .grid--content */
        color: white;
        padding: 20px;
        width: 100%;
        max-width: 430px;
        position: relative;
        top: 50px;
    }

    .grid--container.education-highlights {
        position: absolute;
        bottom: 56px;
        left: 5px;
        width: 100%;
        height: 310px;
        background-color: #8c0b43fa;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
        display: none;
    }

    .highlights-content {
        color: #fff;
    }

    .card--highlight--title {
        position: relative;
        top: -25px;
    }

    .card--highlight--content {
        position: relative;
        top: -25px;
        list-style-type: "📌";
        line-height: -45px;
    }

    .card--highlight--content li:nth-child(1) {
        list-style-type: "💡";
        padding: 4px 15px;
    }

    .card--highlight--content li:nth-child(2) {
        list-style-type: "📝";
        padding: 4px 15px;
    }

    .card--highlight--content li:nth-child(3) {
        list-style-type: "🎖";
        padding: 4px 15px;
    }

    .card--highlight--content li:nth-child(4) {
        list-style-type: "🏆";
        padding: 4px 15px;
    }

    .card--title {
        position: relative;
        top: -40px;
        left: 0px;
        text-align: center;
        margin: 25px auto;
        width: 100%;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        letter-spacing: 1px;
        line-height: 1.2;
    }

    .grid--content h2 {
        width: 100%;
        /* max-width: 505px; */
        /* margin: 0 auto; */
        padding: 0;
        /* margin: 0; */
        position: relative;
        left: 0px;
        top: -73px;
    }

    .card--major {
        position: relative;
        top: -74px;
        left: 0px;
        color: #ffd700;
        width: 250px;
    }

    .grid--content p {
        position: relative;
        top: -85px;
        left: 0px;
        width: 113%;
        max-width: 1090px;
        max-height: 200px;
        margin-top: 30px;
        font-size: 1.1rem;
        line-height: 1.3;
        color: #ffffff;
        font-weight: 300;
        font-family: "freight-sans-pro", sans-serif;
        font-weight: 500;
        font-style: normal
    }

    .grid--container:nth-child(2) .button {
        position: relative;
        top: -15px;
    }

    .glow-on-hover {
        background-color: #ffffff0b;
        color: #ffd700;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
        top: -106px;
        left: -20px;
        scale: 0.8;
        margin: 20px auto;
    }

    /* Animated border */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }

}

@media (min-width: 636px) and (max-width: 735px) {

    .grid-wrapper {
        width: 100%;
        max-width: 540px;
        height: 100vh;
        max-height: 785px;
        box-shadow: 0 0 32px rgba(0, 0, 0, 0.5);
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: #8c0b43 #ffffff21;
        scrollbar-width: thin;
        border-radius: 18px;
        margin: 0 auto;
        /* Hide scrollbar for Firefox by default */
        scrollbar-width: none;
        position: relative;
        top: 5px;
    }

    .grid--container {
        display: grid;
        grid-template-columns: 1fr;
        /* Single column */
        grid-template-rows: repeat(2, 1fr);
        background: linear-gradient(to bottom, #8c0b4357 10%, #cf1c1c06 90%);
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        border-radius: 18px;
        padding: 20px;
        box-sizing: border-box;
        margin: 0 auto;
        justify-content: space-evenly;
        width: 100%;
        height: 100vh;
        flex-wrap: wrap;
        max-width: 690px;
        max-height: 350px;
        overflow-x: hidden;
        overflow-y: hidden;
        scale: 0.9;
        transform: translateY(20px);
        z-index: 1000;
        position: relative;
        top: 15px;
    }

    .grid--container:nth-child(2) {
        max-height: 350px;
    }

    .grid--container:hover {
        box-shadow: 0 4px 10px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: linear-gradient(to bottom, #000000 10%, #cf1c1c06 60%);
    }

    .talk {
        position: relative;
        top: 0px;
        width: 100%;
        left: -200px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .talk h1 {
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 5px;
        left: -150px;
    }

    .talk p {
        font-size: 0.85rem;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: -18px;
        left: 30px;
        font-weight: 500;
        width: 95%;
    }


    .grid--content .card--title br {
        display: none;
        /* Hides the break, making text flow continuously */
    }

    .ccp-img {
        position: relative;
        top: 62px;
        grid-column: 1 / -1;
        grid-row: 1 / span 4;
        /* The image spans 4 rows */
        border-radius: 18px;
    }

    .ccp-img,
    .asu-img {
        display: none;
    }

    .grid--content {
        color: #000;
        grid-column: 1 / -1;
        grid-row: 1 / -1;
        /* Take up all rows */
        width: 100%;
        height: 100vh;
        flex-wrap: wrap;
        max-width: 590px;
        max-height: 400px;
        position: relative;
        left: -20px;
    }

    .grid--container:nth-child(1) .grid--content {
        background-color: transparent;
        /* Example of a style for the first .grid--content */
        color: white;
        padding: 20px;
        width: 100%;
        height: 100%;
        max-height: 230px;
        max-width: 430px;
        position: relative;
        top: 50px;
    }

    .grid--container:nth-child(2) .grid--content {
        background-color: transparent;
        /* Example of a style for the second .grid--content */
        color: white;
        padding: 20px;
        width: 100%;
        max-width: 430px;
        position: relative;
        top: 50px;
    }

    .grid--container.education-highlights {
        position: absolute;
        bottom: 56px;
        left: 5px;
        width: 100%;
        height: 310px;
        background-color: #8c0b43fa;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
        display: none;
    }

    .highlights-content {
        color: #fff;
    }

    .card--highlight--title {
        position: relative;
        top: -25px;
    }

    .card--highlight--content {
        position: relative;
        top: -25px;
        list-style-type: "📌";
        line-height: -45px;
    }

    .card--highlight--content li:nth-child(1) {
        list-style-type: "💡";
        padding: 4px 15px;
    }

    .card--highlight--content li:nth-child(2) {
        list-style-type: "📝";
        padding: 4px 15px;
    }

    .card--highlight--content li:nth-child(3) {
        list-style-type: "🎖";
        padding: 4px 15px;
    }

    .card--highlight--content li:nth-child(4) {
        list-style-type: "🏆";
        padding: 4px 15px;
    }

    .card--title {
        position: relative;
        top: -40px;
        left: 0px;
        text-align: center;
        margin: 25px auto;
        width: 100%;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        letter-spacing: 1px;
        line-height: 1.2;
    }

    .grid--content h2 {
        width: 100%;
        /* max-width: 505px; */
        /* margin: 0 auto; */
        padding: 0;
        /* margin: 0; */
        position: relative;
        left: 0px;
        top: -73px;
    }

    .card--major {
        position: relative;
        top: -74px;
        left: 0px;
        color: #ffd700;
        width: 250px;
    }

    .grid--content p {
        position: relative;
        top: -85px;
        left: 0px;
        width: 113%;
        max-width: 1090px;
        max-height: 200px;
        margin-top: 30px;
        font-size: 1.1rem;
        line-height: 1.3;
        color: #ffffff;
        font-weight: 300;
        font-family: "freight-sans-pro", sans-serif;
        font-weight: 500;
        font-style: normal
    }

    .grid--container:nth-child(2) .button {
        position: relative;
        top: -15px;
    }

    .glow-on-hover {
        background-color: #ffffff0b;
        color: #ffd700;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
        top: -106px;
        left: -20px;
        scale: 0.8;
        margin: 20px auto;
    }

    /* Animated border */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }
}



@media (min-width: 540px) and (max-width: 635px) {

    .grid-wrapper {
        width: 100%;
        max-width: 540px;
        height: 100vh;
        max-height: 785px;
        box-shadow: 0 0 32px rgba(0, 0, 0, 0.5);
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: #8c0b43 #ffffff21;
        scrollbar-width: thin;
        border-radius: 18px;
        margin: 0 auto;
        /* Hide scrollbar for Firefox by default */
        scrollbar-width: none;
    }

    .grid--container {
        display: grid;
        grid-template-columns: 1fr;
        /* Single column */
        grid-template-rows: repeat(2, 1fr);
        background: linear-gradient(to bottom, #8c0b4357 10%, #cf1c1c06 90%);
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        border-radius: 18px;
        padding: 20px;
        box-sizing: border-box;
        margin: 0 auto;
        justify-content: space-evenly;
        width: 100%;
        height: 100vh;
        flex-wrap: wrap;
        max-width: 690px;
        max-height: 350px;
        overflow-x: hidden;
        overflow-y: hidden;
        scale: 0.9;
        transform: translateY(20px);
        z-index: 1000;
        position: relative;
        top: -35px;
    }

    .grid--container:nth-child(2) {
        max-height: 350px;
    }

    .grid--container:hover {
        box-shadow: 0 4px 10px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: linear-gradient(to bottom, #000000 10%, #cf1c1c06 60%);
    }

    .talk {
        position: relative;
        top: 0px;
        width: 100%;
        left: -240px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .talk h1 {
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 5px;
        left: -180px;
    }

    .talk p {
        font-size: 0.85rem;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: -18px;
        left: 0px;
        font-weight: 500;
        width: 95%;
    }


    .grid--content .card--title br {
        display: none;
        /* Hides the break, making text flow continuously */
    }

    .ccp-img {
        position: relative;
        top: 62px;
        grid-column: 1 / -1;
        grid-row: 1 / span 4;
        /* The image spans 4 rows */
        border-radius: 18px;
    }

    .ccp-img,
    .asu-img {
        display: none;
    }

    .grid--content {
        color: #000;
        grid-column: 1 / -1;
        grid-row: 1 / -1;
        /* Take up all rows */
        width: 100%;
        height: 100vh;
        flex-wrap: wrap;
        max-width: 590px;
        max-height: 400px;
        position: relative;
        left: -20px;
    }

    .grid--container:nth-child(1) .grid--content {
        background-color: transparent;
        /* Example of a style for the first .grid--content */
        color: white;
        padding: 20px;
        width: 100%;
        height: 100%;
        max-height: 230px;
        max-width: 430px;
        position: relative;
        top: 50px;
    }

    .grid--container:nth-child(2) .grid--content {
        background-color: transparent;
        /* Example of a style for the second .grid--content */
        color: white;
        padding: 20px;
        width: 100%;
        max-width: 430px;
        position: relative;
        top: 50px;
    }

    .grid--container.education-highlights {
        position: absolute;
        bottom: 56px;
        left: 5px;
        width: 100%;
        height: 310px;
        background-color: #8c0b43fa;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
        display: none;
    }

    .highlights-content {
        color: #fff;
    }

    .card--highlight--title {
        position: relative;
        top: -25px;
    }

    .card--highlight--content {
        position: relative;
        top: -25px;
        list-style-type: "📌";
        line-height: -45px;
    }

    .card--highlight--content li:nth-child(1) {
        list-style-type: "💡";
        padding: 4px 15px;
    }

    .card--highlight--content li:nth-child(2) {
        list-style-type: "📝";
        padding: 4px 15px;
    }

    .card--highlight--content li:nth-child(3) {
        list-style-type: "🎖";
        padding: 4px 15px;
    }

    .card--highlight--content li:nth-child(4) {
        list-style-type: "🏆";
        padding: 4px 15px;
    }

    .card--title {
        position: relative;
        top: -40px;
        left: 0px;
        text-align: center;
        margin: 25px auto;
        width: 100%;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        letter-spacing: 1px;
        line-height: 1.2;
    }

    .grid--content h2 {
        width: 100%;
        /* max-width: 505px; */
        /* margin: 0 auto; */
        padding: 0;
        /* margin: 0; */
        position: relative;
        left: 0px;
        top: -73px;
    }

    .card--major {
        position: relative;
        top: -74px;
        left: 0px;
        color: #ffd700;
        width: 250px;
    }

    .grid--content p {
        position: relative;
        top: -85px;
        left: 0px;
        width: 100%;
        max-width: 1090px;
        max-height: 200px;
        margin-top: 30px;
        font-size: 1.1rem;
        line-height: 1.3;
        color: #ffffff;
        font-weight: 300;
        font-family: "freight-sans-pro", sans-serif;
        font-weight: 500;
        font-style: normal
    }

    .grid--container:nth-child(2) .button {
        position: relative;
        top: -15px;
    }

    .glow-on-hover {
        background-color: #ffffff0b;
        color: #ffd700;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
        top: -106px;
        left: -20px;
        scale: 0.8;
        margin: 20px auto;
    }

    /* Animated border */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }
}

@media (min-width: 480px) and (max-width: 539px) {

    .grid-wrapper {
        width: 100%;
        max-width: 540px;
        height: 100vh;
        max-height: 785px;
        box-shadow: 0 0 32px rgba(0, 0, 0, 0.5);
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: #8c0b43 #ffffff21;
        scrollbar-width: thin;
        border-radius: 18px;
        margin: 0 auto;
        /* Hide scrollbar for Firefox by default */
        scrollbar-width: none;
    }

    .grid--container {
        display: grid;
        grid-template-columns: 1fr;
        /* Single column */
        grid-template-rows: repeat(2, 1fr);
        background: linear-gradient(to bottom, #8c0b4357 10%, #cf1c1c06 90%);
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        border-radius: 18px;
        padding: 20px;
        box-sizing: border-box;
        margin: 0 auto;
        justify-content: space-evenly;
        width: 100%;
        height: 100vh;
        flex-wrap: wrap;
        max-width: 690px;
        max-height: 350px;
        overflow-x: hidden;
        overflow-y: hidden;
        scale: 0.9;
        transform: translateY(20px);
        z-index: 1000;
        position: relative;
        top: -35px;
    }

    .grid--container:nth-child(2) {
        max-height: 350px;
    }

    .grid--container:hover {
        box-shadow: 0 4px 10px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: linear-gradient(to bottom, #000000 10%, #cf1c1c06 60%);
    }

    .talk {
        position: relative;
        top: 0px;
        width: 100%;
        left: -240px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .talk h1 {
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
        width: 100%;
        height: auto;
        word-break: break-word;
        position: relative;
        top: 5px;
        left: -200px;
    }

    .talk p {
        font-size: 0.85rem;
        text-align: center;
        margin: 0 auto;
        font-weight: 500;
        line-height: 1.2;
        position: relative;
        top: -18px;
        left: -20px;
        font-weight: 500;
        width: 95%;
    }

    .grid--content .card--title br {
        display: none;
        /* Hides the break, making text flow continuously */
    }

    .ccp-img {
        position: relative;
        top: 62px;
        grid-column: 1 / -1;
        grid-row: 1 / span 4;
        /* The image spans 4 rows */
        border-radius: 18px;
    }

    .ccp-img,
    .asu-img {
        display: none;
    }

    .grid--content {
        color: #000;
        grid-column: 1 / -1;
        grid-row: 1 / -1;
        /* Take up all rows */
        width: 100%;
        height: 100vh;
        flex-wrap: wrap;
        max-width: 590px;
        max-height: 400px;
        position: relative;
        left: -20px;
    }

    .grid--container:nth-child(1) .grid--content {
        background-color: transparent;
        /* Example of a style for the first .grid--content */
        color: white;
        padding: 20px;
        width: 100%;
        height: 100%;
        max-height: 230px;
        max-width: 430px;
        position: relative;
        top: 50px;
    }

    .grid--container:nth-child(2) .grid--content {
        background-color: transparent;
        /* Example of a style for the second .grid--content */
        color: white;
        padding: 20px;
        width: 100%;
        max-width: 430px;
        position: relative;
        top: 50px;
    }

    .grid--container.education-highlights {
        position: absolute;
        bottom: 56px;
        left: 5px;
        width: 100%;
        height: 310px;
        background-color: #8c0b43fa;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
        display: none;
    }

    .highlights-content {
        color: #fff;
    }

    .card--highlight--title {
        position: relative;
        top: -25px;
    }

    .card--highlight--content {
        position: relative;
        top: -25px;
        list-style-type: "📌";
        line-height: -45px;
    }

    .card--highlight--content li:nth-child(1) {
        list-style-type: "💡";
        padding: 4px 15px;
    }

    .card--highlight--content li:nth-child(2) {
        list-style-type: "📝";
        padding: 4px 15px;
    }

    .card--highlight--content li:nth-child(3) {
        list-style-type: "🎖";
        padding: 4px 15px;
    }

    .card--highlight--content li:nth-child(4) {
        list-style-type: "🏆";
        padding: 4px 15px;
    }

    .card--title {
        position: relative;
        top: -40px;
        left: 0px;
        text-align: center;
        margin: 25px auto;
        width: 100%;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        letter-spacing: 1px;
        line-height: 1.2;
    }

    .grid--content h2 {
        width: 100%;
        /* max-width: 505px; */
        /* margin: 0 auto; */
        padding: 0;
        /* margin: 0; */
        position: relative;
        left: 0px;
        top: -73px;
    }

    .card--major {
        position: relative;
        top: -74px;
        left: 0px;
        color: #ffd700;
        width: 250px;
    }

    .grid--content p {
        position: relative;
        top: -85px;
        left: 0px;
        width: 100%;
        max-width: 790px;
        max-height: 200px;
        margin-top: 30px;
        font-size: 1.1rem;
        line-height: 1.3;
        color: #ffffff;
        font-weight: 300;
        font-family: "freight-sans-pro", sans-serif;
        font-weight: 500;
        font-style: normal
    }

    .grid--container:nth-child(2) .button {
        position: relative;
        top: -15px;
    }

    .glow-on-hover {
        background-color: #ffffff0b;
        color: #ffd700;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
        top: -106px;
        left: -20px;
        scale: 0.8;
        margin: 20px auto;
    }

    /* Animated border */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }
}



@media (min-width: 440px) and (max-width: 479px) {
    .grid-wrapper {
        width: 100%;
        max-width: 540px;
        height: 100vh;
        max-height: 785px;
        box-shadow: 0 0 32px rgba(0, 0, 0, 0.5);
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: #8c0b43 #ffffff21;
        scrollbar-width: thin;
        border-radius: 18px;
        margin: 0 auto;
        /* Hide scrollbar for Firefox by default */
        scrollbar-width: none;
        position: relative;
        top: -20px;
    }

    .grid--container {
        display: grid;
        grid-template-columns: 1fr;
        /* Single column */
        grid-template-rows: repeat(2, 1fr);
        background: linear-gradient(to bottom, #8c0b4357 10%, #cf1c1c06 90%);
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        border-radius: 18px;
        padding: 20px;
        box-sizing: border-box;
        margin: 0 auto;
        justify-content: space-evenly;
        width: 100%;
        height: 100vh;
        flex-wrap: wrap;
        max-width: 690px;
        max-height: 350px;
        overflow-x: hidden;
        overflow-y: hidden;
        scale: 0.9;
        transform: translateY(20px);
        z-index: 1000;
        position: relative;
        top: -35px;
    }

    .grid--container:nth-child(2) {
        max-height: 370px;
    }

    .grid--container:hover {
        box-shadow: 0 4px 10px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: linear-gradient(to bottom, #000000 10%, #cf1c1c06 60%);
    }

    .talk {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        left: -300px;
        z-index: 100;
        width: 100%;
    }

    .talk h1 {
        position: relative;
        top: 4px;
        width: 100%;
        left: -264px;
        text-align: center;
        margin: 0 auto;
    }

    .talk p {
        position: relative;
        top: -14px;
        width: 100%;
        left: -264px;
        font-size: 14px;
    }


    .grid--content .card--title br {
        display: none;
        /* Hides the break, making text flow continuously */
    }

    .ccp-img {
        position: relative;
        top: 62px;
        grid-column: 1 / -1;
        grid-row: 1 / span 4;
        /* The image spans 4 rows */
        border-radius: 18px;
    }

    .ccp-img,
    .asu-img {
        display: none;
    }

    .grid--content {
        color: #000;
        grid-column: 1 / -1;
        grid-row: 1 / -1;
        /* Take up all rows */
        width: 100%;
        height: 100vh;
        flex-wrap: wrap;
        max-width: 590px;
        max-height: 400px;
        position: relative;
        left: -20px;
    }

    .grid--container:nth-child(1) .grid--content {
        background-color: transparent;
        /* Example of a style for the first .grid--content */
        color: white;
        padding: 20px;
        width: 100%;
        height: 100%;
        max-height: 230px;
        max-width: 430px;
        position: relative;
        top: 50px;
    }

    .grid--container:nth-child(2) .grid--content {
        background-color: transparent;
        /* Example of a style for the second .grid--content */
        color: white;
        padding: 20px;
        width: 100%;
        max-width: 430px;
        position: relative;
        top: 50px;
    }

    .grid--container.education-highlights {
        position: absolute;
        bottom: 56px;
        left: 5px;
        width: 100%;
        height: 310px;
        background-color: #8c0b43fa;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
        display: none;
    }

    .highlights-content {
        color: #fff;
    }

    .card--highlight--title {
        position: relative;
        top: -25px;
    }

    .card--highlight--content {
        position: relative;
        top: -25px;
        list-style-type: "📌";
        line-height: -45px;
    }

    .card--highlight--content li:nth-child(1) {
        list-style-type: "💡";
        padding: 4px 15px;
    }

    .card--highlight--content li:nth-child(2) {
        list-style-type: "📝";
        padding: 4px 15px;
    }

    .card--highlight--content li:nth-child(3) {
        list-style-type: "🎖";
        padding: 4px 15px;
    }

    .card--highlight--content li:nth-child(4) {
        list-style-type: "🏆";
        padding: 4px 15px;
    }

    .card--title {
        position: relative;
        top: -40px;
        left: 0px;
        text-align: center;
        margin: 25px auto;
        width: 100%;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        letter-spacing: 1px;
        line-height: 1.2;
    }

    .grid--content h2 {
        width: 100%;
        /* max-width: 505px; */
        /* margin: 0 auto; */
        padding: 0;
        /* margin: 0; */
        position: relative;
        left: 0px;
        top: -73px;
    }

    .card--major {
        position: relative;
        top: -74px;
        left: 0px;
        color: #ffd700;
        width: 250px;
    }

    .grid--content p {
        position: relative;
        top: -85px;
        left: 0px;
        width: 100%;
        max-width: 790px;
        max-height: 200px;
        margin-top: 30px;
        font-size: 1.1rem;
        line-height: 1.3;
        color: #ffffff;
        font-weight: 300;
        font-family: "freight-sans-pro", sans-serif;
        font-weight: 500;
        font-style: normal
    }

    .grid--container:nth-child(2) .button {
        position: relative;
        top: -15px;
    }

    .glow-on-hover {
        background-color: #ffffff0b;
        color: #ffd700;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
        top: -106px;
        left: -20px;
        scale: 0.8;
        margin: 20px auto;
    }




    /* Animated border */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }
}

/* iPhone SE viewport size Width 375px x Height 553px  */
@media (min-width: 320px) and (max-width: 375px) {
    .education {
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
        position: relative;
        top: 0px;
        gap: 20px;
    }
    /*  page title */
    .education h1 {
        position: relative;
        top: 20px;
        left: 22px;
        text-align: left;
        width: 100%;
        font-size: 1.5rem;
        font-weight: 900;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
    }
    /*  page sub-title */
    .education p {
        position: relative;
        top: -14px;
        width: 100%;
        left: 22px;
        font-size: 1.1rem;
        font-weight: 400;
        color: rgb(255 255 255 / 50%);

    }

    /*  set height and width of 2 boxes */
    .grid-wrapper {
        width: 100%;
        min-width: 320px;
        height: 90vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        padding: 20px;
        box-sizing: border-box;
        position: relative;
        top: -31px;
    }

    /* set shadow + height of content */
    .edu-box-container {
        width: 100%;
        height: 85%;
        box-shadow: 0 0 32px rgba(0, 0, 0, 0.5);
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: #8c0b43 #ffffff21;
        scrollbar-width: thin;
        border-radius: 18px;
        margin: 0 auto;
        /* Hide scrollbar for Firefox by default */
        scrollbar-width: none;
        position: relative;
        top: -120px;
    }




    /* Show scrollbar on hover/active/focus for Firefox */
    .grid-wrapper:hover,
    .grid-wrapper:active,
    .grid-wrapper:focus {
        scrollbar-width: thin;
        scrollbar-color: #8c0b43 #ffffff21;
    }

    /* Hide scrollbar for Webkit browsers by default */
    .grid-wrapper::-webkit-scrollbar {
        width: 8px;
        background: transparent;
    }

    /* Show scrollbar track on hover/active/focus */
    .grid-wrapper:hover::-webkit-scrollbar,
    .grid-wrapper:active::-webkit-scrollbar,
    .grid-wrapper:focus::-webkit-scrollbar {
        background: #ffffff21;
    }

    /* Hide scrollbar thumb by default */
    .grid-wrapper::-webkit-scrollbar-thumb {
        background: transparent;
        transition: background 0.2s;
    }

    /* Show scrollbar thumb on hover/active/focus */
    .grid-wrapper:hover::-webkit-scrollbar-thumb,
    .grid-wrapper:active::-webkit-scrollbar-thumb,
    .grid-wrapper:focus::-webkit-scrollbar-thumb {
        background: #8c0b43;
    }





/* content background-colors of the 2 boxes */
    .grid--container {
        display: grid;
        grid-template-columns: 1fr;
        /* Single column */
        grid-template-rows: repeat(2, 1fr);
        background: linear-gradient(to bottom, #8c0b4357 10%, #cf1c1c06 90%);
        box-shadow: 0 2px 5px #8c0b4357;
        border: 2px solid #8c0b4357;
        border-radius: 18px;
        padding: 20px;
        box-sizing: border-box;
        margin: 0 auto;
        justify-content: space-evenly;
        width: 100%;
        height: 100%;
        flex-wrap: wrap;
        min-width: 270px;
        min-height: 320px;
        overflow-x: hidden;
        overflow-y: hidden;
        transform: translateY(20px);
        z-index: 1000;
        position: relative;
        top: -20px;
    }

/* [animation] change background on hover */
    .grid--container:hover {
        box-shadow: 0 4px 10px #8c0b4357;
        border: 2px solid #8c0b4357;
        background: linear-gradient(to bottom, #000000 10%, #cf1c1c06 60%);
    }


/* CCP image */
    .ccp-img {
        position: relative;
        top: 62px;
        grid-column: 1 / -1;
        grid-row: 1 / span 4;
        /* The image spans 4 rows */
        border-radius: 18px;
    }

/* Hide image cards on mobile */
    .ccp-img,
    .asu-img {
        display: none;
    }



/* Everything in the text card */
    .grid--content {
        color: #000;
        grid-column: 1 / -1;
        grid-row: 1 / -1;
        /* Take up all rows */
        width: 100%;
        height: 100%;
        flex-wrap: wrap;
        min-width: 290px;
        min-height: 300px;
        position: relative;
        left: -20px;
        gap: 20px;
    }

/* ASU - Everything in the card (only) */
    .grid--container:nth-child(1) .grid--content {
        background-color: transparent;
        /* Example of a style for the first .grid--content */
        color: white;
        padding: 20px;
        width: 100%;
        height: 100%;
        max-height: 230px;
        max-width: 230px;
        position: relative;
        top: 50px;
    }

/* CCP - Everything in the card (only) */
    .grid--container:nth-child(2) .grid--content {
        background-color: transparent;
        /* Example of a style for the second .grid--content */
        color: white;
        padding: 20px;
        width: 100%;
        max-width: 230px;
        position: relative;
        top: 50px;
    }



/* ASU swipe symbol */
    .swipe-up-icon {
        position: relative;
        top: -80px;
        left: 230px;
        font-size: 1.25rem;
        color: #fff;
        pointer-events: none;
        user-select: none;
    }

/* CCP swipe symbol */
    .swipe-up-icon-2 {
        position: relative;
        top: 250px;
        left: 230px;
        font-size: 1.25rem;
        color: #fff;
        pointer-events: none;
        user-select: none;
    }


/* school title */
    .card--title {
        width: 100%;
        padding: 0;
        position: relative;
        top: -130px;
        left: -5px;
        font-size: 1.3rem;
        font-weight: 700;
    }

/* adjust width of school title */
    .asu-title {
        width: 60%;
    }

/* adjust width of school title */
    .ccp-title {
        width: 70%;
    } 


/* degree name */
    .card--major {
        position: relative;
        top: -138px;
        left: -5px;
        color: #ffd700;
        width: 250px;
        font-size: 1rem;
        font-weight: 700;
    }

/* description paragraph */
    .grid--content p {
        position: relative;
        top: -147px;
        left: -5px;
        width: 250px;
        height: 220px;
        font-size: 1rem;
        line-height: 1.5;
        font-family: 'Blinker', sans-serif;
        font-weight: 400;
        text-align: left;
        color: #fff;
        overflow-y: auto;
        white-space: normal;
        flex-wrap: wrap;
    }




/* button  */
    .glow-on-hover {
        background-color: #ffffff0b;
        color: #ffd700;
        padding: 8px 12px;
        border-radius: 15px;
        font-size: 1rem;
        font-weight: 400;
        text-align: center;
        border: 2px solid transparent;
        position: relative;
        z-index: 0;
        background-clip: padding-box;
        overflow: hidden;
        top: -175px;
        left: -20px;
        scale: 0.8;
    }

/* [Animated] button (hover effect) */
    .glow-on-hover:hover {
        border-image-source: linear-gradient(45deg, white, #ffd700, #0f33ff, #8c0b42, white);
        border-image-slice: 1;
        /* Make the gradient stretch across the border */
        animation: border-glow 3.5s linear infinite;
        color: white;
        border: 2px solid transparent;
        border-radius: 15px;
        cursor: not-allowed;
    }

/* second - button - (only) */
    .grid--container:nth-child(2) .button {
        position: relative;
        top: -15px;
    }
    

    

/* collapse asu card title name */
    .grid--content .card--title br {
        display: none;
        /* Hides the break, making text flow continuously */
    }

/* Education Highlights */
    .grid--container.education-highlights {
        position: absolute;
        bottom: 56px;
        left: 5px;
        width: 100%;
        height: 310px;
        background-color: #8c0b43fa;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        overflow: hidden;
        display: none;
    }
}


















.talk {
    position: relative;
    top: 74px;
    width: 60%;
    left: 322px;

}


#sub {
    position: relative;
    top: 147px;
    right: -286px;
    font-size: 1rem;
    width: 232px;
    color: rgb(255 255 255 / 50%);
}

#myImgs {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    height: 91px;
    width: 96px;
    z-index: 113;
    position: relative;
    top: 219px;
    left: 667px;
    opacity: 0;
}

@media (min-width: 1481px) and (max-width: 1580px) {
    #myImgs {
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
        height: 91px;
        width: 96px;
        z-index: 113;
        position: relative;
        top: 219px;
        left: 641px;
        opacity: 0;
    }
}

@media (min-width: 1381px) and (max-width: 1480px) {
    #myImgs {
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
        height: 91px;
        width: 96px;
        z-index: 113;
        position: relative;
        top: 213px;
        left: 556px;
        opacity: 0;
    }
}

@media (min-width: 1281px) and (max-width: 1380px) {
    #myImgs {
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
        height: 91px;
        width: 96px;
        z-index: 113;
        position: relative;
        top: 214px;
        left: 534px;
        opacity: 0;
    }
}

@media (min-width: 1181px) and (max-width: 1280px) {
    #myImgs {
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
        height: 88px;
        width: 90px;
        z-index: 113;
        position: relative;
        top: 201px;
        left: 482px;
        opacity: 0;
    }
}

@media (min-width: 1130px) and (max-width: 1180px) {
    #myImgs {
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
        height: 91px;
        width: 96px;
        z-index: 113;
        position: relative;
        top: 225px;
        left: 387px;
        opacity: 0;
    }
}

@media (min-width: 1030px) and (max-width: 1129px) {
    #myImgs {
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
        height: 91px;
        width: 96px;
        z-index: 113;
        position: relative;
        top: 219px;
        left: 357px;
        opacity: 0;
    }
}

@media (min-width: 930px) and (max-width: 1029px) {
    #myImgs {
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
        height: 91px;
        width: 96px;
        z-index: 113;
        position: relative;
        top: 224px;
        left: 350px;
        opacity: 0;
        scale: 0.8;
    }
}

@media (min-width: 830px) and (max-width: 929px) {
    #myImgs {
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
        height: 91px;
        width: 96px;
        z-index: 113;
        position: relative;
        top: 184px;
        left: 289px;
        opacity: 0;
        scale: 0.8;
    }
}

@media (min-width: 736px) and (max-width: 829px) {
    #myImgs {
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
        height: 91px;
        width: 96px;
        z-index: 113;
        position: relative;
        top: 189px;
        left: 250px;
        opacity: 0;
        scale: 0.6;
    }
}







@media (min-width: 640px) and (max-width: 735px) {
    #myImgs {
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
        height: 91px;
        width: 96px;
        z-index: 113;
        position: fixed;
        top: 298px;
        left: 460px;
        opacity: 0;
        scale: 1.5;
        padding: 1px 38px;
    }
}

@media (min-width: 540px) and (max-width: 639px) {
    #myImgs {
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
        height: 91px;
        width: 96px;
        z-index: 113;
        position: relative;
        top: 247px;
        left: 341px;
        opacity: 0;
        scale: 1.2;
        padding: 0px 58px;
    }
}

@media (min-width: 440px) and (max-width: 539px) {
    #myImgs {
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
        height: 91px;
        width: 96px;
        z-index: 113;
        position: relative;
        top: 209px;
        left: 225px;
        opacity: 0;
        scale: 0.8;
        padding: 0px 90px;
    }
}

@media (min-width: 340px) and (max-width: 439px) {
    #myImgs {
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
        height: 91px;
        width: 96px;
        z-index: 113;
        position: fixed;
        top: 249px;
        left: 152px;
        opacity: 0;
        scale: 0.8;
        padding: 0 90px;
    }
}

@media (min-width: 320px) and (max-width: 339px) {
    #myImgs {
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
        height: 91px;
        width: 96px;
        z-index: 113;
        position: fixed;
        top: 243px;
        left: 105px;
        opacity: 0;
        scale: 0.6;
        padding: 0 90px;
    }
}

#myImgs2 {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    height: 41px;
    width: 85px;
    z-index: 113;
    position: relative;
    top: 405px;
    right: -1251px;
    opacity: 0;
}

/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 40%;
    max-width: 450px;
    flex: 0 0 auto;
}

/* Add Animation - Zoom in the Modal */
.modal-content {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

#t6 {
    position: relative;
    top: -689px;
    right: -1226px;
    text-decoration: underline;
    color: #ffd700;
    font-size: 1.2rem;
}

#b6 {
    position: relative;
    top: -690px;
    right: -1164px;
    width: 344px;
}

p#b6two {
    position: relative;
    top: -680px;
    right: -1164px;
    width: 344px;
}

.amazon {
    color: rgb(255, 255, 255);
    text-decoration: none;
    position: relative;
    top: -660px;
    right: -1259px;
    width: 150px;
    font-size: 1rem;
    background-color: #0d0c0c;
    border: 2px solid #ffd700;
    font-size: large;
}

.amazon:hover {
    color: #ffd700;

    text-decoration: none;
    font-size: x-large;
    width: 250px;
    border: 2px solid white;
}

.amazon a:visited {
    color: rgb(255, 255, 255);
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* The Close Button */
.clos {
    position: absolute;
    top: 55px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.clos:hover,
.clos:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

@media (min-width: 1901px) {





    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.9);
    }

    .modal-content {
        display: block;
        width: 70%;
        max-width: 600px;
        background-image: url(assets/img/ccp.jpg);
        position: relative;
        left: -117px;
    }

    .clos {
        position: absolute;
        top: 55px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
    }

    .writing {
        margin: auto;
        width: 20%;
        max-width: 360px;
    }

    #t6 {
        position: relative;
        top: -644px;
        right: -492px;
        text-decoration: underline;
        color: #ffd700;
        font-size: 1.2rem;
    }

    #b6 {
        position: relative;
        top: -652px;
        right: -460px;
        width: 340px;
        font-size: 1rem;
    }

    p#b6two {
        position: relative;
        top: -649px;
        right: -460px;
        width: 340px;
        font-size: 1rem;
    }

    .amazon {
        color: rgb(255, 255, 255);
        text-decoration: none;
        position: relative;
        top: -645px;
        left: 1257px;
        width: 150px;
        font-size: 1rem;
        background-color: #0d0c0c;
        border: 2px solid #ffd700;
        font-size: large;
        padding: 5px 10px;
    }

    .amazon:hover {
        color: #ffd700;
        text-decoration: none;
        font-size: x-large;
        width: 250px;
        padding: 5px 10px;
        border: 2px solid rgba(255, 255, 255, 0.06);
    }

    .amazon a:visited {
        color: rgb(255, 255, 255);
    }
}

@media (min-width: 1701px) and (max-width: 1900px) {


    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.9);
    }

    .modal-content {
        display: block;
        width: 70%;
        max-width: 600px;
        background-image: url(assets/img/ccp.jpg);
        position: relative;
        left: -117px;

    }

    .clos {
        position: absolute;
        top: 55px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
    }

    .writing {
        margin: auto;
        width: 20%;
        max-width: 360px;
    }

    #t6 {
        position: relative;
        top: -644px;
        right: -492px;
        text-decoration: underline;
        color: #ffd700;
        font-size: 1.2rem;
    }

    #b6 {
        position: relative;
        top: -652px;
        right: -460px;
        width: 340px;
        font-size: 1rem;
    }

    p#b6two {
        position: relative;
        top: -649px;
        right: -460px;
        width: 340px;
        font-size: 1rem;
    }

    .amazon {
        color: rgb(255, 255, 255);
        text-decoration: none;
        position: relative;
        top: -664px;
        left: 1391px;
        width: 150px;
        font-size: 1rem;
        background-color: #0d0c0c;
        border: 2px solid #ffd700;
        font-size: large;
        padding: 5px 10px;
    }

    .amazon:hover {
        color: #ffd700;
        text-decoration: none;
        font-size: x-large;
        width: 250px;
        padding: 5px 10px;
        border: 2px solid rgba(255, 255, 255, 0.06);
    }

    .amazon a:visited {
        color: rgb(255, 255, 255);
    }
}

@media (min-width: 1532px) and (max-width: 1700px) {



    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.9);
    }

    .modal-content {
        display: block;
        width: 70%;
        max-width: 600px;
        background-image: url(assets/img/ccp.jpg);
        position: relative;
        left: -117px;
    }

    .clos {
        position: absolute;
        top: 55px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
    }

    .writing {
        margin: auto;
        width: 20%;
        max-width: 360px;
    }

    #t6 {
        position: relative;
        top: -644px;
        right: -492px;
        text-decoration: underline;
        color: #ffd700;
        font-size: 1.2rem;
    }

    #b6 {
        position: relative;
        top: -652px;
        right: -460px;
        width: 340px;
        font-size: 1rem;
    }

    p#b6two {
        position: relative;
        top: -649px;
        right: -460px;
        width: 340px;
        font-size: 1rem;
    }

    .amazon {
        color: rgb(255, 255, 255);
        text-decoration: none;
        position: relative;
        top: -674px;
        left: 1304px;
        width: 150px;
        font-size: 1rem;
        background-color: #0d0c0c;
        border: 2px solid #ffd700;
        font-size: large;
        padding: 5px 10px;
    }

    .amazon:hover {
        color: #ffd700;
        text-decoration: none;
        font-size: x-large;
        width: 250px;
        padding: 5px 10px;
        border: 2px solid rgba(255, 255, 255, 0.06);
    }

    .amazon a:visited {
        color: rgb(255, 255, 255);
    }
}

@media (min-width: 1401px) and (max-width: 1531px) {



    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.9);
    }

    .modal-content {
        display: block;
        width: 65%;
        max-width: 600px;
        background-image: url(assets/img/ccp.jpg);
        position: relative;
        left: -117px;
    }

    .clos {
        position: absolute;
        top: 55px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
    }

    .writing {
        margin: auto;
        width: 20%;
        max-width: 360px;
    }

    #t6 {
        position: relative;
        top: -644px;
        right: -492px;
        text-decoration: underline;
        color: #ffd700;
        font-size: 1.2rem;
    }

    #b6 {
        position: relative;
        top: -652px;
        right: -460px;
        width: 340px;
        font-size: 1rem;
    }

    p#b6two {
        position: relative;
        top: -649px;
        right: -460px;
        width: 340px;
        font-size: 1rem;
    }

    .amazon {
        color: rgb(255, 255, 255);
        text-decoration: none;
        position: relative;
        top: -670px;
        right: -1245px;
        width: 150px;
        font-size: 1rem;
        background-color: #0d0c0c;
        border: 2px solid #ffd700;
        font-size: large;
        padding: 5px 10px;
    }

    .amazon:hover {
        color: #ffd700;
        text-decoration: none;
        font-size: x-large;
        width: 250px;
        border: 2px solid rgba(255, 255, 255, 0.06);
        padding: 5px 10px;
    }

    .amazon a:visited {
        color: rgb(255, 255, 255);
    }
}

@media (min-width: 1269px) and (max-width: 1400px) {



    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.9);
    }

    .modal-content {
        display: block;
        width: 70%;
        max-width: 600px;
        background-image: url(assets/img/ccp.jpg);
        position: relative;
        left: -117px;
    }

    .clos {
        position: absolute;
        top: 55px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
    }

    .writing {
        margin: auto;
        width: 20%;
        max-width: 360px;
    }

    #t6 {
        position: relative;
        top: -644px;
        right: -404px;
        text-decoration: underline;
        color: #ffd700;
        font-size: 1.2rem;
    }

    #b6 {
        position: relative;
        top: -652px;
        right: -397px;
        width: 340px;
        font-size: 1rem;
    }

    p#b6two {
        position: relative;
        top: -649px;
        right: -397px;
        width: 340px;
        font-size: 1rem;
    }

    .amazon {
        color: rgb(255, 255, 255);
        text-decoration: none;
        position: relative;
        top: -650px;
        top: -674px;
        right: -1130px;
        font-size: 1rem;
        background-color: #0d0c0c;
        border: 2px solid #ffd700;
        font-size: large;
        padding: 5px 10px;
    }

    .amazon:hover {
        color: #ffd700;
        text-decoration: none;
        font-size: x-large;
        width: 250px;
        border: 2px solid rgba(255, 255, 255, 0.06);
        padding: 5px 10px;
    }

    .amazon a:visited {
        color: rgb(255, 255, 255);
    }
}

@media (min-width: 1181px) and (max-width: 1268px) {



    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.9);
    }

    .modal-content {
        display: block;
        width: 60%;
        max-width: 500px;
        background-image: url(assets/img/ccp.jpg);
        position: relative;
        top: 61px;
        left: -165px;
    }

    .clos {
        position: absolute;
        top: 55px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
    }

    .writing {
        margin: auto;
        width: 20%;
        max-width: 360px;
    }

    #t6 {
        position: relative;
        top: -476px;
        right: -305px;
        text-decoration: underline;
        color: #ffd700;
        font-size: 1.2rem;
    }

    #b6 {
        position: relative;
        top: -500px;
        right: -248px;
        width: 340px;
        font-size: 1rem;
        scale: 0.9;
    }

    p#b6two {
        position: relative;
        top: -532px;
        right: -244px;
        width: 340px;
        font-size: 1rem;
        scale: 0.9;
    }

    .amazon {
        color: rgb(255, 255, 255);
        text-decoration: none;
        position: relative;
        top: -567px;
        right: -944px;
        width: 150px;
        font-size: 1rem;
        background-color: #0d0c0c;
        border: 2px solid #ffd700;
        font-size: large;
        padding: 5px 10px;
    }

    .amazon:hover {
        color: #ffd700;
        text-decoration: none;
        font-size: x-large;
        width: 250px;
        border: 2px solid rgba(255, 255, 255, 0.06);
        padding: 5px 10px;
    }

    .amazon a:visited {
        color: rgb(255, 255, 255);
    }

}

@media (min-width: 1024px) and (max-width: 1180px) {


    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.9);
    }

    .modal-content {
        display: block;
        width: 60%;
        max-width: 500px;
        background-image: url(assets/img/ccp.jpg);
        position: relative;
        top: 61px;
        left: -165px;
    }

    .clos {
        position: absolute;
        top: 55px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
    }

    .writing {
        margin: auto;
        width: 20%;
        max-width: 360px;
    }

    #t6 {
        position: relative;
        top: -503px;
        right: -305px;
        text-decoration: underline;
        color: #ffd700;
        font-size: 1.2rem;
    }

    #b6 {
        position: relative;
        top: -519px;
        right: -248px;
        width: 340px;
        font-size: 1rem;
        scale: 0.9;
    }

    p#b6two {
        position: relative;
        top: -532px;
        right: -244px;
        width: 340px;
        font-size: 1rem;
        scale: 0.9;
    }

    .amazon {
        color: rgb(255, 255, 255);
        text-decoration: none;
        position: relative;
        top: -570px;
        right: -887px;
        width: 150px;
        font-size: 1rem;
        background-color: #0d0c0c;
        border: 2px solid #ffd700;
        font-size: large;
        padding: 5px 10px;
    }

    .amazon:hover {
        color: #ffd700;
        text-decoration: none;
        font-size: x-large;
        width: 250px;
        padding: 5px 10px;
        border: 2px solid rgba(255, 255, 255, 0.06);
    }

    .amazon a:visited {
        color: rgb(255, 255, 255);
    }
}

@media (min-width: 865px) and (max-width: 1023px) {



    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.9);
    }

    .modal-content {
        display: block;
        width: 55%;
        max-width: 500px;
        background-image: url(assets/img/ccp.jpg);
        position: relative;
        top: 61px;
        left: -165px;
    }

    .clos {
        position: absolute;
        top: 55px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
    }

    .writing {
        margin: auto;
        width: 20%;
        max-width: 360px;
    }

    #t6 {
        position: relative;
        top: -450px;
        right: -221px;
        text-decoration: underline;
        color: #ffd700;
        font-size: 1.2rem;
    }

    #b6 {
        position: relative;
        top: -482px;
        right: -183px;
        width: 340px;
        font-size: 1rem;
        scale: 0.8;
    }

    p#b6two {
        position: relative;
        top: -527px;
        right: -182px;
        width: 340px;
        font-size: 1rem;
        scale: 0.8;
    }

    .amazon {
        color: rgb(255, 255, 255);
        text-decoration: none;
        position: relative;
        top: -571px;
        right: -742px;
        width: 150px;
        font-size: 1rem;
        background-color: #0d0c0c;
        border: 2px solid #ffd700;
        font-size: large;
        padding: 5px 10px;
    }

    .amazon:hover {
        color: #ffd700;
        text-decoration: none;
        font-size: x-large;
        width: 250px;
        padding: 5px 10px;
        border: 2px solid rgba(255, 255, 255, 0.06);
    }

    .amazon a:visited {
        color: rgb(255, 255, 255);
    }
}

@media (min-width: 709px) and (max-width: 864px) {


    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.9);
    }

    .modal-content {
        margin: auto;
        display: block;
        width: 50%;
        max-width: 550px;
        position: relative;
        top: -40px;
    }

    .clos {
        position: absolute;
        top: 55px;
        right: 112px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
    }

    #t6 {
        position: relative;
        top: -38px;
        right: -274px;
        text-decoration: none;
        color: #ffd700;
        font-size: 1.3rem;
    }

    #b6 {
        position: relative;
        top: -44px;
        right: -129px;
        width: 435px;
        scale: 0.9;
        font-size: 1rem;
        border: 2px solid #ffd7002b;
        padding: 20px;
    }

    p#b6two {
        position: relative;
        top: -59px;
        right: -131px;
        width: 435px;
        scale: 0.9;
        font-size: 1rem;
        border: 2px solid #ffd7002b;
        padding: 20px;
    }

    .amazon {
        color: rgb(255, 255, 255);
        text-decoration: none;
        position: relative;
        top: -578px;
        right: -318px;
        width: 150px;
        font-size: 1rem;
        background-color: #0d0c0c;
        border: 2px solid #ffd700;
        font-size: large;
        padding: 5px 10px;
    }

    .amazon:hover {
        color: #ffd700;
        text-decoration: none;
        font-size: x-large;
        width: 250px;
        padding: 5px 10px;
        border: 2px solid rgba(255, 255, 255, 0.06);
        position: relative;
        top: -317px;
        right: -318px;
    }

    .amazon a:visited {
        color: rgb(255, 255, 255);
    }
}

@media (min-width: 609px) and (max-width: 708px) {


    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.9);
    }

    .modal-content {
        margin: auto;
        display: block;
        width: 50%;
        max-width: 550px;
        position: relative;
        top: -40px;
    }

    .clos {
        position: absolute;
        top: 55px;
        right: 122px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
    }

    #t6 {
        position: relative;
        top: -38px;
        right: -197px;
        text-decoration: none;
        color: #ffd700;
        font-size: 1.3rem;
    }

    #b6 {
        position: relative;
        top: -44px;
        right: -71px;
        width: 435px;
        scale: 0.9;
        font-size: 1rem;
        border: 2px solid #ffd7002b;
        padding: 20px;
    }

    p#b6two {
        position: relative;
        top: -59px;
        right: -68px;
        width: 435px;
        scale: 0.9;
        font-size: 1rem;
        border: 2px solid #ffd7002b;
        padding: 20px;
    }

    .amazon {
        color: rgb(255, 255, 255);
        text-decoration: none;
        position: relative;
        top: -578px;
        right: -248px;
        width: 150px;
        font-size: 1rem;
        background-color: #0d0c0c;
        border: 2px solid #ffd700;
        font-size: large;
        padding: 5px 10px;
    }

    .amazon:hover {
        color: #ffd700;
        text-decoration: none;
        font-size: x-large;
        width: 250px;
        padding: 5px 10px;
        border: 2px solid rgba(255, 255, 255, 0.06);
        position: relative;
        top: -317px;
        right: -248px;
    }

    .amazon a:visited {
        padding: 5px 10px;
        border: 2px solid rgba(255, 255, 255, 0.06);
    }
}

.ccp {
    border-radius: 18px;
    float: left;
    max-height: 200px;
    height: 100%;
    width: 42%;
    background-color: #85858596;

}

.edu {
    flex: 1;
    /* Allows boxes to grow and take up equal space */
    margin: 10px;
    padding: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 5.5);
    /* Optional: adds a shadow to each experience box */
    overflow: hidden;
}

.edu-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Ensures the image covers the div without distortion */
    border-radius: 18px;
    /* Matches the border radius of the container */
}

.education-container {
    position: relative;
    left: -10px;
    height: 100%;
    width: 100%;
    bottom: 5px;
}

.asu {
    background-color: #85858596;
    float: left;
    max-height: 200px;
    width: 42%;
    border-radius: 18px;
}

.ccp2 {
    float: left;
    max-height: 100%;
    height: 320px;
    width: 42%;
    background-color: #282828;
    opacity: 0.8;
    border-radius: 18px;
}

.asu2 {
    background-color: #8c0b42;
    opacity: 0.8;
    float: left;
    max-height: 100%;
    height: 320px;
    width: 42%;
    border-radius: 18px;

}

b {
    display: block;
}

.talk {
    position: relative;
    top: 68px;
}

@media (min-width: 1269px) {
    .education-container {
        position: relative;
        left: 125px;
        height: 100%;
        bottom: 5px;
        scale: 0.9;
        display: none;

    }

    .ccp {
        border-radius: 18px;
        float: left;
        height: 100%;
        max-height: 500px;
        width: 45%;
        background-color: #85858596;

    }

    .asu {
        background-color: #85858596;
        float: left;
        height: 100%;
        max-height: 500px;
        width: 45%;
        border-radius: 18px;
    }

    .ccp2 {
        float: left;
        max-height: 100%;
        height: 270px;
        width: 45%;
        background-color: #282828;
        opacity: 0.8;
        border-radius: 18px;
    }

    .asu2 {
        background-color: #8c0b42;
        opacity: 0.8;
        float: left;
        max-height: 100%;
        height: 270px;
        width: 45%;
        border-radius: 18px;
    }

    .edu.ccp2 h3 {
        margin: 0 10px;
        font-size: 1.3rem;
        width: 300px;
    }

    .edu.asu2 h3 {
        margin: 0 10px;
        font-size: 1.3rem;
        width: 255px;
    }

    .edu p {
        max-height: 364px;
        overflow-y: auto;
        margin: 10px 10px;
        font-size: 1.2rem;
    }

    b {
        display: none;

    }

    em {
        position: relative;
        top: -2px;
    }

    i {
        display: none;
    }

}

@media (min-width: 1181px) and (max-width: 1268px) {
    .education-container {
        position: relative;
        left: 125px;
        height: 100%;
        bottom: 5px;
        scale: 0.9;
        display: none;
    }

    .ccp {
        border-radius: 18px;
        float: left;
        height: 100%;
        max-height: 500px;
        width: 45%;
        background-color: #85858596;

    }

    .asu {
        background-color: #85858596;
        float: left;
        height: 100%;
        max-height: 500px;
        width: 45%;
        border-radius: 18px;
    }

    .ccp2 {
        float: left;
        max-height: 100%;
        height: 320px;
        width: 45%;
        background-color: #282828;
        opacity: 0.8;
        border-radius: 18px;
    }

    .asu2 {
        background-color: #8c0b42;
        opacity: 0.8;
        float: left;
        max-height: 100%;
        height: 320px;
        width: 45%;
        border-radius: 18px;
    }

    .edu.ccp2 h3 {
        margin: 0 10px;
        font-size: 1.3rem;
        width: 300px;
    }

    .edu.asu2 h3 {
        margin: 0 10px;
        font-size: 1.3rem;
        width: 255px;
    }

    .edu p {
        max-height: 364px;
        overflow-y: auto;
        margin: 10px 10px;
        font-size: 1.2rem;
    }

    b {
        display: none;

    }

    em {
        position: relative;
        top: -2px;
    }

    i {
        display: none;
    }
}

@media (min-width: 1040px) and (max-width: 1180px) {
    .education-container {
        position: relative;
        left: 25px;
        height: 100%;
        width: 100%;
        bottom: 5px;
        scale: 0.9;
        display: none;
    }

    .ccp {
        border-radius: 18px;
        float: left;
        height: 100%;
        max-height: 500px;

        width: 45%;
        background-color: #85858596;
    }

    .asu {
        background-color: #85858596;
        float: left;
        height: 100%;
        max-height: 500px;

        width: 45%;
        border-radius: 18px;
    }

    .ccp2 {
        float: left;
        max-height: 100%;
        height: 320px;
        width: 45%;
        background-color: #282828;
        opacity: 0.8;
        border-radius: 18px;
    }

    .asu2 {
        background-color: #8c0b42;
        opacity: 0.8;
        float: left;
        max-height: 100%;
        height: 320px;
        width: 45%;
        border-radius: 18px;
    }

    .edu.ccp2 h3 {
        margin: 0 10px;
        font-size: 1.3rem;
        width: 381px;
    }

    .edu.asu2 h3 {
        margin: 0 10px;
        font-size: 1.3rem;
        width: 273px;
    }

    .edu p {
        max-height: 364px;
        overflow-y: auto;
        margin: 10px 10px;
        font-size: 1.2rem;
    }

    b {
        display: none;

    }

    em {
        position: relative;
        top: -2px;
    }

    i {
        display: none;
    }
}

@media (min-width: 965px) and (max-width:1039px) {

    .education-container {
        position: relative;
        left: 25px;
        height: 100%;
        width: 100%;
        bottom: 5px;
        scale: 0.9;
        display: none;
    }

    .ccp {
        border-radius: 18px;
        float: left;
        height: 100%;
        max-height: 500px;
        width: 45%;
        background-color: #85858596;
    }

    .asu {
        background-color: #85858596;
        float: left;
        height: 100%;
        max-height: 500px;
        width: 45%;

        border-radius: 18px;
    }

    .ccp2 {
        float: left;
        max-height: 100%;
        height: 320px;
        width: 45%;
        background-color: #282828;
        opacity: 0.8;
        border-radius: 18px;
    }

    .asu2 {
        float: left;
        max-height: 100%;
        height: 320px;
        width: 45%;
        background-color: #8c0b42;
        opacity: 0.8;
        border-radius: 18px;
    }

    .edu.ccp2 h3 {
        margin: 0 10px;
        font-size: 1.2rem;
        width: 381px;
    }

    .edu.asu2 h3 {
        margin: 0 10px;
        font-size: 1.2rem;
        width: 273px;
    }

    .edu p {
        max-height: 364px;
        overflow-y: auto;
        margin: 10px 10px;
        font-size: 1.1rem;
    }

    b {
        display: none;

    }

    em {
        position: relative;
        top: -2px;
    }


    i {
        display: none;
    }

}

@media (min-width: 832px) and (max-width:964px) {
    .education-container {
        position: relative;
        left: 40px;
        height: 100%;
        width: 100%;
        bottom: 5px;
        scale: 0.9;
        display: none;
    }

    .ccp {
        border-radius: 18px;
        float: left;
        height: 100%;
        max-height: 500px;
        width: 45%;
        background-color: #85858596;
        opacity: 0.8;
    }

    .asu {
        background-color: #85858596;
        opacity: 0.8;
        float: left;
        height: 100%;
        max-height: 500px;

        width: 45%;
        border-radius: 18px;
    }

    .ccp2 {
        float: left;
        max-height: 100%;
        height: 340px;
        width: 45%;
        background-color: #282828;
        opacity: 0.8;
        border-radius: 18px;
    }

    .asu2 {
        background-color: #8c0b42;
        opacity: 0.8;
        float: left;
        max-height: 100%;
        height: 340px;
        width: 45%;
        border-radius: 18px;
    }

    .edu.ccp2 h3 {
        margin: 0 10px;
        font-size: 1.2rem;
        width: 358px;
    }

    .edu.asu2 h3 {
        margin: 0 10px;
        font-size: 1.2rem;
        width: 248px;
    }

    .edu p {
        max-height: 364px;
        overflow-y: auto;
        margin: 10px 10px;
        font-size: 1.1rem;
    }

    b {
        display: none;

    }

    em {
        position: relative;
        top: -2px;
    }


    i {
        display: none;
    }

}

@media (min-width: 736px) and (max-width:831px) {
    .education-container {
        position: relative;
        left: 40px;
        height: 100%;
        width: 100%;
        bottom: 5px;
        scale: 0.9;
        display: none;
    }

    .ccp {
        border-radius: 18px;
        float: left;
        height: 100%;
        max-height: 500px;
        width: 45%;
        background-color: #85858596;
        opacity: 0.8;
    }

    .asu {
        background-color: #85858596;
        opacity: 0.8;
        float: left;
        height: 100%;
        max-height: 500px;
        width: 45%;

        border-radius: 18px;
    }

    .ccp2 {
        float: left;
        max-height: 100%;
        height: 400px;
        width: 45%;
        background-color: #282828;
        opacity: 0.8;
        border-radius: 18px;
    }

    .asu2 {
        background-color: #8c0b42;
        opacity: 0.8;
        float: left;
        max-height: 100%;
        height: 400px;
        width: 45%;
        border-radius: 18px;
    }

    .edu.ccp2 h3 {
        margin: 0 10px;
        font-size: 1.2rem;
        width: 329px;
    }

    .edu.asu2 h3 {
        margin: 0 10px;
        font-size: 1.2rem;
        width: 239px;
    }

    .edu p {
        max-height: 364px;
        overflow-y: auto;
        margin: 10px 10px;
        font-size: 1.1rem;
    }

    b {
        display: none;

    }

    em {
        position: relative;
        top: -2px;
    }


    i {
        display: none;
    }
}

@media (min-width: 609px) and (max-width:735px) {
    .education-container {
        position: relative;
        left: 40px;
        height: 100%;
        width: 100%;
        bottom: 5px;
        scale: 0.9;
        display: none;
    }

    .ccp {
        border-radius: 18px;
        float: left;
        height: 100%;
        max-height: 500px;
        width: 45%;
        background-color: #85858596;
        opacity: 0.8;

    }

    .asu {
        background-color: #85858596;
        opacity: 0.8;
        float: left;
        height: 100%;
        max-height: 500px;
        width: 45%;
        border-radius: 18px;

    }

    .ccp2 {
        float: left;
        max-height: 415px;
        max-height: 100%;
        height: 500px;
        width: 45%;
        background-color: #282828;
        opacity: 0.8;
        border-radius: 18px;
    }

    .asu2 {
        background-color: #8c0b42;
        opacity: 0.8;
        float: left;
        max-height: 100%;
        height: 500px;
        width: 45%;
        border-radius: 18px;
    }

    .edu.ccp2 h3 {
        margin: 0 10px;
        font-size: 1.2rem;
        width: 216px;
    }

    .edu.asu2 h3 {
        margin: 0 10px;
        font-size: 1.2rem;
        width: 163px;
    }

    .edu p {
        max-height: 364px;
        overflow-y: auto;
        margin: 10px 10px;
        font-size: 1.1rem;
    }

    b {
        display: none;

    }

    em {
        position: relative;
        top: -2px;
    }


    i {
        display: none;
    }
}

@media (min-width:582px) and (max-width:608px) {
    .education-container {
        position: relative;
        left: 10px;
        height: 100%;
        width: 100%;
        bottom: 5px;
        scale: 0.9;
        display: none;
    }

    .ccp {
        border-radius: 18px;
        float: left;
        max-height: 760px;
        height: 100%;
        width: 42%;
        background-color: #85858596;
        opacity: 0.8;
        margin: 0 20px;
        display: none;
    }

    .asu {
        background-color: #85858596;
        opacity: 0.8;
        float: left;
        max-height: 560px;
        height: 100%;
        width: 42%;
        border-radius: 18px;
        margin: 0 20px;
        position: relative;
        top: 74px;
        display: none;
    }

    .ccp2 {
        float: left;
        max-height: 640px;
        height: 100%;
        width: 44%;
        background-color: #282828;
        opacity: 0.8;
        border-radius: 18px;
    }

    .asu2 {
        background-color: #8c0b42;
        opacity: 0.8;
        float: left;
        max-height: 640px;
        height: 100%;
        width: 44%;
        border-radius: 18px;
    }

    .edu.ccp2 h3 {
        margin: 0 10px;
        font-size: 1.2rem;
        width: 216px;
    }

    .edu.asu2 h3 {
        margin: 0 10px;
        font-size: 1.2rem;
        width: 163px;
    }

    .edu p {
        max-height: 364px;
        overflow-y: auto;
        margin: 10px 10px;
        font-size: 1rem;
    }

    b {

        display: none;
    }

    em {


        margin-bottom: 43px;
    }

    i {
        opacity: 0;

    }

}

@media (min-width:555px) and (max-width:581px) {
    .education-container {
        position: relative;
        left: 10px;
        height: 100%;
        width: 100%;
        bottom: 5px;
        scale: 0.9;
        display: none;
    }

    .ccp {
        border-radius: 18px;
        float: left;
        max-height: 760px;
        height: 100%;
        width: 42%;
        background-color: #85858596;
        opacity: 0.8;
        margin: 0 20px;
        display: none;
    }

    .asu {
        background-color: #85858596;
        opacity: 0.8;
        float: left;
        max-height: 560px;
        height: 100%;
        width: 42%;
        border-radius: 18px;
        margin: 0 20px;
        position: relative;
        top: 74px;
        display: none;
    }

    .ccp2 {
        float: left;
        max-height: 640px;
        height: 100%;
        width: 44%;
        background-color: #282828;
        opacity: 0.8;
        border-radius: 18px;
    }

    .asu2 {
        background-color: #8c0b42;
        opacity: 0.8;
        float: left;
        max-height: 640px;
        height: 100%;
        width: 44%;
        border-radius: 18px;
    }

    .edu.ccp2 h3 {
        margin: 0 10px;
        font-size: 1.2rem;
        width: 216px;
    }

    .edu.asu2 h3 {
        margin: 0 10px;
        font-size: 1.2rem;
        width: 163px;
    }

    .edu p {
        max-height: 364px;
        overflow-y: auto;
        margin: 10px 10px;
        font-size: 1rem;
    }

    b {

        display: none;
    }

    em {


        margin-bottom: 43px;
    }

    i {
        display: none;

    }

}

@media (min-width:535px) and (max-width:554px) {
    .education-container {
        position: relative;
        left: 10px;
        height: 100%;
        width: 100%;
        bottom: 5px;
        scale: 0.9;
        display: none;
    }

    .ccp {
        border-radius: 18px;
        float: left;
        max-height: 760px;
        height: 100%;
        width: 42%;
        background-color: #85858596;
        opacity: 0.8;
        margin: 0 20px;
        display: none;
    }

    .asu {
        background-color: #85858596;
        opacity: 0.8;
        float: left;
        max-height: 560px;
        height: 100%;
        width: 42%;
        border-radius: 18px;
        margin: 0 20px;
        position: relative;
        top: 74px;
        display: none;
    }

    .ccp2 {
        float: left;
        max-height: 640px;
        height: 100%;
        width: 44%;
        background-color: #282828;
        opacity: 0.8;
        border-radius: 18px;
    }

    .asu2 {
        background-color: #8c0b42;
        opacity: 0.8;
        float: left;
        max-height: 640px;
        height: 100%;
        width: 44%;
        border-radius: 18px;
    }

    .edu.ccp2 h3 {
        margin: 0 10px;
        font-size: 1.2rem;
        width: 216px;
    }

    .edu.asu2 h3 {
        margin: 0 10px;
        font-size: 1.2rem;
        width: 163px;
    }

    .edu p {
        max-height: 364px;
        overflow-y: auto;
        margin: 10px 10px;
        font-size: 1rem;
    }

    b {

        display: none;
    }

    em {


        margin-bottom: 43px;
    }

    i {
        opacity: 0;

    }

}

@media (min-width:503px) and (max-width:534px) {
    .education-container {
        position: relative;
        left: 10px;
        height: 100%;
        width: 100%;
        bottom: 5px;
        scale: 0.9;
        display: none;
    }

    .ccp {
        border-radius: 18px;
        float: left;
        max-height: 760px;
        height: 100%;
        width: 42%;
        background-color: #85858596;
        opacity: 0.8;
        margin: 0 20px;
        display: none;
    }

    .asu {
        background-color: #85858596;
        opacity: 0.8;
        float: left;
        max-height: 560px;
        height: 100%;
        width: 42%;
        border-radius: 18px;
        margin: 0 20px;
        position: relative;
        top: 74px;
        display: none;
    }

    .ccp2 {
        float: left;
        max-height: 640px;
        height: 100%;
        width: 44%;
        background-color: #282828;
        opacity: 0.8;
        border-radius: 18px;
    }

    .asu2 {
        background-color: #8c0b42;
        opacity: 0.8;
        float: left;
        max-height: 640px;
        height: 100%;
        width: 44%;
        border-radius: 18px;
    }

    .edu.ccp2 h3 {
        margin: 0 10px;
        font-size: 1.2rem;
        width: 216px;
    }

    .edu.asu2 h3 {
        margin: 0 10px;
        font-size: 1.2rem;
        width: 163px;
    }

    .edu p {
        max-height: 364px;
        overflow-y: auto;
        margin: 10px 10px;
        font-size: 1rem;
    }

    b {

        display: none;
    }

    em {


        margin-bottom: 43px;
    }

    i {
        opacity: 0;

    }

}

@media (min-width:435px) and (max-width:502px) {
    .education-container {
        display: flex;
        width: 168%;
        gap: 16px;
        position: relative;
        top: -56px;
        left: -122px;
        flex-wrap: nowrap;
        align-items: center;
        align-content: center;
        flex-direction: column;
        justify-content: space-evenly;
        z-index: 1000;
        display: none;
    }

    .ccp {
        border-radius: 18px;
        float: left;
        max-height: 760px;
        height: 100%;
        width: 50%;
        background-color: #85858596;
        opacity: 0.8;
        margin: 0 auto;
        display: block;
        position: relative;
        left: 0;
    }

    .asu {
        border-radius: 18px;
        float: left;
        max-height: 760px;
        height: 100%;
        width: 50%;
        background-color: #85858596;
        opacity: 0.8;
        margin: 0 auto;
        display: block;
        position: relative;
        left: 0;
    }

    .edu-descriptions {
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        scrollbar-color: #007bff6a #ffffff21;
        scrollbar-width: thin;
        position: relative;
        left: -4px;
        height: 300px;
        width: 362px;
    }

    .ccp2 {
        float: left;
        max-height: 640px;
        height: 100%;
        width: 94%;
        background-color: #282828;
        opacity: 0.8;
        border-radius: 18px;
        display: block;
    }

    .asu2 {
        background-color: #8c0b42;
        opacity: 0.8;
        float: left;
        max-height: 640px;
        height: 100%;
        width: 94%;
        border-radius: 18px;
        display: block;
    }

    .edu.ccp2 h3 {
        margin: 0 10px;
        font-size: 1.2rem;
        width: 216px;
    }

    .edu.asu2 h3 {
        margin: 0 10px;
        font-size: 1.2rem;
        width: 163px;
    }

    .edu p {
        max-height: 364px;
        overflow-y: auto;
        margin: 10px 10px;
        font-size: 1rem;
    }

    b {

        display: none;
    }

    em {


        margin-bottom: 43px;
    }

    i {
        opacity: 0;

    }

}

@media (max-width:434px) {
    .education-container {
        display: none;
    }
}

/* End of 05 Education */




/* 06 Accolades */

.accolades {
    position: relative;
    width: 100%;
    height: 100%;
    position: relative;
    top: 0px;
}

.accolades-wrapper {
    border: 2px solid transparent;
}


/* accolades-header */

.accolades-header {
    position: relative;
    top: 161px;
    left: 281px;
}



.accolades-image {
    display: block;
    margin: 0 auto;
    position: relative;
    right: -100px;
    top: -632px;
    z-index: -5;
    opacity: 0.4;
    border: 25px solid #8c0b4245;
    max-width: 1378px;
    width: 100%;
    max-height: 894px;
    height: 100%;
}



.timeline-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    position: relative;
    width: 100%;
    padding: 20px;
    bottom: -197px;
    right: -235px;
    z-index: 2;
    height: 86px;
}


.timeline {
    display: flex;
    height: 142px;
    width: 50%;
    position: relative;
    bottom: 27px;
    left: -25px;
    overflow-x: scroll;
    scroll-behavior: smooth;
    scrollbar-width: none;
    justify-content: space-evenly;
    align-items: stretch;
    flex-wrap: wrap;
    flex-direction: column;
}

.timeline-item {
    display: flex;
    flex-direction: column;
    align-content: space-between;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    flex-wrap: wrap;
    transition: transform 0.3s ease;
    cursor: pointer;
    min-width: 120px;
    position: relative;
    top: 31px;
    left: 28px;
}


line::-webkit-scrollbar {
    display: none;
}


.thumbnail {
    width: 100px;
    transition: transform 0.3s ease;
    height: 69px;
    box-shadow: 0 0 30px 0 #8c0b42;
    margin: auto 43px;
}


#thumbnail1 {
    position: relative;
    left: 62px;
}

#thumbnail2 {
    position: relative;
    left: 49px;
}

#thumbnail3 {
    position: relative;
    left: 33px;
}

#thumbnail4 {
    position: relative;
    left: 16px;
}

#thumbnail5 {
    position: relative;
    left: -1px;
}

#thumbnail6 {
    position: relative;
    left: -19px;
}

#thumbnail7 {
    position: relative;
    left: -36px;
}

#thumbnail8 {
    position: relative;
    left: -55px;
}

#thumbnail9 {
    position: relative;
    left: -69px;
}

.thumbnail.selected {
    transform: scale(1.5);
    /* Enlarge the selected thumbnail */
}

/* award titles */
.caption {
    display: block;
    margin-top: 7px;
    margin-left: -4px;
    position: relative;
    bottom: 122px;
    text-decoration: none;
    color: #988282;
    -webkit-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}

.cap1 {
    position: relative;
    left: 69px;
}

.cap2 {
    position: relative;
    left: 59px;
}

.cap3 {
    position: relative;
    left: 41px;
}

.cap4 {
    position: relative;
    left: 19px;
}

.cap5 {
    position: relative;
    left: -2px;
}

.cap6 {
    position: relative;
    left: -19px;
}

.cap7 {
    position: relative;
    left: -38px;
}

.cap8 {
    position: relative;
    left: -50px;
}

.cap9 {
    position: relative;
    left: -63px;
}



hr {
    box-sizing: content-box;
    width: 71%;
    z-index: 400000;
    border-top: 2px solid #8c0b42;
    box-sizing: content-box;
    height: 4px;
    position: relative;
    bottom: -94px;
    left: 220px;
    opacity: 0.4;
    margin-left: 5%;
    margin-right: 2%;
}

.hr-timeline {
    border: none;
    height: 4px;
    /* Height of your timeline */
    background-color: #8c0b42;
    /* Color of your timeline */
    position: relative;
    bottom: 108px;
    left: 60px;
    width: 90%;
    /* Adjust as needed */
    margin: auto;
    /* This will center the line if the container is also centered */
}


/* award dates */
.hr-timeline::after,
.hr-timeline::before,
.timeline-item::after {
    content: '';
    position: absolute;
    top: -7%;
    transform: translateY(-50%);
    width: 39px;
    height: 25px;
    background-color: #8c0b42;
    border-radius: 50%;
    z-index: 2;
}


/* The Modal (background) */

.timeline-item:nth-child(1)::after {
    left: 73%;
    content: '2020'
}

.timeline-item:nth-child(2)::after {
    left: 67%;
    content: '2021'
}

.timeline-item:nth-child(3)::after {
    left: 57%;
    content: '2022'
}

.timeline-item:nth-child(4)::after {
    left: 50%;
    content: '2022'
}

.timeline-item:nth-child(5)::after {
    left: 38%;
    content: '2023'
}

.timeline-item:nth-child(6)::after {
    left: 29%;
    content: '2023'
}

.timeline-item:nth-child(7)::after {
    left: 20%;
    content: '2024'
}

.timeline-item:nth-child(8)::after {
    left: 9%;
    content: '2025'
}

.timeline-item:nth-child(9)::after {
    left: 1%;
    content: '2025'
}


@media (min-width: 1901px) {
    .accolades-image {
        display: block;
        margin: 0 auto;
        position: relative;
        left: 0px;
        top: -470px;
        z-index: -5;
        opacity: 0.65;
        border: 25px solid transparent;
        border-image: linear-gradient(#1a1417, silver, #3d061c) 10;
        box-shadow: 0 0 30px 0 #ffffff61;
        max-width: 880px;
        width: 100%;
        max-height: 644px;
        height: 100%;
    }

    .timeline-container {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        position: relative;
        width: 77%;
        padding: 20px;
        bottom: -205px;
        right: -290px;
        z-index: 0;
        height: 86px;
        overflow-y: hidden;
    }

    hr {
        box-sizing: content-box;
        width: 50%;
        z-index: 0;
        border-top: 2px solid #8c0b42;
        box-sizing: content-box;
        height: 4px;
        position: relative;
        bottom: -99px;
        left: 303px;
        opacity: 0.4;
        margin-left: 5%;
        margin-right: 2%;
    }

    .statement {
        position: relative;
        left: 36px;
        /* bottom: 0px; */
        top: -49px;
    }

    .timeline-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        left: -375px;
        top: 576px;
        position: fixed;
        margin: 10px 20px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.8;
    }

    .left-arrow2:hover,
    .right-arrow2:hover {
        color: #007bff9f;
        border: 2px solid #8c0b43;
    }

    .left-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        border: 2px solid #8c0b4336;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .right-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow2 {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .left-arrow2:hover,
    .right-arrow2:hover {
        color: #007BFF;
    }

    .accolades h2 {
        position: relative;
        font-size: 3.25rem;
        font-weight: 900;
        line-height: 1;
        z-index: 1;
        left: 276px;
        bottom: -183px;
    }

    .statement p {
        position: relative;
        top: 145px;
        font-size: 1rem;
        width: 245px;
        color: rgb(255 255 255 / 50%);
        text-align: center;
        left: -348px;
        scale: 0.9;
        margin: 0 auto;
    }

    .talk2 {
        display: flex;
        justify-content: center;
        margin-top: 15px;
        margin-bottom: -3px;
        max-width: 800px;
        width: 100%;
        align-content: center;
        flex-wrap: nowrap;
    }

    .talk2 P {
        position: relative;
        left: 15px;
        top: 15px;
    }
}


@media (min-width: 1701px) and (max-width: 1900px) {
    .accolades-image {
        display: block;
        margin: 0 auto;
        position: relative;
        left: 0px;
        top: -470px;
        z-index: -5;
        opacity: 0.65;
        border: 25px solid transparent;
        border-image: linear-gradient(#1a1417, silver, #3d061c) 10;
        box-shadow: 0 0 30px 0 #ffffff61;
        max-width: 880px;
        width: 100%;
        max-height: 644px;
        height: 100%;
    }

    .timeline-container {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        position: relative;
        width: 77%;
        padding: 20px;
        bottom: -205px;
        right: -290px;
        z-index: 0;
        height: 86px;
        overflow-y: hidden;
        z-index: 0;
    }

    hr {
        box-sizing: content-box;
        width: 50%;
        z-index: 0;
        border-top: 2px solid #8c0b42;
        box-sizing: content-box;
        height: 4px;
        position: relative;
        bottom: -99px;
        left: 303px;
        opacity: 0.4;
        margin-left: 5%;
        margin-right: 2%;
        z-index: 0;
    }

    .statement {
        position: relative;
        left: 36px;
        /* bottom: 0px; */
        top: -49px;
    }

    .timeline-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        left: -375px;
        top: 576px;
        position: fixed;
        margin: 10px 20px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.8;
    }

    .left-arrow2:hover,
    .right-arrow2:hover {
        color: #007bff9f;
        border: 2px solid #8c0b43;
    }

    .left-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        border: 2px solid #8c0b4336;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .right-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow2 {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .left-arrow2:hover,
    .right-arrow2:hover {
        color: #007BFF;
    }

    .accolades h2 {
        position: relative;
        font-size: 3.25rem;
        font-weight: 900;
        line-height: 1;
        z-index: 1;
        left: 276px;
        bottom: -183px;
    }

    .statement p {
        position: relative;
        top: 145px;
        font-size: 1rem;
        width: 245px;
        color: rgb(255 255 255 / 50%);
        text-align: center;
        left: -348px;
        scale: 0.9;
        margin: 0 auto;
    }

    .talk2 {
        display: flex;
        justify-content: center;
        margin-top: 15px;
        margin-bottom: -3px;
        max-width: 800px;
        width: 100%;
        align-content: center;
        flex-wrap: nowrap;
    }

    .talk2 P {
        position: relative;
        left: 15px;
        top: 15px;
    }

}

@media (min-width: 1601px) and (max-width: 1700px) {
    .accolades-image {
        display: block;
        margin: 0 auto;
        position: relative;
        left: 0px;
        top: -470px;
        z-index: -5;
        opacity: 0.65;
        border: 25px solid transparent;
        border-image: linear-gradient(#1a1417, silver, #3d061c) 10;
        box-shadow: 0 0 30px 0 #ffffff61;
        max-width: 880px;
        width: 100%;
        max-height: 644px;
        height: 100%;
    }

    .timeline-container {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        position: relative;
        width: 77%;
        padding: 20px;
        bottom: -205px;
        right: -290px;
        z-index: 0;
        height: 86px;
        overflow-y: hidden;
        z-index: 0;
    }

    hr {
        box-sizing: content-box;
        width: 50%;
        z-index: 0;
        border-top: 2px solid #8c0b42;
        box-sizing: content-box;
        height: 4px;
        position: relative;
        bottom: -99px;
        left: 303px;
        opacity: 0.4;
        margin-left: 5%;
        margin-right: 2%;
        z-index: 0;
    }

    .statement {
        position: relative;
        left: 36px;
        /* bottom: 0px; */
        top: -49px;
    }

    .accolades h2 {
        position: relative;
        font-size: 3.25rem;
        font-weight: 900;
        line-height: 1;
        z-index: 1;
        left: 276px;
        bottom: -183px;
    }

    .statement p {
        position: relative;
        top: 145px;
        font-size: 1rem;
        width: 245px;
        color: rgb(255 255 255 / 50%);
        text-align: center;
        left: -348px;
        scale: 0.9;
        margin: 0 auto;
    }

    .timeline-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        left: -375px;
        top: 576px;
        position: fixed;
        margin: 10px 20px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.8;
    }

    .left-arrow2:hover,
    .right-arrow2:hover {
        color: #007bff9f;
        border: 2px solid #8c0b43;
    }

    .left-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        border: 2px solid #8c0b4336;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .right-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow2 {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .left-arrow2:hover,
    .right-arrow2:hover {
        color: #007BFF;
    }

    .talk2 {
        display: flex;
        justify-content: center;
        margin-top: 15px;
        margin-bottom: -3px;
        max-width: 800px;
        width: 100%;
        align-content: center;
        flex-wrap: nowrap;
    }

    .talk2 P {
        position: relative;
        left: 15px;
        top: 15px;
    }

}




@media (min-width: 1401px) and (max-width: 1600px) {

    .accolades-image {
        display: block;
        margin: 0 auto;
        position: relative;
        left: 0px;
        top: -518px;
        z-index: -5;
        opacity: 0.6;
        border: 25px solid transparent;
        border-image: linear-gradient(#1a1417, silver, #3d061c) 10;
        box-shadow: 0 0 30px 0 #ffffff61;
        scale: 0.9;
        max-width: 940px;
        width: 80%;
        max-height: 694px;
        height: 100%;
    }

    .timeline-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 20%;
        justify-content: center;
        padding: 8px;
        left: 225px;
        top: 559px;
        position: fixed;
        margin: 10px 20px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.8;
    }

    .left-arrow2:hover,
    .right-arrow2:hover {
        color: #007bff9f;
        border: 2px solid #8c0b43;
    }

    .left-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        border: 2px solid #8c0b4336;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .right-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow2 {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .left-arrow2:hover,
    .right-arrow2:hover {
        color: #007BFF;
    }

    .timeline-container {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        position: relative;
        width: 60%;
        padding: 20px;
        bottom: -135px;
        right: -303px;
        z-index: 90000;
        height: 86px;
        overflow-y: hidden;
        scale: 0.85;
        z-index: 0;
    }

    .timeline {
        display: flex;
        height: 142px;
        width: 100%;
        position: relative;
        bottom: 27px;
        left: -55px;
    }

    hr {
        width: 45%;
        z-index: 400000;
        border-top: 2px solid #8c0b42;
        box-sizing: content-box;
        height: 4px;
        position: relative;
        bottom: -37px;
        left: 360px;
        opacity: 0.4;
        margin-left: 5%;
        margin-right: 2%;
        z-index: 0;
    }

    .statement {
        position: relative;
        left: 36px;
        /* bottom: 0px; */
        top: -49px;
    }

    .accolades h2 {
        position: relative;
        left: 276px;
        bottom: -183px;
        font-size: 3.25rem;
        font-weight: 900;
        line-height: 1;
        z-index: 1;
    }

    .statement p {
        position: relative;
        top: 145px;
        font-size: 1rem;
        width: 245px;
        color: rgb(255 255 255 / 50%);
        text-align: center;
        left: 257px;
        scale: 0.9;
    }

    .talk2 {
        display: flex;
        justify-content: center;
        margin-top: 15px;
        margin-bottom: -3px;
        max-width: 800px;
        width: 100%;
        align-content: center;
        flex-wrap: nowrap;
    }

    .talk2 P {
        position: relative;
        left: 15px;
        top: 15px;
    }
}

@media (min-width: 1269px) and (max-width: 1400px) {
    .accolades-image {
        display: block;
        margin: 0 auto;
        position: relative;
        left: 110px;
        top: -518px;
        z-index: -5;
        opacity: 0.6;
        border: 25px solid transparent;
        border-image: linear-gradient(#1a1417, silver, #3d061c) 10;
        box-shadow: 0 0 30px 0 #ffffff61;
        scale: 0.9;
        max-width: 1440px;
        width: 80%;
        max-height: 694px;
        height: 100%;
    }

    .timeline-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 20%;
        justify-content: center;
        padding: 8px;
        left: 290px;
        top: 559px;
        position: fixed;
        margin: 10px 20px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.8;
    }

    .left-arrow2:hover,
    .right-arrow2:hover {
        color: #007bff9f;
        border: 2px solid #8c0b43;
    }

    .left-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        border: 2px solid #8c0b4336;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .right-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow2 {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .left-arrow2:hover,
    .right-arrow2:hover {
        color: #007BFF;
    }

    .timeline-container {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        position: relative;
        width: 70%;
        padding: 20px;
        bottom: -135px;
        right: -303px;
        z-index: 90000;
        height: 86px;
        overflow-y: hidden;
        scale: 0.85;
        z-index: 0;
    }

    .timeline {
        display: flex;
        height: 142px;
        width: 100%;
        position: relative;
        bottom: 27px;
        left: -55px;
    }

    hr {
        width: 55%;
        z-index: 400000;
        border-top: 2px solid #8c0b42;
        box-sizing: content-box;
        height: 4px;
        position: relative;
        bottom: -37px;
        left: 360px;
        opacity: 0.4;
        margin-left: 5%;
        margin-right: 2%;
        z-index: 0;
    }

    .statement {
        position: relative;
        left: 146px;
        /* bottom: 0px; */
        top: -49px;
    }

    .accolades h2 {
        position: relative;
        left: 173px;
        bottom: -183px;
        font-size: 3.25rem;
        font-weight: 900;
        line-height: 1;
        z-index: 1;
    }

    .statement p {
        position: relative;
        top: 145px;
        font-size: 1rem;
        width: 245px;
        color: rgb(255 255 255 / 50%);
        text-align: center;
        left: 147px;
        scale: 0.9;
    }

    .talk2 {
        display: flex;
        justify-content: center;
        margin-top: 15px;
        margin-bottom: -3px;
        max-width: 800px;
        width: 100%;
        align-content: center;
        flex-wrap: nowrap;
    }

    .talk2 P {
        position: relative;
        left: 15px;
        top: 15px;
    }
}

@media (min-width: 1181px) and (max-width: 1268px) {

    .accolades-image {
        display: block;
        margin: 0 auto;
        position: relative;
        left: 110px;
        top: -523px;
        z-index: -5;
        opacity: 0.6;
        border: 25px solid transparent;
        border-image: linear-gradient(#1a1417, silver, #3d061c) 10;
        box-shadow: 0 0 30px 0 #ffffff61;
        scale: 0.9;
        max-width: 1440px;
        max-width: 1440px;
        width: 80%;
        max-height: 694px;
        height: 100%;
    }

    .timeline-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 20%;
        justify-content: center;
        padding: 8px;
        left: 280px;
        top: 559px;
        position: fixed;
        margin: 10px 20px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.7;
    }

    .left-arrow2:hover,
    .right-arrow2:hover {
        color: #007bff9f;
        border: 2px solid #8c0b43;
    }

    .left-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        border: 2px solid #8c0b4336;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .right-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow2 {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .left-arrow2:hover,
    .right-arrow2:hover {
        color: #007BFF;
    }

    .timeline-container {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        position: relative;
        width: 70%;
        padding: 20px;
        bottom: -135px;
        right: -303px;
        z-index: 90000;
        height: 86px;
        overflow-y: hidden;
        scale: 0.85;
        z-index: 0;
    }

    .timeline {
        display: flex;
        height: 142px;
        width: 100%;
        position: relative;
        bottom: 27px;
        left: -55px;
    }

    hr {
        width: 55%;
        z-index: 400000;
        border-top: 2px solid #8c0b42;
        box-sizing: content-box;
        height: 4px;
        position: relative;
        bottom: -37px;
        left: 360px;
        opacity: 0.4;
        margin-left: 5%;
        margin-right: 2%;
        z-index: 0;
    }

    .accolades h2 {
        position: relative;
        left: 158px;
        bottom: -183px;
        font-size: 3.25rem;
        font-weight: 900;
        line-height: 1;
        z-index: 1;
    }

    .statement {
        position: relative;
        left: 146px;
        /* bottom: 0px; */
        top: -49px;
    }

    .statement p {
        position: relative;
        top: 145px;
        font-size: 1.1rem;
        width: 245px;
        color: rgb(255 255 255 / 50%);
        text-align: center;
        left: 145px;
        scale: 0.9;
    }

    .talk2 {
        display: flex;
        justify-content: center;
        margin-top: 15px;
        margin-bottom: -3px;
        max-width: 800px;
        width: 100%;
        align-content: center;
        flex-wrap: nowrap;
    }

    .talk2 P {
        position: relative;
        left: 15px;
        top: 15px;
    }
}

@media (min-width: 1041px) and (max-width: 1180px) {

    .accolades-image {
        display: block;
        margin: 0 auto;
        position: relative;
        right: 23px;
        top: -483px;
        z-index: -5;
        opacity: 0.5;
        border: 25px solid transparent;
        border-image: linear-gradient(#1a1417, silver, #3d061c) 10;
        box-shadow: 0 0 30px 0 #ffffff61;
        scale: 0.9;
        max-width: 1191px;
        width: 100%;
        max-height: 694px;
        height: 100%;
    }

    .timeline-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 20%;
        justify-content: center;
        padding: 8px;
        left: 81px;
        top: 559px;
        position: fixed;
        margin: 10px 20px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.7;
    }

    .left-arrow2:hover,
    .right-arrow2:hover {
        color: #007bff9f;
        border: 2px solid #8c0b43;
    }

    .left-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        border: 2px solid #8c0b4336;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .right-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow2 {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .left-arrow2:hover,
    .right-arrow2:hover {
        color: #007BFF;
    }

    .timeline-container {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        position: relative;
        width: 79%;
        padding: 20px;
        bottom: -155px;
        right: -136px;
        z-index: 90000;
        height: 86px;
        overflow-y: hidden;
        scale: 0.85;
        z-index: 0;
    }

    .timeline {
        display: flex;
        height: 142px;
        width: 100%;
        position: relative;
        bottom: 27px;
        left: -75px;
    }

    hr {
        width: 64%;
        z-index: 400000;
        border-top: 2px solid #8c0b42;
        box-sizing: content-box;
        height: 4px;
        position: relative;
        bottom: -48px;
        left: 164px;
        opacity: 0.4;
        margin-left: 5%;
        margin-right: 2%;
        z-index: 0;
    }

    .accolades h2 {
        position: relative;
        left: 244px;
        bottom: -183px;
        font-size: 3.25rem;
        font-weight: 900;
        line-height: 1;
        z-index: 1;
    }

    .statement {
        position: relative;
        left: -138px;
        /* bottom: 0px; */
        top: -49px;
    }

    .statement p {
        position: relative;
        top: 145px;
        font-size: 1.1rem;
        width: 245px;
        color: rgb(255 255 255 / 50%);
        text-align: center;
        left: 226px;
        scale: 0.9;
    }

    .talk2 {
        display: flex;
        justify-content: center;
        margin-top: 15px;
        margin-bottom: -3px;
        max-width: 400px;
        width: 100%;
        align-content: center;
        flex-wrap: nowrap;
    }

    .talk2 P {
        position: relative;
        left: 15px;
        top: 15px;
    }
}

@media (min-width: 865px) and (max-width: 1040px) {
    .talk2 {
        display: flex;
        justify-content: center;
        margin-top: 30px;
        margin-bottom: -3px;
        max-width: 400px;
        width: 100%;
        align-content: left;
        flex-wrap: nowrap;
        position: relative;
        left: 130px;
        top: 142px;
    }

    .talk2 P {
        position: relative;
        left: 15px;
        top: 15px;
    }



    .accolades-image {
        display: block;
        margin: 0 auto;
        position: relative;
        right: 23px;
        top: -614px;
        z-index: -5;
        opacity: 0.5;
        border: 25px solid transparent;
        border-image: linear-gradient(#1a1417, silver, #3d061c) 10;
        box-shadow: 0 0 30px 0 #ffffff61;
        scale: 0.8;
        max-width: 891px;
        width: 100%;
        max-height: 1053px;
        height: 100%;
        transition: opacity 0.5s ease, filter 0.5s ease;
    }

    .statement {
        position: relative;
        left: 0px;
        bottom: 107px;
        scale: 0.8;
    }

    .accolades h2 {
        position: relative;
        font-size: 68px;
        font-weight: 900;
        line-height: 1;
        z-index: 1;
        left: 0px;
        bottom: -183px;
        text-align: center;
        scale: 0.6;
    }

    .statement p {
        position: relative;
        top: 90px;
        font-size: 1.1rem;
        width: 245px;
        color: rgb(255 255 255 / 50%);
        text-align: center;
        left: 0px;
        scale: 0.9;
        margin: 0 auto;
    }



    .timeline-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        left: -28px;
        top: 470px;
        position: fixed;
        margin: 10px 20px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.7;
    }

    .left-arrow2:hover,
    .right-arrow2:hover {
        color: #007bff9f;
        border: 2px solid #8c0b43;
    }

    .left-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .right-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow2 {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }



    hr {
        box-sizing: content-box;
        width: 65%;
        z-index: 400000;
        border-top: 2px solid #8c0b42;
        box-sizing: content-box;
        height: 4px;
        position: relative;
        bottom: 100px;
        left: 128px;
        opacity: 0.4;
        margin-left: 5%;
        margin-right: 2%;
        z-index: 0;
    }

    .timeline-container {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        position: relative;
        width: 148%;
        padding: 20px;
        bottom: 1px;
        right: -45px;
        z-index: 90000;
        height: 86px;
        overflow-y: hidden;
        scale: 0.9;
        z-index: 0;
    }
}



@media (min-width: 709px) and (max-width: 864px) {
    .talk2 {
        display: flex;
        justify-content: center;
        margin-top: 30px;
        margin-bottom: -3px;
        max-width: 400px;
        width: 100%;
        align-content: left;
        flex-wrap: nowrap;
        position: relative;
        left: 130px;
        top: 0px;
    }

    .talk2 P {
        position: relative;
        left: 15px;
        top: 15px;
    }


    .accolades-image {
        display: none;
        margin: 0 auto;
        position: relative;
        right: 24px;
        top: -462px;
        z-index: -5;
        opacity: 0.25;
        border: 25px solid transparent;
        border-image: linear-gradient(#1a1417, silver, #3d061c) 10;
        box-shadow: 0 0 30px 0 #ffffff61;
        scale: 0.9;
        max-width: 1191px;
        width: 100%;
        max-height: 687px;
        height: 100%;
    }


    .statement {
        position: relative;
        left: 0px;
        bottom: 0;
        margin: 0 auto;
        border: 25px solid transparent;
        border-image: linear-gradient(#1a1417, silver, #3d061c) 10;
        box-shadow: 0 0 30px 0 #ffffff61;
        height: 100%;
        width: 90%;
        max-width: 280px;
        max-height: 220px;
        top: 30px;
    }

    .accolades h2 {
        position: relative;
        font-size: 53px;
        font-weight: 900;
        line-height: 1;
        z-index: 1;
        left: 0px;
        top: -47px;
        text-align: center;
        scale: 0.65;
    }

    .statement p {
        position: relative;
        top: -15px;
        font-size: 1.1rem;
        width: 254px;
        color: rgb(255 255 255 / 50%);
        text-align: center;
        left: 0px;
        scale: 0.8;
        margin: 0 auto;
    }


    hr {
        box-sizing: content-box;
        width: 79%;
        z-index: 400000;
        border-top: 2px solid #8c0b42;
        box-sizing: content-box;
        height: 4px;
        position: relative;
        top: 25px;
        left: 30px;
        opacity: 0.4;
        margin-left: 5%;
        margin-right: 2%;
        z-index: 0;
    }


    .timeline-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        left: -29px;
        top: 595px;
        position: fixed;
        margin: 10px 20px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.7;
    }

    .left-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .left-arrow2:hover,
    .right-arrow2:hover {
        color: #007bff9f;
        border: 2px solid #8c0b43;
    }

    .right-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow2 {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }


    .timeline-container {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        position: relative;
        width: 300%;
        padding: 20px;
        top: 300px;
        left: -147px;
        z-index: 90000;
        height: 86px;
        overflow-y: hidden;
        scale: 0.9;
        z-index: 0;
    }


}

@media (min-width: 609px) and (max-width: 708px) {
    .talk2 {
        display: flex;
        justify-content: center;
        margin-top: 30px;
        margin-bottom: -3px;
        max-width: 400px;
        width: 100%;
        align-content: left;
        flex-wrap: nowrap;
        position: relative;
        left: 80px;
        top: 0px;
    }

    .talk2 P {
        position: relative;
        left: 15px;
        top: 15px;
    }


    .accolades-image {
        display: none;
        margin: 0 auto;
        position: relative;
        right: 24px;
        top: -462px;
        z-index: -5;
        opacity: 0.25;
        border: 25px solid transparent;
        border-image: linear-gradient(#1a1417, silver, #3d061c) 10;
        box-shadow: 0 0 30px 0 #ffffff61;
        scale: 0.9;
        max-width: 1191px;
        width: 100%;
        max-height: 687px;
        height: 100%;
    }


    .statement {
        position: relative;
        left: 0px;
        bottom: 0;
        margin: 0 auto;
        border: 25px solid transparent;
        border-image: linear-gradient(#1a1417, silver, #3d061c) 10;
        box-shadow: 0 0 30px 0 #ffffff61;
        height: 100%;
        width: 90%;
        max-width: 280px;
        max-height: 220px;
        top: 30px;
    }

    .accolades h2 {
        position: relative;
        font-size: 53px;
        font-weight: 900;
        line-height: 1;
        z-index: 1;
        left: 0px;
        top: -47px;
        text-align: center;
        scale: 0.65;
    }

    .statement p {
        position: relative;
        top: -15px;
        font-size: 1.1rem;
        width: 254px;
        color: rgb(255 255 255 / 50%);
        text-align: center;
        left: 0px;
        scale: 0.8;
        margin: 0 auto;
    }


    hr {
        box-sizing: content-box;
        width: 79%;
        z-index: 400000;
        border-top: 2px solid #8c0b42;
        box-sizing: content-box;
        height: 4px;
        position: relative;
        top: 25px;
        left: 30px;
        opacity: 0.4;
        margin-left: 5%;
        margin-right: 2%;
        z-index: 0;
    }


    .timeline-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        left: -29px;
        top: 595px;
        position: fixed;
        margin: 10px 20px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.7;
    }

    .left-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .left-arrow2:hover,
    .right-arrow2:hover {
        color: #007bff9f;
        border: 2px solid #8c0b43;
    }

    .right-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow2 {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }


    .timeline-container {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        position: relative;
        width: 300%;
        padding: 20px;
        top: 300px;
        left: -147px;
        z-index: 90000;
        height: 86px;
        overflow-y: hidden;
        scale: 0.9;
        z-index: 0;
    }
}



@media (min-width:582px) and (max-width:608px) {
    .talk2 {
        display: flex;
        justify-content: center;
        margin-top: 30px;
        margin-bottom: -3px;
        max-width: 400px;
        width: 100%;
        align-content: left;
        flex-wrap: nowrap;
        position: relative;
        left: 50px;
        top: 0px;
    }

    .talk2 P {
        position: relative;
        left: 15px;
        top: 15px;
    }


    .accolades-image {
        display: none;
        margin: 0 auto;
        position: relative;
        right: 24px;
        top: -462px;
        z-index: -5;
        opacity: 0.25;
        border: 25px solid transparent;
        border-image: linear-gradient(#1a1417, silver, #3d061c) 10;
        box-shadow: 0 0 30px 0 #ffffff61;
        scale: 0.9;
        max-width: 1191px;
        width: 100%;
        max-height: 687px;
        height: 100%;
    }


    .statement {
        position: relative;
        left: 0px;
        bottom: 0;
        margin: 0 auto;
        border: 25px solid transparent;
        border-image: linear-gradient(#1a1417, silver, #3d061c) 10;
        box-shadow: 0 0 30px 0 #ffffff61;
        height: 100%;
        width: 90%;
        max-width: 280px;
        max-height: 220px;
        top: 30px;
    }

    .accolades h2 {
        position: relative;
        font-size: 53px;
        font-weight: 900;
        line-height: 1;
        z-index: 1;
        left: 0px;
        top: -47px;
        text-align: center;
        scale: 0.65;
    }

    .statement p {
        position: relative;
        top: -15px;
        font-size: 1.1rem;
        width: 254px;
        color: rgb(255 255 255 / 50%);
        text-align: center;
        left: 0px;
        scale: 0.8;
        margin: 0 auto;
    }


    hr {
        box-sizing: content-box;
        width: 79%;
        z-index: 400000;
        border-top: 2px solid #8c0b42;
        box-sizing: content-box;
        height: 4px;
        position: relative;
        top: 35px;
        left: 30px;
        opacity: 0.4;
        margin-left: 5%;
        margin-right: 2%;
        z-index: 0;
    }


    .timeline-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        left: -29px;
        top: 595px;
        position: fixed;
        margin: 10px 20px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.7;
    }

    .left-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .left-arrow2:hover,
    .right-arrow2:hover {
        color: #007bff9f;
        border: 2px solid #8c0b43;
    }

    .right-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow2 {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }


    .timeline-container {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        position: relative;
        width: 300%;
        max-width: 908px;
        padding: 20px;
        top: 300px;
        left: -147px;
        z-index: 90000;
        height: 86px;
        overflow-y: hidden;
        scale: 0.9;
        z-index: 0;
    }


    .timeline {
        display: flex;
        height: 142px;
        width: 100%;
        position: relative;
        bottom: 27px;
        left: -25px;
    }
}

@media (min-width:502px) and (max-width:581px) {

    .talk2 {
        display: flex;
        justify-content: center;
        margin-top: 30px;
        margin-bottom: -3px;
        max-width: 400px;
        width: 100%;
        align-content: left;
        flex-wrap: nowrap;
        position: relative;
        left: 30px;
        top: 0px;
    }

    .talk2 P {
        position: relative;
        left: 15px;
        top: 15px;
    }

    .accolades-image {
        display: none;
        margin: 0 auto;
        position: relative;
        right: 24px;
        top: -462px;
        z-index: -5;
        opacity: 0.25;
        border: 25px solid transparent;
        border-image: linear-gradient(#1a1417, silver, #3d061c) 10;
        box-shadow: 0 0 30px 0 #ffffff61;
        scale: 0.9;
        max-width: 1191px;
        width: 100%;
        max-height: 687px;
        height: 100%;
    }


    .statement {
        position: relative;
        left: 0px;
        bottom: 0;
        margin: 0 auto;
        border: 25px solid transparent;
        border-image: linear-gradient(#1a1417, silver, #3d061c) 10;
        box-shadow: 0 0 30px 0 #ffffff61;
        height: 100%;
        width: 90%;
        max-width: 280px;
        max-height: 220px;
        top: 30px;
    }

    .accolades h2 {
        position: relative;
        font-size: 53px;
        font-weight: 900;
        line-height: 1;
        z-index: 1;
        left: 0px;
        top: -47px;
        text-align: center;
        scale: 0.65;
    }

    .statement p {
        position: relative;
        top: -15px;
        font-size: 1.1rem;
        width: 254px;
        color: rgb(255 255 255 / 50%);
        text-align: center;
        left: 0px;
        scale: 0.8;
        margin: 0 auto;
    }


    hr {
        box-sizing: content-box;
        width: 79%;
        z-index: 400000;
        border-top: 2px solid #8c0b42;
        box-sizing: content-box;
        height: 4px;
        position: relative;
        top: 25px;
        left: 30px;
        opacity: 0.4;
        margin-left: 5%;
        margin-right: 2%;
        z-index: 0;
    }


    .timeline-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        left: -29px;
        top: 595px;
        position: fixed;
        margin: 10px 20px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.7;
    }

    .left-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .left-arrow2:hover,
    .right-arrow2:hover {
        color: #007bff9f;
        border: 2px solid #8c0b43;
    }

    .right-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow2 {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }


    .timeline-container {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        position: relative;
        width: 300%;
        padding: 20px;
        top: 300px;
        left: -147px;
        z-index: 90000;
        height: 86px;
        overflow-y: hidden;
        scale: 0.9;
        z-index: 0;
    }
}

@media (min-width:401px) and (max-width:501px) {
    .talk2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: 40px;
        left: 0px;
        z-index: 100;
        width: 100%;
    }

    .talk2 h1 {
        position: relative;
        top: 4px;
        width: 100%;
        left: 0px;
        text-align: center;
        margin: 0 auto;
    }

    .talk2 p {
        position: relative;
        top: -14px;
        width: 100%;
        left: 4px;
        font-size: 12px;
    }


    .accolades-image {
        display: none;
        margin: 0 auto;
        position: relative;
        right: 24px;
        top: -462px;
        z-index: -5;
        opacity: 0.25;
        border: 25px solid transparent;
        border-image: linear-gradient(#1a1417, silver, #3d061c) 10;
        box-shadow: 0 0 30px 0 #ffffff61;
        scale: 0.9;
        max-width: 1191px;
        width: 100%;
        max-height: 687px;
        height: 100%;
    }


    .statement {
        position: relative;
        left: 0px;
        bottom: 0;
        margin: 0 auto;
        border: 25px solid transparent;
        border-image: linear-gradient(#1a1417, silver, #3d061c) 10;
        box-shadow: 0 0 30px 0 #ffffff61;
        height: 100%;
        width: 90%;
        max-width: 280px;
        max-height: 220px;
        top: 60px;
    }

    .accolades h2 {
        position: relative;
        font-size: 53px;
        font-weight: 900;
        line-height: 1;
        z-index: 1;
        left: 0px;
        top: -47px;
        text-align: center;
        scale: 0.65;
    }

    .statement p {
        position: relative;
        top: -20px;
        font-size: 1.1rem;
        width: 254px;
        color: rgb(255 255 255 / 50%);
        text-align: center;
        left: 0px;
        scale: 0.8;
        margin: 0 auto;
    }


    hr {
        box-sizing: content-box;
        width: 79%;
        z-index: 400000;
        border-top: 2px solid #8c0b42;
        box-sizing: content-box;
        height: 4px;
        position: relative;
        top: 35px;
        left: 30px;
        opacity: 0.4;
        margin-left: 5%;
        margin-right: 2%;
        z-index: 0;
    }


    .timeline-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        left: -29px;
        top: 595px;
        position: fixed;
        margin: 10px 20px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.7;
    }

    .left-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .left-arrow2:hover,
    .right-arrow2:hover {
        color: #007bff9f;
        border: 2px solid #8c0b43;
    }

    .right-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow2 {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }


    .timeline-container {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        position: relative;
        width: 300%;
        padding: 20px;
        top: 300px;
        left: -147px;
        z-index: 90000;
        height: 86px;
        overflow-y: hidden;
        scale: 0.9;
        z-index: 0;
    }
}

/* iPhone SE viewport size Width 375px x Height 553px  */
@media (min-width:320px) and (max-width:400px) {

/* title and subtitle */
.accolades-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: 40px;
        left: 0px;
        z-index: 100;
        width: 100%;
        height:15%;
}

    .accolades-header h1 {
        position: relative;
        top: 10px;
        left: 42px;
        text-align: left;
        width: 100%;
        font-size: 1.7rem;
        font-weight: 900;
        line-height: 1.1;
    }

    .accolades-header h3 {
        position: relative;
        top: -25px;
        width: 100%;
        left: 42px;
        font-size: 1.1rem;
        font-weight: 400;
        text-align: left;
        color: rgb(255 255 255 / 50%);
    }


/*  center image */
    .accolades-image {
        display: none;
        margin: 0 auto;
        position: relative;
        right: 24px;
        top: -462px;
        z-index: -5;
        opacity: 0.25;
        border: 25px solid transparent;
        border-image: linear-gradient(#1a1417, silver, #3d061c) 10;
        box-shadow: 0 0 30px 0 #ffffff61;
        scale: 0.9;
        max-width: 1191px;
        width: 100%;
        max-height: 687px;
        height: 100%;
    }

/*  center image border + text */
    .statement {
        position: relative;
        left: 0px;
        bottom: 0px;
        margin: 0 auto;
        border: 25px solid transparent;
        border-image: linear-gradient(#1a1417, silver, #3d061c) 10;
        box-shadow: 0 0 30px 0 #ffffff61;
        background-color: #3d061c;
        height: 100%;
        width: 100%;
        max-width: 230px;
        max-height: 140px;
        top: 33px;
    }

    .statement h2 {
        position: relative;
        font-size: 1.6rem;
        font-weight: 900;
        line-height: 1;
        z-index: 1;
        left: 0px;
        top:-5px;
        text-align: center;
    }

    .statement h3 {
        position: relative;
        top: -187px;
        left: -30px;
        font-size: 1.1rem;
        width: 254px;
        color: rgb(255 255 255 / 50%);
        text-align: center;
        scale: 0.75;
        margin: 0 auto;
        display: none;
    }



/*  arrows */
    .timeline-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        left:-10px;
        top: 322px;
        position: fixed;
        margin: 0 auto;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.7;
    }

    .left-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .left-arrow2:hover,
    .right-arrow2:hover {
        color: #007bff9f;
        border: 2px solid #8c0b43;
    }

    .right-arrow2 {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow2 {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }



/*  carousel */
    .timeline-container {
        display: flex;
        overflow-x: auto;
        scroll-behavior: smooth;
        position: relative;
        width: 100%;
        max-width: 370px;
        padding: 20px;
        top: 110px;
        left: 15px;
        z-index: 90000;
        height: auto;
        overflow-y: hidden;
        z-index: 0;
        -webkit-overflow-scrolling: touch;  
        scale: 1;                           
        z-index: 1;  
    }

    .timeline {
    display: flex;
    height: 130px;
    width: 100%;
    max-width: 370px;
    position: relative;
    bottom: 10px;
    left: -40px;
    overflow-x: visible;
    scroll-behavior: smooth;
    scrollbar-width: none;
    justify-content: space-evenly;
    align-items: stretch;
    flex-wrap: nowrap;
    flex-direction: row;
    overflow-y: hidden;
    gap:22px;
    }

    .timeline > * {
    flex: 0 0 auto;     
    width: 130px;  
    height: auto;  
    }

.timeline-item {
    display: flex;
    flex-direction: column;
    align-content: space-between;
    justify-content: space-evenly;
    align-items: left;
    text-align: center;
    flex-wrap: wrap;
    transition: transform 0.3s ease;
    cursor: pointer;
    min-width: 160px;
    position: relative;
    top: 31px;
    left: -68px;
}
    
/*  line */
    hr {
        box-sizing: content-box;
        width: 70%;
        z-index: 400000;
        border-top: 2px solid #8c0b42;
        box-sizing: content-box;
        height: 4px;
        position: relative;
        top: 35px;
        left: 30px;
        opacity: 0.4;
        margin-left: 5%;
        margin-right: 2%;
        z-index: 0;
        display: none;
    }

/* award titles */
.caption {
    display: block;
    margin-top: 7px;
    margin-left: -4px;
    position: relative;
    bottom: 142px;
    text-decoration: none;
    color: #988282;
    -webkit-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}


/* award dates */
.hr-timeline::after,
.hr-timeline::before,
.timeline-item::after {
    content: '';
    position: absolute;
    top: 7%;
    transform: translateY(-50%);
    width: 39px;
    height: 25px;
    background-color: #8c0b42;
    border-radius: 50%;
    z-index: 2;
}


/* circle - dates */

.timeline-item:nth-child(1)::after {
    left: 83%;
    content: '2020'
}

.timeline-item:nth-child(2)::after {
    left: 76%;
    content: '2021'
}

.timeline-item:nth-child(3)::after {
    left: 67%;
    content: '2022'
}

.timeline-item:nth-child(4)::after {
    left: 56%;
    content: '2022'
}

.timeline-item:nth-child(5)::after {
    left: 44%;
    content: '2023'
}

.timeline-item:nth-child(6)::after {
    left: 34%;
    content: '2023'
}

.timeline-item:nth-child(7)::after {
    left: 23%;
    content: '2024'
}

.timeline-item:nth-child(8)::after {
    left: 11%;
    content: '2025'
}

.timeline-item:nth-child(9)::after {
    left: 2%;
    content: '2025'
}

}


/* 
@media (max-width:319px) and (max-width:400px) {
    .accolades-image {
        opacity: 0;
    }

    .timeline-container {
        opacity: 0;
    }

    hr {
        opacity: 0;
    }

    .accolades h2 {
        opacity: 0;
    }

    .statement {
        opacity: 0;
    }

    .statement p {
        opacity: 0;
    }

}
*/


.modal-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}


.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: hidden;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.9);
    /* Black w/ opacity */
    transition: opacity 0.3s ease-in-out;
    z-index: 1000;
}

/* The Close Button */
.close {
    position: absolute;
    top: 43px;
    right: 45px;
    color: #f1f1f1;
    font-size: 3.75rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 5000;
}





#t3 {
    position: relative;
    top: -522px;
    right: -1259px;
    text-decoration: underline;
    color: #ffd700;
    /* gold */
}

#t4 {
    position: relative;
    top: -522px;
    right: -1259px;
    text-decoration: underline;
    color: #4086f6;
    /* blue (Google Blue) */
}

#t5 {
    position: relative;
    top: -522px;
    right: -1259px;
    text-decoration: underline;
    color: #ffd700;
    /* gold */
}

#t6 {
    position: relative;
    top: -522px;
    right: -1259px;
    text-decoration: underline;
    color: #ffd700;
    /* gold */
}

#t7 {
    position: relative;
    top: -522px;
    right: -1259px;
    text-decoration: underline;
    color: #4086f6;
    /* blue (Google Blue) */
}



@media (min-width: 1901px) {

    .modal-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        left: 146px;
        top: 135px;
        position: fixed;
        margin: 10px 20px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.7;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
        border: 2px solid #007BFF;
    }

    .left-arrow {

        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .right-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
    }

    .first {
        width: 35%;
        top: -47px;
    }

    .second {
        width: 35%;
        top: -47px;
    }

    .eighth {
        width: 30%;
        top: -47px;
    }

    .first,
    .second,
    .eighth {
        position: relative;
        top: -50px;
        left: 74px;
        scale: 1.1;
    }

    .third,
    .fourth,
    .fifth,
    .sixth,
    .seventh {
        color: #8c0b42;
        position: relative;
        top: -52px;
        left: 74px;
        scale: 1.1;
    }

    .t1:not(.third):not(.fourth):not(.fifth):not(.sixth):not(.seventh) {
        color: #70756f;
        position: relative;
        top: -82px;
        left: 74px;
        scale: 1.1;
    }

    #img01 {
        margin-top: 3px;
        margin-left: 2px;
        text-wrap: wrap;
        float: left;
        width: 64%;
        display: flex;
        position: relative;
        top: -25px;
        left: -22px;
    }

    .accolades-modal-text {
        position: relative;
        left: 12%;
        top: -150px;
        width: 100%;
        max-width: 864px;
        height: 100%;
        max-height: 375px;
        font-size: 1rem;
        display: flex;
        align-content: flex-end;
        justify-content: flex-end;
        align-items: flex-end;
        flex-wrap: wrap;
        flex-direction: row;
        float: left;
        scale: 1.2;
    }

    .accolades-modal-text span {
        position: relative;
        top: -62px;
        left: 0%;

    }

    .thumbnail1 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 296px;
        position: relative;
        top: -29px;
    }

    .thumbnail2 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 296px;
        position: relative;
        top: -29px;
    }

    .thumbnail3 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 280px;
        position: relative;
        top: -29px;
    }

    .thumbnail4 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 225px;
        position: relative;
        top: -29px;
    }

    .thumbnail5 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 236px;
        position: relative;
        top: -29px;
    }

    .thumbnail6 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 227px;
        position: relative;
        top: -29px;
    }

    .thumbnail7 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 227px;
        position: relative;
        top: -29px;
    }

    .thumbnail8 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 232px;
        position: relative;
        top: -29px;
    }
}

@media (min-width: 1701px) and (max-width: 1900px) {
    .modal-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        left: 146px;
        top: 135px;
        position: fixed;
        margin: 10px 20px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.7;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
        border: 2px solid #007BFF;
    }

    .left-arrow {

        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .right-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
    }

    .first {
        width: 35%;
        top: -47px;
    }

    .second {
        width: 35%;
        top: -47px;
    }

    .eighth {
        width: 30%;
        top: -47px;
    }

    .first,
    .second,
    .eighth {
        position: relative;
        top: -55px;
        left: 74px;
        scale: 1.1;
    }

    .third,
    .fourth,
    .fifth,
    .sixth,
    .seventh {
        color: #8c0b42;
        position: relative;
        top: -50px;
        left: 74px;
        scale: 1.1;
    }

    .t1:not(.third):not(.fourth):not(.fifth):not(.sixth):not(.seventh) {
        color: #70756f;
        position: relative;
        top: -82px;
        left: 74px;
        scale: 1.1;
    }

    #img01 {
        margin-top: 3px;
        margin-left: 2px;
        text-wrap: wrap;
        float: left;
        width: 64%;
        display: flex;
        position: relative;
        top: -25px;
        left: -22px;
    }

    .accolades-modal-text {
        position: relative;
        left: 12%;
        top: -150px;
        width: 100%;
        max-width: 864px;
        height: 100%;
        max-height: 375px;
        font-size: 1rem;
        display: flex;
        align-content: flex-end;
        justify-content: flex-end;
        align-items: flex-end;
        flex-wrap: wrap;
        flex-direction: row;
        float: left;
        scale: 1.2;
    }

    .accolades-modal-text span {
        position: relative;
        top: -62px;
        left: 0%;
    }

    .thumbnail1 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 296px;
        position: relative;
        top: -29px;
    }

    .thumbnail2 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 296px;
        position: relative;
        top: -29px;
    }

    .thumbnail3 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 280px;
        position: relative;
        top: -29px;
    }

    .thumbnail4 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 225px;
        position: relative;
        top: -29px;
    }

    .thumbnail5 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 236px;
        position: relative;
        top: -29px;
    }

    .thumbnail6 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 227px;
        position: relative;
        top: -29px;
    }

    .thumbnail7 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 227px;
        position: relative;
        top: -29px;
    }

    .thumbnail8 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 232px;
        position: relative;
        top: -29px;
    }
}

@media (min-width: 1601px) and (max-width: 1700px) {
    .modal-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        left: 140px;
        top: 135px;
        position: fixed;
        margin: 10px 20px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.7;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
        border: 2px solid #007BFF;
    }

    .left-arrow {

        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .right-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
    }

    .first {
        width: 35%;
        top: -47px;
    }

    .second {
        width: 35%;
        top: -47px;
    }

    .eighth {
        width: 30%;
        top: -47px;
    }

    .first,
    .second,
    .eighth {
        position: relative;
        top: -65px;
        left: 65px;
        scale: 1.1;
    }

    .third,
    .fourth,
    .fifth,
    .sixth,
    .seventh {
        color: #8c0b42;
        position: relative;
        top: -51px;
        left: 74px;
        scale: 1.1;
    }

    .t1:not(.third):not(.fourth):not(.fifth):not(.sixth):not(.seventh) {
        color: #70756f;
        position: relative;
        top: -82px;
        left: 74px;
        scale: 1.1;
    }

    #img01 {
        margin-top: 3px;
        margin-left: 2px;
        text-wrap: wrap;
        float: left;
        width: 64%;
        display: flex;
        position: relative;
        top: -25px;
        left: -22px;
    }

    .accolades-modal-text {
        position: relative;
        left: 12%;
        top: -150px;
        width: 100%;
        max-width: 864px;
        height: 100%;
        max-height: 375px;
        font-size: 1rem;
        display: flex;
        align-content: flex-end;
        justify-content: flex-end;
        align-items: flex-end;
        flex-wrap: wrap;
        flex-direction: row;
        float: left;
        scale: 1.2;
    }

    .accolades-modal-text span {
        position: relative;
        top: -62px;
        left: 0%;
    }

    .thumbnail1 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 296px;
        position: relative;
        top: -29px;
    }

    .thumbnail2 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 296px;
        position: relative;
        top: -29px;
    }

    .thumbnail3 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 280px;
        position: relative;
        top: -29px;
    }

    .thumbnail4 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 225px;
        position: relative;
        top: -29px;
    }

    .thumbnail5 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 236px;
        position: relative;
        top: -29px;
    }

    .thumbnail6 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 227px;
        position: relative;
        top: -29px;
    }

    .thumbnail7 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 227px;
        position: relative;
        top: -29px;
    }

    .thumbnail8 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 232px;
        position: relative;
        top: -29px;
    }
}





@media (min-width: 1269px) and (max-width: 1600px) {
    .modal-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        left: 96px;
        top: 140px;
        position: fixed;
        margin: 10px 20px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.8;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
        border: 2px solid #007BFF;
    }

    .left-arrow {

        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .right-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
    }

    .first {
        width: 36%;
        top: -47px;
    }

    .second {
        width: 36%;
        top: -47px;
    }

    .eighth {
        width: 31%;
        top: -47px;
    }

    .first,
    .second,
    .eighth,
    .ninth {
        position: relative;
        top: -49px;
        left: 74px;
        scale: 1.1;
        width: 24%;
    }


    .third,
    .fourth,
    .fifth,
    .sixth,
    .seventh {
        position: relative;
        top: -49px;
        left: 74px;
        scale: 1.1;
        width: 22%;
    }

    #img01 {
        margin-top: 3px;
        margin-left: 2px;
        text-wrap: wrap;
        float: left;
        width: 64%;
        display: flex;
        position: relative;
        top: 5px;
        left: -22px;
    }

    .accolades-modal-text {
        position: relative;
        left: 12%;
        top: -150px;
        width: 100%;
        max-width: 864px;
        height: 100%;
        max-height: 375px;
        font-size: 1rem;
        display: flex;
        align-content: flex-end;
        justify-content: flex-end;
        align-items: flex-end;
        flex-wrap: wrap;
        flex-direction: row;
        float: left;
        scale: 1.2;
    }

    .accolades-modal-text span {
        position: relative;
        top: -77px;
        left: 0%;
    }

    .thumbnail1 p,
    .thumbnail2 p,
    .thumbnail3 p,
    .thumbnail4 p,
    .thumbnail5 p,
    .thumbnail6 p,
    .thumbnail7 p,
    .thumbnail8 p,
    .thumbnail9 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 300px;
        position: relative;
        top: -29px;
    }

    .accolades-modal-text ul {
        position: relative;
        top: -252px;
        right: 20px;
        width: 100%;
        max-width: 250px;
        display: flex;
        align-content: flex-end;
        justify-content: flex-end;
        align-items: flex-end;
        flex-wrap: wrap;
        flex-direction: row;
        float: left;
    }

    .accolades-modal-text ul li {
        margin-bottom: 1rem;
        /* space between list items */
    }
}

@media (min-width: 1181px) and (max-width: 1268px) {
    .modal-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        left: 65px;
        top: 150px;
        position: fixed;
        margin: 10px 20px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.8;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
        border: 2px solid #007BFF;
    }

    .left-arrow {

        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .right-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
    }

    .first {
        width: 37%;
        top: -47px;
    }

    .second {
        width: 37%;
        top: -47px;
    }

    .eighth {
        width: 32%;
        top: -47px;
    }

    .first,
    .second,
    .eighth,
    .ninth {
        position: relative;
        top: -49px;
        left: 74px;
        scale: 1.1;
        width: 22%;
    }

    .third,
    .fourth,
    .fifth,
    .sixth,
    .seventh {
        position: relative;
        top: -49px;
        left: 74px;
        scale: 1.1;
        width: 18%;
    }

    #img01 {
        margin-top: 3px;
        margin-left: 2px;
        text-wrap: wrap;
        float: left;
        width: 100%;
        display: flex;
        position: relative;
        top: 5px;
        left: -22px;
    }

    .accolades-modal-text {
        position: relative;
        left: 12%;
        top: -150px;
        width: 100%;
        max-width: 900px;
        height: 100%;
        max-height: 375px;
        font-size: 1rem;
        display: flex;
        align-content: flex-end;
        justify-content: flex-end;
        align-items: flex-end;
        flex-wrap: wrap;
        flex-direction: row;
        float: left;
        scale: 1.2;
    }

    .accolades-modal-text span {
        position: relative;
        top: -77px;
        left: 0%;
    }

    .thumbnail1 p,
    .thumbnail2 p,
    .thumbnail3 p,
    .thumbnail4 p,
    .thumbnail5 p,
    .thumbnail6 p,
    .thumbnail7 p,
    .thumbnail8 p,
    .thumbnail9 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 300px;
        position: relative;
        top: -29px;
    }

    .accolades-modal-text ul {
        position: relative;
        top: -262px;
        right: 20px;
        width: 100%;
        max-width: 250px;
        display: flex;
        align-content: flex-end;
        justify-content: flex-end;
        align-items: flex-end;
        flex-wrap: wrap;
        flex-direction: row;
        float: left;
    }

    .accolades-modal-text ul li {
        margin-bottom: 1rem;
        /* space between list items */
    }
}

@media (min-width: 1041px) and (max-width: 1180px) {
    .modal-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        left: 32px;
        top: 185px;
        position: fixed;
        margin: 10px 20px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.7;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
        border: 2px solid #007BFF;
    }

    .left-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .right-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
    }

    .first {
        width: 37%;
        top: -47px;
    }

    .second {
        width: 37%;
        top: -47px;
    }

    .eighth {
        width: 32%;
        top: -47px;
    }

    .first,
    .second,
    .eighth,
    .ninth {
        position: relative;
        top: -29px;
        left: 74px;
        scale: 1.1;
        width: 22%;
    }

    .third,
    .fourth,
    .fifth,
    .sixth,
    .seventh {
        position: relative;
        top: -29px;
        left: 74px;
        scale: 1.1;
        width: 17%;
    }

    .t1:not(.third):not(.fourth):not(.fifth):not(.sixth):not(.seventh) {
        color: #70756f;
        position: relative;
        top: -49px;
        left: 74px;
        scale: 1.1;
    }

    #img01 {
        margin-top: 3px;
        margin-left: 2px;
        text-wrap: wrap;
        float: left;
        width: 100%;
        display: flex;
        position: relative;
        top: 15px;
        left: -22px;
    }

    .accolades-modal-text {
        position: relative;
        left: 11%;
        top: -150px;
        width: 100%;
        max-width: 900px;
        height: 100%;
        max-height: 375px;
        font-size: 1rem;
        display: flex;
        align-content: flex-end;
        justify-content: flex-end;
        align-items: flex-end;
        flex-wrap: wrap;
        flex-direction: row;
        float: left;
        scale: 1.1;
    }

    .accolades-modal-text span {
        position: relative;
        top: -62px;
        left: 0%;
    }

    .thumbnail1 p,
    .thumbnail2 p,
    .thumbnail3 p,
    .thumbnail4 p,
    .thumbnail5 p,
    .thumbnail6 p,
    .thumbnail7 p,
    .thumbnail8 p,
    .thumbnail9 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 300px;
        position: relative;
        top: -29px;
    }

    /*
    .thumbnail4 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 245px;
        position: relative;
        top: -29px;
    }

    .thumbnail5 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 221px;
        position: relative;
        top: -29px;
    }

    .thumbnail6 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 244px;
        position: relative;
        top: -29px;
    }

    .thumbnail7 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 244px;
        position: relative;
        top: -29px;
    }

    .thumbnail8 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 224px;
        position: relative;
        top: -29px;
    }
    */

    .accolades-modal-text ul {
        position: relative;
        top: -245px;
        right: 20px;
        width: 100%;
        max-width: 250px;
        display: flex;
        align-content: flex-end;
        justify-content: flex-end;
        align-items: flex-end;
        flex-wrap: wrap;
        flex-direction: row;
        float: left;
    }

    .accolades-modal-text ul li {
        margin-bottom: 1rem;
        /* space between list items */
    }
}

@media (min-width: 865px) and (max-width: 1040px) {
    .modal-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        left: -9px;
        top: 175px;
        position: fixed;
        margin: 10px 20px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.6;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #ffffffa1;
        box-shadow: 0 0 30px 0 #8c0b42;
        border: 2px solid #8c0b4336;
    }

    .left-arrow {

        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .right-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
    }

    .first {
        width: 37%;
        top: -47px;
    }

    .second {
        width: 37%;
        top: -47px;
    }

    .eighth {
        width: 30%;
        top: -47px;
    }



    .first,
    .second,
    .eighth,
    .ninth {
        position: relative;
        top: 35px;
        left: 74px;
        scale: 1.2;
        width: 30%;
    }

    .third,
    .fourth,
    .fifth,
    .sixth,
    .seventh {
        position: relative;
        top: 35px;
        left: 74px;
        scale: 1.2;
        width: 22%;
    }

    /*
    .t1:not(.third):not(.fourth):not(.fifth):not(.sixth):not(.seventh) {
        color: #70756f;
        position: relative;
        top: -49px;
        left: 74px;
        scale: 1.2;
    }
    */

    #img01 {
        margin-top: 3px;
        margin-left: 2px;
        text-wrap: wrap;
        float: left;
        width: 100%;
        display: flex;
        position: relative;
        top: 79px;
        left: -22px;
    }

    .accolades-modal-text {
        position: relative;
        left: 6%;
        top: -240px;
        width: 100%;
        max-width: 900px;
        height: 100%;
        max-height: 375px;
        font-size: 1rem;
        display: flex;
        align-content: flex-end;
        justify-content: flex-end;
        align-items: flex-end;
        flex-wrap: wrap;
        flex-direction: row;
        float: left;
    }

    .accolades-modal-text span {
        position: relative;
        top: 0px;
        left: 0%;
    }

    .thumbnail1 p,
    .thumbnail2 p,
    .thumbnail3 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 245px;
        position: relative;
        top: -29px;
    }

    .thumbnail4 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 245px;
        position: relative;
        top: -29px;
    }

    .thumbnail5 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 221px;
        position: relative;
        top: -29px;
    }

    .thumbnail6 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 244px;
        position: relative;
        top: -29px;
    }

    .thumbnail7 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 244px;
        position: relative;
        top: -29px;
    }

    .thumbnail8 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 224px;
        position: relative;
        top: -29px;
    }

    .thumbnail9 p {
        width: 100%;
        max-width: 790px;
        height: 100%;
        max-height: 224px;
        position: relative;
        top: -29px;
    }

    .accolades-modal-text ul {
        position: relative;
        top: -135px;
        right: 20px;
        width: 100%;
        max-width: 250px;
        display: flex;
        align-content: flex-end;
        justify-content: flex-end;
        align-items: flex-end;
        flex-wrap: wrap;
        flex-direction: row;
        float: left;
    }

    .accolades-modal-text ul li {
        margin-bottom: 1rem;
        /* space between list items */
    }
}







@media (min-width: 709px) and (max-width: 864px) {
    .modal-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        /* left: 251px; */
        top: 258px;
        position: fixed;
        margin: 0 auto;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.6;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
        border: 2px solid #007BFF;
    }

    .left-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
        position: relative;
        left: -419px;
    }

    .right-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
        position: relative;
        left: 419px;

    }

    .arrow {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
    }

    .first,
    .second,
    .eighth,
    .ninth {
        position: relative;
        top: -19px;
        left: 24%;
        max-width: 334px;
        width: 100%;
        height: auto;
        scale: 1.2;
    }

    .third,
    .fourth,
    .fifth,
    .sixth,
    .seventh {
        color: #8c0b42;
        position: relative;
        top: -19px;
        left: 33%;
        max-width: 334px;
        width: 100%;
        height: auto;
        scale: 1.2;
    }

    /*
    .t1:not(.third):not(.fourth):not(.fifth):not(.sixth):not(.seventh) {
        color: #70756f;
        position: relative;
        top: -19px;
        left: 24%;
        max-width: 334px;
        width: 100%;
        height: auto;
        scale: 1.2;
    }
    */

    #img01 {
        position: relative;
        margin-top: 0px;
        z-index: 2;
        width: 100%;
        top: -258px;
        left: 0px;
        height: 116%;
        max-height: 400px;
    }

    .accolades-modal-text {
        width: 100%;
        max-width: 571px;
        height: 100%;
        overflow-x: scroll;
        position: relative;
        top: 5px;
        left: 22px;
    }

    .accolades-modal-text span {
        position: relative;
        top: -218px;
        left: 0%;
    }

    .thumbnail1 p,
    .thumbnail2 p,
    .thumbnail3 p,
    .thumbnail4 p,
    .thumbnail5 p,
    .thumbnail6 p,
    .thumbnail7 p,
    .thumbnail8 p,
    .thumbnail9 p {
        width: 100%;
        max-width: 370px;
        height: 100%;
        max-height: 265px;
        position: relative;
        top: 256px;
        z-index: -1;
        left: 17%;
    }

    .accolades-modal-text ul {
        margin-top: 11rem;
        /* adjust spacing as needed */
        margin-left: 4rem;
        width: 100%;
        max-width: 300px;
        height: 100%;
        max-height: 220px;
        justify-content: center;
        align-items: center;
    }

    .accolades-modal-text ul li {
        margin-bottom: 1rem;
        /* space between list items */
    }
}

@media (min-width: 609px) and (max-width: 708px) {
    .modal-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        /* left: 251px; */
        top: 228px;
        position: fixed;
        margin: 0 auto;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.6;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
        border: 2px solid #007BFF;
    }

    .left-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
        position: relative;
        left: -360px;
    }

    .right-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
        position: relative;
        left: 380px;
    }

    .arrow {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
    }

    .first,
    .second,
    .eighth,
    .ninth {
        position: relative;
        top: -19px;
        left: 26%;
        max-width: 334px;
        width: 100%;
        height: auto;
        scale: 1.2;
    }

    .third,
    .fourth,
    .fifth,
    .sixth,
    .seventh {
        color: #8c0b42;
        position: relative;
        top: -19px;
        left: 35%;
        max-width: 334px;
        width: 100%;
        height: auto;
        scale: 1.2;
    }

    /*
    .t1:not(.third):not(.fourth):not(.fifth):not(.sixth):not(.seventh) {
        color: #70756f;
        position: relative;
        top: -19px;
        left: 26%;
        max-width: 334px;
        width: 100%;
        height: auto;
        scale: 1.2;
    }
    */

    #img01 {
        position: relative;
        margin-top: 0px;
        z-index: 2;
        width: 100%;
        top: -269px;
        left: 0px;
        height: 116%;
        max-height: 400px;
    }

    .accolades-modal-text {
        width: 100%;
        max-width: 571px;
        height: 100%;
        overflow-x: scroll;
        position: relative;
        top: 5px;
        left: 22px;
    }

    .accolades-modal-text span {
        position: relative;
        top: -239px;
        left: 0%;
    }

    .thumbnail1 p,
    .thumbnail2 p,
    .thumbnail3 p,
    .thumbnail4 p,
    .thumbnail5 p,
    .thumbnail6 p,
    .thumbnail7 p,
    .thumbnail8 p,
    .thumbnail9 p {
        width: 100%;
        max-width: 370px;
        height: 100%;
        max-height: 265px;
        position: relative;
        top: 256px;
        z-index: -1;
        left: 17%;
    }

    .accolades-modal-text ul {
        margin-top: 11rem;
        /* adjust spacing as needed */
        margin-left: 4rem;
        width: 100%;
        max-width: 300px;
        height: 100%;
        max-height: 220px;
        justify-content: center;
        align-items: center;
    }

    .accolades-modal-text ul li {
        margin-bottom: 1rem;
        /* space between list items */
    }
}

@media (min-width:582px) and (max-width:608px) {
    .modal-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        /* left: 251px; */
        top: 228px;
        position: fixed;
        margin: 0 auto;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.6;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
        border: 2px solid #007BFF;
    }

    .left-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
        position: relative;
        left: -340px;
    }

    .right-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
        position: relative;
        left: 255px;
    }

    .arrow {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
    }

    .first,
    .second,
    .eighth,
    .ninth {
        position: relative;
        top: -19px;
        left: 24%;
        max-width: 334px;
        width: 100%;
        height: auto;
        scale: 1.2;
    }

    .third,
    .fourth,
    .fifth,
    .sixth,
    .seventh {
        position: relative;
        top: -19px;
        left: 24%;
        max-width: 334px;
        width: 100%;
        height: auto;
        scale: 1.2;
    }

    /*
    .t1:not(.third):not(.fourth):not(.fifth):not(.sixth):not(.seventh) {
        color: #70756f;
        position: relative;
        top: -19px;
        left: 24%;
        max-width: 334px;
        width: 100%;
        height: auto;
        scale: 1.2;
    }
    */

    #img01 {
        position: relative;
        margin-top: 0px;
        z-index: 2;
        width: 100%;
        top: -269px;
        left: 0px;
        height: 116%;
        max-height: 400px;
    }

    .accolades-modal-text {
        width: 100%;
        max-width: 571px;
        height: 100%;
        overflow-x: scroll;
        position: relative;
        top: -30px;
        left: -17px;
        scale: 0.9;
        overflow: hidden;
        /* no overflow */
    }

    .accolades-modal-text span {
        position: relative;
        top: -222px;
        left: 0%;
    }

    .thumbnail1 p,
    .thumbnail2 p,
    .thumbnail3 p,
    .thumbnail4 p,
    .thumbnail5 p,
    .thumbnail6 p,
    .thumbnail7 p,
    .thumbnail8 p,
    .thumbnail9 p {
        width: 100%;
        max-width: 370px;
        height: 100%;
        max-height: 265px;
        position: relative;
        top: 256px;
        z-index: -1;
        left: 17%;
    }

    .accolades-modal-text ul {
        margin-top: 11rem;
        /* adjust spacing as needed */
        margin-left: 4rem;
        width: 100%;
        max-width: 300px;
        height: 100%;
        justify-content: center;
        align-items: center;
    }

    .accolades-modal-text ul li {
        margin-bottom: 1rem;
        /* space between list items */
    }
}

@media (min-width:502px) and (max-width:581px) {
    .modal-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        /* left: 251px; */
        top: 228px;
        position: fixed;
        margin: 0 auto;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.6;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
        border: 2px solid #007BFF;
    }

    .left-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
        position: fixed;
        left: -124px;
    }

    .right-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
        position: relative;
        left: 315px;
    }

    .arrow {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
    }

    .first,
    .second,
    .eighth,
    .ninth {
        position: relative;
        top: -19px;
        left: 24%;
        max-width: 334px;
        width: 100%;
        height: auto;
        scale: 1.2;
    }

    .third,
    .fourth,
    .fifth,
    .sixth,
    .seventh {
        position: relative;
        top: -19px;
        left: 24%;
        max-width: 334px;
        width: 100%;
        height: auto;
        scale: 1.2;
    }

    /*
    .t1:not(.third):not(.fourth):not(.fifth):not(.sixth):not(.seventh) {
        color: #70756f;
        position: relative;
        top: -19px;
        left: 24%;
        max-width: 334px;
        width: 100%;
        height: auto;
        scale: 1.2;
    }
    */

    #img01 {
        position: relative;
        margin-top: 0px;
        z-index: 2;
        width: 100%;
        max-width: 500px;
        top: -261px;
        left: 0px;
        height: 99%;
        max-height: 400px;
    }

    .accolades-modal-text {
        width: 100%;
        max-width: 571px;
        height: 100%;
        overflow-x: scroll;
        position: relative;
        top: -30px;
        left: -17px;
        scale: 0.9;
        overflow: hidden;
        /* no overflow */
    }

    .accolades-modal-text span {
        position: relative;
        top: -222px;
        left: 0%;
    }

    .thumbnail1 p,
    .thumbnail2 p,
    .thumbnail3 p,
    .thumbnail4 p,
    .thumbnail5 p,
    .thumbnail6 p,
    .thumbnail7 p,
    .thumbnail8 p,
    .thumbnail9 p {
        width: 100%;
        max-width: 370px;
        height: 100%;
        max-height: 265px;
        position: relative;
        top: 256px;
        z-index: -1;
        left: 17%;
    }

    .accolades-modal-text ul {
        margin-top: 9rem;
        /* adjust spacing as needed */
        margin-left: 4rem;
        width: 100%;
        max-width: 300px;
        height: 100%;
        justify-content: center;
        align-items: center;
    }

    .accolades-modal-text ul li {
        margin-bottom: 1rem;
        /* space between list items */
    }

}

@media (min-width:480px) and (max-width:501px) {
    .modal-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        /* left: 251px; */
        top: 228px;
        position: fixed;
        margin: 0 auto;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.6;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
        border: 2px solid #007BFF;
    }

    .left-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
        position: fixed;
        left: -124px;
    }

    .right-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
        position: relative;
        left: 331px;
    }

    .arrow {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
    }

    .first,
    .second,
    .eighth,
    .ninth {
        position: relative;
        top: -19px;
        left: 24%;
        max-width: 334px;
        width: 100%;
        height: auto;
        scale: 1.2;
    }

    .third,
    .fourth,
    .fifth,
    .sixth,
    .seventh {
        position: relative;
        top: -19px;
        left: 24%;
        max-width: 334px;
        width: 100%;
        height: auto;
        scale: 1.2;
    }

    /*
    .t1:not(.third):not(.fourth):not(.fifth):not(.sixth):not(.seventh) {
        color: #70756f;
        position: relative;
        top: -19px;
        left: 24%;
        max-width: 334px;
        width: 100%;
        height: auto;
        scale: 1.2;
    }
    */

    #img01 {
        position: relative;
        margin-top: 0px;
        z-index: 2;
        width: 100%;
        top: -261px;
        left: 0px;
        height: 99%;
        max-height: 400px;
    }

    .accolades-modal-text {
        width: 100%;
        max-width: 571px;
        height: 100%;
        overflow-x: scroll;
        position: relative;
        top: -30px;
        left: -17px;
        scale: 0.9;
        overflow: hidden;
        /* no overflow */
    }

    .accolades-modal-text span {
        position: relative;
        top: -222px;
        left: 0%;
    }

    .thumbnail1 p,
    .thumbnail2 p,
    .thumbnail3 p,
    .thumbnail4 p,
    .thumbnail5 p,
    .thumbnail6 p,
    .thumbnail7 p,
    .thumbnail8 p,
    .thumbnail9 p {
        width: 100%;
        max-width: 370px;
        height: 100%;
        max-height: 265px;
        position: relative;
        top: 256px;
        z-index: -1;
        left: 17%;
    }

    .accolades-modal-text ul {
        margin-top: 9rem;
        /* adjust spacing as needed */
        margin-left: 4rem;
        width: 100%;
        max-width: 300px;
        height: 100%;
        justify-content: center;
        align-items: center;
    }

    .accolades-modal-text ul li {
        margin-bottom: 1rem;
        /* space between list items */
    }

}

@media (min-width:401px) and (max-width:479px) {
    .modal-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        /* left: 251px; */
        top: 744px;
        left: 0px;
        position: fixed;
        margin: 0 37px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.6;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
        /* blue */
        border: 2px solid #007BFF;
    }

    .left-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        /* white */
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .right-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
        /* blue */
    }

    .first,
    .second,
    .eighth,
    .ninth {
        position: relative;
        top: 18px;
        left: 24%;
        max-width: 334px;
        width: 100%;
        height: auto;
        scale: 1.3;
    }

    .third,
    .fourth,
    .fifth,
    .sixth,
    .seventh {
        /* color: #8c0b42; deep magenta / wine */
        position: relative;
        top: 18px;
        left: 24%;
        max-width: 334px;
        width: 100%;
        height: auto;
        scale: 1.3;
    }

    /* .t1:not(.third):not(.fourth):not(.fifth):not(.sixth):not(.seventh) {
        color: #70756f;
        position: relative;
        top: -19px;
        left: 24%;
        max-width: 334px;
        width: 100%;
        height: auto;
        scale: 1.2;
    } */

    #img01 {
        position: relative;
        margin-top: 0px;
        z-index: 2;
        width: 100%;
        top: -235px;
        left: 0px;
        height: 86%;
        max-height: 400px;
    }

    .accolades-modal-text {
        width: 100%;
        max-width: 452px;
        height: 100%;
        /* overflow-x: scroll; */
        position: relative;
        top: -108px;
        left: -35px;
        scale: 0.8;
    }

    .accolades-modal-text span {
        position: relative;
        top: -201px;
        left: 0%;
    }

    .accolades-modal-text ul {
        margin-top: 9rem;
        /* adjust spacing as needed */
        margin-left: 2rem;
        width: 100%;
        max-width: 280px;
        height: 100%;
        justify-content: center;
        align-items: center;
    }


    .accolades-modal-text ul li {
        margin-bottom: 1rem;
        /* space between list items */
    }

    .thumbnail1 p,
    .thumbnail2 p,
    .thumbnail3 p,
    .thumbnail4 p,
    .thumbnail5 p,
    .thumbnail6 p,
    .thumbnail7 p,
    .thumbnail8 p,
    .thumbnail9 p {
        width: 100%;
        max-width: 314px;
        height: 100%;
        max-height: 301px;
        position: relative;
        top: 267px;
        z-index: -1;
        left: 17%;
    }


}

/* iPhone SE viewport size Width 375px x Height 553px  */
@media (min-width:320px) and (max-width:400px) {
    .modal-arrows {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        padding: 8px;
        /* left: 251px; */
        top: 754px;
        position: fixed;
        margin: 0 37px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        scale: 0.6;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
        border: 2px solid #007BFF;
    }

    .left-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .right-arrow {
        cursor: pointer;
        margin: 10px 10px;
        color: #ffffff;
        border: 2px solid white;
        width: 31px;
        border-radius: 7px;
        height: 31px;
        font-size: 20px;
        transition: 60ms ease-in-out;
    }

    .arrow {
        padding: 6px;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .left-arrow:hover,
    .right-arrow:hover {
        color: #007BFF;
    }

 /* modal titles = 3 rows  */
    .first,
    .second,
    .eighth,
    .ninth {
        position: relative;
        top: 4px;
        left: 26%;
        max-width: 184px;
        width: 100%;
        height: auto;
        scale: 1.5;
    }

/* modal titles = 2 rows  */
    .third,
    .fourth,
    .fifth,
    .sixth,
    .seventh {
        position: relative;
        top: 4px;
        left: 26%;
        max-width: 124px;
        width: 100%;
        height: auto;
        scale: 1.5;
    }

  
    .t1:not(.third):not(.fourth):not(.fifth):not(.sixth):not(.seventh) {
        color: #70756f;
        position: relative;
        top: -19px;
        left: 24%;
        max-width: 334px;
        width: 100%;
        height: auto;
        scale: 1.3;
    }
  
 /* modal images = all */
    #img01 {
        position: relative;
        margin-top: 0px;
        z-index: 2;
        width: 100%;
        top: -245px;
        left: -5px;
        height: 70%;
        max-height: 300px;
    }

    .accolades-modal-text {
        width: 100%;
        height: 100%;
        position: relative;
        top: -108px;
        left: -35px;
        scale: 0.8;
    }


    .thumbnail1 p,
    .thumbnail2 p,
    .thumbnail3 p,
    .thumbnail4 p,
    .thumbnail5 p,
    .thumbnail6 p,
    .thumbnail7 p,
    .thumbnail8 p,
    .thumbnail9 p {
        width: 100%;
        max-width: 340px;
        height: 100%;
        max-height: 369px;
        position: relative;
        top: 267px;
        z-index: -1;
        left: 17%;
    }

    .accolades-modal-text ul {
        margin-top: 1rem;
        /* adjust spacing as needed */
        margin-left: 2rem;
        width: 100%;
        max-width: 375px;
        height: 100%;
        justify-content: center;
        align-items: center;
        position: relative;
        top: 75px;
        left: 0px;
    }


    .accolades-modal-text ul li {
        margin-bottom: 1rem;
        font-size: 1.1rem;
        /* space between list items */
    }

    .accolades-modal-text span {
        position: relative;
        top: -215px;
        left: 0%;
        font-size: 1.1rem;
    }

    #t1 strong {
       color: rgb(255 255 255 / 50%);
}

}

/* 06 - End of 06 Accolades */






/* 07 - Contact */
.contact {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/contact-visual3.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

.contact--lockup {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 900px;
    max-width: 75%;
    height: 100%;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin: 0 auto;
}


.contact--lockup .mod {
    text-align: center;
    background-color: #0c0c0c;
    box-shadow: 0 0 30px 0 #8c0b42;
    padding: 20px;
}

.contact--lockup .mod--information p,
.contact--lockup .mod--information a {
    display: block;
    margin: 14px 0;
    text-decoration: none;
    color: #fff;
}

.contact--lockup .mod--information p {
    margin-top: 0
}

.contact--lockup .mod--options {
    margin: 0;
    padding: 0;
    list-style: none
}

.contact--lockup .mod--options>li {
    width: 130px;
    margin: 0 auto 25px auto
}

.contact--lockup .mod--options li:nth-child(1) {
    background-color: #8c0b42;
}

.contact--lockup .mod--options li:nth-child(2) {
    background-color: #FFD700;
}

.contact--lockup .mod--options li:nth-child(3) {
    margin-bottom: 0;
    background-color: #8c0b42;
    text-transform: uppercase
}

.contact--lockup .mod--options a {
    display: block;
    width: 100%;
    padding: 8px 0;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    background-color: #000000;
    border: 2px solid #8c0b42;
    transition: background-color 0.3s, color 0.3s;
    font-size: 1rem;
}

/* New CSS rules for hover effect */
.contact--lockup .mod--options a:hover {
    background-color: #8c0b42;
    color: #ffffff;
}



.pagination {
    position: absolute;
    top: 687px;
    left: 532px;
    transform: translateY(-50%);
    z-index: 0;
}

.pagination a {
    color: #ffffff;
    text-decoration: none;
    background-color: #0c0c0c;
    box-shadow: 0 0 30px 0 #8c0b42;
    padding: 8px 12px;
    margin-right: 5px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.pagination a.active,
.pagination a:hover {
    background-color: #8c0b42;

}



.content-box {
    padding: 20px;
    margin-top: 20px;
    color: #858585;
    width: 269px;
    height: 110px;
    position: relative;
    left: 508px;
    top: -526px;
    z-index: 0;
    background-color: #00000069;
    border-radius: 22px;
    text-align: center;
}

.contact-symbol {
    margin-right: 10px;
    /* Adjust as needed */
    font-size: 28px;
    /* Adjust the symbol size */
    position: relative;
    top: -18px;
    right: 4px;
}


.talking {
    margin-right: 10px;
    /* Adjust as needed */
    position: relative;
    top: -16px;
    right: 4px;
}

.calendly-overlay .calendly-popup-close {
    background: url(/assets/external/close-icon.svg) no-repeat;
    background-size: contain;
    color: #fff;
    cursor: pointer;
    height: 19px;
    position: absolute;
    right: 356px;
    top: 91px;
    width: 19px;
}

@media (min-width: 1901px) {
    .content-box {
        width: 17%;
        margin: 15px auto;
        position: relative;
        top: -581px;
        left: -15%;
    }

    .pagination {
        position: relative;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        top: -331px;
        left: -16%;
    }

    .contact--lockup {
        margin: 20px auto;
        /* Center it */
        width: 90%;
        /* Adjust width for smaller screens */
        text-align: center;
        position: relative;
        left: -100px;
    }

    .mod {
        position: relative;
        top: -24px;
        left: -30px;
    }

    .talkie {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: 50px;
        left: -264px;
        z-index: 100;
        width: 100%;
    }

    .talkie h1 {
        position: relative;
        top: 84px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
    }

    .talkie p {
        position: relative;
        top: 42px;
        width: 100%;
        max-width: 400px;
        left: 115px;
        font-size: 12px;
    }
}

@media (min-width: 1701px) and (max-width: 1900px) {
    .content-box {
        width: 17%;
        margin: 15px auto;
        position: relative;
        top: -581px;
        left: -15%;
    }

    .pagination {
        position: relative;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        top: -331px;
        left: -16%;
    }

    .contact--lockup {
        margin: 20px auto;
        /* Center it */
        width: 90%;
        /* Adjust width for smaller screens */
        text-align: center;
        /* Keep text centered */
    }

    .mod {
        position: relative;
        top: -24px;
        left: -30px;
    }

    .talkie {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: 50px;
        left: -264px;
        z-index: 100;
        width: 100%;
    }

    .talkie h1 {
        position: relative;
        top: 84px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
    }

    .talkie p {
        position: relative;
        top: 42px;
        width: 100%;
        max-width: 400px;
        left: 115px;
        font-size: 12px;
    }
}

@media (min-width: 1601px) and (max-width: 1700px) {
    .content-box {
        width: 25%;
        margin: 15px auto;
        position: relative;
        top: -581px;
        left: -15%;
    }

    .pagination {
        position: relative;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        top: -331px;
        left: -16%;
    }

    .contact--lockup {
        margin: 20px auto;
        /* Center it */
        width: 90%;
        /* Adjust width for smaller screens */
        text-align: center;
        /* Keep text centered */
    }

    .mod {
        position: relative;
        top: -24px;
        left: 30px;
    }

    .talkie {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: 50px;
        left: -264px;
        z-index: 100;
        width: 100%;
    }

    .talkie h1 {
        position: relative;
        top: 84px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
    }

    .talkie p {
        position: relative;
        top: 42px;
        width: 100%;
        max-width: 400px;
        left: 115px;
        font-size: 12px;
    }
}

@media (min-width: 1401px) and (max-width: 1600px) {
    .content-box {
        width: 25%;
        margin: 15px auto;
        position: relative;
        top: -581px;
        left: -15%;
    }

    .pagination {
        position: relative;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        top: -331px;
        left: -16%;
    }

    .contact--lockup {
        margin: 20px auto;
        /* Center it */
        width: 90%;
        /* Adjust width for smaller screens */
        text-align: center;
        /* Keep text centered */
    }

    .mod {
        position: relative;
        top: -24px;
        left: 30px;
    }

    .talkie {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: 50px;
        left: -264px;
        z-index: 100;
        width: 100%;
    }

    .talkie h1 {
        position: relative;
        top: 84px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
    }

    .talkie p {
        position: relative;
        top: 42px;
        width: 100%;
        max-width: 400px;
        left: 115px;
        font-size: 12px;
    }
}

@media (min-width: 1269px) and (max-width: 1400px) {
    .content-box {
        width: 25%;
        margin: 15px auto;
        position: relative;
        top: -581px;
        left: -17%;
    }

    .pagination {
        position: relative;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        top: -331px;
        left: -17%;
    }

    .contact--lockup {
        margin: 20px auto;
        /* Center it */
        width: 90%;
        /* Adjust width for smaller screens */
        text-align: center;
        /* Keep text centered */
    }

    .mod {
        position: relative;
        top: -24px;
        left: 30px;
    }

    .talkie {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: 50px;
        left: -264px;
        z-index: 100;
        width: 100%;
    }

    .talkie h1 {
        position: relative;
        top: 84px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
    }

    .talkie p {
        position: relative;
        top: 42px;
        width: 100%;
        max-width: 400px;
        left: 115px;
        font-size: 12px;
    }
}

@media (min-width: 1181px) and (max-width: 1268px) {
    .content-box {
        width: 25%;
        margin: 15px auto;
        position: relative;
        top: -581px;
        left: -19%;
    }

    .pagination {
        position: relative;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        top: -331px;
        left: -19%;
    }

    .contact--lockup {
        margin: 20px auto;
        /* Center it */
        width: 90%;
        /* Adjust width for smaller screens */
        text-align: center;
        /* Keep text centered */
    }

    .mod {
        position: relative;
        top: -24px;
        left: 30px;
    }

    .talkie {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: 50px;
        left: -264px;
        z-index: 100;
        width: 100%;
    }

    .talkie h1 {
        position: relative;
        top: 84px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
    }

    .talkie p {
        position: relative;
        top: 42px;
        width: 100%;
        max-width: 400px;
        left: 115px;
        font-size: 12px;
    }
}



@media (min-width: 1009px) and (max-width: 1180px) {
    .content-box {
        width: 25%;
        margin: 15px auto;
        position: relative;
        top: -661px;
        left: -20%;
    }

    .pagination {
        position: relative;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        top: -331px;
        left: -20%;
    }

    .contact--lockup {
        margin: 20px auto;
        /* Center it */
        width: 90%;
        /* Adjust width for smaller screens */
        text-align: center;
        /* Keep text centered */
    }

    .mod {
        position: relative;
        top: -104px;
        left: 30px;
    }

    .content-box {
        width: 25%;
        margin: 15px auto;
        position: relative;
        top: -581px;
        left: -29%;
    }

    .pagination {
        position: relative;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        top: -344px;
        left: -29%;
    }

    .contact--lockup {
        margin: 20px auto;
        /* Center it */
        width: 90%;
        /* Adjust width for smaller screens */
        text-align: center;
        /* Keep text centered */
    }

    .mod {
        position: relative;
        top: -24px;
        left: 30px;
    }

    .talkie {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: 50px;
        left: -264px;
        z-index: 100;
        width: 100%;
    }

    .talkie h1 {
        position: relative;
        top: 84px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
    }

    .talkie p {
        position: relative;
        top: 42px;
        width: 100%;
        max-width: 400px;
        left: 115px;
        font-size: 12px;
    }
}

@media (min-width: 865px) and (max-width: 1008px) {
    .content-box {
        width: 25%;
        margin: 15px auto;
        position: relative;
        top: -581px;
        left: -25%;
    }

    .pagination {
        position: relative;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        top: -331px;
        left: -26%;
    }

    .content-box {
        width: 25%;
        margin: 15px auto;
        position: relative;
        top: -581px;
        left: -29%;
    }

    .pagination {
        position: relative;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        top: -344px;
        left: -29%;
    }

    .contact--lockup {
        margin: 20px auto;
        /* Center it */
        width: 90%;
        /* Adjust width for smaller screens */
        text-align: center;
        /* Keep text centered */
    }

    .mod {
        position: relative;
        top: -104px;
        left: 30px;
    }

    .talkie {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: 50px;
        left: -264px;
        z-index: 100;
        width: 100%;
    }

    .talkie h1 {
        position: relative;
        top: 84px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
    }

    .talkie p {
        position: relative;
        top: 42px;
        width: 100%;
        max-width: 400px;
        left: 115px;
        font-size: 12px;
    }
}

@media (min-width: 709px) and (max-width: 864px) {
    .content-box {
        width: 30%;
        margin: 15px auto;
        position: relative;
        top: -601px;
        left: -29%;
    }

    .pagination {
        position: relative;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        top: -344px;
        left: -29%;
    }

    .contact--lockup {
        margin: 20px auto;
        /* Center it */
        width: 90%;
        /* Adjust width for smaller screens */
        text-align: center;
        /* Keep text centered */
    }

    .mod {
        position: relative;
        top: -104px;
        left: 30px;
    }

    .talkie {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: 50px;
        left: -310px;
        z-index: 100;
        width: 100%;
    }

    .talkie h1 {
        position: relative;
        top: 84px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;

    }

    .talkie p {
        position: relative;
        top: 47px;
        width: 100%;
        max-width: 400px;
        left: 100px;
        font-size: 12px;
    }
}





@media (min-width: 609px) and (max-width: 708px) {
    .content-box {
        width: 63%;
        margin: 15px auto;
        position: relative;
        top: -993px;
        left: 2%;
        display: none;
    }

    .pagination {
        position: relative;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        top: -234px;
        left: 0%;
        display: none;
    }

    .contact--lockup {
        margin: 20px auto;
        /* Center it */
        width: 90%;
        /* Adjust width for smaller screens */
        text-align: center;
        /* Keep text centered */
    }

    .mod {
        position: relative;
        top: -119px;
    }

    .talkie {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: 50px;
        left: -264px;
        z-index: 100;
        width: 100%;
    }

    .talkie h1 {
        position: relative;
        top: 84px;
        width: 100%;
        max-width: 400px;
        left: -105px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;
    }

    .talkie p {
        position: relative;
        top: 47px;
        width: 100%;
        max-width: 400px;
        left: 100px;
        font-size: 12px;
    }
}

@media (min-width:582px) and (max-width:608px) {
    .content-box {
        width: 63%;
        margin: 15px auto;
        position: relative;
        top: -993px;
        left: 2%;
        display: none;
    }

    .pagination {
        position: relative;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        top: -234px;
        left: 0%;
        display: none;
    }

    .contact--lockup {
        margin: 20px auto;
        /* Center it */
        width: 90%;
        /* Adjust width for smaller screens */
        text-align: center;
        /* Keep text centered */
    }

    .mod {
        position: relative;
        top: -119px;
    }

    .talkie {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: 50px;
        left: -274px;
        z-index: 100;
        width: 100%;
    }

    .talkie h1 {
        position: relative;
        top: 84px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;

    }

    .talkie p {
        position: relative;
        top: 47px;
        width: 100%;
        max-width: 400px;
        left: 100px;
        font-size: 12px;
    }


}

@media (min-width:502px) and (max-width:581px) {
    .content-box {
        width: 63%;
        margin: 15px auto;
        position: relative;
        top: -993px;
        left: 2%;
        display: none;
    }

    .pagination {
        position: relative;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        top: -234px;
        left: 0%;
        display: none;
    }

    .contact--lockup {
        margin: 20px auto;
        /* Center it */
        width: 90%;
        /* Adjust width for smaller screens */
        text-align: center;
        /* Keep text centered */
    }

    .mod {
        position: relative;
        top: -119px;
    }

    .talkie {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: 50px;
        left: -264px;
        z-index: 100;
        width: 100%;
    }

    .talkie h1 {
        position: relative;
        top: 84px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;

    }

    .talkie p {
        position: relative;
        top: 47px;
        width: 100%;
        max-width: 400px;
        left: 100px;
        font-size: 12px;
    }
}

@media (min-width:469px) and (max-width:501px) {
    .content-box {
        width: 63%;
        margin: 15px auto;
        position: relative;
        top: -993px;
        left: 2%;
        display: none;
    }

    .pagination {
        position: relative;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        top: -234px;
        left: 0%;
        display: none;
    }

    .contact--lockup {
        margin: 20px auto;
        /* Center it */
        width: 90%;
        /* Adjust width for smaller screens */
        text-align: center;
        /* Keep text centered */
    }

    .mod {
        position: relative;
        top: -119px;
    }

    .talkie {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: 50px;
        left: -278px;
        z-index: 100;
        width: 100%;
    }

    .talkie h1 {
        position: relative;
        top: 84px;
        width: 100%;
        max-width: 400px;
        left: -100px;
        text-align: center;
        margin: 0 auto;
        z-index: 100;
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;

    }

    .talkie p {
        position: relative;
        top: 46px;
        width: 100%;
        max-width: 400px;
        left: 105px;
        font-size: 12px;
    }
}

@media (min-width: 401px) and (max-width: 468px) {
    .content-box {
        width: 63%;
        margin: 15px auto;
        position: relative;
        top: -993px;
        left: 2%;
        display: none;
    }

    .pagination {
        position: relative;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        top: -234px;
        left: 0%;
        display: none;
    }

    .contact--lockup {
        margin: 20px auto;
        /* Center it */
        width: 90%;
        /* Adjust width for smaller screens */
        text-align: center;
        /* Keep text centered */
    }

    .mod {
        position: relative;
        top: -119px;
    }

    .talkie {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: 100px;
        left: -264px;
        z-index: 100;
        width: 100%;
    }

    .talkie h1 {
        position: relative;
        top: 4px;
        width: 100%;
        left: 0px;
        text-align: center;
        margin: 0 auto;
        font-size: 1.5rem;
        font-weight: 900;
        text-align: center;
        margin: 0.5rem 0 0.25rem 0;
        line-height: 1.1;

    }

    .talkie p {
        position: relative;
        top: -14px;
        width: 100%;
        left: 4px;
        font-size: 12px;
    }
}

/* iPhone SE viewport size Width 375px x Height 553px  */
@media (min-width: 320px) and (max-width: 400px) {

/* title + subtitle */
    .contact h1 {
        position: relative;
        top: 28px;
        width: 100%;
        left: 59px;
        text-align: left;
        font-size: 1.5rem;
        font-weight: 900;
    }

    .und {
        position: relative;
        top:11px;
        width: 100%;
        left: 59px;
        font-size: 1.1rem;
        font-weight: 300;
        background-color: #00000085;
        box-shadow: 0 0 30px 0 #070707;
        color: rgb(255 255 255 / 50%);

    }



/* pagination info box */
    .content-box {
        width: 63%;
        margin: 15px auto;
        position: relative;
        top: -993px;
        left: 2%;
        display: none;
    }

/* pagination numbers */
    .pagination {
        position: relative;
        margin: 10px auto;
        display: flex;
        justify-content: center;
        top: -234px;
        left: 0%;
        display: none;
    }



/* right box  */
    .contact--lockup {
        margin: 20px auto;
        width: 100%;
        min-width: 320px;
        height:100%;
        min-height: 540px;
        text-align: center;
        scale: 0.9;
    }

/* right box positioning */
    .mod {
        position: relative;
        top:-110px;

    }





/* mod--information*/
.mod--information {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        top: -30px;
        left: 0px;
        z-index: 100;
        width: 100%;
        height:15%;
}

/* my name*/
.contact--lockup .mod--information h2 {
    font-size: 1.5rem;
    font-weight: 700;
    width: 100%;
    height: 15%;
    position: relative;
    top: 15px;
}

/* address*/
.contact--lockup .mod--information p {
   font-size: 1rem;
   font-weight: 500;
   width: 60%;
}

/* phone number */
.contact--lockup .mod--information a {
   font-size: 1.1rem;
   font-weight: 700;
}



.contact--lockup .mod--options {
  position: relative;
  top: -20px;
  left: 0px;
}

}

/* end of Contact */




/* 08 - Hire */
.talkies {
    position: relative;
    top: -36px;
    width: 83%;
    left: 10%;
}

.hire {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 700px;
    max-width: 75%;
    height: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto
}

@media (max-width: 1180px) {
    .hire {
        max-width: 100%
    }
}

.hire h2 {
    margin: 0 0 20px 0;
    font-size: 30px;
    text-align: center
}




.skills-request {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff
}

.skills-request input[type="submit"] {
    width: 400px;
    max-width: 100%;
    line-height: 50px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    background-color: #8c0b42;
    border: 2px solid #ffffff;
    border: none;
    border-radius: 0
}

.skills-request input[type="submit"]:focus {
    outline: none
}



.skills-request--options {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 30px 0
}

.skills-request--options .options-a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.skills-request--options .options-b {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 72%;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.skills-request--options label {
    display: block;
    width: 200px;
    margin-bottom: 30px;
    line-height: 50px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    background-color: #000000;
    border: 2px solid #8c0b42;
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
    -webkit-transition: background-color .2s ease-in-out, border-color .2s ease-in-out;
    transition: background-color .2s ease-in-out, border-color .2s ease-in-out
}

.skills-request--options label svg {
    position: relative;
    left: -5px;
    width: 0;
    fill: #fff;
    -webkit-transition: width .2s ease-in-out;
    transition: width .2s ease-in-out
}

.skills-request--options input[type="checkbox"] {
    display: none
}

.skills-request--options input[type="checkbox"]:checked+label {
    background-color: #8c0b42;
    color: #ffffff;
}

.skills-request--options input[type="checkbox"]:checked+label svg {
    width: 15px
}



.skills-request--information {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 60px
}

.skills-request--information .information-name,
.skills-request--information .information-email {
    position: relative;
    width: 45%;
    height: 50px;
    font-size: 30px;
    font-weight: 300
}

.skills-request--information input[type="text"],
.skills-request--information input[type="email"] {
    width: 100%;
    padding: 0 0 5px 0;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #fff;
    border-radius: 0
}

.skills-request--information input[type="text"]:focus,
.skills-request--information input[type="email"]:focus {
    outline: none;
    background-color: #0c0c0c
}

.skills-request--information label {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    -webkit-transition: top .2s ease-in-out, font-size .2s ease-in-out;
    transition: top .2s ease-in-out, font-size .2s ease-in-out
}

.skills-request--information input:focus+label,
.skills-request--information input.has-value+label {
    top: -15px;
    font-size: 14px
}

input {
    line-height: normal;
    font-size: 19px;
    text-align: center;
}

@media (min-width: 768px) {
    .skills-request--options {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
        justify-content: space-around
    }

    .skills-request--options .options-a,
    .skills-request--options .options-b {
        display: block;
        width: auto
    }

    .talkies p {
        position: relative;
        top: 18px;
        left: 30px;
    }
}

@media (max-width: 767px) {
    .skills-request--options {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
        justify-content: space-around
    }

    .skills-request--options .options-a,
    .skills-request--options .options-b {
        display: block;
        width: auto
    }

    .talkies p {
        position: relative;
        top: 18px;
        left: 30px;
    }
}

@media (max-width: 600px) {
    .skills-request--options {
        margin: 20px 0
    }
}

@media (max-width: 600px) and (max-width: 415px) {
    .skills-request--options {
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

@media (max-width: 600px) {
    .skills-request--options label {
        width: 150px;
        margin-bottom: 15px;
        font-size: 14px
    }

    .skills-request--options input[type="checkbox"]:checked+label svg {
        width: 12px
    }

    .skills-request--information {
        margin-bottom: 30px
    }

    .skills-request--information .information-name,
    .skills-request--information .information-email {
        height: 40px;
        font-size: 24px
    }
}

/* iPhone SE viewport size Width 375px x Height 553px  */

@media (max-width: 600px) {
    .skills-request--options {
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        scale: 0.9;
    }

    .skills-request--options label {
        width: 150px;
        margin-bottom: 15px;
        font-size: 14px
    }

    .skills-request--options input[type="checkbox"]:checked+label svg {
        width: 12px
    }

    .skills-request--information {
        margin-bottom: 30px
    }

    .skills-request--information .information-name,
    .skills-request--information .information-email {
        height: 40px;
        font-size: 24px
    }

    .talkies {
        position: relative;
        top: -96px;
        width: 83%;
        left: 10%;
    }

    .talkies h1 {
        position: relative;
        top: 54px;
        width: 100%;
        max-width: 400px;
        left: 60px;
        text-align: center;
        margin: 0 auto;
    }

    .talkies p {
        position: relative;
        top: 82px;
        width: 100%;
        max-width: 400px;
        left: -60px;
        font-size: 12px;
    }
}


/* End of 08 - Hire */





.perspective {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.perspective--modalview {
    position: fixed;
    -webkit-perspective: 1500px;
    perspective: 1500px
}

.container {
    position: relative;
    -webkit-transform: translateZ(0) translateX(0) rotateY(0deg);
    transform: translateZ(0) translateX(0) rotateY(0deg);
    min-height: 100%;
    outline: 30px solid #0f33ff;
    -webkit-transition: -webkit-transform .4s;
    transition: -webkit-transform .4s;
    transition: transform .4s;
    transition: transform .4s, -webkit-transform .4s
}

.modalview .container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.effect-rotate-left .container {
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    -webkit-transition: -webkit-transform .4s;
    transition: -webkit-transform .4s;
    transition: transform .4s;
    transition: transform .4s, -webkit-transform .4s
}

.effect-rotate-left--animate .container {
    -webkit-transform: translateZ(-1800px) translateX(-50%) rotateY(45deg);
    transform: translateZ(-1800px) translateX(-50%) rotateY(45deg);
    outline: 30px solid #0f33ff
}



/* Right menu */

.outer-nav {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
    visibility: hidden;
    -webkit-transition: visibility 0s .2s;
    transition: visibility 0s .2s
}

.outer-nav.is-vis {
    visibility: visible;

}

.outer-nav--return {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    cursor: pointer;
    z-index: 11
}

.outer-nav--return.is-vis {
    display: block;

}

.outer-nav>li {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateX(350px) translateZ(-1000px);
    transform: translateX(350px) translateZ(-1000px);
    font-size: 3.4375rem;
    font-weight: 900;
    opacity: 0;
    cursor: pointer;
    -webkit-transition: opacity .2s, -webkit-transform .2s;
    transition: opacity .2s, -webkit-transform .2s;
    transition: transform .2s, opacity .2s;
    transition: transform .2s, opacity .2s, -webkit-transform .2s
}

.outer-nav>li.is-vis {
    -webkit-transform: translateX(0) translateZ(0);
    transform: translateX(0) translateZ(0);
    opacity: 1;
    -webkit-transition: opacity .4s, -webkit-transform .4s;
    transition: opacity .4s, -webkit-transform .4s;
    transition: transform .4s, opacity .4s;
    transition: transform .4s, opacity .4s, -webkit-transform .4s
}

.outer-nav>li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -25%);
    transform: translate(-50%, -25%);
    width: 110%;
    height: 12px;
    opacity: 0;
    background-color: #0f33ff57;
}

.outer-nav>li.is-active::before {
    opacity: 1
}

@media (max-width: 767px) {
    .outer-nav>li {
        font-size: 2rem;
    }
}

@media (max-width: 600px) {
    .outer-nav>li {
        font-size: 1.5rem;
    }

    @media (max-width: 330px) {
        .outer-nav>li {
            font-size: 1rem;
        }
    }
}



.waist {
    opacity: 0.0;
}

.outer-nav li.is-vis:nth-child(2) {
    -webkit-transition-delay: .04s;
    transition-delay: .04s
}

.outer-nav li.is-vis:nth-child(3) {
    -webkit-transition-delay: .08s;
    transition-delay: .08s
}


.outer-nav li.is-vis:nth-child(4) {
    -webkit-transition-delay: .12s;
    transition-delay: .12s
}

.outer-nav li.is-vis:nth-child(5) {
    -webkit-transition-delay: .16s;
    transition-delay: .16s
}

.outer-nav li.is-vis:nth-child(6) {
    -webkit-transition-delay: .20s;
    transition-delay: .20s
}

.outer-nav li.is-vis:nth-child(7) {
    -webkit-transition-delay: .24s;
    transition-delay: .24s
}

.outer-nav li.is-vis:nth-child(8) {
    -webkit-transition-delay: .28s;
    transition-delay: .28s
}


/* End of Right Menu */