/*
Template Name: Athletics
File: Layout CSS
Author: TemplatesOnWeb
Author URI: https://www.templateonweb.com/
Licence: <a href="https://www.templateonweb.com/license">Website Template Licence</a>
*/

  
/* :root {
	--border_dark:#2f365c;
	--black_transparent: #245240ab;
	--black_transparent_dark:#245240e6;
	--black_transparent_light:#2452408c;
	--primary:#245240;
	--bg_primary_light:#edf6e9;
	--border_light_primary:#ddd;
	--secondry:#42c652;
	
} */

:root {
    /* --- PRIMARY COLOR (Replaces Dark Green) --- */
    /* We use your Navy Blue here. This will handle headers, 
       main backgrounds, and footers. */
    --primary: #0C2340; 
    
    /* --- SECONDARY COLOR (Replaces Bright Green) --- */
    /* We use your Action Orange here. This will handle buttons, 
       icons, and hover effects. */
    --secondry: #FF6600; 

    /* --- TRANSPARENCIES (Crucial for image overlays) --- */
    /* These are your Navy Blue but with transparency added. 
       Used when text sits on top of images. */
    --black_transparent: #0C2340ab;       /* Medium transparent Navy */
    --black_transparent_dark: #0C2340e6;  /* Dark transparent Navy */
    --black_transparent_light: #0C23408c; /* Light transparent Navy */

	/* --- ORANGE TRANSPARENCIES --- */
  

    /* 90% Opacity - Good for hover states or strong highlights */
    --orange_transparent_dark: #FF6600e6;   

    /* 67% Opacity - Good for overlays on dark photos */
    --orange_transparent: #FF6600ab;        

    /* 55% Opacity - Good for subtle background tints */
    --orange_transparent_light: #FF66008c;  
    
    /* 10% Opacity - Very light, great for background behind text */
    --orange_transparent_faint: #FF66001a;

    /* --- BACKGROUNDS & BORDERS --- */
    /* A very light blue-grey (instead of light green) to match Navy.
       Used for section backgrounds to break up white space. */
    --bg_primary_light: #F4F6F9; 
    
    --border_dark: #0C2340; /* Match primary */
    --border_light_primary: #dee2e6; /* Standard clean grey border */
}


body{
	font-family: "Poppins", serif;
}

ul{
	list-style:none;
	padding:0;
}
h1, h2, h3, h4, h5, h6 {
	font-optical-sizing: auto;
	font-style: normal;
     color:var(--primary);
	  font-family: "Zalando Sans Expanded", sans-serif;
	  letter-spacing:1px;
	  font-weight:500;
}

a{
	text-decoration:none;
	color:var(--primary); 
}
a:hover{
	text-decoration:none;
	color: var(--secondry);
}
a:focus{
	text-decoration:none;
	color: var(--secondry);
}

.link:hover{
	color: var(--secondry)!important;
}
.link:focus{
	color: var(--secondry)!important;
}



.button{
	transition: 0.3s;
	padding: 16px 36px 16px 36px;
	display: inline-block;
	background:var(--secondry);
	color:var(--bs-white)!important;
	font-weight:500;
	border-radius:50rem;
}

.button:hover{
	background:var(--bs-white);
	color:var(--primary)!important;
}

.button:focus{
	background:var(--bs-white);
	color:var(--primary)!important;
}

.button_1{
	background:var(--bs-white);
	color:var(--primary)!important;
}

.button_1:hover{
	background:var(--secondry);
	color:var(--bs-white)!important;
}

.button_1:focus{
    background:var(--secondry);
	color:var(--bs-white)!important;
}

.button_2{
	background:var(--secondry);
	color:var(--bs-white)!important;
}

.button_2:hover{
	background:var(--primary);
	color:var(--bs-white)!important;
}

.button_2:focus{
    background:var(--primary);
	color:var(--bs-white)!important;
}

.button_3{
	background:var(--primary);
	color:var(--bs-white)!important;
}

.button_3:hover{
	background:var(--secondry);
	color:var(--bs-white)!important;
}

.button_3:focus{
    background:var(--secondry);
	color:var(--bs-white)!important;
}

.col_primary{
	color: var(--primary)!important;
}
	
.bg_primary {
    background: var(--primary)!important;
}
.bg_secondry {
    background: var(--secondry)!important;
}

.bg_primary_light {
    background: var(--bg_primary_light);
}
.col_secondry{
	color: var(--secondry)!important;
}
.black_transparent {
   /* background: var(--black_transparent);*/
     background: -moz-linear-gradient(top, rgba(0,0,0,0) 50%, rgb(17 6 1 / 60%) 80%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgb(17 6 1 / 60%) 80%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgb(17 6 1 / 60%) 80%)
}
.black_transparent_dark {
    background: var(--black_transparent_dark)!important;
}
.black_transparent_light {
    background: var(--black_transparent_light)!important;
}

.orange_transparent_light{
	background: var(--orange_transparent_light) !important;
}

.border_light_primary{
	border:1px solid  var(--border_light_primary)!important;
}

.line{
	height:2px!important;
    width: 80px;
	background:var(--secondry)!important;
 }




.font_14{
	font-size:14px; 
}
.font_17{
	font-size:17px; 
}
.font_15{
	font-size:15px; 
}
.font_12{
	font-size:12px; 
}
.font_11{
	font-size:11px; 
}

.font_10{
	font-size:10px; 
}
.font_8{
	font-size:8px; 
}
.font_13{
	font-size:13px; 
}
.font_48{
	font-size:48px; 
}
.font_60{
	font-size:60px; 
}


p{
	color:var(--bs-gray-700);
	line-height:1.8em;
	font-family: "Poppins", serif;
	font-size:15px;
}
.border, .border-start, .border-end, .border-top, .border-bottom {	 
	border-color: var(--border_light_primary) !important;
}
.border_primary {	 
	border-color: var(--primary) !important;
}

.family_poppins{
      font-family: "Poppins", serif;
 }

.shadow {
        box-shadow: 0 0 0.5rem rgb(228 237 229) !important;
}
b{
	  font-weight:500;
	   font-family: "Zalando Sans Expanded", sans-serif;
	    color:var(--primary);
}
span{
	  font-weight:500;
}
.rounded_30{
	border-radius:30px;
}

/* Edited by Neerajkumar */
.about-img-height{
	height: 573px; /* Adjust this value as needed */
	width: 100%;
	object-fit: cover; /* Maintains aspect ratio and covers the area */
}

