@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
html{
    scroll-behavior: smooth;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Nunito", serif;
}

body {
    background-color: rgb(255, 250, 250);
    height: 100vh;
    width: 100%;
    background-image: url(selectsec1.png);
    background-size: cover;
    background-position: -100px -100px;
    overflow: hidden;
}

body button{
    cursor: pointer;
}
/*header section*/
header {
    display: flex;
    justify-content: space-between;
    padding: 15px 80px;
    align-items: center;
    position: relative;
}

header #logo {
    height: 60px;
}

header nav a {
    margin: 0 15px;
    font-size: 14px;
    color: black;
    text-decoration: none;
    font-weight: 700;
    position: relative;
}

header nav a::before {
    height: 15%;
    width: 0%;
    background-color: black;
    content: "";
    position: absolute;
    left: 50%;
    top: 95%;
    translate: -50% -50%;
    transition: all 0.25s;
}

header nav a:hover::before {
    width: 100%;
}

header .btn a {
    margin-left: 10px;
    font-size: 15px;
    color: black;
    font-weight: bolder;
    border-left: 2px solid black;
    text-decoration: none;
    padding-left: 10px;

}

header .btn label {
    margin-right: 15px;
    background-color: rgb(255, 255, 255);
    padding: 8px;
    border-radius: 25px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.486);
}

header .btn label input {
    background: transparent;
    border: none;
    outline: none;
    width: 0;
    transition: all 0.35s;
}

header .btn label:focus-within input {
    padding-left: 5px;
    width: 150px;

}

header .btn label:hover input {
    padding-left: 5px;
    width: 150px;

}

header .btn button {
    background-color: black;
    color: white;
    padding: 8px 20px;
    border-radius: 8px;
    border: none;
    font-size: 15px;
    cursor: pointer;
    font-weight: bolder;

}

header nav {
    position: absolute;
    left: 50%;
    top: 10px;
    translate: -50% 100%;

}

/*Hero Section*/

.slider {
    height: 65%;
    background-color: white;
    width: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.301);
    display: flex;
}

.slider .imgdiv {
    padding: 20px 0px;
    height: 100%;
    width: 800px;
    position: absolute;
    z-index: +2;
    top: 50%;
    left: -50%;
    translate: -50% -50%;
    animation: anim 12s linear infinite;
    animation-delay: calc(12s / var(--quantity) * (var(--position)) - 6s);
    transition: all 0.25s;
}

.slider img {
    height: 100%;
    width: 100%;
    border-radius: 10px;
}

@keyframes anim {
    0% {
        left: -50%;
    }

    10% {
        left: 40%;
        opacity: 1;
        scale: 1;
    }

    30% {
        left: 50%;

    }

    35% {
        left: 148%;
    }
    100% {
        left: 200%;
    }
  }


.slider .leftang {
    height: 100%;
    width: 100%;
    background-color: rgb(255, 255, 255);
    position: absolute;
    rotate: -60deg;
    left: -59%;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.301) inset,
        0px 0px 150px 100px rgb(0, 0, 0);
    z-index: 10;
}

.slider .rightang {
    height: 100%;
    width: 100%;
    background-color: rgb(255, 255, 255);
    position: absolute;
    rotate: -60deg;
    right: -59%;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.301) inset,
        0px 0px 150px 100px rgb(0, 0, 0);
    z-index: 10;
}

.popbg {
    height: 100vh;
    width: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: +11;
}

.popup {
    height:auto;
    width: 55%;
    background-color: rgb(233, 233, 233);
    padding: 20px 40px 40px 40px;
    border-radius: 12px;
    border: 1px solid rgb(219, 219, 219);
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: 11;
    text-align: center;
    animation: popup 0.25s linear;
}

.popup i {
    position: absolute;
    right: 0px;
    font-size: 30px;
    top: -30px;
    color: rgb(236, 236, 236);
    cursor: pointer;
}

.popup img {
    border-radius: 10px;
}

.popup p {
    font-size: 12px;
    padding: 10px 20px 0px 20px;
}

.popup h3 {
    font-size: 20px;
    padding-bottom: 10px;
}

.popup span {
    font-size: 12px;
    color: rgb(112, 112, 112);
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

@keyframes popup {
    from {
        scale: 0.1;
        opacity: 0.5;
    }

    to {
        scale: 1;
        opacity: 1;
    }
}

.trailsec {
    width: 100%;
    place-items: center;
    padding: 25px 0px;
}

.trailsec .packbtn button {
    font-size: 16px;
    padding: 8px 18px;
    margin: 5px;
    border-radius: 8px;
    border: none;
    font-weight: bold;
}

.trailsec .packbtn {
    margin-bottom: 20px;
}

.trailsec .packbtn .tpack {
    background-color: rgb(240, 136, 0);
    padding: 8px 30px;

}

.trailsec .packbtn .ppack {
    background-color: rgb(0, 103, 117);
}

.trailsec a {
    font-size: 12px;
    color: grey;
    text-decoration: none;
    border-bottom: 1px solid rgb(163, 163, 163);
}

#spider{
    position: absolute;
    z-index: +13;
    animation: spider 10s linear;
    animation-delay: 0.2s;
    scale: 0.6;
    right: 0;
    top: -70%;
    transition: all 0.25s;
}
@keyframes spider{
    0%{
        rotate: 0deg;
    }
    5%{
        top: -22%;
    }
    25%{
        rotate: 10deg;
    }
    50%{
        rotate: 0deg;
    }
    75%{
        rotate: -10deg;
    }
    95%{
        top: -22%;
        rotate: 0deg;
    }
    100%{
        top: -70%;
    }

}

