/* =====================================================
   INK & SNOW
   GLOBAL STYLE SYSTEM
===================================================== */


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


*{

margin:0;

padding:0;

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

font-size:16px;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;

}



body{

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

background:var(--white);

color:var(--text-dark);

overflow-x:hidden;

line-height: 1.65;

}



::selection{
background: var(--gold);
color: white;
}


::-moz-selection{
background: var(--gold);
color: white;
}


h1,h2,h3,h4,h5,h6{
font-family: var(--font-display);
line-height: 1.15;
color: var(--navy);
letter-spacing: -.01em;
}





img{

max-width:100%;

display:block;

}



a{

text-decoration:none;

color:inherit;

}



ul{

list-style:none;

}



button,
input,
textarea,
select{

font-family:inherit;

}





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


.container{

width:min(
90%,
var(--container)
);

margin:auto;

}





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


section{

padding:var(--section-padding) 5%;

position:relative;

}



.section-title{

text-align:center;

max-width:820px;

margin:0 auto 80px;

position: relative;

}



.section-title p{

font-size:.8rem;

letter-spacing:5px;

font-weight:700;

color:var(--gold);

margin-bottom:18px;

text-transform: uppercase;
font-family: var(--font-main);

}



.section-title h2{

font-size:var(--section-title);

line-height:1.12;

font-weight:700;

color:var(--navy);

font-family: var(--font-display);
letter-spacing: -.015em;

position: relative;
display: inline-block;
width: auto;

}


.section-title h2::after{

content: "";
display: block;
width: 64px;
height: 4px;
border-radius: 3px;
margin: 24px auto 0;
background: var(--gold-gradient);
box-shadow: 0 4px 12px rgba(198,155,60,.4);

}





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



.primary-btn,
.nav-btn{


display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 36px;

border-radius:100px;

background:var(--gold-gradient);

color:white;

font-weight:600;
letter-spacing: .3px;

transition:
transform .4s cubic-bezier(.16,1,.3,1),
box-shadow .4s cubic-bezier(.16,1,.3,1),
filter .3s ease;

box-shadow:var(--gold-shadow);

border:none;

cursor:pointer;

position: relative;
overflow: hidden;
user-select: none;
-webkit-tap-highlight-color: transparent;

}


.primary-btn::after,
.nav-btn::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
transform: translateX(-120%);
transition: transform .7s ease;
pointer-events: none;
}


.primary-btn:hover,
.nav-btn:hover{


transform:translateY(-4px);

box-shadow: var(--gold-shadow-lg);
filter: brightness(1.06);

}


.primary-btn:hover::after,
.nav-btn:hover::after{
transform: translateX(120%);
}


.primary-btn:active,
.nav-btn:active{
transform: translateY(-1px) scale(.985);
box-shadow: 0 10px 25px rgba(198,155,60,.35);
filter: brightness(.98);
}




.secondary-btn{


display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 36px;

border-radius:100px;

border:1.5px solid rgba(28,37,51,.18);

color:var(--navy);

font-weight:600;
letter-spacing: .2px;

transition:
transform .4s cubic-bezier(.16,1,.3,1),
background .3s ease,
color .3s ease,
border-color .3s ease,
box-shadow .3s ease;

background:white;

cursor:pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;

}



.secondary-btn:hover{


background:var(--navy);

color:white;

border-color: var(--navy);

transform:translateY(-4px);

box-shadow: 0 20px 45px rgba(28,37,51,.25);

}


.secondary-btn:active{
transform: translateY(-1px) scale(.985);
box-shadow: 0 10px 25px rgba(28,37,51,.2);
}





/* =========================
   GLASS CARD STYLE
========================= */



.hero-content {
    position: relative;
    z-index: 10;
}


.glass {
    position: relative;
    z-index: 10;

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

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

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

    border-radius: var(--radius);
}




/* =========================
   CARDS
========================= */


.card{

    position: relative;
    z-index: 10;

    background: rgba(255,255,255,.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--radius);

    transition:
    transform .5s cubic-bezier(.16,1,.3,1),
    box-shadow .5s cubic-bezier(.16,1,.3,1),
    border-color .3s ease;

}



.card:hover{


transform:

translateY(-8px);

box-shadow:
0 35px 80px rgba(28,37,51,.18),
0 0 0 1px rgba(198,155,60,.12);

border-color: rgba(198,155,60,.22);

}



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


p{

line-height:1.72;

color:#556073;

font-size: 1rem;

}



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


::-webkit-scrollbar{

width:10px;

}



::-webkit-scrollbar-track{

background:var(--light);

}



::-webkit-scrollbar-thumb{


background:var(--gold);

border-radius:20px;


}




/* =========================
   LOADING ANIMATION READY
========================= */


.fade-up{

opacity:0;

transform:translateY(40px);

transition:1s ease;

}



.fade-up.active{


opacity:1;

transform:translateY(0);

}






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


@media(max-width:768px){


section{

padding:80px 5%;

}


.section-title{

margin-bottom:40px;

}


.primary-btn,
.secondary-btn{


padding:14px 25px;


}



}
/* =========================
   FORM MESSAGE
========================= */


.form-message{

margin-top:20px;

padding:15px;

border-radius:15px;

text-align:center;

font-weight:600;

transition:.4s;

}



.form-message.success{

background:#d9f7e8;

color:#116b3a;

}



.form-message.error{

background:#fff0d5;

color:#8a5a00;

}
/* =====================================================
   SCROLL UI ELEMENTS
===================================================== */



.scroll-progress{


position:fixed;

top:0;

left:0;

height:4px;

width:0%;

background:

var(--gold-gradient);

z-index:9999;

}





.back-top{


position:fixed;


right:30px;

bottom:30px;


width:55px;

height:55px;


border-radius:50%;


border:none;


background:

var(--gold-gradient);


color:white;


font-size:1.5rem;


cursor:pointer;


opacity:0;


transform:

translateY(20px);


transition:

var(--transition);


z-index:999;


box-shadow:

var(--gold-shadow);


}





.back-top.visible{


opacity:1;


transform:

translateY(0);


}



.back-top:hover{


transform:

translateY(-8px);


}