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

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:#ffffff;
color:#111111;
overflow-x:hidden;
}

.container{
width:90%;
max-width:1300px;
margin:auto;
}

/* HEADER */

.header{
position:fixed;
top:0;
left:0;
width:100%;
background:#ffffff;
z-index:1000;
border-bottom:1px solid #edf2f7;
}

.navbar{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:18px 0;
gap:18px;
}

.logo img{
height:60px;
}

.nav-menu{
display:flex;
gap:40px;
flex-wrap:wrap;
justify-content:center;
}

.nav-menu a{
text-decoration:none;
color:#111111;
font-size:16px;
font-weight:500;
transition:0.3s;
}

.nav-menu a:hover{
color:#10b7a6;
}

/* HERO */

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

.hero{
    padding:160px 0 100px;
    overflow:hidden;
    position:relative;
    background:#f8f8f8;
}

.hero-wrapper{

    display:grid;

    grid-template-columns:
    minmax(0,1fr)
    380px;

    align-items:center;

    justify-content:space-between;

    gap:80px;

    min-height:80vh;
}

/* LEFT */

.hero-left{
    max-width:720px;
}

/* TAG */

.hero-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    background:#dff8f5;

    color:#10b7a6;

    border-radius:60px;

    font-size:17px;

    font-weight:600;

    margin-bottom:30px;
}

/* HEADING */

.hero-heading{
    margin-bottom:28px;
}

/* LINE 1 */

.hero-heading .line-one{

    display:block;

    font-size:96px;

    line-height:0.95;

    font-weight:800;

    color:#111111;

    letter-spacing:-3px;
}

/* LINE 2 */

.hero-heading .line-two{

    display:block;

    font-size:96px;

    line-height:0.95;

    font-weight:800;

    color:#10b7a6;

    letter-spacing:-3px;

    margin-top:8px;
}

/* SUB HEAD */

.hero-subhead{

    font-size:24px;

    line-height:1.8;

    color:#666666;

    max-width:620px;

    margin-bottom:38px;
}

/* BUTTON */

.primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:62px;

    padding:0 44px;

    background:#10b7a6;

    color:#ffffff;

    border-radius:14px;

    text-decoration:none;

    font-weight:600;

    font-size:18px;

    transition:0.35s ease;
}

.primary-btn:hover{
    background:#000000;
}

/* =========================
   RIGHT TOUR PANEL
========================= */

.hero-right{
    display:flex;
    justify-content:center;
}

/* MOBILE FRAME */

.hero-tour-panel{

    position:relative;

    width:340px;

    height:640px;

    border-radius:42px;

    overflow:hidden;

    background:#ffffff;

    border:8px solid #111111;

    box-shadow:
    0 18px 50px rgba(0,0,0,0.10);

    transform:none !important;

    transition:none !important;

    will-change:auto;

    isolation:isolate;

    contain:content;
}

/* REMOVE GPU STRESS */

.hero-tour-panel:hover{

    transform:none !important;
}

/* IFRAME */

.hero-tour-panel iframe{

    width:100%;

    height:100%;

    border:none;

    display:block;

    background:#ffffff;

    transform:translateZ(0);

    backface-visibility:hidden;
}



/* BADGE */

.tour-badge{

    position:absolute;

    top:18px;

    left:18px;

    background:#10b7a6;

    color:#ffffff;

    padding:12px 20px;

    border-radius:40px;

    font-size:14px;

    font-weight:600;

    z-index:10;
}

/* =========================
   LARGE TABLET
========================= */

@media(max-width:1200px){

.hero-wrapper{

    grid-template-columns:
    1fr 320px;

    gap:60px;
}

.hero-heading .line-one,
.hero-heading .line-two{

    font-size:78px;
}

.hero-tour-panel{

    width:300px;

    height:580px;
}

}

/* =========================
   TABLET
========================= */

@media(max-width:991px){

.hero{

    padding:150px 0 90px;
}

.hero-wrapper{

    grid-template-columns:1fr;

    gap:70px;

    text-align:center;
}

.hero-left{

    max-width:100%;

    margin:auto;
}

.hero-subhead{

    max-width:700px;

    margin:
    0 auto 35px;
}

.hero-right{

    justify-content:center;
}

.hero-tour-panel{

    width:300px;

    height:580px;
}

.hero-heading .line-one,
.hero-heading .line-two{

    font-size:72px;
}

}

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

