* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}
html {
  font: 62.5%  "poppins","Raleway", sans-serif;
}

body{background-color: #f2f2f2;}
h1 {
  font-size: 3.6rem;
}

h2 {
  font-size: 2.4rem;
}

h3 {
  font-size: 1.8rem;
}
p {
  font-size: 1.5rem;line-height: 1.8;
}
p.lead {
  font-size: 1.7rem;
  font-weight: 600;
  z-index: -99999999999;
}

p + p {margin-top: 24px;}
:root {
  --bg-color: #fff;
  --text-color: #22100d;
  --secondary-color: #685f78;
  --main-color: #f66962;
  --big-foot: 3.8rem;
  --h2-font: 2.6rem;
  --p-font: 1.1rem;
}

.section-padding {
  max-width: 1024px;
  margin-inline: auto;
  padding: 18px 18px;
}
h2#header {
  color: var(--text-color);
  font-size: var(--h2-font);
}
#navcontainer {
  /* max-width: 1024px;
  margin-inline: auto; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  color: var(--text-color);
  position: fixed;
  background-color: #4486fa;
  top: 0;
  left: 0;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  width: 100%;
}

.navcontainer {
  z-index: 1;
}
#navcontainer a#logo {
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
}
#navcontainer nav ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
}

#navcontainer nav ul li {
  margin-right: 24px;
}
#navcontainer nav ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 1.7rem;
}
p.cta_p{margin: 20px 0;}

#toggler {font-weight: 700;color: #fff;font-size: 1.8rem;display: none;cursor: pointer;}
.calltoaction_bg p{font-size: 1.6rem;}
.calltoaction_bg{
  padding: 60px;
  background-image:linear-gradient(rgba(9,5,43,0.3),rgba(5,4,46,0.7)), url(/images/picture1.jpg);background-attachment: fixed;background-repeat: no-repeat;background-size:cover ;color: #fff;
}

#herosection,
#calltoaction {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 5rem;
  z-index: -999999;
}

#calltoaction {
  margin-top: 0;
}

#herosection img,
#calltoaction img {
  width: 100%;
}

#herosection h2.title,
#calltoaction h2.title,
#features h2.title,
#bookcontainer h2.title,
.title {
  color: #b63ac0;
  font-size: 2.6rem;
  margin-bottom: 2.4rem;
  /* text-align: center; */
}

#herosection p.text,
#calltoaction p.text {
  text-align: center;
}

#herosection .hero-left,
#calltoaction .hero-left {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  padding: 1.5rem;
  justify-items: flex-end;
}

#herosection .hero-left img {max-width: 70%;}
#herosection a.btn,
#calltoaction a.btn,
a.btn {
  background-color: #4486fa;
  padding: 10px 25px;
  color: #fff;
  border-radius: 30px;
  font-weight: 700;
  font-size: 1.4em;
  transition: 0.4s ease-in-out;
}

.counters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 30px;
  text-align: center;
}

.counters i {
  color: #b63ac0;
  margin-bottom: 10px;
}


.customlist {list-style-type: decimal !important;font-size: 1.5rem;}

.customlist li {padding: 5px 0;line-height: 1.5;}
.counters p {
  /*color: #b63ac0;*/

  margin-bottom: 10px;
  font-weight: 700;
}

.counters .counter {
  font-size: 40px;
  margin: 10px 0;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-family:'Raleway';
}

#features-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
}

#features-boxes .feature-box img {
  max-width: 80%;
  object-fit: cover;
}

.center {text-align: center;}
#features-boxes .feature-box {
  border-radius: 12px;
  border: 0px solid #b63ac0;
  background-color: #fff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  /* background: #edf2f7; */
  transition: 1s;
  padding: 20px;
  text-align: center;
}
#features-boxes .feature-box a {text-decoration: none;font-size: 1.4rem;font-weight: 400;text-align: right;}

/* #features-boxes .feature-box:hover {
  transform: scale(1.1);
} */

#features-boxes .feature-box h3,h3 {
  font-weight: 500;
  padding: 1.6rem 0;
  color: #b63ac0;
  text-align: center;
}

h1,h2,h3,h4 {font-family: 'Raleway';}

