/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); */

/* Root Color Codes */

:root {
      /* PINK ACCENT */
      --coreDarkPink: #6c0225;
      --coreMidPink: #cb433e;
      /* -corePinkSoft: #ff4f81; */
      --corePinkFade: #e4aaa7;
      --corePinkSoft: #ffe5ee;


      --coreWhite: white;

      --coreBlack: black;

      --coreGrey: #898787;
      --coreGreySoft: #f4eded;

      /* ORANGE  ACCENT */
      --coreDarkOrange: #FB923C;
      --coreOrangeFade: #ebb161;
      --coreOrangeSoft: #fff4df;
      --coreOrangeHover: #ff9500;
      --coreOrange: #ff7b00;
      --coreOrangeHover: #ff9500;
      --coreOrangeSoft: #fff4e8;

      /* SUCCESS / GREEN */
      --coreDarkGreen: #61f973;
      --coreGreen: #059669;

      /* TECH BLUE / NAVY */
      --coreNavy: #0f172a;
      --coreDarkBlue: #2563eb;
      --coreLightBlue: #89b9f8;

      /* NEUTRALS */
      --coreWhite: #ffffff;
      --coreLight: #f8fafc;
      --coreGrey: #64748b;
      --coreBorder: #e2e8f0;
      --coreText: #1e293b;
      --coreBlack: #0f172a;

      /* ALERT */
      --coreRed: #ef4444;
}

* {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
      /* font-family: "Futura", Serif; */
      font-size: 16px;
      margin: 0;
      box-sizing: border-box;
      padding: 0;
}


body {
      background-color: white;
      font-size: 16px;

}

.skip-link {
      position: absolute;
      left: -10000px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
}

.skip-link:focus {
      position: static;
      width: auto;
      height: auto;
      padding: 10px;
      color: #000;
      background-color: #fff;
      z-index: 1000;
}

h1 {
      font-size: 40px;
      text-align: center;
}

h2 {
      font-size: 2rem;
      color: var(--coreDarkPink);
      text-align: center;
      margin-top: 2%;
      margin-bottom: 2%;
}

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

h4 {
      font-size: 22px;
}

#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: 100px 60px minmax(600px, auto) minmax(150px, auto);
      background-color: white;
}


footer {
      background-color: black;
}

header {
      background-color: white
}

/* ---- header ----- */
#fix-header {
      position: sticky;
      top: 0;
      /* Stick to the top of its container */
      z-index: 1000;
}

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


header a picture {
      display: grid;
      align-items: center;
      grid-area: logo;
      width: 100%;
      height: 100px;
}

header a picture img {
      height: 88px;
      width: 117px;
      margin: 5px 5px 5px 10px;
      box-shadow: 0 4px 8px 0 rgba(95, 95, 95, 0.4),
            0 6px 10px 0 rgba(0, 0, 0, 0.2);
}

header h1 {
      position: absolute;
      left: -9999px;
}

.display-hidden {
      position: absolute;
      left: -9999px;
}

#searchbar {
      grid-area: searchbar;
      height: 40px;
      width: 60%;
      background-color: white;
      margin: auto 5% auto 5%;
      border-radius: 6px;
      border: 2px solid black;
      padding-left: 10px;
}


#searchbar::placeholder {
      font-size: 1rem;
      color: black;
}

#blog {
      grid-area: blog;
      display: flex;
      justify-content: center;
      align-items: center;
}

#contactus {
      grid-area: contactus;
      display: flex;
      justify-content: center;
      align-items: center;
}


#cart {
      grid-area: cart;
      display: flex;
      justify-content: center;
      align-items: center;
}

#login {
      grid-area: login;
      display: flex;
      justify-content: center;
      align-items: center;
}

.text-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      /* vertical alignment */
      justify-content: center;
      /* horizontal alignment */
      height: 100%;
}

header a {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      text-decoration: none;
      color: black;
      height: 100%;
}

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

header a:hover {
      color: orange;
      font-size: 1rem;
      /* display: block; */
}

.text-box:hover h2 {
      color: orange;
      text-align: center;
      font-size: 1.1rem;
      display: block;
}

/*--- End of Header ----*/
/* ---- nav ----- */
/* ===== MODERN IZZY COMPUTERS NAVBAR ===== */

nav {
      grid-area: menu;
      background: black;
      width: 100%;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
      border-bottom: 2px solid var(--coreOrange);
}

/* Sticky Navigation */

#fix-nav {
      position: sticky;
      top: 100px;
      z-index: 1000;
}

/* Main Menu */
nav ul {
      height: 100%;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 24px;
      margin: 0;
}

/* Menu Items */


/* Links */
nav ul li a {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 56px;
      padding: 0 34px;
      text-decoration: none;
      color: #f8fafc;
      font-weight: 600;
      font-size: 1rem;
      transition: all 0.3s ease;
      letter-spacing: 1px;
      margin-bottom: 2px;
      margin-top: 2px;
      /* margin-right: 70px; */
}