@media(max-width:768px){

.hero{

    padding:140px 0 70px;
}

.hero-wrapper{

    gap:45px;
}

.hero-tag{

    font-size:15px;

    padding:12px 24px;

    margin-bottom:24px;
}

/* FORCE 2 LINES */

.hero-heading{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;
}

.hero-heading .line-one{

    font-size:64px;

    line-height:0.95;

    letter-spacing:-2px;

    white-space:normal;
}

.hero-heading .line-two{

    font-size:64px;

    line-height:0.95;

    letter-spacing:-2px;

    white-space:normal;
}

/* SUB HEAD */

.hero-subhead{

    font-size:19px;

    line-height:1.8;

    max-width:100%;

    padding:0 10px;

    margin-bottom:30px;
}

/* BUTTON */

.primary-btn{

    width:100%;

    max-width:320px;

    margin:auto;
}

/* MOBILE TOUR */

.hero-tour-panel{

    width:250px;

    height:500px;

    border-radius:34px;

    border:8px solid #111111;

    margin:auto;
}

/* BADGE */

.tour-badge{

    font-size:12px;

    padding:10px 16px;
}

}

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

@media(max-width:480px){

.hero{

    padding:130px 0 60px;
}

.hero-heading .line-one{

    font-size:48px;
}

.hero-heading .line-two{

    font-size:48px;
}

/* EXACT MOBILE ALIGN */

.hero-subhead{

    font-size:16px;

    line-height:1.9;

    max-width:320px;

    margin:
    0 auto 28px;
}

.primary-btn{

    height:58px;

    font-size:17px;
}

/* PANEL CENTER */

.hero-right{

    width:100%;

    display:flex;

    justify-content:center;
}

.hero-tour-panel{

    width:220px;

    height:430px;

    border-radius:30px;
}

}
/* SECTION */

.services{

background:
linear-gradient(
180deg,
#ffffff 0%,
#f5fdfc 100%
);

position:relative;
overflow:hidden;
}

/* SERVICES */

.services{

    position:relative;

    padding:110px 0;

    background:
    linear-gradient(
    180deg,
    #ffffff 0%,
    #f7fcfc 100%
    );

    overflow:hidden;
}

/* BACKGROUND GLOW */

.services::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    background:#10b7a6;

    opacity:0.06;

    filter:blur(140px);

    top:-140px;
    left:-140px;

    border-radius:50%;

    z-index:0;
}

.services::after{

    content:"";

    position:absolute;

    width:380px;
    height:380px;

    background:#10b7a6;

    opacity:0.05;

    filter:blur(130px);

    bottom:-160px;
    right:-120px;

    border-radius:50%;

    z-index:0;
}

/* SECTION TITLE */

.services .section-title{

    position:relative;

    z-index:2;

    text-align:center;

    margin-bottom:70px;
}

.services .section-title h2{

    font-size:58px;

    font-weight:700;

    color:#111111;

    line-height:1.2;
}

/* GRID */

.services-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:45px;

    align-items:flex-start;
}

/* CARD */

.service-card{

    text-align:center;

    transition:0.4s ease;
}

/* ICON BOX */

.service-icon{

    position:relative;

    width:190px;
    height:190px;

    margin:auto auto 30px;

    border-radius:50%;

    background:
    linear-gradient(
    145deg,
    #ffffff,
    #f8f8f8
    );

    border:1px solid rgba(255,255,255,0.8);

    display:flex;

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

    font-size:70px;

    box-shadow:
    0 18px 50px rgba(0,0,0,0.08),
    inset 0 2px 12px rgba(255,255,255,0.95);

    transition:0.45s ease;

    overflow:hidden;
}

/* HOVER GLOW RING */

.service-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px solid transparent;

    transition:0.4s ease;
}

/* FLOAT ANIMATION */

@keyframes floatIcon{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }
}

.service-icon{

    animation:floatIcon 4s ease-in-out infinite;
}

/* HOVER EFFECT */

.service-card:hover .service-icon{

    transform:
    translateY(-12px)
    scale(1.04);

    background:#f3f3f3;

    box-shadow:
    0 28px 65px rgba(16,183,166,0.18);
}

.service-card:hover .service-icon::before{

    border-color:
    rgba(16,183,166,0.25);
}

/* TITLE */

.service-card h3{

    font-size:30px;

    font-weight:700;

    color:#111111;

    margin-bottom:12px;
}

/* SUBTEXT */

.service-card p{

    max-width:260px;

    margin:auto;

    font-size:16px;

    line-height:1.8;

    color:#777777;
}

/* TABLET */

