body {
    background-color: #000000;
}

/*
@font-face {
    font-family: gilroyFont;
    src: url(../fonts/gilroy-bold-webfont.woff);
}

@font-face {
    font-family: gilroyRegular;
    src: url(../fonts/gilroy-regular-webfont.woff);
}

@font-face {
    font-family: gilroyMedium;
    src: url(../fonts/gilroy-medium-webfont.woff);
}
*/



@font-face {
    font-family: 'gilroy-Regular';
    src: url(../fonts/gilroy-regular-webfont.woff);
}

@font-face {
    font-family: 'gilroyFont';
    src: url(../fonts/gilroy-bold-webfont.woff);
}

@font-face {
    font-family: 'gilroyMedium';
    src: url(../fonts/gilroy-medium-webfont.woff);
}


@font-face {
    font-family: 'Gilroy';
    src: url(../fonts/gilroy-bold-webfont.woff);
}

@font-face {
    font-family: 'Gilroy-Bold';
    src: url(../fonts/gilroy-bold-webfont.woff);
}




/* Style the header with a black background and some padding */


.header {
    overflow: hidden;
    background-color: #000000;
    padding: 20px 100px;
    margin-top: -20px;
}


/* Style the header links */

.header a {
    float: left;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 16px;
    line-height: 25px;
    border-radius: 4px;
}

.header a.headerLogo {}


/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */

.header a.logo {
    font-size: 25px;
    font-weight: bold;
}


/* Change the background color on mouse-over */

.header a:hover {
    /* background-color: #ddd; */
    color: #009BF0;
}


/* Style the active/current link*/

.header a.active {
    /* background-color: dodgerblue; */
    color: #009BF0;
}


/* Float the link section to the right */

.header-right {
    float: right;
}


/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */


@media screen and (max-width: 500px) {
    .header a {
        float: none;
        display: block;
        text-align: left;
    }
    .header-right {
        float: none;
    }
}



/* Solid border */

hr.solid {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #5F6875;
    margin: 1em 0;
    padding: 0;
    opacity: 0.6;
    
    margin-bottom: -1px;
}

@media (max-width: 690px) { 
    hr.solid {
        margin-top: -18px;
    }
}

/* Solid border */

hr.cap-solid {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #5F6875;
    margin: 1em 0;
    padding: 0;
    opacity: 0.6;
    margin-top: 0px;
    margin-bottom: 0px;
}


/* Solid border */

hr.thanks-solid {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #5F6875;
    margin: 1em 0;
    padding: 0;
    opacity: 0.6;
    margin-top: 100px;
    margin-bottom: 0px;
}

.subheaderTop25Generic {
    overflow: hidden;
    background-color: #1F3264;
    padding: 0px -46px;
    margin-top: -4px;
}

.subheaderTopCappers {
    overflow: hidden;
    background-color: #1798E9;
    padding: 0px -46px;
    margin-top: -4px;
}

.subheaderThanks {
    overflow: hidden;
    background-color: #000000;
    padding: 0px -46px;
    margin-top: 24px;
}

.subheaderSupport {
    overflow: hidden;
    background-color: #000000;
    padding: 0px -46px;
    margin-top: 24px;
}

.subheaderMaintenance {
    overflow: hidden;
    background-color: #000000;
    padding: 0px -46px;
    margin-top: 80px;
}

.subheaderDisputeNew {
    overflow: hidden;
    background-color: #000000;
    padding: 0px -46px;
    margin-top: 24px;
}

.subheaderLookup {
    overflow: hidden;
   
    padding: 0px -46px;
    /*margin-top: 24px;*/
   /*margin-top: 130px;*/
    margin-bottom: -100px;
}

.subheaderTop25Male {
    overflow: hidden;
    background-color: #477D96;
    padding: 0px -46px;
    margin-top: -4px;
}

.subheaderTop25Female {
    overflow: hidden;
    background-color: #8D67AB;
    padding: 0px -46px;
    margin-top: -4px;
}

.subheaderTop25TorontoGains {
    overflow: hidden;
    background-color: #DC158C;
    padding: 0px -46px;
    margin-top: -4px;
}

.subheaderTop25GlobalGains {
    overflow: hidden;
    background-color: #907255;
    padding: 0px -46px;
    margin-top: -4px;
}

.subheaderTop25TorontoDrops {
    overflow: hidden;
    background-color: #26856B;
    padding: 0px -46px;
    margin-top: -4px;
}

.subheaderTop25GlobalDrops {
    overflow: hidden;
    background-color: #A0C3D2;
    padding: 0px -46px;
    margin-top: -4px;
}

.subheaderDispute {
    overflow: hidden;
    background-color: #009BF0;
    padding: 0px -46px;
    margin-top: -4px;
}

.subheaderAbout {
    overflow: hidden;
    background-color: #009BF0;
    padding: 0px -46px;
    margin-top: -4px;
}


/* Style the header links */

.subheaderTop25Generic p {
    /*float: left;*/
    color: white;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 10px;
    border-radius: 4px;
    margin-right: 108px;
}


/* Style the header links */

.subheaderTopCappers p {
    /*float: left;*/
    color: white;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 10px;
    border-radius: 4px;
    margin-right: 108px;
}


/* Style the header links */

.subheaderThanks p {
    /*float: left;*/
    color: white;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 10px;
    border-radius: 4px;
    margin-right: 0px;
}


/* Style the header links */

.subheaderSupport p {
    /*float: left;*/
    color: white;
    text-align: center;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    border-radius: 4px;
    margin-right: 12px;
    margin-left: 12px;
}

.subheaderMaintenance p {
    /*float: left;*/
    color: white;
    text-align: center;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 30px;
    border-radius: 4px;
    margin-right: 12px;
    margin-left: 12px;
}


.subheaderDisputeNew p {
    /*float: left;*/
    color: white;
    text-align: center;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    border-radius: 4px;
    margin-right: 12px;
    margin-left: 12px;
}


.subheaderLookup p {
    /*float: left;*/
    color: white;
    text-align: center;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    border-radius: 4px;
    margin-right: 12px;
    margin-left: 12px;
}


/* Style the header links */

.subheaderTop25Male p {
    /*float: left;*/
    color: white;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 10px;
    border-radius: 4px;
    margin-right: 108px;
}


/* Style the header links */

.subheaderTop25Female p {
    /*float: left;*/
    color: white;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 10px;
    border-radius: 4px;
    margin-right: 108px;
}


/* Style the header links */

.subheaderTop25TorontoGains p {
    /*float: left;*/
    color: white;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 10px;
    border-radius: 4px;
    margin-right: 108px;
}


/* Style the header links */

.subheaderTop25GlobalGains p {
    /*float: left;*/
    color: white;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 10px;
    border-radius: 4px;
    margin-right: 108px;
}


/* Style the header links */

.subheaderTop25TorontoDrops p {
    /*float: left;*/
    color: white;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 10px;
    border-radius: 4px;
    margin-right: 108px;
}


/* Style the header links */

.subheaderTop25GlobalDrops p {
    /*float: left;*/
    color: white;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 10px;
    border-radius: 4px;
    margin-right: 108px;
}


/* Style the header links */

.subheaderDispute p {
    /*float: left;*/
    color: white;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 10px;
    border-radius: 4px;
    margin-right: 108px;
}


/* Style the header links */

.subheaderAbout p {
    /*float: left;*/
    color: #000;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 10px;
    border-radius: 4px;
    margin-right: 108px;
}


/* Style the header links */

.entireCapChart {
    margin: auto;
    width: 60%;
    padding: 10px;
}

.chartBlockWrapped {
    margin: auto;
    width: 60%;
    padding: 10px;
}





/* Change the background color on mouse-over */

.chartPosition:hover {
    background-color: #dddddd10;
    overflow: hidden;
    /*padding: 0px 100px;*/
    /* color: #009BF0; */
}


/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */

.chartPosition a.logo {
    font-size: 25px;
    font-weight: bold;
}


/* Change the background color on mouse-over */

.chartPosition p:hover {
    /*background-color: #ddd; */
    /* color: #009BF0; */
}


/* Style the active/current link*/

.chartPosition p.active {
    /* background-color: dodgerblue; */
    color: #009BF0;
}


/* Float the link section to the right */

.chartPosition-right {
    float: right;
}


/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */

@media screen and (max-width: 500px) {
    .chartPosition p {
        float: none;
        display: block;
        text-align: left;
    }
    .chartPosition-right {
        float: none;
    }
}




/* CAP IMAGE ILLUSTRATION */

.capImage {
    width: 100%;
    max-width: 384px;
    /*Set any dimensions you like*/
    display: inline-block;
    border: none;
}

.capImageContainer {
    width: 80%;
    text-align: center;
    border: none;
    margin: auto ;
    margin-top: 20px;
    margin-bottom: 20px;
}




.rapcapreportx3-illustration {
    width: 100%;
    max-width: 434px;
    /*Set any dimensions you like*/
    display: inline-block;
    border: none;
}

.rapcapreportx3-illustrationContainer {
    width: 80%;
    text-align: center;
    border: none;
    margin: auto ;
    margin-top: 0px;
    margin-bottom: 0px;
}


/* LOOKUP IMAGE ILLUSTRATION */

.lookupImage {
    width: 100%;
    max-width: 120px;
    /*Set any dimensions you like*/
    display: inline-block;
    border: none;
    color: #FFFFFF;
}

.lookupImageContainer {
    width: 50%;
    text-align: center;
    border: none;
    margin: auto ;
    margin-top: 80px;
    margin-bottom: 20px;
}


/*  Ad Image Test */

.adImage {
    max-width: 512px;
    height: auto;
    display: inline-block;
    border: none;
    width: 100%;
}

.adImageContainer {
    margin-top: 20px;
    width: 100%;
   
    text-align: center;
    border: none;
}

.disputeImageContainer {
    margin: auto;
    margin-top: 40px;
    width: 300px;
    max-width: 89%
}

.disputeImageContainer img{
    width: 100%;
    height: auto;
}

.maintenanceContainer{

}
.maintenanceImageContainer {
    display: flex;
    justify-content: center; /* Horizontal centering */
    margin-top:50px;
    
}

.maintenanceContainer img {
    width: 80%; /* This means the image will take up 50% of its container's width */
    max-width: 500px; /* This ensures the image won't grow larger than 300px */
    height: auto; /* This will maintain the aspect ratio */
    margin: 0 auto; /* This centers the image if the container is wider than the image */
}

.aboutImageContainer {
    margin-top: 60px;
    width: 100%;
    text-align: center;
    border: none;
}

.missionImageContainer {
    margin-top: 60px;
    width: 100%;
    text-align: center;
    border: none;
}


@media (max-width: 460px) { /* Typical breakpoint for mobile devices */
   
    .aboutImageContainer img{
        
        max-width: 80%;
        min-width: 200px;
    }

    .missionImageContainer img{
        
        width: 80%;
        min-width: 200px;
    }

}

a img,
a: hover img {
    border: none!important;
    background: transparent!important
}

.entry img {
    border: none!important;
    background: transparent!important
}

img {
    text-indent: -99999999999999999999999px;
}


/* Feature Image */

.featureImage {
    height: 100%;
    width: 100%;
    object-fit: cover border: none;
}

.featureArtistImageContainer {
    float: right;
    margin-top: 30px;
    height: 120px;
    /*Set any dimensions you like*/
    width: 120px;
    border: none;
    display: inline-block;
}


/*  Image Test */

.image {
    height: 100%;
    width: 100%;
    object-fit: cover border: none;
}

.container {
    height: 100px;
    /*Set any dimensions you like*/
    width: 100px;
    border: none;
}


/* MAIN PAGE CSS */

.featuredArtist-section {
    overflow: hidden;
    background-color: #000;
    padding: 0px 100px;
}