/* Hover Effect */
nav ul li a:hover {
      background-color: var(--coreOrange);
      /* margin-bottom: 7px; */
      color: black;
      /* transform: translateY(-2px); */
      box-shadow: 0 6px 18px rgba(255, 123, 0, 0.4);
}

/* Active Page */
nav ul li a.active {
      /* background: linear-gradient(135deg, #ff7b00, #ff4d6d); */
      background: var(--coreOrange);
      color: white;
}

#fix-nav .dropdown-menu {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 100%;
      left: -30px;
      width: 280px;

      opacity: 0;
      visibility: hidden;

      transition: all 0.25s ease;
      z-index: 100;
}

#fix-nav li:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
}

#fix-nav li {
      position: relative;
}

#fix-nav .dropdown-menu li {
      width: 100%;
      height: auto;
}

#fix-nav .dropdown-menu li a {
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      background-color: black;
      line-height: normal;
      border: 2px solid white;
      margin-top: 1px;
      margin-bottom: 0;
      opacity: .8;
}

#fix-nav .dropdown-menu li a:hover {
      color: black;
      margin-top: 1px;
      background-color: var(--coreOrange);

}



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

}

#allproducts-main h2 {
      text-align: center;
      margin: 0% 0 2% 0;
}

.video-section {
      position: relative;
      max-width: 100%;
      max-height: 500px;
      display: flex;
      justify-content: center;
      margin: 1% 1%;
      border: 2px solid black;
}

#display-video {
      display: block;
      max-width: 100%;
      height: auto;
}

.videotext-overlay {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 2rem;
      font-weight: bold;
      padding: 10px 20px;
      background-color: rgba(0, 0, 0, 0.4);
      text-align: center;

}

/* ------ End All Categories Page  ----- */

/*  Products */

#products-main {
      /* display: grid; */
      width: 100%;
      min-height: 1100px;
      background-color: #fff;
      margin: 0;
}

#products-main h2 {
      background-color: #fff;
      text-align: center;
      margin: 2% auto 2% auto;
}

.products-grid {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      margin: 0 5% 0 5%;
}

.products-grid article {
      display: block;
      width: 400px;
      height: 500px;
      text-align: center;
      text-decoration: none;
}


.products-grid article img {
      display: block;
      width: 350px;
      height: 350px;
      border: 1px solid grey;
      box-sizing: border-box;
      box-shadow: 0 4px 4px 0px rgba(0, 0, 0, 0.2),
            0 6px 8px 0 rgba(0, 0, 0, 0.2);
      transition: 0.3s;
      margin: 2% auto 2% auto;
}

.products-grid article h3 {
      text-align: center;
      margin: 1% auto 1% auto;
      color: var(--coreDarkPink);
}

.products-grid article p,
.products-grid article a {
      margin: 1% auto 1% auto;
      color: var(--coreDarkPink);
}

.products-grid article img:hover {
      box-shadow: 0 8px 16px 0 rgba(254, 104, 104, 0.4);
}

/*  End All-categories */
/* Our Brand */
#brands-main {
      display: block;
      border: 1px solid grey;
      border-radius: 10px;
      margin: 4% 3% 4% 3%;
      padding: 1%;
      min-height: 300px;
      background-color: var(--coreOrangeSoft);

}

#brands-main h2 {
      padding: 0 5% 0 5%;
}

#brands-main p {
      background: #f8fafc;
      padding: 20px;
      font-size: 2rem;
      color: #374151;
      text-align: center;
      line-height: 1.8;
      letter-spacing: 0.5px;
      font-weight: 500;
      border-top: 1px solid #e5e7eb;
      border-bottom: 1px solid #e5e7eb;
      margin: 2% auto 1% auto;
      white-space: wrap;
      overflow-x: auto;
}

.brand-line::-webkit-scrollbar {
      height: 6px;
}

.brand-line::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 10px;
}

/* End brand */
/* New Arrivals */

#products-block-new {
      display: grid;
      width: 100%;
      min-height: 500px;
      background-color: #fff;
      margin: 10px 0 0 0;
}

/* #products-block-new h2 {
      background-color: #fff;
      font-size: 2rem;
      text-align: center;
} */

.products-grid-new {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      margin: 1% 5% 1% 5%;
      gap: 20px;
}

.products-grid-new .product-card {
      display: block;
      width: 250px;
      height: 450px;
      border: 1px solid grey;
      box-sizing: border-box;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      border-radius: 18px;
      overflow: hidden;
      transition: 0.3s;
      margin: 2% auto 2% auto;
      background: #ffffff;
      transition: all 0.3s ease;
      margin: auto;
      text-align: center;
      position: relative;
}

.products-grid-new .product-card .sale {
      position: absolute;
      top: 3px;
      right: 3px;

      background: linear-gradient(135deg,
                  rgba(239, 68, 68, 0.75),
                  rgba(220, 38, 38, 0.75));

      color: white;
      font-size: 14px;
      padding: 8px 12px;
      border-radius: 999px;
      margin: 0;
      z-index: 2;
}

