/* style.css */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

body{
  background:#050505;
}

/* ========================= */
/* TOPBAR */
/* ========================= */

.topbar{
  width:100%;
  min-height:80px;

  background:linear-gradient(
  135deg,
  #1a0d00,
  #2b1300,
  #3b1700
  );

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

  padding:14px 5%;

  border-bottom:2px solid rgba(255,140,0,0.25);

  position:relative;
  overflow:hidden;
}

/* GLOW EFFECT */

.topbar::before{
  content:'';
  position:absolute;

  width:350px;
  height:350px;

  background:rgba(255,140,0,0.25);

  border-radius:50%;

  top:-200px;
  left:-120px;

  filter:blur(100px);
}

.topbar::after{
  content:'';
  position:absolute;

  width:300px;
  height:300px;

  background:rgba(255,90,0,0.15);

  border-radius:50%;

  bottom:-180px;
  right:-100px;

  filter:blur(100px);
}

/* ========================= */
/* LEFT */
/* ========================= */

.top-left{
  display:flex;
  align-items:center;
  gap:14px;

  z-index:2;
}

.social{
  width:45px;
  height:45px;

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

  border-radius:14px;

  text-decoration:none;

  color:#fff;

  font-size:18px;

  position:relative;

  overflow:hidden;

  transition:0.4s;
}

/* SOCIAL COLORS */

.insta{
  background:linear-gradient(135deg,#ff9800,#ff5722);
  box-shadow:0 0 20px rgba(255,120,0,0.5);
}

.fb{
  background:linear-gradient(135deg,#ff6a00,#ff9800);
  box-shadow:0 0 20px rgba(255,120,0,0.4);
}

.yt{
  background:linear-gradient(135deg,#ff3300,#ff6600);
  box-shadow:0 0 20px rgba(255,80,0,0.5);
}

.wa{
  background:linear-gradient(135deg,#ff9800,#ffcc00);
  box-shadow:0 0 20px rgba(255,180,0,0.5);
}

.social:hover{
  transform:translateY(-5px) scale(1.1);
}

/* ========================= */
/* CENTER */
/* ========================= */

.top-center{
  display:flex;
  align-items:center;
  gap:18px;

  z-index:2;
}

.top-center h3{
  color:#fff;

  font-size:15px;
  font-weight:600;

  letter-spacing:1px;

  text-shadow:0 0 10px rgba(255,140,0,0.7);
}

.top-center i{
  color:#ff9800;
}

.line{
  width:60px;
  height:2px;

  background:linear-gradient(
  to right,
  transparent,
  #ff9800,
  transparent
  );

  animation:glow 2s linear infinite;
}

@keyframes glow{

  0%{
    opacity:0.2;
  }

  50%{
    opacity:1;
  }

  100%{
    opacity:0.2;
  }

}

/* ========================= */
/* RIGHT */
/* ========================= */

.top-right{
  display:flex;
  align-items:center;
  gap:15px;

  z-index:2;
}

/* SEARCH */

.search-box{
  width:240px;
  height:48px;

  background:rgba(255,255,255,0.06);

  border:1px solid rgba(255,140,0,0.2);

  border-radius:14px;

  display:flex;
  align-items:center;

  padding:0 16px;

  backdrop-filter:blur(10px);

  transition:0.4s;
}

.search-box:hover{
  border-color:#ff9800;
  box-shadow:0 0 25px rgba(255,140,0,0.35);
}

.search-box input{
  width:100%;

  background:none;
  border:none;
  outline:none;

  color:#fff;

  font-size:14px;
}

.search-box input::placeholder{
  color:#ddd;
}

.search-box i{
  color:#ff9800;
}

/* LOGIN BUTTON */

.login-btn{
  height:48px;
  padding:0 22px;

  border:none;
  outline:none;

  border-radius:14px;

  background:linear-gradient(
  135deg,
  #ff9800,
  #ff5e00
  );

  color:#fff;

  font-weight:600;

  cursor:pointer;

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

  transition:0.4s;

  box-shadow:0 0 25px rgba(255,140,0,0.5);
}

.login-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 0 35px rgba(255,140,0,0.8);
}

/* LANGUAGE */

.lang-box{
  display:flex;
  align-items:center;
  gap:10px;
}

.lang-box button{
  width:52px;
  height:44px;

  border:none;
  outline:none;

  border-radius:12px;

  background:rgba(255,255,255,0.07);

  color:#fff;

  font-weight:600;

  cursor:pointer;

  transition:0.4s;
}

.lang-box button:hover{
  background:#ff9800;
}

.lang-box .active{
  background:linear-gradient(
  135deg,
  #ff9800,
  #ff5e00
  );

  box-shadow:0 0 20px rgba(255,140,0,0.5);
}

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

@media(max-width:1100px){

  .topbar{
    flex-direction:column;
    gap:20px;
    padding:20px;
  }

  .top-left{
    order:1;
  }

  .top-center{
    order:2;
  }

  .top-right{
    order:3;
    flex-wrap:wrap;
    justify-content:center;
  }

}

@media(max-width:650px){

  .top-center h3{
    font-size:13px;
    text-align:center;
  }

  .line{
    width:35px;
  }

  .top-right{
    width:100%;
    flex-direction:column;
  }

  .search-box{
    width:100%;
  }

  .login-btn{
    width:100%;
    justify-content:center;
  }

}



/* ========================= */
/* NAVBAR */
/* ========================= */

.navbar{
    width:100%;
    height:90px;

    background:linear-gradient(135deg, #cab9a8, #c75b06c2, #fff1e808);

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

    padding:0 5%;

    position:sticky;
    top:0;
    z-index:9999;

    border-bottom:1px solid rgba(255,140,0,0.2);

    overflow:hidden;
}

/* GLOW EFFECT */

.navbar::before{
    content:'';

    position:absolute;

    width:350px;
    height:350px;

    background:rgba(255,140,0,0.15);

    border-radius:50%;

    top:-200px;
    left:-150px;

    filter:blur(100px);
}

.navbar::after{
    content:'';

    position:absolute;

    width:300px;
    height:300px;

    background:rgba(255,80,0,0.12);

    border-radius:50%;

    bottom:-200px;
    right:-100px;

    filter:blur(100px);
}

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

.logo{
    display:flex;
    align-items:center;
    gap:14px;

    z-index:2;
}

.logo img{
    width:110px;
    height:110px;

    object-fit:contain;

    filter:drop-shadow(0 0 10px rgba(255,140,0,0.5));
}

.logo-text h2{
    color:#fff;
    font-size:30px;
    font-weight:700;

    line-height:1;
}

.logo-text span{
    color:#ff9800;
    font-size:12px;
    letter-spacing:2px;
}

/* ========================= */
/* NAV LINKS */
/* ========================= */

.nav-links{
    display:flex;
    align-items:center;
    gap:10px;

    list-style:none;

    z-index:2;
}

.nav-links li{
    position:relative;
}

.nav-links li a{
    text-decoration:none;

    color:#fff;

    font-size:15px;
    font-weight:500;

    padding:12px 18px;

    border-radius:12px;

    transition:0.4s;

    position:relative;

    overflow:hidden;
}

/* HOVER EFFECT */

.nav-links li a::before{
    content:'';

    position:absolute;

    width:0%;
    height:100%;

    background:linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    top:0;
    left:0;

    z-index:-1;

    transition:0.4s;
}

.nav-links li a:hover::before{
    width:100%;
}

.nav-links li a:hover{
    color:#fff;

    box-shadow:0 0 20px rgba(255,140,0,0.4);

    transform:translateY(-2px);
}

/* ACTIVE */

.nav-links li a.active{
    background:linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    box-shadow:0 0 20px rgba(255,140,0,0.5);
}

/* SOS BUTTON */

.sos-btn{
    background:linear-gradient(
    135deg,
    #ff0000,
    #ff5722
    ) !important;

    box-shadow:0 0 20px rgba(255,0,0,0.5);
}

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

.menu-toggle{
    width:45px;
    height:45px;

    display:none;

    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:6px;

    cursor:pointer;

    z-index:10001;

    border-radius:10px;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.2);
}

.menu-toggle span{
    width:24px;
    height:3px;

    background:#ff9800;

    border-radius:10px;

    transition:0.4s;
}

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

@media(max-width:1200px){

    .menu-toggle{
        display:flex;
    }

    .nav-links{
        position:fixed;

        top:0;
        right:-100%;

        width:320px;
        height:100vh;

        background:linear-gradient(135deg, #cab9a8, #c75b06c2, #fff1e808);

        flex-direction:column;

        align-items:flex-start;

        padding:120px 30px;

        gap:18px;

        transition:0.5s;

        border-left:1px solid rgba(255,140,0,0.2);

        backdrop-filter:blur(20px);
    }

    .nav-links.active{
        right:0;
    }

    .nav-links li{
        width:100%;
    }

    .nav-links li a{
        display:block;
        width:100%;
    }

}

/* MOBILE EXTRA */

@media(max-width:600px){

    .navbar{
        padding:0 20px;
    }

    .logo img{
        width:110px;
        height:110px;
    }

    .logo-text h2{
        font-size:30px;
    }

    .logo-text span{
        font-size:10px;
    }

}


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

.hero{
    width:100%;
    height:80vh;

    position:relative;

    overflow:hidden;

    background:#000;
}

/* ========================= */
/* HERO SLIDER */
/* ========================= */

.hero-slider{
    width:100%;
    height:100%;

    position:relative;
}

/* ========================= */
/* SLIDE */
/* ========================= */

.slide{
    width:100%;
    height:100%;

    position:absolute;

    top:0;
    left:0;

    opacity:0;
    visibility:hidden;

    transition:
    opacity 1.2s ease,
    visibility 1.2s ease;
}

/* ACTIVE */

.slide.active{
    opacity:1;
    visibility:visible;
}

/* ========================= */
/* PICTURE */
/* ========================= */

.slide picture{
    width:100%;
    height:100%;

    display:block;
}

/* ========================= */
/* IMAGE */
/* ========================= */

.slide picture img{
    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

    display:block;

    animation:zoomEffect 8s linear infinite;
}

/* ========================= */
/* ZOOM EFFECT */
/* ========================= */

@keyframes zoomEffect{

    0%{
        transform:scale(1);
    }

    100%{
        transform:scale(1.08);
    }

}

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

.overlay{
    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to right,
    rgba(0,0,0,0.82),
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.15)
    );

    z-index:1;
}

/* ========================= */
/* DIGITAL GLOW */
/* ========================= */

.hero::before{
    content:'';

    position:absolute;

    width:500px;
    height:500px;

    background:rgba(255,140,0,0.18);

    border-radius:50%;

    top:-200px;
    left:-150px;

    filter:blur(120px);

    z-index:2;
}

.hero::after{
    content:'';

    position:absolute;

    width:400px;
    height:400px;

    background:rgba(255,80,0,0.15);

    border-radius:50%;

    bottom:-200px;
    right:-150px;

    filter:blur(120px);

    z-index:2;
}

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

.hero-grid{
    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(255,140,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,140,0,0.03) 1px, transparent 1px);

    background-size:60px 60px;

    z-index:2;
}

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

.hero-content{
    position:absolute;

    top:55%;
    left:8%;

    transform:translateY(-50%);

    z-index:5;

    color:#fff;

    max-width:720px;
}

/* TAG */

.hero-content span{
    display:inline-block;

    padding:10px 22px;

    background:rgba(255,140,0,0.15);

    border:1px solid rgba(255,140,0,0.35);

    border-radius:40px;

    font-size:14px;
    font-weight:600;

    margin-bottom:22px;

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    color:#ffb347;

    letter-spacing:1px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.hero-content h1{
    font-size:clamp(42px,6vw,90px);

    line-height:1.05;

    margin-bottom:22px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.5),
    0 0 50px rgba(255,140,0,0.2);
}

/* ========================= */
/* TEXT */
/* ========================= */

.hero-content p{
    font-size:20px;

    color:#ddd;

    margin-bottom:35px;

    line-height:1.8;

    max-width:650px;
}

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

.hero-buttons{
    display:flex;

    gap:18px;

    flex-wrap:wrap;
}

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

.btn1{
    padding:16px 34px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    text-decoration:none;

    border-radius:14px;

    font-weight:700;

    transition:0.4s;

    box-shadow:
    0 0 25px rgba(255,140,0,0.4);
}

/* HOVER */

.btn1:hover{
    transform:translateY(-5px);

    box-shadow:
    0 0 40px rgba(255,140,0,0.7);
}

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

.btn2{
    padding:16px 34px;

    border:1px solid rgba(255,255,255,0.25);

    color:#fff;

    text-decoration:none;

    border-radius:14px;

    font-weight:700;

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    transition:0.4s;
}

/* HOVER */

.btn2:hover{
    background:#fff;

    color:#111;
}

/* ========================= */
/* DOTS */
/* ========================= */

.dots{
    position:absolute;

    left:50%;
    bottom:40px;

    transform:translateX(-50%);

    display:flex;

    gap:12px;

    z-index:10;
}

/* DOT */

.dot{
    width:14px;
    height:14px;

    border-radius:50%;

    background:rgba(255,255,255,0.4);

    cursor:pointer;

    transition:0.4s;
}

/* ACTIVE */

.dot.active{
    background:#ff9800;

    box-shadow:
    0 0 15px rgba(255,140,0,0.7);

    transform:scale(1.2);
}

/* ========================= */
/* SCROLL */
/* ========================= */

.scroll-down{
    position:absolute;

    left:50%;
    bottom:90px;

    transform:translateX(-50%);

    width:35px;
    height:60px;

    border:2px solid rgba(255,255,255,0.5);

    border-radius:30px;

    z-index:10;
}

/* INNER */

.scroll-down span{
    position:absolute;

    width:6px;
    height:12px;

    background:#fff;

    border-radius:20px;

    left:50%;
    top:10px;

    transform:translateX(-50%);

    animation:scrollAnim 2s infinite;
}

/* SCROLL ANIMATION */

@keyframes scrollAnim{

    0%{
        opacity:0;
        top:10px;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0;
        top:30px;
    }

}

/* ========================= */
/* LAPTOP */
/* ========================= */

@media(max-width:992px){

    .hero-content{
        left:6%;
    }

    .hero-content h1{
        font-size:60px;
    }

    .hero-content p{
        font-size:18px;
    }

}

/* ========================= */
/* TABLET */
/* ========================= */

@media(max-width:768px){

    .hero{
        height:80vh;
	
    }

    /* MOBILE IMAGE */

    .slide picture img{

        object-fit:cover;

        object-position:center;

        background:#000;

        animation:none;
    }

    /* CONTENT */

    .hero-content{

        top:58%;

        left:5%;
        right:5%;

        max-width:100%;

        text-align:center;
    }

    /* TAG */

    .hero-content span{
        font-size:12px;
    }

    /* TITLE */

    .hero-content h1{
        font-size:42px;

        line-height:1.15;
    }

    /* TEXT */

    .hero-content p{
        font-size:16px;

        margin:auto auto 30px;
    }

    /* BUTTONS */

    .hero-buttons{
        justify-content:center;

        gap:12px;
    }

    /* BUTTON */

    .btn1,
    .btn2{
        padding:14px 24px;

        font-size:14px;
    }

    /* GLOW */

    .hero::before{
        width:300px;
        height:300px;
    }

    .hero::after{
        width:250px;
        height:250px;
    }

}

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

@media(max-width:500px){

    .hero{
        height:75vh;
    }

    /* CONTENT */

    .hero-content{
        top:60%;
    }

    /* TITLE */

    .hero-content h1{
        font-size:34px;
    }

    /* TEXT */

    .hero-content p{
        font-size:14px;

        line-height:1.7;
    }

    /* BUTTON */

    .btn1,
    .btn2{
        width:100%;

        justify-content:center;

        text-align:center;
    }

    /* DOTS */

    .dots{
        bottom:18px;
    }

    /* SCROLL */

    .scroll-down{
        display:none;
    }

}

/* ========================= *//* ========================= */
/* ABOUT SECTION */
/* ========================= */

.about-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1b0d00,
    #2a1100
    );

    position:relative;

    overflow:hidden;
}

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

.about-grid-bg{
    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(255,140,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,140,0,0.03) 1px, transparent 1px);

    background-size:60px 60px;

    z-index:1;
}

/* ========================= */
/* GLOW */
/* ========================= */

.glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow1{
    width:400px;
    height:400px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow2{
    width:350px;
    height:350px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

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

.about-container{
    width:100%;

    position:relative;

    z-index:5;
}

/* ========================= */
/* TOP */
/* ========================= */

.about-top{
    text-align:center;

    max-width:1100px;

    margin:auto auto 80px;
}

/* TAG */

.about-tag{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:25px;

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);
}

/* HEADING */

.about-top h2{
    font-size:clamp(40px,6vw,72px);

    line-height:1.1;

    margin-bottom:28px;

    font-weight:800;

    text-transform:uppercase;

    color:#fff;

    text-shadow:
    0 0 20px rgba(255,140,0,0.4);
}

/* TEXT */

.about-text{
    font-size:18px;

    line-height:2;

    color:#ddd;

    max-width:1000px;

    margin:auto;
}

/* ========================= */
/* CARDS */
/* ========================= */

.about-cards{
    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:28px;

    margin-bottom:55px;
}

/* ========================= */
/* CARD */
/* ========================= */

.about-card{
    position:relative;

    overflow:hidden;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    padding:35px 30px;

    border-radius:28px;

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    transition:0.4s;

    box-shadow:
    0 0 30px rgba(255,140,0,0.08);
}

/* TOP BORDER */

.about-card::before{
    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* HOVER */

.about-card:hover{
    transform:translateY(-10px);

    border-color:#ff9800;

    box-shadow:
    0 0 40px rgba(255,140,0,0.22);
}

/* ICON */

.card-icon{
    width:80px;
    min-width:80px;
    height:80px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    border-radius:22px;

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

    font-size:32px;

    color:#fff;

    margin-bottom:28px;

    box-shadow:
    0 0 25px rgba(255,140,0,0.4);
}

/* TITLE */

.card-content h3{
    font-size:28px;

    margin-bottom:16px;

    color:#fff;

    font-weight:700;
}

/* TEXT */

.card-content p{
    color:#ccc;

    line-height:1.9;

    font-size:15px;
}

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

.about-btn-wrapper{
    text-align:center;
}

/* BUTTON */

.about-btn{
    display:inline-block;

    padding:18px 38px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    text-decoration:none;

    border-radius:16px;

    font-weight:700;

    transition:0.4s;

    box-shadow:
    0 0 25px rgba(255,140,0,0.4);
}

/* HOVER */

.about-btn:hover{
    transform:translateY(-6px);

    box-shadow:
    0 0 40px rgba(255,140,0,0.7);
}

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

@media(max-width:1100px){

    .about-cards{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .about-section{
        padding:90px 5%;
    }

    .about-top h2{
        font-size:42px;
    }

    .about-text{
        font-size:16px;
    }

    .about-card{
        padding:30px 24px;
    }

    .card-content h3{
        font-size:24px;
    }

    .card-content p{
        font-size:14px;
    }

}

@media(max-width:500px){

    .about-top h2{
        font-size:32px;
    }

    .about-text{
        font-size:14px;
    }

    .card-icon{
        width:70px;
        min-width:70px;
        height:70px;

        font-size:28px;
    }

    .card-content h3{
        font-size:22px;
    }

    .about-btn{
        width:100%;

        text-align:center;
    }

}

/* ========================= */
/* CAMPAIGN SECTION */
/* ========================= */

.campaign-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #140800,
    #221000,
    #311300
    );

    position:relative;

    overflow:hidden;
}

/* GLOW */

.campaign-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:400px;
    height:400px;

    background:rgba(255,140,0,0.15);

    top:-120px;
    left:-100px;
}

.glow-right{
    width:350px;
    height:350px;

    background:rgba(255,90,0,0.12);

    bottom:-120px;
    right:-100px;
}

/* HEADING */

.campaign-heading{
    text-align:center;

    position:relative;

    z-index:5;

    margin-bottom:70px;
}

.campaign-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:25px;

    backdrop-filter:blur(10px);
}

.campaign-heading h2{
    color:#fff;

    font-size:60px;

    line-height:1.2;

    margin-bottom:20px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.3);
}

.campaign-heading p{
    max-width:850px;

    margin:auto;

    color:#ccc;

    font-size:18px;

    line-height:1.8;
}

/* SLIDER */

.campaign-slider{
    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

    position:relative;

    z-index:5;
}

/* CARD */

.campaign-card{
    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:28px;

    overflow:hidden;

    backdrop-filter:blur(14px);

    transition:0.5s;

    position:relative;
}

.campaign-card:hover{
    transform:translateY(-12px);

    border-color:#ff9800;

    box-shadow:
    0 0 35px rgba(255,140,0,0.2);
}

/* IMAGE */

.card-image{
    position:relative;

    width:100%;
    height:250px;

    overflow:hidden;
}

.card-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.7s;
}

.campaign-card:hover .card-image img{
    transform:scale(1.1);
}

/* OVERLAY */

.card-overlay{
    position:absolute;

    width:100%;
    height:100%;

    top:0;
    left:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,0.8),
    rgba(0,0,0,0.15)
    );
}

/* ICON */

.card-icon{
    position:absolute;

    bottom:-30px;
    left:30px;

    width:70px;
    height:70px;

    border-radius:20px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:28px;

    box-shadow:
    0 0 25px rgba(255,140,0,0.5);

    z-index:5;
}

/* CONTENT */

.card-content{
    padding:55px 30px 35px;
}

.card-content h3{
    color:#fff;

    font-size:28px;

    margin-bottom:16px;

    font-weight:700;
}

.card-content p{
    color:#ccc;

    line-height:1.8;

    font-size:15px;

    margin-bottom:28px;
}

/* BUTTON */

.card-content a{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:14px 24px;

    border-radius:14px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:0.4s;

    box-shadow:
    0 0 20px rgba(255,140,0,0.3);
}

.card-content a:hover{
    transform:translateX(6px);

    box-shadow:
    0 0 30px rgba(255,140,0,0.7);
}

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

@media(max-width:992px){

    .campaign-heading h2{
        font-size:45px;
    }


    .campaign-heading p{
        font-size:16px;
    }

}

@media(max-width:768px){

    .campaign-section{
        padding:90px 5%;
    }

    .campaign-heading h2{
        font-size:36px;
    }

    .campaign-slider{
        grid-template-columns:1fr;
    }

}

@media(max-width:500px){

    .campaign-heading h2{
        font-size:28px;
    }

    .card-content{
        padding:50px 22px 28px;
    }

    .card-content h3{
        font-size:22px;
    }

    .card-content p{
        font-size:14px;
    }

}



/* ========================= */
/* PROMISE SECTION */
/* ========================= */

.promise-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #140800,
    #221000,
    #311300
    );

    position:relative;

    overflow:hidden;
}

/* GLOW */

.promise-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:400px;
    height:400px;

    background:rgba(255,140,0,0.15);

    top:-120px;
    left:-100px;
}

.glow-right{
    width:350px;
    height:350px;

    background:rgba(255,80,0,0.12);

    bottom:-120px;
    right:-100px;
}

/* HEADING */

.promise-heading{
    text-align:center;

    position:relative;

    z-index:5;

    margin-bottom:80px;
}

.promise-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:25px;
}

.promise-heading h2{
    color:#fff;

    font-size:60px;

    line-height:1.2;

    margin-bottom:20px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.3);
}

.promise-heading p{
    max-width:850px;

    margin:auto;

    color:#ccc;

    font-size:18px;

    line-height:1.8;
}

/* GRID */

.promise-grid{
    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:35px;

    position:relative;

    z-index:5;
}

/* CARD */

.promise-card{
    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:28px;

    padding:40px 25px;

    text-align:center;

    backdrop-filter:blur(14px);

    transition:0.5s;
}

.promise-card:hover{
    transform:translateY(-12px);

    border-color:#ff9800;

    box-shadow:
    0 0 35px rgba(255,140,0,0.2);
}

/* CIRCLE */

.circle-wrap{
    position:relative;

    width:150px;
    height:150px;

    margin:auto auto 30px;
}

/* SVG */

.circle-wrap svg{
    width:150px;
    height:150px;

    transform:rotate(-90deg);
}

.circle-wrap svg circle{
    fill:none;

    stroke-width:10;

    stroke-linecap:round;
}

/* BG CIRCLE */

.circle-wrap svg circle:first-child{
    stroke:rgba(255,255,255,0.08);
}

/* PROGRESS */

.progress{
    stroke:#ff9800;

    stroke-dasharray:377;

    stroke-dashoffset:377;

    filter:
    drop-shadow(0 0 12px rgba(255,140,0,0.7));

    animation:progressAnim 3s forwards;
}

/* DIFFERENT VALUES */

.progress1{
    stroke-dashoffset:70;
}

.progress2{
    stroke-dashoffset:120;
}

.progress3{
    stroke-dashoffset:180;
}

.progress4{
    stroke-dashoffset:100;
}

/* CONTENT */

.circle-content{
    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    display:flex;
    flex-direction:column;

    align-items:center;
}

.circle-content i{
    font-size:26px;

    color:#ff9800;

    margin-bottom:8px;

    text-shadow:
    0 0 15px rgba(255,140,0,0.7);
}

.circle-content h3{
    color:#fff;

    font-size:30px;

    font-weight:800;
}

.circle-content span{
    color:#ffb347;

    font-size:18px;

    font-weight:600;
}

/* TITLE */

.promise-card h4{
    color:#fff;

    font-size:24px;

    margin-bottom:15px;
}

/* TEXT */

.promise-card p{
    color:#ccc;

    line-height:1.8;

    font-size:15px;
}

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

@media(max-width:992px){

    .promise-heading h2{
        font-size:45px;
    }

}

@media(max-width:768px){

    .promise-section{
        padding:90px 5%;
    }

    .promise-heading h2{
        font-size:36px;
    }

    .promise-heading p{
        font-size:16px;
    }

}

@media(max-width:500px){

    .promise-heading h2{
        font-size:28px;
    }

    .promise-card{
        padding:35px 20px;
    }

    .promise-card h4{
        font-size:20px;
    }

    .promise-card p{
        font-size:14px;
    }

}



/* ========================= */
/* LEADER SECTION */
/* ========================= */

.leader-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1d0c00,
    #2c1200
    );

    position:relative;

    overflow:hidden;
}

/* DIGITAL GRID */

.leader-section::before{
    content:'';

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(255,140,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,140,0,0.03) 1px, transparent 1px);

    background-size:60px 60px;

    z-index:1;
}

/* ========================= */
/* GLOW EFFECTS */
/* ========================= */

.leader-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:400px;
    height:400px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:350px;
    height:350px;

    background:rgba(255,90,0,0.12);

    bottom:-150px;
    right:-100px;
}

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

.leader-container{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

    position:relative;

    z-index:5;
}

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

.leader-video-box{
    position:relative;
}

/* VIDEO FRAME */

.video-frame{
    position:relative;

    width:100%;

    border-radius:30px;

    overflow:hidden;

    isolation:isolate;

    border:1px solid rgba(255,140,0,0.15);

    box-shadow:
    0 0 40px rgba(255,140,0,0.15);

    backdrop-filter:blur(10px);

    animation:floatVideo 5s ease-in-out infinite;
}

/* FLOAT ANIMATION */

@keyframes floatVideo{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* VIDEO */

.video-frame video{
    width:100%;
    height:650px;

    object-fit:cover;

    display:block;

    transition:0.7s;
}

/* HOVER */

.video-frame:hover video{
    transform:scale(1.05);
}

/* DARK OVERLAY */

.video-frame::before{
    content:'';

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,0.7),
    rgba(0,0,0,0.15)
    );

    z-index:2;
}

/* VIDEO OVERLAY */

.video-overlay{
    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,0.5),
    rgba(0,0,0,0.05)
    );

    z-index:2;
}

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

.sound-btn{
    position:absolute;

    top:25px;
    right:25px;

    width:65px;
    height:65px;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:24px;

    cursor:pointer;

    z-index:5;

    box-shadow:
    0 0 25px rgba(255,140,0,0.5);

    transition:0.4s;

    animation:pulseBtn 2s infinite;
}

/* HOVER */

.sound-btn:hover{
    transform:scale(1.1);

    box-shadow:
    0 0 40px rgba(255,140,0,0.8);
}

/* PULSE */

