/*==================================================
FOODFARM AGROTECH
STYLE.CSS
==================================================*/

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

:root{

--primary:#2E7D32;
--primary-light:#4CAF50;
--primary-dark:#1B5E20;

--secondary:#F9A825;
--secondary-light:#FFD54F;

--white:#ffffff;
--black:#1f2937;

--text:#5b6470;

--bg:#f8fbf8;

--card:#ffffff;

--border:#e8ecef;

--radius:18px;

--radius-sm:12px;

--shadow-sm:0 8px 25px rgba(0,0,0,.08);

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

--shadow-lg:0 30px 60px rgba(0,0,0,.15);

--transition:.35s ease;

}

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

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

html{
scroll-behavior:smooth;
scroll-padding-top:100px;
}

body{

font-family:'Poppins',sans-serif;
background:var(--bg);
color:var(--black);
line-height:1.7;
overflow-x:hidden;

}

.skip-link{
position:fixed;
top:10px;
left:10px;
z-index:100000;
padding:10px 16px;
border-radius:8px;
background:var(--primary-dark);
color:#fff;
transform:translateY(-150%);
}

.skip-link:focus{transform:translateY(0);}

img{

max-width:100%;
width:100%;
height:auto;
display:block;

}

button,
input,
select,
textarea{
font:inherit;
}

:focus-visible{
outline:3px solid var(--secondary);
outline-offset:3px;
}

a{

text-decoration:none;
color:inherit;

}

ul{

list-style:none;

}

section{

padding:100px 0;

}

.container{

width:min(1180px,92%);
margin:auto;

}

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

.section-title{

text-align:center;
margin-bottom:70px;

}

.section-title span{

display:inline-block;
padding:8px 18px;
border-radius:30px;

background:#E8F5E9;

color:var(--primary);

font-size:14px;

font-weight:600;

margin-bottom:18px;

}

.section-title h2{

font-size:42px;
font-weight:700;
margin-bottom:18px;

}

.section-title p{

max-width:700px;
margin:auto;
color:var(--text);

}

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

.btn{

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

padding:16px 34px;

background:var(--primary);

color:#fff;

border-radius:50px;

font-weight:600;

transition:var(--transition);

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

}

.btn:hover{

background:var(--primary-dark);

transform:translateY(-4px);

}

.btn-outline{

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

padding:16px 34px;

border:2px solid var(--primary);

border-radius:50px;

font-weight:600;

color:var(--primary);

transition:var(--transition);

}

.btn-outline:hover{

background:var(--primary);

color:#fff;

}

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

header{

position:fixed;

top:0;
left:0;

width:100%;

z-index:999;

background:rgba(255,255,255,.92);

backdrop-filter:blur(14px);

border-bottom:1px solid rgba(0,0,0,.05);

transition:.4s;

}

nav{

height:90px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo img{

height:70px;
width:auto;

}

.nav-links{

display:flex;

gap:34px;

align-items:center;

}

.nav-links li{

position:relative;

}

.nav-links a{

font-weight:500;

transition:.3s;

}

.nav-links a:hover{

color:var(--primary);

}

.nav-links a.active{

color:var(--primary);

}

.nav-links a::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:0;

height:2px;

background:var(--secondary);

transition:.3s;

}

.nav-links a:hover::after,

.nav-links a.active::after{

width:100%;

}

.nav-right{

display:flex;

gap:18px;

align-items:center;

}

.menu-btn{

display:none;

font-size:24px;

cursor:pointer;

border:0;
background:transparent;
padding:10px;
line-height:1;

}

/*=========================
HERO
=========================*/

