/* ===========================
   Google Font
=========================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

:root {
    --paper: #F7FAFA;
    --ink: #0A1D2B;
    --ink-soft: #60727A;

    --primary: #004E59;
    --secondary: #0A1D2B;

    --cobalt: #004E59;
    --chartreuse: #0E7B88;
    --clay: #0A1D2B;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 0 !important;
}
.white{
    background:#FFF;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

body {
    font-family: "Bricolage Grotesque", sans-serif;
    background: #f5f5f5;
    color: #0A1D2B;
    overflow-x: hidden;
    line-height: 1.6;
}
p{

    font-size:18px;

    line-height:1.8;

    color:#60727A;

}
li{
    list-style:none;
}
/* ===========================
   White Card
=========================== */

.hero-card {

    background: #ffffff;

    border-radius: 40px;

    padding: 60px;

    position: relative;

    overflow: hidden;

    min-height: 820px;

}

/* ===========================
   Navbar
=========================== */

.navbar {

    padding: 0;

    margin-bottom: 100px;

}

.logo {

    font-size: 28px;

    font-weight: 800;

    color: #0A1D2B;

}

.logo sup {

    font-size: 12px;

}

.navbar-nav {

    gap: 45px;

}

.nav-link {

    color: #555;

    font-weight: 500;

    transition: .3s;

}

.nav-link:hover {

    color: #0A1D2B;

}

.discover-btn {

    padding: 14px 24px;
    border:1px solid #004E59;
    background: #004E59;

    color: #fff;

    border-radius: 40px;

    font-weight: 600;
    transition: .3s;

}

.discover-btn:hover {
    color: #0A1D2B;
    transform: translateY(-3px);
    background: transparent;
    transition: .3s;
}

/* ===========================
   Hero Text
=========================== */

.hero-text {

    max-width: 100%;

    z-index: 5;

    position: relative;

}

.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 25px;

    color: #666;

    font-size: 18px;

    font-weight: 600;

}

.dot {

    width: 9px;

    height: 9px;

    border-radius: 50%;

    background: #004E59;

}

.hero-text h1 {
    font-size: clamp(64px, 6vw, 75px);
    font-weight:700;
    line-height: .95;
    color: #0A1D2B;
}

/* ===========================
   Car
=========================== */
.car-wrapper {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    /*height: 100vh;*/
    margin-top: 35px;
    z-index: 2;
}

.car-image {
    width: 100%;
    height: 75%;
    object-fit: cover;
    object-position: center;
    display: block;
    animation: floatCar 5s ease-in-out infinite;
}

/* ===========================
   Motion Blur
=========================== */

.speed-lines {

    position: absolute;

    left: -5%;

    bottom: 18%;

    width: 110%;

    height: 3px;

    background: linear-gradient(to right,
            transparent,
            rgba(255, 255, 255, .7),
            transparent);

    opacity: .25;

}



/* ===========================
   Animation
=========================== */

@keyframes floatCar {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0);

    }

}

/* ===========================
   Responsive
=========================== */

@media(max-width:992px) {
	#menu-main-menu{
		margin:25px 0 !important;
	}
    .hero-card {

        padding: 30px;

        min-height: auto;

    }

    .hero-text h1 {

        font-size: 48px;


    }

    .car-wrapper {

        position: relative;

        left: auto;

        bottom: auto;

        transform: none;

        width: 100%;

        margin-top: 40px;

    }

    .floating-card {

        position: relative;

        right: auto;

        bottom: auto;

        margin: 40px auto 0;

        width: 100%;

        max-width: 380px;

    }

    .navbar-nav {

        gap: 15px;

        margin: 25px 0;

    }

}

@media(max-width:576px) {

    .hero-text h1 {

        font-size: 36px;

    }

    .logo {

        font-size: 22px;

    }

    .discover-btn {

        padding: 12px 18px;

        font-size: 14px;

    }

    .hero-card {

        border-radius: 25px;

        padding: 20px;

    }

}

.car {

    animation: float 6s ease-in-out infinite;
}

@keyframes float {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0px);

    }

}

#heroTitle {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#heroTitle .line {
    display: block;
    filter: blur(12px);
    opacity: 0;
    transform: translateY(70px);
    will-change: transform, opacity, filter;
}

.about-section {
    margin: 0;
    padding: 120px 60px;
    overflow: hidden;
}

