:root {
  --clr-primary: #1b488c;
  --clr-neutral: #f3fdff;
  --clr-accent: #91d2ec;
  --clr-sections: linear-gradient(to top right, rgb(27, 72, 140), rgb(60, 109, 183)30%);

  --font-family-primary: "Poppins", sans-serif;
  font-family: "Poppins", sans-serif;

  --font-family-body: var(--font-family-primary);
  --font-family-heading: var(--font-family-primary);

  --font-weight-regular: 400;
  --font-weight-demi-bold: 500;
  --font-weight-bold: 700;
  --edge-size-headers: 0.3em;
  --edge-size-articles: 5em;
}



/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}

/*body > .skiptranslate {
  display: none;
}*/

#google_translate_element {
padding-top: 15px;
max-width: 200px;
}

/* Prevent font size inflation */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
scroll-behavior: smooth;
}

/* Remove default margin in favour of better control in authored CSS */
* {
  margin: 0;
  padding: 0;
  font: inherit;

}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}

html,
body {
  height: 100%;
  background-color: var(--clr-neutral);
}

/* Set core body defaults */
body {
line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
color: currentColor;
}

/* Make images easier to work with */
img,
picture,
svg {
max-width: 100%;
display: block;
}


/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
scroll-margin-block: 5ex;
}

h2 {
font-size: 1.2rem;
}


/* -----------------------White Section Title------------------------- */

.whiteSection-title h2 {
position: relative;
font-weight: var(--font-weight-bold);
color: var(--clr-primary);
padding: 15px 25px;
z-index: 3;
background-color: var(--clr-neutral);

}

.whiteSection-title p {
position: relative;
text-align: center;
font-weight: var(--font-weight-demi-bold);
color: var(--clr-primary);
padding: 0 0 20px 0;
z-index: 3;
font-size: 0.8rem;
background-color: var(--clr-neutral);

}

.whiteSection-title {
margin-top: 85px;
display: flex;
align-items: center;
justify-content: center;

}

.whiteSection-title .container {
/* margin-top: 85px; */
display: flex;
align-items: center;
justify-content: center;

}

.whiteSection-title .container {
position: relative;
min-width: fit-content;
z-index: 2;
background-color: var(--clr-neutral);
}


.whiteSection-title .container::after {
position: absolute;
content: '';
width: 80px;
height: 30px;
bottom: -8px;
left: -8px;
z-index: -1;
background-color: var(--clr-accent);
clip-path: polygon(0 0, 40% 45%, 90% 65%, 100% 100%, var(--edge-size-headers) 100%, 0 calc(100% - var(--edge-size-headers)));
}

.whiteSection-title .container::before {
position: absolute;
content: '';
width: 80px;
height: 30px;
top: -8px;
right: -8px;
z-index: -1;
background-color: var(--clr-primary);
clip-path: polygon(0 0, calc(100% - var(--edge-size-headers)) 0, 100% var(--edge-size-headers), 100% 100%, 85% 80%, 20% 60%);
}



/*--------------------------------Blue Section Title------------------------*/
.blueSection-title {
/* margin: 85px auto; */
display: flex;
align-items: center;
justify-content: center;

}

.blueSection-title h2 {
position: relative;
font-weight: var(--font-weight-bold);
padding: 15px 25px;
z-index: 3;
background-image: linear-gradient(to top left, rgb(27, 72, 140), rgb(60, 109, 183)60%);
border-bottom-right-radius: 0.2em;
color: var(--clr-neutral);
text-transform: capitalize;

}

.blueSection-title .container {
position: relative;
z-index: 2;
min-width: fit-content;

}



.blueSection-title .container::after {
position: absolute;
content: '';
width: 80px;
height: 30px;
bottom: -6px;
left: -6px;
z-index: -1;
background-color: var(--clr-neutral);
clip-path: polygon(0 0, 40% 45%, 90% 65%, 100% 100%, 0.3em 100%, 0 calc(100% - 0.3em));
}

.blueSection-title .container::before {
position: absolute;
content: '';
width: 80px;
height: 30px;
top: -6px;
right: -6px;
z-index: -1;
background-color: var(--clr-accent);
clip-path: polygon(0 0, calc(100% - 0.3em) 0, 100% 0.3em, 100% 100%, 85% 80%, 20% 60%);
}




