@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');
/* ==========================================================================
   00. ROOT VARIABLES
   ========================================================================== */
:root{
--primary:#14243D;
--primary-dark:#0B1729;
--secondary:#B08D57;
--secondary-dark:#8C6E3F;
--secondary-light:#DDCBA0;
--white:#ffffff;
--light:#F8F9FB;
--text:#5B6472;
--heading:#16233D;
--border:#E8E8E8;
--shadow:0 15px 45px rgba(0,0,0,.08);
--radius:18px;
--transition:.35s ease;
--max-width:1250px;
--header-h:80px;
}
/* ==========================================================================
   01. RESET & BASE
   ========================================================================== */
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
scroll-padding-top:var(--header-h);
scroll-snap-type:y proximity;
}
body{
font-family:'Poppins',sans-serif;
background:var(--white);
color:var(--text);
overflow-x:hidden;
font-size:clamp(14px,1.2vw,16px);
}
img{
display:block;
width:100%;
}
a{
text-decoration:none;
}
ul{
list-style:none;
}
.container{
width:92%;
max-width:var(--max-width);
margin:auto;
}
::selection{
background:var(--secondary);
color:#fff;
}
body::-webkit-scrollbar{
width:10px;
}
body::-webkit-scrollbar-track{
background:#ececec;
}
body::-webkit-scrollbar-thumb{
background:var(--secondary);
border-radius:20px;
}
body::-webkit-scrollbar-thumb:hover{
background:#8C6E3F;
}
/* ==========================================================================
   02. SHARED TYPOGRAPHY (.section-title used by About / Destinations / Certificates)
   ========================================================================== */
.section-title{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
margin-bottom:clamp(14px,3vh,32px);
}
.section-title span,
.sub-heading{
display:block;
color:var(--secondary);
font-size:clamp(.75rem,1vw,.9rem);
font-weight:600;
letter-spacing:3px;
text-transform:uppercase;
margin-bottom:14px;
}
.section-title h2{
font-family:'Cormorant Garamond',serif;
font-size:clamp(1.6rem,3.5vw,2.4rem);
font-weight:700;
color:var(--heading);
margin-bottom:9px;
line-height:1.15;
}
.section-title p{
font-size:clamp(.85rem,1vw,.95rem);
max-width:537px;
line-height:1.8;
}
.title-line{
width:70px;
height:3px;
background:var(--secondary);
border-radius:50px;
margin-top:18px;
}
/* ==========================================================================
   03. BUTTONS (shared)
   ========================================================================== */
.btn{
display:flex;
justify-content:center;
align-items:center;
padding:16px 45px;
border-radius:60px;
font-size:clamp(.85rem,1vw,.95rem);
font-weight:600;
transition:var(--transition);
}
.btn-primary{
background:var(--secondary);
color:#fff;
}
.btn-primary:hover{
background:#8C6E3F;
transform:translateY(-4px);
}
.btn-secondary{
background:transparent;
border:2px solid #fff;
color:#fff;
}
.btn-secondary:hover{
background:#fff;
color:var(--primary);
}
/* ==========================================================================
   04. HEADER / NAVBAR
   ========================================================================== */
header{
background:#fff;
position:sticky;
top:0;
z-index:999;
box-shadow:0 8px 25px rgba(0,0,0,.05);
}
.navbar{
display:flex;
height:var(--header-h);
}
.nav-wrapper{
display:flex;
flex-wrap:nowrap;
justify-content:space-between;
align-items:center;
position:relative;
width:100%;
}
.logo{
display:flex;
align-items:center;
gap:15px;
flex-shrink:0;
}
.logo img{
width:clamp(42px,4vw,58px);
}
.logo h2{
font-family:'Cormorant Garamond',serif;
font-size:clamp(1.3rem,2.5vw,2rem);
color:var(--primary);
line-height:1;
}
.logo span{
font-size:clamp(.65rem,1vw,.85rem);
font-weight:600;
letter-spacing:3px;
color:var(--secondary);
}
.menu-btn{
display:none;
justify-content:center;
align-items:center;
font-size:1.7rem;
cursor:pointer;
color:var(--primary);
flex-shrink:0;
}
.nav-links{
display:flex;
align-items:center;
gap:35px;
}
.nav-links a{
display:flex;
font-size:.96rem;
font-weight:500;
color:#2B3245;
white-space:nowrap;
transition:var(--transition);
}
.nav-links a:hover{
color:var(--secondary);
}
/* ==========================================================================
   05. HERO
   ========================================================================== */
