/* ==========================================================================
   RESPONSIVE BREAKPOINTS USED THROUGHOUT THIS FILE
   Every section is width:100vw / height:calc(100vh - var(--header-h)) in
   style.css, so all rules below only ever resize gaps, padding and card
   height (via clamp) to keep each section fitting one screen - they never
   change grid-template-columns on .services-grid / .industry-grid /
   .destination-wrapper. Those three stay a fixed 3-column grid at every
   width so cards are always 3-per-row, never 2 or 1.
   1200px -> contact/map switches to a stacked layout (needs more room)
   992px  -> navbar becomes a dropdown menu; two-column sections stack
   768px  -> large mobile spacing, smaller card heights
   480px  -> small mobile fine-tuning
   max-height queries -> extra shrink for short/landscape viewports so a
   full section still fits in one screen height-wise.
   Base style.css uses flex-wrap:nowrap on two-column sections on purpose,
   so nothing wraps or reflows until the breakpoint below explicitly says so.
   ========================================================================== */
/* ==========================================================================
   HEADER / NAVBAR
   ========================================================================== */
@media(max-width:992px){
.menu-btn{
display:flex;
}
.nav-links{
position:absolute;
top:calc(100% + 1px);
left:0;
flex-direction:column;
justify-content:flex-start;
width:100%;
height:0;
gap:0;
overflow:hidden;
background:#fff;
box-shadow:0 20px 40px rgba(0,0,0,.08);
transition:height .4s ease;
}
.nav-links.active{
height:auto;
padding:10px 0;
}
.nav-links a{
justify-content:center;
width:100%;
padding:18px 0;
border-bottom:1px solid #ececec;
}
}
@media(max-width:480px){
:root{
--header-h:70px;
}
.navbar{
height:70px;
}
}
/* ==========================================================================
   HERO
   ========================================================================== */
@media(max-width:992px){
.hero-wrapper {
    text-align: center;
    justify-content: center;
}
.hero-content {
    align-items: center;
    height: 100vh;
}
.hero-content > * {
 
   margin: 27px 0px;
}
.hero-tag {
    border: 1px solid rgba(255,255,255,.35);
    align-self: center;
}
.hero-buttons{
justify-content:center;
}
}
@media(max-width:480px){
.hero-buttons{
flex-direction:column;
width:100%;
}
.btn{
width:100%;
}
}
/* ==========================================================================
   ABOUT
   ========================================================================== */
@media(max-width:992px){
#about{
padding:clamp(10px,2vh,30px) 0;
}
.about-wrapper{
flex-direction:column;
flex-wrap:wrap;
gap:clamp(8px,1.6vh,20px);
}
.about-image {
    width: 100%;
    flex: none;
    height: clamp(90px,32vh,266px);
}
.about-content {
    width: 100%;
    flex: none;
    gap: clamp(4px,0.5vh,10px);
}
.about-box{
gap:12px;
}
.about-icon{
width:40px;
height:40px;
font-size:1.1rem;
}
.about-text h3{
font-size:1rem;
margin-bottom:2px;
}
.about-text p{
font-size:.75rem;
line-height:1.4;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
}
.trust-wrapper{
margin-top:clamp(6px,1.4vh,16px);
padding:6px;
}
.trust-card{
padding:6px;
gap:8px;
}
.trust-card i{
width:34px;
height:34px;
font-size:1rem;
}
.trust-card p{
display:none;
}
}
@media(max-width:768px){
.trust-wrapper{
flex-direction:row;
flex-wrap:wrap;
}
.trust-card{
flex:1 1 46%;
border-bottom:none;
}
}
/* ==========================================================================
   DIRECTOR SECTION
   ========================================================================== */
