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

body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url("https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTV8fHBvcnRmb2xpb3xlbnwwfHwwfHx8MA%3D%3D");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    width: 100%;
    background-attachment: fixed;
    font-family: sans-serif;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em 0 1em 1em;
}

#main-head ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    gap: 2rem;
}

#main-head ul li a {
    text-decoration: none;
    color: white;
    font-weight: 700;
    display: inline-block;
    transition: all 0.3s ease-in-out;

}

#main-head ul li a:hover {
    transform: translateY(-15%);
    text-shadow:
        0 0 4px #ee0dbd,
        0 0 10px #ff004c,
        0 0 20px rgba(0, 255, 255, 0.6);
}


header a {
    text-decoration: none;
    color: rgb(253, 252, 253);
    font-size: 2rem;
    font-family: fantasy;
}

header a span {
    color: rgb(248, 12, 12);
}

#cta-sec ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    gap: 2rem;

}

#cta-sec ul li .cta-button {
    padding: 0.9rem 1.5rem;
    background-color: rgb(136, 255, 0);
    border: none;
    font-weight: 700;
    text-align: center;
    font-size: 1rem;
    display: inline-block;
    width: max-content;
    cursor: pointer;
    border-radius: 15px;
    transition: all 0.3s ease-in-out;
    color: black;
}

#cta-sec ul li .cta-button:hover {
    transform: translateY(-15%);
    box-shadow:
        0 0 15px #64cc02,
        0 0 20px #08ff29,
        0 0 40px rgba(157, 255, 0, 0.6);
}

#cta-sec ul li .menu-toggle{
    display: none;
}

menu {
    min-height: 80vh;
    width: 100%;
    position: relative;
}


.text-sec { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
}

.text-sec h1 {
    color: white; 
    font-size: clamp(3rem, 5vw, 7rem);
    display: inline-block;
    padding: 1rem 33rem 1rem 4rem;
}

.text-sec h3 {
    color: white;
    display: inline-block;
    font-size: clamp(1.6rem, 1.5vw, 2.4rem);
    padding: 1rem 4rem;
}

#hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0 2.5em;
    min-height: 80vh;
    min-width: 50vw;
    flex-direction: row;
}

#hero .text-sec h1 span {
    color: #05fce7;
}

.cta-button-2 button {
    margin: 0.8rem 4rem;
    display: inline-block;
    border: none;
    width: max-content;
    border-radius: 15px;
    background-color: #e100ff;
    transition: all 0.3s ease-in-out;
    text-align: center;
    padding: 1rem 2.6rem;
    font-size: 1.1rem;
    cursor: pointer;
    margin: -4rem 0 1rem 7rem;
    font-weight: bolder;
}

.cta-button-2 button:hover {
    transform: translateY(-15%);
    box-shadow:
        0 0 10px rgb(81, 6, 104),
        0 0 20px rgb(155, 2, 243),
        0 0 40px rgb(204, 4, 230);
}

#media-icons ul {
    display: flex;
    top: 50%;
    padding: 0;
    transform: translateY(-50%);
    position: absolute;
    flex-direction: column;
    z-index: 30;
    right: 2%;
    list-style: none;
    gap: 2rem;
}

#media-icons ul p {
    color: white;
    writing-mode: vertical-lr;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial;
    font-weight: 500;
    letter-spacing: 0.1em;
}

#media-icons ul li i {
    color: white;
    font-size: 1.3em;
}


@media screen and (max-width: 800px) {
    #main-head ul {
        display: flex;
        justify-content: center;
        margin-right: 0;
        align-items: center;
        gap: 1rem;
    } 

    .cta-button-2 button {
        display: inline-block;
        margin: 0 0 1rem 7rem;
        font-weight: bolder;
    }
}

@media screen and (max-width: 740px) {
    #main-head ul {
        display: none;
    }

    #cta-sec ul li .menu-toggle {
        padding: 0.6rem 1rem;
        cursor: pointer;
        display: block;
        border: none;
        border-radius: 5px;
    }

    #cta-sec ul li .menu-toggle .ri-menu-fill {
        font-size: 1.1rem;
        font-weight: 900;
    } 
}

@media screen and (max-width:550px) {

    #hero {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 0;
    }
    #media-icons { 
        position: static;
        width:100%;
        margin-top: 3rem;
    }

    #media-icons ul {
        display: flex; 
        align-content: center;
        flex-direction: row;
        position: static;
        gap: 2rem;
        transform: translateX(15%); 
    } 

    #media-icons ul p { 
        writing-mode:horizontal-tb;  
    }

    .text-sec h1, .text-sec h3 {
        padding: 1rem 1rem;  
        text-align: center;
    } 


    .text-sec {
        align-items: center;
        text-align: center;
    } 


}