@font-face {
font-family: "Womby";
src: url(https://giraffe.com.pk/wp-content/themes/bomby/fonts/Womby-Regular.woff2);
font-style: normal;
}
html.lenis {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
overscroll-behavior: contain;
}
.lenis.lenis-stopped {
overflow: hidden;
}
.lenis.lenis-scrolling iframe {
pointer-events: none;
}
* {
box-sizing: border-box;
font-family: "Womby", sans-serif;
margin: 0;
}
html,
body {
overflow-x: clip;
margin: 0;
}
video {
max-width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.video-wrapper {
position: relative;
aspect-ratio: 16/9;
}
.video-wrapper img {
pointer-events: none;
position: relative;
z-index: 1;
}
.video-wrapper video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
padding: 17% 18.5% 2.5% 17%;
}
header {
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 100%;
background-color: #000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
z-index: 9999999999;
}
header nav {
display: flex;
align-items: center;
gap: 1rem;
}
header nav a {
display: flex;
align-items: center;
color: #fff;
}
header nav a:not(:last-child)::after {
content: "|";
flex-shrink: 0;
display: block;
width: 4px;
margin-left: 1rem;
background-color: #fff;
}
.scroll-indiccator {
position: absolute;
height: 80px;
width: 2px;
border-radius: 100px;
background-color: #fff;
left: 50%;
transform: translateX(-50%);
animation: scroll infinite 2s ease-in-out;
}
@keyframes scroll {
0% {
transform-origin: bottom;
transform: scaleY(100%);
}
50% {
transform-origin: bottom;
transform: scaleY(0%);
}
51% {
transform-origin: top;
transform: scaleY(0%);
}
100% {
transform-origin: top;
transform: scaleY(100%);
}
}
.rikshaw {
width: 300px;
position: relative;
top: 0;
aspect-ratio: 5/4;
z-index: 40;
}
.rikshaw .rikshaw-body {
position: relative;
z-index: 1;
}
.rikshaw .tyres {
display: block;
}
.rikshaw .tyres img {
display: inline-block;
width: 22%;
}
.rikshaw .tyres .front,
.rikshaw .tyres .back {
display: block;
position: absolute;
bottom: 0;
}
.rikshaw .tyres .front {
left: 2%;
}
.rikshaw .tyres .back {
right: 6.25%;
}
.rails {
width: 100%;
height: 100px;
background: url(https://giraffe.com.pk/wp-content/themes/bomby/img/railing.svg) center bottom/contain repeat-x;
position: absolute;
top: -100px;
left: 0;
z-index: 50;
}
.building {
display: block;
position: relative;
-o-object-fit: cover;
object-fit: cover;
width: 104%;
left: -2%;
}
.clouds {
position: absolute;
left: 50%;
top: -10rem;
width: 80%;
padding-inline: 8rem;
transform: translateX(-50%);
}
.sun {
position: absolute;
width: 35%;
left: 50%;
height: 300px;
top: -296px;
transform: translateX(-50%);
z-index: -1;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center bottom;
object-position: center bottom;
}
.lamp {
position: absolute;
width: auto;
top: -13rem;
z-index: -1;
}
.lamp--left {
left: 5rem;
}
.lamp--right {
right: 5rem;
}
.lamp .lamp-frame {
position: absolute;
width: 100%;
bottom: 0;
z-index: 10;
height: 16rem;
}
.lamp .lamp-light {
height: 14rem;
top: -6px;
left: 50%;
transform: translateX(-50%);
position: relative;
}
.plant {
height: 10rem;
}
.gate {
position: absolute;
bottom: 72px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
width: 27%;
aspect-ratio: 912/1228;
}
.door {
position: absolute;
z-index: 50;
width: 40%;
height: 81%;
left: 10%;
bottom: -2px;
display: flex;
}
.door__left {
transform-origin: left;
}
.door__left__frame {
background: url(https://giraffe.com.pk/wp-content/themes/bomby/img/door.png);
}
.door__left__block {
right: 0;
}
.door__right {
justify-content: flex-end;
left: unset;
right: 10%;
transform-origin: right;
}
.door__right__frame {
background: url(https://giraffe.com.pk/wp-content/themes/bomby/img/door-right.png);
}
.door__right__block {
left: 0;
}
.door__frame {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.door__block {
flex-shrink: 0;
width: 0;
background-color: #662f00;
}
.showcase {
display: flex;
align-items: center;
justify-content: center;
padding-top: 50px;
}
#intro {
height: 5500px;
}
#gate {
height: 5000px;
}
#projects {
display: none;
}
[id*=-bg] {
height: calc(100vh - 50px) !important;
margin-top: 50px !important;
border-radius: 200px;
}
@media (max-width: 768px) {
header nav {
display: none;
}
.rikshaw {
width: 200px;
top: 1px;
}
.rails {
height: 50px;
top: -48px;
background-position: center bottom;
background-size: cover;
}
.clouds {
left: 50%;
transform: translateX(-50%);
width: 120%;
padding-inline: 0;
}
.sun {
height: 120px;
width: 60%;
top: -119px;
}
.lamp {
position: absolute;
width: auto;
top: -8.5rem;
}
.lamp--left {
left: -5rem;
}
.lamp--left .lamp-light {
left: -1px;
}
.lamp--right {
right: -5rem;
}
.lamp--right .lamp-light {
left: 1px;
}
.lamp .lamp-frame {
position: absolute;
width: 100%;
bottom: 0;
z-index: 10;
height: 10rem;
}
.lamp .lamp-light {
height: 8.8rem;
top: -4px;
transform: none;
}
.plant {
height: 6rem;
}
[id*=-bg] {
height: calc(100vh - 50px) !important;
margin-top: 50px !important;
border-radius: 80px;
}
.gate {
width: 85%;
}
}