/* ==========================================================
   CLUESAR LOGISTICS
   Landing Page v1.0
   Part 1
========================================================== */

/* ==========================================================
   Root Variables
========================================================== */

:root{

    --primary:#02B159;
    --primary-hover:#019A4E;

    --background:#FBFBFB;
    --surface:#FFFFFF;

    --text:#323232;
    --text-light:#6B7280;

    --border:#E7E7E7;

    --shadow:0 12px 35px rgba(0,0,0,.06);

    --transition:.35s ease;

}

/* ==========================================================
   Reset
========================================================== */

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);

    color:var(--text);

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

    overflow-x:hidden;

    position:relative;

    line-height:1.7;

}

/* ==========================================================
   Typography
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:'Space Grotesk',sans-serif;

    font-weight:700;

    color:var(--text);

    margin-bottom:20px;

}

p{

    color:var(--text-light);

    margin-bottom:0;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

img{

    max-width:100%;

    display:block;

}

section{

    padding:100px 0;

}

/* ==========================================================
   Background Pattern
========================================================== */

.background-pattern{

    position:fixed;

    inset:0;

    z-index:-10;

    background:
    radial-gradient(circle at top right,
    rgba(2,177,89,.08),
    transparent 35%),

    radial-gradient(circle at bottom left,
    rgba(2,177,89,.04),
    transparent 45%),

    linear-gradient(
    to bottom,
    #FBFBFB,
    #FBFBFB);

}

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

.navbar{

    background:#FFFFFF;

    border-bottom:1px solid var(--border);

    padding:20px 0;

    position:sticky;

    top:0;

    z-index:1000;

}

.navbar-brand img{

    height:56px;

}

.navbar-contact{

    display:flex;

    align-items:center;

    gap:30px;

}

.navbar-contact a{

    color:var(--text);

    font-size:15px;

    font-weight:500;

}

.navbar-contact a i{

    color:var(--primary);

    margin-right:8px;

}

.navbar-contact a:hover{

    color:var(--primary);

}

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

.hero{

    min-height:88vh;

    display:flex;

    align-items:center;

}

.launch-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    background:rgba(2,177,89,.10);

    color:var(--primary);

    border:1px solid rgba(2,177,89,.25);

    padding:12px 24px;

    border-radius:100px;

    font-weight:600;

    margin-bottom:30px;

}

.hero h1{

    font-size:68px;

    line-height:1.08;

    max-width:650px;

    margin-bottom:30px;

}

.hero p{

    font-size:20px;

    line-height:1.9;

    max-width:600px;

}

/* ==========================================================
   Hero Blueprint
========================================================== */

.hero-blueprint{

    position:relative;

    height:460px;

    background:#FFFFFF;

    border:1px solid var(--border);

    border-radius:28px;

    box-shadow:var(--shadow);

    overflow:hidden;

}

.blueprint-svg{

    width:100%;

    height:100%;

    object-fit:contain;

    display:block;

    user-select:none;

    pointer-events:none;

}

/* Engineering Grid */

.hero-blueprint::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(
    rgba(2,177,89,.07) 1px,
    transparent 1px),

    linear-gradient(
    90deg,
    rgba(2,177,89,.07) 1px,
    transparent 1px);

    background-size:40px 40px;

    mask-image:

    radial-gradient(circle at center,
    black 45%,
    transparent 90%);

}

/* Placeholder */

.hero-blueprint::after{

    /* content:"Blueprint Illustration"; */

    position:absolute;

    left:50%;

    top:50%;

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

    font-family:'Space Grotesk';

    font-size:26px;

    font-weight:600;

    color:rgba(2,177,89,.45);

    letter-spacing:3px;

}

/* ==========================================================
   Vision
========================================================== */

.vision{

    text-align:center;

}

.vision h2{

    font-size:48px;

    max-width:850px;

    margin:0 auto 30px;

}

.vision p{

    max-width:760px;

    margin:auto;

    font-size:18px;

    line-height:1.9;

}

/* ==========================================================
   Section Titles
========================================================== */

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title h2{

    font-size:46px;

}
/* ==========================================================
   Services
========================================================== */

