.hero-slider{
    width: 100%;
    height: calc(100vh - 5rem);
}
.hero-slider .swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-slider.swiper .pagination{
    display: flex;
    gap: .5rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2rem;
    z-index: 10;
    justify-content: center;
}
.pagination>span{
    background-color: #fff;
    box-shadow: 0 0 10px #ddd;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}
.hero-slider .swiper-pagination-bullet {
    opacity: 1;
}
.hero-slider .swiper-pagination-bullet-active {
    background: var(--point-color)
}
.story{
    margin: var(--space-3x-large) 0;
}
.story h1{
    margin-bottom: var(--space-2x-large);
    text-transform: uppercase;
}
.story-frame{
    display: flex;
    gap: 1rem;
}
.text-story{flex: 5;}
.img-story{flex: 7;}
.story-frame h2{
    margin-bottom: var(--space-normal);
}
.story-frame h4{
    margin-bottom: var(--space-large);
}
.story-frame h4+p{
    margin-bottom: var(--space-normal);
}
.philo{
    margin-top: 4.5rem;
}
.philo-list{
    display: flex;
    gap: var(--space-normal);
}
.philo-list>li{
    flex: 1;
}
.philo-list>li h3{
    margin-bottom: var(--space-large);
}
.philo-list>li h3+div{
    border-left: 3px solid var(--point-color);
    padding-left: var(--space-normal);
}
.philo-list>li h3+div p:nth-of-type(1){
    margin-bottom: var(--space-normal);
}

.menu-frame{
    margin-bottom: var(--space-3x-large);
}
.menu-frame h1{
    margin-bottom: var(--space-small);
}
.menu-frame h1+p{
    margin-bottom: var(--space-x-large);
}
.menu-frame .swiper-slide h4{
    margin-top: 1.5rem;
    margin-bottom: var(--space-small);
}

.experience{
    height: 600px;
    background: 
    linear-gradient(30deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url(../img/ex-bg.jpg) no-repeat 50% 50% / cover;
    color: #fff;
    padding: var(--space-3x-large) 0;
    text-align: center;
}
.experience h1{
    margin-bottom: var(--space-small);
}
.experience h1+p{
    margin-bottom: var(--space-x-large);
}
.experience h3{
    margin-top: var(--space-3x-large);
}
.experience ul{
    margin-top: var(--space-2x-large);
    display: flex;
    gap: var(--space-normal);
    text-align: left;
}
.experience ul li{
    flex: 1;
    background-color: rgba(188, 168, 168, 0.5);
    padding: var(--space-normal);
    border-radius: .5rem;
    backdrop-filter: blur(10px);
}
.experience ul li p:nth-of-type(1){
    margin-bottom: var(--space-small);
}

@media (max-width:1440px){
    .hero-slider{
        width: 100%;
        height: auto;
    }
    .text-story{flex: 1;}
    .img-story{flex: 1;}
}

@media (max-width:768px){
    .story h1 {
        text-align: center;
    }
    .story-frame {
        flex-direction: column;
        text-align: center;
    }
    .philo-list {
        flex-direction: column;
        gap: var(--space-x-large);
    }
    .experience ul{
        display: flex;
        flex-direction: column;
        text-align: center;
    }
}