/*selection*/

.selectsec .type div{
    height: 300px;
    width: 500px;
    box-shadow: 0px 0px 5px black;
    position: relative;
    border-radius: 10px;
}
.selectsec .type div::before{
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.651);
    position: absolute;
    content: "";
    text-align: center;
    place-content: center;
    opacity: 0;
    backdrop-filter: blur(5px);
    color: white;
    font-size: 20px;
    font-weight: 900;
    transition: all 0.35s;
    cursor: pointer;
    z-index: 12;
    border-radius: 10px;
}
.selectsec .type #holly::before{
    content: "GO WITH NEW HOLLYWOOD PLAYLIST";
}
.selectsec .type #bolly::before{
    content: "GO WITH 19th HOLLYWOOD PLAYLIST";
    }
.selectsec .type div:hover::before{
        opacity: 1;
}
.selectsec .type div:hover i{
    box-shadow: 0px 0px 3px white;
}
.selectsec .type div img{
    border-radius: 10px;
    height: 100%;
    width: 100%;
    position: absolute;
}
.selectsec{
    width: 100%;
    padding: 40px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.selectsec .type{
    width: 100%;
    display: flex;
    justify-content: space-around;
    background-image: url(selectsec2.png);
    background-size:contain ;
    background-position: right;
    background-repeat: no-repeat;
    padding:80px 40px 40px 40px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.623) inset,
    0px 0px 5px rgba(0, 0, 0, 0.918);
    border-radius: 20px;
    background-color: rgba(54, 58, 0, 0.068);
    backdrop-filter: blur(1px);
}
.selectsec .type div i{
    font-size: 25px;
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
    padding: 10px;
    position: absolute;
    z-index: 15;
    bottom: 10px;
    right: 10px;
    box-shadow: 0px 0px 5px black;
    transition: all 0.25s;
}
.selectsec h2{
    font-size: 30px;
    text-align: center;
    margin: 50px 0px;
}
.selectsec .type div h3{
    position: absolute;
    z-index: 11;
    left: 50%;
    top: -5%;
    font-weight: bold;
    font-size:22px ;
    translate: -50% -100%;
}
.selectsec p{
    text-align: justify;
    font-size: 16px;
    margin: 20px 0px;
}
.selectsec button{
    padding: 8px;
    width: 130px;
    font-weight: bold;
    font-size: 16px;
    border-radius: 8px;
    border:none ;
    background-color: rgb(240, 136, 0);
}

/*footer*/
footer{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    border-top: 1px solid rgb(124, 124, 124);
}
footer div img{
    height: 100px;
    width: 100px;
    border-radius: 50%;
}
footer div h6 span{
    display: block;
}
footer .designer{
    text-align: center;
    border-right: 1px solid black;
    padding-right: 60px;
}
footer .service_list{
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    padding: 20px 60px;
}
footer .service_list ul li{
    list-style-type: none;
    padding: 4px;
    font-size: 13px;
}
footer .service_list ul .service{
    font-weight: bolder;
    text-decoration: underline;
}

footer .copyright{
    display: flex;
    justify-content: space-between;
    padding: 5px 20px;
    background-color: rgb(0, 0, 0);
    width: 100%;
    color: white;
    font-size: 10px;
}


