.header {
    position: relative;
    overflow: visible; /* allows overlap outside the header if needed */
}

.header-overlay-image {
    position: absolute;
    top: -50px;
    right: 0;
    width: 750px; /* adjust */
    height: auto;
    z-index: 2;
}

.subpage-heading {
    position: relative;
    z-index: 1;
}

.subpage-title {
    color: #0d50a1;
    line-height:65px;
	top:20px;
}

.subpage-heading h1 {
    color: #e16f0a;
    font-size: 15px;
    width: 550px;
    font-weight: 300;
    line-height: 20px;
    margin-top: 30px;
}

.subpage-heading h2 {
    color: #e16f0a;
    font-size: 20px;
    font-weight: 700;
    margin-top: 40px;
	padding-left:25px;
	text-transform: uppercase;
}

.wave {
    width: calc(100% + 200px);
    margin-left: -100px;
	margin-top: 40px;
	margin-bottom:100px;
	color: #ffffff;
}

.row {
	display: flex;
    gap: 0;
}

.row div {
	display:inline-block;
	position:relative;
	margin:0;
}

.topleft {
	width:650px;
}

.topmiddle {
	width:320px;
}


.topright { 
width: 430px; 
height: 190px; 
background: #033b7f; 
position: relative; 
overflow: hidden; 
} 

.topright::after { 
content: ""; 
position: absolute; 
width: 440px; 
height: 190px; 
background: #ebebeb;
border-bottom-right-radius: 100%; 
right: 0; 
bottom: 0; 
right: -10px;
}

/* Quarter circles */
.left {
    border-top-left-radius: 100%;
	width:650px;
	height:650px;
	background:#033b7f;
}

.middle {
	width:320px;
	height:650px;
	background:#033b7f;
	text-align:center;
	overflow: visible;
	z-index: 2;
}

.middle1 {
    position: absolute;
    left: -415px;
    width: 975px;
    top: 100px;
	
}

.middle2 {
	position: absolute;
    left: -490px;
    width: 1100px;
	top:135px;
	
	display: flex !important;
    gap: 60px; /* space between the 3 divs */
}

.middle2 > div {
    flex: 1; /* each takes an equal share */
	width:350px;
	text-align: center;
	display: flex;
    flex-direction: column;
    align-items: center;
}

.right {
	width:430px;
	height:650px;
	position: relative;
    z-index: 1;
}

.right span:nth-child(1) {
	display:block;
	height:220px;
	width:430px;
	background:#033b7f;
}

.right span:nth-child(2) {
    border-bottom-right-radius: 100%;
	height:430px;
	display:block;
	width:430px;
	background:#033b7f;
}

.wave h1 {
    font-size:30px;
	font-family: var(--font-title);
	font-weight:500;
}

.wave h2 {
    font-size:14px;
	font-weight:300;
	margin-bottom: 15px;
}

.storyclick h1 {
	font-size:45px;
}

.storyclick h2 {
	font-size:16px;
}

.storyclick a {
	margin-top:10px;
	padding: 5px 8px;
    border: 2px solid #fff;
	color: #fff !important;
    border-radius: 999px;
    text-decoration: none;
	font-size:14px;
    
}


.small-circle {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 30%;	
	margin-top:5px;
	background: conic-gradient(
        #e7ab1f 0deg 90deg,
        transparent 90deg 360deg
    );
}


.middle2 > div:nth-child(1) .small-circle {
	transform: translateX(-2px) rotate(270deg);
}

.middle2 > div:nth-child(2) .small-circle {
	transform: translateX(-15px);
}

.middle2 > div:nth-child(3) .small-circle {
	transform: translateX(-2px) rotate(270deg);
}

.middle2 h1 {
	line-height:30px;
	max-width:250px;
	min-height:70px;
}



.middle2 > div .small-circle {
    align-self: flex-start; /* left-align only the circle */
}

.row:last-child {
    margin-top: -48px;
	margin-left:100px;
	font-size:45px;
	z-index: 2;
	position: relative;
	font-family: var(--font-title);
	font-weight:500;
}


