/*====================================================
    HONORARY CONSULAR CORPS NEPAL
    Microsoft Fluent UI Style
====================================================*/

/*==============================
RESET
==============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Segoe UI",Tahoma,Arial,sans-serif;
    font-size:15px;
    color:#2f3542;
    background:#f4f8fc;
    line-height:1.7;
}

a{
    text-decoration:none;
    transition:.3s;
}

img{
    max-width:100%;
    display:block;
}

ul{
    list-style:none;
}

.container{

    width:92%;
    max-width:1300px;
    margin:auto;
}

/*==============================
COLOR VARIABLES
==============================*/

:root{

--primary:#0067B8;

--primary-dark:#004E8C;

--light:#ffffff;

--border:#dfe7ef;

--text:#2f3542;

--bg:#f4f8fc;

--shadow:0 10px 30px rgba(0,0,0,.08);

--radius:18px;

}


/*==========================
HEADER
==========================*/

.header{
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    position:relative;
    z-index:999;
}

.header .container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:80px;
}

.logo img{
    height:60px;
    display:block;
}

.menu-toggle{
    display:none;
    font-size:32px;
    color:#0067B8;
    cursor:pointer;
}

nav ul{
    display:flex;
    align-items:center;
    list-style:none;
    margin:0;
    padding:0;
}

nav ul li{
    margin-left:25px;
}

nav a{

color:#333;

font-size:15px;

font-weight:600;

position:relative;

}

nav a:hover{

color:var(--primary);

}

nav a:after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:3px;

background:var(--primary);

transition:.3s;

border-radius:10px;

}

nav a:hover:after{

width:100%;

}
/*==============================
HERO
==============================*/

.hero{

background:url("../images/hero-bg.jpg") center center no-repeat;
    background-size:cover;
    

height:100vh;

min-height:650px;

/*background:url('../images/hero-bg.jpg') center center;*/

background-size:cover;

position:relative;

display:flex;

align-items:center;

margin-top:80px;

}

.overlay{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

/*background:linear-gradient(
135deg,
rgba(0,80,150,.90),
rgba(0,120,210,.65)
); */

}

.hero-content{

position:relative;

z-index:2;

max-width:700px;

color:#fff;

}

.hero-logo{

width:180px;

margin-bottom:25px;

}

.hero h1{

font-size:56px;

font-weight:700;

margin-bottom:20px;

}

.hero p{

font-size:20px;

margin-bottom:40px;

opacity:.95;

}

.btn-blue{

display:inline-block;

padding:16px 34px;

background:#fff;

color:#0067B8;

border-radius:50px;

font-weight:bold;

margin-right:12px;

box-shadow:var(--shadow);

}

.btn-blue:hover{

background:#004E8C;

color:#fff;

transform:translateY(-4px);

}

.btn-white{

display:inline-block;

padding:16px 34px;

border:2px solid #fff;

color:#fff;

border-radius:50px;

}

.btn-white:hover{

background:#fff;

color:#0067B8;

}
/*==============================
SECTION TITLE
==============================*/