.featuredArtist-Scroller {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* Style the header links */

.featuredArtist-Title p {
    /*float: left;*/
    color: white;
    text-align: left;
    padding-top: 26px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 30px;
    border-radius: 4px;
    margin-right: 0px;
    margin-top: 26px;
}

.featuredArtist_1 {
    /*background: #477D96;*/
    float: left;
    display: inline-block;
    overflow: hidden;
    padding: 0px 0px;
    margin-top: 0px;
    width: 361px;
    height: 182px;
    border-radius: 6px;
    flex: 0 0 auto;
    cursor: pointer;
}

.featuredArtist_1 p {
    color: white;
    text-align: left;
    padding-top: 20px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 40px;
    margin-left: 20px;
    float: left;
    display: inline-block;
    overflow: hidden;
}

.featuredArtist_2 {
    background: #482AB1;
    float: left;
    display: inline-block;
    overflow: hidden;
    padding: 0px 0px;
    margin-top: 0px;
    margin-left: 10px;
    width: 361px;
    height: 182px;
    border-radius: 6px;
    flex: 0 0 auto;
    cursor: pointer;
}

.featuredArtist_2 p {
    color: white;
    text-align: left;
    padding-top: 20px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 40px;
    margin-left: 20px;
    float: left;
    display: inline-block;
    overflow: hidden;
}

.featuredArtist_3 {
    background: #8B531A;
    float: left;
    display: inline-block;
    overflow: hidden;
    padding: 0px 0px;
    margin-top: 0px;
    margin-left: 10px;
    width: 361px;
    height: 182px;
    border-radius: 6px;
    flex: 0 0 auto;
    cursor: pointer;
}

.featuredArtist_3 p {
    color: white;
    text-align: left;
    padding-top: 20px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 40px;
    margin-left: 20px;
    float: left;
    display: inline-block;
    overflow: hidden;
}

.featuredArtist_4 {
    background: #A4C916;
    float: left;
    display: inline-block;
    overflow: hidden;
    padding: 0px 0px;
    margin-top: 0px;
    margin-left: 10px;
    width: 361px;
    height: 182px;
    border-radius: 6px;
    flex: 0 0 auto;
    cursor: pointer;
}

.featuredArtist_4 p {
    color: white;
    text-align: left;
    padding-top: 20px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 40px;
    margin-left: 20px;
    float: left;
    display: inline-block;
    overflow: hidden;
}

.featuredArtist_5 {
    background: #DC158C;
    float: left;
    display: inline-block;
    overflow: hidden;
    padding: 0px 0px;
    margin-top: 0px;
    margin-left: 10px;
    width: 361px;
    height: 182px;
    border-radius: 6px;
    flex: 0 0 auto;
    cursor: pointer;
}

.featuredArtist_5 p {
    color: white;
    text-align: left;
    padding-top: 20px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 40px;
    margin-left: 20px;
    float: left;
    display: inline-block;
    overflow: hidden;
}


/* BOTTOM ROW */






/*LEGENDS ROW */

.legendsRow-section {
    overflow: hidden;
    background-color: #000;
    padding: 0px 100px;
}

.legends-Scroller {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}




/* Style the header links */

.legendsRow-Title p {
    /*float: left;*/
    color: white;
    text-align: left;
    padding-top: 26px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 30px;
    border-radius: 4px;
    margin-right: 0px;
    margin-top: 26px;
}

.legend_1 {
    background: #202327;
    float: left;
    /*display:inline-block;*/
    overflow: hidden;
    padding: 0px 0px;
    margin-top: 0px;
    width: 361px;
    height: 182px;
    border-radius: 6px;
    flex: 0 0 auto;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.legend_1 img {
    width: 100%;
    height: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.legend_1 p {
    color: white;
    text-align: left;
    padding-top: 0px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 40px;
    margin-left: 20px;
    float: left;
    display: inline-block;
    overflow: hidden;
}

.legend_2 {
    background: #202327;
    float: left;
    display: inline-block;
    overflow: hidden;
    padding: 0px 0px;
    margin-top: 0px;
    margin-left: 10px;
    width: 361px;
    height: 182px;
    border-radius: 6px;
    flex: 0 0 auto;
    cursor: pointer;
}

.legend_2 img {
    width: 100%;
    height: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.legend_2 p {
    color: white;
    text-align: left;
    padding-top: 0px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 40px;
    margin-left: 20px;
    float: left;
    display: inline-block;
    overflow: hidden;
}

.legend_3 {
    background: #202327;
    float: left;
    display: inline-block;
    overflow: hidden;
    padding: 0px 0px;
    margin-top: 0px;
    margin-left: 10px;
    width: 361px;
    height: 182px;
    border-radius: 6px;
    flex: 0 0 auto;
    cursor: pointer;
}

.legend_3 img {
    width: 100%;
    height: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.legend_3 p {
    color: white;
    text-align: left;
    padding-top: 0px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 40px;
    margin-left: 20px;
    float: left;
    display: inline-block;
    overflow: hidden;
}

.legend_4 {
    background: #202327;
    float: left;
    display: inline-block;
    overflow: hidden;
    padding: 0px 0px;
    margin-top: 0px;
    margin-left: 10px;
    width: 361px;
    height: 182px;
    border-radius: 6px;
    flex: 0 0 auto;
    cursor: pointer;
}

.legend_4 img {
    width: 100%;
    height: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.legend_4 p {
    color: white;
    text-align: left;
    padding-top: 0px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 40px;
    margin-left: 20px;
    float: left;
    display: inline-block;
    overflow: hidden;
}

.legend_5 {
    background: #202327;
    float: left;
    display: inline-block;
    overflow: hidden;
    padding: 0px 0px;
    margin-top: 0px;
    margin-left: 10px;
    width: 361px;
    height: 182px;
    border-radius: 6px;
    flex: 0 0 auto;
    cursor: pointer;
}

.legend_5 img {
    width: 100%;
    height: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.legend_5 p {
    color: white;
    text-align: left;
    padding-top: 0px;
    text-decoration: none;
    font-family: gilroyFont;
    font-size: 24px;
    line-height: 40px;
    margin-left: 20px;
    float: left;
    display: inline-block;
    overflow: hidden;
}


/* DISPUTE */

.disputeBody {
    margin: auto;
    max-width: 600px;
    padding: 24px;
}

.disputeBody p {
    color: white;
    text-align: center;
    padding-top: 0px;
    text-decoration: none;
    font-family: 'gilroyMedium';
    font-size: 20px;
    line-height: 40px;
}

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);

.disputePage {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: "gilroy-Regular", Helvetica, Arial, sans-serif;
    font-weight: 100;
    font-size: 12px;
    line-height: 30px;
    color: #777;
}

.formContainer {
    max-width: 800px;
    width: 100%;
    margin: -120px auto;
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
    font-family: 'Gilroy-Regular', sans-serif;
    font-size: 18px;
}

#contact {
    background: #F9F9F9;
    padding: 25px;
    margin: 150px 0;
    border-radius: 8px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

#contact h3 {
    display: block;
    font-size: 30px;
    font-weight: 300;
    margin-top: 20px;
    margin-bottom: 40px;
    font-family: 'Gilroy-Bold', sans-serif;
    font-size: 1.5rem;
    color: #777;
}

#contact h4 {
    margin: 5px 0 15px;
    display: block;
    font-size: 13px;
    font-weight: 400;
}

fieldset {
    border: medium none !important;
    margin: 0 0 10px;
    min-width: 100%;
    padding: 0;
    width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
    width: 100%;
    border: 1px solid #ccc;
    background: #FFF;
    margin: 0 0 5px;
    padding: 10px;
    height: 60px;

}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
    -webkit-transition: border-color 0.3s ease-in-out;
    -moz-transition: border-color 0.3s ease-in-out;
    transition: border-color 0.3s ease-in-out;
    border: 1px solid #aaa;
    border-radius: 0.25rem;
}

#contact textarea {
    height: 100px;
    max-width: 100%;
    resize: none;
}

#contact button[type="submit"] {
    cursor: pointer;
    width: 100%;
    border: none;
    background: #009BF0;
    color: #FFF;
    margin: 0 0 5px;
    padding: 10px;
    
    font-family: 'Gilroy-Bold', sans-serif;
    font-size: 1.2rem;
}

#contact button[type="submit"]:hover {
    background: #009BF1;
    -webkit-transition: background 0.3s ease-in-out;
    -moz-transition: background 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.copyright {
    text-align: center;
}

#contact input:focus,
#contact textarea:focus {
    outline: 0;
    border: 1px solid #aaa;
}

::-webkit-input-placeholder {
    color: #888;
}

:-moz-placeholder {
    color: #888;
}

::-moz-placeholder {
    color: #888;
}

:-ms-input-placeholder {
    color: #888;
}


/* THANKS PAGE */

.thanksBody {
    margin: auto;
    padding: 10px;
}

.thanksBody p {
    color: white;
    text-align: center;
    padding-top: 0px;
    text-decoration: none;
    font-family: 'gilroyMedium';
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 40px;
}

.supportBody {
    margin: auto;
    /*width: 40%;*/
    padding: 10px;
}

.supportBody p {
    color: white;
    text-align: center;
    padding-top: 0px;
    text-decoration: none;
    font-family: 'gilroyMedium';
    font-size: 20px;
    line-height: 30px;
    margin-top:20px;
    margin-bottom: 20px;
}

.supportBody a {
    color: #FFFFFF;
    font-family: gilroyFont;
}

.supportBody a:hover {
    /* background-color: #ddd; */
    color: #009BF0;
    font-family: gilroyFont;
}


/* Style the active/current link*/

.supportBodyr a.active {
    /* background-color: dodgerblue; */
    color: #009BF0;
    font-family: gilroyFont;
}



.maintenanceBody {
    margin: auto;
    /*width: 40%;*/
    padding: 10px;
    padding-left:20px;
    padding-right:20px;
}

.maintenanceBody p {
    color: white;
    text-align: center;
    padding-top: 0px;
    text-decoration: none;
    font-family: 'gilroyMedium';
    font-size: 26px;
    line-height: 30px;
    margin-bottom: 40px;
    margin-top:60px;
}


.doneBTNContainer {
    background-color: #1798E9;
    text-align: center;
    padding: 0px 0px;
    margin-top: 0px;
    margin-left: 0px;
    margin-bottom: 120px;
    margin-top: 50px;
    width: 200px;
    height: 40px;
    border-radius: 6px;
    cursor: pointer;
    margin: auto;
}

.doneBTNContainer:hover {

    background: #007ACD; /* Slightly darker blue for hover effect */
}

.doneBTNContainer p {
    color: white;
    text-align: center;
    padding-top: 0px;
    text-decoration: none;
    font-family: 'gilroy-Bold';
    font-size: 16px;
    line-height: 40px;
    margin-left: 0px;
    margin-top: 0px;
    /* Solution to extend wwidth of subtitle */
    margin-right: 0px;
    /*float: left;*/
    display: inline-block;
    overflow: hidden;
}


/* ABOUT */

.aboutBody {
    margin: auto;
    width: 80%;
    padding: 10px;
    margin-top: 30px;
}

.aboutBody p {
    color: #000;
    text-align: left;
    padding-top: 0px;
    text-decoration: none;
    font-family: 'gilroyMedium';
    font-size: 16px;
    line-height: 40px;
}



.missionBody {
    margin: auto;
    width: 80%;
    padding: 10px;
    margin-top: 30px;
}

.missionBody p {
    color: #000;
    text-align: left;
    padding-top: 0px;
    text-decoration: none;
    font-family: 'gilroyMedium';
    font-size: 16px;
    line-height: 40px;
}

/* Text highlighting */

