/*==================================================
  UNIVERSITY PROGRAMMING CLUB WEBSITE
  style.css
  Part 1 - Reset, Variables, Header, Navigation, Hero
====================================================*/


/*==================================================
  GOOGLE FONTS
====================================================*/

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


/*==================================================
  CSS VARIABLES
====================================================*/

:root{

    --primary:#003366;
    --secondary:#00509d;
    --accent:#ff9800;
    --accent-dark:#ff6d00;

    --success:#28a745;
    --danger:#dc3545;

    --light:#f8f9fa;
    --white:#ffffff;
    --dark:#222222;
    --text:#555555;

    --border:#dddddd;

    --shadow-sm:0 5px 15px rgba(0,0,0,.08);
    --shadow-md:0 10px 25px rgba(0,0,0,.12);
    --shadow-lg:0 18px 45px rgba(0,0,0,.18);

    --radius:12px;

    --transition:.35s ease;

}


/*==================================================
  RESET
====================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    background:var(--light);

    color:var(--text);

    line-height:1.7;

    overflow-x:hidden;

}


/*==================================================
  GLOBAL ELEMENTS
====================================================*/

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

ul{

    list-style:none;

}

section{

    padding:80px 0;

}

.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}

h1,
h2,
h3,
h4{

    color:var(--primary);

    font-weight:700;

    line-height:1.3;

}

h2{

    font-size:2.2rem;

    margin-bottom:20px;

}

p{

    margin-bottom:15px;

}


/*==================================================
  HEADER
====================================================*/

header{

    position:sticky;

    top:0;

    z-index:999;

    background:var(--primary);

    color:var(--white);

    box-shadow:var(--shadow-sm);

}

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 0;

}


/*==================================================
  LOGO
====================================================*/

.logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo img{

    width:65px;

    height:65px;

    object-fit:cover;

    border-radius:50%;

    background:#fff;

    padding:4px;

}

.logo h1{

    color:#fff;

    font-size:1.7rem;

    margin-bottom:2px;

}

.logo p{

    color:#d6d6d6;

    font-size:.9rem;

    margin:0;

}


/*==================================================
  NAVIGATION
====================================================*/

nav ul{

    display:flex;

    align-items:center;

    gap:8px;

}

nav ul li{

    position:relative;

}

nav ul li a{

    display:block;

    color:#fff;

    font-weight:500;

    padding:12px 18px;

    border-radius:8px;

}

nav ul li a:hover{

    background:rgba(255,255,255,.15);

}

nav ul li a.active{

    background:var(--accent);

    color:#fff;

}


/*==================================================
  BUTTONS
====================================================*/

.btn{

    display:inline-block;

    padding:14px 30px;

    border:none;

    border-radius:40px;

    background:var(--accent);

    color:#fff;

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);

}

.btn:hover{

    background:var(--accent-dark);

    transform:translateY(-4px);

    box-shadow:var(--shadow-md);

}

.btn-outline{

    background:transparent;

    border:2px solid #fff;

    color:#fff;

    margin-left:10px;

}

.btn-outline:hover{

    background:#fff;

    color:var(--primary);

}


/*==================================================
  HERO SECTION
====================================================*/

