* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}


body {
    color: #374151;
    line-height: 1.7;
    background: #F8F6F1;
}


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


/* Header */

header {
    padding: 18px 0;
    border-bottom: 1px solid #e5e7eb;
    background: #ffffff;
}


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


.logo-img {
    height: 65px;
    width: auto;
}


nav a {
    margin-left: 30px;
    text-decoration: none;
    color: #374151;
    font-weight: 600;
}


nav a:hover {
    color: #0F3D2E;
}



/* Hero */

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


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


h1 {
    font-size: 40px;
    line-height: 1.15;
    color: #0F3D2E;
}


.hero p {
    font-size: 20px;
    margin: 30px 0;
    color: #4b5563;
}


/* Button */

.btn {
    background: #F28C28;
    color: white;
    padding: 15px 35px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
}


.btn:hover {
    background: #D96F16;
}



/* Hero Visual */

.visual {

   background: transparent;
color: #111827;
padding: 0;
border-radius: 0;
text-align: center;

}


.arrow {

    margin: 20px;
    font-size: 24px;

}


.center {

    font-size: 28px;
    font-weight: bold;
    letter-spacing: 2px;

}





/* Sections */

section {

    padding: 80px 0;

}


h2 {

    font-size: 38px;
    color: #0F3D2E;
    margin-bottom: 40px;

}





/* Cards */

.cards {

    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap:25px;

}


.three-col {

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

}


.card {

    border:1px solid #e5e7eb;
    padding:30px;
    border-radius:10px;
    background:white;

}


.card h3 {

    color:#0F3D2E;
    margin-bottom:15px;
    font-size:20px;

}


.card p {

    color:#4b5563;

}


/* Clickable Card */

a.card {

    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;

}


a.card:hover {

    text-decoration: none;
    color: inherit;

}


a.card:hover h3 {

    color: #F28C28;

}





/* Dark Section */

.dark {

    background:#0F3D2E;
    color:white;

}


.dark h2,
.dark h3 {

    color:white;

}


.dark-card {

    border-color:#315747;
    background:transparent;

}


.dark-card p {

    color:#e5e7eb;

}





/* Tags */


.tags {

    display:flex;
    flex-wrap:wrap;
    gap:15px;

}


.tags span {

    background:#ffffff;
    padding:12px 20px;
    border-radius:30px;
    color:#0F3D2E;
    font-weight:600;
    border:1px solid #e5e7eb;

}





/* Text */


.text {

    font-size:20px;
    max-width:850px;
    margin-bottom:20px;
    color:#4b5563;

}





/* Contact */


.contact {

    text-align:center;
    background:#ffffff;

}


.contact a {

    font-size:26px;
    color:#F28C28;
    text-decoration:none;
    font-weight:bold;

}





/* Footer */


footer {

    background:#1f2937;
    color:#d1d5db;
    padding:30px;
    text-align:center;
    font-size:14px;

}





/* Mobile */


@media(max-width:900px){

.hero-grid,
.cards,
.three-col{

    grid-template-columns:1fr;

}


h1{

    font-size:38px;

}


nav{

    display:none;

}


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

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