@media(max-width:1200px){
.director-container{
gap:2.5rem;
}
.image-frame{
max-width:380px;
height:clamp(220px,46vh,420px);
outline-offset:10px;
}
.director-content::before{
font-size:8rem;
top:-50px;
}
}
@media(max-width:992px){
#director-section{
padding:clamp(10px,2.4vh,40px) 0;
}
.director-bg-circle{
opacity:.15;
}
.director-container{
flex-direction:column;
flex-wrap:nowrap;
gap:clamp(10px,2vh,24px);
}
.director-content{
align-items:center;
text-align:center;
flex:none;
width:100%;
}
.director-content::before{
display:none;
}
.section-tag{
margin-bottom:14px;
}
.director-content h2{
font-size:clamp(1.4rem,3.5vw,2.2rem);
}
.director-message{
max-width:600px;
font-size:.9rem;
line-height:1.6;
padding-left:0;
border-left:none;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
.director-image{
flex-direction:column;
justify-content:center;
align-items:center;
flex:none;
width:100%;
margin-top:26px;
}
.image-frame{
outline-offset:8px;
}

.name-card{
position:static;
transform:none;
margin-top:22px;
max-width:100%;
width:auto;
justify-content:center;
padding:12px 24px;
}
.name-card h4{
font-size:1.1rem;
margin-bottom:2px;
}
.director-image:hover .name-card{
transform:none;
}
}
@media(max-width:480px){
.director-container{
gap:10px;
}
.image-frame{
max-width:50%;
height:clamp(100px,24vh,180px);
outline-offset:6px;
}
.name-card{
padding:10px 18px;
gap:10px;
}
.name-card::before{
width:32px;
height:32px;
font-size:13px;
}
}
/* ==========================================================================
   SERVICES
   ========================================================================== */
@media(max-width:992px){
.services-grid{
gap:8px;
}
.service-card{
border-radius:14px;
}
.service-img{
height:clamp(50px,12vh,110px);
}
.service-icon{
width:clamp(34px,2vw + 2.4vh,54px);
height:clamp(34px,2vw + 2.4vh,54px);
margin:calc(-1 * clamp(17px,1vw + 1.2vh,27px)) auto 0;
}
.service-icon i{
font-size:clamp(15px,1vw + 1.1vh,24px);
}
.service-content{
padding:clamp(8px,2vh,20px) 12px;
}
.service-content h3{
font-size:clamp(.92rem,.5vw + .9vh,1.3rem);
margin:6px 0 8px;
}
.service-divider{
margin-bottom:clamp(8px,1.4vh,14px);
}
.service-content p{
font-size:clamp(.74rem,.3vw + .6vh,.92rem);
line-height:1.55;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
}
}
@media(max-width:768px){
.services-grid{
gap:7px;
}
.service-card{
border-radius:12px;
}
.service-img{
height:clamp(44px,11vh,95px);
}
.service-icon{
width:clamp(30px,1.8vw + 2.2vh,46px);
height:clamp(30px,1.8vw + 2.2vh,46px);
margin:calc(-1 * clamp(15px,.9vw + 1.1vh,23px)) auto 0;
border-width:2px;
}
.service-icon i{
font-size:clamp(13px,.9vw + 1vh,20px);
}
.service-content{
padding:clamp(6px,1.8vh,16px) 10px;
}
.service-content h3{
font-size:clamp(.86rem,.45vw + .8vh,1.15rem);
margin:5px 0 6px;
}
.service-divider{
margin-bottom:clamp(7px,1.2vh,12px);
}
.service-content p{
font-size:clamp(.68rem,.25vw + .55vh,.84rem);
line-height:1.5;
}
}
@media(max-width:480px){
.services-grid{
gap:5px;
}
.service-card{
border-radius:10px;
}
.service-img{
height:clamp(38px,10vh,80px);
}
.service-icon{
width:clamp(26px,1.6vw + 2vh,40px);
height:clamp(26px,1.6vw + 2vh,40px);
margin:calc(-1 * clamp(13px,.8vw + 1vh,20px)) auto 0;
border-width:2px;
}
.service-icon i{
font-size:clamp(12px,.8vw + .9vh,17px);
}
.service-content{
padding:clamp(5px,1.6vh,14px) 8px;
}
.service-content h3{
font-size:clamp(.78rem,.4vw + .7vh,1rem);
margin:4px 0 5px;
}
.service-divider{
width:24px;
margin-bottom:clamp(5px,1vh,10px);
}
.service-content p{
font-size:clamp(.62rem,.2vw + .5vh,.76rem);
line-height:1.45;
}
}
/* ==========================================================================
   INDUSTRIES
   ========================================================================== */
@media(max-width:992px){
.industry-grid{
gap:10px;
}
.industry-card{
min-height:clamp(110px,20vh,180px);
padding:12px 10px;
border-radius:14px;
}
}
@media(max-width:768px){
.industry-grid{
gap:8px;
}
.industry-card{
min-height:clamp(95px,18vh,160px);
padding:10px 8px;
border-radius:12px;
}
.industry-icon{
margin-bottom:8px;
}
.industry-number{
top:8px;
right:10px;
}
}
@media(max-width:480px){
.industry-grid{
gap:6px;
}
.industry-card{
min-height:clamp(85px,17vh,140px);
padding:8px 7px;
border-radius:10px;
}
}
/* ==========================================================================
   DESTINATIONS (COUNTRIES)
   ========================================================================== */