.about-section p{
    font-size:16px;
}
.about-section h3,
.about-section h4 {
    font-size: 2.75rem;
}

.about-section a {
    color: #004E59;
}
.about-section h3{
    font-weight: bolder !important ;
    font-size: 3.75rem !important ;
}
.about-title {
    margin: 0;
    line-height: .9;
}

.title-main {
    display: block;
    font-size: 88px;
    font-weight: 700;
    color: #0A1D2B;
}

.title-accent {
    display: block;
    margin-top: -8px;
    font-style: italic;
    font-size: 92px;
    font-weight: 500;
    color: #0A1D2B;
}

.about-title .line {
    display: block;
    opacity: 0;
    filter: blur(12px);
    transform: translateY(80px);
    font-size: clamp(64px,6vw,70px);
    line-height: 1.05;
    font-weight: 700;
    line-height: .95;
    color: #0A1D2B;
}

.about-content {
    opacity: 0;
    transform: translateX(80px);
}

.stat-card {
    opacity: 0;
    transform: translateY(80px) scale(.9);
    transition: 0s;
}

.stats-row {
    margin-top: 60px;
}


.stat-card {

    border-radius: 70px;

    height: 260px;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

}

.light {

    background: #EAF3F4;

}

.blue {

    background: #004E59;
    color: white;
}

.dark {

    background: #0A1D2B;

    color: white;

}


/* ==========================================
   ECOSYSTEM SECTION
========================================== */

.ecosystem-section {

    background: #05080d;
    padding: 120px 40px 80px;
    overflow: hidden;

}

.section-header {

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

    margin-bottom: 90px;

    border-top: 1px solid rgba(255, 255, 255, .08);

    padding-top: 18px;

}

.section-number {

    color: #38bdf8;
    font-size: 12px;
    font-weight: 600;

}

.section-label {

    color: #7b7b7b;
    font-size: 12px;
}

/* =============================
TITLE
============================= */

.title-wrapper {

    display: grid;
    grid-template-columns: 65% 35%;
    align-items: end;

    margin-bottom: 90px;

}

.ecosystem-title {

    margin: 0;

    line-height: .9;

}

.ecosystem-title .line {

    display: block;

    font-size: 95px;

    color: white;

    font-weight: 600;

    opacity: 0;

    transform: translateY(90px);

    filter: blur(15px);

}

.ecosystem-title .italic {


    font-style: italic;

    font-weight: 500;

}

.ecosystem-text {

    color: #7f7f7f;

    text-align: right;

    font-size: 15px;

    opacity: 0;

    transform: translateY(40px);

}

/* =============================
GRID
============================= */

.cards-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

}

/* =============================
CARD
============================= */

.eco-card {

    position: relative;

    height: 680px;

    border-radius: 2px;

    overflow: hidden;

    opacity: 0;

    transform: translateY(80px);

}

