/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

:root {
    --primery-hero-kids : #E99725;
    --primery-rally : #08A4E4;
    --primery-qbit : #9CA9B9;
}

/* ==================================================================*/
/* Main Header */
/* ==================================================================*/
.whb-main-header .container {
    background: #B0D0E72B !important;
    border-radius: 28px !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* ==================================================================*/
/* main page */
/* ==================================================================*/

.qbit-main-page {
    height: 100vh;
    background: url(./assets/img/main-page/first-background.webp) no-repeat center center / cover;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.6s ease;
}

.first-hero-kids {
    background: url('./assets/img/main-page/first-hero-kids.webp') no-repeat center center;
    width: 300px;
    height: 600px;
}
.first-rally {
    background: url('./assets/img/main-page/first-rally.webp') no-repeat center center;
    width: 300px;
    height: 600px;
}
.first-qbit {
    background: url('./assets/img/main-page/first-qbit.webp') no-repeat center center;
    width: 300px;
    height: 600px;
}
.main-page-wrapper #main-content {
    padding: 0;
}
.first-hero-kids span {
    background: var(--primery-hero-kids);
}
.first-rally span {
    background: var(--primery-rally);
}
.first-qbit span {
    background: var(--primery-qbit);
}
.first-pic span {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 35px;
    flex-wrap: wrap;
}
.first-pic {
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    transition: width 0.6s ease;
}

.first-pic:hover {
    width: 700px;
}

.qbit-main-page:has(.first-pic:hover) .first-pic:not(:hover) {
    width: 100px;
}
.qbit-main-page:has(.first-hero-kids:hover) {
    background: url(./assets/img/main-page/hero-kids-background.webp)
    no-repeat center center / cover;
}
.qbit-main-page:has(.first-rally:hover) {
    background: url(./assets/img/main-page/rally-background.webp)
    no-repeat center center / cover;
}
.qbit-main-page:has(.first-qbit:hover) {
    background: url(./assets/img/main-page/qbit-background.webp)
    no-repeat center center / cover;
}
.first-hero-kids h2 {
    position: absolute;
    top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: #fff;
    text-shadow: 0 4px 3px #CE9CC6;
    font-size: 80px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    text-align: center;
}
.first-rally h2 {
    position: absolute;
    top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    color: #fff;
    font-size: 60px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    text-align: center;
}
.first-hero-kids:hover h2,
.first-rally:hover h2,
.first-qbit:hover h2 {
    top: 30px;
    visibility: visible;
    opacity: 1;
}