@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Turret+Road:wght@200;300;400;500;700;800&display=swap');

* { font-family: "Poppins", sans-serif; margin: 0; padding: 0; box-sizing: border-box; scroll-padding-top: 2rem; scroll-behavior: smooth; list-style: none; text-decoration: none; }
:root { --main-color: #FE5B3D; --second-color: #FFAC38; --text-color: #444444; --gradient: linear-gradient(#FE5B3D, #FFAC38); }
html::-webkit-scrollbar { width: 0.5rem; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: var(--main-color); border-radius: 5rem; }
section { padding: 50px 100px; }
header { position: fixed; width: 100%; top: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; background: #EEEFF1; padding: 15px 100px; }
.logo img { width: 40px; }
.navbar { display: flex; }
    .navbar li { position: relative; }
    .navbar a { font-size: 1rem; padding: 10px 20px; color: var(--text-color); font-weight: 500; }
        .navbar a::after { content: ''; width: 0; height: 3px; background: var(--gradient); bottom: -4px; left: 0; transition: .5s; position: absolute; }
            .navbar a:hover::after { width: 100%; }
    header .ri-close-line { display: none; }
#menu-icon { font-size: 24px; cursor: pointer; z-index: 110; display: none; }
.header-btn a { padding: 10px 20px; color: var(--text-color); font-weight: 500; }
.header-btn .sign-in { background: #474FA0; color: #FFFFFF; border-radius: .5rem; transition: .5s; }
    .header-btn .sign-in:hover { background: var(--main-color); }

/* Home */

.home { 
    width: 100%; 
    min-height: 100vh; 
    position: relative; 
    background: url('../images/background.png') no-repeat;
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
    display: grid;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
}
.text h1 { font-size: 3.5rem; letter-spacing: 2px; }
.text span { color: var(--main-color); }
.text p { margin: 0.5rem 0 1rem; font-size: 1rem; }
.app-stores { display: flex; }
    .app-stores img { width: 100px; margin-right: 1rem; cursor: pointer; }
.form-container form { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; position: absolute; bottom: 4rem; left: 100px; background: #FFFFFF; padding: 20px; border-radius: .5rem; }
    .form-container form .btn { flex: 1 1 7rem; padding: 10px 34px; border: none; border-radius: .5rem; background: #474FA0; color: #FFFFFF; font-size: 1rem; font-weight: 500; cursor: pointer; }
        .form-container form .btn:hover { transition: .5s; background: var(--main-color); }
.input-box { flex: 1 1 7rem; display: flex; flex-direction: column; }
    .input-box span { font-weight: 500; }
    .input-box input { padding: 7px; outline: none; border: none; background: #EEEFF1; border-radius: .5rem; font-size: 1rem; }

/* Ride */

.heading { text-align: center; }
    .heading span { font-weight: 500; text-transform: uppercase; }
    .heading h1 { font-size: 2rem; }
.ride-container { display: grid; align-items: center; grid-template-columns: repeat(auto-fit, minmax(250px, auto)); gap: 1rem; margin-top: 2rem; }
    .ride-container .box { text-align: center; padding: 20px; }
        .ride-container .box i { font-size: 34px; padding: 10px; background: #EEEFF1; border-radius: .5rem;  color: var(--main-color); }
            .ride-container .box i:hover { background: var(--gradient); color: #FFFFFF; }
        .ride-container .box h2 { font-size: 1.3rem; font-weight: 500; margin: 1.4rem 0 0.5rem; }

/* Services */

.services-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, auto)); gap: 1rem; margin-top: 2rem; }
    .services-container .box { padding: 10px; border-radius: 1rem; box-shadow: 1px 4px 41px rgba(0, 0, 0, .1); }
        .services-container .box .box-img { width: 100%; height: 200px; }
            .services-container .box .box-img img { width: 100%; height: 100%; border-radius: 1rem; object-fit: cover; object-position: center; }
        .services-container .box p { padding: 0 10px; border: 1px solid var(--text-color); width: 58px; border-radius: .5rem; margin: 1rem 0 1rem; }
        .services-container .box h3 { font-weight: 500; }
        .services-container .box h2 { font-size: 1.1rem; font-weight: 600; color: var(--main-color); margin: 0.2rem 0 0.5rem; }
            .services-container .box h2 span { font-size: .8rem; font-weight: 500; color: var(--text-color); }
        .services-container .box .btn { display: flex; justify-content: center; background: #474FA0; color: #FFFFFF; padding: 10px; border-radius: .5rem; transition: .5s; }
            .services-container .box .btn:hover { background: var(--main-color); }

/* About */

.about-container { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 2rem; align-items: center; gap: 1rem; margin-top: 1rem; }
.about-img img { width: 100%; }
.about-text span { font-weight: 500; color: var(--main-color); text-transform: uppercase; }
.about-text p { margin: 0.5rem 0 1.4rem; }
.about-text .btn { padding: 10px 20px; background: #474FA0; color: #FFFFFF; border-radius: .5rem; transition: .5s; }
    .about-text .btn:hover { background: var(--main-color); }

/* Reviews */

.reviews-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, auto)); gap: 1rem; margin-top: 2rem; }
    .reviews-container .box { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px; box-shadow: 1px 4px 4px rgba(0, 0, 0, .1); border-radius: .5rem; }
        .reviews-container .box h2 { font-size: 1.1rem; font-weight: 600; margin: .5rem 0 .5rem; }
        .reviews-container .box p { font-style: italic; }
        .reviews-container .box i { color: var(--main-color); }
.rev-img { width: 70px; height: 70px; }
    .rev-img img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center; border: 2px solid var(--second-color); }

/* Newsletter */

.newsletter { background: linear-gradient(to top right, #FE5B3D, #FFAC38); display: flex; flex-direction: column; align-items: center; }
    .newsletter h2 { color: #FFFFFF; font-size: 1.8rem; }
    .newsletter .box { margin-top: 1rem; background: #FFFFFF; border-radius: .5rem; padding: 4px 8px; width: 350px; display: flex; justify-content: space-between; }
        .newsletter .box input { border: none; outline: none; }
        .newsletter .box .btn { background: #474FA0; color: #FFFFFF; padding: 8px 20px; border-radius: .5rem; }
.copyright { padding: 20px; display: flex; justify-content: space-between; align-items: center; }
    .copyright span { font-family: 'Turret Road'; }
.social a { color: #444444; padding: 10px; font-size: 21px; }

/* Responsive */

@media(max-width: 1375px) {
    .text { display: none; }
}

@media(max-width: 991px) {
    header { padding: 18px 40px; }
    section { padding: 50px 40px; }
}

@media(max-width: 881px) {
    .home { background-position: center; }
    .form-container .form { bottom: 0.2rem; left: 40px; }
    .text { display: initial; }
}

@media(max-width: 795px){
    header { padding: 11px 40px; }
    #menu-icon { display: initial; }
    .sign-up { display: none; }
    .text h1 { font-size: 2.5rem; width: 320px; }
    .text p { font-size: .8rem; width: 320px; }
    .home { grid-template-columns: 1fr; }
    .form-container form { position: unset; }
    header .navbar { 
        position: absolute;
        top: -500px;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        background: #FFFFFF;
        box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
        transition: .2s ease;
        text-align: left;
    }
        .navbar.active { top: 100%; }
        .navbar a { padding: 1rem; border-left: 2px solid var(--main-color); margin: 1rem; display: block; transition: .3s ease; }
            .navbar a:hover { color: #FFFFFF; background: var(--main-color); border: none; }
            .navbar a::after { display: none; }
    .heading span { font-size: .9rem; font-weight: 600; }
    .heading h1 { font-size: 1.3rem; }

    .about-container { grid-template-columns: 1fr; text-align: center; }
    .about-img { padding: 1rem; order: 1; }
    .about-text { order: 2; }
}

@media(max-width: 568px){
    .home { background-position: left; }
    .text h1 { width: 300px; }
    .text p { width: 300px; }
    .form-container { padding-top: 2rem; }
    .about-text p { font-size: 14px; }
    .copyright { flex-direction: column; }
    .newsletter .box { width: 284px; }
}

@media(max-width: 460px){
    header { padding: 6px 14px; }
    .logo img { width: 30px; }
    section { padding: 50px 6px; }
    .header-btn .sign-in { padding: 7px 10px; font-size: 14px; font-weight: 400; }
    .text h1 { font-size: 2rem; }
    .services-container { grid-template-columns: repeat(auto-fit, minmax(254px, auto)); }
}

.terms-block {
    background: #fff;
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    /* max-width: 700px; */
    margin: 2rem auto;
    text-align: left;
}
.terms-block h1 {
    color: var(--main-color);
    margin-bottom: 1rem;
}
.terms-block p {
    color: var(--text-color);
    font-size: 1.1rem;
}

.plain-section {
    background: none !important;
    min-height: 60vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 120px; /* adjust for navbar height */
}
.terms-block {
    margin-top: 70px;
}