/*<------- events--------->*/

.kryetitull {
font-family: "Kanit", sans-serif;

font-weight: 600;
font-style: semi-bold;
font-size: 64px;

}


.shpjegimi {
font-family: "Kanit", sans-serif;

font-weight: 300;
font-style: light;
font-size: 18px;
letter-spacing: -0.6%
color: #555353;

}



.filters {
font-family: "Kanit", sans-serif;

font-weight: 400;
font-style: regular;
font-size: 16px;

}


.events-tituj {
font-family: "Kanit", sans-serif;

font-weight: 600;
font-style: semi-bold;
font-size: 24px;

}


.events-detajet {
font-family: "Kanit", sans-serif;

font-weight: 300;
font-style: light;
font-size: 16px;
color: #555353;
}


.events-bigdate {
font-family: "Kanit", sans-serif;

font-weight: 600;
font-style: semi-bold;
font-size: 84px;
}
 
.events-datemonth {
font-family: "Kanit", sans-serif;

font-weight: 400;
font-style: regular;
font-size: 20px;
}


.events-pills {
font-family: "Kanit", sans-serif;

font-weight: 300;
font-style: light;
font-size: 11px;
}



/* ====== Events (inside) ====== */

.kryetitull 


.events-description {
font-family: "Kanit", sans-serif;

font-weight: 400;
font-style: regular;
font-size: 18px;
color: #555353;

}


.events-detailsH1 {
font-family: "Kanit", sans-serif;

font-weight: 600;
font-style: semi-bold;
font-size: 22px;
color: #1C1A1A;

}


.events-detailsH2 {
font-family: "Kanit", sans-serif;

font-weight: 400;
font-style: regular;
font-size: 18px;
color: #555353;

}


.events-titull2 {
font-family: "Kanit", sans-serif;

font-weight: 600;
font-style: semi-bold;
font-size: 36px;
color: #101828;

}

.events-description


.blogH1 {
font-family: "Kanit", sans-serif;
font-weight: 600;
font-style: semi-bold;
font-size: 10px;
color: #101828;

}

.newsblog-grid .blogH1 {
  font-size: 22px;
  line-height: 1.35;
}


.events-blogbutton {
font-family: "Kanit", sans-serif;

font-weight: 600;
font-size: 16px;
color: #4433EE;

}





/* ====== News Blog ====== */


.kryetitull {
font-family: "Kanit", sans-serif;

font-weight: 600;
font-style: semi-bold;
font-size: 64px;

}


.shpjegimi {
font-family: "Kanit", sans-serif;

font-weight: 300;
font-style: light;
font-size: 18px;
letter-spacing: -0.6%
color: #555353;

}


.filters {
font-family: "Kanit", sans-serif;

font-weight: 400;
font-style: regular;
font-size: 16px;

}


.blogH1 {
font-family: "Kanit", sans-serif;

font-weight: 600;
font-style: semi-bold;
font-size: 24px;
color: #101828;

}

.dates {
font-family: "Kanit", sans-serif;

font-weight: 300;
font-style: light;
font-size: 14px;
color: #8E8D8D;

}



/* ====== Campaigns Blog ====== */


.kryetitull {
font-family: "Kanit", sans-serif;

font-weight: 600;
font-style: semi-bold;
font-size: 64px;

}


.shpjegimi {
font-family: "Kanit", sans-serif;

font-weight: 300;
font-style: light;
font-size: 18px;
letter-spacing: -0.6%
color: #555353;

}

.campaignH1 {
font-family: "Kanit", sans-serif;

font-weight: 550;
font-style: medium;
font-size: 24px;
text-transform: uppercase;

line-height: 1.2;
color:#4433EE

}

.campaign-desc {
font-family: "Kanit", sans-serif;

font-weight: 100;
font-style: light;
font-size: 16px;
line-height: 1.5;
color: #4433EE

}

.butoni-purple {
font-family: "Kanit", sans-serif;

font-weight: 500;
font-style: medium;
font-size: 16px;
line-spacing: -0.6%
color: #fff
}












.campaign-btn .butoni-purple {
  color: #F7F0F0; /* add !important only if you still see blue */
}







/* ===== CAMPAIGNS layout (title mid column, desc right column) ===== */

.campaign-row{
  display: flex;
  gap: 94px;               /* thumbnail -> text block */
  align-items: flex-start; /* match your mockup */
}

/* this is the whole right-side block */
.campaign-info{
  flex: 1;
}

/* split right-side into 2 columns: title / desc+button */
.campaign-info-grid{
  display: grid;
  grid-template-columns: 240px 1fr; /* middle title column + right desc column */
  column-gap: 90px;                /* spacing between title and description */
  align-items: start;
}

/* kill default margins so edges align perfectly */
.campaign-title{
  margin: 0;
}

.campaign-desc{
  margin: 0;
}

/* button sits under description, aligned with description */
.campaign-btn{
  margin-top: 34px;
  display: inline-flex;
  width: 190px;
  height: 46px;
  border-radius: 56px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}








/* ====== CAMPAIGN INSIDE ====== */

.campaign-main {
font-family: "Kanit", sans-serif;

font-weight: 600;
font-style: semi-bold;
font-size: 48px;
letter-spacing: -2%
alignment: center

}