section{

padding:90px 0;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title h2{

font-size:42px;

color:#004E8C;

margin-bottom:18px;

font-weight:700;

}

.section-title p{

max-width:850px;

margin:auto;

font-size:18px;

color:#666;

}

/*==============================
CARDS
==============================*/

.cards{

display:grid;

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

gap:30px;

}

.card{

background:#fff;

border-radius:20px;

padding:40px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

border:1px solid rgba(0,0,0,.04);

position:relative;

overflow:hidden;

}

.card:before{

content:"";

position:absolute;

top:0;

left:0;

height:5px;

width:100%;

background:linear-gradient(
90deg,
#0067B8,
#00A2FF
);

}

.card:hover{

transform:translateY(-12px);

}

.card i{

font-size:52px;

color:#0067B8;

margin-bottom:20px;

}

.card h3{

font-size:24px;

margin-bottom:15px;

color:#004E8C;

}

.card p{

color:#666;

margin-bottom:20px;

}

.card a{

color:#0067B8;

font-weight:bold;

}
/*==============================
FOOTER
==============================*/

footer{

background:#003B6D;

color:#fff;

padding:70px 0 25px;

}

.footer-grid{

display:grid;

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

gap:40px;

margin-bottom:30px;

}

.footer-grid h3{

margin-bottom:20px;

font-size:22px;

}

.footer-grid p{

line-height:1.8;

}

.footer-grid li{

margin-bottom:12px;

}

.footer-grid a{

color:#fff;

}

.footer-grid a:hover{

color:#8fd3ff;

}

footer hr{

border:none;

height:1px;

background:rgba(255,255,255,.2);

margin:20px 0;

}

.copyright{

text-align:center;

font-size:14px;

opacity:.8;

}
/*==============================
ANIMATION
==============================*/

.card,
.hero-content,
.section-title{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*==============================
SCROLLBAR
==============================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#edf2f7;

}

::-webkit-scrollbar-thumb{

background:#0067B8;

border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

background:#004E8C;

}
/*====================================
PAGE BANNER
====================================*/

.page-banner{

padding:170px 0 90px;

background:linear-gradient(135deg,#0058a8,#00a2ff);

color:#fff;

text-align:center;

}

.page-banner h1{

font-size:52px;

margin-bottom:15px;

}

.page-banner p{

max-width:850px;

margin:auto;

font-size:19px;

}

/*====================================
ABOUT
====================================*/

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.about-image{

width:100%;

border-radius:20px;

box-shadow:0 20px 50px rgba(0,0,0,.15);

}

.light{

background:#f8fbff;

}

/*====================================
PRESIDENT
====================================*/

.president{

display:grid;

grid-template-columns:300px 1fr;

gap:60px;

align-items:center;

}

.president-photo img{

width:100%;

border-radius:18px;

box-shadow:0 15px 35px rgba(0,0,0,.12);

}

.president-content h2{

font-size:38px;

margin-bottom:20px;

color:#0058a8;

}

.president-content p{

font-size:17px;

line-height:1.9;

color:#555;

}

/*====================================
STATISTICS
====================================*/

.statistics{

background:#0058a8;

color:#fff;

}

.stats-grid{

display:grid;

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

gap:30px;

}

.stat-box{

text-align:center;

padding:40px;

}

.stat-box h2{

font-size:48px;

margin-bottom:10px;

}

.stat-box p{

font-size:18px;

}

/*====================================
TIMELINE
====================================*/

.timeline{

border-left:4px solid #0067B8;

padding-left:35px;

}

.timeline-item{

margin-bottom:45px;

position:relative;

}

.timeline-item:before{

content:"";

position:absolute;

left:-47px;

top:6px;

width:18px;

height:18px;

border-radius:50%;

background:#0067B8;

}

.timeline-item h3{

color:#0058a8;

margin-bottom:10px;

}
/*=========================================
EXECUTIVE COMMITTEE
=========================================*/

.committee-section{

padding:80px 0;

}

.committee-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:35px;

}

.committee-card{

background:#fff;

border-radius:22px;

overflow:hidden;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.35s;

border:1px solid #e7eef6;

}

.committee-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 45px rgba(0,0,0,.12);

}

.committee-image{

position:relative;

height:320px;

overflow:hidden;

background:#eef5fb;

}

.committee-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.4s;

}

.committee-card:hover img{

transform:scale(1.06);

}

.committee-content{

padding:30px;

}

.committee-content h3{

font-size:26px;

color:#004578;

margin-bottom:8px;

}

.committee-content h4{

font-size:16px;

font-weight:600;

color:#0067B8;

margin-bottom:15px;

}

.country{

font-weight:bold;

font-size:17px;

margin-bottom:15px;

}

.committee-footer{

margin-top:25px;

}

.committee-footer a{

display:inline-block;

padding:12px 26px;

background:#0067B8;

color:#fff;

border-radius:40px;

font-weight:600;

}

