/* Debugging Tool: Highlights the element that is too wide */

/*
* {
    outline: 1px solid red !important;
}
*/    

/*--------------------------------------------------------------------- File Name: style.css ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/

@import url(animate.min.css);
@import url(normalize.css);
@import url(icomoon.css);
@import url(css/font-awesome.min.css);
@import url(meanmenu.css);
@import url(owl.carousel.min.css);
@import url(swiper.min.css);
@import url(slick.css);
@import url(jquery.fancybox.min.css);
@import url(jquery-ui.css);
@import url(nice-select.css);

/*--------------------------------------------------------------------- skeleton ---------------------------------------------------------------------*/

* {
    box-sizing: border-box !important;
    /*transition: ease all 0.5s;*/
}

html {
    scroll-behavior: smooth;
}

body {
    color: #666666;
    font-size: 14px;
    font-family: "Rajdhani", "sans-serif";
    line-height: 1.80857;
    font-weight: normal;
    overflow-x: hidden;
}

a {
    color: #1f1f1f;
    text-decoration: none !important;
    outline: none !important;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    letter-spacing: 0;
    font-weight: bold;
    position: relative;
    padding: 0 0 10px 0;
    font-weight: normal;
    line-height: normal;
    color: #111111;
    margin: 0;
}

h1 {
    font-size: 3.5vw;
}

h2 {
    font-size: 2.5vw;
}

h3 {
    font-size: 1.8vw;
}

h4 {
    font-size: 1.5vw;
}

h5 {
    font-size: 1vw;
}

h6 {
    font-size: 0.8vw;
}

*,
*::after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: #212121;
    text-decoration: none!important;
    opacity: 1
}

button:focus {
    outline: none;
}

ul,
li,
ol {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

p {
    margin: 10px;
    font-weight: 300;
    /*font-size: 1.2vw; */
    /*line-height: 24px;*/
}

a {
    color: #222222;
    text-decoration: none;
    outline: none !important;
}

a,
.btn {
    text-decoration: none !important;
    outline: none !important;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

img {
    max-width: 100%;
    height: auto;
}

 :focus {
    outline: 0;
}

.paddind_bottom_0 {
    padding-bottom: 0 !important;
}

.btn-custom {
    margin-top: 20px;
    background-color: transparent !important;
    border: 2px solid #ddd;
    padding: 12px 40px;
    font-size: 16px;
}

.lead {
    font-size: 18px;
    line-height: 30px;
    color: #767676;
    margin: 0;
    padding: 0;
}

.form-control:focus {
    border-color: #ffffff !important;
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}

.navbar-form input {
    border: none !important;
}

.badge {
    font-weight: 500;
}

blockquote {
    margin: 20px 0 20px;
    padding: 30px;
}

button {
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background-color: transparent;  /*@shan added background color transparent*/
}

/*.full {
    float: left;
    width: 100%;
} commented out by shan according to chatgpt as it break bootstrap*/

.layout_padding {
    padding-top: 100px;
    padding-bottom: 0px;
}

.padding_0 {
    padding: 0px;
}


/* header section start -------------------------------------------------*/

.header_section {
    width: 100%;
    float: left;
    background-color: #6cbd15;
    height: auto;
    background-size: 100%;
}

.bg-light {
    background-color: transparent !important;
}

.navbar-light .navbar-nav .nav-link {
    color: #fff;
    font-size: 18px;
    padding: 10px 15px;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: #252525;
}

.navbar-brand img {
    height: 60px;
    width: auto;
}

/* --- NESTED DROPDOWN LOGIC --- */

/* Allow submenus to appear on hover for Desktop */
@media (min-width: 992px) {
    .dropdown-submenu {
        position: relative;
    }

    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: -100%; /* Adjust to -100% to push it to the left so it doesn't go off-screen */
        margin-top: -1px;
        display: none;
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
    
    /* Reverse direction for better visibility if needed */
    .dropdown-menu-right .dropdown-submenu .dropdown-menu {
        left: auto;
        right: 100%;
        margin-right: 0.5rem;
    }
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .dropdown-submenu .dropdown-menu {
        position: static;
        display: block;
        border: none;
        background: rgba(0,0,0,0.05);
        margin-left: 1rem;
    }
}
/* header section end --------------------------------------------------------*/


/* banner section start -----------------------------------------------------*/

/* banner section start */
.banner_section {
    width: 100%;
    float: left;
    background-image: url(../images/banner-bg.png);
    height: auto;
    background-size: cover; /* Changed from 100% to cover to prevent gaps */
    background-repeat: no-repeat;
    background-position: center;
    padding: 60px 0px; /* Reduced padding for mobile */
    z-index: 1;
    position: relative;
}

.banner_section::after {
    content: '';
    position: absolute;
    width: 100%;
    max-width: 750px;
    height: 100%;
    left: 0px;
    background-color: rgba(10, 10, 9, 0.8);
    top: 0px;
    z-index: -1;
    /* We disable the clip-path on mobile because it cuts off text */
    clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%);
}

.anek-malayalam-banner_taital {
  font-family: "Anek Malayalam", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings:
    "width" 100;
}
.banner_taital {
    width: 100%; /* Full width on mobile */
    font-size: 32px; /* Smaller font for small screens */
    color: #ffffff;
    font-weight: bold;
    line-height: 40px; /* Adjusted line height */
    margin-bottom: 10px;
    font-family: 'Anek Malayalam';
}
.banner_sub_taital{
     width: 100%; /* Full width on mobile */
    font-size: 28px; /* Smaller font for small screens */
    color: #ffffff;
    font-weight: bold;
    line-height: 30px; /* Adjusted line height */
    margin-bottom: 10px;
    font-family: 'Anek Malayalam';
}

.banner_text {
    width: 100%; /* Full width on mobile */
    font-size: 15px;
    color: #ffffff;
    margin-bottom: 10px;
    letter-spacing: 2px;
    word-spacing: 5px;
}
.banner_text_welcome{
    width: 100%; /* Full width on mobile */
    font-size: 12px;
    color: #bebdbd;
    margin-bottom: 10px;
}

.btn_main {
    width: 100%;
    display: flex;
    flex-wrap: wrap; /* Critical: allows buttons to stack on tiny screens */
}

.started_bt {
    width: 160px; /* Slightly smaller for mobile */
    margin-right: 10px;
    margin-top: 15px;
}

.started_bt a {
    display: block;
    padding: 10px;
    color: #fefefd;
    background-color: #6cbd15;
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
}
.started_bt a:hover {
    display: block;
    padding: 10px;
    color: #6cbd15;
    background-color: #fefefe;
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
}

/* Indicators fix: -110px is too far and pushes page height */
.carousel-indicators {
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    bottom: -50px; /* Bring it closer */
    width: 100%;
    justify-content: center;
}

/* --- TABLET & DESKTOP ADJUSTMENTS --- */
@media (min-width: 768px) {
    .banner_section {
        padding: 150px 0px;
    }
    .banner_taital {
        width: 60%;
        font-size: 60px;
        line-height: 70px;
    }
    .banner_text {
        width: 75%;
        font-size: 18px;
    }
    .started_bt {
        width: 180px;
        margin-top: 50px;
    }
}

/* --- LARGE SCREEN FIX --- */
@media (min-width: 1200px) {
    .banner_taital {
        font-size: 70px;
        line-height: 80px;
    }
}

/* banner section end ---------------------------------------------------------------------*/

/* who we are (in about page) section start -------------------------------------------------------*/
/* --- About Us: Who We Are (Light Background) --- */

.about-us-wrapper {
    overflow: hidden; /* Ensures special grid borders don't spill */
}

/* Subtitle "Our Story" */
.about-text-col .section-top-subtitle {
    color: #fd680c; /* Orange matching main team style */
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

/* "WE ARE" Highlight */
.header-highlight {
    color: #4b5961; /* Green matching main team style */
}

/* Descriptive Text */
.about-description-para {
    color: #6c757d; /* Clear grey description */
    font-size: 16px;
    line-height: 1.8;
}

/* --- Stat Counter --- */
.stat-counter-grid {
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
    padding: 25px 0;
}

.stat-counter-grid .stat-item h3 {
    font-size: 40px;
    font-weight: 700;
    color: #4b5961; /* Main number color */
    margin: 0;
}

.stat-counter-grid .stat-item p {
    font-size: 13px;
    text-transform: uppercase;
    color: #6c757d;
    letter-spacing: 1px;
    margin: 5px 0 0;
}

/* Stat Divider Lines */
.stat-divider {
    width: 1px;
    height: 50px;
    background-color: #e9ecef;
    align-self: center;
    margin: 0 10px;
}

/* --- The Photo Grid Layout --- */
.grid-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    position: relative;
}

/* General Image Grid Rules */
.grid-layout img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* (Grid-Tall): Team Picture on Left */
.active-grid-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    aspect-ratio: 9/12;
}

/* (Grid-Tall): Green Special Border Radius */
.grid-with-border img {
    border: 1px solid #4b5961;
    border-radius: 100px 10px 100px 10px;
    padding: 10px;
    background-color: white; /* Needed for padding/inset border look */
}

/* (Grid-Small): Active Picture 1 (Top Right) */
.active-grid-2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    aspect-ratio: 16/10;
}

/* (Grid-Small): Active Picture 2 (Bottom Right) */
.active-grid-3 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    aspect-ratio: 16/10;
}

/* Standard Border Radius for Small active photos */
.rounded-10 {
    border-radius: 10px;
}

/* --- Responsive Layout Rules --- */
@media (max-width: 991px) {
    .about-text-col {
        text-align: center;
    }
    .stat-counter-grid {
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .grid-layout {
        gap: 10px;
    }
    /* Simple mobile flow: Big photo first, then others follow */
    .active-grid-1, .active-grid-2, .active-grid-3 {
        grid-column: 1 / 3;
        grid-row: auto;
        aspect-ratio: 16/10;
    }
    .active-grid-1 {
        aspect-ratio: 1 / 1; /* Make team photo square on mobile for better fit */
    }
    /* Small mobile adjustment: Reduce stat lines on mobile */
    .stat-divider { display: none; }
}

/* who we are (in about page) section end -------------------------------------------------------*/

/* about section start -------------------------------------------------------*/

/* --- Vertical Timeline with Top-Left Uniform Images --- */

.vertical-timeline {
    list-style: none;
    padding: 0;
    position: relative;
    margin-top: 20px;
}

.vertical-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 0;
    height: 100%;
    width: 2px;
    background: #444; /* Line color */
}

.timeline-item {
    position: relative;
    padding-left: 35px;
    margin-bottom: 30px;
}

/* Timeline Dots */
.t-dot {
    position: absolute;
    left: 0;
    top: 15px;
    width: 16px;
    height: 16px;
    background: #444;
    border-radius: 50%;
    z-index: 2;
    border: 3px solid #1a1a1a; /* Matches your background */
}

.t-dot:hover {
    position: absolute;
    left: 0;
    top: 15px;
    width: 16px;
    height: 16px;
    background: #6cbd15;
    border-radius: 50%;
    z-index: 2;
    border: 3px solid #1a1a1a; /* Matches your background */
}

.active-dot {
    
    box-shadow: 0 0 8px rgba(108, 189, 21, 0.6);
}

/* Event Card */
.t-content-card {
    display: flex;
    align-items: flex-start; /* Aligns items to the top */
    gap: 15px;
    background: #252525;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #333;
}
.t-content-card:hover {
    display: flex;
    align-items: flex-start; /* Aligns items to the top */
    gap: 15px;
    background: #000000;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #6cbd15;
}