.products-grid-new .product-card img {
      display: block;
      box-sizing: border-box;
      transition: 0.3s;
      margin: 2% auto 2% auto;
      width: 100%;
      height: 220px;
      object-fit: cover;
      display: block;
      /* margin-top: 20px; */
}

.product-card img:hover {
      /* transform: translateY(-8px); */
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      transition: 0.3s;
}

.product-card .product-info {
      padding: 16px;
      border-top: 1px solid grey;
}

.product-card .product-info h3 {
      font-size: 1rem;
      margin: 5x 0 5px;
      color: #111827;
}

.product-card .product-info .sku {
      font-size: .75rem;
      color: #6b7280;
      margin-bottom: 8px;
}

.product-card .product-info .desc {
      font-size: .70rem;
      color: #374151;
      line-height: 1.5;
      margin-bottom: 14px;
}

.product-card .product-info .product-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.product-card .product-info .product-footer .price {
      font-size: 1rem;
      font-weight: bold;
      color: var(--coreDarkPink);
      position: absolute;
      bottom: 20px;
      left: 5px;
}


.product-card .product-info .product-footer button {
      background: linear-gradient(135deg, var(--coreDarkGreen), #00bcd4);
      margin-left: 50px;
      color: white;
      border: none;
      padding: 8px 14px;
      border-radius: 10px;
      cursor: pointer;
      transition: 0.3s ease;
      position: absolute;
      bottom: 10px;
      right: 5px;
}

.product-card .product-info .product-footer button:hover {
      transform: scale(1.05);
      background: linear-gradient(135deg, #0b5ed7, #0097a7);
}


/* End New Arrivals */



/* ---- Content All-cards Page 1 Slider for Desktop/Laptop Page----- */

.dslider-container {
      width: 100%;
      overflow: hidden;
      background: var(--coreDarkBlue);
      padding: 10px 0;
      margin-top: 5px;
}

.dslide-group {
      display: flex;
      width: 400%;
      /* 4 slides */
      animation: dscroll 30s linear infinite;
}

.dslide {
      width: 25%;
      /* each slide = full container width */
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;
}

.dslide h2 {
      color: white;
      font-size: 18px;
      margin: 0;
      padding: 0 15px;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
}

/* Continuous sliding */
@keyframes dscroll {
      0% {
            transform: translateX(0);
      }

      100% {
            transform: translateX(-75%);
      }
}

/* ------------ Page 1 -------------------- */

/* End Slider heading */

/* - All cards for desktop/laptop  */
/* -------------- Page 2 ----------------------- */
#allcards-main {
      grid-area: content;
      max-width: 100%;
      /* background-color: #f0f0f0; */
}

#allcards-main article ul {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 25px;
      padding: 30px 20px;
      margin: 0;
}

/* Card */
#allcards-main article ul li {
      list-style: none;
      background: #ffffff;
      border-radius: 18px;
      overflow: hidden;
      border: none;
      height: auto;
      min-height: 500px;
      padding: 15px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      position: relative;
}

#allcards-main article ul li:hover {
      transform: translateY(-8px);
      box-shadow: 0 18px 35px rgba(0, 0, 0, 0.15);
}

/* Save Badge */
#allcards-main article ul li h3 {
      position: absolute;
      top: 12px;
      right: 12px;
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: white;
      font-size: 14px;
      padding: 8px 12px;
      border-radius: 999px;
      margin: 0;
      z-index: 2;
}

/* Product Image */
#allcards-main article ul li img {
      width: 100%;
      height: 260px;
      object-fit: cover;
      border-radius: 12px;
      margin: 0 auto 15px;
      box-shadow: none;
      transition: transform 0.3s ease;
}

#allcards-main article ul li:hover img {
      transform: scale(1.04);
}

/* Price */
#allcards-main article ul li h4 {
      font-size: 24px;
      color: #0d6efd;
      margin: 8px 0 10px;
      font-weight: 700;
}

/* Description */
#allcards-main article ul li p {
      font-size: 15px;
      color: #374151;
      line-height: 1.5;
      margin: 0 0 18px;
}

/* Button */
#allcards-main article ul li button {
      width: 100%;
      border: none;
      border-radius: 12px;
      padding: 12px;
      font-size: 16px;
      font-weight: 600;
      margin-top: auto;
      background: linear-gradient(135deg, #16a34a, #22c55e);
      color: white;
      cursor: pointer;
      transition: all 0.3s ease;
}

#allcards-main article ul li button:hover {
      background: linear-gradient(135deg, #0d6efd, #00bcd4);
      transform: scale(1.02);
}

/* ----------------- End Page 2 --------------- */
/* --------------------- Page 3 -------------- */



/* Grid Layout */
.card-circle {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 20px;
      list-style: none;
      padding: 0;
      margin: 0;
}

#allcards-main aside section h2 {
      height: 40px;
      color: var(--coreDarkPink);
      align-items: center;
      text-align: center;
}

#allcards-main aside ul {
      margin: 2% 10px 1% 1%;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-around;
      list-style: none;
}

.card-circle li a {
      text-decoration: none;
      color: inherit;
      display: block;
}

