.main-page {
    background-color: #faf9f2;
    padding-bottom: 0;
}

.banner {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center ;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.banner {
    --banner-wave-fill: #f4ecdf;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 520' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0,0H1440V430C1320,420,1200,410,1080,420C960,430,840,470,720,470C600,470,480,430,360,420C240,410,120,420,0,430V0Z'/%3E%3C/svg%3E");
    mask-position: center top;
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 520' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0,0H1440V430C1320,420,1200,410,1080,420C960,430,840,470,720,470C600,470,480,430,360,420C240,410,120,420,0,430V0Z'/%3E%3C/svg%3E");
    -webkit-mask-position: center top;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
}

.slide-text .slide-in {
    font-size: 5rem;
    font-weight: bold;
    color: #ffc163ff;
    letter-spacing: 0.3rem;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}

.slide-text .slide-description {
    justify-items: center;
    text-shadow: 2px 2px 6px rgba(34, 34, 34, 0.6);
}

.slide-text .slide-description .slide-in {
    font-size: 1.5rem;
    line-height: 40px;
    font-weight: bold;
    font-family: Arial;
    letter-spacing: 1.5px;
    color: white;
    text-align: center;
    margin: 0px;
}

.page-container {
    margin: 0;
}

.social-container {
    text-align: center;
    background-color: #d6f1fb;
    padding: 20px 0;
    width: 100%;
}

.social-container .row-2 {
    background-color: #d6f1fb;
    padding: 10px 0;
    width: 100%;
    margin-bottom: 10px;
    margin-top:10px;
    grid-template-columns: 50% 50%;
}

.social-container .social-titles {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.social-container .social-titles h1 {
    font-size: clamp(2rem, 5vw,5rem);
    line-height: clamp(2rem, 5vw, 5rem);
    margin: 30px 80px;
    color:  var(--accent-color-7);
    -webkit-text-stroke: 2.7px var(--accent-color-8);
    font-family: 'Alan Sans', sans-serif;
    margin-top:50px;
    margin-bottom: 0px;
}

.social-container .social-titles h2 {
    color: #468faf;
    font-family: 'Alan Sans', sans-serif;
    margin-left: 80px;
    margin-right: 80px;
    line-height: clamp(1rem, 1.5vw, 1.5rem);
}

.social-container .col-item {
    justify-items: center;
}

.social-container .col-item h1 {
    font-size: clamp(2rem, 3.5vw,3.5rem);
    line-height: clamp(1.5rem, 2vw, 2rem);
    margin: 30px 0px;
    color: var(--accent-color-9);
    font-family: 'Alan Sans', sans-serif;
}

.social.eu svg {
    margin: 20px 15px;
    border: 3px solid #012a4a;
    background-color: #edf8fcff;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    height: clamp(1rem, 2vw, 2rem);
    width: clamp(1rem, 2vw, 2rem);
}

.social.eu svg:hover {
    transform: scale(1.10);
    background-color: #f2f5d9ff;
    border: 3.5px solid  #3e6401ff;
    fill: #4a7702ff;
}

.social.eu a {
    display: inline-block;
}

.social-para {
    margin-left: 40px;
    margin-right: 40px;
    font-family: 'Alan Sans', sans-serif;
    font-weight: 500;
    color: var(--accent-color-12);
}

.social-para p {
    font-size: clamp(1rem, 2vw, 1.4rem);
    line-height: clamp(1rem, 2vw, 1.4rem);
    margin-top: 45px;
}

.adoption-container {
    margin-top: 100px;
    text-align: center;
}

.adoption-container h1 {
    text-align: center;
    font-weight: bold;
    letter-spacing: 1px;
    word-spacing: 0px;
    margin: 30px;
    padding: 0;
    color: #eb8f05;
}

.row-3 {
    margin: 0 8rem;
    gap: 4rem;
}

.adoption-container .row-3 {
    margin: 50px;
    justify-items: center;
}

.adoption-media {
    max-width: 380px;
    overflow-y: scroll;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin: 20px 0;
    max-height: 650px;
}

.urgent-adpot-media {
    margin-bottom: 30px;
}

@media (max-width: 1100px) {
    .row-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .adoption-container .row-3 {
        margin: 28px auto;
    }

    .adoption-media {
        max-width: 100%;
    }
}

@media (max-width: 700px) {
    .row-3 {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 16px 0;
    }

    .adoption-container h1, .adoptme-container h1 {
        font-size: 1.1rem;
        margin-bottom: 8px;
    }
}