.charging {

    background:
        radial-gradient(circle at center, #17375d 0, #0b1422 38%, #05080d 100%);

}

.energy {

    background: #2247ff;

}

/* =============================
RINGS
============================= */

.rings {

    position: absolute;

    inset: 0;

}

.ring {

    position: absolute;

    border: 1px solid rgba(0, 255, 255, .15);

    border-radius: 50%;

}

.ring1 {

    width: 620px;
    height: 620px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

}

.ring2 {

    width: 380px;
    height: 380px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

}

.ring3 {

    width: 180px;
    height: 180px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

}

.center-dot {

    width: 90px;
    height: 90px;

    border-radius: 50%;

    background: #27d4ff;

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    box-shadow: 0 0 80px #27d4ff;

}

/* =============================
ENERGY CARD
============================= */

.energy-bg {

    position: absolute;

    inset: 0;

}

.circle {

    position: absolute;

    border: 1px solid rgba(255, 255, 255, .18);

    border-radius: 50%;

}

.circle1 {

    width: 640px;
    height: 640px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

}

.circle2 {

    width: 420px;
    height: 420px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

}

.circle3 {

    width: 230px;
    height: 230px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

}

/* =============================
BARS
============================= */

.bars {

    position: absolute;

    inset: 0;

    display: flex;

    justify-content: space-evenly;

    align-items: center;

}

.bars span {

    width: 82px;

    height: 420px;

    border: 1px solid rgba(255, 255, 255, .22);

    transform: skewY(-12deg);

}

/* =============================
PERCENT
============================= */

.percent {

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    color: white;

    font-size: 82px;

    font-weight: 300;

}

/* =============================
INFO
============================= */

.card-info {

    position: absolute;

    left: 40px;

    bottom: 40px;

    z-index: 20;

}

.card-index {

    color: #999;

    font-size: 11px;

}

.card-info h3 {

    color: white;

    font-size: 64px;

    font-weight: 500;

    margin: 15px 0;

}

.card-info p {

    color: #8f8f8f;

    width: 290px;

    line-height: 1.7;

}

/* =============================
HOVER
============================= */

.eco-card:hover {

    transform: translateY(-8px);

    transition: .5s;

}

.center-dot {

    animation: pulse 4s infinite ease-in-out;

}

@keyframes pulse {

    0% {

        transform: translate(-50%, -50%) scale(1);

    }

    50% {

        transform: translate(-50%, -50%) scale(1.08);

    }

    100% {

        transform: translate(-50%, -50%) scale(1);

    }

}

.project-title-wrap {
    overflow: hidden;
}

.project-title {
    margin: 0;
    font-size: 110px;
    line-height: .9;
}


/* =====================================
   FUTURE SECTION
===================================== */
.future-section {

    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 60px 0; 

}

/* =====================================
   NOISE
===================================== */

.noise {

    position: absolute;

    inset: 0;

    opacity: .04;

    pointer-events: none;

    background-image:
        radial-gradient(circle at 20% 20%, rgba(0, 0, 0, .18) 1px, transparent 1px),
        radial-gradient(circle at 70% 60%, rgba(0, 0, 0, .12) 1px, transparent 1px);

    background-size: 9px 9px;

}
/* =====================================
   LABEL
===================================== */

.future-label {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 70px;

    font-size: 11px;

    color: #4b4b4b;

}

.dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #1fc8ff;

}

/* =====================================
   TITLE
===================================== */

.future-title {
    width: 100%;
    max-width: 1350px;
    text-align: center;
}
.reveal {
    overflow: hidden;
    line-height: .88;
}
.reveal-text {
    margin: 0;
    font-weight: 700;
    font-size:clamp(64px,6vw,70px);
    line-height:1;
    color:#0A1D2B;
}
/* =====================================
   BUTTON
===================================== */
.future-button {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-top: 95px;

}
.circle {

    width: 170px;

    height: 170px;

    margin: 0 auto;

    border-radius: 50%;

    border: 1px solid rgba(0,0,0,.08);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;
	

}

.circle span {

    font-size: 13px;

    color: #9d9d9d;

    margin-bottom: 8px;

}

.arrow {

    color: #a4a4a4;

    transition: .45s;

}

.circle:hover {

    transform: scale(1.06);

    border-color: #004E59;

}

.circle:hover .arrow {

    transform: translate(4px, -4px);

    color: #004E59;

}

.circle:hover span {

    color: #0A1D2B;

}

/* =====================================
   RESPONSIVE
===================================== */

@media(max-width:991px) {
    .reveal-text {
        font-size: 58px;
    }
    .future-star {
        width: 70px;
        height: 70px;
    }
    .circle {
        width: 140px;
        height: 140px;
    }
	.stats-row .col-lg-4{
		margin-bottom: 25px;
	}
	.work__count{
		text-align:left;
	}
	.work-card {
		aspect-ratio: 0 !important; 
		width: auto !important; 
	}

}

@media(max-width:768px) {

    .future-section {

        padding: 90px 20px;

    }

    .future-label {

        margin-bottom: 45px;

    }

    .reveal {

        line-height: 1;

    }

    .reveal-text {

        font-size: 29px;

    }

    .italic {

        margin-top: 12px;

    }

    .circle {

        width: 120px;

        height: 120px;

    }

    .circle span {

        font-size: 11px;

        text-align: center;

        width: 80px;

    }

}


/* ==========================================
                FOOTER
========================================== */

.footer-section {

    position: relative;


    padding: 120px 60px 0;

    overflow: hidden;

}

.footer-grid {

    display: grid;

    grid-template-columns: 1.2fr 1fr 1fr;

    gap: 120px;

    align-items: start;

}

