*, *::before, *::after {
    box-sizing:border-box;
    margin:0;
    padding:0;
}

:root {
    --base: #ebebeb;
    --base-100: #fff;
    --base-800:#000;
    --purple:#7360DF;
    --purple-100: #f0e1ff;
    --purple-400:#b77aec;
    --purple-600:#803dc7;
    --purple-800:#33186B;
    --green: #2d8643;
    --green-100: #d4fae4;
    --green-200:#d1efdf;
    --green-400: #5fb675;
	--green-800: #044627; 
}

body { 
font-family: "Karla", sans-serif;  
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 20px;
}


a {
    text-decoration: none;
    color:var(--purple);
    &:hover{
        text-decoration: underline;
    }
}
header {
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between; /* Ensures space between the logo and nav */
    align-items: center; /* Centers the logo and nav vertically */
    max-width: 1440px;
    margin: auto;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    .logo-holder {
        display: flex;
        padding: 10px;
        align-items: center;
        font-weight: 600;
        color:var(--purple-800);
        .logo {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            background-color:var(--purple-100);
            height: 64px;
            width: 64px;
            margin-right: 20px;
            border-radius:50%

        }
        .logo-text {
            flex: 1;

        }
    }
    nav {
        display: flex;
        ul {
            display: flex;
            list-style-type: none;
            gap: 5px;
            li {
                display:inline-block;
                a{
                    display: inline-block;
                    padding: 10px 20px;
                    color:var(--purple-800);
                    &:hover{
                        background-color:var(--purple-100);
                        border-radius: 10px;
                        text-decoration: none;
                    }
                }
            }
        }
        .mobile-toggle {
            display:none;
            color: var(--purple-800);
            padding: 10px;
            @media (max-width: 768px){
                display:inline-block;
                position: absolute;
                top:20px;
                right:20px;
            }
        }

    }
    @media(max-width: 1024px){
        flex-direction: column;
        align-items: center;

    }
    @media(max-width: 768px){
        flex-direction: column;
        align-items:center;
        nav{
            margin-top:10px;
            width: 100%;
            ul{
                display: none;
                flex-direction: column;
                text-align: center;
                width: 100%;
                a {
                    width:100%;
                }
                &.active{
                    display:flex;
                }
            }
        }
    }
}

.container {
    max-width: 1440px;
    margin: auto;
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 30px;

    @media(max-width: 1440px) {
        padding-left:30px;
        padding-right:30px;
    }
}

.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--purple-600);
    color: var(--base-100);
    border-radius: 10px;
    transition: ease 0.3s all;

    &:hover {
        text-decoration: none;
        background-color: var(--green-400);
    }
}
h1 {
    font-size: 64px;
    line-height:1;
    margin-bottom:10px;
    small {
        display: block;
        font-weight: 100;
    }
    @media (max-width: 1024px){
        font-size:48px;
    }
}

.hero {
    display:flex;
    @media (max-width: 1024px){
        flex-direction: column;
    }
    .hero-purple {
        flex:1;
        background-color: var(--purple-100);
        border-radius: 30px;
        padding: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        span {
            @media(max-width:1024px){
                display: none;
            }
        }
        .call-to-action {
            margin-top: 20px;
            margin-bottom: 10px;
            a {
                margin-right: 10px;
                margin-bottom: 10px;
            }
        }
        .social-links {
            a {
                &:hover {
                    text-decoration: none;
                }
            }
        }
        
    }
    .hero-green {
        flex:1;
        /*background-color: var(--green-100);*/
        background-image: url('./imgs/bg-img.jpg');
        border-radius:30px;
        padding: 0px 30px;
        display: flex;
        justify-content: center;
        align-items:flex-end;
        img{
            margin-top: -60px;
            max-width: 420px;
            margin-bottom: -10px;
        }

        
    }

}

.logos {
    background-color: var(--base);
    border-radius: 30px;
    padding: 30px 8px;
    @media (max-width: 1440px){
        border-radius: 0px;
    }
    .marquee {
        width:100vw;
        max-width:100%;
        height:128px;
        overflow:hidden;
        position: relative;
        .track {
            position: absolute;
            white-space:nowrap;
            will-change:transform;
            animation: marquee 40s linear infinite;
            display:flex;
            gap:10px
        }

    }
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/*h2 {
    font-size: 34px;
    line-height: 1;
    margin-bottom:10px;
    text-align:center;
    color:var(--base-800);
    padding:30px;
    small(
        display: block;
        font-weight: 100;
        font-size: 0.5em;
        color:var(--base);
    )
}*/

h3{
    font-size: 32px;
    font-weight: 600;
    line-height:1;
    margin-bottom:20px; 
    color: var(--base-800);
}
.skills {
    .holder-purple{
        background-color: var(--green-200);
        border-radius: 30px;
        padding: 30px;
        display: flex;
        @media(max-width:1024px){
            flex-direction: column;
        }
        .left-column {
            flex:1;
            ul {
                list-style: none;
                gap: 10px;
                margin-right: 100px;
                margin-bottom: 20px;
                li {
                    display: inline-block;
                    background-color: var(--green-400);
                    padding: 10px 20px;
                    border-radius: 10px;
                    margin-bottom:10px;
                }
            }
        }
        .right-column {
            flex: 1;
            p {
                margin-bottom:20px;
            }

        }
        @media (max: width 1024px;){
            font-size: 48px;
        }
    }
}