#hero{
display:flex;
background:linear-gradient(rgba(10,34,64,.82),rgba(10,34,64,.82)),url(images/hero-bg.jpg);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
width:100vw;
height:calc(100vh - var(--header-h));
overflow:hidden;
scroll-snap-align:start;
}
.hero-wrapper{
display:flex;
padding: 0 22px;
align-items:center;
width:100%;
}
.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0px 61px;
}
.hero-tag{
display:inline-flex;
align-self:flex-start;
padding:10px 18px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.25);
border-radius:40px;
color:#fff;
margin-bottom:25px;
font-size:clamp(.75rem,1vw,.9rem);
}
.hero-content h1{
font-family:'Cormorant Garamond',serif;
font-size:clamp(1.8rem,4.5vw,3rem);
line-height:1.15;
color:#fff;
margin-bottom:clamp(25px,4vw,45px);
max-width:700px;
}
.hero-content p{
font-size:clamp(.9rem,1.2vw,1.1rem);
line-height:1.9;
color:#ddd;
max-width:620px;
margin-bottom:clamp(30px,5vw,58px);
}
.hero-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
}
/* ==========================================================================
   06. ABOUT
   ========================================================================== */
#about{
display:flex;
flex-direction:column;
justify-content:center;
width:100vw;
height:calc(100vh - var(--header-h));
overflow:hidden;
padding:clamp(20px,4vh,60px) 0;
background:#fff;
scroll-snap-align:start;
}
.about-wrapper{
display:flex;
flex-wrap:nowrap;
justify-content:space-between;
align-items:center;
gap:clamp(30px,4vw,60px);
}
.about-image{
display:flex;
overflow:hidden;
border-radius:24px;
flex:1 1 380px;
height:clamp(180px,38vh,340px);
}
.about-image img{
border-radius:24px;
object-fit:cover;
transition:.6s;
}
.about-image:hover img{
transform:scale(1.05);
}
.about-content {
    display: flex;
    flex-direction: column;
    gap: clamp(10px,2vh,20px);
    flex: 1 1 420px;
    border-radius: 2rem;
    background: linear-gradient(150deg,var(--primary) 0%,var(--primary-dark) 100%);
    padding: 22px 20px;
    box-shadow:0 20px 45px rgba(13,43,82,.18);
}
.about-box{
display:flex;
align-items:flex-start;
gap:20px;
}
.about-icon {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: var(--secondary);
    font-size: 1.6rem;
    transition: .35s;
}
.about-box:hover .about-icon{
background:var(--secondary);
color:#fff;
}
.about-text h3 {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(1.2rem,2vw,1.6rem);
    color: #fff;
    margin-bottom: 6px;
}
.about-text p {
    font-size: clamp(.8rem,1vw,.9rem);
    line-height: 1.7;
    color: rgba(255,255,255,.8);
    font-weight: 500;
}
.divider {
    height: 1px;
    background: linear-gradient(to right,transparent,rgba(255,255,255,.25),transparent);
}
.trust-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: clamp(14px,3vh,28px);
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(0,0,0,.08);
    padding: 10px;
    border: 1px solid var(--border);
}
.trust-card{
display:flex;
align-items:center;
gap:14px;
padding:clamp(8px,1.5vh,14px);
flex:1 1 220px;
transition:.35s ease;
cursor:pointer;
}
.trust-card:hover{
background:#FAFBFD;
}
.trust-card i{
display:flex;
flex-shrink:0;
justify-content:center;
align-items:center;
width:50px;
height:50px;
border-radius:50%;
background:rgba(201,151,62,.12);
color:var(--primary);
font-size:1.5rem;
transition:.35s;
}
.trust-card:hover i{
background:var(--secondary);
color:#fff;
transform:rotate(-10deg);
}
.trust-card h4{
font-size:clamp(.85rem,1vw,.95rem);
color:var(--heading);
margin-bottom:4px;
}
.trust-card p{
font-size:clamp(.68rem,.9vw,.78rem);
line-height:1.3;
color:#666;
}
/* ==========================================================================
   07. DIRECTOR SECTION
   ========================================================================== */
