* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial , sans-serif, 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background: #111;
    color: white;
}

/* =========================
   MODERN NAVBAR
========================= */

.navbar {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 60px;

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

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

    -webkit-backdrop-filter: blur(10px);

    backdrop-filter: blur(10px);

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

    transition: 0.4s;
}

/* LOGO */

.logo {
    font-size: 32px;

    font-weight: bold;

    color: #ff3131;

    letter-spacing: 2px;
}

/* NAV LINKS */

.nav-links {
    display: flex;

    list-style: none;
}

.nav-links li {
    margin-left: 30px;
}

.nav-links a {
    color: white;

    text-decoration: none;

    font-size: 17px;

    position: relative;

    transition: 0.3s;
}

/* UNDERLINE EFFECT */

.nav-links a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 0%;

    height: 2px;

    background: #ff3131;

    transition: 0.4s;
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links a:hover {
    color: #ff3131;
}

/* ACTIVE LINK */

.nav-links a.active {
    color: #ff3131;
}

/* MENU BUTTON */

.menu-btn {
    display: none;

    color: white;

    font-size: 28px;

    cursor: pointer;
}


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

.hero {
    height: 100vh;

    display: flex;

    align-items: center;

    padding: 0 80px;

    background:
        linear-gradient(rgba(0, 0, 0, 0.75),
            rgba(0, 0, 0, 0.75)),

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

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
}

/* HERO CONTENT */

.hero-content {
    max-width: 700px;
}

.hero-content h1 {
    font-size: 90px;

    line-height: 1.1;

    margin-bottom: 25px;
}

.hero-content p {
    font-size: 24px;

    line-height: 1.8;

    margin-bottom: 40px;

    color: #ddd;
}

/* BUTTON */

.btn {
    display: inline-block;

    padding: 14px 30px;

    background: red;
    color: white;

    text-decoration: none;

    border-radius: 5px;

    transition: 0.3s;
}

.btn{

    transition:0.3s;

}

.btn:hover {

    background:darkred;

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

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

}

/* =========================
   BENEFITS SECTION
========================= */

.benefits-section{

    padding:120px 8%;

    background:
    radial-gradient(
        circle at top left,
        rgba(255,0,0,0.08),
        transparent 40%
    ),
    #000;

}

/* HEADER */

.benefits-header{

    text-align:center;

    max-width:750px;

    margin:0 auto 70px auto;

}

.section-tag{

    display:inline-block;

    padding:10px 20px;

    background:rgba(255,0,0,0.12);

    color:red;

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

    border-radius:50px;

    font-size:14px;

    letter-spacing:2px;

    margin-bottom:25px;

}

.benefits-header h2{

    font-size:58px;

    margin-bottom:20px;

    line-height:1.2;

}

.benefits-header p{

    color:#ccc;

    font-size:20px;

    line-height:1.8;

}

/* GRID */

.benefits-grid{

    display:grid;

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

    gap:35px;

}

/* CARDS */

.benefit-card{

    position:relative;

    background:#161616;

    padding:50px 35px;

    border-radius:20px;

    overflow:hidden;

    transition:0.4s;

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

}

/* HOVER */

.benefit-card:hover{

    transform:translateY(-12px);

    border-color:rgba(255,0,0,0.3);

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

}

/* SHINE EFFECT */

.benefit-card::before{

    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.05),
        transparent
    );

    transition:0.8s;

}

.benefit-card:hover::before{

    left:100%;

}

/* ICON */

.benefit-card i{

    font-size:60px;

    color:red;

    margin-bottom:30px;

}

/* TITLE */

.benefit-card h3{

    font-size:34px;

    margin-bottom:20px;

}

/* TEXT */

.benefit-card p{

    color:#bbb;

    line-height:1.8;

    font-size:18px;

}
/* IMAGE SECTION */

.gym-image {
    padding: 80px 50px;
    text-align: center;
}

.image-placeholder {
    height: 400px;

    border: 3px dashed gray;

    margin-top: 30px;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 30px;
    color: gray;
}

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