.mile-image-height{
	height: 240px; /* Adjust this value as needed */
	width: 100%;
	object-fit: cover;
}

.off-image-height{
	height: 600px; /* Adjust this value as needed */
	width: 100%;
	object-fit: cover;
}

@media (max-width:768px){

	 .off-image-height{
		width: 100%;
		height: 350px;
		object-fit: cover;
	 }

}

.explore_highlight_copy p{
	color:#5c6370;
}
.explore_story_card{
	position:relative;
	overflow:hidden;
	min-height:360px;
	background:var(--black_transparent_light);
}
.explore_story_img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.explore_story_overlay{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	padding:32px;
	background:linear-gradient(180deg, rgba(255, 102, 0, 0) 0%, rgb(3, 30, 62) 100%);
	color:var(--bs-white);
}
.explore_highlight_card{
	background:var(--bg_primary_light);
	padding:32px;
	border:1px solid var(--border_light_primary);
	box-shadow:0 10px 30px rgba(12,35,64,0.08);
}
.explore_highlight_card_primary{
	background:var(--primary);
	border-color:transparent;
	box-shadow:0 15px 40px rgba(12,35,64,0.2);
}
.explore_highlight_card_primary h4{
	color:var(--bs-white);
}
.rounded_top{
	border-radius:30px 30px 0px 0px;
}
.rounded_bottom{
	border-radius:0px 0px 30px 30px;
}
.family_zaland{
	   font-family: "Zalando Sans Expanded", sans-serif;
}



  #our_motto{
	color: var(--bs-white) !important;
  }



.caption-right{
	right:0 !important;
	left:unset!important;
	background: linear-gradient(99.89deg, #034683 0%, #0286d37d 106.22%) !important;
 }
.modal {
    --bs-modal-bg: var(--bg_primary_light);	
}

.line_x:before {
    display: inline-block;
    width: 3%;
    height: 3px;
    background-color: var(--secondry);
    vertical-align: middle;
    margin-right: 1%;
    content: "";
}
.line_x1:after {
    display: inline-block;
    width: 3%;
    height: 3px;
    background-color: var(--secondry);
    vertical-align: middle;
    margin-left: 1%;
    content: "";
}
.line_x2:before {
    display: inline-block;
    width: 6%;
    height: 3px;
    background-color: var(--secondry);
    vertical-align: middle;
    margin-right: 3%;
    content: "";
}
/*****************header*****************/

 @keyframes slideDown {
      from { transform: translateY(-100%); }
      to { transform: translateY(0); }
    }
    @keyframes fadeInAnimation {
      from { opacity: 0; transform: translateX(-50%) rotate(45deg) translateY(5px); }
      to { opacity: 1; transform: translateX(-50%) rotate(45deg) translateY(0); }
    }
    /* Make the entire header section sticky */
    #header.sticky {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1050;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      animation: slideDown 0.3s ease;
    }
    .navbar.sticky {
      position: relative;
      box-shadow: none;
    }
    /* Add padding to body to account for header (navbar + breaking news) when sticky */
    /* Navbar: ~60px + Breaking news: ~62px = ~122px total */
    body.has-sticky { 
      padding-top: 122px; /* Total height of navbar + breaking news */
    }
    .navbar { min-height: 60px; }

    .navbar-nav .dropdown-toggle::after,
    .navbar-nav .dropdown-item.dropdown-toggle::after { display: none !important; }

    .navbar-nav .dropdown-toggle,
    .navbar-nav .dropdown-item.dropdown-toggle {
      position: relative;
      padding-right: 2rem;
    }
    .navbar-nav .dropdown-arrow {
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
      font-size: 0.8rem;
      color: currentColor;
      transition: transform 0.5s ease-in-out;
    }
    .navbar-nav .dropdown-submenu .dropdown-arrow { right: 1rem; }
    .dropdown-menu[data-bs-popper] { top: auto; margin-top: 0px; }

    .nav-icons .nav-link { font-size: 1.2rem; padding: 0.5rem; }

    /* --- MOBILE MENU: EXPAND DROPDOWNS BY DEFAULT ------------------------------------------------------ */
@media (max-width: 991px) {
    
    /* Target the dropdown menu inside your specific class */
    .hover-dropdown .dropdown-menu {
        display: block;       /* Force it to be visible */
        position: static;     /* Remove "floating" positioning so it stacks naturally */
        float: none;
        width: 100%;
        margin-top: 0;
        
        /* Styling to make it look like a sub-list */
        background-color: transparent; /* Remove white background box */
        border: none;                  /* Remove border */
        box-shadow: none;              /* Remove shadow */
        /* padding-left: 10px;          */
        padding-top: 5px;
        padding-bottom: 5px;
    }

    /* Optional: Style the sub-links to look smaller/different */
    .hover-dropdown .dropdown-item{
        color: rgba(0, 0, 0, 0.7); /* Slightly lighter text */
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 20px;
        padding-left: 0;
        padding-right: 0;

    }

     /* .drop_1 .dropdown-item .active1{

        color: var(--secondry);
     } */
    
    /* Hide the downward arrow icon on mobile since it's already open */
    .hover-dropdown .dropdown-arrow {
        display: none;
    }
}

    @media (max-width: 991px) {
      .navbar .container {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
      }
      .navbar-brand { grid-column: 1; justify-self: start; }
      .navbar-toggler { grid-column: 3; justify-self: end; margin-left: 0.5rem; }
      .nav-icons { grid-column: 3; justify-self: end; display: flex; }
      .mega-content, .nested-mega-content { display: block; }
      .mega-content div, .nested-mega-content div { margin-bottom: 1rem; }
    }

    @media (min-width: 992px) {
	.navbar {
        padding:0px;
      }
      .navbar .container {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
      }

      .offcanvas-lg {
        position: static;
        transform: none;
        visibility: visible !important;
        background-color: transparent;
        border: none;
        height: auto;
        display: flex;
        justify-content: center;
        padding: 0;
      }
      .offcanvas-lg .offcanvas-body {
        display: flex;
        justify-content: center;
        padding: 0;
      }
	  
      .navbar-expand-lg .navbar-nav .nav-link{ 
	  padding: 25px 25px; 
	  font-weight:500;  
	  color:var(--primary);
	  }
	 .navbar-expand-lg .navbar-nav .active{ 
	  color:var(--secondry)!important;
	  }
	    .navbar-expand-lg .navbar-nav .nav-link:hover{ 
	  color:var(--secondry);
	  }
	    .navbar-expand-lg .navbar-nav .nav-link:focus{ 
	  color:var(--secondry);
	  }
      .navbar-expand-lg .nav-icons .nav-link { padding: 5px 10px; }

      .navbar .dropdown:hover > .dropdown-menu,
      .dropdown-submenu:hover > .dropdown-menu { display: block; }

      /* Standard submenu flyout */
      .dropdown-submenu { position: relative; }
      .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-left: 0;
      }

      /* Full-width mega menu */
      .dropdown-mega { position: static; }
      .dropdown-mega .dropdown-menu {
        left: 50%;
        transform: translateX(-50%) !important;
        width: 600px;
      }

      /* Nested mega menu flyout to right */
      .dropdown-mega-nested { position: relative; }
      .dropdown-mega-nested .dropdown-menu {
        position: absolute;
        top: 0;
        left: 100%;
        width: auto;
      }

      .mega-content, .nested-mega-content { display: flex; gap: 2rem; }
      .mega-content ul, .nested-mega-content ul {
        list-style: none;
        padding: 0;
      }

      .navbar-nav .dropdown:hover > .dropdown-toggle > .dropdown-arrow,
      .navbar-nav .dropdown-submenu:hover > .dropdown-item.dropdown-toggle > .dropdown-arrow {
        transform: translateY(-50%) rotate(180deg);
      }
    }

    @media (min-width: 1200px) {
      .navbar .navbar-nav > .dropdown > .nav-link {
        position: relative;
      }
      .navbar .navbar-nav > .dropdown:hover > .nav-link::before {
        content: "";
        position: absolute;
        bottom: -7px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 13px;
        height: 13px;
        background: var(--secondry);
       /* border-top: 1px solid rgb(244, 81, 30);
        border-left: 1px solid rgb(230, 74, 25);*/
        z-index: 1100;
        animation: fadeInAnimation 0.3s ease forwards;
      }
    }
	