@media screen and (min-width:300px) and (max-width: 450px) {
    header{
        padding: 15px;
    }
    header #logo{
        height: 45px;
        width: 150px;
    }

    header nav{
        display: none;
    }
    header .btn a{
        display: none;
    }
    header .btn button{
       font-size: 12px;
       padding: 7px 15px;
    }
    header .btn label{
       display: none; 
    }
    .slider {
        height: 40%;
        width: 100%;
    }
    .slider .imgdiv{
        width: 95%;
        height: 90%;
        animation: anim 8s linear infinite;
        animation-delay: calc(8s / var(--quantity) * (var(--position)) - 6s);
    }
    @keyframes anim {
        0% {
            left: -140%;
        }
    
        10% {
            left: 40%;
            opacity: 1;
            scale: 1;
        }
    
        30% {
            left: 50%;
    
        }
    
        35% {
            left: 148%;
        }
        100% {
            left: 200%;
        }
      }
    
    .slider .leftang{
        height: 200%;
        width: 50%;
        rotate: 40deg;
        top: -50%;
        left: -70%;
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.301) inset,
        0px 0px 50px 10px rgb(0, 0, 0);
    }
    .slider .rightang{
        height: 200%;
        width: 50%;
        rotate: 40deg;
        top: -50%;
        right: -70%;
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.301) inset,
        0px 0px 50px 10px rgb(0, 0, 0);
    }
    .trailsec .packbtn button{
        display: block;
        font-size: 14px;
        margin: 10px;
        padding: 8px 20px;
    }
    .trailsec .packbtn{
        margin-bottom: 150px;
    }
    .trailsec .packbtn .tpack{
        margin-left:14px;
    }
    .selectsec{
        padding: 40px 25px;
    }
    .selectsec .type{
        flex-direction: column;
        gap: 100px;
        padding: 80px 20px 20px 20px;
    }
    .selectsec .type #holly,
    .selectsec .type #bolly{
        width: 100%;
        height: 200px;
    }
    .selectsec p{
        font-size: 14px;
    }
    .selectsec .type #holly i,
    .selectsec .type #bolly i{
        font-size: 18px;
        padding: 5px;
    }
    .selectsec button{
        font-size: 14px;
        width: 120px;
    }
    footer .service_list{
        padding: 20px 10px;
        align-items: flex-start;
        gap: 10px;
    }
    footer .service_list ul li{
        font-size: 9px;
        padding: 0;
    }
    footer .designer{
        padding-right:10px ;
    }
    footer .designer img{
        height: 50px;
        width: 50px;
    }
    footer .designer h6{
        font-size: 8px;
    }
    .copyright p{
        font-size: 7px;
    }
    footer .copyright{
        padding: 5px 10px;
    }
    .popup{
        height: max-content;
    width: 95%;
    padding: 40px 20px 20px 20px;
    }
    .popup img{
        width: 100%;
    }
    .popup p{
        padding: 0;
    }
}

@media screen and (min-width:451px) and (max-width:780px) {
    header nav{
        display: none;
    }
    header{
        padding: 15px 40px;
    }
    header .btn a{
        margin: 0;
    }
    header .btn button{
        display: none
    }

    header .btn label:hover input{
        width: 48px;
        text-align: center;
    }
    header .btn label i{
        font-size: 14px;
    }
    .slider .leftang{
        height: 200%;
        width: 50%;
        rotate: 40deg;
        top: -50%;
        left: -60%;
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.301) inset,
        0px 0px 100px 40px rgb(0, 0, 0);
    }
    .slider .rightang{
        height: 200%;
        width: 50%;
        rotate: 40deg;
        bottom: -50%;
        right: -60%;
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.301) inset,
        0px 0px 100px 40px rgb(0, 0, 0);
    }
    .slider .imgdiv{
        width: 95%;
        height: 87%;
        animation: anim 10s linear infinite;
        animation-delay: calc(10s / var(--quantity) * (var(--position)) - 6s);
    }
    @keyframes anim {
        0% {
            left: -130%;
        }
    
        10% {
            left: 40%;
            opacity: 1;
            scale: 1;
        }
    
        30% {
            left: 50%;
    
        }
    
        35% {
            left: 148%;
        }
        100% {
            left: 200%;
        }
      }
      .trailsec .packbtn{
        margin-bottom: 50px;
      }
      .selectsec .type{
        flex-direction: column;
        gap: 80px;
        align-items: center;
        background-position: bottom;
      }
      .selectsec h2{
        font-size: 35px;
      }
      .selectsec{
        padding: 40px 60px;
      }
      footer .service_list{
        padding: 20px;
        align-items: flex-start;
      }
      .popup{
        height: max-content;
    width: 95%;
    padding: 40px 20px 20px 20px;
    }
    .popup img{
        width: 100%;
    }
    .popup p{
        padding: 0;
    }
}
@media screen  and (min-width:781px) and (max-width:1024px) {
   header{
    padding: 15px 40px;
   }
   header nav{
    translate: -42% 100%;
   }
   header .btn label{
    display: none;
   }
   .slider .leftang{
    left: -92%;
    top: -50%;
    height: 200%;
    rotate: 20deg;
   }
   .slider .rightang{
    right: -92%;
    bottom: -50%;
    height: 200%;
    rotate: 20deg;
   }
   .slider .imgdiv{
    width: 90%;
    height: 95%;
    animation: anim 10s linear infinite;
    animation-delay: calc(10s / var(--quantity) * (var(--position)) - 6s);
}
@keyframes anim {
    0% {
        left: -120%;
    }

    10% {
        left: 40%;
        opacity: 1;
        scale: 1;
    }

    30% {
        left: 50%;

    }

    35% {
        left: 148%;
    }
    100% {
        left: 200%;
    }
  }
  .trailsec .packbtn{
    margin-bottom: 50px;
  }
  .selectsec{
    padding: 40px 60px;
  }
  .selectsec .type{
    gap: 50px;
    background-position: right 80px;
  }
  .selectsec .type #holly,
  .selectsec .type #bolly{
    height: 280px;
  }
  footer .service_list{
    align-items: flex-start;
  }
  .popup{
    height: max-content;
width: 95%;
padding: 40px 20px 20px 20px;
}
.popup img{
    width: 100%;
}
.popup p{
    padding: 0;
}
}