footer {
    background:
        linear-gradient(to right,
            #111,
            #1c1c1c,
            #111);

    padding: 80px 50px 30px;

    margin-top: 80px;

    border-top: 2px solid #ff3131;
}

/* FOOTER CONTAINER */

.footer-container {
    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 40px;
}

/* FOOTER BOX */

.footer-box {
    flex: 1;

    min-width: 250px;
}

/* FOOTER HEADINGS */

.footer-box h2,
.footer-box h3 {
    margin-bottom: 20px;

    color: #ff3131;
}

/* FOOTER TEXT */

.footer-box p {
    line-height: 1.8;

    color: #ccc;
}

/* FOOTER LINKS */

.footer-box a {
    display: block;

    color: #ccc;

    text-decoration: none;

    margin-bottom: 12px;

    transition: 0.3s;
}

.footer-box a:hover {
    color: #ff3131;

    transform: translateX(5px);
}

/* COPYRIGHT */

.copyright {
    text-align: center;

    margin-top: 50px;

    padding-top: 20px;

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

    color: #999;
}

/* ANIMATION */

@keyframes slideIn {

    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* RESPONSIVE */

@media(max-width:900px) {

    .navbar {
        flex-direction: column;
    }

    .nav-links {
        margin-top: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero {
        padding: 20px;
        text-align: center;
    }

    .hero p {
        width: 100%;
    }

    .hero h1 {
        font-size: 45px;
    }
}

/* PAGE BANNER */

.page-banner {
    height: 300px;

    background:
        linear-gradient(rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.7)),
        url('../images/hero.jpg');

    background-size: cover;
    background-position: center;

    display: flex;
    justify-content: center;
    align-items: center;
}

.page-banner h1 {
    font-size: 60px;
}

/* ABOUT SECTION */

.about-section {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 40px;

    padding: 80px 50px;

    flex-wrap: wrap;
}

.about-text {
    flex: 1;
}

.about-text h2 {
    font-size: 40px;
    margin-bottom: 20px;
}

.about-text p {
    line-height: 1.8;
    margin-bottom: 20px;
}

.about-image {
    flex: 1;

    height: 400px;

    border: 3px dashed gray;

    display: flex;
    justify-content: center;
    align-items: center;

    color: gray;
    font-size: 30px;
}

/* TRAINERS */

.trainer-section {
    display: flex;
    justify-content: center;
    gap: 30px;

    flex-wrap: wrap;

    padding: 80px 50px;
}

.trainer-card {
    width: 320px;

    background: #1e1e1e;

    border-radius: 10px;

    overflow: hidden;

    transition: 0.4s;
}

.trainer-card:hover {
    transform: translateY(-10px);
}

.trainer-image {
    height: 300px;

    border-bottom: 2px solid red;

    display: flex;
    justify-content: center;
    align-items: center;

    color: gray;

    background: #2a2a2a;
}

.trainer-info {
    padding: 25px;
    text-align: center;
}

.trainer-info h2 {
    margin-bottom: 10px;
}

.trainer-info p {
    color: #ccc;
    margin-bottom: 20px;
}

.social-icons i {
    margin: 0 10px;

    color: red;

    font-size: 20px;

    cursor: pointer;

    transition: 0.3s;
}

.social-icons i:hover {
    transform: scale(1.2);
}

/* FORMS */

.form-section {
    height: 90vh;

    display: flex;
    justify-content: center;
    align-items: center;

    background:
        linear-gradient(rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.7)),
        url('../images/hero.jpg');

    background-size: cover;
}

.form-box {
    width: 400px;

    background: #1e1e1e;

    padding: 40px;

    border-radius: 10px;

    animation: slideIn 1s ease;
}

.form-box h1 {
    text-align: center;
    margin-bottom: 30px;
}

.form-box input {
    width: 100%;

    padding: 14px;

    margin-bottom: 20px;

    border: none;

    border-radius: 5px;

    outline: none;
}

.form-box button {
    width: 100%;

    padding: 14px;

    border: none;

    background: red;

    color: white;

    font-size: 16px;

    border-radius: 5px;

    cursor: pointer;

    transition: 0.3s;
}

.form-box button:hover {
    background: darkred;
}

.form-box p {
    text-align: center;
    margin-top: 20px;
}

.form-box a {
    color: red;
    text-decoration: none;
}

/* GALLERY */

.gallery-section {
    display: grid;

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

    gap: 20px;

    padding: 80px 50px;
}

.gallery-box {
    height: 300px;

    background: #2a2a2a;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 10px;

    color: gray;

    transition: 0.4s;

    overflow: hidden;
}

.gallery-box:hover {
    transform: scale(1.05);
}

/* CONTACT */

.contact-section {
    padding: 80px 20px;

    display: flex;
    justify-content: center;
}

textarea {
    width: 100%;

    height: 120px;

    padding: 15px;

    border: none;

    border-radius: 5px;

    margin-bottom: 20px;

    resize: none;
}

/* DASHBOARD */

.dashboard {
    display: flex;

    min-height: 100vh;
}

/* SIDEBAR */

.sidebar {
    width: 260px;

    background: black;

    padding: 30px 20px;
}

.sidebar h2 {
    color: red;

    margin-bottom: 40px;

    text-align: center;
}

.sidebar ul {
    list-style: none;
}

.sidebar ul li {
    margin-bottom: 25px;
}

.sidebar ul li a {
    color: white;

    text-decoration: none;

    font-size: 18px;

    transition: 0.3s;
}

.sidebar ul li a{

    transition:0.3s;

    display:inline-block;

}

.sidebar ul li a:hover {

    color:red;

    transform:translateX(8px);

}

.sidebar i {
    margin-right: 10px;
}

/* MAIN CONTENT */

.main-content {
    flex: 1;

    background: #111;

    padding: 30px;
}

/* TOPBAR */

.topbar {
    margin-bottom: 40px;
}

/* DASHBOARD CARDS */

.dashboard-cards {
    display: flex;

    gap: 25px;

    flex-wrap: wrap;

    margin-bottom: 50px;
}

.dashboard-card {
    flex: 1;

    min-width: 250px;

    background: #1e1e1e;

    padding: 40px 20px;

    border-radius: 10px;

    text-align: center;

    transition: 0.4s;
}

.dashboard-card:hover {
    transform: translateY(-10px);
}

.dashboard-card i {
    font-size: 45px;

    color: red;

    margin-bottom: 20px;
}

.dashboard-card h2 {
    font-size: 40px;

    margin-bottom: 10px;
}

/* MEMBERSHIP */

.membership-section {
    margin-bottom: 50px;
}

.membership-box {
    background: #1e1e1e;

    padding: 30px;

    border-radius: 10px;

    margin-top: 20px;
}

.membership-box p {
    margin-bottom: 15px;
}

/* IMAGE */

.dashboard-image {
    height: 350px;

    border: 3px dashed gray;

    display: flex;
    justify-content: center;
    align-items: center;

    color: gray;

    font-size: 30px;
}

/* RESPONSIVE DASHBOARD */

@media(max-width:900px) {

    .dashboard {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
    }

}

/* HAMBURGER */

.menu-btn {
    display: none;

    font-size: 28px;

    cursor: pointer;

    color: white;
}

/* MOBILE NAVBAR */

@media(max-width:900px) {

    .menu-btn {
        display: block;
    }

    .nav-links {
        display: none;

        width: 100%;

        flex-direction: column;

        text-align: center;

        background: black;

        margin-top: 20px;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        margin: 15px 0;
    }

}

/* SCROLL ANIMATION */

.hidden {
    opacity: 0;

    transform: translateY(60px);

    transition: all 1s ease;
}

.show {
    opacity: 1;

    transform: translateY(0);
}
/* =========================
   PRICING SECTION
========================= */

.pricing-section{

    padding:120px 8%;

    background:
    radial-gradient(
        circle at center,
        rgba(255,0,0,0.06),
        transparent 45%
    ),
    #000;

}

/* HEADER */

.pricing-header{

    text-align:center;

    max-width:750px;

    margin:0 auto 80px auto;

}

.pricing-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(255,0,0,0.12);

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

    color:red;

    font-size:14px;

    letter-spacing:2px;

    margin-bottom:25px;

}

