@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');



.web-team-info {

    background: linear-gradient(45deg, red, pink, yellow);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    transition: all 0.4s ease;

}



.web-team-info:hover {

    background: linear-gradient(45deg, yellow, pink, red);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

    transform: scale(1.1);

    text-shadow: 0 0 5px rgba(255, 0, 0, 0.6);

}





.director-photo1 {

    height: 180px;

    border-radius: 20px;

}



.h a {

    color: inherit;

    text-decoration: none;

    font-size: 13px;

}



.h a:hover {

    text-decoration: underline;

}



#p {

    font-size: 30px;

}



a.linkedin {

    color: #0a66c2;

    background: #e9f5ff;

    padding: 10px 14px;

    border-radius: 50%;

    font-size: 20px;

    text-decoration: none;

    transition: all 0.3s ease;

}



a.linkedin:hover {

    background: #0a66c2;

    color: #fff;

    transform: scale(1.1);

}





* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}









body {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    line-height: 1.6;

    color: #2c3e50;

    background: linea-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);

    background-size: 400% 400%;

    animation: gradientShift 15s ease infinite;

    min-height: 100vh;

}



@keyframes gradientShift {

    0% {

        background-position: 0% 50%;

    }



    50% {

        background-position: 100% 50%;

    }



    100% {

        background-position: 0% 50%;

    }

}



/* Header */

.header {

    background: linear-gradient(135deg, #4e54c8, #8f94fb);

    color: white;

    padding: 20px 0;

    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);

    backdrop-filter: blur(4px);

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

    position: relative;

    overflow: hidden;

}



.header::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

    animation: headerShine 3s infinite;

}



@keyframes headerShine {

    0% {

        left: -100%;

    }



    100% {

        left: 100%;

    }

}



.header-content {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    text-align: center;

    padding: 20px;

    position: relative;

    z-index: 2;

}



.logo-section {

    display: flex;

    align-items: center;

    gap: 20px;

}



.logo img {

    height: 140px;





    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);

    transition: all 0.3s ease;

}







.logo {

    padding: 20px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    color: white;

    font-size: 12px;

    text-align: center;



}



@keyframes logoFloat {



    0%,

    100% {

        transform: translateY(0px);

    }



    50% {

        transform: translateY(-10px);

    }

}



.institute-info h1 {

    font-size: 24px;

    margin-bottom: 5px;

    background: linear-gradient(45deg, #ff9a9e, #fecfef);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.institute-info h2 {

    font-size: 18px;

    font-weight: 300;

    margin-bottom: 5px;

    color: #f8f9fa;

}



.institute-info p {

    font-size: 14px;

    opacity: 0.9;

    color: #e9ecef;

}



.admin-login {

    background: linear-gradient(135deg, #ff6b6b, #ee5a52);

    padding: 12px 25px;

    border-radius: 25px;

    text-decoration: none;

    color: white;

    transition: all 0.3s ease;

    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);

    position: relative;

    overflow: hidden;

}



.admin-login::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);

    transition: left 0.5s;

}



.admin-login:hover::before {

    left: 100%;

}



.admin-login:hover {

    transform: translateY(-3px) scale(1.05);

    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.6);

}



/* Navigation */

