* {
      font-family: "Arial", Serif;
      font-size: 16px;
      margin: 0;
      box-sizing: border-box;
      padding: 0;
}

body {
      background-color: rgb(170, 172, 171);
      /* Contact page addition */
      font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial,
            Helvetica, sans-serif;
      font-size: 16px;
      background-color: #0e3d59;
}

h1 {
      font-size: 40px;
}

h2 {
      font-size: 32px;
}

h3 {
      font-size: 28px;
      margin: 2% 0 2% 0;
}

h4 {
      font-size: 22px;
}

.orangered {
      color: rgb(151, 1, 1);
}

.red {
      color: red;
}

.black {
      color: black;
}

.orange {
      color: orange;
}

.white {
      color: white;
}

.dblue {
      color: #3c4a79;
}

.lblue {
      color: #7c7a90;
}

#wrapper {
      /* max-width: 1000px; */
      min-height: 100vh;
      width: 100%;
      margin: auto;
      /* primary grid */
      display: grid;
      grid-template-areas:
            "banner"
            "menu"
            "content"
            "footer";
      grid-template-columns: 1fr;
      grid-template-rows: 120px 60px minmax(600px, auto) minmax(150px, auto);
      background-color: white;
}

header, footer{
      background-color: D8D6D6;
}

/* footer {
      background-color: black;
} */

/* ---- header ----- */

header {
      grid-area: banner;
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-areas:
            "logo searchbar aboutus contactus login cart"
            "logo searchbar aboutus contactus login cart";
      grid-template-columns: 1fr 6fr 1fr 1fr 1fr;
      grid-template-columns: 1fr 6fr 1fr 1fr 1fr;
}

header img {
      grid-area: logo;
      margin: 0.625rem 0.625rem 0.625rem 0.625rem;
      /* color: rgba(255, 255, 255, 1); */
}

/* header h1 {
      margin: auto 1% auto 2%;
}

header h1 span {
      grid-area: company;
      font-size: 1.5rem;
} */

#aboutus {
      grid-area: aboutus;
}

#contactus {
      grid-area: contactus;
}

#login {
      grid-area: login;
}

#cart {
      grid-area: cart;
}

input {
      grid-area: searchbar;
      height: 60px;
      width: 75%; 
      background-color: white;
      /*      padding-top: 2%;  /*Moves Text inside the box */
      margin: auto 5% auto 5%;
      /*Mover outer box */
      border-radius: 6px;
      border: 2px solid rgb(151, 1, 1);
}

::placeholder {
      font-size: 1rem;
      color: black;
      text-align: left;
      align-items: center;

}

header a {
      text-decoration: none;
      color: black;
      margin: auto 0 auto 0;
}

header a h2 {
      text-align: center;
      font-size: 1.50rem;
}

header h2:hover {
      color: orange;
}

/*--- End of Header ----*/
/* ---- nav ----- */
nav {
      grid-area: menu;
      background-color: black;
      max-width: 100%;
      height: 100%;
      margin-top: 0;
}

nav ul {
      height: 100%;
      list-style: none;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      padding: 0;
      margin: 0 5px 0 5px;
}

nav ul li {
      height: 100%;
      width: 9%;
      /* Makes Menu box hover to full size */
      /* text-align: center; */
}

nav ul li a {
      display: block;
      /* width: auto; */
      text-align: center;
      text-decoration: none;
      color: white;
      font-weight: bolder;
      font-size: 1.25rem;
      padding: 18% 0 18% 0;
      margin-left: 10px;
}

nav a:hover {
      height: 100%;
      background-color: orange;
      transition: 0.3s;
      color: black;
      /* padding: 20% auto 20% auto; */
}

/* ---- End of Nav bar ----- */
/* ---- content All Products Page ----- */
#allproducts-main {
      grid-area: content;
      width: 100%;
}

#allproducts-main h3 {
      text-align: center;
}

.slider-container {
      max-width: 100%;
      /* Or specific width */
      overflow: hidden;
      /* Hides the duplicated content until needed */
      display: grid;
}

.slide-group {
      display: flex;
      width: 400%;
      animation: continuous-slide 20s infinite linear;
      /* Adjust duration and timing function */
}

.slide {
      flex-shrink: 0;
      /* Prevents slides from shrinking */
      width: 25%;
      /* Adjust based on the number of slides (100% / 4 slides = 25%) */
      /* Add styling for slides (height, background, text, etc.) */
      height: 476px;
      text-align: center;
      line-height: 476px;
      font-size: 24px;
}

.slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* fills screen without distortion */
      display: block;
}

.slider-container:hover .slide-group {
      animation-play-state: paused;
}

/* Keyframes to create the sliding motion with a wait */
@keyframes continuous-slide {
      0% {
            transform: translateX(0);
            /* Start position */
      }

      /* Hold at each slide position by using multiple keyframes for the same transform value */
      20% {
            transform: translateX(0);
            /* Wait on Slide 1 */
      }

      25% {
            transform: translateX(-25%);
            /* Move to Slide 2 */
      }

      45% {
            transform: translateX(-25%);
            /* Wait on Slide 2 */
      }

      50% {
            transform: translateX(-50%);
            /* Move to Slide 3 */
      }

      70% {
            transform: translateX(-50%);
            /* Wait on Slide 3 */
      }

      75% {
            transform: translateX(-75%);
            /* Move to Slide 4 */
      }

      95% {
            transform: translateX(-75%);
            /* Wait on Slide 4 */
      }

      100% {
            /* Move to the start of the duplicated slides (which is visually the same as the start) */
            transform: translateX(-100%);
      }
}

/* #allproducts-banner {
      width: 100%;
      height: auto;
      padding: 1% 0 0% 0%;
      display: block;
      background: url(../images/black-Friday-banner-2025.jpg);
      background-size: cover;
      background-position: center;
      object-fit: cover;
      min-height: 436px;     
} */
/*---- sub-grid ----*/

/* #allproducts-main article {
      display: grid;
      grid-template-areas:
            "product1"
            "product2"
            "product3";
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      margin-bottom: 0;
} */

h4 {
      color: white;
}

#products1 {
      grid-area: product1;
      place-self: center;
}

#products2 {
      grid-area: product2;
      place-self: center end;
}

#products3 {
      grid-area: product3;
      place-self: center;
}

/* ------ End All products Page  ----- */
/* ---- content Desktop-main Page ----- */

#desktops-main {
      grid-area: content;
      max-width: 100%;
}

#desktops-main article {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
}

#desktops-main h2 {
      text-align: center;
      flex-basis: 100%;
      text-align: center;
      margin: 1% auto 2% auto;
}

#desktops-main h2 span {
      font-style: italic;
      text-align: center;
      margin-top: 1%;
      font-size: 30px;
}

#desktops-main article section h3 {
      color: orange;
}

#desktops-main article section img {
      display: block;
      width: 350px;
      height: 350px;
      border: 1px solid grey;
      box-sizing: border-box;
      margin: auto;
}

#desktops-main article section img:hover {
      box-shadow: 10px 10px 20px rgba(178, 178, 177, 0.3);
}

#desktops-main article section button {
      display: block;
      background-color: orange;
      color: white;
      border: 2px solid black;
      padding: 5% 10%;
      margin: 5% auto 5% auto;
      text-align: center;
      text-decoration: none;
      font-size: 20px;
      cursor: pointer;
}

/* ---- End of content Home Main Page ----- */

/* ---- Content laptop Page ----- */
#laptops-main {
      grid-area: content;
      max-width: 100%;
}

#laptops-main h2 {
      text-align: center;
      flex-basis: 100%;
      text-align: center;
      margin: 1% auto 2% 2%;
}

#laptops-main h2 span {
      font-style: italic;
      text-align: center;
      margin-top: 1%;
      font-size: 30px;
}

#laptops-main article {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
}

#laptops-main article section {
      width: 350px;
      height: 400px;
      border: 2px solid grey;
      margin: 3% 0 15% 0;
      align-items: center;
      gap: 10px;
}

#laptops-main article section h3 {
      color: orange;
      margin: 0.5% 0 0 2%;
}

#laptops-main article section h4,
#laptops-main article section p {
      margin: 1% 0 0 2%;
}

#laptops-main article section img {
      width: 300px;
      height: 300px;
      display: block;

      margin: 2% auto auto auto;
}

#laptops-main section img:hover {
      box-shadow: 10px 10px 20px rgba(178, 178, 177, 0.3);
}

#laptops-main article section button {
      display: block;
      background-color: orange;
      color: white;
      border: 2px solid black;
      padding: 5% 10%;
      margin: 5% 25% 5% 25%;
      text-align: center;
      text-decoration: none;
      font-size: 20px;
      cursor: pointer;
}

#laptops-main article section button:hover {
      background-color: red;
      color: black;
}

/* ---- End of content Laptop Main Page ----- */
#cart-main {
      margin: 2% 5% 2% 5%;
}