h3 {
  font-weight: 500;
  padding: 1.6rem 0;
  color: #b63ac0;
}

#features-boxes .feature-box p {
  font-size: 1.4rem;
  text-align: center;
}

#features_os .features_os_inner {
  display: grid;grid-template-columns: repeat(auto-fill,minmax(300px,1fr));gap: 20px;}

#features_os .features_os_inner div {padding: 20px;border: 1px solid #4486fa;border-radius: 5px;display: flex;justify-content: center;align-items: center;flex-direction: column;}
#features_os .features_os_inner i {font-size:45px;color: #b63ac0;/*background-color: #b63ac0;*/padding: 15px;border-radius: 50%;border: 2px solid #4486fa;}

#resourcecontainer .cards .card .card-content {
  color: grey;
}
#resourcecontainer .cards .card {
  display: grid;
  grid-template-columns: minmax(180px, 1fr);
  grid-template-rows: 180px 80px 40px;
/*  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);*/
  border: 1px solid #f2f2f2;
}
#resourcecontainer .cards .card-image {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-size: cover;
  object-fit: cover;
  height: 18rem;
  max-width: 100%;
}
#resourcecontainer .cards {
  border: none;
  z-index: 0;
}

#resourcecontainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  grid-gap: 20px;
  margin: 20px 0;
  grid-row-gap: 30px;
}

.herocontainer h1 {
  color: #22100d;
}
.herocontainer {
  /* height: 80vh; */
  background-size: cover;
  object-fit: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
/*  background-image: linear-gradient(rgba(9, 5, 43, 0.3), rgba(5, 4, 46, 0.7)), url(/images/background-images/digital-library.jpg);*/
  /* background-attachment: fixed; */
  background-repeat: no-repeat;
  height: 60vh;
  text-align: center;
}

.card-content h5,
.card-content h3,
.card-content h4 {
  text-align: center;
  font-weight: normal;
}

.card-content h3 {
  font-size: 1.4rem;
}

.card-content {
  padding: 10px;
  padding-bottom: 40px;
}

.card {
  transition: 1s;
}
/* .card:hover {
  transform: scale(1.1);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
} */

.howitworks_inner{display: grid;grid-template-columns: repeat(auto-fit, minmax(150px,auto));gap: 30px;align-items:center}

.howitworks_inner  div {text-align: center;border: 1px solid #c7c7c7;border-radius: 5px;padding: 15px;}
.howitworks_inner h1 {
  font-size: 24px;text-align: center;
  width: 36px;height: 36px;background-color: #4486fa; line-height: 36px;border-radius: 50%;color: white;
}

.howitworks_inner .workitem h3 {
  margin: 20px 0px;
}

.howitworks_inner .workitem {
  display: flex;justify-content: center;
  flex-direction: column;align-items: center;
}

#bookcontainer {
  z-index: 0;
}

.custombot {display: grid; grid-template-columns: repeat(2,auto);gap: 40px;}

.custombot img {width: 90%;}
.custombot div.custombotimage {
  display: flex;justify-content: center;align-items: center;
}

.custombot h3,.custombot h2 {text-align: center;}

#contactheader {margin-top: 54px;}
.contact-bg{height: 40vh;background: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.5));background-image: url(/images/contactus.jpg);background-position: 40% 80%;background-size: cover;background-attachment: fixed;color: #fff;text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 20px;}

