/**
Theme Name: vrnkrep
Author: vadds
*/
html{
    font-family: "Roboto", sans-serif;
    /*font-family: "Montserrat", sans-serif;*/
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

body{
    background-color: black!important;
    color: white!important;
}

.card{
    background-color: #ffc107!important;
    color: black!important;
    border-radius: 1.25rem!important;
}

.card iframe{
    border-radius: 1.25rem!important;
}

.card img{
    height:300px;
    max-width: 100%; /* Максимальная ширина изображения */
    height: auto;    /* Автоматическая высота для сохранения соотношения сторон */
    margin-left: auto; /* Центрирует блок */
    margin-right: auto; /* Центрирует блок */
    border-top-left-radius:1.25rem;
    border-top-right-radius: 1.25rem;
}

.img16_9{
    aspect-ratio: 16 / 9; /* Устанавливаем соотношение сторон 16:9 */
    object-fit: cover; /* Опционально: как изображение будет обрезано, если пропорции не совпадают */

}

.card-text-240{
    min-height: 240px;
}


.parallax-banner {
    /*background-image: url('/wp-content/uploads/background.jpeg'); !* Replace with your image path *!*/
    min-height: 500px; /* Adjust height as needed */
    background-attachment: fixed; /* This is the key for parallax */
    /*background-position: center;*/
    background-position: calc(100% - 20px) calc(100% - 10px);
    background-repeat: no-repeat;
    background-size: cover; /* Ensures the image covers the entire area */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white; /* Or a color that contrasts with your image */
    text-align: left;
}

.bk_img1{
    background-image: url('/wp-content/uploads/background.jpeg'); /* Replace with your image path */
}
.bk_img2{
    background-image: url('/wp-content/uploads/autumn.jpeg'); /* Replace with your image path */
}

.bk_img3{
    background-image: url('/wp-content/uploads/payment.jpeg'); /* Replace with your image path */
}


.parallax-banner .content {
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.5); /* Optional: semi-transparent background for readability */
    border-radius: 8px;
}

.page-content {
    padding: 50px;
    background-color: #f0f0f0; /* Example background for content below the banner */
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 1.5s ease; /* Adjust duration and easing as needed */
}


/* Define the transition classes */
.slide-fade-enter-active,
.slide-fade-leave-active {
    transition: all 1.5s ease;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translateY(-20px); /* Adjust for desired slide distance */
    opacity: 0;
}

.mh-70{
    /*min-height: 60%!important;*/
}