@keyframes pulseBtn{

    0%{
        box-shadow:
        0 0 0 rgba(255,140,0,0.7);
    }

    70%{
        box-shadow:
        0 0 40px rgba(255,140,0,0);
    }

    100%{
        box-shadow:
        0 0 0 rgba(255,140,0,0);
    }

}

/* ========================= */
/* BORDER ANIMATION */
/* ========================= */

.border-animation{
    position:absolute;

    inset:0;

    border-radius:30px;

    border:2px solid rgba(255,140,0,0.15);

    animation:borderGlow 4s linear infinite;

    z-index:4;
}

/* GLOW */

@keyframes borderGlow{

    0%{
        border-color:rgba(255,140,0,0.1);
    }

    50%{
        border-color:rgba(255,140,0,0.6);
    }

    100%{
        border-color:rgba(255,140,0,0.1);
    }

}

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

.leader-content{
    color:#fff;
}

/* TAG */

.leader-tag{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:25px;
}

/* HEADING */

.leader-content h2{
    font-size:clamp(38px,5vw,60px);

    line-height:1.2;

    margin-bottom:25px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* SPEECH */

.speech{
    font-size:22px;

    line-height:1.8;

    color:#fff;

    margin-bottom:25px;

    font-weight:500;
}

/* SECOND SPEECH */

.speech2{
    color:#ccc;

    font-size:17px;

    line-height:1.9;

    margin-bottom:40px;
}

/* ========================= */
/* SIGNATURE */
/* ========================= */

.signature-box{
    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:45px;
}

/* SIGN IMAGE */

.signature-box img{
    width:180px;

    object-fit:contain;

    filter:
    drop-shadow(0 0 10px rgba(255,140,0,0.5));
}

/* SIGN INFO */

.sign-info h4{
    color:#fff;

    font-size:24px;

    margin-bottom:5px;
}

.sign-info span{
    color:#ffb347;

    font-size:15px;
}

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

.leader-buttons{
    display:flex;

    gap:18px;

    flex-wrap:wrap;
}

/* BTN 1 */

.leader-btn1{
    padding:16px 34px;

    border-radius:14px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:0.4s;

    box-shadow:
    0 0 25px rgba(255,140,0,0.35);
}

/* HOVER */

.leader-btn1:hover{
    transform:translateY(-5px);

    box-shadow:
    0 0 35px rgba(255,140,0,0.7);
}

/* BTN 2 */

.leader-btn2{
    padding:16px 34px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,0.18);

    color:#fff;

    text-decoration:none;

    backdrop-filter:blur(10px);

    transition:0.4s;
}

/* HOVER */

.leader-btn2:hover{
    background:#fff;

    color:#111;
}

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

@media(max-width:1100px){

    .leader-container{
        grid-template-columns:1fr;
    }

}

/* TABLET */

@media(max-width:768px){

    .leader-section{
        padding:90px 5%;
    }

    .leader-content h2{
        font-size:42px;
    }

    .speech{
        font-size:18px;
    }

    .speech2{
        font-size:15px;
    }

    .video-frame video{
        height:500px;
    }

    .sound-btn{
        width:55px;
        height:55px;

        font-size:20px;
    }

}

/* MOBILE */

@media(max-width:500px){

    .leader-content h2{
        font-size:32px;
    }

    .speech{
        font-size:16px;
    }

    .speech2{
        font-size:14px;
    }

    .video-frame video{
        height:420px;
    }

    .signature-box{
        flex-direction:column;

        align-items:flex-start;
    }

    .leader-btn1,
    .leader-btn2{
        width:100%;

        text-align:center;
    }

    .sound-btn{
        width:50px;
        height:50px;

        font-size:18px;

        top:18px;
        right:18px;
    }

}


/* ========================= */
/* NEWS SECTION */
/* ========================= */

.news-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #130700,
    #1f0d00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* GLOW */

.news-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:400px;
    height:400px;

    background:rgba(255,140,0,0.15);

    top:-120px;
    left:-100px;
}

.glow-right{
    width:350px;
    height:350px;

    background:rgba(255,80,0,0.12);

    bottom:-120px;
    right:-100px;
}

/* HEADING */

.news-heading{
    text-align:center;

    position:relative;

    z-index:5;

    margin-bottom:70px;
}

.news-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:25px;
}

.news-heading h2{
    color:#fff;

    font-size:60px;

    line-height:1.2;

    margin-bottom:20px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

.news-heading p{
    max-width:850px;

    margin:auto;

    color:#ccc;

    font-size:18px;

    line-height:1.8;
}

/* MASONRY GRID */

.masonry-grid{
    columns:3 320px;

    column-gap:30px;

    position:relative;

    z-index:5;
}

/* CARD */

.news-card{
    position:relative;

    margin-bottom:30px;

    border-radius:28px;

    overflow:hidden;

    break-inside:avoid;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.12);

    backdrop-filter:blur(14px);

    transition:0.5s;
}

.news-card:hover{
    transform:translateY(-10px);

    border-color:#ff9800;

    box-shadow:
    0 0 35px rgba(255,140,0,0.2);
}

/* IMAGE */

.news-image{
    position:relative;

    overflow:hidden;
}

.news-image img{
    width:100%;

    height:auto;

    display:block;

    transition:0.7s;
}

.news-card:hover .news-image img{
    transform:scale(1.1);
}

/* OVERLAY */

.news-overlay{
    position:absolute;

    width:100%;
    height:100%;

    top:0;
    left:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,0.85),
    rgba(0,0,0,0.1)
    );
}

/* CONTENT */

.news-content{
    position:absolute;

    left:0;
    bottom:0;

    width:100%;

    padding:30px;

    z-index:5;
}

/* TAG */

.news-tag{
    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    font-size:12px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:18px;

    box-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TITLE */

.news-content h3{
    color:#fff;

    font-size:28px;

    line-height:1.4;

    margin-bottom:16px;

    font-weight:700;

    text-shadow:
    0 0 10px rgba(0,0,0,0.5);
}

/* TEXT */

.news-content p{
    color:#ddd;

    font-size:15px;

    line-height:1.8;

    margin-bottom:24px;
}

/* BUTTON */

.news-content a{
    display:inline-flex;
    align-items:center;
    gap:10px;

    color:#ffb347;

    text-decoration:none;

    font-weight:600;

    transition:0.4s;
}

.news-content a:hover{
    gap:16px;

    color:#fff;
}

/* CARD SIZES */

.large .news-image img{
    height:600px;
    object-fit:cover;
}

.tall .news-image img{
    height:720px;
    object-fit:cover;
}

.news-card:not(.large):not(.tall) .news-image img{
    height:400px;
    object-fit:cover;
}

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

@media(max-width:992px){

    .news-heading h2{
        font-size:45px;
    }

}

@media(max-width:768px){

    .news-section{
        padding:90px 5%;
    }

    .news-heading h2{
        font-size:36px;
    }

    .news-heading p{
        font-size:16px;
    }

    .news-content{
        padding:24px;
    }

    .news-content h3{
        font-size:22px;
    }

}

@media(max-width:500px){

    .news-heading h2{
        font-size:28px;
    }

    .news-content h3{
        font-size:20px;
    }

    .news-content p{
        font-size:14px;
    }

}



/* ========================= */
/* JOIN SECTION */
/* ========================= */

.join-section{
    width:100%;

    padding:140px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1e0c00,
    #311300
    );

    position:relative;

    overflow:hidden;

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

    text-align:center;
}

/* ========================= */
/* GLOW EFFECTS */
/* ========================= */

.join-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow1{
    width:450px;
    height:450px;

    background:rgba(255,140,0,0.16);

    top:-180px;
    left:-120px;
}

.glow2{
    width:400px;
    height:400px;

    background:rgba(255,80,0,0.12);

    bottom:-180px;
    right:-120px;
}

/* ========================= */
/* PARTICLES */
/* ========================= */

.particles{
    position:absolute;

    inset:0;

    background-image:
    radial-gradient(rgba(255,140,0,0.35) 1px, transparent 1px);

    background-size:40px 40px;

    opacity:0.25;

    animation:moveParticles 15s linear infinite;
}

@keyframes moveParticles{

    0%{
        transform:translateY(0px);
    }

    100%{
        transform:translateY(-80px);
    }

}

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

.join-content{
    position:relative;

    z-index:5;

    max-width:950px;
}

/* TAG */

.join-tag{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;

    backdrop-filter:blur(10px);
}

/* HEADING */

.join-content h2{
    color:#fff;

    font-size:80px;

    line-height:1.15;

    margin-bottom:28px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 25px rgba(255,140,0,0.4);
}

/* TEXT */

.join-content p{
    color:#ddd;

    font-size:20px;

    line-height:1.9;

    margin-bottom:50px;
}

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

.join-buttons{
    display:flex;
    justify-content:center;
    gap:22px;

    flex-wrap:wrap;
}

/* COMMON BUTTON */

.join-btn{
    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:18px 34px;

    border-radius:18px;

    text-decoration:none;

    font-size:16px;
    font-weight:600;

    overflow:hidden;

    transition:0.5s;
}

/* PRIMARY */

.primary-btn{
    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    box-shadow:
    0 0 25px rgba(255,140,0,0.35);
}

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

    box-shadow:
    0 0 40px rgba(255,140,0,0.75);
}

/* SECONDARY */

.secondary-btn{
    background:
    linear-gradient(
    135deg,
    #ff6a00,
    #ff3300
    );

    color:#fff;

    box-shadow:
    0 0 25px rgba(255,90,0,0.35);
}

.secondary-btn:hover{
    transform:translateY(-6px);

    box-shadow:
    0 0 40px rgba(255,90,0,0.75);
}

/* GLASS BUTTON */

.glass-btn{
    background:rgba(255,255,255,0.06);

    border:1px solid rgba(255,255,255,0.12);

    color:#fff;

    backdrop-filter:blur(14px);
}

.glass-btn:hover{
    background:#fff;

    color:#111;

    transform:translateY(-6px);
}

/* ICONS */

.join-btn i{
    font-size:18px;
}

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

@media(max-width:992px){

    .join-content h2{
        font-size:58px;
    }

    .join-content p{
        font-size:18px;
    }

}

@media(max-width:768px){

    .join-section{
        padding:100px 5%;
    }

    .join-content h2{
        font-size:42px;
    }

    .join-content p{
        font-size:16px;
    }

}

@media(max-width:500px){

    .join-content h2{
        font-size:32px;
    }

    .join-content p{
        font-size:14px;
    }

    .join-buttons{
        flex-direction:column;
    }

    .join-btn{
        width:100%;
    }

}



/* ========================= */
/* FOOTER */
/* ========================= */

.footer{
    width:100%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1c0c00,
    #2c1200
    );

    position:relative;

    overflow:hidden;

    padding-top:100px;
}

/* GLOW */

.footer-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:400px;
    height:400px;

    background:rgba(255,140,0,0.14);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:350px;
    height:350px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

/* ========================= */
/* TOP */
/* ========================= */

.footer-top{
    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:50px;

    padding:0 7% 70px;
}

/* COLUMN */

.footer-col{
    color:#fff;
}

/* LOGO */

.footer-logo{
    display:flex;
    align-items:center;

    gap:15px;

    margin-bottom:25px;
}

.footer-logo img{
    width:128px;

    object-fit:contain;

    filter:
    drop-shadow(0 0 15px rgba(255,140,0,0.5));
}

.footer-logo h2{
    font-size:28px;

    margin-bottom:4px;
}

.footer-logo span{
    color:#ffb347;

    font-size:13px;

    letter-spacing:2px;
}

/* ABOUT */

.footer-about{
    color:#ccc;

    line-height:1.9;

    margin-bottom:30px;

    font-size:15px;
}

/* SOCIAL */

.footer-social{
    display:flex;

    gap:14px;

    flex-wrap:wrap;
}

.footer-social a{
    width:48px;
    height:48px;

    border-radius:14px;

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

    text-decoration:none;

    color:#fff;

    background:rgba(255,255,255,0.06);

    border:1px solid rgba(255,140,0,0.12);

    transition:0.4s;

    backdrop-filter:blur(10px);
}

.footer-social a:hover{
    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    transform:translateY(-6px);

    box-shadow:
    0 0 25px rgba(255,140,0,0.4);
}

/* HEADING */

.footer-col h3{
    font-size:28px;

    margin-bottom:28px;

    position:relative;
}

.footer-col h3::after{
    content:'';

    position:absolute;

    width:70px;
    height:3px;

    background:
    linear-gradient(
    to right,
    #ff9800,
    transparent
    );

    left:0;
    bottom:-10px;
}

/* LINKS */

.footer-col ul{
    list-style:none;
}

.footer-col ul li{
    margin-bottom:16px;
}

/* LINKS */

.footer-col ul li a{
    color:#ccc;

    text-decoration:none;

    transition:0.4s;

    display:inline-block;
}

.footer-col ul li a:hover{
    color:#ff9800;

    transform:translateX(8px);
}

/* CONTACT */

.contact-info li{
    display:flex;

    align-items:center;

    gap:14px;

    color:#ccc;

    line-height:1.8;
}

.contact-info li i{
    color:#ff9800;

    font-size:18px;
}

/* BUTTONS */

.footer-buttons{
    display:flex;

    gap:16px;

    margin-top:30px;

    flex-wrap:wrap;
}

/* BTN */

.footer-btn{
    padding:14px 24px;

    border-radius:14px;

    text-decoration:none;

    color:#fff;

    font-weight:600;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    transition:0.4s;

    box-shadow:
    0 0 25px rgba(255,140,0,0.3);
}

.footer-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 0 35px rgba(255,140,0,0.7);
}

/* DONATE */

.donate-btn{
    background:
    linear-gradient(
    135deg,
    #ff4d00,
    #ff0000
    );
}

/* ========================= */
/* FOOTER BOTTOM */
/* ========================= */

.footer-bottom{
    position:relative;

    z-index:5;

    border-top:1px solid rgba(255,255,255,0.08);

    padding:28px 7%;

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

    flex-wrap:wrap;

    gap:20px;
}

/* LEFT */

.footer-bottom-left{
    display:flex;

    gap:25px;

    flex-wrap:wrap;
}

.footer-bottom-left a{
    color:#aaa;

    text-decoration:none;

    transition:0.4s;
}

.footer-bottom-left a:hover{
    color:#ff9800;
}

/* RIGHT */

.footer-bottom-right{
    color:#aaa;

    font-size:14px;
}

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

@media(max-width:992px){

    .footer-top{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:768px){

    .footer{
        padding-top:80px;
    }

    .footer-top{
        grid-template-columns:1fr;

        padding:0 5% 60px;
    }

    .footer-bottom{
        padding:24px 5%;

        flex-direction:column;

        text-align:center;
    }

    .footer-bottom-left{
        justify-content:center;
    }

}

@media(max-width:500px){

    .footer-logo h2{
        font-size:22px;
    }

    .footer-col h3{
        font-size:24px;
    }

    .footer-buttons{
        flex-direction:column;
    }

    .footer-btn{
        text-align:center;
    }

}












<!------------------- about page codes css -----------------------!>


/* ========================= */
/* OUR STORY SECTION */
/* ========================= */

.our-story{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #130700,
    #1d0c00,
    #2d1200
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.story-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

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

.story-container{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    position:relative;

    z-index:5;
}

/* ========================= */
/* IMAGE */
/* ========================= */

.story-image-box{
    position:relative;
}

.story-image{
    position:relative;

    overflow:hidden;

    border-radius:30px;

    border:1px solid rgba(255,140,0,0.15);

    box-shadow:
    0 0 40px rgba(255,140,0,0.15);
}

/* IMAGE */

.story-image img{
    width:100%;
    height:700px;

    object-fit:cover;

    transition:0.7s;
}

.story-image:hover img{
    transform:scale(1.08);
}

/* FLOATING CARDS */

.story-card{
    position:absolute;

    background:rgba(255,255,255,0.06);

    border:1px solid rgba(255,140,0,0.15);

    backdrop-filter:blur(14px);

    border-radius:22px;

    padding:22px 24px;

    color:#fff;

    display:flex;
    align-items:center;

    gap:15px;

    animation:floatCard 5s ease-in-out infinite;

    box-shadow:
    0 0 25px rgba(255,140,0,0.15);
}

.story-card i{
    width:55px;
    height:55px;

    border-radius:16px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    font-size:22px;

    color:#fff;
}

.story-card h4{
    font-size:20px;
}

/* POSITIONS */

.card1{
    top:40px;
    left:-40px;
}

.card2{
    bottom:40px;
    right:-40px;
}

/* FLOAT */

@keyframes floatCard{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-14px);
    }

    100%{
        transform:translateY(0px);
    }

}

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

.story-content{
    color:#fff;
}

/* TAG */

.story-tag{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* HEADING */

.story-content h2{
    font-size:65px;

    line-height:1.15;

    margin-bottom:30px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.3);
}

/* TEXT */

.story-content p{
    color:#ccc;

    font-size:17px;

    line-height:1.9;

    margin-bottom:24px;
}

/* ========================= */
/* TIMELINE */
/* ========================= */

.story-timeline{
    margin-top:45px;

    display:flex;
    flex-direction:column;

    gap:24px;
}

/* ITEM */

.timeline-item{
    display:flex;

    gap:20px;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:22px;

    padding:24px;

    transition:0.4s;
}

.timeline-item:hover{
    transform:translateX(10px);

    border-color:#ff9800;

    box-shadow:
    0 0 30px rgba(255,140,0,0.15);
}

/* ICON */

.timeline-icon{
    min-width:65px;
    height:65px;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:24px;
}

/* TEXT */

.timeline-text h4{
    font-size:24px;

    margin-bottom:10px;
}

.timeline-text p{
    margin:0;

    font-size:15px;

    color:#ccc;
}

/* BUTTON */

.story-btn{
    display:inline-block;

    margin-top:45px;

    padding:18px 34px;

    border-radius:16px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:0.4s;

    box-shadow:
    0 0 25px rgba(255,140,0,0.35);
}

.story-btn:hover{
    transform:translateY(-6px);

    box-shadow:
    0 0 40px rgba(255,140,0,0.75);
}

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

@media(max-width:1100px){

    .story-container{
        grid-template-columns:1fr;
    }

    .story-image img{
        height:550px;
    }

}

@media(max-width:768px){

    .our-story{
        padding:90px 5%;
    }

    .story-content h2{
        font-size:42px;
    }

    .story-content p{
        font-size:15px;
    }

    .timeline-text h4{
        font-size:20px;
    }

    .story-card{
        display:none;
    }

}

@media(max-width:500px){

    .story-content h2{
        font-size:32px;
    }

    .story-image img{
        height:500px;
    }

    .timeline-item{
        flex-direction:column;
    }

    .story-btn{
        width:100%;

        text-align:center;
    }

}


/* ========================= */
/* VISION MISSION SECTION */
/* ========================= */

.vision-mission-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #130700,
    #1e0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.vm-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.vm-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto auto 80px;
}

/* TAG */

.vm-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;

    backdrop-filter:blur(10px);
}

/* HEADING */

.vm-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.vm-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

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

.vm-container{
    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

    position:relative;

    z-index:5;
}

/* ========================= */
/* CARD */
/* ========================= */

.vm-card{
    position:relative;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:32px;

    padding:45px;

    overflow:hidden;

    backdrop-filter:blur(14px);

    transition:0.5s;
}

/* HOVER */

.vm-card:hover{
    transform:translateY(-10px);

    border-color:#ff9800;

    box-shadow:
    0 0 40px rgba(255,140,0,0.2);
}

/* TOP LINE */

.vm-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* ========================= */
/* ICON */
/* ========================= */

.vm-icon{
    width:90px;
    height:90px;

    border-radius:24px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    font-size:34px;

    color:#fff;

    margin-bottom:30px;

    box-shadow:
    0 0 30px rgba(255,140,0,0.4);
}

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

.card-tag{
    display:inline-block;

    color:#ffb347;

    font-size:13px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:18px;
}

/* TITLE */

.vm-content h3{
    color:#fff;

    font-size:38px;

    line-height:1.3;

    margin-bottom:22px;

    font-weight:700;
}

/* TEXT */

.vm-content p{
    color:#ccc;

    font-size:16px;

    line-height:1.9;

    margin-bottom:35px;
}

/* ========================= */
/* FEATURES */
/* ========================= */

.vm-features{
    display:flex;
    flex-direction:column;

    gap:18px;
}

/* FEATURE */

.feature{
    display:flex;
    align-items:center;

    gap:14px;

    background:rgba(255,255,255,0.03);

    border:1px solid rgba(255,140,0,0.08);

    padding:16px 18px;

    border-radius:16px;

    transition:0.4s;
}

.feature:hover{
    transform:translateX(8px);

    border-color:#ff9800;

    background:rgba(255,140,0,0.06);
}

/* ICON */

.feature i{
    width:34px;
    height:34px;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:14px;
}

/* TEXT */

.feature span{
    color:#fff;

    font-size:15px;

    font-weight:500;
}

/* SPECIAL CARD */

.mission-card{
    background:
    linear-gradient(
    135deg,
    rgba(255,140,0,0.05),
    rgba(255,80,0,0.04)
    );
}

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

@media(max-width:1100px){

    .vm-container{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .vision-mission-section{
        padding:90px 5%;
    }

    .vm-heading h2{
        font-size:42px;
    }

    .vm-heading p{
        font-size:16px;
    }

    .vm-card{
        padding:35px;
    }

    .vm-content h3{
        font-size:30px;
    }

}

@media(max-width:500px){

    .vm-heading h2{
        font-size:32px;
    }

    .vm-content h3{
        font-size:24px;
    }

    .vm-content p{
        font-size:14px;
    }

    .vm-card{
        padding:28px 22px;
    }

    .vm-icon{
        width:75px;
        height:75px;

        font-size:28px;
    }

}



/* ========================= */
/* PARTY IDEOLOGY SECTION */
/* ========================= */

.ideology-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #130700,
    #1f0d00,
    #2d1200
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.ideology-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.ideology-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto auto 80px;
}

/* TAG */

.ideology-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;

    backdrop-filter:blur(10px);
}

/* TITLE */

.ideology-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.ideology-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

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

.ideology-grid{
    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

    position:relative;

    z-index:5;
}

/* ========================= */
/* CARD */
/* ========================= */

.ideology-card{
    position:relative;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:30px;

    padding:45px 35px;

    overflow:hidden;

    backdrop-filter:blur(14px);

    transition:0.5s;
}

/* TOP GLOW */

.ideology-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* HOVER */

.ideology-card:hover{
    transform:translateY(-12px);

    border-color:#ff9800;

    box-shadow:
    0 0 40px rgba(255,140,0,0.2);
}

/* ========================= */
/* ICON */
/* ========================= */

.ideology-icon{
    width:90px;
    height:90px;

    border-radius:24px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:34px;

    margin-bottom:30px;

    box-shadow:
    0 0 30px rgba(255,140,0,0.4);

    transition:0.5s;
}

/* ICON HOVER */

.ideology-card:hover .ideology-icon{
    transform:rotate(10deg) scale(1.08);
}

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

.ideology-card h3{
    color:#fff;

    font-size:32px;

    line-height:1.3;

    margin-bottom:20px;

    font-weight:700;
}

/* ========================= */
/* TEXT */
/* ========================= */

.ideology-card p{
    color:#ccc;

    font-size:16px;

    line-height:1.9;
}

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

@media(max-width:768px){

    .ideology-section{
        padding:90px 5%;
    }

    .ideology-heading h2{
        font-size:42px;
    }

    .ideology-heading p{
        font-size:16px;
    }

    .ideology-card{
        padding:35px 28px;
    }

    .ideology-card h3{
        font-size:26px;
    }

}

@media(max-width:500px){

    .ideology-heading h2{
        font-size:32px;
    }

    .ideology-heading p{
        font-size:14px;
    }

    .ideology-card{
        padding:28px 22px;
    }

    .ideology-icon{
        width:75px;
        height:75px;

        font-size:28px;
    }

    .ideology-card h3{
        font-size:22px;
    }

    .ideology-card p{
        font-size:14px;
    }

}



/* ========================= */
/* WHY CHOOSE US SECTION */
/* ========================= */

.why-us-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1d0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.why-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

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

.why-container{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

    position:relative;

    z-index:5;
}

/* ========================= */
/* LEFT */
/* ========================= */

.why-left{
    color:#fff;
}

/* TAG */

.why-tag{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.why-left h2{
    font-size:68px;

    line-height:1.15;

    margin-bottom:28px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.why-text{
    color:#ccc;

    font-size:17px;

    line-height:1.9;

    margin-bottom:45px;
}

/* FEATURES */

.why-features{
    display:flex;
    flex-direction:column;

    gap:22px;
}

/* ITEM */

.why-item{
    display:flex;

    gap:20px;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.12);

    padding:24px;

    border-radius:24px;

    backdrop-filter:blur(14px);

    transition:0.4s;
}

/* HOVER */

.why-item:hover{
    transform:translateX(10px);

    border-color:#ff9800;

    box-shadow:
    0 0 35px rgba(255,140,0,0.15);
}

/* ICON */

.why-icon{
    min-width:70px;
    height:70px;

    border-radius:20px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    font-size:28px;

    color:#fff;

    box-shadow:
    0 0 25px rgba(255,140,0,0.35);
}

/* CONTENT */

.why-content h4{
    font-size:24px;

    margin-bottom:10px;

    color:#fff;
}

.why-content p{
    color:#ccc;

    line-height:1.8;

    font-size:15px;
}

/* ========================= */
/* RIGHT */
/* ========================= */

.why-right{
    position:relative;
}

/* IMAGE */

.why-image-box{
    position:relative;

    overflow:hidden;

    border-radius:35px;

    border:1px solid rgba(255,140,0,0.15);

    box-shadow:
    0 0 40px rgba(255,140,0,0.15);
}

/* IMAGE */

.why-image-box img{
    width:100%;
    height:750px;

    object-fit:cover;

    transition:0.7s;
}

.why-image-box:hover img{
    transform:scale(1.08);
}

/* OVERLAY */

.why-overlay{
    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,0.8),
    rgba(0,0,0,0.15)
    );
}

/* ========================= */
/* FLOATING BOXES */
/* ========================= */

.floating-box{
    position:absolute;

    background:rgba(255,255,255,0.06);

    border:1px solid rgba(255,140,0,0.15);

    backdrop-filter:blur(14px);

    border-radius:22px;

    padding:22px 24px;

    display:flex;
    align-items:center;

    gap:16px;

    color:#fff;

    box-shadow:
    0 0 25px rgba(255,140,0,0.15);

    animation:floatBox 5s ease-in-out infinite;
}

/* ICON */

.floating-box i{
    width:60px;
    height:60px;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    font-size:24px;

    color:#fff;
}

/* TEXT */

.floating-box h4{
    font-size:22px;

    margin-bottom:5px;
}

.floating-box p{
    color:#ddd;

    font-size:14px;
}

/* POSITIONS */

.box1{
    top:50px;
    left:-50px;
}

.box2{
    bottom:140px;
    right:-40px;
}

/* EXPERIENCE */

.experience-box{
    position:absolute;

    bottom:30px;
    left:-40px;

    width:220px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    padding:28px;

    border-radius:28px;

    color:#fff;

    text-align:center;

    box-shadow:
    0 0 35px rgba(255,140,0,0.35);
}

/* NUMBER */

.experience-box h3{
    font-size:52px;

    margin-bottom:10px;
}

/* TEXT */

.experience-box span{
    font-size:16px;

    font-weight:500;
}

/* FLOAT */

@keyframes floatBox{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-14px);
    }

    100%{
        transform:translateY(0px);
    }

}

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

@media(max-width:1100px){

    .why-container{
        grid-template-columns:1fr;
    }

    .why-image-box img{
        height:600px;
    }

}

@media(max-width:768px){

    .why-us-section{
        padding:90px 5%;
    }

    .why-left h2{
        font-size:42px;
    }

    .why-text{
        font-size:15px;
    }

    .why-content h4{
        font-size:20px;
    }

    .floating-box,
    .experience-box{
        display:none;
    }

}

@media(max-width:500px){

    .why-left h2{
        font-size:32px;
    }

    .why-item{
        flex-direction:column;
    }

    .why-image-box img{
        height:420px;
    }

    .why-content p{
        font-size:14px;
    }

}



/* ========================= */
/* TIMELINE SECTION */
/* ========================= */

.timeline-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1f0d00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.timeline-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.timeline-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto auto 90px;
}

/* TAG */

.timeline-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.timeline-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.timeline-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

