/*
Theme Name: Sunvesta Pipes
Theme URI: https://example.com/
Author: Generated by ChatGPT
Description: A custom WordPress theme for Sunvesta Pipes Pvt. Ltd., featuring an industrial, clean and modern design tailored for HDPE, MDPE and DWC piping solutions. The theme automatically sets up pages and navigation with pre‑loaded content and images on activation. All page content is editable through the WordPress admin.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sunvesta-pipes
*/

/*
 * Sunvesta Pipes Private Limited – Theme Stylesheet
 *
 * This stylesheet defines the primary look and feel for the
 * Sunvesta Pipes WordPress theme. It uses a modern, industrial
 * aesthetic with clean typography, a restrained colour palette
 * and responsive layouts. Colours and fonts are defined as CSS
 * variables to simplify maintenance. The design is mobile‑first
 * and scales gracefully on larger screens.
 */

/*
 * Root variables define the core brand colours and fonts.
 * Adjust these values to tweak the overall theme without
 * touching individual selectors. Colours are chosen to convey
 * trust (dark blues), industrial strength (dark greys) and
 * energy/innovation (orange accent inspired by gas and DWC pipes).
 */
:root {
    --primary-color: #003d6b;     /* deep navy blue for headings and backgrounds */
    --secondary-color: #007acc;   /* lighter blue for highlights and links */
    --accent-color: #f49819;      /* warm orange for call‑to‑action and highlights */
    --dark-color: #333333;        /* dark grey for text and footers */
    --light-color: #f5f5f5;       /* light grey for section backgrounds */
    --background-color: #ffffff;  /* white for card backgrounds */
    --heading-font: 'Montserrat', sans-serif;
    --body-font: 'Open Sans', sans-serif;
}

/* Global resets */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    font-family: var(--body-font);
    line-height: 1.6;
    color: var(--dark-color);
    background-color: var(--light-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--accent-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font);
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

/* =========================
   HEADER & NAVIGATION
========================= */

header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--background-color);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.container {
    width: 90%;
    max-width: 1200px;
  margin: auto;
    padding: 1rem 0;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
  position: relative;
}

/* Logo */
.nav-logo a {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
  color: var(--primary-color);
}

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

.nav-menu a {
    font-weight: 600;
    font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--primary-color);
}

.nav-menu a:hover {
    color: var(--accent-color);
}

/* =========================
   HAMBURGER BUTTON
========================= */

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0,61,107,0.25);
  background: rgba(0,61,107,0.06);
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.nav-toggle span {
  width: 18px;
  height: 2px;
  background: var(--primary-color);
  border-radius: 2px;
}

/* =========================
   HERO SECTION
========================= */

.hero {
    position: relative;
    background-image: url('assets/images/hero_image.png');
    background-size: cover;
    background-position: center;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

.hero::before {
    content: '';
    position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    padding: 2rem;
}

.hero h1 {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: #fff;
}

/*
 * Animations
 *
 * The following keyframes and animation rules bring subtle motion to the
 * landing pages. Content fades in and slides up when the page loads,
 * drawing attention to important sections without being distracting. Cards
 * animate sequentially to create a staggered reveal. The call‑to‑action
 * buttons gently scale on hover.
 */


@keyframes fadeInUp {
  0% { opacity:0; transform: translateY(20px); }
  100% { opacity:1; transform: translateY(0); }
}

@keyframes fadeUpCard {
  0% { opacity:0; transform: translateY(30px); }
  100% { opacity:1; transform: translateY(0); }
}

/* Subtle hero pan (parallax-like) – lightweight CSS only */
@keyframes heroPan {
  0% { background-position: center 40%; }
  100% { background-position: center 60%; }
}
.hero { animation: heroPan 18s ease-in-out infinite alternate; }


/* Apply fade‑in animation to hero content */
.hero-content {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease forwards;
    animation-delay: 0.4s;
}

/* Apply staggered animation to cards in product grid */
.grid .card {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUpCard 0.8s ease forwards;
}
.grid .card:nth-child(1) { animation-delay: 0.2s; }
.grid .card:nth-child(2) { animation-delay: 0.4s; }
.grid .card:nth-child(3) { animation-delay: 0.6s; }
.grid .card:nth-child(4) { animation-delay: 0.8s; }

/* Button interaction */
.btn {
    display: inline-block;
    background-color: var(--accent-color);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.2px;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

.btn:hover,
.btn:focus {
    background-color: #c37810;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 14px 32px rgba(0,0,0,0.14);
}

.btn {
    display: inline-block;
    background-color: var(--accent-color);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.btn:hover,
.btn:focus {
    background-color: #c37810;
}

/* Utility section styling */
section {
    padding: 3rem 0;
}

section:nth-of-type(even) {
    background-color: var(--background-color);
}

.section-title {
    text-align: center;
    margin-bottom: 2rem;
    /* Fade titles in as they appear */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease forwards;
}


/* Infrastructure showcase image block */
#infrastructure img{
    opacity: 0;
    transform: translateY(24px);
    animation: fadeInUp 1.0s ease forwards;
    animation-delay: 0.25s;
    box-shadow: 0 16px 44px rgba(0,0,0,0.14);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    will-change: transform;
}
#infrastructure img:hover{
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 20px 58px rgba(0,0,0,0.18);
}

/* Cards grid for product categories and benefits */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2rem;
}