.card-circle li figure {
      background: white;
      border-radius: 18px;
      padding: 20px;
      text-align: center;
      transition: 0.3s ease;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
      border: 1px solid #e5e7eb;
}

.card-circle li figure:hover {
      transform: translateY(-8px);
      box-shadow: 0 14px 30px rgba(37, 99, 235, 0.18);
}

/* Circular Images */
.card-circle img {
      width: 150px;
      height: 150px;
      object-fit: cover;
      border-radius: 50%;
      border: 2px solid #dbeafe;
      padding: 6px;
      background: white;
      transition: 0.3s;
}

.card-circle li figure:hover img {
      transform: scale(1.05);
      border-color: rgb(143, 152, 232);
}

/* Text */
.card-circle figcaption {
      margin-top: 15px;
      font-size: 18px;
      font-weight: 600;
      color: #123d79;
}

/* End Page 3 */

/* ----------------- Page 4 ------------------ */

.laptop-slogan {
      width: 98%;
      margin: 2% 1% 2% 1%;
      padding: 60px 15px;
      text-align: center;
      background: linear-gradient(135deg, #f193a4, #1e3a8a, #f193a4);
      color: #fff;
      border-radius: 10px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.laptop-slogan h3 {
      background: linear-gradient(135deg, #f193a4, #1e3a8a, #f193a4);
      color: white;
      display: inline-block;
      font-size: 2rem;
      font-weight: 600;
      margin-bottom: 14px;
      letter-spacing: 1px;
      text-transform: uppercase;
}

.laptop-slogan p {
      font-size: 1.5rem;
      font-weight: 500;
      color: #dbeafe;
      letter-spacing: 1px;
}

/* End Page 4 */

/* --------------- End All cards -------------- */
/* --------------- Repairs Main --------------*/
.repairs-hero {
      background: linear-gradient(135deg, var(--coreGrey), var(--corePinkFade));
      /* background:linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)); */
      color: white;
      text-align: center;
      margin: 1%;
      padding: 100px 20px;
}

.repairs-hero h1 {
      font-size: 3rem;
      margin-bottom: 10px;
}

.repairs-hero p {
      font-size: 1.2rem;
      max-width: 800px;
      margin: auto;
}


.repairs-container {
      width: 95%;
      max-width: 1200px;
      margin: 50px auto;
}

.repairs-title {
      text-align: center;
      margin-bottom: 40px;
}

.repairs-title h2 {
      font-size: 2.5rem;
      color: var(var(--coreDarkPink));
}

.repairs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 15px;
}

.repair-card {
      width: 100%;
      height: 250px;
      background: var(--coreOrangeSoft);
      padding: 5px;
      margin: 1% auto;
      border-radius: 15px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transition: 0.3s;
      text-align: center;
      font-size: 1rem;
}

.repair-card:hover {
      transform: translateY(-8px);
}

.repair-card h3 {
      height: 100px;
      color: black;
      margin-bottom: 15px;
      border: 2px solid black;
      border-radius: 10px;
      padding: 10px 10px;
}

.repair-card p {
      line-height: 1.6;
      color: black;
      font-weight: 500;
}

/* ===== WHY CHOOSE US ===== */
.why-us {
      /* background-color: var(--corePinkSoft); */
      color: black;
      padding: 20px 20px;
      /* margin: 30px auto 10px auto; */
      border-radius: 10px;
}

.why-us h2 {
      text-align: center;
      margin: 10px auto 30px auto;
}

.why-us h3 {
      text-align: center;
      margin-bottom: 15px;
      font-size: 2.3rem;
      text-align: center;
}


.why-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 25px;
      width: 90%;
      max-width: 1100px;
      margin: auto;
}

.why-box {
      background: var(--corePinkFade);
      padding: 20px;
      border-radius: 12px;
}

.why-box h3 {
      font-size: 1.5rem;
      border-radius: 10px;
}

.why-box p {
      margin-top: 10px;
}

/* ===== CONTACT ===== */
.contact-section {
      text-align: center;
      padding: 60px 20px;
}

.contact-section h2 {
      color: var(--coreDarkPink);
      font-size: 2.2rem;
}

.contact-btn {
      display: inline-block;
      margin-top: 20px;
      padding: 15px 35px;
      background: var(--coreDarkPink);
      color: white;
      text-decoration: none;
      border-radius: 8px;
      font-weight: bold;
      transition: 0.3s;
}

.contact-btn:hover {
      background: var(--coreDarkBlue)
}

/* ===== RESPONSIVE ===== */

#repairs-mainr {
      grid-area: content;
      margin: 5% 15% 5% 15%;
}

.slider-containerr {
      /* max-width: 90%; */
      margin: 1% 10% 1% 10%;
      /* Or specific width */
      overflow: hidden;
      /* Hides the duplicated content until needed */
      display: grid;
}

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

.slider {
      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: 550px;
      width: 25%;
      /* Height of the banner  *** */
      text-align: center;
      /* line-height: 476px; */
      font-size: 24px;
}

.slider img {
      width: 100%;
      display: block;
}

.slider-containerr:hover .slide-groupr {
      animation-play-state: paused;
}

