@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Archivo:ital,wght@0,100..900;1,100..900&family=Edu+SA+Hand:wght@400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&family=Quicksand:wght@300..700&family=Raleway:ital,wght@0,816;1,816&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wdth,wght@0,77.3,100..900;1,77.3,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

font-face {
   font-family: 'Runtime';
   src: url('font-logo.otf') format('opentype');
}

@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Edu+SA+Hand:wght@400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&family=Quicksand:wght@300..700&family=Raleway:ital,wght@0,816;1,816&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wdth,wght@0,77.3,100..900;1,77.3,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');


@font-face {
   font-family: 'wonderbar';
   src: url('Wonderbar-pALD.ttf') format('opentype');
}

body {
   height: 100vh;
   margin: 0px;
   padding: 0px;
   background-color: #E5F8FF;
   font-family: 'Runtime', sans-serif;

}

nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 30px;
   background-color: white;

}

section {
   margin-bottom: 100px;
}

.nav-link {
   list-style: none;
   display: flex;
   gap: 20px;
   margin: 0;
   padding: 0;
}

.nav-list {
   list-style: none;
   display: flex;
   gap: 20px;
   margin: 0;
   padding: 0;
}

.nav-link li a {
   text-decoration: none;
   color: #333;
   font-weight: bold;
}

li a:hover {
   color: #ff0000;
   transition: color 0.3s ease;

}

.logo-image {
   width: 50px;
   height: 60px;
}

.logo-stor {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: larger;
   gap: 5px;
}

.container {
   display: flex;
   background-color: #E5F8FF
   


}
.button-arrow{
   display: flex;
  
}

.text-descraption {
   font-size: xx-large;
   margin-left: 20px;

}

.logo-image-index {
   width: 500px;
   height: 500px;
   display: flex;
   flex-direction: row-reverse;


}

.image-circul-small {

   position: absolute;
   left: 520px;
   top: px;
   z-index: 1;

}

.image-circul-large {
   position: absolute;
   left: 450px;
   top: 400px;
   z-index: 0;

}

.laptop-image {
   position: absolute;
   left: 580px;
   top: 150px;
   z-index: 2;

}

.button-order-new {
   width: 250px;
   height: 40px;
   border: none;
   border-radius: 5px;
   background-color: black;
   color: white;
}

.button-order-new:hover {
   background-color: #33333362;
   color: rgba(0, 0, 0, 0.863);
   transition: 0.5s;
}
.product{
   background-color: white;
}

.container-product {
   display: flex;
   justify-content: space-around;
   align-items: center;
   padding: 30px;
  
}

.product1 {
   width: 250px;
   height: auto;
   box-shadow: 0px 2px 5px rgb(88, 88, 88);
   border-radius: 5px;
   display: flex;
   flex-direction: column;
   padding: 10px;
}

.product1:hover {
   background-color: rgba(0, 0, 0, 0.053);
   transition: 0.5s;
}

.product2 {
   width: 250px;
   height: auto;
   box-shadow: 0px 2px 5px rgb(88, 88, 88);
   border-radius: 5px;
   display: flex;
   flex-direction: column;
   padding: 10px;
}

.product2:hover {
   background-color: rgba(0, 0, 0, 0.053);
   transition: 0.5s;
}

.product3 {
   width: 250px;
   height: auto;
   box-shadow: 0px 2px 5px rgb(88, 88, 88);
   border-radius: 5px;
   display: flex;
   flex-direction: column;
   padding: 10px;
}

.product3:hover {
   background-color: rgba(0, 0, 0, 0.053);
   transition: 0.5s;
}

.product4 {
   width: 250px;
   height: auto;
   box-shadow: 0px 2px 5px rgb(88, 88, 88);
   border-radius: 5px;
   display: flex;
   flex-direction: column;
   padding: 10px;
}

.product4:hover {
   background-color: rgba(0, 0, 0, 0.053);
   transition: 0.5s;
}

.laptop1 {
   width: 250px;
   height: 200px;
}

.laptop2 {
   width: 250px;
   height: 200px;

}

.laptop3 {
   width: 250px;
   height: 200px;
}

.laptop4 {
   width: 250px;
   height: 200px;
}

.product {
   background-color: white;
   margin-top: 350px;
}

.line {
   height: 0px;
   width: 200px;
   border: solid 1px rgba(0, 0, 0, 0.336);
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 10px;
}

.informtion-pc {
   display: flex;
   flex-direction: column;
}

.informtion-pc p {
   margin: 1px;
   padding: 2px 0;
}

.informtion-pc ul {
   list-style: none;
   padding: 0;
   margin: 0;
}

.informtion-pc li {
   margin-bottom: 4px;
   font-size: 14px;
}

.button-add {
   width: 250px;
   height: 40px;
   border: none;
   border-radius: 5px;
   background-color: red;
   color: white;

}

.button-add:hover {
   background-color: #b72525a1;
   color: rgba(0, 0, 0, 0.863);
   transition: 0.5s;
}

#centre-line-name {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

.container-description {
   display: flex;
   background-color: white;
   height: 450px;
    font-family: "Roboto Condensed", sans-serif;
  font-optical-sizing: none;
  font-weight: lighter;
  font-style: normal;
  box-shadow: 0px 10px 10px rgb(88, 88, 88);
  border-radius: 7px;
  margin: 2px;

}

.image-description {
   width: 500px;
   height: 300px;
}

.text-descraption {
   display: flex;
   flex-direction: column;

}
.button-buynow{
   width: 150px;
   height: 40px;
   border-radius: 15px;
   background-color: black;
   color: white;
   border: none;

}
.button-buynow:hover{
   background-color: rgba(0, 0, 0, 0.463);
   color: black;

}
footer{
   background-color:#000000dd;
   color: white;
   padding: 30px;
}
.image-playstor{
   width: 150px;
   height: 50px;
}
.image-app-stor{
   
    width: 150px;
   height: 80px;
}
.footer-stor{
   display: flex;
   align-items: center;
}
.footer-logo-dell{
   width: 400px;
   height: 80px;

}
.footer-container-logo{
   display: flex;
   justify-content: center;
   align-items: center;
}
.container-footer{
   display: flex;
   justify-content: space-around;
   align-items: center;
}
#footer-span{
    color: #808080;
}
.footer-line{
   width: 1200px;
   height: 1px;
   background-color: #f4f3f3;
   display: flex;
   gap: 10px;
}
.footer-last{
   display: flex;
   justify-content: center;
   align-items: center;
}
ul{
   list-style-type: none;
}