.text_big{
	font-size:1.5rem !important;
}
.drop_1{
	min-width:200px;
	border-radius:0;
	border-color:var(--border_light_primary);
}
.drop_1 a{
	color:var(--primary);
	font-weight:500;
	padding-top:13px;
	padding-bottom:10px;
}
.drop_1 a:hover{
	color:var(--secondry);
     background:none;
}
.drop_1 .dropdown-menu{
	border-radius:0;
}
.dropdown-submenu .dropdown-menu h6{
	color:var(--primary);
}
.dropdown-submenu .dropdown-menu a{
    padding-top:10px!important;
	padding-bottom:10px!important;
}
.navbar-nav .nav-link.active {
    color: var(--secondry);
}
.navbar-nav .nav-link:hover {
    color: var(--secondry);
}
.navbar-nav .nav-link:focus {
      border:none;
      box-shadow:none;
}
.home_link{
	padding-top: 10px!important;
	padding-bottom: 10px!important;
}

/*****************header_end*****************/

/*********************program****************/
.sport_tag{
	background: var(--bg_primary_light);
	border-radius:10px;
	padding: 11px 18px;
	font-size:14px;
}
/*********************program_end****************/

/*********************facilty****************/
.facilty_1_right_inner_left span{
	width:50px;
	height:50px;
	line-height:50px;
}
/*********************facilty_end****************/



/*********************common****************/
.form-control:focus{
	box-shadow:none;
	border-color: var(--bg_primary_light); 
}
.form-select:focus{
	box-shadow:none;
	border-color:var(--bg_primary_light);
}
.form-control{
	border-color:var(--bg_primary_light); 
	box-shadow:none;
	height:48px;
	font-size:15px;
}
.form-select{
	border-color:var(--bg_primary_light); 
	box-shadow:none; 
	border-radius:0;
	height:48px;
	font-size:15px;
}

.input-group .form-control{
	height:auto;
}
.input-group .form-control:focus{
	box-shadow:none;
}

.form_text{
	height:100px!important; 
}

::placeholder {
	opacity: 1; /* Firefox */
}
.blog_pg1_right1 ::placeholder{
	color:var(--bs-gray-500)!important;
}

.paginate li a{
	width:40px;
	height:40px;
	line-height:37px; 
	transition: 0.3s;
	border-radius:50%;
	margin-left:3px;
	margin-right:3px;
	color: var(--bs-dark);
}
.paginate li a:hover{
	background:var(--primary);
	color: var(--bs-white);
	transition: 0.3s;
	border-color:var(--primary)!important;
}
.paginate  .active {
	background:var(--primary);
	color: var(--bs-white);
	border-color:var(--primary)!important;
}

.image_box{
	overflow:hidden;
}
.image_box img{
	object-fit: cover;
  transition: transform 0.4s ease-in-out;
}
.image_box:hover img{
	transform: scale(1.1); /* zooms in */
}

#cartOffcanvas{
	z-index: 9999;
}
.product_badge{
	top: -8px;
    right: -5px;
    background-color: var(--red);
}

.tags a {
    display: block;
    padding: 9px 18px;
    margin: 0px 5px 8px 0px;
    transition: 0.3s;
    background: var(--bs-white);
    color: var(--primary);
    border-radius:8px;
}
/*********************common_end****************/

/*********************location****************/
.accordion-button {
	background:var(--secondry);
	color:var(--bs-white);
	padding:8px 15px;
	border: 0;
	font-size: 26px;
	text-align: left;
	border-radius:0;
}
.accordion-button:focus {
	box-shadow: none;
	border: none;
}
.accordion-button:not(.collapsed) {
	background:var(--primary);
	color:var(--bs-white);
	padding:8px 15px;
}
.accordion-body {
	padding: 15px;
}

.accordion-button::after {
	width: auto;
	height: auto;
	content: "+";
	font-size: 40px;
	background-image: none;
	font-weight: 100;
	color: var(--bs-white);
	transform: translateY(-4px);
}
.accordion-button:not(.collapsed)::after {
	width: auto;
	height: auto;
	background-image: none;
	content: "-";
	font-size: 40px;
	transform: translate(-5px, -4px);
	transform: rotate(0deg);
}
.accordion-item{
	border:none;
	border-radius:0;
	background:none;
}
/*********************location_end****************/