/* Uniform Thumbnail Styling */
.t-thumb-box {
    flex-shrink: 0; /* Prevents image from shrinking */
    width: 70px;
    height: 70px;
    border-radius: 6px;
    overflow: hidden;
    background: #111;
    border: 1px solid #444;
}

.t-thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* CRITICAL: Makes images uniform regardless of original size */
    display: block;
}

/* Text Details */
.t-details {
    flex-grow: 1;
}

.t-date {
    display: block;
    font-size: 11px;
    color: #6cbd15;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.t-details h4 {
    font-size: 17px;
    color: #ffffff;
    margin: 0 0 5px 0;
    font-weight: 600;
}

.t-details p {
    font-size: 14px;
    color: #aaaaaa;
    line-height: 1.5;
    margin: 0;
}

/* Responsive: Smaller screens adjustments */
@media (max-width: 480px) {
    .t-content-card {
        flex-direction: column; /* Stack image and text on very small phones */
    }
    .t-thumb-box {
        width: 60px;
        height: 60px;
    }
}

/* about section end --------------------------------------------------------------*/


/* games section start */

.members_section {
    width: 100%;
    float: left;
    padding: 10px 0px;
    background-color: #f6f6f6;
    
}

.hover01 figure img {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.hover01 figure:hover img {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}

.column {
    margin: 15px 0px 0;
    padding: 0;
}

.column:last-child {
    padding-bottom: 30px;
}

.column::after {
    content: '';
    clear: both;
    display: block;
}

figure {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
}

figure:hover+span {
    bottom: -36px;
    opacity: 1;
}

.basketball_text {
    width: 100%;
    float: left;
    text-align: center;
    color: #fefefc;
    font-size: 22px;
    padding-top: 20px;
    text-transform: uppercase;
}

.lorem_text {
    width: 100%;
    float: left;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    color: #fefefc;
}

.readmore_bt {
    width: 170px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    padding-top: 55px;
}

.readmore_bt a {
    width: 100%;
    float: left;
    font-size: 18px;
    background-color: #6cbd15;
    color: #fefefc;
    text-align: center;
    padding: 10px;
    text-transform: uppercase;
}

.readmore_bt a:hover {
    color: #fefefc;
    background-color: #252525;
}

/* games section end */


/* client section start */

.client_section {
    width: 100%;
    float: left;
}
.client_taital{
    width: 100%;
    float: left;
    font-size: 40px;
    color: #393938;
    font-weight: bold;
    text-align: center;
}

.customer_section_2 {
    width: 100%;
    float: left;
    padding-top: 100px;
}

.box_main {
    width: 90%;
    float: right;
    background-color: #ffffff;
    padding: 0px 50px 0px 50px;
    box-shadow: 0px 0px 18px -6px;
    margin-bottom: 10px;
}

.customer_text {
    width: 100%;
    font-size: 14px;
    color: #737372;
    margin: 0 auto;
}

.quick_icon {
    text-align: right;
    padding-bottom: 80px;
}

.customer_main {
    width: 100%;
    display: flex;
    margin-top: 20px;
}

.customer_left {
    width: 30%;
    float: left;
}

.customer_right {
    width: 100%;
    float: left;
}

.customer_name {
    width: 100%;
    float: left;
    font-size: 26px;
    font-weight: bold;
    color: #393938;
}
.enim_text {
    width: 100%;
    float: left;
    font-size: 16px;
    color: #1c1c1c;
    margin: 0px;
    font-family: 'Poppins', sans-serif;
}

.customer_img {
    position: absolute;
    top: -60px;
    left: 60px;
}

#main_slider a.carousel-control-prev {
    left: -90px;
    top: 200px;
}

#main_slider a.carousel-control-next {
    right: -90px;
    top: 200px;
}

#main_slider .carousel-control-next,
#main_slider .carousel-control-prev {
    width: 55px;
    height: 55px;
    opacity: 1;
    font-size: 30px;
    color: #fefefc;
    background-color: #6cbd15;
    border-radius: 100px;
    margin: 0 auto;
    text-align: center;
}

#main_slider .carousel-control-next:focus,
#main_slider .carousel-control-next:hover,
#main_slider .carousel-control-prev:focus,
#main_slider .carousel-control-prev:hover {
    color: #fefefc;
    background-color: #252525;
}

/* client section end */

/* contact section start */

.contact_section {
    width: 100%;
    float: left;
    padding-bottom: 90px;
}

.contact_taital {
    width: 100%;
    float: left;
    font-size: 40px;
    color: #393938;
    font-weight: bold;
}

.contact_text {
    width: 100%;
    float: left;
    text-align: center;
    font-size: 16px;
    margin: 0px;
    color: #252424;
}

.contact_section_2 {
    width: 100%;
    float: left;
    padding-top: 55px;
}

.padding_right_0 {
    padding-right: 0px;
}

.mail_section_1 {
    width: 84%;
    float: right;
}

.mail_text {
    width: 100%;
    float: left;
    font-size: 16px;
    color: #4f4e4e;
    background-color: #ffff;
    padding: 8px 15px;
    margin-top: 20px;
    border: 0px;
    box-shadow: 0px 0px 8px 8px #f2f2f1;
    font-family: 'Poppins', sans-serif;
}

.massage-bt {
    color: #4f4e4e;
    width: 100%;
    height: 110px;
    font-size: 18px;
    background-color: #ffff;
    padding: 40px 15px 0px 15px;
    height: 110px;
    margin-top: 20px;
    border: 0px;
    box-shadow: 0px 0px 8px 8px #f2f2f1;
    font-family: 'Poppins', sans-serif;
}

.send_bt {
    width: 170px;
    margin: 0 auto;
    text-align: center;
}

.send_bt a {
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: #fefefc;
    background-color: #6cbd15;
    padding: 12px;
    text-transform: uppercase;
    margin-top: 30px;
    display: block;
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
}

.send_bt a:hover {
    color: #fefefc;
    background-color: #252525;
}

.map_main {
    width: 100%;
    float: left;
}


.margin_top90 {
    margin-top: 90px;
}

/*sample testing from web shan--------------------------------------------------*/

/*sample testing dropdown menu*/
.dropdown-submenu {
  position: relative;
  background: none;
}

.dropdown-submenu .dropdown-menu {
    
  top: 0;
  left: 100%;
  margin-top: -1px;
}

.left-about-section{
    padding-left: 10px;
    align-items: start;
}

/*test-timeline from codepen start*/

@import url("https://fonts.googleapis.com/css2?family=PT+Sans&display=swap");

/*test-timeline image*/
.timeline-image{
    width: 100px;
    aspect-ratio: 4/3;
    padding-left: 0;
    margin-left: 0px;
    margin-top: 0px;
    position: relative;
    margin: 5 auto;
    box-shadow: 1px 1px 20px rgba(119, 119, 119, 0.5);
    z-index: 999;
    align-items: left;
    
}



.container-timeline {
  background: #232931;
  width: 90%;
  height: 90%;
  margin: 0 auto;
  position: relative;
  margin-top: 10%;
  margin-left: 10%;
  box-shadow: 2px 5px 20px rgba(119, 119, 119, 0.5);
}

.leftbox {
  top: -5%;
  left: 5%;
  position: absolute;
  width: 15%;
  height: 110%;
  background-color: #14bf0b;
  opacity: 0.7;
  box-shadow: 3px 3px 15px rgba(119, 119, 119, 0.5);
}

.nav {
  margin: 2.6em auto;
}

.nav a {
  list-style: none;
  padding: 35px;
  color: #232931;
  font-size: 1.1em;
  display: block;
  transition: all 0.5s ease-in-out;
}

@media (max-width: 768px) {
    .rightbox {
        padding: 0;
    }
}

.rb-container {
  font-family: "PT Sans", sans-serif;
  width: 100%;
  margin: auto;
  display: block;
  position: relative;
}

.rb-container ul.rb {
  margin: 2.5em 0;
  padding: 0;
  display: inline-block;
}

.rb-container ul.rb li {
  list-style: none;
  margin: auto;
  margin-left: 10em;
  min-height: 50px;
  border-left: 1px dashed #fff;
  padding: 0 0 50px 30px;
  position: relative;
}

.rb-container ul.rb li:last-child {
  border-left: 0;
}

.rb-container ul.rb li::before {
  position: absolute;
  left: -18px;
  top: -5px;
  content: " ";
  border: 8px solid rgba(255, 255, 255, 1);
  border-radius: 500%;
  background: #50d890;
  height: 20px;
  width: 20px;
  transition: all 500ms ease-in-out;
}

.rb-container ul.rb li:hover::before {
  border-color: #232931;
  transition: all 200ms ease-in-out;
}

ul.rb li .timestamp{
  color: #50d890;
  position: relative;
  width: 200px;
  font-size: 12px;
}

.item-title {
  color: #fff;
}

.container-3 {
  width: 5em;
  vertical-align: right;
  white-space: nowrap;
  position: absolute;
}

.container-3 input#search {
  width: 150px;
  height: 30px;
  background: #fbfbfb;
  border: none;
  font-size: 10pt;
  color: #262626;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  margin: 0.9em 0 0 23em;
  box-shadow: 3px 3px 15px rgba(119, 119, 119, 0.5);
}

.container-3 .icon {
  margin: 1.3em 3em 0 36em;
  position: absolute;
  width: 150px;
  height: 30px;
  z-index: 1;
  color: #4f5b66;
}

input::placeholder {
  padding: 5em 5em 1em 1em;
  color: #50d890;
}


/*test-timeline from codepen end----------------------------------------------------*/


/* Blog page full start--------------------------------------------------------------------------------*/

/* Global Reset */
* {
    box-sizing: border-box;
}

.blog_section {
    overflow-x: hidden; /* Safety net against horizontal scroll */
}

.heading-blog-page {
    text-align: center;
    font-weight: bold;
    font-size: 30px;
    color: #373737;
    margin-bottom: 40px;
}

/* Card Container */
.blog-card {
    display: flex;
    flex-direction: column;
    box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    width: 100%;
    height: 100%; /* Ensures all cards in a row are equal height */
    transition: all 0.3s ease;
}

.blog-card:hover .photo {
    transform: scale(1.1) rotate(2deg);
}

/* Media/Photo Section */
.blog-card .meta {
    position: relative;
    z-index: 0;
    height: 220px;
    overflow: hidden;
}

.blog-card .photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover; /* Better than 'contain' for card layouts */
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.4s ease;
}

/* Details Overlay */
.blog-card .details {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100%;
    margin: 0;
    padding: 20px;
    list-style: none;
    transition: left 0.3s;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    width: 100%;
}

.blog-card:hover .details {
    left: 0;
}

.blog-card .details li {
    padding: 5px 0;
}

/* Description Section */
.blog-card .description {
    padding: 1.5rem;
    background: #fff;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Ensures text area fills the card */
}

.blog-card .description h1 {
    line-height: 1.2;
    margin: 0;
    font-size: 1.25rem;
    font-weight: bold;
}

/* IMPORTANT: Link and Text Wrapping */
.blog-card .description p, 
.blog-card .description a {
    margin-top: 1rem;
    word-wrap: break-word; /* Fixes long URL overflow */
    overflow-wrap: anywhere; 
    word-break: break-word;
}

.blog-card .description p:first-of-type:before {
    content: "";
    position: absolute;
    height: 5px;
    background: #3b70fc;
    width: 35px;
    top: -10px;
    border-radius: 3px;
}

/* Share and Read More controls */
.share-and-readmore-container {
    margin-top: auto; /* Pushes buttons to the bottom of the card */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
}

.read-more-btn {
    color: #3b70fc;
    font-weight: bold;
    cursor: pointer;
}

