* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
html {
 scroll-behavior: smooth;
}
body {
    margin: 0;
 font-family: Arial, Helvetica, sans-serif;
 background-image: url("images/palais.jpg") center center / cover fixed no-repeat;
 color: #202020;
}
.main{
    background: transparent;
}
.section{
    background: transparent;
}
a {
 text-decoration: none;
 color: inherit;
}
img {
 width: 100%;
 display: block;
}
.header {
 position: sticky;
 top: 0;
 z-index: 1000;
 min-height: 78px;
 padding: 0 6%;
 background: rgba(255,255,255,.96);
 display: flex;
 align-items: center;
 justify-content: space-between;
 box-shadow: 0 4px 20px rgba(0,0,0,.08);
 backdrop-filter: blur(10px);
}
.footer-logo{
    width: 100px;
    height: auto;
    display: block; 
}
.logo img{
    width: 100px;
    height: auto;
    display: block;
}
.logo {
 position: relative;
}
.logo::after {
 content: "";
 position: absolute;
 width: 35px;
 height: 4px;
 left: 0;
 bottom: -5px;
 border-radius: 10px;
}
.navbar {
 display: flex;
 align-items: center;
 gap: 24px;
}
.navbar a {
 position: relative;
 padding: 28px 0;
 font-size: 14px;
 font-weight: 700;
 transition: color .3s ease;
}
.navbar a::after {
 content: "";
 position: absolute;
 width: 0;
 height: 3px;
 left: 50%;
 bottom: 17px;
 background: #168a45;
 transform: translateX(-50%);
 transition: width .3s ease;
}
.navbar a:hover, .navbar a.active {
 color: #168a45;
}
.navbar a:hover::after, .navbar a.active::after {
 width: 100%;
}
.hero {
 min-height: 720px;
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 background: #102018;
}
.hero-content {
 max-width: 900px;
 padding: 30px;
 color: #fff;
 animation: heroAppear 1.3s ease both;
}
.hero::before {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(135deg,rgba(0,0,0,.72),rgba(0,90,40,.35));
}
.hero-content {
 position: relative;
 z-index: 2;
}
.hero h1 {
 font-size: clamp(42px,7vw,78px);
 line-height: 1.05;
 margin: 20px 0;
 animation: textReveal 1.2s ease both;
}
.hero-content > p:not(.hero-small) {
 max-width: 750px;
 margin: auto auto 30px;
 font-size: 19px;
}
.hero-small, .section-title p, .label {
 color: #e3a72f;
 font-weight: 800;
 letter-spacing: 3px;
 font-size: 13px;
}
.hero-buttons {
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
 gap: 15px;
}
.btn {
 display: inline-block;
 padding: 14px 28px;
 background: #164c2e;
 color: #fff;
 border-radius: 50px;
 font-weight: 800;
 border: 2px solid #168a45;
 transition: transform .3s ease,box-shadow .3s ease,background .3s ease;
}
.btn:hover {
 transform: translateY(-5px) scale(1.03);
 box-shadow: 0 12px 30px rgba(22,138,69,.35);
}
.btn-light {
 background: transparent;
 border-color: #fff;
}
.section {
 max-width: 1250px;
 margin: auto;
 padding: 90px 30px;

}
.sectiona{
  max-width: 1250px;
 margin: auto;
 padding: 90px 30px;
 background-color: #F5F5F5;

}
.section-title {
 text-align: center;
 margin-bottom: 50px;
}
.section-title h2 {
 font-size: clamp(30px,4vw,46px);
 color: #164c2e;
 margin-top: 10px;
}
.intro-text {
 max-width: 900px;
 margin: auto;
 text-align: center;
 font-size: 18px;
 color: #606060;
}
.feature-grid {
 display: grid;
 grid-template-columns: repeat(4,1fr);
 gap: 24px;
}
.feature-card {
 background: #fff;
 border: 2px solid transparent;
 border-radius: 18px;
 overflow: hidden;
 box-shadow: 0 10px 35px rgba(0,0,0,.08);
 transition: transform .4s ease,border-color .4s ease,box-shadow .4s ease;
}
.feature-card:hover {
 transform: translateY(-12px);
 border-color: #e3a72f;
 box-shadow: 0 20px 45px rgba(0,0,0,.14);
}
.feature-card img {
 height: 230px;
 object-fit: cover;
 transition: transform .7s ease;
}
.feature-card:hover img {
 transform: scale(1.12);
}
.feature-card div {
 padding: 24px;
}
.feature-card h3 {
 color: #168a45;
 font-size: 22px;
}
.feature-card p {
 color: #666;
 margin: 10px 0 15px;
}
.feature-card span {
 color: #168a45;
 font-weight: 800;
}
.parallax-section {
 min-height: 520px;
 background: linear-gradient(rgba(0,0,0,.52),rgba(0,80,40,.52)),url("images/plage-limbe.jpg") center/cover fixed;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 color: #fff;
 padding: 40px;
}
.parallax-content {
 max-width: 850px;
}
.parallax-content h2 {
 font-size: clamp(35px,5vw,58px);
 line-height: 1.15;
 margin: 18px 0 30px;
}
.destination-grid {
 display: grid;
 grid-template-columns: repeat(4,1fr);
 gap: 22px;
}
.destination-grid.large {
 grid-template-columns: repeat(3,1fr);
}
.destination-card {
 min-height: 350px;
 position: relative;
 border-radius: 18px;
 overflow: hidden;
 border: 3px solid transparent;
 transition: transform .45s ease,border-color .45s ease;
}
.destination-card::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(transparent 35%,rgba(0,0,0,.8));
}
.destination-card img {
 height: 100%;
 min-height: 350px;
 object-fit: cover;
 transition: transform .8s ease;
}
.destination-card:hover {
 transform: translateY(-8px);
 border-color: #e3a72f;
}
.destination-card:hover img {
 transform: scale(1.13);
}
.destination-card div {
 position: absolute;
 z-index: 2;
 bottom: 0;
 left: 0;
 padding: 25px;
 color: #fff;
}
.destination-card h3 {
 font-size: 25px;
}
.activity-card, .hotel-card {
 background: #fff;
 border-radius: 18px;
 overflow: hidden;
 border: 2px solid #eee;
 box-shadow: 0 8px 25px rgba(0,0,0,.08);
 transition: transform .4s ease,border-color .4s ease,box-shadow .4s ease;
}
.activity-card:hover, .hotel-card:hover {
 transform: translateY(-10px);
 border-color: #168a45;
 box-shadow: 0 18px 40px rgba(0,0,0,.14);
}
.activity-card img, .hotel-card img {
 height: 250px;
 object-fit: cover;
 transition: transform .7s ease;
}
.activity-card:hover img, .hotel-card:hover img {
 transform: scale(1.08);
}
.activity-card div, .hotel-card div {
 padding: 22px;
}
.activity-card h3, .hotel-card h3 {
 color: #168a45;
 font-size: 22px;
}
.activity-card, .hotel-card {
 display: block;
}
.page-banner {
 min-height: 380px;
 background: linear-gradient(rgba(0,0,0,.5),rgba(0,80,40,.45)),url("images/yaounde.png") center/cover no-repeat;
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
 color: #fff;
 padding: 40px;
}
.page-banner h1 {
 font-size: clamp(42px,6vw,65px);
 margin: 12px 0;
}
.about {
 display: grid;
 grid-template-columns: 1fr 1fr;
 align-items: center;
 gap: 70px;
}
.about-image {
 overflow: hidden;
 border-radius: 25px;
 border: 5px solid #e3a72f;
}
.about-image img {
 transition: transform .8s ease;
}
.about-image:hover img {
 transform: scale(1.08);
}
.about-content h2 {
 color: #164c2e;
 font-size: 42px;
 line-height: 1.2;
 margin: 15px 0 20px;
}
.values {
 background: #eef7f1;
 max-width: none;
}
.values-grid {
 max-width: 1100px;
 margin: auto;
 display: grid;
 grid-template-columns: repeat(4,1fr);
 gap: 20px;
}
.value {
 background: #fff;
 padding: 30px;
 text-align: center;
 border-radius: 16px;
 border-top: 5px solid #168a45;
 transition: transform .3s ease;
}
.value:hover {
 transform: translateY(-8px);
}
.contact {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 60px;
}
.contact-info h2 {
 color: #164c2e;
 font-size: 42px;
 line-height: 1.2;
 margin: 15px 0;
}
.contact-item {
 padding: 18px 0;
 border-bottom: 1px solid #ddd;
}
.contact-item h3 {
 color: #168a45;
}
.contact-form {
 padding: 35px;
 background: #fff;
 border-radius: 20px;
 border: 2px solid #e3a72f;
 box-shadow: 0 15px 40px rgba(0,0,0,.09);
}
.contact-form label {
 display: block;
 margin: 15px 0 7px;
 font-weight: 700;
}
.contact-form input, .contact-form textarea {
 width: 100%;
 padding: 14px;
 border: 1px solid #ccc;
 border-radius: 8px;
 outline: none;
 font: inherit;
}
.contact-form textarea {
 resize: vertical;
}
.contact-form .btn {
 margin-top: 20px;
 width: 100%;
}
.cta {
 padding: 85px 30px;
 background: linear-gradient(120deg,#126c38,#168a45);
 color: #fff;
 text-align: center;
}
.cta h2 {
 font-size: 42px;
 margin-bottom: 10px;
}
.footer {
 background: #102018;
 color: #fff;
}
.footer-main {
 max-width: 1250px;
 margin: auto;
 padding: 70px 30px;
 display: grid;
 grid-template-columns: 2fr 1fr 1fr 1.5fr;
 gap: 45px;
}
.footer-column {
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.footer-brand p {
 max-width: 330px;
 color: #bfc9c3;
 margin-top: 18px;
}
.footer-column h3 {
 color: #e3a72f;
}
.footer-column a, .footer-column p {
 color: #cbd4cf;
 transition: color .3s,transform .3s;
}
.footer-column a:hover {
 color: #fff;
 transform: translateX(5px);
}
.footer-bottom {
 border-top: 1px solid rgba(255,255,255,.12);
 padding: 22px 30px;
 display: flex;
 justify-content: space-between;
 gap: 20px;
 color: #aebbb4;
}
@keyframes heroAppear {
 from { opacity: 0; transform: translateY(40px); }
 to { opacity: 1; transform: translateY(0); }
}
@keyframes textReveal {
 from { opacity: 0; transform: scale(.92); }
 to { opacity: 1; transform: scale(1); }
}
@media (max-width:1050px) {
 .header { padding: 15px 4%; flex-direction: column; }
 .navbar { flex-wrap: wrap; justify-content: center; gap: 16px; }
 .navbar a { padding: 8px 0; }
 .feature-grid, .destination-grid, .destination-grid.large { grid-template-columns: repeat(2,1fr); }
 .values-grid, .about, .contact { grid-template-columns: repeat(2,1fr); }
 .footer-main { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:700px) {
 .header { position: relative; }
 .navbar { width: 100%; flex-direction: column; gap: 0; }
 .navbar a { width: 100%; text-align: center; border-bottom: 1px solid #eee; }
 .hero { min-height: 620px; }
 .section { padding: 65px 18px; }
 .feature-grid, .destination-grid, .destination-grid.large, .values-grid, .about, .contact, .footer-main { grid-template-columns: 1fr; }
 .footer-bottom { flex-direction: column; text-align: center; }
 .parallax-section { background-attachment: scroll; }
}