/*==================================================
TOPCABS DESIGN SYSTEM
VERSION 1.0
==================================================*/

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


:root{

/* Brand */

--tc-primary:#0D6EFD;
--tc-primary-dark:#0B5ED7;

--tc-secondary:#0F172A;

--tc-accent:#FFC107;

--tc-success:#25D366;


/* Backgrounds */

--tc-white:#FFFFFF;

--tc-light:#F8FAFC;

--tc-light-blue:#F5F9FF;


/* Text */

--tc-text:#1E293B;

--tc-text-light:#64748B;

--tc-text-white:#FFFFFF;


/* Border */

--tc-border:#E2E8F0;


/* Radius */

--radius-sm:10px;

--radius-md:18px;

--radius-lg:28px;

--radius-pill:999px;


/* Shadow */

--shadow-sm:0 6px 15px rgba(0,0,0,.05);

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

--shadow-lg:0 20px 50px rgba(0,0,0,.12);


/* Transition */

--transition:.35s ease;


/* Container */

--container:1280px;

}

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


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

html{
scroll-behavior:smooth;
}

body{

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

background:var(--tc-white);

color:var(--tc-text);

overflow-x:hidden;

line-height:1.7;

padding-top:80px;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

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

h1{

font-size:56px;

line-height:1.2;

font-weight:800;

}

h2{

font-size:42px;

line-height:1.3;

font-weight:700;

}

h3{

font-size:24px;

font-weight:600;

}

p{

font-size:17px;

color:var(--tc-text-light);

}

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

.container{

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

margin:auto;

}

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

.section{

padding:90px 0;

}

.section-light{

background:var(--tc-light);

}

.section-white{

background:#fff;

}


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

.section-header{

text-align:center;

margin-bottom:60px;

}

.section-tag{

display:inline-block;

padding:8px 18px;

border-radius:999px;

background:#EAF3FF;

color:var(--tc-primary);

font-size:14px;

font-weight:700;

letter-spacing:.5px;

margin-bottom:18px;

}

.section-header h2{

margin-bottom:18px;

}

.section-header p{

max-width:760px;

margin:auto;

}

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

.grid-2{

display:grid;

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

gap:30px;

}

.grid-3{

display:grid;

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

gap:30px;

}

.grid-4{

display:grid;

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

gap:30px;

}

/*==================================================
                08 ICONS
==================================================*/

.tc-card{

background:#fff;

padding:32px;

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

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

transition:var(--transition);

height:100%;

}

.tc-card:hover{

transform:translateY(-8px);

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

}

/*==================================================
                09 BADGES
==================================================*/

.tc-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:16px 34px;

border-radius:999px;

font-weight:700;

transition:var(--transition);

}

.tc-btn-primary{

background:var(--tc-primary);

color:#fff;

}

.tc-btn-primary:hover{

background:var(--tc-primary-dark);

transform:translateY(-3px);

}

.tc-btn-whatsapp{

background:#25D366;

color:#fff;

}

/*==================================================
                10 FORMS
==================================================*/

@media(max-width:991px){

.grid-4{

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

}

.grid-3{

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

}

}

@media(max-width:768px){

.grid-2,

.grid-3,

.grid-4{

grid-template-columns:1fr;

}

h1{

font-size:40px;

}

h2{

font-size:32px;

}

}

/*==================================================
                11 UTILITIES
==================================================*/


/*==================================================
                 12 SHADOWS
==================================================*/


/*==================================================
                13 ANIMATIONS
==================================================*/