html{}
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;600&display=swap');

body{margin:0px;background-color: #202634;color: #fff;overflow-x: hidden;}

#messageContain{width: 100%;padding-top: 1rem;padding-bottom: 1rem;}
#messageContain .contain{width: 50%;margin: auto;text-align: center;}

 /* Wardogs Game Info Table */
.game-info-table {
  width: 100%;
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 16px;
  background: #1b1b1b;
  color: #e6e6e6;
  border: 1px solid #333;

  /* Responsive additions */
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.game-info-table thead th {
  background: #272727;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 15px;
  border-bottom: 2px solid #444;

  /* Responsive additions */
  white-space: normal;
  word-wrap: break-word;
}

.game-info-table tbody td {
  padding: 12px 15px;
  border-bottom: 1px solid #333;

  /* Responsive additions */
  white-space: normal;
  word-wrap: break-word;
}

.game-info-table tbody tr:nth-child(even) {
  background: #222;
}

.game-info-table tbody tr:hover {
  background: #2e2e2e;
  transition: 0.2s ease-in-out;
}

.game-info-table td:first-child {
  font-weight: bold;
  width: 30%;
  color: #f2f2f2;
}

.game-info-table td:last-child {
  width: 70%;
}

/* Remove fixed widths on mobile */
@media (max-width: 600px) {
  .game-info-table td:first-child,
  .game-info-table td:last-child {
    width: auto;
  }
}


/*------------------ Header Start ---------------------*/
header{display:none;}
strong{color:#fff;background-color:#000;padding:0.1rem;}
li{color:#fff;}
.title h1{color:#fff;}

/*--------------------- table start -------------------*/
 .table-wrap {
  max-width: 98%;
  overflow-x: auto;
  margin:auto;
  padding:0.5rem;
}

.table-wrap table {
  width: 100%;
  border-collapse: collapse;
}
.newContent img{
  display:none;
}
.newContent p{
  display:none;
}
.table-wrap th,
.table-wrap td {
  padding: 8px 12px;
  border: 1px solid #ccc;
  text-align: left;
}

.table-wrap thead th {
  background-color: #000;
  font-weight: 600;
}

.table-wrap tbody tr:nth-child(even) {
  background-color: #000;
}
 /* FAQ Section Container */
.faq-section {
  max-width: 850px;
  margin: 40px auto;
  padding: 0 20px;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

/* FAQ Title */
.faq-section h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 25px;
  text-align: center;
  color: #222;
}

/* FAQ Item Wrapper (ID instead of class) */
#faq-item {
  background: #fff;
  border-radius: 10px;
  margin-bottom: 15px;
  border: 1px solid #e3e3e3;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: all 0.25s ease;
  padding:0.5rem;
}

/* FAQ Question */
#faq-item h3 {
  margin: 0;
  padding: 18px 20px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  color: #333;
}

/* Arrow Icon */
#faq-item h3::after {
  content: "▾";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  transition: transform 0.25s ease;
}

/* FAQ Answer */
#faq-item p {
  font-size: 1rem;
  line-height: 1.55;
  color: #555;
  display: none;
}

/* Active State */
#faq-item.active h3::after {
  transform: translateY(-50%) rotate(180deg);
}

#faq-item.active p {
  display: block;
  color:#000;
}

/* Hover effect */
#faq-item:hover {
  border-color: #cfcfcf;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .faq-section h2 {
    font-size: 1.6rem;
  }
  #faq-item h3 {
    font-size: 1rem;
  }
  #faq-item p {
    font-size: 0.95rem;
  }
}


/* Mobile adjustments */
@media (max-width: 600px) {
  .faq-section h2 {
    font-size: 1.6rem;
  }
  .faq-item h3 {
    font-size: 1rem;
  }
  .faq-item p {
    font-size: 0.95rem;
  }
}

/*------------------ table end -------------------*/

#share{
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    display:none;
}
a {
    text-decoration:underline;
    color:#fff;
}

.backlink{padding:0.2rem;margin-top:0.7rem;}
.backlink a {
    color:#1d96c0;
    font-weight: 900;
    text-decoration: underline;
    font-size: 1rem;
    padding-right: 0.2rem;
    padding-left: 0.2rem;
}


.text_content {
    width: 95%;
    margin: auto;
}

.text_content a {
    text-decoration: none;
    color:red;
background-color:#fff;
}
.social{
    display: flex;
    gap: 0.5rem;
}

