*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
    font-family: Georgia, "Times New Roman", serif;
}
body{
line-height:1.6;
color:#333;
font-size:16px;
font-weight:400;
}

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

/* Header */

.header{
background:#0f2b46;
color:white;
padding:15px 0;
position: fixed;
width: 100%;
}
.body-section {
    padding-top: 61px;
}
.nav{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo a{ color: #fff; text-decoration: none ;
font-weight: 400;
    font-size: 16px;
}

.menu{
display:flex;
list-style:none;
gap:25px; padding-left: 380px;
}

.menu li a{
cursor:pointer; color: #fff; text-decoration: none ;    
font-size:16px; 
font-weight:400;
 font-family: Arial, sans-serif;
}

/* Buttons */

.btn{
    background: #C6A86B;
    border: none;
    padding: 10px 18px;
    color: white;
    cursor: pointer;
    border-radius: 4px;
}

.btn-outline{
border:1px solid white;
background:transparent;
color:white;
padding:10px 18px;
margin-left:10px;
cursor:pointer;
}

/* Hero */

.hero{
height:800px;
background:url("../images/banner.png") center/cover no-repeat;
display:flex;
align-items:center;
color:white;
}

.hero-content{
max-width:600px;
margin-left:10%;
}

.hero h1{
font-size: 48px;
    margin-bottom: 20px;
    font-weight: 400;
    line-height: 58px;
}
.hero h4{ font-size: 28px;     text-transform: capitalize;
    margin-bottom: 20px;
    font-weight: 400;
    line-height: 36px;}
.hero p{
font-size: 16px;
    margin-bottom: 20px;
    font-weight: 400;
    line-height: 30px;
    color: #FFFFFFE5;
     font-family: Arial, sans-serif;
}

/* Intro */

.intro{
text-align:center;
padding:60px 0;
}

.intro h2{
margin-bottom: 20px;
    font-size: 36px;
    font-weight: 400;
    line-height: 54px;
    color: #0B1F3A;
}
.intro p{
margin-bottom: 20px;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    color: #0B1F3A;
     font-family: Arial, sans-serif;
}

/* Cards */
.cards-main{background:#f4f4f4;}
.cards{
display:flex;
gap:25px; padding-top:60px;
padding-bottom:60px;
}

.card{
flex:1;
background:#fff;
text-align:center;
}

.card img{
width:100%;
height:200px;
object-fit:cover;
}
.cards-des{ padding: 20px 30px; text-align: left;}
.cards-des h3{ font-size: 24px; font-weight: 400; line-height: 36px; color: #0B1F3A; margin-bottom: 20px;}
.cards-des p{ font-size: 16px; font-weight: 400; line-height: 26px; color: #0B1F3A;  font-family: Arial, sans-serif;}




.values-section{
padding:60px 20px;
text-align:center;
}

.values-heading {
    font-family: Georgia, serif;
    font-size: 32px;
    font-weight: 400;
    color: #2b2b2b;
    margin-bottom: 35px;
    line-height: 48px;
}

.values-row{
display:flex;
justify-content:center;
align-items:center;
max-width:1000px;
margin:auto;
}

.value-col {
    flex: 1;
    font-size: 16px;
    color: #666;
    padding: 0 20px;
    position: relative;
    line-height: 24px;
    font-weight: 400; font-family: Arial, sans-serif;
}

/* vertical divider */

.value-col:not(:last-child)::after{
content:"";
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
height:20px;
width:1px;
background:#d2d2d2;
}

/* Mobile */

@media(max-width:768px){

.values-row{
flex-direction:column;
gap:15px;
}

.value-col::after{
display:none;
}

}
/* CTA */

.cta{
background:#0f2b46;
color:white;
text-align:center;
padding:60px 20px;
}
.cta h2 {
    font-size: 36px;
    line-height: 54px;
    font-weight: 400;
}
.cta p{
margin:15px 0 25px;
font-size: 16px;
font-weight: 400;
line-height: 28px;
 font-family: Arial, sans-serif;
}

/* Footer */

.site-footer{
background:#0c2a4a;
padding:50px 20px;
color:#b9c6d3;
}

.footer-top {
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    border-bottom: 1px solid #FFFFFF33;
    padding-bottom: 29px;
}

/* Left text */

.footer-text a{ text-decoration: none;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 15px;
    font-weight: 400;     color: #fff;
}

/* bottom links */

.footer-links a{
font-size:12px;
color:#b9c6d3;
margin-right:18px;
text-decoration:none;
}

.footer-links a:hover{
text-decoration:underline;
}

/* Right menu */

.footer-right{
display:flex;
gap:25px;
flex-wrap:wrap;
}

.footer-right a {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    line-height: 24px;
}

.footer-right a:hover{
color:white;
}
.footer-btm {
    padding-top: 30px;
}
.footer-btm p{ font-family: Arial, sans-serif; padding-bottom: 20px;
    font-size: 14px;
    color:  #FFFFFFB2;
    text-decoration: none;
    line-height: 20px;}
    .footer-b-right a{ font-family: Arial, sans-serif; padding-right: 20px;
    font-size: 14px;
    color:  #FFFFFFB2;
    text-decoration: none;
    line-height: 20px;}
/* Mobile */

@media (max-width:768px){

.footer-container{
flex-direction:column;
gap:25px;
}

.footer-right{
gap:15px;
}

}

/* Mobile Responsive */

@media (max-width:768px){

.nav{
flex-direction:column;
gap:10px;
}

.menu{
flex-wrap:wrap;
justify-content:center;
padding-left: 080px;
}

.hero{
height:500px;
}

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

.cards{
flex-direction:column;
}

.hero-content{
margin:20px;
}

}




/* about-css */
section.about-section {
    padding-top: 57px;
}
/* title */

.title{
font-size: 48px;
    font-weight: 400;
    margin-bottom: 60px;
    color: #0B1F3A;
    line-height: 72px;  
}

/* overview */

.overview-grid{
display:grid;
grid-template-columns:1fr 420px;
gap:60px;
align-items:center;
}

.overview-text h3 {
    font-size: 36px;
    margin-bottom: 18px;
    font-weight: 400;
    line-height: 56px;
    color: #0B1F3A;
}

.overview-text p{
font-size:16px;
font-weight: 400;
line-height:30px;
margin-bottom:16px;
color:#4b5a67;
 font-family: Arial, sans-serif;
}

.overview-image img{
width:100%;
border-radius:4px;
}


/* approach section */

.approach{
background:#e9ecef;
padding:60px 0;
margin-top:60px;
text-align:center;
}

.approach h2 {
    font-size: 36px;
    margin-bottom: 20px;
    font-weight: 400;
    line-height: 54px;
    color: #0B1F3A;
}

.approach-text{
font-size:16px;
line-height:30px;
color:#0B1F3A;
max-width:750px;
margin:0 auto 14px auto;
font-family: Arial, sans-serif;
font-weight: 400;
}


/* feature cards */

.features{
padding:60px 0;
}

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

.card-about{
background:#fff;
border:1px solid #e2e2e2;
padding:28px;
border-radius:4px;
display: flex;
  align-items: flex-start;
}

.card-about-content {
  flex: 1;
  margin-left: 30px;
}
.card-about h4 {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: 400;
    line-height: 36px;
    color: #0B1F3A;
}

.card-about p {
    font-size: 16px;
    line-height: 26px;
    color: #0B1F3A;
    display: flex;
    font-weight: 400;  font-family: Arial, sans-serif;
}


/* footer note */

.footer-note{
background:#e9ecef;
padding:30px;
text-align:center;

margin-top:40px;
}
.footer-note p{ font-size:18px; font-weight: 400; padding: 60px 0;  font-family: Arial, sans-serif;
line-height:30px;
color:#0B1F3A;}



.approach-grid {
    padding: 0 23%;
    text-align: center;
}

.banner-approach {
  background: url('../images/banner-approach.png') center/cover no-repeat;
  padding: 80px 40px;
}

/* Cards Container */
.cards-approach {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Card */
.card-approach {
  background: #f4f4f4;
  width: 220px;
  padding: 20px;
  border-radius: 6px;
  position: relative;
}

/* Number Circle */
.number {
    width: 40px;
    height: 40px;
    background: #0d2545;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    font-weight: 400;
    font-size: 24px;
    line-height: 36px;
}

/* Card Text */
.card-approach h3 {
  margin-top: 25px;
  margin-bottom: 10px;
  font-size: 20px;
  color: #0B1F3A;
  line-height: 30px;
  font-weight: 400;
}

.card-approach p {
    font-size: 14px;
    color: #333;
    line-height: 23px;
    font-weight: 400;
     font-family: Arial, sans-serif;
}

/* Bottom Section */
.bottom {
    background: #e9e9e9;
    padding: 70px;
    display: flex;
    justify-content: center;
    gap: 61px;
    flex-wrap: wrap;
}

/* Tags */
.tag {
    padding: 12px 30px;
    border: 1px solid #caa25a;
    color: #0B1F3A;
    border-radius: 4px;
    font-size: 22px;
    font-weight: 400;
}



.features-section {
  /* background: #f4f4f4; */
  padding: 60px 80px;
}

/* FLEX ROW WRAP (2 per row) */
.features-row {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 60px;
}

/* Each item takes 50% width */
.feature-item {
  width: calc(50% - 30px); /* ensures 2 per row with gap */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

/* Text */
.feature-text h3 {
  font-size: 28px;
  color: #0B1F3A;
  margin-bottom: 10px;
  font-weight: 400;
  line-height: 42px;
}

.feature-text p {
  font-size: 16px;
  color: #0B1F3A;
  font-weight: 400;
  line-height: 30px;
  max-width: 90%;
   font-family: Arial, sans-serif;
}

/* Icon on right */
.feature-icon {
  font-size: 28px;
  color: #caa25a;
  margin-left: 20px;
  flex-shrink: 0;
}

.title-p{ margin-bottom: 20px;}
/* Section */
.category-section {
  background: #efefef;
  padding: 50px 80px;
}

/* Row */
.category-row {
  display: flex;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
}

/* Card */
.category-card {
    background: #f7f7f7;
    width: 180px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    text-align: center;
    padding: 21px;
}

/* Icon */
.icon {
  font-size: 26px;
  color: #caa25a;
}

/* Text */
.category-card p {
    font-size: 18px;
    color: #0B1F3A;
    line-height: 26px;
    font-weight: 400;
}
p.sec-cont {
    text-align: center;
    color: #0B1F3A;
    font-weight: 400;
    font-size: 16px;
    padding: 65px;  font-family: Arial, sans-serif;
}

.p-cont{ 
    color: #0B1F3A;
    font-weight: 400;
    font-size: 16px; font-family: Arial, sans-serif;}


/* contact */

/* Section */
.form-section {
  background: #f5f5f5;
  padding: 60px 80px;
}

/* Grid */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px 40px;
}

/* Form Group */
.form-group {
  display: flex;
  flex-direction: column;
}

/* Full width (textarea & upload) */
.form-group.full {
  grid-column: span 2;
}

/* Labels */
label {
  font-size: 16px;
  margin-bottom: 6px;
  color: #1c2b45;
   font-family: Arial, sans-serif;
}

/* Inputs */
input,
select,
textarea {
  padding: 10px;
  border: 1px solid #dcdcdc;
  border-radius: 3px;
  font-size: 14px;
  outline: none;
  background: #fff;
}

/* Textarea height */
textarea {
  resize: none;
}

/* File input */
input[type="file"] {
  padding: 8px;
}

/* Checkbox */
.checkbox-group {
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.checkbox-group input {
  margin-top: 3px;
}

.checkbox-group label {
  font-size: 12px;
  color: #333;
}

/* Button */
.submit-btn {
  margin-top: 20px;
  background: #caa25a;
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
}

/* Note */
.note {
  margin-top: 15px;
  font-size: 12px;
  color: #777;
}


@media(max-width: 767px)
{
  /* ===== HEADER MOBILE RESPONSIVE ===== */

.menu-toggle {
    display: none;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
}

/* Remove fixed spacing issue */
.menu {
    padding-left: 0;
}

/* Mobile */
@media (max-width: 768px) {

    .nav {
        flex-direction: row;
        justify-content: space-between;
    }

    .menu-toggle {
        display: block;
    }

    .menu {
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: #0f2b46;
        flex-direction: column;
        align-items: center;
        display: none;
        gap: 15px;
        padding: 20px 0;
    }

    .menu.active {
        display: flex;
        padding-bottom: 160px;
    }

    .menu li {
        width: 100%;
       text-align: left;
            padding-left: 31px;
    }

    .menu li a {
        display: block;
        padding: 10px 0;
    }

    .btn {
        display: none; /* hide button in mobile (optional) */
    }
    .btn-request{ display: inline;}
}
.overview-grid {
    display: inline-block;
}

.features .grid{ display: block;}
.card-about{ margin-bottom: 20px;}
.card-approach {
    width: auto;
}
.header {
    z-index: 9;
}
.features-section {
    /* background: #f4f4f4; */
    padding: 60px 80px;
    padding: 0;
}
.feature-item {
    width: 100%;
}
.form-section {
    padding: 30px 0;
}
.form-grid {
    display: block;
}
.form-group {
    margin-bottom: 20px;
}
}