/* Keyframes to create the sliding motion with a wait */

@keyframes continuous-slide {

      0%,
      20% {
            transform: translateX(0);
      }

      25%,
      45% {
            transform: translateX(-25%);
      }

      50%,
      70% {
            transform: translateX(-50%);
      }

      75%,
      95% {
            transform: translateX(-75%);
      }

      100% {
            transform: translateX(0);
      }
}

/* --------- End of repairs ---------------- */
#cart-main,
#cart-main h2,
#cart-main h3 {
      /* margin: 2% 5% 2% 5%; */
      background-color: var(--coreOrangeSoft);
}

#cart-main h2,
#cart-main h3 {
      color: black;
      padding: 0;
      padding-top: 1%;
      font-weight: lighter;
      text-align: center;
}

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

#cartform {
      grid-area: cartform;
      width: 100%;
      min-height: 350px;
      margin: 5% auto 0 auto;
      justify-content: center;
      border: 1px solid #080806;
      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: 40px;
      text-align: left;
      margin: 1% 0 0 1%;
}

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

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

/* Start Cart-table */
#cart-main article section {
      width: 80%;
      height: 350px;
      /* border: 1px solid grey; */
      margin: 1% 0 2% 5%;
      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: carttable;
      width: 100%;
      border-collapse: collapse;
      border: 1px solid grey;
}

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 */

/* 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 -------- */
/*  Cart Contact page css */
#ccontact-main {
      grid-area: content;
}

#ccontact-main h2 {
      color: black;
      text-align: center;
      margin: 0 auto 0 auto;
}

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

#ccontact-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;
}

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

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

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

#ccontact-form h3 {
      /* text-align: right;
      text-decoration: none; */
      font-size: 2rem;
      /* margin-right: 10%; */
}

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

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

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

form li.two input {
      min-width: 70%;
      max-width: 90%;
      height: 20px;
      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: 32px;
      min-width: 70%;
      max-width: 90%;
      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: 70%;
      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;
}

#ccontact-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;
}

#ccontact-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 cart Page */
/*  Contact page css */
#contact-main {
      grid-area: content;
      text-align: center;
}

#contact-container {
      grid-area: content;
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-areas:
            "map address"
            "image form";
      grid-template-columns: 1fr 1fr;
      grid-template-rows: minmax(450px) minmax(450px);
      gap: 40px;

}

#contact-main section #contact-header h2,
#contact-main section #contact-header p {
      text-align: center;
      /* margin: 40px; */
}

#contact-map h3,
#contact-details h3 {
      margin: 20px auto 20px auto;
}

#contact-map{
      grid-area: map;
      width: 100%;
      height: 100%;
      margin: 0 auto;
}

#contact-map iframe {
	width: 600px;
	height: 400px; 
      padding: 20px;
      border: 2px solid #000;
      margin: 40px auto;
}


#contact-details {
      grid-area: address;
      width: 100%;
      height: 100%;
      /* padding: 20px; */

}
#contact-details #address{
      height: 500px;
      padding: 20px;
}
#contact-details #address h4,
#contact-details #address a{
      color: var(--coreDarkPink);
      line-height: 1.5;
      font-size: 1.5rem;
      margin-top: 10px;
}

#contact-container section #contact-img {
      grid-area: image;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid black;
      border-radius: 12px;
}

#contact-main #contact-form {
      grid-area: form;
      padding: 0 0 40px 0;
}

#contact-main #contact-form h2 {
      font-size: 2rem;
}

#contact-main #contact-form form {
      background-color: #ffffff;
      margin: auto;
}

#contact-main #contact-form form ul {
      width: 100%;
      min-height: 400px;
      text-decoration: none;
      list-style: none;
      justify-content: center;
}

#contact-main #contact-form ul {
      margin-bottom: 0;
}

#contact-main #contact-form form li {
      clear: both;
      /* padding: 1%; */
      margin: 0;
}

#contact-container section #contact-form h3 {
      margin-bottom: 1%;
}

#theForm ul li.two label {
      width: 70%;
      position: relative;
      text-align: center;
}

#theForm ul li.two input {
      width: 60%;
      height: 30px;
      margin: 0 auto 0 auto;
      border: 1px solid #484846;
      margin: 0;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
            0 6px 20px 0 rgba(0, 0, 0, 0.2);
}

#theForm ul li.two select {
      border-radius: 4px;
      margin: 0;
      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);
}

#theForm li.two textarea #messageBody {
      height: 80px;
      width: 70%;
      align-items: center;
      /* text-align: left; */
      border-radius: 4px;
      margin: 0;
      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);
}

#theForm li.one {
      text-align: center;
}

#contact-main form #submit {
      clear: both;
      width: 100px;
      height: 40px;
      /* float: left; */
      background: var(--coreOrange);
      /* text-align: center; */
      font-size: 14px;
      font-weight: bold;
      margin: 1% 0 0 0;
      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 */

/* -------------- Start Repairs page ----------- */
/* SPECIALS SECTION */
#specials-block {
      padding: 40px;
      background: var(--corePinkSoft);
      margin: 3%;
}

