/* Sunrise Exports Theme - matches logo colors */
:root{
  --gold:#F4A300;
  --sun:#FFB400;
  --ink:#1C1C1C;
  --bg:#0F172A;
  --white:#FFFFFF;
  --muted:black;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ink);
  background:#ffffff;
  line-height:1.6;
}

img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(1100px, 92%);margin-inline:auto}

.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  border-bottom:1px solid #eef2f7;
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700}

.brand-logo{
	width:110px;
	height:120px;
	object-fit:contain
} 
.brand-name{font-size: 25px;}

.main-nav{display:flex;gap:1.2rem;align-items:center}
.main-nav a{padding:.6rem .9rem;border-radius:999px;transition:transform .15s ease, background .2s ease; 
	font-size: 18px; 
	/* ya jitna chahiye utna px */
  font-weight: 600;  /* optional: thoda bold karne ke liye */}
.main-nav a:hover{background:#f5f7fb; transform:translateY(-1px)}
.main-nav a:active{transform:translateY(0)}

.nav-toggle{display:none}
.hamburger{display:none;cursor:pointer}
.hamburger span{display:block;width:26px;height:3px;background:var(--ink);margin:5px 0;border-radius:2px;transition:all .2s ease}

@media (max-width: 820px){
  .hamburger{display:block}
  .main-nav{
    position: fixed; inset: 72px 0 auto 0; background: white; border-bottom:1px solid #eef2f7;
    display: grid; gap: 0; padding: .5rem 1rem; transform: translateY(-120%); transition: transform .2s ease;
  }
  .main-nav a{padding:1rem;border-radius:12px}
  .nav-toggle:checked ~ .hamburger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav-toggle:checked ~ .hamburger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .hamburger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .nav-toggle:checked ~ nav.main-nav{transform: translateY(0)}
}

/* Hero */
.hero{
  background: radial-gradient(1200px 400px at 80% -20%, #fff1cc 0%, #ffffff 60%), linear-gradient(180deg, #fff, #fff);
  border-bottom:1px solid #f1f5f9;
}
.hero .content{
	  padding: 20px 0;  
	display:grid; grid-template-columns: 1.1fr .9fr; align-items:center; gap:2rem}
.hero h1{font-size:clamp(2rem, 4vw, 3rem); line-height:1.15; margin:0 0 .6rem}
.hero p.lead{font-size:clamp(1rem, 1.8vw, 1.2rem); color:black; max-width:52ch; text-align: justify;}
.cta{display:flex;gap:.8rem;margin-top:1.2rem}
.btn {
  display:inline-block;
  padding:.85rem 1.1rem;
  border-radius:12px;
  font-weight:600;
  font-size: 20px;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.btn.primary{background:linear-gradient(90deg, var(--gold), var(--sun)); color:white}
.btn.ghost{border:1px solid #e2e8f0; color: #0f172a; background:white}
.hero .card{
  border:1px solid #e2e8f0; padding:1rem; border-radius:16px; background:white; box-shadow:0 4px 16px rgba(2,6,23,.06)
}

@media (max-width: 768px) {
  .hero .content {
    grid-template-columns: 1fr; /* ek hi column ban gaya */
     text-align: center; 
  }

  .hero .card {
    margin-top: 20px;
    max-width: 350px;
    justify-self: center; /* card center me rahega */
    text-align: left;     /* andar ka text left aligned rahe */
  }
}

.hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.4;  /* yahan 1.15 ki jagah 1.4 ya 1.5 kar do */
  margin: 0 0 .6rem;
}



/* Sections */
.section{padding: 40px 0;}
.section h2{font-size:clamp(1.6rem, 3vw, 2.2rem); margin:0 0 .8rem}
.kicker{color: var(--gold); text-transform: uppercase; letter-spacing: .12em; font-weight:700; font-size: 20px;}

/* Cards grid */
.grid{display:grid; gap:1.2rem; grid-template-columns: repeat(3, 1fr)}
@media (max-width: 900px){ .grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 640px){ .grid{grid-template-columns: 1fr} }
.card{border:1px solid #e2e8f0; border-radius:16px; padding:1.1rem; background:#fff}
.card h3{margin:.2rem 0 .4rem}
.card p{color:black;}

/* Feature/why */
.features{display:grid; gap:1rem; grid-template-columns: repeat(3, 1fr)}
@media (max-width: 900px){ .features{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 640px){ .features{grid-template-columns: 1fr} }
.feature{padding:1.1rem;border:1px solid #e2e8f0;border-radius:16px;background:white}
.feature .dot{width:12px;height:12px;border-radius:999px;background:var(--gold);display:inline-block;margin-right:.5rem}

/* Footer */
.site-footer{background:#0b1220;color: #cbd5e1; margin-top:2rem; padding-top:2rem}
.footer-grid{display:grid; gap:1.2rem; grid-template-columns: 2fr 1fr 1.2fr; padding-bottom:1.4rem}
.footer-brand{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.footer-brand img{width:38px;height:38px}
.site-footer h4{margin:.2rem 0 .6rem; color:#e2e8f0}
.site-footer a{color:#cbd5e1}
.site-footer ul{list-style:none; padding:0; margin:0}
.tiny{border-top:1px solid rgba(255,255,255,.06); padding: .8rem 0; font-size:.9rem; color:#94a3b8; text-align:center}


/* Footer Mobile Responsive */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr; /* 3 columns ki jagah 1 column */
    gap: 2rem; /* thoda zyada gap takay blocks chipke na lagain */
  }

  .footer-brand {
    justify-content: center; /* brand logo aur name center me aa jaye */
    text-align: center;
  }

  .footer-grid div {
    text-align: center; /* sab blocks center aligned for mobile */
  }

  .contact-list {
    text-align: left; /* optional: contact ko left align chhod sakti ho for neatness */
  }
}



/* Forms */
form{display:grid; gap:.85rem}
input, textarea{width:100%; padding:.85rem; border-radius:12px; border:1px solid #e2e8f0; font: inherit}
label{font-weight:600}
.contact-wrap{display:grid; gap:1.4rem; grid-template-columns: 1.1fr .9fr}
@media (max-width: 900px){ .contact-wrap{grid-template-columns: 1fr} }
.map{border:0; width:100%; min-height:300px; border-radius:16px; filter:grayscale(.2)}
/* Utility */
p.muted{
	text-align: justify;
}
.muted{color:black;}
.center{text-align:center}
.shadow{box-shadow:0 10px 30px rgba(2,6,23,.08)}
.badge {
  display: inline-block;
  padding: .5rem .9rem;   /* thoda zyada space */
  border-radius: 999px;
  background: #fff7e6;
  color: #92400e;
  border: 1px solid #fed7aa;
  font-weight: 600;
  font-size: 1rem;        /* text bhi bara */
}


/* Album Section (Image Gallery) */
.album .responsive-container-block.bg {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns desktop */
  gap: 15px; /* columns aur rows ke darmiyan ka gap */
  max-width: 1320px;
  margin: 0 auto;
}

.album .img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px; /* optional */
  margin-bottom: 12px; /* column ke andar images ke beech gap */
}

.album .img:last-child {
  margin-bottom: 0; /* last wali image neeche chipki rahe */
}

/* Sirf IMG6 ke liye (jo neeche white gap chor rahi thi) */
.album .img-big.img-last {
  grid-row: span 1;   /* neeche ka gap cover kare */
  height: 36%;       /* pura row bhar de */
  object-fit: cover;  /* stretch na ho, neat crop ho */
  display: block;
}

.album .img9{
border-radius: 6px; /* optional */
	height: 33.5%;
	
	}

/* Responsive breakpoints */
@media (max-width: 1024px) {
  .album .responsive-container-block.bg {
    grid-template-columns: repeat(2, 1fr); /* tablet me 2 columns */
  }
}

@media (max-width: 600px) {
  .album .responsive-container-block.bg {
    grid-template-columns: repeat(2, 1fr); /* mobile me 2 columns */
  }
}

/* First column (row1) */
.album .responsive-container-block.img-cont:first-child {
  padding-left: 5px; /* jitna gap chahiye utna px badha sakti ho */
}

/* Last column (row3) */
.album .responsive-container-block.img-cont:last-child {
  padding-right: 5px;
}
 
/* By default hide desktop-only images */
.only-desktop {
  display: none !important;
}

/* Show these only on desktop/larger screens */
@media (min-width: 769px) {
  .only-desktop {
    display: block !important;
  }
}



/* FAQ SECTION CSS */

/* FAQ Section */
.faq-section {
  max-width: 800px;
  margin: 50px auto;
  padding: 0 15px;
}

.faq {
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  font-size: 18px;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease; /* smooth expand/collapse */
}

.faq.active .faq-answer {
  max-height: 200px; /* adjust as needed */
  margin-top: 10px;
}




/* SERVICES Section */
/* SERVICES Section (only use on services page) */
.services-section {
  margin: 40px 0;
}


.section-title {
  font-size: 1.5rem;
  margin-bottom: 20px;
  text-align: center;
}

/* grid layout */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 cards per row */
  gap: 20px; /* space between cards */
  max-width: 1000px;
  margin: 0 auto;
}

.product-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

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

.product-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 10px;
}

.product-card h3 {
  margin: 10px 0 5px;
}

.product-card p {
  font-size: 0.9rem;
  color: black;
 text-align: justify;
}
.product-card p {
  text-align: justify;
}
@media (max-width: 600px) {
  .product-grid {
    grid-template-columns: repeat(1, 1fr); /* mobile me 2 cards per row */
  }
}


/*Clients CSS*/

.clients {
  margin: 60px 0;
  text-align: center;
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 30px;
}

.client-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.client-card img {
  max-width: 160px;
  height: auto;
  margin-bottom: 10px;
  transition: filter 0.3s ease;
}



.client-card p {
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0;
}

@media (max-width: 600px) {
  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .clients-grid .client-card:nth-child(3) {
    grid-column: 1 / -1;   /* pura row occupy kare */
    justify-self: center;  /* beech mein align ho */
  }
}