#banner {
    display: flex;
	gap: 1rem;
    background-color: rgba(190,208,202,.1);
    background-image: url('../templates/imgs/star_1.svg'), 
        url('../templates/imgs/star_2.svg'), 
        url('../templates/imgs/star_1.svg'), 
        url('../templates/imgs/star_1.svg'), 
        url('../templates/imgs/orange_cloud.svg'),
        url('../templates/imgs/orange_cloud.svg'),
        url('../templates/imgs/blue_cloud.svg');
    background-position: left 5% top 5%, 
        right 5% top 4%, 
        left 40% bottom 8%, 
        right 30% bottom 3%, 
        left 30% top 60%, 
        right 20% top 4%,
        left 45% top 20%;
    background-size: 30px, 40px, 50px, 30px, 200px, 200px, 300px, 300px;
    background-repeat: no-repeat;
    border-radius: 20px;
	overflow: hidden;
}

@media (max-width: 1024px) {
    #banner{
        background-image: url('../img/star_1.svg'), 
        url('../img/star_2.svg'), 
        url('../img/star_1.svg'), 
        url('../img/star_1.svg'), 
        url('../img/orange_cloud.svg');

        background-position: left 5% top 5%, 
        right 5% top 4%, 
        left 40% bottom 8%, 
        right 30% bottom 3%, 
        left 30% top 25%;
    }
}

#banner > div {
    display: flex;
    justify-content: center;
    align-items: center;
}

#banner > div:nth-child(1) {
	width: 35%;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
}

#banner > div:nth-child(1) h1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#banner > div:nth-child(1) h1 > span:first-child {
    color: #5d9090;
    font-family: 'pacifico';
    font-size: 64px;
    font-weight: normal;
}

#banner > div:nth-child(1) h1 > span:last-child {
    color: #e9b567;
    font-size: 32px;
    font-weight: normal;
}

#banner > div:nth-child(1) p {
    color: #5d9090;
    text-align: center;
}

#banner > div:nth-child(1) a {
    background-color: #5d9090;
    padding: 15px 40px;
    font-family: 'poppins';
    color: #ffffff;
    border: inherit;
    cursor: pointer;
    text-align: center;
    border-radius: 10px;
    transition: 0.2s ease-in-out background-color;
}

#banner > div:nth-child(2) {
	width: 20%;
}

#banner > div:nth-child(1) a:hover {
    background-color: #e9b567;
}

#banner > div:nth-child(2) img {
    width: 100%;
}

#banner > div:nth-child(3) {
	width: 45%;
    background-color: #5d9090;
    text-align: center;
	padding: 2rem;

}

#banner > div:nth-child(3) p {
    color: #ffffff;
	text-align: center;
	margin-bottom: 1rem;
	font-family: 'pacifico';
	font-size: clamp(2rem, -1.75rem + 12vw, 5rem);
}

@media (max-width: 1024px) {
    #banner > div:nth-child(3) {
        display: none;
    }

    #banner {
        flex-direction: column;
    }
}