.site-footer {
  z-index: 2;
}
.hero-section {
  background: var(--dark-blue);
  color: var(--white);
  position: relative;
  overflow: hidden;
  z-index: 2;
}
.hero-section::before {
  background: url("../images/banner-img.svg");
  background-size: 80px;
  /* background: var(--dark-blue); */
  content: "";
  height: 100%;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
  z-index: -1;
}
.hero-section .banner-content {
  padding: 120px 15px 120px 120px;
  display: flex;
  gap: 40px;
  z-index: 2;
  position: relative;
}
.hero-section .banner-img {
  height: 180px;
  width: 180px;
}
.hero-section .banner-img img {
  width: 100%;
  object-fit: contain;
}
.b-content {
  flex: 1;
}
.b-content h1 {
  text-transform: uppercase;
}
.b-content strong.text-xs {
  font-family: "Roboto" !important;
  font-weight: 500;
}
.b-content p {
  margin-top: 20px;
  color: #fff;
  line-height: 28px;
}
.video-section {
  position: relative;
  padding-block: 60px;
}
.box-title {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  max-width: 942px;
  margin: 0 auto 30px;
  text-align: center;
}
.box-title .text-xl,
.box-title .sky-blue {
  margin-bottom: 30px;
}
.box-title p {
  font-size: 20px;
  line-height: 28px;
}
.vesol-ipad-video {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Responsive frame */
.ipad-video-wrap {
  position: relative;
  width: calc(100% - 65px);
  height: calc(100% - 20px);
  left: 30px;
  padding-top: 55.25%;
  overflow: hidden;
  box-shadow: 10px 10px 5px 1px rgba(0, 0, 0, 0.25);
  border-radius: 60px;
  /* background-image: url("../images/ipad-frame.svg"); */
}

.ipad-video-wrap .test {
  mask: url("../images/mask.png") center/contain no-repeat;
  position: absolute;
  inset: 0;
  width: calc(100% - 55px);
  height: calc(100% - 0px);
  left: 25px;
}

.ipad-video-wrap::before {
  position: absolute;
  content: "";
  z-index: 1;
  inset: 0;
  overflow: hidden;
  border-radius: 16px;
  background: url("../images/ipad-frame.svg");
  background-repeat: no-repeat;
  background-size: contain;
  /* -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000); */
  width: 100%;
  height: 100%;
  z-index: -1;
}

.ipad-video-wrap iframe,
.ipad-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border: 0;
  outline: 0;
  z-index: 9;
}

.your-toolkit {
  position: relative;
  background: #eaeced;
  padding: 60px 15px;
}
.box-title-button {
  display: flex;
  align-items: flex-end;
  margin-bottom: 50px;
  justify-content: space-between;
}
.box-title-button .sky-blue {
  margin-bottom: 30px;
}
.box-title-button p {
  max-width: 777px;
}
.box-title-button .v-btn {
  flex: 1;
}

.resource-card .resource-content .v-btn {
  margin-top: 10px;
}
.resource-card .rimage-wrapper {
  margin-bottom: 20px;
}
.resource-card .rimage-wrapper img {
  height: auto;
  width: 100%;
  min-height: 315px;
  object-fit: contain;
  object-position: left;
  border-radius: 6px 6px 0 0;
}
.resource-content .text-xs {
  color: var(--dark-blue);
	min-height: 100px;
}