#phone, #cart{
    display: flex;
    align-items: center;
    margin-left: 1rem;
    height: 25px;
}

#phone svg{fill:#918450; }

#cart {
    background-color: #918450;
    border-radius: 1rem;
    padding: 7px 13px 3px 11px;
    color: #fff;
}

#right-icons{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.fa {
    background-color: #918450;
    border-radius: 1rem;
    padding: 0.5rem;
    color: #fff;
}    

.logoSection {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

/*------------------------------- navbar start ------------------------*/
 #navBar {
    background-color: #262f43;
    width: 100%;
    max-width: 250px;
    height: 100%;
    left: 0;
    position: fixed;
    z-index: 999999;
    top: 0;
}

#navBar #navToggle {
    font-size: 2rem;
    padding: 5px;
    position: absolute;
    right: 0px;
    top: 10%;
    transform: translate(50%, -50%);
    display: none;
}
#navBar #navToggle img{
    height: 30px;
    transform: rotate(180deg);
}
#navBarMobile {
    height: 70px;
    background: #2d3342;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 99999;
    display: none;
}
#mobilePadding {
    display: flex;
    height: 100%;
}
#navBarMobile #navToggle {
    aspect-ratio: 1 / 1;
    margin: 10px;
}
#navBarMobile #navToggle img{
    height: 30px;
}
@media (max-width: 1400px) {
#navBar {
left: -500px;
}
#navBar #navToggle {
display: flex;
}
#navBarMobile {
display: block;
}
}
#navBar ul {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    font-size: 1.2rem;
    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    flex-direction: column;
}
#navBar a {
    text-decoration: none;
    color: #fff;
    transition: color 0.3s ease, border-bottom 0.3s ease;
}

#navBar li {
    font-weight: 600;
    padding: 12px 20px;
    color: #fff;
    background-color: #262f43;
}

/*------------ main content ------------------------*/
#mainContent{margin-top:0rem;overflow: hidden;}
.wrapper{background-color:#202634;}

.pillar-section{}
.pillar-section h1{color:#fff;}

.heroWrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.heroImages {
  display: flex;
  width: 100%;
}

.heroImages img {
  width: 100%;
  
  object-fit: cover; /* makes them behave like one image */
}

.heroOverlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
  pointer-events: none;
  z-index: 5; /* below arrows, above images */
}

.sliderArrow {
  display:none;
}

.floatingWrapper{
    height: 100%;
    max-height: 50vh;
    overflow: hidden;
    aspect-ratio: 9 / 16;
    position: relative;
    background: black;
    margin: auto;
}
.heroTitle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #918450;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  padding: 1rem 2.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

.heroTitle:hover {
    background-color:#FFD29D;
    box-shadow: 0 10px 24px rgba(0,0,0,0.25);
    transform: translate(-50%, -52%);
}

#background_text {
    background: #918450; /* soft neutral overlay */
    padding: 3rem 0;
    width: 100%;
    margin: 0rem auto;
    backdrop-filter: blur(4px); /* subtle premium blur */
    border-top:solid #FFD29D 0.1rem;
    border-bottom:solid #FFD29D 0.1rem;
}


#text {
    width: 85%;
    margin: 2rem auto;
    font-family: "Quicksand", sans-serif !important;
    color: #fff;
    padding: 2rem 0;
    text-align: center;
}

#text h3 {
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    color: #fff;
    text-align: left;
}

#text p {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.6;
    color: #fff;
    text-align: left;
}

/* Services */
.services {
    padding: 1rem 2rem;
    text-align: center;
}

.serviceGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
    width: 65%;
    margin: auto;
}
.heroImages a {
    width: 33.333%;
    object-fit: cover;
}
.heroImages img {
    width: 100%;
    object-fit: cover;
    height: 100%;
}
.serviceCard {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,1);
    border-radius: 3px;
    border-bottom: solid #FFD29D 0.3rem;
    border-top: solid #FFD29D 0.3rem;
}

.serviceCard:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0);
    border-radius: 3px;
    border-bottom: solid #FFD29D 0.3rem;
    border-top: solid #FFD29D 0.3rem;
}

.serviceCard img {
    width: 100%;
}


.serviceCard h3 {color: #000;}
.serviceCard p {color: #000;}

/*----------------------- gallery ---------------------------------*/
#gallery {
  width: 75%;
  margin: auto;
}

.galleryTitle {
  text-align: center;
}

#gallery .section {
  display: flex;
  justify-content: space-between;
  gap: 2rem;        /* spacing between items */
  width: 100%;
}