.committee-footer a:hover{

background:#004578;

}
.badge-president,
.badge-blue,
.badge-green,
.badge-orange,
.badge-gray{

position:absolute;

top:18px;

left:18px;

padding:8px 16px;

border-radius:30px;

font-size:13px;

font-weight:600;

color:#fff;

}

.badge-president{

background:#d4af37;

}

.badge-blue{

background:#0067B8;

}

.badge-green{

background:#2e8b57;

}

.badge-orange{

background:#ff8c00;

}

.badge-gray{

background:#6c757d;

}
/*====================================================
HONORARY CONSUL DIRECTORY
====================================================*/

.directory-search{

padding:40px 0;

background:#f7f9fc;

}

.directory-search input{

width:100%;

max-width:700px;

display:block;

margin:auto;

padding:18px 25px;

font-size:18px;

border-radius:50px;

border:1px solid #d7e2ef;

outline:none;

background:#fff;

box-shadow:0 5px 20px rgba(0,0,0,.05);

}

.directory-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

gap:35px;

}

.directory-card{

background:#fff;

border-radius:20px;

overflow:hidden;

box-shadow:0 12px 30px rgba(0,0,0,.08);

transition:.35s;

border:1px solid #edf2f7;

}

.directory-card:hover{

transform:translateY(-8px);

}

.directory-photo{

position:relative;

height:260px;

overflow:hidden;

}

.directory-photo img{

width:100%;

height:100%;

object-fit:cover;

transition:.4s;

}

.directory-card:hover img{

transform:scale(1.08);

}

.country-flag{

position:absolute;

right:20px;

bottom:20px;

background:#fff;

padding:10px 14px;

border-radius:50%;

font-size:26px;

box-shadow:0 5px 15px rgba(0,0,0,.15);

}

.directory-content{

padding:30px;

}

.directory-content h3{

font-size:25px;

color:#004578;

margin-bottom:8px;

}

.directory-content h4{

color:#0067B8;

margin-bottom:15px;

}

.directory-country{

font-weight:bold;

margin-bottom:20px;

color:#666;

}

.directory-content ul{

margin-bottom:25px;

}

.directory-content li{

margin-bottom:12px;

color:#555;

}

.directory-content i{

width:25px;

color:#0067B8;

}

.btn-profile{

display:inline-block;

padding:12px 28px;

background:#0067B8;

color:#fff;

border-radius:35px;

font-weight:600;

}

.btn-profile:hover{

background:#004578;

}
/*==================================================
FILTER BUTTONS
==================================================*/

.directory-filter{

padding:20px 0 45px;

}

.filter-buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

}

.filter-btn{

padding:13px 30px;

background:#ffffff;

border:1px solid #dbe5ef;

border-radius:40px;

font-weight:600;

cursor:pointer;

transition:.3s;

font-size:15px;

box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.filter-btn:hover{

background:#0067B8;

color:#fff;

}

.filter-btn.active{

background:#0067B8;

color:#fff;

}
/*==================================================
FILTER BUTTONS
==================================================*/

.directory-filter{

padding:20px 0 45px;

}

.filter-buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

}

.filter-btn{

padding:13px 30px;

background:#ffffff;

border:1px solid #dbe5ef;

border-radius:40px;

font-weight:600;

cursor:pointer;

transition:.3s;

font-size:15px;

box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.filter-btn:hover{

background:#0067B8;

color:#fff;

}

.filter-btn.active{

background:#0067B8;

color:#fff;

}
.directory-card{

position:relative;

overflow:hidden;

transition:.35s;

}

.directory-card:before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(90deg,#0067B8,#00A3FF);

}

.directory-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 60px rgba(0,103,184,.20);

}
.contact-icons{

display:flex;

justify-content:center;

gap:18px;

margin:25px 0;

}

.contact-icons a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#eef6fd;

color:#0067B8;

transition:.3s;

font-size:18px;

}

.contact-icons a:hover{

background:#0067B8;

color:#fff;

transform:translateY(-4px);

}
.contact-icons{

display:flex;

justify-content:center;

gap:18px;

margin:25px 0;

}

.contact-icons a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#eef6fd;

color:#0067B8;

transition:.3s;

font-size:18px;

}

