/* =====================
   GLOBAL.CSS
===================== */


/* =====================
   CUSTOM FONTS
===================== */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Montserrat:wght@400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');

@font-face {
    font-family: 'Rockybilly';
    src: url('../fonts/Rockybilly.ttf') format('truetype');
}

@font-face {
    font-family: 'Eagle Horizon';
    src: url('../fonts/EagleHorizon.ttf') format('truetype');
}

@font-face {
    font-family: 'Awesome';
    src: url('../fonts/Awesome.ttf') format('truetype');
}

@font-face {
    font-family: 'Talina';
    src: url('../fonts/Talina.ttf') format('truetype');
}

.font-montserrat{
    font-family:'Montserrat',sans-serif;
}

.font-poppins{
    font-family:'Poppins',sans-serif;
}

.font-rockybilly{
    font-family:'Rockybilly',cursive;
}

.font-eagle{
    font-family:'Eagle Horizon',cursive;
}

.font-awesome{
    font-family:'Awesome',sans-serif;
}

.font-talina{
    font-family:'Talina',serif;
}
/* =====================================
   GOOGLE FONT FALLBACK
===================================== */

:root{

    --primary:#ff2f92;
    --secondary:#4723d9;
    --accent:#22d3ee;

    --text:#111827;
    --muted:#64748b;

    --white:#ffffff;

    --border:#e5e7eb;

    --bg:#ffffff;
    --bg-soft:#faf8ff;

    --shadow-sm:
    0 10px 25px rgba(0,0,0,.05);

    --shadow-md:
    0 20px 60px rgba(0,0,0,.08);

    --radius:24px;
}

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

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

html{
    scroll-behavior:smooth;
}

body{

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

    color:var(--text);

    background:#fff;

    overflow-x:hidden;

    line-height:1.7;
}

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

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

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

h1,
h2,
h3,
h4,
h5,
h6,
.btn,
.primary-btn,
.secondary-btn{

    font-family:'Montserrat',sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.primary-btn,
.secondary-btn,
.desktop-nav a,
.mobile-nav a,
.login-btn{

    font-family:'Poppins',sans-serif;
}




h1{
    font-weight:800;
}

h2{
    font-weight:700;
}

h3{
    font-weight:700;
}

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

.container{

    width:min(1280px,92%);

    margin:auto;
}

/* =====================================
   LIGHT SECTION BACKGROUNDS
===================================== */

.section-soft{

    background:
    linear-gradient(
        180deg,
        #ffffff,
        #faf8ff
    );
}


/* =====================================
   SECTION HEADERS
===================================== */

    section{
        padding:30px 0;
    }


.section-tag{

    display:inline-block;

    font-size:12px;

    font-weight:600;

    color:var(--primary);

    letter-spacing:2px;

    margin-bottom:15px;
}



.section-header{

    text-align:center;

    margin-bottom:60px;
}

.section-header h2{
    font-size:52px;
    font-weight:700;
    letter-spacing:-2px;
    margin-bottom:15px;
}

.section-header p{

    color:var(--muted);

    max-width:650px;

    margin:auto;
}

.section-header h2 span{

    background:
    linear-gradient(
        135deg,
        var(--secondary),
        var(--primary)
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;
}





/* =====================================
   FLOATING DECORATIVE DOTS
===================================== */

.dots{

    position:absolute;

    width:120px;

    height:120px;

    background-image:
    radial-gradient(
        var(--primary) 1px,
        transparent 1px
    );

    background-size:
    12px 12px;

    opacity:.15;
}

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

.primary-btn{

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

    min-height:56px;
    padding:0 28px;

    background:#1f2937;

    color:#fff;

    border:1px solid #1f2937;

    border-radius:14px;

    font-size:16px;
    font-weight:600;
    line-height:1;

    text-decoration:none;

    cursor:pointer;

    appearance:none;
    -webkit-appearance:none;

    box-shadow:0 10px 25px rgba(17,24,39,.18);

    transition:all .25s ease;
}

.primary-btn:hover{

    background:#111827;
    border-color:#111827;

    transform:translateY(-2px);

    box-shadow:0 16px 35px rgba(17,24,39,.25);

}

.secondary-btn{
    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:56px;

    padding:0 28px;

    border-radius:14px;

    font-size:16px;

    font-weight:600;

    line-height:1;

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

    color:var(--text);

    background:#fff;

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

    transition:.3s;
}

.secondary-btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.22);
}

.secondary-btn:hover{

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



@media(max-width:992px){

    .container{
        width:94%;
    }
    
    section{
        padding:40px 0;
    }
.section-header h2{
    font-size:44px;
    line-height: 1;
}
.section-header {
  text-align: center;
  margin-bottom: 20px;
}   
}