@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');

:root{
   --blue:#3498db;
   --red:#e74c3c;
   --orange:#f39c12;
   --black:#333;
   --white:#fff;
   --light-bg:#eee;
   --box-shadow:0 5px 10px rgba(0,0,0,.1);
   --border:2px solid var(--black);
   
}
*{
    font-family: 'Poppins', sans-serif;
    margin:0; padding:0;
    box-sizing: border-box;
    outline: none; border: none;
}
*::-webkit-scrollbar{
   width: 10px;
   height: 5px;
   
}

*::-webkit-scrollbar-track{
   background-color: transparent;
}

*::-webkit-scrollbar-thumb{
   background-color: purple;
}
 
body {
   font-family: 'Poppins', sans-serif;
   margin: 0;
   padding: 0;
}
.product{
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: #f3f3f3;
   font-family: 'Poppins', sans-serif;
}
.product article{
   justify-content: center;
}

a{
   text-decoration: none;
   
}
.brand_title {
   width: 100%;
   margin-top: 60px;
   margin-bottom: 4px;
   text-align: center;
}

.message{
   position: sticky;
   top:0; left:0; right:0;
   padding:15px 10px;
   background-color: var(--white);
   text-align: center;
   z-index: 1000;
   box-shadow: var(--box-shadow);
   color:var(--black);
   font-size: 15px;
   text-transform: capitalize;
   cursor: pointer;
}
.btn:hover{
   background-color: var(--black);
}
.btn{
   background-color: var(--blue);
   margin-top: 10px;
   width: 40%;
}
.delete-btn{
   background-color: var(--red);
}
.pageName{
   line-height: 50px;
}
a{
   color: black;
}



#navbar {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   z-index: 9999;
   background-color: #333; /* Black background color */
   position: fixed; /* Make it stick/fixed */
   top: 0; /* Stay on top */
   width: 100%; /* Full width */
   transition: top 0.3s; /* Transition effect when sliding down (and up) */
   height: 50px;
}


/* Style the navbar links */
#navbar .navbar-item {
   float: left;
   color: white;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
}

#navbar .navbar-item > a {
   color: white;
   line-height: 50px;
}

#navbar .navbar-item a > i{
   
   line-height: 50px;
   width: 50px;
}
#navbar .navbar-item > i {
   color: white;
   line-height: 50px;
   margin:auto 0px;
   width: 50px;
}
#navbar .navbar-item i:hover{
   background-color: #ddd;
   color: black;
   border-radius: 10%;
}
#navbar .navbar-item i:hover > a, #navbar .navbar-item i:hover > i{
   color: black;
}

/* Dropdown Button */
.material-icons .dropbtn, .material-icons .dropbtnAccount {
border: none;
cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
z-index: 9999;
}

