/*  1. Use a more-intuitive box-sizing model. */
*,*::before,*::after {box-sizing: border-box;}
/*  2. Remove default margin */
* {margin: 0;}
/*  3. Add accessible line-height  4. Improve text rendering */
body {line-height: 1.5;-webkit-font-smoothing: antialiased;}
/*  5. Improve media defaults */
img,picture,video,canvas,svg {display: block;max-width: 100%;}
/*  6. Remove built-in form typography styles */
input,button,textarea,select {font: inherit;}
/*  7. Avoid text overflows */
p,h1,h2,h3,h4,h5,h6 {overflow-wrap: break-word;}
/*  8. Create a root stacking context */
#root,#__next {isolation: isolate;}

html,body {scroll-behavior-y: smooth;}
.flex {display: flex;}
.justify-between {justify-content: space-between;}

#article {display: flex;flex-direction: column;gap: 20px;padding: 60px 16px 60px 16px; @media (min-width: 768px) {flex-direction: row;gap: 35px;padding-left: 0;padding-right: 0;}}
#article h2 {font-size: 24px;font-weight: 700;line-height: normal;@media (min-width: 768px) {font-size: 40px;}}
#article h3 {font-size: 22px;font-weight: 700;line-height: normal;@media (min-width: 768px) {font-size: 36px;}}
#article h4 {font-size: 20px;font-weight: 700;line-height: normal;@media (min-width: 768px) {font-size: 32px;}}
#article h5 {font-size: 18px;font-weight: 700;line-height: normal;@media (min-width: 768px) {font-size: 28px;}}

aside {display: flex;flex-direction: column;gap: 38px; @media (min-width: 768px) {align-self: flex-start;position: sticky;top: 80px;width: 335px;}}
aside ul {margin: 0;padding: 0;}
aside li {list-style-type: none;border-left: 4px solid var(--gray-light);padding: 10px 0 10px 12px;} /* padding: 16px 0 16px 12px;} */
aside li:hover {border-left: 4px solid var(--blue-dark);}
aside li a {color: var(--gray-dark);font-weight: 500;}
aside li:hover a {color: var(--blue-dark);}

#tabs1 {margin:20px;}

article {display: flex;flex-direction: column;gap: 20px; @media (min-width: 768px) {gap: 35px;width: calc(100% - 335px);}}
article > section,article > section > div {display: flex;flex-direction: column;gap: 20px; @media (min-width: 768px) {gap: 35px;}}
article p,article li {font-size: 16px;font-style: normal;font-weight: 400; @media (min-width: 768px) {font-size: 20px;}}
article table,article tr,article td {border: 1px solid var(--gray-dark);border-collapse: collapse;}
article td {padding: 10px;}

/* SECTIONS */
.banner {background: var(--green-light);}
.banner h2 {margin-bottom: 16px;}
.banner .cta {margin-top: 40px;}

