.story{
overflow:hidden;
}
.story{
overflow:hidden;
}
@font-face {
font-family: 'Berlina';
src: url('Berlina.woff2') format('woff2'),
url('Berlina.woff') format('woff');
font-weight: normal;
font-style: normal;
}
.parkinsans {
font-family: "Parkinsans", sans-serif;
font-optical-sizing: auto;
font-style: normal;
}
/*==================================================================
IBD BRANDS
Version : 2.0
Author : Amar Dhembare
==================================================================*/
/*==================================================================
GOOGLE FONTS
==================================================================*/
:root{
/*==============================================================
COLORS
==============================================================*/
--primary:#0cb8e9;
--secondary:#00b8d9;
--yellow:#f5b31f;
--green:#18b65b;
--pink:#d84f97;
--white:#ffffff;
--black:#171717;
--text:#202020;
--text-light:#6b6b6b;
--border:#ececec;
--background:#fafafa;
--surface:#ffffff;
--surface-light:#f5f5f5;
/*==============================================================
TYPOGRAPHY
==============================================================*/
--heading: "Montserrat", sans-serif;
--body: "Inter", sans-serif;
--display-xl:clamp(5rem,9vw,9rem);
--display-lg:clamp(4rem,7vw,6rem);
--display-md:clamp(3rem,5vw,4.5rem);
--display-sm:2.4rem;
--body-lg:1.35rem;
--body-md:1rem;
/*==============================================================
SPACING
==============================================================*/
--space-1:8px;
--space-2:16px;
--space-3:24px;
--space-4:32px;
--space-5:48px;
--space-6:64px;
--space-7:96px;
--space-8:90px;
/*==============================================================
BORDER RADIUS
==============================================================*/
--radius-sm:10px;
--radius-md:18px;
--radius-lg:30px;
--radius-xl:50px;
--radius-round:100px;
/*==============================================================
SHADOW
==============================================================*/
--shadow-sm:
0 8px 25px rgba(0,0,0,.05);
--shadow-md:
0 20px 45px rgba(0,0,0,.08);
--shadow-lg:
0 35px 70px rgba(0,0,0,.12);
/*==============================================================
ANIMATION
==============================================================*/
--ease:cubic-bezier(.19,1,.22,1);
--fast:.35s;
--normal:.7s;
--slow:1.2s;
}
/*==================================================================
RESET
==================================================================*/
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
font-family:var(--body);
letter-spacing: 0px !important;
background:var(--background);
color:var(--text);
-webkit-font-smoothing:antialiased;
font-synthesis:none;
text-rendering:optimizeLegibility;
font-size: 18px !important;
}
img{
max-width:100%;
display:block;
}
video{
display:block;
}
ul{
list-style:none;
margin:0;
padding:0;
}
a{
color:inherit;
text-decoration:none;
}
button{
border:none;
background:none;
cursor:pointer;
}
input,
textarea{
outline:none;
box-shadow:none !important;
}
::selection{
background:var(--primary);
color:#fff;
}
/*==================================================================
TYPOGRAPHY
==================================================================*/
body{
font-size:16px;
line-height:1.5;
font-weight: 400;
}
h1,h2,h3,h4,h5{
font-family:var(--heading);
text-transform: uppercase;
font-weight: 700;
color:var(--black);
line-height:.95;
}
h1{
font-size:var(--display-xl);
}
h2{
font-size:var(--display-lg);
}
h3{
font-size:var(--display-sm);
}
p{
color:var(--text-light);
}
/*==================================================================
UTILITY
==================================================================*/
.section{
position:relative;
padding:var(--space-8) 0;
}
.section-tag{
display:inline-block;
color:var(--primary);
font-weight:700;
letter-spacing:0px;
text-transform:uppercase;
margin-bottom:20px;
}
.section-title{
margin-bottom:25px;
}
.section-description{
max-width:760px;
margin:auto;
}
.bg-white{
background:#fff;
}
.bg-light{
background:#f7f7f7;
}
.text-center{
text-align:center;
}
.bluetext
{
color:#0cb8e9;
}
/*==================================================================
BUTTONS
==================================================================*/
.btn-primary-custom{
display:inline-flex;
align-items:center;
justify-content:center;
padding:18px 38px;
border-radius:100px;
background:var(--black);
color:#fff;
font-weight:600;
transition:all .35s var(--ease);
border:2px solid var(--black);
}
.btn-primary-custom:hover{
transform:translateY(-5px);
background:var(--primary);
border-color:var(--primary);
box-shadow:var(--shadow-md);
}
.btn-outline-custom{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 38px;
border-radius:100px;
border:2px solid var(--black);
color:var(--black);
transition:all .35s var(--ease);
}
.btn-outline-custom:hover{
background:var(--black);
color:#fff;
}
input[type="button"],
input[type="submit"],
input[type="reset"] {
background-color: #000 !important;
background: #000 !important;
}
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
background-color: #0cb8e9 !important;
background: #0cb8e9 !important;
}
/*==================================================================
HEADER
==================================================================*/
#header{
position:fixed;
left:0;
top:0;
width:100%;
z-index:9999;
padding:28px 0;
transition:all .4s ease;
}
#header.scrolled{
padding:15px 0;
}
#header.scrolled .navbar{
background:rgba(255,255,255,.78);
backdrop-filter:blur(50px);
-webkit-backdrop-filter:blur(50px);
border:1px solid rgba(255,255,255,.8);
box-shadow:0 20px 50px rgba(0,0,0,.08);
}
.navbar{
border-radius:80px;
padding:15px 28px;
transition:all .35s;
}
.navbar-brand img{
height:52px;
width:auto;
}
.navbar-nav{
gap:18px;
}
.nav-link{
position:relative;
font-weight:600;
color:var(--black);
padding:10px 14px !important;
}
.nav-link{
transition:.35s;
}
.nav-link:hover{
color:var(--primary);
transform:translateY(-2px);
}
.nav-indicator{
position:absolute;
height:42px;
border-radius:100px;
background:#eef5ff;
z-index:-1;
transition:.35s;
}
.nav-link::after{
content:"";
position:absolute;
left:50%;
bottom:5px;
width:0;
height:2px;
background:var(--primary);
transition:.35s;
transform:translateX(-50%);
}
.nav-link:hover::after{
width:70%;
}
.btn-nav{
margin-left:35px;
padding:15px 28px;
border-radius:100px;
background:var(--primary);
color:#fff;
font-weight:600;
transition:.35s;
}
.btn-nav:hover{
transform:translateY(-4px);
}
/*==================================================================
MOBILE TOGGLE
==================================================================*/
.menu-toggle{
width:48px;
height:48px;
border:none;
background:none;
display:flex;
flex-direction:column;
justify-content:center;
gap:6px;
}
.menu-toggle span{
height:2px;
background:#222;
border-radius:50px;
transition:.35s;
}
/*==================================================================
INTRO
==================================================================*/
#intro{
position:fixed;
inset:0;
background:#fff;
z-index:99999;
display:flex;
justify-content:center;
align-items:center;
}
.intro-inner{
text-align:center;
}
.intro-logo{
width:170px;
margin:auto;
opacity:0;
}
.intro-lines{
display:flex;
justify-content:center;
gap:14px;
margin:45px 0;
}
.intro-lines span{
width:0;
height:4px;
border-radius:100px;
}
.yellow{background:var(--yellow);}
.blue{background:var(--primary);}
.green{background:var(--green);}
.pink{background:var(--pink);}
.intro-text{
display:flex;
gap:25px;
justify-content:center;
font-size:58px;
font-family:var(--heading);
font-weight:800;
}
.intro-text span{
opacity:0;
}
/*==================================================================
STORY
==================================================================*/
.story{
height:220vh;
position:relative;
background:#ffffff;
}
.story-pin{
position:relative;
top:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.story-content{
text-align:center;
}
.story-title{
font-size:clamp(5rem,9vw,9rem);
line-height:.95;
letter-spacing:0px;
font-weight:800;
}
.story-word{
color:var(--primary);
letter-spacing: 2px;
display:block;
font-weight: 700;
}
.story-subtitle{
max-width:900px;
line-height: 1.5;
margin:30px auto 0;
font-size:18px !important;
}
.story-word{
display:inline-block;
color:var(--primary);
min-width:550px;
}
.story-subtitle{
max-width:920px;
margin:30px auto 0;
font-size:20px;
color:#666;
opacity:.8;
}
/*==================================================================
CLIENTS
==================================================================*/
.clients{
background:#ffffff;
overflow:hidden;
}
.logo-slider{
position:relative;
overflow:hidden;
margin:35px 0;
}
.logo-track{
display:flex;
align-items:center;
gap:90px;
width:max-content;
}
.logo-track img{
width:auto;
height:48px;
opacity:.55;
filter:grayscale(100%);
transition:.35s;
}
.logo-track img:hover{
opacity:1;
filter:none;
transform:scale(1.08);
}
.clients::before,
.clients::after{
content:"";
position:absolute;
left:0;
width:100%;
height:120px;
pointer-events:none;
z-index:2;
}
.clients::before{
top:0;
background:linear-gradient(#fafafa,transparent);
}
.clients::after{
bottom:0;
background:linear-gradient(transparent,#fafafa);
}
/*==================================================================
SERVICES
==================================================================*/
.services{
background-color:transparent;
overflow:hidden;
}
.services-content{
padding-right:60px;
}
.services-content h2{
margin-bottom:30px;
}
.services-content p{
margin-bottom:40px;
}
.services-list{
display:flex;
flex-direction:column;
gap:18px;
}
.services-list li{
display:flex;
align-items:center;
gap:18px;
padding:22px 25px;
border-radius:20px;
cursor:pointer;
transition:.35s;
background:#fff;
box-shadow:var(--shadow-sm);
}
.services-list li span{
width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#f5f5f5;
font-size:13px;
font-weight:700;
}
.services-list li.active{
background:var(--primary);
color:#fff;
}
.services-list li.active span{
background:#fff;
color:var(--primary);
}
/*==================================================================
SELECTED WORK
==================================================================*/
.selected-work{
position:relative;
background:#f7f7f7;
}
.work-progress-pin{
position:absolute;
inset:0;
z-index:50;
pointer-events:none;
}
.work-progress-pin .work-progress{
pointer-events:auto;
}
/*==============================================================
PROGRESS
==============================================================*/
.work-progress{
position:absolute;
left:60px;
top:50%;
transform:translateY(-50%);
z-index:500;
display:flex;
flex-direction:column;
gap:30px;
}
.work-progress span{
position:relative;
font-size:18px;
font-weight:700;
color:#bbb;
transition:.35s;
}
.work-progress span::before{
content:"";
position:absolute;
left:-28px;
top:50%;
width:12px;
height:2px;
background:#ddd;
transform:translateY(-50%);
transition:.35s;
}
.work-progress span.active{
color:var(--primary);
}
.work-progress span.active::before{
width:24px;
background:var(--primary);
}
/*==============================================================
STACK
==============================================================*/
.work-stack{
position:relative;
width:100%;
height:100%;
}
/*==============================================================
CARD
==============================================================*/
.work-card{
position:absolute;
inset:0;
display:flex;
align-items:center;
background:#fff;
border-radius:0px;
/*box-shadow: 0 30px 90px rgba(0,0,0,.08);*/
transform-origin:center center;
overflow:hidden;
}
.work-card:not(:first-child){
}
/*==============================================================
IMAGE
==============================================================*/
.work-image{
position:relative;
overflow:hidden;
border-radius:30px;
}
.work-image img{
width:100%;
height:720px;
object-fit:cover;
transition:1s;
}
.work-card:hover .work-image img{
transform:scale(1.04);
}
/*==============================================================
CONTENT
==============================================================*/
.work-content{
padding-left:60px;
}
.work-number{
font-size:15px;
letter-spacing:0px;
font-weight:700;
color:var(--primary);
margin-bottom:18px;
}
.work-category{
display:inline-block;
margin-bottom:15px;
color:#777;
font-weight:600;
}
.work-content h2{
font-size:72px;
letter-spacing:0px;
margin-bottom:25px;
}
.work-content p{
font-size:20px;
margin-bottom:35px;
max-width:480px;
}
/*==============================================================
SERVICES
==============================================================*/
.work-services{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-bottom:45px;
}
.work-services li{
padding:12px 20px;
background:#f5f5f5;
border-radius:100px;
font-size:14px;
font-weight:600;
}
/*==============================================================
BACKGROUND COLORS
==============================================================*/
.work-card:nth-child(1){
background:#ffffff;
}
.work-card:nth-child(2){
background:#faf8f4;
}
.work-card:nth-child(3){
background:#f6f8fb;
}
.work-card:nth-child(4){
background:#f8f8f8;
}
/*==================================================================
3D CUBE
==================================================================*/
.cube-wrapper{
position:relative;
width:500px;
height:500px;
margin:auto;
display:flex;
align-items:center;
justify-content:center;
perspective:1200px;
}
.cube-wrapper::before{
content:"";
position:absolute;
width:500px;
height:500px;
border-radius:50%;
background:
radial-gradient(
rgba(22,119,255,.18),
transparent 70%
);
filter:blur(80px);
z-index:-1;
}
/* SAFETY NET for a real but narrow/hard-to-fully-pin-down glitch: on a
real iPhone 13 and reproduced here, a thin-to-moderate gap can
briefly appear cutting into a cube face at certain points mid-
rotation -- confirmed NOT caused by the face images/CSS (a cube
built from plain solid-color faces, no photos at all, renders
perfectly sealed at every single rotation angle tested), which
points to the browser's own 3D compositor doing something slightly
different when it has to texture-map a real photo onto a steeply
rotated plane versus a flat colour fill -- a known rough edge in
how mobile/lower-power GPUs (and this is worse on a "slow mobile
browser", exactly as reported) rasterize CSS 3D transforms, rather
than anything wrong with this site's markup or CSS. Rather than
leave that as a jarring white flash if it ever recurs, this sits
directly behind the cube as a soft, on-brand shadow: normally fully
hidden behind the opaque rotating faces, so it changes nothing
about how the cube looks -- but if a gap does ever open up, it
reveals a soft shadow tone instead of a stark white gap, so it
reads as an intentional depth cue rather than a glitch. */
.cube-wrapper::after{
content:"";
position:absolute;
width:230px;
height:230px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border-radius:26px;
background:radial-gradient(circle, rgba(15,20,30,.24), rgba(15,20,30,.08) 65%, transparent 100%);
filter:blur(5px);
z-index:-1;
pointer-events:none;
}
.cube{
position:relative;
width:260px;
height:260px;
transform-style:preserve-3d;
}
.face{
position:absolute;
width:260px;
height:260px;
background:rgba(255,255,255,.75);
backdrop-filter:blur(15px);
border:0px solid rgba(255,255,255,.8);
border-radius:28px;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
font-weight:700;
color:var(--black);
box-shadow:var(--shadow-md);
/* FIX ("cube glitches" / white wedges cutting into rotated faces):
the face images (face-1.jpg ... face-6.jpg) were relying on
Bootstrap's .img-fluid (max-width:100%; height:auto), which only
scales an image DOWN to fit -- it does not crop it to fill the
260x260 face, so any source photo that isn't a tight, edge-to-
edge square left its own empty space showing, which -- once the
face is rotated in 3D -- reads as a white gap cutting into the
cube. The actual per-face image is now painted as a CSS
background-image (see .face.front/.back/.right/.left/.top/
.bottom in custom-updates.css) rather than an ![]()
tag -- a
background-image is guaranteed to crop/fill via
background-size:cover no matter what the source photo's aspect
ratio or composition is, and unlike an ![]()
, it paints as part
of this element's own box in the SAME 3D transform, so it can
never end up misaligned with this rotated face. overflow:hidden
stays here as a second line of defence. */
overflow:hidden;
}
/* The ![]()
tags in the HTML stay only for alt-text/accessibility --
custom-updates.css paints the actual visible photo via
background-image (see the .face.front/.back/... rules there), so
the ![]()
itself is not shown. */
.face img{
display:none;
}
.front{
transform:translateZ(130px);
}
.back{
transform:rotateY(180deg) translateZ(130px);
}
.right{
transform:rotateY(90deg) translateZ(130px);
}
.left{
transform:rotateY(-90deg) translateZ(130px);
}
.top{
transform:rotateX(90deg) translateZ(130px);
}
.bottom{
transform:rotateX(-90deg) translateZ(130px);
}
/*==================================================================
SECTION HEADING
==================================================================*/
/*==================================================================
SELECTED WORK - PREMIUM
==================================================================*/
/*--------------------------------------------------------------
CARD DEPTH
--------------------------------------------------------------*/
.work-stage{
position:relative;
width:100%;
height:100%;
}
.work-card{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:90vh;
padding:0 60px;
background:#fff;
}
.work-card:nth-child(1){
z-index:1;
}
.work-card:nth-child(2){
z-index:2;
}
.work-card:nth-child(3){
z-index:3;
}
.work-card:nth-child(4){
z-index:4;
}
/*--------------------------------------------------------------
IMAGE
--------------------------------------------------------------*/
.work-image{
position:relative;
overflow:hidden;
border-radius:32px;
box-shadow:
0 35px 80px rgba(0,0,0,.12);
}
.work-image img{
transition:
transform 1.2s ease,
filter .8s ease;
}
.work-card:hover .work-image img{
transform:scale(1.05);
}
/*--------------------------------------------------------------
IMAGE OVERLAY
--------------------------------------------------------------*/
.work-image::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
rgba(0,0,0,0),
rgba(0,0,0,.15)
);
pointer-events:none;
}
/*--------------------------------------------------------------
CONTENT
--------------------------------------------------------------*/
.work-content{
position:relative;
z-index:2;
}
.work-content h2{
margin-bottom:30px;
line-height:.95;
}
.work-content p{
margin-bottom:40px;
}
/*--------------------------------------------------------------
SERVICES
--------------------------------------------------------------*/
.work-services{
margin-bottom:50px;
}
.work-services li{
transition:.35s;
}
.work-services li:hover{
background:var(--primary);
color:#fff;
}
/*--------------------------------------------------------------
BUTTON
--------------------------------------------------------------*/
.work-content .btn-primary-custom{
margin-top:10px;
}
/*--------------------------------------------------------------
PROGRESS BAR
--------------------------------------------------------------*/
.work-progress{
user-select:none;
}
.work-progress span{
cursor:pointer;
}
/*--------------------------------------------------------------
CARD SHADOW
--------------------------------------------------------------*/
.work-card{
box-shadow:
0 40px 100px rgba(0,0,0,.08);
}
/*--------------------------------------------------------------
CARD BORDER
--------------------------------------------------------------*/
.work-card{
border:1px solid rgba(255,255,255,.7);
}
/*--------------------------------------------------------------
BACKGROUND GRADIENT
--------------------------------------------------------------*/
.selected-work::before{
content:"";
position:absolute;
inset:0;
/* background:
radial-gradient(
circle at top right,
circle at top right,
rgba(22,119,255,.05),
transparent 45%
);*/
pointer-events:none;
}
/*--------------------------------------------------------------
PARALLAX LAYER
--------------------------------------------------------------*/
.work-image img{
will-change:transform;
}
/*--------------------------------------------------------------
TEXT ANIMATION PREP
--------------------------------------------------------------*/
.work-number,
.work-category,
.work-content h2,
.work-content p,
.work-services,
.work-content .btn-primary-custom{
opacity:0;
transform:translateY(60px);
}
/*--------------------------------------------------------------
MASK
--------------------------------------------------------------*/
.work-image{
clip-path:
inset(0 round 30px);
}
/*--------------------------------------------------------------
FLOATING BACKGROUND
--------------------------------------------------------------*/
.selected-work::after{
content:"";
position:absolute;
/*width:700px;
height:700px;
right:-250px;
top:-150px;
border-radius:50%;
background:
radial-gradient(
rgba(22,119,255,.08),
transparent
);
filter:blur(90px);*/
}
/*--------------------------------------------------------------
SCROLL INDICATOR
--------------------------------------------------------------*/
.work-scroll{
position:absolute;
right:60px;
bottom:60px;
z-index:100;
display:flex;
align-items:center;
gap:15px;
}
.work-scroll span{
width:80px;
height:2px;
background:#ddd;
position:relative;
}
.work-scroll span::after{
content:"";
position:absolute;
left:0;
top:0;
width:30%;
height:100%;
background:var(--primary);
}
.work-scroll p{
margin:0;
font-size:13px;
letter-spacing:0px;
text-transform:uppercase;
}
/*==========================================================
IMPACT
==========================================================*/
.impact{
background:#fff;
padding:180px 0;
}
.impact-card{
background:#fff;
border-radius:30px;
padding:60px 30px;
text-align:center;
box-shadow:var(--shadow-sm);
transition:.4s;
height:100%;
}
.impact-card:hover{
transform:translateY(-12px);
box-shadow:var(--shadow-lg);
}
.impact-card h2{
font-size:90px;
color:var(--primary);
margin-bottom:10px;
}
.impact-card p{
margin:0;
font-size:20px;
font-weight:600;
}
/*==================================================
CONTACT
==================================================*/
.contact{
background:#f8f8f8;
padding:180px 0;
background-image:url('../../images/contact-bg.jpg');
background-size: 100% auto;
background-attachment: fixed;
}
.contact-content{
padding-right:70px;
}
.contact-info{
margin-top:60px;
}
.contact-info div{
margin-bottom:30px;
}
.contact-info small{
color:#999;
display:block;
margin-bottom:8px;
}
.contact-info h5{
font-size:24px;
}
.contact-form{
background:#fff;
color: #fff !important;
opacity: 1;
padding:60px;
border-radius:40px;
box-shadow:var(--shadow-md);
}
.form-group{
position:relative;
margin-bottom:40px;
}
.form-group input,
.form-group textarea{
width:100%;
border:none;
border-bottom:2px solid #ddd;
padding:18px 0;
background:none;
font-size:18px;
}
.form-group label{
position:absolute;
left:0;
top:18px;
transition:.3s;
color: #fff !important;
pointer-events:none;
}
.form-group input:focus,
.form-group textarea:focus{
border-color:var(--primary);
border-color: #fdb813;
}
.form-group input:focus+label,
.form-group textarea:focus+label,
.form-group input:not(:placeholder-shown)+label,
.form-group textarea:not(:placeholder-shown)+label{
top:-15px;
font-size:13px;
color:var(--primary);
color: #fff !important;
}
.mybtn
{
background-color: #000;
}
/*==========================================================
FOOTER
==========================================================*/
.footer{
position:relative;
overflow:hidden;
background:#171717;
color:#fff;
padding:180px 0 70px;
}
.footer-bg-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:22vw;
font-weight:900;
color:rgba(255,255,255,.03);
letter-spacing:0px;
pointer-events:none;
white-space:nowrap;
}
.footer-title{
color:#fff;
font-size:clamp(4rem,8vw,8rem);
line-height:.95;
letter-spacing:0px;
margin:30px 0;
}
.footer p{
max-width:700px;
margin:0 auto 50px;
color:rgba(255,255,255,.65);
font-size:22px;
}
.footer-btn{
margin-bottom:120px;
}
.footer-divider{
height:1px;
background:rgba(255,255,255,.1);
margin-bottom:50px;
}
.footer-logo{
height:48px;
/*filter:brightness(0) invert(1);*/
}
.footer-menu{
display:flex;
justify-content:center;
gap:40px;
}
.footer-menu a{
color:#fff;
position:relative;
}
.footer-menu a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:#fff;
transition:.35s;
}
.footer-menu a:hover::after{
width:100%;
}
.nav-link.active{
color:var(--primary);
}
.nav-link.active::after{
width:70%;
}
.work-image{
aspect-ratio:16/10;
}
/*====================================================
HEADER PROGRESS
====================================================*/
.header-progress{
position:absolute;
left:0;
bottom:-1px;
width:100%;
height:2px;
background:rgba(0,0,0,.05);
}
.header-progress-bar{
width:0;
height:100%;
background:var(--primary);
transform-origin:left center;
}
.navbar-brand img{
transition:.35s;
}
#header.scrolled .navbar-brand img{
height:40px;
}
.btn-nav{
padding:16px 30px;
border-radius:100px;
background:linear-gradient(
135deg,
var(--primary),
#3d9cff
);
color:#fff;
font-weight:600;
box-shadow:
0 20px 40px rgba(22,119,255,.25);
}
.story{
overflow:hidden;
}
.story::before{
content:"";
position:absolute;
width:700px;
height:700px;
border-radius:50%;
background:
radial-gradient(
rgba(22,119,255,.08),
transparent
);
top:-150px;
right:-250px;
filter:blur(100px);
}
.cube{
transform-style:preserve-3d;
/* STABILITY FIX: real iPhone 13 report of Safari repeatedly
crashing while scrolling through this section. `will-change`
here (and force3D in the matching GSAP calls in ibd.js) was
telling the browser to keep a dedicated GPU compositing layer
resident for this element -- with 6 separately 3D-transformed
faces inside it (preserve-3d) -- for as long as the page stayed
open, not just while the cube was actually mid-rotation. ibd.js
now toggles both `will-change` and GSAP's force3D on only while
the cube's scroll-driven animation is actually active (from the
moment its ScrollTrigger enters to the moment it's left, either
direction), and releases them the rest of the time. See
services() in ibd.js. */
}
.cube-face{
box-shadow:
0 0 80px rgba(22,119,255,.12);
}
.services{
overflow:hidden;
position:relative;
}
.services::before{
content:"";
position:absolute;
width:700px;
height:700px;
right:-200px;
top:0;
border-radius:50%;
background:
radial-gradient(
rgba(22,119,255,.08),
transparent
);
filter:blur(120px);
}
.hero-bg {
background: url("../images/hero-bg.jpg") center center / cover no-repeat;
}
/*==========================================================
HERO
==========================================================*/
.hero{
position:relative;
height:100vh;
overflow:hidden;
background:#fff;
}
.hero-inner{
position:relative;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
}
.hero-headline{
width:100%;
}
.hero-row{
display:flex;
width:100%;
margin:0;
}
.hero-row-1{
justify-content:flex-start;
}
.hero-row-2{
justify-content:flex-end;
margin-top:15px;
}
.hero-line-wrap{
width:100%;
display:flex;
transition:all .4s ease;
}
.hero-row-1 .hero-line-wrap{
justify-content:flex-start;
}
.hero-row-2 .hero-line-wrap{
justify-content:flex-end;
}
.hero-row{
display:flex;
justify-content:center;
overflow:visible;
}
.hero-title{
margin:0;
will-change:transform;
}
.hero-title-1{
transform:none;
}
.hero-title-2{
transform:none;
}
.hero-actions{
display:flex;
justify-content:center;
gap:20px;
margin-top:60px;
}
.btn-hero
{
border-radius: 0px;
min-width: 150px;
}
.video-bg
{
position: absolute;
left: 0;
top:0;
width: 100%;
height: 100vh;
z-index: -1;
}
/* Cursor: default native pointer (custom pink-dot cursor removed per request) */