*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:  'OnePlus Sans Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif, system-ui;
    
}
body{
    background-color: white;
}
nav{
    height: 50px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: fixed;
    z-index: 2;
}
.logo{
   height: 50px;
   width: 20%;
   img{
     height: 100%;
     width: 85px;
   }
     
}
nav ul{
    width: 50%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    a{
        text-decoration: none;
        color: black;
        font-weight: 300;
        font-size: 14px;
        
    }
}
nav ul li a:hover{
    color: red;
}
.icon-session{
    width: 16%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    padding-left: 70px;
}

.profile-icon{
    width: 20px;
    height: 20px;
    border: 0.5px solid black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-session{
    height: 520px;
    width: 100%;
    background-size: cover;
    background-image: url("./assets/HeroBanner.jpg");
    background-position: center;
}

.hero-text{
    height: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 12%;
    z-index: 1;
}

.date-time{
    height: 22px;
    color: rgba(26, 26, 26, 0.75);
    font-size: 18px;
}
.title-banner{
    height: 43px;
    font-size: 36px;
    color: rgba(26, 26, 26, 0.95);
    font-weight: 550;
}
.price-session{
    height: 17px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(26, 26, 26, 0.95);
    width: 456px;
}
.btn1{
    width: 85px;
    height: 32px;
    background-color: black;
    border-radius: 20px;
    color: #ffffff;
    border: none;
    font-size: 12px;
    margin-top: 20px;
    cursor: pointer;
}


.product-session1{
    height: 600px;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-image: url("./assets/HeroBanner2.jpg");
    
}

.product-text{
    height: 600px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 50px;
    position: absolute;    
}

.icon-wrap{
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    padding-left: 235px;
    img{
        width: 185px;
        height: 32px;
    }
}

.btn2{
    width: 85px;
    height: 32px;
    background-color: black;
    border-radius: 20px;
    color: #ffffff;
    border: none;
    font-size: 12px;
    margin-top: 85px;
    cursor: pointer;
}
.link-learn{
    color: black;
    font-size: 12px;
    font-weight: 400;
    margin-left: 15px;
    text-decoration: underline;
    cursor: pointer;
}

.bank-offer{
    width: 300px;
    height: 30px;
    display: flex;
    align-items: center;
    background-color: rgba(26, 26, 26, 0.75);
    position: relative;
    top: 305px;
    border-radius: 7px;
    img{
        width: 60px;
        height: 20px;
        margin-right: 10px;
    }
    p{
        color: #c9c5c5;
        font-size: 11px;
        font-weight: 30;
    }
}
.session-product2{
    height: 550px;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-image: url("./assets/banner2.jpg");
    
}

.session-product3{
    height: 550px;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-image: url("./assets/banner3.jpg");
    margin-top: 7px;
    
}

.p1{
    color: white;
}
.btn2-13r{
    width: 85px;
    height: 32px;
    background-color: #ffff;
    border-radius: 20px;
    color: black;
    border: none;
    font-size: 12px;
    margin-top: 85px;
    cursor: pointer;
}
.link-learn-13r{
    color: #ffff;
    font-size: 12px;
    font-weight: 400;
    margin-left: 15px;
    text-decoration: underline;
    cursor: pointer;
}
.session-product4{
    height: 550px;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-image: url("./assets/banner4.jpg");
    margin-top: 7px;
}

.session-product5{
    height: 500px;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-image: url("./assets/banner5.jpg");
    margin-top: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24px;
     color: rgb(49, 46, 46);
     font-weight: 500;
}

.product-title-1{
    height: 200px;
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 45px;
    margin-top: 35px;
    p{
        font-size: 14px;
    }
    
}

.btn-title{
    width: 85px;
    height: 32px;
    background-color: black;
    border-radius: 20px;
    color: #ffffff;
    border: none;
    font-size: 12px;
    margin-top: 10px;
    cursor: pointer;

}

.product-title-2{
    height: 200px;
    width: 28%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
    p{
        font-size: 14px;
    }
}

.double-title-session{
    height: 70vh;
    width: 100%;
    background-color: #ffff;
    display: flex;
    margin-top: 20px;
    justify-content: space-evenly;
}

.double-title1{
    height: 400px;
    width: 643px;
    background-size: cover;
    background-image: url("./assets/Nord4_Desktop.jpg");
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  
}
.slide-content-top{
    padding-top: 30px;
    padding-left: 20px;
}
.tag-line-title{
    font-size: 14px;
    font-weight: 400;
    color: rgba(26, 26, 26, 0.75);
}
.main-title{
    font-size: 32px;
    font-weight: 700;
    color: rgba(26, 26, 26, 0.95);
}
.details-content{
    font-size: 14px;
    font-weight: 400;
    color: rgba(26, 26, 26, 0.95);
}
.product-badge-icon{
    padding-left: 20px;
    img{
        height: 80px;
        width: 80px;
    }
}
.slide-btn{
    width: 85px;
    height: 32px;
    background-color: black;
    border-radius: 20px;
    color: #ffffff;
    border: none;
    font-size: 12px;
    margin: 20px 0px 20px 20px;
}
.slide-btn:hover{
    background-color: rgba(26, 26, 26, 0.95);
    cursor: pointer;
}
.double-title2{
    height: 400px;
    width: 643px;
    background-size: cover;
    background-image: url("./assets/NordCE4-pc.jpg");
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.double-title11{
    height: 400px;
    width: 643px;
    background-size: cover;
    background-image: url("./assets/BWZ3_Desktop.jpg");
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  
}
.double-title22{
    height: 400px;
    width: 643px;
    background-size: cover;
    background-image: url("./assets/Pad3_IN_0605KV_Desktop.jpg");
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.double-title111{
    height: 400px;
    width: 861px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.double-title222{
    height: 400px;
    width: 420px;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.double-title-session-st-ey{
    height: 90vh;
    width: 100%;
    background-color: #ebe3e3;
    display: flex;
    margin-top: 20px;
    justify-content: space-evenly;
}
.double-title1111{
    height: 100%;
    width: 643px;
    display: flex;
    flex-direction: column;
}
.image-session1{
    height: 400px;
    width: 643px;
    background-size: cover;
    background-image: url("./assets/Light_Stu_Tablet.jpg");
}
.dis-text1{
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .stn-pgm{
         color: #444040;
    }
}
.double-title2222{
    height: 100%;
    width: 643px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.image-session2{
    height: 400px;
    width: 643px;
    background-size: cover;
    background-image: url("./assets/Light_EPP_Tablet.jpg");
}
.dis-text2{
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .stn-pgm{
        color: #444040;
    }
}

.double-title111-ex{
    height: 400px;
    width: 861px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.double-title222-ex{
    height: 400px;
    width: 420px;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.double-title11-ex{
    height: 400px;
    width: 861px;
    background-size: cover;
    background-image: url("./assets/Article_Card_Pad.jpg");
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  
}
.double-title22-ex{
    height: 400px;
    width: 417px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.double-title111-ex-1{
    height: 400px;
    width: 861px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.double-title222-ex-1{
    height: 430px;
    width: 420px;
    background-color: rgb(41, 39, 39);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.double-title-session-ex{
    height: 85vh;
    width: 100%;
    background-color: #070606;
    display: flex;
    justify-content: space-evenly;
    padding: 20px;
}
.main-title-ex{
    font-size: 32px;
    font-weight: 700;
    color: rgba(219, 207, 207, 0.95);
}
#p-item-2{
    font-size: 15px;
    color: white;
    padding: 10px;
}
.tag-line-title-ex{
    font-size: 14px;
    font-weight: 600;
    color: rgba(177, 167, 167, 0.815);
}
.double-title111-ex-2{
    height: 430px;
    width: 420px;
    background-color: rgb(41, 39, 39);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.double-title222-ex-2{
    height: 400px;
    width: 861px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.image-session11{
    height: 450px;
    width: 643px;
    background-size: cover;
    background-image: url("./assets/helpdesk_Tablet.jpg");
}
.image-session22{
    height: 450px;
    width: 643px;
    background-size: cover;
    background-image: url("./assets/RepairService_Tablet.jpg");
}
.quick-link{
    width: 60%;
    height: 100px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.first-link{
    width: 173px;
    height: 40px;
    display: flex;
    border: 0.1px solid rgba(165, 156, 156, 0.801);
    border-radius: 20px;
    align-items: center;
    justify-content: space-evenly;
    cursor: pointer;
}
.first-link:hover{
    border: 1px solid rgba(12, 11, 11, 0.973);
}
footer{
    height: 175vh;
    width: 100%;
    background-color: #070606;
}
.footer-images{
    height: 350px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 20px;
}
.footer-image1{
    height: 320px;
    width: 641px;
    background-size: cover;
    background-image: url("./assets/footer1.png");
}
.footer-image2{
    height: 320px;
    width: 641px;
    background-size: cover;
    background-image: url("./assets/footer2.png");
}
.main-title-footer{
    font-size: 32px;
    font-weight: 700;
    color: #ffff;
}
.details-content-footer{
    font-size: 14px;
    font-weight: 400;
    color: #e7e5e5;
}
.footer-text{
    width: 328px;
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.google{
    width: 318px;
    height: 56px;
    border: 1px solid #ffffff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffff;
    margin-left: 10px;
}
#span-1{
    color: #ffff;
    margin-left: 10px;
    font-weight: 400;
}
#input-btn{
    background: transparent;
    border: none;
    border-right: #e7e5e5 1px solid;
    width: 150px;
    margin-right: 50px;
}
.btn-id{
    background-color: transparent;
    color: white;
    border: none;
    font-size: 17px;
    cursor: pointer;
}
.footer-text2{
    width: 340px;
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 2px solid #e7e5e5;
}
.agree-btn{
    font-size: 12px;
    color: #c4bebe;
    margin: 10px;
}
.p-footer{
    width: 100%;
    height: 50px;
    padding: 20px;
}
.footer{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    color: rgb(121, 117, 117);
    font-family: SoDoSans_Semibold, Helvetica, sans-serif;
}

.foot-box{
    width: 200px;
    height: 350px;
    margin-top: 65px;
}
li:nth-child(1){
    font-size: 20px;
    font-weight: bolder;
    color: #fff;
}
li{
    margin-top: 20px;
    font-size: 12px;
}
ul{
    list-style: none;
}
.footer-panel{
    height: 70px;
    width: 100%;
    color: rgb(121, 117, 117);
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    border-bottom: #968c8c 1px solid;

}
.footer-boking{
    width: 35%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 70px;
}
.footer-media{
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
}
.media-icon i{
    font-size: 14px;
    margin-left: 10px;
}
.onePlus-spt{
    font-size: 16px;
    color: #fff;
    padding-left: 20px;
}
.footer-panel1{
    height: 70px;
    width: 100%;
    color: rgb(121, 117, 117);
    display: flex;
    justify-content: space-between;
    font-size: 12px;

}
.footer-boking1{
    width: 60%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 70px;
}
.card-box1{
    width: 250px;
}
.footer-media1{
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
}
/* Responsive Design */
@media screen and (max-width: 768px) {
    nav{
        display: flex;
        justify-content: space-between;
    }
    nav ul{
        display: none;
    }
    .icon-session{
        width: 25%;
       
    }
    .profile-icon{
        margin-right: 10px;
    }
    .logo img{
        width: 60%;
        padding-left: 20px;
    }
    .hero-session{
        height: 500px;
    }
    .hero-text{
        top: 13%;
    }
    .date-time{
        font-size: 20px;
    }
    .title-banner{
        font-size: 25px;
        height: 20px;
    }
    .price-session {
        font-size: 7px;
        margin-top: 20px;
        width: 226px;
        
        
    }

    .btn1{
        width: 40px;
        height: 15px;
        font-size: 7px;
    }
    .product-session1{
        height: 500px;
    }
    .product-text{
        height: 300px;
        padding-top: 20px;
    }
    .icon-wrap{
        width: 150px;
        padding-left: 50px;
        img{
            width: 130px;
            height: 20px;
        }
    }
    .btn2{
        width: 40px;
        height: 15px;
        font-size: 7px;
        margin-top: 50px;
    }
    .link-learn{
        font-size: 7px;
        margin-left: 5px;
    }
    .bank-offer{
        width: 170px;
        height: 15px;
        position: relative;
        top: 130px;
        img{
            width: 40px;
            height: 15px;
            margin-right: 5px;
        }
        p{
            font-size: 5px;
        }
    }
    .session-product2{
        height: 400px;
    }
    .price-session p{
        width: 200px;
        font-size: 7px;
    }
    .hero-text{
        top: 10%;
    }
    .date-time{
        font-size: 12px;
    }

    .session-product3{
        height: 400px;
    }
    .p1{
        color: rgb(255, 246, 246);
    }
    .btn2-13r{
        width: 40px;
        height: 15px;
        font-size: 7px;
        margin-top: 50px;
    }
    .link-learn-13r{
        color: rgb(255, 246, 246);
        font-size: 7px;
        margin-left: 5px;
    }
    .session-product4{
        height: 400px;
    }
    .product-text{
        padding-top: 10px;
        font-size: 14px;
        color: rgb(49, 46, 46);
        font-weight: 300;
    }

    .session-product5{
        height: 700px;
        flex-direction: column;
        
    }
    .product-title-2{
        height: 150px;
        width: 100%;
        padding: 10px;
    }
    .product-title-1{
        height: 150px;
     width: 100%;
    }
    .btn-title{
        width: 70px;
        height: 20px;
    }
  

    .double-title1{
        height: 400px;
        width: 357px;
       
    }

    .double-title2{
        height: 400px;
        width: 357px;
    }
        
     .double-title11{
        height: 400px;
        width: 357px;
    }

    .double-title22{
        height: 400px;
        width: 357px;
    }

     .double-title111{
        height: 297px;
        width: 470px;
    }

    .double-title222{
        height: 297px;
        width: 229px;
    }
    .double-title-session-st-ey{
        height: 200vh;
        width: 100%;
        flex-direction: column;
        align-items: center;
    }

    .double-title111-ex{
        height: 297px;
        width: 470px;
    }

    .double-title222-ex{
        height: 297px;
        width: 229px;
    }
    #p-item{
        font-size: 12px;
    }
    .double-title11-ex{
        height: 297px;
        width: 375px;
    }
    .double-title22-ex{
        height: 248px;
        width: 299px;

    }
    .double-title-session-ex{
        height: 54vh;
       padding: 10px;
    }
     .double-title111-ex-1 img{
        height: 300px;
        width: 470px;
    }

    .double-title222-ex-1{
        height: 297px;
        width: 429px;
    }
     .double-title222-ex-2 img{
        height: 300px;
        width: 470px;
    }
    .double-title111-ex-2{
        height: 300px;
        width: 429px;
    }
    .image-session11{
        height: 350px;
        width: 643px;
    }
    .image-session22{
    height: 350px;
    width: 643px;
    }
    #h1-id{
       text-align: center;
    }

    .quick-link{
        width: 100%;
    }

    .footer-images{
        height: 800px;
        display: flex;
        flex-direction: column;
        padding-left: 60px;
    }

    .footer-image1{
        height: 350px;
        width: 643px;
    }
    .footer-image2{
        height: 350px;
        width: 643px;
    }
    .footer{
        display: none;
    }
    footer{
        height: 190vh;
        width: 100%;
    }
    .footer-panel{
        margin-top: 50px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: #968c8c 1px solid;

    }
    .onePlus-spt{
    display: none;
   }
   .footer-boking{
    padding-top: 20px;
    width: 55%;
    
   }
   .card-box1{
    display: none;
    }
    .footer-media1{
       width: 100%;
       margin-right: 250px;
       margin-top: 20px;
    
}
 
    


}