/*==================================================
TRUSTED CARE PLUS
STYLE.CSS
PART 1
==================================================*/

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:#ffffff;
color:#1F3558;
line-height:1.7;
overflow-x:hidden;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

.section{
padding:100px 0;
}

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

.header{
position:fixed;
top:0;
left:0;
width:100%;
background:#ffffff;
box-shadow:0 8px 25px rgba(0,0,0,.08);
z-index:1000;
transition:.3s;
}

.navbar{
height:90px;
display:flex;
justify-content:space-between;
align-items:center;
}

.logo img{
height:70px;
}

.navigation{
display:flex;
align-items:center;
gap:35px;
}

.navigation a{
color:#1F3558;
font-weight:600;
transition:.3s;
}

.navigation a:hover{
color:#C89B2F;
}

.header-btn{
background:#C89B2F;
color:#fff !important;
padding:15px 28px;
border-radius:40px;
transition:.3s;
}

.header-btn:hover{
background:#1F3558;
}

.menu-icon{
display:none;
font-size:34px;
cursor:pointer;
}

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

.hero{
padding:170px 0 100px;
background:#ffffff;
}

.hero-content{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:80px;
align-items:center;
min-height:80vh;
}

.hero-small{
display:inline-block;
padding:10px 22px;
background:#F6E8BF;
color:#1F3558;
font-size:13px;
font-weight:700;
border-radius:30px;
letter-spacing:1px;
margin-bottom:25px;
}

.hero h1{
font-size:68px;
font-weight:800;
line-height:1.1;
color:#1F3558;
margin-bottom:25px;
}

.hero p{
font-size:20px;
color:#666;
margin-bottom:40px;
max-width:620px;
}

.hero-buttons{
display:flex;
gap:20px;
flex-wrap:wrap;
margin-bottom:40px;
}

.primary-btn{
display:inline-block;
padding:18px 36px;
background:#C89B2F;
color:#fff;
border-radius:50px;
font-weight:600;
transition:.3s;
}

.primary-btn:hover{
background:#1F3558;
}

.secondary-btn{
display:inline-block;
padding:18px 36px;
background:#1F3558;
color:#fff;
border-radius:50px;
font-weight:600;
transition:.3s;
}

.secondary-btn:hover{
background:#C89B2F;
}

.hero-boxes{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}

.hero-boxes div{
background:#fff;
padding:18px;
border-radius:18px;
box-shadow:0 12px 30px rgba(0,0,0,.08);
font-weight:600;
}

.hero-image{
display:flex;
justify-content:center;
}

.hero-image img{
width:100%;
max-width:520px;
height:620px;
object-fit:cover;
border-radius:30px;
box-shadow:0 25px 60px rgba(0,0,0,.15);
}
/*=========================
SECTION HEADINGS
=========================*/

.section-heading{
text-align:center;
max-width:750px;
margin:0 auto 70px;
}

.section-subtitle{
display:inline-block;
color:#C89B2F;
font-size:14px;
font-weight:700;
letter-spacing:2px;
margin-bottom:15px;
text-transform:uppercase;
}

.section-heading h2{
font-size:44px;
color:#1F3558;
margin-bottom:20px;
}

.section-heading p{
color:#666;
font-size:18px;
}

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

.about{
background:#fff;
}

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

