@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Montserrat:wght@100..900&display=swap');


*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
width:100%;
min-height:100vh;
}
.about-section{
width:100%;
height:80vh;
background:#fff;
display:flex;
flex-direction:column;
justify-content:center;
padding:40px 5%;
margin-top: 40px;
}

/* GRID */

.about-grid{
display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-template-areas:"left content right";
gap:40px;
align-items:center;
margin-bottom:50px;
}



.about-image:first-child{
grid-area:left;
}

.about-content{
grid-area:content;
}

.about-image:last-child{
grid-area:right;
}





/* IMAGES */

.about-image img{
width:100%;
height:380px;
object-fit:cover;
border-radius:25px;
filter:grayscale(100%);
}

/* CONTENT */

.about-content{
text-align:center;
}

.about-content h2{
font-size:40px;
margin-bottom:20px;
font-weight:600;
}

.about-content p{
color:#555;
line-height:1.6;
margin-bottom:25px;
}

/* BUTTON */

.about-btn{
padding:14px 34px;
background:#000;
color:#fff;
border:none;
border-radius:30px;
cursor:pointer;
transition:0.3s;
}

.about-btn:hover{
background:#333;
}

/* TYPEWRITER CURSOR */

.cursor{
display:inline-block;
width:3px;
height:1em;
background:#000;
margin-left:6px;
animation:blink 1s infinite;
}

@keyframes blink{
0%{opacity:1}
50%{opacity:0}
100%{opacity:1}
}

/* LOGO STRIP */

.brand-strip{
display:flex;
justify-content:space-between;
padding:25px;
background:#f3f3f3;
border-radius:12px;
font-weight:600;
letter-spacing:2px;
color:#777;
}



















/* RESPONSIVE */

@media (max-width:900px){

.about-section{
height:auto;
padding:80px 6%;
}

.about-grid{
grid-template-columns:1fr;
grid-template-areas:
"left"
"content"
"right";
gap:30px;
}

/* ensure correct order */

.about-image:nth-child(1){
order:1;
}

.about-content{
order:2;
}

.about-image:nth-child(3){
order:3;
}

/* image adjustments */

.about-image img{
height:260px;
}

/* text sizing */

.about-content h2{
font-size:32px;
}

.about-content p{
font-size:15px;
}

}















/* make content take full height */

.about-content{
text-align:center;
display:flex;
flex-direction:column;
justify-content:space-between;
height:100%;
}

/* push button to bottom */

.about-btn{
margin-top:auto;
align-self:center;
}












.about-btn{
position:relative;
padding:14px 36px;
font-size:15px;
letter-spacing:1px;

background:#000;
color:#fff;

border:none;
border-radius:40px;
cursor:pointer;

overflow:hidden;
transition:all .35s ease;
}

/* sliding highlight */

.about-btn::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:#fff;
transition:left .35s ease;
z-index:0;
}

/* text above effect */

.about-btn span{
position:relative;
z-index:2;
}

/* hover animation */

.about-btn:hover::before{
left:0;
}

.about-btn:hover{
color:#000;
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,0,0,0.25);
}











/* hide mobile contact on desktop */
.mobile-contact{
  display:block;
}

/* MOBILE FIX */
@media (max-width:768px){

  /* show inside menu */
  .mobile-contact{
    display:block;
    width:100%;
  }

  .mobile-contact .contact-btn{
    width:100%;
    justify-content:center;
  }

  /* keep original hidden */
  .contact-btn{
    display:none;
  }

}



































.stats-section{
width:100%;
padding:40px 8%;   /* reduced top gap */
background:#f5f5f5;
text-align:center;
}

.about-text{
max-width:850px;
margin:0 auto 35px;  /* smaller spacing */
font-size:17px;
line-height:1.7;
color:#444;
}

.stats{
display:flex;
justify-content:space-between;
gap:20px;
flex-wrap:wrap;
}

.stat{
flex:1;
min-width:200px;
background:#fff;
padding:35px 20px;
border-radius:10px;

transition:all .35s ease;
cursor:pointer;
}

/* numbers */

.stat h2{
font-size:48px;
margin-bottom:8px;
color:#000;
}

/* label */

.stat p{
color:#666;
transition:.3s;
}

/* hover */

.stat:hover{
background:#000;
transform:translateY(-6px);
box-shadow:0 12px 25px rgba(0,0,0,0.25);
}