#director-section{
position:relative;
display:flex;
justify-content:center;
align-items:center;
width:100vw;
height:calc(100vh - var(--header-h));
overflow:hidden;
padding:clamp(20px,5vh,60px) 0;
background:linear-gradient(90deg,#faf8f4 0%,#ffffff 45%,#fcfaf6 100%);
scroll-snap-align:start;
}
.director-bg-circle{
position:absolute;
border-radius:50%;
filter:blur(110px);
opacity:.25;
background:var(--secondary-light);
z-index:0;
}
.director-bg-circle.c1{
width:480px;
height:480px;
top:-220px;
right:-160px;
}
.director-bg-circle.c2{
width:360px;
height:360px;
bottom:-200px;
left:-140px;
background:var(--primary);
opacity:.06;
}
.director-container{
display:flex;
flex-wrap:nowrap;
justify-content:space-between;
align-items:center;
width:88%;
max-width:1450px;
gap:clamp(40px,6vw,7rem);
position:relative;
z-index:2;
}
.director-content{
display:flex;
flex-direction:column;
justify-content:center;
flex:1 1 420px;
order:1;
position:relative;
transition:.4s;
}
.director-content::before{
content:"\201C";
position:absolute;
top:-70px;
left:-30px;
font-family:'Cormorant Garamond',serif;
font-size:11rem;
font-weight:700;
line-height:1;
color:var(--secondary);
opacity:.12;
z-index:-1;
pointer-events:none;
}
.section-tag{
display:inline-flex;
align-items:center;
gap:14px;
color:#B08D57;
letter-spacing:4px;
font-size:.82rem;
font-weight:600;
text-transform:uppercase;
margin-bottom:22px;
}
.section-tag::before,
.section-tag::after{
content:"";
width:34px;
height:2px;
background:linear-gradient(to right,var(--secondary-dark),var(--secondary));
}
.section-tag::after{
background:linear-gradient(to left,var(--secondary-dark),var(--secondary));
}
.director-content h2{
font-family:'Cormorant Garamond',serif;
font-size:clamp(2rem,3.6vw,3.8rem);
line-height:1.1;
color:#14243D;
font-weight:700;
margin-bottom:clamp(16px,2.5vh,28px);
}
.gold-line{
position:relative;
width:65px;
height:2px;
background:linear-gradient(to right,var(--secondary),var(--secondary-light));
margin-bottom:clamp(18px,3vh,34px);
}
.gold-line::after{
content:"";
position:absolute;
top:50%;
left:100%;
width:7px;
height:7px;
margin-left:6px;
border-radius:50%;
background:var(--secondary);
transform:translateY(-50%);
}
.director-message{
position:relative;
max-width:637px;
font-size:clamp(1rem,1.15vw,1.15rem);
line-height:1.9;
color:#5B6472;
padding-left:clamp(18px,2.2vw,26px);
border-left:2px solid rgba(176,141,87,.4);
font-style:italic;
}
.director-image{
position:relative;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
flex:1 1 420px;
order:2;
transition:.45s;
}
.image-frame{
display:flex;
position:relative;
overflow:hidden;
width:100%;
max-width:504px;
height:clamp(202px,44vh,405px);
background:#ECE3D3;
border-radius:14px;
outline:2px solid var(--secondary);
outline-offset:14px;
box-shadow:0 35px 80px rgba(0,0,0,.12);
transition:.45s ease;
}
.director-image:hover .image-frame{
outline-offset:10px;
}
.image-frame img {
    object-fit: contain;
    object-position: center top;
    transition: .6s;
}
.image-frame:hover img{
transform:scale(1.04);
}
.name-card{
position:relative;
width:calc(100% - 28px);
max-width:calc(504px - 28px);
margin-top:clamp(-30px,-3.4vh,-22px);
display:flex;
justify-content:center;
align-items:center;
gap:14px;
padding:14px 28px 14px 18px;
background:var(--primary);
border-left:4px solid var(--secondary);
border-radius:10px;
box-shadow:0 25px 55px rgba(10,20,35,.4);
z-index:3;
transition:.45s;
}
.name-card::before{
content:"\f007";
font-family:"Font Awesome 6 Free";
font-weight:900;
width:38px;
height:38px;
border-radius:50%;
background:rgba(176,141,87,.16);
border:1px solid var(--secondary);
display:flex;
align-items:center;
justify-content:center;
color:var(--secondary);
font-size:15px;
flex-shrink:0;
}
.director-image:hover .name-card{
transform:translateY(-8px);
}
.name-card h4{
font-family:'Cormorant Garamond',serif;
font-size:clamp(1.2rem,1.8vw,1.7rem);
font-weight:600;
margin-bottom:2px;
color:#fff;
white-space:nowrap;
}
.name-card span{
color:#B08D57;
font-size:.85rem;
font-weight:500;
white-space:nowrap;
}
/* ==========================================================================
   08. SERVICES
   ========================================================================== */
