*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body,html{
    scroll-behavior: smooth;
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
}
/* header started */
header{
    display: flex;
    flex-direction: column;
    background: transparent;
    font-weight: bold;
}
header>div{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20px 1.2rem 20px 2px;
    
}
nav{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom:20px ;

}
nav .first-nav{
display: flex;
align-items: center;
justify-content: left;
padding-left: 0.7rem;
width: 49%;
}
nav .second-nav{
    display: flex;
    align-items: center;
    justify-content: right;
    width: 49%;
}
header a{
    text-decoration: none;
    color: #fff;
    margin-left: 1.2rem;
}
header i{
    margin-left: 1.2rem;
    color: #fff;
}
header input{
    border-radius: 2rem;
    width: 10rem;
    height: 2.5rem;
    box-sizing: border-box;
    outline: none;
    padding-left: 2rem;
    background-image: url(./assets/icons/search-interface-symbol.png);
    background-repeat: no-repeat;
    background-size: 18px;
    background-position:0.7rem;
    background-color: black;
    color: #fff;
    border: 2px solid #fff;
}
header input i{
    color: #fff;
}
/* header ended */
/* hero started */
#hero{
    max-height: 120vh;
    display: flex;
    max-width: 100%;
}
#hero .container{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
#hero .container video{
    height: 120vh;
    width: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
#hero .content{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    flex-wrap:wrap;
    padding-left: 2rem;
    height: 70vh;
    padding-left: 5rem;
    text-align: center;
}
#hero .content h1{
    color: #fff;
    font-size: 3rem;
  
}
#hero .content h2{
    color: #fff;
    font-size: 2rem;
    
}
#hero a>button{
    border-radius: 40%;
    padding: 10px 20px 10px 20px ;
    color: #fff;
    background: transparent;
    border: 2px solid #fff;
}
#hero .btn{
    color: #fff;
    padding: 2rem;
    margin-left: 3rem;
}

#hero .btn>a{
    
    color: #fff;
    margin-right: 10px;
    text-decoration: none;
    font-weight: bold;
}
/* hero ended */
/* section 3 started */
#section-3{
    height: 120vh;
    background-image: url(https://images.samsung.com/my/smartphones/galaxy-s25/images/galaxy-s25-features-kv.jpg?imbypass=trues);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-top: 5rem;
}
#section-3 .content{
    height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: left;
    padding: 2rem;
    width: fit-content;
    text-align: center;
}
#section-3 .content h1{
    color: #000;
    font-size: 3rem;
}
#section-3 .content h2{
    color: #000;
    font-size: 2rem;
}
#section-3 div a{
color: #000000;
text-decoration: none;
margin-right: 1.5rem;
}
#section-3 div.btn{
    padding: 2rem;
}
#section-3 .btn button{
    border-radius: 40%;
    padding: 10px 20px 10px 20px ;
    color: #000000;
    background: transparent;
    border: 2px solid #000000;
    ;
}
/* section3 ended */
/* section 4 started */
#section-4{
    height: 65vh;
margin-top: 2rem;

}
#section-4 .container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    height: 60vh;
    width: 100%;
}
#section-4 .container div{
    width: 24%;
    height: 60vh;
    background-color: rgb(237, 237, 237);
padding: 1rem;
}
#section-4 .container div h1{
    text-align: center;
    font-weight: bold;
}
#section-4 .led-1{
    background-image: url(./assets/images/galaxy\ s\ 25\ ultra.png);
    background-position: center;
    background-size: 15rem;
    background-repeat: no-repeat;
      transition: 1s ease;
}
#section-4 .led-2{
    background-image: url(./assets/images/zfold.png);
      background-position: center;
    background-size: 15rem;
    background-repeat: no-repeat;
      transition: 1s ease;
}
#section-4 .led-3{
    background-image: url(https://images.samsung.com/is/image/samsung/p6pim/pk/sm-x516bzaamea/gallery/pk-galaxy-tab-s9-fe-sm-x516-sm-x516bzaamea-545803713?$684_547_PNG$);
      background-position: center;
    background-size: 20rem;
    background-repeat: no-repeat;
      transition: 1s ease;
}
#section-4 .led-4{
    background-image: url(./assets/images/watch7.png);
      background-position: center;
    background-size: 25rem;
    background-repeat: no-repeat;
    transition: 1s ease;
}