.stat:hover h2{
color:#fff;
}

.stat:hover p{
color:#ddd;
}




/* =========================
   TABLET
========================= */
@media (max-width: 1024px){

  .stats-section{
    padding:35px 6%;
  }

  .about-text{
    font-size:16px;
    margin-bottom:30px;
  }

  .stats{
    justify-content:center;
  }

  .stat{
    flex:1 1 45%;   /* 2 cards per row */
    min-width:220px;
  }

  .stat h2{
    font-size:42px;
  }

}


/* =========================
   MOBILE
========================= */
@media (max-width: 600px){

  .stats-section{
    padding:30px 5%;
  }

  .about-text{
    font-size:15px;
    line-height:1.6;
    margin-bottom:25px;
  }

  .stats{
    flex-direction:column;
    gap:16px;
  }

  .stat{
    width:100%;
    padding:28px 18px;
  }

  .stat h2{
    font-size:36px;
  }

}


/* =========================
   SMALL PHONES
========================= */
@media (max-width: 420px){

  .about-text{
    font-size:14px;
  }

  .stat{
    padding:24px 16px;
  }

  .stat h2{
    font-size:32px;
  }

}


.stat{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}





















.opportunity-section{
width:100%;
padding:80px 8%;
background:#f5f5f5;
}

.opportunity-header{
text-align:center;
max-width:700px;
margin:0 auto 60px;
}

.opportunity-header h2{
font-size:38px;
margin-bottom:10px;
}

.opportunity-header p{
color:#666;
}


/* GRID */

.opportunity-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
min-height:500px;
}


/* COLUMN */

.column{
display:flex;
flex-direction:column;
gap:20px;
}


/* CARD */

.card{
border-radius:16px;
overflow:hidden;

display:flex;
align-items:center;
justify-content:center;
text-align:center;

flex-grow:1;
transition:flex-grow .25s ease, transform .25s ease;
will-change:flex-grow, transform;
}

/* IMAGE */

.image-card img{
width:100%;
height:100%;
object-fit:cover;
}


/* STAT */

.stat{
flex-direction:column;
color:#fff;
}

.stat h3{
font-size:48px;
margin-bottom:8px;
}

.grey{
background:#666;
}

.black{
background:#000;
}


/* HEIGHT BEHAVIOR */

.grow{
flex-grow:2;
}

.shrink{
flex-grow:1;
}


/* HOVER HEIGHT SWAP */

.column:hover .grow{
flex-grow:1.2;
transition: 0.4s ease;
}

.column:hover .shrink{
flex-grow:1.8;
transition: 0.4s ease;
}

/* focused card */

.column .card:hover{
flex-grow:3;
transform:scale(1.02);
}






.card{
transform:translateZ(0);
}











/* =========================
   TABLET
========================= */
@media (max-width:1024px){

  .opportunity-section{
    padding:70px 6%;
  }

  .opportunity-header h2{
    font-size:32px;
  }

  .opportunity-grid{
    grid-template-columns:repeat(2,1fr);
  }

}


/* =========================
   MOBILE
========================= */
@media (max-width:700px){

  .opportunity-section{
    padding:60px 5%;
  }

  .opportunity-header{
    margin-bottom:40px;
  }

  .opportunity-header h2{
    font-size:26px;
  }

  .opportunity-header p{
    font-size:14px;
  }

  .opportunity-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  /* disable hover height swap on mobile */
  .column:hover .grow,
  .column:hover .shrink,
  .column .card:hover{
    flex:initial;
  }

}


/* =========================
   SMALL PHONES
========================= */
@media (max-width:420px){

  .opportunity-header h2{
    font-size:22px;
  }

  .stat h3{
    font-size:34px;
  }

}
























.cut-path{
width:70%;
height: 80vh;
margin:auto;
padding:80px 0;

display:flex;
gap:40px;
justify-content:space-between;
}

/* BIG LEFT CARD */

.cut-1{
width:32%;
height:100%;
background:#eaeaea;

clip-path: polygon( 0,85% 0,100% 15%,100% 100%,0 100%);
}

/* COLUMN */

.cut-2{
width:32%;
height: 100%;
display:flex;
flex-direction:column;
gap:30px;
}

/* CARDS */