/* -----------------------header------------------------- */
.header {
background: var(--clr-neutral);
box-shadow: 0.5px 0.5px 4px rgba(60, 109, 183, 0.233);
position: fixed;
width: 100%;
height: 68px;
z-index: 4;
}

.navbar {
background-color: var(--clr-neutral);
height: 68px;
}

.navbar img {
max-width: 15em;
}

.header #logo {
padding-top: 10px;
margin-left: 20px;
float: left;
}



.header a {
color: var(--clr-primary);
font-weight: var(--font-weight-bold);
font-size: 1em;
}

.header ul {
margin: 0;
padding: 0;
list-style: none;
background-color: var(--clr-neutral);
position: relative;
z-index: 20;

}

.nav-item {
overflow: hidden;
}

.header ul a {
display: block;
padding: 5px 5px;
text-decoration: none;

}



#border-header:hover {
background-color: var(--clr-neutral);
cursor: default;
pointer-events: none;
}


.header .menu {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
background-color: var(--clr-neutral);



}

.header .menu-icon {
padding: 28px 20px;
position: relative;
float: right;
cursor: pointer;

}

.header .menu-icon .nav-icon {
background: var(--clr-primary);
display: block;
height: 8px;
width: 50px;
position: relative;
transition: background .2s ease-out;
}

.header .menu-icon .nav-icon::before {
background: var(--clr-primary);
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: 15px;
}

.header .menu-icon .nav-icon::after {
background: var(--clr-primary);
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: -15px;
}

.header .menu-btn {
display: none;
}

.header .menu-btn:checked~.menu {
max-height: 500px;

}


.header .menu-btn:checked~.menu-icon .nav-icon {
background: transparent;
}

.header .menu-btn:checked~.menu-icon .nav-icon::before {
transform: rotate(-45deg);
top: 0;
}

.header .menu-btn:checked~.menu-icon .nav-icon::after {
transform: rotate(45deg);
top: 0;
}

.header .menu-btn:checked~#overlay {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}

/*-----------------------------------------------Banner section----------------------------------------------------*/



/* Animation keyframes */
@keyframes playVideo {
  0%   { opacity: 0; z-index: 0; }
  1%   { opacity: 1; z-index: 1; }
  24%  { opacity: 1; z-index: 1; }
  25%  { opacity: 0; z-index: 0; }
  100% { opacity: 0; z-index: 0; }
}

.bg-video:nth-child(1) {
  animation: playVideo 15s infinite;
  animation-delay: 0s;
}

.bg-video:nth-child(2) {
  animation: playVideo 15s infinite;
  animation-delay: 5s;
}

.bg-video:nth-child(3) {
  animation: playVideo 15s infinite;
  animation-delay: 10s;
}


.video-container {
  padding-top: 50px;
  position: relative;
  width: 100%;
  height: 100vh;
  border: 5px solid var(--clr-primary);
  overflow: hidden;
}
  
.bg-video {
  position: absolute;
  width: 100%;
  height: auto;
  object-fit: cover;
  top: 60px;
  opacity: 0;
  z-index: 0;
  transition: opacity 3s ease-out-in;
}

.video-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Adjust opacity (0.5 = 50% black tint) */
  z-index: 1;
}

.slogan-wrapper {
  display: flex;
  position: relative;
  justify-content: space-between;
  top: 50px;
  z-index: 2;
}


.slogan {
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  color: var(--clr-neutral);
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
}

.slogan span {
  color: var(--clr-accent);
}


.slogan img {
  width: 150px;
  max-width: none;
  padding: 1em 0;
} 

#left {
clip-path: polygon(0 0, calc(100% - 1em) 0%, 100% 1em, 100% 100%, 1em 100%, 0% calc(100% - 1em));

}

#right {
clip-path: polygon(1em 0, 100% 0, 100% calc(100% - 1em), calc(100% - 1em) 100%, 0 100%, 0 1em);

}

/*---------------------------------------Info--------------------------------------------*/
.info {
padding-top: 20px;
background-color: var(--clr-neutral);
}