@media(max-width:991px){

    .services{

        padding:90px 0;
    }

    .services-grid{

        grid-template-columns:1fr;

        gap:60px;
    }

    .services .section-title h2{

        font-size:46px;
    }

    .service-icon{

        width:170px;
        height:170px;

        font-size:62px;
    }

    .service-card h3{

        font-size:26px;
    }
}

/* MOBILE */

@media(max-width:768px){

    .services{

        padding:75px 0;
    }

    .services .section-title{

        margin-bottom:50px;
    }

    .services .section-title h2{

        font-size:38px;
    }

    .services-grid{

        gap:45px;
    }

    .service-icon{

        width:145px;
        height:145px;

        font-size:52px;
    }

    .service-card h3{

        font-size:24px;
    }

    .service-card p{

        font-size:15px;

        line-height:1.7;
    }
}
/* WHY */

/* =========================
   WHY CHOOSE US
========================= */

/* =========================
   WHY CHOOSE US
========================= */

/* =========================
   WHY CHOOSE US
========================= */

.why{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:
    linear-gradient(
    rgba(0,0,0,0.65),
    rgba(0,0,0,0.65)
    ),

    url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1800');

    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}

/* SECTION TITLE */

.why .section-title{

    text-align:center;

    margin-bottom:70px;
}

.why .section-title h2{

    font-size:58px;

    color:#ffffff;

    font-weight:700;
}

/* GRID */

.why-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:40px;
}

/* CARD */

.why-card{

    position:relative;

    background:
    rgba(255,255,255,0.10);

    backdrop-filter:blur(12px);

    border:
    1px solid rgba(255,255,255,0.15);

    border-radius:30px;

    padding:55px 35px;

    text-align:center;

    overflow:hidden;

    transition:0.4s ease;
}

/* WHITE GLOW */

.why-card::before{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    background:
    rgba(255,255,255,0.08);

    border-radius:50%;

    top:-70px;
    right:-70px;
}

/* HOVER */

.why-card:hover{

    transform:
    translateY(-12px);

    background:
    rgba(0,0,0,0.55);

    box-shadow:
    0 25px 60px rgba(0,0,0,0.35);

    animation:shake 0.4s ease;
}

/* ICON CIRCLE */

.why-icon{

    width:120px;
    height:120px;

    margin:0 auto 28px;

    border-radius:50%;

    background:#ffffff;

    display:flex;

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

    font-size:52px;

    box-shadow:
    0 12px 35px rgba(0,0,0,0.15);

    transition:0.4s ease;
}

/* ICON HOVER */

.why-card:hover .why-icon{

    transform:scale(1.08);

    background:#10b7a6;
}

/* TITLE */

.why-card h3{

    font-size:30px;

    color:#ffffff;

    font-weight:700;

    line-height:1.5;
}

/* SHAKE */

@keyframes shake{

    0%{
        transform:translateX(0);
    }

    25%{
        transform:translateX(-4px);
    }

    50%{
        transform:translateX(4px);
    }

    75%{
        transform:translateX(-4px);
    }

    100%{
        transform:translateX(0);
    }
}

/* TABLET */

@media(max-width:991px){

    .why{

        padding:90px 0;
    }

    .why-grid{

        grid-template-columns:1fr;

        gap:30px;
    }

    .why .section-title h2{

        font-size:46px;
    }
}

/* MOBILE */

@media(max-width:768px){

    .why{

        padding:75px 0;
    }

    .why .section-title{

        margin-bottom:50px;
    }

    .why .section-title h2{

        font-size:36px;
    }

    .why-card{

        padding:45px 25px;
    }

    .why-card h3{

        font-size:24px;
    }

    .why-icon{

        width:95px;
        height:95px;

        font-size:42px;
    }
}
/* PROJECT */
/* =========================
   PROJECTS
========================= */

.projects{

    position:relative;

    padding:120px 0;

    background:#ffffff;

    overflow:hidden;
}

/* TITLE */

.projects .section-title{

    text-align:center;

    margin-bottom:70px;
}

.projects .section-title h2{

    font-size:58px;

    font-weight:700;

    color:#111111;
}

/* SLIDER */

.project-slider{

    width:100%;

    overflow:hidden;

    position:relative;
}

/* TRACK */

.project-track{

    display:flex;

    align-items:center;

    gap:28px;

    width:max-content;

    animation:
    scrollProject 30s linear infinite;
}

/* PAUSE */

.project-slider:hover .project-track{

    animation-play-state:paused;
}

/* CARD */

.project-card{

    position:relative;

    width:260px;

    height:460px;

    flex-shrink:0;

    border-radius:30px;

    overflow:hidden;

    background:#ffffff;

    box-shadow:
    0 15px 40px rgba(0,0,0,0.08);

    transition:0.4s ease;
}