.dates-purple{
font-family: "Kanit", sans-serif;

font-weight: 400;
font-style: regular;
font-size: 16px;
color: #4433EE;

}


.campaign-paragraph {
font-family: "Kanit", sans-serif;

font-weight: 400;
font-style: regular;
font-size: 18px;
paragraph-spacing: 20px;
color: #555353;

}

.campaign-subh {
font-family: "Kanit", sans-serif;

font-weight: 600;
font-style: semi-bold;
font-size: 24px;
paragraph-spacing: 20px;
color: #1C1A1A;

}



h1.campaignH1,
h2.campaignH1,
h3.campaignH1 {
  color: #4433EE;
}

.campaign-desc {
  color: #4433EE;
}


/* ====== Publications====== */


.kryetitull {
font-family: "Kanit", sans-serif;

font-weight: 600;
font-style: semi-bold;
font-size: 64px;

}


.shpjegimi {
font-family: "Kanit", sans-serif;

font-weight: 300;
font-style: light;
font-size: 18px;
letter-spacing: -0.6%
color: #555353;

}



.filters {
font-family: "Kanit", sans-serif;

font-weight: 400;
font-style: regular;
font-size: 16px;

}

/* Publication Card*/

.publication-cardH1 {
font-family: "Kanit", sans-serif;

font-weight: 500;
font-style: medium;
font-size: 24px;
line-spacing: -0,6%

}


.dates {
font-family: "Kanit", sans-serif;

font-weight: 300;
font-style: light;
font-size: 14px;
color: #8E8D8D;

}


.publication-download {
font-family: "Kanit", sans-serif;

font-weight: 300;
font-style: light;
font-size: 42px;
line-spacing: -0,6%

}


.publication-language {
font-family: "Kanit", sans-serif;

font-weight: 300;
font-style: light;
font-size: 16px;
line-spacing: -0,6%
color: #4433EE
}


/* ====== WHO ARE WE ====== */


.kryetitull {
font-family: "Kanit", sans-serif;

font-weight: 600;
font-style: semi-bold;
font-size: 64px;

}


.shpjegimi {
font-family: "Kanit", sans-serif;

font-weight: 300;
font-style: light;
font-size: 18px;
letter-spacing: -0.6%
color: #555353;

}


.kryetitull-2 {
font-family: "Kanit", sans-serif;

font-weight: 600;
font-style: semi-bold;
font-size: 48px;
alignment: center

}

.whoweare-offers {
font-family: "Kanit", sans-serif;

font-weight: 300;
font-style: light;
font-size: 16px;
color: #555353

}


/* ====== WHO ARE WE TEAM====== */

.team-emri {
font-family: "Kanit", sans-serif;

font-weight: 600;
font-style: semi-bold;
font-size: 20px;
color: #1C1A1A

}

.team-roli {
font-family: "Kanit", sans-serif;

font-weight: 300;
font-style: light;
font-size: 16px;
color: #1C1A1A

}

.team-email {
font-family: "Kanit", sans-serif;

font-weight: 300;
font-style: light;
font-size: 16px;
color: #4433EE

}


/* ======EU SUPPORT ====== */


.kryetitull {
font-family: "Kanit", sans-serif;

font-weight: 600;
font-style: semi-bold;
font-size: 64px;

}


.shpjegimi {
font-family: "Kanit", sans-serif;

font-weight: 300;
font-style: light;
font-size: 18px;
letter-spacing: -0.6%
color: #555353;

}


.card-small {
font-family: "Kanit", sans-serif;

font-weight: 500;
font-style: medium;
font-size: 20px;
color: #F7F0F0;

}



/* ======Contact ====== */

.kryetitull-2 {
font-family: "Kanit", sans-serif;

font-weight: 600;
font-style: semi-bold;
font-size: 48px;
alignment: center

}


.shpjegimi {
font-family: "Kanit", sans-serif;

font-weight: 300;
font-style: light;
font-size: 18px;
letter-spacing: -0.6%
color: #555353;

}

 .contactus {
font-family: "Kanit", sans-serif;

font-weight: 600;
font-style: semi-bold;
font-size: 18px;
color: #8E8D8D;

}


.contact-boxesH1{
font-family: "Kanit", sans-serif;

font-weight: 500;
font-style: medium;
font-size: 26px;
color: #F7F0F0;

}


.contact-boxes 

{
font-family: "Kanit", sans-serif;

font-weight: 300;
font-style: light;
font-size: 16px;
color: #555353;

}



/* ====== ERROR ====== */

.error {
font-family: "Kanit", sans-serif;

font-weight: 400;
font-style: regulat;
font-size: 12px;
letter-spacing: 6.4%;

}

