.info-wrapper {
filter: drop-shadow(1px 1px 3px grey);
margin: auto;
}

.info-container {
margin: 1.5em 0.5em;
background-color: var(--clr-neutral);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
clip-path: polygon(1.5em 0, 100% 0, 100% calc(100% - 1.5em), calc(100% - 1.5em) 100%, 0 100%, 0 1.5em);
}


.text-container {
overflow: hidden;

}

.diagram-container {
display: flex;
align-items: center;
justify-content: center;
}

.info-container p {
padding: 20px;
}

.info-container span {
font-weight: var(--font-weight-bold);
color: var(--clr-primary);
}

#diagram {
width: 100%;
padding: 0.3em;
}
/*------------------------------------Testimonials---------------------------------------*/
.testimonials-sec .container {
max-width: 1170px;

}

.testimonials-sec {
padding: 85px 0;
background-image: var(--clr-sections);

}

#slider {
margin: 0 auto;
/* width: 200px; */
max-width: 100%;
text-align: center;
}

.slider input[type="radio"] {
display:none;
}

#slider label {
cursor: pointer;
text-decoration: none;
}

#slides {
padding: 30px;
position: relative;
z-index: 1;
}

#overflow {
width: 100%;
overflow: hidden;
}

#slide1:checked ~ #slides .inner {
margin-left: 0;
}

#slide2:checked ~ #slides .inner {
margin-left: -100%;
}

#slide3:checked ~ #slides .inner {
margin-left: -200%;
}

#slide4:checked ~ #slides .inner {
margin-left: -300%;
}

#slide5:checked ~ #slides .inner {
margin-left: -400%;
}

#slide6:checked ~ #slides .inner {
margin-left: -500%;
}

#slides .inner {
transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
width: 900%;
line-height: 1;
height: 20em;

}

#slides .slide {
width: 10%;
max-width: 350px;
float: left;
display: block;
height:85%;
color: black;
background-color: var(--clr-neutral);
clip-path: polygon(0 0, calc(100% - 2em) 0%, 100% 2em, 100% 100%, 2em 100%, 0% calc(100% - 2em));
scroll-snap-align: center;
margin: 0 5px
}


#slides .slide_1 {
background-color: var(--clr-neutral);
}

#slides .slide_2 {
background-color: var(--clr-neutral);
}

#slides .slide_3 {
background-color: var(--clr-neutral);
}

#slides .slide_4 {
background-color: var(--clr-neutral);
}

#slides .slide_5 {
background-color: var(--clr-neutral);
}

/* #slides .slide_6 {
background-color: var(--clr-neutral);
} */

.slide-content {
padding: 10px;
display: grid;
grid-template-rows: 2em 2em 4em;
grid-template-columns: 1fr 2fr;
gap: 1em;

}
.picture {
grid-row: 1 / 3;
grid-column: 1 / 1;
background-color: var(--clr-accent);
border-radius: 10%;
max-width: 150px;
background-image: url(/images/profile.png);
background-repeat: no-repeat;
background-size: 5em;
background-position: center;
}
.name {
grid-row: 1 / 1;
grid-column: 2 / 3;
font-weight: var(--font-weight-bold);


}

.job {
grid-row: 2 / 2;
grid-column: 2 / 3;
font-size: 0.7rem;
font-style: italic;

}

.par {
grid-row: 3 / 3;
grid-column: 1 / 3;
font-size: 0.73rem;
font-weight: var(--font-weight-demi-bold);
}

#controls {
margin: -150px 0 0 0;
width: 100%;
height: 60px;
z-index: 3;
position: relative;
}

#controls label {
transition: opacity 0.2s ease-out;
display: none;
width: 50px;
height: 50px;
opacity: .4;
}

#controls label:hover {
opacity: 1;

}

.arrow {
margin: 1.5em auto;
border: solid var(--clr-neutral);
border-width: 0 3px 3px 0;
display: inline-block;
padding: 12px;
position: absolute;
left: 50%;
transform: translateX(-50%) rotate(-45deg);
}

.arrow:nth-child(2) {
animation: arrow1 1.5s ease-in-out infinite;
}

@keyframes arrow1 {
100% {
  opacity: 0;
  left: 60%;
}
}