.cut-part1,
.cut-part2{
background:#eaeaea;
padding:40px;
border-radius:12px;
}

.cut-part1{
height:55%;
}

.cut-part2{
height:40%;
}

/* DIFFERENT CORNERS */

.cut-top-right{
clip-path: polygon(0 0,85% 0,100% 15%,100% 100%,0 100%);
}

.cut-bottom-right{
clip-path: polygon(0 0,100% 0,100% 85%,85% 100%,0 100%);
}

.cut-top-left{
clip-path: polygon(15% 0,100% 0,100% 100%,0 100%,0 15%);
}

.cut-bottom-left{
clip-path: polygon(0 0,100% 0,100% 100%,15% 100%,0 85%);
}


.cut-top-left-bottom-right{
clip-path: polygon(
15% 0,
100% 0,
100% 85%,
85% 100%,
0 100%,
0 15%
);
}


.cut-top-right-bottom-left{
clip-path: polygon(
0 0,
85% 0,
100% 15%,
100% 100%,
15% 100%,
0 85%
);
}

















/* BUTTON WRAPPER */

.cut-btn-wrapper{
width:100%;
display:flex;
justify-content:center;
margin-top:40px;
}

/* BUTTON */

.cut-btn{
position:relative;
padding:16px 40px;
font-size:15px;
letter-spacing:1px;

background:#000;
color:#fff;

border:none;
border-radius:40px;
cursor:pointer;

overflow:hidden;
transition:all .35s ease;
}

/* sliding highlight */

.cut-btn::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:#fff;
transition:left .35s ease;
z-index:0;
}

/* text above animation */

.cut-btn span{
position:relative;
z-index:2;
}

/* hover */

.cut-btn:hover::before{
left:0;
}

.cut-btn:hover{
color:#000;
transform:translateY(-4px);
box-shadow:0 12px 25px rgba(0,0,0,0.25);
}




















/* =========================
   TABLET
========================= */
@media (max-width:1024px){

  .cut-path{
    width:90%;
    height:auto;
    padding:60px 0;
    gap:24px;
  }

  .cut-1,
  .cut-2{
    width:48%;
  }

  .cut-part1,
  .cut-part2{
    height:auto;
    min-height:180px;
  }

}


/* =========================
   MOBILE
========================= */
@media (max-width:700px){

  .cut-path{
    flex-direction:column;
    width:92%;
    gap:20px;
  }

  .cut-1,
  .cut-2{
    width:100%;
    height:auto;
  }

  .cut-2{
    gap:20px;
  }

  .cut-part1,
  .cut-part2{
    padding:28px;
    min-height:160px;
  }

}


/* =========================
   SMALL PHONES
========================= */
@media (max-width:420px){

  .cut-path{
    padding:50px 0;
  }

  .cut-part1,
  .cut-part2{
    padding:22px;
    min-height:140px;
  }

  .cut-btn{
    padding:14px 32px;
    font-size:14px;
  }

}



























.card-style{

padding:40px;
background:#f5f5f5;

display:flex;
flex-direction:column;
justify-content:center;
gap:12px;

color:#000;

transition:all .35s ease;
cursor:pointer;

}

/* ICONS */

.card-style i{
font-size:26px;
margin-bottom:10px;
}

/* BIG NUMBER */

.card-style h2{
font-size:40px;
font-weight:700;
}

/* TITLE */

.card-style h3{
font-size:20px;
font-weight:600;
}

/* TEXT */

.card-style p{
color:#444;
line-height:1.6;
}

/* TEAM */

.team{
display:flex;
align-items:center;
margin-top:10px;
}

.team img{
width:36px;
height:36px;
border-radius:50%;
margin-right:-8px;
border:2px solid #fff;
}

.plus{
width:36px;
height:36px;
border-radius:50%;
background:#000;
color:#fff;

display:flex;
align-items:center;
justify-content:center;
margin-left:8px;
}

/* HOVER */

.card-style:hover{

background:#000;
color:#fff;

transform:translateY(-6px);
box-shadow:0 15px 35px rgba(0,0,0,0.2);

}

.card-style:hover p{
color:#ddd;
}

.card-style:hover i{
color:#fff;
}
























.choose-section{
width:100%;
padding:80px 8%;
text-align:center;
}

/* HEADER */

.choose-header{
max-width:700px;
margin:0 auto 60px auto;
}

