/* =====================================================
VISION CARE INITIATIVE UGANDA
PREMIUM NGO WEBSITE DESIGN SYSTEM

STYLE.CSS PART 1/5

FOUNDATION
BRAND SYSTEM
NAVBAR
BUTTONS

===================================================== */


/* =====================================================
ROOT BRAND COLORS
===================================================== */


:root {

    --blue: #0057A8;
    --green: #00A86B;
    --gold: #F5B700;
    --navy: #0B1F33;

    --white:#ffffff;
    --light:#F7F9FC;
    --grey:#6B7280;
    --dark:#172033;

    --border:#e6eaf0;

    --shadow:
    0 20px 50px rgba(11,31,51,.12);

    --shadow-soft:
    0 10px 30px rgba(0,0,0,.08);

    --radius:25px;

    --transition:.35s ease;

}





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


*{

margin:0;
padding:0;
box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

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

color:var(--grey);

background:white;

overflow-x:hidden;

}




img{

max-width:100%;

height:auto;

display:block;

}



a{

text-decoration:none;

transition:var(--transition);

}



ul{

list-style:none;

padding:0;

margin:0;

}





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



h1,
h2,
h3,
h4,
h5{

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

color:var(--dark);

font-weight:700;

line-height:1.2;

}



h1{

font-size:64px;

}



h2{

font-size:45px;

}



h3{

font-size:28px;

}



p{

font-size:16px;

line-height:1.8;

}





/* =====================================================
GLOBAL SECTIONS
===================================================== */



section{

padding:100px 0;

}




.container{

max-width:1200px;

}




.section-header{

max-width:750px;

margin:auto;

text-align:center;

margin-bottom:60px;

}



.section-header span{


display:inline-block;

padding:8px 20px;

background:#e8f7ef;

color:var(--green);

font-weight:700;

font-size:13px;

border-radius:50px;

letter-spacing:1px;

margin-bottom:20px;


}



.section-header h2{

margin-bottom:20px;

}





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



.site-header{


position:sticky;

top:0;

z-index:9999;

background:white;


}




.navbar{


padding:15px 0;

background:white;

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


}




.navbar-brand{


display:flex;

align-items:center;

gap:15px;


}




.navbar-brand img{


width:75px;

height:75px;

object-fit:contain;


}




.brand-text{


display:flex;

flex-direction:column;


}



.brand-text strong{


font-family:'Poppins';

font-size:18px;

color:var(--blue);


}




.brand-text small{


color:var(--green);

font-size:12px;

font-weight:600;


}







.navbar-nav{


gap:10px;


}




.nav-link{


font-weight:600;

font-size:15px;

color:var(--dark)!important;

padding:12px 15px!important;


}




.nav-link:hover,
.nav-link.active{


color:var(--green)!important;


}







.navbar-toggler{


border:none;

font-size:25px;

color:var(--blue);


}



.navbar-toggler:focus{


box-shadow:none;


}









/* =====================================================
BUTTON SYSTEM
===================================================== */





.btn-primary{


background:var(--green);

color:white;

padding:15px 35px;

border-radius:50px;

font-weight:700;

display:inline-flex;

align-items:center;

gap:10px;

border:none;


}



.btn-primary:hover{


background:var(--blue);

color:white;

transform:translateY(-4px);


}







.btn-secondary{


background:var(--blue);

color:white;

padding:15px 35px;

border-radius:50px;

font-weight:700;

display:inline-flex;

align-items:center;

gap:10px;


}



.btn-secondary:hover{


background:var(--green);

color:white;


}





.btn-outline{


border:2px solid white;

color:white;

padding:14px 35px;

border-radius:50px;

font-weight:700;


}



.btn-outline:hover{


background:white;

color:var(--blue);


}







/* DONATE BUTTON NAV */



.donate-btn{


background:var(--green);

color:white!important;

padding:13px 28px!important;

border-radius:50px;

font-weight:700;


}



.donate-btn:hover{


background:var(--gold);

color:var(--dark)!important;


}









/* =====================================================
END PART 1
===================================================== */
/* =====================================================
VISION CARE INITIATIVE UGANDA

STYLE.CSS PART 2/5

HERO
HOME PAGE
IMPACT
STORIES
GALLERY

===================================================== */







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



