/* GOOGLE FONTS - LEXEND */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap');

/* GOOGLE FONTS - MONTSERRAT */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

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

:root{
    --font1: 'Lexend', sans-serif;
    --font2: 'Montserrat', sans-serif; 
    --color1: #9AFF02;
    --color2: #EB9486;
    --color3: #788475;
}

html{
    scroll-behavior: smooth;
}

body{
    font-family: var(--font1);
    font-size: 16px;
    width: 100%;
    overflow-x: hidden;
}

img{
    width: 100%;
}

a{
    text-decoration: none;
    color: inherit;
}



/* FLEX CLASSES */
.flex{
    display: flex;
}

.row-center{
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.row-between{
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.row-end{
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.row-start{
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.row-around{
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.row-even{
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.column-center{
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.column-start{
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.column-end{
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.wrap{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}


/* COMMONLY USED CLASSES */
.logo{
    width: auto;
    height: 30px;
}

.logo img{
    width: auto;
    height: 100%;
}

.download-button{
    width: 100px;
}

.inside{
    position: relative;
    width: 100%;
    height: 100%;
}

a.cta-button{
    position: relative;
    width: fit-content;
    height: 50px;
    overflow: hidden;
    padding: 0 30px;
    margin-top: 15px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: .9em;
    font-weight: bold;
    background-color: #fff;
    color: #000;
    transition: .5s;
}

a.cta-button.b{
    background-color: #000;
    color: #fff;
}

a.cta-button .cover{
    z-index: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width:  100%;
    height: 0%;
    background-color: var(--color2);
    transition: .15s ease-in;
}

a.cta-button.b .cover{
    background-color: var(--color1);
}

a.cta-button span{
    z-index: 2;
    display: inline-block;
}

a.cta-button:hover .cover{
    height: 100%;
}

a.cta-button.b:hover{
    color: #000;
}

.spaceblock{
    width: 100%;
    height: 10vh;
}

.spaceblock.sm{
    width: 100%;
    height: 5vh;
}

.spaceblock.b{
    background-color: #000;
}

.spaceblock.g{
    background-color: var(--color1);
}

.spaceblock.p{
    background-color: var(--color2);
}

a.link-btn{
    position: relative;
    display: block;
    width: fit-content;
    margin: 15px 0;
    padding: 1px 15px;
    padding-left: 25px;
    border-bottom: 2px solid;
    transition: .35s;
}

a.link-btn .icon{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0,-50%);
    transition: .35s;
}

a.link-btn .text{
    position: relative;
    background-color: inherit;
}

a.link-btn:hover{
    border-bottom: 2px solid;
    padding-left: 5px;
    padding-right: 25px;
}

a.link-btn:hover .icon{
    left: 85%;
}

.ender-link{
    width: fit-content;
    font-weight: bold;
}

.ender-link a{
    color: var(--color2);
    text-decoration: underline;
}

.ender-link a:hover{
    color: var(--color3);
}




/* NAVIGATION BAR */
nav{
    z-index: 999;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 0 30px;
    transition: top 0.3s;
}

nav.non-fix{
    position: static;
}

nav.main{
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 5px 0px;
}

nav.main-b{
    background-color: #000;
    color: #fff;
}

nav.main-p{
    background-color: var(--color2);
    color: #fff;
}

nav .truenav{
    width: 100%;
    height: auto;
    padding: 10px 30px;
    margin: 10px 0;
    border-radius: 50px;
    background-color: #fff;
    transition: border-radius 0.15s ease;
}

nav.main-b .truenav{
    background-color: #000;
}

nav.main-p .truenav{
    background-color: var(--color2);
}

nav .truenav .start{
    width: fit-content;
    font-weight: 500;
}

nav .truenav .start .logo{
    margin-right: 30px;
    margin-bottom: 5px;
}

.dropdown {
    float: left;
    overflow: hidden;
}
  
.dropdown .dropbtn{
    cursor: pointer;
    width: fit-content;
    height: auto;
    padding: 6px 15px;
    margin-right: 10px;
    border-radius: 20px;
    border: none;
    outline: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-family: var(--font1);
    font-size: 1em;
    font-weight: 500;
    text-transform: capitalize;
    background-color: transparent;
}

nav.main-b .dropdown .dropbtn{
    color: #fff;
}

nav.main-p .dropdown .dropbtn{
    color: #fff;
}

.dropdown .dropbtn .dropicon{
    display: inline-block;
    margin-top: 3px;
    margin-left: 7px;
    font-size: .9em;
}

.dropdown:hover .dropbtn, .dropbtn:focus {
    background-color: #000;
    color: #fff;
}

nav.main-p .dropdown:hover .dropbtn, nav.main-p .dropbtn:focus {
    background-color: #fff;
    color: #000;
}

.dropdown-content {
    z-index: 1;
    display: none;
    position: absolute;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    float: none;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    display: block;
    text-align: left;
    background-color: #f9f9f9;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content{
    display: block;
}

nav.main-b .dropdown-content a{
    background-color: #1e1e1e;
}

nav.main-b .dropdown-content a:hover{
    background-color: #788475;
}

nav.main-p .dropdown-content a{
    background-color: #fff;
    color: #000;
}

nav.main-p .dropdown-content a:hover{
    background-color: #ddd;
}

.show {
    display: block;
}
  
nav .truenav .start .navlink{
    width: fit-content;
    height: auto;
    padding: 6px 15px;
    margin-right: 10px;
    border-radius: 20px;
    text-transform: capitalize;
}

nav .truenav .start .navlink:hover{
    background-color: #000;
    color: #fff;
}

nav.main-p .truenav .start .navlink:hover{
    background-color: #fff;
    color: #000;
}

nav .truenav .end .download-button:last-child{
    margin-left: 10px;
}

nav .truenav .menubtn {
    width: 20px;
    height: auto;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
}

.menubtn .line {
    width: 100%;
    height: 3px;
    margin-bottom: 3px;
    background-color: black;
    transition: transform 0.3s ease;
}

nav.main-b .line{
    background-color: #fff;
}

nav.main-p .line{
    background-color: #fff;
}

.menubtn .line:nth-child(2) {
    transform-origin: center;
}

.menubtn.open .line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.menubtn.open .line:nth-child(2) { 
    transform: scaleX(0);
}

.menubtn.open .line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}


nav .menudrop {
    z-index: 999;
    width: 100%;
    height: 0; /* Set initial height to 0 */
    max-height: 0;
    overflow: hidden; /* Add overflow: hidden */
    padding: 0 20px;
    margin-top: -1px;
    border-radius: 0 0 15px 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-transform: capitalize;
    background-color: #fff;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

nav.main-b .menudrop{
    background-color: #000;
}

nav.main-p .menudrop{
    background-color: var(--color2);
}

nav .menudrop .collapsible{
    width: 100%;
}

nav .menudrop .collapsible .icon{
    font-size: .8em;
}

nav .menudrop .collapsed{
    padding: 0px 20px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

nav .menudrop .collapsed .dropped{
    padding: 5px 0;
}

nav .menudrop .menu-link{
    width: 100%;
    padding: 10px 5px;
    margin-bottom: 10px;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

nav .menudrop .end a.download-button:first-child{
    margin-right: 10px;
}

nav .menudrop.view {
    height: auto;
    max-height: 1000px;
    padding-top: 20px;
    padding-bottom: 40px;
}

nav .truenav.rounded {
    border-radius: 25px 25px 0 0;
}  


/* HERO */
.hero{
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
    padding: 0px 5px;
    padding-top: 80px;
    background-color: #000;
}

.hero .slider-space{
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    background-color: #fff;
}

.hero .slider-space .slide{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    background-position: right center;
    background-size: cover;
    background-repeat: no-repeat;
}

.hero .slider-space .slide::before{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    background: rgb(255,255,255);
    background: linear-gradient(45deg, rgba(0,0,0,.7) 35%, rgba(0,0,0,0) 100%);
}

.hero .slider-space .slide .content{
    position: absolute;
    bottom: 15%;
    left: 50px;
    width: 60%;
    color: #fff;
}

.hero .slider-space .slide .content .header{
    width: 100%;
    padding-bottom: 5px;
    margin-bottom: 10px;
    border-bottom: 5px solid var(--color1);
    font-family: var(--font2);
    font-size: 2em;
    font-weight: 600;
}

.hero .slider-space .slide .content .header .tg{
    color: var(--color1);
}

.hero .slider-space .slide .content .actions{
    width: fit-content;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.hero .slider-space .slide .content .actions .download-button{
    width: 150px;
}

.hero .slider-space .slide .content .actions .hero-cta{
    width: max-content;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: 600;
    background-color: #000;
    color: #fff;
}

.hero .slider-space .slide .content .actions .hero-cta:hover{
    background-color: #fff;
    color: #000;
}

.hero .slider-space .slide .content .actions .hero-link{
    width: fit-content;
    margin-left: 10px;
}

.hero .slider-space .slide .content .actions .hero-link:hover{
    text-decoration: underline;
}

.hero .slider-space .slide.bg-vid{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.hero .slider-space .slide.first{
    background-image: url('assets/img/hero1.jpg');
}

.hero .slider-space .slide.second{
    background-image: url('assets/img/hero2.jpg');
}

.hero .slider-space .slide.third{
    background-image: url('assets/img/hero3.jpg');
}



/* SECTIONED */
.sectioned{
    position: relative;
    width: 100%;
    height: auto;
    overflow-x: hidden;
    padding-top: 0px;
    background-color: #000;
}

.sectioned::before{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100vh;
    content: "";
    background-color: #f5f5f5;
}

.sectioned .sectioned-content{
    z-index: 2;
    position: relative;
    width: 100%;
    height: auto;
    padding-top: 100px;
    padding-bottom: 100px;
    border-radius: 35px;
    background-color: #fff;
}

.driver{
    width: 100%;
    height: 80vh;
    padding: 0 50px;
}

.driver.flex.row-start{
    justify-content: space-between;
}

.driver .driver-image{
    width: 50%;
    height: 100%;
    border-radius: 25px;
    overflow: hidden;
}

.driver .driver-image img{
    width: auto;
    height: 100%;
    object-fit: cover;
}

.driver .driver-content{
    width: 47%;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.driver .driver-content .top{
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.driver .driver-content .top .subtitle{
    font-size: 1.1em;
    font-weight: 700;
    color: var(--color2);
}

.driver .driver-content .top .heading{
    font-size: 2.5em;
    font-weight: 600;
}

.driver .driver-content .drive-list{
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.driver .driver-content .drive-list .term{
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.driver .driver-content .drive-list .term .term-image{
    width: 65px;
    height: 65px;
    padding: 7px;
    margin-right: 15px;
    border-radius: 7px;
    background-color: rgba(120, 132, 117, 1);
    display: none;
}

.driver .driver-content .drive-list .term .term-text{
    width: 100%;
}

.driver .driver-content .drive-list .term .term-text .head{
    width: fit-content;
    height: auto;
    margin-bottom: 1px;
    font-weight: bold;
}

.driver .driver-content .drive-list .term .term-text .emphasis{
    width: 100%;
    font-size: .9em;
    font-weight: 500;
    color: var(--color3);
}

.driver .driver-content .actions{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
}

.driver .driver-content .actions a.cta-button{
    padding: 10px 15px;
    margin: 0;
}

.driver .driver-content .actions .ender-link{
    font-size: .9em;
    margin: 0;
    padding: 0;
}

.rider{
    width: 100%;
    height: 80vh;
    padding: 0 50px;
    margin-top: 100px;
}

.rider.flex.row-start{
    justify-content: space-between;
}

.rider .rider-image{
    width: 50%;
    height: 100%;
    border-radius: 25px;
    overflow: hidden;
}

.rider .rider-image img{
    width: auto;
    height: 100%;
    object-fit: cover;
}

.rider .rider-content{
    width: 47%;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
}

.rider .rider-content .top{
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: right;
}

.rider .rider-content .top .subtitle{
    font-size: 1.1em;
    font-weight: 700;
    color: var(--color2);
}

.rider .rider-content .top .heading{
    font-size: 2.5em;
    font-weight: 600;
}

.rider .rider-content .drive-list{
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
}

.rider .rider-content .drive-list .term{
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
}

.rider .rider-content .drive-list .term .term-image{
    width: 65px;
    height: 65px;
    padding: 7px;
    margin-left: 10px;
    border-radius: 7px;
    background-color: rgba(235, 148, 134, .1);
    display: none;
}

.rider .rider-content .drive-list .term .term-text{
    width: 100%;
    text-align: right;
}

.rider .rider-content .drive-list .term .term-text .head{
    height: auto;
    margin-bottom: 1px;
    font-weight: bold;
}

.rider .rider-content .drive-list .term .term-text .emphasis{
    width: 100%;
    font-size: 1em;
    font-weight: 500;
    color: var(--color3);
}

.rider .rider-content .actions{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
}

.rider .rider-content .actions a.cta-button{
    padding: 10px 15px;
    margin: 0;
}

.rider .rider-content .actions .ender-link{
    font-size: .9em;
    margin: 0;
    padding: 0;
}

/* DOWNLOAD */
.download{
    position: relative;
    width: 100%;
    height: 85vh;
    background-color: #f5f5f5;
}

.download .download-span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 85%;
    height: 85%;
    overflow: hidden;
    border-radius: 30px;
    background-color: #fff;
}

.download .download-span .inside{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.download .download-span .download-content{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    color: #fff;
}

.download .download-span .download-content::before{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    background-color: rgba(0,0,0,0.75);
    z-index: -1;
}

.download .download-span .download-content .heading{
    margin-bottom: 10px;
    font-family: var(--font2);
    font-size: 2.5em;
    font-weight: 700;
    text-shadow: 0 0 2px #555;
    color: var(--color1);
}

.download .download-span .download-content .emphasis{
    width: 80%;
    margin-bottom: 20px;
    font-weight: 500;
}

.download .download-span .download-content .download-buttons{
    width: fit-content;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.download .download-span .download-content .download-buttons .download-button{
    width: 200px;
    margin-right: 10px;
}

.download .download-span .screens{
    position: absolute;
    bottom: -20%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: -2;
    height: auto;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
}

.download .download-span .screens .screen1{
    z-index: 2;
    position: relative;
    width: 50%;
}

.download .download-span .screens .screen1 img{
    width: 100%;
}



/* FOOTER */
footer{
    width: 100%;
    height: auto;
    padding: 20px 50px;
    background-color: #f5f5f5;
}

footer.bl{
    background-color: #000;
    color: #fff;
}

.topline{
    width: 100%;
    height: 1px;
    margin: 50px 0;
    background-color: #aaa;
}

.footer-sect{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
}

.footer-sect .sect.main{
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.foot-logo{
    width: 150px;
    margin-bottom: 30px;
}

.footer-sect .sect.main .download-buttons{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.footer-sect .sect.main .download-buttons .download-button{
    width: 150px;
    margin-bottom: 15px;
}

.footer-sect .sect.sub{
    width: 75%;
    align-items: flex-start;
    justify-content: space-between;
}

.footer-sect .sect.sub .foot{
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.footer-sect .sect.sub .foot .foothead{
    margin-bottom: 20px;
    font-weight: bold;
    text-transform: capitalize;
}

.footer-sect .sect.sub .foot .footlink{
    width: fit-content;
    margin-bottom: 20px;
    border-bottom: 2px solid transparent;
}

.footer-sect .sect.sub .foot .footlink:hover{
    border-color: var(--color1);
    transition: .2s;
}

.footer-end{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
}

.social{
    width: fit-content;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.social .soci{
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    background-color: rgba(255, 255, 255, .05);
    transition: .3s;
}

.social .soci:hover{
    background-color: var(--color2);
    color: #fff;
}

.footer-end .endlinks{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: 0.8em;
}

.footer-end .endlinks .dot{
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    margin: 0px 5px;
    background-color: #000;
}

footer.bl .footer-end .endlinks .dot{
    background-color: #fff;
}

/* INDEX RESPONSIVE */
@media screen and (max-width: 500px){ 
    /* COMMONLY USED CLASSES */
    .logo{
        width: auto;
        height: 25px;
    }

    .logo img{
        width: auto;
        height: 100%;
    }

    .download-button{
        width: 100px;
    }

    .inside{
        position: relative;
        width: 100%;
        height: 100%;
    }

    a.cta-button{
        position: relative;
        width: fit-content;
        height: 30px;
        overflow: hidden;
        padding: 0 15px;
        margin-top: 15px;
        border-radius: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: .9em;
        font-weight: bold;
        background-color: #fff;
        color: #000;
        transition: .5s;
    }

    a.cta-button .cover{
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        width:  100%;
        height: 0%;
        background-color: var(--color2);
        transition: .25s ease-out;
    }

    a.cta-button span{
        z-index: 2;
        display: inline-block;
    }

    a.cta-button:hover .cover{
        height: 100%;
    }


    /* NAVIGATION BAR */
    nav{
        z-index: 999;
        position: fixed;
        width: 100%;
        height: auto;
        padding: 10px 15px;
        background-color: transparent;
    }

    nav .truenav{
        width: 100%;
        height: auto;
        padding: 10px 20px;
        border-radius: 50px;
        background-color: #fff;
    }

    nav .truenav .start .logo{
        margin-right: 0px;
        margin-bottom: 0px;
    }

    nav .truenav .start .navlinks{
        display: none;
    }

    nav .truenav .end{
        display: none;
    }

    nav .truenav .menubtn{
        display: block;
    }


    /* HERO */
    .hero{
        width: 100%;
        height: 100vh;
        background-color: var(--color1);
    }

    .hero .hero-bg{
        position: relative;
        top: 20%;
        width: 100%;
        height: 80%;
        float: none;
        background-image: url('assets/img/hero.png');
        background-repeat: no-repeat;
        background-position: 73% bottom;
        background-size: cover;
    }

    .hero .hero-bg::before{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: "";
        background: linear-gradient(0deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0.35));
    }

    .hero .hero-bg .capt{
        position: absolute;
        top: 43%;
        right: 22%;
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-end;
        justify-content: flex-end;
    }

    .hero .hero-bg .capt .capt-logo{
        width: 65px;
    }

    .hero .hero-bg .capt .arrow{
        position: relative;
        width: 60px;
        height: 2px;
        margin-bottom: -25px;
        margin-right: -15px;
        transform: rotate(-60deg);
        background-color: #fff;
    }

    .hero .hero-bg .capt .arrow .ball{
        position: absolute;
        top: 50%;
        right: 0px;
        transform: translate(0,-50%);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fff;
    }

    .hero .hero-content{
        position: absolute;
        top: 8%;
        left: 15px;
        right: 15px;
        transform: translate(0, 0);
        width: auto;
        height: auto;
        padding: 30px 35px;
        padding-top: 60px;
        border-radius: 20px;
        background-color: #000;
    }

    .hero .hero-content .car{
        position: absolute;
        bottom: 100%;
        left: -5px;
        width: 70px;
        animation-name: moveCar;
        animation-duration: 1s;
        animation-timing-function: ease-out;
    }

    @keyframes moveCar {
        0%{left: -200px;}
        100%{left: -5px;}
    }

    .hero .hero-content .hero-caption{
        margin-bottom: 10px;
        font-size: 2em;
        font-weight: bold;
        color: #fff;
    }

    .hero .hero-content .end{
        display: flex;
        width: 100%;
        justify-content: flex-start;
    }

    .hero .hero-content .end a.download-button{
        width: 120px;
    }

    .hero .hero-content .end a.download-button:first-child{
        margin-right: 15px;
    }


    /* FEATURES */
    .features{
        position: relative;
        width: 100%;
        height: fit-content;
        min-height: 100vh;
        padding: 50px 0px;
        padding-bottom: 0;
        background-color: var(--color1);
    }

    .features .screen{
        position: absolute;
        top: -18%;
        right: 15px;
        left: 15px;
        transform: rotate(0deg);
        width: auto;
        z-index: 0;
    }    

    .features .feature-content{
        position: relative;
        width: 100%;
        height: 100%;
        padding: 30px;
        padding-top: 50px;
        margin-top: 150px;
        border-radius: 30px;
        background-color: #fff;
    }

    .features .feature-content .top{
        width: 100%;
        margin-bottom: 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .features .feature-content .top .header{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .features .feature-content .top .header .subtitle{
        width: fit-content;
        margin-bottom: 5px;
        font-size: .85em;
        font-weight: 700;
        color: var(--color2);
    }

    .features .feature-content .top .header .heading{
        width: 100%;
        height: auto;
        font-size: 1.25em;
        font-weight: 600;
    }

    .features .feature-content .feats-list{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .features .feature-content .feats-list .feat{
        width: 100%;
        height: auto;
        margin-bottom: 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .features .feature-content .feats-list .feat .feat-image{
        width: 90px;
        height: 90px;
        padding: 5px;
        margin-right: 15px;
        border-radius: 15px;
        background-color: rgba(235, 148, 134, .1);
    }

    .features .feature-content .feats-list .feat .feat-text{
        width: 60%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .features .feature-content .feats-list .feat .feat-text .head{
        margin-bottom: 5px;
        font-weight: bold;
    }

    .features .feature-content .feats-list .feat .feat-text .emphasis{
        font-size: .85em;
        font-weight: bold;
        color: var(--color3);
    }


    /* SECTIONED */
    .sectioned{
        position: relative;
        width: 100%;
        height: auto;
        padding-top: 50px;
        background-color: var(--color1);
    }

    .sectioned::before{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100vh;
        content: "";
        background-color: #fff;
    }

    .sectioned .sectioned-content{
        z-index: 2;
        position: relative;
        width: 100%;
        height: auto;
        padding-top: 30px;
        padding-bottom: 100px;
        border-radius: 30px;
        background-color: #000;
    }

    .driver{
        width: 100%;
        height: auto;
        padding: 0 30px;
    }

    .driver.flex.row-start{
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .driver .driver-image{
        width: 100%;
        border-radius: 15px;
        overflow: hidden;
    }

    .driver .driver-content{
        width: 100%;
        padding: 20px 0px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        color: #fff;
    }

    .driver .driver-content .top{
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .driver .driver-content .top .subtitle{
        font-size: .9em;
        font-weight: bold;
        color: var(--color2);
    }

    .driver .driver-content .top .heading{
        font-size: 1.4em;
        font-weight: bold;
    }

    .driver .driver-content .drive-list{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .driver .driver-content .drive-list .term{
        width: 100%;
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .driver .driver-content .drive-list .term .term-image{
        width: 60px;
        height: 60px;
        padding: 10px;
        margin-right: 10px;
        border-radius: 7px;
        background-color: rgba(235, 148, 134, .1);
    }

    .driver .driver-content .drive-list .term .term-text{
        width: 100%;
    }

    .driver .driver-content .drive-list .term .term-text .head{
        width: fit-content;
        height: auto;
        margin-bottom: 1px;
        font-weight: bold;
        /* text-decoration: underline 2px; */
    }

    .driver .driver-content .drive-list .term .term-text .emphasis{
        width: 100%;
        font-size: .8em;
        font-weight: bold;
        color: #ddd;
    }

    .rider{
        width: 100%;
        height: auto;
        margin-top: 50px;
        padding: 0 30px;
    }

    .rider.flex.row-start{
        flex-direction: column-reverse;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .rider .rider-image{
        width: 100%;
        border-radius: 15px;
        overflow: hidden;
    }

    .rider .rider-content{
        width: 100%;
        padding: 20px 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        color: #fff;
    }

    .rider .rider-content .top{
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
    }

    .rider .rider-content .top .subtitle{
        font-size: .9em;
        font-weight: bold;
        color: var(--color2);
    }

    .rider .rider-content .top .heading{
        font-size: 1.4em;
        font-weight: bold;
    }

    .rider .rider-content .drive-list{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .rider .rider-content .drive-list .term{
        width: 100%;
        margin-bottom: 15px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .rider .rider-content .drive-list .term .term-image{
        width: 60px;
        height: 60px;
        padding: 5px;
        margin-left: 0px;
        margin-right: 10px;
        border-radius: 7px;
        background-color: rgba(235, 148, 134, .1);
    }

    .rider .rider-content .drive-list .term .term-text{
        width: 90%;
        text-align: left;
    }

    .rider .rider-content .drive-list .term .term-text .head{
        /* width: fit-content; */
        height: auto;
        margin-bottom: 3px;
        font-weight: bold;
        text-decoration: underline 2px;
    }

    .rider .rider-content .drive-list .term .term-text .emphasis{
        font-size: .8em;
        font-weight: bold;
        color: #ddd;
    }

    .safety{
        position: relative;
        width: 100%;
        height: 65vh;
        padding: 0 30px;
        margin-top: 100px;
        overflow: hidden;
    }

    .safety .safety-bg{
        z-index: 1;
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        background: url('assets/img/safety.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 80% 0%;
    }

    .safety .safety-bg img{
        display: none;
    }

    .safety .safety-bg::before{
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        content: "";
        background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 25%);
    }

    .safety .safety-content{
        z-index: 2;
        position: absolute;
        top: 10%;
        left: 30px;
        right: 60px;
        width: auto;
        height: auto;
        color: #fff;
    }

    .safety .safety-content .top{
        width: 100%;
        margin-bottom: 5px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .safety .safety-content .top .header{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .safety .safety-content .top .header .subtitle{
        width: fit-content;
        margin-bottom: 5px;
        font-size: .85em;
        font-weight: 700;
        color: var(--color1);
    }

    .safety .safety-content .top .header .heading{
        width: 100%;
        height: auto;
        margin-bottom: 20px;
        font-size: 1.65em;
        font-weight: 600;
    }

    .safety .safety-content .emphasis{
        margin-bottom: 20px;
        font-size: 1em;
    }

    .safety .safety-content .actions{
        width: fit-content;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .safety .safety-content .actions a.safety-cta{
        position: relative;
        width: fit-content;
        height: 30px;
        overflow: hidden;
        padding: 0 15px;
        padding-left: 25px;
        margin-bottom: 10px;
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: .9em;
        font-weight: bold;
        background-color: rgba(154, 255, 2, .2);
        color: #fff;
        /* transition: .5s; */
    }

    .safety .safety-content .actions a.safety-cta .cover{
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        width:  15px;
        height: 100%;
        background-color: var(--color1);
        transition: .35s;
    }

    .safety .safety-content .actions a.safety-cta span{
        z-index: 2;
        display: inline-block;
    }

    .safety .safety-content .actions a.safety-cta:hover{
        color: #000;
    }

    .safety .safety-content .actions a.safety-cta:hover .cover{
        width: 100%;
    }


    /* DOWNLOAD */
    .download{
        position: relative;
        width: 100%;
        height: 70vh;
        overflow: visible;
        margin-top: 100px;
    }

    .download .download-span{
        position: absolute;
        top: 60%;
        left: 30px;
        right: 30px;
        transform: translate(-0%,-50%);
        width: auto;
        height: 80%;
        padding: 50px 20px 20px 20px;
        border-radius: 30px;
        background-color: var(--color2);
    }

    .download .download-span .download-content{
        position: absolute;
        top: 50%;
        left: 0px;
        transform: translate(0,-10%);
        width: 100%;
        height: auto;
        text-align: center;
    }

    .download .download-span .download-content .heading{
        margin-bottom: 10px;
        font-size: 1.5em;
        font-weight: bold;
        color: #fff;
    }

    .download .download-span .download-content .emphasis{
        width: 100%;
        margin-bottom: 20px;
        font-weight: bold;
    }

    .download .download-span .download-content .download-buttons{
        width: fit-content;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .download .download-span .download-content .download-buttons .download-button{
        width: 130px;
        margin-right: 10px;
    }

    .download .download-span .screens{
        width: fit-content;
        position: absolute;
        top: -45%;
        right: inherit;
        left: 50%;
        transform: translate(-50%,0%);
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-start;
    }

    .download .download-span .screens .screen1{
        z-index: 2;
        position: relative;
        transform: rotate(-20deg);
        margin-bottom: 85px;
    }

    .download .download-span .screens .screen1 img{
        width: auto;
        height: 250px;
    }

    .download .download-span .screens .screen2{
        z-index: 1;
        position: relative;
        margin-left: -50px;
        transform: rotate(20deg);
    }

    .download .download-span .screens .screen2 img{
        width: auto;
        height: 250px;
    }


    /* FOOTER */
    footer{
        width: 100%;
        height: auto;
        padding: 20px 30px;
    }

    .topline{
        width: 100%;
        height: 1px;
        margin: 30px 0;
        background-color: #aaa;
    }

    .footer-sect{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .footer-sect .sect.main{
        width: 100%;
        margin-bottom: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .foot-logo{
        width: 150px;
        margin-bottom: 15px;
    }

    .footer-sect .sect.main .download-buttons{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .footer-sect .sect.main .download-buttons .download-button{
        width: 150px;
        margin-bottom: 0px;
    }

    .footer-sect .sect.main .download-buttons .download-button:first-child{
        margin-right: 15px;
    }

    .footer-sect .sect.sub{
        width: 100%;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .footer-sect .sect.sub .foot{
        width: 48%;
        /* margin-right: 20px; */
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .footer-sect .sect.sub .foot .foothead{
        margin-bottom: 20px;
        font-weight: bold;
        text-transform: capitalize;
    }

    .footer-sect .sect.sub .foot .footlink{
        width: fit-content;
        margin-bottom: 20px;
        border-bottom: 2px solid transparent;
    }

    .footer-sect .sect.sub .foot .footlink:hover{
        border-color: var(--color1);
        transition: .2s;
    }

    .footer-end{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .social{
        width: fit-content;
        height: auto;
        margin-bottom: 15px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .social .soci{
        width: 50px;
        height: 50px;
        margin-right: 0px;
        margin: 10px;
        border-radius: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 1.1em;
        background-color: rgba(255, 255, 255, .05);
        transition: .3s;
    }

    .social .soci:hover{
        background-color: var(--color2);
        color: #fff;
    }

    .footer-end .endlinks{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        font-size: 1em;
    }

    .footer-end .endlinks .dot{
        display: inline-block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        margin: 0px 15px;
        background-color: #000;
    }
}



/* ABOUT PAGE */
.intro{
    position: relative;
    width: 100%;
    height: 90vh;
    padding: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    background-color: var(--color3);
    background-image: url(assets/img/about-image.jpg);
    background-repeat: no-repeat;
    background-size: 73.5%;
    background-position: right top;
}

.intro::before{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    background-color: rgb(0, 0, 0, .6);
}

.intro .content{
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.intro .content .caption{
    font-size: 1.5em;
    font-weight: 600;
    color: var(--color1);
}

.intro .content .header{
    font-family: var(--font2);
    font-size: 3em;
    font-weight: 800;
    color: #fff;
}

.intro .content .header .tg{
    color: var(--color1);
}

.about{
    width: 100%;
    height: auto;
    padding: 80px 60px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.about .main-header{
    width: 45%;
    height: auto;
    font-family: var(--font2);
    font-size: 2.75em;
    font-weight: 500;
}

.about .main-header .tg{
    font-weight: bold;
    color: var(--color1);
}

.about p{
    width: 53%;
    color: #1e1e1e;
}

.writeup{
    width: 100%;
    padding: 80px 100px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    background-color: #fafafa;
}

.writeup .linear{
    width: 48%; 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 15px;
}

.writeup .linear .block{
    width: 100%;
    height: auto;
    min-height: 250px;
    padding: 20px;
    /* border: 1px solid var(--color1); */
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    background-color: rgba(154, 255, 2, .4);
}

.writeup .linear .block .head{
    font-size: 1.5em;
    font-weight: 600;
}

.writeup .linear .block p{
    font-weight: 500;
}

.writeup .linear .block.a{
    background-image: url('assets/icons/blob1.svg');
    background-repeat: no-repeat;
    background-position: bottom -10% right;
    background-size: 80%;
}

.writeup .linear .block.b{
    background-image: url('assets/icons/blob2.svg');
    background-repeat: no-repeat;
    background-position: bottom 15% right;
    background-size: 90%;
}

.writeup .linear .header{
    width: 100%;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--color1);
    font-family: var(--font2);
    font-size: 1.25em;
    font-weight: 600;
}

.writeup .linear .minis{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 3% 0;
}

.writeup .linear .minis .cube{
    position: relative;
    width: 49%;
    height: 49%;
    overflow: hidden;
    padding: 30px 15px;
    border-radius: 5px;
    background-color: var(--color3);
}

.writeup .linear .minis .cube .head{
    position: relative;
    z-index: 2;
    font-size: 1.5em;
    font-weight: 700;
    text-transform: capitalize;
    color: #fff;
}

.writeup .linear .minis .cube .icon{
    position: absolute;
    z-index: 1;
    top: 20%;
}

.writeup .linear .minis .cube:nth-child(1):after{
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    content: "";
    width: 0%;
    transition: .5s;
    background-color: var(--color2);
}

.writeup .linear .minis .cube:nth-child(2):after{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    content: "";
    height: 0%;
    transition: .5s;
    background-color: var(--color2);
}

.writeup .linear .minis .cube:nth-child(3):after{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
    height: 0%;
    transition: .5s;
    background-color: var(--color2);
}

.writeup .linear .minis .cube:nth-child(4):after{
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    content: "";
    width: 0%;
    transition: .5s;
    background-color: var(--color2);
}

.writeup .linear .minis .cube:hover::after{
    height: 100%;
    width: 100%;
}

.ceo{
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 65px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.ceo .top{
    width: 55%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 25px;
}

.ceo .top .start{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.ceo .top .start .caption{
    font-size: 1.1em;
    font-weight: bold;
    color: var(--color3);
}

.ceo .top .start .header{
    font-family: var(--font2);
    font-size: 2.5em;
    font-weight: 500;
}

.ceo .base{
    width: 40%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.ceo .base .image{
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
}

.faq{
    position: relative;
    width: 100%;
    height: 80vh;
    overflow-x: hidden;
    padding: 50px 80px;
    &::-webkit-scrollbar {
        display: none;
    }
}

.faq .top{
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.faq .top .header{
    width: 80%;
    font-size: 2em;
    font-weight: 900;
    text-transform: uppercase;
}

.faq .top .header .spec{
    color: var(--color2);
}

.faq .quest-list{
    width: 60%;
}

.collapsible {
    cursor: pointer;
    width: 100%;
    padding: 10px;
    border: none;
    font-size: 1em;
    font-weight: bold;
    text-align: left;
    background-color: #fff;
}
  
.collapsible:hover {
    background-color: #f5f5f5;
}
  
.collapsible:after {
    content: '\002B';
    float: right;
    margin-left: 5px;
    font-size: 1.5em;
    font-weight: bold;
    color: var(--color2);
}
  
.active:after {
    content: "\2212";
}
  
.collapsed{
    padding: 0 20px;
    margin-bottom: 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: transparent;
}

.collapsed p{
    padding: 15px;
    border-radius: 10px;
    background-color: rgb(235, 148, 134, .1);
}

.collapsible.navved {
    cursor: pointer;
    width: 100%;
    padding: 10px 0;
    border: none;
    font-size: 1em;
    font-weight: normal;
    text-align: left;
    background-color: #fff;
    border-top: none;
}

nav.main-b .collapsible.navved{
    background-color: #000;
}

nav.main-p .collapsible.navved{
    background-color: var(--color2);
}

.collapsible.navved:after {
    content: none;
}

.collapsible.navved:after {
    content: none;
}


.help{
    position: relative;
    width: 100%;
    height: 80vh;
    padding: 50px 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    background-color: #000;
    color: #fff;
}

.help .start{
    width: auto;
    height: 100%;
}

.help .start .screens{
    position: relative;
    width: 100%;
    margin-top: -150px;
    margin-bottom: 20px;
    margin-right: 50px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
}

.help .start .screens .screen1{
    width: 250px;

}

.help .start .screens .screen2{
    width: 230px;
    margin-left: -100px;
}

.help .start .download-buttons{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.help .start .download-buttons .download-button{
    width: 180px;
    margin-right: 10px;
}

.help .content{
    overflow-x: hidden;
    scrollbar-width: none;
    &::-webkit-scrollbar {
        display: none;
    }
}

.help .content .heading{
    font-size: 1.75em;
    color: var(--color1);
}

.help .content .sub-heading{
    width: 85%;
    margin-bottom: 15px;
    font-size: 1.5em;
}

.help .content .emphasis{
    width: 85%;
    margin-bottom: 30px;
    font-weight: 300;
}

.help .content .contact-lines{
    width: 100%;
    margin-bottom: 20px;
}

.help .content .contact-lines .line{
    width: max-content;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.help .content .contact-lines .line .icon{
    width: 30px;
    margin-right: 10px;
}

.help .content .contact-lines .line .text{
    color: var(--color1);
}

.help .content .social{
    width: 100%;
    margin-top: 10px;
    justify-content: flex-end;
}

.help .content .social .soci{
    margin-right: 0px;
    margin-left: 10px;
    font-size: 1.2em;
    background-color: rgba(154, 255, 2, .35);
    transition: .3s;
}

.help .content .social .soci:hover{
    background-color: var(--color1);
    color: #000;
}

/* ABOUT RESPONSIVE */
@media screen and (max-width: 500px){
    .intro{
        position: relative;
        width: 100%;
        height: 100vh;
    }
    
    .intro .content{
        position: absolute;
        top: inherit;
        left: 30px;
        right: 30px;
        bottom: 10%;
        transform: translate(0,0%);
        width: auto;
    }
    
    .intro .content .iconic{
        display: none;
        width: 150px;
        margin-bottom: 10px;
    }
    
    .intro .content .top{
        width: 100%;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .intro .content .top .heading{
        font-size: 2.5em;
        font-weight: bold;
    }
    
    .intro .content .top .sub-heading{
        font-size: 1.6em;
    }
    
    .intro .intro-image{
        position: absolute;
        top: 10%;
        right: 30px;
        left: 30px;
        transform: translate(0,0%);
        width: auto;
        height: 45%;
        border-radius: 15px;
        background-image: url('assets/img/about-image.jpg');
        background-repeat: no-repeat;
        background-position: 80%;
        background-size: cover;
    }
    
    .intro .aesblock{
        position: absolute;
        top: 15%;
        right: 0;
        transform: translate(0,-50%);
        width: 100%;
        height: 40%;
        border-radius: 15px 0 0 15px;
        background-color: rgba(154, 255, 2, .25);
    }
    
    .mover{
        position: absolute;
        left: 25px;
        bottom: 20px;
        width: 40px;
        height: 40px;
        overflow: hidden;
        border-radius: 50%;
        border: 2px solid var(--color3);
        display: block;
        font-size: 1.3em;
        background-color: transparent;
        color: var(--color3);
    }
    
    .mover .anim{
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    .mover .anim .icon{
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translate(-50%,0);
        animation-name: moveArr;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    
    @keyframes moveArr {
        0%{top: -15px;}
        100%{top: 110%;}
    }
    

    .offers{
        width: 100%;
        padding: 30px;
    }
    
    .offers .top{
        margin-bottom: 35px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .offers .top .heading{
        width: max-content;
        margin-right: 0px;
        margin-bottom: 5px;
        font-size: 1.2em;
        font-weight: bold;
    }
    
    .offers .top .emphasis{
        width: 100%;
        font-size: .8em;
    }
    
    .offers .group{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    .offers .group .block{
        position: relative;
        width: 100%;
        height: 250px;
        margin-bottom: 20px;
        padding: 15px 20px;
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 0 0 2px 1px rgba(154, 255, 2, .3);
    }
    
    .offers .group .block .num{
        position: absolute;
        top: 15px;
        left: 20px;
        font-size: 1.5em;
        color: #1e1e1e;
    }
    
    .offers .group .block .icon{
        position: absolute;
        top: 15px;
        right: 20px;
        width: 130px;
    }
    
    .offers .group .block .writing{
        position: absolute;
        bottom: 15px;
        left: 20px;
        right: 20px;
    }
    
    .offers .group .block .writing .head{
        margin-bottom: 5px;
        font-size: 1.1em;
        font-weight: bold;
    }
    
    .offers .group .block .writing .text{
        font-size: .75em;
    }
    
    .offers .group .block.black{
        background-color: #000;
        color: #fff;
        box-shadow: none;
    }
    
    .offers .group .block.black .num{
        color: #aaa;
    }
    
    
    .writeup{
        position: relative;
        width: 100%;
        height: auto;
        margin: 20px 0;
        padding: 30px;
    }
    
    .writeup .inner.flex{
        width: 100%;
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .writeup .linear{
        width: 100%;
        margin: 0 10px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .writeup .linear .boxed{
        position: relative;
        width: 100%;
        height: 100%;
        padding: 50px;
        margin-bottom: 10px;
        border-radius: 15px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        color: #fff;
    }
    
    .writeup .boxed::before{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: "";
        z-index: 0;
    }
    
    .writeup .linear .boxed .head{
        position: relative;
        margin-bottom: 10px;
        font-size: 1.2em;
        font-weight: bold;
        text-transform: capitalize;
    }
    
    .writeup .linear .boxed .text{
        position: relative;
        text-transform: capitalize;
        line-height: 130%;
    }
    
    .writeup .boxed.a{
        color: #000;
        text-shadow: none;
        background-image: linear-gradient(0deg, rgba(235, 148, 134, 0.65), rgba(235, 148, 134, 0.65)), url('assets/img/rider.jpg');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .writeup .boxed.a::before{
        background-color: #fff;
        opacity: .3;
    }
    
    .writeup .boxed.b{
        text-shadow: 0 0 5px #000;
        background-image: url('assets/img/boxedB.jpg');
        background-position: center 15%;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .writeup .boxed.b::before{
        background-color: #000;
        opacity: .7;
    }
    
    .writeup .boxed.c{
        height: 50%;
        text-shadow: 0 0 5px #000;
        background-image: url('assets/img/boxedC.jpg');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .writeup .boxed.c::before{
        background-color: #1e1e1e;
        opacity: .7;
    }
    
    .writeup .boxed.d{
        height: 100%;
        color: #000;
        text-shadow: none;
        background-image: url('assets/img/boxedD.jpg');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        color: #000;
    }
    
    .writeup .boxed.d::before{
        background-color: rgb(217, 217, 217);
        opacity: .7;
    }
    
    .writeup .boxed.e{
        height: 50%;
        text-shadow: 0 0 5px #000;
        background-image: url('assets/img/boxedC.jpg');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .writeup .boxed.e::before{
        background-color: #000;
        opacity: .7;
    }
    
    
    .faq{
        position: relative;
        width: 100%;
        height: 110vh;
        padding: 50px 30px;
    }

    .faq .inside.flex{
        flex-direction: column;
    }
    
    .faq .top{
        width: 100%;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .faq .top .header{
        width: 100%;
        font-size: 1.75em;
        font-weight: 900;
        text-transform: uppercase;
    }
    
    .faq .quest-list{
        width: 100%;
    }
    
    .collapsible {
        cursor: pointer;
        width: 100%;
        padding: 10px;
        border: none;
        font-size: .9em;
        font-weight: bold;
        text-align: left;
        background-color: #fff;
    }
      
    .collapsible:hover {
        background-color: #f5f5f5;
    }
      
    .collapsible:after {
        content: '\002B';
        float: right;
        margin-left: 5px;
        font-size: 1.5em;
        font-weight: bold;
        color: var(--color2);
    }
      
    .active:after {
        content: "\2212";
    }
      
    .collapsed{
        padding: 0 20px;
        margin-bottom: 20px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        background-color: transparent;
    }
    
    .collapsed p{
        padding: 15px;
        border-radius: 10px;
        background-color: rgb(235, 148, 134, .1);
    }
    
    .collapsible.navved {
        cursor: pointer;
        width: 100%;
        padding: 10px 0;
        border: none;
        font-size: 1em;
        font-weight: normal;
        text-align: left;
        background-color: #fff;
        border-top: none;
    }
    
    .collapsible.navved:after {
        content: none;
    }
      
    .collapsible.navved:after {
        content: none;
    }
    
    
      
    
    .help{
        position: relative;
        width: 100%;
        height: 100vh;
        padding: 30px 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        background-color: #000;
        color: #fff;
    }
    
    .help .start{
        width: auto;
        height: max-content;
        margin-bottom: 35px;
    }
    
    .help .start .screens{
        position: relative;
        width: 100%;
        margin-top: -150px;
        margin-bottom: 20px;
        margin-right: 0px;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: center;
    }
    
    .help .start .screens .screen1{
        width: 220px;
    
    }
    
    .help .start .screens .screen2{
        width: 200px;
        margin-left: -100px;
    }
    
    .help .start .download-buttons{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    
    .help .start .download-buttons .download-button{
        width: 130px;
        margin-right: 0px;
        margin: 0px 5px;
    }
    
    .help .content{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .help .content .heading{
        font-size: 1.75em;
        color: var(--color1);
    }
    
    .help .content .sub-heading{
        width: 100%;
        margin-bottom: 15px;
        font-size: 1.4em;
    }
    
    .help .content .emphasis{
        width: 100%;
        margin-bottom: 30px;
        font-weight: 300;
        color: #ddd;
    }
    
    .help .content .contact-lines{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        margin-bottom: 0px;
    }
    
    .help .content .contact-lines .line{
        width: fit-content;
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
    
    .help .content .contact-lines .line .icon{
        display: none;
        width: 30px;
        margin-right: 0px;
        margin-bottom: 10px;
    }
    
    .help .content .contact-lines .line .text{
        color: var(--color1);
    }
    
    .help .content .social{
        display: none;
        width: 100%;
        margin-top: 10px;
        justify-content: flex-end;
    }
    
    .help .content .social .soci{
        margin-right: 0px;
        margin-left: 10px;
        font-size: 1.2em;
        background-color: rgba(154, 255, 2, .35);
        transition: .3s;
    }
    
    .help .content .social .soci:hover{
        background-color: var(--color1);
        color: #000;
    }
}



.welcome{
    position: relative;
    width: 100%;
    height: 85vh;
    overflow: hidden;
    padding: 50px 80px;
    background-color: #000;

    &::-webkit-scrollbar {
        display: none;
    }
}

.welcome .wel-content{
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 80px;
    right: 80px;
    transform: translate(0,-50%);
    color: #fff;
}

.welcome .wel-content .header{
    width: fit-content;
    font-size: 2.5em;
    font-weight: bold;
    color: var(--color1);
}

.welcome .wel-content .searchbar{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.welcome .wel-content .searchbar input[type=search]{
    width: 100%;
    padding: 15px 50px;
    padding-top: 17px;
    margin: 10px 0;
    border: none;
    border-radius: 30px;
    font-size: 1em;
    background-image: url('assets/icons/search.png');
    background-repeat: no-repeat;
    background-size: 1.5em;
    background-position: 15px center;
    color: #000;
}

.welcome .wel-content .searchbar input[type=search]::placeholder{
    font-weight: bold;
}

.welcome .wel-content .suggest{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.welcome .wel-content .suggest .text{
    margin-right: 10px;
    text-transform: capitalize;
    color: var(--color2);
}

.welcome .wel-content .suggest .sugg{
    margin-right: 5px;
    color: var(--color3);
}

.welcome .wel-content .suggest .sugg:hover{
    color: #fff;
    text-decoration: underline;
}

.welcome .screens{
    z-index: 1;
    position: absolute;
    bottom: 0px;
    right: 200px;
    display: flex;
    opacity: .5;
}

.welcome .screens .screen1{
    z-index: 4;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 230px;
}

.welcome .screens .screen2{
    z-index: 3;
    position: absolute;
    right: -80px;
    bottom: 10px;
    transform: rotate(5deg);
    width: 230px;
}



.choice{
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    min-height: 120vh;
    padding: 30px 80px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.choice .area{
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.choice .area .header{
    margin-bottom: 20px;
    font-size: 1.35em;
    font-weight: bold;
}

.choice .area .block{
    width: 85%;
    height: auto;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--color3);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.choice .area .block .head{
    margin-bottom: 10px;
    font-weight: bold;
    text-decoration: underline;
}

.choice .area .block a{
    margin-bottom: 5px;
    font-size: .9em;
}

.choice .area .block a .icon{
    color: var(--color1);
}

.choice .area .block a:hover{
    /* font-weight: bold; */
    text-decoration: underline;
    color: var(--color3);
}

.choice .inquiry{
    width: 50%;
    height: auto;
    overflow-x: hidden;
    padding: 30px 40px;
    margin-top: -100px;
    border-radius: 15px;
    background-color: #fff;
    box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.25);

    &::-webkit-scrollbar {
        display: none;
    }
}

.choice .inquiry .header{
    font-size: 1.35em;
    font-weight: bold;
}

.choice .inquiry .emphasis{
    width: 100%;
    margin-bottom: 30px;
    font-size: .85em;
}

.input-tab{
    width: 100%;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.input-tab label{
    width: 100%;
    margin-bottom: 5px;
    font-size: .8em;
    font-weight: bold;
}

.input-tab input{
    width: 100%;
    padding: 10px;
    border: none;
    border-bottom: 2px solid var(--color2);
    background-color: #fafafa;
}

.input-tab textarea{
    width: 100%;
    height: 100px;
    resize: none;
    padding: 10px;
    border: none;
    border-bottom: 2px solid var(--color2);
    background-color: #fafafa;
}

.choice .inquiry button[type=submit]{
    cursor: pointer;
    width: fit-content;
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    font-weight: bold;
    text-transform: capitalize;
    background-color: var(--color2);
    color: #000;
}

.choice .inquiry button[type=submit]:hover{
    background-color: #000;
    color: var(--color2);
    transition: .3s;
}


/* HELP RESPONSIVE */
@media screen and (max-width: 500px){
    .welcome{
        position: relative;
        width: 100%;
        height: 85vh;
        overflow: hidden;
        padding: 50px 80px;
        background-color: #000;
    }
    
    .welcome .wel-content{
        z-index: 2;
        position: absolute;
        top: 20%;
        left: 30px;
        right: 30px;
        transform: translate(0,0%);
        color: #fff;
    }
    
    .welcome .wel-content .header{
        width: fit-content;
        font-size: 1.5em;
        font-weight: bold;
        color: var(--color1);
    }
    
    .welcome .wel-content .searchbar{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .welcome .wel-content .searchbar input[type=search]{
        width: 100%;
        padding: 10px 20px;
        padding-top: 13px;
        padding-left: 40px;
        margin: 10px 0;
        border: none;
        border-radius: 30px;
        font-size: 1em;
        background-image: url('assets/icons/search.png');
        background-repeat: no-repeat;
        background-size: 1.5em;
        background-position: 10px center;
        color: #000;
    }
    
    .welcome .wel-content .searchbar input[type=search]::placeholder{
        font-weight: bold;
    }
    
    .welcome .wel-content .suggest{
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    
    .welcome .wel-content .suggest .text{
        margin-right: 10px;
        margin-bottom: 5px;
        text-transform: capitalize;
        color: var(--color2);
    }
    
    .welcome .wel-content .suggest .sugg{
        margin-right: 5px;
        margin-bottom: 5px;
        color: var(--color3);
    }
    
    .welcome .wel-content .suggest .sugg:hover{
        color: #fff;
        text-decoration: underline;
    }
    
    .welcome .screens{
        z-index: 1;
        position: absolute;
        bottom: 50px;
        right: 100px;
        display: flex;
        opacity: .4;
    }
    
    .welcome .screens .screen1{
        z-index: 4;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 150px;
    }
    
    .welcome .screens .screen2{
        z-index: 3;
        position: absolute;
        right: -30px;
        bottom: 0px;
        transform: rotate(0deg);
        width: 160px;
    }
    
    .welcome .screens .screen3{
        z-index: 2;
        position: absolute;
        right: -60px;
        bottom: 0px;
        transform: rotate(5deg);
        width: 170px;
    }
    
    .welcome .screens .screen4{
        z-index: 1;
        position: absolute;
        right: -90px;
        bottom: 0px;
        transform: rotate(10deg);
        width: 180px;
    }
    
    
    .choice{
        position: relative;
        z-index: 1;
        width: 100%;
        height: auto;
        min-height: 120vh;
        padding: 30px;
        margin-bottom: 100px;
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
        justify-content: space-between;
    }
    
    .choice .area{
        width: 100%;
        margin: 50px 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .choice .area .header{
        margin-bottom: 20px;
        font-size: 1.25em;
        font-weight: bold;
    }
    
    .choice .area .block{
        width: 100%;
        height: auto;
        padding: 20px;
        margin-bottom: 20px;
        border: 1px solid var(--color3);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .choice .area .block .head{
        margin-bottom: 10px;
        font-weight: bold;
        text-decoration: underline;
    }
    
    .choice .area .block a{
        margin-bottom: 10px;
        font-size: .85em;
    }
    
    .choice .area .block a .icon{
        color: var(--color1);
    }
    
    .choice .area .block a:hover{
        /* font-weight: bold; */
        text-decoration: underline;
        color: var(--color3);
    }
    
    .choice .inquiry{
        width: 100%;
        height: auto;
        padding: 30px 20px;
        margin-top: -100px;
        border-radius: 15px;
        background-color: #fff;
        box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.25);
    }
    
    .choice .inquiry .header{
        font-size: 1.35em;
        font-weight: bold;
    }
    
    .choice .inquiry .emphasis{
        width: 100%;
        margin-bottom: 30px;
        font-size: .85em;
    }
    
    .input-tab{
        width: 100%;
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .input-tab label{
        width: 100%;
        margin-bottom: 5px;
        font-size: .8em;
        font-weight: bold;
    }
    
    .input-tab input{
        width: 100%;
        padding: 10px;
        border: none;
        border-bottom: 2px solid var(--color2);
        background-color: #fafafa;
    }
    
    .input-tab textarea{
        width: 100%;
        height: 100px;
        resize: none;
        padding: 10px;
        border: none;
        border-bottom: 2px solid var(--color2);
        background-color: #fafafa;
    }
    
    .choice .inquiry button[type=submit]{
        cursor: pointer;
        width: fit-content;
        padding: 10px 20px;
        border: none;
        border-radius: 20px;
        font-weight: bold;
        text-transform: capitalize;
        background-color: var(--color2);
        color: #000;
    }
    
    .choice .inquiry button[type=submit]:hover{
        background-color: #000;
        color: var(--color2);
        transition: .3s;
    }
}



.crest{
    width: 100%;
    height: auto;
    min-height: 55vh;
    padding: 50px 80px;
    padding-top: 150px;
    border-bottom: 2px solid #000;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    background-color: #fff;
}

.crest .top{
    width: 100%;
    margin-bottom: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.crest .top .header{
    font-size: 2.3em;
    font-weight: bold;
}

.crest .top .dating{
    width: fit-content;
}

.crest .top .dating .labelling{
    font-size: .8em;
    font-weight: bold;
    text-transform: capitalize;
}

.crest .top .dating .value{
    font-weight: bold;
    text-transform: capitalize;
    color: var(--color2);
}

.crest .submenu{
    position: relative;
    width: max-content;
    display: none;
}

.crest .submenu .icon{
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translate(0,-50%);
    margin-right: 10px;
    font-size: 1.1em;
}

.crest select{
    width: max-content;
    padding: 10px 20px;
    padding-left: 40px;
    border: 1px solid #000;
    border-radius: 10px;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: capitalize;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('assets/icons/angle-down.svg'); /* Replace with the path to your arrow image */
    background-repeat: no-repeat;
    background-position: 93% center;
    background-size: .8em;
}

.segments{
    width: 100%;
    height: auto;
    padding: 50px 80px;
}

.segments .spaceblock{
    width: 100%;
    height: 12vh;
}

.segments .section{
    width: 100%;
    height: auto;
}

.segments .section .head{
    margin-bottom: 5px;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: capitalize;
}

.segments .section .content{
    font-size: 1.1em;
}

.segments .section .listing{
    width: 100%;
    list-style-type: circle;
}

.segments .section .listing li{
    margin-bottom: 10px;
    font-size: 1.1em;
}


/* TERMS RESPONSIVE */
@media screen and (max-width: 500px){
    .crest{
        width: 100%;
        height: auto;
        min-height: 40vh;
        padding: 20px 30px;
        padding-top: 60px;
        border-bottom: 2px solid #000;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        background-color: #fff;
    }
    
    .crest .top{
        width: 100%;
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .crest .top .header{
        font-size: 1.8em;
        font-weight: bold;
    }
    
    .crest .top .dating{
        width: fit-content;
        margin-top: 10px;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-start;
    }
    
    .crest .top .dating .labelling{
        margin-right: 7px;
        font-size: .9em;
        font-weight: bold;
        text-transform: capitalize;
    }
    
    .crest .top .dating .value{
        font-size: .9em;
        font-weight: bold;
        text-transform: capitalize;
        color: var(--color2);
    }
    
    .crest .submenu{
        position: relative;
        width: max-content;
    }
    
    .crest .submenu .icon{
        position: absolute;
        top: 50%;
        left: 15px;
        transform: translate(0,-50%);
        margin-right: 10px;
        font-size: 1em;
    }
    
    .crest select{
        width: max-content;
        padding: 10px 20px;
        padding-left: 40px;
        border: 1px solid #000;
        border-radius: 10px;
        font-size: 1.1em;
        font-weight: bold;
        text-transform: capitalize;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url('assets/icons/angle-down.svg'); /* Replace with the path to your arrow image */
        background-repeat: no-repeat;
        background-position: 93% center;
        background-size: .8em;
    }
    
    .segments{
        width: 100%;
        height: auto;
        padding: 30px 30px;
    }
    
    .segments .spaceblock{
        width: 100%;
        height: 12vh;
    }
    
    .segments .section{
        width: 100%;
        height: auto;
    }
    
    .segments .section .head{
        margin-bottom: 5px;
        font-size: 1.2em;
        font-weight: bold;
        text-transform: capitalize;
    }
    
    .segments .section .content{
        font-size: 1.1em;
    }
    
    .segments .section .listing{
        width: 100%;
        list-style-type: circle;
    }
    
    .segments .section .listing li{
        margin-bottom: 15px;
        font-size: 1.1em;
    }
}


/* FAQ */
.pagetop{
    width: 100%;
    height: 50vh;
    padding: 20px 80px;
    padding-top: 40px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* background-color: rgba(154, 255, 2, .5); */
    background-color: var(--color2);
}

.pagetop .header{
    width: 100%;
    text-align: center;
    font-size: 2.5em;
    font-weight: bold;
    text-transform: capitalize;
    color: #fff;
}

.faqlist{
    width: 100%;
    overflow-x: hidden;
    padding: 30px 80px;

    &::-webkit-scrollbar {
        display: none;
    }
}

.faqlist .block{
    width: 100%;
    margin-bottom: 60px;
}

.faqlist .block .head{
    width: fit-content;
    padding-bottom: 5px;
    padding-right: 20px;
    margin-bottom: 20px;
    border-bottom: 2px solid;
    font-size: 1.25em;
    font-weight: bold;
    text-transform: capitalize;
}

.faqlist .quest-list{
    width: 100%;
}

.faqlist .quest-list .unit{
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--color3);
    border-radius: 10px;
}

.faqlist .quest-list .collapsible {
    cursor: pointer;
    width: 100%;
    padding: 10px;
    margin-top: 0px;
    border: none;
    font-weight: bold;
    text-align: left;
    background-color: #fff;
    transition: .3s;
}

.faqlist .quest-list .collapsible:hover {
    background-color: transparent;
    color: var(--color2);
}

.faqlist .quest-list .collapsible:after {
    font-size: 1.1em;
    font-weight: bold;
    color: #000;
}

.faqlist .quest-list .collapsible:hover::after{
    color: var(--color2);
}

.faqlist .quest-list .collapsed{
    padding: 0px;
    margin-bottom: 0px;
    border-radius: 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: transparent;
    color: #000;
}

.faqlist .quest-list .collapsed p{
    padding: 10px 15px;
    background-color: transparent;
}


/* FAQ RESPONSIVE */
@media screen and (max-width: 500px){
    .pagetop{
        width: 100%;
        height: 300px;
        padding: 20px 30px;
        padding-top: 50px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* background-color: rgba(154, 255, 2, .5); */
        background-color: var(--color2);
    }

    .pagetop .header{
        width: 100%;
        text-align: center;
        font-size: 2em;
        font-weight: bold;
        text-transform: capitalize;
        color: #fff;
    }

    .faqlist{
        width: 100%;
        padding: 30px;
    }

    .faqlist .block{
        width: 100%;
        margin-bottom: 60px;
    }

    .faqlist .block .head{
        width: fit-content;
        padding-bottom: 5px;
        padding-right: 20px;
        margin-bottom: 20px;
        border-bottom: 2px solid;
        font-size: 1.25em;
        font-weight: bold;
        text-transform: capitalize;
    }

    .faqlist .quest-list{
        width: 100%;
    }

    .faqlist .quest-list .unit{
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid var(--color3);
        border-radius: 10px;
    }

    .faqlist .quest-list .collapsible {
        cursor: pointer;
        width: 100%;
        padding: 10px;
        margin-top: 0px;
        border: none;
        font-weight: bold;
        text-align: left;
        background-color: #fff;
        transition: .3s;
    }

    .faqlist .quest-list .collapsible:hover {
        background-color: transparent;
        color: var(--color2);
    }

    .faqlist .quest-list .collapsible:after {
        font-size: 1.1em;
        font-weight: bold;
        color: #000;
    }

    .faqlist .quest-list .collapsible:hover::after{
        color: var(--color2);
    }

    .faqlist .quest-list .collapsed{
        padding: 0px;
        margin-bottom: 0px;
        border-radius: 10px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        background-color: transparent;
        color: #000;
    }

    .faqlist .quest-list .collapsed p{
        padding: 10px 15px;
        background-color: transparent;
    }
}



/* RIDER PAGE */
.influx{
    position: relative;
    width: 100%;
    height: 75vh;
    padding: 70px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}

.influx .content{
    width: 60%;
}

.influx .content .top{
    margin-bottom: 20px;
}

.influx .content .top .heading{
    font-size: 3em;
    font-weight: bold;
}

.influx .content .top .sub-heading{
    font-size: 2em;
}

.influx .content .emphasis{
    width: 100%;
}

.influx .linedesign{
    z-index: 2;
    position: absolute;
    top: -10%;
    right: -20%;
    width: 50%;
    overflow: hidden;
    transform: rotate(-45deg);
    height: 100px;
    border-radius: 20px;
}

.influx .linedesign .inside{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background-color: var(--color1);
}

.influx .linedesign.two{
    z-index: 1;
    top: 10%;
}

.influx .linedesign.two .inside{
    background-color: var(--color2);
}

.influx .linedesign.three{
    z-index: 0;
    top: 30%;
}

.influx .linedesign.three .inside{
    background-color: var(--color3);
}

.offers{
    width: 100%;
    overflow-x: hidden;
    padding: 30px 70px;
    &::-webkit-scrollbar {
        display: none;
    }
}

.offers .top{
    margin-bottom: 35px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.offers .top .heading{
    width: max-content;
    margin-right: 10px;
    font-family: var(--font2);
    font-size: 1.5em;
    font-weight: 500;
}

.offers .top .emphasis{
    width: 50%;
    font-size: 1em;
    font-weight: bold;
}

.offers .group{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.offers .group .block{
    position: relative;
    width: 32%;
    height: 250px;
    margin-bottom: 20px;
    padding: 15px 20px;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 2px 1px rgba(154, 255, 2, .5);
}

.offers .group .block .num{
    position: absolute;
    top: 15px;
    left: 20px;
    font-size: 1.5em;
    color: #1e1e1e;
}

.offers .group .block .icon{
    position: absolute;
    top: 15px;
    right: 20px;
    width: 130px;
}

.offers .group .block .writing{
    position: absolute;
    bottom: 15px;
    left: 20px;
    right: 20px;
}

.offers .group .block .writing .head{
    margin-bottom: 5px;
    font-family: var(--font2);
    font-size: 1em;
    font-weight: 600;
}

.offers .group .block .writing .text{
    font-size: .75em;
}

.offers .group .block.black{
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, .5);
}

.sectioner{
    width: 100%;
    height: auto;
    padding: 20px 70px;
    overflow-x: hidden;
}

.sectioner .header{
    width: fit-content;
    padding-bottom: 2px;
    padding-right: 20px;
    margin-bottom: 40px;
    border-bottom: 2px solid var(--color2);
    font-size: 1.5em;
    font-weight: bold;
}

.sectioner .sub-heading{
    width: 85%;
    font-size: 1.1em;
}

.point-box{
    width: 80%;
}

.point{
    width: 100%;
    padding: 20px 0;
    border-top: 2px solid var(--color3);
    border-right: 1px dashed var(--color3);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.point.alt{
    border-left: 1px dashed var(--color3);
    border-right: none;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;
}

.point .point-icon{
    width: 150px;
    min-width: 150px;
    height: 150px;
    margin: 0px 10px;
}

.point .write{
    width: 100%;
}

.point .liner{
    width: 100%;
    height: auto;
    border-bottom: 1px dashed var(--color3);
}

.point.c1{
    border-top-color: #9AFF02;
}

.point.c2{
    border-top-color: #57886C;
}

.point.c3{
    border-top-color: #EB9486;
}

.point.c4{
    border-top-color: #466060;
}

.point.c5{
    border-top-color: #775253;
}

.point:last-child{
    border-bottom: 2px solid #482728;
}

.point .head{
    width: 100%;
    padding-bottom: 10px;
    padding-right: 15px;
    font-weight: bold;
    text-transform: capitalize;
}

.point.alt .head{
    padding-left: 20px;
}

.point .text{
    padding-top: 10px;
    padding-right: 15px;
}

.point.alt .text{
    padding-left: 20px;
}

.payment{
    padding: 70px;
    background-color: #f5f5f5;
}

.pay-opts{
    width: 100%;
    margin: 40px 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.pay-opts .pay{
    width: 23%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.pay-opts .pay .pay-icon{
    width: auto;
    height: 50px;
    margin-bottom: 15px;
    opacity: .65;
}

.pay-opts .pay .pay-icon img{
    width: auto;
    height: 100%;
}

.pay-opts .pay .head{
    margin-bottom: 5px;
    font-size: 1em;
    font-weight: bold;
}

.pay-opts .pay .text{
    font-size: .9em;
}

.promotion{
    width: 100%;
    height: max-content;
    min-height: 100vh;
    overflow-x: hidden;
    padding: 50px 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: #1e1e1e;
    color: #fff;

    &::-webkit-scrollbar {
        display: none;
    }
}

.promotion .content{
    width: 50%;
}

.promotion .content .header{
    width: 100%;
    margin-bottom: 15px;
    font-size: 2.5em;
    color: var(--color1);
}

.promotion .content .emphasis{
    margin-bottom: 30px;
}

.promotion .content .promo-list{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.promotion .content .promo-list .promo{
    width: 100%;
    margin-bottom: 25px;
    font-size: .9em;
}

.promotion .content .promo-list .promo b{
    display: block;
    width: fit-content;
    border-bottom: 2px solid;
    font-size: 1.1em;
    color: var(--color2);
}

.promotion .promo-image{
    width: 45%;
    height: 80%;
}


/* RIDER RESPONSIVE */
@media screen and (max-width: 500px){
    .influx{
        position: relative;
        width: 100%;
        height: 70vh;
        overflow-x: hidden;
        padding: 30px;
    }
    
    .influx .content{
        position: absolute;
        top: 60%;
        left: 30px;
        right: 30px;
        transform: translate(0,-50%);
        width: auto;
        z-index: 5;
    }
    
    .influx .content .top{
        margin-bottom: 10px;
    }
    
    .influx .content .top .heading{
        font-size: 1.75em;
        font-weight: bold;
    }
    
    .influx .content .top .sub-heading{
        font-size: 1.6em;
    }
    
    .influx .content .emphasis{
        width: 100%;
    }
    
    .influx .linedesign{
        z-index: 2;
        position: absolute;
        top: 5%;
        right: -30%;
        width: 100%;
        overflow: hidden;
        transform: rotate(0deg);
        height: 100px;
        border-radius: 20px;
    }
    
    .influx .linedesign.two{
        z-index: 1;
        top: 13%;
        right: -50%;
    }
    
    .influx .linedesign.three{
        z-index: 0;
        top: 21%;
        right: -70%;
    }
    
    .sectioner{
        width: 100%;
        height: auto;
        padding: 20px 30px;
    }
    
    .sectioner .header{
        width: 100%;
        padding-bottom: 2px;
        padding-right: 0px;
        margin-bottom: 20px;
        border-bottom: 2px solid var(--color2);
        font-size: 1.1em;
        font-weight: bold;
    }
    
    .sectioner .sub-heading{
        width: 100%;
        font-size: 1em;
    }
    
    .point-box{
        width: 100%;
    }
    
    .point{
        width: 100%;
        padding: 20px 0;
        border-top: 2px solid var(--color3);
        border-right: 1px dashed var(--color3);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .point.alt{
        width: 100%;
        border-left: 1px dashed var(--color3);
        border-right: none;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .point .point-icon{
        width: 100px;
        min-width: 100px;
        height: 100px;
        margin: 10px;
        margin-left: 15px;
    }
    
    .point .write{
        width: 100%;
    }
    
    .point .liner{
        width: 100%;
        height: auto;
        border-bottom: 1px dashed var(--color3);
    }
    
    .point.c1{
        border-top-color: #9AFF02;
    }
    
    .point.c2{
        border-top-color: #57886C;
    }
    
    .point.c3{
        border-top-color: #EB9486;
    }
    
    .point.c4{
        border-top-color: #466060;
    }
    
    .point.c5{
        border-top-color: #775253;
    }
    
    .point:last-child{
        border-bottom: 2px solid #482728;
    }
    
    .point .head{
        width: 100%;
        padding-bottom: 10px;
        padding-right: 0px;
        padding-left: 15px;
        font-weight: bold;
        text-transform: capitalize;
    }
    
    .point.alt .head{
        padding-left: 15px;
    }
    
    .point .text{
        padding-top: 10px;
        padding-right: 15px;
        padding-left: 15px;
    }
    
    .point.alt .text{
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .pay-opts{
        width: 100%;
        margin: 40px 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
    }
    
    .pay-opts .pay{
        width: 100%;
        margin-bottom: 30px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .pay-opts .pay .pay-icon{
        width: auto;
        height: 50px;
        margin-bottom: 5px;
        opacity: .85;
    }
    
    .pay-opts .pay .pay-icon img{
        width: auto;
        height: 100%;
    }
    
    .pay-opts .pay .head{
        margin-bottom: 5px;
        font-size: 1em;
        font-weight: bold;
    }
    
    .pay-opts .pay .text{
        font-size: 1em;
    }
    
    .promotion{
        width: 100%;
        height: max-content;
        min-height: 100vh;
        padding: 50px 30px;
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
        justify-content: flex-start;
        background-color: #1e1e1e;
        color: #fff;
    }
    
    .promotion .content{
        width: 100%;
    }
    
    .promotion .content .header{
        width: 100%;
        margin-bottom: 15px;
        font-size: 2.5em;
        color: var(--color1);
    }
    
    .promotion .content .emphasis{
        margin-bottom: 30px;
        display: none;
    }
    
    .promotion .content .promo-list{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .promotion .content .promo-list .promo{
        width: 100%;
        margin-bottom: 25px;
        font-size: 1em;
    }
    
    .promotion .content .promo-list .promo b{
        display: block;
        width: fit-content;
        margin-bottom: 7px;
        border-bottom: 2px solid;
        font-size: 1.1em;
        color: var(--color2);
    }
    
    .promotion .promo-image{
        width: 100%;
        height: auto;
        margin-bottom: 20px;
    }
}


/* DRIVER PAGE */
.stream{
    position: relative;
    width: 100%;
    height: 100vh;
    padding: 70px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    background-image: url('assets/img/drive.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
}

.stream::before{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(0,0,0,.7) 50%, rgba(0,0,0,0) 100%);
}


.stream .content{
    position: relative;
    width: 60%;
}

.stream .content .top{
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: #fff;
}

.stream .content .top .heading{
    font-size: 3em;
    font-weight: bold;
}

.stream .content .top .sub-heading{
    font-size: 2em;
}

.stream .content .tg{
    color: var(--color1);
}

.stream .content .emphasis{
    width: 90%;
    font-size: 1.1em;
    color: #f5f5f5;
}

.module{
    width: 100%;
    height: auto;
    overflow-x: hidden;
    padding: 50px 80px;

    &::-webkit-scrollbar {
        display: none;
    }
}

.module .header{
    width: 50%;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 2px solid var(--color2);
    font-size: 1.5em;
    font-weight: bold;
}

.module .sub-heading{
    margin-bottom: 20px;
    font-size: 1.1em;
    /* font-weight: bold; */
}

.rolls{
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
}

.rolls .roll{
    width: 48%;
    margin-bottom: 20px;
}

.rolls .roll b{
    text-decoration: underline;
}

.drivehow{
    width: 100%;
    height: auto;
    overflow-x: hidden;
    padding: 50px 80px;
    &::-webkit-scrollbar {
        display: none;
    }
}

.drivehow .header{
    font-size: 1.75em;
}

.drivehow .sub-heading{
    width: 80%;
    margin-bottom: 30px;
    font-size: 1em;
}

.timeline{
    width: 80%;
    border-left: 2px dashed var(--color3);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.timeline .time{
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.timeline .time .icon{
    z-index: 1;
    position: relative;
    width: 150px;
    min-width: 150px;
    height: 150px;
    margin-right: 20px;
    margin-left: 40px;
    background-color: #fff;
}

.timeline .time .line{
    z-index: 0;
    position: absolute;
    width: 100%;
    border-bottom: 2px dashed var(--color3);
}

.timeline .time .text{
    z-index: 1;
    position: relative;
    width: 75%;
    height: auto;
    padding: 15px 20px;
    border-radius: 15px;
    /* background-color: #fff; */
}

.time.c1 .text{
    background-color: #57886C;
    color: #fff;
}

.time.c2 .text{
    background-color: #466060;
    color: #fff;
}

.time.c3 .text{
    background-color: #775253;
    color: #fff;
}

.time.c4 .text{
    background-color: #482728;
    color: #fff;
}

.timeline .time .text .head{
    padding-bottom: 5px;
    margin-bottom: 5px;
    font-size: 1.1em;
    font-weight: bold;
    border-bottom: 2px solid #fff;
}

.earn{
    width: 100%;
    padding: 50px 80px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: #f5f5f5;
}

.earn .top{
    width: 100%;
    margin-bottom: 50px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
}

.earn .top .write{
    width: 50%;
}

.earn .top .write .heading{
    font-size: 2.5em;
}

.earn .top .write .sub-headiing{
    width: 100%;
    margin-top: 20px;
}

.earn .top .top-image{
    width: 45%;
    overflow: hidden;
    border-radius: 15px;
}


/* DRIVER RESPONSIVE */
@media screen and (max-width: 500px){
    .stream{
        position: relative;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .stream-image{
        width: 100%;
        height: auto;
        overflow: hidden;
    }
    
    .stream-image img{
        object-fit: cover;
    }
    
    .stream .content{
        width: 100%;
        padding: 15px 30px;
        padding-left: 30px;
    }
    
    .stream .content .top{
        margin-bottom: 15px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .stream .content .top .heading{
        font-size: 2.5em;
        font-weight: bold;
    }
    
    .stream .content .top .sub-heading{
        font-size: 1.35em;
        font-weight: normal;
        color: var(--color2);
    }
    
    .stream .content .emphasis{
        width: 100%;
    }
    
    .module{
        width: 100%;
        height: auto;
        padding: 50px 30px;
    }
    
    .module .header{
        width: 100%;
        padding-bottom: 5px;
        margin-bottom: 5px;
        border-bottom: 2px solid var(--color2);
        font-size: 1.35em;
        font-weight: bold;
    }
    
    .module .sub-heading{
        margin-bottom: 30px;
        font-size: 1em;
        /* font-weight: bold; */
    }
    
    .rolls{
        width: 100%;
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    .rolls .roll{
        width: 100%;
        margin-bottom: 20px;
    }
    
    .rolls .roll b{
        text-decoration: underline;
    }
    
    .drivehow{
        width: 100%;
        height: auto;
        padding: 50px 30px;
    }
    
    .drivehow .header{
        font-size: 1.5em;
        margin-bottom: 5px;
    }
    
    .drivehow .sub-heading{
        width: 100%;
        margin-bottom: 30px;
        font-size: 1em;
    }
    
    .timeline{
        width: 100%;
        border-left: 2px dashed var(--color3);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .timeline .time{
        position: relative;
        width: 100%;
        height: auto;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 2px dashed var(--color3);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
    }

    .timeline .time:last-child{
        margin-bottom: 0;
        border-bottom: none;
    }
    
    .timeline .time .icon{
        z-index: 1;
        position: relative;
        width: 120px;
        min-width: 120px;
        height: 120px;
        margin-right: 0px;
        margin-left: 20px;
        margin-bottom: 20px;
        background-color: #fff;
    }
    
    .timeline .time .line{
        z-index: 0;
        position: static;
        width: 100%;
        border-bottom: 2px dashed var(--color3);
        display: none;
    }
    
    .timeline .time .text{
        z-index: 1;
        position: relative;
        width: 95%;
        height: auto;
        padding: 15px 20px;
        margin-left: 5%;
        border-radius: 15px;
        /* background-color: #fff; */
    }
    
    .time.c1 .text{
        background-color: #57886C;
        color: #fff;
    }
    
    .time.c2 .text{
        background-color: #466060;
        color: #fff;
    }
    
    .time.c3 .text{
        background-color: #775253;
        color: #fff;
    }
    
    .time.c4 .text{
        background-color: #482728;
        color: #fff;
    }
    
    .timeline .time .text .head{
        padding-bottom: 5px;
        margin-bottom: 5px;
        font-size: 1em;
        font-weight: bold;
        border-bottom: 2px solid #fff;
    }
    
    .earn{
        width: 100%;
        padding: 50px 30px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .earn .top{
        width: 100%;
        margin-bottom: 30px;
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
        justify-content: space-between;
    }
    
    .earn .top .write{
        width: 100%;
    }
    
    .earn .top .write .heading{
        margin-bottom: 10px;
        font-size: 1.75em;
    }
    
    .earn .top .write .sub-headiing{
        width: 100%;
        margin-top: 20px;
    }
    
    .earn .top .top-image{
        width: 100%;
        margin-bottom: 20px;
        overflow: hidden;
        border-radius: 15px;
    }
}



/* SAFETY */
.safer{
    position: relative;
    width: 100%;
    height: 80vh;
    padding: 70px;
    margin-bottom: 30px;
}

.safer .safer-content{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    color: #000;
}

.safer .safer-content .start{
    width: 45%;
}

.safer .safer-content .header{
    font-size: 3em;
    font-weight: 500;
}

.safer .safer-content .caption{
    margin-bottom: 0px;
    font-size: 1em;
    font-weight: bold;
    text-transform: capitalize;
    color: var(--color2);
}

.safer .safer-content .emphasis{
    width: 50%;
    font-size: 1.25em;
}

.implem{
    width: 100%;
    overflow-x: hidden;
    padding-bottom: 70px;
    margin: auto;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
}

.implem .top{
    width: 100%;
    padding: 40px 70px;
    font-size: 1.5em;
    font-weight: 600;
}

.implem .top .icon{
    margin-left: 10px;
}

.implem .list{
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ccc;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    flex-wrap: wrap;
}

.imp{
    width: 50%;
    height: auto;
    padding: 30px 80px;
    border-top: 1px solid #ccc;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.imp .icon{
    width: 50px;
    min-width: 50px;
    height: 50px;
    margin-right: 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color2);
}

.imp .icon img{
    width: 60%;
}

.imp .text{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.imp .text .head{
    margin-bottom: 5px;
    font-weight: bold;
}

.imp .text .emp{
    font-size: .9em;
}

.guides{
    width: 100%;
    height: auto;
    padding: 70px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.guides .top{
    width: 100%;
    margin-bottom: 50px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.guides .top .main-header{
    width: 35%;
    font-size: 2.5em;
}

.guides .main-header .tg{
    font-weight: bold;
    color: var(--color1);
}

.guides .top p{
    width: 60%;
    font-size: 1.2em;
}

.guides .header{
    margin-bottom: 15px;
    font-size: 1.25em;
    font-weight: 600;
    color: var(--color3);
}

.guides .blocks{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px
}

.guides .blocks .block{
    width: 100%;
    padding: 20px;
    border: 1px solid var(--color3);
    border-radius: 10px;
}

.guides .blocks .block .head{
    margin-bottom: 20px;
    font-size: 1.2em;
    font-weight: bold;
}

.guides .blocks .block .listing{
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
}

.guides .blocks .block .listing .tip{
    width: fit-content;
    margin-bottom: 5px;
    border-bottom: 1px solid;
    color: #000;
}

.guides .blocks .block .listing p{
    font-size: .9em;
    color: #333;
}

.community{
    width: 100%;
    padding: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 40px;
}

.community .top{
    width: 85%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.community .top .caption{
    width: max-content;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 500;
    background-color: var(--color2);
}

.community .top .header{
    margin-bottom: 5px;
    font-family: var(--font2);
    font-size: 2em;
    font-weight: 500;
}

.community .top .emphasis{
    font-size: .9em;
}

.community .listing{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 25px 0;
    flex-wrap: wrap;
}

.community .listing .unit{
    width: 48%;
}

.community .listing .unit .head{
    margin-bottom: 5px;
    border-bottom: 2px solid var(--color3);
    font-size: 1.2em;
    font-weight: 500;
}

.community .listing .unit ul{
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: .9em;
}

/* SAFETY RESPONSIVE */
@media screen and (max-width: 500px){
    .safer{
        position: relative;
        width: 100%;
        height: 100vh;
        margin-bottom: 30px;
    }
    
    .safer .safer-image{
        position: absolute;
        top: 0%;
        right: 0px;
        transform: translate(0,0%);
        width: 100%;
        height: 60%;
        overflow: hidden;
        border-radius: 0px;
    }
    
    .safer .safer-image::before{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        content: "";
    }
    
    .safer .safer-content{
        z-index: 1;
        position: absolute;
        left: 30px;
        right: 30px;
        top: 62%;
        transform: translate(0,0%);
        width: auto;
        padding-left: 0px;
        color: #000;
    }
    
    .safer .safer-content .header{
        font-size: 1.75em;
        font-weight: bold;
    }
    
    .safer .safer-content .header .spec{
        text-decoration: underline var(--color1);
    }
    
    .safer .safer-content .caption{
        margin-bottom: 0px;
        font-size: 1.2em;
        font-weight: bold;
        text-transform: capitalize;
        color: var(--color2);
    }
    
    .safer .safer-content .emphasis{
        width: 100%;
        font-size: 1.15em;
    }
    
    .implem{
        width: 100%;
        margin: auto;
        padding: 10px 0px;
        border-top: 1px solid #ccc;
        /* border-bottom: 1px solid #ccc; */
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    .imp{
        width: 100%;
        height: auto;
        padding: 20px 30px;
        border-bottom: 1px solid #ccc;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .imp .icon{
        width: 50px;
        min-width: 50px;
        height: 50px;
        margin-right: 15px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--color2);
    }
    
    .imp .icon img{
        width: 60%;
    }
    
    .imp .text{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .imp .text .head{
        margin-bottom: 5px;
        font-weight: bold;
    }
    
    .imp .text .emp{
        color: var(--color3);
    }
    
    .ending{
        width: 100%;
        padding: 30px;
        margin-top: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        background-color: var(--color3);
    }
    
    .ending .end-image{
        width: 100%;
        height: 30vh;
        overflow: hidden;
        border-radius: 20px;
        margin-bottom: 30px;
    }
    
    .ending .end-image img{
        object-fit: cover;
        height: 100%;
        width: 100%;
    }
    
    .ending .summary{
        width: 100%;
        margin-bottom: 15px;
        font-size: 1.25em;
        /* font-weight: bold; */
        color: #fff;
    }
    
    .ending a.link-btn{
        font-size: .8em;
    }
    
    .ending a.link-btn .text{
        background-color: var(--color2);
    }
    
    .ending a.link-btn:hover .text{
        color: #000;
    }
    
    .ending a.safety-cta{
        height: auto;
        padding: 5px 15px;
        padding-left: 25px;
        margin-bottom: 0px;
        border-radius: 0 10px 10px 0;
        font-size: 14px;
        background-color: rgba(0, 0, 0, .4);
        color: #fff;
    }
    
    .ending a.safety-cta:last-child{
        margin-top: 10px;
    }
    
    
    .ending a.safety-cta .cover{
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        width:  15px;
        height: 100%;
        background-color: #fff;
        transition: .35s;
    }
    
    a.safety-cta span{
        z-index: 2;
        display: inline-block;
    }
    
    .ending a.safety-cta:hover{
        color: #000;
    }
    
    .ending a.safety-cta:hover .cover{
        width: 100%;
    }
}