.pricing-header h1{

    font-size:60px;

    margin-bottom:20px;

}

.pricing-header p{

    color:#bbb;

    font-size:20px;

    line-height:1.8;

}

/* GRID */

.pricing-container{

    display:grid;

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

    gap:35px;

}

/* CARDS */

.price-card{

    position:relative;

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

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

    border-radius:25px;

    padding:60px 40px;

    text-align:center;

    overflow:hidden;

    transition:0.4s;

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

}

/* HOVER */

.price-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 15px 40px rgba(255,0,0,0.12);

}



/* BADGE */

.popular-badge{

    position:absolute;

    top:20px;
    right:20px;

    background:red;

    color:white;

    padding:8px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:bold;

}

/* TITLE */

.price-card h2{

    font-size:38px;

    margin-bottom:30px;

}

/* PRICE */

.price{

    font-size:52px;

    font-weight:bold;

    color:red;

    margin-bottom:35px;

}

.price span{

    font-size:18px;

    color:#aaa;

}

/* LIST */

.price-card ul{

    list-style:none;

    margin-bottom:40px;

}

.price-card ul li{

    margin-bottom:18px;

    color:#ddd;

    font-size:18px;

}

/* BUTTON */

.price-card button{

    padding:15px 35px;

    border:none;

    border-radius:10px;

    background:red;

    color:white;

    font-size:16px;

    cursor:pointer;

    transition:0.3s;

}