.about-image img{
width:100%;
border-radius:30px;
box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.about-text h2{
font-size:44px;
color:#1F3558;
margin:20px 0;
line-height:1.2;
}

.about-text p{
color:#666;
margin-bottom:20px;
font-size:17px;
}

.about-buttons{
margin-top:35px;
}

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

.mission{
background:#F8FAFC;
}

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

.card{
background:#fff;
padding:35px;
border-radius:25px;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.35s;
}

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

.card h3{
color:#1F3558;
margin-bottom:18px;
font-size:24px;
}

.card p{
color:#666;
}

.card ul{
padding-left:20px;
}

.card li{
margin-bottom:10px;
color:#666;
}

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

.why-us{
background:#fff;
}

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

.why-list div{
background:#F8FAFC;
padding:18px;
border-radius:16px;
font-weight:600;
color:#1F3558;
}

/*=========================
SERVICES
=========================*/

.services{
background:#F8FAFC;
}

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

.service-card{
background:#fff;
padding:35px;
border-radius:25px;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.35s;
}

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

.service-card h3{
color:#1F3558;
margin-bottom:15px;
font-size:24px;
}

.service-card p{
color:#666;
}
/*=========================
COMPANIONSHIP
=========================*/

.companionship{
background:#ffffff;
}

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

.companionship-image img{
width:100%;
border-radius:30px;
box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.companionship-content h2{
font-size:44px;
color:#1F3558;
margin:20px 0;
line-height:1.2;
}

.companionship-content p{
font-size:17px;
color:#666;
}

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

.testimonials{
background:#F8FAFC;
}

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

.testimonial-card{
background:#fff;
padding:35px;
border-radius:25px;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.35s;
}

.testimonial-card:hover{
transform:translateY(-8px);
}

.testimonial-card p{
margin:20px 0;
color:#666;
}

.testimonial-card h4{
color:#1F3558;
}

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

.faq{
background:#fff;
}

.faq-item{
background:#F8FAFC;
padding:30px;
border-radius:20px;
margin-bottom:20px;
}

.faq-item h3{
color:#1F3558;
margin-bottom:12px;
}

.faq-item p{
color:#666;
}

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

.contact{
background:#F8FAFC;
}

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

.contact-image img{
width:100%;
border-radius:30px;
box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.contact-form{
display:flex;
flex-direction:column;
gap:20px;
}

.contact-form input,
.contact-form textarea{
padding:18px;
border:1px solid #ddd;
border-radius:15px;
font-size:16px;
font-family:'Poppins',sans-serif;
}

.contact-form button{
border:none;
cursor:pointer;
}

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

footer{
background:#1F3558;
color:#fff;
padding:70px 0 40px;
text-align:center;
}

footer img{
height:70px;
margin:0 auto 20px;
}

footer p{
margin-bottom:12px;
}
/*=========================
RESPONSIVE
=========================*/

@media (max-width:992px){

.navigation{
display:none;
}

.menu-icon{
display:block;
font-size:32px;
}

.hero-content,
.about-grid,
.companionship-grid,
.contact-grid{
grid-template-columns:1fr;
gap:50px;
}

.hero{
padding:140px 0 70px;
}

.hero-text{
text-align:center;
}

.hero p{
margin:0 auto 35px;
}

.hero-buttons{
justify-content:center;
}

.hero-boxes{
grid-template-columns:1fr 1fr;
}

.hero-image{
margin-top:30px;
}

.hero-image img{
width:100%;
max-width:550px;
height:auto;
}

.cards,
.services-grid,
.testimonial-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:768px){

.section{
padding:70px 0;
}

.navbar{
height:80px;
}

.logo img{
height:55px;
}

.hero{
padding-top:120px;
}

.hero h1{
font-size:42px;
}

.hero p{
font-size:17px;
}

.hero-buttons{
flex-direction:column;
align-items:center;
}

.primary-btn,
.secondary-btn{
width:100%;
max-width:320px;
text-align:center;
}

.hero-boxes,
.cards,
.services-grid,
.testimonial-grid,
.why-list{
grid-template-columns:1fr;
}

.about-text h2,
.companionship-content h2,
.section-heading h2{
font-size:32px;
}

.hero-image img,
.about-image img,
.companionship-image img,
.contact-image img{
width:100%;
height:auto;
}

}

/*=========================
MOBILE MENU
=========================*/

.show-menu{
display:flex !important;
flex-direction:column;
position:fixed;
top:80px;
left:0;
width:100%;
background:#ffffff;
padding:30px;
gap:20px;
box-shadow:0 15px 35px rgba(0,0,0,.12);
z-index:999;
animation:slideDown .3s ease;
}

.show-menu a{
text-align:center;
font-size:18px;
}

@keyframes slideDown{

from{
opacity:0;
transform:translateY(-20px);
}

to{
opacity:1;
transform:translateY(0);
}

}

.sticky{
box-shadow:0 10px 30px rgba(0,0,0,.12);
}