@import url('https://fonts.googleapis.com/css2?family=Passion+One:wght@400;700;900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}
body::-webkit-scrollbar{
    display: none;
}
body{
    overflow-x: hidden;
    background-color: black;
    /* background-color: black; */
    /* font-family: "Passion One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-family: "Roboto Condensed", sans-serif; */
    font-family: "PorscheNext-SemiBold";
    /* overflow: hidden; */
    
    scroll-snap-type: start;
}
.scroll{
    scroll-snap-align: start;
}
#headContainer{
    height: 100vh;
    padding: 2rem 10%;
    background: radial-gradient(circle, rgb(60, 132, 209) 0%, rgb(27, 77, 204) 42%);
    nav{
        a{
            text-decoration: none;
            color:white;
        }
        color:white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        img{
            width: 200px;
        }
        .fa-bars,.fa-user{
            font-size: 20px;
            cursor: pointer;
            transition: 0.2s ease-in-out;
            &:hover{
                scale: 1.2;
            }
        }
        #sidebar{
            z-index: 10;
            color: white;

            .container-navbar{
                position: fixed;
                top: 0;
                background-color: white;
                padding: 30px;
                width: 40%;
                bottom: 0;
                transition: 0.5s;
                left: -100%;
                z-index: 100;
                label{
                    padding: 10px 20px;
                    color:black;
                    cursor: pointer;
                    font-size: 25px;
                    &:hover i{
                        animation: rotate 0.5s;
                }
            }

            nav{
                
               
                ul,li{
                    color:black;
                    list-style: none;
                    a{
                        text-decoration: none;
                        color: rgb(0, 0, 0);
                    }
                    
                }
                .notdropdown-container{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    gap: 5px;
                    flex-direction: column;
                }
                .notdropdown{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    cursor: pointer;
                    padding: 10px 20px;
                    &:hover{
                        background-color: rgb(176, 172, 172);
                    }
                    &:focus{
                        background-color: rgb(154, 155, 155);

                    }
                    .dropdown{
                        animation: rise 0.5s;
                        width: 350px;
                        padding: 30px 40px;
                        display: none;
                        background-color: rgb(236, 235, 235);
                        position: fixed;
                        top: 0;
                        bottom: 0;
                        left: 40%;  
                        li{
                           
                            a{
                                img{
                                    border-radius: 2px;
                                    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.203);
                                }
                                
                                 
                            }
                        }
                       
                        .fa-arrow-left{
                            display: none;

                            font-size: 20px;
                            transition: 0.3s;
                            &:hover{
                                font-size: 25px;
                            }
                        }
                    
                    }
                    .pic{
                        /* position: relative; */
                        li{
                            margin: 40px 0;

                            padding: 10px 20px;
                            
                            a{
                                display: flex;
                                position: relative;
                                align-items: center;
                                justify-content: center;
                                p{
                                    z-index: 10;
                                         /* top: 50%;
                                    left: 50%;
                                    transform: translate(-50%,-50%); */
                                    position: absolute;
                                }
                                img{
                                    transition: 0.5s;
                                    height: 0;
                                    object-fit: cover;

                                }
                            }
                        }
                        li:hover a img{
                            filter: brightness(50%);
                            height: 300px;
                        }
                        li:hover a p{
                            color: rgb(248, 248, 248);
                        }
                    }
                    .model{
                        overflow-y: scroll;
                        display: none;
                        flex-direction: column;
                        gap:35px;
                        a{
                            /* height: 150px; */
                            border-radius: 10px;
                            transition: 0.2s;
                            padding: 10px 20px 20px 20px;
                            li{
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                div{
                                    width: 100%;
                                    img{
                                        transform: scale(1.2);
                                        transition: 0.2s linear;
                                        width: 100%;

                                        height: 80px;
                                        object-fit: cover;
                                        width: 100%;
                                    }
                                    
                                    h3{
                                        font-size: 20px;
                                    }
                                    div{
                                        p{
                                            color: white;
                                            font-size: 14px;
                                            display: inline;
                                            padding:  1px 10px;
                                            background-color: rgb(100, 98, 98);
                                            border-radius: 5px;
                                            
                                        }
                                    }
                                }
                                
                               
                            }
                        }
                        
                        a:hover img{
                            transform: translateX(20px) scale(1.2);
                        }
                        a:hover {
                            background-color: white;
                            box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.064) ;
                        }
                    }
                    .model::-webkit-scrollbar{
                        display: none;
                    }
                        
                                  
                }
                
                .notdropdown:focus-within .dropdown{
                    display: block;
                    
                }
                .notdropdown:focus-within .model{
                    display: flex;
                    
                }
            
            }
            }

        }    
        #navbar:checked ~ #sidebar::before{
            backdrop-filter: blur(15px);
            background-color: rgba(0, 0, 0, 0.322);
            position: fixed;
            content: '';
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /* background-color: aqua; */
            z-index: -1;
        }
        #navbar:checked ~ #sidebar .container-navbar{
            left: 0;
        }
    }
    #container{
        color:white;
        position: relative;
        height: 90vh;
        display: flex;
        align-items: center;
        h1{
            line-height: 145px;
            p{
                text-align: start;
                font-family: "Roboto Condensed", sans-serif;
                font-size: 30px;
            }
            font-family: "Passion One", sans-serif;
            font-weight: 400;
            position: absolute;
            top: 38%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* z-index: 3; */
            font-size: 350px;
            font-weight: 400;
        }
        /* padding: 2rem 15%; */
        /* border: 2px red solid; */
        #slider {
            /* padding: 100px; */
            position: relative;
            display: flex;
            justify-content: center;
            /* width: 800px; */
            /* border: 2px solid red; */
            input[type = radio]{
                display: none;
            }
            /* padding: 30px; */
            #overflow{
                /* border: 2px solid red;   */
                overflow: hidden;
                width: 80%;

            }
            /* .scroll::-webkit-scrollbar{
                display: none;
            } */
            .scroll{
                /* overflow-x: scroll;
                scroll-snap-type:x mandatory; */
                /* border: 2px solid red; */
                width: 700%;
                height: 500px;
                position: relative;
                display: flex;
                transition: 0.5s ease-in-out;
                .slide{
                    scroll-snap-align: start;
                    object-fit: cover;
                    float: left;
                    width: 100%;
                    max-width:14.28%;
                }
            
            }

            #slide1:checked ~ #overflow .scroll{
                margin-left: 0;
            }
            #slide2:checked ~ #overflow .scroll{
                margin-left: -100%;
            }
            #slide3:checked ~ #overflow .scroll{
                margin-left: -200%;
            }
            #slide4:checked ~ #overflow .scroll{
                margin-left: -300%;
            }
            #slide5:checked ~ #overflow .scroll{
                margin-left: -400%;
            }
            #slide6:checked ~ #overflow .scroll{
                margin-left: -500%;
            }
            #slide7:checked ~ #overflow .scroll{
                margin-left: -600%;
            }


            #slide1:checked ~ #control label:nth-child(2),
            #slide2:checked ~ #control label:nth-child(3),
            #slide3:checked ~ #control label:nth-child(4),
            #slide4:checked ~ #control label:nth-child(5),
            #slide5:checked ~ #control label:nth-child(6),
            #slide6:checked ~ #control label:nth-child(7){
                height: 50px;
                width: 50px;
                position: absolute;
                transition: 0.2s;

                right: 0;
                top: 50%;
                cursor: pointer;
                background-image: url(img/right-chevron-svgrepo-com.png);
                background-size: cover;
                &:hover{
                    transform: scale(1.5);
                }
            }
            #slide2:checked ~ #control label:nth-child(1),
            #slide3:checked ~ #control label:nth-child(2),
            #slide4:checked ~ #control label:nth-child(3),
            #slide5:checked ~ #control label:nth-child(4),
            #slide6:checked ~ #control label:nth-child(5),
            #slide7:checked ~ #control label:nth-child(6){
                height: 50px;
                width: 50px;
                transition: 0.2s;
                left: 0;
                top: 50%;
                cursor: pointer;
                position: absolute;
                background-image: url(img/left-chevron-svgrepo-com.png);
                background-size: cover;
                &:hover{
                    transform: scale(1.5);
                }
            }
            #bullets{
                /* height: 50px; */
                /* width: 50px; */
                display: flex;
                bottom: -80px;
                gap: 30px;
                border-radius: 50%;
                /* background-color: white; */
                position: absolute;
                label{
                    width: 16px;
                    height: 16px;
                    background-color: white;
                    border-radius: 50px;
                    position: relative;
                    transition: 0.2s ease-in;
                    cursor: pointer;
                }
                label::after{

                    position: absolute;
                    content: '';
                    width: 22px;
                    height: 22px;
                    background-color: rgba(0, 0, 0, 0);
                    border: 1px solid white;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);

                    border-radius: 50px;
                }
            }

            #slide1:checked ~ #bullets label:nth-child(1),
            #slide2:checked ~ #bullets label:nth-child(2),
            #slide3:checked ~ #bullets label:nth-child(3),
            #slide4:checked ~ #bullets label:nth-child(4),
            #slide5:checked ~ #bullets label:nth-child(5),
            #slide6:checked ~ #bullets label:nth-child(6),
            #slide7:checked ~ #bullets label:nth-child(7){
                background-color: rgb(0, 0, 0);

            }
            #content{      
                /* font-family: 'Roboto Condensed',serif; */
                position: absolute;
                bottom: -50px;
                width: 100%;
                .textBox{
                    display: none;
                    align-items: center; 
                    justify-content: space-between;
                    animation: bot 0.3s ease-in-out;
                    .leftText{
                        width: 700px;
                        h2{
                            transition: 1s ;

                            font-size: 40px;
                            font-weight: 400;
                        }
                        p{
                            font-size: 15px;
                            line-height: 35px;
                        }
                    }
                    .rightText{
                        display: flex;
                        /* gap: 30px; */
                        text-align: center;
                        justify-content: space-between;
                        width: 40%;
                        div{
                            img{
                                width: 40px;
                            }

                            h3{
                                font-size: 20px;
                            }
                            p{
                                font-size: 12px;
                            }
                        }

                    }
                }
            }

            #slide1:checked ~ #content .textBox:nth-child(1),
            #slide2:checked ~ #content .textBox:nth-child(2),
            #slide3:checked ~ #content .textBox:nth-child(3),
            #slide4:checked ~ #content .textBox:nth-child(4),
            #slide5:checked ~ #content .textBox:nth-child(5),
            #slide6:checked ~ #content .textBox:nth-child(6),
            #slide7:checked ~ #content .textBox:nth-child(7){
                display: flex;
            }
        }
    }
}