.nav {

    background: linear-gradient(135deg, #667eea, #764ba2);

    padding: 0;

    position: relative;

}



.nav::after {

    content: '';

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: linear-gradient(90deg, #ff6b6b, #feca57, #48cae4, #f72585);

    background-size: 400% 100%;

    animation: navGradient 3s ease infinite;

}



@keyframes navGradient {

    0% {

        background-position: 0% 50%;

    }



    50% {

        background-position: 100% 50%;

    }



    100% {

        background-position: 0% 50%;

    }

}



.nav-content {

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    overflow-x: auto;

}



.nav a {

    color: white;

    text-decoration: none;

    padding: 15px 20px;

    white-space: nowrap;

    transition: all 0.3s ease;

    position: relative;

}



.nav a::before {

    content: '';

    position: absolute;

    bottom: 0;

    left: 50%;

    width: 0;

    height: 3px;

    background: linear-gradient(90deg, #ff6b6b, #feca57);

    transition: all 0.3s ease;

    transform: translateX(-50%);

}



.nav a:hover::before,

.nav a.active::before {

    width: 80%;

}



.nav a:hover,

.nav a.active {

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

    transform: translateY(-2px);

}



/* Main Content */

.main-content {

    max-width: 1200px;

    margin: 0 auto;

    padding: 30px 20px;

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 30px;

}



/* Placement Stats */

.placement-stats {

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

    backdrop-filter: blur(10px);

    border-radius: 20px;

    padding: 30px;

    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);

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

    margin-bottom: 30px;

    position: relative;

    overflow: hidden;

}



.placement-stats::before {

    content: '';

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: conic-gradient(from 0deg, transparent, rgba(255, 107, 107, 0.1), transparent);

    animation: rotate 10s linear infinite;

}



@keyframes rotate {

    0% {

        transform: rotate(0deg);

    }



    100% {

        transform: rotate(360deg);

    }

}



.stats-header {

    text-align: center;

    margin-bottom: 30px;

    position: relative;

    z-index: 2;

}



.stats-header h2 {

    background: linear-gradient(135deg, #667eea, #764ba2);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    font-size: 28px;

    margin-bottom: 10px;

}



.stats-grid {

    display: grid;

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

    gap: 20px;

    margin-bottom: 30px;

    position: relative;

    z-index: 2;

}



.stat-card {

    background: linear-gradient(135deg, #ff6b6b, #feca57);

    color: white;

    padding: 25px;

    border-radius: 15px;

    text-align: center;

    transform: translateY(0);

    transition: all 0.3s ease;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);

    position: relative;

    overflow: hidden;

}



.stat-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);

    transition: left 0.5s;

}



.stat-card:hover::before {

    left: 100%;

}



.stat-card:nth-child(2) {

    background: linear-gradient(135deg, #48cae4, #0077b6);

}



.stat-card:nth-child(3) {

    background: linear-gradient(135deg, #f72585, #b5179e);

}



.stat-card:nth-child(4) {

    background: linear-gradient(135deg, #90e0ef, #00b4d8);

}



.stat-card:hover {

    transform: translateY(-8px) scale(1.05);

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);

}



.stat-number {

    font-size: 36px;

    font-weight: bold;

    margin-bottom: 10px;

    display: block;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

}



.stat-label {

    font-size: 14px;

    opacity: 0.9;

}



/* Placement Chart */

/* Layout Setup */

.placement-chart {

    display: flex;

    align-items: center;

    gap: 30px;

    position: relative;

    z-index: 2;

}



/* Chart Container */

.chart-container {

    position: relative;

    width: 300px;

    height: 300px;

}



/* Pie Chart with New 5-Color Gradient */

.pie-chart {

    width: 100%;

    height: 100%;

    border-radius: 50%;

    background: conic-gradient(#FF6B6B 0deg 89deg,

            /* Coral Red */

            #FFD93D 89deg 178deg,

            /* Vivid Yellow */

            #6BCB77 178deg 267deg,

            /* Fresh Green */

            #4D96FF 267deg 356deg,

            /* Cool Blue */

            #FF9CEE 356deg 360deg

            /* Soft Pink */

        );

    position: relative;

    animation: chartRotate 20s linear infinite;

}



/* Center Text Circle Inside Chart */

.pie-chart::after {

    content: '95%\AOverall\APlacement';

    white-space: pre;

    position: absolute;

    top: 50%;

    left: 50%;

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

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

    backdrop-filter: blur(10px);

    width: 120px;

    height: 120px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    font-weight: bold;

    color: #2c3e50;

    font-size: 18px;

    line-height: 1.3;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

}



/* Rotation Animation */

@keyframes chartRotate {

    0% {

        transform: rotate(0deg);

    }



    100% {

        transform: rotate(360deg);

    }

}



/* Legend Styling */

.chart-legend {

    display: flex;

    flex-direction: column;

    gap: 15px;

}



.legend-item {

    display: flex;

    align-items: center;

    gap: 10px;

    transition: transform 0.3s ease;

}



.legend-color {

    width: 20px;

    height: 20px;

    border-radius: 4px;

}



/* Optional Hover Effect on Legends */

.legend-item:hover {

    transform: scale(1.05);

}





.legend-item {

    display: flex;

    align-items: center;

    gap: 10px;

    transition: transform 0.3s ease;

}



.legend-item:hover {

    transform: translateX(5px);

}



.legend-color {

    width: 20px;

    height: 20px;

    border-radius: 50%;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

}



.legend-color:nth-child(1) {

    background: #ff6b6b;

}



.legend-color:nth-child(2) {

    background: #feca57;

}



.legend-color:nth-child(3) {

    background: #48cae4;

}



.legend-color:nth-child(4) {

    background: #f72585;

}



.legend-color:nth-child(5) {

    background: #90e0ef;

}



.legend-text {

    font-weight: 500;

    color: #2c3e50;

}



/* graph css ch */



/* * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }



        body {

            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            min-height: 100vh;

            padding: 20px;

        } */



.bar-ch-container {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    min-height: 100vh;

    padding: 20px;

    max-width: 1400px;

    margin: 0 auto;



}





.bar-ch-header {

    text-align: center;

    margin-bottom: 40px;

    color: white;

}



.bar-ch-header h1 {

    font-size: 2.5rem;

    font-weight: 700;

    margin-bottom: 10px;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

}



.bar-ch-header p {

    font-size: 1.2rem;

    opacity: 0.9;

}



.bar-ch-stats-grid {

    display: grid;

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

    gap: 25px;

    margin-bottom: 40px;

}



.bar-ch-stat-card {

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

    border-radius: 20px;

    padding: 25px;

    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);

    backdrop-filter: blur(4px);

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

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.bar-ch-stat-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 12px 40px rgba(31, 38, 135, 0.5);

}



.bar-ch-stat-card h3 {

    color: #4a5568;

    font-size: 1.3rem;

    margin-bottom: 20px;

    text-align: center;

    font-weight: 600;

}



.bar-ch-chart-container {

    position: relative;

    height: 400px;

    margin-bottom: 20px;

}



.bar-ch-overall-chart {

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

    border-radius: 20px;

    padding: 30px;

    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);

    backdrop-filter: blur(4px);

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

    margin-bottom: 30px;

}



.bar-ch-overall-chart h2 {

    color: #4a5568;

    font-size: 1.8rem;

    margin-bottom: 25px;

    text-align: center;

    font-weight: 600;

}



.bar-ch-overall-chart-container {

    position: relative;

    height: 500px;

}



.bar-ch-year-tabs {

    display: flex;

    justify-content: center;

    margin-bottom: 30px;

    gap: 10px;

    flex-wrap: wrap;

}



.bar-ch-tab-button {

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

    color: white;

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

    padding: 12px 24px;

    border-radius: 25px;

    cursor: pointer;

    font-size: 1rem;

    font-weight: 600;

    transition: all 0.3s ease;

}



.bar-ch-tab-button:hover {

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

    transform: translateY(-2px);

}



.bar-ch-tab-button.active {

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

    color: #4a5568;

    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);

}



.bar-ch-stats-summary {

    display: grid;

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

    gap: 20px;

    margin-bottom: 30px;

}



.bar-ch-summary-card {

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

    border-radius: 15px;

    padding: 20px;

    text-align: center;

    color: white;

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

}



.bar-ch-summary-card h4 {

    font-size: 1.1rem;

    margin-bottom: 10px;

    opacity: 0.9;

}



.bar-ch-summary-card .value {

    font-size: 1.8rem;

    font-weight: 700;

    color: #fff;

}