#overflow {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  scroll-padding: 30px;
}


/*------------------------------------Calculator--------------------------*/

.calculator .calc-container {
display: flex;
justify-content: center;
overflow: hidden;
margin: 5% 0;
}

.whiteSection-title h2 {
position: relative;
font-weight: var(--font-weight-bold);
color: var(--clr-primary);
padding: 25px 15px 10px 15px;
z-index: 3;
background-color: var(--clr-neutral);

}

.calculator .whiteSection-title .container {
display: flex;
justify-content: center;
flex-direction: column;
}
.calculator .wrapper {
width: min(900px, 100% -3rem);
margin-inline: auto;
}

.linux-table {
border-left: 2px solid var(--clr-primary);
}
.windows-table {
border-right: 2px solid var(--clr-primary);
}
#mcalcen h2{
text-align: center;
justify-content: center;
color: var(--clr-primary);

}
#mcalcen hr {
width: 30%;
background-color: var(--clr-primary);
height: 2px;
margin-top: 1.5%;
justify-content: center;
margin: 26px auto;
}
tr,
td {
color: var(--clr-primary);
font-family: "Poppins", Verdana, Tahoma, sans-serif;

}
tr hr {
height: 2px;
background-color: var(--clr-primary);
}
caption {
align-items: center;
font-family: "Poppins", Verdana, Tahoma, sans-serif;
font-weight: bolder;
font-size: larger;
}

.calculator input {
background: var(--clr-neutral);
text-align: center;
}

/*------------------------------BMS-----------------------------*/

.bms {
padding: 85px 0;
background-image: var(--clr-sections);
}

.bms .section-header {
margin-top: 85px;
display: flex;
align-items: center;
justify-content: center;

}

.bms h2 {
position: relative;
font-weight: var(--font-weight-bold);
padding: 15px 25px;
z-index: 3;
background-image: linear-gradient(to top left, rgb(27, 72, 140), rgb(60, 109, 183)60%);
border-bottom-right-radius: 0.2em;
color: var(--clr-neutral);
text-transform: capitalize;

}

.bms .section-header .container {
position: relative;
z-index: 2;
min-width: fit-content;

}

.bms-container h3 {
text-align: center;
font-weight: var(--font-weight-bold);
color: var(--clr-neutral);
font-size: 1em;
margin: 50px auto 20px auto;
}

.bms-container .col {
/* float: left; */
width: 80%;
padding: 8px;
box-sizing: border-box;
margin: auto;
}

.price-box .box-header {
background-color: var(--clr-primary);
color: var(--clr-neutral);
}

.price-box {
background: var(--clr-neutral);
color: var(--clr-primary);
list-style-type: none;
/* border: 1px solid var(--clr-primary); */
margin: 0;
padding: 0;
transition: 0.3s;
clip-path: polygon(0 0, calc(100% - 2em) 0%, 100% 2em, 100% 100%, 2.5em 100%, 0% calc(100% - 2.5em));

}

.price-box li {
padding: 20px;
border-bottom: 1px solid var(--clr-primary);
text-align: center;
}

.price-box span {
font-weight: var(--font-weight-bold);
}

/*--------------------------------Physics-----------------------------*/

.dropdown-content {
display:none;
}

/*------------------------------FAQ-----------------------------*/

.faq {
background-image: var(--clr-neutral);
}

.faq .section-header {
margin-top: 85px;
display: flex;
align-items: center;
justify-content: center;

}

.accordion {
max-width: 1400px;
width: 80%;
box-shadow: 0 0 10px var(--clr-primary);
border-radius: 5px;
overflow: hidden;
background: var(--clr-neutral);
margin: 85px auto;

}

.question,
.answer {
padding: 14px 20px;

}

.question {
display: block;
color: var(--clr-primary);
font-weight: var(--font-weight-bold);
cursor: pointer;
position: relative;
transition: background 0.1s;
box-shadow: 0 0 10px var(--clr-primary);
}

.question:hover {
background: rgba(0, 0, 0, 0.1);

}

.question::after {
content:"^";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
height: 6;
width: 12px;
background-size: contain;
transition: transform 0.4s;
}