#section-4 .led-4:hover
{
background-size: 28rem;
}
#section-4 .led-3:hover
{
background-size: 22rem;
}
#section-4 .led-2:hover
{
background-size: 17rem;
}
#section-4 .led-1:hover
{
background-size: 17rem;
}
/* section 4 ended */
/* section 5 started */
#section-5{
height: 120vh;
  width: 100%;
  /* background-color: red; */
}
#section-5 .container{
     display: flex;
    align-items: center;
flex-wrap: wrap;
height: 120vh;
}
#section-5 .container>div{
    width: 100%;
    height: 120vh;
    box-shadow: inset 400px 1px 100px black ;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpHuCT3Z19DY0w0xBS38psFFypWG4pxe6M1Ne-FG-HlxSD7hY9zGOWE0PonBL_tfaYVoQIwPS1cYPRGA5FZR3891CGADXympuwVONk7GEimjR_It3v-X9zvFuXjlToRVdp_G4SX8ZnETSJJBnx8pAUM0i6eQN_lE4HnvdcsXR-bQYZKL6K933U5iLi05Au/w1200-h630-p-k-no-nu/Digital_Hor_7247x3220%20copy.jpg);
    background-repeat: no-repeat;
    background-position: left;
    display: flex;
    flex-direction: column;
justify-content: center;
    background-size: 90rem;
}
#section-5 .container>div h1{
    color: #fff;
font-size: 3rem;
text-align: left;

}
#section-5 .container>div p{
    color: #fff;
font-size: 1.3rem;
}
#section-5 .container>div p,h1{
    padding-left: 2rem;
}
#section-5 div.btn{
    padding-left: 2rem;
    margin-top: 2rem;
}
#section-5 .btn a{
    color: #fff;
text-decoration: none;

}
#section-5 button{
    padding: 15px 30px 15px 30px;
    border-radius: 45%;
    color: #fff;
    border:1px solid white;
    background-color: transparent;
    font-size: 13px;
    margin-left: 1rem;
}
/* section 6 started */
#section-6{
    height: 65vh;
margin-top: 2rem;

}
#section-6 .container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    height: 60vh;
    width: 100%;
}
#section-6 .container div{
    width: 24%;
    height: 50vh;
    background-color: rgb(237, 237, 237);
padding: 1rem;
}
#section-6 .container div h1{
    text-align: center;
    font-weight: bold;
}
#section-6 .led-1{
    background-image: url(./assets/images/14edc0444b4b23df1c9b80f0c7c7f9b5.jpg_720x720q80-removebg-preview.png);
    background-position: center;
    background-size: 15rem;
    background-repeat: no-repeat;
      transition: 1s ease;
}
#section-6 .led-2{
    background-image: url(./assets/images/images-removebg-preview\ \(3\).png);
      background-position: center;
    background-size: 15rem;
    background-repeat: no-repeat;
      transition: 1s ease;
}
#section-6 .led-3{
    background-image: url(./assets/images/images-removebg-preview\ \(4\).png);
      background-position: center;
    background-size: 15rem;
    background-repeat: no-repeat;
      transition: 1s ease;
}
#section-6 .led-4{
    background-image: url(./assets/images/images-removebg-preview\ \(5\).png);
      background-position: center;
    background-size: 15rem;
    background-repeat: no-repeat;
    transition: 1s ease;
}

#section-6 .led-4:hover
{
background-size: 17rem;
}
#section-6 .led-3:hover
{
background-size: 17rem;
}
#section-6 .led-2:hover
{
background-size: 17rem;
}
#section-6 .led-1:hover
{
background-size: 17rem;
}
/* section 6 ended */
/* section7 started */
#section-7{
    background-image: url(./assets/images/section7.png);
    background-position: right;
    background-color: #000;
    background-size:30rem ;
    background-repeat: no-repeat;
    min-width: 100%;
    min-height: 120vh;
}
#section-7 h1{
    color: #fff;
    font-size: 4rem;
    padding: 0px;
}
#section-7 p{
    color: #fff;
    font-size: 1.5rem;
}
#section-7 button{
border: 1px solid white;
color: #fff; 
    padding: 10px 20px 10px 20px;
    background-color: transparent;
    border-radius: 35%;
}
#section-7 .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 120vh;
    margin-left: 3rem;
    gap: 1rem;

}
/* section 8 started  */
#section-8{
    height: auto;
