/*==================================================
 GLOBAL STYLE.CSS
 Common styles used across all pages
==================================================*/

/* Google Font */

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


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

:root{

--primary:#1E5631;
--primary-dark:#164527;

--secondary:#2E7D32;

--accent:#FF9800;

--dark:#1F2937;

--text:#6B7280;

--white:#ffffff;

--light:#f8f9fa;

--border:#ECECEC;

--radius:18px;

--transition:.35s ease;

}


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

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

font-size:16px;

line-height:1.7;

color:var(--text);

background:#fff;

overflow-x:hidden;

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

transition:var(--transition);

}

ul{

list-style:none;

padding:0;

margin:0;

}

.container{

max-width:1320px;

}


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

h1,h2,h3,h4,h5,h6{

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

font-weight:700;

color:var(--dark);

margin-bottom:15px;

}

h1{

font-size:68px;

line-height:1.1;

}

h2{

font-size:48px;

}

h3{

font-size:34px;

}

h4{

font-size:24px;

}

p{

font-size:17px;

line-height:1.8;

color:var(--text);

margin-bottom:18px;

}


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

section{

padding:100px 0;

}

.section-title{

text-align:center;

max-width:760px;

margin:0 auto 70px;

}

.section-title span{

display:inline-block;

color:var(--accent);

font-size:14px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

margin-bottom:12px;

}

.section-title h2{

margin-bottom:20px;

}

.section-title p{

font-size:18px;

}


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

.btn{

border-radius:50px;

padding:16px 34px;

font-weight:700;

font-size:16px;

transition:.3s;

}

.btn-warning{

background:var(--accent);

border:none;

color:#fff;

}

.btn-warning:hover{

background:#e78d00;

color:#fff;

transform:translateY(-2px);

}

.btn-success{

background:#25D366;

border:none;

}

.btn-success:hover{

background:#1ebe5a;

transform:translateY(-2px);

}

.btn-outline-light{

border:2px solid #fff;

color:#fff;

}

.btn-outline-light:hover{

background:#fff;

color:#111;

}

.btn-outline-dark{

border:2px solid #333;

}

.btn-outline-dark:hover{

background:#333;

color:#fff;

}


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

.custom-navbar{

position:fixed;

top:0;

left:0;

width:100%;

z-index:9999;

padding:20px 0;

transition:.35s;

}

.custom-navbar.scrolled{

background:#fff;

padding:14px 0;

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

}

.logo-white{

height:55px;

}

.logo-dark{

height:55px;

display:none;

}

.custom-navbar.scrolled .logo-white{

display:none;

}

.custom-navbar.scrolled .logo-dark{

display:block;

}

.navbar-nav .nav-link{

font-weight:600;

color:#fff;

margin:0 12px;

position:relative;

}

.custom-navbar.scrolled .nav-link{

color:#222;

}

.navbar-nav .nav-link::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:var(--accent);

transition:.3s;

}

.navbar-nav .nav-link:hover::after{

width:100%;

}

.dropdown-menu{

border:none;

padding:12px;

border-radius:18px;

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

}

.dropdown-item{

padding:10px 15px;

border-radius:10px;

font-weight:500;

}

.dropdown-item:hover{

background:#f3f3f3;

}

.navbar-toggler{

border:none;

box-shadow:none !important;

}

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

.form-control,
.form-select{

height:55px;

border-radius:14px;

border:1px solid #ddd;

padding:12px 18px;

font-size:16px;

box-shadow:none;

transition:.3s;

}

.form-control:focus,
.form-select:focus{

border-color:var(--primary);

box-shadow:0 0 0 .2rem rgba(30,86,49,.12);

}

textarea.form-control{

height:150px;

resize:none;

padding-top:15px;

}

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

.card-box{

background:#fff;

border-radius:24px;

padding:35px;

box-shadow:0 20px 50px rgba(0,0,0,.08);

transition:.3s;

}

.card-box:hover{

transform:translateY(-8px);

box-shadow:0 30px 60px rgba(0,0,0,.12);

}

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

.footer{

background:#101820;

padding:80px 0 25px;

color:#bbb;

}

.footer-logo{

height:55px;

margin-bottom:20px;

}

.footer h5{

color:#fff;

margin-bottom:25px;

font-size:22px;

}

.footer-links li{

margin-bottom:12px;

}

.footer-links a{

color:#cfcfcf;

transition:.3s;

}

.footer-links a:hover{

color:#fff;

padding-left:8px;

}

.footer p{

color:#cfcfcf;

line-height:1.8;

}

.social-icons{

display:flex;

gap:12px;

margin-top:20px;

}

.social-icons a{

width:44px;

height:44px;

display:flex;

align-items:center;

justify-content:center;

background:#1b2a34;

border-radius:50%;

color:#fff;

transition:.3s;

}

.social-icons a:hover{

background:var(--accent);

}

.footer hr{

border-color:rgba(255,255,255,.1);

margin:45px 0 20px;

}

.copyright{

font-size:15px;

color:#999;

}

/*==================================================
WHATSAPP FLOAT
==================================================*/

.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:62px;

height:62px;

border-radius:50%;

background:#25D366;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:30px;

z-index:999;

box-shadow:0 12px 30px rgba(0,0,0,.25);

transition:.3s;

}

.whatsapp:hover{

transform:scale(1.08);

color:#fff;

}

/*==================================================
BACK TO TOP
==================================================*/

.back-top{

position:fixed;

right:25px;

bottom:100px;

width:50px;

height:50px;

border-radius:50%;

background:var(--accent);

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:18px;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:999;

}

.back-top.show{

opacity:1;

visibility:visible;

}

.back-top:hover{

color:#fff;

transform:translateY(-5px);

}

/*==================================================
HELPER CLASSES
==================================================*/

.rounded-20{

border-radius:20px;

}

.rounded-30{

border-radius:30px;

}

.shadow-custom{

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

}

.bg-light-custom{

background:#f8f9fa;

}

.text-primary-custom{

color:var(--primary);

}

.text-accent{

color:var(--accent);

}

.border-radius{

border-radius:18px;

}

/*==================================================
LOADER (Optional)
==================================================*/

.page-loader{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:#fff;

z-index:99999;

display:flex;

align-items:center;

justify-content:center;

}

.loader{

width:55px;

height:55px;

border:5px solid #eee;

border-top:5px solid var(--primary);

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#eee;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#184527;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:991px){

section{

padding:70px 0;

}

h1{

font-size:42px;

}

h2{

font-size:34px;

}

h3{

font-size:28px;

}

.navbar-collapse{

background:#1E5631;

padding:20px;

border-radius:18px;

margin-top:15px;

}

.navbar-nav .nav-link{

color:#fff !important;

padding:10px 0;

margin:0;

}

.logo-white,
.logo-dark{

height:45px;

}

.footer{

text-align:center;

}

.social-icons{

justify-content:center;

}

.whatsapp{

width:55px;

height:55px;

font-size:26px;

}

.back-top{

width:45px;

height:45px;

bottom:90px;

}

}

@media(max-width:576px){

.btn{

width:100%;

margin-bottom:10px;

}

.section-title{

margin-bottom:45px;

}

.section-title h2{

font-size:30px;

}

p{

font-size:16px;

}

}