@font-face {
    font-family: "equinoxmedium";
    src: url("../fonts/equinox-webfont.woff2") format("woff2"), url("../fonts/equinox-webfont.woff") format("woff");
}

@font-face {
    font-family: "dinalternate";
    src: url("../fonts/DINAlternate-Bold.ttf");
}


@font-face {
    font-family: "stheiti";
    src: url("../fonts/hanzipen-sc-regular.ttf");
}

@font-face {
    font-family: "helvetica";
    src: url("../fonts/HelveticaNeueMedium.ttf");
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}
.banner {
    background: url('banner-background-img copy.jpg') no-repeat center center;;
    background-size: cover;
    height: 300vh;
    width: 100%;

}

.logo-right-img {
    width: 151px;
    height: 68px;
}

.top-bar {
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.lfooter-img {
    text-align: left;
    

}

.logo-right {
    text-align: right;

}

.center-text {
    top: 25%;
    text-align: center;
    color: white;
    left: 15%;
    right: 15%;
    position: fixed;
    /* transform: translate(-50%, -50%); */
    /* transition: top 0.3s ease; */
}


.line {
    font-size: 10em;
    font-weight: 400;
    font-family: "equinoxmedium";
    src: url("../fonts/equinox-webfont.woff") format("woff2"), url("../fonts/equinox-webfont.woff") format("woff");
    font-style: normal;
}

.line-small {
    margin-top: -50px;
    font-size: 1.6em;
    font-weight: 400;
    font-family: "dinalternate";
}

.line-second { 
    font-size: 4.7em;
    font-weight: 700;
    font-family: "stheiti";
}

.controller-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff; /* Change to white background */
    color: #717171; /* Grey color for text */
    padding: 30px 0;
    font-family: "dinalternate";
}

.controller-bar a {
    color: #717171 !important;
    text-decoration:none;
}
.controller-item {
    text-align: center;
    font-size: 1.5em; /* Adjust font size */
    font-weight: 600; /* Bold text */
    cursor: pointer;
    position: relative;
    border-right: 1px slategray solid;
    padding: 0px 60px;
    
}

.content-stage {
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    padding: 0 50px;
}

.stage-1-heading, .stage-2-heading, .stage-3-heading, .stage-4-heading, .stage-5-heading, .stage-6-heading{
    font-size: 4em;
    font-weight: 400;
    font-family: "equinoxmedium";
}

.stage-6-sub-heading{
    font-size: 2.3em;
    font-weight: 400;
    font-family: "dinalternate";
}

.stage-3-heading, .stage-6-heading, .stage-6-sub-heading {
    color: white;
}

.stage-1-body, .stage-2-body {
    background-color: #DEDEDE !important;
}

.stage-3-body, .stage-6-body{
    background-color: #333333 !important;
}

.stage-5-body {
    background-color: #DEDEDE !important;
}
.content-right {
    width: 100%;
    margin-top: 10px;
    
}
.stage-1-content, .stage-3-content, .stage-4-content, .stage-5-content {
    font-size: 1.3em !important;
    font-family: "helvetica";
    text-align: justify;
    word-spacing: -0.05em;
    margin: 0;
}

.stage-2-content {
    font-size: 1.3em !important;
    font-family: "helvetica";
    text-align: justify;
    margin-top: 20px;
    
}

.stage-2-content-desktop {
    font-size: 1.3em !important;
    font-family: "helvetica";
    text-align: justify;
    word-spacing: 1px;
    margin: 0;
    margin-top: 4px !important;
}



.stage-3-content {
    color: white;
}
.stage-1-content::after {
    display: inline-block;
    width: 100%;
}

.stage {
    max-width: 800px; /* Restrict width if needed */
    margin-bottom: 20px; /* Space between stages */
    margin-top: 20px;
}

.stage iframe {
    width: 100%; /* Make iframe responsive */
    border: none; /* Remove border */
}

.stage p {
    font-size: 1.2em; /* Adjust font size */
    margin-top: 10px; /* Space above description */
}   


.stage .youtube-project-overview, .stage #main-video {
    height: 500px !important;
}

.stage .youtube-quarted-ss2025-collections {
    width: 100%;
    height: 620px !important;
    margin-top: 15px;
}


.video-player {
    text-align: center;
}
.video-player iframe {
    width: 100%;
    height: 315px; /* Adjust height as needed */
}
.playlist {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}
.playlist-item {
    font-family: 'helvetica';
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc; /* Optional border for separation */
    padding: 10px;
    width: 100%; /* Full width */
    max-width: 1200px; /* Adjust max-width as needed */
    
}

.playlist-item img:hover {
    background-color: #7c7c7c;
    cursor: pointer;
    border-radius: 30px;
}
.playlist-item-odd {
    background-color: white;
}