/* ====== FONTS (global) ====== */
@font-face {
    font-family: "PPNeueMontreal";
    src: url("/assets/fonts/montreal/PPNeueMontreal-Book.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Whyte";
    src: url("/assets/fonts/whyte/Whyte-Book.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

/* Global body – updated to the new white look */
body {
    margin: 0;
    font-family: "PPNeueMontreal", sans-serif;
    color: #000;
    background: #fff;
    line-height: 1.5;
}

/* Shared container */
.container {
    width: 88%;
    max-width: 1150px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================
   // WORK //
   ============================ */

/* Intro text block */
.work-intro {
    padding-top: 110px;
    padding-bottom: 110px;
}

.bodymain p {
    font-size: 22px;
    max-width: 950px;
    margin-bottom: 40px;
    line-height: 1.6;
}

/* Separator line under intro, full-width inside container */
.work-separator {
    height: 1px;
    width: 100%;
    background-color: #000;
    margin-bottom: 60px;
}

/* Page title */
.title-Head h2 {
    font-family: "Whyte", sans-serif;
    font-size: 64px;
    font-weight: 400;
    margin: 0 0 40px;
}

/* Filters row */
.work-header {
    /* space between title & filters is already 40px from h2 margin-bottom
       and filters margin-bottom below */
}

.work-filters {
    margin-bottom: 110px;
    font-size: 18px;
}

.work-filters-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

/* small dash between "All" and the other filters */
.work-filters-dash {
    width: 15px;
    height: 1px;
    background-color: #000;
    display: inline-block;
}

/* Filter links */
.work-filter-link {
    position: relative;
    text-decoration: none;
    color: rgba(0, 0, 0, 0.7);
    font-size: 18px;
    padding-bottom: 4px;
    transition: color 0.25s ease;
}


/* ============================
   NEWSBLOG (front)
   ============================ */

.newsblog-top {
  background: #fff;
  width: 100%;
}

.newsblog-top-inner {
  width: 88%;
  max-width: 1300px;
  height: 128px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.newsblog-titlewrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.newsblog-icon {
  width: 61px;
  height: 61px;
  display: block;
}

.newsblog-rightwrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 60px;
  min-width: 0;
}

.newsblog-desc {
  max-width: 520px;
}

.newsblog-top-line {
  width: 88%;
  max-width: 1300px;
  height: 1px;
  background: #C6C6C6;
  margin: 0 auto;
}

.newsblog-filters-wrap {
  background: #fff;
  width: 100%;
  padding: 40px 0 0 0;
}

.newsblog-filters {
  width: 88%;
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.newsblog-filter {
  width: 110px;
}

.newsblog-filter select {
  width: 100%;
  margin-top: 10px;
  border: 0;
  outline: none;
  background: transparent;
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #000;
  padding: 0;
  appearance: auto;
}

.newsblog-underline {
  width: 100%;
  height: 1px;
  background: #000;
  margin-top: 10px;
}

.newsblog-bg {
  background: #F1F6F8;
  width: 100%;
  padding: 30px 0 45px 0;
  margin-top: 30px;
}

.newsblog-grid-wrap {
  width: 88%;
  max-width: 1300px;
  margin: 0 auto;
}

.newsblog-grid {
  display: grid;
  grid-template-columns: repeat(4, 302px);
  justify-content: space-between;
  row-gap: 45px;
}

.newsblog-card {
  width: 302px;
  height: 332px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
}

.newsblog-thumb {
  width: 100%;
  height: 185px;
  background: #e9eef0;
  overflow: hidden;
}

.newsblog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.newsblog-meta {
  padding: 14px 14px 0 14px;
}

.newsblog-more {
  display: flex;
  justify-content: center;
  margin-top: 45px;
}

/* Button: set this to match your footer “Join us” button */
.newsblog-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 999px;
  background: #3E3CFF;
  color: #fff;
  text-decoration: none;
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: 14px;
  border: 0;
}

/* ============================
   NEWSBLOG (article)
   ============================ */

.newsblog-article-wrap {
  background: #fff;
  width: 100%;
  padding: 30px 0 60px 0;
}

.newsblog-article-inner {
  width: 88%;
  max-width: 1150px;
  margin: 0 auto;
}

.newsblog-article-head {
  margin-bottom: 18px;
}

.newsblog-heroimage {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin: 18px 0 22px 0;
}

.newsblog-heroimage img {
  width: 100%;
  height: auto;
  display: block;
}

.newsblog-blocks {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.newsblog-subtitle {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #101828;
  margin-bottom: 8px;
}

.newsblog-body {
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-size: 18px;
  color: #555353;
  line-height: 1.6;
}

.newsblog-img img {
  width: 100%;
  border-radius: 12px;
  display: block;
}

.newsblog-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.newsblog-gallery img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.newsblog-video-link {
  font-family: "Kanit", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #3E3CFF;
  word-break: break-word;
}

/* Responsive */
@media (max-width: 1400px) {
  .newsblog-grid { grid-template-columns: repeat(3, 302px); }
}
@media (max-width: 1050px) {
  .newsblog-grid { grid-template-columns: repeat(2, 1fr); }
  .newsblog-card { width: 100%; }
}
@media (max-width: 700px) {
  .newsblog-top-inner { height: auto; padding: 18px 0; flex-direction: column; align-items: flex-start; }
  .newsblog-rightwrap { gap: 18px; width: 100%; justify-content: space-between; }
  .newsblog-filters { flex-direction: column; gap: 18px; }
  
  /* === FIX TOP STRIP ALIGNMENT === */

.newsblog-top-inner {
  align-items: flex-start; /* instead of center */
  padding-top: 22px;       /* optical alignment */
}

.newsblog-titlewrap {
  align-items: flex-start;
}

.newsblog-rightwrap {
  align-items: flex-start;
  gap: 40px; /* was 60px – closer to mockup */
}

/* Tighten description */
.newsblog-desc {
  line-height: 1.35;
  margin-top: 6px; /* aligns with title baseline */
}

/* Button optical alignment */
.newsblog-cta-btn {
  margin-top: 4px;
}

}


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

.contact-page{
  background:#EDF5FF;
}

/* 1300px content width on big screens */
.contact-wrap{
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 95px 40px 70px; /* 95px from navbar */
  box-sizing: border-box;
}

/* 2-column layout */
.contact-grid{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
}

/* Left column */
.contact-left{
  flex: 0 0 520px;
  max-width: 520px;
}

/* Right column (cards align right) */
.contact-right{
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
}

.contact-box-grid{
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

/* Typography */
.contactus{
  font-family:"Kanit", sans-serif;
  font-weight:600;
  font-size:18px;
  color:#8E8D8D;
  margin-bottom:24px;
  letter-spacing:0.5px;
}

.kryetitull-2{
  font-family:"Kanit", sans-serif;
  font-weight:600;
  font-size:48px;
  line-height:1.05;
  color:#000;
  margin:0;
}

.contact-intro{
  margin-top:34px;
  max-width:520px;
}

.shpjegimi{
  font-family:"Kanit", sans-serif;
  font-weight:300;
  font-size:18px;
  color:#555353;
  letter-spacing:-0.006em;
}

/* Button (pill) */
.contact-cta-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:34px;
  padding:14px 34px;
  border-radius:999px;
  background:#3B3AF2;
  color:#fff;
  text-decoration:none;
  font-family:"Kanit", sans-serif;
  font-weight:500;
  font-size:16px;
}

/* Cards */
.contact-box{
  width:330px;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 6px 22px rgba(0,0,0,0.06);
}

.contact-box-top{
  background:#3B3AF2;
  padding:18px 22px;
}

.contact-boxesH1{
  font-family:"Kanit", sans-serif;
  font-weight:500;
  font-size:26px;
  color:#F7F0F0;
  margin:0;
}

.contact-box-body{
  padding:18px 22px 22px;
}

.contact-boxes{
  font-family:"Kanit", sans-serif;
  font-weight:300;
  font-size:16px;
  color:#555353;
}

.contact-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:12px 0;
}

.contact-ico{
  width:18px;
  height:18px;
  margin-top:3px;
  flex:0 0 18px;
}

.contact-text{
  line-height:1.4;
}

/* remove underline by default */
.contact-link{
  color:#555353;
  text-decoration:none;
}
.contact-link:hover{
  text-decoration:underline;
}

/* Responsive */
@media (max-width: 1100px){
  .contact-grid{
    flex-direction: column;
    gap: 30px;
  }
  .contact-left{
    flex: 1 1 auto;
    max-width: 520px;
  }
  .contact-right{
    justify-content: flex-start;
  }
  .contact-box-grid{
    flex-wrap: wrap;
  }
}


/* =========================
   EU SUPPORT PAGE
========================= */

/* =========================
   EU SUPPORT PAGE
========================= */

.eusupport-body{
  background:#edf5ff;
}

.eusupport-wrap{
  padding-top:60px; /* below navbar */
  padding-bottom:80px;
}

.eusupport-hero{
  width: 1300px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
}

.eusupport-hero img,
.eusupport-hero-placeholder{
  width:100%;
  height:auto;
  border-radius:12px;
  display:block;
}

.eusupport-hero-placeholder{
  aspect-ratio: 1300 / 580;
  background: rgba(0,0,0,0.08);
}

.eusupport-row{
  padding-top:60px; /* below image */
}

/* 1300px frame */
.eusupport-container{
  width: 1300px;
  max-width: calc(100% - 48px);
  margin: 0 auto;
}

/* ✅ the “split in half” layout */
.eusupport-container--stacked{
  display: grid;
  grid-template-columns: 1fr max-content; /* empty space left, cards column right */
  column-gap: 40px;
  align-items: start;
}

/* left stack */
.eusupport-left{
  max-width: 515px;
  display: flex;
  flex-direction: column;
  gap: 70px; /* spacing between EU PROGRAMMES / EU SUPPORT */
}

/* right stack */
.eusupport-right{
  display: flex;
  flex-direction: column;
  gap: 70px; /* match left */
}

/* cards: ALWAYS flush-right */
.eusupport-cards{
  display: grid;
  grid-template-columns: repeat(3, 236px);
  gap: 20px;

  justify-content: end; /* 1 or 2 cards snap to the RIGHT edge */
  align-content: start;
}

/* card styling */
.eusupport-card{
  width:236px;
  height:218px;
  border-radius:12px;
  overflow:hidden;
  text-decoration:none;
  display:flex;
  flex-direction:column;
}

.eusupport-card-top{
  width:236px;
  height:155px;
  background:#dfe6f3;
  overflow:hidden;
}

.eusupport-card-top img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.eusupport-thumb-placeholder{
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.08);
}

.eusupport-card-bottom{
  flex:1;
  background:#4433EE;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 14px;
  gap: 12px;
}

.eusupport-card-title{
  font-family:"Kanit", sans-serif;
  font-weight: 600;
  font-size: 16px;
  color:#fff;
  line-height:1.1;
}

.eusupport-card-arrow{
  width:18px;
  height:auto;
  display:block;
}

/* Responsive */
@media (max-width: 1180px){
  .eusupport-container--stacked{
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  .eusupport-left,
  .eusupport-right{
    gap: 40px;
  }
  .eusupport-cards{
    justify-content: start;
  }
}

@media (max-width: 820px){
  .eusupport-cards{
    grid-template-columns: repeat(2, 236px);
  }
}

@media (max-width: 520px){
  .eusupport-cards{
    grid-template-columns: 236px;
  }
}

/* =========================
   HOME — Section 1: LatestFromEH
========================= */

.kryetitull-2b{
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: 48px;
  text-align: left;
}

.events-pill{
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-size: 11px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 20px;
  background: #F7F0F0;
  color: #000;
  white-space: nowrap;
}

.home-campaigntitle{
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.6%;
  color: #fff;
  line-height: 1.15;
}

.home-campaigndate{
  font-family: "Kanit", sans-serif;
  font-weight: 200;
  font-size: 12px;
  letter-spacing: -0.6%;
  color: #fff;
  margin-top: 8px;
}

/* Section wrapper */
.home-latestfromeh{
  background: #d2e6ff;
  padding-top: 65px;   /* 65px down from navbar (section starts after navbar) */
  padding-bottom: 65px;
}

.home-latestfromeh-title{
  margin-bottom: 65px; /* 65px down padding from the title to the cards */
}

/* Grid */
.home-latest-grid{
  display: grid;
  grid-template-columns: 500px 240px 240px 240px;
  gap: 25px;
  align-items: stretch;
  max-width: 100%;
}

/* Card base */
.home-latest-card{
  position: relative;
  display: block;
  width: 100%;
  height: 440px;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
}

/* Image zoom on hover */
.home-latest-imgwrap{
  position: absolute;
  inset: 0;
}

.home-latest-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 260ms ease;
}

.home-latest-card:hover .home-latest-img{
  transform: scale(1.10);
}

/* Overlay to make white text readable */
.home-latest-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.10) 45%,
    rgba(0,0,0,0.65) 100%
  );
}

