@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap');

/* Home Section */

/* --- Home Page Navigation Bar --- */
@media (max-width: 768px) {
    
    body {
        background: radial-gradient(circle at bottom left, #003331 0%, #0d1117 80%, #000000 100%) !important;
        background-attachment: fixed !important;

        font-family: 'Open Sans', sans-serif;
        color: #ffffff !important;
    }

    .home_page_dimensions{
        height: 100vh !important;
        width: 100vw !important;
    }
    .home_primary_bg_image {
        height: 100vh !important;
        /* Ensures the overlay and image still show on mobile */
        background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                    url("../images/home_page_image.jpg") !important;
        background-size: cover !important;
        background-position: center !important;
    }

    .tft-heading {
        font-size: 3rem !important; /* Shrinks the text so it doesn't wrap weirdly on small screens */
    }

    .sub_domain_lead_image_style {
        height: 60% !important;     
            width: 50% !important;
            object-fit: fill;
            aspect-ratio: 3/5;
            margin-top: 3% !important;
            align-items: center;

        }

    .sub_domain_lead_text_style{
            font-family: 'Open Sans', sans-serif;
            font-size: 120%;
            color: #ffffff !important;
            text-align: center;
        }

    .know_more_btn_style{
            display: flex;
            justify-content: center;
            text-align: center;
            color: #ffffff !important;
    }
    /* --- Fix for History Cards on Mobile --- */
    .history-card {
        width: 340px !important; 
        margin-left: -170px !important; 
        
        /* THE MAGIC SHRINK-WRAP COMBO */
        height: fit-content !important; 
        min-height: 0 !important;
        
        /* Kills the internal touch-scrolling so text never gets lost */
        overflow: visible !important; 
        
        /* Gives proper, thick breathing room around the text on mobile */
        padding: 30px !important; 
        margin-top: -150px !important; 
    }

    .text-center-md {
        text-align: center !important;
    }
    
}


/* 1. The Background: Essential for Glass Effect */
@media (min-width: 769px) {

    body {

        background: radial-gradient(circle at bottom left, #003331 0%, #0d1117 50%, #000000 100%);
        background-attachment: fixed;
        min-height: 100vh;
        font-family: 'Open Sans', sans-serif;
        color: #ffffff;

    }

    .home_primary_bg_image{
            height: 100vh;
            width: 100vw;
            /* This adds a 60% dark tint over your image so white text stays readable */
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                        url("../images/home_page_image.jpg");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            display: flex;
            flex-direction: column;
            justify-content: center; /* Centers your content vertically */
            align-items: center;
        }

    .sub_domain_lead_image_style {
            height: 60% !important;     
            width: 100% !important;
            object-fit: fill;
            aspect-ratio: 3/5;
            margin-top: 3% !important;
            align-items: center;
            

        }

    .sub_domain_lead_text_style{
            font-family: 'Open Sans', sans-serif;
            font-size: 120%;
            color: #ffffff !important;
            text-align: center;
        }
}

.navigation_bar_style_home {
    /* This creates a smooth dark shadow at the top of the screen */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%) !important;
    padding-top: 10px;
    padding-bottom: 30px;
    border: none !important;
}

.navigation_bar_style_home .nav-link {
    color: #ffffff !important; /* Pure White text */
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase; /* Racing UI vibe */
    letter-spacing: 1.5px;
    margin: 0 10px;
    
    /* Adds a drop shadow directly to the text so it pops off the background */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    transition: all 0.3s ease;
}

.navigation_bar_style_home .nav-link:hover {
    color: #00C9B1 !important; /* Mercedes/Petronas Teal on hover */
    transform: translateY(-2px);
}

.navigation_bar_style_home .nav-link.active {
    color: #DAA520 !important; /* TFT Goldenrod */
    border-bottom: 2px solid #DAA520;
}

/* --- Inner Pages Navigation Bar (Frosted Glass) --- */

.navigation_bar_style_other {
    /* Semi-transparent Mercedes Obsidian base with a glass blur */
    background: transparent; 
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    padding-top: 15px;
    padding-bottom: 15px;
    z-index: 1030; /* Ensures it always stays on top of the cards */
}

/* Uses the exact same text styling as your Home page */
.navigation_bar_style_other .nav-link {
    color: #ffffff !important;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 10px;
    transition: all 0.3s ease;
}

.navigation_bar_style_other .nav-link:hover {
    color: #00C9B1 !important; /* Petronas Teal */
    transform: translateY(-2px);
}


/* THE BULLETPROOF ACTIVE LINK */
nav.navigation_bar_style_other a.nav-link.active {
    color: #DAA520 !important; 
    border-bottom: 3px solid #DAA520 !important; 
    opacity: 1 !important;
}
.navigation_bar_image {

    height: 50px !important;
    width: auto !important;

    mix-blend-mode: screen; 
    transition: transform 0.3s ease;
}

.navigation_bar_image:hover {
    transform: rotate(-5deg) scale(1.1);
}

.home_page_dimensions{
    height: 100vh !important;
    width: 100vw !important;
}

.tft-heading{
    font-family: 'Roboto', sans-serif; 
    font-weight: 900;
    font-size: 5.5rem; /* Using rem for better scaling */
    text-transform: uppercase;
    letter-spacing: -2px; /* Tight tracking looks more "pro" */
    color: #ffffff;
    text-align: center;
    line-height: 1;
    margin-bottom: 10px;
    /* Shadow for depth */
    text-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5);
}

