/* ===== RESET & BASE STYLES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

:root {
    --primary: #D4A017;
    /* Brand blue (adjustable) */
    --secondary: #2A9D8F;
    /* Accent yellow/orange */
    --dark: #333333;
    --light: #f8fafc;
    --gray: #64748b;
    --success: #10b981;
    --hover: #52298b;
    --error: #ef4444;
    /* copy */
    --wheat-light: #f5deb3;
    --wheat: #e9c46a;
    --wheat-dark: #d4a017;
    --green-light: #8EB69B;
    --green: #2a9d8f;
    --green-dark: #264653;
    --white: #ffffff;
    --off-white: #f8f9fa;
}

body {
    background: var(--off-white);
    color: var(--dark);
    line-height: 1.6;
    overflow-x: hidden;
}

/* ===== CONTAINER QUERIES ===== */
/* Add these container definitions near the top of your CSS */
.container,
.card,
.grid-four-point,
.testimonial,
.problem-solution,
.limited-offer-inner,
.product,
.query,
.contact-left-inner,
.about,
.certifications,
.visit-us {
    container-type: inline-size;
    container-name: var(--container-name, component);
}

.container {
    width: 90%;
    max-width: 1230px;
    margin: 0 auto;
    padding: clamp(1rem, 3cqi, 2rem) clamp(0.5rem, 2cqi, 1rem);
}

section {
    padding: clamp(1rem, 3cqi, 2rem) 0;
}

p {
    margin-bottom: 0.5rem;
    color: var(--gray);
}

html {
    font-size: 16px;
}

p {
    font-size: 1em;
    padding-bottom: 0.25rem;
    color: var(--dark);
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    line-height: 1.15;
    padding-bottom: 0.75rem;
}

/* Update your typography */
h1,
.text-size-h1 {
    font-size: clamp(2.5rem, 5cqi, 3.75rem);
}

h2,
.text-size-h2 {
    font-size: clamp(1.75rem, 4cqi, 2.25rem);
}

h3,
.text-size-h3 {
    font-size: clamp(1.25rem, 3cqi, 1.73rem);
}

h4,
.text-size-h4 {
    font-size: clamp(1.1rem, 2.5cqi, 1.44rem);
}

p {
    font-size: clamp(1rem, 2cqi, 1.1rem);
}

h5,
.text-size-h5 {
    font-size: 1.2rem;
}

.text-caption {
    font-size: 0.83rem;
}

small,
.text-small {
    font-size: 0.69rem;
}

h1>span,
h2>span,
h3>span,
h4>span,
h5>span,
h6>span {
    color: var(--primary);
}

/* List style */
ul li {
    list-style: none;
    color: var(--dark);
    padding-bottom: 0.35rem;
    display: flex;
    gap: 0.25rem;
}

li a {
  text-decoration: none; /* Removes default underline */
  position: relative;
}

li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0.15rem;
  background: var(--green);
  transition: width 0.3s ease; /* Smooth animation */
  border-radius: 1rem;
}

li a:hover::after {
  width: 100%; /* Expands underline on hover */
}


/* a (links) */
a {
    text-decoration: none;
    color: var(--dark);
}

a span {
    color: var(--dark);
    font-weight: 700;
}

.single-cta>a svg {
    fill: var(--dark);
    stroke: none;
}

/* Span */
span {
    color: var(--primary);
}

.rounded,
.quantity,
.certificate img {
    background-color: #dcfce7;
    color: #166534;
    border-radius: 3rem;
}

.rounded {
    padding: 0.5rem 1.25rem 0.5rem 1.25rem;
}

.quantity {
    padding: 0.25rem 0.75rem 0.25rem 0.75rem;
}

/* Input style */
input,
textarea {
    padding: clamp(0.5rem, 2cqi, 0.75rem) clamp(0.75rem, 2cqi, 1rem);
    font-size: clamp(0.9rem, 2cqi, 1rem);
    border: 0.01rem solid #ddd;
    border-radius: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
    transition: border-color 0.3s ease;
}

