/* =========================================================
   ROOT
========================================================= */

:root{

    /* CHANGE VIDEO OPACITY HERE */
    --video-opacity:0.12;

    --primary:#00e5ff;
    --dark:#02050d;
    --light:#ffffff;
}

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


.india-text{
    background:linear-gradient(
        to bottom,
        #FF9933 0%,
        #FF9933 33%,
        #FFFFFF 33%,
        #FFFFFF 66%,
        #138808 66%,
        #138808 100%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;

    font-weight:800;
}

.hero-highlight{
    background:linear-gradient(90deg,#00e9f8,#00fbff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}




.hero{
    position:relative;
    width:100%;
    min-height:82vh;
    overflow:hidden;
    background:#0A0F14;

    display:flex;
    align-items:center;

    padding:70px 7% 60px;
}

/* =========================================================
   VIDEO
========================================================= */

.hero-video{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    opacity:var(--video-opacity);

    z-index:1;
}

/* =========================================================
   OVERLAY
========================================================= */

.hero-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
    to right,
    rgba(0,0,0,.88),
    rgba(0,0,0,.72),
    rgba(0,0,0,.85)
    );

    z-index:2;
}

/* =========================================================
   GRID
========================================================= */

.hero-grid{
    position:absolute;
    inset:0;

    background-image:
    linear-gradient(rgba(0,229,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.04) 1px, transparent 1px);

    background-size:55px 55px;

    animation:gridMove 12s linear infinite;

    z-index:2;
}

@keyframes gridMove{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(55px);
    }
}

/* =========================================================
   CONTAINER
========================================================= */

.hero-container{
    position:relative;
    z-index:5;

    width:100%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:50px;
}

/* =========================================================
   CONTENT
========================================================= */

.hero-content{
    width:58%;
}

/* ===== BADGE ===== */

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:9px 18px;

    border-radius:50px;

    border:1px solid rgba(0,229,255,.18);

    background:rgba(255,255,255,.03);

    color:#d7faff;

    font-size:12px;
    letter-spacing:2px;
    font-weight:600;

    margin-bottom:22px;

    backdrop-filter:blur(8px);
}

.hero-badge span{
    width:8px;
    height:8px;
    border-radius:50%;

    background:var(--primary);

    box-shadow:0 0 10px var(--primary);
}

/* ===== TITLE ===== */

.hero-title{
    font-size:58px;
    line-height:1.08;
    font-weight:800;

    color:#fff;

    margin-bottom:22px;
}

.hero-title span{
    color:var(--primary);

    text-shadow:
    0 0 25px rgba(0,229,255,.35);
}

/* ===== DESCRIPTION ===== */

.hero-desc{
    color:#b7c2d1;

    font-size:16px;
    line-height:1.8;

    max-width:700px;

    margin-bottom:35px;
}

/* =========================================================
   BUTTONS
========================================================= */

.hero-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

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

.hero-btn{
    padding:14px 26px;

    border-radius:12px;

    text-decoration:none;

    font-weight:700;

    display:flex;
    align-items:center;
    gap:10px;

    transition:.35s ease;
}

/* ===== PRIMARY ===== */

.primary-btn{
    background:
    linear-gradient(
    135deg,
     #00e8f8bd,
     #00e9f8
    );

    color:#fff;

    box-shadow:
    0 10px 30px rgba(0,229,255,.25);
}

.primary-btn:hover{
    transform:translateY(-3px);
}

/* ===== SECONDARY ===== */

.secondary-btn{
    border:1px solid rgba(255,255,255,.1);

    background:rgba(255,255,255,.03);

    color:#fff;

    backdrop-filter:blur(10px);
}

.secondary-btn:hover{
    border-color:var(--primary);

    background:rgba(0,229,255,.08);
}

/* =========================================================
   VISUAL
========================================================= */

.hero-visual{
    width:50%;

    display:flex;
    justify-content:center;
    align-items:center;
}

/* ===== LOGO BOX ===== */

.logo-box{
    width:450px;
    height:450px;

    display:flex;
    justify-content:center;
    align-items:center;

    position:relative;

    border-radius:25px;

    background:
    linear-gradient(
    145deg,
    rgb(0, 0, 0),
    rgb(0, 0, 0)
    );

    border:1px solid rgba(56, 242, 255, 0.401);

    backdrop-filter:blur(12px);

    box-shadow:
    0 0 40px rgba(0,229,255,.12);
}

/* ===== LOGO ===== */

.hero-logo{
    width:350px;

    filter:
    drop-shadow(0 0 18px rgba(0,229,255,.7));

    animation:logoRotate 8s linear infinite;
}

/* ===== SIMPLE 3D ROTATE ===== */

@keyframes logoRotate{

    0%{
        transform:
        rotateY(0deg);
    }

    100%{
        transform:
        rotateY(360deg);
    }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1000px){

    .hero-container{
        flex-direction:column;
        text-align:center;
    }

    .hero-content,
    .hero-visual{
        width:100%;
    }

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

    .hero-title{
        font-size:46px;
    }
}

@media(max-width:700px){

    .hero{
        min-height:auto;
        padding:110px 5% 70px;
    }

    .hero-title{
        font-size:34px;
    }

    .hero-desc{
        font-size:15px;
    }

    .logo-box{
        width:210px;
        height:210px;
    }

    .hero-logo{
        width:120px;
    }
}










/* =========================================
   TICKER
========================================= */
.ticker {
  background: var(--dark3);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 10px 0; overflow: hidden;
}
.ticker-track {
  display: flex; gap: 56px;
  width: max-content;
  animation: tickermove 42s linear infinite;
}
.ticker-track span {
  font-size: 12px; color: var(--text2);
  white-space: nowrap;
}
.ticker-track b { color: var(--cyan); font-weight: 600; }
@keyframes tickermove { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* =========================================
   SECTION COMMON
========================================= */
.sec { padding: 96px 20px; }
.sec-alt { background: var(--dark2); }
.inner { max-width: 1280px; margin: 0 auto; }

.sec-tag {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 2.5px; color: var(--cyan);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.sec-tag::before {
  content: ''; display: block;
  width: 22px; height: 1.5px; background: var(--cyan);
}
.sec-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700; color: var(--text);
  line-height: 1.15; margin-bottom: 12px;
}
.sec-title span { color: var(--cyan); }
.sec-desc {
  font-size: 15px; color: var(--text2);
  line-height: 1.85; max-width: 620px;
}
.divider {
  width: 44px; height: 2px;
  background: var(--cyan); border-radius: 2px;
  margin: 14px 0 44px;
}
.divider.c { margin: 14px auto 44px; }