.hero{


min-height:750px;

display:flex;

align-items:center;

position:relative;

background-size:cover;

background-position:center;

}



.hero::before{


content:"";

position:absolute;

inset:0;

background:
linear-gradient(
90deg,
rgba(11,31,51,.85),
rgba(0,87,168,.45)
);


}




.hero .container{


position:relative;

z-index:2;


}




.hero-content{


max-width:760px;


}




.hero-content .tag{


display:inline-block;

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

backdrop-filter:blur(5px);

color:white;

padding:10px 22px;

border-radius:50px;

font-weight:700;

font-size:13px;

margin-bottom:25px;


}




.hero-content h1{


color:white;

font-size:68px;

line-height:1.1;

margin-bottom:25px;


}




.hero-content p{


color:white;

font-size:20px;

max-width:650px;

margin-bottom:35px;


}





.hero-buttons{


display:flex;

gap:20px;

flex-wrap:wrap;


}









/* =====================================================
PAGE HERO
(INNER PAGES)
===================================================== */



.page-hero{


height:500px;

display:flex;

align-items:center;

background:

linear-gradient(
rgba(11,31,51,.75),
rgba(0,87,168,.55)
),

url("../images/page-banner.jpg");


background-size:cover;

background-position:center;


}




.page-hero h1{


color:white;

font-size:58px;


}




.page-hero p{


color:white;

font-size:18px;

max-width:700px;


}







/* =====================================================
HOME INTRO SECTION
===================================================== */



.intro-section{


background:white;


}




.intro-image{


border-radius:35px;

overflow:hidden;

box-shadow:var(--shadow);


}




.intro-image img{


width:100%;

height:520px;

object-fit:cover;


}





.intro-content h2{


margin-bottom:25px;


}





.intro-content p{


margin-bottom:20px;


}








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



.mission-card{


padding:35px;

background:white;

border-radius:25px;

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

height:100%;

transition:var(--transition);


}



.mission-card:hover{


transform:translateY(-10px);

box-shadow:var(--shadow);


}




.mission-card i{


height:70px;

width:70px;

border-radius:50%;

background:#e8f7ef;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

color:var(--green);

margin-bottom:25px;


}






/* =====================================================
IMPACT STATISTICS
===================================================== */



.impact-section{


background:var(--light);


}





.impact-card{


background:white;

border-radius:25px;

padding:40px 20px;

text-align:center;

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

height:100%;

transition:var(--transition);


}



.impact-card:hover{


transform:translateY(-8px);


}




.impact-card i{


font-size:45px;

color:var(--gold);

margin-bottom:20px;


}





.impact-card h3{


font-size:45px;

color:var(--blue);

margin-bottom:10px;


}




.impact-card p{


font-weight:600;

color:var(--dark);


}








/* =====================================================
PROGRAM PREVIEW CARDS
===================================================== */



.program-card{


background:white;

border-radius:30px;

overflow:hidden;

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

height:100%;

transition:var(--transition);


}



.program-card:hover{


transform:translateY(-12px);

box-shadow:var(--shadow);


}





.program-card img{


height:260px;

width:100%;

object-fit:cover;


}





.program-card-content{


padding:30px;


}




.program-card-content h3{


font-size:25px;

margin-bottom:15px;


}




.program-card-content a{


color:var(--green);

font-weight:700;


}





.program-card-content a:hover{


color:var(--blue);


}








/* =====================================================
STORY / TESTIMONIAL SECTION
===================================================== */



.story-section{


background:#fff;


}





.story-card{


border-radius:30px;

overflow:hidden;

background:white;

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

height:100%;


}



.story-card img{


width:100%;

height:300px;

object-fit:cover;


}




.story-body{


padding:30px;


}



.story-body h3{


margin-bottom:15px;


}







.testimonial{


background:var(--light);

padding:35px;

border-radius:30px;

height:100%;


}



.testimonial i{


color:var(--gold);

font-size:35px;


}



.testimonial p{


font-style:italic;


}