/* HOVER */

.project-card:hover{

    transform:
    translateY(-12px);

    box-shadow:
    0 30px 70px rgba(0,0,0,0.16);
}

/* IFRAME */

.project-card iframe{

    width:100%;

    height:100%;

    border:none;

    pointer-events:none;
}

/* OVERLAY */

.project-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,0.25),
    transparent
    );

    opacity:0;

    transition:0.4s ease;
}

.project-card:hover::after{

    opacity:1;
}

/* ENTER BUTTON */

.project-enter{

    position:absolute;

    left:50%;

    bottom:18px;

    transform:translateX(-50%);

    width:64px;
    height:64px;

    border-radius:50%;

    background:#10b7a6;

    display:flex;

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

    text-decoration:none;

    z-index:5;

    transition:0.35s ease;

    box-shadow:
    0 10px 30px rgba(16,183,166,0.3);
}

/* ICON */

.project-enter i{

    color:#ffffff;

    font-size:24px;
}

/* HOVER */

.project-enter:hover{

    background:#000000;

    transform:
    translateX(-50%)
    scale(1.08);
}

/* ANIMATION */

@keyframes scrollProject{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }
}
/* ROADMAP */

/* =========================
   ROADMAP SECTION
========================= */

.roadmap{

    position:relative;

    padding:130px 0;

    overflow:hidden;

    background:
    linear-gradient(
    rgba(0,0,0,0.60),
    rgba(0,0,0,0.60)
    ),

    url('https://images.unsplash.com/photo-1494526585095-c41746248156?q=80&w=1800');

    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}

/* TITLE */

.roadmap .section-title{

    text-align:center;

    margin-bottom:90px;
}

.roadmap .section-title h2{

    font-size:58px;

    font-weight:700;

    color:#ffffff;

    letter-spacing:-1px;
}

/* FLOW */

.roadmap-flow{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:30px;
}

/* CONNECT LINE */

.roadmap-flow::before{

    content:"";

    position:absolute;

    top:55px;

    left:8%;

    width:84%;

    height:4px;

    background:
    linear-gradient(
    90deg,
    rgba(16,183,166,0.2),
    rgba(16,183,166,1),
    rgba(16,183,166,0.2)
    );

    z-index:1;
}

/* STEP */

.road-step{

    position:relative;

    z-index:2;

    flex:1;

    text-align:center;
}

/* CIRCLE */

.step-circle{

    width:110px;
    height:110px;

    margin:auto auto 35px;

    border-radius:50%;

    background:#ffffff;

    display:flex;

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

    font-size:22px;

    font-weight:700;

    color:#10b7a6;

    box-shadow:
    0 20px 50px rgba(0,0,0,0.20);

    transition:0.4s ease;
}

/* CARD */

.step-card{

    position:relative;

    background:
    rgba(255,255,255,0.10);

    backdrop-filter:blur(12px);

    border:
    1px solid rgba(255,255,255,0.15);

    border-radius:28px;

    padding:38px 28px;

    min-height:170px;

    display:flex;

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

    text-align:center;

    color:#ffffff;

    font-size:24px;

    font-weight:600;

    line-height:1.6;

    transition:0.4s ease;

    overflow:hidden;
}

/* GLOW EFFECT */

.step-card::before{

    content:"";

    position:absolute;

    width:180px;
    height:180px;

    background:
    rgba(255,255,255,0.08);

    border-radius:50%;

    top:-70px;
    right:-70px;
}

/* HOVER */

.road-step:hover .step-card{

    background:
    rgba(0,0,0,0.70);

    transform:
    translateY(-12px);

    box-shadow:
    0 25px 60px rgba(0,0,0,0.35);
}

.road-step:hover .step-circle{

    background:#10b7a6;

    color:#ffffff;

    transform:scale(1.08);
}

/* TABLET */

@media(max-width:991px){

    .roadmap{

        padding:90px 0;
    }

    .roadmap .section-title h2{

        font-size:46px;
    }

    .roadmap-flow{

        flex-wrap:wrap;

        justify-content:center;

        gap:40px;
    }

    .roadmap-flow::before{

        display:none;
    }

    .road-step{

        width:45%;

        flex:none;
    }
}

/* MOBILE */