/*********************footer****************/
#footer .footer_1_main .footer_1{
	
	padding:10px 30px;
}
/*********************footer_end****************/



@media screen and (max-width : 767px){

.img-fluid{
   width:100%!important;
 }


.gx-5{
	--bs-gutter-x:1.5rem!important;
}
.gy-5 {
    --bs-gutter-y: 2rem;
}
.offcanvas-body{
border-top:1px solid var(--bg_primary_light);	
}
.nav-link{
	font-size:20px;
}
.font_48 {
	font-size:38px;
}

.container-xl{
	padding-left:20px!important;
	padding-right:20px!important;
}

#header .offcanvas-body  .align-items-center{
   align-items: start!important;
}
#header .offcanvas-body  .align-items-center li{
  width:100%;
}
.explore_1 p{
	width:100%!important;
}
ul .button{
	 padding-right:15px;
     padding-left:15px;
	 margin:3px!important;
}

.donate-button{
	transition: 0.3s;
	padding: 7px 15px 7px 15px;
	display: inline-block;
	background:var(--secondry);
	color:var(--bs-white)!important;
	font-weight:500;
	border-radius:50rem;
}

.facilty_1_right{
	 margin-top:20px;
}
.footer_top_right{
	 margin-top:20px;
}
.footer_1_left{
	margin-top:10px;
	margin-bottom:10px;
}
.footer_1ism span{
	margin-top:10px!important;
}
.footer_2_right{
	text-align:left!important;
	margin-top:10px;
}
.footer_1_main{
	 padding-right:10px!important;
     padding-left:10px!important;
}
.font_60{
	font-size:50px;
}
.font_48{
	font-size:40px;
}
.faq_1_left{
	padding-right:0!important;
	margin-bottom:20px;
}
.blog_1_left{
	margin-top:10px;
	margin-bottom:10px;
}
.program_dt2_right{
	padding-left:0!important;
	margin-top:20px;
}


}
@media (min-width:576px) and (max-width:767px) {
.tags a {
    padding: 5px 10px;
    margin: 0px 3px 5px 0px;
}
}
@media (min-width:768px) and (max-width:991px) {

.img-fluid{
   width:100%!important;
 }

 .off-image-height{
	width: 100%;
	height: 400px;
 }

	
.gx-5{
	--bs-gutter-x:1rem!important;
}
.gy-5{
	--bs-gutter-y:1.5rem!important;
}
.nav-link{
	font-size:20px;
}
.font_48 {
	font-size:38px;
}
.font_60 {
	font-size:48px;
}
#header .offcanvas-body  .align-items-center{
   align-items: start!important;
}
#header .offcanvas-body  .align-items-center li{
  width:100%;
}

.button{
	padding: 16px 25px 16px 25px;
	font-size:15px;
}
.program_1_left  .fs-3{
	font-size:18px!important;
}
}

@media (min-width:992px) and (max-width:1200px) {

.gx-5{
	--bs-gutter-x:1.5rem!important;
}
.dropdown-submenu > .dropdown-menu {
    left:auto;
	display:none!important;
}

 .navbar-expand-lg .navbar-nav .nav-link{ 
	  padding: 25px 15px; 
	  }
.navbar-nav .dropdown-arrow {
  right: 0;
}

.text_big {
    padding-top: 10px!important;
    padding-bottom: 10px!important;
}
}



/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {  
.img-fluid{
   width:100%!important;
 }

}
@media (min-width:1201px) and (max-width:1250px) {
.dropdown-submenu > .dropdown-menu {
    left:auto;
	display:none!important;
}
 }
@media screen and (max-width : 1399px){
.gx-5{
	--bs-gutter-x:1.5rem!important;
}
#footer .footer_1_main .footer_1 {
    padding: 10px 15px;
}
 }
@media screen and (min-width : 1400px){

 }

/*********************Breaking News Ticker****************/
.breaking-news-ticker {
	background-color: var(--primary);
	color: var(--bs-white);
	padding: 10px 0;
	border-bottom: 2px solid var(--secondry);
	position: relative;
	overflow: hidden;
}

.breaking-news-wrapper {
	display: flex;
	align-items: center;
	gap: 20px;
}

.breaking-news-label {
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: var(--secondry);
	padding: 8px 16px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	flex-shrink: 0;
}

.breaking-news-icon {
	font-size: 16px;
}

.breaking-news-content {
	flex: 1;
	overflow: hidden;
	position: relative;
}

.breaking-news-scroll {
	display: flex;
	gap: 30px;
	animation: scroll-news 30s linear infinite;
	white-space: nowrap;
	will-change: transform;
}

.breaking-news-scroll:hover {
	animation-play-state: paused;
}

.breaking-news-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 15px;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.breaking-news-item:first-child {
	border-left: none;
}

.breaking-news-item-date {
	color: var(--secondry);
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
}

.breaking-news-item-title {
	font-size: 14px;
	font-weight: 500;
}

.breaking-news-item-link {
	color: var(--bs-white);
	text-decoration: none;
	transition: color 0.3s;
}

.breaking-news-item-link:hover {
	color: var(--secondry);
	text-decoration: none;
}

/* .peek-carousel .carousel-inner{
	overflow:visible;
}
.peek-carousel .carousel-item{
	transition:transform 0.6s ease, opacity 0.6s ease;
	transform:scale(0.94);
	opacity:0.6;
}
.peek-carousel .carousel-item.active{
	transform:scale(1);
	opacity:1;
}
.peek-carousel .carousel-item-next,.peek-carousel .carousel-item-prev{
	transform:scale(0.96);
	opacity:0.8;
}
.peek-carousel .carousel-control-prev,.peek-carousel .carousel-control-next{
	filter:invert(1);
}

/* Peek slider (custom, non-bootstrap) 
.peek-slider{
	position:relative;
}
.peek-track{
	display:flex;
	gap:24px;
	overflow:hidden;
	scroll-behavior:smooth;
	scroll-snap-type:x mandatory;
	padding: 8px 4px;
}
.peek-slide{
	flex:0 0 78%;
	scroll-snap-align:start;
	transition: transform 0.4s ease, opacity 0.4s ease;
}
.peek-slide:not(:first-child){
	opacity:0.9;
	transform:scale(0.97);
}
.peek-track:focus-visible{
	outline:none;
}
.peek-controls{
	position:absolute;
	top:50%;
	right:12px;
	transform:translateY(-50%);
	display:flex;
	gap:10px;
	z-index:2;
}
.peek-btn{
	border:none;
	background:rgba(0,0,0,0.5);
	color:#fff;
	width:40px;
	height:40px;
	border-radius:50%;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	transition:background 0.2s ease, transform 0.2s ease;
}
.peek-btn:hover{
	background:rgba(0,0,0,0.7);
	transform:translateY(-2px);
}

@media (max-width: 991.98px){
	.peek-track{
		gap:16px;
	}
	.peek-slide{
		flex:0 0 90%;
	}
}

@media (max-width: 575.98px){
	.peek-slide{
		flex:0 0 100%;
	}
	.peek-controls{
		right:8px;
	}
	.peek-btn{
		width:34px;
		height:34px;
	}
}

@media (max-width: 767.98px){
	.peek-slider{
		padding-bottom: 12px;
	}
	.peek-controls{
		position: static;
		transform: none;
		justify-content: center;
		margin-top: 8px;
	}
	.peek-btn{
		width:32px;
		height:32px;
	}
	.peek-track{
		gap:12px;
	}
	.peek-slide{
		flex:0 0 92%;
	}
} */




