/* =========================================
GOOGLE FONTS
========================================= */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* =========================================
ROOT VARIABLES
========================================= */

:root{

--primary:#143A52;
--primary-dark:#0d2a3c;

--gold:#D4A017;
--gold-light:#E6B93C;

--white:#ffffff;
--light:#F7F8FA;

--text:#2D3748;
--muted:#718096;

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

--shadow-lg:
0 25px 60px rgba(0,0,0,.15);

}

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

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

html{
scroll-behavior:smooth;
}

body{

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

background:#fff;

color:var(--text);

overflow-x:hidden;

line-height:1.8;

}

/* =========================================
CONTAINER
========================================= */

.container{

width:90%;

max-width:1300px;

margin:auto;

}

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

h1,h2,h3,h4,h5{

font-family:'Cinzel',serif;

line-height:1.2;

color:var(--primary);

}

h1{
font-size:5rem;
}

h2{
font-size:3rem;
}

h3{
font-size:2rem;
}

p{
color:var(--muted);
}

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

a{
text-decoration:none;
}

/* =========================================
SECTIONS
========================================= */

section{

padding:120px 0;

}

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

.btn-primary{

display:inline-block;

padding:16px 36px;

background:var(--gold);

color:white;

border-radius:50px;

font-weight:600;

transition:.3s;

}

.btn-primary:hover{

background:var(--gold-light);

transform:translateY(-3px);

}

.btn-outline{

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

padding:16px 34px;

border:2px solid #143a52;

color:#143a52;

background:transparent;

border-radius:50px;

font-weight:600;

transition:.3s;

text-decoration:none;

}

.btn-outline:hover{

background:#143a52;

color:#ffffff;

}
/* =========================================
SECTION TITLE
========================================= */

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

color:var(--gold);

text-transform:uppercase;

letter-spacing:3px;

font-weight:700;

}

.section-title h2{

margin-top:15px;

}

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

.header{

position:fixed;

top:0;
left:0;

width:100%;

z-index:999;

transition:.4s;

}

.header.scrolled{

background:
rgba(20,58,82,.95);

backdrop-filter:
blur(12px);

box-shadow:
var(--shadow);

}


/* =========================================
NAVBAR
========================================= */

.navbar{

padding:20px 0;

}

.nav-container{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

display:flex;

align-items:center;

gap:15px;

}

.logo img{

width:70px;

}

.logo-text h3{

font-size:1.3rem;

color:white;

}

.logo-text span{

color:#CBD5E0;

font-size:.85rem;

}

.nav-links{

display:flex;

gap:35px;

list-style:none;

}

.nav-links a{

color:white;

font-weight:500;

transition:.3s;

}

.nav-links a:hover{

color:var(--gold);

}

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

.footer{

background:var(--primary);

color:white;

padding:90px 0 30px;

}

.footer-grid{

display:grid;

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

gap:50px;

}

.footer h4{

color:white;

margin-bottom:20px;

}

.footer a{

display:block;

color:#CBD5E0;

margin-bottom:10px;

}

.footer a:hover{

color:var(--gold);

}

.footer-bottom{


margin-top:50px;

padding-top:20px;

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

text-align:center;

}

/* =========================================
REVEAL
========================================= */

.reveal{

opacity:0;

transform:
translateY(40px);

transition:.8s;

}

.reveal.active{

opacity:1;

transform:
translateY(0);

}

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

@media(max-width:991px){

h1{
font-size:3.5rem;
}

h2{
font-size:2.4rem;
}

.nav-links{
display:none;
}

.footer-grid{
grid-template-columns:1fr 1fr;
}

}

@media(max-width:768px){

section{
padding:90px 0;
}

.footer-grid{
grid-template-columns:1fr;
}

/* =========================================
ACTIVE NAV LINK
========================================= */

.nav-links a.active{

color:var(--gold);

}


/* =========================================
SCROLLBAR
========================================= */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f1f1f1;

}

::-webkit-scrollbar-thumb{

background:var(--gold);

border-radius:20px;

}


/* =========================================
TEXT SELECTION
========================================= */

::selection{

background:var(--gold);

color:white;

}
}