@media(max-width:992px){
.destination-wrapper{
gap:10px;
}
.destination-card{
height:clamp(105px,20vh,190px);
}
}
@media(max-width:768px){
.destinations-section{
padding-left:4%;
padding-right:4%;
}
.destination-wrapper{
gap:8px;
}
.destination-card{
height:clamp(95px,18vh,170px);
border-radius:12px;
}
.card-content{
padding:8px;
}
.country-icon{
margin-bottom:4px;
border-radius:10px;
}
.view-btn{
padding:12px 26px;
font-size:.8rem;
}
}
@media(max-width:480px){
.destination-wrapper{
gap:6px;
}
.destination-card{
height:clamp(85px,16vh,150px);
border-radius:10px;
}
.card-content{
padding:6px;
}
}
/* ==========================================================================
   CONTACT / MAP
   ========================================================================== */
@media(max-width:1200px){
.contact-wrapper{
flex-direction:column;
flex-wrap:nowrap;
height:100%;
max-height:clamp(320px,80vh,640px);
}
.contact-panel {
    flex: 0 1 62%;
    width: 100%;
    padding: clamp(12px,2.4vh,26px) clamp(16px,4vw,28px);
    height: 66%;
}
.map-side{
flex:1 1 38%;
width:100%;
height:auto;
min-height:110px;
}
.contact-small-title {
    margin-bottom: 4px;
}
.contact-panel h2 {
    font-size:19px;
    margin-bottom: 1px;
}
.contact-panel>p {
    margin-bottom: 6px;
}
.office-switcher {
    gap: 8px;
    margin-bottom: 6px;
}
#officeContent {
    gap: -3px;
}
.detail-row {
    gap: 14px;
    margin: 6px 0px;
}
.detail-text span {
    margin-bottom: -1px;
}
}
@media(max-width:768px){
.contact-panel{
flex-basis:58%;
padding:12px 18px;
}
.office-switcher{
flex-direction:row;
}
.office-btn{
flex:1 1 auto;
justify-content:center;
padding:0 10px;
font-size:.82rem;
}
.map-side{
flex-basis:42%;
min-height:100px;
}
}
@media(max-width:480px){
.detail-row{
gap:12px;
}
.detail-icon{
width:42px;
height:42px;
}
.custom-map-btn{
top:16px;
left:16px;
padding:10px 16px;
font-size:.85rem;
}
.map-overlay{
left:16px;
bottom:16px;
}
.location-badge{
padding:10px 14px;
font-size:.8rem;
}
}
/* ==========================================================================
   SHORT VIEWPORTS (limited vh, e.g. small laptops / landscape phones)
   Extra shrink so a full section still fits in one screen height-wise.
   ========================================================================== */
@media(max-height:750px){
#about,
#director-section,
#services,
#industries,
.destinations-section,
#certificates,
#contact{
padding-top:14px;
padding-bottom:14px;
}
.section-title,
.section-heading,
.industry-heading{
margin-bottom:12px;
}
.about-image{
height:clamp(140px,30vh,240px);
}
.image-frame{
height:clamp(160px,38vh,280px);
}
.service-img{
height:clamp(46px,8vh,72px);
}
.service-content{
padding:4px 8px 8px;
}
.industry-card{
min-height:clamp(85px,18vh,140px);
}
.destination-card{
height:clamp(80px,18vh,140px);
}
.contact-wrapper{
max-height:70vh;
}
.map-side{
min-height:90px;
}
}
@media(max-height:560px){
#hero{
height:auto;
min-height:calc(100vh - var(--header-h));
padding:20px 0;
}
.hero-content{
padding:16px 0;
}
.hero-content h1{
margin-bottom:14px;
}
.hero-content p{
margin-bottom:16px;
}
.about-image{
height:130px;
}
.image-frame{
height:170px;
}
}
/* ==========================================================================
   FOOTER
   ========================================================================== */
@media(max-width:768px){
.footer-wrapper{
flex-direction:column;
}
.footer-about,
.footer-links,
.footer-contact{
flex:1 1 100%;
}
}