/* ACCOR */


.accor {
  display: flex;
  width: calc(100% + 170px);
  height: 700px;
  overflow: hidden;
  border-top: 1px solid #033b80;  
  margin-left: -100px;
  margin-top: 40px;
  margin-bottom:100px;

}

.slide {
  width: 100px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #033b80;
  transition: flex .5s ease;
}

/* remove outer right border */
.slide:last-child {
  border-right: none;
}

.slide.active {
  flex: 1;
}


/* TITLE AREA */

.title-box {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #033b80;
  overflow: hidden;
  white-space: nowrap;
  color: #e16f0a;
}

.short-title {
  padding-left: 20px;
  font-size: 45px;
  font-weight: 500;
  text-align:center;
  padding:0;
  font-family: var(--font-title);
}

.long-title {
  padding-right: 20px;
  font-size: 35px;
  font-weight: 400;
  text-align: right;
  font-family: var(--font-title);
}


/* BODY AREA */

.body-box {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


/* hidden by default */
.collapsed-title,
.open-btn {
    display: none;
	font-family: var(--font-title);
}


.accor .body-content {
    display: flex;
    width: 100%;
    margin-top: 40px;
    color: #e16f0a;
    font-size: 19px;
}


/* MAIN COLUMNS */

.accor .slide .body-content > .col:first-child {
    flex: 0 0 45%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.accor .slide .body-content > .col:last-child {
    flex: 0 0 55%;
    padding-right: 10%;
}


/* -------- SLIDE 1 ONLY -------- */


/* allow right column internal layout */
.accor .slide:nth-child(1) .body-content {
    align-items: flex-start;
}


/* left circle column */
.accor .slide:nth-child(1) .body-content > .col:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}


/* right content wrapper */
.accor .slide:nth-child(1) .acc1-content {
    width: 100%;
}


/* top row */
.accor .slide:nth-child(1) .row-top {
    width: 100%;
    margin-bottom: 24px;
	text-align:center;
}


/* bottom two columns */
.accor .slide:nth-child(1) .row-bottom {
    display: flex;
    width: 100%;
    gap: 24px;
}

.accor .slide:nth-child(1) .small-col {
    flex: 1;
}

.accor .slide:nth-child(1) .small-col:nth-child(1) {
	position: relative;
}


.accor .slide:nth-child(1) .small-col:nth-child(1)::after {
	content: "";
	position: absolute;
	right: 0;
	top: 120px; /* where the border starts */
	bottom:80px;
	right:-10px;
	border-right: 1px dashed #033b80;
}



/* -------- SLIDE 2 -------- */

.accor .slide:nth-child(2) .body-content .col:last-child p,
.accor .slide:nth-child(3) .body-content .col:last-child p {
    margin-top: 10px;
	margin-bottom:20px;
}


/* -------- SLIDE 3 -------- */

.accor .slide:nth-child(3) .body-content .col:last-child h2 {
    font-size: 16px;
    font-weight: 300;
}

.accor .slide:nth-child(1) .body-content .col:last-child button , .accor .slide:nth-child(3) .body-content .col:last-child button {
    font-size: 15px;
    color: #e16f0a;
    margin-top: 20px;
    border: 1px solid #e16f0a;
    border-radius: 55px;
    text-decoration: none;
    padding: 10px;
    line-height: 15px;
    font-weight: 500;
}

.accor .slide:nth-child(1) .body-content .col:last-child button {
    display: block;
	margin: 0 auto;
}


a.download {
	font-size: 15px;
    color: #e16f0a;
    margin-top: 20px;
    border: 1px solid #e16f0a;
    border-radius: 55px;
    text-decoration: none;
    padding: 10px;
    line-height: 15px;
    font-weight: 500;
}

.accor .slide:nth-child(1) .body-content .col:last-child h3 {
    font-size: 14px;
    font-weight: 300;
	margin-bottom:10px;
}

.accor .slide:nth-child(1) .body-content .col:last-child h4 {
    font-size: 12px;
    font-weight: 300;
	margin-bottom:20px;
}


.call {
    font-size: 15px;
    color: #033b80;
    border: 1px dashed #e16f0a;
    border-radius: 25px;
    text-decoration: none;
    line-height: 15px;
    font-weight: 500;
    width: 80px;
    height: 90px;
	position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
	margin-left: auto;
    margin-right: auto;
	margin-bottom:30px
}

.call::after {
    position: absolute;
    width: 40px;
    height: 40px;
    background: #e16f09;
    color: white;
    border-radius: 50%;
	
    right: -15px;
    bottom: -15px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 10px;
    font-weight: 500;
}

.call1::after {
    content: "open";
}

.call2::after {
    content: "coming soon";
}

html[lang^="sq"] .call1::after {
    content: "Hapur";
}

html[lang^="sq"] .call2::after {
    content: "Së shpejti";
}

html[lang^="mk-MK"] .call1::after {
    content: "отворен";
}

html[lang^="mk-MK"] .call2::after {
    content: "наскоро";
}



/* + BUTTON */

.open-btn {
    width: 46px;
    height: 46px;
    border: 1px solid #033b80;
    border-radius: 50%;
    background: none;
    color: #e16f0a;
    font-size: 34px;
    font-weight: 300;
    line-height: 1;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    margin-top: auto;
    margin-bottom: 20px;

    transition: transform .2s ease;
}

.open-btn:hover {
    transform: scale(1.1);
}


/* ---------- COLLAPSED ---------- */

.slide:not(.active) .title-box {
    justify-content: center;
}

.slide:not(.active) .long-title {
    display: none;
}

.slide:not(.active) .body-box {
    align-items: center;
}

.slide:not(.active) .collapsed-title {
    display: block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);

    color: #e16f0a;
    font-size: 25px;
    font-weight: 400;

    margin-top: 20px;
}