#gallery .section > div {
  flex: 1;          /* each item takes equal space */
  padding: 1rem;
}

#gallery .section img {
  width: 100%;
  display: block;
  border-radius: 8px;
}

#gallery .section p {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 600;
  color: #2a2a2a;
  margin-top: 0.7rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid #918450; /* gold accent */
  display: inline-block;
}

.footer{background-color: #ace0df;}

/* Grid layout */
#store_content {
  display: grid;
  gap: 25px;
}

#store_content .section {
  display: contents; /* allows .product to behave as grid items */
}

/* Product card */
.product {
  background: #fff;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  text-align: center;
}

.product img {
  width: 100%;
  margin-bottom: 10px;
}

.product-title {
  font-size: 1.1rem;
  margin: 8px 0;
  font-weight: 600;
}

.product-desc {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 10px;
}

.product-price {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 12px;
}

/* Add to cart button */
.add-cart {
  background: #918450;
  color: #fff;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: 0.2s;
}

.add-cart:hover {
  background: #c2185b;
}

#footer {
    background: #918450;
    padding: 40px 20px;
    color: #fff;
    margin-top: 40px;
}

.footerContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: auto;
}

.footerContainer div {
    flex: 1 1 200px;
    margin: 10px;
}

#footer h3 {
    margin-bottom: 10px;
    font-weight: bold;
}

#footer ul {
    list-style: none;
    padding: 0;
}

#footer ul li {
    margin: 6px 0;
}

#footer a {
    text-decoration: none;
    color: #fff;
}

.footerSocial i {
    font-size: 22px;
    margin-right: 10px;
    cursor: pointer;
}

.footerBottom {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    opacity: 0.8;
}
/* Page container */
#contact-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: Arial, sans-serif;
}

/* Page title */
#contact-page h1 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 10px;
}

#contact-page .intro {
    text-align: center;
    font-size: 1rem;
    color: #555;
    margin-bottom: 40px;
}

/* Wrapper for form + info */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* Contact form */
.contact-form h2,
.contact-info h2 {
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.contact-form form {
    display: flex;
    flex-direction: column;
}

.contact-form label {
    margin-bottom: 5px;
    font-weight: bold;
}

.contact-form input,
.contact-form textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 1rem;
}

/* Send button */
.send-btn {
    background: #918450;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.2s;
}

.send-btn:hover {
    background:#FFD29D;
}

/* Contact info section */
.contact-info p {
    margin-bottom: 15px;
    line-height: 1.5;
}

.contact-info a {
    color: #e91e63;
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

/* Responsive layout */
@media (max-width: 900px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
    }
}


/*media queries start */

/* Desktop: 3 columns */
@media (min-width: 1024px) {
  #store_content {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet & Mobile: 2 columns */
@media (max-width: 1023px) {
  #store_content {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
    
    #phone{
        display:none;
        align-items: center;
        margin-left: 1rem;
        height: 20px;
                        }

    #share {
    width: 90%;
    padding-bottom: 1rem;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;display:none;
                        }
}
    /* MOBILE SLIDER */
@media (max-width: 768px) {
  .heroWrapper {
    position: relative;
  }

        .heroImages {
            display: flex;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            gap: 0;
            scroll-behavior: smooth;
        }

  .heroImages img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .heroImages::-webkit-scrollbar {
    display: none;
  }

  /* ARROWS */
  .sliderArrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.4);
    color: white;
    border: none;
    padding: 12px;
    font-size: 22px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
  }

  .leftArrow {
    left: 10px;
  }

  .rightArrow {
    right: 10px;
  }
  .sliderArrow {
    display: block;   /* ← THIS makes arrows appear only on mobile */
  }
  #gallery {
    width: 95%;
    margin: auto;
    }
  #gallery .section {
    display: flex;
    justify-content: space-between;
    gap: 0rem;
    width: 100%;
    }
  #gallery .section > div {
    flex: 1;
    padding: 0.2rem; 
    }

    #gallery .section img {
    width: 100%;
    display: block;
    border-radius: 0px;
    }

    #text {
    width: 90%;
    margin: auto;
    font-family: "quicksand", sans-serif !important;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    color: #565654;
    padding-top: 1rem;
    padding-bottom: 1rem;
    }
        .heroTitle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #918450;
            color: #fff;
            font-size: 1.2rem;
            font-weight: 700;
            padding: 1rem 2.5rem;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
            transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
        z-index: 999;
        }

}

