/* Flex column fallback for mobile */
@media (max-width: 768px) {
/* Global overflow management */
:root{
    --font-color: #fff;
    --accent1: #313131;
    --accent2: #3d3d3d;
    --accent3: #494949;
    --dark-shade: #141414;
    --text-highlight: #9e9e9e;
    --main-background: #000;
}
*{
    box-sizing: border-box;
}
body{
    overflow-x: hidden;
}    
/* Responsive Typography */
h1, h2, h3, h4, h5, h6, p{
    word-wrap: break-word;
}
/* Navigation */
.navbar #menulist{
    left: 0;
    top: 70px;
    width: 100%;
    z-index: 9;
    display: none;
    padding: 1rem 0;
    position: absolute;
    align-items: center;
    flex-direction: column;
    backdrop-filter: blur(10px);
    transition: .48s ease-in-out;
    -webkit-backdrop-filter: blur(10px);
    background-color: var(--main-background);
}
.navbar .logo img{
    z-index: 14;
}
.navbar #menulist.active{
    display: flex;
}
#menu-icon{
    z-index: 14;
    right: 30px;
    display: block;
    position: relative;
    transition: .48s ease-in-out;
}
#close-icon{
    z-index: 14;
    right: 30px;
    display: none;
    position: relative;
}
#signup-btn{
    display: none;
}
#menu-toggle{
    display: block;
}
/* hero section */
.hero-section{
    padding: 80px 20px;
    height: auto;
}
.hero-section .text #bigg{
    font-size: 42px;
}
/* Target audience */
.target .target-container .target-box{
    background: none;
}
.target .target-container{
    flex-direction: column;
    align-items: center;
}
.target .target-container .target-box{
    width: 100%;
    padding: 20px;
}
.contact .container,
.benefits .benefit-container,
.footer .footer-container{
    flex-direction: column;
    align-items: center;
}
.target .target-container .target-box,
.benefits .benefit-container .benefit-box,
.contact .left,
.contact .right,
.footer .footer-container .box{
    width: 100%;
    padding: 20px;
}
/* call to action */
.cta{
    padding: 60px 40px;
}
.cta #bigg{
    font-size: 42px;
}
form{
    padding: 20px;
    max-width: 100%;
}
/* Apply 100% width to all main card-like elements */
.target .target-container,
.benefits .benefit-container,
.contact .container,
.footer .footer-container{
    flex-direction: column;
}
.footer .footer-container .box{
    border: none;
    border-bottom: 1px solid var(--text-highlight);
}
.target .target-container .target-box,
.benefits .benefit-container .benefit-box,
.contact .right .contact-container .contact-box,
.footer .footer-container .box{
    width: 100%;
}
   .about-us {
        padding: 30px 20px;
    }

    .about-us .about-container .left p,
    .about-us .about-container .right p {
        font-size: 20px;
    }

    .about-us .about-container .right .right-box {
        width: 100%; /* One box per row on small screens */
    }

    .about-us .about-container .right .right-container {
        flex-direction: column;
        align-items: center;
    }

    .about-us .about-container .right button {
        font-size: 16px;
        padding: 10px 16px;
    }
.contact .left p{
    font-size: 20px;
}
}