*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: "Segoe UI", sans-serif;
}

body{
  background:#f6f8fa;
  color:#333;
}

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

.flex{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* HEADER */
.header{
  background:#fff;
  padding:15px 0;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.logo{
  width: 300px;
  height: 80px;
  display: flex;
  justify-content: start;
}

.logo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header nav a{
  margin-left:20px;
  text-decoration:none;
  color:#555;
  font-size:14px;
}

/* HERO */
.hero{
  background:
    linear-gradient(
      rgba(15, 60, 76, 0.85),
      rgba(10, 91, 91, 0.85)
    ),
    url('https://media.smallbiztrends.com/2023/09/how-to-get-a-bank-loan.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  /* background:linear-gradient(120deg,#0f3c4c,#0a5b5b); */
  padding:80px 0;
  color:#fff;
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr 400px;
  gap:40px;
}

.hero-text{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-text h1{
  font-size:38px;
  margin-bottom:15px;
}

.hero-text p{
  max-width:500px;
  line-height:1.6;
}

/* FORM */
.loan-form{
  background:#fff;
  padding:25px;
  border-radius:8px;
  color:#333;
}

.loan-form h3{
  margin-bottom:5px;
  color:#0a5b5b;
}

.loan-form p{
  font-size:13px;
  margin-bottom:15px;
  color:#666;
}

.loan-form input[type="text"],
.loan-form input[type="email"]{
  width:100%;
  padding:10px;
  margin-bottom:10px;
  border:1px solid #ddd;
  border-radius:4px;
}

.loan-form input[type="checkbox"]{
    margin-right: 10px;
}

.checkbox{
  font-size:12px;
  display:flex;
  justify-content: start;
  margin:10px 0;
}

.loan-form button{
  width:100%;
  padding:12px;
  background:#0a5b5b;
  border:none;
  color:#fff;
  font-weight:600;
  border-radius:4px;
  cursor:pointer;
}

/* SECTIONS */
.section-title{
  text-align:center;
  margin-bottom:40px;
  font-size:38px;
}

/* SERVICES */
.services{
  background:#fff;
  padding:60px 0;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
}

.service-box{
  background:#f9fbfc;
  padding:25px;
  text-align:center;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.service-box img{
    width:100px;
    height: 100px;
}

/* HELP */
.help{
  padding:60px 0;
}

.help-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}

.help-box{
  background:#fff;
  padding:25px;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
  text-align: center;
}
.help-box img{
    width:150px;
    height: 150px;
}

/* OFFER */
.offer{
  background:#fff;
  padding:60px 0;
}

.offer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:15px;
}

.offer-box{
  padding:20px;
  background:#0a5b5b;
  color:#fff;
  text-align:center;
  border-radius:6px;
}

/* FOOTER */
.footer{
  background:#1c1c1c;
  color:#ccc;
  padding:30px 0 10px;
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  text-align:center;
  margin-bottom:15px;
}

.footer p{
  text-align:center;
  font-size:12px;
  color:#777;
}

.copyright a{
    color:#fff;
}

/* RESPONSIVE */
@media(max-width:900px){
  .hero-grid{
    grid-template-columns:1fr;
  }
}