/*=========================
 HERO SECTION
==========================*/
@import url('https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wdth,wght@0,18..144,97.7,900;1,18..144,97.7,900&family=Montenegrin+Gothic+One&family=Syne:wght@800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Syne:wght@400..800&display=swap');
body {
  background-color: #0f233d;
    
  }
/* ==========================
   NAVBAR
========================== */

.custom-nav{
    background:#081425;
    padding:18px 0;
    transition:.3s;
    z-index:9999;
}

/* Logo */

.logo{
    width:45px;
    height:45px;
    object-fit:contain;
    margin-right:10px;
}

/* Brand */

.brand-name{
    color:#fff;
    font-size:1rem;
    font-family:"Syne",sans-serif;
    font-weight:200;
}

/* Center Menu */

.navbar-nav{
    margin:auto;
    gap:20px;
}

/* Links */

.nav-link{
    color:#fff !important;
    font-size:17px;
    font-weight:600;
    transition:.3s;
}

.nav-link:hover{

    color:#ff6b2b !important;

}

/* Button */

.nav-btn{

    background:#ff6b2b;

    color:#fff !important;

    padding:10px 28px;

    border-radius:30px;

    text-decoration:none;

    font-weight:600;

}

.nav-btn:hover{

    background:#ff814d;

}

/* Mobile */

@media(max-width:991px){

.navbar-collapse{

    background:#081425;

    padding:20px;

    margin-top:15px;

    border-radius:10px;

}

.navbar-nav{

    gap:12px;

    text-align:center;

}

.nav-btn{

    display:block;

    margin-top:20px;

    text-align:center;

}

}
.hero{

padding:100px 0 80px;

}

.website-container{

width:90%;
max-width:1250px;
margin:auto;

}

.marketing-badge{

display:inline-flex;
align-items:center;
gap:10px;

padding:10px 24px;

border-radius:50px;

background:#11192d;

border:1px solid rgba(255,107,43,.35);

color:#ff6b2b;

font-size:13px;

font-weight:600;

letter-spacing:2px;

text-transform:uppercase;

}

.hero-title{

margin-top:35px;

font-family:"Syne",sans-serif;

font-size:clamp(2.3rem,6vw,4.8rem);

font-weight:800;

line-height:1.1;

color:#fff;

max-width:900px;

}

.highlight{

display:block;

color:#ff6130;

}

.hero-text{

margin-top:25px;

max-width:700px;

font-size:18px;

line-height:32px;

color:#b8c6d8;

}

.button-container{

margin-top:40px;

display:flex;

gap:20px;

flex-wrap:wrap;

}

.btn1,
.btn2{

padding:16px 34px;

border-radius:8px;

font-weight:600;

text-decoration:none;

transition:.35s;

}

.btn1{

background:#ff6b2b;

color:#fff;

}

.btn1:hover{

background:#ff814d;

transform:translateY(-3px);

}

.btn2{

border:1px solid #35465f;

color:#fff;

background:transparent;

}

.btn2:hover{

background:#1a2740;

transform:translateY(-3px);

}

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

@media(max-width:991px){

.hero{

padding:80px 0;

}

.hero-title{

font-size:55px;

}

.hero-text{

font-size:17px;

line-height:30px;

}

}

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

@media(max-width:768px){

.hero{

text-align:center;

padding:70px 0;

}

.marketing-badge{

font-size:11px;

padding:10px 18px;

}

.hero-title{

font-size:40px;

margin-top:25px;

}

.hero-text{

font-size:16px;

line-height:28px;

margin:auto;
margin-top:25px;

}

.button-container{

justify-content:center;

}

.btn1,
.btn2{

width:100%;

max-width:320px;

text-align:center;

}

}

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

@media(max-width:480px){

.hero-title{

font-size:32px;

}

.hero-text{

font-size:15px;

}

}

/*==================================
WHY SECTION
===================================*/

.why-section{

padding:90px 0;

}

.section-tag{

display:inline-block;

color:#ff6b2b;

font-size:14px;

font-weight:700;

letter-spacing:2px;

margin-bottom:20px;

}

.section-title{

font-family:"Syne",sans-serif;

font-size:clamp(2rem,5vw,3.5rem);

color:#fff;

line-height:1.2;

margin-bottom:20px;

}

.section-description{

max-width:700px;

font-size:18px;

line-height:32px;

color:#b8c6d8;

margin-bottom:60px;

}

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

.feature-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}

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

.feature-card{

background:#071425;

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

border-radius:18px;

padding:35px 25px;

transition:.35s;

}

.feature-card:hover{

transform:translateY(-8px);

border-color:#ff6b2b;

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

}

.feature-icon{

width:65px;

height:65px;

border-radius:15px;

background:#1b2236;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

margin-bottom:25px;

color:#ff6b2b;

border:1px solid rgba(255,107,43,.35);

}

.feature-card h3{

font-family:"Syne",sans-serif;

font-size:22px;

color:#fff;

margin-bottom:15px;

}