@keyframes rotate{
    0%{
        scale: 1;
        transform: rotate(0deg);
    }
    50%{
        scale: 1.2;
    }
    100%{
        scale: 1;
        transform: rotate(180deg);
    }
}
@keyframes bot{
    0%{
        opacity: 0;

        transform: translateY(200px);
    }
    100%{
        opacity: 1;

        transform: translateX(0);
    }
}
#main{
    
    nav{
        .ruler{
            width: 100%;
            height: 1px;
            background-color: white;
        }
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0rem 10%;
        .link{
            padding: 30px 0;
            display: flex;
            width: 100%;
            align-items: center;

            justify-content: space-around;
            a{
                text-decoration: none;
                color: white;
                font-size: 20px;
                transition: 0.2s;
                &:hover{
                    color: rgb(106, 106, 108);
                }
            }

        }
    }
    section{
        height: 100vh;
    }
    #Concept{
        position: relative;
        background-image: linear-gradient(rgb(0, 0, 0) 5%,rgba(0, 0, 0, 0.34)90%,rgba(255, 255, 255, 0) );
        display: flex;
        align-items: center;
        img{
            width: 100%;
            position: absolute;
            z-index: -1;
            top: 0;
        }
        
        .text{
            
            transform: translateY(-60px);
            padding: 0 10%;
            color: white;
            /* position: absolute; */
            top: 30%;
            left: 10%;
            min-width: 200px;
            width: 70%;
            h1{
                font-size: 60px;
            }
            p{
                font-size: 15px;
            }
        }
    }
    #Performance{
        overflow: hidden;
        /* position: relative; */
        .bot {
            h1{
                font-size: 50px;
            }
            display: flex;
            color: rgb(0, 0, 0);
            .imgcontainer{
                width: 40%;
                height: 50vh;
                background-image: url(https://images-porsche.imgix.net/-/media/9E36B152CAED4178B5C284CEC333FD82_11CA8D5C405441E3A7F739298772BFA5_MA24T4BOX0003-macan-in-city-side?w=600&q=85&crop=faces%2Centropy%2Cedges&auto=format);
                background-size: cover;
            }
    
            .text{
                background-color: white;
                padding: 20px;
                height: 50vh;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                /* width: 60%; */
            }
           
        }
        .top {
            height: 50%;
            
            display: flex;
            img{
                height: 100%;
                object-fit: cover;
                width: 20%;
                filter: brightness(80%);
            }
            
            .text{
                display: flex;
                flex-direction: column;
                
                .text1{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align:center;
                    height: 50%;
                    background-color: white;
                    padding: 20px;

                }
                .text2{
                    padding: 20px;
                    display: flex;
                    justify-content: center;
                    height: 50%;
                    width: 100%;
                    background-color: black;
                    color: white;
                    span:nth-child(1){
                        align-self: baseline;
                    }
                    h1{
                        align-self: center;
                        font-size: 100px;
                    }
                    span:nth-child(3){
                        align-self:self-end;
                    }
                }
          
                width: 80%;
                color:rgb(12, 12, 12);
                h1{
                    display: inline;
                    font-size: 50px;
                }
                p{
                    width: 60%;
                    font-size: 15px;
                }
            }
        }
    }
    #Sound{
        text-align: center;
        h1{
            font-size: 60px;
        }
        p{
            font-size: 25px;
        }
        /* background-color: aliceblue; */
        color:white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 100px;

        .Container{
            gap: 30px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            .right{
                width: 60%;
                clip-path: polygon(0 0, 100% 0, 100% 100%, 38% 100%);
                img{
                    width: 100%;
                    object-fit: cover;
                    height: 500px;
                }
            }
            .left{
                width: 30%;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 20px;
                p{
                    font-size: 20px;
                }
                #button{
                    padding: 10px;
                    border-radius: 10px;
                    display: flex;
                    align-items: center;
                    gap: 20px;
                    border: 2px solid white;
                    .play-pause{
                        padding: 10px;
                        background-color: white;
                        clip-path: circle();
                        i{
                            width: 20px;
                            /* font-size: 20px; */
                            height: 20px;
                            color: black;
                        }
                    }
                    input:checked ~ label .fa-pause{
                        display: none;
                    }
                    input:not(:checked) ~ label .fa-play{
                        display: none;
                    }
                    input:not(:checked) ~ .wave{
                        display: flex;
                    }


                    .wave{
                        display: flex;
                        transform: rotate(180deg);
                        gap: 5px;
                        animation: rise 0.5s linear;
                        display: none;
                        height: 25px;
                        .line{
                            animation: wave 0.5s ease-in-out infinite ;
                            animation-delay: calc(var(--position)* 1s);
                            width: 2px;
                            background-color: white;
                        }
                    }

                }
            }
        }
       
    }
    
    #Gallery{
        overflow: hidden;
        color: rgb(255, 255, 255);
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 30px;
        h1{
            font-size: 60px;
        }
        .item{
            display: grid;
            max-height: 90%;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: 200px 200px 1fr;
            grid-template-areas: 
            "b d c"
            "b a e"
            "b a f";
           
            img{
                width: 100%;
                object-fit: cover;
                height: 100%;
            }
        }

    }
    
}
@keyframes wave{
    0%,100%{
        height: 30%;
    }
    50%{
        height: 100%;
    }
    
}
@keyframes rise {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: black;
    a{
        color:white;
    }
    
    /* display: none; */
    padding: 2rem 5%;
    color:white;
    .title {
        font-size: 1.3rem;
        margin: 12px 0px;
    }
    .info-01 {
        display: flex;
        gap: 9rem;
        .location-contact {
            width: 27%;
        }
        .social-media {
            width: 50%;
            .info {
                margin: 8px 0px;
            }
            .media {
                a {
                    margin: 0px 4px;
                    text-align: center;
                    i {
                        padding: 11px 0px;
                        background-color: white;
                        color: black;
                        border-radius: 6px;
                        font-size: 1.2rem;
                        width: 7.5%;
                    }
                }
            }
        }
    }
    .info-02 {
        display: flex;
        flex-direction: column;
        .link {
            display: flex;
            gap: 3.5rem;
            div {
                display: flex;
                flex-direction: column;
                a {
                    margin: 5px 0px;
                }
            }
        }
    }
    .ruler {
        width: 100%;
        background-color: rgba(149, 148, 148, 0.747);
        height: 1px;
        margin: 4rem 0rem;
    }
    .info-03 {
        .company {
            text-align: center;
            margin-top: 3rem;
            margin-bottom: 4rem;
            a {
                margin: 40px;
                .papan {
                    width: 15%;
                }
                .porsche {
                    width: 21%;
                }
            }
        }
    }
   
}
@media (max-width:1312px){
    #headContainer{
        nav{
            img{
                width: 25vh;
            }
        }
        #container{
            position: relative;

           h1{
                top:37%;
                line-height: 130px;
                font-size: 250px;
                p{
                    font-size: 30px;
                }
            }
            #slider{
                #overflow{
                    width: 80%;
                    .scroll{
                        height: 300px;
                    }
                }
                #slide1:checked ~ #control label:nth-child(2),
                #slide2:checked ~ #control label:nth-child(3),
                #slide3:checked ~ #control label:nth-child(4),
                #slide4:checked ~ #control label:nth-child(5),
                #slide5:checked ~ #control label:nth-child(6),
                #slide6:checked ~ #control label:nth-child(7){
                    
    
                    /* right: -9%; */
                    top: 50%;
                    cursor: pointer;
                   
                }
                #slide2:checked ~ #control label:nth-child(1),
            #slide3:checked ~ #control label:nth-child(2),
            #slide4:checked ~ #control label:nth-child(3),
            #slide5:checked ~ #control label:nth-child(4),
            #slide6:checked ~ #control label:nth-child(5),
            #slide7:checked ~ #control label:nth-child(6){
                    
                    /* left: -9%; */
                    top: 50%;
                    
                }
                #content{
                    bottom: -8vw;
                    .textBox{
                        .leftText{
                            h2{
                                font-size: 30px;
                            }
                            p{
                                font-size: 12px;
                            }
                        }
                        .rightText{
                            div{
                                h3{
                                    font-size: 20px;
                                }
                                p{
                                    font-size: 12px;
                                }
                                img{
                                    width: 35px;
                                }
                            }
                        }
                        
                    }
                }
                #bullets{
                    scale: 0.8;
                    bottom: -11vw;
                }
            }
            

        }
    }
    #main{
        #Concept{
            background-image: linear-gradient(0deg, rgba(180,179,179,0) 55%, rgba(0,0,0,1) 93%);
            flex-direction: column;
            justify-content: space-around;
            .text{
                width: 100%;
                text-align: center;
                margin-top: 20px;
                h1{
                    font-size: 50px;
                }
                p{
                    font-size: 20px;
                }
            }
            img{
                display: block;
                object-fit: cover;
                height: 50%;
                position: relative;
            }
            
        }
        #Sound{
            gap: 20px;
            h1{
                font-size: 50px;
            }
            .Container{
                height: 80%;
                flex-direction: column;
                .left{
                    width: 100%;
                    padding: 0 10%;
                    order: 2;
                    
                }
                .right{

                    clip-path: none;
                    order: 1;
                    width: 90%;
                    .imgContainer{
                        img{
                            object-fit: cover;
                            height: 300px;
                            width: 100%;
                        }
                    }

                }
            }
        }
        #Performance{
            .top{
                height: 50vh;
               img{
                width: 30%;
               }
                .text{
                    width: 70%;
                    width: 100%;
                    h1{
                        font-size: 40px;
                    }
                    p{
                        font-size: 15px;
                    }
                    
                }
            }
            .bot{
                height: 50vh;
                .imgcontainer{
                    width: 45%;
                    img{
                        object-fit: cover;
                    }
                }
                .text{
                    width: 55%;
                }
                
            }
           
        }
        #Gallery{
            height: auto;
            .item{
                grid-template-rows: 200px 200px 1fr ;
            }
            h1{
                font-size: 50px;
            }
        }

    }
    .scroll{
        scroll-snap-align:unset;
    }
    .footer {
        height: auto;
        .info-01 {
            flex-direction: column;
            gap: 3rem;

            .social-media {
                width: 100%;
            }
        }
        .info-03{
            .company{
                margin: 0;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                a{
                    .porsche{
                        width: 25vw;
                    }
                    .papan{
                        width: 20vw;
                    }
                }
                
            }
        }
    }
}
@media (max-width:1024px) {
    #headContainer{
        nav{
            img{
                width: 25vw;
            }
        }
        #container{
            position: relative;

           h1{
                top:43%;
                line-height: 100px;
                font-size: 200px;
                p{
                    font-size: 30px;
                }
            }
            #slider{
                #overflow{
                    width: 100%;
                    .scroll{
                        height: 400px;
                    }
                }
                #slide1:checked ~ #control label:nth-child(2),
                #slide2:checked ~ #control label:nth-child(3),
                #slide3:checked ~ #control label:nth-child(4),
                #slide4:checked ~ #control label:nth-child(5),
                #slide5:checked ~ #control label:nth-child(6){
                    
    
                    right: -9%;
                    top: 50%;
                    cursor: pointer;
                   
                }
                #slide2:checked ~ #control label:nth-child(1),
                #slide3:checked ~ #control label:nth-child(2),
                #slide4:checked ~ #control label:nth-child(3),
                #slide5:checked ~ #control label:nth-child(4),
                #slide6:checked ~ #control label:nth-child(5){
                    
                    left: -9%;
                    top: 50%;
                    
                }
                #content{
                    /* position: relative; */
                    bottom: -50px;
                    .textBox{

                        width: 100%;
                        /* position: relative; */
                        justify-content: center;
                        .leftText{
                            position: absolute;
                            left: 5%;
                            width: 90%;

                            top:-45vh;
                            /* padding: 0 8%; */

                            h2{
                                font-size: 30px;
                            }
                            p{
                                display: none;
                                font-size: 0px;
                            }
                        }
                        .rightText{
                            width: 100%;
                            div{
                                h3{

                                    font-size: 25px;
                                }
                                p{
                                    font-size: 15px;
                                }
                            }
                        }
                    }
                }
                #bullets{
                    bottom:-120px;
                }
            }
            

        }
    }
    #main{
        #Concept{
            background-image: linear-gradient(0deg, rgba(180,179,179,0) 55%, rgba(0,0,0,1) 93%);
            flex-direction: column;
            justify-content: space-around;
            .text{
                width: 100%;
                text-align: center;
                h1{
                    font-size: 50px;
                }
                p{
                    font-size: 20px;
                }
            }
            video{
                display: block;
                height: 50%;
                position: relative;
            }
            
        }
        #Sound{
            gap: 20px;
            h1{
                font-size: 50px;
            }
            .Container{
                height: 80%;
                flex-direction: column;
                .left{
                    width: 100%;
                    padding: 0 10%;
                    order: 2;
                    
                }
                .right{

                    clip-path: none;
                    order: 1;
                    width: 90%;
                    .imgContainer{
                        img{
                            object-fit: cover;
                            height: 300px;
                            width: 100%;
                        }
                    }

                }
            }
        }
        #Performance{
            .top{
                /* flex-direction: column; */
                img{
                    width: 50%;
                }

                img:nth-child(2){
                    order: 1;

                }
                .text{
                    
                    .text1{
                        justify-content: center;
                        height: 70%;
                        padding: 10px;
                        p{
                            width: 80%;
                        }
                    }
                    .text2{
                        justify-content: center;
                        height: 30%;
                        padding: 10px;
                        h1{
                            align-self: baseline;
                        }
                        span{
                            align-self: baseline;
                        }
                        span:nth-child(3){
                            align-self: baseline;

                        }
                    }
                }

            }
            .bot{
                flex-direction: column;
                .imgcontainer{
                    width: 100%;
                    img{
                        width: 100%;
                    }
                }
                .text{
                    padding: 10px;
                    width: 100%;
                    height: 20vh;
                    /* order: 2; */
                   
                }
            }
           
        }
        #Gallery{
            height: auto;
            
            h1{
                font-size: 50px;
            }
        }

    }
    .scroll{
        scroll-snap-align:unset;
    }
    .footer {
        height: auto;
        .info-01 {
            flex-direction: column;
            gap: 3rem;

            .social-media {
                width: 100%;
            }
        }
        .info-03{
            .company{
                margin: 0;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                a{
                    .porsche{
                        width: 25vw;
                    }
                    .papan{
                        width: 20vw;
                    }
                }
                
            }
        }
    }
}