/* CTA programmes */
.cta-intext {text-align:center;}
.cta-intext a,.cta-intext a:visited {color:#FFF;font-size:16px;}
.cta-intext a:hover {color:#000;}
.cta-box {background: var(--blue-dark);border:1px solid var(--blue-dark);border-radius:16px;color:white;display:inline-block;font-weight:600;padding:12px 24px;text-decoration:none;cursor:pointer;}
.cta-box:hover {background:white;color:var(--black-black);}

/* in-article Links */
.sk-list {gap:0;}
.sk-list h3,.sk-list h3 a {color:#000;font-size: 18px;font-style: normal;line-height: 1;margin:5px 0 5px 0;padding:0;@media (min-width: 768px) {font-size: 20px;line-height: 0;padding: 0;}}
.sk-list li a {color:green-dark;font-size:16px;font-style:normal;font-weight:400;padding:0;margin:0;@media (min-width: 768px) {font-size:18px;}}
.sk-list a:hover {text-decoration:underline;}

.read-more-state {display:none;}
.read-more-target {opacity:0;max-height:0;font-size:0;transition:.25s ease;}
.read-more-state:checked ~ .read-more-wrap .read-more-target {opacity:1;font-size:inherit;max-height:999em;}
.read-more-state ~ .read-more-trigger:before {content:'[+]';}
.read-more-state:checked ~ .read-more-trigger:before {content:'[-]';}
.read-more-trigger {cursor:pointer;padding:0;font-size:.9em;}

/* Quick access links */
.dropbtn {background-color:var(--green-dark);color:white;padding:16px;font-size:16px;border:none;cursor:pointer;border-radius:16px;}
.dropbtn:hover,.dropbtn:focus {background-color:var(--gray-light);color:black;}
.dropdown {position:relative;display:inline-block;}
.dropdown ul {padding-left:5px;}
.dropdown li {list-style:none;}
.dropdown-content {display:none;position:absolute;background-color:#f1f1f1;min-width:190px;overflow:auto;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1;}
.dropdown2-content {min-width:55px;}
.dropdown-content a {font-size:14px;color:var(--gray-dark);padding:5px 5px;text-decoration:none;display:block;}
.dropdown-content a:hover {background-color:#ddd;text-decoration:underline;}
.show {display:block;}
.button-container {display:flex;gap:10px;justify-content:center;}

/* Videos & Imgs */
.videoyt-container {position:relative;overflow:hidden;padding-top:56.25%;}
.videoyt {position:absolute;top:0;left:0;width:95%;height:100%;border:0;}
.pin-container {position:relative;overflow:hidden;padding-top:56.25%;padding-bottom:55px;}

/* SLIDESHOW */
.slideshow {overflow: hidden;position: relative;width: 100%;height: 300px;z-index: 1;border-radius: 16px;}
.slideshow .slideshow-inner {position: absolute;top: 0;left: 0;width: 100%;height: 300px;}
.slideshow .slides {position: absolute;top: 0;left: 0;width: 100%;height: 300px;z-index: 1;}
.slideshow .slide {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: none;opacity: 0;transition: opacity 1s ease-in-out; * Increased duration to 1 second */}
.slideshow .slide.is-active {display: block;opacity: 1;}
.slideshow .caption {display: flex;flex-direction: column;justify-content: center;align-items: center;position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 0;text-align: center;z-index: 2;color: #fff;}
.slideshow .caption .title {margin: 0;font-size: 1.3rem;font-weight: 700;letter-spacing: 0.04em;width:75%;}
.slideshow .caption .title a {color:#FFF;text-decoration:underline;}
.slideshow .caption .text {margin: 25px 0 0 0;font-size: 1rem;}
.slideshow .image-container {position: absolute;top: 0;left: 0;width: 100%;height: 300px;background-position: center;z-index: 1;background-size: cover;image-rendering: optimizeQuality;}
.slideshow .image-container::before {content: "";display: block;position: absolute;top: 0;left: 0;width: 100%;height: 300px;background: rgba(0, 0, 0, 0.5);}
.slideshow .image {width: 100%;object-fit: cover;height: 300px;}
.slideshow .arrows .arrow {margin: -33px 0 0;padding: 20px;position: absolute;top: 50%;cursor: pointer;z-index: 3;}
.slideshow .arrows .arrow.prev {left: 30px;}
.slideshow .arrows .arrow.prev:hover .svg {left: -10px;}
.slideshow .arrows .arrow.next {right: 30px;}
.slideshow .arrows .arrow.next:hover .svg {left: 10px;}
.slideshow .arrows .svg {position: relative;left: 0;width: 14px;height: 26px;fill: #fff;transition: left 0.2s ease;}

/* FAQ */
#faq {background: linear-gradient(180deg, #fef3c7 0%, rgba(253, 248, 224, 0) 100%);display: flex;flex-direction: column;gap: 20px;padding: 20px;position: relative; @media (min-width: 768px) {gap: 80px;padding: 120px;}}
#faq:before {
  @media (min-width: 768px) {
    background: url("https://sherpas.com/p/files/img/vecto-yellow.svg");
    content: "";
    display: block;
    height: 108px;
    position: absolute;
    right: -50px;
    top: -30px;
    width: 216px;
    z-index: 10;
  }
}
#faq:after {
  @media (min-width: 768px) {
    background: url("https://sherpas.com/p/files/img/vecto-blue.svg");
    bottom: 125px;
    content: "";
    display: block;
    height: 124px;
    position: absolute;
    left: -50px;
    width: 102px;
    z-index: 10;
  }
}
#faq h2 {font-size: 24px;text-align: center;font-weight: normal;margin: auto; @media (min-width: 768px) {font-size: 40px;max-width: 640px;}}
#faq ul {display: flex;flex-direction: column;gap: 16px;margin: 0;padding: 0;}
#faq label:after {
  content: "";
  display: block;
  background: url("https://sherpas.com/p/files/img/arrow.svg");
  background-repeat: no-repeat;
  cursor: pointer;
  height: 16px;
  position: absolute;
  right: 24px;
  top: 20px;
  width: 16px;
  @media (min-width: 768px) {
    top: 30px;
  }
}
#faq li {background: white;position: relative;}
#faq .cta-wrapper {text-align: center;}
#faq input {position: absolute;opacity: 0;transition: all 0.35s;z-index: -1;}
.accordion {border-radius: 16px;overflow: hidden;}
.accordion-label {background: white;cursor: pointer;display: block;padding: 16px;@media (min-width: 768px) {padding: 24px;}}
.accordion-content {max-height: 0;background: white;}
#faq input:checked ~ .accordion-content {max-height: 100vh;padding: 24px;}
#faq input:checked + label:after {transform: rotate(180deg);}
.answer {display: none;}

/* FOOTER */
footer {width:100%;padding:20px;font-size:16px;}
footer p {margin:0;padding:0;font-size:16px;}
.footer-row.footer-menu-1 a {@media (min-width:768px) {font-size:14px;}}
.footer-row {display:flex;flex-direction:column;gap:30px;margin-bottom:40px;}
.footer-column {flex:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;}
.footer-menu {text-align:left;display:flex;flex-direction:column;justify-content:flex-start;height:100%;}
.footer-row.footer-menu-1 {background-color:#FAFAFA;padding:30px 10px 30px 20px;border-radius:8px;}
.footer-menu-title {font-weight:700;margin-bottom:12px;}
footer ul {list-style-type:none;padding:0;margin:0;}
footer li {margin-bottom:5px;}
footer a, footer a:visited {text-decoration:none;color:#333;}
.logo, .footer-cta-wrapper {display:block;text-align:center;margin:0 auto;max-width:100%;align-self:center;}
@media (min-width: 768px) {.footer-row {flex-direction:row;justify-content:space-between;}
.footer-column {display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;}
.footer-menu {text-align:left;}
.footer-menu-title,.footer-menu ul {display:flex;flex-direction:column;justify-content:flex-start;height:100%;}
.footer-row.footer-menu-1 {align-items:stretch;}
.footer-menu-1 .footer-column {height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;}}

.banner-left {background: var(--red-light);border-radius: 16px;display:flex;flex-direction: column;gap: 35px;padding: 24px; @media (min-width: 768px) {padding: 40px;}}
.banner-left-title {font-size: 16px;font-weight: 700;line-height: normal; @media (min-width: 768px) {font-size: 30px;}}

.banner-bottom {background: var(--blue-light);border-radius: 16px;padding: 28px; @media (min-width: 768px) {display: flex;align-items-center;flex-direction: row;padding: 60px;}}
.banner-bottom-content {display: flex;flex-direction: column;gap: 16px;}
.banner-bottom-title {font-size: 20px;font-weight: 700;line-height: normal; @media (min-width: 768px) {font-size: 40px;}}
.banner-bottom-img-wrapper {display: flex;align-items: center;justify-content: center;}
.banner-bottom-img-wrapper img {width: 400px;}

.banner-bottom-cta {display:flex; justify-content:center; @media (min-width: 768px) {justify-content:left;}}
.banner-left-cta {display:flex; justify-content:center; @media (min-width: 768px) {justify-content:left;}}
.banner-cta {display:flex; justify-content:center; @media (min-width: 768px) {justify-content:left;}}

.cta-blue {background: var(--blue-dark);border-color: var(--blue-dark);}
.cta-blue:hover {color: var(--blue-dark);}
.cta-red {background: var(--red-dark);border-color: var(--red-dark);}
.cta-red:hover {color: var(--red-dark);}

/* AUTHOR */
#author {border: 1px solid var(--gray-light);border-radius: 8px;display: flex;flex-direction: column;align-items: center;padding: 28px; @media (min-width: 768px) {flex-direction: row;}}
#author-image-wrapper { @media (min-width: 768px) {width: 190px;}}
#author img {border-radius: 16px;aspect-ratio: square;width: 100%;}
#author-content { @media (min-width: 768px) {width: calc(100% - 190px);}}
#author-name {font-size: 24px;font-weight: 700;/*  margin-bottom: 16px; */}
#author-text p {font-size: 14px;}