.hero{

    min-height:90vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:#fff;

    background:

        linear-gradient(

            rgba(0,0,0,.65),

            rgba(0,0,0,.65)

        ),

        url("../images/hero.jpg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}

.hero .container{

    max-width:850px;

}

.hero h2{

    color:#fff;

    font-size:3.4rem;

    margin-bottom:25px;

}

.hero p{

    color:#f1f1f1;

    font-size:1.15rem;

    margin-bottom:35px;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}


/*==================================================
  SECTION TITLES
====================================================*/

.section-title{

    text-align:center;

    margin-bottom:15px;

}

.section-title::after{

    content:"";

    display:block;

    width:80px;

    height:4px;

    background:var(--accent);

    margin:12px auto;

    border-radius:20px;

}

.section-intro{

    max-width:760px;

    margin:0 auto 50px;

    text-align:center;

    color:#666;

}
/*==================================================
  UNIVERSITY PROGRAMMING CLUB WEBSITE
  style.css
  Part 2 - Home, Cards, Statistics,
           CTA, About, Tables, Activities
====================================================*/


/*==================================================
  HOME - FEATURES
====================================================*/

.features{

    background:var(--white);

}

.features .cards{

    margin-top:50px;

}


/*==================================================
  GENERIC CARD GRID
====================================================*/

.cards{

    display:grid;

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

    gap:30px;

}


/*==================================================
  CARDS
====================================================*/

.card{

    background:var(--white);

    border-radius:var(--radius);

    padding:35px 30px;

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

    border-top:5px solid transparent;

}

.card:hover{

    transform:translateY(-10px);

    border-top:5px solid var(--accent);

    box-shadow:var(--shadow-lg);

}

.card h3{

    margin:20px 0 15px;

    color:var(--primary);

}

.card p{

    color:#666;

}

.card i{

    font-size:50px;

    color:var(--accent);

    margin-bottom:15px;

}


/*==================================================
  WELCOME SECTION
====================================================*/

.welcome{

    background:#eef5fc;

}

.welcome .container{

    max-width:900px;

    text-align:center;

}

.welcome h2{

    margin-bottom:25px;

}

.welcome p{

    font-size:1.05rem;

    color:#555;

}


/*==================================================
  CLUB STATISTICS
====================================================*/

.stats{

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );

    color:#fff;

}

.stats .container{

    display:grid;

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

    gap:25px;

}

.stat-box{

    text-align:center;

    padding:35px 20px;

    border-radius:var(--radius);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(4px);

    transition:var(--transition);

}

.stat-box:hover{

    transform:translateY(-8px);

    background:rgba(255,255,255,.14);

}

.stat-box h2{

    color:var(--accent);

    font-size:3rem;

    margin-bottom:10px;

}

.stat-box p{

    color:#fff;

    margin:0;

}


/*==================================================
  CALL TO ACTION
====================================================*/

.cta{

    text-align:center;

    background:var(--light);

}

.cta .container{

    max-width:850px;

}

.cta h2{

    margin-bottom:20px;

}

.cta p{

    font-size:1.05rem;

    margin-bottom:35px;

}


/*==================================================
  PAGE BANNER
====================================================*/

.page-banner{

    background:linear-gradient(

        rgba(0,51,102,.85),

        rgba(0,80,157,.85)

    ),

    url("images/banner.jpg");

    background-size:cover;

    background-position:center;

    color:#fff;

    text-align:center;

    padding:90px 20px;

}

.page-banner h2{

    color:#fff;

    font-size:2.8rem;

}

.page-banner p{

    color:#f2f2f2;

    max-width:700px;

    margin:auto;

}


/*==================================================
  ABOUT PAGE
====================================================*/

.about-section{

    background:var(--white);

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1.5fr;

    gap:50px;

    align-items:center;

}

.responsive-image{

    width:100%;

    border-radius:var(--radius);

    box-shadow:var(--shadow-md);

}

/*==================================
  OBJECTIVE LIST
==================================*/

.objective-list{

    margin-top:30px;

    padding:0;

    list-style:none;

}

.objective-list li{

    position:relative;

    padding:15px 20px 15px 55px;

    margin-bottom:15px;

    background:#ffffff;

    border-left:5px solid var(--accent);

    border-radius:10px;

    box-shadow:var(--shadow-sm);

    color:#555;

    transition:var(--transition);

}

.objective-list li::before{

    content:"✓";

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    width:24px;

    height:24px;

    border-radius:50%;

    background:var(--accent);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:14px;

    font-weight:bold;

}

.objective-list li:hover{

    transform:translateX(8px);

    box-shadow:var(--shadow-lg);

    border-left-color:var(--secondary);

}


/*==================================================
  TABLES
====================================================*/

table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

    margin-top:30px;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

}

table th{

    background:var(--primary);

    color:#fff;

    padding:18px;

    text-align:left;

}

table td{

    padding:16px;

    border-bottom:1px solid #eee;

}

table tr:nth-child(even){

    background:#f8f9fa;

}

table tr:hover{

    background:#eef5fc;

}


/*==================================================
  ACTIVITIES PAGE
====================================================*/

.activities-section{

    background:var(--light);

}

.activity-grid{

    display:grid;

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

    gap:35px;

}

.activity-card{

    background:#fff;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.activity-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.activity-card img{

    width:100%;

    height:230px;

    object-fit:cover;

}

