/* =========================================
   RangMax Design System
========================================= */


:root {

    --primary-blue:#0A3D62;
    --accent-yellow:#F4D03F;

    --bg-main:#ffffff;
    --bg-light:#f8f9fa;

    --text-main:#212529;
    --text-muted:#6c757d;

    --border-color:#dee2e6;

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

    --container-width:1280px;

    --radius:18px;

    --transition:.35s cubic-bezier(.25,.8,.25,1);

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

}



/* =========================================
   RESET
========================================= */


*,
*::before,
*::after{

box-sizing:border-box;

margin:0;

padding:0;

}


html{

scroll-behavior:smooth;

}


body{

font-family:var(--font-family);

background:var(--bg-main);

color:var(--text-main);

line-height:1.8;

overflow-x:hidden;

-webkit-font-smoothing:antialiased;

}



img{

max-width:100%;

display:block;

}


a{

text-decoration:none;

}




/* =========================================
   TYPOGRAPHY
========================================= */


h1{

font-size:clamp(2.5rem,5vw,4.5rem);

line-height:1.15;

font-weight:900;

}


h2{

font-size:clamp(1.8rem,4vw,2.8rem);

line-height:1.3;

font-weight:800;

}


h3{

font-size:1.25rem;

font-weight:800;

}





/* =========================================
   LAYOUT
========================================= */


.container{

max-width:var(--container-width);

margin:auto;

padding:0 24px;

}



.section{

padding:100px 0;

}



.text-center{

text-align:center;

}



.text-max-width{

max-width:750px;

margin:auto;

color:var(--text-muted);

}



.section-title{

margin-bottom:35px;

}



.section-description{

color:var(--text-muted);

line-height:2;

}



.bg-light-gray{

background:var(--bg-light);

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

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

}





/* =========================================
   BUTTONS
========================================= */


.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:10px 24px;

border-radius:30px;

font-size:.9rem;

font-weight:700;

cursor:pointer;

border:1px solid transparent;

transition:var(--transition);

}



.btn-accent{

background:var(--accent-yellow);

color:var(--text-main);

}



.btn-accent:hover{

background:#fff;

border-color:var(--accent-yellow);

transform:translateY(-2px);

}



.btn-primary{

background:var(--primary-blue);

color:#fff;

}



.btn-primary:hover{

opacity:.9;

}





/* =========================================
   FLOATING HEADER
========================================= */


.header{

position:fixed;

top:25px;

right:0;

left:0;

z-index:1000;

transition:var(--transition);

}



.header-content{


direction:rtl;

gap: 20px;
height:78px;

padding:0 28px;


display:flex;

align-items:center;


background:rgba(255,255,255,.12);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);


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

border-radius:22px;


box-shadow:var(--shadow);


transition:var(--transition);


}





.header.scrolled .header-content{


height:68px;


background:rgba(255,255,255,.35);


backdrop-filter:blur(20px);

-webkit-backdrop-filter:blur(20px);


border-color:rgba(255,255,255,.35);


box-shadow:
0 10px 30px rgba(0,0,0,.08);


}





.header-logo{

order:1;

}



.header-logo img{

height:42px;

}





.nav{


order:2;


display:flex;

align-items:center;


gap:28px;


margin-left:auto;


}



.nav a{


position:relative;


color:#fff;


font-size:.95rem;


font-weight:500;


padding:8px 0;


transition:var(--transition);


}



.header.scrolled .nav a{

color:var(--text-main);

}



.nav a::after{


content:"";


position:absolute;


bottom:0;

right:0;


width:0;


height:3px;


border-radius:10px;


background:var(--accent-yellow);


transition:.3s;


}



.nav a:hover::after{


width:100%;


}



.nav a:hover{


color:var(--accent-yellow);


transform:translateY(-2px);


}





.header-action{

order:3;

}



.header-action .btn{

padding:9px 22px;

font-size:.85rem;

}




.mobile-menu{

order:4;

display:none;

font-size:1.7rem;

color:#fff;

}





.header.scrolled .mobile-menu{

color:var(--text-main);

}





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


.hero-slider{

height:100vh;

min-height:700px;

position:relative;

overflow:hidden;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

}



.hero-slider .slide{


position:absolute;

inset:0;


background-size:cover;

background-position:center;


opacity:0;


transition:1s;


}



.hero-slider .slide.active{


opacity:1;


}



.hero-overlay{


position:absolute;

inset:0;


background:
linear-gradient(
90deg,
rgba(0,0,0,.75),
rgba(10,61,98,.35)
);


z-index:2;


}



.hero-content{


position:relative;

z-index:3;


max-width:800px;


}





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


.footer{

background:var(--primary-blue);

color:#fff;

padding:80px 0 0;

}


.footer h3{

color:#fff;

}



.footer-bottom{


margin-top:50px;

padding:25px 0;

text-align:center;


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


color:rgba(255,255,255,.6);

}




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


@media(max-width:1100px){


.header{

top:15px;

}


.header-content{

height:70px;

}



.nav{


position:fixed;


top:0;

right:-100%;


height:100vh;


width:300px;


background:#fff;


flex-direction:column;


align-items:flex-start;


padding:100px 40px;


transition:.4s;


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


}



.nav.active{

right:0;

}



.nav a{

color:var(--text-main);

font-size:1.1rem;

}



.header-action{

display:none;

}



.mobile-menu{

display:block;

}



}





@media(max-width:576px){


.header{

top:10px;

}



.header-content{

border-radius:18px;

}



.header-logo img{

height:36px;

}


}