#cart-main article h4 {
      color: black;
      background-color: #000000;
      padding: 0;
      padding-top: 2%;
}

#cart-main {
      grid-area: content;
      max-width: 100%;
      /*---- sub-grid ----*/
      display: grid;
      grid-template-areas:
            "carttable carttable shipping"
            "cartform cartform payment";
      grid-template-columns: 2fr 1fr;
      grid-template-rows: 1fr 1fr;
      height: 250px;
      gap: 10%;
}

/* Start Cart-table */
#cart-main article section {
      width: 80%;
      height: 250px;
      border: 1px solid grey;
      margin: 1% 0 2% 25%;
      border-radius: 4px;
}

#cart-main article section h4,
#cart-main aside section h4 {
      height: 40px;
      padding: 1.5%;
      color: black;
      background-color: grey;
      align-items: center;
}

#carttable {
      grid-area: cartable;
      width: 100%;
      border-collapse: collapse;
}

table th,
td {
      color: black;
}

table,
th,
td {
      height: 40px;
      padding: 3px;
      font-size: 15px;
}

table th:nth-child(1),
table td:nth-child(1) {
      width: 10%;
      text-align: left;
}

table th:nth-child(2),
table td:nth-child(2) {
      width: 60%;
      text-align: left;
}

table th:nth-child(3),
table td:nth-child(3),
table th:nth-child(4),
table td:nth-child(4) {
      width: 7%;
      text-align: right;
}

/* End cart-table */
#cartform {
      grid-area: cartform;
      width: 80%;
      height: 250px;
      margin: 5% 0 0 25%;
      border-radius: 4px;
}

#cartform form label {
      font-weight: bold;
      float: left;
      width: 80%;
      margin: 2% 0 0 0;
      padding-left: 1%;
}

#cartform form input {
      width: 80%;
      height: 20px;
      text-align: left;
      margin: 1% 0 0 1%;
}

#cartform form button {
      background-color: orange;
      border: 2px solid #080806;
      width: 100px;
      height: 30px;
      margin: 2% 0 0 1%;
      border-radius: 4px;
}

#cartform form button:hover {
      background-color: red;
      color: black;
}

/* shipping option & payment gateway box */
#cart-main #shipping {
      border: 1px solid grey;
      grid-area: shipping;
      width: 200px;
      height: 250px;
      margin: 2% 10% 2% 20%;
      border-radius: 4px;
}

#cart-main #shipping label {
      width: 80px;
      float: left;
      margin: 15% 0 0 5%;
}

#cart-main #shipping input[type="checkbox"] {
      float: left;
      width: 50px;
      height: 50px;
      margin: 10% 0 0 10%;
      justify-content: center;
      background-color: red;
}

#cart-main #payment {
      grid-area: payment;
      border: 1px solid grey;
      width: 200px;
      height: 250px;
      border: 1px solid grey;
      margin: 5% 10% 2% 20%;
      border-radius: 4px;
}

#cart-main #payment a {
      width: 80px;
      height: 54px;
      border: 1px solid grey;
      display: block;
      margin: 40% 10% 30% 30%;
}

/* ----- End of Cart Main Page -------- */
/*  Contact page css */

#contact-main h2 {
      color: black;
      text-align: center;
      margin: 0 auto 0 auto;
      /* Center the header */
}

#contact-main form {
      background-color: #ffffff;
      width: 60%;
      justify-items: center;
      margin: auto;
}

#contact-main form ul {
      width: 52%;
      min-height: 470px;
      text-decoration: none;
      list-style: none;
      border: 2px solid black;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
            0 6px 20px 0 rgba(0, 0, 0, 0.2);
      justify-content: center;
}

#contact-main ul {
      margin-bottom: 1%;
}

#contact-main form li,
#contact-main form h3,
#contact-main form p {
      clear: both;
      padding: 1%;
      margin: 1% 10% 0 1%;
}

#contact-main h3 {
      text-align: center;
      font-size: 2rem;
}

#contact-main h4 {
      text-align: right;
      text-decoration: none;
      font-size: 2rem;
      margin-right: 10%;
}

#contact-main a {
      font-size: 2rem;
      color: orange;
}

#contact-main form ul li.two {
      position: relative;
}

form ul li.two label {
      float: left;
      width: 80%;
      position: relative;
      margin: 0 15% 0 15%;
}

form li.two input {
      min-width: 80%;
      height: 20px;
      /* float: left; */
      margin: 0 auto 0 auto;
      align-items: center;
      border-radius: 4px;
      border: 1px solid #484846;
      margin: 0 15% 0 15%;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
            0 6px 20px 0 rgba(0, 0, 0, 0.2);
}