.choose-header h2{
font-size:38px;
font-weight:600;
margin-bottom:10px;
}

.choose-header span{
color:#c0b037;
}

.choose-header p{
color:#666;
line-height:1.6;
}

/* GRID */

.choose-grid{
display:grid;
grid-template-columns:1fr 1fr 1fr;
align-items:center;
gap:40px;
}

/* CONTENT COLUMN */

.choose-content{
display:flex;
flex-direction:column;
gap:30px;
text-align:left;
}

/* ITEM CARD */

.choose-item{
display:flex;
gap:18px;
align-items:flex-start;

padding:20px;
border-radius:10px;

transition:all .4s ease;
cursor:pointer;
}

/* ICON */

.choose-icon{
font-size:28px;
color:#9c9c9c;
transition:all .4s ease;
}

/* TEXT BLOCK (initial state) */

.choose-item div{
transform:translateX(-25px);
opacity:0.6;
transition:all .4s ease;
}

/* TEXT */

.choose-item h4{
font-size:18px;
margin-bottom:6px;
color:#444;
}

.choose-item p{
color:#777;
font-size:14px;
line-height:1.5;
}

/* HOVER EFFECT */

.choose-item:hover{
background:#f3f3f3;
transform:translateY(-4px);
}

/* TEXT SLIDE IN */

.choose-item:hover div{
transform:translateX(0);
opacity:1;
}

/* ICON COLOR */

.choose-item:hover .choose-icon{
color:#000;
}

/* TEXT COLOR */

.choose-item:hover h4,
.choose-item:hover p{
color:#000;
}

/* IMAGE */

.choose-image{
display:flex;
justify-content:center;
align-items:center;
}

.image-wrapper{
width:320px;
height:320px;
border-radius:50%;
overflow:hidden;
background:#f3f3f3;

display:flex;
align-items:center;
justify-content:center;
}

.image-wrapper img{
width:100%;
height:100%;
object-fit:cover;
}



















/* =========================
   TABLET (<=1024px)
========================= */
@media (max-width:1024px){

  .choose-section{
    padding:70px 6%;
  }

  .choose-header h2{
    font-size:32px;
  }

  .choose-grid{
    grid-template-columns:1fr 1fr; /* 2 columns */
    gap:30px;
  }

  .choose-image{
    grid-column:span 2; /* image goes full width */
    order:-1;           /* move image on top */
  }

  .image-wrapper{
    width:280px;
    height:280px;
  }

}


/* =========================
   MOBILE (<=700px)
========================= */
@media (max-width:700px){

  .choose-section{
    padding:60px 5%;
  }

  .choose-header{
    margin-bottom:40px;
  }

  .choose-header h2{
    font-size:26px;
  }

  .choose-grid{
    grid-template-columns:1fr; /* single column */
    gap:24px;
  }

  .choose-content{
    gap:18px;
  }

  .choose-item{
    padding:18px;
  }

  .choose-item h4{
    font-size:16px;
  }

  .choose-item p{
    font-size:13px;
  }

  .image-wrapper{
    width:240px;
    height:240px;
  }

}


/* =========================
   SMALL PHONES (<=420px)
========================= */
@media (max-width:420px){

  .choose-header h2{
    font-size:22px;
  }

  .choose-item{
    gap:14px;
  }

  .choose-icon{
    font-size:22px;
  }

  .image-wrapper{
    width:200px;
    height:200px;
  }

}




.choose-item{
display:flex;
gap:18px;
align-items:flex-start;

padding:20px;
border-radius:10px;

transition:all .4s ease;
cursor:pointer;

/* FIXED SIZE */
height:120px;
}


.choose-item div{
transform:translateX(-25px);
opacity:0.6;
transition:all .4s ease;

display:flex;
flex-direction:column;
justify-content:center;
}




.choose-item p{
color:#777;
font-size:14px;
line-height:1.5;

display:-webkit-box;
/* -webkit-line-clamp:2; */
-webkit-box-orient:vertical;
overflow:hidden;
}


































/* ================= FONTS ================= */


body{
  font-family: "Montserrat", sans-serif;
}

/* ================= NAVBAR ================= */

.ohm-navbar{
  width:100%;
  position:fixed;
  top:0;
  left:0;
  background:#fff;
  z-index:1000;
  border-bottom:1px solid #eee;
}