.contact-icons a:hover{

background:#0067B8;

color:#fff;

transform:translateY(-4px);

}
.directory-photo img{

transition:.5s;

}

.directory-card:hover img{

transform:scale(1.08);

filter:brightness(1.05);

}

.directory-content{

transition:.3s;

}

.directory-card:hover .directory-content{

transform:translateY(-5px);

}
.directory-photo img{

transition:.5s;

}

.directory-card:hover img{

transform:scale(1.08);

filter:brightness(1.05);

}

.directory-content{

transition:.3s;

}

.directory-card:hover .directory-content{

transform:translateY(-5px);

}
/*==========================================
Sticky Header
==========================================*/

.header.sticky{

background:#ffffff;

box-shadow:0 8px 30px rgba(0,0,0,.08);

transition:.3s;

}


/*==========================================
Active Menu
==========================================*/

nav ul li a.active{

color:#0067B8;

}

nav ul li a.active:after{

width:100%;

}


/*==========================================
Fade Animation
==========================================*/

.fade-up{

opacity:0;

transform:translateY(40px);

transition:all .7s ease;

}

.fade-up.visible{

opacity:1;

transform:translateY(0);

}


/*==========================================
Scroll Top
==========================================*/

#scrollTop{

position:fixed;

right:25px;

bottom:25px;

width:50px;

height:50px;

border:none;

border-radius:50%;

background:#0067B8;

color:#fff;

cursor:pointer;

font-size:22px;

box-shadow:0 10px 25px rgba(0,0,0,.20);

opacity:0;

visibility:hidden;

transition:.3s;

z-index:999;

}

#scrollTop.show{

opacity:1;

visibility:visible;

}

#scrollTop:hover{

background:#004578;

}


/*==========================================
Loader
==========================================*/

.loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#ffffff;

display:flex;

align-items:center;

justify-content:center;

z-index:9999;

}

.loader.hide{

display:none;

}


/*==========================================
Counter
==========================================*/

.counter{

font-size:52px;

font-weight:bold;

color:#0067B8;

}
.menu-toggle{

display:none;

font-size:28px;

cursor:pointer;

color:#0067B8;

}
/*==================================================
COUNTRIES
==================================================*/

.country-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

margin-top:40px;

}

.country-card{

background:#fff;

border-radius:18px;

padding:35px;

text-align:center;

box-shadow:0 12px 30px rgba(0,0,0,.08);

transition:.35s;

}

.country-card:hover{

transform:translateY(-10px);

}

.country-card img{

width:90px;

height:60px;

margin:auto;

margin-bottom:20px;

object-fit:contain;

}

.country-card h3{

color:#004578;

margin-bottom:10px;

}

.country-card p{

margin-bottom:20px;

color:#666;

}

.country-card a{

display:inline-block;

padding:10px 25px;

background:#0067B8;

color:#fff;

border-radius:30px;

}


/*==================================================
EMBASSY
==================================================*/

.embassy-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

gap:30px;

margin-top:40px;

}

.embassy-card{

background:#fff;

padding:35px;

border-radius:18px;

box-shadow:0 12px 30px rgba(0,0,0,.08);

transition:.35s;

}

.embassy-card:hover{

transform:translateY(-10px);

}

.embassy-card h3{

margin-bottom:20px;

color:#004578;

}

.embassy-card p{

margin-bottom:15px;

color:#555;

}

.embassy-card i{

width:24px;

color:#0067B8;

}
/*=========================================
NATIONAL DAYS
=========================================*/

.national-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
margin-top:40px;

}

.national-card{

background:#fff;
padding:35px;
text-align:center;
border-radius:20px;
box-shadow:0 12px 30px rgba(0,0,0,.08);
transition:.35s;

}

.national-card:hover{

transform:translateY(-10px);

}

.national-card img{

width:90px;
height:60px;
object-fit:contain;
margin:auto;
margin-bottom:20px;

}

.national-card h3{

color:#004578;
margin-bottom:10px;

}