/* ==========================================
LOGO
========================================== */
.footer-logo {
    display: inline-block;
    text-decoration: none;
    color: #0A1D2B;
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 30px;
}
.footer-logo sup {
    font-size: 12px;
    top: -14px;
    position: relative;
}
/* ==========================================
TITLE
========================================== */
.footer-title {
    margin: 0;
    line-height: .9;
}
.footer-title .line {
    font-size: clamp(64px, 6vw, 92px);
    line-height: .95;
    color: #0A1D2B;
    display: block;
    font-size: 27px;
    font-weight: 700;
    overflow: hidden;
}
/* ==========================================
LABEL
========================================== */
.footer-label {
    display: block;
    margin-bottom: 40px;
    color: #9a9a9a;
    font-size: 13px;
}
/* ==========================================
CENTER LINKS
========================================== */

/* ==========================
   Footer Menu
========================== */

.footer-menu{

    margin:0;

    padding:0;

    list-style:none;

}

.footer-menu li{

    list-style:none;

    border-bottom:1px solid rgba(0,0,0,.08);

}

.footer-menu li:last-child{

    border-bottom:none;

}

.footer-menu li a{

    display:flex;

    align-items:center;

    padding:18px 0;

    font-size:18px;

    font-weight:500;

    color:#0A1D2B;

    text-decoration:none;

    transition:.35s;

}

.footer-menu li a:hover{

    color:#004E59;

    padding-left:12px;

}
/* ==========================================
EMAIL
========================================== */
.footer-email {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #0A1D2B;
    font-size: 34px;
    padding-bottom: 16px;
    border-bottom: 2px solid #0A1D2B;
    transition: .4s;
}
.footer-email svg {
    transition: .4s;
}
.footer-email:hover svg {
    transform: translate(6px, -6px);
}
.footer-right p {
    margin-top: 40px;
    max-width: 280px;
    color: #808080;
    line-height: 1.8;
    font-size: 15px;
}
/* ==========================================
RESPONSIVE
========================================== */
@media(max-width:1200px) {
    .footer-grid {
        gap: 70px;
    }
    .footer-title .line {
        font-size: 58px;
    }
    .footer-email {
        font-size: 28px;
    }
}

@media(max-width:992px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 70px;
    }
    .footer-logo {
        margin-bottom: 45px;
    }
    .footer-title .line {
        font-size: 48px;
    }
    .footer-email {
        font-size: 24px;
    }
}
@media(max-width:768px) {
    .footer-section {
        padding: 90px 25px;
    }
    .footer-title .line {
        font-size: 38px;
    }
    .footer-email {
        font-size: 20px;
    }
    .footer-link {
        gap: 18px;
    }
}
.cursor-dot,
.cursor-ring {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 999999;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}
.cursor-dot {
    width: 8px;
    height: 8px;
    background: #004E59;
}
.cursor-ring {
    width: 36px;
    height: 36px;
    border: 2px solid #004E59;
    transition: .25s;
}
.cursor-ring.is-active {
    width: 60px;
    height: 60px;
}
@media (hover:none),
(pointer:coarse) {
    .cursor-dot,
    .cursor-ring {
        display: none;
    }
}
/* =========================================================================
   SERVICES
   ========================================================================= */
.services {
    padding: 120px 60px;
}
.services__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
    gap: 24px;
    flex-wrap: wrap;
}
.services__head h2 {
    font-size:clamp(64px,6vw,70px);

    font-weight:700;

    line-height:.95;


    color:#0A1D2B;

}
.service {
    border-top: 1px solid rgba(20, 18, 15, .15);
}
.service:last-child {
    border-bottom: 1px solid rgba(20, 18, 15, .15);
}
.service__row {
    display: grid;
    grid-template-columns: 70px 1fr 60px;
    align-items: center;
    gap: 20px;
    width: 100%;
    padding: 42px 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}
.service__num {
    font-size: 13px;
    color: var(--ink-soft);
    width: 34px;
    flex-shrink: 0;
}
.service__title {
    font-weight: 800;
    justify-self: start;
    font-size: clamp(22px, 4vw, 40px);
    line-height: 1.05;
    color: #0A1D2B;
    display: flex;
}
.service__plus {
    justify-self: start;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.service__plus::before,
.service__plus::after {
    content: "";
    position: absolute;
    background: var(--ink);
    transition: transform .35s ease;
}
.service__plus::before {
    width: 12px;
    height: 1.5px;
}
.service__plus::after {
    width: 1.5px;
    height: 12px;
}
.service[data-open="true"] .service__plus::after {
    transform: rotate(90deg) scaleY(0);
}
.service[data-open="true"] .service__title {
    color: #004E59
}
.service__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s ease;
}
.service[data-open="true"] .service__panel {
    max-height: 500px;
}
.service__panel-inner {
    overflow: hidden;
}
.service__list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 14px;
    padding: 4px 0 32px 62px;
}
.service__list li {
    font-size: 13px;
    padding: 8px 14px;
    border: 1px solid rgba(20, 18, 15, .2);
    border-radius: 100px;
    color: var(--ink-soft);
}
@media (max-width:640px) {
    .service__list {
        padding-left: 34px;
    }
}
/* =========================================================================
   WORK — horizontal scroll gallery
   ========================================================================= */