@media (max-width: 768px) {

    .bar-ch-header h1 {

        font-size: 2rem;

    }



    .bar-ch-chart-container {

        height: 300px;

    }



    .bar-ch-overall-chart-container {

        height: 400px;

    }

}



/* .modify-container {



    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;



}  */

/* Top Companies */

.top-companies {

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

     backdrop-filter: blur(10px); 

     border-radius: 20px;  

  padding: 30px; 

     box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);

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

    grid-column: 1 / -1; 



   

}



.companies-header {

    text-align: center;

    margin-bottom: 30px;



}



.companies-header h3 {

    background: linear-gradient(135deg, #f72585, #b5179e);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    font-size: 24px;

    margin-bottom: 10px;



}



.companies-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

    gap: 20px;

    margin-bottom: 30px;

    justify-items: center;

    align-items: center;

}



.company-logo {

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

    backdrop-filter: blur(10px);

    border: 2px solid transparent;

    background-clip: padding-box;

    border-radius: 15px;

    padding: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100px;

    width: 100px;

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

    transition: all 0.3s ease;

    cursor: pointer;

    position: relative;

    overflow: hidden;

}



.company-logo::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(45deg, #ff6b6b, #feca57, #48cae4, #f72585);

    background-size: 400% 400%;

    animation: gradientShift 3s ease infinite;

    border-radius: 15px;

    opacity: 0;

    transition: opacity 0.3s ease;

}



.company-logo img {

    height: 100%;

    width: 100%;

    object-fit: contain;

    border-radius: 50%;

    transition: transform 0.3s ease;

    position: relative;

    z-index: 2;

}



.company-logo:hover::before {

    opacity: 0.2;

}



.company-logo:hover {

    transform: translateY(-8px) scale(1.05);

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);

}



.company-logo:hover img {

    transform: scale(1.1) rotate(5deg);

}



/* Sidebar */

.sidebar {

    display: flex;

    flex-direction: column;

    gap: 30px;

}



/* Director's Message */

.directors-message {

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

    backdrop-filter: blur(10px);

    border-radius: 20px;

    padding: 25px;

    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);

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

}



.directors-message h3 {

    background: linear-gradient(135deg, #48cae4, #0077b6);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    margin-bottom: 20px;

    text-align: center;

}



.director-info {

    text-align: center;

    margin-bottom: 20px;

}



.director-photo {

    width: 200px;

    height: 200px;



    background: linea-gradient(135deg, #ff9a9e, #fecfef);

    margin: 0 auto 15px;

    border: 4px solid transparent;

    background-clip: padding-box;



}



@keyframes photoFloat {



    0%,

    100% {

        transform: translateY(0px) rotate(0deg);

    }



    50% {

        transform: translateY(-8px) rotate(2deg);

    }

}



.director-name {

    font-weight: bold;

    margin-bottom: 5px;

    color: #2c3e50;

}



.director-title {

    color: #6c757d;

    font-size: 14px;

}



.director-message {

    font-size: 14px;

    line-height: 1.6;

    color: #495057;

    text-align: justify;

}



/* News Section */

.news-section {

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

    backdrop-filter: blur(10px);

    border-radius: 20px;

    padding: 25px;

    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);

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

}



.news-header {

    background: linear-gradient(135deg, #f72585, #b5179e);

    color: white;

    padding: 15px;

    margin: -25px -25px 20px -25px;

    border-radius: 20px 20px 0 0;

    text-align: center;

    font-weight: bold;

    position: relative;

    overflow: hidden;

}



.news-header::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);

    animation: newsShine 2s infinite;

}



@keyframes newsShine {

    0% {

        left: -100%;

    }



    100% {

        left: 100%;

    }

}



.news-item {

    padding: 12px 0;

    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    font-size: 14px;

    line-height: 1.5;

    transition: all 0.3s ease;

    border-radius: 8px;

}



.news-item:last-child {

    border-bottom: none;

}



.news-item:hover {

    background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(254, 202, 87, 0.1));

    padding-left: 15px;

    transform: translateX(5px);

}



/* Office Team Section */

.office-team {

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

    backdrop-filter: blur(10px);

    border-radius: 20px;

    padding: 30px;

    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);

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

    margin-top: 30px;

    grid-column: 1 / -1;

}



.team-header {

    text-align: center;

    margin-bottom: 30px;

}



.team-header h3 {

    background: linear-gradient(135deg, #90e0ef, #00b4d8);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    font-size: 24px;

    margin-bottom: 10px;

}



.team-grid {

    display: grid;

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

    gap: 25px;

}



.team-member {

    text-align: center;

    padding: 20px;

    border-radius: 15px;

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

}



.team-member::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(254, 202, 87, 0.1));

    opacity: 0;

    transition: opacity 0.3s ease;

    border-radius: 15px;

}



.team-member:hover::before {

    opacity: 1;

}



.team-member:hover {

    transform: translateY(-8px);

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);

}



.member-photo {

    width: 120px;

    height: 120px;

    border-radius: 50%;

    background: linear-gradient(135deg, #ff9a9e, #fecfef);

    margin: 0 auto 15px;

    border: 3px solid transparent;

    background-clip: padding-box;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);

    position: relative;

    z-index: 2;

}