.playlist-item-even {
    background-color: #F0EFEF;
}
.playlist-item img {
    width: 60px; /* Fixed width for the image */
    height: auto;
    margin-right: 25px; /* Space between image and other content */
    margin-left: 25px; /* Space between image and other content */
}
.playlist-item .item-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 20px;
}
.playlist-item .number {
    font-weight: bold;
    font-size: 3em !important;
    margin-bottom: 5px;
}

.playlist-item .number-one {
    margin-right: 20px;
}

.playlist-item .item-info .title {
    font-size: 1.1em;
    margin-bottom: 5px;
    font-weight: bold;
}
.playlist-item .item-info .description {
    font-size: 1em;
    color: #666;
}

.archives-zone {
    padding: 20px;
    font-family: "equinoxmedium";
    background-color: #646464;
    /* text-align: center; */
}
.archives-zone .archive-heading {
    margin-bottom: 20px;
    color: white;
    font-size: 3em;
    font-weight: 400;
}

.archive-item {
    align-items: center;
    text-align: center;
}
.archive-item img {
    width: 150px; /* Adjust size as needed */
    height: 150px;
    margin-bottom: 10px;
}

.archive-item .archive-item-content-first {
    color: white;
    font-size: 1.5em;
}


.archive-item .archive-item-content-second {
    text-align: center;
    color: white;
    font-size: 2em;
    font-weight: 500;
}

.footer {
    display: flex;
    justify-content: space-around;
    background-color: #E6E6E6;
    color: #333;
    padding: 10px 0;
}
.footer-part {
    text-align: left;
}

.footer-part-1 {
    width: 15%;
    text-align: center !important;
}

.footer-part-2 {
    width: 35%
}

.footer-part-3, .footer-part-4 {
    width: 25%
}


.footer-second {
    display: flex;
    background-color: white !important;
    color: #0C3170;
    padding: 10px 0;
    font-weight: bold;
    font-size: 1.3em;
    
}


.footer-part-second-left {
    text-align: left !important;
    width: 50%;
    padding: 0 20px;
}

.footer-part-second-right {
    text-align: right !important;
    width: 50%;
    padding: 0 20px;
}

.footer-part-second-right a img {
    width: 30px;
    height: 30px;
}

.trend-book {
    height: 801px;
}


.hamburger-menu {
    position: fixed;
    top: 50px;
    left: 50px;
    background-color: none;
    color: #717171;
    padding: 10px;
    border-radius: 5px;
    z-index: 1000;
}

.menu-icon {
    font-size: 30px;
    cursor: pointer;
}

.menu-content {
    display: none;
    background-color: #f1f1f1;
    border-radius: 25px;
    margin-top: 0px;
    padding: 5px 50px 5px 20px;
    position: absolute;
    top: 25px; /* Adjust based on the size of the menu icon */
    left: 30px;
    font-size: 1em;
    font-family: "dinalternate";
    text-align: left !important;

}

.hamburger-menu:hover .menu-content {
    display: block;
}

.menu-content ul {
    list-style-type: none;
    width: max-content;
    padding: 0;
    margin: 0;
}

.menu-content ul li {
    padding: 2px 0;
    color: #333;
    cursor: pointer;
}

.menu-content ul li:last-child {
    border-bottom: none;
}

@media screen and (min-width: 768px) {
    .logo-left {
        margin-top: 15px;
    }
    
}

@media screen and (max-width: 1150px) {
    .footer-part {
       font-size: 0.8em;
    }

    
    .controller-item {
        font-size: 0.9em;
    }
    .archive-item .archive-item-content-first {
        font-size: 1em;
    }
    
    
    .archive-item .archive-item-content-second {
        font-size: 1.5em;
    }
}

@media screen and (min-width: 768px) {

    .container {
        max-width: none !important;
        width: 100% !important;
    }



}

@media screen and (max-width: 1000px) {
    .footer-img {
        width: 95px;
        height: 40px;
    }
    .footer-part {
        font-size: 0.7em;
     }
     .stage-2-content-desktop {
        font-size: 1.1em !important;
        margin-top: 4px !important;
    }
    .stage-1-heading, .stage-2-heading, .stage-3-heading, .stage-4-heading, .stage-5-heading, .stage-6-heading{
        font-size: 3.5em;
    }

    .archive-item img {
        width: 120px; /* Adjust size as needed */
        height: 120px;
    }
    
    .archive-item .archive-item-content-first {
        font-size: 1em;
    }
    
    
    .archive-item .archive-item-content-second {
        font-size: 1.5em;
    }


}