/* ========================= */
/* MAIN TIMELINE */
/* ========================= */

.main-timeline{
    position:relative;

    max-width:1300px;

    margin:auto;

    z-index:5;
}

/* CENTER LINE */

.main-timeline::before{
    content:'';

    position:absolute;

    width:4px;
    height:100%;

    background:
    linear-gradient(
    to bottom,
    #ff9800,
    #ff5e00
    );

    left:50%;

    transform:translateX(-50%);

    border-radius:20px;

    box-shadow:
    0 0 25px rgba(255,140,0,0.6);
}

/* ITEM */

.timeline-item{
    position:relative;

    width:50%;

    padding:20px 50px;
}

/* LEFT */

.timeline-item.left{
    left:0;
}

/* RIGHT */

.timeline-item.right{
    left:50%;
}

/* DOT */

.timeline-dot{
    position:absolute;

    width:24px;
    height:24px;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    top:50px;

    right:-12px;

    z-index:10;

    box-shadow:
    0 0 25px rgba(255,140,0,0.8);
}

.timeline-item.right .timeline-dot{
    left:-12px;
}

/* CARD */

.timeline-card{
    position:relative;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:30px;

    padding:35px;

    backdrop-filter:blur(14px);

    overflow:hidden;

    transition:0.5s;
}

/* TOP LINE */

.timeline-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* HOVER */

.timeline-card:hover{
    transform:translateY(-10px);

    border-color:#ff9800;

    box-shadow:
    0 0 40px rgba(255,140,0,0.2);
}

/* YEAR */

.timeline-year{
    display:inline-block;

    padding:10px 20px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:13px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:20px;
}

/* TITLE */

.timeline-card h3{
    color:#fff;

    font-size:34px;

    line-height:1.3;

    margin-bottom:18px;

    font-weight:700;
}

/* TEXT */

.timeline-card p{
    color:#ccc;

    font-size:16px;

    line-height:1.9;
}

/* ICON */

.timeline-icon{
    position:absolute;

    top:30px;
    right:30px;

    width:70px;
    height:70px;

    border-radius:22px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:28px;

    box-shadow:
    0 0 25px rgba(255,140,0,0.35);
}

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

@media(max-width:992px){

    .timeline-heading h2{
        font-size:48px;
    }

    .main-timeline::before{
        left:20px;
    }

    .timeline-item{
        width:100%;

        padding-left:70px;
        padding-right:0;

        margin-bottom:40px;
    }

    .timeline-item.right{
        left:0;
    }

    .timeline-dot{
        left:8px !important;
    }

}

@media(max-width:768px){

    .timeline-section{
        padding:90px 5%;
    }

    .timeline-heading h2{
        font-size:38px;
    }

    .timeline-heading p{
        font-size:16px;
    }

    .timeline-card{
        padding:28px;
    }

    .timeline-card h3{
        font-size:26px;
    }

}

@media(max-width:500px){

    .timeline-heading h2{
        font-size:30px;
    }

    .timeline-card h3{
        font-size:22px;
    }

    .timeline-card p{
        font-size:14px;
    }

    .timeline-icon{
        width:60px;
        height:60px;

        font-size:22px;
    }

}






<!------------------------state page css codes -----------------------------!>

/* ========================= */
/* INDIA MAP SECTION */
/* ========================= */

.india-map-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1d0c00,
    #2e1200
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.map-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.map-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto auto 80px;
}

/* TAG */

.map-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.map-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.map-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

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

.map-container{
    position:relative;

    z-index:5;

    width:100%;

    min-height:900px;

    border-radius:40px;

    background:rgba(255,255,255,0.03);

    border:1px solid rgba(255,140,0,0.12);

    overflow:hidden;

    backdrop-filter:blur(14px);

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

/* DIGITAL GRID */

.digital-grid{
    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(255,140,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,140,0,0.05) 1px, transparent 1px);

    background-size:40px 40px;

    opacity:0.5;
}

/* MAP */

.india-map{
    position:relative;

    width:100%;

    max-width:850px;
}

.india-map img{
    width:100%;

    object-fit:contain;

    filter:
    drop-shadow(0 0 30px rgba(255,140,0,0.4));

    animation:floatMap 5s ease-in-out infinite;
}

/* FLOAT */

@keyframes floatMap{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-14px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* ========================= */
/* STATE POINT */
/* ========================= */

.state-point{
    position:absolute;

    cursor:pointer;
}

/* DOT */

.dot{
    width:18px;
    height:18px;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    position:relative;

    z-index:5;

    box-shadow:
    0 0 25px rgba(255,140,0,0.9);
}

/* PULSE */

.pulse{
    position:absolute;

    width:18px;
    height:18px;

    border-radius:50%;

    background:rgba(255,140,0,0.5);

    animation:pulseAnim 2s infinite;
}

@keyframes pulseAnim{

    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(4);
        opacity:0;
    }

}

/* ========================= */
/* POPUP */
/* ========================= */

.state-popup{
    position:absolute;

    width:300px;

    background:rgba(255,255,255,0.06);

    border:1px solid rgba(255,140,0,0.15);

    backdrop-filter:blur(18px);

    border-radius:28px;

    padding:28px;

    top:-20px;
    left:35px;

    opacity:0;
    visibility:hidden;

    transform:translateY(20px);

    transition:0.5s;

    z-index:20;

    box-shadow:
    0 0 35px rgba(255,140,0,0.2);
}

/* SHOW */

.state-point:hover .state-popup{
    opacity:1;
    visibility:visible;

    transform:translateY(0);
}

/* TITLE */

.state-popup h3{
    color:#fff;

    font-size:28px;

    margin-bottom:20px;
}

/* LIST */

.state-popup ul{
    list-style:none;

    margin-bottom:25px;
}

.state-popup ul li{
    color:#ddd;

    margin-bottom:14px;

    display:flex;
    align-items:center;

    gap:12px;

    font-size:15px;
}

/* ICON */

.state-popup ul li i{
    color:#ff9800;
}

/* BUTTON */

.state-popup a{
    display:inline-block;

    padding:14px 24px;

    border-radius:14px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:0.4s;
}

.state-popup a:hover{
    transform:translateY(-5px);

    box-shadow:
    0 0 30px rgba(255,140,0,0.6);
}

/* ========================= */
/* STATE POSITIONS */
/* ========================= */

.up{
    top:33%;
    left:58%;
}

.rajasthan{
    top:48%;
    left:42%;
}

.maharashtra{
    top:65%;
    left:46%;
}

.gujarat{
    top:57%;
    left:34%;
}

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

@media(max-width:992px){

    .map-heading h2{
        font-size:48px;
    }

    .state-popup{
        width:260px;
    }

}

@media(max-width:768px){

    .india-map-section{
        padding:90px 5%;
    }

    .map-heading h2{
        font-size:38px;
    }

    .map-heading p{
        font-size:16px;
    }

    .map-container{
        min-height:650px;
    }

    .state-popup{
        left:-20px;
        top:40px;
    }

}

@media(max-width:500px){

    .map-heading h2{
        font-size:30px;
    }

    .map-heading p{
        font-size:14px;
    }

    .map-container{
        min-height:520px;
    }

    .state-popup{
        width:220px;

        padding:20px;
    }

    .state-popup h3{
        font-size:22px;
    }

    .state-popup ul li{
        font-size:13px;
    }

}


/* ========================= */
/* STATES GRID SECTION */
/* ========================= */

.states-grid-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1d0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.states-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.states-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto auto 80px;
}

/* TAG */

.states-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.states-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.states-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

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

.states-grid{
    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

    position:relative;

    z-index:5;
}

/* ========================= */
/* CARD */
/* ========================= */

.state-card{
    position:relative;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:32px;

    overflow:hidden;

    backdrop-filter:blur(14px);

    transition:0.5s;

    animation:floatCard 5s ease-in-out infinite;
}

/* HOVER */

.state-card:hover{
    transform:translateY(-14px);

    border-color:#ff9800;

    box-shadow:
    0 0 45px rgba(255,140,0,0.25);
}

/* TOP LINE */

.state-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );

    z-index:10;
}

/* ========================= */
/* IMAGE */
/* ========================= */

.state-image{
    position:relative;

    overflow:hidden;
}

/* IMAGE */

.state-image img{
    width:100%;
    height:300px;

    object-fit:cover;

    transition:0.7s;
}

/* HOVER ZOOM */

.state-card:hover .state-image img{
    transform:scale(1.1);
}

/* OVERLAY */

.state-overlay{
    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,0.8),
    rgba(0,0,0,0.1)
    );
}

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

.state-content{
    padding:35px;
}

/* TAG */

.state-tag{
    display:inline-block;

    padding:10px 18px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.25);

    color:#ffb347;

    font-size:12px;
    font-weight:600;

    letter-spacing:1px;

    margin-bottom:22px;
}

/* TITLE */

.state-content h3{
    color:#fff;

    font-size:36px;

    margin-bottom:28px;

    line-height:1.3;

    font-weight:700;
}

/* INFO */

.state-info{
    display:flex;
    align-items:center;

    gap:14px;

    margin-bottom:18px;

    color:#ddd;

    font-size:15px;
}

/* ICON */

.state-info i{
    width:42px;
    height:42px;

    border-radius:14px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:16px;

    box-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* BUTTON */

.state-btn{
    display:inline-block;

    margin-top:20px;

    padding:16px 28px;

    border-radius:16px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:0.4s;

    box-shadow:
    0 0 25px rgba(255,140,0,0.35);
}

/* BTN HOVER */

.state-btn:hover{
    transform:translateY(-5px);

    box-shadow:
    0 0 35px rgba(255,140,0,0.7);
}

/* FLOAT */

@keyframes floatCard{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

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

@media(max-width:768px){

    .states-grid-section{
        padding:90px 5%;
    }

    .states-heading h2{
        font-size:42px;
    }

    .states-heading p{
        font-size:16px;
    }

    .state-content{
        padding:28px;
    }

    .state-content h3{
        font-size:28px;
    }

}

@media(max-width:500px){

    .states-heading h2{
        font-size:32px;
    }

    .states-heading p{
        font-size:14px;
    }

    .state-image img{
        height:540px;
    }

    .state-content h3{
        font-size:24px;
    }

    .state-info{
        font-size:13px;
    }

    .state-btn{
        width:100%;

        text-align:center;
    }

}




/* ========================= */
/* TOP STATES SECTION */
/* ========================= */

.top-states-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1d0c00,
    #2d1200
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.top-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.top-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto auto 80px;
}

/* TAG */

.top-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.top-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.top-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

/* ========================= */
/* LEADERBOARD */
/* ========================= */

.leaderboard{
    display:flex;
    flex-direction:column;

    gap:30px;

    position:relative;

    z-index:5;
}

/* CARD */

.leader-card{
    position:relative;

    display:flex;

    gap:30px;

    align-items:center;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:35px;

    padding:35px;

    overflow:hidden;

    backdrop-filter:blur(14px);

    transition:0.5s;
}

/* HOVER */

.leader-card:hover{
    transform:translateY(-10px);

    border-color:#ff9800;

    box-shadow:
    0 0 45px rgba(255,140,0,0.2);
}

/* FIRST PLACE */

.first-place{
    background:
    linear-gradient(
    135deg,
    rgba(255,140,0,0.08),
    rgba(255,80,0,0.05)
    );
}

/* TOP BORDER */

.leader-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* ========================= */
/* RANK BOX */
/* ========================= */

.rank-box{
    min-width:120px;
    height:120px;

    border-radius:30px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    box-shadow:
    0 0 35px rgba(255,140,0,0.45);
}

/* ICON */

.rank-box i{
    font-size:34px;

    margin-bottom:10px;
}

/* NUMBER */

.rank-box h3{
    font-size:28px;
}

/* SPECIAL COLORS */

.silver{
    background:
    linear-gradient(
    135deg,
    #c0c0c0,
    #8f8f8f
    );
}

.bronze{
    background:
    linear-gradient(
    135deg,
    #cd7f32,
    #8c4d14
    );
}

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

.leader-content{
    width:100%;
}

/* TOP */

.state-top{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:22px;

    gap:20px;
}

/* TITLE */

.state-top h2{
    color:#fff;

    font-size:38px;

    font-weight:700;
}

/* SCORE */

.score{
    color:#ffb347;

    font-size:28px;

    font-weight:700;
}

/* ========================= */
/* PROGRESS */
/* ========================= */

.progress-bar{
    width:100%;
    height:14px;

    border-radius:20px;

    background:rgba(255,255,255,0.08);

    overflow:hidden;

    margin-bottom:30px;
}

/* FILL */

.progress-fill{
    height:100%;

    border-radius:20px;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );

    position:relative;

    animation:progressAnim 2s ease forwards;
}

/* WIDTHS */

.fill1{
    width:98%;
}

.fill2{
    width:89%;
}

.fill3{
    width:84%;
}

.fill4{
    width:79%;
}

/* ========================= */
/* STATS */
/* ========================= */

.leader-stats{
    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:20px;
}

/* STAT */

.stat{
    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.08);

    border-radius:22px;

    padding:22px;

    text-align:center;
}

/* NUMBER */

.stat h4{
    color:#ff9800;

    font-size:34px;

    margin-bottom:10px;

    font-weight:800;
}

/* TEXT */

.stat span{
    color:#ccc;

    font-size:14px;
}

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

@media(max-width:992px){

    .top-heading h2{
        font-size:48px;
    }

    .leader-card{
        flex-direction:column;

        align-items:flex-start;
    }

}

@media(max-width:768px){

    .top-states-section{
        padding:90px 5%;
    }

    .top-heading h2{
        font-size:38px;
    }

    .top-heading p{
        font-size:16px;
    }

    .state-top h2{
        font-size:28px;
    }

    .leader-stats{
        grid-template-columns:1fr;
    }

}

@media(max-width:500px){

    .top-heading h2{
        font-size:30px;
    }

    .top-heading p{
        font-size:14px;
    }

    .leader-card{
        padding:28px 22px;
    }

    .rank-box{
        width:100%;
    }

    .state-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .state-top h2{
        font-size:24px;
    }

    .score{
        font-size:22px;
    }

    .stat h4{
        font-size:28px;
    }

}




/* ========================= */
/* DIGITAL COUNTER SECTION */
/* ========================= */

.digital-counter-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1d0c00,
    #2e1200
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.counter-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.counter-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto auto 90px;
}

/* TAG */

.counter-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.counter-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.counter-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

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

.counter-grid{
    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:35px;

    position:relative;

    z-index:5;
}

/* ========================= */
/* CARD */
/* ========================= */

.counter-card{
    position:relative;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:35px;

    padding:40px 30px;

    text-align:center;

    overflow:hidden;

    backdrop-filter:blur(14px);

    transition:0.5s;

    animation:floatCard 5s ease-in-out infinite;
}

/* HOVER */

.counter-card:hover{
    transform:translateY(-12px);

    border-color:#ff9800;

    box-shadow:
    0 0 45px rgba(255,140,0,0.2);
}

/* TOP BORDER */

.counter-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* ========================= */
/* CIRCLE */
/* ========================= */

.circle-box{
    position:relative;

    width:190px;
    height:190px;

    margin:auto auto 30px;
}

/* SVG */

.circle-box svg{
    width:190px;
    height:190px;

    transform:rotate(-90deg);
}

/* CIRCLE */

.circle-box svg circle{
    fill:none;

    stroke-width:12;

    stroke-linecap:round;
}

/* BG */

.circle-box svg circle:first-child{
    stroke:rgba(255,255,255,0.08);
}

/* PROGRESS */

.progress{
    stroke:#ff9800;

    stroke-dasharray:470;

    stroke-dashoffset:470;

    filter:
    drop-shadow(0 0 15px rgba(255,140,0,0.8));

    animation:progressAnim 3s forwards;
}

/* WIDTHS */

.progress1{
    stroke-dashoffset:40;
}

.progress2{
    stroke-dashoffset:90;
}

.progress3{
    stroke-dashoffset:180;
}

.progress4{
    stroke-dashoffset:120;
}

.progress5{
    stroke-dashoffset:220;
}

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

.circle-content{
    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    display:flex;
    flex-direction:column;

    align-items:center;
}

/* ICON */

.circle-content i{
    font-size:32px;

    color:#ff9800;

    margin-bottom:10px;

    text-shadow:
    0 0 20px rgba(255,140,0,0.7);
}

/* NUMBER */

.circle-content h3{
    color:#fff;

    font-size:34px;

    font-weight:800;
}

/* PLUS */

.circle-content span{
    color:#ffb347;

    font-size:18px;

    font-weight:600;
}

/* TITLE */

.counter-card h4{
    color:#fff;

    font-size:28px;

    margin-bottom:16px;
}

/* TEXT */

.counter-card p{
    color:#ccc;

    font-size:15px;

    line-height:1.8;
}

/* FLOAT */

@keyframes floatCard{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

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

@media(max-width:768px){

    .digital-counter-section{
        padding:90px 5%;
    }

    .counter-heading h2{
        font-size:42px;
    }

    .counter-heading p{
        font-size:16px;
    }

    .counter-card{
        padding:35px 24px;
    }

}

@media(max-width:500px){

    .counter-heading h2{
        font-size:32px;
    }

    .counter-heading p{
        font-size:14px;
    }

    .circle-box{
        width:160px;
        height:160px;
    }

    .circle-box svg{
        width:160px;
        height:160px;
    }

    .counter-card h4{
        font-size:22px;
    }

    .circle-content h3{
        font-size:28px;
    }

}



/* ========================= */
/* JOIN STATE SECTION */
/* ========================= */

.join-state-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1d0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.join-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.join-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto auto 80px;
}

/* TAG */

.join-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.join-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.join-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

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

.join-form-container{
    display:grid;

    grid-template-columns:0.9fr 1.1fr;

    gap:40px;

    position:relative;

    z-index:5;
}

/* ========================= */
/* LEFT */
/* ========================= */

.join-left{
    display:flex;
    flex-direction:column;

    gap:25px;
}

/* BOX */

.join-box{
    display:flex;

    gap:20px;

    align-items:flex-start;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:28px;

    padding:30px;

    backdrop-filter:blur(14px);

    transition:0.4s;
}

/* HOVER */

.join-box:hover{
    transform:translateY(-8px);

    border-color:#ff9800;

    box-shadow:
    0 0 35px rgba(255,140,0,0.18);
}

/* ICON */

.join-icon{
    min-width:70px;
    height:70px;

    border-radius:20px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:28px;

    box-shadow:
    0 0 25px rgba(255,140,0,0.35);
}

/* TEXT */

.join-box h4{
    color:#fff;

    font-size:24px;

    margin-bottom:10px;
}

.join-box p{
    color:#ccc;

    line-height:1.8;

    font-size:15px;
}

/* ========================= */
/* FORM BOX */
/* ========================= */

.join-form-box{
    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:35px;

    padding:45px;

    backdrop-filter:blur(18px);

    position:relative;

    overflow:hidden;
}

/* TOP BORDER */

.join-form-box::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* ROW */

.input-row{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:22px;

    margin-bottom:22px;
}

/* BOX */

.input-box{
    display:flex;
    flex-direction:column;
}

/* LABEL */

.input-box label{
    color:#fff;

    margin-bottom:12px;

    font-size:15px;

    font-weight:500;
}

/* INPUT */

.input-box input,
.input-box select,
.input-box textarea{
    width:100%;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:18px;

    padding:18px 20px;

    color:#fff;

    outline:none;

    font-size:15px;

    transition:0.4s;

    backdrop-filter:blur(12px);
}

/* TEXTAREA */

.input-box textarea{
    height:160px;

    resize:none;
}

/* PLACEHOLDER */

.input-box input::placeholder,
.input-box textarea::placeholder{
    color:#aaa;
}

/* FOCUS */

.input-box input:focus,
.input-box select:focus,
.input-box textarea:focus{
    border-color:#ff9800;

    box-shadow:
    0 0 25px rgba(255,140,0,0.25);

    background:rgba(255,140,0,0.04);
}

/* FULL WIDTH */

.full-width{
    margin-bottom:28px;
}

/* BUTTON */

.join-btn{
    width:100%;

    border:none;

    padding:20px;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    font-size:18px;

    font-weight:600;

    cursor:pointer;

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

    gap:12px;

    transition:0.4s;

    box-shadow:
    0 0 30px rgba(255,140,0,0.35);
}

/* HOVER */

.join-btn:hover{
    transform:translateY(-6px);

    box-shadow:
    0 0 40px rgba(255,140,0,0.7);
}

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

@media(max-width:1100px){

    .join-form-container{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .join-state-section{
        padding:90px 5%;
    }

    .join-heading h2{
        font-size:42px;
    }

    .join-heading p{
        font-size:16px;
    }

    .join-form-box{
        padding:35px 28px;
    }

    .input-row{
        grid-template-columns:1fr;
    }

}

@media(max-width:500px){

    .join-heading h2{
        font-size:32px;
    }

    .join-heading p{
        font-size:14px;
    }

    .join-box{
        flex-direction:column;
    }

    .join-form-box{
        padding:28px 22px;
    }

    .join-btn{
        font-size:16px;
    }

}







<!---------------------------- media page css codes ------------------------------------!>

/* ========================= */
/* BREAKING NEWS SECTION */
/* ========================= */

.breaking-news-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1c0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.breaking-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.breaking-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto auto 80px;
}

/* TAG */

.breaking-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,0,0,0.12);

    border:1px solid rgba(255,0,0,0.3);

    color:#ff4d4d;

    font-size:14px;
    font-weight:700;

    letter-spacing:2px;

    margin-bottom:28px;

    animation:livePulse 2s infinite;
}

/* LIVE PULSE */

@keyframes livePulse{

    0%{
        box-shadow:0 0 0 rgba(255,0,0,0.4);
    }

    70%{
        box-shadow:0 0 25px rgba(255,0,0,0);
    }

    100%{
        box-shadow:0 0 0 rgba(255,0,0,0);
    }

}

/* TITLE */

.breaking-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.breaking-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

/* ========================= */
/* BREAKING CARD */
/* ========================= */

.breaking-card{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:0;

    position:relative;

    z-index:5;

    overflow:hidden;

    border-radius:40px;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.15);

    backdrop-filter:blur(16px);

    box-shadow:
    0 0 45px rgba(255,140,0,0.15);

    transition:0.5s;
}

/* HOVER */

.breaking-card:hover{
    transform:translateY(-10px);

    border-color:#ff9800;

    box-shadow:
    0 0 55px rgba(255,140,0,0.25);
}

/* TOP BORDER */

.breaking-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:5px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff0000,
    #ff9800,
    #ff5e00
    );

    z-index:10;
}

/* ========================= */
/* IMAGE */
/* ========================= */

.breaking-image{
    position:relative;

    overflow:hidden;
}

/* IMAGE */

.breaking-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.8s;
}

/* HOVER */

.breaking-card:hover .breaking-image img{
    transform:scale(1.1);
}

/* OVERLAY */

.breaking-overlay{
    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,0.85),
    rgba(0,0,0,0.1)
    );
}

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

.live-badge{
    position:absolute;

    top:25px;
    left:25px;

    padding:12px 22px;

    border-radius:40px;

    background:#ff0000;

    color:#fff;

    font-size:14px;
    font-weight:700;

    display:flex;
    align-items:center;

    gap:10px;

    z-index:10;

    box-shadow:
    0 0 25px rgba(255,0,0,0.6);
}

/* DOT */

.pulse-dot{
    width:12px;
    height:12px;

    border-radius:50%;

    background:#fff;

    animation:pulseDot 1.5s infinite;
}

@keyframes pulseDot{

    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(2.5);
        opacity:0;
    }

}

/* PLAY BUTTON */

.play-btn{
   

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:90px;
    height:90px;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:30px;

    z-index:10;

    box-shadow:
    0 0 35px rgba(255,140,0,0.6);

    animation:playPulse 2s infinite;
}

@keyframes playPulse{

    0%{
        box-shadow:0 0 0 rgba(255,140,0,0.5);
    }

    70%{
        box-shadow:0 0 40px rgba(255,140,0,0);
    }

    100%{
        box-shadow:0 0 0 rgba(255,140,0,0);
    }

}

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

.breaking-content{
    padding:60px 50px;

    color:#fff;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

/* DATE */

.news-date{
    display:flex;
    align-items:center;

    gap:12px;

    color:#ffb347;

    margin-bottom:22px;

    font-size:15px;
}

/* TITLE */

.breaking-content h2{
    font-size:52px;

    line-height:1.2;

    margin-bottom:28px;

    font-weight:800;

    text-transform:uppercase;
}

/* TEXT */

.breaking-content p{
    color:#ccc;

    font-size:16px;

    line-height:1.9;

    margin-bottom:22px;
}

/* ========================= */
/* STATS */
/* ========================= */

.breaking-stats{
    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:20px;

    margin:35px 0;
}

/* BOX */

.stat-box{
    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.1);

    border-radius:20px;

    padding:22px;

    text-align:center;
}

/* NUMBER */

.stat-box h3{
    color:#ff9800;

    font-size:32px;

    margin-bottom:8px;
}

/* TEXT */

.stat-box span{
    color:#ccc;

    font-size:14px;
}

/* BUTTON */

.breaking-btn{
    display:inline-flex;
    align-items:center;

    gap:12px;

    width:max-content;

    padding:18px 30px;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:0.4s;

    box-shadow:
    0 0 30px rgba(255,140,0,0.35);
}

/* HOVER */

.breaking-btn:hover{
    transform:translateY(-5px);

    gap:18px;

    box-shadow:
    0 0 40px rgba(255,140,0,0.7);
}

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

@media(max-width:1100px){

    .breaking-card{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .breaking-news-section{
        padding:90px 5%;
    }

    .breaking-heading h2{
        font-size:42px;
    }

    .breaking-heading p{
        font-size:16px;
    }

    .breaking-content{
        padding:40px 30px;
    }

    .breaking-content h2{
        font-size:34px;
    }

    .breaking-stats{
        grid-template-columns:1fr;
    }

}

@media(max-width:500px){

    .breaking-heading h2{
        font-size:30px;
    }

    .breaking-content h2{
        font-size:26px;
    }

    .breaking-content p{
        font-size:14px;
    }

    .play-btn{
        width:70px;
        height:70px;

        font-size:22px;
    }

    .breaking-btn{
        width:100%;

        justify-content:center;
    }

}



/* ========================= */
/* LATEST NEWS SECTION */
/* ========================= */

.latest-news-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1d0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.news-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.latest-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto auto 80px;
}

/* TAG */

.latest-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.latest-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.latest-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

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

.news-masonry{
    columns:3 320px;

    column-gap:30px;

    position:relative;

    z-index:5;
}

/* ========================= */
/* CARD */
/* ========================= */

.news-card{
    position:relative;

    margin-bottom:30px;

    break-inside:avoid;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:35px;

    overflow:hidden;

    backdrop-filter:blur(14px);

    transition:0.5s;
}

/* HOVER */

.news-card:hover{
    transform:translateY(-10px);

    border-color:#ff9800;

    box-shadow:
    0 0 45px rgba(255,140,0,0.2);
}

/* ANIMATED BORDER */

.news-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );

    z-index:10;
}

/* ========================= */
/* IMAGE */
/* ========================= */

.news-image{
    position:relative;

    overflow:hidden;
}

/* IMAGE */

.news-image img{
    width:100%;

    object-fit:cover;

    transition:0.8s;
}

/* IMAGE HEIGHTS */

.large-card .news-image img{
    height:500px;
}

.tall-card .news-image img{
    height:650px;
}

.wide-card .news-image img{
    height:400px;
}

.news-card:not(.large-card):not(.tall-card):not(.wide-card) .news-image img{
    height:300px;
}

/* ZOOM */

.news-card:hover .news-image img{
    transform:scale(1.1);
}

/* OVERLAY */

.news-overlay{
    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,0.85),
    rgba(0,0,0,0.1)
    );
}

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

.news-content{
    padding:32px;
}

/* TAG */

.news-tag{
    display:inline-block;

    padding:10px 18px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.25);

    color:#ffb347;

    font-size:12px;
    font-weight:600;

    letter-spacing:1px;

    margin-bottom:22px;
}

/* TITLE */

.news-content h3{
    color:#fff;

    font-size:32px;

    line-height:1.4;

    margin-bottom:18px;

    font-weight:700;
}

/* TEXT */

.news-content p{
    color:#ccc;

    font-size:15px;

    line-height:1.9;

    margin-bottom:24px;
}