@media (max-width: 768px) {
.footerContainer div {
    flex: 0 0 0px; 
    margin: 0px; 
}
  #footer {
    padding: 30px 20px;
    text-align: center;
  }

  .footerContainer {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 80%;
  }

  /* About Us stays full width */
  .footerAbout {
    width: 100%;
  }

  /* Quick Links + Contact side-by-side */
  .footerMiddle {
    
  }

  .footerMiddle > div {
    width: 100%;
    text-align: center;
  }

  .footerLinks ul {
    padding: 0;
  }

  .footerLinks ul li {
    margin: 6px 0;
  }

  /* Social full width */
  .footerSocial {
    
  }

  .footerSocial i {
    font-size: 24px;
  }

  .footerBottom {
    margin-top: 10px;
    font-size: 14px;
    opacity: 0.8;
  }
}
/* ============================
   NEW / CHANGED SELECTORS
   ============================ */

/* --- New: headContent --- */
#headContent {
    margin-top: 0rem;
    overflow: hidden;
}

/* --- Changed: mainContent --- */
#mainContent {
    margin-top: 0rem;
    overflow: hidden;
    max-width: 800px;
    justify-self: center;
    padding: 10px;
    display: flex;
    gap: 60px;
    flex-direction: column;
    margin-right: 0rem;
    width: 100%;
}

/* --- Changed: mainContent h2 --- */
#mainContent h2 {
    color: black;
    text-align: left;
    margin: 0;
    padding: 0.5rem 0px;
}
#mainContent p {
    font-size: 13px;
    color: #2b2b2b;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-y: hidden;
    text-overflow: ellipsis;
}
/* --- Changed: mainContent img --- */
#mainContent img {
    width: 100%;
    aspect-ratio: 286 / 139;
    object-fit: cover;
    border-radius: 0.5rem;
}

/* --- Changed: post --- */
.post {
    display: grid;
    grid-gap: 10px;
    grid-auto-flow: column;
}

/* --- New: text (different border + radius) --- */
.text {
    width: 100%;
    padding-left: 10px;
}
#mainContent .text h2{color:#fff;}
#mainContent .text p{color:#fff;}

/* --- New: card-element full block --- */
#card-element {
    background: #f9fafc;
    border: 1px solid #e3e8f1;
    border-radius: 12px;
    padding: 16px 18px;
}

#card-element:hover {
    border-color: #4a90e2;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

#card-element.StripeElement--focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74,144,226,0.25);
}

#card-element.StripeElement--invalid {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231,76,60,0.25);
}

.StripeElement {
    font-size: 15px;
    letter-spacing: 0.3px;
}

/* --- New: payment modal system --- */
.payment-head {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 9999999;
}

.payment-box {
    background: #ffffff;
    border: 1px solid #e3e8f1;
    border-radius: 16px;
    padding: 22px 24px;
    margin: 20px 0;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    transition: all 0.25s ease;
    height: 100%;
}

.payment-box:hover {
    border-color: #4a90e2;
    box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}

.payment-box label {
    display: block;
    font-size: 3rem;
    font-weight: 600;
    color: #2d3648;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
    font-family: "Inter", "Segoe UI", sans-serif;
    text-align: center;
}

/* --- New: cart dropdown --- */
#cartDropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 50px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    width: 250px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    gap: 20px;
    flex-direction: column;
}

/* --- New: product panel system --- */
.product-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    justify-content: center;
    overflow-y: auto;
    padding: 25vh 0;
    z-index: 9999999;
}

.product-panel.hidden {
    display: none;
}

.panel-content-store {
    background: #fff;
    width: 90%;
    max-width: 1300px;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    font-family: Arial, sans-serif;
}

.close-panel {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #000;
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
}

