/*==================================================
    SS ONE
    STYLE.CSS
    Version : 1.0
==================================================*/


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

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

html{

    scroll-behavior:smooth;

}

body{

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

    background:#f4f8fd;

    color:#1f2937;

    overflow-x:hidden;

    line-height:1.6;

}


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

:root{

    --primary:#17375E;

    --primary-dark:#102743;

    --secondary:#F59E0B;

    --secondary-hover:#D97706;

    --text:#1F2937;

    --text-light:#6B7280;

    --white:#ffffff;

    --background:#F4F8FD;

    --card:#ffffff;

    --border:#e5e7eb;

    --radius:18px;

    --transition:.35s;

}


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

.container{

    width:100%;

    max-width:1280px;

    margin:auto;

    padding:0 30px;

}


/*==================================================
LINKS
==================================================*/

a{

    text-decoration:none;

    color:inherit;

}


/*==================================================
IMAGES
==================================================*/

img{

    display:block;

    max-width:100%;

}


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

section{

    position:relative;

}


/*==================================================
HEADINGS
==================================================*/

h1{

    font-size:64px;

    font-weight:800;

    color:var(--primary);

    line-height:1.15;

}

h2{

    font-size:44px;

    font-weight:800;

    color:var(--primary);

}

h3{

    font-size:24px;

    font-weight:700;

}

p{

    color:var(--text-light);

}


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

.section-header{

    text-align:center;

    max-width:760px;

    margin:0 auto 70px;

}

.section-header h2{

    margin:20px 0;

}

.section-header p{

    font-size:18px;

    line-height:1.8;

}


/*==================================================
BADGE
==================================================*/

.section-badge{

    display:inline-block;

    background:#eef5ff;

    color:var(--primary);

    padding:10px 22px;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

}

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

.btn,
.btn2{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 34px;

    border-radius:12px;

    font-size:16px;

    font-weight:700;

    transition:all .35s ease;

}

.btn{

    background:var(--secondary);

    color:#fff;

}

.btn:hover{

    background:var(--secondary-hover);

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(245,158,11,.35);

}

.btn2{

    background:#fff;

    color:var(--primary);

    border:2px solid #dbe4f0;

}

.btn2:hover{

    border-color:var(--primary);

    transform:translateY(-3px);

}


/*==================================================
GRID
==================================================*/

.grid{

    display:grid;

    gap:30px;

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}


/*==================================================
CARD
==================================================*/

.card{

    background:#fff;

    border-radius:20px;

    padding:35px;

    border:1px solid #edf1f7;

    transition:all .35s ease;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.08);

}

.card h3{

    margin:20px 0 15px;

}

.card p{

    line-height:1.8;

}


/*==================================================
ICON
==================================================*/

.icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eef5ff;

    border-radius:18px;

    font-size:32px;

}


/*==================================================
ANIMATION
==================================================*/

.hidden{

    opacity:0;

    transform:translateY(40px);

    transition:.8s ease;

}

.visible{

    opacity:1;

    transform:translateY(0);

}


/*==================================================
TOP BUTTON
==================================================*/

#topButton{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:var(--secondary);

    color:#fff;

    font-size:22px;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:999;

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

}

#topButton.show{

    opacity:1;

    visibility:visible;

}

#topButton:hover{

    transform:translateY(-5px);

}


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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#edf2f7;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--secondary);

}


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

::selection{

    background:var(--secondary);

    color:#fff;

}