#services{
position:relative;
display:flex;
align-items:stretch;
width:100vw;
height:calc(100vh - var(--header-h));
overflow:hidden;
padding:clamp(12px,3vh,40px) 0;
background:linear-gradient(180deg,#ffffff 0%,#fcfaf6 50%,#ffffff 100%);
scroll-snap-align:start;
}
#services .container{
display:flex;
flex-direction:column;
justify-content:center;
position:relative;
z-index:5;
margin:0 auto;
height:100%;
}
.services-bg-circle{
position:absolute;
border-radius:50%;
filter:blur(100px);
opacity:.22;
}
.circle1{
width:520px;
height:520px;
background:#DDCBA0;
top:-220px;
left:-180px;
}
.circle2{
width:450px;
height:450px;
background:#DDCBA0;
bottom:-180px;
right:-150px;
}
.section-heading{
display:flex;
flex-direction:column;
align-items:center;
max-width:900px;
margin:0 auto clamp(8px,2vh,20px);
text-align:center;
}
.sub-title{
display:inline-flex;
align-items:center;
gap:18px;
color:#8C6E3F;
font-size:clamp(11px,1vw,13px);
font-weight:600;
letter-spacing:4px;
text-transform:uppercase;
margin-bottom:14px;
}
.sub-title .line{
width:70px;
height:2px;
background:linear-gradient(to right,#B08D57,#DDCBA0);
}
.section-heading h2{
font-family:'Cormorant Garamond',serif;
font-size:clamp(1.8rem,4vw,2.6rem);
line-height:1.15;
font-weight:700;
color:#16233D;
margin-bottom:12px;
}
.section-heading h2 span{
color:#8C6E3F;
}
.section-heading p{
max-width:600px;
font-size:clamp(.8rem,1vw,.95rem);
color:#676767;
line-height:1.9;
}
.services-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
grid-auto-rows:1fr;
gap:clamp(10px,1.8vh,20px);
flex:1;
min-height:0;
}
.service-card{
position:relative;
overflow:hidden;
display:flex;
flex-direction:column;
min-height:clamp(130px,22vh,210px);
background:var(--white);
border-radius:16px;
box-shadow:0 18px 36px rgba(8,20,39,.14);
cursor:pointer;
transition:transform .35s ease,box-shadow .35s ease;
}
.service-card:hover{
transform:translateY(-8px);
box-shadow:0 30px 60px rgba(8,20,39,.26);
}
/* ---- top image ---- */
.service-img{
position:relative;
width:100%;
height:clamp(50px,16vh,150px);
overflow:hidden;
flex-shrink:0;
}
.service-img img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s ease;
}
.service-card:hover .service-img img{
transform:scale(1.08);
}
.service-img::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(20,36,61,0) 55%,rgba(11,23,41,.9) 100%);
}
/* ---- icon: overlaps image + content ---- */
.service-icon{
position:relative;
z-index:2;
flex-shrink:0;
width:clamp(34px,2.4vw + 2.6vh,64px);
height:clamp(34px,2.4vw + 2.6vh,64px);
margin:calc(-1 * clamp(17px,1.2vw + 1.3vh,32px)) auto 0;
border-radius:50%;
background:var(--primary);
border:2px solid var(--secondary);
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 10px 20px rgba(8,20,39,.35);
transition:.4s;
}
.service-icon i{
font-size:clamp(16px,1.2vw + 1.3vh,28px);
color:var(--secondary);
transition:.35s;
}
.service-card:hover .service-icon{
background:var(--secondary);
}
.service-card:hover .service-icon i{
color:var(--primary-dark);
}
/* ---- content: heading + text below image ---- */
.service-content{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;

}
.service-content h3{
font-family:'Cormorant Garamond',serif;
font-size:clamp(1rem,.6vw + 1.1vh,1.75rem);
font-weight:700;
color:var(--heading);
margin:6px 0 10px;
}
.service-divider{
width:32px;
height:2px;
background:linear-gradient(to right,var(--secondary),var(--secondary-light));
margin-bottom:clamp(10px,1.8vh,18px);
flex-shrink:0;
}
.service-content p{
max-width:32ch;
font-size:clamp(.78rem,.3vw + .65vh,1.05rem);
color:var(--text);
line-height:1.6;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
/* ==========================================================================
   09. INDUSTRIES
   ========================================================================== */
#industries{
position:relative;
display:flex;
align-items:center;
width:100vw;
min-height:calc(100vh - var(--header-h));
padding:clamp(16px,4vh,60px) 0;
background:linear-gradient(rgba(8,20,39,.92),rgba(8,20,39,.92)),url("images/industry-bg.webp");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
scroll-snap-align:start;
}
.industry-overlay{
position:absolute;
inset:0;
background:radial-gradient(circle at top left,rgba(201,151,62,.12),transparent 35%),radial-gradient(circle at bottom right,rgba(201,151,62,.08),transparent 35%);
}
#industries .container{
display:flex;
flex-direction:column;
justify-content:center;
position:relative;
z-index:5;
}
.industry-heading{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
margin-bottom:clamp(14px,3vh,28px);
}
.industry-subtitle{
display:inline-flex;
align-items:center;
gap:18px;
color:#B08D57;
font-size:clamp(11px,1vw,13px);
font-weight:600;
letter-spacing:2px;
margin-bottom:9px;
}
.industry-subtitle span{
width:65px;
height:2px;
background:#B08D57;
}
.industry-heading h2{
font-family:'Cormorant Garamond',serif;
font-size:clamp(1.8rem,4vw,2.6rem);
color:#fff;
margin-bottom:18px;
}
.industry-heading h2 span{
color:#B08D57;
}
.industry-heading p{
max-width:500px;
color:#d0d4db;
font-size:clamp(.85rem,1vw,1.1rem);
line-height:1.8;
}
.industry-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
grid-auto-rows:1fr;
gap:clamp(10px,1.8vh,20px);
}
.industry-card{
position:relative;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
min-height:clamp(130px,22vh,210px);
background:linear-gradient(155deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.015) 100%);
border:1px solid rgba(255,255,255,.10);
border-radius:14px;
padding:clamp(14px,2.4vh,28px) clamp(14px,2vw,26px);
text-align:left;
overflow:hidden;
transition:.4s ease;
}
.industry-card::before{
content:"";
position:absolute;
left:0;
top:0;
width:3px;
height:100%;
background:#B08D57;
transform:scaleY(0);
transform-origin:top;
transition:.45s ease;
}
.industry-card::after{
content:"";
position:absolute;
right:-40px;
bottom:-40px;
width:120px;
height:120px;
border-radius:50%;
background:radial-gradient(circle,rgba(201,151,62,.10),transparent 70%);
opacity:0;
transition:.5s;
}
.industry-card:hover{
transform:translateY(-10px);
border-color:rgba(201,151,62,.35);
background:linear-gradient(155deg,rgba(201,151,62,.07) 0%,rgba(255,255,255,.02) 100%);
box-shadow:0 25px 55px rgba(0,0,0,.35);
}
.industry-card:hover::before{
transform:scaleY(1);
}
.industry-card:hover::after{
opacity:1;
}
.industry-number{
position:absolute;
top:clamp(14px,2vh,22px);
right:clamp(16px,2vw,24px);
font-size:clamp(13px,1vw + 0.4vh,16px);
font-family:'Poppins',sans-serif;
font-weight:600;
letter-spacing:1px;
color:rgba(255,255,255,.28);
z-index:2;
transition:.4s;
}
.industry-card:hover .industry-number{
color:rgba(201,151,62,.6);
}
.industry-icon{
position:relative;
display:flex;
justify-content:center;
align-items:center;
flex-shrink:0;
width:clamp(42px,3.2vw + 1.6vh,54px);
height:clamp(42px,3.2vw + 1.6vh,54px);
margin-bottom:clamp(12px,2vh,22px);
border-radius:12px;
background:rgba(201,151,62,.10);
border:1px solid rgba(201,151,62,.35);
transition:.4s;
}
.industry-card:hover .industry-icon{
background:#B08D57;
border-color:#B08D57;
transform:scale(1.06);
}
.industry-icon i{
font-size:clamp(16px,1.4vw + 0.8vh,22px);
color:#B08D57;
transition:.35s;
}
.industry-card:hover .industry-icon i{
color:#14243D;
}
.industry-card h3{
font-family:'Cormorant Garamond',serif;
color:#fff;
font-size:clamp(1rem,1.6vw + 0.6vh,1.5rem);
margin-bottom:6px;
line-height:1.2;
transition:.35s;
position:relative;
z-index:2;
}
.industry-card:hover h3{
color:#B08D57;
}
.industry-card p{
color:#cfd6df;
font-size:clamp(.62rem,0.7vw + 0.4vh,.8rem);
line-height:1.5;
position:relative;
z-index:2;
}
/* ==========================================================================
   10. DESTINATIONS (COUNTRIES)
   ========================================================================== */