/* --- New: product page layout --- */
.page {
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.gallery, .info, .buy-box {
    background:#202634;
    padding: 0px;
    border-radius: 8px;
}

.gallery {
    flex: 1;
    min-width: 300px;
}

.main-img {
    width: 100%;
    object-fit: cover;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.thumbs {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.thumbs img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
}

.info {
    flex: 1.2;
    min-width: 300px;
}

.info h1 {
    margin: 0;
    font-size: 26px;
}

#container_center {
    max-width: 1000px;
    justify-self: center;
    padding: 0rem 0rem;
    width: 50%;
    background-color:#202634;
    padding:1rem;
}

.buy-box {
    width: 280px;
    min-width: 260px;
    height: fit-content;
    border: 1px solid #ddd;
}

.buy-box button {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    border: none;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
}

.add-cart {
    background: #ffd814;
}

.buy-now {
    background: #ffa41c;
}
.heroImages a {
    width: 33.333%;
    object-fit: cover;
    height: 100%;
}
.details {
    max-width: 1200px;
    margin: 20px auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
}

/* --- Changed: store grid desktop --- */
@media (min-width: 1024px) {
    #store_content {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* --- Changed: store grid tablet/mobile --- */
@media (max-width: 1023px) {
    #store_content {
        grid-template-columns: repeat(1, 1fr);
        padding: 0 20px;
    }
}

/* --- New mobile overrides for post, text, panel, etc. --- */
@media (max-width: 768px) {

    .post {
        flex-direction: column;
        padding: 20px;
        display: flex;
    }

    .text {
        width: 100%;
        border-radius: 0px 0px 1rem 1rem;
        padding: 0px;
    }

    #mainContent {
        gap: 0px;
        padding: 0px;
        margin-right: 0;
    }

    #mainContent h2 {
        text-align: left;
        font-size: 1rem;
        padding: 0;
    }
    #mainContent p {
        display: none;
    }
    #mainContent img {
        width: 100%;
    }

    .panel-content-store {
        height: 100%;
        width: 100%;
    }

    .product-panel {
        background: rgb(0 0 0);
        padding: 0;
        max-height: 110vh;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* --- New footer mobile overrides --- */
@media (max-width: 768px) {
    .footerContainer div {
        flex: 0 0 0px;
        margin: 0px;
    }

    .footerContainer {
        flex-direction: column;
        gap: 2rem;
        width: 80%;
    }
    .heroImages a {
            width: 100%;
            flex-shrink: 0;
            scroll-snap-align: center;
            object-fit: cover;
        }
}
.social {
    padding: 0.8rem 1rem;   /* tighter + balanced */
    display: flex;
    gap: 14px;              /* clean spacing between icons */
    align-items: center;    /* keeps icons vertically aligned */
    position: relative;
    z-index: 9999;
}

.social i {
    color: #fff;
    font-size: 1.2rem;      /* subtle, not oversized */
    opacity: 0.9;           /* softer look */
    transition: opacity 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.social i:hover {
    opacity: 1;
    transform: translateY(-1px); /* tiny lift, classy */
}


.logoSection {
    display: flex;
    justify-content: center; /* centers horizontally */
    align-items: center;     /* centers vertically if needed */
    width: 100%;
}

.logo {
    text-align: center; /* optional: keeps the image centered inside */
}

#logoImage {
    display: block;
    margin: 0 auto; /* ensures the image itself centers */
}

.dotted_line {
    border: none;
    border-top: 2px dotted #ccc; /* dotted style */
    margin: 1.5rem 0;            /* spacing above/below */
    width: 100%;                 /* full width */
}

/* anchor section */
#anchors {
    width: 70%;
    margin: 1rem 0;
    margin: auto;
}

.anchor_contain {
    display: flex;
    justify-content: flex-start;   /* align left */
    align-items: center;
    gap: 10px;                      /* spacing between items */
    width: fit-content;
    margin-left: 0;                 /* remove centering */
    font-family: Arial, sans-serif;
}

.anchor_contain h4, 
.anchor_contain p {
    margin: 0;
    font-size: 1.1rem;
    color: #444;
}

.anchor_contain a {
    text-decoration: none;
    color: #2de1fc;                 /* matches your social bar */
    transition: color 0.2s ease;
}

.anchor_contain a:hover {
    color: #1aaac4;
}

.spacer p {
    color: #999;                    /* subtle separator */
    font-weight: bold;
}

/* wrapper for main content start */
#wrapper{width: 100%;background-color:#000;margin-top: 4rem;}

#wrapper h2{

    font-weight: 900;
    color: #fff;
    text-decoration: none;
    border-bottom: solid #1d96c0 0.2rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    font-size: 1.85rem;

}