select {
    padding: clamp(0.25rem, 1.5cqi, 0.5rem) clamp(0.5rem, 1.5cqi, 0.5rem);
    font-size: clamp(0.9rem, 2cqi, 1rem);
    border: 0.01rem solid #ddd;
    border-radius: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
    transition: border-color 0.3s ease;
}

select, ::picker(select) {
    appearance: base-select;
}

::picker(select) {
    padding: clamp(0.25rem, 1.5cqi, 0.5rem) clamp(0.5rem, 1.5cqi, 0.5rem);
    border: 0.01rem solid #ddd;
    border-radius: 0.5rem;
    margin-top: 0.25rem;
    background-color: var(--off-white);
}

selectedcontent, option {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

option {
    padding: 0.25rem;
    margin-bottom: 0.25rem;
    border-radius: 0.25rem;
}

option:hover {
    background: #52298b;
    color: #D4A017;
}

option::checkmark {
    display: none;
}

option:checked {
    background: hsl(200 80% 80%);
}

.point {
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 0.25rem 0 0 0.25rem;
}

selectedcontent p {
    display: none;
}


/* Style the dropdown arrow */
    /*select::-ms-expand {
      display: none; /* For IE */
    /*}*/

    /* Optional: Add a custom arrow using pseudo-element */
    /*.product-select {
      position: relative;
      display: inline-block;
    }

    .product-select::after {
      content: '▼';
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      pointer-events: none;
      color: #4CAF50;
    } */

/* Inputs */
label {
    display: flex;
    align-items: center;
    width: auto;
    margin-bottom: 1rem;
}

input[type="radio"],
input[type="checkbox"] {
    width: auto;
    margin: 0 0.5rem 0 0;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--green);
    outline: none;
    box-shadow: 0 0 0 2px rgba(42, 157, 143, 0.2);
}

/* Buttons */
.btn,
.btn-2 {
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    gap: 0.25rem;
}

.btn {
    background: var(--green);
    color: white;
    padding: clamp(0.5rem, 2cqi, 0.75rem) clamp(1rem, 3cqi, 1.5rem);
    font-size: clamp(0.9rem, 2cqi, 1rem);
    border-radius: 2rem;
}

.btn:hover {
    background: var(--green-dark);
    transform: translateY(-2px);
}

.btn-2 {
    color: var(--primary);
}

.btn-2:hover {
    text-decoration: underline;
}

.pulse-btn,
.offer-pluse {
    animation: pulse 2s infinite;
}

/* Common */
.dot-bg {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23e9c46a' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* Grid Container queries */
/*@container component (max-width: 500px) {
    .grid-two {
        grid-template-columns: 1fr;
    }

    .grid-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}*/


.grid {
    display: grid;
    /*grid-template-columns: repeat(3, minmax(0, 1fr));*/
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
}

.grid-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 2rem;
}

.card {
    padding: clamp(1rem, 3cqi, 2rem);
    border-radius: 0.75rem;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    background-color: #f8f9fa;
    border-color: #e5e7eb;
    column-gap: 1rem;
}

.card:hover {
    transform: translateY(-0.25rem);
    transition: transform 0.3s ease;
}

.card-icon {
    transition: all 0.3s ease;
}

.card:hover .card-icon {
    transform: rotateY(180deg);
}

.card-icon svg {
    width: 2rem;
    height: 2rem;
}

.card p {
    padding: 0 1.2rem 0 1.2rem;
    ;
}

/* card process */
.card-large-inner {
    margin-top: 5rem;
    text-align: start !important;
    width: 80%;
    gap: 1rem;
}