.activity-content{

    padding:25px;

}

.activity-content h3{

    margin-bottom:15px;

    color:var(--primary);

}

.activity-content p{

    color:#666;

    margin-bottom:15px;

}

.activity-content strong{

    color:var(--secondary);

}


/*==================================================
  UPCOMING EVENTS
====================================================*/

.events{

    background:#fff;

}

.events h2{

    text-align:center;

    margin-bottom:35px;

}
/*==================================================
  UNIVERSITY PROGRAMMING CLUB WEBSITE
  style.css
  Part 3 - Gallery, Membership, Contact
====================================================*/


/*==================================================
  GALLERY SECTION
====================================================*/

.gallery-section{

    background:var(--light);

}

.gallery-grid{

    display:grid;

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

    gap:30px;

}

.gallery-item{

    background:#fff;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

    cursor:pointer;

    position:relative;

}

.gallery-item:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

}

.gallery-item img{

    width:100%;

    height:250px;

    object-fit:cover;

    transition:.5s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

.caption{

    padding:18px;

    text-align:center;

    font-weight:600;

    color:var(--primary);

    background:#fff;

}


/*==================================================
  MEMBERSHIP FORM
====================================================*/

.form-section{

    background:var(--light);

}

form{

    max-width:850px;

    margin:auto;

    background:#fff;

    padding:40px;

    border-radius:var(--radius);

    box-shadow:var(--shadow-md);

}

.form-group{

    margin-bottom:22px;

    display:flex;

    flex-direction:column;

}

.form-group label{

    font-weight:600;

    color:var(--primary);

    margin-bottom:8px;

}

input,
select,
textarea{

    width:100%;

    padding:14px;

    border:1px solid var(--border);

    border-radius:8px;

    font-family:inherit;

    font-size:15px;

    transition:var(--transition);

    background:#fff;

}

textarea{

    resize:vertical;

}

input:focus,
select:focus,
textarea:focus{

    outline:none;

    border-color:var(--secondary);

    box-shadow:0 0 8px rgba(0,80,157,.25);

}

input:invalid:focus,
textarea:invalid:focus{

    border-color:var(--danger);

}

input:valid,
select:valid,
textarea:valid{

    border-color:var(--success);

}

.form-group input[type="radio"],
.form-group input[type="checkbox"]{

    width:auto;

    margin-right:8px;

}

.form-group label:has(input[type="radio"]),
.form-group label:has(input[type="checkbox"]){

    display:flex;

    align-items:center;

    font-weight:400;

    margin-bottom:10px;

}

.button-group{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin-top:30px;

}

.reset-btn{

    background:var(--danger);

}

.reset-btn:hover{

    background:#b02a37;

}


/*==================================================
  CONTACT PAGE
====================================================*/

.contact-section{

    background:var(--light);

}

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:35px;

}

.contact-card{

    background:#fff;

    border-radius:var(--radius);

    padding:35px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.contact-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.contact-card h2{

    margin-bottom:20px;

}

.contact-card p{

    margin-bottom:15px;

    color:#555;

}

.contact-card a{

    color:var(--secondary);

    font-weight:600;

}

.contact-card a:hover{

    color:var(--accent);

}


/*==================================================
  CONTACT DETAILS
====================================================*/

.contact-info{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:15px;

}

.contact-item i{

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:#fff;

    border-radius:50%;

    font-size:18px;

}


/*==================================================
  SOCIAL LINKS
====================================================*/

.social-links{

    display:flex;

    gap:12px;

    margin-top:25px;

    flex-wrap:wrap;

}

.social-links a{

    width:45px;

    height:45px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    transition:var(--transition);

}

.social-links a:hover{

    background:var(--accent);

    transform:translateY(-5px);

}


/*==================================================
  GOOGLE MAP
====================================================*/

.map-section{

    background:#fff;

}

.map-section h2{

    text-align:center;

    margin-bottom:30px;

}

.map-container{

    overflow:hidden;

    border-radius:var(--radius);

    box-shadow:var(--shadow-md);

}

.map-container iframe{

    width:100%;

    height:450px;

    border:0;

}


/*==================================================
  FORM PLACEHOLDERS
====================================================*/

::placeholder{

    color:#999;

}


/*==================================================
  HTML5 FORM VALIDATION
====================================================*/

input:required,
select:required,
textarea:required{

    background:#fff;

}

input:disabled{

    background:#eee;

    cursor:not-allowed;

}
/*==================================================
  UNIVERSITY PROGRAMMING CLUB WEBSITE
  style.css
  Part 4 - Footer, Utilities, Animations,
           Responsive Design
====================================================*/


/*==================================================
  FOOTER
====================================================*/

footer{

    background:var(--primary);

    color:#fff;

    padding:60px 20px 30px;

    margin-top:60px;

}

footer .container{

    text-align:center;

}

footer h3{

    color:#fff;

    margin-bottom:15px;

}

footer p{

    color:#ddd;

    margin-bottom:10px;

}

footer hr{

    width:180px;

    margin:25px auto;

    border:1px solid rgba(255,255,255,.2);

}

footer a{

    color:var(--accent);

}

footer a:hover{

    color:#fff;

}


/*==================================================
  UTILITIES
====================================================*/

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:50px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:50px;}