.testimonial h4{


font-size:18px;

color:var(--blue);


}









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



.gallery-item{


border-radius:25px;

overflow:hidden;

height:280px;


}




.gallery-item img{


width:100%;

height:100%;

object-fit:cover;

transition:var(--transition);


}




.gallery-item:hover img{


transform:scale(1.08);


}








/* =====================================================
END PART 2
===================================================== */
/* =====================================================
VISION CARE INITIATIVE UGANDA

STYLE.CSS PART 3/5

ABOUT PAGE
PROGRAMS PAGE

===================================================== */







/* =====================================================
ABOUT PAGE
===================================================== */



.about-section{


background:white;


}





.about-image{


position:relative;


}




.about-image img{


height:550px;

width:100%;

object-fit:cover;

border-radius:35px;

box-shadow:var(--shadow);


}







.about-badge{


position:absolute;

bottom:30px;

left:30px;

background:white;

padding:25px;

border-radius:25px;

box-shadow:var(--shadow);

max-width:280px;


}




.about-badge h3{


font-size:38px;

color:var(--green);


}




.about-badge p{


font-weight:600;

color:var(--dark);


}








/* ORGANIZATION STORY */



.story-content h2{


margin-bottom:25px;


}



.story-content p{


margin-bottom:20px;


}









/* =====================================================
MISSION VISION VALUES
===================================================== */



.mv-section{


background:var(--light);


}



.mv-card{


background:white;

padding:40px 30px;

border-radius:30px;

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

height:100%;

text-align:center;

transition:var(--transition);


}



.mv-card:hover{


transform:translateY(-10px);


}




.mv-card i{


height:80px;

width:80px;

display:flex;

align-items:center;

justify-content:center;

margin:auto auto 25px;

border-radius:50%;

font-size:35px;

background:#e8f7ef;

color:var(--green);


}




.mv-card h3{


margin-bottom:15px;


}









/* =====================================================
CORE VALUES
===================================================== */



.value-card{


background:white;

border-radius:25px;

padding:35px;

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

text-align:center;

height:100%;

transition:var(--transition);


}



.value-card:hover{


transform:translateY(-8px);

}



.value-card span{


font-size:45px;

display:block;

margin-bottom:20px;

color:var(--gold);


}





.value-card h3{


font-size:23px;


}









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



.team-section{


background:white;


}





.team-card{


background:white;

border-radius:30px;

overflow:hidden;

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

height:100%;

transition:var(--transition);


}



.team-card:hover{


transform:translateY(-10px);


}




.team-card img{


height:330px;

width:100%;

object-fit:cover;


}




.team-info{


padding:25px;

text-align:center;


}




.team-info h3{


font-size:22px;


}




.team-info span{


color:var(--green);

font-weight:600;


}








/* =====================================================
TIMELINE
===================================================== */



.timeline{


position:relative;

max-width:900px;

margin:auto;


}



.timeline::before{


content:"";

position:absolute;

left:50%;

top:0;

height:100%;

width:3px;

background:var(--green);

transform:translateX(-50%);


}




.timeline-item{


width:50%;

padding:30px;

position:relative;


}



.timeline-item:nth-child(odd){


left:0;

text-align:right;


}




.timeline-item:nth-child(even){


left:50%;


}





.timeline-item::before{


content:"";

position:absolute;

top:40px;

width:18px;

height:18px;

background:var(--gold);

border-radius:50%;


}



.timeline-item:nth-child(odd)::before{


right:-9px;


}



.timeline-item:nth-child(even)::before{


left:-9px;


}









/* =====================================================
PROGRAMS PAGE
===================================================== */





.programs-section{


background:var(--light);


}





.program-intro{


text-align:center;

max-width:800px;

margin:auto;


}





.program-intro h2{


margin-bottom:20px;


}









/* PROGRAM FEATURE CARD */



.program-feature{


background:white;

border-radius:30px;

overflow:hidden;

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

height:100%;

transition:var(--transition);


}




.program-feature:hover{


transform:translateY(-10px);

box-shadow:var(--shadow);


}




.program-feature img{


height:280px;

width:100%;

object-fit:cover;


}




.program-feature-body{


padding:35px;


}