.dropdown-content-Account {
   display: none;
   position: absolute;
   background-color: #f1f1f1;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 9999;
   left: 0px;
   height: 500px;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show, .showAccount {
   display:block;
}


.count{
   display: inline-block;
   background-color: #ff5733;
   color: #ffffff;
   font-size: 12px;
   border-radius: 50%;
   width: 20px;
   height: 20px;
   text-align: center;
   line-height: 20px;
   position: absolute;
   top:0;
   left: 0;
}
.header-section{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap:5px;
   margin-top:50px;
   max-width: 100%;
}

.container .box-container{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap:5px;
   margin-top:50px;
   max-width: 100%;
   
}


div input[type="number"]{
   margin:10px 0;
   width: 15%;
   border:var(--border);
   border-radius: 5px;
   font-size: 15px;
   color:var(--black);
   padding:8px 10px
}
.bttn{
   width: 40%;
   height: 40px;
   background-color:rgb(98, 180, 17);
   cursor: pointer;
   color: black;
}

 
.search{
   position:fixed;
   z-index: 1;
   width: 380px;
   height: 40px;
   background-color: #333;
   border-radius: 40px;
   transition: 0.5s;
   top: 64px;
   overflow: hidden;
   opacity: .5;
   left: 50%;
   transform: translateX(-50%);
}
.search:hover{
   opacity: 1;
}
.search .icon{
   position: absolute;
   top: 0;
   left: 0;
   width: 40px;
   height: 40px;
   background-color: #333;
   border-radius: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
}
.search .icon::before{
   content: '';
   position: absolute;
   width: 15px;
   height: 15px;
   border: 3px solid purple;
   border-radius: 50%;
   transform: translate(-4px,-4px);
}
.search .icon::after{
    content: '';
    position: absolute;
    width: 3px;
    height: 12px;
    background: purple;
    transform: translate(6px,6px) rotate(315deg);
 }
.search .input{
    position: relative;
    width: 310px;
    height: 40px;
    left: 40px;
    display: flex;
    justify-content: center;
 }
.search .input input{
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   border: none;
   outline: none;
   font-size: 18px;
   padding: 10px 0;
   background-color: #333;
   color:black;
}
.search .clear{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    right: 15px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
 }
.search .clear::before{
    position: absolute;
    content: '';
    width: 1px;
    height: 15px;
    background: rgb(88, 38, 88);
    transform: rotate(45deg);
 }
 .search .clear::after{
    position: absolute;
    content: '';
    width: 1px;
    height: 15px;
    background: rgb(88, 38, 88);
    transform: rotate(-45deg);
 }
.container{
   margin-top: 100px;
}

.container .order input[type=submit]{
   background: #4CAF50;
   width: 50%;
   height: 50px;
   color: white;
   border-radius: 10px;
}
.container .order input[type=submit]:hover{
   background: #99e49b;
}

.container1 input[type="submit"]{
   background-color:#4CAF50;
   color: white;
   padding: 10px 20px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
}
.container1 input[type="submit"]:hover{
   background-color: #45a049;
}
.container1 .grid-container{
   width: 300px;
   display: grid;
   padding: 10px 0;
   grid-template-columns: auto auto 70px ;
   border-bottom: 1px solid gray;
}
.container1 .grid-container > div{
   text-align: center;
}
.container1 .flex-container{
   display: flex;
   flex-direction: column;
}
.container1 .flex-container > div{
   text-align:left;
   padding: 5px 0;
}
.container1{
   margin-top: 100px;
   margin-bottom: 400px;
}
.container1 .quantity{
   font-size: 20px;
   border: 1px solid gray;
   width: 70px;
   margin-bottom:5px;
   margin-left: 5px;
   height: 40px;
}
.container1 .updateBtn{
   width: 80px;
   border: 1px solid black;
   font-size: 20px;
}
.container1 .delete-btn{
   border-radius: 50%;
   padding: 5px 5px;
   margin:0px;
}

.slider {
   position: relative;
   width: 300px;
   height: auto;
   margin: 52px 8px 8px 8px;
   overflow: hidden;
   border-radius: 10px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   
}

.slides {
   display: flex;
   transition: transform 0.5s ease-in-out;
   align-items: center;
   justify-content: flex-start; /* تأكد من عرض الشريحة الأولى في البداية */
   width: 100%; /* تأكد من أن العرض يطابق عرض السلايدر */
}

.slide {
   height: auto;
   width: 300px;
   box-sizing: border-box;

   display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.slide img {
   width: 300px; /* Scale image to fit width */
   height: auto; /* Scale image to fit height */
   border-radius: 10px;
   object-fit: contain; /* Ensure the image maintains its aspect ratio */
}

.prev, .next {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background-color: rgba(0, 0, 0, 0.5);
   color: white;
   border: none;
   padding: 10px;
   cursor: pointer;
   border-radius: 50%;
}

.prev :hover {
   background-color: rgba(0, 0, 0, 0.8);
}

.next :hover {
   background-color: rgba(0, 0, 0, 0.8);
}

.prev {
   left: 10px;
}

.next {
   right: 10px;
}

.thumbnails {
   display: flex;
   justify-content: center;
   margin-top: 10px;
}

.thumbnails img {
   width: 50px;
   margin: auto;
   cursor: pointer;
   border-radius: 5px;
   transition: transform 0.3s;
}

.thumbnails img:hover {
   transform: scale(1.1);
}

.video{
   width: 40%;
   height: auto;
}

.cntnr{
   display: flex;
   flex-direction: row-reverse;
}
aside {
   width: 320px; /* يمكنك تعديل العرض حسب الحاجة */
   border: 1px solid black;
   background-color: #f9f9f9;
   padding: 10px;
   box-sizing: border-box;
}
.brands {
   display: flex;
   flex-direction: column; /* لجعل العناصر ترتب في عمود */
   flex-wrap: wrap;
   width: 300px;
   height: 400px;
   border: 1px solid gray;
   box-sizing: border-box;
   gap: 0;
   padding: 0;
   overflow-x: scroll;
}

.brands p {
   background-color: #f3f3f3;
   border: 1px solid gray;
   padding: 10px;
   text-align: center;
   margin: 0;
   font-size: 11px;
   cursor: pointer;
}

.brands p:hover {
   background-color: gray;
   color: #f3f3f3;
}
.main {
   flex-grow: 1;
   border: 1px solid gray;
   padding: 10px;
   box-sizing: border-box;

}

iframe {
   flex-grow: 1;
   width: 100%; /* يمكنك تعديل الارتفاع حسب الحاجة */
   height: 400px;
   box-sizing: border-box;
   margin-top: 50px;
   direction: rtl;
}
.phone_title{
   text-align: center;
   margin-bottom: 8px;
   background-color: gray;
}
.phoneSection{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}
.phoneSection a{
   margin: auto;
}
.phone-article{
   margin: auto;
   margin-top: 8px;
}
.phone-article .phoneImg{
   width: 180px;
   height: auto;
   display: block;
   margin: 0 auto;
}
.phone-article:hover{
   background-color: gray;
   cursor: pointer;
}

.box .phoneModel{
   text-align: center;
   width: 100%;
   margin-bottom: 8px;
   text-wrap: wrap;
}



@media (max-width:1200px){
   .container .shopping-cart{
      overflow-x: scroll;
   }
   .container .shopping-cart table{
      width: 1200px;
   }
}

@media (max-width:500px){
   .dropdown-content-Account{
      width: 90%;
      min-height: 400px;
   }
   .search{
      width: 80%;
      z-index: 1;
   }
   .search .input{
      width: 75%;
   }
   .header-content{
      flex-direction: column;
   }
   .box-container > article {
      width: 45%;
   }
   .name{
      font-size: 20px;
   }
   
   .product{
      flex-direction: column;
   }
   .video{
      width: 100%;
      height: auto;
   }
   .cntnr{
      flex-direction: column;
   }
   .phone_title{
      margin-top: auto;
   }
   .brands {
      width: 100%;
      height: 200px;
      
   }aside {
      width: 100%;
   }
   iframe {
      margin-top: auto;
      height: 500px;
   }
   .phone-article .phoneImg{
      width: 180px;
      margin: 0 auto;
   }
}