/* start-navbar  */
.navbar {
  background-color: rgba(var(--primary-600));
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  transition: background-color 300ms ease-in-out;
  z-index: 5;
}
.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 0.5rem 1rem;
}
.navbar__links_wrapper {
  display: flex;
  justify-content: center;
  @media only screen and (max-width: 991px) {
    position: fixed;
    top: 0;
    right: 0;
    min-height: 100vh;
    min-height: 100svh;
    width: 100%;
    z-index: 9;
    display: none;
    pointer-events: none;
  }
}
.navbar__links_wrapper.show {
  @media only screen and (max-width: 991px) {
    /* animation: SlideLeft 400ms ease-in-out 0s 1 normal forwards; */
    display: flex;
    pointer-events: fill;
  }
}
.navbar__links_wrapper .navbar__links {
  display: flex;
  gap: 0.25rem;
  @media only screen and (max-width: 991px) {
    background-color: rgb(var(--primary-900));
    width: 450px;
    flex-direction: column;
    padding: 2rem;
    position: fixed;
    top: 0;
    right: -100%;
  }

  @media only screen and (max-width: 768px) {
    width: 260px;
  }
}
.navbar__links_wrapper.show .navbar__links {
  @media only screen and (max-width: 991px) {
    height: 100%;
    animation: SlideLeft 200ms ease-in-out 0s 1 normal forwards;
  }
}