.slide:not(.active) .open-btn {
    display: flex;
}

.slide:not(.active) .body-content {
    display: none;
}


/* ---------- OPEN ---------- */

.slide.active .collapsed-title,
.slide.active .open-btn {
    display: none;
}

.slide.active .body-content {
    display: flex;
}

/* OPEN STATE */


.slide.active .title-box {
  justify-content: flex-start;
}

.slide.active .short-title {
  width: 80px;
  text-align: center;
  padding: 0;
}

.slide.active .long-title {
  flex: 1;
  padding-left: 20px;
}



.circle {
  width: 300px;
    height: 300px;
    border: 2px solid #e16f09;
    border-radius: 50%;
    overflow: hidden;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
}

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



.acc1 {
    transform: translateX(5px) translateY(35px) scale(1.2);
}

.subpage-grid a:nth-child(2) .circle img.helpdesk {
    transform: scale(1.2);
}

.subpage-grid a:nth-child(4) .circle img.helpdesk {
    transform: scale(1.06);
}



.section-title {
	position: relative;
    z-index: 1;
    font-size: 50px;
    font-weight: 500;
    font-family: var(--font-title);
    color: #033b80;
    margin-left: 3px;	
}


.news {
	margin:90px 0px;
}

.article-grid {
    display: flex;
    gap: 20px;
}

.article-box {
    flex: 0 0 calc(50% - 10px);
    height: 340px;
    background: #e9e3e3;
    border-radius: 8px;
    color: #033b80;
    box-shadow: -4px 6px 18px rgba(0, 0, 0, 0.20);
    font-size: 10px;
    text-align: left;

    display: flex;
    overflow: visible;
    position: relative;
}

.article-content {
    width: 45%;
    padding: 15px 10px;
    overflow: hidden;
}

.article-content p {
    margin:15px;
	font-size:12px;
}

.article-image {
    width: 55%;
    height: 400px; /* taller than the card */
    margin-top: -30px;
    margin-bottom: -30px;
    overflow: hidden;
    border-radius: 8px;
	box-shadow: -4px 6px 18px rgba(0, 0, 0, 0.20);
}

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