/* BUTTON */

.news-content a{
    display:inline-flex;
    align-items:center;

    gap:10px;

    padding:14px 24px;

    border-radius:14px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:0.4s;

    box-shadow:
    0 0 25px rgba(255,140,0,0.35);
}

/* HOVER */

.news-content a:hover{
    transform:translateY(-5px);

    box-shadow:
    0 0 35px rgba(255,140,0,0.7);
}

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

@media(max-width:768px){

    .latest-news-section{
        padding:90px 5%;
    }

    .latest-heading h2{
        font-size:42px;
    }

    .latest-heading p{
        font-size:16px;
    }

    .news-content{
        padding:26px;
    }

    .news-content h3{
        font-size:24px;
    }

}

@media(max-width:500px){

    .latest-heading h2{
        font-size:30px;
    }

    .latest-heading p{
        font-size:14px;
    }

    .news-content h3{
        font-size:22px;
    }

    .news-content p{
        font-size:14px;
    }

    .news-content a{
        width:100%;

        justify-content:center;
    }

}



/* ========================= */
/* VIDEO GALLERY SECTION */
/* ========================= */

.video-gallery-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1d0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.video-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.video-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 80px;
}

/* TAG */

.video-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.video-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.video-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

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

.video-grid{
    display:grid;

    grid-template-columns:
    repeat(12,1fr);

    gap:30px;

    position:relative;

    z-index:5;
}

/* CARD */

.video-card{
    grid-column:span 4;

    position:relative;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:35px;

    overflow:hidden;

    backdrop-filter:blur(14px);

    transition:0.5s;
}

/* LARGE */

.large-video{
    grid-column:span 8;
}

/* WIDE */

.wide-video{
    grid-column:span 8;
}

/* HOVER */

.video-card:hover{
    transform:translateY(-10px);

    border-color:#ff9800;

    box-shadow:
    0 0 45px rgba(255,140,0,0.2);
}

/* BORDER */

.video-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );

    z-index:10;
}

/* ========================= */
/* THUMB */
/* ========================= */

.video-thumb{
    position:relative;

    overflow:hidden;
}

/* IMAGE */

.video-thumb img{
    width:100%;
    height:320px;

    object-fit:cover;

    transition:0.8s;
}

/* LARGE */

.large-video .video-thumb img{
    height:450px;
}

/* WIDE */

.wide-video .video-thumb img{
    height:400px;
}

/* HOVER ZOOM */

.video-card:hover .video-thumb img{
    transform:scale(1.1);
}

/* OVERLAY */

.video-overlay{
    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,0.85),
    rgba(0,0,0,0.15)
    );
}

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

.play-button{
    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:90px;
    height:90px;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:30px;

    z-index:10;

    box-shadow:
    0 0 35px rgba(255,140,0,0.6);

    animation:playPulse 2s infinite;
}

/* PULSE */

@keyframes playPulse{

    0%{
        box-shadow:0 0 0 rgba(255,140,0,0.5);
    }

    70%{
        box-shadow:0 0 40px rgba(255,140,0,0);
    }

    100%{
        box-shadow:0 0 0 rgba(255,140,0,0);
    }

}

/* TAG */

.video-tag{
    position:absolute;

    top:22px;
    left:22px;

    padding:10px 20px;

    border-radius:40px;

    background:#ff0000;

    color:#fff;

    font-size:12px;
    font-weight:700;

    letter-spacing:1px;

    z-index:10;

    box-shadow:
    0 0 25px rgba(255,0,0,0.6);
}

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

.video-content{
    padding:32px;
}

/* CATEGORY */

.video-category{
    display:inline-block;

    color:#ffb347;

    font-size:13px;
    font-weight:600;

    letter-spacing:1px;

    margin-bottom:18px;
}

/* TITLE */

.video-content h3{
    color:#fff;

    font-size:32px;

    line-height:1.4;

    margin-bottom:18px;

    font-weight:700;
}

/* TEXT */

.video-content p{
    color:#ccc;

    font-size:15px;

    line-height:1.9;

    margin-bottom:24px;
}

/* META */

.video-meta{
    display:flex;

    gap:24px;

    flex-wrap:wrap;
}

/* META TEXT */

.video-meta span{
    color:#bbb;

    font-size:14px;

    display:flex;
    align-items:center;

    gap:10px;
}

/* ICON */

.video-meta i{
    color:#ff9800;
}

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

@media(max-width:1100px){

    .video-card,
    .large-video,
    .wide-video{
        grid-column:span 12;
    }

}

@media(max-width:768px){

    .video-gallery-section{
        padding:90px 5%;
    }

    .video-heading h2{
        font-size:42px;
    }

    .video-heading p{
        font-size:16px;
    }

    .video-content{
        padding:26px;
    }

    .video-content h3{
        font-size:26px;
    }

}

@media(max-width:500px){

    .video-heading h2{
        font-size:30px;
    }

    .video-heading p{
        font-size:14px;
    }

    .video-thumb img,
    .large-video .video-thumb img,
    .wide-video .video-thumb img{
        height:260px;
    }

    .video-content h3{
        font-size:22px;
    }

    .video-content p{
        font-size:14px;
    }

    .play-button{
        width:70px;
        height:70px;

        font-size:22px;
    }

}




/* ========================= */
/* LIVE UPDATES SECTION */
/* ========================= */

.live-updates-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1c0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.live-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.live-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 90px;
}

/* TAG */

.live-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,0,0,0.12);

    border:1px solid rgba(255,0,0,0.3);

    color:#ff4d4d;

    font-size:14px;
    font-weight:700;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.live-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.live-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

/* ========================= */
/* TIMELINE */
/* ========================= */

.live-timeline{
    position:relative;

    max-width:1300px;

    margin:auto;

    z-index:5;
}

/* CENTER LINE */

.timeline-line{
    position:absolute;

    top:0;
    left:50%;

    transform:translateX(-50%);

    width:4px;
    height:100%;

    background:
    linear-gradient(
    to bottom,
    #ff9800,
    #ff5e00
    );

    border-radius:20px;

    box-shadow:
    0 0 25px rgba(255,140,0,0.6);
}

/* ========================= */
/* UPDATE CARD */
/* ========================= */

.update-card{
    position:relative;

    width:50%;

    padding:30px 50px;
}

/* LEFT */

.update-card.left{
    left:0;
}

/* RIGHT */

.update-card.right{
    left:50%;
}

/* ========================= */
/* LIVE DOT */
/* ========================= */

.live-dot{
    position:absolute;

    top:55px;

    right:-14px;

    width:28px;
    height:28px;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #ff0000,
    #ff5e00
    );

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

    z-index:20;

    box-shadow:
    0 0 25px rgba(255,0,0,0.8);
}

/* RIGHT */

.update-card.right .live-dot{
    left:-14px;
}

/* INNER DOT */

.live-dot span{
    width:10px;
    height:10px;

    border-radius:50%;

    background:#fff;

    animation:pulseDot 1.5s infinite;
}

/* PULSE */

@keyframes pulseDot{

    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(3);
        opacity:0;
    }

}

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

.update-content{
    position:relative;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:35px;

    padding:35px;

    backdrop-filter:blur(16px);

    overflow:hidden;

    transition:0.5s;

    animation:autoFloat 5s ease-in-out infinite;
}

/* FLOAT */

@keyframes autoFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* HOVER */

.update-content:hover{
    transform:translateY(-12px);

    border-color:#ff9800;

    box-shadow:
    0 0 45px rgba(255,140,0,0.2);
}

/* TOP BORDER */

.update-content::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff0000,
    #ff9800,
    #ff5e00
    );
}

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

.update-badge{
    display:inline-block;

    padding:10px 18px;

    border-radius:40px;

    background:#ff0000;

    color:#fff;

    font-size:12px;
    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

    box-shadow:
    0 0 20px rgba(255,0,0,0.5);
}

/* COLORS */

.orange{
    background:#ff9800;
}

.red{
    background:#ff3d00;
}

.green{
    background:#0f9d58;
}

/* ========================= */
/* TIME */
/* ========================= */

.update-time{
    color:#ffb347;

    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:18px;

    font-size:14px;
}

/* TITLE */

.update-content h3{
    color:#fff;

    font-size:34px;

    line-height:1.4;

    margin-bottom:18px;

    font-weight:700;
}

/* TEXT */

.update-content p{
    color:#ccc;

    font-size:15px;

    line-height:1.9;

    margin-bottom:25px;
}

/* META */

.update-meta{
    display:flex;

    gap:25px;

    flex-wrap:wrap;
}

/* ITEM */

.update-meta span{
    color:#bbb;

    display:flex;
    align-items:center;

    gap:10px;

    font-size:14px;
}

/* ICON */

.update-meta i{
    color:#ff9800;
}

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

@media(max-width:992px){

    .timeline-line{
        left:20px;
    }

    .update-card{
        width:100%;

        padding-left:70px;
        padding-right:0;

        margin-bottom:40px;
    }

    .update-card.right{
        left:0;
    }

    .live-dot{
        left:7px !important;
    }

}

@media(max-width:768px){

    .live-updates-section{
        padding:90px 5%;
    }

    .live-heading h2{
        font-size:42px;
    }

    .live-heading p{
        font-size:16px;
    }

    .update-content{
        padding:28px;
    }

    .update-content h3{
        font-size:26px;
    }

}

@media(max-width:500px){

    .live-heading h2{
        font-size:30px;
    }

    .live-heading p{
        font-size:14px;
    }

    .update-content h3{
        font-size:22px;
    }

    .update-content p{
        font-size:14px;
    }

    .update-meta{
        flex-direction:column;

        gap:12px;
    }

}








<!---------------------------------------------main issues----------------------------------!>

/* ========================= */
/* ISSUES OVERVIEW SECTION */
/* ========================= */

.issues-overview-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1d0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.issues-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

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

.issues-container{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

    position:relative;

    z-index:5;
}

/* ========================= */
/* LEFT */
/* ========================= */

.issues-left{
    position:relative;
}

/* TAG */

.issues-tag{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.issues-left h2{
    color:#fff;

    font-size:68px;

    line-height:1.15;

    margin-bottom:28px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.issues-left p{
    color:#ccc;

    font-size:17px;

    line-height:1.9;

    margin-bottom:22px;
}

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

.issues-buttons{
    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-top:35px;
}

/* BUTTON */

.issues-btn{
    display:inline-flex;
    align-items:center;

    gap:12px;

    padding:18px 30px;

    border-radius:18px;

    text-decoration:none;

    font-weight:600;

    transition:0.4s;
}

/* PRIMARY */

.primary-btn{
    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    box-shadow:
    0 0 30px rgba(255,140,0,0.35);
}

/* HOVER */

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

    box-shadow:
    0 0 40px rgba(255,140,0,0.7);
}

/* SECONDARY */

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

    color:#fff;

    background:rgba(255,255,255,0.04);

    backdrop-filter:blur(12px);
}

/* HOVER */

.secondary-btn:hover{
    transform:translateY(-5px);

    border-color:#ff9800;

    box-shadow:
    0 0 30px rgba(255,140,0,0.25);
}

/* ========================= */
/* RIGHT */
/* ========================= */

.issues-right{
    position:relative;

    display:flex;
    flex-direction:column;

    gap:28px;
}

/* ========================= */
/* CARD */
/* ========================= */

.issue-card{
    position:relative;

    display:flex;

    gap:24px;

    align-items:flex-start;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:35px;

    padding:35px;

    overflow:hidden;

    backdrop-filter:blur(16px);

    transition:0.5s;

    animation:floatCard 5s ease-in-out infinite;
}

/* HOVER */

.issue-card:hover{
    transform:translateY(-10px);

    border-color:#ff9800;

    box-shadow:
    0 0 45px rgba(255,140,0,0.2);
}

/* TOP BORDER */

.issue-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* ICON */

.issue-icon{
    min-width:80px;
    height:80px;

    border-radius:24px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:32px;

    box-shadow:
    0 0 30px rgba(255,140,0,0.45);
}

/* CONTENT */

.issue-content h3{
    color:#fff;

    font-size:30px;

    margin-bottom:14px;

    font-weight:700;
}

.issue-content p{
    color:#ccc;

    font-size:15px;

    line-height:1.9;
}

/* FLOAT */

@keyframes floatCard{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* ========================= */
/* FLOATING CIRCLE */
/* ========================= */

.floating-circle{
    position:absolute;

    width:220px;
    height:220px;

    border-radius:50%;

    background:
    radial-gradient(
    rgba(255,140,0,0.2),
    transparent
    );

    top:-80px;
    right:-60px;

    filter:blur(10px);

    animation:circleMove 6s ease-in-out infinite;
}

@keyframes circleMove{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(20px);
    }

    100%{
        transform:translateY(0px);
    }

}

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

@media(max-width:1100px){

    .issues-container{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .issues-overview-section{
        padding:90px 5%;
    }

    .issues-left h2{
        font-size:42px;
    }

    .issues-left p{
        font-size:16px;
    }

    .issue-card{
        padding:28px;
    }

    .issue-content h3{
        font-size:24px;
    }

}

@media(max-width:500px){

    .issues-left h2{
        font-size:32px;
    }

    .issues-left p{
        font-size:14px;
    }

    .issues-buttons{
        flex-direction:column;
    }

    .issues-btn{
        width:100%;

        justify-content:center;
    }

    .issue-card{
        flex-direction:column;
    }

    .issue-content h3{
        font-size:22px;
    }

}




/* ========================= */
/* MAIN ISSUES SECTION */
/* ========================= */

.main-issues-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1d0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.issues-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.main-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 90px;
}

/* TAG */

.main-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.main-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.main-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

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

.issues-grid{
    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

    position:relative;

    z-index:5;
}

/* ========================= */
/* ISSUE BOX */
/* ========================= */

.issue-box{
    position:relative;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:35px;

    padding:40px 35px;

    overflow:hidden;

    backdrop-filter:blur(16px);

    transition:0.5s;

    animation:floatCard 5s ease-in-out infinite;
}

/* HOVER */

.issue-box:hover{
    transform:translateY(-12px);

    border-color:#ff9800;

    box-shadow:
    0 0 45px rgba(255,140,0,0.25);
}

/* TOP BORDER */

.issue-box::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* NUMBER */

.issue-number{
    position:absolute;

    top:25px;
    right:25px;

    font-size:70px;

    font-weight:800;

    color:rgba(255,255,255,0.05);
}

/* ========================= */
/* ICON */
/* ========================= */

.issue-icon{
    width:90px;
    height:90px;

    border-radius:28px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:36px;

    margin-bottom:28px;

    box-shadow:
    0 0 35px rgba(255,140,0,0.4);
}

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

.issue-box h3{
    color:#fff;

    font-size:32px;

    line-height:1.4;

    margin-bottom:18px;

    font-weight:700;
}

/* TEXT */

.issue-box p{
    color:#ccc;

    font-size:15px;

    line-height:1.9;

    margin-bottom:28px;
}

/* BUTTON */

.issue-box a{
    display:inline-flex;
    align-items:center;

    gap:12px;

    padding:15px 26px;

    border-radius:16px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:0.4s;

    box-shadow:
    0 0 25px rgba(255,140,0,0.35);
}


/* HOVER */

.issue-box a:hover{
    transform:translateY(-5px);

    box-shadow:
    0 0 40px rgba(255,140,0,0.7);
}

/* FLOAT */

@keyframes floatCard{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

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

@media(max-width:768px){

    .main-issues-section{
        padding:90px 5%;
    }

    .main-heading h2{
        font-size:42px;
    }

    .main-heading p{
        font-size:16px;
    }

    .issue-box{
        padding:35px 28px;
    }

    .issue-box h3{
        font-size:26px;
    }

}

@media(max-width:500px){

    .main-heading h2{
        font-size:30px;
    }

    .main-heading p{
        font-size:14px;
    }

    .issue-icon{
        width:75px;
        height:75px;

        font-size:28px;
    }

    .issue-box h3{
        font-size:22px;
    }

    .issue-box p{
        font-size:14px;
    }

    .issue-box a{
        width:100%;

        justify-content:center;
    }

}




/* ========================= */
/* INTERACTIVE ISSUES */
/* ========================= */

.interactive-issues-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1d0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.interactive-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.interactive-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 90px;
}

/* TAG */

.interactive-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.interactive-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.interactive-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

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

.interactive-grid{
    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:40px;

    position:relative;

    z-index:5;
}

/* ========================= */
/* CARD */
/* ========================= */

.interactive-card{
    position:relative;

    height:460px;

    perspective:1500px;
}

/* FRONT + BACK */

.card-front,
.card-back{
    position:absolute;

    width:100%;
    height:100%;

    border-radius:35px;

    padding:40px 35px;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    backdrop-filter:blur(16px);

    overflow:hidden;

    transition:0.8s;

    backface-visibility:hidden;

    display:flex;
    flex-direction:column;
    justify-content:center;

    box-shadow:
    0 0 35px rgba(255,140,0,0.12);
}

/* BORDER */

.card-front::before,
.card-back::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* FRONT */

.card-front{
    text-align:center;
}

/* BACK */

.card-back{
    transform:rotateY(180deg);
}

/* HOVER EFFECT */

.interactive-card:hover .card-front{
    transform:rotateY(180deg);
}

.interactive-card:hover .card-back{
    transform:rotateY(360deg);
}

/* ========================= */
/* ICON */
/* ========================= */

.issue-icon{
    width:95px;
    height:95px;

    border-radius:30px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:38px;

    margin:0 auto 30px;

    box-shadow:
    0 0 35px rgba(255,140,0,0.45);

    animation:iconFloat 4s ease-in-out infinite;
}

/* FLOAT */

@keyframes iconFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

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

.card-front h3{
    color:#fff;

    font-size:34px;

    line-height:1.4;

    margin-bottom:18px;

    font-weight:700;
}

.card-front p{
    color:#ccc;

    font-size:15px;

    line-height:1.9;

    margin-bottom:30px;
}

.card-front span{
    color:#ff9800;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;
}

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

.card-back h3{
    color:#fff;

    font-size:30px;

    margin-bottom:28px;

    font-weight:700;
}

/* LIST */

.card-back ul{
    list-style:none;
}

/* ITEM */

.card-back ul li{
    color:#ddd;

    font-size:15px;

    line-height:1.9;

    margin-bottom:18px;

    padding-left:20px;

    position:relative;
}

/* BULLET */

.card-back ul li::before{
    content:'';

    position:absolute;

    left:0;
    top:11px;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#ff9800;

    box-shadow:
    0 0 12px rgba(255,140,0,0.8);
}

/* STRONG */

.card-back strong{
    color:#ffb347;
}

/* ========================= */
/* HOVER */
/* ========================= */

.interactive-card:hover .card-front,
.interactive-card:hover .card-back{
    border-color:#ff9800;

    box-shadow:
    0 0 50px rgba(255,140,0,0.25);
}

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

@media(max-width:768px){

    .interactive-issues-section{
        padding:90px 5%;
    }

    .interactive-heading h2{
        font-size:42px;
    }

    .interactive-heading p{
        font-size:16px;
    }

    .interactive-card{
        height:500px;
    }

    .card-front h3,
    .card-back h3{
        font-size:26px;
    }

}

@media(max-width:500px){

    .interactive-heading h2{
        font-size:30px;
    }

    .interactive-heading p{
        font-size:14px;
    }

    .interactive-card{
        height:540px;
    }

    .card-front,
    .card-back{
        padding:32px 24px;
    }

    .card-front h3,
    .card-back h3{
        font-size:22px;
    }

    .card-front p,
    .card-back ul li{
        font-size:14px;
    }

    .issue-icon{
        width:75px;
        height:75px;

        font-size:28px;
    }

}




/* ========================= */
/* VISION & SOLUTIONS */
/* ========================= */

.vision-solutions-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1c0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.vision-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.vision-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 90px;
}

/* TAG */

.vision-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.vision-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.vision-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

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

.vision-container{
    display:grid;

    grid-template-columns:1fr 120px 1fr;

    gap:40px;

    align-items:center;

    position:relative;

    z-index:5;
}

/* ========================= */
/* COLUMN */
/* ========================= */

.vision-column{
    display:flex;
    flex-direction:column;

    gap:28px;
}

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

.column-title{
    display:flex;
    align-items:center;

    gap:18px;

    margin-bottom:10px;
}

/* ICON */

.column-title i{
    width:70px;
    height:70px;

    border-radius:22px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:28px;

    box-shadow:
    0 0 30px rgba(255,140,0,0.35);
}

/* TITLE */

.column-title h3{
    color:#fff;

    font-size:38px;

    font-weight:700;
}

/* ========================= */
/* CARD */
/* ========================= */

.vision-card{
    position:relative;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:35px;

    padding:35px;

    overflow:hidden;

    backdrop-filter:blur(16px);

    transition:0.5s;

    animation:floatCard 5s ease-in-out infinite;
}

/* HOVER */

.vision-card:hover{
    transform:translateY(-10px);

    border-color:#ff9800;

    box-shadow:
    0 0 45px rgba(255,140,0,0.2);
}

/* TOP BORDER */

.vision-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* ========================= */
/* CARD TOP */
/* ========================= */

.card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:20px;
}

/* TITLE */

.card-top h4{
    color:#fff;

    font-size:28px;

    font-weight:700;
}

/* PERCENT */

.card-top span{
    color:#ff9800;

    font-size:22px;

    font-weight:700;
}

/* ========================= */
/* PROGRESS */
/* ========================= */

.progress-bar{
    width:100%;
    height:14px;

    border-radius:20px;

    background:rgba(255,255,255,0.08);

    overflow:hidden;

    margin-bottom:22px;
}

/* FILL */

.progress-fill{
    height:100%;

    border-radius:20px;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );

    animation:progressAnim 3s ease forwards;
}

/* WIDTHS */

.fill1{
    width:85%;
}

.fill2{
    width:72%;
}

.fill3{
    width:68%;
}

/* TEXT */

.vision-card p{
    color:#ccc;

    font-size:15px;

    line-height:1.9;
}

/* ========================= */
/* SOLUTION CARD */
/* ========================= */

.solution-card{
    display:flex;

    gap:22px;

    align-items:flex-start;
}

/* ICON */

.solution-icon{
    min-width:80px;
    height:80px;

    border-radius:24px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:32px;

    box-shadow:
    0 0 30px rgba(255,140,0,0.4);
}

/* TITLE */

.solution-card h4{
    color:#fff;

    font-size:28px;

    margin-bottom:14px;

    font-weight:700;
}

/* ========================= */
/* DIVIDER */
/* ========================= */

.vision-divider{
    position:relative;

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

    height:100%;
}

/* LINE */

.vision-divider::before{
    content:'';

    position:absolute;

    width:4px;
    height:100%;

    background:
    linear-gradient(
    to bottom,
    #ff9800,
    #ff5e00
    );

    border-radius:20px;

    box-shadow:
    0 0 25px rgba(255,140,0,0.5);
}

/* CENTER GLOW */

.vision-divider span{
    width:24px;
    height:24px;

    border-radius:50%;

    background:#ff9800;

    position:relative;

    z-index:5;

    box-shadow:
    0 0 30px rgba(255,140,0,0.8);

    animation:pulseGlow 2s infinite;
}

/* PULSE */

@keyframes pulseGlow{

    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(2.5);
        opacity:0;
    }

}

/* FLOAT */

@keyframes floatCard{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

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

@media(max-width:1100px){

    .vision-container{
        grid-template-columns:1fr;
    }

    .vision-divider{
        height:120px;
    }

    .vision-divider::before{
        width:100%;
        height:4px;
    }

}

@media(max-width:768px){

    .vision-solutions-section{
        padding:90px 5%;
    }

    .vision-heading h2{
        font-size:42px;
    }

    .vision-heading p{
        font-size:16px;
    }

    .column-title h3{
        font-size:28px;
    }

    .vision-card{
        padding:28px;
    }

}

@media(max-width:500px){

    .vision-heading h2{
        font-size:30px;
    }

    .vision-heading p{
        font-size:14px;
    }

    .column-title{
        flex-direction:column;

        align-items:flex-start;
    }

    .solution-card{
        flex-direction:column;
    }

    .card-top h4,
    .solution-card h4{
        font-size:22px;
    }

    .vision-card p{
        font-size:14px;
    }

}




/* ========================= */
/* INDIA PROBLEM STATS */
/* ========================= */

.india-stats-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1c0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.stats-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.stats-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 90px;
}

/* TAG */

.stats-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.stats-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.stats-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

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

.stats-grid{
    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(340px,1fr));

    gap:35px;

    position:relative;

    z-index:5;
}

/* ========================= */
/* CARD */
/* ========================= */

.stats-card{
    position:relative;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:38px;

    padding:40px 35px;

    overflow:hidden;

    backdrop-filter:blur(16px);

    transition:0.5s;

    animation:floatCard 5s ease-in-out infinite;
}

/* HOVER */

.stats-card:hover{
    transform:translateY(-12px);

    border-color:#ff9800;

    box-shadow:
    0 0 45px rgba(255,140,0,0.25);
}

/* BORDER */

.stats-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* ========================= */
/* CIRCLE */
/* ========================= */

.circle-chart{
    position:relative;

    width:190px;
    height:190px;

    margin:auto auto 35px;
}

/* SVG */

.circle-chart svg{
    width:190px;
    height:190px;

    transform:rotate(-90deg);
}

/* CIRCLE */

.circle-chart svg circle{
    fill:none;

    stroke-width:12;

    stroke-linecap:round;
}

/* BG */

.circle-chart svg circle:first-child{
    stroke:rgba(255,255,255,0.08);
}

/* PROGRESS */

.progress{
    stroke:#ff9800;

    stroke-dasharray:470;

    filter:
    drop-shadow(0 0 18px rgba(255,140,0,0.8));
}

/* WIDTHS */

.progress1{
    stroke-dashoffset:290;
}

.progress2{
    stroke-dashoffset:225;
}

.progress3{
    stroke-dashoffset:120;
}

.progress4{
    stroke-dashoffset:180;
}

.progress5{
    stroke-dashoffset:250;
}

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

.circle-content{
    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    text-align:center;
}

/* NUMBER */

.circle-content h3{
    color:#fff;

    font-size:42px;

    margin-bottom:10px;

    font-weight:800;
}

/* TEXT */

.circle-content span{
    color:#ffb347;

    font-size:14px;

    font-weight:600;
}

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

.stats-content{
    text-align:center;
}

/* ICON */

.stats-icon{
    width:85px;
    height:85px;

    border-radius:28px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:34px;

    margin:0 auto 28px;

    box-shadow:
    0 0 35px rgba(255,140,0,0.4);
}

/* TITLE */

.stats-content h4{
    color:#fff;

    font-size:30px;

    line-height:1.4;

    margin-bottom:18px;

    font-weight:700;
}

/* TEXT */

.stats-content p{
    color:#ccc;

    font-size:15px;

    line-height:1.9;

    margin-bottom:28px;
}

/* ========================= */
/* PROGRESS BOX */
/* ========================= */

.progress-box{
    text-align:left;
}

/* INFO */

.progress-info{
    display:flex;
    justify-content:space-between;

    margin-bottom:12px;
}

/* TEXT */

.progress-info span{
    color:#ddd;

    font-size:14px;
}

/* BAR */

.progress-bar{
    width:100%;
    height:14px;

    border-radius:20px;

    background:rgba(255,255,255,0.08);

    overflow:hidden;
}

/* FILL */

.bar-fill{
    height:100%;

    border-radius:20px;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );

    animation:fillBar 3s ease forwards;
}

/* WIDTHS */

.fill1{
    width:38%;
}

.fill2{
    width:52%;
}

.fill3{
    width:74%;
}

.fill4{
    width:61%;
}

.fill5{
    width:47%;
}

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

@keyframes floatCard{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

@keyframes fillBar{

    from{
        width:0;
    }

}

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

@media(max-width:768px){

    .india-stats-section{
        padding:90px 5%;
    }

    .stats-heading h2{
        font-size:42px;
    }

    .stats-heading p{
        font-size:16px;
    }

    .stats-card{
        padding:35px 28px;
    }

    .stats-content h4{
        font-size:24px;
    }

}

@media(max-width:500px){

    .stats-heading h2{
        font-size:30px;
    }

    .stats-heading p{
        font-size:14px;
    }

    .circle-chart{
        width:160px;
        height:160px;
    }

    .circle-chart svg{
        width:160px;
        height:160px;
    }

    .circle-content h3{
        font-size:32px;
    }

    .stats-content h4{
        font-size:22px;
    }

    .stats-content p{
        font-size:14px;
    }

}




/* ========================= */
/* STATE ISSUES MAP */
/* ========================= */

.state-issues-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1c0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.map-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.state-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 90px;
}