.celebrating-box {
  padding-block: 60px;
  position: relative;
}
.celebrating-box .c-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.voice-box {
  position: relative;
  background: #eaeced;
  padding: 60px 15px;
}
.voice-box .c-title .text-xl {
  margin-bottom: 30px;
  line-height: normal;
}
.voice-box .c-img {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.resources-more {
  background: var(--dark-blue);
  color: var(--white);
  position: relative;
  overflow: hidden;
  z-index: 2;
}
.resources-more::before {
  background: url("../images/banner-img.svg");
  background-size: 80px;
  /* background: var(--dark-blue); */
  content: "";
  height: 100%;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: 100vw;
  z-index: -1;
}
.resources-more .rm-box {
  padding: 100px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  position: relative;
}
.btn-more.v-btn {
  font-size: 22px;
  background: #001b3e;
  padding: 18px 30px;
  border-radius: 16px;
  border: 2px solid #0c6fb7;
  position: relative;
  display: flex;
  align-items: center;
  text-transform: uppercase;
}
.btn-more.v-btn:hover {
  background: var(--sky-blue);
}
.icon-arrow {
  display: inline-block;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: url('data:image/svg+xml,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="30.0063" height="30.0063" rx="15.0032" fill="white"/><path d="M17.8065 12.852H5V16.4978H17.8065L12.8521 21.5456L15.6565 24.0695L24.9108 14.7218L15.6565 5L12.8521 7.43035L17.8065 12.852Z" fill="%235C9CDC"/></svg>');
  transition:
    left 0.4s ease,
    transform 0.4s ease;
  margin-left: 22px;
  background-repeat: no-repeat;
  background-size: contain;
}
.icon-pdf {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: url('data:image/svg+xml,<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_1_45)"><path d="M18.7113 5.65718C18.7113 6.13691 19.1016 6.52722 19.5813 6.52722H22.8449C23.5857 6.52722 24.2791 6.73405 24.8706 7.09292C24.6376 6.54073 24.2981 6.03322 23.8616 5.5967L19.6418 1.37693C19.2055 0.94052 18.6981 0.601148 18.1461 0.368164C18.5046 0.959359 18.7113 1.65237 18.7113 2.39281L18.7113 5.65718Z" fill="white"/><path d="M17.1878 3.42697V2.39266C17.1878 1.06905 16.1166 0 14.7952 0H5.71122C4.37679 0 3.31775 1.08291 3.31775 2.39347V3.26351H16.3177C16.625 3.26356 16.9182 3.32186 17.1878 3.42697Z" fill="white"/><path d="M22.8448 8.05066H19.5813C19.2744 8.05066 18.9811 7.99196 18.7113 7.88623V13.0002C18.7113 13.8985 18.2176 14.6792 17.4874 15.0887V16.7258H19.1734C19.4815 16.7258 19.7592 16.9113 19.8771 17.196C19.995 17.4806 19.9298 17.8083 19.712 18.0261L14.8167 22.9214C14.533 23.2165 14.023 23.2165 13.7394 22.9214L8.84412 18.0261C8.62627 17.8083 8.56112 17.4807 8.67898 17.196C8.79689 16.9114 9.07467 16.7258 9.38271 16.7258H11.0686V15.3937H3.31775V23.6067C3.31775 24.9411 4.40066 26.0002 5.71122 26.0002H22.8448C24.1823 26.0002 25.2383 24.9139 25.2383 23.6067V10.4442C25.2383 9.12438 24.1646 8.05066 22.8448 8.05066Z" fill="white"/><path d="M3.61731 7.65283V9.78041C4.85114 9.56774 4.84571 7.86525 3.61731 7.65283Z" fill="white"/><path d="M8.51257 7.67969V10.9769C10.278 10.574 10.2768 8.08193 8.51257 7.67969Z" fill="white"/><path d="M17.1878 13.0002V5.6572C17.1878 5.17746 16.7975 4.78711 16.3177 4.78711H1.6318C1.15202 4.78716 0.761719 5.17746 0.761719 5.6572V13.0002C0.761719 13.4799 1.15202 13.8702 1.63175 13.8702H16.3177C16.7975 13.8702 17.1878 13.4799 17.1878 13.0002ZM3.6173 11.3101V11.7764C3.57982 12.786 2.13098 12.7852 2.09386 11.7764V6.88107C2.09386 6.4604 2.43491 6.11936 2.85558 6.11936H3.46831C6.82373 6.22544 6.93814 11.0235 3.6173 11.3101ZM8.15887 12.5381H7.75095C7.33027 12.5381 6.98923 12.197 6.98923 11.7763V6.88102C6.98923 6.46035 7.33027 6.1193 7.75095 6.1193H8.15887C12.4118 6.28114 12.4086 12.3777 8.15887 12.5381ZM15.0939 7.64274H13.8159V8.97489H14.278C15.2875 9.01236 15.2868 10.4612 14.278 10.4983H13.8159V11.7763C13.7784 12.7859 12.3295 12.7852 12.2924 11.7763V6.88102C12.2924 6.46035 12.6335 6.1193 13.0541 6.1193H15.0939C16.1034 6.15678 16.1027 7.60562 15.0939 7.64274Z" fill="white"/><path d="M12.5921 15.3936V17.4874C12.5921 17.908 12.2511 18.2491 11.8304 18.2491H11.2217L14.2781 21.3055L17.3344 18.2491H16.7257C16.305 18.2491 15.964 17.908 15.964 17.4874V15.3936H12.5921Z" fill="white"/></g><defs><clipPath id="clip0_1_45"><rect width="26" height="26" fill="white"/></clipPath></defs></svg>');
  transition:
    left 0.4s ease,
    transform 0.4s ease;
  margin-left: 22px;
  background-repeat: no-repeat;
  background-size: contain;
}
.btn-pdf {
  display: flex;
  align-items: center;
  padding: 10px 16px;
}
.writing-tabs {
  width: 100%;
  overflow: hidden;
  padding-block: 30px;
  max-width: calc(2880px - 1296px);
  margin-left: auto;
  padding-left: 10px;
}

.writing-tabs-nav {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-bottom: 40px;
}

.writing-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: "Merriweather";
  font-size: 22px;
  line-height: normal;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  color: var(--dark-blue);
}