.national-date{

display:inline-block;
background:#0067B8;
color:#fff;
padding:8px 18px;
border-radius:25px;
margin-bottom:15px;
font-weight:bold;

}


/*=========================================
NEWS
=========================================*/

.news-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
gap:35px;
margin-top:40px;

}

.news-card{

background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.35s;

}

.news-card:hover{

transform:translateY(-10px);

}

.news-card img{

width:100%;
height:240px;
object-fit:cover;

}

.news-content{

padding:30px;

}

.news-date{

display:inline-block;
background:#eef6fd;
color:#0067B8;
padding:8px 16px;
border-radius:25px;
font-size:13px;
font-weight:600;
margin-bottom:15px;

}

.news-content h3{

color:#004578;
margin-bottom:15px;

}

.news-content p{

margin-bottom:20px;
color:#555;

}

.news-content a{

color:#0067B8;
font-weight:600;

}
/*=========================================
GALLERY
=========================================*/

.gallery-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:25px;

margin-top:40px;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:18px;

cursor:pointer;

box-shadow:0 15px 35px rgba(0,0,0,.10);

}

.gallery-item img{

width:100%;

height:260px;

object-fit:cover;

transition:.5s;

}

.gallery-item:hover img{

transform:scale(1.08);

}

.gallery-overlay{

position:absolute;

left:0;

right:0;

bottom:0;

padding:20px;

background:linear-gradient(transparent,rgba(0,0,0,.75));

color:#fff;

opacity:0;

transition:.3s;

}

.gallery-item:hover .gallery-overlay{

opacity:1;

}

.gallery-overlay h3{

font-size:22px;

}
/*=========================================
Gallery Filter
=========================================*/

.gallery-filter{

padding:35px 0;

background:#f8fbff;

}

.gallery-btn{

padding:12px 28px;

border:none;

background:#fff;

border-radius:35px;

cursor:pointer;

font-weight:600;

margin:6px;

transition:.3s;

box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.gallery-btn:hover{

background:#0067B8;

color:#fff;

}

.gallery-btn.active{

background:#0067B8;

color:#fff;

}
/*=========================================
LIGHTBOX
=========================================*/

#lightbox{

display:none;

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(0,0,0,.92);

z-index:9999;

text-align:center;

}

#lightbox img{

max-width:90%;

max-height:85%;

margin-top:50px;

border-radius:10px;

}

#closeLightbox{

position:absolute;

top:25px;

right:40px;

font-size:45px;

color:#fff;

cursor:pointer;

}
/*======================================
DOWNLOADS
======================================*/

.downloads-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
margin-top:40px;

}

.download-card{

background:#fff;
padding:40px;
text-align:center;
border-radius:18px;
box-shadow:0 12px 30px rgba(0,0,0,.08);
transition:.35s;

}

.download-card:hover{

transform:translateY(-10px);

}

.download-card i{

font-size:58px;
color:#0067B8;
margin-bottom:20px;

}

.download-card h3{

margin-bottom:15px;
color:#004578;

}

.download-card p{

margin-bottom:25px;
color:#666;

}


/*======================================
CONTACT
======================================*/

.contact-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:start;

}

.office-info,
.contact-form{

background:#fff;
padding:40px;
border-radius:18px;
box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.office-info h2,
.contact-form h2{

margin-bottom:25px;
color:#004578;

}

.office-info p{

margin-bottom:18px;
font-size:16px;

}

.office-info i{

width:25px;
color:#0067B8;

}

.contact-form input,
.contact-form textarea{

width:100%;
padding:15px;
margin-bottom:18px;
border:1px solid #dbe5ef;
border-radius:10px;
font-size:15px;
font-family:inherit;

}

.contact-form textarea{

resize:vertical;

}

.social-icons{

margin-top:30px;

}

.social-icons a{

display:inline-flex;
align-items:center;
justify-content:center;
width:45px;
height:45px;
border-radius:50%;
background:#eef6fd;
color:#0067B8;
margin-right:10px;
transition:.3s;

}

.social-icons a:hover{

background:#0067B8;
color:#fff;

}

.map-section iframe{

display:block;

}