#specials-block h2 {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 50px;
}

/* GRID (6 cards total = 3 + 3) */
.specials-item {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 5%;
      gap: 30px;
}

/* CARD STYLE */
.specials-item section {
      display: block;
      position: relative;
      width: 300px;
      height: 300px;
      background: #fff;
      border-radius: 12px;
}

.specials-item section img {
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      text-align: center;
      transition: 0.3s;
      cursor: pointer;
      border-radius: 12px;
      width: 300px;
      height: 300px;
      object-fit: cover;
      display: block;
}

/* TITLE */
.specials-item section h3 {
      margin: 0;
      padding: 15px;
      font-size: 1.1rem;
      background: #fff;
      color: #000;
}

/* TITLE */
.specials-item section h3 {
      margin: 0;
      padding: 15px;
      font-size: 1.1rem;
      background: #fff;
      color: #000;
}

.text-overlay {
      position: absolute;
      top: 50%;
      /* Position from the top */
      left: 50%;
      /* Position from the left */
      transform: translate(-50%, -50%);
      /* Perfectly centers the text */
      color: white;
      /* Example styling */
      font-size: 24px;
      border-radius: 5px;
      opacity: .7;
}

/* HOVER EFFECT */
.specials-item section:hover {
      transform: translateY(-8px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* IMAGE */
.specials-item section img {
      width: 300px;
      height: 300px;
      object-fit: cover;
      display: block;
}

/* TITLE */
.specials-item section h3 {
      margin: 0;
      padding: 15px;
      font-size: 1.1rem;
      background: #fff;
      color: #000;
}


/* ---------------End Repairs Page -------------- */
/*  */

main #landing-main {
      grid-area: content;
}

#landing-main picture img {
      display: block;
      margin: 2% auto 2% auto;
}

#landing-main h4 {
      text-align: center;
}

/* ---- footer with grid----- */
footer {
      grid-area: footer;
      width: 100%;
      min-height: 150px;
      /*---- sub-grid ----*/
      display: grid;
      grid-template-areas:
            "company profile aboutus subscribe"
            "socialh4 socialh4 socialh4 socialh4"
            "socialmedia socialmedia socialmedia socialmedia"
            "copyright copyright copyright copyright"
            "privacypolicy privacypolicy privacypolicy privacypolicy"
            "sitemap sitemap sitemap sitemap";
      grid-template-columns: 1fr 1fr 1fr 2fr;
      grid-template-rows: auto;
}

#company {
      grid-area: company;
}

#profile {
      grid-area: profile;
}

#aboutus {
      grid-area: aboutus;
}

#subscribe {
      grid-area: subscribe;
}


/* ===== FOOTER DESIGN ===== */

footer {
      margin-top: 2%;
      background: linear-gradient(135deg, #0f172a, #111827);
      padding: 3rem 2rem 1rem;
      border-top: 4px solid var(--coreDarkOrange);
      color: #e5e7eb;
}

/* Footer Headings */
.footerhead {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--coreDarkOrange);
      margin: 15px 0 10px 10px;
      letter-spacing: 0.5px;
}

/* Footer Text */

footer ul li,
footer ul li form p,
footer p {
      list-style: none;
      text-decoration: none;
      color: #d1d5db;
      font-size: 1rem;
      margin: 12px 0 0 10px;
      line-height: 1.6;
}

/* Footer Links */
footer ul li a {
      text-decoration: none;
      color: #f3f4f6;
      font-size: 1rem;
      transition: all 0.3s ease;
}

footer ul li a:hover {
      color: var(--coreDarkOrange);
      padding-left: 5px;
}

/* Subscribe Section */
#subscribe {
      display: grid;
      align-items: center;
}

footer ul li form label {
      position: absolute;
      left: -9999px;
}

/* Input */
#subscribe li form input {
      width: 350px;
      height: 50px;
      border-radius: 12px;
      padding: 0 15px;
      border: 2px solid #374151;
      background-color: #1f2937;
      color: white;
      font-size: 1rem;
      transition: 0.3s ease;
}

#subscribe li form input:focus {
      border-color: var(--coreDarkOrange);
      outline: none;
      box-shadow: 0 0 10px rgba(249, 115, 22, 0.4);
}

#subscribe li form input::placeholder {
      color: #9ca3af;
}

/* Subscribe Button */
#subscribe li form button {
      height: 50px;
      border-radius: 12px;
      background: linear-gradient(135deg, #f97316, #ea580c);
      color: white;
      border: none;
      padding: 0 25px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-left: 10px;
}

#subscribe li form button:hover {
      background: linear-gradient(135deg, #ea580c, #c2410c);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
}

/* Social Heading */
#socialh4 {
      grid-area: socialh4;
      text-align: center;
      font-size: 1.3rem;
      font-weight: 500;
      margin: 2% auto;
      color: var(--coreDarkOrange);
}

/* Social Media */
#socialmedia {
      grid-area: socialmedia;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 15px;
      padding: 0;
}