.writing-tab.is-active,
.writing-tab:hover {
  /* font-weight: 700; */
  color: var(--sky-blue);
  background-color: transparent !important;
}

.writing-slider {
  overflow: visible;
}
.writing-slider img {
  width: 300px;
  height: 400px;
  object-fit: cover;
  border: 1px solid #98c5ea;
  border-radius: 5px;
  cursor: pointer;
}
.writing-slide {
  height: auto;
}

.writing-card {
  border: 1px solid #9cc9ed;
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: 0.72;
}

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

.writing-slider-spacer {
  pointer-events: none;
  visibility: hidden;
}

.writing-slider .swiper-scrollbar {
  position: relative;
  left: auto;
  bottom: auto;
  width: 100%;
  margin: 30px 0;
  height: 2px;
  background: #98c5ea;
}

.writing-slider .swiper-scrollbar .swiper-scrollbar-drag {
  height: 10px;
  top: -4px;
  border-radius: 0;
  background: #98c5ea;
}
.all-button {
  display: flex;
  align-items: center;
  justify-content: center;
     margin-top: 25px;
    margin-bottom: 60px;
}

.vesol-video {
  position: relative;
  width: 100%;
}

.vesol-video video {
  display: block;
  width: 100%;
  height: auto;
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 72px;
  height: 72px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #000;

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

  cursor: pointer;
  font-size: 28px;
  line-height: 1;
}

.video-play-btn span {
  margin-left: 4px;
}

.video-play-btn:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 4px;
}

.video-play-btn.is-hidden {
  display: none;
}
.video-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-top: 35px;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  border-radius: 5px;
}
.c-title-button p {
  color: #111;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}
.c-title-button p strong{
  font-weight: bold;
}
.c-img img {
  height: 145px;
  object-fit: contain;
}
.voice-box .c-title-button p {
  font-size: 25px;
  font-weight: 500;
  color: #003057;
  line-height: normal;
}
.voice-box .c-title-button p:last-child {
  margin-bottom: 0;
}

/* ---------- Fullscreen lightbox modal ---------- */
#lightboxModal .modal-dialog {
  max-width: 100%;
  margin: 0;
  height: 100%;
}
#lightboxModal .modal-content {
  background: rgba(0, 0, 0, 0.92);
  border: 0;
  border-radius: 0;
  height: 100%;
}
#lightboxModal .modal-body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  background-color: #fff;
}
#lightboxImg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  transition: opacity 0.25s ease;
  padding-bottom: 60px;
  padding-top: 20px;
}
#lightboxImg.is-loading {
  opacity: 0;
}