.hero{

padding-top:170px;

padding-bottom:110px;

background:

linear-gradient(135deg,#F7FFF6,#ffffff);

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

width:500px;

height:500px;

background:#E8F5E9;

border-radius:50%;

top:-200px;

right:-180px;

opacity:.6;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:70px;

}

.badge{

display:inline-flex;

padding:10px 18px;

background:#E8F5E9;

color:var(--primary);

border-radius:40px;

font-weight:600;

margin-bottom:22px;

}

.hero h1{

font-size:60px;

font-weight:800;

line-height:1.1;

margin-bottom:25px;

}

.hero h1 span{

color:var(--primary);

}

.hero p{

font-size:18px;

color:var(--text);

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:18px;

margin-bottom:45px;

}

.hero-stats{

display:flex;

gap:40px;

}

.stat{

text-align:left;

}

.stat h2{

font-size:40px;

color:var(--primary);

font-weight:700;

}

.stat p{

font-size:15px;

color:var(--text);

}

/*=========================
HERO IMAGE
=========================*/

.hero-right{

position:relative;

display:flex;

justify-content:center;

}

.hero-circle{

width:540px;

height:540px;

border-radius:50%;

background:linear-gradient(135deg,#ffffff,#FFF8E7);

display:flex;

justify-content:center;

align-items:center;

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

animation:float 6s ease-in-out infinite;

}

.hero-circle img{

width:85%;

}

.floating-card{

position:absolute;

background:#fff;

padding:16px 20px;

border-radius:15px;

display:flex;

align-items:center;

gap:12px;

box-shadow:var(--shadow);

font-weight:600;

font-size:15px;

animation:floatCard 5s infinite ease-in-out;

}

.floating-card i{

font-size:20px;

color:var(--primary);

}

.card1{

left:-20px;

top:70px;

}

.card2{

right:-20px;

top:200px;

}

.card3{

bottom:50px;

left:40px;

}

/*=========================
TRUST BAR
=========================*/

.trust{

padding:40px 0;

background:#fff;

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

}

.trust-grid{

display:grid;

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

gap:25px;

}

.trust-box{

padding:25px;

text-align:center;

background:#fff;

border-radius:16px;

transition:.35s;

}

.trust-box:hover{

transform:translateY(-8px);

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

}

.trust-box i{

font-size:34px;

color:var(--primary);

margin-bottom:15px;

}

.trust-box h4{

font-size:17px;

font-weight:600;

}

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

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}
/*==================================================
ABOUT SECTION
==================================================*/

.about{
    background:var(--white);
}

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.about-image{
    position:relative;
}

.about-image img{
    border-radius:25px;
    box-shadow:var(--shadow-lg);
    transition:0.4s;
}

.about-image img:hover{
    transform:scale(1.02);
}

.about-content h3{
    font-size:38px;
    margin-bottom:20px;
    color:var(--primary-dark);
}

.about-content p{
    color:var(--text);
    margin-bottom:18px;
    font-size:16px;
}

.about-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin:35px 0;
}

.feature{
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    padding:15px 18px;
    border-radius:12px;
    box-shadow:var(--shadow-sm);
    transition:.35s;
}

.feature:hover{
    transform:translateY(-6px);
}

.feature i{
    color:var(--primary);
    font-size:20px;
}

/*==================================================
COMPANY STATS
==================================================*/

.stats{
    background:linear-gradient(135deg,#2E7D32,#43A047);
    color:#fff;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.counter-card{
    text-align:center;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(15px);
    border-radius:18px;
    padding:40px 25px;
    transition:.4s;
}

.counter-card:hover{
    transform:translateY(-10px);
}

.counter-card i{
    font-size:42px;
    margin-bottom:20px;
    color:#FFD54F;
}

.counter-card h2{
    font-size:48px;
    margin-bottom:10px;
    font-weight:700;
}

.counter-card p{
    font-size:17px;
}

/*==================================================
MISSION & VISION
==================================================*/

.mission{
    background:#F7FBF7;
}

.mission-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:35px;
}

.mission-card{
    background:#fff;
    padding:45px;
    border-radius:22px;
    box-shadow:var(--shadow-sm);
    transition:.35s;
}

.mission-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow);
}