.work {
    background: #0A1D2B;
    color: #fff;
    overflow: hidden;
	padding:45px 60px !important;
    /*padding: 120px 60px !important;*/
}

.work-pin {
	 height: auto !important;
    display: flex;
    flex-direction: column;
}

.work__head {
    padding: 0 var(--edge);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
    gap: 24px;
    flex-wrap: wrap;
}

.work__head h2 {
       font-size:clamp(64px,6vw,70px);

    font-weight:700;

    line-height:.95;


    color:#fff;
 }

.work__head .eyebrow {
    color: #B9B4A9;
}

.work__head .eyebrow::before {
    background: var(--chartreuse);
}

.work__count {
    font-size: 16px;
    color: #B9B4A9;
    max-width: 30ch;
    text-align: right;
}

.work-track {
    display: flex;
    gap: 26px;
    padding: 0 var(--edge);
    flex: none;
    align-items: center;
    will-change: transform;
}

.work-card {
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 22px;
	width:20%;
    border-radius: 18px;
}

.work-card[data-cat="Branding"] {
    background: linear-gradient(160deg, #004E59, #0A1D2B);
}

.work-card[data-cat="Photography"] {
    background: linear-gradient(160deg, #0E7B88, #004E59);
}

.work-card[data-cat="Video Production"] {
    background: linear-gradient(160deg, #0A1D2B, #004E59);
}

.work-card__tag {
    align-self: flex-start;
    font-size: 11px;
    background: #0A1D2B;
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 6px 12px;
    border-radius: 100px;
    margin-bottom: auto;
}

.work-card__title {
    font-weight: 700;
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    line-height: 1.1;
    color: #fff;
}

.work-card__num {
    position: absolute;
    top: 20px;
    right: 22px;
    font-size: 12px;
    color:#0A1D2B;
    z-index:2;
}
.work-card{
    position:relative;
    overflow:hidden;
}

.work-card__image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:0;

    /* transition:transform .8s cubic-bezier(.2,.7,.2,1); */

}

.work-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(10,29,43,.95) 0%,
        rgba(10,29,43,.55) 40%,
        rgba(10,29,43,.15) 70%,
        transparent
    );

    z-index:1;

}

.work-card__tag,
.work-card__title{

    position:relative;

    z-index:2;

}

.work-card:hover .work-card__image{

    transform:scale(1.08);

}

/* ==========================================
LOGOS
========================================== */

.logos-section {

    padding: 75px 0 0;

    overflow: hidden;
}

.logos-title {
    text-align: center;
    font-size: 22px;
    color: #8a8a8a;
    margin-bottom: 60px;
}

.logos {

    position: relative;

    overflow: hidden;

}

.logos::before,
.logos::after {

    content: "";

    position: absolute;

    top: 0;

    width: 180px;

    height: 100%;

    z-index: 5;

}