/* Desktop Skew Effect */
@media (min-width: 640px) {
    .blog-card {
        flex-direction: row;
        min-height: 300px;
    }

    .blog-card .meta {
        flex-basis: 40%;
        height: auto;
    }

    .blog-card .description {
        flex-basis: 60%;
    }

    /* Skew Decor */
    .blog-card .description:before {
        transform: skewX(-3deg);
        content: "";
        background: #fff;
        width: 30px;
        position: absolute;
        left: -15px;
        top: 0;
        bottom: 0;
        z-index: -1;
    }
}

/*blog page card end----------------------------------------------*/


/*Read more section in blog post start----------------------------------------*/
/* Container for the text you want to truncate */
.expandable-text {
  max-height: 100px; /* Adjust this value to show more or less text */
  overflow: hidden;
  position: relative;
  transition: max-height 0.3s ease-out; /* Smooth expansion animation */
}


/* Fading effect at the bottom of the truncated text */
.fade-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.667), rgba(255, 255, 255, 0));
}

/* Style for the 'Read more' button */
.read-more-btn {
  display: block;
  margin-top: 10px;
  color: #0dfd31; /* Blue color for a clickable link */
  cursor: pointer;
  text-decoration: underline;
  text-align: right;
}

/* Class added by JavaScript to expand the text */
.blog-card.expanded .expandable-text {
  max-height: 5000px; /* Large value to ensure it expands fully */
}

/* Hide the fade effect when the text is expanded */
.blog-card.expanded .fade-overlay {
  display: none;
}

/*Read more section in blog post end----------------------------------------*/

/*Blog page share button start-------------------------------------*/
/* Container to hold the share button and read more link */
.share-and-readmore-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

/* Style for the share button icon */
.share-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #eb4d4d; /* A neutral color for the icon */
  font-size: 1.2rem;
  padding: 5px;
  transition: color 0.2s;
}

.share-btn:hover {
  color: #00ff08; /* Color on hover */
}

/* The read-more-btn style remains the same but its parent now uses flexbox */
.read-more-btn {
  color: #007bff;
  cursor: pointer;
  text-decoration: underline;
}

/*Blog page share button end----------------------------------------------*/

/*Blog page full end-----------------------------------------------------------------------------------*/

/*test-contact page start-------------------------------------------------------------*/

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
body {
  display: grid;
  
  
  
  
  
}
.carousel-contact {
  transform: perspective(1000px) rotateX(70deg);
  transform-style: preserve-3d;
  display: grid;
  place-items: center;
  animation: rotate 15s linear infinite;
  transition: all 1s;
  background-image: radial-gradient(circle at 50% 50%, #222 30%, transparent 40%);
}
.carousel-contact:hover {
  animation-play-state: paused;
}
.carousel-contact .cardb {
  display: grid;
  place-items: center;
  width: 190px;
  height: 225px;
  background-color: #1f1f1f;
  position: absolute;
  border-radius: 5px;
}
.carousel-contact .card {
  display: grid;
  place-items: center;
  width: 190px;
  height: 225px;
  background-color: #333;
  position: absolute;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  border-radius: 5px;
  -webkit-box-reflect: below 3px linear-gradient(transparent 75%, rgba(255,255,255,0.125));
}
.carousel-contact .card .img-contact {
  width: 180px;
  height: 100px;
  border-radius: 3px;
  margin-bottom: -10px;
  filter: brightness(0.9);
}
.carousel-contact .card p {
  font-size: 16px;
  margin-bottom: -5px;
}
.carousel-contact .card span {
  font-size: 12px;
  text-align: center;
  padding: 8px;
}
.c1 {
  padding: 0;
  transform-origin: center center;
  transform: rotateZ(45deg) rotateX(90deg) translateY(120px) translateZ(280px) rotateZ(180deg);
}
.c1 .img-contact {
  background-image: url("https://www.positive.news/wp-content/uploads/2020/10/RTS3EJTV-1800x0-c-center.jpg");
  background-size: 190px 190px;
}
.cb1 {
  padding: 0;
  transform-origin: center center;
  transform: rotateZ(45deg) rotateX(90deg) translateY(120px) translateZ(279px);
}
.c2 {
  padding: 0;
  transform-origin: center center;
  transform: rotateZ(90deg) rotateX(90deg) translateY(120px) translateZ(280px) rotateZ(180deg);
}
.c2 .img-contact {
  background-image: url("https://static.independent.co.uk/2024/01/22/22/01HMRE8MZR3YENEZYQEWMTM9WJ.jpg");
  background-size: 190px 190px;
}
.cb2 {
  padding: 0;
  transform-origin: center center;
  transform: rotateZ(90deg) rotateX(90deg) translateY(120px) translateZ(279px);
}
.c3 {
  padding: 0;
  transform-origin: center center;
  transform: rotateZ(135deg) rotateX(90deg) translateY(120px) translateZ(280px) rotateZ(180deg);
}
.c3 .img-contact {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Cristiano_Ronaldo_WC2022_-_01_%28cropped%29.jpg/250px-Cristiano_Ronaldo_WC2022_-_01_%28cropped%29.jpg");
  background-size: 190px 190px;
}
.cb3 {
  padding: 0;
  transform-origin: center center;
  transform: rotateZ(135deg) rotateX(90deg) translateY(120px) translateZ(279px);
}
.c4 {
  padding: 0;
  transform-origin: center center;
  transform: rotateZ(180deg) rotateX(90deg) translateY(120px) translateZ(280px) rotateZ(180deg);
}
.c4 .img-contact {
  background-image: url("https://cdn.vox-cdn.com/thumbor/5GuzXo20s1FYOMKNsm9cdHDlf-8=/0x0:4148x2905/1200x800/filters:focal(1808x608:2470x1270)/cdn.vox-cdn.com/uploads/chorus_image/image/71644757/1441228048.0.jpg");
  background-size: 190px 190px;
}
.cb4 {
  padding: 0;
  transform-origin: center center;
  transform: rotateZ(180deg) rotateX(90deg) translateY(120px) translateZ(279px);
}
.c5 {
  padding: 0;
  transform-origin: center center;
  transform: rotateZ(225deg) rotateX(90deg) translateY(120px) translateZ(280px) rotateZ(180deg);
}
.c5 .img-contact {
  background-image: url("https://www.esquire.com.au/wp-content/uploads/2024/06/1800x2400-Template-62-768x1024-1.jpg");
  background-size: 190px 190px;
}
.cb5 {
  padding: 0;
  transform-origin: center center;
  transform: rotateZ(225deg) rotateX(90deg) translateY(120px) translateZ(279px);
}
.c6 {
  padding: 0;
  transform-origin: center center;
  transform: rotateZ(270deg) rotateX(90deg) translateY(120px) translateZ(280px) rotateZ(180deg);
}
.c6 .img-contact {
  background-image: url("https://images2.minutemediacdn.com/image/upload/c_fill,w_720,ar_16:9,f_auto,q_auto,g_auto/shape/cover/sport/Supercup-FC-Barcelona-v-Espanyol-Barcelona-3073a55c82e1fbeec351008c2772e006.jpg");
  background-size: 190px 190px;
}
.cb6 {
  padding: 0;
  transform-origin: center center;
  transform: rotateZ(270deg) rotateX(90deg) translateY(120px) translateZ(279px);
}
.c7 {
  padding: 0;
  transform-origin: center center;
  transform: rotateZ(315deg) rotateX(90deg) translateY(120px) translateZ(280px) rotateZ(180deg);
}
.c7 .img-contact {
  background-image: url("https://ichef.bbci.co.uk/ace/standard/1248/cpsprodpb/e045/live/498703b0-3faa-11ef-ac18-e9e918866dc8.jpg");
  background-size: 190px 190px;
}
.cb7 {
  padding: 0;
  transform-origin: center center;
  transform: rotateZ(315deg) rotateX(90deg) translateY(120px) translateZ(279px);
}
.c8 {
  padding: 0;
  transform-origin: center center;
  transform: rotateZ(360deg) rotateX(90deg) translateY(120px) translateZ(280px) rotateZ(180deg);
}
.c8 .img-contact {
  background-image: url("https://www.idman.biz/media/2025/01/08/1920x1280/b9a65c20-2c2e-11ef-bb15-afcdc882be94.jpg?v=1736327533");
  background-size: 190px 190px;
}
.cb8 {
  padding: 0;
  transform-origin: center center;
  transform: rotateZ(360deg) rotateX(90deg) translateY(120px) translateZ(279px);
}
@media screen and (max-width: 992px) {
  .carousel {
    scale: 0.7;
  }
}
@-moz-keyframes rotate {
  to {
    transform: perspective(1000px) rotateX(70deg) rotateZ(360deg);
  }
}
@-webkit-keyframes rotate {
  to {
    transform: perspective(1000px) rotateX(70deg) rotateZ(360deg);
  }
}
@-o-keyframes rotate {
  to {
    transform: perspective(1000px) rotateX(70deg) rotateZ(360deg);
  }
}
@keyframes rotate {
  to {
    transform: perspective(1000px) rotateX(70deg) rotateZ(360deg);
  }
}

/* custom shan in contact page*/
.container-contact{
    margin-top: 300px;
    margin-bottom: 200px;
}

/*test-contact page end-------------------------------------------------------------*/



/*test-Membership page start-------------------------------------------------------------*/


/* Container & Section Base */
.committee-section {
  background-color: #fcfcfc;
  padding: 60px 0;
}

.section-main-title {
  font-weight: 800;
  text-transform: uppercase;
  color: #001d3d; /* Navy */
  letter-spacing: 1px;
}

.section-sub-main-title {
  font-weight: 500;
  text-transform: uppercase;
  color: #001d3d; /* Navy */
  letter-spacing: 1px;
}

.text-gold { color: #ffc107; }

.title-divider {
  width: 60px;
  height: 4px;
  background: #ffc107;
  margin: 15px auto 40px;
  border-radius: 2px;
}

/* The Card Design */
.member-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px 15px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  border: 1px solid #f0f0f0;
  height: 100%;
  
  /* ADDED THIS LINE FOR VERTICAL SPACING */
  margin-bottom: 20px; 
}

/* Elite cards for President/Secretary */
.member-card.elite {
  border-top: 4px solid #ffc107;
  padding: 30px 20px;
}

.member-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  border-color: #ffc107;
}

/* Image Wrapper (Fixed Size & Circular) */
.member-img-wrapper {
  width: 100px;
  height: 100px;
  margin: 0 auto 15px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.4s ease;
}

.member-card.elite .member-img-wrapper {
  width: 130px;
  height: 130px;
}

.member-card:hover .member-img-wrapper {
  transform: scale(1.1);
}

.member-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text Content */
.member-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 5px;
}

.member-role {
  font-size: 0.85rem;
  color: #777;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.5px;
}

/* Mobile Tweaks */
@media (max-width: 767px) {
  .member-img-wrapper {
    width: 80px;
    height: 80px;
  }
  .member-card.elite .member-img-wrapper {
    width: 100px;
    height: 100px;
  }
  .member-name { font-size: 0.95rem; }
  .member-role { font-size: 0.75rem; }
  .committee-section { padding: 40px 10px; }
}
/*test-Membership page end-------------------------------------------------------------*/

/*test our-team page Start-------------------------------------------------------------*/

/*our-team football section start---------------------------------------*/

.container-tournament{
  width: 100%;
  height: auto;
  background-color: #1c1c1c;/*
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%);*/

  
}
.banner-football{
    width: 100%;
    height: 20em;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url(../images/football-team-banner-cropped.jpg);
    /* THE FIX: Flexbox centering */
    display: flex;
    align-items: center;     /* Vertical Center */
    justify-content: center;  /* Horizontal Center */
}