.mission-card i{
    font-size:48px;
    color:var(--primary);
    margin-bottom:25px;
}

.mission-card h3{
    font-size:30px;
    margin-bottom:18px;
}

.mission-card p{
    color:var(--text);
}

/*==================================================
WHY CHOOSE US
==================================================*/

.why{
    background:#fff;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.why-card{
    background:#fff;
    padding:35px;
    border-radius:20px;
    text-align:center;
    border:1px solid #ececec;
    transition:.35s;
}

.why-card:hover{
    transform:translateY(-12px);
    box-shadow:var(--shadow);
}

.why-card i{
    width:75px;
    height:75px;
    line-height:75px;
    border-radius:50%;
    background:#E8F5E9;
    color:var(--primary);
    font-size:30px;
    margin-bottom:22px;
}

.why-card h3{
    margin-bottom:15px;
    font-size:24px;
}

.why-card p{
    color:var(--text);
    font-size:15px;
}

/*==================================================
PRODUCTS
==================================================*/

.products{
    background:#F8FBF8;
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
}

.product-card{
    background:#fff;
    padding:35px;
    border-radius:22px;
    box-shadow:var(--shadow-sm);
    transition:.35s;
}

.product-card:hover{
    transform:translateY(-12px);
    box-shadow:var(--shadow);
}

.product-icon{
    width:80px;
    height:80px;
    border-radius:50%;
    background:#E8F5E9;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:25px;
}

.product-icon i{
    color:var(--primary);
    font-size:34px;
}

.product-card h3{
    margin-bottom:20px;
    font-size:26px;
}

.product-card ul{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.product-card li{
    color:var(--text);
    position:relative;
    padding-left:22px;
}

.product-card li::before{
    content:"✔";
    position:absolute;
    left:0;
    color:var(--primary);
}

/*==================================================
PRIVATE LABEL
==================================================*/

.private-label{
    background:#fff;
}

.private-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.private-image img{
    border-radius:25px;
    box-shadow:var(--shadow-lg);
}

.subtitle{
    display:inline-block;
    background:#E8F5E9;
    color:var(--primary);
    padding:8px 18px;
    border-radius:30px;
    font-weight:600;
    margin-bottom:18px;
}

.private-content h2{
    font-size:42px;
    margin-bottom:25px;
}

.private-content p{
    color:var(--text);
    margin-bottom:30px;
}

.private-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-bottom:35px;
}

.private-list .item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px;
    background:#F8FBF8;
    border-radius:12px;
}

.private-list .item i{
    color:var(--primary);
    font-size:18px;
}

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

.about,
.products,
.private-label,
.mission,
.why{
    position:relative;
    overflow:hidden;
}

.about::before,
.products::before,
.private-label::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(76,175,80,.05);
    top:-50px;
    right:-50px;
}

/*==================================================
INDUSTRIES
==================================================*/

.industries{
    background:#f8fbf8;
}

.industry-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.industry-card{
    background:#fff;
    border-radius:20px;
    padding:40px 30px;
    text-align:center;
    transition:.35s;
    box-shadow:var(--shadow-sm);
}

.industry-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow);
}

.industry-card i{
    width:80px;
    height:80px;
    line-height:80px;
    border-radius:50%;
    background:#E8F5E9;
    color:var(--primary);
    font-size:32px;
    margin-bottom:20px;
}

.industry-card h4{
    font-size:22px;
    font-weight:600;
}


/*==================================================
PROCESS
==================================================*/

.process{
    background:#fff;
}

.process-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:25px;
    position:relative;
}

.step{
    position:relative;
    background:#fff;
    text-align:center;
    padding:35px 25px;
    border-radius:20px;
    box-shadow:var(--shadow-sm);
    transition:.35s;
}

.step:hover{
    transform:translateY(-10px);
}

.step span{
    width:70px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto auto 20px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    font-size:26px;
    font-weight:700;
}

.step h3{
    font-size:24px;
    margin-bottom:15px;
}