.lb-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  filter: unset;
  height: 35px;
  width: 35px;
  opacity: 1;
}
.btn-close:hover,
.btn-close:focus,
.btn-close:focus-visible {
  opacity: 1;
  background-color: #c3c3c3;
}
.lb-counter {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #000;
  font-size: 0.95rem;
  z-index: 5;
}
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dark-blue);
  color: #fff;
  cursor: pointer;
  z-index: 5;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Arrow */
.lb-nav::before {
  content: "";
  width: 11px;
  height: 11px;

  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;

  display: block;
}

/* Previous arrow */
.lb-prev {
  left: 16px;
}

.lb-prev::before {
  transform: rotate(-135deg);
  margin-left: 5px;
}

/* Next arrow */
.lb-next {
  right: 16px;
}

.lb-next::before {
  transform: rotate(45deg);
  margin-right: 5px;
}

/* Hover */
.lb-nav:hover {
  background: var(--sky-blue);
}

/* Keyboard focus - WCAG visible focus */
.lb-nav:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  background: var(--sky-blue);
}

/* Remove default outline only when not keyboard focused */
.lb-nav:focus:not(:focus-visible) {
  outline: none;
}

/* Disabled state */
.lb-nav:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.lb-caption {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  color: #000;
  padding: 0 60px;
  font-size: 0.95rem;
}
.modal-backdrop.show {
  z-index: 999999;
}
#stackVideoModal{
   z-index: 9999999;
}
#lightboxModal.show {
  z-index: 9999999;
  width: 60%;
  height: 75vh;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.c-title-button{
  margin-bottom: 50px;
}
.resource-card .resource-content{
	display: flex;
    flex-direction: column;
    align-items: center;
}
@media (max-width: 576px) {
  .lb-nav {
    width: 40px;
    height: 40px;
  }
  .lb-prev {
    left: 6px;
  }
  .lb-next {
    right: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #lightboxImg {
    transition: none;
  }
}
/* Large desktop */
@media (min-width: 1400px) {
  .writing-tabs {
    max-width: calc((100vw - 1320px) / 2 + 1296px);
  }
}

/* Desktop */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .writing-tabs {
    max-width: calc((100vw - 1140px) / 2 + 1116px);
  }
}

/* Laptop / tablet landscape */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .writing-tabs {
    max-width: calc((100vw - 960px) / 2 + 936px);
  }

}
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
    #stackVideoModal .modal-dialog{
		max-width: 90% !important;
	}
}
/* Tablet */
@media (min-width: 768px) and (max-width: 991.98px) {
  .writing-tabs {
    max-width: calc((100vw - 720px) / 2 + 696px);
  }	
}

