/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 24, 2025 */
@font-face {
    font-family: 'quineregular';
    src: url('../fonts/quine-webfont.woff2') format('woff2'),
         url('../fonts/quine-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root{
  /* scroll-behavior:auto; */
  --clr1: 70,196,216; /* #46C4D8 */
  --clr2: 20,49,217; /* #1431D9 */
  --bs-body-color: 49,65,99; /* #314163 */
  --color_black: 0,0,0;
  --bs-dark-rgb: 0,0,0;
  --color_white: 255,255,255;
  --baseFont: "Open Sans", sans-serif;
  --imgBase: invert(23%) sepia(13%) saturate(2042%) hue-rotate(183deg) brightness(93%) contrast(88%);
  --imgWhite: invert(100%) sepia(100%) saturate(0%) hue-rotate(13deg) brightness(103%) contrast(102%);
  --imgBlack: invert(0%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(93%) contrast(103%);
  --imgClr1: invert(82%) sepia(12%) saturate(2746%) hue-rotate(151deg) brightness(88%) contrast(92%);
  --imgClr2: invert(23%) sepia(93%) saturate(5418%) hue-rotate(235deg) brightness(81%) contrast(112%);
  --padding: clamp(2.625rem, 2.1rem + 2.625vw, 5.25rem);
  --mb:1.875rem;
  --bs-breadcrumb-divider: '•';
  --bs-border-radius: clamp(1.5rem, 1.35rem + 0.75vw, 2.25rem);
}

::selection {color: rgb(var(--color_white)); background: rgb(var(--bs-body-color));}
body {font-family: var(--baseFont); font-weight: 400; font-variant-ligatures: no-common-ligatures; color: rgba(var(--bs-body-color)); background-color: #000; overflow: hidden;}
a:hover, a:focus {outline: none; -webkit-box-shadow: none; box-shadow: none; text-decoration: none; color: rgb(var(--primary1));}
button:focus {outline: none;}
a {color: rgb(var(--clr2));}
.fw-normal {font-weight: 400;}
.title-font {font-family: 'quineregular';}

.transition {-webkit-transition: all .3s linear; transition: all .3s linear;}

.clr-base {color: rgba(var(--bs-body-color));}
.clr1 {color: rgb(var(--clr1));} .bg-clr1 {background-color: rgb(var(--clr1));}
.clr2 {color: rgb(var(--clr2));} .bg-clr2 {background-color: rgb(var(--clr2));}

/* Fullscreen preloader */
/* #preloader {position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column;}
#logo-gif {width: 600px; position: absolute; inset: 0; margin: auto; transition: opacity 0.8s ease;}
#logo-gif.fade-out {opacity: 0;}
#logo-svg {width: 170px; opacity: 0; transform: scale(1); transition: transform 2s ease, opacity 0.5s ease;}
#logo-svg.scale-up {transform: scale(30); opacity: 0;}
#wrapper {display: none;} */

.paytone-one-regular {font-family: "Paytone One", sans-serif; font-weight: 400; font-style: normal;}
#preloader {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 9999; gap: 30px;}
#logo-img {width: 180px; opacity: 0;}
#logo-text {font-size: 4rem; font-weight: 700; display: flex; flex-direction: column; text-transform: uppercase; line-height: 4rem; opacity: 0;}
#logo-text .line {display: flex; gap: 5px;}
#logo-text .line span {display: inline-block; opacity: 0; transform: translateX(40px);
  background: linear-gradient(125deg, #46C4D8 7.49%, #1144C8 68.37%, #0903C3 108.96%);
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Content (hidden initially) */
#wrapper {opacity: 0; transition: opacity 0.8s ease;}
body.loaded {overflow-y: scroll;}
body.loaded #wrapper {opacity: 1;}

/* button custom */
.btn-custom {position: relative; border: none; background: linear-gradient(90deg, rgba(var(--clr1)) -26.73%, #2A41BC 62.87%); color: rgb(var(--color_white)); overflow: hidden; transition: all .2s linear; padding: 0.563rem 1rem; border-radius: 1.875rem; font-size: 1.25rem; display: inline-flex; align-items: center;}
.btn-custom .icon {position: relative; width: 39px; height: 39px; border: 1px solid rgb(var(--clr1)); border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.btn-custom .icon:before {content: ''; position: absolute; inset: 0; background: url('../images/arrow.png') center center no-repeat; width: 19px; height: 15px; margin: auto; filter: var(--imgClr1); transform: rotate(-45deg); transition: 0.4s;}
.btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active {background: linear-gradient(-45deg, rgba(var(--clr1)) -26.73%, #2A41BC 62.87%); color: rgb(var(--color_white));}
.btn-custom:hover .icon:before, .btn-custom:focus .icon:before, .btn-custom:active .icon:before, .btn-custom.active .icon:before {transform: rotate(0deg);}

/* owl-carousel */
.owl-flex .owl-stage {display: flex;}
.owl-carousel.style01 .owl-dots {text-align: center; margin-top: 1.5rem;}
.owl-carousel.style01 .owl-dots .owl-dot span{width: 12px; height: 12px; border-radius: 50%; background: rgb(var(--primary2)); display: block; margin: 0 5px;}
.owl-carousel.style01 .owl-dots .owl-dot.active span{background: rgb(var(--primary1)) !important;}
.owl-carousel.style01 .owl-nav {display: flex; justify-content: center; gap: 1rem;}
.owl-carousel.style01 .owl-nav button{width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: transparent; border: 1px solid rgb(var(--clr1)); transition: 0.4s;}
.owl-carousel.style01 .owl-nav button:before {content: ''; background: url('../images/arrow.png') center center no-repeat; width: 19px; height: 15px; filter: var(--imgClr1);}
.owl-carousel.style01 .owl-nav button.owl-prev:before {transform: rotate(180deg);}
.owl-carousel.style01 .owl-nav button:hover {background-color: rgb(var(--clr1)) !important;}
.owl-carousel.style01 .owl-nav button:hover:before {filter: var(--imgWhite);}
.owl-carousel.style01 .owl-nav [class^='owl-'].disabled {cursor: default; opacity: 0.5;}
.owl-carousel.style01 .owl-nav.disabled {display: none;}
.owl-carousel .item:not(:first-child) {display: none;}
.owl-carousel.o-visible .owl-stage-outer {overflow: visible;}

.social-media a img{top: 0; position: relative; transition: top .2s linear;}
.social-media a:hover img{top: -2px;}
.social-media .textwidget {display: flex; gap: 1rem;}

#wrapper {max-width: 1920px; margin: 0 auto; position: relative; overflow: hidden;}

/* header */
header {width: 100%; left: 0; right: 0; top: 0; margin: 0 auto; transition: all 0.3s; z-index: 99 !important;}
header .navbar .navbar-toggler:focus{outline: none; box-shadow: none;}
header .navbar {transition: all 0.3s linear; z-index: 10; padding: 1rem 0;}
header .navbar .navbar-brand img{transition: all .2s linear;}
header .navbar .navbar-nav .nav-item {margin: 0 1rem;}
header .navbar .navbar-nav .nav-link {color: rgb(var(--color_white)); padding: 0.75rem; font-size: 1.25rem; text-transform: uppercase;}
header .navbar .navbar-nav .nav-item:hover > .nav-link {color: rgb(var(--clr1));}

header .social-media a img{filter: var(--imgWhite);}
header .social-media a:hover img{filter: var(--imgClr1);}

header.fixed {box-shadow: 0px 4px 50px rgba(44, 48, 50, 0.1); background-color: rgb(var(--color_black),0.85);}
header.fixed .navbar .navbar-brand img {width: 140px; height: auto;}

/* banner */
.banner {position: relative; overflow: hidden; /*aspect-ratio: 1920/908;*/ width: 100%; min-height: 100vh;}
.banner:before {content: ''; position: absolute; inset: 0; background: rgba(var(--color_black),0.65); z-index: 1;}
.banner video.hero-video {aspect-ratio: 1920/908; position: absolute; inset: 0; object-fit: cover;}
.banner .container {position: absolute; inset: 0; margin: auto; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.banner .hero-text .word {display: inline-block; opacity: 0; transform: translateY(50px); font-size: clamp(2.5rem, 1.5rem + 5vw, 7.5rem); color: rgb(var(--color_white)); text-transform: uppercase; line-height: normal; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.50)); position: relative;}
.banner .hero-text .bigger .word {font-size: clamp(3.125rem, 1.9375rem + 5.9375vw, 9.0625rem);}
.banner .hero-text .video-wrapper {position: absolute; left: -50px; top: 15px; aspect-ratio: 600/400; overflow: hidden; border-radius: 20px; max-width: 149px; background-color: rgba(var(--color_black));}
.banner .hero-text .video-wrapper video {opacity: 0.65;}
.banner .hero-text div:nth-child(2) .word {background: linear-gradient(to bottom, #46C4D8 29.19%, #1144C8 84.93%, #0903C3 122.09%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; left: 118px;}
.banner .hero-text div:nth-child(3) .word {left: -80px;}
.banner .hero-text div:nth-child(3) .video-wrapper {position: relative; left: -60px; top: -5px; max-width: 132px;}
.banner .animated-btn {display: inline-block;}
.banner .organic-model {position: absolute; width: 337px; height: 385px; right: -90px; top: 0;}

/* Typography */
.padding {padding: var(--padding) 0;}
h2.title {font-size: clamp(2.1875rem, 1.8125rem + 1.875vw, 4.0625rem);}

/* pic */
.pic {overflow: hidden;}
.pic img {transition: 0.4s;}
.pic:hover img {transform: scale(1.08);}

.circle {width: 772px; height: 727px; position: absolute; background-image: linear-gradient(90deg, rgba(var(--clr1)) 30.05%, rgba(var(--clr2)) 100%); opacity: 0.55; filter: blur(250px);}
.capsule {width: 470px; height: 1920px; position: absolute; border-radius: 500px; background: linear-gradient(90deg, #263CBD 0%, rgba(var(--clr2)) 100%); filter: blur(250px);}

.about {--radius: clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem);}
.about video {position: absolute; aspect-ratio: 1920/780; object-fit: cover;}
.about p {font-size: 1.125rem;}
.about img {border-radius: var(--radius) var(--radius) 0 0;}
.about .container-wrapper {display: flex; align-items: center; min-height: calc(100vh - 109px);}

.pick-your-bag {padding1: calc(var(--padding) * 1.75) 0 calc(var(--padding) * 1); height: calc(100vh - 109px);}
.pick-your-bag .logo-vector {position: absolute; right: 150px; top: calc(var(--padding) * -1); width: 213px; height: 254px; background: url('../images/logo-vector.svg') left top / cover no-repeat; transform: rotate(-22deg);}
.pick-your-bag .circle {right: -486px; bottom: 70px;}
.pick-your-bag .frog-pic {margin-bottom: calc(var(--padding) * -1); position: absolute; left: 0; bottom: 0;}
.pick-your-bag .frog-pic:before, .pick-your-bag .frog-pic:after {content: ''; background: url('../images/frog.png') center center / cover no-repeat; position: absolute; left: 0; top: 0; width: 488px; height: 517px; transition: 0.4s; opacity: 0.2; z-index: -1; max-width: 100%; max-height: 100%;}
.pick-your-bag .frog-pic:before {transform: translateX(-20px);}
.pick-your-bag .frog-pic:after {transform: translateX(20px);}
.pick-your-bag .frog-pic:hover:before {transform: translateX(-50px);}
.pick-your-bag .frog-pic:hover:after {transform: translateX(50px);}
.pick-your-bag .gradient-border-box {--radius: clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem); position: relative; border-radius: var(--radius) var(--radius) 0 0; z-index: 0; --mb: 2rem; margin-bottom: var(--mb); aspect-ratio: 350/260;}
.pick-your-bag .gradient-border-box::before {content: ""; position: absolute; inset: 0; border-radius: var(--radius) var(--radius) 0 0; padding: 1px;
  background: linear-gradient(to bottom, rgba(var(--clr1)), rgba(var(--clr2))); /* Gradient border */
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1;
}
.pick-your-bag .gradient-border-box .icon {width: 100px; height: 70px; display: flex; align-items: center; justify-content: center;}

.whats-in-the-bag {background: #151515; --radius: clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem);}
.whats-in-the-bag ul li {font-size: 1.75rem; --bs-border-color: rgba(var(--color_black)); transition: 0.4s; cursor: pointer;}
.whats-in-the-bag ul li .text span:after {content: ''; width: 71px; height: 16px; background: url('../images/arrow-long.svg') left center no-repeat; filter: var(--imgClr1); position: relative; top: 2px; left: 0px; opacity: 0; visibility: hidden; transition: 0.4s;}
.whats-in-the-bag ul li .image {position: absolute; right: -50px; top: 0; opacity: 0; visibility: hidden; transition: 0.4s; border-radius: 0 0 var(--radius) var(--radius); overflow: hidden;}
.whats-in-the-bag ul li .image img {width: 100%; height: 100%; object-fit: cover;}
.whats-in-the-bag ul li:hover .image {opacity: 1; visibility: visible; right: 0;}
.whats-in-the-bag ul li:hover .text span:after {opacity: 1; visibility: visible; left: 15px;}
.whats-in-the-bag ul:hover li:not(:hover) {color: rgba(var(--color_white),0.5);}
.whats-in-the-bag .capsule {left: 250px; bottom: 0; transform: rotate(-70deg); opacity: 0.85;}
.load-more img {filter: var(--imgClr1); transform: rotate(-45deg);}
.load-more:hover {color: rgb(var(--color_white)); cursor: pointer;}
.load-more:hover img {filter: var(--imgWhite);}

.latest-works {background: #0F0E0E; --radius: clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem);}
.latest-works .logo-vector {position: absolute; right: 76px; top: -204px; width: 443px; height: 529px; background: url('../images/logo-vector.svg') left top no-repeat; transform: rotate(30deg);}
.latest-works .slider .item {border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; position: relative;}
.latest-works .slider .item a {aspect-ratio: 16/9; object-fit: cover;}
.latest-works .slider .item a:before {content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.65) 78.34%); z-index: 1;}
.latest-works .slider .item a video {position: absolute; inset: 0; object-fit: cover;}
.latest-works .slider .item a iframe {width: 100%; height: 100%; object-fit: cover; scale: 1.06;}
.latest-works .slider .item .text {position: absolute; left: 2rem; bottom: 1.5rem; font-size: 1.75rem; color: rgb(var(--color_white)); z-index: 2; display: none;}
.latest-works .owl-carousel.style01 .owl-nav {margin-top: 2.5rem;}

.behind-the-bag {background: #151515;}
.behind-the-bag img {transition: 0.4s;}
.behind-the-bag img:hover {filter: drop-shadow(2px 5px 0px black); transform: translate(-10px, -5px);}
.behind-the-bag .circle {left: 0; top: 0;}
.behind-the-bag .capsule {right: 80px; bottom: 300px; transform: rotate(30deg); opacity: 0.5;}
.behind-the-bag p {font-size: 1.125rem;}
.behind-the-bag .lets-work-block {--radius: clamp(1.5625rem, 1.25rem + 1.5625vw, 3.125rem); --pad: clamp(1.25rem, 1rem + 1.25vw, 2.5rem); border-radius: var(--radius) var(--radius) 0 0; padding: var(--pad) var(--pad) var(--pad) calc(var(--pad) * 2);}
.behind-the-bag .lets-work-block:before {content: ''; background: linear-gradient(120deg, rgba(var(--clr1)) -21.17%, #161284 78.51%); position: absolute; inset: 0; opacity: 0.5;}
.behind-the-bag .lets-work-block h2 {font-size: clamp(1.25rem, 1rem + 1.25vw, 2.5rem);}
.behind-the-bag .lets-work-block p {font-size: 1.125rem; color: rgb(var(--color_white));}

/* footer */
footer {background-color: rgba(var(--color_black));}
footer .middle .icon {width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem;}
footer .middle .icon img {filter: var(--imgClr1);}
footer .middle p {color: rgb(var(--color_white),0.75);}
footer .middle a {color: rgb(var(--color_white),0.75);}
footer .middle a:hover {color: rgb(var(--clr1));}

footer .bottom {background: #141313; color: rgba(var(--clr1)); font-size: 0.875rem;}
footer .bottom a {color: rgba(var(--clr1)); text-decoration: none;}
footer .bottom a:hover{color: rgb(var(--color_white));}
footer .social-media a img{filter: var(--imgClr1);}
footer .social-media a:hover img{filter: var(--imgWhite);}

.totop {bottom: 60px; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; position: fixed; right: -60px; z-index: 99; background: linear-gradient(45deg, rgba(var(--clr1),0.5), rgba(var(--clr2),0.5)); text-align: center; opacity: 0; border-radius: 50%; box-shadow: 0px 10px 29.7px 3.3px rgba(0, 0, 0, 0.2); outline: 1px solid rgba(var(--clr1)); outline-offset: -10px;}
.totop img{filter : var(--imgWhite); transform: rotate(-90deg);}

.modal-header {--bs-modal-header-padding: 2rem;}
.modal-body {--bs-modal-padding: 2rem;}
.form-control {--bs-border-radius: 0.5rem; height: 45px;}
textarea.form-control {height: auto;}