.program-feature-body h3{


font-size:26px;

color:var(--blue);


}





.program-feature-body p{


margin:15px 0;


}





.program-feature-body a{


font-weight:700;

color:var(--green);


}








/* =====================================================
PROGRAM DETAIL SECTIONS
===================================================== */



.program-detail{


background:white;


}




.program-detail:nth-child(even){


background:var(--light);


}






.program-image{


border-radius:35px;

height:450px;

width:100%;

object-fit:cover;

box-shadow:var(--shadow);


}




.program-number{


font-size:90px;

font-weight:800;

color:#e9f1fa;

line-height:1;

font-family:'Poppins';


}




.program-detail h2{


margin-top:-20px;

margin-bottom:20px;


}





.program-list li{


margin-bottom:15px;

padding-left:30px;

position:relative;

font-weight:500;


}





.program-list li::before{


content:"✓";

position:absolute;

left:0;

color:var(--green);

font-weight:bold;


}








/* =====================================================
COMMUNITY IMPACT BOX
===================================================== */



.impact-banner{


background:

linear-gradient(
135deg,
var(--blue),
var(--green)
);


padding:70px;

border-radius:35px;

color:white;


}



.impact-banner h2{


color:white;


}



.impact-banner p{


color:white;


}








/* =====================================================
END PART 3
===================================================== */
/* =====================================================
VISION CARE INITIATIVE UGANDA

STYLE.CSS PART 4/5

DONATE PAGE
CONTACT PAGE
FORMS
PAYMENT SECTIONS

===================================================== */







/* =====================================================
DONATE PAGE HERO
===================================================== */



.donate-hero{


min-height:600px;

display:flex;

align-items:center;

background:

linear-gradient(
rgba(11,31,51,.75),
rgba(0,87,168,.55)
),

url("../images/donate-banner.jpg");


background-size:cover;

background-position:center;


}



.donate-hero h1{


color:white;

font-size:65px;


}




.donate-hero p{


color:white;

font-size:20px;

max-width:700px;


}








/* =====================================================
DONATION INTRO
===================================================== */



.donate-intro{


background:white;


}



.donate-intro h2{


margin-bottom:25px;


}









/* =====================================================
DONATION OPTIONS
===================================================== */



.donation-options{


background:var(--light);


}





.donation-card{


background:white;

border-radius:30px;

padding:40px 30px;

text-align:center;

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

height:100%;

transition:var(--transition);


}




.donation-card:hover{


transform:translateY(-10px);

box-shadow:var(--shadow);


}





.donation-card .icon{


height:80px;

width:80px;

background:#e8f7ef;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin:0 auto 25px;

font-size:35px;

color:var(--green);


}




.donation-card h3{


font-size:25px;

margin-bottom:15px;


}








/* =====================================================
DONATION AMOUNTS
===================================================== */



.amount-section{


background:white;


}




.amount-grid{


display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;


}



.amount-option{


padding:16px 35px;

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

border-radius:50px;

color:var(--blue);

font-weight:700;

cursor:pointer;

transition:var(--transition);


}



.amount-option:hover,
.amount-option.active{


background:var(--blue);

color:white;


}








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



.donation-box{


background:white;

padding:45px;

border-radius:35px;

box-shadow:var(--shadow);


}




.form-control-custom{


width:100%;

padding:16px 20px;

border-radius:15px;

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

margin-bottom:20px;

font-family:inherit;

outline:none;


}




.form-control-custom:focus{


border-color:var(--green);

box-shadow:0 0 0 4px rgba(0,168,107,.1);


}








/* =====================================================
MOBILE MONEY / BANK DETAILS
===================================================== */



.payment-section{


background:var(--light);


}





.payment-card{


background:white;

padding:35px;

border-radius:30px;

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

height:100%;


}



.payment-card .payment-icon{


font-size:45px;

color:var(--green);

margin-bottom:20px;


}




.payment-card h3{


color:var(--blue);


}





.payment-card strong{


color:var(--dark);


}









/* =====================================================
DONATION IMPACT CALCULATOR
===================================================== */