/* Social Icons */
#socialmedia a {
      color: white;
      background: #1f2937;
      padding: 0.8rem 1rem;
      border-radius: 12px;
      font-size: 1rem;
      transition: all 0.3s ease;
      border: 1px solid #374151;
}

#socialmedia a:hover {
      background: var(--coreDarkOrange);
      color: white;
      transform: scale(1.05);
}

/* Copyright */
#copyright {
      grid-area: copyright;
      margin: 2% auto 1%;
      text-align: center;
      font-size: 0.95rem;
      color: #9ca3af;
}

#privacypolicy,
#sitemap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
    text-decoration: none;
}

/* Sitemap */
#sitemap {
      grid-area: sitemap;
}

#sitemap:hover {
      color: var(--coreDarkOrange);
}
#privacy-main {
      grid-area: content;
}

#privacypolicy{
      grid-area:privacypolicy;
}
#privacy-main h3, 
#faq-main h3{
      color:var(--coreDarkPink);
      text-align: center;
}      
#privacy-main p,
#faq-main p{
      margin: 1%;
      color: black;
      text-align: center;
}

#privacy-main h3:hover {
      color: var(--coreDarkOrange);
}
#privacypolicy,
#sitemap {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 10px;
    text-decoration: none;
}
#faq-main {
      grid-area: content;
}
#faq-main h3:hover {
      color: var(--coreDarkOrange);
}
/* --------About us start */

/* ===== MAIN LAYOUT ===== */
#aboutus-main article {
      display: grid;
      grid-template-areas:
            "aboutusimg aboutuscontent";
      grid-template-columns: 2fr 3fr;
      grid-template-rows: auto;
      gap: 30px;
}

#aboutus-img img {
      display: block;
      margin: 5% auto;
      width: 400px;
      height: auto;
      border-radius: 10px;
}

#aboutus-content {
      grid-area: aboutuscontent;
      margin: 5% auto;
      padding: 1%;
}

/* HEADINGS */
#aboutus-main h2 {
      font-size: 28px;
      color: var(--coreDarkPink);
      border-left: 6px solid var(--coreDarkPink);
      padding-left: 12px;
      margin: 20px auto;
}

#aboutus-main h3 {
      color: var(--coreDarkPink);
      margin: 2%;
}

/* PARAGRAPHS */
#aboutus-main p {
      line-height: 1.7;
      margin: 3%;
}

/* LISTS */
#aboutus-main ul {
      padding-left: 20px;
}

#aboutus-main li {
      margin-bottom: 8px;
}

/* ===== CARDS ===== */
.aboutus-card {
      background: linear-gradient(145deg, var(--coreOrangeFade), #fbddc3);
      width: 90%;
      padding: 20px;
      border-radius: 14px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      border-left: 5px solid var(--coreGrey);
      transition: all 0.3s ease;
      margin: 2%;
}

.aboutus-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
      border-left: 5px solid #ff9800;
}

/* ===== HIGHLIGHT BOX ===== */
.aboutus-highlights {
      background: linear-gradient(135deg, var(--corePinkFade), #ffffff);
      width: 90%;
      padding: 20px;
      border-radius: 14px;
      border-left: 6px solid var(--coreGrey);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
      margin: 2%;
}

/* ===== ASIDE ===== */
aside {
      display: flex;
      flex-direction: column;
      gap: 20px;
}

/* ===== TEXT HELPERS ===== */
.textleft {
      color: #333;
}

.textright {
      color: #333;
}

/* ------------------- Cloud page start------------- */
/* HERO SECTION */
.cloud-hero {
      background: linear-gradient(135deg, var(--coreDarkOrange), var(--corePinkFade));
      /* background:linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)); */
      color: white;
      text-align: center;
      margin: 1%;
      padding: 100px 20px;
}

.cloud-hero h1 {
      font-size: 3rem;
      margin-bottom: 10px;
}

.cloud-hero p {
      font-size: 1.2rem;
      max-width: 800px;
      margin: auto;
}


/* MAIN SECTION */
.container {
      width: 90%;
      max-width: 1200px;
      margin: 50px auto;
}

.section-title {
      text-align: center;
      margin-bottom: 40px;
}

.section-title h2 {
      font-size: 2.2rem;
      color: --coreDarkPink;
}

/* CARD LAYOUT */
.clouds-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
}

.cloud-card {
      background: var(--coreOrangeSoft);
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      transition: 0.3s;
}

.cloud-card:hover {
      transform: translateY(-10px);
}

.cloud-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
}

.cloud-content {
      padding: 25px;
      background-color: var(--coreOrangeSoft);
}

.cloud-content h3 {
      color: var(--coreDarkPink);
      margin-bottom: 15px;
      font-size: 1.5rem;
}

.cloud-content p {
      margin-bottom: 20px;
      color: black;
}

.solution-content ul {
      margin-left: 20px;
      margin-bottom: 20px;
}

.btn {
      display: inline-block;
      margin: 10px 10px 10px 0;
      padding: 12px 25px;
      background: var(--coreDarkPink);
      color: white;
      text-decoration: none;
      border-radius: 8px;
      transition: 0.3s;
}