.services{

    background:transparent;

}

.service-card{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:24px;

    padding:45px 35px;

    text-align:left;

    height:100%;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.service-card:hover{

    transform:translateY(-8px);

    border-color:rgba(2,177,89,.35);

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

}

.service-card i{

    font-size:42px;

    color:var(--primary);

    margin-bottom:25px;

    display:inline-block;

}

.service-card h4{

    font-size:24px;

    margin-bottom:12px;

}

.service-card p{

    font-size:15px;

    color:var(--text-light);

}

/* ==========================================================
   Company Section
========================================================== */

.company{

    padding-top:40px;

}

.company-card{

    background:#FFFFFF;

    border:1px solid var(--border);

    border-radius:28px;

    padding:60px;

    box-shadow:var(--shadow);

}

.company-card h2{

    margin-bottom:35px;

}

.company-card p{

    margin-bottom:18px;

    line-height:1.9;

}

.company-card strong{

    color:var(--text);

}

/* ==========================================================
   Contact
========================================================== */

.contact{

    text-align:center;

}

.contact h2{

    font-size:52px;

    margin-bottom:20px;

}

.contact p{

    max-width:720px;

    margin:auto;

    font-size:18px;

    line-height:1.9;

}

.contact h4{

    margin-top:40px;

    color:var(--primary);

    font-weight:700;

    transition:var(--transition);

}

.contact h3:hover{

    color:var(--primary-hover);

}

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

footer{

    margin-top:80px;

    background:#323232;

    padding:45px 0;

    text-align:center;

}

footer p{

    color:#D9D9D9;

    margin:8px 0;

    font-size:15px;

}

/* ==========================================================
   Hover Effects
========================================================== */

a{

    transition:var(--transition);

}

button{

    transition:var(--transition);

}

img{

    transition:var(--transition);

}

.hero-blueprint{

    transition:var(--transition);

}

.hero-blueprint:hover{

    transform:translateY(-6px);

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

}

/* ==========================================================
   Utilities
========================================================== */

.text-primary{

    color:var(--primary)!important;

}

.bg-white{

    background:#FFFFFF;

}

.rounded-xl{

    border-radius:24px;

}

.shadow-soft{

    box-shadow:var(--shadow);

}

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

@media (max-width:1200px){

.hero h1{

font-size:58px;

}

}

/* ---------------------------------------------------------- */

@media (max-width:992px){

section{

padding:80px 0;

}

.hero{

text-align:center;

min-height:auto;

padding-top:60px;

}

.hero h1{

font-size:48px;

margin:auto auto 30px;

}

.hero p{

margin:auto;

}

.hero-blueprint{

margin-top:60px;

height:430px;

}

.navbar-contact{

display:none;

}

.vision h2{

font-size:40px;

}

.section-title h2{

font-size:38px;

}

.contact h2{

font-size:42px;

}

.contact h3{

font-size:34px;

}

.company-card{

padding:45px;

}

}

/* ---------------------------------------------------------- */

@media (max-width:768px){

section{

padding:70px 0;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:17px;

}

.launch-badge{

font-size:14px;

padding:10px 18px;

}

.hero-blueprint{

height:340px;

}

.hero-blueprint::after{

font-size:18px;

letter-spacing:2px;

}

.vision h2{

font-size:32px;

}

.section-title h2{

font-size:32px;

}

.service-card{

padding:30px;

}

.service-card h4{

font-size:22px;

}

.company-card{

padding:35px;

}

.contact h2{

font-size:34px;

}

.contact h3{

font-size:28px;

word-break:break-word;

}

}

/* ---------------------------------------------------------- */

@media (max-width:576px){

.navbar{

padding:15px 0;

}

.navbar-brand img{

height:46px;

}

.hero{

padding-top:30px;

}

.hero h1{

font-size:32px;

}

.hero p{

font-size:16px;

line-height:1.8;

}

.hero-blueprint{

height:280px;

}

.section-title{

margin-bottom:45px;

}

.company-card{

padding:28px;

}

footer{

padding:35px 20px;

}

footer p{

font-size:14px;

}

}