/* Color Palette Variables based on the new color scheme */
:root {
    --primary-blue: #1b4f9b;   /* Main Dark Blue - Logo background, heading, footer */
    --secondary-blue: #006cb5; /* Bright Blue - Hovers and gradients */
    --accent-orange: #ea5e20;  /* Vibrant Orange - Active links, play button, icons */
    --text-grey: #6c757d;      /* Subtitles and paragraph text */
    --bg-color: #ffffff;
    --border-dark: #1b4f9b;    /* Border of video frame matching primary blue */
}

body {
    background-color: var(--bg-color);
    font-family: 'Inter', sans-serif;
    color: var(--text-grey);
}

.top-left-logo {
    width: 140px; /* Aap apni image ke hisaab se isko kam ya zyada kar sakte hain */
    height: auto;
    object-fit: contain;
}
.top-left1-logo {
    width: 220px; /* Aap apni image ke hisaab se isko kam ya zyada kar sakte hain */
    height: auto;
    object-fit: contain;
}
/* Header & Typography */
.logo-circle {
    width: 48px;
    height: 48px;
    background-color: var(--primary-blue);
    border-radius: 50%;
    color: var(--bg-color);
    font-size: 1.4rem;
}

.main-title {
    font-family: "Playfair Display", serif;
    font-weight: 600;
    color: var(--primary-blue);
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}

.subtitle {
    font-size: 0.95rem;
    color: var(--text-grey);
}

/* Navigation Links */
.custom-nav {
    gap: 1.5rem;
    padding-bottom: 0.5rem;
}

.custom-nav .nav-link {
    color: var(--text-grey);
    font-weight: 500;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
    border-bottom: 2px solid transparent;
}


/* Active State matching New theme */
.custom-nav .nav-link.active {
    color: var(--accent-orange); /* Now reflects the Orange color */
    border-bottom: 2px solid var(--accent-orange);
}

.nav-divider {
    border-top: 1px solid #e9ecef;
    margin-top: 0;
    opacity: 1;
}

/* Video Container */
.video-container {
    border-radius: 12px;
    overflow: hidden;
    border: 5px solid var(--border-dark);
    background-color: #000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Class ka naam video-img se badal kar video-element kiya */
.video-element {
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
    opacity: 0.8;
    filter: sepia(0.5) hue-rotate(-15deg) saturate(1.5) brightness(0.9);
    transition: all 0.5s ease; /* Smooth transition ke liye */
}

/* Nayi class add karni hai jab video play ho */
.video-element.playing {
    opacity: 1;
    filter: none; /* Play hone par sepia filter hata dega taki colors original dikhein */
}

/* Overlay & Play Button */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
    /* YAHAN SE NAYI LINES ADD KI HAIN CENTERING KE LIYE */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.play-btn {
    background-color: var(--accent-orange);
    color: #fff;
    border: none;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 5px; /* Centers the play triangle visually */
    cursor: pointer;
    transition: all 0.3s ease;
}

.play-btn:hover {
    transform: scale(1.1);
    background-color: #c94d18; /* Thoda darker orange hover ke liye */
}

.play-text {
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 1.5px;
    font-size: 0.85rem;
}

/* Footer Section */
.footer-info {
    font-size: 0.9rem;
    color: var(--text-grey);
}

.info-icon {
    color: var(--accent-orange);
}

/* Proceed Button Styling */
.bottom-action {
    background-color: var(--bg-color);
}

.proceed-btn {
    /* Gradient matching the new Blue theme */
    background: linear-gradient(90deg, var(--secondary-blue) 0%, var(--primary-blue) 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.15rem;
    padding: 16px 45px;
    border-radius: 50px;
    border: none;
    box-shadow: 0 8px 20px rgba(0, 108, 181, 0.3); /* Adjusted shadow color */
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
        margin-top: -35px;

}

.proceed-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(0, 108, 181, 0.5); /* Adjusted shadow color */
    color: #ffffff;
}

.proceed-btn:active {
    transform: translateY(1px);
}

/* Security Text */
.secure-text {
    /* The bluish-grey text color from the image */
    color: #8fa0b3;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Legal Links (Privacy | Terms) */
.legal-links a {
    color: #8fa0b3;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.legal-links a:hover {
    color: var(--primary-blue);
}

.legal-links .separator {
    color: #d1d8e0;
    font-weight: 300;
}

/* Dark Footer Styling */
.dark-footer {
    background-color: var(--primary-blue);
    padding: 60px 0;
}

.award-icon {
    color: var(--bg-color);
    font-size: 1.6rem;
}

.copyright-text {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--bg-color); 
}

.disclaimer-text {
    font-size: 0.85rem;
    line-height: 1.8;
    max-width: 800px;
    color: var(--bg-color); 
}