#wrapper p{width: 100%;
    margin: auto;
    color: #fff;
    text-align: justify;
    font-weight: normal;
    line-height: 1.7;
    font-size: 1.062rem;}

   .faq-item p{color:#000;}

@media(min-width:1200px){#wrapper p{font-size:1.45rem;}li{font-size:1.4rem;}}

#wrapper span{width:90%;margin:auto;}
/* Sharing Section */
.sharing {
    display: flex;
    align-items: center;
    font-family: Arial, sans-serif;
}

.sharing i {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 5px;
    font-size: 1rem;
    cursor: pointer;
    color: #fff;
    transition: background 0.25s ease, transform 0.2s ease;
    border-radius: 0px;
    margin: 0.1rem;
}

/* Individual platform colors */
.sharing .fa-facebook {
    background: #1877f2;
}

.sharing .fa-instagram {
    background: #e1306c;
}

.sharing .fa-twitter {
    background: #000;             /* X branding */
}

/* Hover effects */
.sharing i:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* main post content start */

.postImg_1 {
    width: 100%;
    display: flex;
    justify-content: center;   /* centers the image horizontally */
    margin: 2rem 0;            /* spacing above/below */
}

.postImg_1 img {
    max-width: 100%;           /* responsive */
    height: auto;
    border-radius: 8px;        /* optional: makes it look nicer */
    max-height:400px;
}



.text_content p{font-size:1.1rem;}
.wrapImage {
    float: left;                 /* pushes image left, text wraps around */
    margin: 0 20px 20px 0;       /* spacing: right + bottom */
    max-width: 40%;              /* keeps image from being too large */
}

.wrapImage img {
    width: 100%;                 /* responsive inside the container */
    height: auto;
    border-radius: 8px;          /* optional: looks nicer */
}


/* you may also like section */
#may_also_like {

    border: 1px dotted #ccc;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 6px;
    background: #202634;
}

.may_title {
    margin: 0 0 1rem 0;
    font-size: 1.3rem;
    font-weight: bold;
    color: #444;
}

/* container for the two items */
.mayImg_contain {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

/* each recommended item */
.may_item {
    width: 48%;
    text-align: center;
}

/* image styling */
.may_item img {
    width: 100%;
    border-radius: 6px;
    transition: transform 0.2s ease;
    aspect-ratio: 286 / 139;
    object-fit: cover;
}

.may_item img:hover {
    transform: scale(1.03);
}

/* text under image */
.may_item h4 {
    margin-top: 0.5rem;
    font-size: 1rem;
    color: #fff;
}

/* ===========================
   MOBILE (max-width: 600px)
   =========================== */
@media (max-width: 600px) {
    .title{width: 95%;margin: auto;}
    #anchors{width: 90%;}
    .wrapImage {float: left;margin: 0 20px 20px 0;max-width: 55%;}
    .sharing{width: 98%;margin: auto;}
    .sharing i{font-size: 0.85rem;}

    #may_also_like {
    border: 1px dotted #ccc;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 6px;
    background: #202634;
    }

}

/* ===========================
   New
   =========================== */
.newContent {
    gap: 10px;
    display: flex;
    margin: 0.5rem;
    flex-direction: row;
    background: #ffffff;
    padding: 10px;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-width: 1000px;
    justify-self: center;
}
.newContent img {
    width: 20%;
    align-self: center;
    height: 10%;
    aspect-ratio: 500 / 500;
    object-fit: cover;
    border-radius: 0.5rem;
}
.newContent h1 {
    font-weight: 900;
    color: black;
    font-size: 3rem;
    margin: 0px;
}
.newContainer p {
    color: #323131;
    font-weight: 600;
    margin-right: 10%;
}
@media (max-width: 768px) {
.newContent {
    flex-direction: column;
}
.newContent img {
    width: 50%;
}
.newContent h1 {
    text-align: center;
    font-size: 1.5rem;
}
.newContainer p {
    display: none;
}
.card-content h3 {
    text-align: left;
    font-size: 1rem;
    padding: 0;
    margin: 0;
}
}
  .page {
        max-width: 1200px;
        margin: 0 auto;
        padding: 24px;
    }

    .segment h1 {
        font-size: 32px;
        font-weight: 700;
        margin-bottom: 24px;
    }

    /* --- TOP CAROUSEL --- */
.carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 300px;
    gap: 2px;
    align-items: flex-start;
    overflow-y: hidden;
    width: 100%;}

/* ⭐ FIRST CAROUSEL ONLY */
#pillarContent .pillar-section:first-of-type .carousel a {
    width:100%
    }

.carousel-item {
    border-radius: 8px;
    cursor: pointer;
    margin: 5px;
    position: relative;
overflow:hidden;


}
.pillar-section:first-of-type .carousel img {
    height: 390px;
}