/* TAG */

.state-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.state-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.state-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

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

.india-map-container{
    position:relative;

    z-index:5;

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

/* MAP */

.india-map{
    position:relative;

    width:100%;

    max-width:850px;
}

/* IMAGE */

.india-map img{
    width:100%;

    filter:
    drop-shadow(0 0 35px rgba(255,140,0,0.25));
}

/* ========================= */
/* STATE POINT */
/* ========================= */

.state-point{
    position:absolute;

    cursor:pointer;
}

/* DOT */

.point-dot{
    width:18px;
    height:18px;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    position:relative;

    z-index:5;

    box-shadow:
    0 0 25px rgba(255,140,0,0.8);
}

/* PULSE */

.pulse-ring{
    position:absolute;

    width:18px;
    height:18px;

    border-radius:50%;

    background:rgba(255,140,0,0.5);

    animation:pulseMap 2s infinite;
}

/* ANIMATION */

@keyframes pulseMap{

    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(3.5);
        opacity:0;
    }

}

/* ========================= */
/* POPUP */
/* ========================= */

.state-popup{
    position:absolute;

    bottom:35px;
    left:50%;

    transform:translateX(-50%) translateY(20px);

    width:280px;

    background:rgba(255,255,255,0.06);

    border:1px solid rgba(255,140,0,0.15);

    border-radius:28px;

    padding:28px;

    backdrop-filter:blur(16px);

    opacity:0;
    visibility:hidden;

    transition:0.5s;

    box-shadow:
    0 0 35px rgba(255,140,0,0.2);
}

/* SHOW */

.state-point:hover .state-popup{
    opacity:1;
    visibility:visible;

    transform:translateX(-50%) translateY(0);
}

/* TITLE */

.state-popup h3{
    color:#fff;

    font-size:28px;

    margin-bottom:20px;

    font-weight:700;
}

/* LIST */

.state-popup ul{
    list-style:none;
}

/* ITEM */

.state-popup ul li{
    color:#ddd;

    font-size:15px;

    line-height:1.9;

    margin-bottom:14px;

    padding-left:20px;

    position:relative;
}

/* BULLET */

.state-popup ul li::before{
    content:'';

    position:absolute;

    left:0;
    top:10px;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#ff9800;

    box-shadow:
    0 0 12px rgba(255,140,0,0.8);
}

/* ========================= */
/* STATE POSITIONS */
/* ========================= */

.rajasthan{
    top:39%;
    left:32%;
}

.up{
    top:31%;
    left:48%;
}

.maharashtra{
    top:56%;
    left:39%;
}

.gujarat{
    top:49%;
    left:24%;
}

.bihar{
    top:33%;
    left:58%;
}

/* ========================= */
/* HOVER */
/* ========================= */

.state-point:hover .point-dot{
    transform:scale(1.3);

    box-shadow:
    0 0 40px rgba(255,140,0,1);
}

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

@media(max-width:768px){

    .state-issues-section{
        padding:90px 5%;
    }

    .state-heading h2{
        font-size:42px;
    }

    .state-heading p{
        font-size:16px;
    }

    .state-popup{
        width:220px;

        padding:22px;
    }

    .state-popup h3{
        font-size:22px;
    }

}

@media(max-width:500px){

    .state-heading h2{
        font-size:30px;
    }

    .state-heading p{
        font-size:14px;
    }

    .state-popup{
        width:190px;

        padding:18px;
    }

    .state-popup h3{
        font-size:18px;
    }

    .state-popup ul li{
        font-size:13px;
    }

}




/* ========================= */
/* PUBLIC VOICE SECTION */
/* ========================= */

.public-voice-section{
    width:100%;

    padding:120px 0;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1c0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.voice-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.voice-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 90px;

    padding:0 7%;
}

/* TAG */

.voice-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.voice-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.voice-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

/* ========================= */
/* SLIDER */
/* ========================= */

.voice-slider{
    position:relative;

    z-index:5;

    overflow:hidden;

    width:100%;
}

/* TRACK */

.voice-track{
    display:flex;

    gap:35px;

    width:max-content;

    animation:sliderMove 30s linear infinite;
}

/* AUTO SCROLL */

@keyframes sliderMove{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }

}

/* ========================= */
/* CARD */
/* ========================= */

.voice-card{
    width:420px;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:38px;

    padding:35px;

    overflow:hidden;

    backdrop-filter:blur(16px);

    position:relative;

    transition:0.5s;

    box-shadow:
    0 0 35px rgba(255,140,0,0.08);
}

/* HOVER */

.voice-card:hover{
    transform:translateY(-12px);

    border-color:#ff9800;

    box-shadow:
    0 0 45px rgba(255,140,0,0.25);
}

/* BORDER */

.voice-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* ========================= */
/* TOP */
/* ========================= */

.voice-top{
    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:28px;
}

/* IMAGE */

.voice-image{
    width:90px;
    height:90px;

    border-radius:50%;

    overflow:hidden;

    border:3px solid rgba(255,140,0,0.3);

    box-shadow:
    0 0 25px rgba(255,140,0,0.25);
}

/* IMG */

.voice-image img{
    width:100%;
    height:100%;

    object-fit:cover;
}

/* INFO */

.voice-info h3{
    color:#fff;

    font-size:28px;

    margin-bottom:8px;

    font-weight:700;
}

.voice-info span{
    color:#ffb347;

    font-size:15px;

    font-weight:600;
}

/* ========================= */
/* TEXT */
/* ========================= */

.voice-card p{
    color:#ddd;

    font-size:16px;

    line-height:2;

    margin-bottom:28px;
}

/* ========================= */
/* STARS */
/* ========================= */

.voice-stars{
    display:flex;

    gap:10px;
}

/* STAR */

.voice-stars i{
    color:#ff9800;

    font-size:18px;

    filter:
    drop-shadow(0 0 10px rgba(255,140,0,0.7));
}

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

@media(max-width:768px){

    .public-voice-section{
        padding:90px 0;
    }

    .voice-heading h2{
        font-size:42px;
    }

    .voice-heading p{
        font-size:16px;
    }

    .voice-card{
        width:340px;

        padding:30px;
    }

    .voice-info h3{
        font-size:24px;
    }

}

@media(max-width:500px){

    .voice-heading{
        padding:0 5%;
    }

    .voice-heading h2{
        font-size:30px;
    }

    .voice-heading p{
        font-size:14px;
    }

    .voice-card{
        width:300px;

        padding:26px;
    }

    .voice-top{
        flex-direction:column;

        align-items:flex-start;
    }

    .voice-info h3{
        font-size:22px;
    }

    .voice-card p{
        font-size:14px;
    }

}




/* ========================= */
/* FINAL CTA SECTION */
/* ========================= */

.final-cta-section{
    width:100%;

    padding:140px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1d0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.cta-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    z-index:1;
}

.glow-left{
    width:500px;
    height:500px;

    background:rgba(255,140,0,0.18);

    top:-180px;
    left:-120px;
}

.glow-right{
    width:450px;
    height:450px;

    background:rgba(255,80,0,0.14);

    bottom:-180px;
    right:-120px;
}

/* ========================= */
/* FLOATING SHAPES */
/* ========================= */

.floating-shape{
    position:absolute;

    border-radius:50%;

    background:
    radial-gradient(
    rgba(255,140,0,0.18),
    transparent
    );

    animation:floatShape 6s ease-in-out infinite;
}

/* SHAPE 1 */

.shape1{
    width:220px;
    height:220px;

    top:10%;
    left:8%;
}

/* SHAPE 2 */

.shape2{
    width:180px;
    height:180px;

    bottom:12%;
    right:10%;

    animation-delay:2s;
}

/* SHAPE 3 */

.shape3{
    width:120px;
    height:120px;

    top:50%;
    right:25%;

    animation-delay:4s;
}

/* FLOAT */

@keyframes floatShape{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-25px);
    }

    100%{
        transform:translateY(0px);
    }

}

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

.final-cta-container{
    position:relative;

    z-index:5;

    max-width:1200px;

    margin:auto;

    text-align:center;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:45px;

    padding:90px 70px;

    overflow:hidden;

    backdrop-filter:blur(18px);

    box-shadow:
    0 0 50px rgba(255,140,0,0.12);
}

/* TOP BORDER */

.final-cta-container::before{
    content:'';

    position:absolute;

    width:100%;
    height:5px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

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

.cta-badge{
    display:inline-flex;
    align-items:center;

    gap:12px;

    padding:14px 28px;

    border-radius:50px;

    background:rgba(255,0,0,0.12);

    border:1px solid rgba(255,0,0,0.25);

    color:#ff4d4d;

    font-size:14px;
    font-weight:700;

    letter-spacing:2px;

    margin-bottom:35px;

    box-shadow:
    0 0 25px rgba(255,0,0,0.15);
}

/* PULSE */

.pulse-dot{
    width:12px;
    height:12px;

    border-radius:50%;

    background:#ff0000;

    animation:pulseDot 1.5s infinite;
}

@keyframes pulseDot{

    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(2.5);
        opacity:0;
    }

}

/* ========================= */
/* HEADING */
/* ========================= */

.final-cta-container h2{
    color:#fff;

    font-size:72px;

    line-height:1.2;

    margin-bottom:28px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 25px rgba(255,140,0,0.35);
}

/* TEXT */

.final-cta-container p{
    color:#ddd;

    font-size:18px;

    line-height:2;

    max-width:900px;

    margin:auto auto 50px;
}

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

.cta-buttons{
    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

    margin-bottom:60px;
}

/* BUTTON */

.cta-btn{
    display:inline-flex;
    align-items:center;

    gap:14px;

    padding:20px 34px;

    border-radius:20px;

    text-decoration:none;

    font-size:16px;
    font-weight:600;

    transition:0.4s;
}

/* PRIMARY */

.primary-btn{
    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    box-shadow:
    0 0 35px rgba(255,140,0,0.35);
}

/* SECONDARY */

.secondary-btn{
    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.25);

    color:#fff;

    backdrop-filter:blur(12px);
}

/* THIRD */

.third-btn{
    background:
    linear-gradient(
    135deg,
    #ff5e00,
    #ff2d00
    );

    color:#fff;

    box-shadow:
    0 0 35px rgba(255,80,0,0.35);
}

/* HOVER */

.cta-btn:hover{
    transform:translateY(-8px);

    box-shadow:
    0 0 45px rgba(255,140,0,0.6);
}

/* ========================= */
/* STATS */
/* ========================= */

.cta-stats{
    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;
}

/* BOX */

.stat-box{
    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:28px;

    padding:35px 20px;

    transition:0.4s;
}

/* HOVER */

.stat-box:hover{
    transform:translateY(-8px);

    border-color:#ff9800;

    box-shadow:
    0 0 35px rgba(255,140,0,0.2);
}

/* NUMBER */

.stat-box h3{
    color:#ff9800;

    font-size:42px;

    margin-bottom:14px;

    font-weight:800;

    text-shadow:
    0 0 18px rgba(255,140,0,0.5);
}

/* TEXT */

.stat-box span{
    color:#ddd;

    font-size:16px;

    font-weight:500;
}

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

@media(max-width:992px){

    .cta-stats{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .final-cta-section{
        padding:90px 5%;
    }

    .final-cta-container{
        padding:70px 30px;
    }

    .final-cta-container h2{
        font-size:42px;
    }

    .final-cta-container p{
        font-size:16px;
    }

}

@media(max-width:500px){

    .final-cta-container{
        padding:60px 22px;
    }

    .final-cta-container h2{
        font-size:30px;
    }

    .final-cta-container p{
        font-size:14px;
    }

    .cta-buttons{
        flex-direction:column;
    }

    .cta-btn{
        width:100%;

        justify-content:center;
    }

    .stat-box h3{
        font-size:34px;
    }

}












<!----------------------------------------in focus css codes-----------------------------------------!>

/* ========================= */
/* TRENDING TOPICS SECTION */
/* ========================= */

.trending-topics-section{
    width:100%;

    padding:120px 0;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1d0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.topics-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.topics-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 90px;

    padding:0 7%;
}

/* TAG */

.topics-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.topics-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.topics-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

/* ========================= */
/* SLIDER */
/* ========================= */

.topics-slider{
    position:relative;

    z-index:5;

    overflow:hidden;

    width:100%;
}

/* TRACK */

.topics-track{
    display:flex;

    gap:35px;

    width:max-content;

    padding-left:7%;

    animation:topicsMove 28s linear infinite;
}

/* AUTO SLIDE */

@keyframes topicsMove{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }

}

/* ========================= */
/* CARD */
/* ========================= */

.topic-card{
    position:relative;

    width:380px;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:38px;

    padding:40px 35px;

    overflow:hidden;

    backdrop-filter:blur(16px);

    transition:0.5s;

    animation:floatCard 5s ease-in-out infinite;

    box-shadow:
    0 0 35px rgba(255,140,0,0.08);
}

/* HOVER */

.topic-card:hover{
    transform:translateY(-12px);

    border-color:#ff9800;

    box-shadow:
    0 0 45px rgba(255,140,0,0.25);
}

/* TOP BORDER */

.topic-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

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

.trending-badge{
    display:inline-flex;
    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:40px;

    background:rgba(255,0,0,0.12);

    border:1px solid rgba(255,0,0,0.25);

    color:#ff4d4d;

    font-size:12px;
    font-weight:700;

    letter-spacing:1px;

    margin-bottom:30px;
}

/* PULSE */

.pulse-dot{
    width:10px;
    height:10px;

    border-radius:50%;

    background:#ff0000;

    animation:pulseDot 1.5s infinite;
}

@keyframes pulseDot{

    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(2.5);
        opacity:0;
    }

}

/* ========================= */
/* ICON */
/* ========================= */

.topic-icon{
    width:95px;
    height:95px;

    border-radius:30px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:38px;

    margin-bottom:30px;

    box-shadow:
    0 0 35px rgba(255,140,0,0.45);

    animation:iconPulse 3s infinite;
}

/* ICON PULSE */

@keyframes iconPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}

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

.topic-card h3{
    color:#fff;

    font-size:32px;

    line-height:1.4;

    margin-bottom:18px;

    font-weight:700;
}

/* TEXT */

.topic-card p{
    color:#ccc;

    font-size:15px;

    line-height:1.9;

    margin-bottom:30px;
}

/* BUTTON */

.topic-card a{
    display:inline-flex;
    align-items:center;

    gap:12px;

    padding:16px 28px;

    border-radius:16px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:0.4s;

    box-shadow:
    0 0 25px rgba(255,140,0,0.35);
}

/* HOVER */

.topic-card a:hover{
    transform:translateY(-5px);

    gap:18px;

    box-shadow:
    0 0 40px rgba(255,140,0,0.7);
}

/* FLOAT */

@keyframes floatCard{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

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

@media(max-width:768px){

    .trending-topics-section{
        padding:90px 0;
    }

    .topics-heading h2{
        font-size:42px;
    }

    .topics-heading p{
        font-size:16px;
    }

    .topic-card{
        width:320px;

        padding:35px 28px;
    }

    .topic-card h3{
        font-size:26px;
    }

}

@media(max-width:500px){

    .topics-heading{
        padding:0 5%;
    }

    .topics-heading h2{
        font-size:30px;
    }

    .topics-heading p{
        font-size:14px;
    }

    .topic-card{
        width:290px;

        padding:30px 24px;
    }

    .topic-card h3{
        font-size:22px;
    }

    .topic-card p{
        font-size:14px;
    }

    .topic-icon{
        width:75px;
        height:75px;

        font-size:30px;
    }

}




/* ========================= */
/* FEATURED FOCUS CAMPAIGN */
/* ========================= */

.focus-campaign-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1d0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.campaign-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    z-index:1;
}

.glow-left{
    width:450px;
    height:450px;

    background:rgba(255,140,0,0.18);

    top:-180px;
    left:-120px;
}

.glow-right{
    width:420px;
    height:420px;

    background:rgba(255,80,0,0.14);

    bottom:-180px;
    right:-120px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.campaign-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 90px;
}

/* TAG */

.campaign-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,0,0,0.12);

    border:1px solid rgba(255,0,0,0.25);

    color:#ff4d4d;

    font-size:14px;
    font-weight:700;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.campaign-heading h2{
    color:#fff;

    font-size:72px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 25px rgba(255,140,0,0.35);
}

/* TEXT */

.campaign-heading p{
    color:#ddd;

    font-size:18px;

    line-height:1.9;
}

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

.campaign-container{
    display:grid;

    grid-template-columns:1.1fr 1fr;

    gap:45px;

    align-items:center;

    position:relative;

    z-index:5;
}

/* ========================= */
/* MEDIA */
/* ========================= */

.campaign-media{
    position:relative;

    overflow:hidden;

    border-radius:40px;

    min-height:700px;

    border:1px solid rgba(255,140,0,0.15);

    box-shadow:
    0 0 45px rgba(255,140,0,0.15);
}

/* IMAGE */

.campaign-media img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:0.8s;
}

/* HOVER */

.campaign-media:hover img{
    transform:scale(1.1);
}

/* OVERLAY */

.campaign-overlay{
    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,0.88),
    rgba(0,0,0,0.2)
    );
}

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

.campaign-badge{
    position:absolute;

    top:28px;
    left:28px;

    display:inline-flex;
    align-items:center;

    gap:12px;

    padding:14px 24px;

    border-radius:40px;

    background:#ff0000;

    color:#fff;

    font-size:13px;
    font-weight:700;

    letter-spacing:1px;

    z-index:5;

    box-shadow:
    0 0 30px rgba(255,0,0,0.6);
}

/* PULSE */

.pulse-dot{
    width:10px;
    height:10px;

    border-radius:50%;

    background:#fff;

    animation:pulseDot 1.5s infinite;
}

@keyframes pulseDot{

    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(2.5);
        opacity:0;
    }

}

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

.campaign-play{
    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:110px;
    height:110px;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:38px;

    z-index:5;

    box-shadow:
    0 0 40px rgba(255,140,0,0.7);

    animation:playPulse 2s infinite;
}

/* ANIMATION */

@keyframes playPulse{

    0%{
        box-shadow:0 0 0 rgba(255,140,0,0.5);
    }

    70%{
        box-shadow:0 0 45px rgba(255,140,0,0);
    }

    100%{
        box-shadow:0 0 0 rgba(255,140,0,0);
    }

}

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

.media-content{
    position:absolute;

    bottom:35px;
    left:35px;

    z-index:5;
}

/* TITLE */

.media-content h3{
    color:#fff;

    font-size:38px;

    margin-bottom:12px;

    font-weight:700;
}

/* TEXT */

.media-content span{
    color:#ffb347;

    font-size:15px;

    font-weight:600;
}

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

.campaign-content{
    position:relative;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:40px;

    padding:50px 45px;

    backdrop-filter:blur(16px);

    overflow:hidden;

    box-shadow:
    0 0 40px rgba(255,140,0,0.1);
}

/* BORDER */

.campaign-content::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* TAG */

.small-tag{
    display:inline-block;

    padding:12px 22px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.25);

    color:#ffb347;

    font-size:13px;
    font-weight:700;

    letter-spacing:1px;

    margin-bottom:28px;
}

/* TITLE */

.campaign-content h3{
    color:#fff;

    font-size:46px;

    line-height:1.3;

    margin-bottom:24px;

    font-weight:800;
}

/* TEXT */

.campaign-content p{
    color:#ddd;

    font-size:16px;

    line-height:2;

    margin-bottom:35px;
}

/* ========================= */
/* MISSION POINTS */
/* ========================= */

.mission-points{
    display:flex;
    flex-direction:column;

    gap:18px;

    margin-bottom:40px;
}

/* BOX */

.mission-box{
    display:flex;
    align-items:center;

    gap:16px;

    padding:18px 22px;

    border-radius:18px;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.1);
}

/* ICON */

.mission-box i{
    width:38px;
    height:38px;

    border-radius:50%;

    background:#ff9800;

    color:#fff;

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

    font-size:15px;

    box-shadow:
    0 0 18px rgba(255,140,0,0.6);
}

/* TEXT */

.mission-box span{
    color:#fff;

    font-size:15px;

    font-weight:500;
}

/* ========================= */
/* STATS */
/* ========================= */

.campaign-stats{
    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:20px;

    margin-bottom:40px;
}

/* CARD */

.stat-card{
    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:24px;

    padding:25px 18px;

    text-align:center;
}

/* NUMBER */

.stat-card h4{
    color:#ff9800;

    font-size:34px;

    margin-bottom:10px;

    font-weight:800;
}

/* TEXT */

.stat-card span{
    color:#ddd;

    font-size:14px;
}

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

.campaign-btn{
    display:inline-flex;
    align-items:center;

    gap:14px;

    padding:20px 34px;

    border-radius:20px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    text-decoration:none;

    font-size:16px;
    font-weight:600;

    transition:0.4s;

    box-shadow:
    0 0 35px rgba(255,140,0,0.35);
}

/* HOVER */

.campaign-btn:hover{
    transform:translateY(-8px);

    box-shadow:
    0 0 45px rgba(255,140,0,0.7);
}

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

@media(max-width:1100px){

    .campaign-container{
        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .focus-campaign-section{
        padding:90px 5%;
    }

    .campaign-heading h2{
        font-size:42px;
    }

    .campaign-heading p{
        font-size:16px;
    }

    .campaign-media{
        min-height:500px;
    }

    .campaign-content{
        padding:40px 30px;
    }

    .campaign-content h3{
        font-size:34px;
    }

    .campaign-stats{
        grid-template-columns:1fr;
    }

}

@media(max-width:500px){

    .campaign-heading h2{
        font-size:30px;
    }

    .campaign-heading p{
        font-size:14px;
    }

    .campaign-media{
        min-height:400px;
    }

    .campaign-play{
        width:80px;
        height:80px;

        font-size:26px;
    }

    .campaign-content{
        padding:35px 24px;
    }

    .campaign-content h3{
        font-size:26px;
    }

    .campaign-content p{
        font-size:14px;
    }

    .mission-box{
        align-items:flex-start;
    }

    .campaign-btn{
        width:100%;

        justify-content:center;
    }

}




/* ========================= */
/* FOCUS ISSUE CARDS */
/* ========================= */

.focus-issues-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1c0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.focus-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    z-index:1;
}

.glow-left{
    width:420px;
    height:420px;

    background:rgba(255,140,0,0.15);

    top:-150px;
    left:-100px;
}

.glow-right{
    width:380px;
    height:380px;

    background:rgba(255,80,0,0.12);

    bottom:-150px;
    right:-100px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.focus-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 90px;
}

/* TAG */

.focus-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.focus-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.focus-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

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

.focus-grid{
    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:40px;

    position:relative;

    z-index:5;
}

/* ========================= */
/* CARD */
/* ========================= */

.focus-card{
    position:relative;

    height:560px;

    perspective:1600px;
}

/* FRONT & BACK */

.focus-front,
.focus-back{
    position:absolute;

    width:100%;
    height:100%;

    border-radius:40px;

    padding:40px 35px;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    backdrop-filter:blur(16px);

    overflow:hidden;

    transition:0.8s;

    backface-visibility:hidden;

    box-shadow:
    0 0 35px rgba(255,140,0,0.08);
}

/* BORDER */

.focus-front::before,
.focus-back::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* FRONT */

.focus-front{
    display:flex;
    flex-direction:column;
    justify-content:center;

    text-align:center;
}

/* BACK */

.focus-back{
    transform:rotateY(180deg);

    overflow-y:auto;
}

/* HOVER */

.focus-card:hover .focus-front{
    transform:rotateY(180deg);
}

.focus-card:hover .focus-back{
    transform:rotateY(360deg);
}

/* ========================= */
/* ICON */
/* ========================= */

.focus-icon{
    width:100px;
    height:100px;

    border-radius:30px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:40px;

    margin:0 auto 35px;

    box-shadow:
    0 0 40px rgba(255,140,0,0.45);

    animation:iconPulse 3s infinite;
}

/* PULSE */

@keyframes iconPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}

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

.focus-front h3{
    color:#fff;

    font-size:34px;

    line-height:1.4;

    margin-bottom:20px;

    font-weight:700;
}

/* TEXT */

.focus-front p{
    color:#ccc;

    font-size:15px;

    line-height:1.9;

    margin-bottom:30px;
}

/* BUTTON */

.focus-front span{
    color:#ff9800;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;
}

/* ========================= */
/* BACK */
/* ========================= */

.focus-back h3{
    color:#fff;

    font-size:34px;

    margin-bottom:35px;

    font-weight:700;
}

/* CONTENT */

.focus-content{
    display:flex;
    flex-direction:column;

    gap:22px;
}

/* ITEM */

.focus-item{
    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.1);

    border-radius:24px;

    padding:22px;

    transition:0.4s;
}

/* HOVER */

.focus-item:hover{
    transform:translateY(-5px);

    border-color:#ff9800;

    box-shadow:
    0 0 25px rgba(255,140,0,0.18);
}

/* TITLE */

.focus-item h4{
    color:#ffb347;

    font-size:20px;

    margin-bottom:12px;

    font-weight:700;
}

/* TEXT */

.focus-item p{
    color:#ddd;

    font-size:15px;

    line-height:1.9;
}

/* ========================= */
/* HOVER */
/* ========================= */

.focus-card:hover .focus-front,
.focus-card:hover .focus-back{
    border-color:#ff9800;

    box-shadow:
    0 0 50px rgba(255,140,0,0.25);
}

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

@media(max-width:768px){

    .focus-issues-section{
        padding:90px 5%;
    }

    .focus-heading h2{
        font-size:42px;
    }

    .focus-heading p{
        font-size:16px;
    }

    .focus-card{
        height:620px;
    }

    .focus-front h3,
    .focus-back h3{
        font-size:28px;
    }

}

@media(max-width:500px){

    .focus-heading h2{
        font-size:30px;
    }

    .focus-heading p{
        font-size:14px;
    }

    .focus-card{
        height:680px;
    }

    .focus-front,
    .focus-back{
        padding:32px 24px;
    }

    .focus-front h3,
    .focus-back h3{
        font-size:24px;
    }

    .focus-front p,
    .focus-item p{
        font-size:14px;
    }

    .focus-icon{
        width:75px;
        height:75px;

        font-size:30px;
    }

}




/* ========================= */
/* INDIA VISION SPOTLIGHT */
/* ========================= */

.vision-spotlight-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1d0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.vision-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    z-index:1;
}

.glow-left{
    width:450px;
    height:450px;

    background:rgba(255,140,0,0.16);

    top:-180px;
    left:-120px;
}

.glow-right{
    width:420px;
    height:420px;

    background:rgba(255,80,0,0.14);

    bottom:-180px;
    right:-120px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.vision-spotlight-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 90px;
}

/* TAG */

.vision-spotlight-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.vision-spotlight-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.vision-spotlight-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

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

.vision-spotlight-container{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

    position:relative;

    z-index:5;
}

/* ========================= */
/* LEFT */
/* ========================= */

.vision-left{
    display:flex;
    flex-direction:column;

    gap:30px;
}

/* CARD */

.vision-box{
    display:flex;

    gap:22px;

    align-items:flex-start;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:35px;

    padding:32px;

    overflow:hidden;

    backdrop-filter:blur(16px);

    transition:0.5s;

    position:relative;
}

/* BORDER */

.vision-box::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* HOVER */

.vision-box:hover{
    transform:translateY(-10px);

    border-color:#ff9800;

    box-shadow:
    0 0 40px rgba(255,140,0,0.2);
}

/* ICON */

.vision-icon{
    min-width:85px;
    height:85px;

    border-radius:28px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:34px;

    box-shadow:
    0 0 35px rgba(255,140,0,0.4);

    animation:iconPulse 3s infinite;
}

/* PULSE */

@keyframes iconPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}

/* CONTENT */

.vision-content h3{
    color:#fff;

    font-size:30px;

    margin-bottom:16px;

    font-weight:700;
}

.vision-content p{
    color:#ddd;

    font-size:15px;

    line-height:1.9;

    margin-bottom:20px;
}

/* ========================= */
/* PROGRESS */
/* ========================= */

.vision-progress{
    width:100%;
    height:12px;

    border-radius:20px;

    background:rgba(255,255,255,0.08);

    overflow:hidden;
}

/* FILL */

