@import url(./layouts.css?v=0.0.10);
@import url(./system.css?v=0.0.10);

  body {
        font-family: poppins-medium;
        background: var(--color-bg1);
        color: var(--color-text);
        line-height: 1.6;
        overflow-x: hidden;
        }

        /* Typography */
        h1 { font-size: var(--fsize-8); color: var(--color-light); font-weight: 700; font-family: poppins-bold;}
        h2 { font-size: var(--fsize-7); color: var(--color-light); font-weight: 600; font-family: poppins-bold;}
        h3 { font-size: var(--fsize-6); color: var(--color-light); font-weight: 600; font-family: poppins-medium;}
        h4 { font-size: var(--fsize-5); color: var(--color-light); font-weight: 500; font-family: poppins-medium;}
        p { font-size: var(--fsize-3); color: var(--color-light); line-height: 1.6; font-family: poppins-regular;}

    /* ========================================
    LAYOUT UTILITIES
    ======================================== */
    .wrapper {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .content {
        flex: 1;
    }

    .text-center { text-align: center; }
    .hidden { display: none; }

    
    /* ========================================
    SMOOTH SCROLLING
    ======================================== */
    html {
        scroll-behavior: smooth;
    }

    /* Offset for fixed navigation */
    section {
        scroll-margin-top: 80px;
    }
    
    /* ========================================
    Fonts
    ======================================== */
    @font-face {
    font-family: poppins-bold;
    src: url(../fonts/Poppins-Bold.ttf);
    }
    @font-face {
    font-family: poppins-medium;
    src: url(../fonts/Poppins-Medium.ttf);
    }
    @font-face {
    font-family: poppins-regular;
    src: url(../fonts/Poppins-Regular.ttf);
    }
    @font-face {
    font-family: poppins-light;
    src: url(../fonts/Poppins-light.ttf);
    }

    /* Base Google Icon Style */
    .material-icons {
    font-size: 36px;  /* change size */
    color: var(--color-primary);      /* change color */
    vertical-align: middle;
    }

    .why-item .material-icons{
        font-size: 5rem;
    }

    .service-item .material-icons{
        font-size: 5rem;
    }

    a {
        text-decoration: none;
    }