margin-top: 2rem;

}
#section-8 .container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    min-height: 100vh;
    width: 100%;
}
#section-8 .container div{
    width: 24%;
    min-height: 50vh;
    background-color: rgb(237, 237, 237);
padding: 1rem;
}
#section-8 .container div h1{
    text-align: center;
    font-weight: bold;
}
#section-8 .led-1{
    background-image: url(https://images.samsung.com/is/image/samsung/p6pim/in/rs7hcg8543b1hl/gallery/in-side-by-side-family-hub-449420-rs7hcg8543b1hl-535087575?$684_547_PNG$);
    background-position: center;
    background-size: 20rem;
    background-repeat: no-repeat;
      transition: 1s ease;
}
#section-8 .led-2{
    background-image: url(https://images.samsung.com/is/image/samsung/p6pim/pk/rr39m71357f-ss/gallery/pk-rr7000m-rr39m71357f-ss-thumb-538810142);
      background-position: center;
    background-size: 20rem;
    background-repeat: no-repeat;
      transition: 1s ease;
}
#section-8 .led-3{
    background-image: url(https://images.samsung.com/is/image/samsung/p6pim/pk/wd70ta046bx-fa/gallery/pk-combo-wd70ta046beef-396516-wd70ta046bx-fa-536576904?$684_547_PNG$);
      background-position: center;
    background-size: 20rem;
    background-repeat: no-repeat;
      transition: 1s ease;
}
#section-8 .led-4{
    background-image: url(./assets/images/ac.png);
      background-position: center;
    background-size: 20rem;
    background-repeat: no-repeat;
    transition: 1s ease;
}

#section-8 .led-4:hover
{
background-size: 22rem;
}
#section-8 .led-3:hover
{
background-size: 22rem;
}
#section-8 .led-2:hover
{
background-size: 22rem;
}
#section-8 .led-1:hover
{
background-size: 22rem;
}
/* section 8 ended */
#section-9{
    height: auto;
}
#section-9 .container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}
#section-9 .container .main{
    width: 24%;
    height:70vh ;
}
#section-9 .img-1{
    width: 100%;
    height: 70%;
    background-image: url(https://images.samsung.com/is/image/samsung/p6pim/pk/sm-a065flbdpkd/gallery/pk-galaxy-a06-sm-a065-sm-a065flbdpkd-543621867?$684_547_PNG$);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ececec;
}
#section-9 .img-2{
    width: 100%;
    height: 70%;
    background-image: url(https://images.samsung.com/is/image/samsung/p6pim/pk/sm-a165fzkipkd/gallery/pk-galaxy-a16-sm-a165-sm-a165fzkipkd-544450842?$684_547_PNG$);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ececec;
}
#section-9 .img-3{
    width: 100%;
    height: 70%;
    background-image: url(https://xcessorieshub.com/wp-content/uploads/2024/07/Samsung-Galaxy-Buds-3-3.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ececec;
}
#section-9 .img-4{
    width: 100%;
    height: 70%;
    background-image: url(https://cubeonline.pk/cdn/shop/files/pk-spacemax-technology-rs62r5001m9-lv-538810080_grande.webp?v=1730095692);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ececec;
}
#section-9 .price p{
    font-size: 20px;
    /* font-weight: bold; */
  
}
#section-9 .price p+p{
  margin-top: 3rem;
}
#section-9 .price{
    margin-top: 1rem;
    font-weight: 500;
}
#section-9>h1{
    font-size:2.5rem ;
    padding-bottom: 3rem;
    padding-top: 2.5rem;
    
}