.progress-fill{
    height:100%;

    border-radius:20px;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );

    animation:fillProgress 3s ease forwards;
}

/* WIDTHS */

.fill1{
    width:90%;
}

.fill2{
    width:85%;
}

.fill3{
    width:80%;
}

.fill4{
    width:75%;
}

/* ========================= */
/* MAP */
/* ========================= */

.vision-map-area{
    position:relative;
}

/* BOX */

.india-map-box{
    position:relative;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:40px;

    padding:40px;

    backdrop-filter:blur(16px);

    overflow:hidden;

    box-shadow:
    0 0 45px rgba(255,140,0,0.12);
}

/* IMAGE */

.india-map-box img{
    width:100%;

    filter:
    drop-shadow(0 0 35px rgba(255,140,0,0.3));
}

/* ========================= */
/* MAP POINTS */
/* ========================= */

.map-point{
    position:absolute;

    width:18px;
    height:18px;

    border-radius:50%;

    background:#ff9800;

    box-shadow:
    0 0 25px rgba(255,140,0,0.8);

    z-index:5;
}

/* PULSE */

.map-point span{
    position:absolute;

    inset:0;

    border-radius:50%;

    background:rgba(255,140,0,0.5);

    animation:pulseMap 2s infinite;
}

/* POSITIONS */

.point1{
    top:28%;
    left:46%;
}

.point2{
    top:42%;
    left:36%;
}

.point3{
    top:58%;
    left:48%;
}

.point4{
    top:38%;
    left:60%;
}

/* PULSE */

@keyframes pulseMap{

    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(3.5);
        opacity:0;
    }

}

/* ========================= */
/* LINES */
/* ========================= */

.map-line{
    position:absolute;

    height:3px;

    background:
    linear-gradient(
    to right,
    #ff9800,
    transparent
    );

    box-shadow:
    0 0 15px rgba(255,140,0,0.6);

    animation:lineMove 3s infinite linear;
}

/* POSITIONS */

.line1{
    width:180px;

    top:35%;
    left:38%;

    transform:rotate(20deg);
}

.line2{
    width:140px;

    top:48%;
    left:32%;

    transform:rotate(-18deg);
}

.line3{
    width:200px;

    top:58%;
    left:42%;

    transform:rotate(12deg);
}

/* ANIMATION */

@keyframes lineMove{

    0%{
        opacity:0.3;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0.3;
    }

}

/* ========================= */
/* FLOATING CARD */
/* ========================= */

.map-info-card{
    position:absolute;

    bottom:-20px;
    right:-20px;

    background:
    linear-gradient(
    135deg,
    rgba(255,152,0,0.18),
    rgba(255,94,0,0.12)
    );

    border:1px solid rgba(255,140,0,0.2);

    border-radius:28px;

    padding:26px 28px;

    backdrop-filter:blur(16px);

    box-shadow:
    0 0 40px rgba(255,140,0,0.2);

    animation:floatCard 4s ease-in-out infinite;
}

/* TITLE */

.map-info-card h3{
    color:#fff;

    font-size:28px;

    margin-bottom:12px;

    font-weight:700;
}

/* TEXT */

.map-info-card p{
    color:#ffb347;

    font-size:15px;

    font-weight:600;
}

/* FLOAT */

@keyframes floatCard{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* PROGRESS */

@keyframes fillProgress{

    from{
        width:0;
    }

}

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

@media(max-width:1100px){

    .vision-spotlight-container{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .vision-spotlight-section{
        padding:90px 5%;
    }

    .vision-spotlight-heading h2{
        font-size:42px;
    }

    .vision-spotlight-heading p{
        font-size:16px;
    }

    .vision-box{
        padding:28px;
    }

    .vision-content h3{
        font-size:24px;
    }

}

@media(max-width:500px){

    .vision-spotlight-heading h2{
        font-size:30px;
    }

    .vision-spotlight-heading p{
        font-size:14px;
    }

    .vision-box{
        flex-direction:column;
    }

    .vision-content h3{
        font-size:22px;
    }

    .vision-content p{
        font-size:14px;
    }

    .map-info-card{
        position:relative;

        right:auto;
        bottom:auto;

        margin-top:20px;
    }

}




/* ========================= */
/* INTERACTIVE TIMELINE */
/* ========================= */

.interactive-timeline-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1d0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.timeline-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    z-index:1;
}

.glow-left{
    width:450px;
    height:450px;

    background:rgba(255,140,0,0.16);

    top:-180px;
    left:-120px;
}

.glow-right{
    width:420px;
    height:420px;

    background:rgba(255,80,0,0.14);

    bottom:-180px;
    right:-120px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.timeline-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 100px;
}

/* TAG */

.timeline-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.timeline-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.timeline-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

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

.timeline-container{
    position:relative;

    max-width:1300px;

    margin:auto;

    z-index:5;
}

/* CENTER LINE */

.timeline-line{
    position:absolute;

    top:0;
    left:50%;

    transform:translateX(-50%);

    width:4px;
    height:100%;

    background:
    linear-gradient(
    to bottom,
    #ff9800,
    #ff5e00
    );

    box-shadow:
    0 0 25px rgba(255,140,0,0.6);

    border-radius:20px;
}

/* ========================= */
/* ITEM */
/* ========================= */

.timeline-item{
    position:relative;

    width:50%;

    padding:20px 50px;

    margin-bottom:80px;

    animation:fadeUp 1s ease forwards;
}

/* LEFT */

.left-item{
    left:0;

    text-align:right;
}

/* RIGHT */

.right-item{
    left:50%;
}

/* ========================= */
/* DOT */
/* ========================= */

.timeline-dot{
    position:absolute;

    top:40px;

    width:24px;
    height:24px;

    border-radius:50%;

    background:#ff9800;

    box-shadow:
    0 0 30px rgba(255,140,0,0.9);

    z-index:10;
}

/* LEFT DOT */

.left-item .timeline-dot{
    right:-12px;
}

/* RIGHT DOT */

.right-item .timeline-dot{
    left:-12px;
}

/* PULSE */

.timeline-dot span{
    position:absolute;

    inset:0;

    border-radius:50%;

    background:rgba(255,140,0,0.5);

    animation:pulseDot 2s infinite;
}

/* PULSE */

@keyframes pulseDot{

    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(3.5);
        opacity:0;
    }

}

/* ========================= */
/* CARD */
/* ========================= */

.timeline-card{
    position:relative;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:35px;

    padding:35px;

    overflow:hidden;

    backdrop-filter:blur(16px);

    transition:0.5s;

    box-shadow:
    0 0 35px rgba(255,140,0,0.08);
}

/* BORDER */

.timeline-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* HOVER */

.timeline-card:hover{
    transform:translateY(-10px);

    border-color:#ff9800;

    box-shadow:
    0 0 45px rgba(255,140,0,0.25);
}

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

.timeline-badge{
    display:inline-block;

    padding:10px 20px;

    border-radius:40px;

    background:rgba(255,0,0,0.12);

    border:1px solid rgba(255,0,0,0.25);

    color:#ff4d4d;

    font-size:12px;
    font-weight:700;

    letter-spacing:1px;

    margin-bottom:22px;
}

/* DATE */

.timeline-date{
    color:#ff9800;

    font-size:15px;

    font-weight:700;

    margin-bottom:18px;
}

/* TITLE */

.timeline-card h3{
    color:#fff;

    font-size:34px;

    line-height:1.4;

    margin-bottom:18px;

    font-weight:700;
}

/* TEXT */

.timeline-card p{
    color:#ddd;

    font-size:15px;

    line-height:1.9;

    margin-bottom:28px;
}

/* ========================= */
/* TAGS */
/* ========================= */

.timeline-tags{
    display:flex;

    gap:14px;

    flex-wrap:wrap;
}

/* LEFT TAGS */

.left-item .timeline-tags{
    justify-content:flex-end;
}

/* TAG */

.timeline-tags span{
    padding:10px 18px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.18);

    color:#ffb347;

    font-size:13px;
    font-weight:600;
}

/* ========================= */
/* ANIMATION */
/* ========================= */

@keyframes fadeUp{

    0%{
        opacity:0;
        transform:translateY(50px);
    }

    100%{
        opacity:1;
        transform:translateY(0);
    }

}

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

@media(max-width:992px){

    .timeline-line{
        left:20px;
    }

    .timeline-item{
        width:100%;

        left:0;

        padding-left:70px;
        padding-right:0;

        text-align:left;
    }

    .left-item,
    .right-item{
        left:0;
    }

    .left-item .timeline-dot,
    .right-item .timeline-dot{
        left:8px;
    }

    .left-item .timeline-tags{
        justify-content:flex-start;
    }

}

@media(max-width:768px){

    .interactive-timeline-section{
        padding:90px 5%;
    }

    .timeline-heading h2{
        font-size:42px;
    }

    .timeline-heading p{
        font-size:16px;
    }

    .timeline-card h3{
        font-size:28px;
    }

}

@media(max-width:500px){

    .timeline-heading h2{
        font-size:30px;
    }

    .timeline-heading p{
        font-size:14px;
    }

    .timeline-card{
        padding:28px 22px;
    }

    .timeline-card h3{
        font-size:22px;
    }

    .timeline-card p{
        font-size:14px;
    }

}




/* ========================= */
/* FOCUS DASHBOARD SECTION */
/* ========================= */

.focus-dashboard-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1c0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.dashboard-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    z-index:1;
}

.glow-left{
    width:450px;
    height:450px;

    background:rgba(255,140,0,0.16);

    top:-180px;
    left:-120px;
}

.glow-right{
    width:420px;
    height:420px;

    background:rgba(255,80,0,0.14);

    bottom:-180px;
    right:-120px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.dashboard-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 90px;
}

/* TAG */

.dashboard-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.dashboard-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.dashboard-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

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

.dashboard-grid{
    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(340px,1fr));

    gap:35px;

    position:relative;

    z-index:5;
}

/* ========================= */
/* CARD */
/* ========================= */

.dashboard-card{
    position:relative;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:40px;

    padding:40px 35px;

    overflow:hidden;

    backdrop-filter:blur(16px);

    transition:0.5s;

    box-shadow:
    0 0 35px rgba(255,140,0,0.08);

    animation:floatCard 5s ease-in-out infinite;
}

/* HOVER */

.dashboard-card:hover{
    transform:translateY(-12px);

    border-color:#ff9800;

    box-shadow:
    0 0 45px rgba(255,140,0,0.25);
}

/* BORDER */

.dashboard-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* ========================= */
/* CHART */
/* ========================= */

.circle-chart{
    position:relative;

    width:190px;
    height:190px;

    margin:auto auto 35px;
}

/* SVG */

.circle-chart svg{
    width:190px;
    height:190px;

    transform:rotate(-90deg);
}

/* CIRCLE */

.circle-chart svg circle{
    fill:none;

    stroke-width:12;

    stroke-linecap:round;
}

/* BG */

.circle-chart svg circle:first-child{
    stroke:rgba(255,255,255,0.08);
}

/* PROGRESS */

.progress{
    stroke:#ff9800;

    stroke-dasharray:470;

    filter:
    drop-shadow(0 0 18px rgba(255,140,0,0.8));
}

/* WIDTHS */

.progress1{
    stroke-dashoffset:70;
}

.progress2{
    stroke-dashoffset:35;
}

.progress3{
    stroke-dashoffset:120;
}

.progress4{
    stroke-dashoffset:160;
}

.progress5{
    stroke-dashoffset:90;
}

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

.chart-content{
    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    text-align:center;
}

/* NUMBER */

.chart-content h3{
    color:#fff;

    font-size:36px;

    margin-bottom:10px;

    font-weight:800;
}

/* TEXT */

.chart-content span{
    color:#ffb347;

    font-size:14px;

    font-weight:600;
}

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

.dashboard-content{
    text-align:center;
}

/* ICON */

.dashboard-icon{
    width:85px;
    height:85px;

    border-radius:28px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:34px;

    margin:0 auto 28px;

    box-shadow:
    0 0 35px rgba(255,140,0,0.4);

    animation:iconPulse 3s infinite;
}

/* PULSE */

@keyframes iconPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}

/* TITLE */

.dashboard-content h4{
    color:#fff;

    font-size:30px;

    line-height:1.4;

    margin-bottom:18px;

    font-weight:700;
}

/* TEXT */

.dashboard-content p{
    color:#ddd;

    font-size:15px;

    line-height:1.9;

    margin-bottom:28px;
}

/* ========================= */
/* PROGRESS BAR */
/* ========================= */

.progress-box{
    text-align:left;
}

/* INFO */

.progress-info{
    display:flex;
    justify-content:space-between;

    margin-bottom:12px;
}

/* TEXT */

.progress-info span{
    color:#ddd;

    font-size:14px;
}

/* BAR */

.progress-bar{
    width:100%;
    height:14px;

    border-radius:20px;

    background:rgba(255,255,255,0.08);

    overflow:hidden;
}

/* FILL */

.bar-fill{
    height:100%;

    border-radius:20px;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );

    animation:fillBar 3s ease forwards;
}

/* WIDTHS */

.fill1{
    width:85%;
}

.fill2{
    width:92%;
}

.fill3{
    width:78%;
}

.fill4{
    width:72%;
}

.fill5{
    width:81%;
}

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

@keyframes fillBar{

    from{
        width:0;
    }

}

@keyframes floatCard{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

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

@media(max-width:768px){

    .focus-dashboard-section{
        padding:90px 5%;
    }

    .dashboard-heading h2{
        font-size:42px;
    }

    .dashboard-heading p{
        font-size:16px;
    }

    .dashboard-card{
        padding:35px 28px;
    }

    .dashboard-content h4{
        font-size:24px;
    }

}

@media(max-width:500px){

    .dashboard-heading h2{
        font-size:30px;
    }

    .dashboard-heading p{
        font-size:14px;
    }

    .circle-chart{
        width:160px;
        height:160px;
    }

    .circle-chart svg{
        width:160px;
        height:160px;
    }

    .chart-content h3{
        font-size:28px;
    }

    .dashboard-content h4{
        font-size:22px;
    }

    .dashboard-content p{
        font-size:14px;
    }

}




/* ========================= */
/* FINAL REVOLUTION CTA */
/* ========================= */

.revolution-cta-section{
    width:100%;

    padding:140px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1b0b00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.revolution-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    z-index:1;
}

.glow-left{
    width:500px;
    height:500px;

    background:rgba(255,140,0,0.18);

    top:-180px;
    left:-120px;
}

.glow-right{
    width:450px;
    height:450px;

    background:rgba(255,80,0,0.14);

    bottom:-180px;
    right:-120px;
}

/* ========================= */
/* FLOATING SHAPES */
/* ========================= */

.floating-circle{
    position:absolute;

    border-radius:50%;

    background:
    radial-gradient(
    rgba(255,140,0,0.18),
    transparent
    );

    animation:floatCircle 6s ease-in-out infinite;
}

/* CIRCLES */

.circle1{
    width:220px;
    height:220px;

    top:10%;
    left:8%;
}

.circle2{
    width:180px;
    height:180px;

    bottom:12%;
    right:10%;

    animation-delay:2s;
}

.circle3{
    width:120px;
    height:120px;

    top:48%;
    right:25%;

    animation-delay:4s;
}

/* FLOAT */

@keyframes floatCircle{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-25px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* ========================= */
/* CTA BOX */
/* ========================= */

.revolution-cta-box{
    position:relative;

    z-index:5;

    max-width:1250px;

    margin:auto;

    text-align:center;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:45px;

    padding:95px 70px;

    overflow:hidden;

    backdrop-filter:blur(18px);

    box-shadow:
    0 0 50px rgba(255,140,0,0.12);
}

/* TOP BORDER */

.revolution-cta-box::before{
    content:'';

    position:absolute;

    width:100%;
    height:5px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

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

.revolution-badge{
    display:inline-flex;
    align-items:center;

    gap:12px;

    padding:14px 28px;

    border-radius:50px;

    background:rgba(255,0,0,0.12);

    border:1px solid rgba(255,0,0,0.25);

    color:#ff4d4d;

    font-size:14px;
    font-weight:700;

    letter-spacing:2px;

    margin-bottom:38px;

    box-shadow:
    0 0 25px rgba(255,0,0,0.15);
}

/* PULSE */

.pulse-dot{
    width:12px;
    height:12px;

    border-radius:50%;

    background:#ff0000;

    animation:pulseDot 1.5s infinite;
}

@keyframes pulseDot{

    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(2.5);
        opacity:0;
    }

}

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

.revolution-cta-box h2{
    color:#fff;

    font-size:76px;

    line-height:1.15;

    margin-bottom:30px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 30px rgba(255,140,0,0.35);
}

/* TEXT */

.revolution-cta-box p{
    color:#ddd;

    font-size:18px;

    line-height:2;

    max-width:900px;

    margin:auto auto 55px;
}

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

.revolution-buttons{
    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

    margin-bottom:70px;
}

/* BUTTON */

.revolution-btn{
    display:inline-flex;
    align-items:center;

    gap:14px;

    padding:20px 36px;

    border-radius:20px;

    text-decoration:none;

    font-size:16px;
    font-weight:600;

    transition:0.4s;
}

/* PRIMARY */

.primary-btn{
    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    box-shadow:
    0 0 35px rgba(255,140,0,0.35);
}

/* SECONDARY */

.secondary-btn{
    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.25);

    color:#fff;

    backdrop-filter:blur(12px);
}

/* THIRD */

.third-btn{
    background:
    linear-gradient(
    135deg,
    #ff5e00,
    #ff2d00
    );

    color:#fff;

    box-shadow:
    0 0 35px rgba(255,80,0,0.35);
}

/* HOVER */

.revolution-btn:hover{
    transform:translateY(-8px);

    box-shadow:
    0 0 45px rgba(255,140,0,0.7);
}

/* ========================= */
/* STATS */
/* ========================= */

.revolution-stats{
    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;
}

/* ITEM */

.stat-item{
    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:30px;

    padding:35px 20px;

    transition:0.4s;
}

/* HOVER */

.stat-item:hover{
    transform:translateY(-8px);

    border-color:#ff9800;

    box-shadow:
    0 0 35px rgba(255,140,0,0.2);
}

/* NUMBER */

.stat-item h3{
    color:#ff9800;

    font-size:42px;

    margin-bottom:14px;

    font-weight:800;

    text-shadow:
    0 0 18px rgba(255,140,0,0.5);
}

/* TEXT */

.stat-item span{
    color:#ddd;

    font-size:16px;

    font-weight:500;
}

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

@media(max-width:992px){

    .revolution-stats{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .revolution-cta-section{
        padding:90px 5%;
    }

    .revolution-cta-box{
        padding:70px 30px;
    }

    .revolution-cta-box h2{
        font-size:42px;
    }

    .revolution-cta-box p{
        font-size:16px;
    }

}

@media(max-width:500px){

    .revolution-cta-box{
        padding:60px 22px;
    }

    .revolution-cta-box h2{
        font-size:30px;
    }

    .revolution-cta-box p{
        font-size:14px;
    }

    .revolution-buttons{
        flex-direction:column;
    }

    .revolution-btn{
        width:100%;

        justify-content:center;
    }

    .stat-item h3{
        font-size:34px;
    }

}














<!-------------------------------------------complaint box------------------------------------!>

/* ========================= */
/* QUICK COMPLAINT CATEGORIES */
/* ========================= */

.complaint-categories-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1b0b00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.category-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    z-index:1;
}

.glow-left{
    width:450px;
    height:450px;

    background:rgba(255,140,0,0.16);

    top:-180px;
    left:-120px;
}

.glow-right{
    width:420px;
    height:420px;

    background:rgba(255,80,0,0.14);

    bottom:-180px;
    right:-120px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.category-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 90px;
}

/* TAG */

.category-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.category-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.category-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

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

.category-grid{
    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

    position:relative;

    z-index:5;
}

/* ========================= */
/* CARD */
/* ========================= */

.category-card{
    position:relative;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:38px;

    padding:40px 30px;

    overflow:hidden;

    backdrop-filter:blur(16px);

    transition:0.5s;

    box-shadow:
    0 0 35px rgba(255,140,0,0.08);
}

/* HOVER */

.category-card:hover{
    transform:translateY(-12px);

    border-color:#ff9800;

    box-shadow:
    0 0 50px rgba(255,140,0,0.25);
}

/* TOP BORDER */

.category-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* ========================= */
/* PULSE BORDER */
/* ========================= */

.pulse-border{
    position:absolute;

    inset:0;

    border-radius:38px;

    border:1px solid rgba(255,140,0,0.1);

    animation:borderPulse 3s infinite;
}

/* ANIMATION */

@keyframes borderPulse{

    0%{
        opacity:0.3;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0.3;
    }

}

/* ========================= */
/* ICON */
/* ========================= */

.category-icon{
    width:90px;
    height:90px;

    border-radius:28px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:36px;

    margin-bottom:30px;

    box-shadow:
    0 0 35px rgba(255,140,0,0.45);

    animation:iconPulse 3s infinite;
}

/* ICON PULSE */

@keyframes iconPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}

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

.category-card h3{
    color:#fff;

    font-size:30px;

    line-height:1.4;

    margin-bottom:18px;

    font-weight:700;
}

/* TEXT */

.category-card p{
    color:#ddd;

    font-size:15px;

    line-height:1.9;

    margin-bottom:30px;
}

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

.category-card a{
    display:inline-flex;
    align-items:center;

    gap:12px;

    padding:16px 28px;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    text-decoration:none;

    font-size:15px;
    font-weight:600;

    transition:0.4s;

    box-shadow:
    0 0 25px rgba(255,140,0,0.35);
}

/* HOVER */

.category-card a:hover{
    transform:translateY(-5px);

    gap:18px;

    box-shadow:
    0 0 40px rgba(255,140,0,0.7);
}

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

@media(max-width:768px){

    .complaint-categories-section{
        padding:90px 5%;
    }

    .category-heading h2{
        font-size:42px;
    }

    .category-heading p{
        font-size:16px;
    }

    .category-card{
        padding:35px 28px;
    }

    .category-card h3{
        font-size:24px;
    }

}

@media(max-width:500px){

    .category-heading h2{
        font-size:30px;
    }

    .category-heading p{
        font-size:14px;
    }

    .category-card{
        padding:30px 24px;
    }

    .category-card h3{
        font-size:22px;
    }

    .category-card p{
        font-size:14px;
    }

    .category-icon{
        width:75px;
        height:75px;

        font-size:30px;
    }

    .category-card a{
        width:100%;

        justify-content:center;
    }

}




/* ========================= */
/* MAIN COMPLAINT FORM */
/* ========================= */

.main-complaint-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1c0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.form-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    z-index:1;
}

.glow-left{
    width:500px;
    height:500px;

    background:rgba(255,140,0,0.18);

    top:-180px;
    left:-120px;
}

.glow-right{
    width:450px;
    height:450px;

    background:rgba(255,80,0,0.14);

    bottom:-180px;
    right:-120px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.complaint-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 90px;
}

/* TAG */

.complaint-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.complaint-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 20px rgba(255,140,0,0.35);
}

/* TEXT */

.complaint-heading p{
    color:#ccc;

    font-size:18px;

    line-height:1.9;
}

/* ========================= */
/* WRAPPER */
/* ========================= */

.complaint-form-wrapper{
    display:grid;

    grid-template-columns:0.9fr 1.1fr;

    gap:40px;

    align-items:start;

    position:relative;

    z-index:5;
}

/* ========================= */
/* LEFT INFO */
/* ========================= */

.complaint-info{
    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:40px;

    padding:45px;

    backdrop-filter:blur(18px);

    position:relative;

    overflow:hidden;

    box-shadow:
    0 0 40px rgba(255,140,0,0.1);
}

/* BORDER */

.complaint-info::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* BADGE */

.info-badge{
    display:inline-flex;
    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:40px;

    background:rgba(255,0,0,0.12);

    border:1px solid rgba(255,0,0,0.25);

    color:#ff4d4d;

    font-size:12px;
    font-weight:700;

    letter-spacing:1px;

    margin-bottom:30px;
}

/* PULSE */

.pulse-dot{
    width:10px;
    height:10px;

    border-radius:50%;

    background:#ff0000;

    animation:pulseDot 1.5s infinite;
}

@keyframes pulseDot{

    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(2.5);
        opacity:0;
    }

}

/* TITLE */

.complaint-info h3{
    color:#fff;

    font-size:42px;

    margin-bottom:22px;

    font-weight:800;
}

/* TEXT */

.complaint-info p{
    color:#ddd;

    font-size:16px;

    line-height:2;

    margin-bottom:40px;
}

/* LIST */

.info-list{
    display:flex;
    flex-direction:column;

    gap:22px;
}

/* ITEM */

.info-item{
    display:flex;
    align-items:center;

    gap:18px;

    padding:18px 22px;

    border-radius:20px;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.1);
}

/* ICON */

.info-item i{
    width:50px;
    height:50px;

    border-radius:16px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:18px;

    box-shadow:
    0 0 20px rgba(255,140,0,0.4);
}

/* TEXT */

.info-item span{
    color:#fff;

    font-size:15px;

    font-weight:500;
}

/* ========================= */
/* FORM BOX */
/* ========================= */

.complaint-form-box{
    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:40px;

    padding:45px;

    backdrop-filter:blur(18px);

    position:relative;

    overflow:hidden;

    box-shadow:
    0 0 40px rgba(255,140,0,0.1);
}

/* BORDER */

.complaint-form-box::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* ========================= */
/* ROW */
/* ========================= */

.form-row{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

    margin-bottom:25px;
}

/* ========================= */
/* INPUT GROUP */
/* ========================= */

.input-group{
    position:relative;
}

/* INPUT */

.input-group input,
.input-group select,
.input-group textarea{
    width:100%;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:20px;

    padding:20px 55px 20px 20px;

    color:#fff;

    font-size:15px;

    outline:none;

    transition:0.4s;
}

/* TEXTAREA */

.input-group textarea{
    height:170px;

    resize:none;
}

/* HOVER */

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus{
    border-color:#ff9800;

    box-shadow:
    0 0 25px rgba(255,140,0,0.2);
}

/* LABEL */

.input-group label{
    position:absolute;

    left:20px;
    top:20px;

    color:#aaa;

    font-size:14px;

    pointer-events:none;

    transition:0.4s;
}

/* ANIMATION */

.input-group input:focus ~ label,
.input-group input:valid ~ label,
.input-group textarea:focus ~ label,
.input-group textarea:valid ~ label,
.input-group select:focus ~ label,
.input-group select:valid ~ label{
    top:-12px;

    left:16px;

    background:#1c0c00;

    padding:4px 10px;

    border-radius:12px;

    color:#ff9800;

    font-size:12px;
}

/* ICON */

.input-group i{
    position:absolute;

    right:20px;
    top:22px;

    color:#ff9800;

    font-size:18px;
}

/* ========================= */
/* UPLOAD BOX */
/* ========================= */

.upload-box{
    margin-top:15px;

    margin-bottom:35px;
}

/* HIDE */

.upload-box input{
    display:none;
}

/* LABEL */

.upload-box label{
    display:flex;
    flex-direction:column;

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

    gap:12px;

    min-height:220px;

    border-radius:30px;

    border:2px dashed rgba(255,140,0,0.3);

    background:rgba(255,255,255,0.04);

    cursor:pointer;

    transition:0.5s;

    text-align:center;
}

/* HOVER */

.upload-box label:hover{
    border-color:#ff9800;

    background:rgba(255,140,0,0.06);

    box-shadow:
    0 0 35px rgba(255,140,0,0.15);
}

/* ICON */

.upload-box label i{
    font-size:55px;

    color:#ff9800;

    animation:uploadFloat 3s infinite;
}

/* FLOAT */

@keyframes uploadFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* TEXT */

.upload-box label span{
    color:#fff;

    font-size:18px;

    font-weight:600;
}

.upload-box label small{
    color:#bbb;

    font-size:13px;
}

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

.form-buttons{
    display:flex;

    gap:20px;

    flex-wrap:wrap;
}

/* BUTTON */

.form-buttons button{
    border:none;

    cursor:pointer;

    padding:18px 34px;

    border-radius:18px;


    font-size:15px;
    font-weight:600;

    display:flex;
    align-items:center;

    gap:12px;

    transition:0.4s;
}

/* SUBMIT */

.submit-btn{
    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    box-shadow:
    0 0 30px rgba(255,140,0,0.35);
}

/* DRAFT */