/* desktop */
@media (max-width: 1499.98px) {
	.ipad-video-wrap{
		    padding-top: 55%;
	}
  .hero-section .banner-content {
    padding: 80px 15px 80px 50px;
  }
  .voice-box .c-title-button p {
    font-size: 20px;
  }
  .writing-slider img {
    height: 300px;
  }
  .strategies-title p {
    max-width: 840px;
  }
  .strategies-section .s-title p {
    font-size: 20px;
    line-height: 30px;
  }
  .strategies-section .strategies-title .s-title {
    gap: 10px;
  }
  .box-title .text-xl,
  .box-title .sky-blue {
    margin-bottom: 20px;
  }
  .strategies-section .s-copy-body p {
    font-size: 20px;
    line-height: 30px;
  }
}
@media (max-width: 1299.98px) {
  .resource-card .rimage-wrapper img {
    min-height: 260px;
  }
}
@media (max-width: 1199.98px) {
  #lightboxModal.show {
    width: 80%;
  }
  .ipad-video-wrap {
    border-radius: 25px;
  }
  .hero-section .banner-img {
    height: 100px;
    width: 100px;
  }
  .hero-section .banner-content {
    padding: 60px 15px 50px 0px;
  }
  .b-content p {
    margin-top: 10px;
  }
  .box-title-button {
    margin-bottom: 30px;
  }
  .box-title-button {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    justify-content: space-between;
    flex-direction: column;
    gap: 15px;
  }
  .resource-card .rimage-wrapper img {
    min-height: 220px;
  }
  .voice-box,
  .celebrating-box,
  .your-toolkit,
  .video-section {
    padding: 40px 15px;
  }
  .hero-section .banner-content {
    padding: 60px 15px 60px 50px;
  }
  .resources-more .rm-box {
    padding: 60px 15px;
  }
  .strategies-section {
    padding-top: 40px;
  }
  .writing-slider img {
    height: 410px;
  }
  .writing-tabs-nav {
    gap: 20px;
}
.writing-tab {
    font-size: 20px;
}
}
/* Mobile */
@media (max-width: 991.98px) {
	.resource-content .text-xs {
    min-height: 60px;
}
  .hero-section .banner-content{
        flex-direction: column;
  }
  .hero-section .banner-img img {
    height: auto;
}
  #lightboxModal.show {
    width: 90%;
  }
  .celebrating-box {
    padding-block: 40px;
    position: relative;
  }
  .c-title-button p {
    font-size: 18px;
  }
  .voice-box .c-img {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 20px;
  }
  .c-img img {
    height: 75px;
    object-fit: contain;
  }
  .resources-more .rm-box {
    padding: 50px 15px;
  }
  .btn-more.v-btn {
    font-size: 20px;
    padding: 16px 25px;
  }
  .hero-section img {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    object-fit: contain;
  }
  .resource-card .resource-content .v-btn {
    margin-top: 5px;
  }
  .hero-section .banner-content {
    gap: 20px;
  }
  .hero-section .col-xl-4 img {
    height: 300px;
  }
  .video-section {
    position: relative;
    padding-block: 40px;
  }
  .hero-section .banner-content {
    padding: 40px 15px 20px 0px;
  }
  .resource-card {
    margin-bottom: 25px;
  }
  .your-toolkit {
    padding: 40px 15px;
  }

  .strategies-section .strategies-title {
    flex-direction: column;
  }
  .strategies-title .text-xl {
    margin-bottom: 20px;
  }
  .writing-tabs-nav {
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }
  .writing-tab {
    font-size: 18px;
  }
  .writing-slider img {
    height: auto;
  }
  .your-toolkit .row .col-md-6:last-child .resource-card {
    margin-bottom: 0;
  }
  .voice-box {
    padding: 40px 15px;
  }
 .all-button {
    margin-top: 0px;
    margin-bottom: 50px;
}
  .resources-more .rm-box {
    gap: 20px;
  }
}
@media (max-width: 767.98px) {
  .writing-tabs {
    max-width: 100%;
    padding-inline: 15px;
  }
  .hero-section .banner-content {
    flex-direction: column;
  }
  .hero-section .banner-img img {
    height: auto;
  }

  .ipad-video-wrap {
    border-radius: 10px;
  }
  .ipad-video-wrap {
    width: calc(100% - 0px);
    height: calc(100% - 20px);
    left: 0px;
  }
  .test {
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    left: 0px;
  }
}
@media (max-width: 480px) {
  .ipad-video-wrap {
    position: relative;
    width: calc(100% - 30px);
    height: calc(100% - 20px);
    left: 15px;
  }
  .test {
    width: calc(100% - 22px);
    height: calc(100% - 7px);
    left: 10px;
  }
.resource-content .text-xs {
    min-height: auto;
}
}