.hero {
    background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
    /* border-radius: var(--radius-20); */
}


.hero-container {
    display: grid;
    padding-block: 150px 50px;
    margin-inline: 20px;
}

.hero-container .hero-desc {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero-desc .hero-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero-desc .hero-text h2{
    margin-block-start: -15px;
    color: var(--text-granite-gray);
    font-size: var(--fontSize-3);
}

.hero-text p {
    color: var(--text-granite-gray);
}

.hero-text #my-branch {
    color: var(--accent-teal-dark);
}

.hero-social-links-container .social-links{
    display: flex;
    gap: 1rem;
}

.social-links img {
    max-height: 50px;
    height: 40px;
}

.social-links img:is(:hover, :focus-visible){
    transform: translate3d(1px, -4px, 5px);
    scale: 1.1;
}

.hero-btn-container button{
    margin-right: 1rem;
}

.hero-banner-container{
    height: auto;
    width: 100%;
    /* order: -1; */
    display: none;
}

.hero-banner-container .banner-container,
.banner-container img{
    width: 100%;
    max-width: 400px;
    height: auto;
    margin-inline: auto;
}