@media(max-width:768px){

    .roadmap{

        padding:75px 0;
    }

    .roadmap .section-title{

        margin-bottom:60px;
    }

    .roadmap .section-title h2{

        font-size:38px;
    }

    .roadmap-flow{

        flex-direction:column;

        align-items:center;

        gap:35px;
    }

    .road-step{

        width:100%;
    }

    .step-circle{

        width:90px;
        height:90px;

        font-size:18px;

        margin-bottom:24px;
    }

    .step-card{

        min-height:auto;

        padding:30px 22px;

        font-size:20px;

        border-radius:22px;
    }
}
/* CONTACT */

/* =========================
   CONTACT SECTION
========================= */

/* =========================
   CONTACT SECTION
========================= */

.contact{

    position:relative;

    background:#ffffff;

    padding:120px 0;

    overflow:hidden;
}

/* BACKGROUND GLOW */

.contact::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    background:#10b7a6;

    opacity:0.05;

    filter:blur(120px);

    top:-120px;
    left:-120px;

    border-radius:50%;
}

.contact::after{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    background:#10b7a6;

    opacity:0.04;

    filter:blur(120px);

    bottom:-120px;
    right:-120px;

    border-radius:50%;
}

/* =========================
   WRAPPER
========================= */

.contact-wrapper{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:flex-start;
}

/* =========================
   LEFT SIDE
========================= */

.contact-left h2{

    font-size:58px;

    font-weight:700;

    color:#000000;

    line-height:1.1;

    margin-bottom:24px;
}

.contact-left p{

    font-size:19px;

    color:#666666;

    line-height:1.9;

    margin-bottom:38px;

    max-width:520px;
}

/* INFO */

.contact-info{

    display:flex;

    flex-direction:column;

    gap:26px;
}

/* ITEM */

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:18px;
}

/* ICON */

.contact-icon{

    min-width:62px;

    width:62px;
    height:62px;

    border-radius:50%;

    background:#10b7a6;

    display:flex;

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

    color:#ffffff;

    font-size:22px;

    box-shadow:
    0 10px 25px rgba(16,183,166,0.25);

    transition:0.35s ease;
}

/* ICON HOVER */

.contact-item:hover .contact-icon{

    background:#000000;

    transform:translateY(-5px);
}

/* TEXT */

.contact-item span{

    font-size:17px;

    line-height:1.8;

    color:#555555;

    font-weight:500;
}

/* MAP */

.map-box{

    margin-top:45px;

    border-radius:28px;

    overflow:hidden;

    box-shadow:
    0 15px 45px rgba(0,0,0,0.10);

    transition:0.35s ease;
}

.map-box:hover{

    transform:translateY(-6px);
}

.map-box iframe{

    width:100%;

    height:340px;

    border:none;

    display:block;
}

/* =========================
   RIGHT FORM
========================= */

.contact-right{

    position:relative;

    background:#ffffff;

    padding:50px;

    border-radius:32px;

    overflow:hidden;

    border:
    1px solid rgba(0,0,0,0.04);

    box-shadow:
    0 20px 60px rgba(0,0,0,0.08);
}

/* FORM GLOW */

.contact-right::before{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    background:#10b7a6;

    opacity:0.05;

    filter:blur(80px);

    top:-80px;
    right:-80px;

    border-radius:50%;
}

/* FORM */

.contact-right form{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    gap:22px;
}

/* INPUTS */

.contact-right input,
.contact-right textarea,
.contact-right select{

    width:100%;

    background:#fafafa;

    border:1px solid #dddddd;

    border-radius:18px;

    padding:20px 24px;

    font-size:16px;

    font-family:'Poppins',sans-serif;

    color:#444444;

    outline:none;

    transition:0.35s ease;
}

/* SELECT */

.contact-right select{

    height:64px;

    appearance:none;

    cursor:pointer;
}

/* FOCUS */

.contact-right input:focus,
.contact-right textarea:focus,
.contact-right select:focus{

    border-color:#10b7a6;

    background:#ffffff;

    box-shadow:
    0 0 0 4px rgba(16,183,166,0.10);
}

/* PLACEHOLDER */

.contact-right input::placeholder,
.contact-right textarea::placeholder{

    color:#999999;
}

/* TEXTAREA */

.contact-right textarea{

    height:180px;

    resize:none;
}

/* =========================
   FILE UPLOAD
========================= */

.upload-box{

    display:flex;

    flex-direction:column;

    gap:12px;
}

.upload-box label{

    font-size:15px;

    color:#666666;

    font-weight:500;
}

.upload-box label span{

    color:#10b7a6;

    font-size:14px;
}

/* FILE INPUT */

.contact-right input[type="file"]{

    padding:16px;

    border:2px dashed #d9d9d9;

    background:#fafafa;

    cursor:pointer;
}

/* FILE HOVER */