.btn:hover {
      background: var(--corePinkFade);
}

/* WHY CHOOSE US */
.features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 25px;
      text-align: center;
}

.feature-box {
      padding: 20px;
      background: #f4f7fb;
      border-radius: 10px;
}

.feature-box h3 {
      color: var(--coreDarkPink);
      margin-bottom: 10px;
}

/* -------------- Clod Page end -------------- */


/*------------ 404 Page start -------------*/
#page404-main article section h1,
#page404-main article section h2 {
      text-align: center;
      text-decoration: none;
}

#page404-main article section picture img {
      display: block;
      margin: 2% auto 2% auto;
}

/*------------ 404 Page end -----------  */
/* Media */
@media screen and (max-width: 600px) {
      #wrapper {
            grid-template-rows: 100px 60px minmax(600px, auto) minmax(150px, auto);
      }

      header {
            grid-template-areas:
                  "logo blog contactus cart login"
                  "logo label label label label"
                  "logo searchbar searchbar searchbar searchbar";
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            grid-template-rows: 50px 1px 49px;
      }
      h2 {
            font-size: 1.5rem;
      }

      header a {
            display: block;
            /* margin-top: 5px; */
            gap: 0;
      }

      .text-box {
            margin-top: 10px;
      }

      header h1 {
            margin-top: 3%;
      }

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


      header a .logincart {
            width: 60px;
            height: 30px;
            margin-top: 15%;
            align-items: center;
      }

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

      #searchbar {
            grid-area: searchbar;
            height: 40px;
            width: 75%;
            margin-left: 10%;
      }

      label {
            grid-area: label;
            display: block;
            margin: auto 5% auto 5%;
      }

      #searchbar::placeholder {
            font-size: 1rem;
            color: black;
      }

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

      #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%;
      }

      /* Navbar */

      nav ul {
            display: flex;
            flex-wrap: nowrap;
            width: 100%;
            justify-content: space-around;
            gap: 1px;
            padding: 0;
      }

      nav ul li {
            min-width: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
      }

      nav ul li a {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0;
            font-size: 9px;
            text-align: center;
            white-space: nowrap;
            overflow: visible;
            font-weight: 300;
            width: 100%;
      }

      /* HOVER / TAP */
      nav ul li a:hover,
      nav ul li a:focus {
            background: var(--coreDarkOrange);
            color: black;
      }

      #fix-nav .dropdown-menu {
            position: absolute;

            top: 100%;
            left: 0px;

            transform: translateX(-50%);

            display: flex;
            flex-direction: column;

            max-width: 100px;

            background: black;

            opacity: 0;
            visibility: hidden;

            /* z-index: 1000; */

            transition: 0.3s ease;
      }

      .products-grid {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 25px;
            margin: 0 auto;
            width: 100%;
      }

      .products-grid article {
            width: 100%;
            max-width: 320px;
            height: auto;
            text-align: center;
      }

      .products-grid article picture,
      .products-grid article img {
            display: block;
            width: 300px;
            height: 300px;
            margin: 0 auto;
      }

      .products-grid article img {
            object-fit: cover;
            border: 1px solid grey;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }

      .products-grid article h3 {
            margin-top: 12px;
            font-size: 1.2rem;
      }

      .products-grid article p,
      .products-grid article a {
            font-size: 0.95rem;
            margin-top: 6px;
      }

      .slider-container,
      .dslider-container {
            display: none;
      }


      #allcards-main #products-block-new .products-grid-new,
      #allcards-main aside section ul {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;

      }

      #allcards-main #products-block-new .product-card {
            max-width: 100%;
            margin-top: 1%;
      }

      .video-section {
            display: none;
      }

      /* End All-cards */


      .repairs-grid,
      .why-grid,
      .clouds-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 25px;
            margin: auto;
            justify-content: center;
      }

      .repairs-hero h1 {
            font-size: 2.2rem;
      }

      .repairs-title h2 {
            font-size: 2rem;
      }

      #contact-container {
            max-width: 100%;
            display: grid;
            grid-template-areas:
                  "map"
                  "address"
                  "image"
                  "form";
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            gap: 10px;
            margin: 0 auto;
            justify-content: center;
            /* align-items: center; */
      }

      #contact-map iframe {
	      width: 350px;
	      height: 300px; 
            /* padding: 20px;
            border: 2px solid #000;
            margin: 40px; */

      }

      button[type="submit"] {
            margin-bottom: 30px;
      }

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

      footer ul li,
      footer ul li a {
            margin: 2% auto;
      }

      #aboutus-main article {
            display: grid;
            grid-template-areas:
                  "aboutusimg"
                  "aboutuscontent";
            grid-template-columns: 1fr;
            grid-template-rows: auto;
            gap: 10px;
      }

      .specials-item {
            grid-template-columns: 1fr;
      }

      #subscribe form {
            display: flex;
            flex-direction: column;
            gap: 10px;
      }

      #subscribe li form button {
            margin-left: 0;
            align-items: center;

      }

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

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

      .specials-item {
            grid-template-columns: 1fr;
            gap: 10px;
      }



}