.feature-card p{

color:#b8c6d8;

font-size:15px;

line-height:28px;

}

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

@media(max-width:992px){

.section-description{

font-size:17px;

}

}

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

@media(max-width:768px){

.why-section{

text-align:center;

}

.section-description{

margin:auto auto 50px;

}

.feature-icon{

margin:0 auto 20px;

}

}

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

@media(max-width:480px){

.feature-grid{

grid-template-columns:1fr;

}

.feature-card{

padding:30px 20px;

}

}

/*===================================
SERVICES SECTION
===================================*/

.services-section{

background:#f5f5f5;

padding:90px 0;

}

.services-section .section-title{

color:#081425;

}

.services-section .section-description{

color:#6d7688;

margin-bottom:60px;

}

/* GRID */

.services-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}

/* CARD */

.service-card{

background:#081425;

padding:35px;

border-radius:18px;

position:relative;

overflow:hidden;

transition:.35s;

border:1px solid transparent;

}

.service-card:hover{

transform:translateY(-10px);

border-color:#ff6b2b;

box-shadow:0 20px 40px rgba(0,0,0,.2);

}

.service-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:#ff6b2b;

transform:scaleX(0);

transition:.4s;

transform-origin:left;

}

.service-card:hover::before{

transform:scaleX(1);

}

.service-number{

display:inline-block;

font-size:34px;

font-weight:800;

font-family:"Syne",sans-serif;

color:#ff6b2b;

margin-bottom:20px;

}

.service-card h3{

font-family:"Syne",sans-serif;

color:#fff;

font-size:24px;

margin-bottom:18px;

}

.service-card p{

font-size:15px;

line-height:28px;

color:#b7c4d5;

}

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

@media(max-width:992px){

.services-grid{

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

}

}

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

@media(max-width:768px){

.services-section{

text-align:center;

}

.services-grid{

grid-template-columns:1fr;

}

.service-card{

padding:30px;

}

.service-number{

font-size:28px;

}

.service-card h3{

font-size:22px;

}

}

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

@media(max-width:480px){

.services-section{

padding:70px 0;

}

.service-card{

padding:25px;

}

}

/*==================================
INDUSTRIES SECTION
==================================*/

.industries-section{

padding:90px 0;

background:#f8f9fb;

}

.industries-section .section-title{

color:#081425;

}

.industries-section .section-description{

color:#67748a;

margin-bottom:60px;

}

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

.industry-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:25px;

}

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

.industry-card{

background:#ffffff;

border-radius:18px;

padding:35px 20px;

text-align:center;

border:1px solid #ececec;

transition:.35s;

cursor:pointer;

}

.industry-card:hover{

transform:translateY(-8px);

border-color:#ff6b2b;

box-shadow:0 20px 40px rgba(0,0,0,.08);

}

.industry-icon{

width:70px;

height:70px;

margin:auto;

border-radius:18px;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

background:#fff4ef;

color:#ff6b2b;

margin-bottom:20px;

transition:.3s;

}

.industry-card:hover .industry-icon{

background:#ff6b2b;

color:#fff;

transform:rotate(10deg);

}

.industry-card h3{

font-family:"Syne",sans-serif;

font-size:20px;

color:#081425;

margin:0;

}

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

@media(max-width:992px){

.industry-grid{

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

}

}

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

@media(max-width:768px){

.industries-section{

text-align:center;

padding:70px 0;

}

.industry-grid{

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

gap:20px;

}

.industry-card{

padding:25px 15px;

}

.industry-icon{

width:60px;

height:60px;

font-size:28px;

}

.industry-card h3{

font-size:17px;

}

}

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

@media(max-width:480px){

.industry-grid{

grid-template-columns:1fr 1fr;

gap:15px;

}

.industry-card{

padding:20px 10px;

}

.industry-icon{

width:55px;

height:55px;

font-size:24px;

}

.industry-card h3{

font-size:16px;

}

}

/*====================================
TRAFFIC SOURCES
====================================*/

.traffic-section{

padding:90px 0;

background:#081425;

}

.traffic-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:25px;

margin-top:60px;

}

.traffic-card{

background:#122238;

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

border-radius:18px;

padding:30px 20px;

text-align:center;

transition:.35s;

}

.traffic-card:hover{

transform:translateY(-8px);

border-color:#ff6b2b;

box-shadow:0 20px 45px rgba(0,0,0,.35);

}

.traffic-icon{

width:70px;

height:70px;

border-radius:18px;

background:#1f314c;

display:flex;

justify-content:center;

align-items:center;

margin:auto;

font-size:30px;

margin-bottom:20px;

transition:.35s;

}

.traffic-card:hover .traffic-icon{

background:#ff6b2b;

color:#fff;

transform:rotate(10deg);

}

.traffic-card h3{

font-family:"Syne",sans-serif;

font-size:22px;

color:#fff;

margin-bottom:10px;

}

.traffic-card p{

color:#b9c7d8;

font-size:15px;

line-height:26px;

}