.draft-btn{
    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.2);

    color:#fff;
}

/* HOVER */

.form-buttons button:hover{
    transform:translateY(-6px);

    box-shadow:
    0 0 40px rgba(255,140,0,0.5);
}

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

@media(max-width:1100px){

    .complaint-form-wrapper{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .main-complaint-section{
        padding:90px 5%;
    }

    .complaint-heading h2{
        font-size:42px;
    }

    .complaint-heading p{
        font-size:16px;
    }

    .form-row{
        grid-template-columns:1fr;
    }

    .complaint-info,
    .complaint-form-box{
        padding:35px 28px;
    }

    .complaint-info h3{
        font-size:32px;
    }

}

@media(max-width:500px){

    .complaint-heading h2{
        font-size:30px;
    }

    .complaint-heading p{
        font-size:14px;
    }

    .complaint-info,
    .complaint-form-box{
        padding:30px 22px;
    }

    .complaint-info h3{
        font-size:26px;
    }

    .complaint-info p{
        font-size:14px;
    }

    .input-group input,
    .input-group select,
    .input-group textarea{
        font-size:14px;
    }

    .upload-box label{
        min-height:180px;
    }

    .upload-box label i{
        font-size:42px;
    }

    .upload-box label span{
        font-size:16px;
    }

    .form-buttons{
        flex-direction:column;
    }

    .form-buttons button{
        width:100%;

        justify-content:center;
    }

}




/* ========================= */
/* EMERGENCY SECTION */
/* ========================= */

.emergency-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1c0505,
    #2b0000
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* RED GLOW */
/* ========================= */

.emergency-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(150px);

    z-index:1;
}

.glow-left{
    width:500px;
    height:500px;

    background:rgba(255,0,0,0.15);

    top:-180px;
    left:-120px;
}

.glow-right{
    width:450px;
    height:450px;

    background:rgba(255,60,60,0.14);

    bottom:-180px;
    right:-120px;
}

/* ========================= */
/* ALERT LINES */
/* ========================= */

.alert-line{
    position:absolute;

    width:100%;
    height:2px;

    background:
    linear-gradient(
    to right,
    transparent,
    rgba(255,0,0,0.5),
    transparent
    );

    animation:alertMove 4s linear infinite;
}

/* POSITION */

.line1{
    top:20%;
}

.line2{
    bottom:18%;
}

/* ANIMATION */

@keyframes alertMove{

    0%{
        opacity:0.2;
        transform:translateX(-50px);
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0.2;
        transform:translateX(50px);
    }

}

/* ========================= */
/* HEADING */
/* ========================= */

.emergency-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto auto 90px;
}

/* BADGE */

.emergency-badge{
    display:inline-flex;
    align-items:center;

    gap:12px;

    padding:14px 26px;

    border-radius:50px;

    background:rgba(255,0,0,0.12);

    border:1px solid rgba(255,0,0,0.3);

    color:#ff4d4d;

    font-size:14px;
    font-weight:700;

    letter-spacing:2px;

    margin-bottom:35px;

    box-shadow:
    0 0 25px rgba(255,0,0,0.25);
}

/* PULSE DOT */

.pulse-dot{
    width:12px;
    height:12px;

    border-radius:50%;

    background:#ff0000;

    animation:pulseDot 1.5s infinite;
}

/* PULSE */

@keyframes pulseDot{

    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(2.5);
        opacity:0;
    }

}

/* TITLE */

.emergency-heading h2{
    color:#fff;

    font-size:72px;

    line-height:1.15;

    margin-bottom:25px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 35px rgba(255,0,0,0.35);
}

/* TEXT */

.emergency-heading p{
    color:#ddd;

    font-size:18px;

    line-height:2;
}

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

.emergency-grid{
    display:grid;

    grid-template-columns:0.9fr 1.1fr;

    gap:35px;

    position:relative;

    z-index:5;
}

/* ========================= */
/* SOS CARD */
/* ========================= */

.sos-card{
    position:relative;

    background:
    linear-gradient(
    135deg,
    rgba(255,0,0,0.12),
    rgba(255,60,60,0.08)
    );

    border:1px solid rgba(255,0,0,0.25);

    border-radius:45px;

    padding:60px 40px;

    overflow:hidden;

    backdrop-filter:blur(18px);

    display:flex;
    flex-direction:column;
    justify-content:center;

    min-height:650px;

    box-shadow:
    0 0 50px rgba(255,0,0,0.18);
}

/* TOP BORDER */

.sos-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:5px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff0000,
    #ff4d4d
    );
}

/* ICON */

.sos-icon{
    width:140px;
    height:140px;

    border-radius:40px;

    background:
    linear-gradient(
    135deg,
    #ff0000,
    #ff4d4d
    );

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

    color:#fff;

    font-size:60px;

    margin-bottom:40px;

    box-shadow:
    0 0 50px rgba(255,0,0,0.45);

    animation:sosPulse 2s infinite;
}

/* PULSE */

@keyframes sosPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}

/* TITLE */

.sos-card h3{
    color:#fff;

    font-size:52px;

    margin-bottom:25px;

    font-weight:800;
}

/* TEXT */

.sos-card p{
    color:#ddd;

    font-size:17px;

    line-height:2;

    margin-bottom:40px;
}

/* BUTTON */

.sos-btn{
    display:inline-flex;
    align-items:center;

    gap:14px;

    width:max-content;

    padding:22px 38px;

    border-radius:22px;

    background:
    linear-gradient(
    135deg,
    #ff0000,
    #ff4d4d
    );

    color:#fff;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    box-shadow:
    0 0 40px rgba(255,0,0,0.45);

    transition:0.4s;
}

/* HOVER */

.sos-btn:hover{
    transform:translateY(-8px);

    box-shadow:
    0 0 55px rgba(255,0,0,0.7);
}

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

.emergency-cards{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:28px;
}

/* ========================= */
/* SMALL CARD */
/* ========================= */

.emergency-card{
    position:relative;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,0,0,0.14);

    border-radius:35px;

    padding:35px 28px;

    overflow:hidden;

    backdrop-filter:blur(16px);

    transition:0.5s;

    box-shadow:
    0 0 35px rgba(255,0,0,0.08);
}

/* BORDER */

.emergency-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff0000,
    #ff4d4d
    );
}

/* HOVER */

.emergency-card:hover{
    transform:translateY(-12px);

    border-color:#ff4d4d;

    box-shadow:
    0 0 45px rgba(255,0,0,0.25);
}

/* ICON */

.emergency-icon{
    width:85px;
    height:85px;

    border-radius:28px;

    background:
    linear-gradient(
    135deg,
    #ff0000,
    #ff4d4d
    );

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

    color:#fff;

    font-size:34px;

    margin-bottom:28px;

    box-shadow:
    0 0 35px rgba(255,0,0,0.35);

    animation:iconPulse 3s infinite;
}

/* PULSE */

@keyframes iconPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}

/* TITLE */

.emergency-card h3{
    color:#fff;

    font-size:28px;

    line-height:1.4;

    margin-bottom:18px;

    font-weight:700;
}

/* TEXT */

.emergency-card p{
    color:#ddd;

    font-size:14px;

    line-height:1.9;

    margin-bottom:28px;
}

/* LINK */

.emergency-card a{
    display:inline-flex;
    align-items:center;

    gap:12px;

    color:#ff4d4d;

    text-decoration:none;

    font-size:15px;
    font-weight:600;

    transition:0.4s;
}

/* HOVER */

.emergency-card a:hover{
    gap:18px;

    color:#fff;
}

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

@media(max-width:1100px){

    .emergency-grid{
        grid-template-columns:1fr;
    }

    .sos-card{
        min-height:auto;
    }

}

@media(max-width:768px){

    .emergency-section{
        padding:90px 5%;
    }

    .emergency-heading h2{
        font-size:42px;
    }

    .emergency-heading p{
        font-size:16px;
    }

    .emergency-cards{
        grid-template-columns:1fr;
    }

    .sos-card{
        padding:45px 30px;
    }

    .sos-card h3{
        font-size:38px;
    }

}

@media(max-width:500px){

    .emergency-heading h2{
        font-size:30px;
    }

    .emergency-heading p{
        font-size:14px;
    }

    .sos-card{
        padding:35px 22px;
    }

    .sos-card h3{
        font-size:28px;
    }

    .sos-card p{
        font-size:14px;
    }

    .sos-icon{
        width:100px;
        height:100px;

        font-size:42px;
    }

    .sos-btn{
        width:100%;

        justify-content:center;
    }

    .emergency-card{
        padding:30px 22px;
    }

    .emergency-card h3{
        font-size:22px;
    }

}




/* ========================= */
/* TRACK STATUS SECTION */
/* ========================= */

.track-status-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1c0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.track-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(150px);

    z-index:1;
}

.glow-left{
    width:500px;
    height:500px;

    background:rgba(255,140,0,0.18);

    top:-180px;
    left:-120px;
}

.glow-right{
    width:450px;
    height:450px;

    background:rgba(255,80,0,0.14);

    bottom:-180px;
    right:-120px;
}

/* ========================= */
/* DIGITAL LINES */
/* ========================= */

.digital-line{
    position:absolute;

    width:100%;
    height:2px;

    background:
    linear-gradient(
    to right,
    transparent,
    rgba(255,140,0,0.4),
    transparent
    );

    animation:lineMove 4s linear infinite;
}

/* POSITION */

.line1{
    top:20%;
}

.line2{
    bottom:15%;
}

/* ANIMATION */

@keyframes lineMove{

    0%{
        opacity:0.2;
        transform:translateX(-60px);
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0.2;
        transform:translateX(60px);
    }

}

/* ========================= */
/* HEADING */
/* ========================= */

.track-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 90px;
}

/* TAG */

.track-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:600;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.track-heading h2{
    color:#fff;

    font-size:72px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 25px rgba(255,140,0,0.35);
}

/* TEXT */

.track-heading p{
    color:#ddd;

    font-size:18px;

    line-height:2;
}

/* ========================= */
/* WRAPPER */
/* ========================= */

.track-wrapper{
    display:grid;

    grid-template-columns:0.9fr 1.1fr;

    gap:35px;

    align-items:start;

    position:relative;

    z-index:5;
}

/* ========================= */
/* FORM BOX */
/* ========================= */

.track-form-box{
    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:40px;

    padding:45px;

    backdrop-filter:blur(18px);

    position:relative;

    overflow:hidden;

    box-shadow:
    0 0 45px rgba(255,140,0,0.1);
}

/* BORDER */

.track-form-box::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* BADGE */

.track-badge{
    display:inline-flex;
    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:40px;

    background:rgba(0,255,120,0.08);

    border:1px solid rgba(0,255,120,0.2);

    color:#7dffb0;

    font-size:12px;
    font-weight:700;

    letter-spacing:1px;

    margin-bottom:30px;
}

/* PULSE */

.pulse-dot{
    width:10px;
    height:10px;

    border-radius:50%;

    background:#00ff7b;

    animation:pulseDot 1.5s infinite;
}

/* ANIMATION */

@keyframes pulseDot{

    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(2.5);
        opacity:0;
    }

}

/* TITLE */

.track-form-box h3{
    color:#fff;

    font-size:38px;

    margin-bottom:35px;

    font-weight:800;
}

/* ========================= */
/* INPUT */
/* ========================= */

.track-input-group{
    position:relative;

    margin-bottom:28px;
}

/* INPUT */

.track-input-group input{
    width:100%;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:22px;

    padding:22px 55px 22px 22px;

    color:#fff;

    font-size:15px;

    outline:none;

    transition:0.4s;
}

/* FOCUS */

.track-input-group input:focus{
    border-color:#ff9800;

    box-shadow:
    0 0 30px rgba(255,140,0,0.2);
}

/* LABEL */

.track-input-group label{
    position:absolute;

    left:22px;
    top:22px;

    color:#aaa;

    font-size:14px;

    pointer-events:none;

    transition:0.4s;
}

/* ANIMATION */

.track-input-group input:focus ~ label,
.track-input-group input:valid ~ label{
    top:-12px;

    left:18px;

    background:#1c0c00;

    padding:4px 10px;

    border-radius:12px;

    color:#ff9800;

    font-size:12px;
}

/* ICON */

.track-input-group i{
    position:absolute;

    right:20px;
    top:24px;

    color:#ff9800;

    font-size:18px;
}

/* BUTTON */

.track-form-box button{
    width:100%;

    border:none;

    cursor:pointer;

    padding:20px;

    border-radius:22px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    font-size:16px;
    font-weight:700;

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

    gap:14px;

    transition:0.4s;

    box-shadow:
    0 0 35px rgba(255,140,0,0.35);
}

/* HOVER */

.track-form-box button:hover{
    transform:translateY(-6px);

    box-shadow:
    0 0 45px rgba(255,140,0,0.6);
}

/* SECURITY */

.track-security{
    margin-top:28px;

    display:flex;
    align-items:center;

    gap:14px;

    color:#7dffb0;

    font-size:14px;
    font-weight:600;
}

/* ICON */

.track-security i{
    font-size:18px;
}

/* ========================= */
/* DASHBOARD */
/* ========================= */

.status-dashboard{
    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:40px;

    padding:45px;

    backdrop-filter:blur(18px);

    position:relative;

    overflow:hidden;

    box-shadow:
    0 0 45px rgba(255,140,0,0.1);
}

/* BORDER */

.status-dashboard::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* TOP */

.dashboard-top{
    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:45px;
}

/* TITLE */

.dashboard-top h3{
    color:#fff;

    font-size:34px;

    font-weight:800;
}

/* VERIFIED */

.verification-status{
    display:flex;
    align-items:center;

    gap:10px;

    padding:12px 20px;

    border-radius:40px;

    background:rgba(0,255,120,0.08);

    border:1px solid rgba(0,255,120,0.2);

    color:#7dffb0;

    font-size:13px;
    font-weight:700;
}

/* DOT */

.verify-dot{
    width:10px;
    height:10px;

    border-radius:50%;

    background:#00ff7b;

    box-shadow:
    0 0 18px rgba(0,255,120,0.8);

    animation:verifyPulse 1.5s infinite;
}

/* ANIMATION */

@keyframes verifyPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.3);
    }

    100%{
        transform:scale(1);
    }

}

/* ========================= */
/* TRACKER */
/* ========================= */

.progress-tracker{
    position:relative;

    display:flex;

    justify-content:space-between;

    gap:20px;

    margin-bottom:50px;
}

/* LINE */

.tracker-line{
    position:absolute;

    top:32px;
    left:0;

    width:100%;
    height:4px;

    background:rgba(255,255,255,0.08);

    border-radius:20px;
}

/* STEP */

.tracker-step{
    position:relative;

    z-index:5;

    text-align:center;

    width:100%;
}

/* ACTIVE LINE */

.active-step::after{
    content:'';

    position:absolute;

    top:30px;
    left:50%;

    width:100%;
    height:4px;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );

    z-index:-1;
}

/* CIRCLE */

.tracker-circle{
    width:65px;
    height:65px;

    border-radius:50%;

    background:rgba(255,255,255,0.06);

    border:2px solid rgba(255,140,0,0.15);

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

    margin:auto auto 18px;

    color:#aaa;

    font-size:24px;

    transition:0.4s;
}

/* ACTIVE */

.active-step .tracker-circle{
    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    border-color:#ff9800;

    color:#fff;

    box-shadow:
    0 0 30px rgba(255,140,0,0.5);

    animation:circlePulse 2s infinite;
}

/* PULSE */

@keyframes circlePulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}

/* TITLE */

.tracker-step h4{
    color:#fff;

    font-size:18px;

    margin-bottom:10px;

    font-weight:700;
}

/* TEXT */

.tracker-step p{
    color:#bbb;

    font-size:13px;

    line-height:1.7;
}

/* ========================= */
/* STATUS CARDS */
/* ========================= */

.status-cards{
    display:grid;

    grid-template-columns:1fr;

    gap:20px;
}

/* CARD */

.status-card{
    display:flex;

    align-items:center;

    gap:18px;

    padding:22px;

    border-radius:24px;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.1);

    transition:0.4s;
}

/* HOVER */

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

    border-color:#ff9800;

    box-shadow:
    0 0 25px rgba(255,140,0,0.15);
}

/* ICON */

.status-icon{
    width:60px;
    height:60px;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:22px;

    box-shadow:
    0 0 25px rgba(255,140,0,0.4);
}

/* CONTENT */

.status-content h4{
    color:#fff;

    font-size:18px;

    margin-bottom:8px;
}

.status-content span{
    color:#ffb347;

    font-size:14px;
}

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

@media(max-width:1100px){

    .track-wrapper{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .track-status-section{
        padding:90px 5%;
    }

    .track-heading h2{
        font-size:42px;
    }

    .track-heading p{
        font-size:16px;
    }

    .track-form-box,
    .status-dashboard{
        padding:35px 28px;
    }

    .progress-tracker{
        flex-direction:column;

        gap:35px;
    }

    .tracker-line{
        display:none;
    }

    .active-step::after{
        display:none;
    }

}

@media(max-width:500px){

    .track-heading h2{
        font-size:30px;
    }

    .track-heading p{
        font-size:14px;
    }

    .track-form-box,
    .status-dashboard{
        padding:30px 22px;
    }

    .track-form-box h3,
    .dashboard-top h3{
        font-size:24px;
    }

    .dashboard-top{
        flex-direction:column;

        align-items:flex-start;
    }

}





/* ========================= */
/* FAQ SECTION */
/* ========================= */

.faq-help-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1c0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.faq-glow,
.cta-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(150px);

    z-index:1;
}

.glow-left{
    width:500px;
    height:500px;

    background:rgba(255,140,0,0.18);

    top:-180px;
    left:-120px;
}

.glow-right{
    width:450px;
    height:450px;

    background:rgba(255,80,0,0.14);

    bottom:-180px;
    right:-120px;
}

/* ========================= */
/* HEADING */
/* ========================= */

.faq-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:900px;

    margin:auto auto 80px;
}

/* TAG */

.faq-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:700;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.faq-heading h2{
    color:#fff;

    font-size:70px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 25px rgba(255,140,0,0.35);
}

/* TEXT */

.faq-heading p{
    color:#ddd;

    font-size:18px;

    line-height:2;
}

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

.faq-container{
    position:relative;

    z-index:5;

    max-width:1100px;

    margin:auto;

    display:flex;
    flex-direction:column;

    gap:25px;
}

/* ITEM */

.faq-item{
    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:30px;

    overflow:hidden;

    backdrop-filter:blur(16px);

    transition:0.5s;

    box-shadow:
    0 0 35px rgba(255,140,0,0.08);
}

/* ACTIVE */

.faq-item.active-faq{
    border-color:#ff9800;

    box-shadow:
    0 0 45px rgba(255,140,0,0.2);
}

/* QUESTION */

.faq-question{
    width:100%;

    border:none;

    background:none;

    padding:30px 35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    color:#fff;

    font-size:22px;
    font-weight:700;

    text-align:left;
}

/* ICON */

.faq-question i{
    color:#ff9800;

    font-size:22px;

    transition:0.4s;
}

/* ROTATE */

.active-faq .faq-question i{
    transform:rotate(45deg);
}

/* ANSWER */

.faq-answer{
    max-height:0;

    overflow:hidden;

    transition:0.5s ease;
}

/* ACTIVE */

.active-faq .faq-answer{
    max-height:250px;
}

/* TEXT */

.faq-answer p{
    color:#ddd;

    font-size:16px;

    line-height:2;

    padding:0 35px 35px;
}

/* ========================= */
/* FINAL CTA */
/* ========================= */

.citizen-cta-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #1a0800,
    #2f1300,
    #120700
    );

    position:relative;

    overflow:hidden;
}

/* CTA BOX */

.citizen-cta-box{
    position:relative;

    z-index:5;

    max-width:1200px;

    margin:auto;

    text-align:center;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:45px;

    padding:90px 60px;

    overflow:hidden;

    backdrop-filter:blur(18px);

    box-shadow:
    0 0 50px rgba(255,140,0,0.12);
}

/* BORDER */

.citizen-cta-box::before{
    content:'';

    position:absolute;

    width:100%;
    height:5px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* BADGE */

.cta-badge{
    display:inline-flex;
    align-items:center;

    gap:12px;

    padding:14px 26px;

    border-radius:50px;

    background:rgba(255,0,0,0.12);

    border:1px solid rgba(255,0,0,0.25);

    color:#ff4d4d;

    font-size:14px;
    font-weight:700;

    letter-spacing:2px;

    margin-bottom:35px;
}

/* PULSE */

.pulse-dot{
    width:12px;
    height:12px;

    border-radius:50%;

    background:#ff0000;

    animation:pulseDot 1.5s infinite;
}

/* ANIMATION */

@keyframes pulseDot{

    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(2.5);
        opacity:0;
    }

}

/* TITLE */

.citizen-cta-box h2{
    color:#fff;

    font-size:72px;

    line-height:1.15;

    margin-bottom:28px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 30px rgba(255,140,0,0.35);
}

/* TEXT */

.citizen-cta-box p{
    color:#ddd;

    font-size:18px;

    line-height:2;

    max-width:850px;

    margin:auto auto 55px;
}

/* BUTTONS */

.cta-buttons{
    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;
}

/* BUTTON */

.cta-btn{
    display:inline-flex;
    align-items:center;

    gap:14px;

    padding:20px 36px;

    border-radius:22px;

    text-decoration:none;

    font-size:16px;
    font-weight:700;

    transition:0.4s;
}

/* PRIMARY */

.primary-btn{
    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    box-shadow:
    0 0 35px rgba(255,140,0,0.35);
}

/* SECONDARY */

.secondary-btn{
    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.2);

    color:#fff;
}

/* THIRD */

.third-btn{
    background:
    linear-gradient(
    135deg,
    #ff5e00,
    #ff2d00
    );

    color:#fff;

    box-shadow:
    0 0 35px rgba(255,80,0,0.35);
}

/* HOVER */

.cta-btn:hover{
    transform:translateY(-8px);

    box-shadow:
    0 0 45px rgba(255,140,0,0.6);
}

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

@media(max-width:768px){

    .faq-help-section,
    .citizen-cta-section{
        padding:90px 5%;
    }

    .faq-heading h2,
    .citizen-cta-box h2{
        font-size:42px;
    }

    .faq-heading p,
    .citizen-cta-box p{
        font-size:16px;
    }

    .faq-question{
        font-size:18px;

        padding:25px;
    }

    .faq-answer p{
        padding:0 25px 25px;
    }

    .citizen-cta-box{
        padding:70px 30px;
    }

}

@media(max-width:500px){

    .faq-heading h2,
    .citizen-cta-box h2{
        font-size:30px;
    }

    .faq-heading p,
    .citizen-cta-box p{
        font-size:14px;
    }

    .faq-question{
        font-size:16px;

        padding:22px;
    }

    .faq-answer p{
        font-size:14px;

        padding:0 22px 22px;
    }

    .citizen-cta-box{
        padding:60px 22px;
    }

    .cta-buttons{
        flex-direction:column;
    }

    .cta-btn{
        width:100%;

        justify-content:center;
    }

}







<!---------------------------------------------join us css page-------------------------------------------!>

/* ========================= */
/* WHY JOIN US SECTION */
/* ========================= */

.why-join-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1c0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.join-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(150px);

    z-index:1;
}

.glow-left{
    width:500px;
    height:500px;

    background:rgba(255,140,0,0.18);

    top:-180px;
    left:-120px;
}

.glow-right{
    width:450px;
    height:450px;

    background:rgba(255,80,0,0.14);

    bottom:-180px;
    right:-120px;
}

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

.digital-grid{
    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(255,140,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,140,0,0.04) 1px, transparent 1px);

    background-size:60px 60px;

    z-index:1;
}

/* ========================= */
/* HEADING */
/* ========================= */

.join-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 90px;
}

/* TAG */

.join-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:700;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.join-heading h2{
    color:#fff;

    font-size:72px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 30px rgba(255,140,0,0.35);
}

/* TEXT */

.join-heading p{
    color:#ddd;

    font-size:18px;

    line-height:2;
}

/* ========================= */
/* WRAPPER */
/* ========================= */

.join-wrapper{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

    position:relative;

    z-index:5;
}

/* ========================= */
/* LEFT */
/* ========================= */

.join-left{
    display:flex;
    flex-direction:column;

    gap:25px;
}

/* CARD */

.join-card{
    display:flex;

    align-items:flex-start;

    gap:22px;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:35px;

    padding:30px;

    backdrop-filter:blur(16px);

    position:relative;

    overflow:hidden;

    transition:0.5s;

    box-shadow:
    0 0 35px rgba(255,140,0,0.08);
}

/* NEON BORDER */

.join-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* HOVER */

.join-card:hover{
    transform:translateY(-10px);

    border-color:#ff9800;

    box-shadow:
    0 0 45px rgba(255,140,0,0.25);
}

/* ICON */

.join-icon{
    width:85px;
    height:85px;

    min-width:85px;

    border-radius:28px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:34px;

    box-shadow:
    0 0 35px rgba(255,140,0,0.45);

    animation:iconPulse 3s infinite;
}

/* ICON ANIMATION */

@keyframes iconPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}

/* CONTENT */

.join-content h3{
    color:#fff;

    font-size:30px;

    margin-bottom:14px;

    font-weight:700;
}

/* TEXT */

.join-content p{
    color:#ddd;

    font-size:15px;

    line-height:1.9;
}

/* ========================= */
/* COUNTERS */
/* ========================= */

.join-counters{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-top:15px;
}

/* BOX */

.counter-box{
    text-align:center;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:28px;

    padding:28px 20px;

    backdrop-filter:blur(14px);

    transition:0.4s;
}

/* HOVER */

.counter-box:hover{
    transform:translateY(-8px);

    border-color:#ff9800;

    box-shadow:
    0 0 35px rgba(255,140,0,0.2);
}

/* NUMBER */

.counter-box h4{
    color:#ff9800;

    font-size:40px;

    margin-bottom:12px;

    font-weight:800;

    text-shadow:
    0 0 18px rgba(255,140,0,0.45);
}

/* TEXT */

.counter-box span{
    color:#ddd;

    font-size:14px;

    line-height:1.6;
}

/* ========================= */
/* RIGHT */
/* ========================= */

.join-right{
    position:relative;
}

/* MAP BOX */

.india-map-container{
    position:relative;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:40px;

    padding:40px;

    backdrop-filter:blur(18px);

    overflow:hidden;

    box-shadow:
    0 0 45px rgba(255,140,0,0.1);
}

/* BORDER */

.india-map-container::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* IMAGE */

.india-map-container img{
    width:100%;

    filter:
    drop-shadow(0 0 35px rgba(255,140,0,0.35));
}

/* ========================= */
/* MAP POINTS */
/* ========================= */

.map-point{
    position:absolute;

    width:18px;
    height:18px;

    border-radius:50%;

    background:#ff9800;

    box-shadow:
    0 0 25px rgba(255,140,0,0.8);
}

/* PULSE */

.map-point span{
    position:absolute;

    inset:0;

    border-radius:50%;

    background:rgba(255,140,0,0.5);

    animation:mapPulse 2s infinite;
}

/* POINTS */

.point1{
    top:28%;
    left:46%;
}

.point2{
    top:40%;
    left:38%;
}

.point3{
    top:58%;
    left:50%;
}

.point4{
    top:36%;
    left:62%;
}

/* PULSE */

@keyframes mapPulse{

    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(3.5);
        opacity:0;
    }

}

/* ========================= */
/* MAP LINES */
/* ========================= */

.map-line{
    position:absolute;

    height:3px;

    background:
    linear-gradient(
    to right,
    #ff9800,
    transparent
    );

    box-shadow:
    0 0 15px rgba(255,140,0,0.6);

    animation:lineGlow 3s infinite linear;
}

/* LINES */

.line1{
    width:180px;

    top:34%;
    left:38%;

    transform:rotate(18deg);
}

.line2{
    width:140px;

    top:50%;
    left:34%;

    transform:rotate(-15deg);
}

.line3{
    width:200px;

    top:60%;
    left:44%;

    transform:rotate(12deg);
}

/* ANIMATION */

@keyframes lineGlow{

    0%{
        opacity:0.3;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0.3;
    }

}

/* ========================= */
/* FLOAT CARD */
/* ========================= */

