@import url("/css/member/root.css");

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


        body {

        font-family: 'Inter', sans-serif;
        background: white;
        color: #111827;

        }


        header {

        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 8%;
        background: var(--navbar-bgcolor);
        }


        .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: 'Poppins', sans-serif;
        font-size: 24px;
        font-weight: 700;
        }


        .logo span {
        color: #111827;
        }

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


        nav {

        display: flex;
        gap: 30px;

        }


        nav a {

        text-decoration: none;
        color: #374151;
        font-weight: 600;

        }


        .login-btn1 {

        background: var(--button-primary-color);
        color: white;
        padding: 12px 25px;
        border-radius: 30px;
        text-decoration: none;

        }



        /* HERO */


        .hero {

        min-height: 650px;
        padding: 80px 8%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        background:

        linear-gradient(135deg,
        #0f172a,
        #1e293b);

        color: white;

        }



        .hero-text {

        max-width: 600px;

        }


        .hero h1 {

        font-family: 'Poppins';
        font-size: 60px;
        line-height: 1.1;

        }


        .hero p {

        margin: 25px 0;
        font-size: 18px;
        color: #cbd5e1;
        line-height: 1.7;

        }



        .buttons {

        display: flex;
        gap: 20px;

        }


        .primary,
        .secondary {

        padding: 15px 35px;
        border-radius: 30px;
        text-decoration: none;
        font-weight: 600;

        }


        .primary {
        background: var(--button-primary-color);
        color: white;
        border: 1px solid white;
        }

        a.primary:hover {
        background: #ffffff96;
        color: #111827;
        }

        .secondary {

        border: 2px solid white;
        color: white;

        }



        /* HERO IMAGE */


        .hero-image {

        position: relative;
        width: 400px;
        height: 400px;

        }


        .fighter {

        font-size: 180px;
        text-align: center;
        padding-top: 50px;

        }


        .dashboard-card {

        position: absolute;
        bottom: 20px;
        right: -30px;

        background: white;
        color: #111827;

        padding: 25px;
        border-radius: 20px;

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

        }



        .dashboard-card p {

        margin-top: 10px;

        }



        /* FEATURES */


        .features {

        padding: 80px 8%;
        text-align: center;

        }


        .features h2,
        .about h2,
        .cta h2 {

        font-family: 'Poppins';
        font-size: 40px;
        margin-bottom: 40px;

        }



        .feature-container {

        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;

        }


        .card {

        background: white;
        padding: 40px 30px;
        border-radius: 25px;

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

        }


        .icon {

        font-size: 45px;
        margin-bottom: 20px;

        }


        .card h3 {

        margin-bottom: 15px;

        }



        .card p {

        color: #64748b;
        line-height: 1.6;

        }



        /* ABOUT */


        .about {

        padding: 80px 8%;
        background: #111827;
        color: white;

        }


        .about p {

        max-width: 600px;
        line-height: 1.8;
        color: #cbd5e1;

        }


        .about li {

        margin-top: 15px;
        list-style: none;

        }



        /* CTA */


        .cta {

        padding: 80px 8%;
        text-align: center;

        background: #dc2626;
        color: white;

        }


        .cta p {

        margin-bottom: 30px;

        }


        /* FOOTER */


        footer {

        background: #020617;
        color: white;
        padding: 40px;
        text-align: center;

        }



        /* MOBILE */


        @media(max-width:900px) {


        header {

        flex-direction: column;
        height: auto;
        gap: 20px;
        padding: 25px;

        }


        nav {

        display: none;

        }


        .hero {

        flex-direction: column;
        text-align: center;

        }


        .hero h1 {

        font-size: 42px;

        }


        .hero-image {
        width: 600px;
        overflow: hidden;
        }


        .image-track {
        display: flex;
        gap: 20px;
        width: max-content;

        animation: scrollLeft 3s linear infinite;
        }


        .image-track img {

        width: 250px;
        height: 350px;

        object-fit: cover;
        border-radius: 20px;

        }


        @keyframes scrollLeft {

        from {
        transform: translateX(0);
        }

        to {
        transform: translateX(-50%);
        }

        }

        /* LEFT MOVEMENT */

        @keyframes slideImages {

        from {

        transform: translateX(0);

        }

        to {

        transform: translateX(-50%);

        }

        }


        .feature-container {

        grid-template-columns: 1fr;

        }


        .buttons {

        justify-content: center;

        }


        }
        /*additional css para sa buttons*/
        .btn-lg {
        background-color: #FDDA0D;
        color: black;
        border-radius: 5px;
        }
        .btn-lg:hover {
        background-color: #FDDA0D;
        color: black;
        }
        /*additional css dropdown para sa feature menu*/
        .dropdown {
        position: relative;
        }

        .dropdown-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        min-width: 150px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
        overflow: hidden;
        }

        .dropdown-menu a {
        display: block;
        padding: 10px;
        color: #000;
        font-family: 'Inter', sans-serif;
        text-decoration: none;
        }

        .dropdown-menu a:hover {
        background: #ffba01;
        }

        .dropdown:hover .dropdown-menu {
        display: block;
        }
        .register-form{
        width:900px;
        margin:40px auto;
        background:#FFFF8F;
        padding:35px;
        border-radius:12px;
        box-shadow:0 10px 25px rgba(0,0,0,.08);
        }

        .register-form h2{
        text-align:center;
        margin-bottom:30px;
        color:#333;
        }

        fieldset{
        border:1px solid #ddd;
        border-radius:8px;
        padding:20px;
        margin-bottom:25px;
        }

        legend{
        padding:0 10px;
        font-weight:600;
        color:#0d6efd;
        }

        .grid-3{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:20px;
        }

        .grid-2{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:20px;
        }

        .form-group{
        display:flex;
        flex-direction:column;
        }

        .form-group label{
        margin-bottom:6px;
        font-weight:600;
        }

        .form-group input,
        .form-group select{
        padding:10px 12px;
        border:1px solid #ccc;
        border-radius:6px;
        font-size:15px;
        }

        .form-group input:focus,
        .form-group select:focus{
        outline:none;
        border-color:#0d6efd;
        box-shadow:0 0 5px rgba(13,110,253,.2);
        }

        .register-form button{
        width:100%;
        padding:14px;
        background:#e72020;
        color:black;
        border:none;
        border-radius:8px;
        font-size:16px;
        cursor:pointer;
        }

        button:hover{
        background:#FDDA0D;
        }

        @media(max-width:768px){
        .register-form{
        width:95%;
        }

        .grid-3,
        .grid-2{
        grid-template-columns:1fr;
        }
        }
        .form-header{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:20px;
        margin-bottom:30px;
        padding-bottom:20px;
        border-bottom:2px solid #e5e5e5;
        }

        .logo{
        width:90px;
        height:90px;
        object-fit:contain;
        }

        .header-text{
        text-align:left;
        }

        .header-text h1{
        margin:0;
        font-size:28px;
        color:#222;
        }

        .header-text p{
        margin-top:5px;
        color:#666;
        font-size:16px;
        }
        .profile-btn{
        display:flex;
        align-items:center;
        gap:10px;
        text-decoration:none;
        color:#333;
        cursor: pointer;
        }

        .profile-btn img{
        width:40px;
        height:40px;
        border-radius:50%;
        object-fit:cover;
        }

        .profile-btn-avatar{
        width: 45px;
        height:45px;
        border-radius:50%;
        flex-shrink:0;
        display:flex;
        align-items:center;
        justify-content:center;
        background:#fff;
        color:#1a1a1a;
        border:2px solid #FDDA0D;
        box-shadow:0 1px 4px rgba(0,0,0,.2);
        font-weight:700;
        font-size:20px;
        }

        .profile-dropdown{
        position:relative;
        }

        .profile-menu{
        position:absolute;
        right: 0;
        top: 50px;
        width: 220px;
        background: white;
        border-radius: 10px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, .15;
        display: none;
        overflow: hidden;
        }
        .profile-menu a{
        display:block;
        padding:15px;
        text-decoration:none;
        color:#333;
        }

        .profile-menu a:hover{
        background:#f1f1f1;
        }