.step p{
    color:var(--text);
}


/*==================================================
GALLERY
==================================================*/

.gallery{
    background:#F8FBF8;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.gallery-item{
    overflow:hidden;
    border-radius:20px;
    position:relative;
    box-shadow:var(--shadow-sm);
}

.gallery-item img{
    width:100%;
    height:320px;
    object-fit:cover;
    transition:.5s;
}

.gallery-item:hover img{
    transform:scale(1.08);
}

.gallery-item::after{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
to top,
rgba(0,0,0,.45),
transparent);

opacity:0;

transition:.35s;

}

.gallery-item:hover::after{

opacity:1;

}


/*==================================================
TESTIMONIALS
==================================================*/

.testimonials{
    background:#fff;
}

.testimonial-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.testimonial-card{
    background:#fff;
    border-radius:22px;
    padding:35px;
    box-shadow:var(--shadow-sm);
    transition:.35s;
}

.testimonial-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow);
}

.quote{

width:65px;
height:65px;
border-radius:50%;
background:#E8F5E9;

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

margin-bottom:20px;

}

.quote i{

color:var(--primary);
font-size:28px;

}

.testimonial-card p{

color:var(--text);
margin-bottom:25px;

}

.client{

display:flex;
align-items:center;
gap:15px;

}

.client img{

width:60px;
height:60px;
border-radius:50%;
object-fit:cover;

}

.client > i{
width:60px;
height:60px;
border-radius:50%;
display:grid;
place-items:center;
flex:0 0 auto;
background:#E8F5E9;
color:var(--primary);
font-size:24px;
}

.client h4{

font-size:18px;

}

.client span{

font-size:14px;
color:gray;

}


/*==================================================
CALL TO ACTION
==================================================*/

.cta{

padding:110px 0;

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

color:#fff;

text-align:center;

}

.cta-content{

max-width:850px;

margin:auto;

}

.cta-content span{

display:inline-block;

padding:10px 22px;

border-radius:30px;

background:rgba(255,255,255,.15);

margin-bottom:20px;

}

.cta-content h2{

font-size:48px;

margin-bottom:25px;

}

.cta-content p{

font-size:18px;

margin-bottom:40px;

opacity:.95;

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

}

.cta .btn{

background:#fff;

color:var(--primary);

}

.cta .btn:hover{

background:#f5f5f5;

}

.cta .btn-outline{

border:2px solid #fff;

color:#fff;

}

.cta .btn-outline:hover{

background:#fff;

color:var(--primary);

}


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

footer{

background:#111827;

color:#fff;

padding-top:80px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1.2fr;

gap:40px;

padding-bottom:50px;

}

.footer-logo{

width:180px;

margin-bottom:25px;

}

.footer-col p{

opacity:.8;

margin-bottom:25px;

}

.footer-col h3{

margin-bottom:25px;

font-size:22px;

}

.footer-col ul{

display:flex;

flex-direction:column;

gap:15px;

}

.footer-col ul li{

opacity:.8;

transition:.3s;

}

.footer-col ul li:hover{

color:var(--secondary);

padding-left:6px;

}

.footer-col ul li i{

margin-right:10px;

color:var(--secondary);

}


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

.social-links{

display:flex;

gap:14px;

}

.social-links a{

width:45px;

height:45px;

border-radius:50%;

background:rgba(255,255,255,.08);

display:flex;

justify-content:center;

align-items:center;

transition:.35s;

}

.social-links a:hover{

background:var(--secondary);

color:#111;

transform:translateY(-5px);

}


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

.footer-bottom{

border-top:1px solid rgba(255,255,255,.08);

padding:25px 0;

text-align:center;

opacity:.75;

}


/*==================================================
SCROLL TO TOP
==================================================*/