.pillar-section:first-of-type .carousel h3 {
  /* styles */
    background-color: rgb(0,0,0, 0.7); /* black @ 50% opacity */
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0;
    margin: 0;
font-size:20px;
padding:0.4rem;
text-align:left;}

    .carousel img {
        width: 100%;
        object-fit: cover;
        background: #222;
        aspect-ratio: 210 / 139;
        border-radius:0.4rem;
    }

    .carousel-item h3 {
        font-size: 20px;
    padding-bottom: 12px;
    padding-left: 12px;
    line-height: 1.3;
    font-weight: 600;
    margin: -0.1rem;
    color: #fff;
    }

@media(max-width:600px){
.pillar-section:first-of-type .carousel {
    display: grid;
    grid-template-columns: none;
    gap: 20px;
    margin-bottom: 40px;}


    .card {
        display: flex;
        gap: 16px;
        padding: 16px;
        border-radius: 8px;
    }

    .card img {
        height: 100px;
        object-fit: cover;
        background: #222;
        aspect-ratio: 286 / 139;
    }

    .card-content h3 {
        margin: 0 0 6px;
        font-size: 18px;
        font-weight: 600;
    }
}
.meta {
    font-size: 13px;
    color: #fff;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-y: hidden;
    text-overflow: ellipsis;
}
    .list a{text-decoration:none;}

    .tags {
        font-size: 13px;
        color: #999;
    }
    #pillarContent {
    overflow: hidden;
    max-width: 900px;
    width: 100%;
    justify-self: center;
    display: flex;
    gap: 10px;
    flex-direction: column;
}

@media (max-width: 768px) {
.card {
    padding: 0px 16px;
}
.meta {
    display: none;
}
.list{
    padding: 16px 0px;
}
}
    .yt-holder-0 {
      width: 100%;
      overflow: hidden;
      aspect-ratio: 16/9;
      position: relative;
    }
    .video_4tjl4l6n6{
    height: 100%;
    max-height: 50vh;
    overflow: hidden;
    aspect-ratio: 9 / 16;
    position: relative;
    background: black;
    margin: auto;
    }
    .video_4tjl4l6n6 iframe {
    width: 100%;
    height: 300%;
    margin-top: -178%;
    pointer-events: none;
}
.playOverlay {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
}
    .yt-holder-0 iframe {
      width: 300%;
      height: 100%;
      margin-left: -100%;
      pointer-events: none;
    }
    .yt-holder-1 {
      height: 100%;
    overflow: hidden;
    aspect-ratio: 9 / 16;
    position: relative;
    }
    .yt-holder-1 iframe {
          width: 100%;
    height: 300%;
    margin-top: -177%;
    pointer-events: none;
    }
    .yt-slide .yt-holder-1 {
    height: 80vh;
}
    /* Overlay */
    .controls {
      position: absolute;
      bottom: 20px;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 10px 20px;
      background: rgba(0,0,0,0.4);
      pointer-events: auto;
      cursor: pointer; /* overlay clickable */
    }

    .btn {
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      user-select: none;
    }

.progress {
    height: 6px;
    background: #555;
    border-radius: 3px;
    cursor: pointer;
    position: absolute;
    width: 100%;
    bottom: 10px;
}
.soundBtn {
    padding: 7px 8px;
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 1.3rem;
}
.playBtn {
    padding: 5px 10px;
    font-size: 1.2rem;
    display: none;
    position: absolute;
    bottom: 0px;
}

    .progress-fill {
      height: 100%;
      background: #f00;
      width: 0%;
      border-radius: 3px;
      pointer-events: none;
    }
    .flex-row {
    display: grid;
    gap: 10px;
    position: relative;
    width: 100%;
    margin:auto;
    cursor: pointer;
    grid-auto-flow: column;
    object-fit: contain;
}