.destinations-section{
display:flex;
flex-direction:column;
justify-content:center;
width:100vw;
min-height:calc(100vh - var(--header-h));
padding:clamp(16px,4vh,60px) 8%;
background:#fff;
scroll-snap-align:start;
}
.destination-wrapper{
display:grid;
grid-template-columns:repeat(3,1fr);
grid-auto-rows:1fr;
gap:clamp(10px,1.6vw,22px);
}
.destination-card{
position:relative;
isolation:isolate;
display:flex;
align-items:flex-end;
height:clamp(120px,24vh,240px);
overflow:hidden;
border-radius:18px;
text-decoration:none;
background:#ddd;
box-shadow:0 18px 40px rgba(0,0,0,.12);
transition:.45s;
}
.destination-card img{
position:absolute;
inset:0;
height:100%;
object-fit:cover;
transition:transform .9s ease,filter .5s ease;
}
.destination-card:hover img{
transform:scale(1.12);
filter:brightness(1.08);
}
.destination-card .overlay{
position:absolute;
inset:0;
background:linear-gradient(to top,rgba(0,0,0,.90) 0%,rgba(0,0,0,.72) 18%,rgba(0,0,0,.35) 42%,rgba(0,0,0,.06) 72%,transparent 100%);
transition:.45s;
}
.destination-card:hover .overlay{
background:linear-gradient(to top,rgba(0,0,0,.94),rgba(0,0,0,.72),rgba(0,0,0,.28),transparent);
}
.destination-card::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 35%);
opacity:.45;
z-index:2;
pointer-events:none;
}
.destination-card::after{
content:"";
position:absolute;
top:-120%;
left:-45%;
width:45%;
height:300%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
transform:rotate(22deg);
transition:1s;
z-index:20;
pointer-events:none;
}
.destination-card:hover::after{
left:145%;
}
.card-content{
position:relative;
z-index:10;
display:flex;
flex-direction:column;
padding:clamp(14px,2.5vh,26px);
transition:.45s;
}
.destination-card:hover .card-content{
transform:translateY(-8px);
}
.country-icon{
display:flex;
justify-content:center;
align-items:center;
width:clamp(34px,2.6vw + 1.4vh,50px);
height:clamp(34px,2.6vw + 1.4vh,50px);
border:2px solid rgba(255,255,255,.18);
border-radius:16px;
backdrop-filter:blur(8px);
background:rgba(255,255,255,.08);
margin-bottom:18px;
transition:.35s;
}
.destination-card:hover .country-icon{
background:#B08D57;
border-color:#B08D57;
transform:scale(1.08);
}
.country-icon i{
color:#fff;
font-size:28px;
}
.card-content h3{
font-family:'Poppins',sans-serif;
color:#fff;
font-size:clamp(.9rem,1.2vw + 0.6vh,1.25rem);
font-weight:700;
margin-bottom:4px;
line-height:1.15;
transition:.35s;
}
.card-content p{
color:#fff;
font-family:'Poppins',sans-serif;
font-size:clamp(.68rem,0.7vw + 0.4vh,.92rem);
opacity:.9;
font-weight:300;
transition:.35s;
}
.destination-card:hover p{
opacity:1;
}
.destination-btn{
display:flex;
justify-content:center;
margin-top:clamp(14px,3vh,32px);
}
.view-btn{
position:relative;
display:inline-flex;
align-items:center;
gap:14px;
padding:18px 42px;
border:2px solid #B08D57;
border-radius:60px;
color:#B08D57;
font-family:'Poppins',sans-serif;
font-weight:600;
font-size:clamp(.9rem,1vw,1.1rem);
overflow:hidden;
transition:.35s;
}
.view-btn::before{
content:"";
position:absolute;
left:-100%;
top:0;
width:100%;
height:100%;
background:rgba(255,255,255,.18);
transition:.5s;
}
.view-btn:hover::before{
left:100%;
}
.view-btn:hover{
background:#B08D57;
color:#fff;
}
.view-btn i{
transition:.35s;
}
.view-btn:hover i{
transform:translateX(6px);
}
/* ==========================================================================
   11. CERTIFICATES
   ========================================================================== */
