/* ==================================================
   tarkett-vinyl.css
   Styles for the "Vinyl" section (Tarkett lookalike)
   ================================================== */

/* ───────────────────────────────────────────────────
   0) VARIABLES (you can tweak these if desired)
   ─────────────────────────────────────────────────── */
:root {
    --tv-bg:       #f9f9f9;    /* very light gray background */
    --tv-text:     #333333;    /* dark gray for body text */
    --tv-blue:     #0069b4;    /* medium blue for underlines, links, etc. */
    --tv-darkblue: #003b73;    /* darker blue for button background */
    --tv-white:    #ffffff;    /* white */
    --tv-spacing:  4rem;       /* vertical padding for the section */
    --tv-max-width:1200px;      /* max content width */
    --tv-gap:      2rem;       /* gap between text and image on large screens */
    --tv-radius:   4px;        /* border-radius for button */
    --tv-shadow:   rgba(0,0,0,0.1); /* subtle shadow for image or cards if needed */
}

/* ───────────────────────────────────────────────────
   1) SECTION WRAPPER & BACKGROUND
   ─────────────────────────────────────────────────── */
.tarkett-vinyl-section {
    background-color: var(--tv-bg);
    color: var(--tv-text);
    padding-top: var(--tv-spacing);
    padding-bottom: var(--tv-spacing);
}

/* ───────────────────────────────────────────────────
   2) CENTERED CONTAINER
   ─────────────────────────────────────────────────── */
