.homepage-container {
    margin-bottom: 30vh;
}

.row {
    display: flex;
    margin-bottom: 1rem;
    gap:1rem 0rem;
}

.homepage-title-1 {
    font-family: var(--font-family-a);
    font-style: normal;
    font-size: var(--homepage-title-size-1);
    font-weight: bold;
    color: black;
}

.homepage-title-2 {
    font-family: var(--font-family-a);
    font-style: normal;
    font-size: var(--homepage-title-size-1);
    font-weight: bold;
    color:var(--theme-color-d);
}


.typed-cursor {
    font-family: var(--font-family-a);
    font-size:var(--homepage-title-size-1) ;
    font-weight: bold;
    color: transparent;
}


.homepage-div-1 {
    text-align:left;
}

@media (prefers-reduced-motion: no-preference) {
    .title-container {
        animation:fade-in linear forwards;
        animation-timeline: view();
        animation-range-start: entry;
        animation-range-end: exit;
    }

    @keyframes fade-in {
        0% {scale:1 ; opacity :1;}
        70% {scale:1 ; opacity :1;}
        100% {scale:0 ; opacity :0;}
    }
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .homepage-container {
            animation:fade-in linear forwards;
            animation-timeline: view();
            animation-range-start: entry;
            animation-range-end: exit;
        }

        @keyframes fade-in {
            0%,100% {scale: .8; opacity:0;}
            30% {scale:1 ; opacity :1;}
            70% {scale:1 ; opacity :1;}
        }
    }
}

.section-title {
    font-family: var(--font-family-a);
    font-size :var(--section-title-size); 
    font-weight: bold;
}

.homepage-paragraph {
    font-family: var(--font-family-a);
    font-size :var(--paragraph-font-size); 
    padding-top:1rem;
    padding-left:1rem;
}

.homepage-card {
    background-color:#f9f9f9;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-body {
    text-align:left;
}

.card-title {
    text-align:center;
    font-family: var(--font-family-a);
    font-weight:bold;
    font-size: var(--card-title-size);
}

.card-text {
    text-align:top;
    text-align:center;
    font-size: var(--card-paragraph-size);
}

.card-img {
    margin:3rem;
    height:20rem;
    width:auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
}

.card-img:hover {
    -ms-transform: scale(1.15); /* IE 9 */
    -webkit-transform: scale(1.15); /* Safari 3-8 */
    transform: scale(1.15);
    }

.homepage-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}


.homepage-image {
    height:30rem;
    width:auto;
    display: block;
    margin: auto;
    margin-top:3rem;
}

.card-body img {
    padding:1rem;
}

.card-body div {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
}

.card-body div img{
    margin:2rem;
}

.section-top-title {
        background: #f9f9f9;
        padding: 80px 0;
        width: 100%;
        height: 80%;
}
.section-dark {
        background: linear-gradient(135deg, var(--theme-color-b) 0%, var(--theme-color-g) 100%);
        color: white;
        padding: 80px 0;
        width: 100%;
}