.impact-calculator{


background:

linear-gradient(
135deg,
var(--blue),
var(--green)
);


padding:70px;

border-radius:35px;

color:white;


}



.impact-calculator h2{


color:white;

font-size:42px;


}




.impact-calculator p{


color:white;


}




.impact-number{


font-size:55px;

font-weight:800;

color:var(--gold);


}








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



.transparency-card{


background:white;

padding:35px;

border-radius:25px;

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

height:100%;


}



.transparency-card i{


font-size:40px;

color:var(--gold);

margin-bottom:20px;


}









/* =====================================================
CONTACT PAGE
===================================================== */



.contact-section{


background:white;


}





.contact-info-card{


background:var(--light);

padding:35px;

border-radius:30px;

height:100%;


}



.contact-info-card i{


height:60px;

width:60px;

display:flex;

align-items:center;

justify-content:center;

background:var(--green);

color:white;

border-radius:50%;

font-size:25px;

margin-bottom:20px;


}





.contact-info-card h3{


font-size:23px;


}









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



.contact-form-box{


background:white;

padding:45px;

border-radius:35px;

box-shadow:var(--shadow);


}



.contact-form-box input,
.contact-form-box textarea,
.contact-form-box select{


width:100%;

padding:16px 20px;

border-radius:15px;

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

margin-bottom:20px;

font-size:15px;


}



.contact-form-box textarea{


height:170px;

resize:none;


}








/* =====================================================
MAP
===================================================== */



.map-box{


height:450px;

overflow:hidden;

border-radius:30px;

box-shadow:var(--shadow);


}



.map-box iframe{


width:100%;

height:100%;

border:0;


}








/* =====================================================
FAQ
===================================================== */



.faq-item{


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

padding:20px 0;


}



.faq-item h3{


font-size:20px;

color:var(--blue);


}








/* =====================================================
END PART 4
===================================================== */
/* =====================================================
VISION CARE INITIATIVE UGANDA

STYLE.CSS PART 5/5

FOOTER
FLOATING BUTTONS
ANIMATIONS
RESPONSIVE DESIGN

===================================================== */







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



.footer{


background:var(--navy);

padding:90px 0 30px;

color:white;


}




.footer h3,
.footer h4{


color:white;


}



.footer h3{


font-size:28px;

margin-bottom:20px;


}




.footer p{


color:#d7dee8;

font-size:15px;


}




.footer-links li{


margin-bottom:12px;


}




.footer-links a{


color:#d7dee8;

font-weight:500;


}



.footer-links a:hover{


color:var(--green);

padding-left:5px;


}






.footer-contact li{


display:flex;

gap:12px;

align-items:center;

margin-bottom:15px;

color:#d7dee8;


}



.footer-contact i{


color:var(--green);


}








.footer-social{


display:flex;

gap:12px;

margin-top:25px;


}




.footer-social a{


height:45px;

width:45px;

border-radius:50%;

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

display:flex;

align-items:center;

justify-content:center;

color:white;

font-size:18px;


}




.footer-social a:hover{


background:var(--green);

transform:translateY(-5px);


}








.footer-donate{


background:var(--green);

color:white;

padding:14px 30px;

border-radius:50px;

font-weight:700;

display:inline-block;

margin-top:20px;


}



.footer-donate:hover{


background:var(--gold);

color:var(--dark);


}








.footer-bottom{


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

margin-top:50px;

padding-top:25px;

text-align:center;


}




.footer-bottom p{


font-size:14px;


}









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



.whatsapp-btn{


position:fixed;

right:25px;

bottom:90px;

height:60px;

width:60px;

border-radius:50%;

background:#25D366;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

z-index:999;

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

animation:float 3s infinite;


}



.whatsapp-btn:hover{


color:white;

transform:scale(1.1);


}









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



.back-to-top{


position:fixed;

right:25px;

bottom:20px;

height:50px;

width:50px;

border-radius:50%;

background:var(--blue);

color:white;

display:flex;

align-items:center;

justify-content:center;

z-index:999;


}



.back-to-top:hover{


background:var(--green);

color:white;


}









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



@keyframes float{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-10px);

}


100%{

transform:translateY(0);

}


}