#section-10{
    min-height: 90vh;
  margin-top: 10rem;
}
#section-10 .container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}
#section-10 .container .main{
    width: 24%;
    height:70vh ;
}
#section-10 .img-1{
    width: 100%;
    height: 70%;
    background-image: url(https://download.logo.wine/logo/One_UI/One_UI-Logo.wine.png);
    background-size: 20rem;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ececec;
}
#section-10 .img-2{
    width: 100%;
    height: 70%;
    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcR5U16C8yXgBpl7-Bc7Itjx3_LRl425zINA&s);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ececec;
}
#section-10 .img-3{
    width: 100%;
    height: 70%;
    background-image: url(https://static.vecteezy.com/system/resources/thumbnails/035/928/314/small_2x/ai-generated-an-asphalt-road-leads-through-the-middle-of-a-dense-and-wild-green-jungle-photo.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ececec;
}
#section-10 .img-4{
    width: 100%;
    height: 70%;
    background-image: url(https://images.samsung.com/is/image/samsung/assets/test/support/when-i-take-close-up-shots-on-my-galaxy-s23-s23-plus-camera-the-surrounding-area-looks-blurred/1-EN-when-i-take-close-up-shots-on-my-galaxy-s23-s23-plus-camera-the-surrounding-area-looks-blurred.png?$ORIGIN_PNG$);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ececec;
}
#section-10 .price p{
    font-size: 20px;
    font-weight: bold;
  
}
#section-10 .price{
    margin-top: 1rem;
}
#section-10>h1{
    font-size:2.5rem ;
    padding-bottom: 3rem;
}
#footer{
    display: flex;
    flex-direction: column;
   flex-wrap: wrap;
    height: auto;
    width: 100%;
}
#footer .big{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.big div{
    width: 24%;
   min-height: 100vh;
    border: 1px solid rgb(215, 215, 215);
    padding: 1rem;
}
.big div p{
    margin-bottom: 1rem;
    font-weight: lighter;
    font-size: 13px;
}

#footer .copyright p{
    font-size: 13px;
    border: 1px solid #d2d2d2;
    padding: 2rem;

}
#footer .states p{
    font-size: 13px;
    padding-top: 0.5rem;
     padding-bottom: 0.5rem;
      padding-left: 2rem;
   
}
#footer .states{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
i{
    margin-left: 1rem;
    font-size: 1.5rem;
}
@media (max-width:900px){
    #section-4{
        height: auto;
    }
    #section-4 .container{
        display: flex;
        flex-direction: column;
        height: auto;
        width: 100%;

    }
    #section-4 .container .led-1{

        width: 100%;
    }
    #section-4 .container .led-2{
        
        width: 100%;
    }
    #section-4 .container .led-3{

        width: 100%;
    }
    #section-4 .container .led-4{
        
        width: 100%;
    }
    #section-6{
        height: auto;
    }
    #section-6 .container{
        display: flex;
        flex-direction: column;
        height: auto;
        width: 100%;

    }
    #section-6 .container .led-1{

        width: 100%;
    }
    #section-6 .container .led-2{
        
        width: 100%;
    }
    #section-6 .container .led-3{

        width: 100%;
    }
    #section-6 .container .led-4{
        
        width: 100%;
    }
    header a {
        display: none;
    }
    #hero .content{
        padding-left: 0px;

    }
    #section-3 .content{
        padding: 0px;
        text-align: left;
    }
    #section-3 .content h1{
        font-size: 32px;
        padding: 0px;
    }
    #section-3 .content h2{
        font-size: 25px;
    }
    #section-3 .btn a{
        color: #fff;
    }
    #section-3 button{
        border: 1px solid #fff;
        color: #fff;
    }
   #section-8 .container{
    flex-direction: column;
   }
   #section-8 .container div{
    width: 100%;
   }
   #section-9 .container .main{
    width: 100%;
        background-color: #f0f0f0;
   }
   #section-9 .container .price p{
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
   }
#section-9 .container{
    flex-direction: column;
}
#section-10 .container{
    flex-direction: column;

}
#section-10 .container .main{
    width: 100%;
    background-color: #f4f4f4;
}
#footer .big{
    flex-direction: column;
}
#footer .big div{
    width: auto;
}
#footer .states{
    flex-direction: column;
    font-size: 10px;
}
#section-7 .container{
    justify-content: right;
    padding-top: 2rem;
}
}