.banner-heading {
    /* Remove the old positioning math that causes the drift */
    position: relative; 
    margin: 0;
    transform: none; 
    top: auto;
    left: auto;
    text-align: center;
    z-index: 2;
}
.football_banner_title_span1 {
    width: 100%;
    font-size: 50px;
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 4px 4px rgba(227, 118, 8, 0.6);
    font-family: "Oswald", Sans-serif;
}
.football_banner_title_span2 {
    width: 100%;
    font-size: 50px;
    color: #ff0606;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 4px 4px rgba(251, 253, 249, 0.6);
    font-family: "Oswald", Sans-serif;
}
.image-box.border-danger img {
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: 10px;
    border: 2px inset #d80e0e;
    padding: 5px;
    object-fit: cover;
}
.footballer-section {
    margin-top: 5vh;
    background-color: #2f0a0a; /* Matching your tournament background */
}
.row{
  
  align-items: center;
  padding: 0.5vw;
   
}
.column-footballer{
  width: auto;
  height: auto;
  border-radius: 2px;
  padding: 5px;

}
.image-footballer img{
  aspect-ratio: 3/4;
  border-radius: 10px;
  border-style: inset;
  border-width: 2px;
  border-color: #d80e0e;
  padding: 5px;

}
.nameof-footballer{
  text-align: center;
  font-weight: bold;
  color: #ffffff;
  font-size: 10px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  
}

.position-footballer{
  text-align: center;
  color: #ffffff;
 
}


/*our-team football section end-------------------------------------------------------*/


/*our-team cricket section start-------------------------------------------------------*/
/* --- Cricket Specific Styles --- */

.banner-cricket-wrapper {
    position: relative;
    width: 100%;
}