.contact-right input[type="file"]:hover{

    border-color:#10b7a6;

    background:#ffffff;
}

/* BUTTON */

.contact-right button{

    height:64px;

    border:none;

    border-radius:18px;

    background:#10b7a6;

    color:#ffffff;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:0.35s ease;

    box-shadow:
    0 12px 30px rgba(16,183,166,0.25);
}

/* BUTTON HOVER */

.contact-right button:hover{

    background:#000000;

    transform:translateY(-4px);
}

/* =========================
   TABLET
========================= */

@media(max-width:991px){

    .contact{

        padding:90px 0;
    }

    .contact-wrapper{

        grid-template-columns:1fr;

        gap:60px;
    }

    .contact-left h2{

        font-size:48px;
    }

    .contact-right{

        padding:40px;
    }
}

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

@media(max-width:768px){

    .contact{

        padding:75px 0;
    }

    .contact-wrapper{

        gap:45px;
    }

    .contact-left h2{

        font-size:38px;

        margin-bottom:18px;
    }

    .contact-left p{

        font-size:16px;

        margin-bottom:30px;
    }

    .contact-info{

        gap:22px;
    }

    .contact-item{

        gap:14px;
    }

    .contact-icon{

        min-width:52px;

        width:52px;
        height:52px;

        font-size:18px;
    }

    .contact-item span{

        font-size:15px;

        line-height:1.7;
    }

    .map-box{

        margin-top:30px;

        border-radius:20px;
    }

    .map-box iframe{

        height:260px;
    }

    .contact-right{

        padding:28px;

        border-radius:24px;
    }

    .contact-right form{

        gap:18px;
    }

    .contact-right input,
    .contact-right textarea,
    .contact-right select{

        padding:16px 18px;

        border-radius:14px;

        font-size:15px;
    }

    .contact-right select{

        height:58px;
    }

    .contact-right textarea{

        height:150px;
    }

    .contact-right button{

        height:58px;

        font-size:16px;

        border-radius:14px;

        margin-top:8px;
    }

    .upload-box label{

        font-size:14px;
    }

}
/* FOOTER */

/* =========================
   FOOTER - MODERN PREMIUM
========================= */

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

.footer{

    background:
    linear-gradient(
    135deg,
    #000000,
    #050505
    );

    position:relative;

    overflow:hidden;

    padding:75px 0 0;
}

/* GLOW */

.footer::before{

    content:"";

    position:absolute;

    width:380px;
    height:380px;

    background:#10b7a6;

    opacity:0.05;

    filter:blur(120px);

    top:-150px;
    left:-120px;

    border-radius:50%;
}

.footer::after{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    background:#10b7a6;

    opacity:0.04;

    filter:blur(100px);

    bottom:-120px;
    right:-100px;

    border-radius:50%;
}

/* MAIN */

.footer-main{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:80px;

    padding-bottom:50px;
}

/* LOGO WRAP */

.footer-logo-wrap{

    width:120px;
    height:120px;

    background:#0f0f0f;

    border-radius:24px;

    display:flex;

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

    border:
    1px solid rgba(255,255,255,0.05);

    margin-bottom:28px;

    overflow:hidden;

    box-shadow:
    0 12px 35px rgba(0,0,0,0.25);
}

/* LOGO */

.footer-logo{

    width:78px;

    height:auto;

    object-fit:contain;
}

/* TEXT */

.footer-left p{

    color:rgba(255,255,255,0.72);

    font-size:18px;

    line-height:1.9;

    max-width:420px;

    margin-bottom:30px;
}

/* SOCIAL */

.footer-social{

    display:flex;

    gap:14px;
}

.footer-social a{

    width:50px;
    height:50px;

    border-radius:16px;

    background:#101010;

    border:
    1px solid rgba(255,255,255,0.05);

    display:flex;

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

    color:#ffffff;

    text-decoration:none;

    font-size:19px;

    transition:0.35s ease;
}

.footer-social a:hover{

    background:#10b7a6;

    transform:
    translateY(-5px);
}

/* LINKS */

.footer-links h3{

    color:#ffffff;

    font-size:28px;

    margin-bottom:24px;

    font-weight:700;
}

.footer-links ul{

    list-style:none;

    padding:0;
    margin:0;
}

.footer-links ul li{

    margin-bottom:16px;
}

.footer-links ul li a{

    color:rgba(255,255,255,0.72);

    text-decoration:none;

    font-size:17px;

    transition:0.3s ease;

    position:relative;
}

/* HOVER */

.footer-links ul li a:hover{

    color:#10b7a6;

    padding-left:5px;
}