::-moz-selection {
    /* Code for Firefox */
    color: #FFFFFF;
    background: #009BF0;
}

::selection {
    color: #FFFFFF;
    background: #009BF0;
}






/*ScrollBar*/
/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.1);
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    border-radius: 10px;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.4);
    opacity: 0.5;
    border-radius: 122px;
  }



  /* Section 1 */

  .custom-container {
    max-width: 1320px; /* A bit more than the box to account for potential paddings/margins */
    margin: 0 auto; /* This centers the container if it's less than 100% of the viewport width */
    padding: 15px; /* Some space around the content */
    margin-top: 40px;
}

.responsive-box {
    width: 100%;
    max-width: 1318px;
    min-height: 697px; /* Changed from 'height' to 'min-height' */
    flex-shrink: 0;
    border-radius: 30px;
    background: linear-gradient(255deg, #009BF0 2.67%, #000 92.61%);
    
   
}

.responsive-playlist-box {
    width: 100%;
    max-width: 1318px;
    min-height: 600px; /* Changed from 'height' to 'min-height' */
    flex-shrink: 0;
    border-radius: 30px;
    background: linear-gradient(255deg, #535658 2.67%, #000 92.61%);


    display: flex;
    align-items: center;  /* This will vertically center the direct children of .responsive-playlist-box */
    justify-content: space-between;  /* To keep the text and image sections apart */
    height: 100%;  /* Ensure it takes up full height */


}


.responsive-playlist-box .row {
    height: 100%;
}




.now-available {
    color: #FFF;
    font-family: 'Gilroy-Bold';
    font-size: 18px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left: 20px;
} 


.playlist-box-headline {
    color: #FFF;
    font-family: 'Gilroy-Bold';
    font-size: 18px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left: 20px;
} 

.toronto-artists {
    color: #009BF0;
    font-family: 'Gilroy';
    font-size: clamp(60px, 9vw, 60px);
    font-weight: 700;
    margin-bottom: 0px;
    
    margin-left: 20px;
    letter-spacing: -2px;
    line-height: 60px;
}

.toronto-artists-sm {
    color: #009BF0;
    font-family: 'Gilroy';
    font-size: clamp(40px, 9vw, 60px);
    font-weight: 700;
    margin-bottom: 0px;
    
    margin-left: 20px;
    letter-spacing: -2px;
    line-height: 60px;
}

.toronto-artists-small {
    color: #009BF0;
    font-family: 'Gilroy';
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 60px;
    margin-left: 20px;
}

.at-your-fingertips-small {
    color: #FFF;
    font-family: 'Gilroy';
    font-size: 60px;
    font-weight: 700;
    
    margin-left: 20px;
    margin-bottom: 10px;
    letter-spacing: -2px;
    line-height: 60px;
}

.at-your-fingertips {
    color: #FFF;
    font-family: 'Gilroy';
    font-size: clamp(60px, 9vw, 60px);
    font-weight: 700;
    line-height: 1;
    margin-left: 20px;
    margin-bottom: 30px;
}

.artist-description {
    color: #FFF;
    font-family: 'Gilroy-Regular';
    font-size: 20px;
    font-weight: 400;
    line-height: 30px; /* 150% */
    margin-bottom: 40px;;
    margin-left: 20px;
    
}

.col-md-6.image-container {
    padding-right: 20px; /* Adjust this value based on your design requirements */
}

.responsive-box .row {
    overflow-x: auto;  /* Add horizontal scrolling if content overflows */
}

.report-image {
    width: 568px;
    height: 653px;
    flex-shrink: 0;  /* Ensure it doesn't shrink */
    margin-top: 44px;
}

.image-container {
    padding-right: 20px; /* Adjust this value based on your design requirements */
    overflow: hidden;
    border-bottom-right-radius: 30px;

    display: flex;
    align-items: center;  /* This will vertically center the content */
    justify-content: flex-end;  /* This will push the content to the right on larger screens */
   
}


.image-playlist-container {
    padding-right: 20px; /* Adjust this value based on your design requirements */
    overflow: hidden;
    border-bottom-right-radius: 30px;

    /*height: 100%;*/
    display: flex;
    align-items: center;  /* This will vertically center the image */
   
}

.responsive-playlist-box .row {
    align-items: center;  /* This will vertically center the content */
}


.playlist-cover-image {
    max-width: 80%;
    height: auto;
}

.vc-center {
    justify-content: center !important;
}

@media (max-width: 767px) {
    .report-image {
        width: 100%;  /* or any desired percentage/width */
        height: auto; /* maintain aspect ratio */
        
    }

    .playlist-cover-image {
        width: 100%;  /* or any desired percentage/width */
        height: auto; /* maintain aspect ratio */
        
        min-width: 90%;
        margin-left: 20px;
        margin-bottom: 40px;
        
    }

    .playlist-box-headline {
        color: #FFF;
        font-family: 'Gilroy-Bold';
        font-size: 18px;
        font-weight: 700;
        margin-top: 40px;
        margin-bottom: 20px;
        margin-left: 20px;
    } 

    .image-container {
        padding-right: 0px; /* Adjust this value based on your design requirements */
        overflow: hidden;
        border-bottom-right-radius: 30px;
        margin-top: -30px;
        margin-left: 5px;
       
    }

}

/* Styles for when the screen is below the lg breakpoint (992px) */
@media (max-width: 991px) {
    .playlist-cover-image {
        max-width: 60%;  /* Adjust this as needed */
        display: block;
        margin-left: 20px;
        margin-bottom: 40px;
        
    }
}

.custom-button {
    width: 265px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 16px;
    background: #009BF0;
    color: #FFF;
    text-align: center;
    font-family: 'Gilroy';
    font-size: 20px;
    font-weight: 700;
    line-height: 30px; /* 150% */
    border: none; /* Remove default borders */
    display: inline-block; /* Allows for text-centering and inline positioning */
    vertical-align: middle; /* Vertical centering */
    cursor: pointer; /* Changes cursor on hover */
    transition: background-color 0.3s ease; /* Optional: Adds a smooth transition on hover */
    margin-bottom: 40px;
    margin-left: 20px; 
}

.custom-button:hover {
    background: #007ACD; /* Slightly darker blue for hover effect */
    border: none; /* Remove default borders */
}

.custom-button:focus {
    background: #007ACD; /* Slightly darker blue for hover effect */
    outline: none !important;
    border: none; /* Remove default borders */
}

.custom-button:active, .custom-button:focus, .custom-button.active {
    border-color: transparent;
    outline: none;
   
}




.custom-button-centered {
    width: 265px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 16px;
    background: #009BF0;
    color: #FFF;
    text-align: center;
    font-family: 'Gilroy';
    font-size: 20px;
    font-weight: 700;
    line-height: 30px; /* 150% */
    border: none; /* Remove default borders */
    display: inline-block; /* Allows for text-centering and inline positioning */
    vertical-align: middle; /* Vertical centering */
    cursor: pointer; /* Changes cursor on hover */
    transition: background-color 0.3s ease; /* Optional: Adds a smooth transition on hover */
    margin-bottom: 40px;
   
}

.custom-button-centered:hover {
    background: #007ACD; /* Slightly darker blue for hover effect */
    border: none; /* Remove default borders */
}

.centered-on-wrap {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically */
}

.custom-button-centered:active, .custom-button-centered:focus, .custom-button-centered.active {
    border-color: transparent;
    outline: none;
   
}



.custom-button-spotify {
    width: 265px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 16px;
    background: #1ed760;
    color: #000;
    text-align: center;
    font-family: 'Gilroy';
    font-size: 20px;
    font-weight: 700;
    line-height: 30px; /* 150% */
    border: none; /* Remove default borders */
    display: inline-block; /* Allows for text-centering and inline positioning */
    vertical-align: middle; /* Vertical centering */
    cursor: pointer; /* Changes cursor on hover */
    transition: background-color 0.3s ease; /* Optional: Adds a smooth transition on hover */
    margin-bottom: 40px;
    margin-left: 20px;
}

.custom-button-spotify:hover {
    background: #16ff68; /* Slightly darker blue for hover effect */
}


.custom-button-spotify:active, .custom-button-spotify:focus, .custom-button-spotify.active {
    border-color: transparent;
    outline: none;
   
}





/* Playlists Intro */
.playlists-wrapper {
    padding: 0 30px; /* Padding to the left and right */
}
.playlists-container {
    border-radius: 30px;
    background: none;
    padding: 80px; /* Some space around the content */
    text-align: center; /* Centers the content horizontally */
    

    max-width: 1320px; /* A bit more than the box to account for potential paddings/margins */
    margin: 0 auto; /* This centers the container if it's less than 100% of the viewport width */
    
    margin-top:0px;
   
}

.playlists-headline {
    color: #FFF;
    font-family: 'Gilroy';
    font-size: 96px;
    font-weight: 700;
    margin-top: 60px;
    margin-bottom: 40px; /* Adds some space between the headline and the image */

    background: linear-gradient(270deg, #1ED760 40.78%, #024008 93.52%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}



.playlists-description {
    color: #86868b;
    font-family: 'Gilroy-Regular';
    font-size: 28px;
    font-weight: 400;
    line-height: 40px; /* 200% */
    margin-top: 60px;
    margin-bottom: 40px;
   
}





.playlists-container {
    border-radius: 30px;
    background: none;
    padding: 80px; /* Some space around the content */
    text-align: left; /* Centers the content horizontally */
    

    max-width: 1320px; /* A bit more than the box to account for potential paddings/margins */
    margin: 0 auto; /* This centers the container if it's less than 100% of the viewport width */
    
    margin-top:0px;
   
}

.playlist-headline-title {
    color: #FFF;
    font-family: 'Gilroy';
    font-size: clamp(36px, 14vw, 60px);
    font-weight: 700;
    margin-top: 60px;
    margin-bottom: 40px; /* Adds some space between the headline and the image */
    line-height: 1.2;
    background: linear-gradient(270deg, #FFF 40.78%, #FFF 93.52%);
    background-clip: text;
    -webkit-background-clip: text;
   /*  -webkit-text-fill-color: transparent; */
}


.playlist-section-headline-wrapper {
    border-radius: 30px;
    background: none;
    padding: 0px; /* Some space around the content */
    text-align: center; /* Centers the content horizontally */
    

    max-width: 1320px; /* A bit more than the box to account for potential paddings/margins */
    margin: 0 auto; /* This centers the container if it's less than 100% of the viewport width */
    
    margin-top:0px;
   
}


.highlighted-text {
    color: #1ED760; 
}

.playlist-headline-title .highlighted-text p {
    color: #1ED760; 
}

@media (max-width: 768px) { /* Typical breakpoint for mobile devices */
   
    .playlists-container {
        
        padding-top: 20px; /* Some space around the content */
        padding-bottom: 20px; 
        padding-left: 0px;
        padding-right: 0px;
        margin-top:100px;
    }

    .playlists-headline {
        
        font-size: clamp(36px, 13.8vw, 64px);
       
        margin-top: -60px;
        margin-bottom: 40px;
        
    }

    .playlists-description {
        
        font-size: 24px;
        
       
    }


    .toronto-artists-small {
        color: #009BF0;
        font-family: 'Gilroy';
        font-size: 36px;
        font-weight: 700;
        margin-bottom: -14px;
        line-height: 60px;
        margin-left: 20px;
    }
    
    .at-your-fingertips-small {
        color: #FFF;
        font-family: 'Gilroy';
        font-size: 36px;
        font-weight: 700;
        line-height: 60px;
        margin-left: 20px;
        margin-bottom: 10px;
    }


    .playlist-headline-title {
        color: #FFF;
        font-family: 'Gilroy';
        font-size: clamp(36px, 14vw, 40px);
        font-weight: 700;
        margin-top: 60px;
        margin-bottom: 40px; /* Adds some space between the headline and the image */
        line-height: 1.2;
        background: linear-gradient(270deg, #FFF 40.78%, #FFF 93.52%);
        background-clip: text;
        -webkit-background-clip: text;
       /*  -webkit-text-fill-color: transparent; */
    }

}





/* Section 2 */

.new-section {
    background-color: white;
    width: 100vw; /* Ensures full browser width */
    position: relative; /* Ensures it doesn't overflow if there are any vertical scrollbars */
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top:200px;
    height: 700px;  /* Changed from fixed height */
    padding: 0;  /* Vertical space around the content */
    display: flex;
    align-items: center;  /* This will vertically center the inner content */
    justify-content: center;  /* This will horizontally center the inner content */
   
}

.new-section .container-fluid {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Making the row a flex container */
.new-section .row {
    display: flex;
    align-items: center;  /* This will vertically center the content */
}


@media (max-width: 768px) { /* Typical breakpoint for mobile devices */
   
    .new-section {
        
        margin-top:100px;
       
 
    }

   

}

.left-image {
    width: 436px;
    height: auto;  /* Maintains the aspect ratio */
    max-width: 100%; /* Ensures the image doesn't exceed its container on smaller screens */
    margin-top: -20px;  /* Adjust as needed */
    margin-bottom: -20px;  /* Adjust as needed */

}

.image-column {
    display: flex;
    align-items: center;  /* This will vertically center the image if there's extra space */
    justify-content: center; /* This will horizontally center the image */
    
    padding-right: 40px; /* Adjust this value to set your desired gap */

}


.section2Text1 {
    color: #009BF0;
    font-family: 'Gilroy';
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 10px;
    
    
    margin-top:50px;
    max-width:700px;

    letter-spacing: -2px;
    line-height: 60px;
}

.section2Text2 {
    color: #000;
    font-family: 'Gilroy';
    font-size: 60px;
    font-weight: 700;
    
    
    margin-bottom: 10px;
    max-width:700px;

    letter-spacing: -2px;
    line-height: 60px;
}

.section2-description {
    color: #000;
    font-family: 'Gilroy-Regular';
    font-size: 20px;
    font-weight: 400;
    line-height: 30px; /* 150% */
    margin-bottom: 40px;;
    
    max-width:700px;
    
}

.section2Text1, .section2Text2, .section2-description {
    margin-left: 0; /* Remove individual left margins */
}

.content-wrapper {
    display: flex;  /* Flexbox to distribute space */
    max-width: 1300px; /* The maximum combined width of image + text, adjust as needed */
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.text-content {
    flex: 1;
    margin-left: 40px;
}

.text-content .custom-button {
    margin-left: 0px;
}

/* Mobile view adjustments */
@media (max-width: 800px) {  
    .new-section {
        height: auto;  /* Make the white box adaptive on mobile */
        padding: 100px 0;  /* Add padding on mobile */
    }

    .left-image {
        width: 80%; 
        max-width: 100%; 
        margin: 0 auto;
        display: block;
        margin-top: 0;  /* Reset margins for mobile */
        margin-bottom: 0;
    }

    .image-column {
        text-align: center;
        padding-right: 0;  /* Remove the padding on mobile */
    }

    .text-content {
        text-align: center;
        width: 100%;
        padding: 20px 60px;
        margin-left: 0;  /* Reset the margin to 0 for mobile */
    }

    .section2Text1 {
       
        font-size: 60px;
        font-weight: 700;
        margin-bottom: 10px;
        
        
        margin-top:50px;
        max-width:700px;
        text-align: left;
    }
    
    .section2Text2 {
      
        
        font-size: 60px;
        font-weight: 700;
        line-height: 60px;
        
        margin-bottom: 0px;
        max-width:700px;
        text-align: left;
    }

    .section2-description {
        ;
        font-size: 20px;
        font-weight: 400;
        line-height: 30px; /* 150% */
       
        
        max-width:700px;
        text-align: left;
        
    }

    /* Optional: Add space between the image and text when they are stacked */
    .image-column, .text-content {
        margin-bottom: 10px;
    }


    .section2-description {
margin-top: 40px;
    }
}



/* Section 3 */
.section3-wrapper {
    padding: 0 30px; /* Padding to the left and right */
}
.section3-container {
    border-radius: 30px;
    background: linear-gradient(245deg, #8538A6 19.83%, #4F3D96 59.35%, #1F4288 121.64%);
    padding: 80px; /* Some space around the content */
    text-align: center; /* Centers the content horizontally */
    

    max-width: 1320px; /* A bit more than the box to account for potential paddings/margins */
    margin: 0 auto; /* This centers the container if it's less than 100% of the viewport width */
    
    margin-top:200px;
   
}

.section3-headline {
    color: #FFF;
    font-family: 'Gilroy';
    font-size: 60px;
    font-weight: 700;
    margin-top: 60px;
    margin-bottom: 40px; /* Adds some space between the headline and the image */
    letter-spacing: -2px;
    line-height: 60px;
}

.section3-image {
    max-width: 100%; /* Ensures the image doesn't exceed the container width */
    margin-bottom: 20px; /* Adds some space between the image and the description */
}

.section3-description {
    color: #FFF;
    font-family: 'Gilroy-Regular';
    font-size: 20px;
    font-weight: 400;
    line-height: 40px; /* 200% */
    margin-top: 40px;
    margin-bottom: 40px;
    
}


@media (max-width: 768px) { /* Typical breakpoint for mobile devices */
   
    .section3-container {
        
        padding: 20px; /* Some space around the content */
        margin-top:100px;
    }

}

/* Section 4 */


.custom-container4 {
    max-width: 1380px; /* A bit more than the box to account for potential paddings/margins */
    margin: 0 auto; /* This centers the container if it's less than 100% of the viewport width */
    padding: 15px; /* Some space around the content */
    margin-top: 40px;
}

.responsive-box-section4 {
    width: 100%;
    max-width: 1318px;
    min-height: 697px; /* Changed from 'height' to 'min-height' */
    flex-shrink: 0;
    border-radius: 30px;
    background: #FFF;
    
    
   
}


.small-label-section4 {
    color: #000;
    font-family: 'Gilroy-Bold';
    font-size: 18px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left: 20px;
} 

.headline-line1-section4 {
    color: #009BF0;
    font-family: 'Gilroy';
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 10px;
    
    margin-left: 20px;
    letter-spacing: -2px;
    line-height: 60px;
}

.headline-line2-section4 {
    color: #000;
    font-family: 'Gilroy';
    font-size: 60px;
    font-weight: 700;
    
    margin-left: 20px;
    margin-bottom: 30px;
    letter-spacing: -2px;
    line-height: 60px;
}

.body-description-section4 {
    color: #000;
    font-family: 'Gilroy-Regular';
    font-size: 20px;
    font-weight: 400;
    line-height: 30px; /* 150% */
    margin-bottom: 40px;;
    margin-left: 20px;
    
}




/* Section 5 */

.section5-wrapper {
    padding: 0 30px; /* Padding to the left and right */
}

.section5-container {
    border-radius: 30px;
    background: linear-gradient(245deg, #EE0606 19.83%, #9F1B1B 59.35%, #230202 121.64%);
    padding: 40px; /* Adds some space around the content inside the box */
    text-align: center; /* Centers the content horizontally */
    
    max-width: 1320px; /* A bit more than the box to account for potential paddings/margins */
    margin: 0 auto; /* This centers the container if it's less than 100% of the viewport width */
    padding: 80px; /* Some space around the content */

    margin-top:40px;
   
}

.section5-headline {
    color: #FFF;
    font-family: 'Gilroy';
    font-size: 60px;
    font-weight: 700;
    margin-top: 60px;
    margin-bottom: 30px; /* Adds some space between the headline and the image */
    letter-spacing: -2px;
    line-height: 60px;
}

.section5-image {
    max-width: 100%; /* Ensures the image doesn't exceed the container width */
    margin-bottom: 20px; /* Adds some space between the image and the description */
}

.section5-description {
    color: #FFF;
    font-family: 'Gilroy-Regular';
    font-size: 20px;
    font-weight: 400;
    /*line-height: 40px;*/ /* 200% */
    margin-top: 40px;
    margin-bottom: 40px;
    
}




@media (max-width: 768px) { /* Typical breakpoint for mobile devices */
   
    .section5-container {
        
        padding: 20px; /* Some space around the content */
       
 
    }

    .section5-headline {
       margin-left: -5px;
       font-size: 50px;
    }

}






/* Section 6 */

.section6-container {
    border-radius: 30px;
    padding: 40px; /* Adds some space around the content inside the box */
    text-align: center; /* Centers the content horizontally */
    
    max-width: 1320px; /* A bit more than the box to account for potential paddings/margins */
    margin: 0 auto; /* This centers the container if it's less than 100% of the viewport width */
    padding: 0px; /* Some space around the content */

    margin-top:80px;
   
}

.section6-headline {
    color: #FFF;
    font-family: 'Gilroy';
    font-size: 60px;
    font-weight: 700;
    background: linear-gradient(270deg, #EE0707 30.77%, #791212 70.78%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;


    margin-top: 60px;
    margin-bottom: 30px; /* Adds some space between the headline and the image */
    letter-spacing: -2px;
    line-height: 60px;
}

.section6-image {
    max-width: 100%; /* Ensures the image doesn't exceed the container width */
    margin-bottom: 20px; /* Adds some space between the image and the description */
    padding-left: 20px;
    padding-right: 20px;
}

.section6-description {
    color: #FFF;
    font-family: 'Gilroy-Regular';
    font-size: 20px;
    font-weight: 400;
    line-height: 40px; /* 200% */
    margin-top: 40px;
    margin-bottom: 40px;
    
}



/* Section 7 */

.section7-container {
    text-align: center; /* Centers the headline */
    padding: 40px; /* Adds some space around the content inside the section */
}

.section7-headline {
    font-family: 'Gilroy';
    font-size: 60px;
    font-weight: 700;
    background: linear-gradient(270deg, #1ED760 30.78%, #045b0d 70.52%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 100px;
    margin-bottom: 40px; /* Adds some space between the headline and the boxes */
    letter-spacing: -2px;
    line-height: 60px;
}

.box-container {
    display: flex;
   
    justify-content: center; /* Center the boxes horizontally */
    align-items: center;
    
    
    
}

.box:nth-child(1) {
    margin-right: 20px; /* Space to the right of the first box */
}

.box:nth-child(2) {
    margin-left: 20px; /* Space to the left of the second box */
}


.box {
    width: 644px; /* Fixed width */
    max-width: 644px; /* Ensures that the boxes don't expand beyond this width */
    height: auto;
    flex-shrink: 0;
    border-radius: 30px;
background: #FFF;
    position: relative; /* Allows positioning of children relative to this box */
    padding-top: 20px; /* Some space for the text at the top */
    margin-bottom: 20px; /* Some space between boxes if they stack on smaller screens */
    overflow: hidden;
       
}

.box-headline {
    color: #4CA455;
    font-family: 'Gilroy';
    font-size: 26px;
    font-weight: 700;
    text-align: left;
    margin-left: 40px;
    margin-top: 40px;
}

.box-description {
    color: #000;
    font-family: 'Gilroy-Regular';
    font-size: 18px;
    font-weight: 400;
    text-align: left;
    margin-left: 40px;
    margin-top: 10px;
    margin-bottom: 20px; /* Adds some space between the description and the image */
}

.box-image {
    width: 100%;       /* Make it responsive */
    max-width: 604px;  /* Ensure it doesn't exceed its natural width */
    height: auto;      /* Maintain the aspect ratio */
    flex-shrink: 0;
    margin-bottom: 10px;
}

/* Targeting the image of the second box */
.box:nth-child(2) .box-image {
    position: relative;
    top: -16px; /* Adjust this value as needed */
}

/* Media query to handle stacking */
@media (max-width: 1400px) {
    .box-container {
        flex-direction: column;  /* Makes the boxes stack vertically */
        align-items: center; /* Center the boxes when stacked vertically */
        justify-content: center; /* Horizontally centers the boxes */
    }
    
    .box {
       
        width: 100%; /* Makes the boxes take the full width of the container */
        max-width: 644px;
    }
    
    .box:nth-child(1) {
        margin-bottom: 40px;  /* Adds 20px of space below the top box */
        margin-right: 0;  /* Reset the margin for the mobile view */
    }

    .box:nth-child(2) {
        margin-left: 0;  /* Reset the margin for the mobile view */
    }

    .box-image {
        width: 100%;  /* Adjust width as needed for mobile view, maybe a bit less than 100% for some padding effect */
    }
}


@media (max-width: 768px) { /* Typical breakpoint for mobile devices */
   
    .box-headline {
        
        margin-left: 20px;
        margin-right: 20px;
    }
    
    .box-description {
        margin-left: 20px;
        margin-right: 20px;
    }

}


/* Section 8 */


.custom-container8 {
    max-width: 1380px; /* A bit more than the box to account for potential paddings/margins */
    margin: 0 auto; /* This centers the container if it's less than 100% of the viewport width */
    padding: 15px; /* Some space around the content */
    margin-top: 40px;
}

.responsive-box-section8 {
   
    width: 100%;
    max-width: 1318px;
    min-height: 697px; /* Changed from 'height' to 'min-height' */
    flex-shrink: 0;
    border-radius: 30px;
    background: linear-gradient(249deg, #000 13.86%, rgba(33, 33, 33, 0.75) 58.06%, rgba(130, 130, 130, 0.00) 127.32%);


}


.section8-image {
    max-width: 100%; /* Ensures the image doesn't exceed the container width */
    margin-right: 0px; /* No margin on the right */
   
    float: right; /* Floats the image to the right */
}

.tvgucci-image {
    width: 800px;
    height: 650px;
    flex-shrink: 0;  /* Ensure it doesn't shrink */
    margin-top: 44px;
    margin-left: -30px;  /* Negative value to move the image to the left */
    margin-bottom: 0px;  /* Negative value to move the image to the left */
    transform: scale(1.1);  /* Scales the image by 1.2 times */
   
}

.col-md-6.image-container-gucci {
    padding-right: 40px; /* Adjust this value based on your design requirements */
   
}


.image-container-gucci {
    padding-right: 60px; /* Increase this value to push the image more to the left */
    overflow: hidden;
    border-bottom-right-radius: 30px;
    
   
}




.small-label-section8 {
    color: #FFF;
    font-family: 'Gilroy-Bold';
    font-size: 18px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left: 20px;
} 

.headline-line1-section8 {
    color: #F1F050;
    font-family: 'Gilroy';
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 10px;
    
    margin-left: 20px;
    letter-spacing: -2px;
    line-height: 60px;
}

.headline-line2-section8 {
    color: #FFF;
    font-family: 'Gilroy';
    font-size: 60px;
    font-weight: 700;
   
    margin-left: 20px;
    margin-bottom: 10px;
    letter-spacing: -2px;
    line-height: 60px;
}

.body-description-section8 {
    color: #FFF;
    font-family: 'Gilroy-Regular';
    font-size: 20px;
    font-weight: 400;
    line-height: 30px; /* 150% */
    margin-bottom: 40px;;
    margin-left: 20px;
    
}



/* Section 9 */

.section9-container {
    border-radius: 30px;
    padding: 40px; /* Adds some space around the content inside the box */
    text-align: center; /* Centers the content horizontally */
    
    max-width: 1320px; /* A bit more than the box to account for potential paddings/margins */
    margin: 0 auto; /* This centers the container if it's less than 100% of the viewport width */
    padding: 0px; /* Some space around the content */

    margin-top:80px;
   
}

.section9-headline {
    color: #FFF;
    font-family: 'Gilroy';
    font-size: 60px;
    font-weight: 700;
    background: linear-gradient(270deg, #4924DF 40.77%, #E53A55 102.78%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;


    margin-top: 100px;
    margin-bottom: -20px; /* Adds some space between the headline and the image */

    letter-spacing: -2px;
    line-height: 60px;
}

.section9-image {
    max-width: 100%; /* Ensures the image doesn't exceed the container width */
    margin-bottom: 20px; /* Adds some space between the image and the description */
}

.section9-description {
    color: #FFF;
    font-family: 'Gilroy-Regular';
    font-size: 20px;
    font-weight: 400;
    line-height: 40px; /* 200% */
    margin-top: 40px;
    margin-bottom: 40px;
}

@media (max-width: 768px) { /* Typical breakpoint for mobile devices */
   
    .section9-headline {
        padding-left:15px;
        padding-right:15px;
        margin-bottom: 20px;
    }

    .section9-description {
        padding-left:15px;
        padding-right:15px;
    }

}


/* Section 10 */


.custom-container10 {
   
    max-width: 1380px; /* A bit more than the box to account for potential paddings/margins */
    margin: 0 auto; /* This centers the container if it's less than 100% of the viewport width */
    padding: 15px; /* Some space around the content */
    margin-top: 160px;
}

.responsive-box-section10 {
    
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1318px;
    min-height: 697px; /* Changed from 'height' to 'min-height' */
    flex-shrink: 0;
    border-radius: 30px;
    background: linear-gradient(245deg, #8538A6 19.83%, #4F3D96 59.35%, #1F4288 121.64%);

    
    
   
}


.small-label-section10 {
    color: #FFF;
    font-family: 'Gilroy-Bold';
    font-size: 18px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left: 20px;
} 

.headline-line1-section10 {
    color: #C58BFC;
    font-family: 'Gilroy';
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 10px;
   
    margin-left: 20px;

    letter-spacing: -2px;
    line-height: 60px;
}

.headline-line2-section10 {
    color: #FFF;
    font-family: 'Gilroy';
    font-size: 60px;
    font-weight: 700;
   
    margin-left: 20px;
    margin-bottom: 30px;

    letter-spacing: -2px;
    line-height: 60px;
}

.body-description-section10 {
    color: #FFF;
    font-family: 'Gilroy-Regular';
    font-size: 20px;
    font-weight: 400;
    line-height: 30px; /* 150% */
    margin-bottom: 40px;;
    margin-left: 20px;
    
}





.section10-image {
    width: 478px;
    height: 680px;
    flex-shrink: 0;  /* Ensure it doesn't shrink */
    margin-top: auto;
    margin-left: 60px;  /* Negative value to move the image to the left */
    margin-bottom: 0px;  /* Negative value to move the image to the left */
   
   
}

.col-md-6 {
    display: flex; /* Added */
    flex-direction: column; /* Added */
}

.col-md-6.image-container-device {
    padding-right: 40px; /* Adjust this value based on your design requirements */
   
}


.image-container-device {
    height: 100%;
    padding-right: 0px; /* Increase this value to push the image more to the left */
    overflow: hidden;
    border-bottom-right-radius: 30px;
   
   
}


@media (max-width: 1500px) {
    .col-md-6.image-container-device {
        text-align: center; /* Centers the content inside this container */
        padding-right: 0;   /* Reset any right padding */
    }

    .section10-image {
        margin-left: auto;  /* Centers the image horizontally */
        margin-right: auto; /* Centers the image horizontally */
    }
}


@media (max-width: 768px) { /* Typical breakpoint for mobile devices */
    .responsive-box-section10 {
        flex-direction: column; /* Stack items vertically */
    }

    .section10-image {
       
        width: 100%;  /* Make it responsive */
        max-width: 478px;  /* Original width */
        height: auto; /* It will maintain the aspect ratio */

        margin-top: 20px; /* Add some spacing at the top */
        margin-left: -16px; /* Reset the left margin */
    }

    .col-md-6 {
        display: block; /* Reset the flex display for mobile */
    }
}


.custom-button-purple {
    width: 265px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 16px;
    background: #C58BFC;
    color: #FFF;
    text-align: center;
    font-family: 'Gilroy';
    font-size: 20px;
    font-weight: 700;
    line-height: 30px; /* 150% */
    border: none; /* Remove default borders */
    display: inline-block; /* Allows for text-centering and inline positioning */
    vertical-align: middle; /* Vertical centering */
    cursor: pointer; /* Changes cursor on hover */
    transition: background-color 0.3s ease; /* Optional: Adds a smooth transition on hover */
    margin-bottom: 40px;
    margin-left: 20px;
}

.custom-button-purple:hover {
    background: #9E5EDA; /* Slightly darker blue for hover effect */
    color: #FFF;
}

.custom-button-purple:active, .custom-button-purple:focus, .custom-button-purple.active {
    border-color: transparent;
    outline: none;
   
}

/* Section 11 */


.custom-container11 {
   
    max-width: 1380px; /* A bit more than the box to account for potential paddings/margins */
    margin: 0 auto; /* This centers the container if it's less than 100% of the viewport width */
    padding: 15px; /* Some space around the content */
    margin-top: 40px;
}

.responsive-box-section11 {
    
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1318px;
    min-height: 697px; /* Changed from 'height' to 'min-height' */
    flex-shrink: 0;
    border-radius: 30px;
    background: linear-gradient(245deg, #083D5C 19.83%, #547C94 121.64%);


    
    
   
}


.small-label-section11 {
    color: #FFF;
    font-family: 'Gilroy-Bold';
    font-size: 18px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left: 20px;
} 

.headline-line1-section11 {
    color: #00C2FF;
    font-family: 'Gilroy';
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 10px;
    
    margin-left: 20px;

    letter-spacing: -2px;
    line-height: 60px;
}

.headline-line2-section11 {
    color: #FFF;
    font-family: 'Gilroy';
    font-size: 60px;
    font-weight: 700;
    
    margin-left: 20px;
    margin-bottom: 30px;

    letter-spacing: -2px;
    line-height: 60px;
}

.body-description-section11 {
    color: #FFF;
    font-family: 'Gilroy-Regular';
    font-size: 20px;
    font-weight: 400;
    line-height: 30px; /* 150% */
    margin-bottom: 40px;;
    margin-left: 20px;
    
}





.section11-image {
    width: 478px;
    height: 680px;
    flex-shrink: 0;  /* Ensure it doesn't shrink */
    margin-top: auto;
    margin-left: 60px;  /* Negative value to move the image to the left */
    margin-bottom: 0px;  /* Negative value to move the image to the left */
   
   
}

.col-md-6 {
    display: flex; /* Added */
    flex-direction: column; /* Added */
}

.col-md-6.image-container-device {
    padding-right: 40px; /* Adjust this value based on your design requirements */
   
}


.image-container-device {
    height: 100%;
    padding-right: 0px; /* Increase this value to push the image more to the left */
    overflow: hidden;
    border-bottom-right-radius: 30px;
   
   
}


@media (max-width: 1500px) {
    .col-md-6.image-container-device {
        text-align: center; /* Centers the content inside this container */
        padding-right: 0;   /* Reset any right padding */
    }

    .section11-image {
        margin-left: auto;  /* Centers the image horizontally */
        margin-right: auto; /* Centers the image horizontally */
    }
}


@media (max-width: 768px) { /* Typical breakpoint for mobile devices */
    .responsive-box-section11 {
        flex-direction: column; /* Stack items vertically */
    }

    .section11-image {
       
        width: 100%;  /* Make it responsive */
        max-width: 478px;  /* Original width */
        height: auto; /* It will maintain the aspect ratio */

        margin-top: 20px; /* Add some spacing at the top */
        margin-left: -16px; /* Reset the left margin */
    }

    .col-md-6 {
        display: block; /* Reset the flex display for mobile */
    }
}




/* Section 12 */




.custom-container12 {
   
    max-width: 1380px; /* A bit more than the box to account for potential paddings/margins */
    margin: 0 auto; /* This centers the container if it's less than 100% of the viewport width */
    padding: 15px; /* Some space around the content */
    margin-top: 40px;
}


.responsive-box-section12 {
    
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1318px;
   /* min-height: 697px; */ /* Changed from 'height' to 'min-height' */
    flex-shrink: 0;
    border-radius: 30px;
    background: linear-gradient(359deg, #000 1.22%, #303030 213.02%);




    
    
   
}

.section12-headline {
    color: #FFF;
    font-family: 'Gilroy';
    font-size: 60px;
    font-weight: 700;
    background: linear-gradient(270deg, #009BF0 40.77%, #0E5780 102.78%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left: 40px;  
    margin-right: 20px;  

    letter-spacing: -2px;
    line-height: 68px;
}

.body-description-section12 {
    color: #FFF;
    font-family: 'Gilroy-Regular';
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    max-width: 1318px;
   margin-bottom: 40px;
    margin-top: 40px;
    margin-left: 20px;
    margin-right:20px;
}

.section12-image {
    width: 120px;
    height: auto;
    flex-shrink: 0;
    margin-right: 0px;  /* To add some space between the image and the headline */
}

.flex-container12 {
    margin-top: 40px;  
    margin-left: 20px;  
}



.custom-button12 {
    width: 265px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 16px;
    background: #009BF0;
    color: #FFF;
    text-align: center;
    font-family: 'Gilroy';
    font-size: 20px;
    font-weight: 700;
    line-height: 30px; /* 150% */
    border: none; /* Remove default borders */
    display: inline-block; /* Allows for text-centering and inline positioning */
    vertical-align: middle; /* Vertical centering */
    cursor: pointer; /* Changes cursor on hover */
    transition: background-color 0.3s ease; /* Optional: Adds a smooth transition on hover */
    
    margin-bottom: 80px;
    margin-left: 20px;
}

.custom-button12:hover {
    background: #007ACD; /* Slightly darker blue for hover effect */
}

.custom-button-12:active, .custom-button-12:focus, .custom-button-12.active {
    border-color: transparent;
    outline: none;
   
}


#backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
   
    background-color: rgba(0, 0, 0, 0.3); /* This gives a semi-transparent dark background, but you can set the alpha to 0 if you want it completely invisible. */
    z-index: 4999; /* assuming your modal has a z-index of 9999 or similar */
    pointer-events: auto;
}



@media (max-width: 768px) { /* Typical breakpoint for mobile devices */
   
    .section12-headline {
        font-size: clamp(34px, 9vw, 38px);
        /*font-size: 38px;*/
        margin-left: 20px;  
        margin-bottom: 20px;
        line-height: 40px;  
        letter-spacing: -2px;
        height: 81px;
        
    }


    .body-description-section12 {
     
        margin-right:10px;
    }

    .section12-image {
        width: 90px;
       margin-top: -20px;
    }

    .custom-button12 {
        
        margin-top: 0px;
        margin-bottom: 40px;
       
    }

}


.promotion-badge {
    font-family: 'Gilroy';
    padding: 0.25em 0.6em;
    
}




.veristream-container {
    text-align: center;
    margin-top: 60px; /* Adjust as needed */
  }
  
  .veristream-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .veristream-logo {
    width: 160px; /* Adjust the size based on the logo */
    margin-right: 0px;
  }
  
  .veristream-description {
    font-family: 'gilroyFont'; /* Use your preferred font */
    font-size: 16px;
    color: #FFF;
    margin-top: 20px;
  }


  /* Media query for smaller screens */
@media screen and (max-width: 768px) {
    .veristream-logo {
        width: 120px; /* Smaller logo size for phones */
    }

    .veristream-description {
        font-size: 12px; /* Smaller text size for phones */
    }
}