#certificates{
display:flex;
align-items:center;
justify-content:center;
width:100vw;
height:calc(100vh - var(--header-h));
overflow:hidden;
padding:clamp(16px,4vh,60px) 0;
background:var(--light);
scroll-snap-align:start;
}
#certificates .container{
display:flex;
flex-direction:column;
justify-content:center;
width:92%;
max-width:var(--max-width);
margin:auto;
}
.certificate-wrapper{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:clamp(10px,2vw,28px);
}
.certificate-wrapper img{
flex:1 1 180px;
max-width:240px;
max-height:clamp(160px,42vh,320px);
width:auto;
object-fit:contain;
border-radius:16px;
background:#fff;
padding:12px;
border:1px solid var(--border);
box-shadow:0 15px 35px rgba(0,0,0,.06);
transition:var(--transition);
}
.certificate-wrapper img:hover{
transform:translateY(-8px);
box-shadow:0 22px 45px rgba(0,0,0,.10);
}
/* ==========================================================================
   12. CONTACT
   ========================================================================== */
#contact{
display:flex;
align-items:center;
justify-content:center;
width:100vw;
height:calc(100vh - var(--header-h));
overflow:hidden;
background:#F8F9FB;
font-family:'Poppins',sans-serif;
padding:clamp(16px,4vh,60px) 0;
scroll-snap-align:start;
}
.contact-wrapper{
display:flex;
flex-wrap:nowrap;
width:min(1700px,94%);
height:100%;
max-height:clamp(320px,72vh,620px);
margin:auto;
border-radius:28px;
overflow:hidden;
box-shadow:0 45px 90px rgba(0,0,0,.14);
background:#ffffff;
}
.contact-panel{
display:flex;
flex-direction:column;
justify-content:center;
position:relative;
flex:1 1 380px;
padding:clamp(14px,2.5vh,36px);
background:linear-gradient(180deg,#14243D 0%,#0B1729 100%);
}
.contact-panel::before{
content:"";
position:absolute;
right:-130px;
top:-100px;
width:280px;
height:280px;
border-radius:50%;
background:rgba(255,255,255,.05);
}
.contact-panel::after{
content:"";
position:absolute;
left:-90px;
bottom:-120px;
width:240px;
height:240px;
border-radius:50%;
background:rgba(255,255,255,.04);
}
.contact-small-title{
color:#DDCBA0;
letter-spacing:3px;
font-size:12px;
font-weight:600;
margin-bottom:10px;
}
.contact-panel h2{
color:#fff;
font-size:clamp(1.4rem,2.5vw,1.9rem);
font-family:'Cormorant Garamond',serif;
line-height:1.1;
margin-bottom:14px;
}
.contact-panel h2 span{
color:#DDCBA0;
}
.contact-panel>p{
color:rgba(255,255,255,.82);
font-size:clamp(.85rem,1vw,.95rem);
line-height:1.7;
margin-bottom:20px;
}
.office-switcher{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:clamp(10px,2vh,20px);
}
.office-btn{
display:flex;
align-items:center;
height:36px;
padding:0 18px;
border:none;
border-radius:100px;
cursor:pointer;
background:rgba(255,255,255,.10);
color:#fff;
font-weight:500;
transition:.35s;
backdrop-filter:blur(8px);
}
.office-btn:hover{
background:rgba(255,255,255,.20);
}
.office-btn.active{
background:#ffffff;
color:#14243D;
}
#officeContent{
display:flex;
flex-direction:column;
gap:6px;
transition:.35s;
}
.detail-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 10px 0px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.detail-row.last-row{
border-bottom:none;
}
.detail-icon{
display:flex;
flex-shrink:0;
justify-content:center;
align-items:center;
width:40px;
height:40px;
border-radius:12px;
background:rgba(255,255,255,.10);
}
.detail-icon i{
color:#fff;
font-size:18px;
}
.detail-text{
display:flex;
flex-direction:column;
}
.detail-text span{
color:rgba(255,255,255,.65);
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:6px;
}
.detail-text p{
color:#ffffff;
line-height:1.8;
font-size:clamp(.85rem,1vw,.95rem);
}
.map-side{
position:relative;
display:flex;
overflow:hidden;
flex:1 1 380px;
min-height:200px;
background:#dfe8e3;
}
.map-container{
position:relative;
display:flex;
width:100%;
isolation:isolate;
}
.map-container iframe{
width:100%;
height:100%;
border:none;
filter:saturate(.85) contrast(.95) brightness(.96);
}
.map-container::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 18%,rgba(0,0,0,0) 82%,rgba(0,0,0,.08) 100%);
pointer-events:none;
z-index:2;
}
.custom-map-btn{
position:absolute;
top:25px;
left:25px;
z-index:10;
display:flex;
align-items:center;
gap:10px;
background:#fff;
padding:14px 22px;
border-radius:12px;
color:#14243D;
font-weight:600;
box-shadow:0 15px 35px rgba(0,0,0,.18);
transition:.35s;
}
.custom-map-btn:hover{
transform:translateY(-4px);
}
.map-overlay {
    position: absolute;
    left: 25px;
    bottom: 57px;
    z-index: 10;
    display: flex;
}
.location-badge{
display:flex;
align-items:center;
gap:10px;
background:rgba(255,255,255,.92);
padding:12px 20px;
border-radius:12px;
color:#14243D;
font-weight:600;
font-size:.9rem;
box-shadow:0 15px 35px rgba(0,0,0,.15);
}
/* ==========================================================================
   13. FOOTER
   ========================================================================== */