/* Top row (pill + arrow) */
.home-latest-top{
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  z-index: 2;
}

.home-roundarrow{
  width: 38px;
  height: 38px;
  transform: rotate(0deg);
  transition: transform 220ms ease;
}

.home-latest-card:hover .home-roundarrow{
  transform: rotate(45deg);
}

/* Bottom text */
.home-latest-bottom{
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
}

.home-latest-bottom--w350{ max-width: 350px; }
.home-latest-bottom--w170{ max-width: 170px; }

/* Responsive */
@media (max-width: 1300px){
  .home-latest-grid{
    grid-template-columns: 1fr 1fr;
  }
  .home-latest-card{ height: 420px; }
}

@media (max-width: 680px){
  .home-latest-grid{
    grid-template-columns: 1fr;
  }
  .home-latest-card{ height: 380px; }
}

/* Home: force 1300px centered content area */
.container-1300{
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

/*/* =========================
   HOME — Section 2: Upcoming Events
========================= */

.kryetitull-2c{
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: 36px;
  text-align: left;
  line-height: 38px;
}


.home-upcoming{
  background: #fff;
  padding-top: 0;        /* keep top as-is */
  padding-bottom: 50px;  /* EXACT distance to the separator */
}






/* Starts at left edge of 1300 container, stretches to full right edge */
.home-upcoming-inner{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 50px;
  padding-left: calc((100vw - 1300px) / 2);
  box-sizing: border-box;
}

/* Left column */
.home-upcoming-left{
  width: 650px;
  max-width: 650px;
}

/* Rotating asterisk badge: 180x180, 2-line text inside, no pill bg */
.home-upcoming-badge{
  position: relative;
  width: 180px;
  height: 180px;
  margin-bottom: 45px;
}

.home-upcoming-asterisk{
  width: 180px;
  height: 180px;
  display: block;
  animation: eh-spin 12s linear infinite;
}

@keyframes eh-spin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

.home-upcoming-badgeText{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.1;
  color: #000;

  background: transparent;
  border: 0;
  padding: 0;
}

.home-upcoming-title{
  max-width: 420px;
  margin-bottom: 30px;
}

.home-upcoming-desc{
  max-width: 420px;
  margin-bottom: 26px;
  color: #000;
}

/* CTA button */
.home-upcoming-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: #3B36F5;
  color: #fff;
  text-decoration: none;
  font-family: "Kanit", sans-serif;
  font-weight: 500;
  font-size: 14px;
}