.logos::before {

    left: 0;

    background: linear-gradient(to right, #f5f5f5, transparent);

}

.logos::after {

    right: 0;

    background: linear-gradient(to left, #f5f5f5, transparent);

}

.logos-track {

    display: flex;

    align-items: center;

    gap: 90px;

    width: max-content;

    animation: logosMove 28s linear infinite;

}

.logos-track img {

    height: 150px;

    opacity: .45;

    transition: .4s;

    filter: grayscale(100%);

}

.logos-track img:hover {

    opacity: 1;

    filter: none;

    transform: scale(1.1);

}

.logos:hover .logos-track {

    animation-play-state: paused;

}

@keyframes logosMove {

    from {

        transform: translateX(0);

    }

    to {

        transform: translateX(-50%);

    }

}


.contact {
    position: relative;
    padding: 70px 60px 0;
}

.contact__cta {
    display: block;
}

.contact__cta h2 {
    color: #0A1D2B;
    font-weight: 800;
    font-size: clamp(64px,6vw,70px);
    line-height: .92;
}

.contact__cta h2 span {
    display: inline-block;

    transition:
        transform .5s cubic-bezier(.2, .9, .2, 1),
        color .3s ease;
}

.contact__cta:hover h2 span {
    color: #004E59;
}

.contact__row p {
    max-width: 38ch;
    line-height: normal;
    color: #555;
	    margin-top: 18px;
}

.contact__row {
    display: flex;
    justify-content: space-between;
    align-items: center; /* السنترة */
    gap: 30px;
    flex-wrap: wrap;
	
}

.contact__arrow {
        position: absolute;
    top: 50%;
    right: 60px;

    width: 96px;
    height: 96px;

    border-radius: 50%;
    border: 1px solid #0A1D2B;

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

    margin-left: auto; /* الدائرة على اليمين */
	
}

.contact__arrow svg {
    width: 30px;
    color: #004E59;
    height: 30px;
}

.footer-social{

    display:flex;

    gap:22px;

    margin:35px 0 55px;

}

.footer-social a{

    display:flex;
    align-items:center;

    color:#0A1D2B;

    transition:.35s;

    padding-right:22px;
    border-right:1px solid #D9D9D9;

}

.footer-social a:last-child{

    padding-right:0;
    border-right:none;

}

.footer-social a:hover{

    color:#004E59;

}

.footer-office{

    margin-bottom:38px;

}

.footer-office strong{

    display:block;

    margin-bottom:12px;

    font-size:17px;

    color:#0A1D2B;

}

.footer-office a{

    display:block;

    color:#60727A;

    margin-bottom:8px;

    transition:.35s;

}

.footer-office a:hover{

    color:#004E59;

}


/* ==========================================
   WordPress Header Menu
========================================== */

#menu-main-menu{

    display:flex;


    gap:45px;

    margin:0;

    padding:0;

    list-style:none;

}

#menu-main-menu li{

    list-style:none;

}

#menu-main-menu li a{

    color:#0A1D2B;

    text-decoration:none;

    font-size:15px;

    font-weight:500;

    transition:.35s;

}

#menu-main-menu li a:hover{

    color:#004E59;

}


/* ==========================================
   WordPress Footer Menu
========================================== */

#menu-footer-menu{

    margin:0;

    padding:0;

    list-style:none;

    counter-reset:footer;

}

#menu-footer-menu li{

    list-style:none;

    border-bottom:1px solid rgba(0,0,0,.08);

    counter-increment:footer;

}

#menu-footer-menu li:last-child{

    border-bottom:none;

}

#menu-footer-menu li a{

    display:flex;

    align-items:center;

    gap:22px;

    padding:18px 0;

    color:#0A1D2B;

    text-decoration:none;

    font-size:18px;

    font-weight:500;

    transition:.35s;

}

#menu-footer-menu li a::before{

    content:counter(footer, decimal-leading-zero);

    width:32px;

    color:#9d9d9d;

    font-size:12px;

}

#menu-footer-menu li a:hover{

    color:#004E59;

    padding-left:12px;

}

.work{

padding:120px 0;

}

.project-card{

position:relative;

display:block;

overflow:hidden;

border-radius:18px;

background:#0A1D2B;

aspect-ratio:4/5;

}

.project-card img{

width:100%;

height:100%;

object-fit:cover;

transition:.8s cubic-bezier(.22,.61,.36,1);

display:block;

}

.project-overlay{

position:absolute;

left:0;

right:0;

bottom:0;

padding:35px;

background:linear-gradient(
180deg,
transparent 20%,
rgba(10,29,43,.88)
);

transition:.45s ease;

}

.project-category{

display:block;

font-size:13px;

text-transform:uppercase;

letter-spacing:2px;

color:#ffffff;

opacity:.8;

margin-bottom:12px;

}

.project-overlay h2{

font-size:34px;

font-weight:700;

line-height:1.1;

color:#ffffff;

margin:0;

}

.project-card:hover img{

transform:scale(1.08);

}

.project-card:hover .project-overlay{

opacity:0;

transform:translateY(40px);

}

