@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;500;800&display=swap');


body {
  background: #101585;
  color: #1f2937;
  line-height: 1.8;
  font-family: Manrope, sans-serif;
}


#header {
  position: relative;
  max-width: 1000px;
  width: 930 ;
  margin: 20px auto;
}

#nav {
  position: relative;
  background: #ffffff;
  max-width: 1000px;
  width: 930 ;
  margin: 20px auto;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
#section {
  position: relative;
  background: #ffffff;
  max-width: 1000px;
  width: 930 ;
  margin: 20px auto;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
#footer {
  position: relative;
  background: #ffffff;
  max-width: 1000px;
  width: 930 ;
  margin: 20px auto;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}


a {
  color: #0a6a53;
  text-decoration: none;
}

a:hover {
  color: #775669;
}

a:visited {
  color: #00a880;
}


p {
  font-family: Manrope, sans-serif;
}


h1 {
  font-family: Manrope, sans-serif;
  font-weight: 800;
  color:#ffff ;
  text-align: center;


}


#titles h1 {
  text-align: center;
  color: #ffff ;
}

ul {
  font-family: Manrope, sans-serif;
}

h4 {
  font-family: Manrope, sans-serif;
  font-weight: 800;
}


#nav ul {
  text-align: center;
  font-family: Manrope, sans-serif;
}

#nav li {
  display: inline;
  padding-right: 30px;
}


table {
  font-family: Manrope, sans-serif;
}

th {
  text-align: left;
  background: #222222;
  color: #d6cfcb;
}

th, td {
  border: 1px solid #222222;
  padding: 6px;
}

/* HEADER */
#header img {
  width: 100%;
}

/* SPACE */
.spacing {
  padding: 5px;
  margin: 20px;
}

/* RESPONSIVE */
.respond {
  width: 100%;
  max-width: 450px;
}

.demovideo {
  max-width: 560px;
  height: 315px;
  width: 100%;
}

/* ALIGN */
.lefty {
  float: left;
  margin-right: 50px;
  margin-bottom: 20px;
}

/* SIDEBAR */
.sidebar {
  float: right;
  width: 40%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-left: 10px;
}

.sidebar-bottom {
  display: none;
}
   

@media screen and (max-width: 930px) {
  .sidebar { display: none;}

  .sidebar-bottom {
    background: #ffffff;
    border-radius: 20px;
    padding: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);

  }
}
/* keep your desktop styles above… */

@media (max-width: 930px) {
  .sidebar {
    display: block;   /* instead of none */
    float: none;      /* stack it */
    width: 100%;
    margin: 16px 0;
  }
}


p {
  margin-top: 0;
  margin-bottom: 22px;   
  line-height: 1.8;      
}


#section .spacing {
  max-width: 850px;
  margin: auto;
}