/* Right area */
.home-upcoming-right{
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: flex-start;
}

/* Rail: transparent; plate provides the background and offset */
.home-upcoming-rail{
  position: relative;
  width: calc(100% + 133px);   /* extend container */
  margin-left: -140px;        /* shift everything left */
  overflow: hidden;
  box-sizing: border-box;
  background: transparent;
}


.home-upcoming-plate{
  position: absolute;
  top: 0;
  right: 0;
  left: 133px;
  bottom: 0; /* IMPORTANT: avoid -40px if you want to SEE the bottom rounding */
  background: #F6EFEF;
  border-radius: 24px 0 0 24px; /* both left corners rounded */
  z-index: 0;
  overflow: hidden; /* optional, helps if children ever overlap */

  
  
}

/* Track */
.home-upcoming-track{
   transform: translateX(-50px);
  position: relative;
  z-index: 1;
  display: flex;
  gap: 28px;
  padding: 34px 34px 34px 0px;  /* padding inside plate (top/right) */
  will-change: transform;
  transition: transform 360ms ease;
}

/* Cards: 368 x 368, radius 12 */
.home-upcoming-card{
  width: 368px;
  min-width: 368px;
  height: 368px;
  border-radius: 12px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  position: relative;
  background: #ddd;
}

.home-upcoming-media{
  width: 100%;
  height: 100%;
  position: relative;
}