.pt-1{padding-top:10px;}
.pt-2{padding-top:20px;}
.pt-3{padding-top:30px;}
.pt-4{padding-top:40px;}
.pt-5{padding-top:50px;}

.pb-1{padding-bottom:10px;}
.pb-2{padding-bottom:20px;}
.pb-3{padding-bottom:30px;}
.pb-4{padding-bottom:40px;}
.pb-5{padding-bottom:50px;}


/*==================================================
  IMAGE STYLES
====================================================*/

.rounded{

    border-radius:var(--radius);

}

.shadow{

    box-shadow:var(--shadow-md);

}

.img-fluid{

    width:100%;

    height:auto;

}


/*==================================================
  HOVER EFFECTS
====================================================*/

img{

    transition:var(--transition);

}

img:hover{

    opacity:.96;

}

a:hover{

    transition:var(--transition);

}


/*==================================================
  ANIMATIONS
====================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes zoomIn{

    from{

        transform:scale(.9);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.fade-up{

    animation:fadeUp .8s ease both;

}

.fade-in{

    animation:fadeIn 1s ease both;

}

.zoom-in{

    animation:zoomIn .8s ease both;

}


/*==================================================
  SELECTION
====================================================*/

::selection{

    background:var(--accent);

    color:#fff;

}


/*==================================================
  SCROLLBAR
====================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eee;

}

::-webkit-scrollbar-thumb{

    background:var(--secondary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}


/*==================================================
  RESPONSIVE DESIGN
====================================================*/

@media(max-width:992px){

    header .container{

        flex-direction:column;

        text-align:center;

    }

    .logo{

        margin-bottom:20px;

    }

    nav ul{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero h2{

        font-size:2.6rem;

    }

    .about-grid{

        grid-template-columns:1fr;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

}


@media(max-width:768px){

    section{

        padding:60px 0;

    }

    nav ul{

        flex-direction:column;

        width:100%;

        gap:5px;

    }

    nav ul li{

        width:100%;

    }

    nav ul li a{

        display:block;

        width:100%;

        text-align:center;

    }

    .hero{

        min-height:75vh;

        background-attachment:scroll;

        padding:80px 20px;

    }

    .hero h2{

        font-size:2.2rem;

    }

    .hero p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .cards{

        grid-template-columns:1fr;

    }

    .activity-grid{

        grid-template-columns:1fr;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .stats .container{

        grid-template-columns:1fr 1fr;

    }

    table{

        display:block;

        overflow-x:auto;

        white-space:nowrap;

    }

    .button-group{

        flex-direction:column;

    }

    .btn{

        width:100%;

        text-align:center;

    }

    form{

        padding:25px;

    }

}


@media(max-width:576px){

    .hero h2{

        font-size:1.8rem;

    }

    .page-banner h2{

        font-size:2rem;

    }

    h2{

        font-size:1.8rem;

    }

    .stats .container{

        grid-template-columns:1fr;

    }

    .logo img{

        width:55px;

        height:55px;

    }

    .logo h1{

        font-size:1.3rem;

    }

}


/*==================================================
  PRINT STYLES
====================================================*/

@media print{

    header,
    footer,
    nav,
    .btn{

        display:none;

    }

    body{

        background:#fff;

        color:#000;

    }

    section{

        padding:20px 0;

    }

}