/* HEADER =========================================== */

section.header {
  background-image:url(../assets/1/1/bg\ photo\ 1.png);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:bottom center;
}

.header .container {
  height:calc(100% - 65px);
  min-height:100vh;
}

.header .content-img {
  position:absolute;
  top:calc(50% - 375px);
  background-image:url(../assets/1/1/devices\ 1.png);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center center;
  width:570px;
  height:670px;
  max-height:100%;
}

.header .content-title {
  position:absolute;
  right:0px;
  bottom:calc(50% + 55px);
  color:#FFF;
  font-weight:500;
  font-size:55px;
  line-height:65px;
  width:400px;
  height:130px;
  text-align:right;
}

/* LAUNCHSOON =========================================== */

.launch-soon {
  position:fixed;
  top:100px;
  border-radius:20px;
  background-color:#6CDDFD;
  color:#FFF;
  padding:10px;
  width:500px;
  max-width:90%;
  left:calc(50% - 250px);
  font-size:22px;
  text-align:center;
  font-weight:700;
  z-index:999999;
  box-shadow:0px 0px 10px #FFF;
}

.launch-soon .close {
  position:absolute;
  padding:10px;
  top:0px;
  right:20px;
}

/* BUYNOW =========================================== */

section.buynow {
  background-image:url(../assets/1/2/bg\ photo\ 2.png);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
}

.buynow .content {
  width:50%;
  padding:200px 0px;
}

.buynow .content h1 {
  color:#FFF;
}

.buynow .content p {
  color:#FFF;
  font-size:22px;
  line-height:27px;
  margin-top:40px;
}

.buynow .content a {
  margin-top:40px;
  background:#F4DCFE;
  border-radius:20px;
  border:0px;
  padding:10px 40px;
  font-weight:500;
  font-size:26px;
  display:inline-block;
  color:#000;
}

.buynow .edhi {
  margin-top:40px;
  position:relative;
}

.buynow .edhi .content-img {
  background-image:url(../assets/1/2/edhi\ level.png);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center center;
  width:150px;
  height:150px;
  position:absolute;

}

.buynow .edhi p {
  margin-left:200px;
  font-size:18px;
  margin-right:-150px;
}

/* MOREINFO =========================================== */

section.moreinfo {
  background:#FFF;
}

.moreinfo .title-img {
  position:absolute;
  top:150px;
  background-image:url(../assets/1/3/devices\ 3.png);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center center;
  width:520px;
  max-width:calc(50% - 40px);
  height:720px;
}

.moreinfo .title {
  padding:200px 0px 100px;
  padding-left:50%;
}

.moreinfo h1 {
  color:#3991D8
}

.moreinfo .title p {
  font-size:22px;
  line-height:27px;
  margin-top:40px;
}

.moreinfo .title a {
  display:inline-block;
  color:#FB3C4C;
  font-size:22px;
  line-height:27px;
  margin-top:40px;
  background:none;
  border:none;
  cursor:pointer;
}

.moreinfo .content {
  padding:100px 0px 200px;
  text-align:center;
}

.moreinfo .content .content-img {
  background-image:url(../assets/1/3/diagram2.png);
  width:100%;
  max-width:1200px;
  height:800px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center center;
  margin:40px 0px;
  display:inline-block;
}

/* TECHNOLOGY =========================================== */

section.technology {
  background-color:#F4DCFE;
  padding-bottom:100px;
}

.technology .content-img {
  position:absolute;
  top:120px;
  background-image:url(../assets/1/4/devices\ 3.png);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center center;
  width:80%;
  max-width:1100px;
  height:710px;
}

.technology .content {
  padding:200px 0px;
  width:100%;
}

.technology .title {
  position:absolute;
  right:0px;
}

.technology .title h1 {
  color:#0BB4DF;
  text-align:right;
}

.technology .title p {
  font-size:22px;
  line-height:27px;
  margin-top:40px;
  text-align:right;
}

.technology .grid {
  margin:500px 0px 0px;
  display:grid;
  grid-template-columns: auto auto;
  grid-gap:100px;
}

.technology .grid-item h2 {
  margin-top:20px;
  font-size:26px;
  font-weight:500;
}

.technology .grid-item p {
  font-size:18px;
  margin-top:10px;
}

.technology .grid-item-img {
  width:100px;
  height:80px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center center;
}

.technology .grid-item-img.d1 {
  background-image:url(../assets/1/4/icon\ 1.png);
}

.technology .grid-item-img.d2 {
  background-image:url(../assets/1/4/icon\ 2.png);
}

.technology .grid-item-img.d3 {
  background-image:url(../assets/1/4/icon\ 3.png);
}

.technology .grid-item-img.d4 {
  background-image:url(../assets/1/4/icon\ 4.png);
}

.technology .grid-item-img.d5 {
  background-image:url(../assets/1/4/icon\ 5.png);
}

.technology .grid-item-img.d6 {
  background-image:url(../assets/1/4/icon\ 6.png);
}

.technology .grid-item-img.d7 {
  background-image:url(../assets/1/4/icon\ 7.png);
}

.technology .grid-item-img.d8 {
  background-image:url(../assets/1/4/icon\ 8.png);
}

/* BENEFITS =========================================== */