.home-upcoming-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-upcoming-nogif{
  width: 100%;
  height: 100%;
  background: #d9d9d9;
}

/* Title/date overlay */
.home-upcoming-cardMeta{
  position: absolute;
  left: 16px;
  bottom: 14px;
  right: 16px;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
  font-family: "Kanit", sans-serif;
}

.home-upcoming-cardTitle{
  font-weight: 600;
  font-size: 20px;
  line-height: 1.15;
  margin-bottom: 6px;
}

.home-upcoming-cardDate{
  font-weight: 300;
  font-size: 12px;
  opacity: 0.95;
}

/* Controls row */
.home-upcoming-controls{
  transform: translate(160px, -40px);



  position: relative;
  z-index: 1;
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 34px 0 0;
  
}

/* Arrow buttons: exactly 70x35, no border, SVG is the button */
.home-upcoming-arrow{
  width: 70px;
  height: 35px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-upcoming-arrow img{
  width: 70px;
  height: 35px;
  display: block;
}

/* Counter */
.home-upcoming-counter{
  margin-left: auto;
  font-family: "Kanit", sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #7a7a7a;
}

/* Responsive */
@media (max-width: 1400px){
  .home-upcoming-inner{ padding-left: 40px; }
  .home-upcoming-left{ width: 520px; }
}

@media (max-width: 980px){
  .home-upcoming{
    height: auto;
    padding: 50px 0;
  }
  .home-upcoming-inner{
    flex-direction: column;
    align-items: flex-start;
    padding-left: 24px;
    padding-right: 24px;
    gap: 24px;
  }
  .home-upcoming-left{ width: 100%; max-width: 650px; }
}

.home-upcoming-media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



/* =========================
   HOME – SECTION 4 (LATEST NEWS)
   ========================= */

.home-latestnews{
  background:#f1f6f8;
  height:780px;
  padding-top:55px;
  box-sizing:border-box;
}

.home-latestnews-toprow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px;
}

.home-latestnews-allbtn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 18px;
  border:1px solid #4433EE;
  border-radius:999px;
  color:#4433EE;
  text-decoration:none;
  font-family:"Kanit", sans-serif;
  font-weight:400;
  font-size:16px;
  background:transparent;
}

.home-latestnews-allbtn img{
  width:18px;
  height:auto;
  display:block;
}

.home-latestnews-grid{
  display:grid;
  grid-template-columns: 500px 1fr;
  gap:28px;
  align-items:start;
}

.home-latestnews-right{
  display:grid;
  grid-template-columns: repeat(2, 365px);
  grid-auto-rows: auto;
  gap:28px;
  justify-content:start;
}

.home-latestnews-card{
  text-decoration:none;
  color:#000;
  display:block;
}

.home-latestnews-card--big .home-latestnews-imgwrap{
  width:500px;
  height:500px;
  border-radius:18px;
  overflow:hidden;
}

.home-latestnews-card--small .home-latestnews-imgwrap{
  width:370px;
  height:195px;
  border-radius:18px;
  overflow:hidden;
}

.home-latestnews-imgwrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.home-latestnews-ph{
  width:100%;
  height:100%;
  background:#d9d9d9;
}

/* typography as requested */
.home-newstitle{
  font-family:"Kanit", sans-serif;
  font-weight:600;
  font-size:26px;
  letter-spacing:-0.6%;
  margin-top:8px;
  line-height: 1.1;
}

.home-newstitle2{
  font-family:"Kanit", sans-serif;
  font-weight:600;
  font-size:20px;
  letter-spacing:-0.6%;
  margin-top:8px;
  line-height: 1.1;
}

.home-newsdate{
  font-family:"Kanit", sans-serif;
  font-weight:200;
  font-size:12px;
  letter-spacing:-0.6%;
  color:#8E8D8D;
  margin-top:10px;
}

