*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}
body{background:#f5f5f5;color:#222}

/*Buttons*/
@media (min-width: 992px){

.buttons{
    display:none;
}

}

/*Header*/
.desktop-header{display:none}
.container{width:100%;min-height:100vh;background:#fff}
.header{padding:35px 25px 20px}
.header h2{font-size:34px;margin-bottom:15px}
.header p{color:#666;line-height:1.8}

@media(min-width:992px){
.desktop-header{
display:flex;justify-content:space-between;align-items:center;
padding:18px 6%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.08);
position:sticky;top:0;z-index:1000}
.logo{font-size:30px;font-weight:bold;color:#ef4444}
.nav a{text-decoration:none;color:#444;margin-left:25px;font-weight:bold}
.container{max-width:100%}
.header{text-align:center;padding:10px 18% 30px}
.header h2{font-size:52px}
.header p{font-size:20px}
.slider{height:70vh}
.buttons{width:420px;margin:40px auto}
}


.mobile-header{

display:flex;
justify-content:space-between;
align-items:center;
padding:18px 20px;
background:#fff;
box-shadow:0 2px 1px rgba(0,0,0,.08);

}

.logo{

font-size:24px;
font-weight:bold;
color:#ef4444;

}

.menu-btn{

font-size:30px;
cursor:pointer;

}

.mobile-menu{

display:none;
background:#fff;
border-top:1px solid #eee;

}

.mobile-menu a{

display:block;
padding:16px 20px;
text-decoration:none;
color:#333;
border-bottom:1px solid #eee;

}

.mobile-menu a:hover{

background:#f5f5f5;

}

@media(min-width:992px){

.mobile-header,
.mobile-menu{

display:none;

}

}


/*Slide*/
.slider{position:relative;width:100%;height:320px;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .8s}
.slide.active{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover}
.buttons{padding:30px 25px}
.btn{display:block;text-align:center;text-decoration:none;padding:16px;border-radius:40px;font-weight:bold}
.btn2{text-align:center;text-decoration:none;padding:16px;border-radius:40px;font-weight:bold}
.signup{background:#ef4444;color:#fff;margin-bottom:15px}
.login{background:#eee;color:#222}



/*Bottom Menu*/

.bottom-nav{

position:fixed;
left:0;
bottom:0;
width:100%;
height:72px;

background:#ffffff;

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

border-top:1px solid #e9e9e9;

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

z-index:99999;

}

/* Links */

.bottom-nav a{

flex:1;

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

text-decoration:none;

color:#777;

font-size:12px;

font-weight:600;

transition:.3s;

position:relative;

}

/* Icons */

.bottom-nav a i{

font-size:22px;

margin-bottom:5px;

transition:.3s;

}

/* Hover */

.bottom-nav a:hover{

color:#ff4d5a;

background:#fafafa;

}

/* Active */

.bottom-nav a.active{

color:#ff4d5a;

}

.bottom-nav a.active i{

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

}

/* Notification */

.bottom-nav .badge{

position:absolute;

top:10px;
right:35%;

width:8px;
height:8px;

background:#ff3b30;

border-radius:50%;

}

/* ===========================
        DESKTOP STYLE
=========================== */

@media(min-width:992px){

.bottom-nav{

width:99%;

left:50%;

transform:translateX(-50%);

bottom:20px;

border-radius:18px;

height:78px;

box-shadow:
0 10px 35px rgba(0,0,0,.18);

border:1px solid #ececec;

}

.bottom-nav a{

font-size:13px;

}

.bottom-nav a i{

font-size:24px;

}

.bottom-nav a:hover{

border-radius:14px;

}

}

/*Footer*/
.footer{text-align:center;color:#777;padding:20px 0 35px}
.footer a{text-decoration:none;color:#ef4444}

/*Login*/

.login-section{

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

padding:50px 20px;

}

.login-card{

width:100%;
max-width:420px;

background:#fff;

padding:15px;

border-radius:20px;

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

}

.login-card h2{

font-size:30px;

margin-bottom:10px;

color:#222;

}

.login-card p{

color:#777;

margin-bottom:30px;

}

.input-group{

position:relative;

margin-bottom:20px;

}

.input-group i{

position:absolute;

left:15px;

top:17px;

color:#888;

}

.input-group input{

width:100%;

padding:15px 15px 15px 45px;

border:1px solid #ddd;

border-radius:12px;

font-size:15px;

outline:none;

}

.input-group input:focus{

border-color:#ef4444;

}

.login-options{

display:flex;

justify-content:space-between;

align-items:center;

font-size:14px;

margin-bottom:25px;

}

.login-options a{

text-decoration:none;

color:#ef4444;

}

.login-btn{

width:100%;

padding:15px;

border:none;

border-radius:30px;

background:#ef4444;

color:#fff;

font-size:17px;

font-weight:bold;

cursor:pointer;

transition:.3s;

}

.login-btn:hover{

background:#d63636;

}

.signup-link{

text-align:center;

margin-top:25px;

font-size:15px;

}

.signup-link a{

text-decoration:none;

font-weight:bold;

color:#ef4444;

}

.about-section{

    max-width:1200px;
    margin:30px auto;
    padding:15px;

}

.about-card{

    background:#fff;
    border-radius:20px;
    padding:35px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    margin-bottom:25px;

}

.about-icon{

    width:90px;
    height:90px;
    background:#ff4b5c;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    font-size:38px;
    margin-bottom:20px;

}

.about-card h2{

    font-size:34px;
    margin-bottom:20px;
    color:#222;

}

.about-text{

    color:#666;
    font-size:17px;
    line-height:1.9;
    max-width:850px;
    margin:15px auto;

}

.about-features{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:20px;
    margin-bottom:25px;

}

.feature-box{

    background:#fff;
    border-radius:18px;
    padding:30px;
    text-align:center;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    transition:.3s;

}

.feature-box:hover{

    transform:translateY(-6px);

}

.feature-box i{

    font-size:35px;
    color:#ff4b5c;
    margin-bottom:15px;

}

.feature-box h4{

    margin-bottom:10px;
    color:#222;

}

.feature-box p{

    color:#666;
    line-height:1.7;

}

.mission-card{

    background:linear-gradient(135deg,#ff4b5c,#ff6f61);
    color:#fff;
    border-radius:20px;
    padding:35px;
    text-align:center;

}

.mission-card h3{

    font-size:30px;
    margin-bottom:15px;

}

.mission-card p{

    max-width:900px;
    margin:auto;
    line-height:1.9;
    font-size:17px;

}

@media(max-width:768px){

.about-card{

    padding:25px;

}

.about-card h2{

    font-size:28px;

}

.about-text{

    font-size:15px;

}

.feature-box{

    padding:22px;

}

.mission-card{

    padding:25px;

}

.mission-card h3{

    font-size:24px;

}

}