/* Start custom CSS for html, class: .elementor-element-e0d7c48 */.hero-banner{
position:relative;
width:100%;
height:100vh;
overflow:hidden;
}
.hero-banner img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/* Black Gradient Overlay */
.hero-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
to top,
rgba(0,0,0,.95) 0%,
rgba(0,0,0,.75) 18%,
rgba(0,0,0,.45) 38%,
rgba(0,0,0,.12) 65%,
rgba(0,0,0,0) 100%
);
z-index:1;
}
/* Bottom Pattern (like Masters' Union) */
.hero-overlay::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:220px;
background:
radial-gradient(circle at center,
rgba(255,255,255,.06) 1px,
transparent 1px);
background-size:28px 28px;
opacity:.25;
}
.hero-content{
position:absolute;
left:7%;
right:7%;
bottom:70px;
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:80px;
z-index:5;
}
.hero-left{
max-width:55%;
}
.hero-left h1{
margin:0;
color:#fff;
font-size:80px;
line-height:.95;
font-weight:500;
font-family:Poppins,sans-serif;
}
.hero-left h1 span{
color:#E7BE73;
font-family:"Cormorant Garamond",serif;
font-size:80px;
font-style:italic;
font-weight:500;
}
.hero-right{
max-width:430px;
}
.hero-right p{
margin:0;
color:#fff;
font-size:15px;
line-height:1.8;
font-weight:300;
opacity:.95;
}
/* Responsive */
@media(max-width:992px){
.hero-banner{
height:700px;
}
.hero-content{
flex-direction:column;
align-items:flex-start;
gap:30px;
}
.hero-left,
.hero-right{
max-width:100%;
}
.hero-left h1{
font-size:52px;
}
.hero-left h1 span{
font-size:58px;
}
.hero-right p{
font-size:17px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-b32e661 *//*=========================
STORY HERO
=========================*/
.story-banner{
position:relative;
width:100%;
height:100vh;
overflow:hidden;
background:#000;
}
.story-banner img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/*=========================
OVERLAY
=========================*/
.story-overlay{
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(
to top,
rgba(0,0,0,.95) 0%,
rgba(0,0,0,.82) 18%,
rgba(0,0,0,.45) 42%,
rgba(0,0,0,.15) 70%,
rgba(0,0,0,0) 100%
);
}
.story-content{
position:absolute;
left:7%;
top:50%;
transform:translateY(-50%);
width:42%;
z-index:5;
}
/*=========================
HEADING
=========================*/
.story-left h1{
margin:0 0 35px;
}
.story-left .line1{
display:block;
color:#fff;
font-size:72px;
font-family:Poppins,sans-serif;
font-weight:500;
line-height:.95;
opacity:0;
transform:translateY(60px);
animation:slideUp .9s ease forwards;
}
.story-left .line2{
display:block;
color:#E6C17D;
font-size:82px;
font-family:"Cormorant Garamond",serif;
font-style:italic;
font-weight:500;
line-height:1;
opacity:0;
transform:translateY(60px);
animation:slideUp .9s ease forwards;
animation-delay:.4s;
}
/*=========================
PARAGRAPH
=========================*/
.story-left p{
color:#fff;
font-size:15px;
line-height:1.9;
font-family:Poppins,sans-serif;
font-weight:300;
max-width:700px;
opacity:0;
transform:translateY(40px);
animation:fadeUp 1s ease forwards;
animation-delay:.9s;
}
/*=========================
ANIMATION
=========================*/
@keyframes slideUp{
from{
opacity:0;
transform:translateY(60px);
}
to{
opacity:1;
transform:translateY(0);
}
}
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/*=========================
MOBILE
=========================*/
@media(max-width:992px){
.story-banner{
height:700px;
}
.story-content{
width:88%;
left:6%;
}
.story-left .line1{
font-size:48px;
}
.story-left .line2{
font-size:56px;
}
.story-left p{
font-size:16px;
line-height:1.8;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4712eb5 *//*==========================
FOUNDER HERO
===========================*/
.founder-banner{
position:relative;
width:100%;
height:100vh;
overflow:hidden;
background:#000;
}
.founder-banner img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
/*==========================
OVERLAY
===========================*/
.founder-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
to top,
rgba(0,0,0,.95) 0%,
rgba(0,0,0,.82) 20%,
rgba(0,0,0,.45) 45%,
rgba(0,0,0,.12) 75%,
rgba(0,0,0,0) 100%
);
z-index:1;
}
/*==========================
CONTENT
===========================*/
.founder-content{
position:absolute;
left:7%;
top:50%;
transform:translateY(-50%);
width:42%;
z-index:5;
}
/*==========================
HEADING
===========================*/
.founder-left h1{
margin:0 0 35px;
}
.founder-left .line1{
display:block;
color:#fff;
font-size:72px;
font-family:Poppins,sans-serif;
font-weight:500;
line-height:.95;
opacity:0;
transform:translateY(70px);
animation:slideUp .9s ease forwards;
}
.founder-left .line2{
display:block;
color:#E7BE73;
font-size:82px;
font-family:"Cormorant Garamond",serif;
font-style:italic;
font-weight:500;
line-height:1;
opacity:0;
transform:translateY(70px);
animation:slideUp .9s ease forwards;
animation-delay:.35s;
}
/*==========================
PARAGRAPH
===========================*/
.founder-left p{
margin:0;
color:#fff;
font-size:15px;
line-height:1.9;
font-family:Poppins,sans-serif;
font-weight:300;
max-width:720px;
opacity:0;
transform:translateY(40px);
animation:fadeUp 1s ease forwards;
animation-delay:.9s;
}
/*==========================
ANIMATIONS
===========================*/
@keyframes slideUp{
from{
opacity:0;
transform:translateY(70px);
}
to{
opacity:1;
transform:translateY(0);
}
}
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/*==========================
RESPONSIVE
===========================*/
@media(max-width:992px){
.founder-banner{
height:700px;
}
.founder-content{
width:88%;
left:6%;
}
.founder-left .line1{
font-size:50px;
}
.founder-left .line2{
font-size:58px;
}
.founder-left p{
font-size:16px;
line-height:1.8;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-85b04e1 *//*==========================
MISSION SECTION
==========================*/
.mission-section{
background:#000;
width:100%;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:120px 40px;
}
.mission-container{
max-width:1450px;
width:100%;
text-align:center;
}
.mission-container h2{
margin:0;
color:#ffffff;
font-family:Poppins,sans-serif;
font-size:82px;
font-weight:300;
line-height:1.22;
letter-spacing:-2px;
opacity:0;
transform:translateY(60px);
animation:missionReveal 1.2s ease forwards;
}
/*==========================
ANIMATION
==========================*/
@keyframes missionReveal{
from{
opacity:0;
transform:translateY(60px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/*==========================
RESPONSIVE
==========================*/
@media(max-width:1200px){
.mission-container h2{
font-size:62px;
}
}
@media(max-width:992px){
.mission-section{
min-height:auto;
padding:90px 25px;
}
.mission-container h2{
font-size:42px;
line-height:1.35;
letter-spacing:-1px;
}
}
@media(max-width:576px){
.mission-container h2{
font-size:30px;
line-height:1.45;
}
}/* End custom CSS */