/* SUB FOOTER */

.sub-footer{

    position:relative;

    z-index:2;

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

    padding:22px 0;

    text-align:center;
}

.sub-footer p{

    color:rgba(255,255,255,0.82);

    font-size:14px;

    letter-spacing:0.4px;

    margin:0;
}

/* =========================
   TABLET
========================= */

@media(max-width:991px){

    .footer-main{

        grid-template-columns:1fr 1fr;

        gap:50px;
    }

    .footer-left{

        grid-column:1 / -1;
    }
}

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

@media(max-width:768px){

    .footer{

        padding:55px 0 0;
    }

    .footer-main{

        grid-template-columns:1fr;

        gap:40px;

        padding-bottom:35px;
    }

    .footer-logo-wrap{

        width:100px;
        height:100px;

        border-radius:20px;

        margin-bottom:22px;
    }

    .footer-logo{

        width:68px;
    }

    .footer-left p{

        font-size:15px;

        line-height:1.8;

        margin-bottom:24px;
    }

    .footer-social a{

        width:46px;
        height:46px;

        border-radius:14px;

        font-size:17px;
    }

    .footer-links h3{

        font-size:24px;

        margin-bottom:18px;
    }

    .footer-links ul li{

        margin-bottom:14px;
    }

    .footer-links ul li a{

        font-size:16px;
    }

    .sub-footer{

        padding:18px 0;
    }

    .sub-footer p{

        font-size:12px;

        line-height:1.6;
    }
}

/* POPUP */

.success-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
transition:0.35s;
z-index:999999;
}

.show-popup{
opacity:1;
visibility:visible;
}

.success-box{
background:#ffffff;
padding:45px 40px;
border-radius:22px;
text-align:center;
width:90%;
max-width:420px;
}

.success-box h3{
font-size:34px;
color:#10b7a6;
margin-bottom:15px;
}

/* FLOATING WHATSAPP */

.floating-whatsapp{
position:fixed;
right:22px;
bottom:22px;
width:64px;
height:64px;
border-radius:50%;
background:#25D366;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
z-index:999999;
box-shadow:0 12px 35px rgba(0,0,0,0.18);
}

.floating-whatsapp i{
color:#ffffff;
font-size:34px;
}

/* RESPONSIVE */

@media(max-width:991px){

.hero-wrapper,
.contact-wrapper,
.services-grid,
.why-grid{
grid-template-columns:1fr;
display:grid;
}

.hero-left,
.hero-right{
width:100%;
}

.roadmap-flow{
flex-direction:column;
}

.roadmap-flow::before{
display:none;
}

.footer-top{
flex-direction:column;
gap:50px;
}

}