.card-large-inner,
.contact-left-inner,
.certifications {
    background-color: var(--off-white);
    border-radius: 0.75rem;
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.card-large-inner-left {
    width: 45%;
}

.card-large-inner-right {
    width: 55%;
}

.card-large-inner-left img {
    border-radius: 0.75rem 0 0 0.75rem;
}

.card-large-inner-right,
.limited-offer-inner-left,
.contact-left,
.contact-left-inner {
    padding: 2rem;
}

.card-large-inner-right h3 {
    color: var(--primary);
}

.card-large-inner-right ul li {
    align-items: center;
}

.card-large-inner-right ul li svg {
    width: 1.75rem;
    height: 1.75rem;
    padding-right: 0.25rem;
    fill: var(--dark);
    stroke: none;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(42, 157, 143, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(42, 157, 143, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(42, 157, 143, 0);
    }
}

/* Card Container Queries */
@container component (max-width: 600px) {
    .card {
        padding: 1.5rem;
    }

    .card p {
        padding: 0 0.5rem;
    }

    .card-icon svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}


/* ===== UTILITIES =====*/
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.content-center {
    justify-content: center;
}

.bet-space {
    justify-content: space-between;
}

.flex {
    display: flex;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.center {
    align-items: center;
}

/* ===== NAVIGATION MENU ===== */
.header {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.25),
            rgba(255, 255, 255, 0.05));
    backdrop-filter: blur(1.25rem) saturate(160%) contrast(110%);
    -webkit-backdrop-filter: blur(1.25rem) saturate(160%) contrast(110%);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar {
    padding: 0.75rem 0;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700 !important;
    color: var(--primary);
    text-decoration: none;
}

.logo span {
    color: var(--dark);
}

/* Desktop Menu */
.nav-menu {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.nav-item {
    position: relative;
}

.nav-link,
.dropdown-link {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--dark);
    text-decoration: none;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}


/* Dropdown Menu (Optional) */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--light);
    width: 200px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    list-style: none;
    padding: 1rem 0;
    z-index: 999;
}

.nav-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.dropdown-item {
    padding: 0.5rem 1.5rem;
}

.dropdown-link {
    color: var(--dark);
    text-decoration: none;
    transition: color 0.3s ease;
}

.dropdown-link:hover {
    color: var(--dark);
}