.fade-up{


animation:fadeUp .8s ease;


}




@keyframes fadeUp{


from{


opacity:0;

transform:translateY(30px);


}


to{


opacity:1;

transform:translateY(0);


}


}








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



.loader{


position:fixed;

inset:0;

background:white;

z-index:99999;

display:flex;

align-items:center;

justify-content:center;


}



.loader img{


width:120px;

animation:pulse 1.5s infinite;


}




@keyframes pulse{


0%{

transform:scale(1);

}


50%{

transform:scale(1.1);

}


100%{

transform:scale(1);


}


}









/* =====================================================
TABLET RESPONSIVE
992px
===================================================== */


@media(max-width:992px){



h1{


font-size:50px;


}



h2{


font-size:38px;


}




.navbar-collapse{


background:white;

padding:25px;

margin-top:20px;

border-radius:20px;

box-shadow:var(--shadow);


}




.navbar-nav{


gap:5px;


}



.nav-link{


padding:12px!important;


}





.hero{


min-height:650px;


}




.hero-content h1{


font-size:52px;


}




.about-image img{


height:450px;


}




.timeline::before{


left:20px;


}



.timeline-item{


width:100%;

left:0!important;

padding-left:60px;

text-align:left!important;


}



.timeline-item::before{


left:11px!important;


}



.impact-calculator{


padding:45px;


}




}









/* =====================================================
MOBILE RESPONSIVE
768px
===================================================== */



@media(max-width:768px){



section{


padding:70px 0;


}




h1{


font-size:38px;


}



h2{


font-size:32px;


}



h3{


font-size:24px;


}





.navbar-brand img{


width:60px;

height:60px;


}




.brand-text strong{


font-size:14px;


}




.hero{


min-height:600px;


}



.hero-content h1{


font-size:36px;


}



.hero-content p{


font-size:16px;


}



.hero-buttons{


flex-direction:column;

align-items:flex-start;


}





.page-hero{


height:380px;


}



.page-hero h1{


font-size:38px;


}





.intro-image img,
.about-image img{


height:350px;


}




.program-image{


height:320px;


}




.program-number{


font-size:60px;


}




.donation-box,
.contact-form-box{


padding:30px;


}




.impact-calculator{


padding:35px 25px;


}




.impact-calculator h2{


font-size:30px;


}





.footer{


text-align:center;


}




.footer-social{


justify-content:center;


}



.footer-contact li{


justify-content:center;


}




.whatsapp-btn{


right:15px;

bottom:80px;


}



.back-to-top{


right:15px;


}



}









/* =====================================================
SMALL MOBILE
480px
===================================================== */



@media(max-width:480px){



.hero-content h1{


font-size:32px;


}




.btn-primary,
.btn-secondary,
.btn-outline{


width:100%;

justify-content:center;


}




.amount-option{


width:100%;

text-align:center;


}



.impact-card h3{


font-size:36px;


}




.newsletter input{


width:100%;


}


}

/* =====================================================
   PREMIUM CONTACT PAGE
===================================================== */


/* HERO */

.contact-premium-hero{

min-height:75vh;

background:
linear-gradient(
rgba(0,0,0,.55),
rgba(0,0,0,.55)
),
url("../images/contact-bg.jpg");

background-size:cover;

background-position:center;

display:flex;

align-items:center;

position:relative;

color:white;

}


.contact-premium-hero .hero-content{

max-width:750px;

padding:80px 0;

}



.contact-premium-hero h1{

font-size:55px;

font-weight:800;

line-height:1.1;

margin:20px 0;

}



.contact-premium-hero p{

font-size:20px;

line-height:1.8;

color:#f1f1f1;

}




.contact-premium-hero .tag{

display:inline-block;

padding:8px 20px;

border-radius:30px;

background:#f5b400;

font-weight:700;

}





/* BUTTONS */


.hero-buttons{

display:flex;

gap:20px;

margin-top:35px;

}



.btn-outline{

border:2px solid white;

color:white;

padding:14px 30px;

border-radius:40px;

text-decoration:none;

transition:.3s;

}


.btn-outline:hover{

background:white;

color:#222;

}