.article-box.hidden {
    display: none !important;
}

.article-navigation {
    margin-top: 80px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.article-navigation button {
        color: #033b7f;
    font-size: 30px;
    margin-right: 20px;

    background: transparent;
    border: none;
    cursor: pointer;

    width: 36px;
    height: 36px;
    border-radius: 50%;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    transition: .2s;
}


.article-navigation button span {
    display: block;
    position: relative;
    top: -2px; /* moves only the arrow */
	transform: scaleX(.7); /* 70% width */
}

.article-navigation button.active {
    background: #033b7f;
    color: #fff;
}


a.tag {
    padding: 10px 16px;
    border: 2px solid var(--color-main-menu);
    border-radius: 999px;
    text-decoration: none;
    color: var(--color-main-menu);
    margin: 15px 0 0 15px;
    display: inline-block;
}



/* ===========================================
   MOBILE WAVE
=========================================== */

@media (max-width:768px){

.header{
    overflow: hidden;
    padding-bottom: 50px;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -45vw;
    margin-right: -50vw;
    box-sizing: border-box;
}



.header-overlay-image {
    position: absolute;
    top: 480px;
    right: 0;
    width: 500px;
    height: auto;
    z-index: 2;
    transform: translateX(calc(30% + var(--header-right-gap, 0px)));
}

.subpage-heading {
    width:90%;
	font-size:55px;
	line-height:50px;
}

.subpage-heading  h1 {
    width:75%;
	font-size:13px
}

.subpage-title {
    line-height:50px;
	font-size:50px;
}


html, body {
    overflow-x: hidden;
}


.section-title {
    font-size: 40px;
}

/* ==========================
   WAVE MOBILE
========================== */

.wave{
    width:100vw;
    position:relative;
    left:50%;
    right:50%;
    margin-left:-50vw;
    margin-right:-50vw;
    margin-top:40px;
    margin-bottom:50px;
    box-sizing:border-box;
}


/* rows */

.wave .row{
    display:block;
    width:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
}


/* hide top decoration */

.wave .row:nth-child(1){
    display:none;
}


/* hide side shapes */

.wave .left,
.wave .right{
    display:none;
}


/* blue area */

.wave .middle{

    display:block;

    width:100% !important;
    height:auto !important;

    padding:50px 25px;

    box-sizing:border-box;

    overflow:hidden;

}


/* remove desktop absolute layout */

.wave .middle1,
.wave .middle2{

    position:relative !important;

    left:auto !important;
    top:auto !important;

    width:100% !important;

    box-sizing:border-box;

}


/* ABOUT */

.wave .middle1{

    margin-bottom:45px;

    text-align:center;

}


.wave .storyclick h1{

    font-size:38px;
    line-height:1.1;

    margin-bottom:15px;

}


.wave .storyclick h2{

    font-size:16px;
    line-height:1.6;

}


/* cards wrapper */

.wave .middle2{

    display:flex !important;

    flex-direction:column;

    gap:20px;

}


/* cards */

.wave .middle2 > div{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    width:100% !important;

    max-width:100% !important;

    min-width:0;

    padding:22px;

    margin:0;

    box-sizing:border-box;

}


/* icon */

.wave .small-circle{

    width:30px !important;

    height:30px !important;

    margin:0 0 15px;

    transform:none !important;

}


/* card headings */

.wave .middle2 h1{

    width:100%;

    max-width:none;

    min-height:0;

    font-size:24px;

    line-height:1.3;

    margin:0 0 10px;

}


/* card text */

.wave .middle2 h2{

    width:100%;

    max-width:none;

    font-size:15px;

    line-height:1.6;

    margin:0;

}


/* CTA */

.wave .row:last-child{
    margin-top:0;
    background:#033b7f;
    padding:0 25px 40px;
    box-sizing:border-box;
	height:50px;
}

.wave .row:last-child > div{
    width: 100%;
    text-align: center;
    font-size: clamp(18px, 5vw, 26px);
    line-height: 1.3;
    color: #fff;
    top: 3px;
    white-space: nowrap;
}

.article-slider{
    width:100%;
}

.article-grid{
    display:flex;
    flex-direction:column;
    gap:30px;
}


/* show all articles that exist */
.article-box {
	margin-bottom:70px;
}

/* hide arrows */

.article-navigation{
    display:none;
}

/* ===========================================
   ACCORDION MOBILE (vertical)
=========================================== */

.accor{
    display:block;
    width:100vw;
    position:relative;
    left:50%;
    right:50%;
    margin-left:-50vw;
    margin-right:-50vw;
    margin-top:40px;
    margin-bottom:60px;
    height:auto;
    border-top:1px solid #033b80;
    box-sizing:border-box;
}

.slide{
    width:100%;
    flex-shrink:initial;
    border-right:none;
    border-bottom:1px solid #033b80;
    position:relative;
}

.slide:last-child{
    border-bottom:none;
}

.slide.active{
    flex:none;
}

/* TITLE ROW */

.title-box{
    height:60px;
    padding:0 20px;
    box-sizing:border-box;
	border-bottom:none;
}

.short-title{
    width:36px;
    text-align:left;
    flex-shrink:0;
	font-size:40px;
}

.long-title{
    font-size: clamp(13px, 1.5vw, 22px);
    padding-right: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* keep title visible even when collapsed */
.slide:not(.active) .long-title{
    display:block;
}

/* BODY */

.body-box{
    padding:0 20px;
}

.slide.active .body-box{
    padding:20px 20px 20px 10px;
}

/* hide the old vertical rotated title, we show long-title instead */
.collapsed-title{
    display:none !important;
}

/* float the + button into the title row */
.open-btn{
    position:absolute;
    top:7px;
    right:20px;
    margin:0;
    width:40px;
    height:40px;
    font-size:26px;
}

.slide:not(.active) .body-box{
    height:0;
    padding-top:0;
    padding-bottom:0;
    overflow:hidden;
}

/* CONTENT STACKING */

.accor .body-content{
    flex-direction:row;
    align-items:flex-start;
    margin-top:15px;
    font-size:13px;
    gap:10px;
}

.accor .slide .body-content > .col:first-child{
    flex:0 0 35%;
    padding-right:0;
}

.accor .slide .body-content > .col:last-child{
    flex:0 0 65%;
    padding-right:0;
}

.circle{
    width:130px;
    height:130px;
    margin:0;
}

/* SLIDE 1 SPECIFIC */

.accor .slide:nth-child(1) .body-content{
    align-items:flex-start;
}

.accor .slide:nth-child(1) .body-content > .col:first-child{
    height:auto;
}

.accor .slide:nth-child(1) .row-bottom{
    flex-direction:row;
    gap:12px;
}

.accor .slide:nth-child(1) .small-col:nth-child(1)::after{
    content:"";
    position:absolute;
    right:-6px;
    top:0;
    bottom:0;
    border-right:1px dashed #033b80;
}

.accor .slide:nth-child(1) .row-top p{
    font-size:12px;
}

.accor .slide:nth-child(1) .small-col:nth-child(1){
    border-bottom:none;
    padding-bottom:0;
}

.slide:not(.active) .title-box{
    justify-content:space-between;
}

.slide.active .short-title{
    width:36px;
    text-align:left;
}

.accor .slide:nth-child(1) .body-content .col:last-child h3{
    font-size:11px;
    margin-bottom:6px;
}

.accor .slide:nth-child(1) .body-content .col:last-child h4{
    font-size:10px;
    margin-bottom:12px;
}

.call{
    width:55px;
    height:60px;
    font-size:10px;
    margin-bottom:15px;
}

.call::after{
    width:28px;
    height:28px;
    font-size:8px;
    right:-10px;
    bottom:-10px;
}

a.download{
    font-size:12px;
    padding:7px;
}

}