.scroll-top{

position:fixed;

right:25px;

bottom:30px;

width:55px;

height:55px;

border-radius:50%;

background:var(--primary);

color:#fff;

display:flex;

justify-content:center;

align-items:center;

font-size:22px;

box-shadow:var(--shadow);

z-index:100;

transition:.35s;

}

.scroll-top:hover{

background:var(--primary-dark);

transform:translateY(-6px);

}


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

.whatsapp{

position:fixed;

left:25px;

bottom:30px;

width:60px;

height:60px;

border-radius:50%;

background:#25D366;

color:#fff;

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

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

z-index:100;

transition:.35s;

animation:pulse 2s infinite;

}

.whatsapp:hover{

transform:scale(1.08);

}


/*==================================================
UTILITY
==================================================*/

.text-center{

text-align:center;

}

.mt-40{

margin-top:40px;

}

.mb-40{

margin-bottom:40px;

}

.shadow{

box-shadow:var(--shadow);

}

.radius{

border-radius:20px;

}


/*==================================================
PULSE
==================================================*/

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(37,211,102,.5);

}

70%{

box-shadow:0 0 0 18px rgba(37,211,102,0);

}

100%{

box-shadow:0 0 0 0 rgba(37,211,102,0);

}

}
/*==================================================
LOADER
==================================================*/

.loader{

position:fixed;
top:0;
left:0;
width:100%;
height:100vh;

background:#fff;

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

z-index:99999;

transition:.6s;

}

.loader.hide{

opacity:0;
visibility:hidden;

}

.loader-logo{

display:flex;
flex-direction:column;
align-items:center;
gap:20px;

}

.loader-logo img{

width:130px;

animation:loaderRotate 2s linear infinite;

}

.loader-logo h2{

font-size:28px;
font-weight:700;
color:var(--primary);

}

@keyframes loaderRotate{

100%{

transform:rotate(360deg);

}

}


/*==================================================
COOKIE BANNER
==================================================*/

.cookie-banner{

position:fixed;

bottom:30px;
left:30px;

width:380px;

background:#fff;

padding:28px;

border-radius:20px;

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

z-index:1000;

display:none;

}

.cookie-banner.show{

display:block;

animation:slideUp .5s ease;

}

.cookie-banner h3{

margin-bottom:12px;

font-size:22px;

}

.cookie-banner p{

font-size:15px;

color:var(--text);

margin-bottom:20px;

}

.cookie-buttons{

display:flex;

gap:15px;

}


/*==================================================
FORM
==================================================*/

.contact-form{

background:#fff;

padding:45px;

border-radius:24px;

box-shadow:var(--shadow);

}

.form-row{

display:grid;

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

gap:20px;

margin-bottom:20px;

}

.form-group{

display:flex;

flex-direction:column;

margin-bottom:20px;

}

.form-group label{

margin-bottom:10px;

font-weight:600;

}

.form-group input,

.form-group textarea,

.form-group select{

padding:16px;

border:1px solid #ddd;

border-radius:12px;

font-family:inherit;

font-size:15px;

transition:.3s;

background:#fff;

}

.form-group textarea{

height:170px;

resize:vertical;

}

.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus{

outline:none;

border-color:var(--primary);

box-shadow:0 0 0 4px rgba(76,175,80,.12);

}


/*==================================================
CONTACT INFO
==================================================*/

.contact-info{

display:grid;

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

gap:25px;

margin-bottom:50px;

}

.info-card{

background:#fff;

padding:35px;

border-radius:20px;

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

display:flex;

gap:18px;

align-items:flex-start;

transition:.35s;

}

.info-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

.info-card i{

width:65px;

height:65px;

border-radius:50%;

background:#E8F5E9;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:var(--primary);

flex-shrink:0;

}

.info-card h4{

margin-bottom:8px;

font-size:22px;

}

.info-card p{

color:var(--text);

}


/*==================================================
NEWSLETTER
==================================================*/