@keyframes scroll-news {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

@media screen and (max-width : 768px){
	.breaking-news-ticker {
		padding: 6px 0; /* Reduced from 10px */
	}
	
	.breaking-news-wrapper {
		flex-direction: row;
		gap: 8px; /* Reduced from 10px */
		align-items: center;
	}
	
	.breaking-news-label {
		width: auto;
		justify-content: flex-start;
		padding: 4px 8px; /* Reduced from 6px 10px */
		font-size: 10px; /* Reduced from 11px */
		flex-shrink: 0;
	}
	
	.breaking-news-icon {
		font-size: 14px; /* Reduced from 16px */
	}
	
	.breaking-news-text-mobile-hide {
		display: none;
	}
	
	.breaking-news-content {
		flex: 1;
		min-width: 0; /* Allows flex item to shrink below content size */
		overflow: hidden;
	}
	
	.breaking-news-scroll {
		display: flex !important;
		flex-wrap: nowrap !important;
		gap: 10px; /* Reduced from 15px */
		animation-duration: 15s;
		width: max-content; /* Ensures all items are in the scroll */
	}
	
	.breaking-news-item {
		font-size: 10px; /* Reduced from 11px */
		padding: 0 6px; /* Reduced from 0 8px */
		gap: 6px; /* Reduced from 10px */
		flex-shrink: 0; /* Prevents items from shrinking */
		white-space: nowrap;
	}
	
	.breaking-news-item-date {
		font-size: 8px; /* Reduced from 9px */
		white-space: nowrap;
		padding: 2px 4px; /* Add small padding for better appearance */
	}
	
	.breaking-news-item-title {
		font-size: 10px; /* Reduced from 11px */
		white-space: nowrap;
	}

	.site-logo {
		height: 60px;        /* adjust size as you like */
		width: auto;
		display: block;      /* keeps it neat in the navbar */
	  }

    .site-logo1 {
	height: 250px;        /* adjust size as you like */
	width: 250px;
	display: block;      /* keeps it neat in the navbar */
  }

  .navbar-brand {
	padding-top: 0;
	padding-bottom: 0;
	display: flex;
	align-items: center; /* vertically centers the logo */
  }

  
}

@media screen and (min-width : 1024px){

    .site-logo {
       height: 100px;        /* adjust size as you like */
       width: auto;
       display: block;      /* keeps it neat in the navbar */
     }

  .site-logo1 {
	height: 250px;        /* adjust size as you like */
	width: 250px;
	display: block;      /* keeps it neat in the navbar */
  }

  .navbar-brand {
	padding-top: 0;
	padding-bottom: 0;
	display: flex;
	align-items: center; /* vertically centers the logo */
  }
   }

/*********************Breaking News Ticker End****************/
@media screen and (min-width : 1440px){

 .site-logo {
	height: 100px;        /* adjust size as you like */
	width: auto;
	display: block;      /* keeps it neat in the navbar */
  }

  
 
}

@media screen and (min-width : 1440px){
   .site-logo1 {
	height: 300px;        /* adjust size as you like */
	width: auto;
	display: block;      /* keeps it neat in the navbar */
  }

  .navbar-brand {
	padding-top: 0;
	padding-bottom: 0;
	display: flex;
	align-items: center; /* vertically centers the logo */
  }
}

  /* programs  */
/* .nav-pills .nav-link {
    color: var(--primary); 
    background-color: transparent;
    border: 1px solid #dee2e6; 
    font-weight: 600;
    transition: all 0.3s ease;
}


.nav-pills .nav-link:hover {
    background-color: #f8f9fa;
    border-color: var(--secondry);
    color: var(--secondry);
}


.nav-pills .nav-link.active {
    background-color: var(--secondry); 
    color: #fff; 
    border-color: var(--secondry);
    box-shadow: 0 4px 10px rgba(255, 102, 0, 0.3); 
}


.tab-pane img {
    object-fit: cover;
    height: 350px; 
    width: 100%;
} */

/* --- Desktop/General Styles --- */
.nav-pills .nav-link1 {
    color: white;
    background-color:  var(--secondry);
    border: 1px solid #dee2e6;
    font-weight: 500;
    padding: 0.75rem 1.5rem; 
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-pills .nav-link1:hover {
    background-color: #ff6600;
    border-color: var(--secondry);
    color: white;
}

.nav-pills .nav-link1.active {
    background-color :var(--black_transparent_dark);
    color: #fff;
    border-color: var(--black_transparent_dark);
    box-shadow: 0 4px 10px rgba(255, 102, 0, 0.3);
}

.tab-pane img {
    object-fit: cover;
    height: 400px; 
    width: 100%;
}

.text-justify {
    text-align: justify;
    text-justify: inter-word; }

@media screen and (max-width: 767px) {
    .summer-camp-title {
        font-size: 25px;
    }

	.tab-pane img {
		object-fit: cover;
		height: 200px; 
		width: 100%;
	}
}

@media (max-width: 767.98px) {
.responsive-video1{

    object-fit: cover; 
    height: 300px; 
    min-height: 300px; 
}
}
.responsive-video {
    width: 100%;
    object-fit: cover; /* Crucial: Ensures video fills the box without distortion */
    border-radius: 30px; /* Matches your rounded_30 class */
    
    /* MOBILE DEFAULT: Keeps natural height based on width */
    height: 300px; 
    min-height: 300px; /* Optional: Prevents it from being too small on tiny screens */
}

/* DESKTOP (Screens wider than 768px) */
@media (min-width: 768px) {
    .responsive-video {
        height: 400px; /* Forces the 400px height you requested */
    }
}

/* --- MOBILE SPECIFIC STYLES (Max-width: 768px) --- */
@media screen and (max-width: 767px) {
    
    /* 1. Make Tabs Scroll Horizontally */
    .mobile-scroll-tabs {
        flex-wrap: nowrap; /* Prevents wrapping to new lines */
        overflow-x: auto;  /* Enables horizontal scrolling */
        padding-bottom: 5px; /* Space for hidden scrollbar */
        /* Hide scrollbar for a clean look */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }
    .mobile-scroll-tabs::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Opera */
    }

    /* 2. Smaller Tab Buttons */
    .nav-pills .nav-link1 {
        font-size: 14px;
        padding: 0.5rem 1rem; /* Smaller padding */
    }

    /* 3. Content Typography & Spacing */
    .tab-content h2 {
        font-size: 1.5rem; /* Smaller heading */
    }
    
    /* 4. Smaller Image Height on Mobile */
    /* .tab-pane img {
        height: 250px;
    } */
}














/* =========================================
   1. BASE STYLES (Desktop / General)
   ========================================= */

/* --- DARK THEME COLORS --- */
.bg_primary_dark {
    background-color: #0C2340; /* Deep Navy Background */
}

.text_stroke_orange {
    color: #FF6600;
}

/* --- TEXT UTILITIES --- */
.rounded_30 {
    border-radius: 30px;
}
.rounded_40 {
    border-radius: 40px;
}

/* --- BUTTONS (PILLS) --- */
.nav-pills .nav-link {
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    transition: all 0.3s ease;
    font-weight: 500;
}

.nav-pills .nav-link:hover {
    border-color: #FF6600;
    color: #FF6600;
}

.nav-pills .nav-link.active {
    background-color: #fff;
    color: #0C2340;
    border-color: #fff;
    font-weight: bold;
}

.tab-num {
    opacity: 0.6;
    margin-right: 5px;
    font-size: 0.9em;
}

/* =========================================
   2. SLIDER & CARD STYLES
   ========================================= */

/* --- SLIDER CONTAINER --- */
.peek-slider {
    position: relative;
    width: 100%;
    overflow: hidden; /* Hides vertical overflow */
}

.peek-track {
    display: flex;
    gap: 24px;
    padding: 8px 4px;
    
    /* SCROLL BEHAVIOR (Enables Swipe) */
    overflow-x: auto; 
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    
    /* Hide Scrollbar */
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.peek-track::-webkit-scrollbar {
    display: none;
}

/* --- INDIVIDUAL SLIDE --- */
.peek-slide {
    /* DESKTOP: 78% width lets the next slide peek in from right */
    flex: 0 0 78%; 
    scroll-snap-align: center;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* --- CARD DESIGN --- */
.card-custom {
    min-height: 450px; 
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    width: 100%; /* FIX: Changed from fixed 1100px to 100% to fit the slide */
}

.bg_secondry_soft {
    background-color: #FFF5E6; /* Soft Orange/Cream */
}

/* --- IMAGE HANDLING --- */
.object-fit-cover {
    object-fit: contain;
    height: 100%;
    max-height: 500px; 
    width: 100%;
    padding: 5px; 
}

/* Add this to your style.css */
.img-top {
    /* First value is horizontal (center), second is vertical (top) */
    object-position: center top !important; 
}

/* --- SLIDER CONTROLS (Arrows) --- */
.peek-controls {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: flex;
    gap: 10px;
    z-index: 2;
    pointer-events: none; /* Let clicks pass through */
}

.peek-btn {
    pointer-events: auto;
    border: none;
    /* background: rgba(0, 0, 0, 0.5); */
	background: #FF6600;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
    cursor: pointer;
	box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.peek-btn:hover {
    /* background: rgba(0, 0, 0, 0.7); */
	background: var(--black_transparent_dark);
    transform: translateY(-2px);
}


/* =========================================
   3. MOBILE RESPONSIVE STYLES
   ========================================= */

/* --- TABLETS (Between 768px and 991px) --- */
@media (max-width: 991.98px) {
    .peek-slide {
        flex: 0 0 88%; /* Slightly wider card on tablets */
    }
}


/* =========================================
   3. MOBILE RESPONSIVE STYLES (STRICT UPDATE)
   ========================================= */

/* --- TABLETS (Between 768px and 991px) --- */
@media (max-width: 991.98px) {
    .peek-slide {
        flex: 0 0 88%; 
    }
}

/* --- MOBILE PHONES (Below 768px) --- */
@media (max-width: 767.98px) {
    
    /* 1. Track Adjustments */
    .peek-track {
        gap: 15px;
        padding-bottom: 0; 
    }

    /* 2. Slide Width (90% to see next card peeking) */
    .peek-slide {
        flex: 0 0 100%; 
        scroll-snap-align: center; 
    }

    /* 3. CARD LAYOUT: Image Top, Text Bottom */
    .card-custom {
        min-height: auto;
        height: 100%;
        border-radius: 20px; 
    }

    .card-custom .row {
        flex-direction: column; /* Flips Image to Top */
    }

    /* 4. IMAGE STYLING */
    .card-custom .col-md-6 {
        height: 200px; 
        flex: 0 0 auto;
        width: 100%;
    }

    .object-fit-cover {
        object-fit: cover !important; 
        height: 100% !important;
        width: 100% !important;
        padding: 5px !important; 
        border-radius: 20px !important; 
        min-height: 0 !important;
        max-height: none !important;
    }

	.img-top-1 {
		/* First value is horizontal (center), second is vertical (top) */
		object-position: center top !important; 
		min-height: 220px !important;
	}

	.img-top-2 {
		/* First value is horizontal (center), second is vertical (top) */
		object-position: center top !important; 
		min-height: 225px !important;
	}

	.img-top-4 {
		/* First value is horizontal (center), second is vertical (top) */
		object-position: center top !important; 
		/* min-height: 225px !important; */
	}

    /* 5. TEXT CONTENT STYLING (REDUCED SIZES) */
    .col-lg-6.p-5 {
        padding: 1.25rem !important; /* Smaller padding around text */
    }
    
    /* Make the Name (Heading) Smaller */
    .display-6 {
        font-size: 1.4rem !important; /* Reduced from ~2rem */
        line-height: 1.2;
        margin-bottom: 1rem !important;
    }

    /* Make the Paragraph Text Smaller */
    .fs-5 {
        font-size: 0.70rem !important; /* Reduced from 1.25rem to normal reading size */
        line-height: 1.5;
        margin-bottom: 1rem !important;
    }

    /* Make the Badges Smaller */
    .badge {
        font-size: 0.75rem !important; /* Smaller text inside badge */
        padding: 0.4em 0.8em !important;
    }

   
    
    /* Adjust Wrapper spacing for badges */
    .d-flex.gap-2 {
        gap: 0.25rem !important; /* Tighter gap between badges */
        margin-bottom: 0.75rem !important;
    }

    /* 6. NAVIGATION ARROWS (Restored on Right Side) */
    /* .peek-controls {
        display: flex; 
        position: absolute;
        top: 50%;
        right: 0; 
        transform: translateY(-90%);
        margin-top: 0;
        padding-right: 10px; 
        width: auto;
        z-index: 10;
        pointer-events: none; 
    } */
	.peek-controls {
	display: flex; 
        position: absolute;
        
        /* Position at Top Right */
        top: 25px;       /* Distance from the top edge of the slider */
        right: 20px;     /* Distance from the right edge */
        bottom: auto;    /* Clear any bottom positioning */
        
        /* Remove the centering transform used on desktop */
        transform: none; 
        
        margin-top: 0;
        padding-right: 0; 
        width: auto;
        z-index: 10;     /* Ensures it sits ON TOP of the image */
        pointer-events: none;
	}

    .peek-btn {
        pointer-events: auto; 
        width: 32px;
        height: 32px;
        /* background: rgba(0, 0, 0, 0.6);  */
        backdrop-filter: blur(4px);
    }
}

/* Target devices smaller than large desktops (Tablets/Tablets Landscape/Mobile) */
@media (max-width: 767.98px) {
    .peek-controls {
        display: none !important;
    }

    /* --- PAGINATION DOTS CONTAINER --- */
.peek-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;           /* Space between dots */
    margin-top: 20px;   /* Space from the cards */
}

/* --- THE DOTS (Inactive State) --- */
.peek-dot {
    width: 10px;
    height: 10px;
    background-color: #E0E0E0; /* Light Grey */
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth spring animation */
}

/* --- ACTIVE DOT (The Expanding Pill) --- */
.peek-dot.active {
    width: 30px;        /* Stretches width */
    background-color: #FF6600; /* Your Brand Orange */
    border-radius: 10px; /* Keeps edges rounded */
}

/* --- OPTIONAL: Hide dots on Desktop if you only want them on Mobile --- */
/* Uncomment below if you ONLY want dots on small screens */
/*
@media (min-width: 992px) {
    .peek-dots { display: none; }
}
*/
   
}








/* =========================================
   TEAM SECTION STYLES (JS Scroll Version)
   ========================================= */

/* --- Colors --- */
.text_primary_dark { color: #0C2340; }
.text_stroke_orange { color: #FF6600; }

/* --- WRAPPER (The Window) --- */
.marquee-wrapper {
    width: 100%;
    /* Enables native scrolling */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;    /* Keeps items in a line */
    position: relative;
    padding: 20px 0;

    /* Hide scrollbars */
    -ms-overflow-style: none;
    scrollbar-width: none;

    /* SMOOTH SCROLLING FOR MOBILE */
    -webkit-overflow-scrolling: touch;
}
.marquee-wrapper::-webkit-scrollbar {
    display: none;
}

/* --- TRACK (The Content) --- */
.marquee-track {
    display: inline-flex;   /* Fits content width */
    gap: 24px;
    padding-left: 12px;     /* Small buffer */
    /* Note: Animation property removed to allow JS control */
}

/* --- CARD DESIGN --- */
.team-card-overlay {
    position: relative;
    width: 280px;       /* Desktop Width */
    height: 380px;      /* Tall Portrait */
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;     /* Do not squish */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    cursor: grab;
    background: #000;
    transition: transform 0.3s ease;

    /* Fix for Safari flickering during JS scroll */
    transform: translateZ(0);
}

.team-card-overlay:active {
    cursor: grabbing;
}

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

/* --- INNER CARD STYLING --- */
.card-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.5s ease;
}
.team-card-overlay:hover .card-bg-img {
    transform: scale(1.05);
}

.card-content {
    position: absolute;
    bottom: 0; left: 0; width: 100%; padding: 20px;
    /* Darker gradient as requested */
    background: linear-gradient(to top, rgba(12, 35, 64, 1.0) 0%, rgba(12, 35, 64, 0.7) 70%, transparent 100%);
    display: flex; justify-content: space-between; align-items: flex-end;
    white-space: normal; /* Allow text inside card to wrap normally */
}

/* --- Add/Replace these rules in your CSS --- */

/* Wrapper to align icon and text horizontally */
.education-wrapper {
    display: flex;
    align-items: center; /* Ensures icon is centered vertically with text */
    margin-bottom: 8px;  /* Space between education block and badges */
    opacity: 0.9;        /* Slight transparency for the whole block */
}

/* The new icon styling */
.edu-icon {
    color: #FF6600; 
    /* color: #fff;      */
    font-size: 0.9rem;   /* Match icon size to text */
    margin-right: 8px;   /* Space between icon and text */
}

/* The education text styling (Adjusted) */
.member-education {
    display: block;
    font-size: 0.8rem;
    color: #fff;         /* White text for better readability against dark bg */
    font-weight: 400;
    letter-spacing: 0.5px;
    /* font-style: italic;  <-- Optional: Uncomment if you want italic text */
}

.text-area { flex: 1; }
.member-name { margin: 0; font-size: 1.5rem; color: #fff; font-weight: 600; line-height: 1.2; margin-bottom: 8px; }

.achievements-list { display: flex; flex-wrap: wrap; gap: 5px; }
.ach-badge { font-size: 0.75rem; font-weight: 500; color: #fff; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.15); padding: 3px 8px; border-radius: 4px; }

.brand-badge { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.brand-badge img { width: 30px; height: auto; object-fit: contain; border-radius: 50%; }

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 767.98px) {
    .marquee-track { gap: 16px; }
    .team-card-overlay { width: 240px; height: 320px; border-radius: 12px; }
    .member-name { font-size: 1.2rem; }
}


/* --- GRID OVERRIDES FOR STATIC SECTION --- */
#Academics .team-card-overlay {
    width: 100%;       /* Fill the Bootstrap column */
    height: 400px;     /* Taller height for grid display */
    margin-bottom: 0;  /* Reset margins if any */
    cursor: default;   /* Optional: Standard cursor if not dragging */
}

/* Ensure images cover the area perfectly */
#Academics .card-bg-img {
    height: 100%;
}



/* --- OUR NEWS SECTION STYLES Home--- */

.news-logo {
    max-width: 200px;  /* Control maximum width */
    height: 100px;      /* Fixed height for consistency */
    object-fit: contain; /* Ensure logo doesn't stretch */
    
    /* Make it look like the reference (black/grey initially) */
    filter: grayscale(100%) opacity(0.7); 
    transition: all 0.4s ease;
    cursor: pointer;
}

.news-logo:hover {
    /* Bring back color on hover */
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1); /* Slight zoom effect */
}

/* Swiper Pagination Styling (The dots at the bottom) */
.newsSwiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: #000;
    opacity: 0.2;
    margin: 0 6px !important;
}

.newsSwiper .swiper-pagination-bullet-active {
    background-color: var(--col_primary, #ff6600); /* Your GKP Orange */
    opacity: 1;
    width: 30px; /* Stretch active dot */
    border-radius: 10px;
}



/* ==================== GKP HORIZONTAL TIMELINE ==================== */

.gkp-timeline {
    position: relative;
    padding: 20px 0;
    overflow: hidden;
}

/* --- Navigation Container --- */
.timeline-nav {
    position: relative;
    margin: 0 auto;
    max-width: 900px;
    padding-top: 40px;
}

/* --- The Background Grey Line --- */
.timeline-line {
    position: absolute;
    top: 90px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #e9ecef;
    z-index: 0;
    border-radius: 4px;
}

/* --- The Colored Progress Line --- */
.timeline-line-filled {
    position: absolute;
    top: 90px;
    left: 0;
    width: 0%; /* JS updates this */
    height: 4px;
    background-color: var(--col_primary, #ff6600);
    z-index: 1;
    border-radius: 4px;
    transition: width 0.6s ease;
}

/* --- The Interactive Dots Wrapper --- */
.timeline-dots {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
}

/* --- Individual Dot Item --- */
.timeline-dot {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    width: 80px; /* Desktop width */
    transition: all 0.3s ease;
}

/* Year Text */
.timeline-dot .year {
    font-size: 1.25rem;
    color: #adb5bd;
    margin-bottom: 15px;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* The Dot Circle */
.timeline-dot .dot {
    width: 15px;
    height: 15px;
    background-color: #fff;
    border: 4px solid #adb5bd;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 0 0 4px #fff;
}

/* --- ACTIVE STATE --- */
.timeline-dot.active .year {
    color: var(--col_primary, #ff6600);
    transform: scale(1.2);
    font-weight: bold;
}

.timeline-dot.active .dot {
    background-color: var(--col_primary, #ff6600);
    border-color: var(--col_primary, #ff6600);
    transform: scale(1.3);
    box-shadow: 0 0 0 4px #fff, 0 0 15px rgba(247, 163, 0, 0.4);
}

.timeline-dot:hover .year {
    color: #333;
}

/* Content Pane Animation */
.timeline-pane {
    animation: fadeIn 0.6s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==================== MOBILE RESPONSIVENESS (< 768px) ==================== */
@media (max-width: 768px) {
    
    .timeline-nav {
        padding-top: 20px; /* Reduce top padding */
        overflow: visible; /* Disable scroll */
    }

    /* 1. Fit Dots to Screen Width */
    .timeline-dots {
        width: 100%;
        min-width: auto; /* Remove force scroll */
        padding: 0 10px; /* Small side padding */
    }

    /* 2. Shrink Individual Items */
    .timeline-dot {
        width: auto; /* Auto width to fit flex */
        flex: 1;     /* Distribute space equally */
    }

    /* 3. Smaller Text and Tighten Gap */
    .timeline-dot .year {
        font-size: 0.9rem; /* Smaller font */
        margin-bottom: 8px; /* Closer to dot */
    }

    /* 4. Smaller Dots */
    .timeline-dot .dot {
        width: 12px;
        height: 12px;
        border-width: 3px;
        box-shadow: 0 0 0 2px #fff; /* Smaller white ring */
    }

    /* 5. Adjust Line Position */
    /* Because text and dots are smaller, the line needs to move up */
    .timeline-line, 
    .timeline-line-filled {
        top: 55px; /* Moved up from 90px to match new mobile height */
        width: 100%; /* Full width */
        left: 0;
    }
    
    /* 6. Active State Mobile Adjustment */
    .timeline-dot.active .year {
        transform: scale(1.1); /* Less zoom on mobile to prevent overlap */
    }
}


/* Strong Text Shadow for Video Backgrounds */
.text-shadow-pop {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6), 
                 0px 0px 20px rgba(0, 0, 0, 0.8); 
}

/* --- RESPONSIVE HERO SECTION --- */

/* --- RESPONSIVE HERO SECTION --- */

.hero-section {
    height: 80vh; 
    min-height: 400px;
}

.hero-video {
    height: 100%;
}

/* 1. Desktop Text Overlay (Full Height to allow Flex centering) */
.hero-text-overlay {
    height: 100%; 
}

.hero-title {
    font-size: 5rem; 
    letter-spacing: 2px;

}

/* --- MOBILE RESPONSIVENESS (< 768px) --- */
@media (max-width: 768px) {
    
    .hero-section {
        height: 40vh; 
        min-height: 250px;
    }

    .hero-video {
        height: 100% !important; /* Force it to fill the 300px/50vh container */
        object-fit: cover; /* Ensures it covers without squashing */
    }

    /* 2. Mobile Text Overlay (Remove h-100) */
    .hero-text-overlay {
        height: auto; /* Container shrinks to fit text */
        
        /* TRICK: Keep it centered without h-100 */
        top: 50% !important;
        transform: translateY(-50%);
    }

    .hero-title {
        font-size: 35px; 
        letter-spacing: 1px;
    }
}