/* CONTACT CARDS */


.contact-modern-cards{

padding:80px 0;

background:#f8f9fa;

}




.contact-card-modern{

background:white;

padding:35px 25px;

text-align:center;

border-radius:20px;

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

height:100%;

transition:.4s;

}




.contact-card-modern:hover{

transform:translateY(-10px);

}



.contact-card-modern .icon{

width:70px;

height:70px;

margin:auto;

border-radius:50%;

background:#f5b400;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

color:white;

margin-bottom:20px;

}



.contact-card-modern h3{

font-size:22px;

font-weight:700;

}









/* MAIN CONTACT AREA */


.contact-area{

padding:90px 0;

}




.contact-form-modern{

background:white;

padding:45px;

border-radius:25px;

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

}




.form-header span{

color:#f5b400;

font-weight:700;

}



.form-header h2{

font-size:38px;

font-weight:800;

margin:15px 0;

}







/* INPUTS */


.input-group-modern{

position:relative;

margin-bottom:25px;

}



.input-group-modern i{

position:absolute;

left:20px;

top:18px;

color:#f5b400;

}



.input-group-modern input,
.input-group-modern textarea{

width:100%;

padding:16px 20px 16px 50px;

border-radius:12px;

border:1px solid #ddd;

outline:none;

font-size:16px;

}



.textarea-box i{

top:20px;

}



.input-group-modern textarea{

resize:none;

}







.contact-submit{

padding:16px 40px;

border:none;

border-radius:40px;

}










/* MAP */


.map-card{

background:white;

border-radius:25px;

overflow:hidden;

box-shadow:0 20px 40px rgba(0,0,0,.1);

}



.map-header{

padding:30px;

}



.map-header i{

color:#f5b400;

font-size:30px;

}





.map-frame iframe{

display:block;

}







/* QUICK CONTACT */


.contact-action-panel{

margin-top:30px;

background:#111;

color:white;

padding:35px;

border-radius:25px;

}



.contact-action-panel h3{

font-weight:700;

}




.action-btn{

display:block;

padding:14px;

border-radius:30px;

text-align:center;

margin-top:15px;

text-decoration:none;

font-weight:700;

}



.action-btn.whatsapp{

background:#25D366;

color:white;

}



.action-btn.email{

background:#f5b400;

color:white;

}










/* GET INVOLVED */


.get-involved{

padding:90px 0;

background:#f8f9fa;

}





.involve-card{

background:white;

padding:40px 30px;

border-radius:25px;

text-align:center;

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

height:100%;

transition:.3s;

}



.involve-card:hover{

transform:translateY(-10px);

}



.involve-card i{

font-size:45px;

color:#f5b400;

margin-bottom:20px;

}



.involve-card a{

color:#f5b400;

font-weight:700;

text-decoration:none;

}










/* CHAT AGENT */


.chat-agent{

position:fixed;

right:25px;

bottom:90px;

width:320px;

background:white;

border-radius:20px;

box-shadow:0 15px 40px rgba(0,0,0,.2);

overflow:hidden;

display:none;

z-index:999;

}



.chat-agent.active{

display:block;

}



.chat-agent-header{

background:#f5b400;

padding:18px;

font-weight:700;

display:flex;

justify-content:space-between;

}



.chat-agent-body{

padding:20px;

}



.chat-agent-body button{

width:100%;

margin:7px 0;

padding:12px;

border:none;

border-radius:20px;

background:#f1f1f1;

cursor:pointer;

}





.chat-launcher{

position:fixed;

right:25px;

bottom:25px;

width:60px;

height:60px;

border-radius:50%;

border:none;

background:#25D366;

color:white;

font-size:25px;

z-index:999;

}









/* MOBILE RESPONSIVE */


@media(max-width:768px){



.contact-premium-hero h1{

font-size:38px;

}



.contact-premium-hero p{

font-size:17px;

}



.hero-buttons{

flex-direction:column;

}



.contact-form-modern{

padding:25px;

}



.form-header h2{

font-size:30px;

}



.chat-agent{

width:90%;

right:5%;

}



}






/* =====================================================
END COMPLETE STYLE.CSS
===================================================== */