.contact-bg h3 {font-size: 2rem;font-weight: 600;color:#000;}
.contact-bg p {font-size: 1.6rem;font-weight: 400;color:#000;}
.contact-bg h2{font-size: 3rem;text-transform: uppercase;padding: 0.4rem 0;letter-spacing: 4px;}

.line {margin: 0 0.2rem;}

.line div:nth(1),
.line div:nth(3){height: 3px;width: 70px;background: #01b671;border-radius: 5px;}

.line {display: flex;align-items: center;}
.line div:nth(2){height: 10px;width: 10px;background: #01b671;border-radius: 50%;}

.text {font-weight: 300;opacity: 0.9;font-size: 1.4rem;}

.contact-bg .text {margin: 1.6rem 0;}

.contact-body {max-width: 1024px; margin:0 auto;padding: 2.4rem 1rem;}

.contact-body p {opacity: 0.7;font-size: 1.6rem;padding: 2rem;text-align: center;line-height: 1.8;}
.contact-info {margin: 2rem 0;text-align: center;padding: 2rem 0;color: #685f78;display: grid;grid-template-columns: repeat(auto-fill,minmax(300px,auto));}
.contact-info span {display: block;}

.contact-info span{color: #232323;}
.contact-info span i {font-size: 4rem;padding-bottom: 0.9rem;color: #4486fa;}

.contact-info div span:nth-child(2){font-weight: 500;font-size: 1.6rem;}
.contact-info .text {padding: 1.4rem;}

.contact-form {padding: 2rem;border-top: 1px solid #c7c7c7;display: grid;grid-template-columns: 3fr 2fr;gap: 20px;}
.contact-form form {padding-bottom: 1rem;}
.form-control {width: 100%;border: 1.5px solid #c7c7c7;border-radius: 5px;padding: 1.5rem;margin: 0.6rem;font-size: 1rem;outline: 0;font-size: 1.4rem;}

.form-control:focus{box-shadow: 0 0 6px -3px rgba(48, 48, 48, 1);}

.contact-form textarea {min-height: 150px;}

.contact-form form div {display: grid;grid-template-columns: repeat(2,1fr);column-gap: 0.6rem;}
.contact-form form div.subject {display: grid;grid-template-columns: 1fr}

.contact-form .send-btn {font-size: 1.4rem;text-transform: uppercase;background-color: #4486fa;border: none;border-radius: 5px;padding: 0.7rem 1.5rem;cursor: pointer; transition: all 0.4s ease;color: #fff;}

.contact-form .send-btn:hover{opacity: 0.8;}

.contact-form > div {display: flex;justify-content: center;}
.contact-form > div img {width: 100%;text-align: center;}
footer { color: #fff;
  background-image: linear-gradient(#4486fa , #b63ac0), url(/images/background-images/digital-library.jpg);
  /*margin-top: 4.8rem;*/
}

footer h2, footer h3 {
  text-align: left;
  font-weight: 700;
  color: #fff;
}
footer a {color: #fff;}
footer .footercontainer  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

footer .footercontainer {
  font-size: 1.6rem;
}
footer .footercontainer h3 {
  padding: 2.4rem 0;
}

footer .footercontainer ul li {
  padding: 5px 0;
}

footer .footercontainer p.welcome {
  padding: 0 1rem 0 0;
  font-size: 1.4rem;
  line-height: 1.8;
}

footer .footer_right {
  display: grid;grid-template-columns:1fr 1fr;/* repeat(auto-fill, minmax(200px,1fr))*/;
}
@media screen and (max-width: 600px) {
  #herosection,
  #calltoaction {
    grid-template-columns: repeat(auto-fit, minmax(300px, auto));
    gap: 1rem;
  }
  .counters .counter {
    font-size: 25px;
    margin: 10px 0;
    text-align: center;
    color: #4486fa;
    font-weight: 500;
  }
  .custombot {grid-template-columns: 1fr;}
  .custombot img {width: 90%;}
}

@media screen and (max-width: 910px) {
  #features-boxes {
    grid-template-columns: repeat(auto-fit, minmax(180px, auto));
    gap: 1.6rem;
  }
}

@media screen and (max-width: 803px) {
  #features-boxes {
    grid-template-columns: repeat(auto-fit, minmax(300px, auto));
    gap: 3rem;
  }
}

@media screen and (max-width: 600px) {
  #features-boxes {
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
    gap: 2rem;
  }
}

@media screen and (max-width: 768px) {
  .herocontainer h1 {
    margin-bottom: 18px;
  }
  .herocontainer {
    height: 40vh;
  }
  footer .footercontainer {
    grid-template-columns: 1fr;
  }

  .contact-form {
    display: grid;grid-template-columns: 1fr;
  }

  .contact-form .contact-image {display: none;}

  .howitworks_inner{grid-template-columns: repeat(auto-fill,minmax(300px,1fr));gap: 30px;align-items:center}

  #features_os .features_os_inner {
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));gap: 20px;}

  #toggler {
    display: block;
  }

  #navcontainer nav {
    color: #232323;
    display: block;
    position: absolute;
    width: 300px;
    border: 0 solid rgb(78, 61, 61);
    top: 59px;
    left: -300px;
    height: 100vh;
    bottom: 0;
    z-index: 9999999999;
    /*background-image:linear-gradient(#000,#b63ac0);*/
    background:#f7ffef;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
  }

  #navcontainer nav ul {
    display: block;
    list-style: none;
    padding-left: 30px;
    margin-top: 36px;
  }

  #navcontainer nav ul li a {
    text-decoration: none;
    display: block;
    color: #000;
    font-size: 1.7rem;
    border-bottom: 1px solid #ddd;
    padding: 10px 0 15px 20px;
  }
}
@media screen and (max-width: 1024px) {
  .herocontainer {
    height: 60vh;
  }
  .herocontainer h1 {
    margin-bottom: 24px;
  }
}

@media screen and (max-width: 600px) {
  .herocontainer h1 {
    margin-bottom: 5px;
    font-size: 24px;
  }
  .herocontainer {
    height: 40vh;
  }
}
/* signupForm*/
#users {
  background-color: #fff; width: 100%;height: 100vh; display: flex;
  justify-content: center;align-items: center;
  #logincontainer,#signincontainer {max-width: 480px;}
  .loginleft .signup {height: 100vh;width: 65%;object-fit: cover;background-repeat: no-repeat;background-position: center;display: flex;flex-direction: column;color: #fff;align-items: center;align-content: center;justify-items: center;justify-content: center;width: 65%;background-image: linear-gradient(rgba(9,5,43,0.3),rgba(5,4,46,0.7)), url(/images/bots/6.jpg);background-size: cover;}

  .loginleft .signin {height: 100vh;width: 65%;object-fit: cover;background-repeat: no-repeat;background-position: center;display: flex;flex-direction: column;color: #fff;align-items: center;align-content: center;justify-items: center;justify-content: center;width: 65%;background-image: linear-gradient(rgba(9,5,43,0.3),rgba(5,4,46,0.7)), url(/images/bots/9.jpg);background-size: cover;}

  .loginright {width: 35%;padding: 30px;}

  @media screen and (max-width:1024px){
      .loginleft {width: 50%}
      .loginright {width: 50%;padding: 10px;}
  }

  @media screen and (max-width:768px){
      .loginleft {display: none}
      .loginright {width: 100%;padding: 10px;margin:20px;padding:10px 10px; width: 100%;}
      #logincontainer {height: 100vh;}
  }

  .inputContainer {
    position: relative;height: 45px;width: 100%;margin-bottom: 17px;    text-align:center;
  }

  .title {
    font-size: 24px;margin-bottom: 40px;text-align:center;color: inherit;

    span {
      display:block;font-size:0.85em;
    }
  }

  .input {
    position: absolute;top: 0px;left: 0px;height: 100%;width: 100%;border: 1px solid #DADCE0;
    border-radius: 7px;font-size: 16px;padding: 0 20px;outline: none;background: none;
    z-index: 1;
  }

  ::placeholder {
    color: transparent;
  }

  .label {
    position: absolute;top: 15px;left: 15px;padding: 0 4px;background-color: white;
    color: #DADCE0;font-size: 16px;transition: 0.5s;    z-index: 0;
  }

  .submitBtn {display: block;margin-left: auto;padding: 15px 30px;border: none;
    background-color: purple;color: white;border-radius: 6px;cursor: pointer;
    font-size: 16px;margin-top: 30px;width:100%;
  }

  .submitBtn:hover {
    background-color: #9867C5;
    transform: translateY(-2px);
  }

  .input:focus + .label {
    top: -7px;
    left: 3px;
    z-index: 10;
    font-size: 14px;
    font-weight: 600;
    color: purple;
  }

  .input:focus {
    border: 2px solid purple;
  }
  .input:not(:placeholder-shown)+ .label {
    top: -7px;
    left: 3px;
    z-index: 10;
    font-size: 14px;
    font-weight: 600;
  }
}