/* clamp titles to max 2 lines */
.home-clamp-2{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.home-latestnews-topright{
  width: 758px; /* 365 + 365 + 28 gap */
  display: flex;
  justify-content: flex-end;
}



/* Responsive */
@media (max-width: 1400px){
  .home-latestnews-grid{ grid-template-columns: 1fr; }
  .home-latestnews-card--big .home-latestnews-imgwrap{ width:100%; max-width:500px; }
  .home-latestnews-right{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-latestnews-card--small .home-latestnews-imgwrap{ width:100%; height:195px; }
}

@media (max-width: 780px){
  .home-latestnews{ height:auto; padding-bottom:55px; }
  .home-latestnews-right{ grid-template-columns: 1fr; }
}

/* =========================
   HOME – SECTION 5 (LATEST CAMPAIGNS)
========================= */

.home-campaigns{
  background: #fff;
  padding: 0 0 60px 0;
}

.home-campaigns-card{
  background:#EDF5FF;
  border-radius: 18px;
  padding: 50px 45px 52px 45px; /* you can tweak */
  box-sizing: border-box;
}

.home-campaigns-title{
  font-family:"Kanit", sans-serif;
  font-weight:600;
  font-size:36px;
  color:#1C1A1A;
}

.home-campaigns-list{
  margin-top: 22px;
}

.home-campaigns-sep{
  height: 1px;
  background: #B7A0F8;
  opacity: 0.85;
}

.home-campaigns-row{
  display:flex;
  align-items:flex-start;
  gap: 26px;
  padding: 26px 0;
}

.home-campaigns-toggle{
  width:57.5px;
  height:57.5px;
  border-radius:999px;
  border:1px solid #4433EE;
  background: transparent;
  padding:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 57.5px;
}

.home-campaigns-icon img{
  width:22px;
  height:22px;
  display:block;
  transition: transform 360ms ease;
  transform-origin: center;
}

/* rotate 45deg => reads like X */
.home-campaigns-item.is-open .home-campaigns-icon img{
  transform: rotate(45deg);
}

.home-campaigns-rowgrid{
  flex:1;
  display:grid;
  grid-template-columns: 520px 1fr; /* title column + right text */
  column-gap: 90px;
  align-items:start;
}

.home-campaigns-titletext{
  font-family:"Kanit", sans-serif;
  font-weight:600;
  font-size:22px;
  color:#4433EE;
  line-height:1.15;
  transition: transform 360ms ease;
}

/* title slides right when open (to match your mock) */
.home-campaigns-item.is-open .home-campaigns-titletext{
  transform: translateX(34px);
}

.home-campaigns-desctext{
  font-family:"Kanit", sans-serif;
  font-weight:300;
  font-size:16px;
  color:#4433EE;
  line-height:1.45;
}

/* panel animation */
.home-campaigns-panel{
  max-height: 0;
  transition: max-height 520ms ease;
}

.home-campaigns-expanded{
  padding: 0 0 26px 0;
  display:flex;
  gap: 34px;
  align-items:flex-start;
}

.home-campaigns-thumb{
  width: 520px;
  height: 300px;
  border-radius: 14px;
  overflow:hidden;
  background:#e9eef0;
  flex: 0 0 520px;
}

.home-campaigns-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.home-campaigns-thumbph{
  width:100%;
  height:100%;
  background:#d9d9d9;
}

.home-campaigns-expandedgrid{
  flex:1;
  display:grid;
  grid-template-columns: 240px 1fr;
  column-gap: 90px;
  align-items:start;
}

.home-campaigns-expandedtitle{
  font-family:"Kanit", sans-serif;
  font-weight:600;
  font-size:22px;
  color:#4433EE;
  line-height:1.15;
}

.home-campaigns-expandeddesc{
  font-family:"Kanit", sans-serif;
  font-weight:300;
  font-size:16px;
  color:#4433EE;
  line-height:1.55;
  margin-bottom: 26px;
}

.home-campaigns-learn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 190px;
  height: 46px;
  border-radius: 999px;
  background:#4433EE;
  color:#fff;
  text-decoration:none;
  font-family:"Kanit", sans-serif;
  font-weight:600;
  font-size:14px;
}

.home-campaigns-footer{
  display:flex;
  justify-content:center;
  padding-top: 28px;
}

.home-campaigns-all{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 320px;
  height: 62px;
  border-radius:999px;
  background:#4433EE;
  color:#fff;
  text-decoration:none;
  font-family:"Kanit", sans-serif;
  font-weight:600;
  font-size:14px;
}

/* responsive */
@media (max-width: 1200px){
  .home-campaigns-rowgrid{ grid-template-columns: 1fr; row-gap: 10px; }
  .home-campaigns-expanded{ flex-direction: column; }
  .home-campaigns-thumb{ width:100%; max-width:520px; }
  .home-campaigns-expandedgrid{ grid-template-columns: 1fr; row-gap: 14px; }
}

/* =========================
   HOME – SECTION 6 (LATEST PUBLICATIONS)
   ========================= */



.home-publications{
  background:#f1f6f8;
  padding: 80px 0; /* adjust if you want tighter */
}


.home-publications .home-publications-cardTitle{
  text-transform: uppercase;
}


.home-publications-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 60px;
}

/* Left */
.home-publications-left{
  width: 430px;
  max-width: 430px;
  padding-top: 12px;
}

.home-publications-title{
  font-family:"Kanit", sans-serif;
  font-weight:600;
  font-size:36px;
  color:#000;
  margin:0 0 18px 0;
}