@media screen and (max-width: 900px) {
    .trend-book {
        height: 765px;
    }

    .footer-part {
        font-size: 0.5em;
     }
 
    .archive-heading {
        font-size: 2.5em;
    }
    .controller-item {
        padding: 0px 40px;
    }
    .stage-6-sub-heading {
        font-size: 1.5em;
    }
    .playlist-item img {
        width: 40px; /* Fixed width for the image */
    }
    .playlist-item .number {
        font-size: 2.5em !important;
    }
    .playlist-item .item-info .title {
        font-size: 1em;
    }
    .playlist-item .item-info .description {
        font-size: 0.9em;

    }
    .archive-item .archive-item-content-first {
        font-size: 0.9em;
    }
    
    .archive-item .archive-item-content-second {
        font-size: 1.1em;
    }

}


@media screen and (max-width: 768px) {
    .footer-second {
        font-size: 1.1em;
        
    }

    .archive-heading {
        font-size: 1.5em !important;
    }
    .archive-item img {
        width: 80px; /* Adjust size as needed */
        height: 80px;
    }
    
    .archive-item .archive-item-content-first {
        font-size: 0.6em;
    }
    .archive-item .archive-item-content-second {
        font-size: 0.9em;
    }
    .stage .youtube-quarted-ss2025-collections {
        height: 520px !important;
    }

    .stage .youtube-project-overview, .stage #main-video  {

        height: 350px !important;
    }
    .stage-1-heading, .stage-2-heading, .stage-3-heading, .stage-4-heading, .stage-5-heading, .stage-6-heading{
        font-size: 3em;
    }

    .stage-1-content, .stage-2-content, .stage-3-content, .stage-4-content, .stage-5-content {
        font-size: 1.1em !important;
    }
    .stage-2-content-desktop {
        font-size: 1em !important;
        margin-top: 4px !important;
    }
    .banner {
        height: 150vh;
    }

    .logo-left img {
        width: 95px;
        height: 40px;

    }

    .logo-right img {
        width: 89px;
        height: 40px;

    }


    .line {
        font-size: 7em;

    }
    
    .line-small {
        margin-top: -30px;
        font-size: 1.12em;
    }
    
    .line-second { 
        font-size: 3.29em;
    }

    .controller-item {
        font-size: 12px;
        font-weight: bold !important;
        padding: 0px 30px;
    }

    .controller-bar {
        padding: 20px 0;
    }

}

@media screen and (max-width: 700px) {
    .footer-img {
        width: 75px;
        height: 35px;

    }

    .stage-2-content-desktop {
        font-size: 0.8em !important;
        margin-top: 4px !important;
    }

    .trend-book {
        height: 600px !important;
    }
    .stage-1-heading, .stage-2-heading, .stage-3-heading, .stage-4-heading, .stage-5-heading, .stage-6-heading{
        font-size: 2.5em;
    }

    .stage-1-content, .stage-2-content, .stage-3-content, .stage-4-content, .stage-5-content {
        font-size: 0.9em !important;
    }

}

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

    .stage-5-body .stage iframe {
        height: 600px !important;
    }
    #filp-directory {
        height: 200px !important;
    }
    .footer-second {
        font-size: 0.8em;
        
    }
    .stage-2-content-desktop {
        font-size: 0.7em !important;
        margin-top: 4px !important;
    }


    .footer-part-second-right a img {
        width: 20px;
        height: 20px;
    }
    
    .footer-img {
        width: 50px;
        height: 23px;

    }
    .footer-part {
        font-size: 0.5em;
     }
 
    .archive-item img {
        width: 60px; /* Adjust size as needed */
        height: 60px;
    }
    
    .archive-item .archive-item-content-first {
        font-size: 0.5em;
    }
    .archive-item .archive-item-content-second {
        font-size: 0.7em;
    }

    .playlist-item .number-one {
        margin-right: 5px;
    }
    
    .playlist-item img {
        width: 30px; /* Fixed width for the image */
    }
    .playlist-item .number {
        font-size: 2em !important;
    }
    .playlist-item .item-info .title {
        font-size: 0.8em;
    }
    .playlist-item .item-info .description {
        font-size: 0.7em;

    }
    .stage-6-sub-heading {
        font-size: 1.2em;
    }
    .stage-2-body {
        margin-top: -20px;
    }
    .stage .youtube-project-overview, .stage #main-video {

        height: 300px !important;
    }

    .stage .youtube-quarted-ss2025-collections {
        height: 380px !important;
    }


    .stage-1-heading, .stage-2-heading, .stage-3-heading, .stage-4-heading, .stage-5-heading, .stage-6-heading{
        font-size: 2em;
    }
    .line {
        font-size: 5em;

    }
    
    .line-small {
        font-size: 0.8em;
    }
    
    .line-second { 
        font-size: 2.85em;
    }


    .banner {
        height: 120vh;
    }

    .controller-item {
        font-size: 10px;
        font-weight: bold !important;
        padding: 0px 20px;
    }

    .controller-bar {
        padding: 20px 0;
    }

}