.tv-container {
    max-width: var(--tv-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Override padding for text alignment sections */
.tarkett-vinyl-section .tv-container {
    padding-left: 0;
    padding-right: 1rem;
}

.tarkett-vinyl-section .tv-content {
    padding-left: 1rem;
}

.tarkett-vinyl-section .tv-text {
    margin-left: 0;
    padding-left: 0;
}

.tv-container1 {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ───────────────────────────────────────────────────
   3) FLEX LAYOUT (TEXT ON LEFT, IMAGE ON RIGHT)
   ─────────────────────────────────────────────────── */
.tv-content {
    display: flex;
    flex-wrap: wrap;           /* wrap on mobile */
    align-items: center;       /* vertical align if image taller */
    gap: var(--tv-gap);        /* horizontal gap between columns */
}

/* ───────────────────────────────────────────────────
   4) TEXT BLOCK (left column)
   ─────────────────────────────────────────────────── */
.tv-text {
    flex: 1 1 400px;           /* grow, shrink, base 400px */
    min-width: 280px;          /* don't get too narrow */
    padding-left: 0;           /* Remove any default padding */
    margin-left: 0;            /* Reset margin */
    position: relative;
}

/* Force text alignment with orange underline */
.tv-text > * {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
    position: relative;
    left: 0;
}

/* Specifically target paragraph alignment */
.tv-paragraph {
    display: block;
    margin-left: 0 !important;
    padding-left: 0 !important;
    margin-right: auto;
    text-align: left;
    box-sizing: border-box;
}

/* 4.1) HEADING – "Acoustic Panel" with orange underline */
.tv-heading {
    position: relative;
    font-family: Arial, sans-serif;
    font-size: 2rem;           /* ~32px */
    font-weight: bold;
    color: var(--tv-text);
    margin: 0;                 /* remove default margin */
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

/* Ensure all text content aligns with the orange underline */
.tv-heading,
.tv-paragraph {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left;
}

/* Separate button alignment */
.tv-button {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.tv-heading1 {
    position: relative;
    left: 150px;
    font-family: Arial, sans-serif;
    font-size: 2rem;           /* ~32px */
    font-weight: bold;
    color: var(--tv-text);
    margin: 0;                 /* remove default margin */
    margin-bottom: 1rem;
    line-height: 1.2;
}

/* Orange underline for Acoustic Panel heading */
.tv-heading::after {
    content: "";
    position: absolute;
    bottom: -0.5rem;           /* position below the text */
    left: 0;                   /* Align with text start position */
    width: 4rem;               /* ~64px wide */
    height: 4px;               /* ~4px tall */
    background-color: #FF9800; /* Orange color */
    border-radius: 2px;
}

.tv-heading1::before {
    content: "";
    position: absolute;
    top: -0.75rem;             /* adjust vertical offset as needed */
    right: 100px;
    width: 3rem;               /* ~48px wide */
    height: 3px;               /* ~3px tall */
    background-color: var(--tv-blue);
    border-radius: 2px;
}

/* ───────────────────────────────────────────────────
   4.2) PARAGRAPH TEXT
   ─────────────────────────────────────────────────── */
.tv-paragraph {
    font-family: Arial, sans-serif;
    font-size: 1rem;           /* ~16px */
    line-height: 1.6;
    color: var(--tv-text);
    margin-bottom: 1.5rem;
    margin-left: 0;            /* Reset margin */
    padding-left: 0;           /* Reset padding */
}

/* ───────────────────────────────────────────────────
   4.3) BUTTON – "Learn More"
   ─────────────────────────────────────────────────── */
.tv-button {
    display: table-cell !important;
    width: auto !important;
    height: 45px !important;
    background-color: var(--tv-darkblue);
    color: var(--tv-white);
    font-family: 'Poppins', Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    padding: 0 24px !important;
    border-radius: var(--tv-radius);
    transition: background-color 0.2s ease-in-out;
    margin-left: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    border: none !important;
    outline: none !important;
    line-height: normal !important;
}

.tv-button:hover {
    background-color: darken(var(--tv-darkblue), 10%);
    /* If your environment supports a preprocessor like Sass, "darken()" works.
       Otherwise, you can hardcode a slightly darker shade, e.g. #002c55. */
}

/* ───────────────────────────────────────────────────
   5) IMAGE BLOCK (right column)
   ─────────────────────────────────────────────────── */
.tv-image {
    flex: 1 1 300px;           /* grow, shrink, base 300px */
    min-width: 280px;
    text-align: right;         /* right-align so img hugs right column */
}

.tv-image img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    border-radius: 4px;        /* optional, for a subtle rounding */
    box-shadow: 0 1px 4px var(--tv-shadow);
}

.tv-image1 img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    border-radius: 4px;        /* optional, for a subtle rounding */
    box-shadow: 0 1px 4px var(--tv-shadow);
}

/* Acoustic Panel Image - Smaller Size */
.acoustic-panel-img {
    max-width: 45% !important;  /* Make acoustic panel image much smaller */
    height: auto;
    display: inline-block;
    border-radius: 4px;
    box-shadow: 0 1px 4px var(--tv-shadow);
}

/* ───────────────────────────────────────────────────
   6) RESPONSIVE ADJUSTMENT (MOBILE)
   When viewport ≤ 768px, stack text & image vertically
   ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tv-content {
        flex-direction: column;
    }

    .tv-image {
        text-align: center;      /* center image on mobile */
        margin-top: 1.5rem;      /* some space above image */
    }

    .tv-heading {
        text-align: center;      /* center heading on mobile */
    }

    .tv-heading::after {
        left: 50%;               /* center the orange underline on mobile */
        transform: translateX(-50%);
    }

    .tv-paragraph {
        text-align: center;      /* center paragraph on mobile for consistency */
    }

    .tv-button {
        margin-left: auto;
        margin-right: auto;      /* center-align button on mobile */
        display: inline-flex !important;    /* maintain flexbox for text centering */
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ───────────────────────────────────────────────────
   7) UTILITY: DARKEN BUTTON ON HOVER (fallback)
   If you do not have a CSS preprocessor, replace darken() above with a fixed hex:
   e.g. .tv-button:hover { background-color: #002c55; }
   ─────────────────────────────────────────────────── */
/* =============================== */
/* Styles for "Committed to the responsible use of PVC" */
/* =============================== */

.pvc-section {
    padding: 60px 20px;                      /* padding above & below */
    background-color: #ffffff;               /* white background behind entire section */
    max-width: 1200px;                       /* optional: center on large screens */
    margin: 0 auto;                          /* center horizontally */
}

/* Section heading */
.pvc-section h2 {
    font-size: 28px;
    font-weight: 600;
    color: #0e3268;                          /* dark-navy color */
    text-align: center;
    margin-bottom: 40px;
}

/* Container for the two side-by-side "boxes" */
.pvc-box-container {
    display: flex;
    flex-wrap: wrap;                         /* allow wrapping on smaller screens */
    gap: 20px;                               /* space between the two boxes */
    justify-content: space-between;
}

/* Each "box" (light grey background with text) */
.pvc-box {
    background-color: #ecf2f5;               /* very light grey/blue */
    padding: 24px;
    flex: 1 1 45%;                           /* roughly half-width each on wide screens */
    position: relative;
    box-sizing: border-box;
}

/* The small horizontal bar above each paragraph */
.pvc-box-line {
    display: block;
    width: 40px;
    height: 4px;
    background-color: #0e3268;               /* same dark-navy color */
    margin-bottom: 16px;
}

/* Paragraph text inside each box */
.pvc-box p {
    font-size: 16px;
    color: #0e3268;
    line-height: 1.5;
    margin: 0;                               /* reset default <p> margins */
}

/* "CIRCULAR ECONOMY →" link styling */
.pvc-circular-link {
    display: inline-block;
    margin-top: 16px;
    font-size: 14px;
    font-weight: 600;
    color: #bda23b;                          /* golden accent color */
    text-decoration: none;
}
.pvc-circular-link:hover {
    text-decoration: underline;
}

/* Small-print text below the "CIRCULAR ECONOMY" link */
.pvc-small-print {
    margin-top: 16px;
    font-size: 12px;
    color: #0e3268;
    line-height: 1.4;
}

/* ---------- */
/* The "100%" stat area below the two boxes */
/* ---------- */
.pvc-stats {
    text-align: center;
    margin-top: 40px;
}

/* Big "100%" number */
.pvc-stats h3 {
    font-size: 48px;
    font-weight: 700;
    color: #0e3268;
    margin-bottom: 16px;
}

/* Description below "100%" */
.pvc-stats p {
    font-size: 16px;
    color: #0e3268;
    max-width: 600px;                        /* keep paragraph from stretching too wide */
    margin: 0 auto;                          /* center under the "100%" */
    line-height: 1.5;
}

/* Responsive: stack boxes vertically on narrower screens */
@media (max-width: 768px) {
    .pvc-box {
        flex: 1 1 100%;
    }
}

/* -------------- GLOBAL RESET / BASE STYLES -------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #1c1c1c;
}

/* -------------- SECTION CONTAINER -------------- */
.product-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 60px 5%;      /* adjust as needed */
    gap: 40px;             /* space between text & image */
}

.product-row + .product-row {
    /* add some vertical spacing between sections */
    border-top: 1px solid #e0e0e0;
    /* optional: increase top padding if you like */
}

/* Reverse the order on sections with .reverse */
.product-row.reverse {
    flex-direction: row-reverse;
}

/* -------------- TEXT COLUMN -------------- */
.product-text {
    flex: 1;               /* text takes up equal share */
    max-width: 500px;      /* prevent text from getting too wide */
}

.section-heading {
    margin-bottom: 20px;
    position: relative;
}

.section-heading .heading-accent {
    display: block;
    width: 40px;                /* length of the colored line */
    height: 3px;                /* thickness */
    background-color: #2a5885;  /* example accent color (dark blue) */
    margin-bottom: 10px;        /* gap between line and heading text */
}

.section-heading h2 {
    font-size: 2rem;            /* ~32px */
    color: #2a5885;             /* same as accent or adjust */
    font-weight: bold;
}

.product-text p {
    margin-bottom: 25px;
    font-size: 1rem;            /* ~16px */
    color: #333;
}

/* -------------- BUTTON -------------- */
.btn-find {
    display: inline-block;
    background-color: #2a5885;  /* dark blue background */
    color: #fff;
    text-decoration: none;
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.btn-find:hover {
    background-color: #244c75;
}

/* -------------- IMAGE COLUMN -------------- */
.product-image {
    flex: 1;                    /* image takes up equal share */
    text-align: center;         /* center the img */
}

.product-image img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;         /* optional rounding */
    object-fit: cover;
    display: inline-block;
}

/* -------------- RESPONSIVE BREAKPOINT -------------- */
@media (max-width: 900px) {
    .product-row {
        flex-direction: column;
        text-align: center;
    }
    .product-row.reverse {
        flex-direction: column;   /* remove reversal on narrow screens */
    }
    .product-text,
    .product-image {
        max-width: 100%;
    }
    .product-text {
        margin-bottom: 30px;
    }
}

/* ───────────────────────────────────────────────────
   Flip rule: if a tarkett-vinyl-section has class "reverse",
   make its .tv-content use row-reverse
   ─────────────────────────────────────────────────── */
.tarkett-vinyl-section.reverse .tv-content {
    flex-direction: row-reverse;
}

.eco-icon {
    color: #FF9800;
    font-size: 1.5em;
    vertical-align: middle;
    margin-right: 10px;
}
.pvc-circular-link .arrow {
    display: inline-block;
    transition: transform 0.2s;
}
.pvc-circular-link:hover .arrow {
    transform: translateX(6px);
}
[data-aos] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s, transform 0.6s;
}
[data-aos].aos-animate {
    opacity: 1;
    transform: none;
}
[data-aos="zoom-in"] {
    transform: scale(0.85);
}
[data-aos="zoom-in"].aos-animate {
    transform: scale(1);
}