@media(max-width:768px){

.nav-menu{
gap:18px;
row-gap:12px;
}

.hero{
padding:220px 0 80px;
}

.hero-heading{
font-size:42px;
}

.hero-subhead{
font-size:17px;
}

.tour-panel iframe{
height:340px;
}

.project-card{
width:180px;
height:320px;
}

.contact-left h2{
font-size:38px;
}

.footer-left img{
height:65px;
}

.floating-whatsapp{
width:56px;
height:56px;
right:16px;
bottom:16px;
}

.floating-whatsapp i{
font-size:28px;
}

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

@media screen and (max-width:991px){

.container{
width:92%;
}

/* HEADER */

.navbar{
padding:16px 0;
gap:14px;
}

.logo img{
height:56px;
}

.nav-menu{
gap:20px;
flex-wrap:wrap;
justify-content:center;
}

.nav-menu a{
font-size:15px;
}

/* HERO */

.hero{
padding:210px 0 80px;
}

.hero-wrapper{
flex-direction:column;
gap:50px;
}

.hero-left,
.hero-right{
width:100%;
}

.hero-heading{
font-size:56px;
}

.hero-subhead{
font-size:18px;
}

.tour-panel iframe{
height:480px;
}

/* SECTION */

.section{
padding:85px 0;
}

.section-title h2{
font-size:40px;
}

/* SERVICES */

.services-grid{
grid-template-columns:1fr;
gap:40px;
}

.service-icon{
width:130px;
height:130px;
font-size:48px;
}

/* WHY */

.why-grid{
grid-template-columns:1fr;
gap:25px;
}

.why-card{
padding:40px 30px;
}

.why-card h3{
font-size:24px;
}

/* PROJECT */

.project-track{
gap:20px;
}

.project-card{
width:220px;
height:380px;
}

/* ROADMAP */

.roadmap-flow{
flex-direction:column;
gap:35px;
}

.roadmap-flow::before{
display:none;
}

.road-step{
max-width:100%;
}

/* CONTACT */

.contact-wrapper{
grid-template-columns:1fr;
gap:55px;
}

.contact-left h2{
font-size:44px;
}

.contact-left p{
font-size:18px;
}

.contact-right{
padding:35px;
}

/* FOOTER */

.footer-top{
flex-direction:column;
gap:50px;
}

}



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

@media screen and (max-width:768px){

body{
overflow-x:hidden;
}

/* HEADER */

.header{
padding:0;
}

.navbar{
padding:14px 0;
gap:12px;
}

/* LOGO */

.logo img{
height:50px;
}

/* MENU */

.nav-menu{

display:flex;

flex-wrap:wrap;

justify-content:center;

align-items:center;

gap:14px;

row-gap:10px;

width:100%;
}

.nav-menu a{

font-size:14px;

line-height:1;
}

/* HERO */

.hero{
padding:200px 0 70px;
}

.hero-wrapper{
gap:40px;
}

.hero-heading{
font-size:40px;
line-height:1.2;
}

.hero-subhead{
font-size:16px;
line-height:1.8;
}

.hero-tag{
font-size:14px;
padding:10px 18px;
}

.primary-btn{
width:100%;
text-align:center;
padding:17px;
}

/* 360 PANEL */

.tour-panel{
border-radius:20px;
}

.tour-panel iframe{
height:320px;
}

/* SECTION */

.section{
padding:75px 0;
}

.section-title{
margin-bottom:45px;
}

.section-title h2{
font-size:32px;
line-height:1.3;
}

/* SERVICES */

.service-icon{
width:115px;
height:115px;
font-size:42px;
}

.service-card h3{
font-size:20px;
}

/* WHY */

.why-card{
padding:35px 25px;
border-radius:20px;
}

.why-icon{
font-size:48px;
}

.why-card h3{
font-size:22px;
}

/* PROJECT */

.project-slider{
margin-top:10px;
}

.project-card{
width:180px;
height:320px;
border-radius:18px;
}

.project-enter{
width:50px;
height:50px;
bottom:14px;
}

.project-enter i{
font-size:17px;
}

/* ROADMAP */

.step-circle{
width:70px;
height:70px;
font-size:15px;
margin-bottom:20px;
}

.step-card{
font-size:17px;
padding:24px;
min-height:100px;
}

/* CONTACT */

.contact{
padding:80px 0;
}

.contact-left h2{
font-size:36px;
}

.contact-left p{
font-size:16px;
}

.contact-item{
gap:14px;
}

.contact-icon{
min-width:50px;
height:50px;
font-size:20px;
}

.contact-item span{
font-size:15px;
line-height:1.7;
}

.map-box iframe{
height:250px;
}

.contact-right{
padding:28px;
border-radius:22px;
}

.contact-right input,
.contact-right textarea{
padding:16px;
font-size:15px;
border-radius:14px;
}

.contact-right button{
padding:18px;
font-size:16px;
}

/* FOOTER */

 .footer{
        padding-top:65px;
    }

    .footer-left img{
        height:65px;
    }

    .footer-left p{
        font-size:16px;
    }

    .footer-links h4{
        font-size:22px;
    }

    .footer-links a{
        font-size:16px;
    }

    .footer-bottom{
        font-size:14px;
        padding:20px 10px;
        line-height:1.8;
    }

    .social-links{
        gap:15px;
    }

    .social-links img{
        width:20px;
        height:20px;
    }

}


/* SMALL MOBILE */

@media screen and (max-width:480px){

    .hero-heading{
        font-size:36px;
    }

    .hero-subhead{
        font-size:15px;
    }

    .section-title h2{
        font-size:30px;
    }

    .contact-left h2{
        font-size:34px;
    }

    .project-card{
        width:260px;
    }

    .project-card iframe{
        height:190px;
    }

}



/* WHATSAPP */

.floating-whatsapp{
width:56px;
height:56px;
right:16px;
bottom:16px;
}

.floating-whatsapp i{
font-size:28px;
}

}



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

@media screen and (max-width:480px){

.hero{
padding-top:190px;
}

.hero-heading{
font-size:34px;
}

.hero-subhead{
font-size:15px;
}

.section-title h2{
font-size:28px;
}

.project-card{
width:160px;
height:290px;
}

.tour-panel iframe{
height:280px;
}

.contact-left h2{
font-size:32px;
}

.nav-menu{
gap:12px;
}

.nav-menu a{
font-size:13px;
}



}