/* tata.css - styles for tata/tata.html hero section */
:root{
  --accent:#d61e48;/* pink-red for button */
  --accent-2:#0b88d1;/* blue accent for headings */
  --muted:#8b99a6;
  --bg:#fff;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, Arial, sans-serif;color:#222;margin:0;padding:0;background:var(--bg)}
.header{display:flex;align-items:center;justify-content:space-between;padding:18px 28px}

/* keep header fixed at top */
.header{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent}

/* full-screen banner (image element) */
.full-top-banner{width:100%;height:100vh;display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden;position:relative}
.full-top-banner .banner-img{max-width:100%;max-height:100vh;width:auto;height:auto;display:block}
/* place header above banner */
.header{position:relative;z-index:10}
/* ensure hero sits directly after banner */
.tata-hero{position:relative;z-index:20;margin-top:0}

/* Adjust full-top-banner to fit below fixed header */
.full-top-banner{height:calc(100vh - 64px);margin-top:64px}

/* hero layout */
.tata-hero{display:flex;align-items:center;gap:36px;padding:48px 6%;max-width:1200px;margin:0 auto}
.tata-hero .left{flex:1}
.tata-hero .right{width:600px;flex-shrink:0;display:flex;align-items:center;justify-content:center}

.tata-hero h1{font-size:40px;line-height:1.02;margin:0 0 18px;color:#222;font-weight:700}
.tata-hero h1 .highlight{color:var(--accent-2)}

.tata-hero .logo{display:flex;align-items:center;gap:12px;margin:16px 0}
.tata-hero .logo img{height:56px}
.tata-hero .logo .urja{margin:0;font-weight:700;color:var(--muted)}

.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;background:#fff;border-radius:26px;padding:18px;border:5px solid #e6f2fb;box-shadow:0 10px 30px rgba(3,44,103,0.05);
  width:100%;
  max-width:760px; /* occupy full available left column but cap for readability */
  margin:16px 0; 
  align-items:stretch; /* ensure equal height rows */
  grid-auto-rows: minmax(64px, auto);
}
.feature{display:flex;align-items:center;gap:14px;padding:12px;border-radius:10px;justify-content:flex-start}
.feature img{width:48px;height:48px;flex:0 0 48px;object-fit:contain}
.feature p{margin:0;font-size:15px;color:#333;line-height:1.2}
.feature p strong{font-weight:700}

.tata-hero .terms{color:#c7d0d8;font-size:13px;margin-top:16px}


.know-more{display:inline-block;background:var(--accent);color:#fff;padding:18px 34px;border-radius:20px;font-size:22px;border:none;margin-top:26px;cursor:pointer;box-shadow:0 8px 20px rgba(214,30,72,0.18)}

.know-more .download-icon{margin-left:10px;font-size:18px;vertical-align:middle}


/* poster card (below hero) */
.poster-card{max-width:980px;margin:28px auto;padding:24px;border-radius:14px;background:linear-gradient(180deg,rgba(11,136,209,0.04),rgba(214,30,72,0.03));box-shadow:0 8px 30px rgba(3,44,103,0.04);display:flex;align-items:center;justify-content:center}
.poster-card picture{display:block;width:100%}
.poster-img{display:block;margin:0 auto;width:100%;max-width:820px;height:auto;object-fit:contain;border-radius:8px}

/* top hero image wrapper (shows full image, no crop) */
.hero-top-img-wrap{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;overflow:visible;display:flex;align-items:center;justify-content:center;padding:0}
.hero-top-img{width:100%;max-width:none;height:auto;object-fit:contain;object-position:center center;display:block}

/* Desktop view: normal size */
@media (min-width: 1024px) {
  .hero-top-img {
    height: 500px; /* Fixed height for desktop */
    width: 100%;
    object-fit: cover;
    object-position: center;
  }
  .hero-top-img-wrap {
    height: 500px;
    overflow: hidden;
  }
}

/* Tablet view */
@media (min-width: 601px) and (max-width: 1023px) {
  .hero-top-img {
    height: auto;
    max-height: 400px;
    width: 100%;
    object-fit: cover;
  }
}

/* Mobile view */
@media (max-width: 600px) {
  .hero-top-img {
    height: auto;
    width: 100%;
  }
}

/* model image responsiveness and fixed visual sizing */
.tata-hero .right .border{width:100%;max-width:720px;display:flex;align-items:center;justify-content:center;padding:8px}
.tata-hero .right .border img{width:100%;max-width:640px;height:auto;object-fit:contain;display:block}

@media (max-width:1400px){
  .tata-hero .right{width:720px}
  .tata-hero .right .border img{max-width:600px}
}
@media (max-width:1200px){
  .tata-hero .right{width:520px}
  .tata-hero .right .border img{max-width:480px}
}
@media (max-width:900px){
  .tata-hero .right{width:460px}
  .tata-hero .right .border img{max-width:380px}
}
@media (max-width:600px){
  .tata-hero .right{width:100%;max-width:520px}
  .tata-hero .right .border img{max-width:420px}
}

/* Responsive */
@media (max-width:900px){
  .tata-hero{gap:20px;padding:32px}
  .tata-hero .right{width:260px}
 
  .tata-hero h1{font-size:32px}
}
@media (max-width:600px){
  .tata-hero{flex-direction:column-reverse;align-items:center;padding:22px}
  .tata-hero .right{width:100%;display:flex;justify-content:center}
  
  .tata-hero h1{font-size:24px;text-align:center}
  /* small/mobile: make features compact and single-column */
  .features-grid{grid-template-columns:1fr;max-width:92%;margin:12px auto;gap:8px;padding:10px}
  .feature{padding:8px;gap:10px}
  .feature img{width:36px;height:36px}
  .feature p{font-size:14px}
  /* center left column content (including the button) on mobile */
  .tata-hero .left{width:100%;text-align:center}
  .know-more{font-size:18px;padding:14px 26px;display:inline-block;margin:18px auto 0}
}

/* make sure poster is visible on small screens */
@media (max-width:600px){
  .poster-card{padding:10px;margin:16px}
  /* on small screens keep minimum side gaps by limiting image width to viewport minus padding */
  .poster-img{max-height:60vh;max-width:calc(100% - 40px)}
}

/* small tweaks for tab landscape */
@media (min-width:601px) and (max-width:900px){
  .features-grid{grid-template-columns:1fr 1fr}
}

/* Floating Action Buttons */
.floating-buttons {
    position: fixed;
    bottom: 25px;
    right: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
}

.floating-button {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.floating-button:hover {
    transform: scale(1.1) rotate(10deg);
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.floating-button.call {
    background: #0052cc;
    color: white;
}

.floating-button.call i {
    transform: rotate(95deg);
}

.floating-button.whatsapp {
    background: #25D366;
    color: white;
}

.floating-button i {
    font-size: 28px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}