.navbar__links_wrapper .navbar__links li {
  box-sizing: border-box;
}
.navbar__links_wrapper .navbar__links li a {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  transition: background 200ms ease-in-out;
  text-transform: capitalize;
  font-size: 1rem;
  @media only screen and (max-width: 991px) {
    display: block;
    padding: 0.5rem;
  }
}
.navbar__links_wrapper .navbar__links li a:hover {
  background-color: rgb(var(--primary-500));
}
.navbar__links_wrapper button {
  display: none;
  @media only screen and (max-width: 991px) {
    display: flex;
    flex: 1;
    background-color: #00000080;
  }
}
.navbar .navbar__menu_icon {
  display: none;
  @media only screen and (max-width: 991px) {
    display: block;
  }
}
/* end-navbar  */
@keyframes SlideLeft {
  0% {
    rigth: -100%;
  }
  100% {
    right: 0%;
  }
}
/* end-navbar   */
/* start-hero */
.hero {
  min-height: 100svh;
  height: 100vh;
  background-image:linear-gradient(rgba(var(--primary-100) , .5), rgba(var(--primary-100) , .5)),url("/images/earth.jpg");
  background-size:cover;
}
.hero .container {
  height:100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items:center
}
.hero__text {
  text-align:center;
}
.hero__text h1 {
  /* text-align:center; */
  font-size:3rem;
  margin-bottom:1rem;
  @media only screen and (min-width:620px){
    font-size:3.6rem;
  }
  @media only screen and (min-width:991px){
    font-size:4rem;
  }
}
.hero__text h2 {
  /* text-align:center; */
  font-size:1rem;
  margin-bottom:1rem;
  color:#1a1a1a;
  @media only screen and (min-width:620px){
    font-size:1.5rem;
  }
  @media only screen and (min-width:991px){
    font-size:2rem;
  }
}
.hero__text h3 {
  /* text-align:center; */
  font-size:.9rem;
  margin-bottom:2rem;
  color:#1a1a1a;

  @media only screen and (min-width:620px){
    font-size:1.1rem;
  }
  @media only screen and (min-width:991px){
    font-size:1.1rem;
  }
}
.hero__download-links{
  display:flex;
  justify-content: center;
  gap:8px;
  @media only screen and (min-width:991px){
    gap:16px;
  }
}
.hero__download-links > a {
  display:flex;
  gap:8px;
  align-items:center;
  justify-content: center;
  padding:8px 16px;
  border:1px solid rgb(var(--primary-900));
  border-radius:8px;
  flex-basis:140px;
  font-size:1rem;
  font-weight:400;
  background-color:rgba(var(--primary-100) , .1);
  transition:all 300ms ease;
  @media only screen and (min-width:991px){
    font-size:1.2rem;
    font-weight:600;
    flex-basis:200px;
  }
}
.hero__download-links > a:hover {
  transform:scale(1.1,1.1) translateZ(-20px) translateY(-4px);
  box-shadow:0px 6px 12px rgba(var(--primary-900), .9);
  background-color:rgba(var(--primary-100) , .4);

}
.hero__download-links > a img {
  height:24px;
  width:24px;
  @media only screen and (min-width:991px){
    height:32px;
    width:32px;
  }
}
/* end-hero */
/* start about  */
.about {
  padding:64px 0 0 0; 
  background-color:#fefefe;
}
.about .container{
  display:flex;
  align-items: center;
  gap:32px;
  flex-direction: column;
  @media only screen and (min-width:991px){
    flex-direction: row;
  }
}
.about__text {
  flex:1;
}
.about__text h2 {
  margin-bottom:2rem;
  color:rgb(var(--primary-900))
}
.about__text p {
  line-height: 1.5;
  color:#3c3c3c;
  margin-bottom:.5rem;
}
.about__image {
  position:relative;
  flex:1;
  height: 500px;
  min-height: 500px;
  width:100%;
  overflow: hidden;
  display: flex;
  justify-content:center;
  align-items: center;
}
.about .about__image img {
  display: block;
  filter:drop-shadow( 0px 6px 14px #00000060);
  transform:translateZ(-40px);
  position:absolute;
  width:200px;
  bottom:40px;
  @media only screen and (min-width:414px){
    width:400px;
    bottom:-330px;
  }
  /* left:0; */
}

/* end-about */

/* start-features  */
.features {
  padding:64px 0;
  background-color:#f4f4f4;
}
.features .container .section-title {
  text-align: center;
  font-size:48px;
  color:rgb(var(--primary-900))
}

.features__cards {
  display:grid;
  /* grid-template-columns:repeat(3,1fr); */
  /* grid-template-rows: 1fr 1fr; */
  grid-template-columns: 1fr;
  gap:16px;
  margin-top:32px;
  @media only screen and (min-width:768px){
    grid-template-columns: 1fr 1fr;
  }
  @media only screen and (min-width:991px){
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.features__card {
  border:1px solid #ddd;
  border-radius:8px;
  padding:32px;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align:center;
  background-color:#fff;
  box-shadow:0px 4px 8px #00000020;
}
.features__card:nth-of-type(5){
  /* grid-column: 3; */
  /* grid-row:1 /3 */
  @media only screen and (min-width:768px){
    grid-column: span 2;
  }
  @media only screen and (min-width:991px){
     grid-column: 3;
    grid-row:1 /3
  }
}
.features__card  img {
  margin-bottom:8px;
}
.features__card h4 {
  margin-bottom:.5rem;
}
.features__card p {
  color:rgb(var(--gray-800))
}
/* end-features  */
/* Start-how_it_works  */
.how-it-works {
  padding:64px 0;
}
.how-it-works .container .section-title {
  text-align: center;
  font-size:48px;
  color:rgb(var(--primary-900))
}
.how-it-works__cards {
  display:flex;
  flex-direction: column;
  justify-content: center;
  gap:16px;
  margin:48px 0;
  @media only screen and (min-width:768px){
    flex-direction: row;
  }
}
.how-it-works__card {
  border:1px solid #ddd;
  border-radius:8px;
  padding:32px;
  transition:all 300ms ease-in-out;
  cursor:pointer;
  flex-basis: 290px;
  @media only screen and (min-width:768px){
    flex-basis: 500px;
  }
}
.how-it-works__card:hover {
  background-color:rgba(var(--primary-600));
  color:#fff;
  transform:translateY(-8px);
}
.how-it-works__card h6 {
  font-size:1.5rem;
  text-align:center;
  margin-bottom:16px;
}
.how-it-works__card .divider {
  width:100%;
  background-color:#ddd;
  height:1px;
}
.how-it-works__card ul {
  list-style: disc;
}
.how-it-works__card ul li {
  padding:12px 4px;
}
/* end-how_it_works  */

/* start-why_us  */
.why_us {
  margin:64px 0;
}
.why_us .container{
 background:linear-gradient(to right, rgb(var(--primary-800)), rgb(var(--primary-500)));
 position:relative;
 border-radius:16px;
 padding:32px;
 height:400px;
 color:#fff;
 overflow: hidden;
 text-align: center;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 gap:32px;
}
.why_us .container h2 {
  font-size:48px;
}
.why_us .container > img {
  position: absolute;
  bottom:-100px;
  left:-80px;
  opacity:.2;
}
/* end-why_us  */

.footer {
  padding:90px 0;
  background:linear-gradient(145deg, rgb(var(--primary-950)), rgb(var(--primary-800)) )
}
.footer .container{
  display:flex;
  gap:16px;
  row-gap:64px;
  flex-wrap:wrap;
}
.footer .container > div {
  flex:1;
  color:#ddd;
  flex-basis:23%;
  min-width:270px;
}

.footer__logo img {
  margin-bottom:16px;
}

.footer__links h6, .footer__download-links h6, .footer__socials h6 {
  font-size:1.2rem;
  color:#fff;
  margin-bottom:16px;
}

.footer__links ul li{
  padding:4px 0;
}
.footer__links ul li:hover a {
  color:#fff;
}
.footer__download-links > div {
  display:flex;
  flex-direction: column;
  gap:8px;
}
.footer__download-links > div > a {
  display:flex;
  gap:8px;
  align-items:center;
  justify-content: center;
  padding:8px 16px;
  border:1px solid rgb(var(--primary-700));
  border-radius:8px;
  width: 200px;
  /* flex-basis:140px; */
  font-size:1rem;
  font-weight:400;
  background-color:rgba(var(--primary-100) , .1);
  transition:all 300ms ease;
  @media only screen and (min-width:991px){
    font-size:1.2rem;
    font-weight:600;
    /* flex-basis:200px; */
  }
}

.footer__socials > div {
  display:flex;
  gap:16px;
  flex-wrap: wrap;
}
.footer__socials > div a {
  height:64px;
  width:64px;
  min-height: 64px;
  min-width: 64px;
  border:1px solid #fff;
  border-radius: 50%;
  display:flex;
  justify-content: center;
  align-items:center;
}