.price-card button:hover{

    background:#cc0000;

    transform:translateY(-3px);

}

/* STATS */



/* TESTIMONIALS */

.testimonials {
    padding: 80px 20px;

    text-align: center;
}

.testimonial-container {
    display: flex;

    justify-content: center;

    gap: 30px;

    flex-wrap: wrap;

    margin-top: 50px;
}

.testimonial-card {
    width: 300px;

    background: #1e1e1e;

    padding: 30px;

    border-radius: 10px;

    transition: 0.4s;
}

.testimonial-card:hover {
    transform: translateY(-10px);
}

/* CTA */

.cta-section {
    padding: 100px 20px;

    text-align: center;

    background:
        linear-gradient(rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.7)),
        url('../images/hero.jpg');

    background-size: cover;
}

.cta-section h1 {
    font-size: 50px;

    margin-bottom: 30px;
}

/* TOPBAR */

.topbar {
    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 40px;
}

.top-icons i {
    font-size: 22px;

    margin-left: 20px;

    cursor: pointer;

    transition: 0.3s;
}

.top-icons i:hover {
    color: red;
}

/* PROGRESS */

.progress-section {
    margin-bottom: 50px;
}

.progress-box {
    margin-top: 25px;
}

.progress-bar {
    width: 100%;

    height: 20px;

    background: #2a2a2a;

    border-radius: 20px;

    overflow: hidden;

    margin-top: 10px;
}

.progress-fill {
    height: 100%;

    background: red;

    border-radius: 20px;

    animation: fillBar 2s ease;
}

.fill1 {
    width: 75%;
}

.fill2 {
    width: 60%;
}

.fill3 {
    width: 85%;
}

/* TABLE */

.table-section {
    margin-bottom: 50px;
}

table {
    width: 100%;

    border-collapse: collapse;

    margin-top: 20px;

    background: #1e1e1e;
}

table th,
table td {

    padding:18px;

    text-align:left;

    border-bottom:1px solid #333;

    transition:0.3s;

}
table tr{

    transition:0.3s;

}

table tr:hover{

    background:#252525;

}

table th {
    background: black;
}

/* ACTIVITY */

.activity-box {
    background: #1e1e1e;

    padding: 30px;

    border-radius: 10px;

    margin-top: 20px;
}