.left-large {
  width: 95%;
    margin: 10px 0;
    cursor: pointer;
    object-fit: contain;
    align-content: center;
    margin: auto;
}
.full-width {
    width: 100%;
    height: 100%;
    margin: 10px 0;
    cursor: pointer;
    aspect-ratio: 226 / 127;
    object-fit: contain;
    display: flex;
    justify-content: center;
}
.grid-4 {
  display: grid;
  gap: 10px;
  position: relative;
  grid-auto-flow: column;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.grid-img {
  width: 100%;
  margin: 10px 0;
  cursor: pointer;
  aspect-ratio: 115/117;
  object-fit: cover;
}

/* -----------------------------
   Modal
------------------------------ */

.modal {
  display: block;
  position: fixed;
  z-index: 99999999999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

.modal-content {
  position: relative;
  background-color: none;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover {
  color: #999;
  cursor: pointer;
}

.mySlides {
    background: black;
    justify-content: center;
}
.slide-img {
    height: 60vh;
    align-self: center;
}
.cursor {
  cursor: pointer;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  background: #00000026;
}

.next {
  right: 0;
}

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

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
      aspect-ratio: 500 / 500;
    object-fit: cover;
}

.active,
.demo:hover {
  opacity: 1;
}

.thumb-wrapper {
  display: none;
  flex-wrap: wrap;
}

.thumb {
  width: 20%;
  padding: 4px;
}

/* Toggle button */

.toggle-view {
    position: absolute;
    top: 10px;
    left: 20px;
    z-index: 10;
    background: #ffffff;
    border: none;
    padding: 0px 12px;
    font-size: 2rem;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 700;
}

.toggle-view:hover {
  background: #ddd;
}

/* Fullscreen thumbnail mode */
.thumb-fullscreen {
    display: grid;
    width: 90%;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    grid-auto-flow: row;
    border: 1rem solid white;
    background: white;
    justify-self: center;
}

.thumb-fullscreen .thumb {
  width: 100%;
  padding: 0px;
}

@media (max-width: 900px) {
    #container_center {
    max-width: 1000px;
    justify-self: center;
    padding: 0rem 0rem;
    width: 70%;
    background-color: #202634;
    
}

   .flex-row {
    grid-auto-flow: row;
    gap: 0px;
  }
  .flex-row img{
    height: 100%;
    gap: 0px;
  }
  .left-large {
    width: 100%;
    margin: auto;
    cursor: pointer;
    object-fit: contain;
  }
  .grid-4 {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 300px;
    gap: 24px;
    align-items: flex-start;
    overflow-y: hidden;
    width: 100%;
    grid-template-columns: unset;
    grid-template-rows: unset;
  }
}
.in-view {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 0;
    height: 40vh;
}
#big .floatingWrapper{
    aspect-ratio: 1920 / 1080;
    width: 100%;
}
#big {
    aspect-ratio: 1920 / 1080;
    width: 100%;
}
#big iframe{
    width: 300%;
    height: 100%;
    margin-top: 0%;
    margin-left: -100%;
    pointer-events: none;
}

@media (max-width: 600px) {
.slide-img {
    height: 34vh;
    align-self: center;
}
#container_center {
    max-width: 1000px;
    justify-self: center;
    padding: 0rem 0rem;
    width: 100%;
    background-color:#202634;
    margin:auto;
}
.modal-content {
    position: relative;
    background-color: none;
    margin: auto;
    padding: 0;
    width: 90%;
    max-width: 1200px;
    top: 15%;
}
.grid-Off {
    display: none;
}

.text_content {
    width: 95%;
    margin: auto;
}

.text_content a {
    text-decoration: none;
    color:red;
background-color:#fff;
font-size:18px;
}

}
   .card {
        display: flex;
        gap: 16px;
        padding: 16px;
        border-radius: 8px;
    }

    .card img {
        height: 100px;
        object-fit: cover;
        background: #222;
        aspect-ratio: 286 / 139;
    }

    .card-content h3 {
        margin: 0 0 6px;
        font-size: 18px;
        font-weight: 600;
    }

#pillarContent h2 {
  border-bottom: none;
}
#mainContent h2 {
  border-bottom: none;
}
.Main_Title {
    display: none;
}
.newContainer {
    display: none;
}
.wrapper h1 {
    margin-top: 0px;
}
.mainPoints {
    background: #092a49;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 10px;
    display: grid;
    grid-auto-flow: column;
    align-items: start;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25), 0 12px 24px rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .08);
}

 rating {
    background: #0452f4;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    width: 150px;
    position: relative;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    justify-self: center;
    rotate: 90deg;
}

score {
    font-weight: 900;
    rotate: -90deg;
    font-size: 4rem;
}

#wrapper .mainPoints p {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 10px;
}
.mainPoints b{
    font-size: 2rem;
    border: 2px solid #00bdff;
    background: #00bdff;
    color: white;
    padding: 1rem 2rem;
    clip-path: polygon(1rem 0, calc(100% - 1rem) 0, 100% 1rem, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 1rem 100%, 0 calc(100% - 1rem), 0 1rem);
}
ht {
    color: #00bdff;
    font-weight: 900;
}
info
{
    font-size: 5rem;
    margin: -2.5rem 0px;
    font-family: ui-sans-serif;
    color: #03bdff;
}
.lightbox {
    margin: 20px 0px;
}