footer{
display:flex;
flex-direction:column;
background:var(--primary);
padding:clamp(50px,8vw,80px) 0 25px;
color:#fff;
}
.footer-wrapper{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:flex-start;
gap:clamp(30px,5vw,60px);
padding-bottom:50px;
}
.footer-about{
display:flex;
flex-direction:column;
flex:1 1 260px;
}
.footer-about h3{
font-family:'Cormorant Garamond',serif;
font-size:clamp(1.6rem,2.5vw,2.3rem);
margin-bottom:18px;
color:#fff;
}
.footer-about p{
line-height:1.9;
color:rgba(255,255,255,.75);
font-size:clamp(.85rem,1vw,.95rem);
}
.footer-links{
display:flex;
flex-direction:column;
gap:16px;
flex:1 1 180px;
}
.footer-links h4{
font-size:1.2rem;
margin-bottom:10px;
}
.footer-links a{
color:rgba(255,255,255,.75);
font-size:clamp(.85rem,1vw,.95rem);
transition:var(--transition);
}
.footer-links a:hover{
color:var(--secondary);
padding-left:8px;
}
.footer-contact{
display:flex;
flex-direction:column;
gap:16px;
flex:1 1 220px;
}
.footer-contact h4{
font-size:1.2rem;
margin-bottom:10px;
}
.footer-contact p{
color:rgba(255,255,255,.75);
line-height:1.8;
font-size:clamp(.85rem,1vw,.95rem);
}
.copyright{
display:flex;
justify-content:center;
align-items:center;
padding-top:25px;
border-top:1px solid rgba(255,255,255,.12);
}
.copyright p{
font-size:.85rem;
letter-spacing:.5px;
color:rgba(255,255,255,.70);
text-align:center;
}