@media screen and (max-width: 500px) {
    .footer-part {
        font-size: 0.4em;
     }

     .content-right {
        margin-top: 13px;
     }
     .stage-2-content-desktop {
        font-size: 0.5em !important;
        margin-top: 8.5px !important;
    }


     .trend-book {
        height: 400px !important;
    }
    .archives-zone {
        padding: 10px;
        /* text-align: center; */
    }
    .archive-item img {
        width: 45px; /* Adjust size as needed */
        height: 45px;
    }
    .playlist-item .number-one {
        margin-right: 5px;
    }
    
    .playlist-item img {
        width: 25px; /* Fixed width for the image */
        margin-left: 5px;
        margin-right: 15px;
    }
    .playlist-item .number {
        font-size: 1.5em !important;
    }
    .playlist-item .item-info .title {
        font-size: 0.7em;
    }
    .playlist-item .item-info .description {
        font-size: 0.6em;

    }
    .stage-6-sub-heading {
        font-size: 0.9em;
    }
    .stage .youtube-project-overview, .stage #main-video {

        height: 250px !important;
    }
    .stage-1-content, .stage-2-content, .stage-3-content, .stage-4-content, .stage-5-content {
        font-size: 0.7em !important;
    }
    .stage-2-content {
        word-spacing: -1.3px;
    }

    .stage-1-heading, .stage-2-heading, .stage-3-heading, .stage-4-heading, .stage-5-heading, .stage-6-heading{
        font-size: 1.5em;
    }
    .controller-item {
        font-size: 10px;
        font-weight: bold !important;
        padding: 0px 10px;
    }

    .line-second { 
        font-size: 2.2em;
    }
}
@media screen and (max-width: 425px) {
    .footer-second {
        font-size: 0.6em;
        
    }
    .content-right {
        margin-top: 12px;
     }

    .stage-2-content-desktop {
        font-size: 0.4em !important;
        margin-top: 2.7px !important;
    }

    .trend-book {
        height: 350px !important;
    }
    .footer-part {
        font-size: 0.4em;
     }
 
    .archive-item .archive-item-content-first {
        font-size: 0.4em;
    }
    .archive-item .archive-item-content-second {
        font-size: 0.4em;
    }

    .stage-6-sub-heading {
        font-size: 0.8em;
    }
    .stage .youtube-quarted-ss2025-collections {
        height: 220px !important;
        margin-top: 13px;
    }

    .stage-1-heading, .stage-2-heading, .stage-3-heading, .stage-4-heading, .stage-5-heading, .stage-6-heading{
        font-size: 1.3em;
    }
    .stage-1-content, .stage-3-content, .stage-4-content, .stage-5-content {
        font-size: 0.5em !important;
    }
    .stage-2-content {
        font-size: 0.52em !important;
    }


    .line {
        font-size: 3em;

    }
    
    .line-small {
        margin-top: -15px;
        font-size: 0.48em;
    }
    
    .line-second { 
        font-size: 1.71em;
    }

    .banner {
        height: 105vh;
    }

    .controller-item {
        font-size: 8px;
        font-weight: bold !important;
        padding: 0px 10px;
    }


}

@media screen and (max-width: 375px) {
    
    .stage-2-content-desktop {
        font-size: 0.38em !important;
        margin-top: 3px !important;
    }
    .stage-2-content {
        font-size: 0.48em !important;
    }
}
    

@media screen and (max-width: 360px) {
    .footer-part {
        font-size: 0.3em;
     }
     .stage-2-content-desktop {
        font-size: 0.34em !important;
        margin-top: 3.5px !important;
    }
    .stage-6-sub-heading {
        font-size: 0.5em;
    }
    .stage .youtube-project-overview, .stage #main-video {

        height: 150px !important;
    }
    .playlist-item .number {
        font-size: 1.2em !important;
    }
    .playlist-item .item-info .title {
        font-size: 0.6em;
    }
    .playlist-item .item-info .description {
        font-size: 0.5em;

    }
    .stage-1-heading, .stage-2-heading, .stage-3-heading, .stage-4-heading, .stage-5-heading, .stage-6-heading{
        font-size: 1.1em;
    }
    .stage-1-content, .stage-3-content, .stage-4-content, .stage-5-content {
        font-size: 0.4em !important;
    }


}


@media screen and (max-width: 325px) {
    .archive-item img {
        width: 30px; /* Adjust size as needed */
        height: 30px;
    }

    .stage-2-content-desktop {
        font-size: 0.29em !important;
        margin-top: 3.8px !important;
    }
    .stage .youtube-quarted-ss2025-collections {
        height: 200px !important;
    }
    .stage-1-heading, .stage-2-heading, .stage-3-heading, .stage-4-heading, .stage-5-heading, .stage-6-heading{
        font-size: 0.9em;
    }
    .stage-1-content, .stage-2-content, .stage-3-content, .stage-4-content, .stage-5-content {
        font-size: 0.4em !important;
    }
}