.answer {
background: var(--clr-neutral);
color: var(--clr-primary);
line-height: 1.6;
font-size: 0.85em;
display: none;
}

.accordion_input {
display:none;
}

.accordion_input:checked ~ .answer {
display: block;
}

.accordion_input:checked ~ .question::after {
transform: translateY(-50%) rotate(0.5turn);
}


/*------------------------Footer---------------------------------*/

.footer {
background: var(--clr-sections);
width: 100%;
margin: 0;
padding: 70px 0;
z-index: -2;
}

.footer ul,
.footer li {
list-style: none;
}

.footer .container {
width: 100%;
max-width: 1400px;
}

.footer-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;

}

.footer-col {
width: 55%;
margin: 0.8em auto;
z-index: 0;

}

.footer-col h4 {
margin: auto;
padding: 0.3em 0.5em;
/* font-size: 1.2rem; */
color: var(--clr-neutral);
font-weight: var(--font-weight-demi-bold);
text-transform: capitalize;
margin-bottom: 30px;
position: relative;
background: var(--clr-sections);


}

.footer-col h4::before {
content: '';
position: absolute;
left: -4px;
bottom: -4px;
background-color: var(--clr-accent);
height: 25px;
width: 65px;
box-sizing: border-box;
clip-path: polygon(0 0, 40% 45%, 90% 65%, 100% 100%, 0.2em 100%, 0 calc(100% - 0.2em));
z-index: -1;
}

.footer-col ul li:not(:last-child) {
margin-bottom: 10px;
}

.footer-col ul li a {
font-size: 0.8rem;
text-transform: capitalize;
color: var(--clr-neutral);
font-weight: var(--font-weight-demi-bold);
display: block;
transition: all 0.s ease;
text-decoration: none;
}

.footer-col span {
font-size: 0.8rem;
color: var(--clr-neutral);
font-weight: var(--font-weight-demi-bold);
display: block;
}



.footer-col .social-links a {
display: inline-block;
height: 40px;
width: 40px;
background: var(--clr-primary);
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: var(--clr-neutral);
transition: all 0.5s ease;

}



.footer-col img {
width: 60%;
}


/*----------------------------------------- 48em = 768px @ 16pt font ----------------------------------------- */

@media (min-width: 1280px) {

.goog-te-combo {
  width: 120px;
  height: 30px;
  font-size: 0.7rem !important
}

h2 {
  font-size: 3rem;
}

.header {
  height: 68px;
  background: var(--clr-neutral);
}

.header a {
  font-size: 1.3rem;
}

.header ul a {
  padding: 20px 10px 20px 10px;
}

.header li {
  float: left;
}
.header .menu {
  height: 68px;
  display: block;
  clear: none;
  float: right;
  max-height: 68px;
}

.header .menu-icon {
  display: none;
}
.header #logo {
  margin-left: 60px;
  margin-top: 5px;
  width: 10%;
}
#border-header {
  width: 0px;
  height: 60px;
  padding: 5px;
  margin-top: 5px;
  border-left: 2px solid var(--clr-primary);
}

.navbar img {
  float: left;

}

/*----------------------------------------- Banner----------------------------------------- */

.banner {
  max-width: 1400px;
}

.video-container {
  overflow: hidden;
  position: relative;
  width: 100vw;
  height: 100vh;
}

.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  opacity: 0;
  z-index: 0;
  transition: opacity 1s ease-in-out;
}

/* Slogan wrapper */
.slogan-wrapper {
  /* position: absolute; */
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  justify-content:space-between;
  gap: 350px;
  z-index: 2;
  pointer-events: none;
  width: auto;
}

.slogan {
  margin: auto;
  color: var(--clr-neutral);
  text-align: center;
  padding: 0.5em 1em;
  background: rgba(0, 0, 0, 0.6);
  font-size: 1.5rem;
  font-weight: var(--font-weight-demi-bold);
}

.slogan img {
  width: 300px;
}


/*-----------------------------------------Info-----------------------------------------*/

.info-container {
  max-width: 1400px;
  margin: 3em auto;
  flex-direction: row;

}

.text-container {
  padding: 1em;
  margin: 50px 0.5em;

}

