@import url('../../node_modules/normalize.css/normalize.css');


/* ABSTRACTS */
@import url('abstracts/_animations.css');

/* BASE */
@import url('base/_reset.css');
@import url('base/_base.css');
@import url('base/_typography.css');

/* LAYOUT */
@import url('layout/header.css');
@import url('layout/hero.css');
@import url('layout/layout.css');
@import url('layout/footer.css');

/* COMPONENTS */
/* ... */



/* THEMES AND UTILS */










/* Global Styles */

















/* Media Queries */
@media (max-width: 768px) {

    .service-list,
    .team {
        flex-direction: column;
        align-items: center;
    }

    .service-item,
    .team-member {
        width: 80%;
    }

    .nav-links {
        flex-direction: column;
        gap: 10px;
    }

    .nav-links li {
        text-align: center;
    }
}

@media (max-width: 576px) {
    #hero h1 {
        font-size: 2rem;
    }

    #hero p {
        font-size: 1rem;
    }

    #hero .button {
        padding: 10px 20px;
    }

    .service-item,
    .team-member {
        width: 100%;
    }

    .newsletter input[type="email"] {
        width: 200px;
    }
}









/* Mobile Styles for the Navigation */
@media (max-width: 768px) {
    header {
        padding: 10px 20px;
    }

    .nav-links {
        display: none;
        /* Hide nav links initially */
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 70px;
        /* Adjust based on your header height */
        right: 0;
        background: #1A1A1A;
        /* Match your background */
        text-align: center;
    }

    /* When active, show the nav links */
    .nav-links.active {
        display: flex;
    }

    /* Hamburger icon styling */
    .hamburger {
        display: flex;
        flex-direction: column;
        cursor: pointer;
    }

    .hamburger span {
        background: #fff;
        height: 3px;
        width: 25px;
        margin: 4px 0;
    }

    .nav-links li {
        margin: 10px 0;
    }
}


/* 
scss media variables
$bp-sm: 576px;    //Phones
$bp-md: 768px;    //Tablets
$bp-lg: 1024px;   //Tablets (landscape)
$bp-xl: 1280px+;  //Desktops and up
 */






/* 
old hero section:

Hero Section
#hero {
    background-image: url('image.webp');
    background-size: cover;
    background-position: center;
    color: #0048ff;
    text-align: center;
    padding: 100px 20px;
} */