.home-publications-desc{
  font-family:"Kanit", sans-serif;
  font-weight:300;
  font-size:18px;
  color:#8E8D8D;
  line-height:1.55;
  margin:0 0 28px 0;
}

.home-publications-seeall{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 44px;
  padding: 0 26px;
  border-radius: 999px;
  background:#3B36F5;
  color:#fff;
  text-decoration:none;
  font-family:"Kanit", sans-serif;
  font-weight:600;
  font-size:14px;
}

/* Right card */
.home-publications-right{
  width: 760px;
  max-width: 760px;
}

.home-publications-card{
  width: 100%;
  border-radius: 14px;
  overflow:hidden;
  background:#3B36F5;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* top: text left, cover right */
.home-publications-top{
  display:grid;
  grid-template-columns: 1fr 240px;
  min-height: 270px;
}

.home-publications-topLeft{
  padding: 40px 38px;
}

.home-publications-cardTitle{
  font-family:"Kanit", sans-serif;
  font-weight:600;
  font-size:22px;
  color:#fff;
  line-height:1.25;
  max-width: 360px;
}

.home-publications-cardDate{
  margin-top: 80px;
  font-family:"Kanit", sans-serif;
  font-weight:300;
  font-size:14px;
  color: rgba(255,255,255,0.75);
}

/* cover area */
.home-publications-cover{
  background: rgba(255,255,255,0.92);
  border-left: 1px solid rgba(255,255,255,0.22);
  display:flex;
  align-items:stretch;
  justify-content:stretch;
}

.home-publications-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.home-publications-coverPh{
  width:100%;
  height:100%;
  background: rgba(0,0,0,0.08);
}

/* bottom bar */
.home-publications-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 22px;
  background: rgba(0,0,0,0.08);
  border-top: 1px solid rgba(255,255,255,0.14);
}

.home-publications-download{
  font-family:"Kanit", sans-serif;
  font-weight:300;
  font-size:14px;
  color:#fff;
  text-decoration:none;
}

.home-publications-langPills{
  display:flex;
  gap: 10px;
  align-items:center;
}

.home-publications-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 28px;
  padding: 0 14px;
  border-radius: 999px;
  background:#fff;
  color:#3B36F5;
  text-decoration:none;
  font-family:"Kanit", sans-serif;
  font-weight:600;
  font-size:12px;
}

.home-publications-pill.is-disabled{
  opacity:0.4;
  pointer-events:none;
}

/* arrows */
.home-publications-arrows{
  display:flex;
  gap: 14px;
  align-items:center;
}

.home-publications-arrow{
  width: 70px;
  height: 35px;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.home-publications-arrow img{
  width:70px;
  height:35px;
  display:block;
}

/* Responsive */
@media (max-width: 1200px){
  .home-publications-inner{
    flex-direction: column;
    gap: 30px;
  }
  .home-publications-left,
  .home-publications-right{
    width: 100%;
    max-width: 100%;
  }
  .home-publications-top{
    grid-template-columns: 1fr 260px;
  }
}

@media (max-width: 720px){
  .home-publications-top{
    grid-template-columns: 1fr;
  }
  .home-publications-cover{
    height: 220px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.22);
  }
  .home-publications-cardDate{
    margin-top: 22px;
  }
  .home-publications-bottom{
    flex-direction: column;
    align-items:flex-start;
    gap: 14px;
  }
}



/* ===== ABOUT MAP ===== */
/* ===== ABOUT MAP ===== */
.map-wrap{
  position: relative;
  width: min(560px, 100%);
}

/* All layers fill wrapper identically */
.map-layer{
  width: 100%;
  height: auto;
  display: block;
}

/* Stack layers */
.map-base{
  position: relative;
  z-index: 1;
}

/* Hover overlays: absolute on top of base */
/* ===== ABOUT MAP ===== */
.map-wrap{
  position: relative;
  width: min(560px, 100%);
}

/* All layers fill wrapper identically */
.map-layer{
  width: 100%;
  height: auto;
  display: block;
}

/* Stack layers */
.map-base{
  position: relative;
  z-index: 1;
}

/* Hover overlays: absolute on top of base */
.map-hover{
  position: absolute;
  inset: 0;
  z-index: 2;

  /* start fully hidden (reveals from left to right) */
  clip-path: inset(0 100% 0 0);

  /* slower, clean reveal */
  transition: clip-path 420ms cubic-bezier(.2,.8,.2,1);

  pointer-events: none; /* never steal hover */
}

/* Hotspots above all */
.hotspot{
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  transform: translate(-50%, -50%);
  z-index: 5;
  border: 0;
  padding: 0;
  background: rgba(68,51,238,0); /* invisible */
}

/* Hover/focus triggers */
.map-wrap.is-hover-m .map-hover-m{
  clip-path: inset(0 0 0 0);
}

.map-wrap.is-hover-p .map-hover-p{
  clip-path: inset(0 0 0 0);
}

/* IMPORTANT: position these accurately (your current values are off) */
.hs-mitro{ left: 47%; top: 12%; }  /* <-- adjust */
.hs-pris { left: 69%; top: 41%; }  /* <-- adjust */