.text-container a {
  color: var(--clr-primary);
}

.text-container p {
  font-size: 1.2rem;
}

.diagram-container {
  min-width: 20em;
  margin: 0.5em 0.5em;
}

/*-------------------------------------Testimonials-------------------------------------*/

.testimonials {
  max-width: 1400px;
  margin: auto;
  }

  #slides .inner {
  transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
  width: 300%;
  line-height: 1.5;
  height: 20em;
  display:flex;
  justify-content: start;
  }

  #slides .slide {
  width: 25%;
  max-width: 25%;
  float: left;
  height:100%;
  color: black;
  background-color: var(--clr-neutral);
  clip-path: polygon(0 0, calc(100% - 2em) 0%, 100% 2em, 100% 100%, 2.5em 100%, 0% calc(100% - 2.5em));
  margin: 10px 10px;
  padding-top: 10px;
  }

.slide-content {
/* padding: 10px; */
display: grid;
grid-template-rows: 1em 3.5em 5em;
grid-template-columns: 1fr 2fr;
gap: 1em;

}
.picture {
grid-row: 1 / 3;
grid-column: 1 / 1;
background-color: var(--clr-accent);
border-radius: 10%;
max-width: 150px;
background-image: url(/images/profile.png);
background-repeat: no-repeat;
background-size: 5em;
background-position: center;
}
.name {
grid-row: 1 / 1;
grid-column: 2 / 3;
font-weight: var(--font-weight-bold);
font-size: 1.5rem;


}

.job {
grid-row: 2 / 2;
grid-column: 2 / 3;
font-size: 1rem;
font-style: italic;
text-align: start;

}

.par {
grid-row: 3 / 3;
grid-column: 1 / 3;
font-size: 1rem;
font-weight: var(--font-weight-demi-bold);
line-height: 1.3;
}


#slide6 {
display: none;
}

#bullets {
margin: 100px 0 0;
text-align: center;
}

#bullets label{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 100%;
background-color: var(--clr-accent);
margin: 0 10px;
}


#bullets label:hover {
cursor: pointer;
border: 2px solid var(--clr-neutral);
}

#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3) {
background-image: url(/images/right-arrow.png) no-repeat;
background-size: 50px;
float:right;
margin: -50px -50px 0 0;
display: block;

}

#slide2:checked ~ #controls label:nth-last-child(6),
#slide3:checked ~ #controls label:nth-last-child(5) {
background: url(/images/left-arrow.png) no-repeat;
background-size: 50px;
float: left;
margin: -50px 0 0 -50px;
display: block;
}

#slide1:not(checked) ~ #controls label:nth-child(2) {
background: url(/images/right-arrow.png);
background-size: 50px;
float: right;
margin: -50px -50px 0 0;
display: block;
}

#slide1:checked ~ #slides .inner {
margin-left: 0;
}

#slide2:checked ~ #slides .inner {
margin-left: -100%;
}

#slide3:checked ~ #slides .inner {
margin-left: -200%;
}



/*-----------------------Bullets hidden-------------*/

#slide1:checked ~ #bullets label:nth-last-child(1),
#slide2:checked ~ #bullets label:nth-last-child(1),
#slide3:checked ~ #bullets label:nth-last-child(1),
#slide1:checked ~ #bullets label:nth-last-child(2),
#slide2:checked ~ #bullets label:nth-last-child(2),
#slide3:checked ~ #bullets label:nth-last-child(2)
#slide1:checked ~ #bullets label:nth-last-child(3),
#slide2:checked ~ #bullets label:nth-last-child(3),
#slide3:checked ~ #bullets label:nth-last-child(3),
#slide1:not(checked) ~ #bullets label:nth-last-child(1),
#slide1:not(checked) ~ #bullets label:nth-last-child(2),
#slide1:not(checked) ~ #bullets label:nth-last-child(3) {
display: none;
}

#slide1:checked ~ #bullets label:nth-child(1),
#slide2:checked ~ #bullets label:nth-child(2),
#slide3:checked ~ #bullets label:nth-child(3),
#slide4:checked ~ #bullets label:nth-child(4),
#slide5:checked ~ #bullets label:nth-child(5),
#slide6:checked ~ #bullets label:nth-child(6) {
background: var(--clr-neutral);
}