.activity-box p {
    margin-bottom: 15px;
}

/* ANIMATION */

@keyframes fillBar {

    from {
        width: 0;
    }

}

/* CHART */

.chart-section {
    background: #1e1e1e;

    padding: 30px;

    border-radius: 10px;

    margin-top: 50px;
}

/* MEMBER MANAGEMENT */

.member-section {

    margin-top: 50px;

    background: #1e1e1e;

    padding: 30px;

    border-radius: 10px;

    transition:0.4s;

}

.member-section:hover{

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

}

.member-form {
    display: flex;

    gap: 15px;

    flex-wrap: wrap;

    margin: 25px 0;
}

.member-form input {
    flex: 1;

    padding: 12px;

    border: none;

    border-radius: 5px;
}

.member-form button {
    padding: 12px 20px;

    background: red;

    color: white;

    border: none;

    border-radius: 5px;

    cursor: pointer;
}

/* ACTION BUTTON */

.delete-btn {
    background: darkred;

    color: white;

    border: none;

    padding: 8px 15px;

    border-radius: 5px;

    cursor: pointer;
}

/* ATTENDANCE */

.attendance-section {
    margin-top: 50px;

    background: #1e1e1e;

    padding: 30px;

    border-radius: 10px;
}

.attendance-box {
    display: flex;

    gap: 15px;

    margin: 20px 0;
}

.attendance-box input {
    flex: 1;

    padding: 12px;

    border: none;

    border-radius: 5px;
}

.attendance-box button {
    padding: 12px 20px;

    border: none;

    background: red;

    color: white;

    border-radius: 5px;

    cursor: pointer;
}

#attendanceList li {
    margin-top: 15px;

    background: #2a2a2a;

    padding: 15px;

    border-radius: 5px;
}

/* PAYMENTS */

.payment-section {
    margin-top: 50px;

    background: #1e1e1e;

    padding: 30px;

    border-radius: 10px;
}

.paid {
    color: lime;
    font-weight: bold;
}

.pending {
    color: orange;
    font-weight: bold;
}

/* HOME ABOUT */

.home-about {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

    flex-wrap: wrap;

    padding: 100px 50px;
}

.home-about-text {
    flex: 1;
}

.home-about-text h1 {
    font-size: 50px;

    margin-bottom: 20px;
}

.home-about-text p {
    line-height: 1.8;

    margin-bottom: 20px;
}

.home-about-image {
    flex: 1;

    height: 400px;

    background: #2a2a2a;

    border-radius: 10px;

    display: flex;
    justify-content: center;
    align-items: center;

    color: gray;
}

/* HERO BUTTONS */

.hero-buttons {
    display: flex;

    gap: 20px;
}

.secondary-btn {
    background: transparent;

    border: 2px solid red;
}

.secondary-btn:hover {
    background: red;
}

/* STATS */

.stats {
    display: flex;

    justify-content: center;

    gap: 50px;

    flex-wrap: wrap;

    padding: 80px 20px;

    background: #181818;
}

.stat-box {
    text-align: center;
}

.stat-box h1 {
    font-size: 60px;

    color: red;
}

/* FEATURED PLAN */

.featured-plan {
    border: 2px solid red;

    transform: scale(1.05);
}

/* TRAINER PREVIEW */

.trainer-preview {
    padding: 100px 50px;

    text-align: center;
}

.trainer-preview h1 {
    margin-bottom: 50px;

    font-size: 50px;
}

.trainer-preview-container {
    display: flex;

    justify-content: center;

    gap: 30px;

    flex-wrap: wrap;
}

.preview-card {
    width: 300px;

    background: #1e1e1e;

    padding: 20px;

    border-radius: 10px;

    transition: 0.4s;
}

.preview-card:hover {
    transform: translateY(-10px);
}

.preview-image {
    height: 300px;

    background: #2a2a2a;

    border-radius: 10px;

    margin-bottom: 20px;

    display: flex;
    justify-content: center;
    align-items: center;

    color: gray;
}