.floating-info{
    position:absolute;

    bottom:25px;
    right:25px;

    background:
    linear-gradient(
    135deg,
    rgba(255,152,0,0.18),
    rgba(255,94,0,0.12)
    );

    border:1px solid rgba(255,140,0,0.25);

    border-radius:28px;

    padding:24px 28px;

    backdrop-filter:blur(16px);

    box-shadow:
    0 0 35px rgba(255,140,0,0.2);

    animation:floatCard 4s ease-in-out infinite;
}

/* TITLE */

.floating-info h3{
    color:#fff;

    font-size:28px;

    margin-bottom:10px;

    font-weight:700;
}

/* TEXT */

.floating-info p{
    color:#ffb347;

    font-size:14px;

    font-weight:600;
}

/* FLOAT */

@keyframes floatCard{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

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

@media(max-width:1100px){

    .join-wrapper{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .why-join-section{
        padding:90px 5%;
    }

    .join-heading h2{
        font-size:42px;
    }

    .join-heading p{
        font-size:16px;
    }

    .join-counters{
        grid-template-columns:1fr;
    }

    .join-content h3{
        font-size:24px;
    }

}

@media(max-width:500px){

    .join-heading h2{
        font-size:30px;
    }

    .join-heading p{
        font-size:14px;
    }

    .join-card{
        flex-direction:column;
    }

    .join-content h3{
        font-size:22px;
    }

    .join-content p{
        font-size:14px;
    }

    .floating-info{
        position:relative;

        right:auto;
        bottom:auto;

        margin-top:20px;
    }

}




/* ========================= */
/* MEMBERSHIP SECTION */
/* ========================= */

.membership-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1c0c00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.membership-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(150px);

    z-index:1;
}

.glow-left{
    width:500px;
    height:500px;

    background:rgba(255,140,0,0.18);

    top:-180px;
    left:-120px;
}

.glow-right{
    width:450px;
    height:450px;

    background:rgba(255,80,0,0.14);

    bottom:-180px;
    right:-120px;
}

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

.membership-grid-bg{
    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(255,140,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,140,0,0.04) 1px, transparent 1px);

    background-size:60px 60px;

    z-index:1;
}

/* ========================= */
/* HEADING */
/* ========================= */

.membership-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 90px;
}

/* TAG */

.membership-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:700;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.membership-heading h2{
    color:#fff;

    font-size:72px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 30px rgba(255,140,0,0.35);
}

/* TEXT */

.membership-heading p{
    color:#ddd;

    font-size:18px;

    line-height:2;
}

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

.membership-grid{
    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

    position:relative;

    z-index:5;
}

/* ========================= */
/* CARD */
/* ========================= */

.membership-card{
    position:relative;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:40px;

    padding:40px 32px;

    overflow:hidden;

    backdrop-filter:blur(16px);

    transition:0.5s;

    box-shadow:
    0 0 35px rgba(255,140,0,0.08);

    animation:floatCard 5s ease-in-out infinite;
}

/* FLOAT */

@keyframes floatCard{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* HOVER */

.membership-card:hover{
    transform:translateY(-15px) scale(1.02);

    border-color:#ff9800;

    box-shadow:
    0 0 50px rgba(255,140,0,0.25);
}

/* TOP BORDER */

.membership-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* GLOW */

.card-glow{
    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

    background:
    radial-gradient(
    rgba(255,140,0,0.18),
    transparent
    );

    top:-60px;
    right:-60px;

    z-index:1;
}

/* ========================= */
/* ICON */
/* ========================= */

.membership-icon{
    width:95px;
    height:95px;

    border-radius:30px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:38px;

    margin-bottom:32px;

    position:relative;

    z-index:5;

    box-shadow:
    0 0 35px rgba(255,140,0,0.45);

    animation:iconPulse 3s infinite;
}

/* ICON PULSE */

@keyframes iconPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}

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

.membership-card h3{
    color:#fff;

    font-size:32px;

    line-height:1.4;

    margin-bottom:18px;

    font-weight:700;

    position:relative;

    z-index:5;
}

/* TEXT */

.membership-card p{
    color:#ddd;

    font-size:15px;

    line-height:1.9;

    margin-bottom:28px;

    position:relative;

    z-index:5;
}

/* ========================= */
/* BENEFITS */
/* ========================= */

.membership-card ul{
    list-style:none;

    display:flex;
    flex-direction:column;

    gap:14px;

    margin-bottom:35px;

    position:relative;

    z-index:5;
}

/* ITEM */

.membership-card ul li{
    color:#ffcc70;

    font-size:14px;

    display:flex;
    align-items:center;

    gap:12px;
}

/* DOT */

.membership-card ul li::before{
    content:'';

    width:10px;
    height:10px;

    border-radius:50%;

    background:#ff9800;

    box-shadow:
    0 0 15px rgba(255,140,0,0.7);
}

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

.membership-card a{
    display:inline-flex;
    align-items:center;

    gap:12px;

    padding:18px 30px;

    border-radius:20px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    text-decoration:none;

    font-size:15px;
    font-weight:700;

    position:relative;

    z-index:5;

    transition:0.4s;

    box-shadow:
    0 0 30px rgba(255,140,0,0.35);
}

/* HOVER */

.membership-card a:hover{
    transform:translateY(-6px);

    gap:18px;

    box-shadow:
    0 0 45px rgba(255,140,0,0.65);
}

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

@media(max-width:768px){

    .membership-section{
        padding:90px 5%;
    }

    .membership-heading h2{
        font-size:42px;
    }

    .membership-heading p{
        font-size:16px;
    }

    .membership-card{
        padding:35px 28px;
    }

    .membership-card h3{
        font-size:26px;
    }

}

@media(max-width:500px){

    .membership-heading h2{
        font-size:30px;
    }

    .membership-heading p{
        font-size:14px;
    }

    .membership-card{
        padding:30px 24px;
    }

    .membership-card h3{
        font-size:22px;
    }

    .membership-card p{
        font-size:14px;
    }

    .membership-icon{
        width:80px;
        height:80px;

        font-size:32px;
    }

    .membership-card a{
        width:100%;

        justify-content:center;
    }

}




/* ========================= */
/* MAIN JOIN FORM */
/* ========================= */

.main-join-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1b0b00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.join-form-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(150px);

    z-index:1;
}

.glow-left{
    width:500px;
    height:500px;

    background:rgba(255,140,0,0.18);

    top:-180px;
    left:-120px;
}

.glow-right{
    width:450px;
    height:450px;

    background:rgba(255,80,0,0.14);

    bottom:-180px;
    right:-120px;
}

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

.join-grid-bg{
    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(255,140,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,140,0,0.04) 1px, transparent 1px);

    background-size:60px 60px;

    z-index:1;
}

/* ========================= */
/* HEADING */
/* ========================= */

.join-form-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 90px;
}

/* TAG */

.join-form-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:700;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.join-form-heading h2{
    color:#fff;

    font-size:72px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 30px rgba(255,140,0,0.35);
}

/* TEXT */

.join-form-heading p{
    color:#ddd;

    font-size:18px;

    line-height:2;
}

/* ========================= */
/* WRAPPER */
/* ========================= */

.join-form-wrapper{
    display:grid;

    grid-template-columns:0.9fr 1.1fr;

    gap:40px;

    align-items:start;

    position:relative;

    z-index:5;
}

/* ========================= */
/* LEFT INFO */
/* ========================= */

.join-info-box{
    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:40px;

    padding:45px;

    backdrop-filter:blur(18px);

    position:relative;

    overflow:hidden;

    box-shadow:
    0 0 45px rgba(255,140,0,0.1);
}

/* TOP BORDER */

.join-info-box::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* BADGE */

.join-live-badge{
    display:inline-flex;
    align-items:center;

    gap:12px;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(0,255,120,0.08);

    border:1px solid rgba(0,255,120,0.2);

    color:#7dffb0;

    font-size:12px;
    font-weight:700;

    letter-spacing:1px;

    margin-bottom:30px;
}

/* LIVE DOT */

.live-dot{
    width:10px;
    height:10px;

    border-radius:50%;

    background:#00ff7b;

    animation:livePulse 1.5s infinite;
}

/* ANIMATION */

@keyframes livePulse{

    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(2.5);
        opacity:0;
    }

}

/* TITLE */

.join-info-box h3{
    color:#fff;

    font-size:42px;

    margin-bottom:22px;

    font-weight:800;
}

/* TEXT */

.join-info-box p{
    color:#ddd;

    font-size:16px;

    line-height:2;

    margin-bottom:35px;
}

/* FEATURES */

.join-features{
    display:flex;
    flex-direction:column;

    gap:20px;

    margin-bottom:40px;
}

/* ITEM */

.join-feature-item{
    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 22px;

    border-radius:22px;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.1);

    transition:0.4s;
}

/* HOVER */

.join-feature-item:hover{
    transform:translateX(8px);

    border-color:#ff9800;

    box-shadow:
    0 0 30px rgba(255,140,0,0.15);
}

/* ICON */

.join-feature-item i{
    width:52px;
    height:52px;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:20px;

    box-shadow:
    0 0 25px rgba(255,140,0,0.45);
}

/* TEXT */

.join-feature-item span{
    color:#fff;

    font-size:15px;

    font-weight:500;
}

/* ========================= */
/* VERIFY BOX */
/* ========================= */

.verification-box{
    display:flex;

    align-items:center;

    gap:18px;

    padding:24px;

    border-radius:28px;

    background:
    linear-gradient(
    135deg,
    rgba(0,255,120,0.08),
    rgba(255,255,255,0.03)
    );

    border:1px solid rgba(0,255,120,0.18);
}

/* ICON */

.verify-icon{
    width:70px;
    height:70px;

    border-radius:22px;

    background:
    linear-gradient(
    135deg,
    #00c853,
    #00ff7b
    );

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

    color:#fff;

    font-size:30px;

    box-shadow:
    0 0 30px rgba(0,255,120,0.35);
}

/* CONTENT */

.verify-content h4{
    color:#fff;

    font-size:22px;

    margin-bottom:8px;
}

.verify-content p{
    color:#ddd;

    font-size:14px;

    margin:0;
}

/* ========================= */
/* FORM BOX */
/* ========================= */

.join-form-box{
    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:40px;

    padding:45px;

    backdrop-filter:blur(18px);

    position:relative;

    overflow:hidden;

    box-shadow:
    0 0 45px rgba(255,140,0,0.1);
}

/* BORDER */

.join-form-box::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* ROW */

.join-form-row{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

    margin-bottom:25px;
}

/* ========================= */
/* INPUT */
/* ========================= */

.join-input-group{
    position:relative;
}

/* INPUTS */

.join-input-group input,
.join-input-group select{
    width:100%;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:22px;

    padding:20px 55px 20px 20px;

    color:#fff;

    font-size:15px;

    outline:none;

    transition:0.4s;
}

/* FOCUS */

.join-input-group input:focus,
.join-input-group select:focus{
    border-color:#ff9800;

    box-shadow:
    0 0 30px rgba(255,140,0,0.2);
}

/* LABEL */

.join-input-group label{
    position:absolute;

    left:20px;
    top:20px;

    color:#aaa;

    font-size:14px;

    pointer-events:none;

    transition:0.4s;
}

/* LABEL ACTIVE */

.join-input-group input:focus ~ label,
.join-input-group input:valid ~ label,
.join-input-group select:focus ~ label,
.join-input-group select:valid ~ label{
    top:-12px;

    left:16px;

    background:#1b0b00;

    padding:4px 10px;

    border-radius:12px;

    color:#ff9800;

    font-size:12px;
}

/* ICON */

.join-input-group i{
    position:absolute;

    right:20px;
    top:22px;

    color:#ff9800;

    font-size:18px;
}

/* ========================= */
/* UPLOAD */
/* ========================= */

.join-upload-box{
    margin-top:10px;

    margin-bottom:35px;
}

/* HIDE */

.join-upload-box input{
    display:none;
}

/* LABEL */

.join-upload-box label{
    display:flex;
    flex-direction:column;

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

    gap:12px;

    min-height:220px;

    border-radius:30px;

    border:2px dashed rgba(255,140,0,0.3);

    background:rgba(255,255,255,0.04);

    cursor:pointer;

    transition:0.5s;

    text-align:center;
}

/* HOVER */

.join-upload-box label:hover{
    border-color:#ff9800;

    background:rgba(255,140,0,0.06);

    box-shadow:
    0 0 35px rgba(255,140,0,0.18);
}

/* ICON */

.join-upload-box label i{
    font-size:55px;

    color:#ff9800;

    animation:uploadFloat 3s infinite;
}

/* FLOAT */

@keyframes uploadFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* TEXT */

.join-upload-box label span{
    color:#fff;

    font-size:18px;

    font-weight:600;
}

.join-upload-box label small{
    color:#bbb;

    font-size:13px;
}

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

.join-form-buttons{
    display:flex;

    gap:20px;

    flex-wrap:wrap;
}

/* BUTTON */

.join-form-buttons button{
    border:none;

    cursor:pointer;

    padding:18px 34px;

    border-radius:20px;

    font-size:15px;
    font-weight:700;

    display:flex;
    align-items:center;

    gap:12px;

    transition:0.4s;
}

/* JOIN */

.join-now-btn{
    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    box-shadow:
    0 0 35px rgba(255,140,0,0.35);
}

/* SAVE */

.save-btn{
    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.2);

    color:#fff;
}

/* HOVER */

.join-form-buttons button:hover{
    transform:translateY(-6px);

    box-shadow:
    0 0 45px rgba(255,140,0,0.5);
}

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

@media(max-width:1100px){

    .join-form-wrapper{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .main-join-section{
        padding:90px 5%;
    }

    .join-form-heading h2{
        font-size:42px;
    }

    .join-form-heading p{
        font-size:16px;
    }

    .join-form-row{
        grid-template-columns:1fr;
    }

    .join-info-box,
    .join-form-box{
        padding:35px 28px;
    }

    .join-info-box h3{
        font-size:32px;
    }

}

@media(max-width:500px){

    .join-form-heading h2{
        font-size:30px;
    }

    .join-form-heading p{
        font-size:14px;
    }

    .join-info-box,
    .join-form-box{
        padding:30px 22px;
    }

    .join-info-box h3{
        font-size:26px;
    }

    .join-info-box p{
        font-size:14px;
    }

    .join-input-group input,
    .join-input-group select{
        font-size:14px;
    }

    .join-upload-box label{
        min-height:180px;
    }

    .join-upload-box label i{
        font-size:42px;
    }

    .join-upload-box label span{
        font-size:16px;
    }

    .join-form-buttons{
        flex-direction:column;
    }

    .join-form-buttons button{
        width:100%;

        justify-content:center;
    }

}








<!-------------------------------------------contact us page css-----------------------------------------!>

/* ========================= */
/* QUICK CONTACT SECTION */
/* ========================= */

.quick-contact-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1b0b00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.contact-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(150px);

    z-index:1;
}

.glow-left{
    width:500px;
    height:500px;

    background:rgba(255,140,0,0.18);

    top:-180px;
    left:-120px;
}

.glow-right{
    width:450px;
    height:450px;

    background:rgba(255,80,0,0.14);

    bottom:-180px;
    right:-120px;
}

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

.contact-grid-bg{
    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(255,140,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,140,0,0.04) 1px, transparent 1px);

    background-size:60px 60px;

    z-index:1;
}

/* ========================= */
/* HEADING */
/* ========================= */

.contact-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 90px;
}

/* TAG */

.contact-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:700;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.contact-heading h2{
    color:#fff;

    font-size:72px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 30px rgba(255,140,0,0.35);
}

/* TEXT */

.contact-heading p{
    color:#ddd;

    font-size:18px;

    line-height:2;
}

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

.contact-cards-grid{
    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

    position:relative;

    z-index:5;
}

/* ========================= */
/* CARD */
/* ========================= */

.contact-card{
    position:relative;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:40px;

    padding:40px 32px;

    overflow:hidden;

    backdrop-filter:blur(16px);

    transition:0.5s;

    box-shadow:
    0 0 35px rgba(255,140,0,0.08);

    animation:floatCard 5s ease-in-out infinite;
}

/* FLOAT */

@keyframes floatCard{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* HOVER */

.contact-card:hover{
    transform:translateY(-15px) scale(1.02);

    border-color:#ff9800;

    box-shadow:
    0 0 50px rgba(255,140,0,0.25);
}

/* TOP BORDER */

.contact-card::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* ========================= */
/* PULSE BORDER */
/* ========================= */

.pulse-border{
    position:absolute;

    inset:0;

    border-radius:40px;

    border:1px solid rgba(255,140,0,0.1);

    animation:borderPulse 3s infinite;
}

/* ANIMATION */

@keyframes borderPulse{

    0%{
        opacity:0.3;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0.3;
    }

}

/* ========================= */
/* ICON */
/* ========================= */

.contact-icon{
    width:95px;
    height:95px;

    border-radius:30px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:38px;

    margin-bottom:32px;

    position:relative;

    z-index:5;

    box-shadow:
    0 0 35px rgba(255,140,0,0.45);

    animation:iconPulse 3s infinite;
}

/* ICON PULSE */

@keyframes iconPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }

}

/* EMERGENCY */

.emergency-icon{
    background:
    linear-gradient(
    135deg,
    #ff0000,
    #ff4d4d
    );

    box-shadow:
    0 0 35px rgba(255,0,0,0.45);
}

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

.contact-card h3{
    color:#fff;

    font-size:32px;

    line-height:1.4;

    margin-bottom:18px;

    font-weight:700;

    position:relative;

    z-index:5;
}

/* TEXT */

.contact-card p{
    color:#ddd;

    font-size:15px;

    line-height:1.9;

    margin-bottom:35px;

    position:relative;

    z-index:5;
}

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

.contact-card a{
    display:inline-flex;
    align-items:center;

    gap:12px;

    padding:18px 30px;

    border-radius:20px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    text-decoration:none;

    font-size:15px;
    font-weight:700;

    position:relative;

    z-index:5;

    transition:0.4s;

    box-shadow:
    0 0 30px rgba(255,140,0,0.35);
}

/* EMERGENCY BUTTON */

.emergency-btn{
    background:
    linear-gradient(
    135deg,
    #ff0000,
    #ff4d4d
    ) !important;

    box-shadow:
    0 0 30px rgba(255,0,0,0.35) !important;
}

/* HOVER */

.contact-card a:hover{
    transform:translateY(-6px);

    gap:18px;

    box-shadow:
    0 0 45px rgba(255,140,0,0.65);
}

/* ========================= */
/* EMERGENCY CARD */
/* ========================= */

.emergency-card-contact{
    border-color:rgba(255,0,0,0.18);
}

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

@media(max-width:768px){

    .quick-contact-section{
        padding:90px 5%;
    }

    .contact-heading h2{
        font-size:42px;
    }

    .contact-heading p{
        font-size:16px;
    }

    .contact-card{
        padding:35px 28px;
    }

    .contact-card h3{
        font-size:26px;
    }

}

@media(max-width:500px){

    .contact-heading h2{
        font-size:30px;
    }

    .contact-heading p{
        font-size:14px;
    }

    .contact-card{
        padding:30px 24px;
    }

    .contact-card h3{
        font-size:22px;
    }

    .contact-card p{
        font-size:14px;
    }

    .contact-icon{
        width:80px;
        height:80px;

        font-size:32px;
    }

    .contact-card a{
        width:100%;

        justify-content:center;
    }

}




/* ========================= */
/* MAIN CONTACT SECTION */
/* ========================= */

.main-contact-section{
    width:100%;

    padding:120px 7%;

    background:
    linear-gradient(
    135deg,
    #120700,
    #1b0b00,
    #2f1300
    );

    position:relative;

    overflow:hidden;
}

/* ========================= */
/* GLOW */
/* ========================= */

.contact-form-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(150px);

    z-index:1;
}

.glow-left{
    width:500px;
    height:500px;

    background:rgba(255,140,0,0.18);

    top:-180px;
    left:-120px;
}

.glow-right{
    width:450px;
    height:450px;

    background:rgba(255,80,0,0.14);

    bottom:-180px;
    right:-120px;
}

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

.contact-grid-bg{
    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(255,140,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,140,0,0.04) 1px, transparent 1px);

    background-size:60px 60px;

    z-index:1;
}

/* ========================= */
/* HEADING */
/* ========================= */

.contact-form-heading{
    text-align:center;

    position:relative;

    z-index:5;

    max-width:950px;

    margin:auto auto 90px;
}

/* TAG */

.contact-form-heading span{
    display:inline-block;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(255,140,0,0.12);

    border:1px solid rgba(255,140,0,0.3);

    color:#ffb347;

    font-size:14px;
    font-weight:700;

    letter-spacing:2px;

    margin-bottom:28px;
}

/* TITLE */

.contact-form-heading h2{
    color:#fff;

    font-size:72px;

    line-height:1.15;

    margin-bottom:24px;

    font-weight:800;

    text-transform:uppercase;

    text-shadow:
    0 0 30px rgba(255,140,0,0.35);
}

/* TEXT */

.contact-form-heading p{
    color:#ddd;

    font-size:18px;

    line-height:2;
}

/* ========================= */
/* WRAPPER */
/* ========================= */

.contact-form-wrapper{
    display:grid;

    grid-template-columns:0.9fr 1.1fr;

    gap:40px;

    align-items:start;

    position:relative;

    z-index:5;
}

/* ========================= */
/* LEFT INFO */
/* ========================= */

.contact-info-box{
    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:40px;

    padding:45px;

    backdrop-filter:blur(18px);

    position:relative;

    overflow:hidden;

    box-shadow:
    0 0 45px rgba(255,140,0,0.1);
}

/* TOP BORDER */

.contact-info-box::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* BADGE */

.contact-live-badge{
    display:inline-flex;
    align-items:center;

    gap:12px;

    padding:12px 24px;

    border-radius:40px;

    background:rgba(0,255,120,0.08);

    border:1px solid rgba(0,255,120,0.2);

    color:#7dffb0;

    font-size:12px;
    font-weight:700;

    letter-spacing:1px;

    margin-bottom:30px;
}

/* DOT */

.live-dot{
    width:10px;
    height:10px;

    border-radius:50%;

    background:#00ff7b;

    animation:livePulse 1.5s infinite;
}

/* ANIMATION */

@keyframes livePulse{

    0%{
        transform:scale(1);
        opacity:1;
    }

    100%{
        transform:scale(2.5);
        opacity:0;
    }

}

/* TITLE */

.contact-info-box h3{
    color:#fff;

    font-size:42px;

    margin-bottom:22px;

    font-weight:800;
}

/* TEXT */

.contact-info-box p{
    color:#ddd;

    font-size:16px;

    line-height:2;

    margin-bottom:35px;
}

/* FEATURES */

.contact-features{
    display:flex;
    flex-direction:column;

    gap:20px;

    margin-bottom:40px;
}

/* ITEM */


.contact-feature-item{
    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 22px;

    border-radius:22px;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.1);

    transition:0.4s;
}

/* HOVER */

.contact-feature-item:hover{
    transform:translateX(8px);

    border-color:#ff9800;

    box-shadow:
    0 0 30px rgba(255,140,0,0.15);
}

/* ICON */

.contact-feature-item i{
    width:52px;
    height:52px;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

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

    color:#fff;

    font-size:20px;

    box-shadow:
    0 0 25px rgba(255,140,0,0.45);
}

/* TEXT */

.contact-feature-item span{
    color:#fff;

    font-size:15px;

    font-weight:500;
}

/* ========================= */
/* VERIFICATION */
/* ========================= */

.verification-badge-box{
    display:flex;

    align-items:center;

    gap:18px;

    padding:24px;

    border-radius:28px;

    background:
    linear-gradient(
    135deg,
    rgba(0,255,120,0.08),
    rgba(255,255,255,0.03)
    );

    border:1px solid rgba(0,255,120,0.18);
}

/* ICON */

.verification-icon{
    width:70px;
    height:70px;

    border-radius:22px;

    background:
    linear-gradient(
    135deg,
    #00c853,
    #00ff7b
    );

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

    color:#fff;

    font-size:30px;

    box-shadow:
    0 0 30px rgba(0,255,120,0.35);
}

/* CONTENT */

.verification-content h4{
    color:#fff;

    font-size:22px;

    margin-bottom:8px;
}

.verification-content p{
    color:#ddd;

    font-size:14px;

    margin:0;
}

/* ========================= */
/* FORM BOX */
/* ========================= */

.contact-form-box{
    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:40px;

    padding:45px;

    backdrop-filter:blur(18px);

    position:relative;

    overflow:hidden;

    box-shadow:
    0 0 45px rgba(255,140,0,0.1);
}

/* BORDER */

.contact-form-box::before{
    content:'';

    position:absolute;

    width:100%;
    height:4px;

    top:0;
    left:0;

    background:
    linear-gradient(
    to right,
    #ff9800,
    #ff5e00
    );
}

/* ROW */

.contact-form-row{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:25px;

    margin-bottom:25px;
}

/* ========================= */
/* INPUT */
/* ========================= */

.contact-input-group{
    position:relative;

    margin-bottom:25px;
}

/* INPUTS */

.contact-input-group input,
.contact-input-group select,
.contact-input-group textarea{
    width:100%;

    background:rgba(255,255,255,0.04);

    border:1px solid rgba(255,140,0,0.12);

    border-radius:22px;

    padding:20px 55px 20px 20px;

    color:#fff;

    font-size:15px;

    outline:none;

    transition:0.4s;
}

/* TEXTAREA */

.contact-input-group textarea{
    min-height:180px;

    resize:none;

    padding-top:28px;
}

/* FOCUS */

.contact-input-group input:focus,
.contact-input-group select:focus,
.contact-input-group textarea:focus{
    border-color:#ff9800;

    box-shadow:
    0 0 30px rgba(255,140,0,0.2);
}

/* LABEL */

.contact-input-group label{
    position:absolute;

    left:20px;
    top:20px;

    color:#aaa;

    font-size:14px;

    pointer-events:none;

    transition:0.4s;
}

/* ACTIVE */

.contact-input-group input:focus ~ label,
.contact-input-group input:valid ~ label,
.contact-input-group select:focus ~ label,
.contact-input-group select:valid ~ label,
.contact-input-group textarea:focus ~ label,
.contact-input-group textarea:valid ~ label{
    top:-12px;

    left:16px;

    background:#1b0b00;

    padding:4px 10px;

    border-radius:12px;

    color:#ff9800;

    font-size:12px;
}

/* ICON */

.contact-input-group i{
    position:absolute;

    right:20px;
    top:22px;

    color:#ff9800;

    font-size:18px;
}

/* TEXTAREA ICON */

.textarea-group i{
    top:28px;
}

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

.contact-buttons{
    display:flex;

    gap:20px;

    flex-wrap:wrap;
}

/* BUTTON */

.contact-buttons button{
    border:none;

    cursor:pointer;

    padding:18px 34px;

    border-radius:20px;

    font-size:15px;
    font-weight:700;

    display:flex;
    align-items:center;

    gap:12px;

    transition:0.4s;
}

/* SEND */

.send-btn{
    background:
    linear-gradient(
    135deg,
    #ff9800,
    #ff5e00
    );

    color:#fff;

    box-shadow:
    0 0 35px rgba(255,140,0,0.35);
}

/* SAVE */

.draft-btn{
    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,140,0,0.2);

    color:#fff;
}

/* HOVER */

.contact-buttons button:hover{
    transform:translateY(-6px);

    box-shadow:
    0 0 45px rgba(255,140,0,0.5);
}

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

@media(max-width:1100px){

    .contact-form-wrapper{
        grid-template-columns:1fr;
    }

}

@media(max-width:768px){

    .main-contact-section{
        padding:90px 5%;
    }

    .contact-form-heading h2{
        font-size:42px;
    }

    .contact-form-heading p{
        font-size:16px;
    }

    .contact-form-row{
        grid-template-columns:1fr;
    }

    .contact-info-box,
    .contact-form-box{
        padding:35px 28px;
    }

    .contact-info-box h3{
        font-size:32px;
    }

}

@media(max-width:500px){

    .contact-form-heading h2{
        font-size:30px;
    }

    .contact-form-heading p{
        font-size:14px;
    }

    .contact-info-box,
    .contact-form-box{
        padding:30px 22px;
    }

    .contact-info-box h3{
        font-size:26px;
    }

    .contact-info-box p{
        font-size:14px;
    }

    .contact-input-group input,
    .contact-input-group select,
    .contact-input-group textarea{
        font-size:14px;
    }

    .contact-buttons{
        flex-direction:column;
    }

    .contact-buttons button{
        width:100%;

        justify-content:center;
    }

}