/* =========================================================
   RESET & ROOT
   ========================================================= */

:root {
  --page-height: calc(var(--dvh, 1dvh) * 100);
}

html,
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background-color: rgb(44, 62, 80);
  font-family: "Avenir Next", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  -webkit-overflow-scrolling: touch;
}

html {
  position: relative;
  overflow-y: auto;
}

body {
  display: flex;
  flex-direction: column;
}

/* =========================================================
   SNAP-SCROLL LAYOUT
   ========================================================= */
.pager {
  padding: 0;
  /* scroll-snap-type: y mandatory; */
}

.page {
  height: var(--page-height);
  display: flex;
  justify-content: center;
  align-items: center;
  /* scroll-snap-align: center;  */
}

/* =========================================================
   HORIZONTAL SLIDER (left/right swipes)
   ========================================================= */
.slider {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.slide {
  scroll-snap-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 11px;
}

.divider {
  border: none;
  border-top: 2px solid rgba(2, 217, 2, 0.461);
  width: 60%;
  margin: 1rem auto;
  margin-top: 7px;
}


.split-slide-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  /* max-width: 800px; */
  justify-content: center;
}

.top-section{
  
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 1rem 0; */
}
.bottom-section {
  
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 1rem 0; */
}

.top-section,
.bottom-section {
  /* flex: 1; */
  display: flex;
  /* align-items: center; */
  /* justify-content: center; */
  /* padding: 1rem 0; */
}

.top-section p,
.bottom-section p {
  font-size: 1.1rem;
  line-height: 1.6;
  text-align: justify;
}

.f1{flex:1;}
.f2{flex:2;}
.f3{flex:3;}
.f4{flex:4;}
.f5{flex:5;}
.f6{flex:6;}
.f7{flex:7;}
.f8{flex:8;}
.f9{flex:9;}
.f10{flex:10;}


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
  .slide {
    flex: none;
    font-size: 1.5rem;
  }
}