/* Mobile Menu (Hamburger) */
.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background: var(--dark);
    transition: all 0.3s ease;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {

    /* ===== NAV MENU ===== */
    .hamburger {
        display: block;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .nav-menu {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        background: white;
        flex-direction: column;
        gap: 0;
        padding: 1rem 0;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        transition: left 0.3s ease;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-item {
        margin: 1rem 0;
        text-align: center;
    }

    /* Dropdown for Mobile */
    .dropdown-menu {
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .nav-item:hover .dropdown-menu {
        max-height: 200px;
    }

    .dropdown-item {
        padding: 0.5rem 0;
    }

    /* Common */
    .proof,
    .card-large-inner,
    .problem-solution,
    .contact,
    .visit-us,
    .footer-inner-bottom {
        flex-direction: column;
    }

    .card-large-inner,
    .card-large-inner-left,
    .card-large-inner-right,
    .limited-offer-inner-left,
    .limited-offer-inner-right,
    .queries-content,
    .contact-right,
    .about-left,
    .about-right,
    .visit-us-left,
    .visit-us-right {
        width: 100% !important;
    }

    .card-large-inner-left img {
        border-radius: 0.75rem 0.75rem 0 0 !important;
    }

    .product-bottom {
        flex-direction: unset !important;
    }

    .contact-left,
    .query {
        padding: 0 !important;
    }

    .social-proof {
        justify-content: center;
    }

    .grid-two {
        display: block;
    }

    .grid-four {
        grid-template-columns: none !important;
    }

    /* Inputs */
    label {
        display: flex;
        align-items: center;
        width: auto;
        margin-bottom: 1rem;
    }

    input[type="radio"],
    input[type="checkbox"] {
        width: auto;
        margin: 0 0.5rem 0 0;
    }
}

/* ===== HERO SECTION ===== */
/* Hero Container Queries */
.hero-inner {
    container-type: inline-size;
    container-name: hero;
}

@container hero (max-width: 600px) {
    .hero-inner h1 {
        font-size: clamp(2rem, 10cqi, 3.75rem);
    }

    .hero-cta {
        flex-direction: column;
    }
}

.hero {
    padding-block: 6rem;
    background: linear-gradient(rgba(33, 34, 2, 0.5), rgba(31, 44, 2, 0.3)),
        url(assets/img/bg-5.jpg) no-repeat center center/cover;
    background-position: center;
    background-size: cover;
}

.hero-inner {
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: var(--white);
}

.hero-inner>span,
.hero-inner p,
.hero-inner a {
    color: var(--white);
}

.hero-inner h1 {
    -webkit-text-stroke: 0.1rem var(--primary);
}

.hero-inner h1>span {
    -webkit-text-stroke: 0.1rem var(--white);
}

.hero-cta,
.proof {
    gap: 1rem;
    padding-bottom: 0.50rem;
}

.profile :not(fi) {
    padding-left: -0.2rem;
}

.social-proof>*:not(:first-child) {
    margin-left: -0.6rem;
}

.profile img,
.partner img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 3rem;
    border: var(--light) solid 0.1rem;
}

/* ===== HERO DEVIDER ===== */
.devider {
    padding: 0 !important;
    height: 2rem;
    background-size: cover;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' opacity='.25' fill='%23e9c46a'%3E%3C/path%3E%3Cpath d='M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z' opacity='.5' fill='%23e9c46a'%3E%3C/path%3E%3Cpath d='M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z' fill='%23e9c46a'%3E%3C/path%3E%3C/svg%3E") no-repeat;
}

/* ===== WHY CHOOSE US SECTION ===== */
.why-choose-us>span {
    font-weight: 700;
    color: var(--dark);
}

/* ===== BENEFITS ===== */
.grid-four {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
}

.grid-four-point {
    padding: 1.5rem;
    background-color: #edf2f7;
    border-radius: 0.75rem;
}

/* ===== TESTIMONIALS ===== */

.testimonial p {
    padding: 0 !important;
}

.testimonial-top-left img {
    border-radius: 3rem;
    width: 3rem;
    height: 3rem;
    margin-right: 0.5rem;
}

.testimonial-top-right h5 {
    padding-bottom: 0 !important;
}

.testimonial-top-right svg,
.product-bottom-right svg {
    width: 1rem;
    height: 1rem;
    fill: var(--primary);
    stroke: none;
}

.testimonial-bottom span {
    color: var(--dark);
}

.testimonial-bottom span:first-child {
    font-size: 0.875rem;
    color: var(--gray);
}

.testimonial-bottom span:last-child {
    font-weight: 500;
    font-style: oblique;
    color: var(--dark);
}

.single-cta,
.about {
    margin-top: 3rem;
}

.single-cta a svg,
.offer svg,
.single-cta>a svg,
.footer-contact-left svg {
    width: 1.25rem;
    height: 1.25rem;
}

.single-cta a svg {
    margin-left: 0.25rem;
}

/* ===== PROBLEM-SOLUTION ===== */
@container component (max-width: 700px) {
    .problem-solution {
        flex-direction: column;
        gap: 2rem;
    }

    .problem-right,
    .solution-right {
        margin-left: 0;
        margin-top: 0.5rem;
    }
}

.problem-solution {
    gap: 4rem;
}

.problem-solution h5 {
    margin-bottom: -0.5rem !important;
}

.problem,
.solution {
    margin-bottom: 1rem;
}

.problem h3,
.solution h3 {
    margin-bottom: 0.5rem;
}

.problem-left svg,
.solution-left svg,
.query-left svg,
.get-in-touch-inner svg {
    width: 1.5rem;
    height: 1.5rem;
}

.problem-left svg {
    color: var(--error);
}

.solution-left svg {
    color: var(--success);
}

.problem-right,
.solution-right {
    margin-left: 1rem;
}

.solutions>*:last-child {
    margin-top: -0.5rem;
}

/* ===== LIMITED STOCK ===== */
.limited-daily-stock {
    background-color: #edf2f7;
    background-image: none;
}

.limited-offer-inner,
.queries-content {
    width: 70%;
}

.limited-offer-inner-left {
    width: 33%;
}

.limited-offer-inner-left>div {
    height: 6rem;
    width: 6rem;
}

.limited-offer-inner-left svg {
    width: 3rem;
    height: 3rem;
}

.limited-offer-inner-right {
    width: 77%;
}

.limited-offer-inner-right h5 {
    color: var(--secondary);
}

.limited-offer-inner-right span {
    color: var(--gray);
}

/* Intro Offer */
.offer-pluse {
    border-radius: 30rem;
    background-color: #dcfce7;
}

.offer svg {
    fill: var(--wheat);
    stroke: 0.1rem var(--white);
}

/*===== PRODUCTS =====*/
/* @container component (max-width: 400px) {
    .product-content {
        padding: 1rem;
    }

    .product-bottom {
        flex-direction: column;
        gap: 0.5rem;
    }
} */

.product {
    padding: 0 !important;
}

.product-top img,
.about-left img,
.card-large-inner-left img {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.product-top img {
    border-radius: 0.75rem 0.75rem 0 0;
}

.product-content {
    padding: 1.25rem;
}

.product-content p {
    padding: 0;
}

.product-bottom span {
    color: var(--dark);
}

.product-bottom-left>*:not(:first-child),
.product-bottom-right>*:not(:first-child),
.quantities>*:not(:first-child) {
    margin-left: 0.25rem;
}

.quantities {
    padding-block: 0.75rem;
}

.quantities span {
    font-size: 0.75rem;
}

.product-bottom-left>*:first-child {
    font-weight: 800;
}

.cart {
    margin-top: 0.5rem;
}

/* ===== QUERIES ===== */
.query {
    padding: 2rem;
    margin-bottom: 0.5rem;
}

.queries-content {
    margin: auto;
}

.query-right {
    margin-left: 0.5rem;
}

/* ===== GURANTEE ===== */
.guarantee>div>div {
    margin-top: -1rem;
}

/* ===== CONTACT ===== */
.contact-left,
.contact-left-inner {
    gap: 1rem;
}

.contact-left-inner>div {
    width: 6rem;
    height: 6rem;
}

.contact-left-inner svg {
    width: 3rem;
    height: 3rem;
    fill: var(--dark);
    stroke: none;
}

/* Partners */
.partners {
    gap: 1rem;
}

.partner {
    flex-direction: column;
}

/* Contact right */
.contact-right {
    width: 60%;
}

#address,
#term_cond {
    grid-column: span 2;
}

/* ===== ABOUT SECTION ===== */
@container component (max-width: 800px) {
    .about {
        flex-direction: column;
    }

    .about>div {
        width: 100%;
    }

    .about-right {
        margin-right: 0;
        margin-top: 2rem;
    }
}

.about {
    gap: 2rem;
}

.about>div,
.visit-us-left,
.visit-us-right {
    width: 50%;
}

.about-left img,
.visit-us-right-inner iframe {
    border-radius: 0.75rem;
}

.about-right {
    margin-right: 2rem;
}

.about-right h4 {
    color: var(--secondary);
}

.about-right>div {
    margin-top: 2rem;
}

.about-right>div>div:first-child img,
.certificate img {
    width: 4rem;
    height: 4rem;
}

.about-right>div>div:first-child img {
    margin-right: 0.75rem;
}

.about-right>div>div:last-child p {
    color: var(--gray);
}

/* numbers */
.numbers>div {
    padding: 1.5rem !important;
}

/* Certifications */
.certifications {
    margin-top: 4rem;
    padding: 2rem;
}

.certifications>div {
    margin-top: 1rem;
}

.certificate img {
    margin-bottom: 1rem;
}

/* ===== VISIT US ===== */
.visit-us {
    gap: 3rem;
    margin-top: 4rem;
}

.visit-us h3 {
    margin-bottom: 1rem;
}

.visit-us p {
    padding: 0;
}

.visit-right {
    margin-left: 0.5rem;
}

.visit-right h5 {
    padding-bottom: 0;
}

/* ===== FOOTER ===== */
footer {
    background-color: #edf2f7;
}

.social svg {
    fill: var(--dark);
    stroke: none;
}

.social:not(:first-child) {
    margin-left: 0.75rem;
}

.footer-contact-left svg {
    margin-top: 0.25rem;
    margin-right: 0.5rem;
}

/* footer Inner Bottom */
.footer-inner-bottom {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 0.1rem solid #e5e7eb;
}

.footer-inner-bottom-right a:not(:first-child) {
    margin-left: 1rem;
}