/*=========================================================
OUR PHILOSOPHY PAGE
=========================================================*/

.our-philosophy-page{
    overflow:hidden;
    background:#fff;
}

/*=========================================================
SECTION SPACING
=========================================================*/

.our-philosophy-section,
.our-story-section{
    padding:110px 0;
}

.container{
    max-width:1320px;
}

/*=========================================================
PHILOSOPHY GALLERY
=========================================================*/

.philosophy-gallery{
    position:relative;
    height:560px;
    width:100%;
}

.gallery-image{
    position:absolute;
    overflow:hidden;
    border-radius:12px;
    transition:.4s;
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.gallery-image:hover{
    transform:translateY(-8px);
}

.gallery-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* top left */

.image-one{
    width:210px;
    height:280px;
    top:0;
    left:20px;
}

/* top right */

.image-two{
    width:210px;
    height:260px;
    top:60px;
    right:20px;
}

/* center */

.image-three{
    width:285px;
    height:325px;
    left:180px;
    top:120px;
    z-index:5;
}

/* bottom left */

.image-four{
    width:165px;
    height:200px;
    bottom:0;
    left:90px;
}

/*=========================================================
CONTENT
=========================================================*/

.philosophy-content{

    padding-left:80px;
}

.philosophy-content h2{

    font-size:58px;

    font-weight:600;

    color:#111;

    margin-bottom:35px;
}

.philosophy-content .description{

    font-size:22px;

    color:#4d4d4d;

    line-height:2;

    text-align:center;
}

/*=========================================================
MARQUEE
=========================================================*/

.marquee-section{

    background:#cbc5c1;

    overflow:hidden;

    white-space:nowrap;

    padding:22px 0;
}

.marquee-track{

    display:flex;

    width:max-content;

    animation:marquee 35s linear infinite;
}

.marquee-track span{

    color:#fff;

    font-size:22px;

    font-weight:600;

    letter-spacing:2px;

    margin-right:90px;

    text-transform:uppercase;
}

@keyframes marquee{

    from{

        transform:translateX(0);
    }

    to{

        transform:translateX(-50%);
    }

}

/*=========================================================
OUR STORY
=========================================================*/

.story-content{

    max-width:620px;

    margin:auto;

    padding:0 40px;

    text-align:center;
}

.story-content h2{

    font-size:60px;

    font-weight:600;

    color:#111;

    margin-bottom:35px;
}

.story-content .description{

    font-size:22px;

    line-height:2;

    color:#555;
}

.story-image{

    height:760px;
}

.story-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;
}

/*=========================================================
TABLET
=========================================================*/

@media(max-width:991px){

.our-philosophy-section,
.our-story-section{

padding:80px 0;

}

.philosophy-gallery{

height:520px;

margin-bottom:60px;

}

.philosophy-content{

padding-left:0;

text-align:center;

}

.philosophy-content h2{

font-size:44px;

}

.story-content{

padding:60px 25px;

}

.story-content h2{

font-size:44px;

}

.story-image{

height:500px;

}

}

/*=========================================================
MOBILE
=========================================================*/

@media(max-width:767px){

.philosophy-gallery{

height:420px;

}

.image-one{

width:140px;
height:180px;
left:0;

}

.image-two{

width:140px;
height:180px;
right:0;
top:20px;

}

.image-three{

width:200px;
height:230px;
left:70px;
top:100px;

}

.image-four{

width:120px;
height:140px;
left:20px;
bottom:10px;

}

.philosophy-content h2{

font-size:34px;

}

.story-content h2{

font-size:34px;

}

.philosophy-content .description,
.story-content .description{

font-size:18px;

line-height:1.8;

}

.story-image{

height:350px;

}

.marquee-track span{

font-size:16px;

margin-right:45px;

}

}


/*=========================================================
HERO
=========================================================*/

.philosophy-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

   
    overflow:hidden;

}

.hero-image{

    padding-right:60px;

}

.hero-image img{

    width:100%;

    height:700px;

    object-fit:cover;

    border-radius:18px;

    box-shadow:0 25px 70px rgba(0,0,0,.15);

}

.hero-content{

    padding-left:40px;

}

.hero-subtitle{

    display:inline-block;

    color:#a38768;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:20px;

    font-size:14px;

}

.hero-content h1{

    font-size:72px;

    font-weight:600;

    line-height:1.1;

    color:#111;

    margin-bottom:30px;

}

.hero-description{

    font-size:20px;

    color:#555;

    line-height:1.9;

    margin-bottom:40px;

}

.hero-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:15px 34px;

    border:1px solid #111;

    color:#111;

    text-decoration:none;

    transition:.4s;

}

.hero-btn:hover{

    background:#111;

    color:#fff;

}

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    text-align:center;

    color:#666;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

}

.scroll-indicator span{

    display:block;

    width:2px;

    height:60px;

    background:#111;

    margin:0 auto 12px;

    animation:scrollLine 1.8s infinite;

}

@keyframes scrollLine{

    0%{

        transform:scaleY(.2);

        transform-origin:top;

    }

    50%{

        transform:scaleY(1);

        transform-origin:top;

    }

    100%{

        transform:scaleY(.2);

        transform-origin:bottom;

    }

}

/*=========================
Responsive
=========================*/

@media(max-width:991px){

.hero-content{

padding-left:0;

padding-top:50px;

text-align:center;

}

.hero-image{

padding-right:0;

}

.hero-content h1{

font-size:48px;

}

.hero-image img{

height:500px;

}

}

@media(max-width:767px){

.hero-content h1{

font-size:36px;

}

.hero-description{

font-size:17px;

}

.hero-image img{

height:350px;

}

}