form li.two select {
      height: 20px;
      min-width: 80%;
      border: 1px solid #484846;
      border-radius: 4px;
      margin: 0 15% 0 15%;
      font-size: 14px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
            0 6px 20px 0 rgba(0, 0, 0, 0.2);
}

form li.two textarea {
      height: 80px;
      width: 80%;
      float: left;
      text-align: left;
      border-radius: 4px;
      margin: 0 15% 0 15%;
      border: 1px solid #484846;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
            0 6px 20px 0 rgba(0, 0, 0, 0.2);
}

form li.one {
      text-align: center;
}

#contact-main form #submit {
      clear: both;
      width: 100px;
      height: 40px;
      float: left;
      background: #f29f05;
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      margin-left: 15%;
      border-radius: 4px;
}

#contact-main form .tooltip {
      display: block;
      position: absolute;
      right: 0;
      visibility: hidden;
      left: 15em;
      top: 0;
      width: 10em;
      padding: 0.5em;
      font-weight: normal;
      color: #fff;
      background-color: orange;
      border: solid 2px #0e3d59;
}

.error {
      color: #d92525;
}

span.error {
      position: absolute;
      right: 7%;
      padding-right: 20px;
}

.success {
      color: green;
}

span.success {
      position: absolute;
      right: 11%;
      top: 8%;
      padding-left: 10px;
}

span#statesuccess.success {
      position: absolute;
      right: 11%;
      top: 8%;
}

/*    End of contact Page */

/* ---- footer with grid----- */
footer {
      grid-area: footer;
      width: 100%;
      min-height: 150px;
      /*---- sub-grid ----*/
      display: grid;
      grid-template-areas:
            "company profile aboutus subscribe"
            "socialh5 socialh5 socialh5 socialh5"
            "socialmedia socialmedia socialmedia socialmedia"
            "copyright copyright copyright copyright";
      grid-template-columns: 1fr 1fr 1fr 2fr;
      grid-template-rows: auto;
      margin-bottom: 0;
}
.divider {
  display: block; 
  max-width: 100%;
  height: 2px;
  margin-top: 5px;
  background-color: black;
}
#company {
      grid-area: company;
}

#profile {
      grid-area: profile;
}

#aboutus {
      grid-area: aboutus;
}

#subscribe {
      grid-area: subscribe;
}

footer ul li {
      font-size: 1.5rem;
      color: red;
      margin: 5% 5% 0 5%;
}

footer ul li,
footer form li {
      list-style: none;
      text-decoration: none;
      display: block;
      color: white;
      margin: 5% 5% 0 5%;
      font-size: 1.5rem;
}

footer ul li a {
      list-style: none;
      text-decoration: none;
      color: black;
      font-size: 1.25rem;
}

footer ul li a:hover {
      color: orange;
}

.footerhead {
      font-size: 1.5rem;
      color: #152965;
      font-weight: bold;
      margin: 3% 3% 0 3%;
}

#subscribe input {
      width: 60%;
      height: 40%;
      float: left;
      border-radius: 5px;
      text-align: left;
      margin: 3% 3% 0 3%;
      padding: 0.5%;
      border: 2px solid #3c4a79;
}

#subscribe input ::placeholder {
      padding-top: 10%;
}

#subscribe button {
      display: block;
      width: 20%;
      height: 40%;
      border-radius: 5px;
      background-color: #3c4a79;
      color: #D8D6D6;
      border: 2px solid orange;
      margin: 3% 0 0 3%;
      gap: 1%;
      padding: 1% 0 1% 0;
      text-decoration: none;
      font-size: 1.5rem;
      cursor: pointer;
}

#subscribe button:hover {
      background-color: orange;
      border: 2px solid #3c4a79;
}

#socialh5 {
      grid-area: socialh5;
      text-align: center;
      font-size: 2rem;
      margin-bottom: 2%;
}

#socialmedia {
      grid-area: socialmedia;
      display: flex;
      flex-direction: row;
      justify-content: center;
      flex-wrap: nowrap;
      gap: 3%;
      padding: 0;
      margin: 0;
     /* background-color: black; */
}

#socialmedia a i {
      color: black;
      padding: 0.5rem;
      /* background-color: black; */
      border-radius: 50%;
      border: 2px solid #3c4a79;
      box-sizing: border-box;
      font-size: 1rem;
}

#socialmedia a i:hover {
      background-color: orange;
}