.banner-cricket {
    width: 100%;
    height: 20em;
    position: relative; /* Essential for the absolute heading inside */
    background-image: url('../images/cricket-team-cropped.jpeg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Ensure headings are centered inside banners */
.banner-football, .banner-cricket {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cricketer-section {
    margin-top: 5vh;
    background-color: #0a2f0c; /* Matching your tournament background */
}
.cricket_banner_title_span1 {
    width: 100%;
    font-size: 50px;
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 4px 4px rgba(110, 210, 10, 0.6);
    font-family: "Oswald", Sans-serif;
}
.cricket_banner_title_span2 {
    width: 100%;
    font-size: 50px;
    color: #0ed826;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 4px 4px rgba(255, 255, 255, 0.929);
    font-family: "Oswald", Sans-serif;
}
/* Reusing your player card styles for consistency */
.player-card {
    text-align: center;
    margin-bottom: 20px;
}

.image-box.green-border img {
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: 10px;
    border: 2px inset #0ed826;
    padding: 5px;
    object-fit: cover;
}

.p-name {
    font-size: 12px;
    color: #ffffff;
    font-weight: bold;
    margin-top: 8px;
    text-transform: uppercase;
}

.p-role {
    font-size: 10px;
    color: #0ed826; /* Cricket green theme */
    text-transform: uppercase;
}

/* Responsive adjustments for mobile (3 players per row) */
@media (max-width: 767px) {
    .p-name { font-size: 10px; }
    .p-role { font-size: 8px; }
    .banner-cricket, .banner-football { height: 15em; }
    .cricket_banner_title_span1, .cricket_banner_title_span2 { font-size: 30px; }
}
/*our-team cricket section end-------------------------------------------------------*/

/*our-team badminton section start-------------------------------------------------------*/
/* --- Badminton Specific Styles --- */

.banner-badminton {
    width: 100%;
    height: 20em;
    background-image: url('../images/banner-badminton2.jpg'); /* Ensure this image exists */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badminton_banner_title_span1 {
    font-size: 50px;
    color: #f8f8f8;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 4px 4px rgba(75, 89, 97, 0.6);
    font-family: "Oswald", Sans-serif;
}

.badminton_banner_title_span2 {
    font-size: 50px;
    color: #ffcd06; /* Cyan color for Badminton */
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 4px 4px rgba(255, 255, 255, 0.5);
    font-family: "Oswald", Sans-serif;
}

.badminton-player-section {
    background-color: #2f2e0a;
    padding-bottom: 50px;
}

/* Specific Border for Badminton Players */
.yellow-border img {
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: 10px;
    border: 2px inset #ffcc00;
    padding: 5px;
    object-fit: cover;
}

/* Reusing your shared player styles */
.player-card .p-role {
    color: #ffcc00; /* Matching text color for roles */
}

/* Responsive fix for the new section */
@media (max-width: 767px) {
    .badminton_banner_title_span1, 
    .badminton_banner_title_span2 {
        font-size: 30px;
    }
    .banner-badminton {
        height: 12em;
    }
}

/*our-team badminton section end-------------------------------------------------------*/

/*our-team volleyball section start-------------------------------------------------------*/
/* --- Volleyball Specific Styles --- */

.banner-volleyball {
    width: 100%;
    height: 20em;
    background-image: url('../images/banner-volleyball.jpg'); /* Add your image here */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.volleyball_banner_title_span1 {
    font-size: 50px;
    color: #f5f5f5;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.5);
    font-family: "Oswald", Sans-serif;
}

.volleyball_banner_title_span2 {
    font-size: 50px;
    color: #ff8901; /* Volleyball Gold */
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 4px 4px rgba(255, 255, 255, 0.3);
    font-family: "Oswald", Sans-serif;
}

.volleyball-player-section {
    background-color: #2f180a;
    padding-bottom: 50px;
}

/* Yellow Border for Volleyball Players */
.orange-border img {
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: 10px;
    border: 2px inset #ff8901;
    padding: 5px;
    object-fit: cover;
}

.volleyball-player-section .p-role {
    color: #ff8901; /* Matching Gold text color for roles */
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
    .volleyball_banner_title_span1, 
    .volleyball_banner_title_span2 {
        font-size: 30px;
    }
    .banner-volleyball {
        height: 12em;
    }
}
/*our-team volleyball section end-------------------------------------------------------*/

/*our-team Chess section start---------------------------------------------------------*/

/* --- Chess Specific Styles --- */

.banner-chess {
    width: 100%;
    height: 20em;
    background-image: url('../images/Chess\ banner.jpg'); /* Ensure this image exists */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chess_banner_title_span1 {
    font-size: 50px;
    color: #ffffff; /* Light Sky Blue */
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.6);
    font-family: "Oswald", Sans-serif;
}

.chess_banner_title_span2 {
    font-size: 50px;
    color: #007bff; /* Royal Blue */
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 4px 4px rgba(255, 255, 255, 0.2);
    font-family: "Oswald", Sans-serif;
}

.chess-player-section {
    background-color: #0a192f; /* Deep Dark Blue background */
    padding-bottom: 50px;
}

/* Specific Border for Chess Players */
.blue-border img {
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: 10px;
    border: 2px inset #00d4ff; /* Blue Border */
    padding: 5px;
    object-fit: cover;
}

/* Role text color */
.chess-player-section .player-card .p-role {
    color: #00d4ff; 
}

/* Responsive fix for the chess section */
@media (max-width: 767px) {
    .chess_banner_title_span1, 
    .chess_banner_title_span2 {
        font-size: 30px;
    }
    .banner-chess {
        height: 12em;
    }
}

/*our-team Chess section end---------------------------------------------------------*/

/*our-team Swimming section start---------------------------------------------------------*/
/* --- Swimming Specific Styles --- */

.banner-swimming {
    width: 100%;
    height: 20em;
    background-image: url('../images/Swimming\ banner.jpg'); /* Replace with your swimming image */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swimming_banner_title_span1 {
    font-size: 50px;
    color: #E0FFFF; /* Light Cyan */
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.6);
    font-family: "Oswald", Sans-serif;
}

.swimming_banner_title_span2 {
    font-size: 50px;
    color: #00FFFF; /* Vibrant Cyan */
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 4px 8px rgba(0, 255, 255, 0.4);
    font-family: "Oswald", Sans-serif;
}

.swimming-player-section {
    background-color: #001220; /* Deep Ocean Background */
    padding-bottom: 50px;
}

/* Specific Cyan Border for Swimmers */
.cyan-border img {
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: 10px;
    border: 2px inset #00FFFF; /* Cyan Border */
    padding: 5px;
    object-fit: cover;
}

/* Matching Cyan text color for roles */
.swimming-player-section .player-card .p-role {
    color: #00FFFF; 
}

/* Responsive fix for the swimming section */
@media (max-width: 767px) {
    .swimming_banner_title_span1, 
    .swimming_banner_title_span2 {
        font-size: 30px;
    }
    .banner-swimming {
        height: 12em;
    }
}
/*our-team Swimming section end---------------------------------------------------------*/

/*our-team Athletics section start---------------------------------------------------------*/
/* --- Athletics Specific Styles --- */

.banner-athletics {
    width: 100%;
    height: 20em;
    background-image: url('../images/Athletics\ banner.jpg'); /* Ensure this image exists */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.athletics_banner_title_span1 {
    font-size: 50px;
    color: #ffffff; /* Sky Blue */
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.6);
    font-family: "Oswald", Sans-serif;
}

.athletics_banner_title_span2 {
    font-size: 50px;
    color: #00BFFF; /* Deep Sky Blue */
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 4px 4px rgba(255, 255, 255, 0.3);
    font-family: "Oswald", Sans-serif;
}

.athletics-player-section {
    background-color: #0a242f; /* Dark background */
    padding-bottom: 50px;
}

/* Specific Border for Athletics Players */
.skyblue-border img {
    width: 100%;
    aspect-ratio: 3/4;
    border-radius: 10px;
    border: 2px inset #87CEEB; /* Sky Blue Border */
    padding: 5px;
    object-fit: cover;
}

/* Role text color for Athletics */
.athletics-player-section .player-card .p-role {
    color: #87CEEB; 
}

/* Responsive fix for the athletics section */
@media (max-width: 767px) {
    .athletics_banner_title_span1, 
    .athletics_banner_title_span2 {
        font-size: 30px;
    }
    .banner-athletics {
        height: 12em;
    }
}
/*our-team Athletics section end---------------------------------------------------------*/

/*test our-team page end-------------------------------------------------------------------------------*/



/*test-ad block page in Home page start-------------------------------------------------------------*/

/* --- GLOBAL SPONSOR IMAGE DECORATION --- */
.ad-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Change to 'contain' if you prefer to see the full logo without cropping */
    background-color: #ffffff; 
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: block;
    transition: transform 0.3s ease;
}

.ad-image:hover {
    transform: scale(1.02);
}

/* --- SECTION 1: SQUARE GRID LOGIC --- */
.square-ad {
    width: 100%;
    padding-top: 100%; /* Perfect Square */
    position: relative;
    overflow: hidden;
}

.square-ad-large {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* On Desktop: Large square matches height of 2 small squares + the 1rem gap */
@media (min-width: 768px) {
    .square-ad-large {
        padding-top: calc(200% + 1rem); 
    }
}

/* On Mobile: All items become simple squares */
@media (max-width: 767px) {
    .square-ad-large {
        padding-top: 100%;
    }
}

.square-ad .ad-image, 
.square-ad-large .ad-image {
    position: absolute;
    top: 0;
    left: 0;
}

/* --- SECTION 2: BALANCED GRID LOGIC --- */
.ad-section2 .column1-block {
    display: flex;
}

.ad-section2 .column2-block {
    display: flex;
    flex-direction: column;
}

.col-row-block-inner {
    flex: 1;
    min-width: 0;
}

/* --- SHARED HEADING STYLES --- */
.ad-section h2, .ad-section2 h2 {
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
}

.ad-section h2::after, .ad-section2 h2::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background-color: #ef4444; /* Match your theme red */
    margin: 8px auto 0;
    border-radius: 2px;
}

/* --- RESP
/*test-ad block page in Home page end-------------------------------------------------------------*/

/*tournaments page start-------------------------------------------------------------*/

/* --- Global & Hero Styles --- */
:root {
    --navy: #001d3d;
    --gold: #ffc107;
    --sports-green: #14bf0b;
}

.tournament-hero {
    background: linear-gradient(rgba(0, 29, 61, 0.8), rgba(0, 29, 61, 0.8)), 
                url('../images/banner-bg.png');
    background-size: cover;
    background-position: center;
    padding: 80px 0;
    color: white;
    margin-bottom: 40px;
}

.hero-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 800;
    font-size: clamp(2.5rem, 6vw, 4rem);
    letter-spacing: 2px;
}

.text-gold { color: var(--gold) !important; }

/* --- Tournament Content --- */
.tournament-block { padding-top: 20px; }

.org-name {
    color: #888;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.tournament-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.3;
}

.tournament-desc {
    color: #555;
    line-height: 1.7;
    font-size: 1rem;
}

.main-tournament-img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    transition: transform 0.5s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.image-zoom-container {
    overflow: hidden;
    border-radius: 12px;
}

.image-zoom-container:hover .main-tournament-img {
    transform: scale(1.03);
}

/* --- Result Cards --- */
.result-text-card {
    background: #fff;
    padding: 25px;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #eee;
}

.winner-border { border-top: 5px solid var(--gold); }
.runner-border { border-top: 5px solid #6c757d; }

.event-year { font-size: 0.85rem; color: #999; margin-bottom: 8px; font-weight: bold; }

.result-label {
    font-family: 'Oswald', sans-serif;
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.winner-text { color: var(--gold); }
.runner-text { color: #444; }

.result-details { font-size: 0.95rem; line-height: 1.6; color: #555; margin: 0; }

.malayalam-text {
    font-family: 'Kartika', 'ML-TTRevathi', sans-serif; /* Standard Malayalam web fonts */
    text-align: justify;
}

.result-img-card {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.result-img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 220px;
}

.img-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 4px 12px;
    font-size: 0.7rem;
    color: white;
    font-weight: bold;
    border-radius: 4px;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.bg-gold { background-color: var(--gold); color: #000; }

.section-divider {
    margin: 80px 0;
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #ccc, transparent);
    opacity: 0.4;
}

/* --- Responsive Adjustments --- */
@media (max-width: 991px) {
    .main-tournament-img { height: 280px; }
    .tournament-title { font-size: 1.8rem; }
    .tournament-block { text-align: center; }
}

@media (max-width: 576px) {
    .tournament-hero { padding: 50px 15px; }
    .result-text-card { padding: 20px; }
}

/*tournaments page end-------------------------------------------------------------*/

/*test-drop down menu start-------------------------------------------------------------*/

    /* Position sub-menus */
    .dropdown-submenu {
        position: relative;
    }

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%; /* Position the sub-menu to the right of the parent */
        margin-top: -6px; /* Adjust as needed */
        margin-left: -1px; /* Adjust as needed for separator alignment */
        border-radius: 0 6px 6px 6px;
        background-color: white; /* White background for all dropdowns */
    }

    /* Show sub-menus on hover */
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

    /* Caret for sub-menus */
    .dropdown-submenu > a::after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px; /* Right-pointing caret */
        border-left-color: #888; /* Color of the caret */
        margin-top: 5px;
        margin-right: -10px;
    }

    /* Adjust caret for the main dropdown to point downwards */
    .nav-item.dropdown > .dropdown-toggle::after {
        display: inline-block;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
        border-top: 0.3em solid;
        border-right: 0.3em solid transparent;
        border-bottom: 0;
        border-left: 0.3em solid transparent;
    }

    /* Ensure dropdowns are visible above the navbar */
    .navbar .dropdown-menu {
        left: 50%;  
        margin-top: 0; /* Remove default margin to sit directly below the toggle */
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        right: auto;                   /* custom added by shan for having background to whole of text in drop down */
    }

    /* Override Bootstrap's default dropdown-menu background */
    .dropdown-menu {
        background-color: white !important;
    }

    /* Style for the dropdown divider */
    .dropdown-divider {
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }

/*test-drop down menu end-------------------------------------------------------------*/

/*test-membership-banner start-------------------------------------------------------------*/

.football_banner_title_span_member1 {
    width: 100%;
   
    color: #2e2c2c;
    font-weight: bold;
    text-transform: uppercase;
    font-family: "Oswald", Sans-serif;
}
.football_banner_title_span_member2 {
    width: 100%;
   
    color: #0cb9c2;
    font-weight: bold;
    text-transform: uppercase;
    font-family: "Oswald", Sans-serif;
}
.banner-tournament-membership{
  width: 100%;
  height: 20em;
  opacity: 1; 
  background-image: url("../images/Membership-page-cropped.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  
}
.banner-heading-membership{
  color: #14bf0b;
  text-align: center;
  margin: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/*
.position-footballer{
  text-align: center;
  color: #ffffff;
 
}
.banner-badminton{
  width: 100%;
  height: 20em;
  opacity: 1;
  background-image: url(../images/banner-badminton2.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

}
.badminton_banner_title_span1 {
    width: 100%;
    font-size: 50px;
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 4px 4px rgba(3, 255, 234, 0.6);
    font-family: "Oswald", Sans-serif;
}
.badminton_banner_title_span2 {
    width: 100%;
    font-size: 50px;
    color: #0ecbd8;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 4px 4px rgba(255, 255, 255, 0.6);
    font-family: "Oswald", Sans-serif;
}
*/
/*test-membership-banner end-------------------------------------------------------------*/
/*
.banner-volleyball{
  width: 100%;
  height: 20em;
  opacity: 1;
  background-image: url(../images/banner-volleyball.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

}
.volleyball_banner_title_span1 {
    width: 100%;
    font-size: 50px;
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 4px 4px rgba(255, 4, 238, 0.6);
    font-family: "Oswald", Sans-serif;
}
.volleyball_banner_title_span2 {
    width: 100%;
    font-size: 50px;
    color: #ca03f7;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 2px 4px 4px rgba(255, 255, 255, 0.6);
    font-family: "Oswald", Sans-serif;
}
*/


/*  previous match result section start----------------------------------------*/
/* --- PREVIOUS RESULTS FIXES --- */

/* --- PREVIOUS RESULTS SECTION --- */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");

:root {
    --color-text-primary: #1c2a38;
    --color-text-secondary: #8A8F98;
    --color-text-alert: #d72641;
    --color-text-icon: #dbdade;
    --color-bg-primary: #fff;
    --color-bg-secondary: #f3f5f9;
    --color-bg-alert: #fdeaec;
    --color-theme-primary: #623ce6;
}

/* 1. The Outer Container Fix */
.container-previous-results {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    /* Extra bottom padding (8vh) is good to accommodate the floating buttons */
    padding: 20px 15px 10vh 15px; 
    background-color: #f3f4f9;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden; /* Critical: kills any horizontal "leak" */
}

/* 2. Heading Correction */
.previous-results-heading h3 {
    color: rgb(108, 104, 104);
    background-color: #f6f8fd;
    padding: 2rem 0;
    text-align: center;
    margin: 0;
    font-size: 24px;
    width: 100%;
    box-sizing: border-box;
}

/* 3. The Match Card Fixes */
.match {
    margin: 30px auto; /* 'auto' is safer than 1% for mobile centering */
    background-color: var(--color-bg-primary);
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    width: 100%; 
    max-width: 380px; /* Prevents card from touching screen edges */
    position: relative; /* Necessary for absolute button positioning */
}

.match-header {
    display: flex;
    border-bottom: 2px solid #f0f0f0;
    padding: 8px 16px;
    align-items: center;
    height: 50px;
}

.match-tournament img {
    max-height: 25px; /* Adjust this value as needed to get the desired size */
    width: auto; /* Maintains aspect ratio */
    margin-right: 8px; /* Optional: adds space between the logo and text */
    vertical-align: middle; /* Optional: aligns logo vertically with text */
}

.match-status {
    background-color: var(--color-bg-alert);
    color: var(--color-text-alert);
    padding: 4px 10px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
    display: flex;
    align-items: center;
    margin-right: auto;
}

.match-status:before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background-color: currentColor;
    border-radius: 50%;
    margin-right: 8px;
}

.match-content {
    display: flex;
    padding: 20px 0 45px 0; /* Space at bottom for button */
    width: 100%;
}

.match-content .column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex: 1; /* More stable than width: 33.33% */
    padding: 0 5px;
    min-width: 0; /* Allows content to shrink */
}

/* 4. Team & Logo Responsive Scaling */
.team-logo {
    width: 70px; /* Scaled down for mobile */
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-bg-primary);
    box-shadow: 0 4px 4px 0 rgba(0,0,0,0.05), 0 0 0 8px var(--color-bg-secondary);
    margin-bottom: 10px;
}

.team-logo img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.team-name {
    text-align: center;
    font-size: 14px; /* Scaled down to prevent overflow */
    font-weight: 700;
    margin: 5px 0;
    min-height: 40px; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-wrap: break-word; /* Crucial for long names like Mulliyakurshi */
    word-break: break-word;
}

/* 5. Score & Details */
.match-score {
    margin: 8px 0;
    display: flex;
    align-items: center;
}

.match-score-number {
    font-size: 32px; /* Scaled down for mobile */
    font-weight: 700;
}

.match-score-divider {
    font-size: 20px;
    margin: 0 8px;
    color: var(--color-text-icon);
}

/* 6. The "Floating" Button - The Main Culprit */
.match-bet-place-1, .match-bet-place-2, .match-bet-place-3 {
    position: absolute;
    bottom: -20px; 
    left: 50%;
    transform: translateX(-50%);
    border: 0;
    border-radius: 6px;
    padding: 10px 35px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
    cursor: pointer;
    z-index: 10;
    white-space: nowrap; /* Prevents button from getting weird shapes */
}

.match-bet-place-1, .match-bet-place-2 { background-color: #0dd20d; }
.match-bet-place-3 { background-color: #ff0000; }

/* 7. Desktop Enhancements */
@media (min-width: 992px) {
    .match {
        width: 31%; /* Fits 3 side-by-side */
        margin: 30px 1%;
    }
    .team-logo { width: 90px; height: 90px; }
    .team-logo img { width: 50px; height: 50px; }
    .team-name { font-size: 18px; }
    .match-score-number { font-size: 48px; }
}

/* FINAL SAFETY FIREWALL */
@media (max-width: 767px) {
    .match-content {
        padding-left: 5px;
        padding-right: 5px;
    }
    /* Forces everything to stay within 100vw */
    body, html {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/*previous match result section end----------------------------------------*/

/*Upcoming match section start----------------------------------------*/

/* ============================================================
   UPCOMING MATCH - ANTI-ZOOM & STABLE VERSION
   ============================================================ */

.upcoming-match-container {
    background: #f8f9fa;
    width: 100%;
    overflow-x: hidden; /* Prevent any horizontal spill */
}

.upcoming-match-section {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    padding: 1.2rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    width: 100%;
    max-width: 100%; /* Critical for mobile */
    margin: 0 auto;
    box-sizing: border-box;
}

.upcoming-title-main {
    font-size: 0.85rem;
    font-weight: 800;
    color: #718096;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    display: inline-block;
}

/* TEAM LOGOS */
.team-logo-wrapper img {
    width: 55px;
    height: 55px;
    max-width: 100%;
    object-fit: contain;
    background: white;
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: 1px solid #eee;
}

.team-name-responsive {
    font-weight: 800;
    color: #1a202c;
    text-transform: uppercase;
    font-size: 0.95rem;
    line-height: 1.2;
}

/* SCORE CENTER */
.match-score-glass {
    font-size: 2.2rem;
    font-weight: 900;
    color: #2563eb;
    line-height: 1;
}

.match-score-glass .colon {
    color: #ef4444;
}

.match-meta-slim {
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.glass-subtext { color: #4a5568; }
.match-time-highlight { color: #dc2626; font-weight: 700; }

/* ============================================================
   RESPONSIVE (LAPTOP)
   ============================================================ */
@media (min-width: 992px) {
    .upcoming-title-main { font-size: 1rem; margin-bottom: 15px; }
    .upcoming-title-main::after {
        content: ""; display: block; width: 40px; height: 2px;
        background: #2563eb; margin: 5px auto 0; border-radius: 2px;
    }
    .team-name-responsive { font-size: 1.1rem; }
    .match-score-glass { font-size: 2.8rem; }
}

/* ============================================================
   RESPONSIVE (MOBILE FIX)
   ============================================================ */
@media (max-width: 767px) {
    .upcoming-match-section {
        padding: 0.8rem 0.4rem; /* Tighten padding for small screens */
    }
    
    /* Ensure rows don't cause horizontal overflow */
    .upcoming-match-section .row {
        margin-left: 0;
        margin-right: 0;
    }

    .team-logo-wrapper img {
        width: 38px;
        height: 38px;
    }

    .team-name-responsive {
        font-size: 0.6rem; /* Scaled down to prevent pushing width */
        margin-top: 4px;
        white-space: nowrap; /* Keep name on one line if possible */
    }

    .match-score-glass { font-size: 1.5rem; }
    .glass-subtext, .match-time-highlight { font-size: 0.6rem; }
}
/*Upcoming match section end----------------------------------------*/

/*Trophies and awards section start----------------------------------------*/
.trophies-awards-section {
    background-color: #a8aab1;
    border-radius: 0rem;
    padding: 3rem 1rem;
    overflow: hidden; /* Ensures no scrollbars during sliding */
}

/* Force the Row to have a consistent height */
.carousel-item .row {
    display: flex;
    align-items: stretch; /* Forces all columns to be equal height */
}

.trophy-card {
    display: flex;
    flex-direction: column;
    padding: 10px;
}

/* Image Container: Keeps trophies aligned */
.trophy-img-container {
    height: 180px; /* Fixed height for image area */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.trophy {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* THE FIX: Fixed height for text area prevents page jumping */
.trophy-info-box {
    min-height: 90px; /* Adjust this if your Malayalam text is very long */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
}

.trophy-title {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 5px;
    line-height: 1.4;
}

.trophy-date {
    font-size: 12px;
    color: #A0AEC0;
}

/* Animation smoothing */
.carousel-item {
    transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .trophy-img-container {
        height: 130px; /* Smaller trophies on mobile */
    }
    .trophy-info-box {
        min-height: 110px; /* More space for text wrapping on narrow screens */
    }
    .trophy-title {
        font-size: 12px;
    }
}
 /*Trophies and awards section end----------------------------------------*/

/*Library section start----------------------------------------*/
/* --- Library Section Responsive Styling --- */

.banner-book-main {
    width: 100%;
    height: fit-content;
    background: linear-gradient(90deg, #6cbd15 0%, #5ea413 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}

.banner-book-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    width: 90%;
    padding: 20px 10px;
    box-sizing: border-box;
}

.text-section {
    flex: 1;
    color: white;
    text-align: left;
    padding-right: 40px;
}

.text-section h1 {
    font-size: 3.5rem;
    margin: 0 0 20px 0;
    line-height: 1.1;
    text-transform: uppercase;
    color: white;
    font-weight: bold;
}

.text-section .description {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 500px;
    /* Fixed: Removed nowrap to allow text to wrap on mobile */
    white-space: normal; 
}

/* Search bar styles */
.search-container {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 450px;
    background-color: #fff;
    border-radius: 50px;
    padding: 10px 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.search-input {
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 5px 10px;
    font-size: 1.1em;
}

.search-button {
    background: none;
    border: none;
    color: #555;
    font-size: 1.2em;
}

.book-mockup {
    flex-shrink: 0;
    width: 250px;
}

.book-mockup img.book-cover {
    width: 100%;
    height: auto;
}

/* Bookshelf Grid System */
/* Container for the list */
.bookshelf {
    padding: 60px 20px 120px 20px;
    background: #ffffff;
    width: 100%;
    clear: both;
}

#bookshelf-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px; /* Base horizontal gap */
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1200px;
}

.book {
    width: 150px;
    /* CHANGE: Height auto allows the container to grow with the text */
    height: auto; 
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* ADD: Bottom margin provides a safety buffer between rows */
    margin-bottom: 40px; 
}

.book img {
    width: 150px;
    height: 220px;
    object-fit: cover;
    border-radius: 0 5px 5px 0;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
    /* Ensure image stays at the top of its container */
    position: relative; 
}

.book:hover img {
    transform: translateX(-10px);
    box-shadow: 8px 5px 20px rgba(0,0,0,0.3);
}

.book-info {
    width: 100%;
    text-align: center;
    padding-top: 15px; /* Space between image and text */
}

.book-info h4 {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 2px;
    color: #333;
    line-height: 1.3;
}

.book-info p {
    font-size: 13px;
    color: #777;
    margin: 0;
}

/* --- Specific Mobile Fix --- */
@media (max-width: 767px) {
    #bookshelf-list {
        gap: 20px; /* Tighter horizontal gap on phones */
    }
    
    .book {
        /* Extra breathing room on mobile to prevent any overlap */
        margin-bottom: 80px; 
    }
    
    .book-info h4 {
        font-size: 14px; /* Slightly smaller text for mobile */
    }
}

/* 3D Spine effect */
.book::before, .book::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: white;
    border: 1px solid #d9d9d9;
    z-index: -1;
    visibility: hidden;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.book::before { left: -3px; }
.book::after { left: -6px; }

.book:hover::before, .book:hover::after {
    visibility: visible;
}

/* --- Responsive Adjustments --- */

@media (max-width: 768px) {
    .banner-book-content {
        flex-direction: column;
        text-align: center;
    }

    .text-section {
        padding-right: 0;
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .text-section h1 {
        font-size: 2.5rem;
    }

    .book-mockup {
        width: 180px;
    }

    #bookshelf-list {
        gap: 50px 20px;
    }
}

@media (max-width: 480px) {
    .text-section h1 {
        font-size: 2rem;
    }
    .book {
        width: 130px; /* Slightly smaller books on tiny screens */
        height: 190px;
    }
}

/* test library tabs section start*/
/* --- Library Tabs Styling --- */
.tab-container-main { padding: 40px 0 20px 0; background: #f8f9fa; border-bottom: 1px solid #ddd; }
.tab-note { font-size: 14px; color: #666; margin-bottom: 15px; font-style: italic; }

.custom-library-tabs .nav-link {
    background: #fff;
    color: #555;
    border: 1px solid #ddd;
    margin: 0 10px;
    padding: 12px 25px;
    border-radius: 30px;
    font-weight: 600;
    transition: 0.3s;
}

.custom-library-tabs .nav-link.active {
    background: #6cbd15 !important; /* Green for Active */
    color: white !important;
    border-color: #6cbd15;
    box-shadow: 0 4px 10px rgba(108, 189, 21, 0.3);
}

/* --- Theme Colors --- */
.paperback-bg { background: linear-gradient(90deg, #6cbd15 0%, #5ea413 100%) !important; }
.ebook-bg { background: linear-gradient(90deg, #17a2b8 0%, #117a8b 100%) !important; }
.ebook-bookshelf-bg { background: #f0f7f8; }

/* --- Search & Grid Layout --- */
.bookshelf-list {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 80px 40px; list-style: none; padding: 50px 20px 100px 20px;
}

.book { width: 150px; height: auto; position: relative; margin-bottom: 40px; }
.book img { 
    width: 150px; height: 220px; object-fit: cover; border-radius: 0 5px 5px 0;
    transition: 0.4s ease; box-shadow: 3px 3px 10px rgba(0,0,0,0.2); 
}
.book:hover img { transform: translateX(-10px); box-shadow: 8px 5px 20px rgba(0,0,0,0.3); }

/* Link styling for E-books */
.book a { text-decoration: none !important; color: inherit; display: block; }

.book-info { padding-top: 15px; text-align: center; }
.book-info h4 { font-size: 14px; font-weight: bold; margin: 0; }
.book-info p { font-size: 12px; color: #777; margin: 5px 0 0 0; }
/* test library tabs section end*/

/*Library section end----------------------------------------*/




/*All Projects start----------------------------------------------------------------*/
/* Safety reset for the whole section */
#spec {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

.spec_main {
    background-color: #f3f4f9;
    width: 100%;
}

.section-heading-wrapper {
    background-color: #f6f8fd;
    width: 100%;
}

.img-project {
    max-width: 100%; /* Changed from 100% width to max-width */
    height: auto;
    /* Removed aspect-ratio to allow natural scaling on mobile */
    border-style: none;
    display: block;
    margin: 0 auto;
}
.display-5{
    color: rgb(108, 104, 104);
}
/* Fix for large numbers on mobile */
@media (max-width: 767px) {
    .spec_1_left {
        text-align: center !important;
        padding-top: 20px !important;
    }
    
    .fs-1 {
        font-size: 1.5rem !important; /* Smaller numbers so they don't break the line */
    }
    
    .spec_1 .col-12 {
        padding-left: 15px;
        padding-right: 15px;
    }
}
/*All Projects end-------------------------------------------------------------------*/

/*Panangangarotsavam posters section start----------------------------------------------*/

/* Panangangarotsavam Grid Styling */

#speed {
    background-color: #fcfcfc;
    overflow: hidden;
}

.competition-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Soft shadow for a modern look */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease-in-out;
    border: 1px solid #eee;
}

/* Lift effect on hover */
.competition-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.competition-img-wrapper {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #f1f1f1;
}

.competition-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Use cover for a more 'poster' feel */
    transition: transform 0.5s ease;
}

.competition-card:hover .competition-img-wrapper img {
    transform: scale(1.08); /* Slight zoom on image hover */
}

.competition-name-box {
    background-color: #ffffff;
    padding: 15px 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70px;
    border-top: 1px solid #f0f0f0;
}

.competition-name-box h6 {
    color: #333; /* Darker text looks more modern on white bg */
    font-size: 13px;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    text-transform: uppercase;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Mobile Adjustments for iPhone SE / Pixel 7 */
@media (max-width: 767px) {
    .competition-name-box {
        min-height: 60px;
        padding: 10px 5px;
    }
    .competition-name-box h6 {
        font-size: 10px;
        color: #ef4444; /* Keep the brand red on mobile for pop */
    }
    #speed h2 {
        font-size: 1.6rem;
    }
}

/*Panangangarotsavam posters section end----------------------------------------------*/


/*Penalty shooutout HOME PAGE start----------------------------------------------*/

/* Penalty Shootout Section Fix */
#penalty-section {
    overflow: hidden;
    width: 100%;
}

.penalty-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.2;
    margin-top: 10px;
}

.penalty-title a {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Specific Mobile Adjustments */
@media (max-width: 767px) {
    .penalty-title {
        font-size: 1.5rem; /* Shrink title so it doesn't cause zoom */
    }
    
    .perform_3_left {
        text-align: center; /* Center text on mobile for better aesthetics */
    }
    
    .perform_3_left h5 {
        margin-top: 20px;
    }
}

/* Ensure the image doesn't have hidden width */
.perform_3_right img {
    width: 100%;
    height: auto;
    display: block;
}
/*Penalty shooutout HOME PAGE end----------------------------------------------*/


/*MAJOR PROJECTS SECTION HOME PAGE start----------------------------------------------*/

/* --- MAJOR PROJECTS SECTION: RESPONSIVE FIX --- */

/* 1. Prevent the section from leaking width */
#perform {
    overflow-x: hidden;
    width: 100%;
    background-color: #f3f4f9;
}

/* 2. Responsive Typography (The "Zoom" Prevention) */
.perform_1 h2 {
    font-size: 1.5rem; /* Default for mobile */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (min-width: 768px) {
    .perform_1 h2 {
        font-size: 2.5rem; /* Larger for desktop */
    }
}

/* 3. Handle the 'col-6' text overflow on small phones */
.perform_2_left h4, 
.perform_2_left p,
.perform_2_left span {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.perform_2_left h4 a {
    font-size: 1.1rem; /* Scale down titles on mobile */
}

/* 4. Fix the Title Row Border for Mobile */
@media (max-width: 767px) {
    .perform_1_left {
        text-align: center !important; /* Center title on mobile */
        border-right: none !important; /* FIXED: Use border-right instead of border-end */
        border-bottom: 2px solid #ef4444; /* Add a bottom line instead */
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    .perform_1_right {
        text-align: center !important;
    }
}

/* 5. Image Container Fix */
.image-container {
    width: 100%;
    padding-top: 66.66%; 
    position: relative;
    overflow: hidden;
    background-color: #f8f9fa;
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Changed to cover to ensure no white gaps */
}

/* 6. Card Flex Fix */
.perform_2 .col-6 {
    display: flex;
}

.perform_2_left {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    /* Ensure padding doesn't add to width */
    box-sizing: border-box; 
}

/*MAJOR PROJECTS SECTION HOME PAGE end----------------------------------------------*/

/*history made SECTION HOME PAGE start----------------------------------------------*/

/* History Made Section Fixes */
#about_pg {
    overflow: hidden; /* Safety net to stop any child element from leaking out */
    width: 100%;
    background-color: white;
}


.history_title {
    font-size: 2.5rem;
    font-weight: bold;
    word-wrap: break-word;
}

.malayalam_text {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    word-break: keep-all; /* Keeps Malayalam words intact while wrapping naturally */
}

.about_pg1r h4 {
    font-size: 1.25rem;
    margin-top: 10px;
    display: flex;
    align-items: center;
}

/* Specific Mobile Fixes (iPhone SE / Pixel 7) */
@media (max-width: 576px) {
    .history_title {
        font-size: 1.8rem;
    }
    
    .malayalam_text {
        font-size: 1rem;
        padding: 0 10px;
    }

    .about_pg1r h4 {
        font-size: 1.1rem;
        flex-wrap: wrap; /* Allows trophy icon and text to stack if needed */
    }

    .about_pg1r p {
        font-size: 0.95rem;
        text-align: justify;
    }
}

/*history made SECTION HOME PAGE end----------------------------------------------*/

/*Project Floodlight section home page start----------------------------------------------*/
    /* Hero Section */
        .hero-section {
            background: linear-gradient(rgba(222, 228, 234, 0.126), rgba(244, 234, 234, 0.527)), 
                        url(../images/floodlight1.png);
            background-size: cover;
            background-position: center;
            padding: 140px 0;
            color: rgb(5, 7, 108);
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            
        }

        .floodlight-section-heading {
            font-weight: 700;
            position: relative;
            padding-bottom: 15px;
            margin-bottom: 30px;
        }
        .floodlight-section-heading::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background-color: #003366;
        }

        .card-spec {
            border: none;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            transition: transform 0.3s ease;
        }
        .card-spec:hover { transform: translateY(-5px); }
        
        .step-box {
            background: #f8f9fa;
            border-left: 5px solid #003366;
            padding: 20px;
            margin-bottom: 15px;
        }
        
        .footer {
           background: #d8d8d8; color: #adb5bd; padding: 20px 0; 
        }
        .lead{
          color: #ffffff;
        }
        .display-2{
          color: #ffffff;

          font-weight: normal;
          text-shadow: 0 0 10px #fff, /* Inner white glow */
               0 0 20px #fff,
               0 0 30px #efff08, /* Outer pink glow */
               0 0 40px #f9f10b
        }
        .rounded-circle{
          align-items: center;
        }

 /*Project Floodlight section home page end----------------------------------------------*/

 /*Project y-blood section home page start----------------------------------------------*/

 :root { --blood-red: #d90429; --dark-red: #8d0801; }
          .btn-blood { background-color: var(--blood-red); color: white; border-radius: 5px; }
          .btn-blood:hover { background-color: var(--dark-red); color: white; }
          .text-blood { color: var(--blood-red); }
          .hero_yblood {
              background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(../images/Y-blood\ about\ page.png);
              background-size: cover; background-position: center; color: white; padding: 80px 0; text-align: center;
          }
          .pdf-container { height: 600px; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; background: #eee; }
          .feature-card { border: none; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: 0.3s; }
          .feature-card:hover { transform: translateY(-5px); }
          .feature-icon { font-size: 2.5rem; color: var(--blood-red); margin-bottom: 15px; }
          :root {
            --vision-navy: #093462ce;
            --vision-blue: #053057;
            --vision-gold: #ffc300;
            --vision-light: #f8f9fa;
        }
    .display-4{
      color: #ffffff;

          font-weight: normal;
          text-shadow: 0 0 10px #fff, /* Inner white glow */
               0 0 20px #fff,
               0 0 30px #dd0808, /* Outer pink glow */
               0 0 40px #de3d07
    }
      .layout_padding_y-blood {
    padding-top: 1rem;
    padding-bottom: 0rem;
  }

/*Project y-blood section home page end----------------------------------------------*/

/*Project Vision 2031 section home page start----------------------------------------------*/

.hero_vision {
            background: linear-gradient(rgba(0, 29, 61, 0.85), rgba(0, 29, 61, 0.85)), url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?auto=format&fit=crop&q=80&w=1200');
            background-size: cover; background-position: center;
            color: white; padding: 120px 0; text-align: center;
            border-bottom: 6px solid var(--vision-gold);
        }

        .text-gold { color: var(--vision-gold) !important; }
        .bg-navy { background-color: var(--vision-navy); color: white; }

        /* Style for your 3-photo combination image */
        .vision-image-frame {
            border: 10px solid white;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            border-radius: 4px;
            transition: transform 0.3s ease;
        }
        .vision-image-frame:hover { transform: scale(1.02); }

        .commitment-card {
            background: white; border: none; border-left: 5px solid var(--vision-gold);
            box-shadow: 0 5px 15px rgba(0,0,0,0.05); padding: 30px;
        }

        .timeline-marker {
            width: 50px; height: 50px; background: var(--vision-gold);
            color: var(--vision-navy); border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-weight: bold; margin-bottom: 15px;
        }

/*Project Vision 2031 section home page end----------------------------------------------*/



/*Our partners section start------------------------------------------------------------*/

/* --- STATIC PARTNER GRID STYLES --- */
.partners-grid {
    padding: 20px 0;
}

.partner-wrapper {
    margin-bottom: 10px; 
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.partner-card {
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    overflow: hidden;
}

.partner-card img {
    max-height: 70px; 
    max-width: 90%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* This makes the image grayscale and faded by default */
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
}

/* --- RESTORED HOVER PROPERTY --- */

/* When the user hovers over the card... */
.partner-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-color: #ef4444; /* Optional: adds a slight red border on hover */
}

/* ...Restore the true colors and full opacity of the image inside */
.partner-card:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05); /* Slight zoom for extra polish */
}

/* Small phones (iPhone SE) Fix */
@media (max-width: 380px) {
    .partner-card {
        height: 80px;
    }
    .partner-card img {
        max-height: 50px;
    }
}
/*Our partners section end-----------------------------------------------------------*/

/*Our Members in Memebership page start-----------------------------------------------------------*/

.layout_padding2 {
    padding-top: 40px;
    padding-bottom: 0px;
}

/*Our Members in Memebership page end-----------------------------------------------------------*/

/*PSL page start----------------------------------------------------------------*/

/* --- Panangangara Super League (PSL) Styles --- */

:root {
    --psl-gold: #D4AF37;
    --psl-navy: #0a192f;
    --psl-silver: #C0C0C0;
    --psl-white: #ffffff;
    --psl-glass: rgba(255, 255, 255, 0.05);
}

.psl-hero {
    background: linear-gradient(rgba(8, 19, 36, 0.85), rgba(213, 11, 11, 0.85)), 
                url('../images/psl-stadium-bg.jpg'); /* Replace with PSL specific background */
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    color: var(--psl-white);
    border-bottom: 4px solid var(--psl-gold);
}

.psl-badge-top {
    display: inline-block;
    background: var(--psl-gold);
    color: #000;
    padding: 5px 15px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    border-radius: 50px;
    margin-bottom: 15px;
}

.psl-hero-title { font-weight: 900; letter-spacing: 3px; font-size: 3.5rem; }
.psl-text-gold { color: var(--psl-gold); }

.psl-org-tag { color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }
.psl-main-title { font-weight: 800; font-size: 2.5rem; color: var(--psl-navy); margin-bottom: 20px; }

.psl-hero-subtitle{
    color: white;
}

.psl-stat-bar {
    display: flex;
    gap: 30px;
    margin-top: 25px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.psl-stat { font-size: 1.1rem; color: #444; }
.psl-stat strong { color: var(--psl-navy); font-size: 1.4rem; display: block; }

/* Feature Image Frame */
.psl-feature-frame {
    position: relative;
    padding: 15px;
    background: #fff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-radius: 15px;
}

.psl-feature-img { border-radius: 10px; transition: transform 0.5s ease; }
.psl-feature-frame:hover .psl-feature-img { transform: scale(1.02); }

/* Result Cards */
.psl-result-card {
    height: 100%;
    background: #fff;
    padding: 30px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-bottom: 6px solid #eee;
    transition: all 0.3s ease;
}

.psl-card-winner { border-color: var(--psl-gold); }
.psl-card-runner { border-color: var(--psl-silver); }

.psl-result-card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }

.psl-status-label { font-size: 1.4rem; font-weight: 800; margin-top: 5px; }
.psl-card-winner .psl-status-label { color: #b8860b; }
.psl-card-runner .psl-status-label { color: #666; }

.psl-year { font-size: 0.85rem; color: #999; text-transform: uppercase; font-weight: 600; }

.psl-details-malayalam {
    font-family: 'Anek Malayalam', sans-serif;
    line-height: 1.8;
    color: #444;
    margin-top: 15px;
}

/* Image Holders */
.psl-image-holder {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.psl-result-img { width: 100%; height: 300px; object-fit: cover; }

.psl-img-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 12px;
    text-align: center;
    color: white;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bg-gold { background: rgba(212, 175, 55, 0.9); }
.bg-silver { background: rgba(102, 102, 102, 0.9); }

/* Mobile Optimizations */
@media (max-width: 768px) {
    .psl-hero-title { font-size: 2.2rem; }
    .psl-stat-bar { gap: 15px; }
    .psl-result-img { height: 220px; }
}

/*PSL page end----------------------------------------------------------------*/

/*PCL page start----------------------------------------------------------------*/

/* --- Panangangara Cricket League (PCL) Styles --- */

:root {
    --pcl-primary-green: #2e7d32; /* Rich Cricket Grass Green */
    --pcl-accent-lime: #aeea00;
    --pcl-deep-forest: #1b5e20;
    --pcl-white: #ffffff;
    --pcl-soft-gray: #f4f7f4;
}

.pcl-hero {
    background: linear-gradient(rgba(7, 27, 8, 0.9), rgba(27, 94, 32, 0.9)), 
                url('../images/pcl-cricket-ground.jpg'); /* Cricket specific background */
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    color: var(--pcl-white);
    border-bottom: 5px solid var(--pcl-accent-lime);
}

.pcl-badge-top {
    display: inline-block;
    background: var(--pcl-accent-lime);
    color: #1b5e20;
    padding: 6px 18px;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    border-radius: 4px;
    margin-bottom: 15px;
}

.pcl-hero-title { font-weight: 900; letter-spacing: 2px; font-size: 3.2rem; }
.pcl-text-green { color: var(--pcl-accent-lime); }

.pcl-org-tag { color: #666; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }
.pcl-main-title { font-weight: 800; font-size: 2.5rem; color: var(--pcl-deep-forest); margin-bottom: 20px; }

.pcl-stat-bar {
    display: flex;
    gap: 35px;
    margin-top: 25px;
    background: var(--pcl-soft-gray);
    padding: 15px 25px;
    border-radius: 50px;
    width: fit-content;
}

.pcl-stat { font-size: 0.95rem; color: #555; }
.pcl-stat strong { color: var(--pcl-primary-green); font-size: 1.3rem; display: block; }

/* Feature Image Frame */
.pcl-feature-frame {
    position: relative;
    padding: 10px;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    border-radius: 20px;
}

.pcl-feature-img { border-radius: 15px; }

/* Result Cards */
.pcl-result-card {
    height: 100%;
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    border-top: 5px solid #ccc;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pcl-card-winner { border-top-color: var(--pcl-primary-green); }
.pcl-card-runner { border-top-color: #555; }

.pcl-result-card:hover { transform: scale(1.03); }

.pcl-status-label { font-size: 1.25rem; font-weight: 800; margin-top: 5px; letter-spacing: 1px; }
.pcl-card-winner .pcl-status-label { color: var(--pcl-primary-green); }

.pcl-year { font-size: 0.8rem; color: #aaa; font-weight: bold; }

.pcl-details-malayalam {
    font-family: 'Anek Malayalam', sans-serif;
    line-height: 1.7;
    color: #444;
    margin-top: 15px;
    font-size: 0.95rem;
}

/* Image Holders */
.pcl-image-holder {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    height: 100%;
}

.pcl-result-img { width: 100%; height: 280px; object-fit: cover; }

.pcl-img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    padding: 8px 15px;
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    border-bottom-right-radius: 15px;
}

.bg-green { background: var(--pcl-primary-green); }
.bg-dark-green { background: #333; }

/* Responsive Adjustments */
@media (max-width: 991px) {
    .pcl-stat-bar { margin: 0 auto 20px auto; }
}

@media (max-width: 768px) {
    .pcl-hero-title { font-size: 2rem; }
    .pcl-hero-subtitle { font-size: 1rem; }
}

/*PCL page end---------------------------------------------------------------------------------*/

/*PBL page start---------------------------------------------------------------------------------*/

/* --- Panangangara Badminton League (PBL) Styles --- */

:root {
    --pbl-primary-yellow: #f1c40f; /* Vibrant Volt Yellow */
    --pbl-dark-black: #1a1a1a;
    --pbl-gray-text: #444;
    --pbl-white: #ffffff;
    --pbl-court-gray: #f8f9fa;
}

.pbl-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(205, 231, 6, 0.85)), 
                url('../images/badminton-court-bg.jpg'); /* Indoor court background */
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    color: var(--pbl-white);
    border-bottom: 5px solid var(--pbl-primary-yellow);
}

.pbl-badge-top {
    display: inline-block;
    background: var(--pbl-primary-yellow);
    color: var(--pbl-dark-black);
    padding: 6px 18px;
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    border-radius: 2px; /* Sharp corners for aggressive look */
    margin-bottom: 15px;
}

.pbl-hero-title { font-weight: 900; letter-spacing: 1px; font-size: 3.2rem; }
.pbl-text-yellow { color: var(--pbl-primary-yellow); }

.pbl-hero-subtitle{
    color: white;
}

.pbl-org-tag { color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; }
.pbl-main-title { font-weight: 800; font-size: 2.5rem; color: var(--pbl-dark-black); margin-bottom: 20px; }

.pbl-stat-bar {
    display: flex;
    gap: 30px;
    margin-top: 25px;
    border-left: 4px solid var(--pbl-primary-yellow);
    padding: 10px 25px;
    background: var(--pbl-court-gray);
}

.pbl-stat { font-size: 0.9rem; color: #666; text-transform: uppercase; }
.pbl-stat strong { color: var(--pbl-dark-black); font-size: 1.2rem; display: block; }

/* Feature Image Frame */
.pbl-feature-frame {
    position: relative;
    padding: 5px;
    background: var(--pbl-dark-black);
    border-radius: 8px;
    box-shadow: 10px 10px 0px var(--pbl-primary-yellow); /* Brutalist shadow style */
}

.pbl-feature-img { border-radius: 4px; }

/* Result Cards */
.pbl-result-card {
    height: 100%;
    background: var(--pbl-white);
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    border-right: 5px solid #eee;
    transition: transform 0.3s ease;
}

.pbl-card-winner { border-right-color: var(--pbl-primary-yellow); }
.pbl-card-runner { border-right-color: var(--pbl-dark-black); }

.pbl-result-card:hover { transform: translateY(-5px); }

.pbl-status-label { font-size: 1.25rem; font-weight: 800; margin-top: 5px; color: var(--pbl-dark-black); }
.pbl-year { font-size: 0.8rem; color: #999; font-weight: bold; }

.pbl-details-malayalam {
    font-family: 'Anek Malayalam', sans-serif;
    line-height: 1.6;
    color: var(--pbl-gray-text);
    margin-top: 15px;
    font-size: 0.95rem;
}

/* Image Holders */
.pbl-image-holder {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
}

.pbl-result-img { width: 100%; height: 280px; object-fit: cover; }

.pbl-img-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 10px;
    color: white;
    font-weight: 700;
    font-size: 0.8rem;
    text-align: center;
    text-transform: uppercase;
}

.bg-yellow { background: rgba(241, 196, 15, 0.9); color: #000; }
.bg-black { background: rgba(0, 0, 0, 0.8); }

/* Responsive Adjustments */
@media (max-width: 991px) {
    .pbl-stat-bar { margin-bottom: 30px; }
}

@media (max-width: 768px) {
    .pbl-hero-title { font-size: 2.2rem; }
}
/*PBL page end---------------------------------------------------------------------------------*/

/*Footer section new start--------------------------------------------------------------------------------*/


/* --- Optimized Footer Fix --- */

.common-footer {
    background-color: #111111; /* Deep Black */
    padding: 60px 0 30px 0;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    
    /* CRITICAL FIX: This stops the "Page Turning Black" / Alignment issue */
    clear: both; 
    display: block;
    width: 100%;
    float: left; /* Keeps it consistent with your older layout logic */
    position: relative;
    z-index: 10;
}

.footer-content {
    text-align: center;
    width: 100%;
}

/* Social Icons Styling */
.common-social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

/* Ensure FontAwesome icons show up inside the flex circle */
.common-icon-circle {
    width: 45px;
    height: 45px;
    border: 2px solid rgba(108, 189, 21, 0.3); /* Matches your green theme */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 18px;
    transition: all 0.3s ease;
    text-decoration: none !important;
}

.common-icon-circle:hover {
    background-color: #6cbd15; /* Your Green Theme */
    color: #ffffff;
    border-color: #6cbd15;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(108, 189, 21, 0.4);
}

/* Divider */
.common-footer-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
    margin: 20px auto;
    width: 60%;
    float: none; /* Override old global float settings */
}

/* Copyright & Designer Link */
.common-copyright p {
    font-size: 14px;
    color: #888;
    letter-spacing: 0.5px;
    margin-bottom: 0;
}

.designer-link {
    color: #6cbd15; /* Matches your Green */
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

.designer-link:hover {
    color: #ffffff;
}

/* Subtle underline effect */
.designer-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: #ffffff;
    transition: width 0.3s ease;
}

.designer-link:hover::after {
    width: 100%;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .common-footer { padding: 40px 0 20px 0; }
    .common-social-links { gap: 15px; }
}

/*Footer section new end--------------------------------------------------------------------------------*/

/* Safety nets section start -----------------------------------------------------*/

/* --- Project Safety Nets: Global Theme --- */
:root {
    --bg-dark: #1a1a1a;
    --bg-silver: #2b2b2b;
    --text-main: #dcdcdc;
    --text-dim: #a0a0a0;
    --accent-silver: #c0c0c0;
    --yuvadhara-green: #6cbd15;
    --danger-red: #ef4444;
}

body.project-safety-page {
    background-color: var(--bg-dark);
    color: var(--text-main);
    overflow-x: hidden; /* Prevents the horizontal scroll/zoom issue */
}

/* --- Hero Section --- */
.hero_section {
    padding: 100px 0;
    background: radial-gradient(circle at center, #3a3a3a 0%, #1a1a1a 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hero_section h1 {
    font-size: 2.5rem;
    letter-spacing: 3px;
    color: var(--accent-silver);
}

/* --- Content Sections --- */
.layout_padding {
    padding: 60px 0;
}

h2, h3 {
    color: var(--accent-silver);
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 1px;
}

.section-title-border {
    border-bottom: 2px solid #444;
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: 30px;
}

/* --- Problem & Objective Lists --- */
.list-unstyled li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.fa-check-circle { color: var(--yuvadhara-green); }
.fa-times-circle { color: var(--danger-red); }

/* --- Impact Cards --- */
.impact-card {
    background: var(--bg-silver);
    padding: 30px;
    border-radius: 15px;
    transition: transform 0.3s ease, border 0.3s ease;
    border: 1px solid transparent;
}

.impact-card:hover {
    transform: translateY(-10px);
    border: 1px solid var(--yuvadhara-green);
}

.impact-card i {
    color: var(--yuvadhara-green);
    margin-bottom: 20px;
}

/* --- Status & Funding Info --- */
.status-box {
    background: #1f1f1f;
    border-left: 4px solid #ffc107; /* Warning yellow for "submitted" status */
    padding: 25px;
    border-radius: 8px;
    margin-top: 30px;
}

/* --- Image Styling --- */
.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5) !important;
    transition: filter 0.3s ease;
}

.shadow-lg:hover {
    filter: brightness(1.1);
}

/* --- Responsive Fixes (Anti-Zoom) --- */
@media (max-width: 768px) {
    .hero_section h1 {
        font-size: 1.8rem;
    }
    
    .layout_padding {
        padding: 40px 15px;
    }

    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Stack images and text properly */
    .flex-md-row-reverse {
        flex-direction: column-reverse !important;
    }

    img {
        max-width: 100%;
        height: auto;
    }
}

/* Custom button specifically for this page */
.btn-safety {
    background-color: var(--yuvadhara-green);
    border: none;
    padding: 12px 30px;
    font-weight: bold;
    color: white;
    border-radius: 5px;
    transition: 0.3s;
}

.btn-safety:hover {
    background-color: white;
    color: var(--bg-dark);
}

/* Safety nets section end -----------------------------------------------------*/