.newsletter{

background:linear-gradient(135deg,#2E7D32,#1B5E20);

padding:80px 0;

color:#fff;

}

.newsletter-wrapper{

display:flex;

justify-content:space-between;

align-items:center;

gap:40px;

}

.newsletter-content h2{

font-size:42px;

margin-bottom:15px;

}

.newsletter-content p{

opacity:.92;

}

.newsletter-form{

display:flex;

background:#fff;

padding:8px;

border-radius:60px;

width:520px;

}

.newsletter-form input{

flex:1;

border:none;

padding:18px;

font-size:16px;

border-radius:60px;

outline:none;

}

.newsletter-form button{

border:none;

padding:18px 35px;

border-radius:60px;

background:var(--secondary);

font-weight:700;

cursor:pointer;

transition:.35s;

}

.newsletter-form button:hover{

background:#FFC107;

}


/*==================================================
BREADCRUMB
==================================================*/

.breadcrumb{

padding:150px 0 70px;

background:linear-gradient(135deg,#2E7D32,#43A047);

color:#fff;

text-align:center;

}

.breadcrumb h1{

font-size:52px;

margin-bottom:15px;

}

.breadcrumb ul{

display:flex;

justify-content:center;

gap:12px;

}

.breadcrumb li{

opacity:.9;

}

.breadcrumb a:hover{

color:#FFD54F;

}


/*==================================================
BACKGROUNDS
==================================================*/

.bg-light{

background:#F8FBF8;

}

.bg-white{

background:#fff;

}

.bg-green{

background:linear-gradient(135deg,#2E7D32,#43A047);

color:#fff;

}


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

.card{

background:#fff;

padding:35px;

border-radius:20px;

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

transition:.35s;

}

.card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}


/*==================================================
IMAGE EFFECTS
==================================================*/

.image-hover{

overflow:hidden;

border-radius:20px;

}

.image-hover img{

transition:.6s;

}

.image-hover:hover img{

transform:scale(1.08);

}


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

.text-primary{

color:var(--primary);

}

.text-secondary{

color:var(--secondary);

}

.text-muted{

color:var(--text);

}


/*==================================================
SPACING HELPERS
==================================================*/

.pt-100{

padding-top:100px;

}

.pb-100{

padding-bottom:100px;

}

.py-100{

padding:100px 0;

}

.mt-20{

margin-top:20px;

}

.mt-30{

margin-top:30px;

}

.mt-50{

margin-top:50px;

}

.mb-20{

margin-bottom:20px;

}

.mb-30{

margin-bottom:30px;

}

.mb-50{

margin-bottom:50px;

}


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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f3f3f3;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--primary-dark);

}


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

::selection{

background:var(--primary);

color:#fff;

}


/*==================================================
SLIDE UP
==================================================*/

@keyframes slideUp{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*==================================================
FADE IN
==================================================*/

.fade-up{

opacity:0;

transform:translateY(40px);

transition:.8s ease;

}

.fade-up.active{

opacity:1;

transform:translateY(0);

}


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

header.scrolled{

height:80px;

background:#fff;

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

}


/*==================================================
END OF STYLE.CSS
==================================================*/

@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
scroll-behavior:auto !important;
transition-duration:.01ms !important;
}

header.scrolled nav{height:80px;}
}

@supports not (backdrop-filter:blur(1px)){
header{background:#fff;}
}

.btn:active{
transform:translateY(-1px);
box-shadow:none;
}

.btn:disabled,
.btn[aria-disabled="true"],
.btn-outline:disabled,
.btn-outline[aria-disabled="true"]{
opacity:.55;
cursor:not-allowed;
pointer-events:none;
box-shadow:none;
}

.btn-outline:active{transform:translateY(1px);}

.form-group [aria-invalid="true"]{border-color:#b42318;}

.field-error{
min-height:1.5em;
margin-top:6px;
color:#b42318;
font-size:14px;
font-weight:500;
}

.form-status{
min-height:1.7em;
margin-top:16px;
color:var(--primary-dark);
font-weight:600;
}