/* Tablet */

@media(max-width:992px){

.traffic-grid{

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

}

}

/* Mobile */

@media(max-width:768px){

.traffic-section{

text-align:center;

padding:70px 0;

}

.traffic-grid{

grid-template-columns:1fr;

gap:20px;

}

.traffic-card{

padding:25px;

}

.traffic-card h3{

font-size:20px;

}

.traffic-icon{

width:60px;

height:60px;

font-size:26px;

}

}

/* Small Mobile */

@media(max-width:480px){

.traffic-card{

padding:20px;

}

.traffic-card h3{

font-size:18px;

}

.traffic-card p{

font-size:14px;

}

}
/*=====================================
CONTACT
=====================================*/

.contact-section{

padding:100px 0;

background:#121c31;

}

.contact-wrapper{

display:grid;

grid-template-columns:1fr 500px;

gap:70px;

align-items:center;

}

/* LEFT */

.contact-left .section-title{

color:#fff;

margin:20px 0;

}

.contact-left .section-description{

color:#b6c4d6;

margin-bottom:45px;

}

.contact-info{

display:flex;

flex-direction:column;

gap:22px;

}

.info-box{

display:flex;

align-items:center;

gap:20px;

}

.info-icon{

width:55px;

height:55px;

border-radius:14px;

display:flex;

justify-content:center;

align-items:center;

background:#1d2c45;

border:1px solid rgba(255,107,43,.4);

color:#ff6b2b;

font-size:20px;

}

.info-box h4{

color:#fff;

margin-bottom:5px;

font-family:"Syne";

}

.info-box span{

color:#b7c4d4;

}

.response-box{

margin-top:45px;

padding:30px;

border-radius:18px;

background:#1d2c45;

border:1px solid rgba(255,107,43,.25);

}

.response-box h4{

color:#ff6b2b;

margin-bottom:15px;

}

.response-box p{

color:#b7c4d4;

line-height:28px;

}

/* RIGHT */

.contact-right form{

background:#1b2a42;

padding:35px;

border-radius:20px;

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

}

.form-grid{

display:grid;
border-radius: 10px;
grid-template-columns:repeat(2,1fr);

gap:20px;

}

.input-group{

display:flex;

flex-direction:column;

margin-bottom:20px;

}

.input-group label{

margin-bottom:8px;

color:#d2d8e2;

font-size:14px;

}

.input-group input,

.input-group textarea,

.input-group select{

padding:14px;

border-radius:10px;
border:0.6px solid #31435d;

background:#22324a;

color:#fff;

outline:none;

}

.input-group textarea{

resize:none;

}

.input-group input:focus,

.input-group textarea:focus,

.input-group select:focus{

border-color:#ff6b2b;

}

.submit-btn{

width:100%;

padding:16px;

border:none;

border-radius:10px;

background:#ff6b2b;

font-size:17px;

font-weight:600;

cursor:pointer;

transition:.3s;

color:#fff;

}

.submit-btn:hover{

background:#ff814d;

transform:translateY(-2px);

}

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

@media(max-width:992px){

.contact-wrapper{

grid-template-columns:1fr;

}

.contact-right{

margin-top:50px;

}

}

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

@media(max-width:768px){

.contact-section{

padding:70px 0;

text-align:center;

}

.form-grid{

grid-template-columns:1fr;

}

.info-box{

justify-content:center;

text-align:left;

}

.info-icon{

flex-shrink:0;

}

.contact-right form{

padding:25px;

}

}

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

@media(max-width:480px){

.contact-right form{

padding:20px;

}

.response-box{

padding:20px;

}

.info-box{

gap:15px;

}

.info-icon{

width:50px;

height:50px;

font-size:18px;

}

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

.footer{

background:#081425;

padding:70px 0 20px;

color:#b8c6d8;

}

.footer-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:40px;

}

.footer-logo{

font-family:"Syne",sans-serif;

font-size:36px;

color:#fff;

margin-bottom:20px;

}

.footer h3{

color:#fff;

margin-bottom:20px;

font-family:"Syne",sans-serif;

}

.footer ul{

list-style:none;

padding:0;

}

.footer ul li{

margin-bottom:12px;

}

.footer ul li a{

text-decoration:none;

color:#b8c6d8;

transition:.3s;

}

.footer ul li a:hover{

color:#ff6b2b;

padding-left:6px;

}

.social-links{

display:flex;

gap:15px;

margin-top:15px;

}

.social-links a{

width:45px;

height:45px;

border-radius:50%;

background:#162335;

display:flex;

justify-content:center;

align-items:center;

color:#fff;

transition:.3s;

text-decoration:none;

}

.social-links a:hover{

background:#ff6b2b;

transform:translateY(-5px);

}

.copyright{

margin-top:60px;

padding-top:20px;

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

text-align:center;

font-size:14px;

}
section{
    scroll-margin-top: 90px;
}
#home,
#about,
#services,
#industries,
#traffic,
#contact{
    scroll-margin-top: 90px;
}