.member-name {

    font-weight: bold;

    margin-bottom: 5px;

    background: linear-gradient(135deg, #667eea, #764ba2);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    position: relative;

    z-index: 2;

}



.member-title {

    color: #6c757d;

    font-size: 14px;

    position: relative;

    z-index: 2;

}



/* Contact Section */

.contact-section {

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

    backdrop-filter: blur(10px);

    padding: 60px 0;

    margin-top: 30px;

}



.contact-container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



.contact-section h2 {

    text-align: center;

    background: linear-gradient(135deg, #f72585, #b5179e);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    font-size: 36px;

    margin-bottom: 15px;

    font-weight: bold;

}



.contact-subtitle {

    text-align: center;

    color: #6c757d;

    margin-bottom: 50px;

    font-size: 16px;

}



.contact-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 50px;

    margin-bottom: 50px;

}



.contact-info {

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.contact-item {

    display: flex;

    align-items: flex-start;

    gap: 20px;

    transition: transform 0.3s ease;

}



.contact-item:hover {

    transform: translateX(10px);

}



.contact-icon {

    width: 50px;

    height: 50px;

    background: linear-gradient(135deg, #ff6b6b, #feca57);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    flex-shrink: 0;

    color: white;

    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);

    animation: iconPulse 2s ease-in-out infinite;

}



@keyframes iconPulse {



    0%,

    100% {

        transform: scale(1);

    }



    50% {

        transform: scale(1.1);

    }

}



.contact-item:nth-child(2) .contact-icon {

    background: linear-gradient(135deg, #48cae4, #0077b6);

    box-shadow: 0 8px 25px rgba(72, 202, 228, 0.4);

}



.contact-item:nth-child(3) .contact-icon {

    background: linear-gradient(135deg, #f72585, #b5179e);

    box-shadow: 0 8px 25px rgba(247, 37, 133, 0.4);

}



.contact-details h4 {

    background: linear-gradient(135deg, #667eea, #764ba2);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    margin-bottom: 8px;

    font-size: 18px;

}



.contact-details p {

    color: #495057;

    line-height: 1.6;

}



.contact-details a {

    background: linear-gradient(135deg, #ff6b6b, #feca57);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    text-decoration: none;

    transition: all 0.3s ease;

}



.contact-details a:hover {

    text-decoration: underline;

    transform: scale(1.05);

}



.contact-form {

    background: rgba(248, 249, 250, 0.8);

    backdrop-filter: blur(10px);

    padding: 30px;

    border-radius: 20px;

    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);

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

}



.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

    margin-bottom: 15px;

}



.contact-form input,

.contact-form textarea {

    width: 100%;

    padding: 15px;

    border: 2px solid rgba(0, 0, 0, 0.1);

    border-radius: 12px;

    font-size: 14px;

    transition: all 0.3s ease;

    margin-bottom: 15px;

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

    backdrop-filter: blur(5px);

}



.contact-form input:focus,

.contact-form textarea:focus {

    outline: none;

    border: 2px solid transparent;

    background: linear-gradient(white, white) padding-box,

        linear-gradient(135deg, #ff6b6b, #feca57) border-box;

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);

}



.contact-form button {

    background: linear-gradient(135deg, #ff6b6b, #feca57);

    color: white;

    padding: 15px 30px;

    border: none;

    border-radius: 12px;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

    transition: all 0.3s ease;

    width: 100%;

    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);

    position: relative;

    overflow: hidden;

}



.contact-form button::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);

    transition: left 0.5s;

}



.contact-form button:hover::before {

    left: 100%;

}



.contact-form button:hover {

    transform: translateY(-3px) scale(1.02);

    box-shadow: 0 12px 35px rgba(255, 107, 107, 0.6);

}



.map-container {

    margin-top: 40px;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);

}



.map-placeholder {

    width: 100%;

    height: 300px;

    background: linear-gradient(135deg, #667eea, #764ba2);

    position: relative;

}



.map-placeholder iframe {

    border-radius: 20px;

}



/* Footer */

.footer {

    background: linear-gradient(135deg, #2c3e50, #34495e);

    color: white;

    padding: 40px 0 20px;

    position: relative;

    overflow: hidden;

}



.footer::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, #ff6b6b, #feca57, #48cae4, #f72585, #90e0ef);

    background-size: 400% 100%;

    animation: footerGradient 5s ease infinite;

}



@keyframes footerGradient {

    0% {

        background-position: 0% 50%;

    }



    50% {

        background-position: 100% 50%;

    }



    100% {

        background-position: 0% 50%;

    }

}



.footer-content {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

    text-align: center;

    position: relative;

    z-index: 2;

}



.social-section {

    margin-bottom: 30px;

}



.social-section h3 {

    background: linear-gradient(135deg, #ff6b6b, #feca57);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    margin-bottom: 20px;

    font-size: 24px;

}



.social-links {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-bottom: 30px;

}



.social-link {

    width: 50px;

    height: 50px;

    background: linear-gradient(135deg, #495057, #6c757d);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size: 20px;

    transition: all 0.3s ease;

    color: white;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

    position: relative;

    overflow: hidden;

}



.social-link::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(135deg, #ff6b6b, #feca57);

    opacity: 0;

    transition: opacity 0.3s ease;

    border-radius: 50%;

}



.social-link:hover::before {

    opacity: 1;

}



.social-link:hover {

    transform: translateY(-5px) scale(1.1);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);

}



.social-link.facebook::before {

    background: linear-gradient(135deg, #3b5998, #8b9dc3);

}



.social-link.twitter::before {

    background: linear-gradient(135deg, #1da1f2, #0d8bd9);

}



.social-link.instagram::before {

    background: linear-gradient(135deg, #e4405f, #833ab4, #fd1d1d, #fcb045);

}



.social-link.linkedin::before {

    background: linear-gradient(135deg, #0077b5, #00a0dc);

}



.social-link i {

    position: relative;

    z-index: 2;

}



.footer-text {

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

    padding-top: 20px;

    color: #adb5bd;

    font-size: 14px;

}



/* Enhanced Animations */

@keyframes pulse {



    0%,

    100% {

        transform: scale(1);

        opacity: 1;

    }



    50% {

        transform: scale(1.05);

        opacity: 0.8;

    }

}



@keyframes bounce {



    0%,

    20%,

    53%,

    80%,

    100% {

        transform: translateY(0);

    }



    40%,

    43% {

        transform: translateY(-20px);

    }



    70% {

        transform: translateY(-10px);

    }



    90% {

        transform: translateY(-4px);

    }

}



@keyframes shake {



    0%,

    100% {

        transform: translateX(0);

    }



    10%,

    30%,

    50%,

    70%,

    90% {

        transform: translateX(-5px);

    }



    20%,

    40%,

    60%,

    80% {

        transform: translateX(5px);

    }

}



@keyframes glow {



    0%,

    100% {

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

    }



    50% {

        box-shadow: 0 0 30px rgba(254, 202, 87, 0.7), 0 0 40px rgba(72, 202, 228, 0.5);

    }

}



/* Apply animations to various elements */

.stat-card:nth-child(odd) {

    animation: pulse 3s ease-in-out infinite;

}



.company-logo:nth-child(even) {

    animation: bounce 4s ease-in-out infinite;

}



.news-item:hover {

    animation: glow 1s ease-in-out;

}



/* Responsive Design */

@media (max-width: 768px) {

    .header-content {

        flex-direction: column;

        text-align: center;

        gap: 20px;

    }



    .main-content {

        grid-template-columns: 1fr;

        padding: 20px 10px;

    }



    .placement-chart {

        flex-direction: column;

        text-align: center;

    }



    .stats-grid {

        grid-template-columns: 1fr;

    }



    .companies-grid {

        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));

    }



    .contact-content {

        grid-template-columns: 1fr;

        gap: 30px;

    }



    .form-row {

        grid-template-columns: 1fr;

    }



    .contact-section h2 {

        font-size: 28px;

    }



    .social-links {

        flex-wrap: wrap;

    }



    /* Mobile-specific animations */

    .stat-card {

        animation: fadeInUp 0.8s ease-out;

    }



    .team-member {

        animation: fadeInUp 1s ease-out;

    }

}



/* Additional Animation Classes */

.fade-in {

    animation: fadeInUp 0.8s ease-out;

}



.slide-in-left {

    animation: slideInLeft 0.8s ease-out;

}



.slide-in-right {

    animation: slideInRight 0.8s ease-out;

}



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes slideInLeft {

    from {

        opacity: 0;

        transform: translateX(-50px);

    }



    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes slideInRight {

    from {

        opacity: 0;

        transform: translateX(50px);

    }



    to {

        opacity: 1;

        transform: translateX(0);

    }

}



/* Scrollbar Styling */

::-webkit-scrollbar {

    width: 8px;

}



::-webkit-scrollbar-track {

    background: rgba(0, 0, 0, 0.1);

    border-radius: 10px;

}



::-webkit-scrollbar-thumb {

    background: linear-gradient(135deg, #ff6b6b, #feca57);

    border-radius: 10px;

}



::-webkit-scrollbar-thumb:hover {

    background: linear-gradient(135deg, #f72585, #48cae4);

}



/* Selection Styling */

::selection {

    background: linear-gradient(135deg, #ff6b6b, #feca57);

    color: white;

}



::-moz-selection {

    background: linear-gradient(135deg, #ff6b6b, #feca57);

    color: white;

}





/* INTERNSHIPS ROADMAP SECTION */

.roadmap-container {

    position: relative;

    padding: 40px 0;

}



.roadmap-timeline {

    position: relative;

    max-width: 1000px;

    margin: 0 auto;

}



.roadmap-timeline::before {

    content: '';

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 4px;

    height: 100%;

    background: linear-gradient(180deg, #667eea 0%, #764ba2 50%, #ff6b6b 100%);

    border-radius: 2px;

}



.roadmap-item {

    position: relative;

    margin: 40px 0;

    opacity: 0;

    animation: slideIn 0.8s forwards;

}



.roadmap-item:nth-child(odd) {

    text-align: right;

    padding-right: calc(50% + 40px);

}



.roadmap-item:nth-child(even) {

    text-align: left;

    padding-left: calc(50% + 40px);

}



.roadmap-item::before {

    content: '';

    position: absolute;

    top: 30px;

    width: 20px;

    height: 20px;

    background: #ff6b6b;

    border-radius: 50%;

    border: 4px solid white;

    box-shadow: 0 0 0 4px #ff6b6b;

    z-index: 2;

}



.roadmap-item:nth-child(odd)::before {

    right: calc(50% - 10px);

}



.roadmap-item:nth-child(even)::before {

    left: calc(50% - 10px);

}



.roadmap-card {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    color: white;

    padding: 25px;

    border-radius: 15px;

    position: relative;

    transition: all 0.3s;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);

    max-width: 400px;

}



.roadmap-item:nth-child(odd) .roadmap-card {

    margin-left: auto;

}



.roadmap-item:nth-child(even) .roadmap-card {

    margin-right: auto;

}



.roadmap-card:hover {

    transform: scale(1.05);

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);

}



.roadmap-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);

    border-radius: 15px 15px 0 0;

}



.roadmap-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 15px;

}



.roadmap-date {

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

    padding: 5px 12px;

    border-radius: 20px;

    font-size: 0.85em;

    font-weight: bold;

}



.roadmap-status {

    background: #4ecdc4;

    color: white;

    padding: 3px 10px;

    border-radius: 15px;

    font-size: 0.8em;

    font-weight: bold;

}



.student-name {

    font-size: 1.3em;

    font-weight: bold;

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    gap: 8px;

}



.student-name::before {

    content: '🎓';

    font-size: 1.1em;

}



.roadmap-details {

    font-size: 0.9em;

    line-height: 1.6;

    margin-bottom: 15px;

}



.roadmap-details strong {

    color: #ffcccb;

}



.company-highlight {

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

    padding: 10px 15px;

    border-radius: 10px;

    margin: 10px 0;

    border-left: 4px solid #4ecdc4;

}



.company-name {

    color: #4ecdc4;

    font-weight: bold;

    font-size: 1.1em;

}



.stipend {

    background: #ff6b6b;

    color: white;

    padding: 8px 15px;

    border-radius: 20px;

    display: inline-block;

    font-weight: bold;

    font-size: 0.9em;

}



.roadmap-arrow {

    position: absolute;

    top: 35px;

    width: 0;

    height: 0;

    z-index: 1;

}



.roadmap-item:nth-child(odd) .roadmap-arrow {

    right: calc(50% - 15px);

    border-left: 15px solid #667eea;

    border-top: 10px solid transparent;

    border-bottom: 10px solid transparent;

}



.roadmap-item:nth-child(even) .roadmap-arrow {

    left: calc(50% - 15px);

    border-right: 15px solid #667eea;

    border-top: 10px solid transparent;

    border-bottom: 10px solid transparent;

}



@keyframes slideIn {

    from {

        opacity: 0;

        transform: translateY(30px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* 

new css for brochure ch updated  */





/* .container-stats11 { 



 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

            color: white;

            line-height: 1.6



            

  }; */



.container-stats11 {

    margin: 0 40px;

    padding: 30px;

    border-radius: 25px;

    color: #ffffff;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);

    overflow: hidden;



    /* Animated Gradient Based on Header Color */

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    background-size: 400% 400%;

    animation: gradientFlow 10s ease infinite;



    /* Entry Animation */

    opacity: 0;

    transform: translateY(30px);

    animation: fadeInUp 0.8s ease forwards, gradientFlow 10s ease infinite;

}



/* Background Gradient Animation */

@keyframes gradientFlow {

    0% {

        background-position: 0% 50%;

    }



    50% {

        background-position: 100% 50%;

    }



    100% {

        background-position: 0% 50%;

    }

}



/* Fade-in on load */

@keyframes fadeInUp {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}











.section111 {

    margin-bottom: 60px;

}



.section-title111 {

    text-align: center;

    font-size: 32px;

    margin-bottom: 40px;

    background: linear-gradient(45deg, #fff, #f0f0f0);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.stats-grid111 {

    display: grid;

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

    gap: 30px;

    margin-bottom: 40px;

}



.stat-card111 {

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

    backdrop-filter: blur(10px);

    border-radius: 20px;

    padding: 30px;

    text-align: center;

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

    transition: all 0.3s ease;

}



.stat-card111:hover {

    transform: translateY(-10px);

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

}



.stat-number111 {

    font-size: 48px;

    font-weight: bold;

    margin-bottom: 10px;

    background: linear-gradient(45deg, #ffd700, #ffed4e);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.stat-labe111 {

    font-size: 16px;

    opacity: 0.9;

}



.year-wise-grid111 {

    display: grid;

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

    gap: 20px;

}



.year-card111 {

    background: linear-gradient(135deg, #ff6b6b, #ee5a52);

    border-radius: 15px;

    padding: 25px;

    text-align: center;

    transition: all 0.3s ease;

}



.year-card111:nth-child(even) {

    background: linear-gradient(135deg, #4ecdc4, #44a08d);

}



.year-card111:nth-child(3n) {

    background: linear-gradient(135deg, #45b7d1, #96c93d);

}



.year-card111:hover {

    transform: scale(1.05);

}



.year111 {

    font-size: 20px;

    font-weight: bold;

    margin-bottom: 10px;

}



.placement-rate111 {

    font-size: 32px;

    font-weight: bold;

    margin-bottom: 5px;

}



.dept-grid111 {

    display: grid;

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

    gap: 25px;

}



.dept-card111 {

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

    backdrop-filter: blur(10px);

    border-radius: 15px;

    padding: 25px;

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

    transition: all 0.3s ease;

}



.dept-card111:hover {

    transform: translateY(-5px);

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

}



.dept-name111 {

    font-size: 20px;

    font-weight: bold;

    margin-bottom: 15px;

    color: #ffd700;

}



.dept-stats111 {

    display: flex;

    justify-content: space-between;

    margin-bottom: 10px;

}







.download-section {

    text-align: center;

    padding: 60px 20px;

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

    backdrop-filter: blur(10px);

    border-radius: 20px;

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

}



.download-btn {

    background: linear-gradient(45deg, #ff6b6b, #ee5a52);

    color: white;

    padding: 15px 40px;

    border: none;

    border-radius: 30px;

    font-size: 18px;

    font-weight: bold;

    cursor: pointer;

    transition: all 0.3s ease;

    text-decoration: none;

    display: inline-block;

}



.download-btn:hover {

    transform: translateY(-3px);

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

}



.achievement-badge111 {

    background: linear-gradient(45deg, #ffd700, #ffed4e);

    color: #333;

    padding: 10px 20px;

    border-radius: 25px;

    font-weight: bold;

    display: inline-block;

    margin: 10px 5px;

    transition: all 0.3s ease;

}



.achievement-badge111:hover {

    transform: scale(1.05);

}



@media (max-width: 768px) {

    .header-content {

        flex-direction: column;

        text-align: center;

    }



    .logo {

        margin-right: 0;

        margin-bottom: 20px;

    }



    .nav-links {

        flex-wrap: wrap;

        justify-content: center;

        gap: 15px;

    }



    .stats-grid {

        grid-template-columns: 1fr;

    }



    .year-wise-grid {

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

    }



    .dept-grid {

        grid-template-columns: 1fr;

    }

}



/* BROCHURE SECTION

.brochure-section {

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    color: white;

    text-align: center;

    position: relative;

    overflow: hidden;

}



.brochure-section::before {

    content: '';

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>');

    animation: float 6s ease-in-out infinite;

}



.brochure-content {

    position: relative;

    z-index: 2;

}



.brochure-title {

    font-size: 2.5em;

    margin-bottom: 20px;

    font-weight: 600;

}



.brochure-description {

    font-size: 1.2em;

    margin-bottom: 30px;

    opacity: 0.9;

    line-height: 1.6;

    max-width: 800px;

    margin-left: auto;

    margin-right: auto;

}



.brochure-features {

    display: grid;

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

    gap: 20px;

    margin: 30px 0;

}



.feature-item {

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

    padding: 20px;

    border-radius: 15px;

    backdrop-filter: blur(10px);

}



.feature-icon {

    font-size: 2em;

    margin-bottom: 10px;

}



.download-btn {

    background: #ff6b6b;

    color: white;

    padding: 18px 45px;

    border: none;

    border-radius: 50px;

    font-size: 1.2em;

    font-weight: bold;

    cursor: pointer;

    transition: all 0.3s;

    text-transform: uppercase;

    letter-spacing: 1px;

    position: relative;

    overflow: hidden;

}



.download-btn:hover {

    background: #ff5252;

    transform: translateY(-3px);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

}



.download-btn::before {

    content: '📄 ';

    margin-right: 8px;

} */



/* NEW ACHIEVERS SECTION */

.achievers-grid {

    display: grid;

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

    gap: 30px;

}



.achiever-card {

    background: linear-gradient(135deg, #4e54c8, #8f94fb);

    padding: 35px;

    border-radius: 20px;

    color: white;

    text-align: center;

    position: relative;

    transition: all 0.3s;

    overflow: hidden;

}



.achiever-card:hover {

    transform: translateY(-10px) scale(1.02);

    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);

}



.achiever-card::before {

    content: '';

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);

    animation: shine 3s infinite;

}



.achievement-badge {

    position: absolute;

    top: 15px;

    right: 15px;

    background: #ff6b6b;

    color: white;

    padding: 5px 12px;

    border-radius: 20px;

    font-size: 0.8em;

    font-weight: bold;

    text-transform: uppercase;

}



.achiever-avatar {

    width: 80px;

    height: 80px;

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

    border-radius: 50%;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2em;

    border: 3px solid rgba(255, 255, 255, 0.3);

}



.achiever-name {

    font-size: 1.5em;

    font-weight: bold;

    margin-bottom: 10px;

}



.achiever-branch {

    font-size: 1em;

    opacity: 0.9;

    margin-bottom: 15px;

}



.achievement-details {

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

    padding: 15px;

    border-radius: 10px;

    margin-top: 15px;

    backdrop-filter: blur(10px);

}



.achievement-company {

    font-size: 1.1em;

    font-weight: bold;

    color: #fff;

}



.achievement-package {

    font-size: 1.8em;

    font-weight: bold;

    color: #4ecdc4;

    margin: 10px 0;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);

}



.achievement-role {

    font-size: 0.95em;

    opacity: 0.9;

}



@keyframes float {



    0%,

    100% {

        transform: translateY(0px) rotate(0deg);

    }



    50% {

        transform: translateY(-20px) rotate(180deg);

    }

}



@keyframes shine {

    0% {

        transform: translateX(-100%) translateY(-100%) rotate(45deg);

    }



    100% {

        transform: translateX(100%) translateY(100%) rotate(45deg);

    }

}



.fade-in {

    opacity: 0;

    transform: translateY(30px);

    animation: fadeIn 0.8s forwards;

}



@keyframes fadeIn {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@media (max-width: 768px) {

    .roadmap-timeline::before {

        left: 30px;

    }



    .roadmap-item {

        padding-left: 70px !important;

        padding-right: 0 !important;

        text-align: left !important;

    }



    .roadmap-item::before {

        left: 20px !important;

        right: auto !important;

    }



    .roadmap-arrow {

        left: 35px !important;

        right: auto !important;

        border-right: 15px solid #667eea !important;

        border-left: none !important;

    }



    .roadmap-card {

        margin-left: 0 !important;

        margin-right: 0 !important;

        max-width: none !important;

    }

}



.container {

    padding: 20px 10px;

}



.section {

    padding: 25px 20px;

    margin-bottom: 25px;

}



.section-title {

    font-size: 1.8em;

    text-align: center;

}



.internship-grid,

.achievers-grid {

    grid-template-columns: 1fr;

}



.brochure-features {

    grid-template-columns: 1fr;

}



.container1 {

    max-width: 1200px;

    margin: 0 auto;

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

    border-radius: 20px;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);

    overflow: hidden;

    backdrop-filter: blur(10px);

}













.header1 {

    background: linear-gradient(45deg, #ff6b9d, #c471ed, #64b5f6, #ffb74d);

    background-size: 300% 300%;

    animation: headerGradient 6s ease infinite;

    padding: 50px 0;

    text-align: center;

    color: white;

    position: relative;

    overflow: hidden;

}



@keyframes headerGradient {

    0% {

        background-position: 0% 50%;

    }



    50% {

        background-position: 100% 50%;

    }



    100% {

        background-position: 0% 50%;

    }

}



.header1::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');

    opacity: 0.3;

}



.header1 h1 {

    font-size: 3.5rem;

    font-weight: 700;

    margin-bottom: 15px;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

    position: relative;

    z-index: 1;

}



.header p {

    font-size: 1.3rem;

    opacity: 0.9;

    position: relative;

    z-index: 1;

}



.team-grid {

    display: grid;

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

    gap: 30px;

    padding: 60px 40px;

}



.team-member {

    background: white;

    border-radius: 20px;

    padding: 30px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    position: relative;

    overflow: hidden;

    border: 2px solid transparent;

    background-clip: padding-box;

}



.team-member::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, #ff6b9d, #64b5f6, #ffb74d, #81c784);

    background-size: 200% 200%;

    animation: borderFlow 3s ease infinite;

    transform: translateX(-100%);

    transition: transform 0.3s ease;

}



@keyframes borderFlow {

    0% {

        background-position: 0% 50%;

    }



    50% {

        background-position: 100% 50%;

    }



    100% {

        background-position: 0% 50%;

    }

}



.team-member:hover::before {

    transform: translateX(0);

}



.team-member:hover {

    transform: translateY(-10px);

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

}



.member-avatar {

    width: 120px;

    height: 120px;

    border-radius: 50%;

    background: linear-gradient(45deg, #ff6b9d, #c471ed, #64b5f6, #ffb74d);

    background-size: 200% 200%;

    animation: avatarGlow 4s ease infinite;

    margin: 0 auto 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 2.5rem;

    font-weight: bold;

    box-shadow: 0 8px 25px rgba(255, 107, 157, 0.4);

    transition: transform 0.3s ease;

}



@keyframes avatarGlow {

    0% {

        background-position: 0% 50%;

        box-shadow: 0 8px 25px rgba(255, 107, 157, 0.4);

    }



    25% {

        background-position: 100% 50%;

        box-shadow: 0 8px 25px rgba(100, 181, 246, 0.4);

    }



    50% {

        background-position: 100% 100%;

        box-shadow: 0 8px 25px rgba(255, 183, 77, 0.4);

    }



    75% {

        background-position: 0% 100%;

        box-shadow: 0 8px 25px rgba(129, 199, 132, 0.4);

    }



    100% {

        background-position: 0% 50%;

        box-shadow: 0 8px 25px rgba(255, 107, 157, 0.4);

    }

}



.team-member:hover .member-avatar {

    transform: scale(1.1);

}



.member-info h3 {

    font-size: 1.5rem;

    color: #333;

    margin-bottom: 8px;

    text-align: center;

    font-weight: 600;

}



.member-role {

    background: linear-gradient(45deg, #ff6b9d, #64b5f6, #ffb74d);

    background-size: 200% 200%;

    animation: textGradient 3s ease infinite;

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    font-weight: 600;

    text-align: center;

    margin-bottom: 6px;

    font-size: 1.1rem;

}



@keyframes textGradient {

    0% {

        background-position: 0% 50%;

    }



    50% {

        background-position: 100% 50%;

    }



    100% {

        background-position: 0% 50%;

    }

}



.member-department {

    color: #666;

    text-align: center;

    margin-bottom: 20px;

    font-style: italic;

}



.social-links {

    display: flex;

    justify-content: center;

    gap: 15px;

    align-items: center;

    margin-top: 15px;

}



.social-link {

    width: 35px;

    height: 35px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    color: white;

    font-size: 1.2rem;

    transition: all 0.3s ease;

    animation: socialPulse 2s ease infinite;

}



.social-link.linkedin {

    background: linear-gradient(45deg, #0077b5, #00a0dc);

}



.social-link.twitter {

    background: linear-gradient(45deg, #1da1f2, #0d8bd9);

}



.social-link:hover {

    transform: scale(1.2) rotate(5deg);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

}



@keyframes socialPulse {

    0% {

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

    }



    70% {

        box-shadow: 0 0 0 10px transparent;

    }



    100% {

        box-shadow: 0 0 0 0 transparent;

    }

}



.member-skills {

    margin-top: 20px;

}



.skills-title {

    font-size: 0.9rem;

    color: #333;

    margin-bottom: 10px;

    font-weight: 600;

}



.skills-list {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.skill-tag {

    background: linear-gradient(45deg, #ff6b9d20, #64b5f620, #ffb74d20, #81c78420);

    background-size: 300% 300%;

    animation: skillShimmer 4s ease infinite;

    color: #333;

    padding: 5px 12px;

    border-radius: 20px;

    font-size: 0.8rem;

    font-weight: 500;

    border: 1px solid transparent;

    transition: all 0.2s ease;

}



.skill-tag:hover {

    background: linear-gradient(45deg, #ff6b9d, #64b5f6, #ffb74d, #81c784);

    background-size: 300% 300%;

    color: white;

    transform: translateY(-2px) scale(1.05);

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

}



@keyframes skillShimmer {

    0% {

        background-position: 0% 50%;

    }



    50% {

        background-position: 100% 50%;

    }



    100% {

        background-position: 0% 50%;

    }

}



.contact-info {

    margin-top: 20px;

    padding-top: 20px;

    border-top: 1px solid #eee;

}



.contact-item {

    display: flex;

    align-items: center;

    margin-bottom: 8px;

    color: #666;

    font-size: 0.9rem;

}



.contact-icon {

    width: 16px;

    height: 16px;

    margin-right: 10px;

    opacity: 0.7;

}



.team-stats {

    background: linear-gradient(45deg, #ff6b9d, #c471ed, #64b5f6, #ffb74d, #81c784);

    background-size: 300% 300%;

    animation: statsBackground 10s ease infinite;

    padding: 40px;

    text-align: center;

    color: white;

}



@keyframes statsBackground {

    0% {

        background-position: 0% 50%;

    }



    25% {

        background-position: 100% 0%;

    }



    50% {

        background-position: 100% 100%;

    }



    75% {

        background-position: 0% 100%;

    }



    100% {

        background-position: 0% 50%;

    }

}



.stats-grid {

    display: grid;

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

    gap: 30px;

    margin-top: 30px;

}



.stat-item {

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

    padding: 25px;

    border-radius: 15px;

    backdrop-filter: blur(10px);

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

    transition: all 0.3s ease;

}



.stat-item:hover {

    transform: translateY(-5px) scale(1.05);

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

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

}



.stat-number {

    font-size: 2.5rem;

    font-weight: bold;

    margin-bottom: 10px;

}



.stat-label {

    font-size: 1.1rem;

    opacity: 0.9;

}



@media (max-width: 768px) {

    .header h1 {

        font-size: 2.5rem;

    }



    .team-grid {

        grid-template-columns: 1fr;

        padding: 30px 20px;

    }



    .team-member {

        padding: 25px;

    }

}



.floating-elements {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    overflow: hidden;

}



.floating-circle {

    position: absolute;

    border-radius: 50%;

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

    animation: float 6s ease-in-out infinite;

}



.floating-circle:nth-child(1) {

    width: 80px;

    height: 80px;

    top: 20%;

    left: 10%;

    animation-delay: 0s;

}



.floating-circle:nth-child(2) {

    width: 60px;

    height: 60px;

    top: 60%;

    right: 15%;

    animation-delay: 2s;

}



.floating-circle:nth-child(3) {

    width: 40px;

    height: 40px;

    bottom: 30%;

    left: 80%;

    animation-delay: 4s;

}



@keyframes float {



    0%,

    100% {

        transform: translateY(0px) rotate(0deg);

    }



    50% {

        transform: translateY(-20px) rotate(180deg);

    }

}