/* SOCIAL ICONS */

.footer-socials i {
    font-size: 24px;

    margin-right: 15px;

    color: white;

    cursor: pointer;

    transition: 0.4s;
}

.footer-socials i:hover {
    color: #ff3131;

    transform: translateY(-5px);
}

/* ABOUT IMAGE */

.home-about-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 10px;
}

/* TRAINER IMAGE */

.preview-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 10px;
}

/* GALLERY IMAGE */

.gallery-box img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 10px;

    transition: 0.4s;
}

.gallery-box img:hover {
    transform: scale(1.08);
}

/* ABOUT PAGE */

.about-section {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 50px;

    flex-wrap: wrap;

    padding: 100px 50px;
}

.about-text {
    flex: 1;
}

.about-text h2 {
    font-size: 50px;

    margin-bottom: 25px;
}

.about-text p {
    line-height: 1.9;

    margin-bottom: 20px;

    color: #ccc;
}

.about-image {
    flex: 1;

    height: 500px;

    overflow: hidden;

    border-radius: 10px;
}

.about-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.5s;
}

.about-image img:hover {
    transform: scale(1.05);
}
/* =========================
   ATTENDANCE MANAGEMENT
========================= */

.attendance-section{

    margin-top:50px;

    background:#1e1e1e;

    padding:35px;

    border-radius:12px;

}

.attendance-section h2{

    margin-bottom:25px;

    font-size:38px;

}

/* FORM */

.attendance-form{

    display:flex;

    gap:20px;

    align-items:center;

    flex-wrap:wrap;

    margin-bottom:35px;

}

/* INPUTS */

.attendance-form input,
.attendance-form select{

    padding:14px 18px;

    border:none;

    border-radius:8px;

    background:#f5f5f5;

    min-width:220px;

    font-size:16px;

}

/* BUTTON */

.attendance-form button{

    padding:14px 28px;

    border:none;

    border-radius:8px;

    background:red;

    color:white;

    font-size:16px;

    cursor:pointer;

    transition:0.3s;

}

.attendance-form button:hover{

    background:#cc0000;

    transform:translateY(-2px);

}

/* TABLE */

.attendance-section table{

    width:100%;

    border-collapse:collapse;

}

.attendance-section table th{

    background:black;

    padding:20px;

    text-align:left;

}

.attendance-section table td{

    padding:20px;

    border-bottom:1px solid #333;

}

.attendance-section table tr:hover{

    background:#2a2a2a;

}
/* =========================
   PAGE LOAD ANIMATION
========================= */

body{

    animation:
    pageFade 0.7s ease;

}

@keyframes pageFade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* =========================
   SERVICES SECTION
========================= */

.services-section{

    padding:120px 8%;

    background:
    radial-gradient(
        circle at center,
        rgba(255,0,0,0.05),
        transparent 40%
    ),
    #000;

}

/* HEADER */

.services-header{

    text-align:center;

    max-width:750px;

    margin:0 auto 80px auto;

}

.service-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

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

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

    color:red;

    letter-spacing:2px;

    font-size:14px;

    margin-bottom:25px;

}

.services-header h1{

    font-size:58px;

    margin-bottom:20px;

}

.services-header p{

    color:#bbb;

    font-size:20px;

    line-height:1.8;

}

/* GRID */

.services-grid{

    display:grid;

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

    gap:35px;

}

/* CARD */

.service-card{

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

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

    padding:50px 35px;

    border-radius:20px;

    transition:0.4s;

    text-align:center;

    backdrop-filter:blur(10px);

}

.service-card:hover{

    transform:translateY(-10px);

    border-color:rgba(255,0,0,0.3);

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

}

/* ICON */

.service-card i{

    font-size:55px;

    color:red;

    margin-bottom:30px;

}

/* TITLE */

.service-card h2{

    font-size:32px;

    margin-bottom:20px;

}

/* TEXT */

.service-card p{

    color:#bbb;

    line-height:1.8;

    font-size:17px;

}