@media(max-width:991px){

	.project-overlay h2{
		font-size:26px;
	}
	.service__row {
		display: grid;
		grid-template-columns: 41px 1fr 60px;
		align-items: center;
		 gap: 0; 
		padding: 25px 0;
		background: none;
		border: 0;
		text-align: left;
		cursor: pointer;
	}
	.logos-section {
		padding: 0;
	}
	.contact {
		padding: 60px 60px 0;
	}
	
	.services__head h2 ,.about-title .line,.work__head h2{
		font-size: clamp(50px, 6vw, 70px);
	}
	
	.services ,.about-section,.work,.footer-section{
		padding: 70px 60px !important;
	}
	.about-section{
		padding: 60px 60px !important;
	}
	.about-title{
		margin-top:40px;
	}
}

@media(max-width:767px){

.project-card{

aspect-ratio:1/1.2;

}

.project-overlay{

padding:25px;

}

}


/* ================================
   HERO
================================ */

.swork .dig{
        padding: 120px 60px !important;
}

.swork .dig h1{
    font-size: 36px;
    margin:30px 0;
    font-weight:bolder;
}
.swork p{
    font-size: 18px ;
    color: #0A1D2B;
}

.swork .dig h2{
    max-width:900px;
    margin:0 auto;
    font-size:34px;
    line-height:1.45;
}

.swork .text-center{
    margin-top:80px;
}


.single-work  .row {
    margin: auto;
    align-items: center;
}

.single-work.three-images{
    margin: 120px 0 ;
}

.space {
    padding: 0 60px;
}
.single-work .col-md-4:First-child {
    padding:auto auto auto 0;
}
.single-work .col-md-4:last-child {
    padding:auto 0 auto auto;
}
/* ================================
   COVER
================================ */

.bgimg{
    width:100%;
    height:90vh;
    background-size:cover;
    background-position:center;
}

/* ================================
   SECTION TITLE + TEXT
================================ */

.textAfterbigimg{
    padding:130px 0;
}

.textAfterbigimg h3{
    font-size:48px;
    font-weight:700;
}

.textAfterbigimg p{
    font-size:15px;
    line-height:2;
    color:#0A1D2B;
}

/* ================================
   FULL IMAGE
================================ */

.imgFull{
    padding-bottom:120px;
}

.imgFull img{
    width:100%;
}

/* ================================
   IMAGE LEFT + TEXT RIGHT
================================ */

.twoRowImg{
    padding-bottom:120px;
}

.twoRowImg .row{
    align-items:center;
    margin-bottom:120px;
}

.twoRowImg .row:last-child{
    margin-bottom:0;
}

.twoRowImg img{
    width:100%;
}

.twoRowImg p{
    font-size:18px;
    line-height:2;
    max-width:520px;
}

/* ================================
   FULL IMAGE 2
================================ */

.imgFull2{
    padding-bottom:120px;
}

.imgFull2 img{
    width:100%;
}

/* ================================
   IMAGE LEFT + TEXT RIGHT
================================ */

.textAfterbigimg2{
    padding-bottom:120px;
}

.textAfterbigimg2 .row{
    align-items:center;
}

.textAfterbigimg2 img{
    width:100%;
}

.textAfterbigimg2 p{
    font-size:18px;
    line-height:2;
}

/* ================================
   FULL IMAGE 3
================================ */

.imgFull3{
    padding-bottom:160px;
}

.imgFull3 img{
    width:100%;
}

/* ================================
   NEXT PROJECT
================================ */

.vist{
    padding:120px 0;
}

.vist a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:18px 40px;
    border:1px solid #0A1D2B;
    border-radius:100px;
    transition:.35s;
}

.vist a:hover{
    background:#0A1D2B;
    color:#fff;
}
.center-item .row > div{
        position: relative;
    margin: auto;
}

.video-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.video-section .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.full-width-video {
    width: 100% !important;
    height: 100vh !important;
    max-width: none !important;
    display: block !important;
    object-fit: cover !important;
}


/* =========================================
   BBDO STYLE SCROLL ANIMATION
========================================= */

.bbdo-image {
    width: 100%;
    overflow: hidden;
    will-change: transform, opacity;
    
    opacity: 0.5;
}

/* Images */
.bbdo-image img,
.bbdo-image .bgimg {
    width: 100%;
    display: block;
    will-change: transform;
}


.future-star {
    margin-bottom: 50px;
    padding: 0;
}

.footer-bottom {
    margin-bottom: 15px;
}