@media (max-width:480px){
  
    #headContainer{
        nav{
            .logo{
                display: flex;
                justify-content: center;
                align-items: center;
                img{
                    width: 45%;
                }
            }
            #sidebar{
                .container-navbar{
                    width: 100%;
                    .notdropdown-container{
                        .notdropdown{
                            .dropdown{
                                width: 100%;
                                i{
                                    display: block;
                                }
                                left: -100%;
                                transition: 0.5s;
                                animation: unset;
                                display: unset;
                            }
                            .pic{
                                li{
                                    a{
                                        img{
                                            width: 300px;
                                        }
                                    }
                                }
                            }
                        }
                        .notdropdown:focus-within .dropdown{
                            left: 0;
                        }
                    }
                }
            }
            
        }
        
        #container{
            h1{
                top:42%;
                line-height: 55px;
                font-size: 100px;
                p{
                    font-size: 20px;
                }
            }
            

            #slider{
                width: 100%;
                #overflow{
                    width: 100%;
                    .scroll{
                        height: 200px;
                    }
                }
                #content{
                    bottom: -120px;
                    .textBox{
                        /* animation: none; */
                        justify-content: center;
                        /* border: 2px rgb(72, 34, 34) solid; */
                        /* width: 200px; */
                        .leftText{
                            width: 100%;
                            top: -50vh;
                            /* border: 2px red solid; */
                            position: absolute;
                            h2{
                                font-size: 25px;
                            }
                            p{
                                display: none;
                            }
                        }
                        .rightText{
                            width: 100%;
                           /* position: absolute; */
                            /* border: 2px red solid; */

                            div{
                                img{
                                    width: 30%;
                                }
                                h3{
                                    font-size: 15px;
                                }
                                p{
                                    font-size: 10px;
                                }
                            }
                        }
                    }
                }
                #bullets{
                    gap: 20px;
                    bottom: -180px;
                    label{
                        width: 14px;
                        height: 14px;
                    }
                    label::after{
                        width: 21px;
                        height: 21px;
                    }
                }
                
            #slide1:checked ~ #control label:nth-child(2),
            #slide2:checked ~ #control label:nth-child(3),
            #slide3:checked ~ #control label:nth-child(4),
            #slide4:checked ~ #control label:nth-child(5),
            #slide5:checked ~ #control label:nth-child(6),
            #slide6:checked ~ #control label:nth-child(7)
            {
                

                right: -5%;
                top: 80%;
                cursor: pointer;
               
            }
            #slide2:checked ~ #control label:nth-child(1),
            #slide3:checked ~ #control label:nth-child(2),
            #slide4:checked ~ #control label:nth-child(3),
            #slide5:checked ~ #control label:nth-child(4),
            #slide6:checked ~ #control label:nth-child(5),
            #slide7:checked ~ #control label:nth-child(6){
                left: -5%;
                top: 80%;
            }
            }
        }
    }
    #main{
        nav{
            .link{
                a{
                    font-size: 12px;
                }
            }
        }
        #Concept{
            flex-direction: column;
            justify-content: space-around;
            background-image: linear-gradient(0deg, rgba(180,179,179,0) 55%, rgba(0,0,0,1) 93%);
            /* display: block; */
            .text{
                width: 100%;
                text-align: center;
                display: block;
                margin-top: 20px;
                h1{
                    font-size: 30px;
                }
                p{
                    font-size: 15px;
                }
            }
            img{
                object-fit: cover;
                display: block;
                height: 40%;
                position: relative;
            }
        }
        #Performance{
            .top{               
                .text{
                    h1{
                        font-size: 25px;
                    }
                    p{
                        font-size: 10px;
                    }
                    .text1{
                        p{
                            width: 80%;
                        }
                    }
                    .text2{
                        padding: 10px;
                        h1{
                            font-size: 40px;
                        }
                        span{
                            font-size: 12px;
                        }
                    }
                }

            }
            .bot{
                .text{
                    h1{
                        font-size: 30px;
                    }
                    p{
                        font-size: 15px;
                    }
                }
            }
           
        }
        #Sound{
            gap: 20px;
            h1{
                font-size: 30px;
            }
            .Container{
                height: 80%;
                flex-direction: column;
                .left{
                    width: 100%;
                    padding: 0 10%;
                    order: 2;
                    p{
                        font-size: 15px;
                    }
                }
                .right{

                    clip-path: none;
                    order: 1;
                    width: 90%;
                    .imgContainer{
                        img{
                            object-fit: cover;
                            height: 200px;
                            width: 100%;
                        }
                    }

                }
            }
        }
        #Gallery{
            overflow: unset;
            position: relative;
            height: auto;
            h1{
                font-size: 30px;
            }
            .item{
                grid-template-columns: repeat(1,1fr);
                grid-template-rows: repeat(6,1fr);
                grid-template-areas: 
                "a"
                "b"
                "c"
                "d"
                "e"
                "f"
                ;
                
            }
        }
    }
    .footer {
        height: auto;
        .info-01 {
            flex-direction: column;
            gap: 3rem;

            .social-media {
                width: 100%;
            }
        }
        .info-03{
            .company{
                margin: 0;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                a{
                    .porsche{
                        width: 50vw;
                    }
                    .papan{
                        width: 42vw;
                    }
                }
                
            }
        }
    }
    .scroll{
        scroll-snap-align:unset;
    }
    
}