.card {
    background-color: var(--background-color);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.2s ease;
}

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

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

.card-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-body h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.card-body p {
    flex: 1;
    font-size: 0.9rem;
    color: var(--dark-color);
    margin-bottom: 1rem;
}

.card-body .btn {
    align-self: flex-start;
}

/* Benefits list styling */
.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.benefits-list li {
    display: flex;
    align-items: flex-start;
    background-color: var(--background-color);
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.benefits-list li::before {
    content: '✓';
    margin-right: 0.5rem;
    color: var(--accent-color);
    font-weight: 700;
}

/* Applications section */
.applications {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    text-align: center;
}

.applications h4 {
    margin-top: 0.5rem;
    font-size: 1rem;
}

/* Applications animation & image blocks */
.applications > div{
    opacity: 0;
    transform: translateY(22px);
    animation: fadeUpCard 0.75s ease forwards;
    background: var(--background-color);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 8px 22px rgba(0,0,0,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
}
.applications > div::after{
    content:"";
    position:absolute;
    inset:-40%;
    background: radial-gradient(circle at 30% 30%, rgba(244,152,25,0.18), transparent 60%);
    transform: rotate(8deg);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.applications > div:hover{
    transform: translateY(-6px);
    box-shadow: 0 14px 34px rgba(0,0,0,0.12);
}
.applications > div:hover::after{ opacity: 1; }

.applications > div img{
    border-radius: 10px;
    transition: transform 0.5s ease;
    will-change: transform;
}
.applications > div:hover img{
    transform: scale(1.05);
}

/* Stagger delays for applications */
.applications > div:nth-child(1){ animation-delay: 0.15s; }
.applications > div:nth-child(2){ animation-delay: 0.30s; }
.applications > div:nth-child(3){ animation-delay: 0.45s; }
.applications > div:nth-child(4){ animation-delay: 0.60s; }
.applications > div:nth-child(5){ animation-delay: 0.75s; }


/* Certifications strip / badges */
.cert-strip{
    margin-top: 1.25rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.cert-badge{
    opacity: 0;
    transform: translateY(22px);
    animation: fadeUpCard 0.8s ease forwards;
    background: linear-gradient(180deg, #ffffff, #f7fbff);
    border: 1px solid rgba(0,61,107,0.10);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    display: flex;
    gap: 0.9rem;
    align-items: center;
    box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
}
.cert-badge::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(120deg, transparent 0%, rgba(244,152,25,0.12) 35%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.8s ease;
}
.cert-badge:hover::before{ transform: translateX(120%); }
.cert-badge:hover{ transform: translateY(-4px); }
.cert-badge svg{ flex: 0 0 44px; }
.cert-badge h4{ margin:0; font-size: 1.0rem; }
.cert-badge p{ margin:0; font-size:0.88rem; color: var(--dark-color); }

.cert-strip .cert-badge:nth-child(1){ animation-delay: 0.15s; }
.cert-strip .cert-badge:nth-child(2){ animation-delay: 0.30s; }
.cert-strip .cert-badge:nth-child(3){ animation-delay: 0.45s; }

/* Footer styling */
footer {
  background: var(--primary-color);
    color: #fff;
    padding: 2rem 0;
    font-size: 0.875rem;
}

footer .footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
}

footer h4 {
    color: #fff;
    margin-bottom: 1rem;
    font-size: 1rem;
}

footer a {
    color: #fff;
    font-weight: 500;
}

footer a:hover {
    color: var(--accent-color);
}

/* Contact form */
.contact-form {
  background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.contact-form .form-group {
    margin-bottom: 1.2rem;
}

.contact-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--primary-color);
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem;
  margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
}

.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form button {
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.contact-form button:hover {
    background-color: var(--secondary-color);
}

/* =========================
   MOBILE NAVIGATION
========================= */

@media (max-width: 768px) {

  .nav {
    position: relative;
  }

  .nav-toggle {
    display: flex;
    z-index: 1100;
  }

  .nav-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    max-width: 320px;
  }

  .nav-menu ul {
    display: none;
    flex-direction: column;
    background: #fff;
    margin-top: 0.75rem;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.18);
    padding: 0.5rem 0;
  }

  .nav-menu.is-open ul {
    display: flex;
    animation: slideDown 0.25s ease;
  }

  .nav-menu ul li a {
    display: block;
    padding: 0.85rem 1.25rem;
  }
}

/* =========================
   ANIMATIONS
========================= */

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}