/* CONTAINER */
.ohm-container{
  max-width:1200px;
  margin:auto;
  height:70px;
  padding:0 20px;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* LOGO */
.ohm-logo{
  font-family:"Black Ops One", cursive;
  font-size:22px;
  letter-spacing:2px;
  color:#000;
}

/* MENU */
.ohm-menu{
  display:flex;
  align-items:center;
  gap:24px;
  list-style:none;
}

/* LINKS */
.ohm-menu a{
  text-decoration:none;
  color:#444;
  font-size:14px;

  display:flex;
  align-items:center;
  gap:6px;

  padding:8px 14px;
  border-radius:20px;
  transition:0.3s;
}

/* HOVER */
.ohm-menu a:hover{
  background:#000;
  color:#fff;
}

/* ACTIVE */
.ohm-menu a.active{
  background:#000;
  color:#fff;
}

/* CONTACT BUTTON (DESKTOP) */
.ohm-btn{
  text-decoration:none;
  padding:8px 18px;
  background:#000;
  color:#fff;
  border-radius:30px;
  font-size:13px;
  white-space:nowrap;
  transition:0.3s;
}

.ohm-btn:hover{
  transform:translateY(-2px);
}

/* HAMBURGER */
.ohm-hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}

.ohm-hamburger span{
  width:25px;
  height:3px;
  background:#000;
}

/* MOBILE CONTACT (hidden desktop) */
.ohm-mobile-contact{
  display:none;
}

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

@media(max-width:768px){

  .ohm-hamburger{
    display:flex;
  }

  /* hide desktop button */
  .ohm-btn{
    display:none;
  }

  /* menu dropdown */
  .ohm-menu{
    position:absolute;
    top:70px;
    left:0;
    width:100%;

    flex-direction:column;
    align-items:center;
    gap:20px;

    padding:20px 0;
    background:#fff;

    transform:translateY(-120%);
    opacity:0;
    transition:0.4s;
  }

  .ohm-menu.active{
    transform:translateY(0);
    opacity:1;
  }

  /* SHOW CONTACT IN MENU */
  .ohm-mobile-contact{
    display:flex;
  }

}

/* ================= SMALL FIX ================= */

/* prevent overflow */
html,body{
  overflow-x:hidden;
}








a{
  text-decoration: none;
  color: white;
}











.footer{

background:#0a0a0a;
color:white;

padding:120px 8% 80px;

position:relative;

overflow:hidden;

/* grid background */

background-image:
linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);

background-size:60px 60px;

}

/* top section */

.footer-top{

display:flex;
justify-content:space-between;
align-items:flex-start;

margin-bottom:120px;

}

/* brand */

.brand{

font-size:22px;
font-weight:700;
letter-spacing:2px;

}

/* links */

.footer-links{

display:flex;
flex-direction:column;
gap:10px;

}

.footer-links a{

cursor:pointer;
opacity:.7;
transition:.3s;

}

.footer-links a:hover{
opacity:1;
}

/* newsletter */

.newsletter{

max-width:320px;

}

.newsletter h3{

font-size:18px;
margin-bottom:20px;

}

/* email box */

.email-box{

display:flex;

background:white;

border-radius:40px;

overflow:hidden;

}

.email-box input{

flex:1;
border:none;

padding:15px 20px;

outline:none;

font-size:14px;

}

.email-box button{

width:50px;

background:black;

color:white;

border:none;

cursor:pointer;

}

/* BIG DISTORTED TEXT */

.big-text{

position:absolute;

left:0;
bottom:120px;

width:100%;

font-size:12vw;

font-weight:900;

color:#f5f5f5;

opacity:.15;

letter-spacing:-10px;

/* perspective distortion */

transform:
scaleY(1.2)
skewX(-15deg);

pointer-events:none;

white-space:nowrap;

}

/* bottom */

.footer-bottom{

margin-top:200px;

display:flex;
justify-content:space-between;
align-items:center;

font-size:12px;

opacity:.8;

}

.social{

display:flex;
gap:20px;

}

.social a{

cursor:pointer;

}

.social a:hover{

color:white;

}

/* responsive */

@media(max-width:900px){

.footer-top{

flex-direction:column;
gap:40px;

}

.footer-bottom{

flex-direction:column;
gap:20px;

text-align:center;

}

.big-text{

font-size:18vw;

}

}