.tft-sub-heading{
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 1.8rem;
    color: #FFD700; /* Your SRM Yellow */
    text-transform: italic;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.tft-info{

    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    color: #ffffff; /* White text */
    text-align: center; /* Center it to match the heading */
    text-shadow: 1px 1px 2px #000000;
    border-top: 2px solid #FFD700; /* Adds a yellow line above the text */
    padding-top: 10px;
    margin-top: 20px;
    display: inline-block;
}

.know_more_button_style{
    background-color: #DAA520 !important; /* Goldenrod */
    color: #000000 !important; /* Black text on yellow button looks sharp */
    padding: 12px 35px;
    border-radius: 50px; /* Pill shape */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: none;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(218, 165, 32, 0.4);
}



.know_more_button_style:hover {
    background-color: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
    text-decoration: none;
}




                                                                                        /*About Us Section*/


.faculty_advisor_box_style{
    width: 100vw !important;
}

.fa_name_style{
    font-family: 'Bree Serif', serif;

    color: greenyellow !important;

}
.fa_image_style{
    height: 100% !important;
    width: 100% !important;
    border-radius: 2%;
}

.fa_designation_icon_style{
    width: 4% !important;
    height: 50% !important;
}

.fa_description_style{
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 120%;
    text-align: justify;
}

.about_us_box_style{
    width: 100vw !important;
    margin-top: 10vh !important;
}

.about-us-style{
    font-family: 'Bree Serif', serif;
    font-size: 400% !important;
    color: goldenrod !important;
    text-align: center;
    
}

.moto_style{
    font-family: 'Playfair Display', serif;
    font-size:300% !important;
    color: greenyellow !important;
    text-align: left;
}

.moto_sub_heading_style{
    font-weight: bold !important;

}

.moto_description_style{
    font-size: large;
}

.moto_image_style{
    border-radius: 2%;
    margin-top: 2vh !important;
}

.mission_heading_style{
    font-family: 'Playfair Display', serif;
    font-size: 300% !important;
    color: greenyellow !important;
    text-align: left;
}

.mission_text_style{
    font-size: large;
}

.history_heading_style{
    font-family: 'Playfair Display', serif;
    font-size: 300% !important;
    color: greenyellow !important;

}

 

/* --- 2D Circular "Ferris Wheel" Timeline --- */

.history-scroll-wrapper {
    position: relative;
    height: 60vh; /* Height of the viewing area */
    background: radial-gradient(circle at center, #1e293b, #0f172a);
    border-radius: 20px;
    overflow-y: auto;
    scroll-snap-type: y mandatory; /* Snaps to exactly one year at a time */
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Hide scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.history-scroll-wrapper::-webkit-scrollbar { display: none; }

/* This stays locked in view while you scroll */
.history-sticky-container {
    position: sticky;
    top: 0;
    height:700px;
    width: 100%;
    overflow: hidden;
}

/* The visible circular track */
.history-circle-path {
    position: absolute;
    bottom: -350px; /* Pushes the center of the circle to the bottom of the screen */
    left: 50%;
    width: 1100px;
    height: 1100px;
    border-radius: 50%;
    border: 0px dashed rgba(255, 255, 255, 0.15); /* The dotted line */
    transform: translateX(-50%);
    pointer-events: none;
}

/* The Cards */

.history-card {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    
    /* Keep your existing Layout Logic here... */
    position: absolute;
    top: 110%; 
    left: 50%;
    width: 400px; 
    height: 60%; 
    padding: 2%;
    color: #fff;
    text-align: center;
    overflow-y: auto; 
    margin-left: -200px; 
    margin-top: -200px;
    will-change: transform, opacity;
}
/* Custom scrollbar for inside the cards */
.history-card::-webkit-scrollbar { width: 5px; }
.history-card::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 5px; }

.history-year-badge {
    font-family: 'Bree Serif', serif;
    font-size: 2.5rem;
    color: #DAA520;
    border-bottom: 2px solid #DAA520;
    display: inline-block;
    margin-bottom: 15px;
}

/* Invisible spacer that dictates how far you can scroll */
.history-spacer {
    /* 6 sections * 700px height = 4200px total scroll distance */
    height: 4200px; 
    position: absolute;
    top: 0; left: 0; width: 100%;
    z-index: -1; 
}
.snap-point {
    height: 700px;
    width: 100%;
    scroll-snap-align: start;
}

.team_captain_image_style {
    height: 60% !important;
    width: 50% !important;
    object-fit: fill;
    aspect-ratio: 3/5;
    align-items: center !important;
    margin-top: 3% !important;
}


.team_vice_captain_image_style {
    height: 60% !important;
    width: 50% !important;
    object-fit: fill;
    aspect-ratio: 4/6;
    margin-top: 3% !important;
    align-items: center !important;
}



/* --- Icon Crash Animation --- */

.animate-crash {
    /* Runs the animation for 0.8 seconds */
    animation: riseRotateCrash 0.8s ease-in-out forwards !important;
}

@keyframes riseRotateCrash {
    0% { 
        transform: translateY(0) rotate(0deg); 
    }
    40% { 
        /* Rise up 80px and start spinning */
        transform: translateY(-80px) rotate(180deg); 
    }
    65% { 
        /* Peak height, keep spinning */
        transform: translateY(-100px) rotate(270deg); 
    }
    85% { 
        /* CRASH DOWN: Drop below the baseline (20px) and squish (scaleY) on impact */
        transform: translateY(20px) rotate(360deg) scaleY(0.5); 
    }
    100% { 
        /* Snap back to normal resting state */
        transform: translateY(0) rotate(360deg) scaleY(1); 
    }
}



/* Ensure both <i> and <svg> tags can animate, just to be safe */
.social-icon-wrapper i, .social-icon-wrapper svg {
    transition: transform 0.3s ease, color 0.3s ease;
    display: inline-block !important; /* Forces the icon to allow movement */
    transform-origin: center;
}

/* Optional: Add a subtle hover effect so users know they are clickable */
.social-icon-wrapper:hover i, .social-icon-wrapper:hover svg {
    transform: translateY(-5px);
    color: #DAA520 !important; /* TFT Goldenrod */
}


                                                                        /* Sponsers Section */


.sponsers_heading_style {
    font-family: 'Bree Serif', serif;
    font-size: 300% !important; /* Adjusted size slightly */
    color: goldenrod !important; /* Changed to Goldenrod */
    text-align: left; /* Aligned left to match the button */
    margin-top: 5% !important;
}

.sponsers_image{
    height: 100% !important;
    width: 100% !important;
    border-radius: 2%;
    aspect-ratio: 2;
    
}

.sponsers_image_md{
    height: 100% !important;
    width: 100% !important;
    border-radius: 2%;
    aspect-ratio: 6/3;
    padding: 2%;
    
}





/* --- The Premium Apple Dark Glass Effect --- */
.shadow-large {
    /* 1. The Tint: Dark enough to read white text */
    background: rgba(15, 20, 25, 0.45) !important; 
    
    /* 2. The Apple Blur (Sledgehammer applied) */
    backdrop-filter: blur(25px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(200%) !important; 
    
    /* 3. The Edge & Shape */
    border: 0px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px; 
    
    /* 4. The Shadow */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5) !important;
    
    /* Your existing Layout Logic */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    padding: 50px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover Effect */
.shadow-large:hover {
    background: rgba(25, 30, 35, 0.55) !important; 
    backdrop-filter: blur(25px) saturate(200%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
    border: 0px solid rgba(255, 255, 255, 0.3) !important; 
    transform: translateY(-5px); 
    box-shadow: 0 15px 40px 0 rgba(0, 0, 0, 0.6) !important;
}

.shadow-small {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px; 
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    
    /* Keep your existing Layout Logic here... */
    width: fit-content; 
    max-width: 100%;   
    height: auto;       
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* 3. Hover Effect: "Lifting" the Glass */
.shadow-small:hover {
    transform: translateY(-15px); /* Float up */
    background: transparent !important; /* Get slightly brighter */
    border-color: transparent; /* Edge shines brighter */
    color: goldenrod !important; /* Text turns golden on hover */
    box-shadow: 0 15px 40px 0 rgba(0, 0, 0, 0.4); /* Shadow gets deeper */
    transition: transform 0.3s ease;
}



/* 4. Text Handling */
/* Since background is dark, text MUST be white */
h1, p, .sponsers_heading_style {
    color: #ffffff ;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Improves legibility on glass */
}

/* 5. Image Handling */
/* Adds a white glow filter to black logos so they are visible on dark glass */
.img-fluid {
    filter: brightness(0) invert(1); /* Turns black logos to white */
    opacity: 0.8;
    transition: 0.3s;
}

.shadow-large:hover .img-fluid {
    opacity: 1; /* Full brightness on hover */
    filter: none; /* Shows original brand colors on hover! */
}




                                                            /*  Vehicle Bay*/

                                                
.vehicle_bay_image{
    aspect-ratio:  13/9;
    object-fit: cover !important;
    margin-top: 5%;
    width: 100% !important;
    height: auto !important;
    border-radius: 10px;


}

/* Add this to your gallery images for a premium feel */
.gallery-image {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
}

.gallery-image:hover {
    transform: scale(1.05); /* Zooms the photo in slightly */
    box-shadow: 0 10px 30px rgba(0, 201, 177, 0.3); /* Adds a subtle Petronas Teal glow behind the photo */
    z-index: 10;
}