section.benefits {
  background-color:#FFF;
  padding-bottom:100px;
}

.benefits .content {
  padding:200px 0px 0px;
  width:100%;
}

.benefits .content h1 {
  color:#3991D8;
  text-align:center;
}

.benefits .grid {
  margin:100px 0px 0px;
  display:grid;
  grid-template-columns: auto auto auto;
  grid-gap:100px;
}

.benefits .grid-item {
  text-align:center;;
}

.benefits .grid-item-caption {
  display:inline-block;
  font-size:22px;
  margin-top:20px;
}

.benefits .grid-item-img {
  display:inline-block;
  width:270px;
  height:230px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center center;
}

.benefits .grid-item-img.d1 {
  background-image:url(../assets/1/5/pic\ 1.png);
}

.benefits .grid-item-img.d2 {
  background-image:url(../assets/1/5/pic\ 2.png);
}

.benefits .grid-item-img.d3 {
  background-image:url(../assets/1/5/pic\ 3.png);
}

.benefits .grid-item-img.d4 {
  background-image:url(../assets/1/5/pic\ 4.png);
}

.benefits .grid-item-img.d5 {
  background-image:url(../assets/1/5/pic\ 5.png);
}

.benefits .grid-item-img.d6 {
  background-image:url(../assets/1/5/pic\ 6.png);
}

.benefits .grid-item-img.d7 {
  background-image:url(../assets/1/5/pic\ 7.png);
}

.benefits .grid-item-img.d8 {
  background-image:url(../assets/1/5/pic\ 8.png);
}

.benefits .grid-item-img.d9 {
  background-image:url(../assets/1/5/pic\ 9.png);
}

/* HOWITWORK =========================================== */

section.howitwork {
  background-color:#FFF;
  padding-bottom:100px;
}

.howitwork .content {
  padding:100px 0px 0px;
  width:100%;
  text-align:center;
}

.howitwork .content h1 {
  color:#3991D8;
}

.howitwork .content h2 {
  color:#0BB4DF;
  font-size:26px;
  margin-top:20px;
}

.howitwork .content p {
  font-size:22px;
  margin-top:20px;
}

.howitwork .content-img {
  background-image:url(../assets/1/6/bagan.png);
  width:100%;
  max-width:1200px;
  height:1250px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center center;
  margin:40px 0px;
}

.howitwork .content a {
  display:inline-block;
  color:#FB3C4C;
  font-size:22px;
  line-height:27px;
  margin-top:40px;
  background:none;
  border:none;
  cursor:pointer;
}

/* STARTERPACK =========================================== */

section.starterpack {
  background-color:#F4DCFE;
  padding-bottom:100px;
}

.starterpack .content {
  padding:100px 0px 0px;
  width:50%;
}

.starterpack .content h1 {
  color:#3991D8;
}

.starterpack .content p {
  font-size:22px;
  margin-top:20px;
}

.starterpack .content-img {
  background-image:url(../assets/1/7/devices\ 4.png);
  width:670px;
  max-width:40%;
  height:870px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center center;
  position:absolute;
  top:calc(50% - 300px);
  right:0px;
}

.starterpack .grid {
  margin:100px 0px 0px;
  display:grid;
  grid-template-columns: auto auto;
  grid-gap:100px;
}

.starterpack .grid-item {
  text-align:center;;
}

.starterpack .grid-item-caption {
  display:inline-block;
  margin-top:20px;
  font-size:22px;
  width:100%;
}

.starterpack .grid-item-img {
  display:inline-block;
  width:86px;
  height:86px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center center;
}

.starterpack .grid-item-img.d1 {
  background-image:url(../assets/1/7/pic\ 1.png);
}

.starterpack .grid-item-img.d2 {
  background-image:url(../assets/1/7/pic\ 2.png);
}

.starterpack .grid-item-img.d3 {
  background-image:url(../assets/1/7/pic\ 3.png);
}

.starterpack .grid-item-img.d4 {
  background-image:url(../assets/1/7/pic\ 4.png);
}

.starterpack .grid-item-img.d5 {
  background-image:url(../assets/1/7/pic\ 5.png);
}

.starterpack .grid-item-img.d6 {
  background-image:url(../assets/1/7/pic\ 6.png);
}

/* SUBSCRIBE =========================================== */

section.subscribe {
  background-color:#FFF;
  padding-bottom:100px;
}

.subscribe .content {
  width:100%;
  padding:100px 0px 0px;
  text-align:center;
}

.subscribe .content h1 {
  color:#3991D8;
}

.subscribe .content p {
  font-size:22px;
  margin-top:20px;
}

.subscribe .form {
  margin-top:20px;
}

.subscribe .form input {
  padding:20px;
  width:625px;
  border:2px #E5E5E5 solid;
  border-radius:20px;
  font-size:22px;
}

.subscribe .form button {
  padding:20px 50px;
  margin-left:20px;
  background-color:#FB3C4C;
  color:#FFF;
  border:none;
  border-radius:20px;
  font-size:22px;
}

/* RESPONSIVE MEDIA QUERIES =========================================== */

@media only screen and (max-width: 1280px) {
  .technology .grid {
    grid-template-columns: auto;
  }

  .benefits .grid {
    grid-template-columns: auto auto;
  }
}