#copyright {
      grid-area: copyright;
      margin: 2% 0 2% 0;
      text-align: center;
      font-size: 1.5rem;
}

footer p {
      color: black;
}

/* Media */

@media screen and (max-width: 600px) {
      #wrapper {
            grid-template-rows: 120px 50px minmax(600px, auto) minmax(150px, auto);
      }

      header {
            grid-template-areas:
                  "Logo AboutUS CotactUs login cart"
                  "Logo searchbar searchbar searchbar searchbar";
            grid-template-columns: 4fr 3fr 3fr 2fr 2fr;
            grid-template-rows: 50px 20px;
      }

      header picture img {
            margin: 0.625rem 0.625rem 0.625rem 0.625rem;
      }

      header h1 {
            margin-top: 3%;
      }

      header h1 span {
            font-size: 2rem;
      }


      /* header .logincart {
            width: 60px;
            height: 30px;
            margin-top: 15%;
      } */

      header a h2 {
            margin: 3% 1% auto 0;
            font-size: 1rem;
      }

      input {
            height: 40px;
            /* width: 75%; */
            margin: 2%;
      }

      ::placeholder {
            font-size: 1rem;
            color: black;
            text-align: left;
            align-items: center;

      }

      /* Navbar */
      nav ul li {
            height: 100%;
            width: 12%;
            /* Makes Menu box hover to full size */
            /* text-align: center; */
      }

      nav ul li a {
            font-size: .6rem;
            padding: 35% 0 35% 0;
            height: 100%;
      }

      #allproducts-banner {
            width: 100%;
            height: 400px;
            padding: 1% 1% 1% 1%;
            display: block;
            background: url(../images/m-black-Friday-banner-2025.jpg);
            background-size: cover;
            background-position: center;
      }

      #prducts1,
      #products2,
      #products3 {
            display: none;
      }

      #laptops-main article section button {
            margin-bottom: 15%;
      }

      #desktops-main article section img {
            display: block;
            width: 300px;
            height: 300px;
      }

      #laptops-main article section {
            width: 310px;
            height: 400px;
            margin-top: 4%;
      }

      #laptops-main article section button {
            margin: 5% 25% 5% 25%;
      }

      /* cart-main */
      #cart-main {
            grid-template-areas:
                  "carttable"
                  "cartform"
                  "shipping"
                  "payment";
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            height: auto;
            gap: 0;
      }

      #cart-main article section {
            width: 95%;
            height: 250px;
            margin: 6% auto 2% auto;
      }

      #cartform {
            grid-area: cartform;
            width: 80%;
            height: 250px;
            margin: 0% 0 0 10%;
            border-radius: 4px;
      }

      #cartform form label {
            font-weight: bold;
            float: left;
            margin: 1% 0 0 2%;
            width: 80%;
      }

      #cartform form input {
            width: 80%;
            height: 20px;
            text-align: left;
            margin: 1% 0 0 2%;
      }

      #cartform form button {
            margin: 3% 0 0 2%;
      }

      #cart-main #shipping,
      #cart-main #payment {
            border: 1px solid grey;
            width: 95%;
            height: 150px;
            margin: 6% 0 0 2%;
      }

      #cart-main #shipping label {
            margin: 12% auto 0 5%;
      }

      #cart-main #shipping input[type="checkbox"] {
            float: left;
            width: 50px;
            height: 50px;
            margin: 8% 0 0 2%;
            justify-content: center;
            background-color: red;
      }

      #cart-main #payment a {
            width: 54px;
            height: 54px;
            border: 1px solid grey;
            display: block;
            margin: 7% 0 0 40%;
      }

      /* Cart-main end */
      #contact-main form ul {
            width: 90%;
      }

      form li.two input,
      form li.two select,
      form li.two textarea {
            width: 80%;
      }

      #contact-main form .tooltip {
            left: 5em;
      }

      /* footer */
      footer {
            grid-template-areas:
                  "company"
                  "profile"
                  "aboutus"
                  "subscribe"
                  "socialh5"
                  "socialmedia"
                  "copyright";
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            text-align: center;
      }

      footer ul li,
      footer ul li a {
            font-size: 18px;
      }

      #subscribe input {
            place-items: center;
            margin-left: 10%;
            margin-right: 1%;
      }

      #subscribe button {
            place-items: center;
            margin-right: 16%;
      }

      #socialmedia {
            display: flex;
            justify-content: center;
      }

      #socialmedia img {
            max-width: 100%;
            height: auto;
      }
}