.arrow {
display: none;
}



#overflow {
overflow-x: hidden;
scroll-snap-type: none;
}

#slide4:checked ~ #slides .inner {
margin-left: -200%;
}

#slide5:checked ~ #slides .inner {
margin-left: -200%;
}

#slide6:checked ~ #slides .inner {
margin-left: -200%;
}



/*--------------------------Calculator----------------------------*/
.calculator .container {
.testimonials {
  max-width: 1400px;
}
}

.calculator .whiteSection-title p {
position: relative;
text-align: center;
font-weight: var(--font-weight-demi-bold);
color: var(--clr-primary);
padding: 0 0 15px 0;
z-index: 3;
font-size: 1.2rem;
background-color: var(--clr-neutral);

}

/*----------------------------BMS---------------------------------*/
.bms-container {
display: block;
height: 80vh;
}

.bms-container h3 {
font-size: 1.5rem;
}

.bms-container .col {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
float: left;
width: 25%;
font-size: 1.2rem;
/* margin: auto; */
}

/* -----------------------------------------Physics---------------------------------------------------- */
/* Hide the checkbox */
input[type="checkbox"] {
display: none;
}



/* Dropdown content styling */
.dropdown-content {
display: none; /* Hidden by default */
position: absolute;
top: 100%;
left: 30%;
background-color: white;
width: 600px;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 1;
}

.header #dropdown {
overflow:visible
}
#dropdown:hover .dropdown-content {
display: block;
}

/* Style the dropdown button */
.dropbtn {
color: var(--clr-primary);
font-weight: var(--font-weight-bold);
font-size: 1.3rem;
display: block;
padding: 23px 10px 20px 10px;
}

/* Popup window layout */
.popup-window {
display: flex;
justify-content: space-between;
}

.left-section {
width: 40%;
text-align: center;
}

.left-section img {
max-width: 100%;
height: auto;
border: 2px solid gray;
}

.left-section video {
height: 50px;
}

.right-section {
width: 55%;
padding-left: 20px;
}

.right-section h5 {
margin-bottom: 10px;
font-weight: var(--font-weight-bold);
}

.right-section strong {
font-weight: var(--font-weight-bold);
}
.right-section p {
margin-bottom: 5px;
}


/*----------------------------FAQ---------------------------------*/

.accordion {
width: 100%;
}

.accordion .question {
font-size: 1.3rem;
}

.accordion .answer {
font-size: 1.2rem;
}



/*---------------------------------------Footer--------------------------------------------*/

.footer .container {
margin: auto;
}

.footer-col {
width: 20%;
margin: 0 2%;
padding: 0 15px;
}

.footer-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: baseline;

}

.footer-col ul li a:hover {
color: var(--clr-accent);
padding-left: 10px;
padding-bottom: 0;
}

.footer-col .social-links a:hover {
color: #24262b;
background-color: var(--clr-accent);
}

}






@media (max-width:21em) {
.header {
  display: none;
}
.text-container {
  font-size: 60%;
}
#slogan {
  font-size: 100%;
}
/*--------------------------------------Info--------------------------------------*/
.info h2 {
  font-size: 1.5rem;
}

.info-header .container::after {
  width: 40px;
  height: 15px;
  bottom: -6px;
  left: -6px;
}

.info-header .container::before {
  width: 40px;
  height: 15px;
  top: -5px;
  right: -5px;
}



/*----------------------------------Testimonials---------------------------------------*/


.section-header .container::after {
  width: 40px;
  height: 15px;
  bottom: -6px;
  left: -6px;
}

.section-header .container::before {
  width: 40px;
  height: 15px;
  top: -5px;
  right: -5px;
}

}



 /* Responsive video scaling */
 @media (max-aspect-ratio: 4/3) {
  .video-container {
    width: 100%;
    height: 30vh;
  }
  
  .bg-video {
    width: 100%;
    height: auto;
  }
}

/* @media (min-aspect-ratio: 4/3) {
  .video-container {
    width: 100%;
    height: auto;
  }
  .bg-video {
    width: auto;
    height: 100%;
  }
} */