@import url("animation.css");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  transition: 0.5s;
}
::-moz-selection {
  background-color: #ff5a5a;
  color: white;
}
::selection {
  background-color: #ff5a5a;
  color: white;
}

body {
  display: flex;
  flex-wrap: wrap;
  font-family: nunito sans;
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  color: #242230;
  font-style: normal;
}

.allElement {
  padding: 170px 80px 107px;
}
a {
  color: #161b37b2;
  font-weight: bolder;
  font-size: 18px;
}
a:focus,
a:hover {
  color: #ff5a5a;
}
nav > ul > li > div {
  margin-right: 30px;
}
header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  padding: 20px 20px 10px 20px;
  background-color: #fffcf9;
  transition: 0.8s;
}
.scrolledHeader {
  background-color: #ffffff;
  box-shadow: 0 10px 50px 0 rgba(22, 27, 55, 0.2);
  transition: 0.8s;
}

.droptDownBtn > ion-icon {
  color: #161b37b2;
  font-size: 10px;
  vertical-align: middle;
}

.headerLinks {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.LogoIcon {
  flex-grow: 6;
}
nav > ul > li:last-child {
  padding-left: 30px;
  margin: inherit;
}

.getStartedbtn > a {
  font-size: 15px;
  letter-spacing: 0.2px;
  font-family: "poppins";
  font-weight: 600;
  padding: 15px 30px;
  border: 0;
  background: #ff5a5a;
  color: #fff;
  border-radius: 30px;
}
.getStartedbtn > a:hover {
  color: #fff;
  background-color: #161b37;
}
.droptDownBtn {
  text-align: center;
}
.MainSec {
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #fffcf9;
}
.leftDiv {
  width: 54%;
  text-align: left;
}
.rightDiv {
  width: 46%;
}
.mainHeadin > h1 {
  font-size: 56px;
  line-height: 1.3;
  font-family: poppins;
  font-weight: 600;
  color: #161b37;
  font-style: normal;
  margin-bottom: 10px;
}
.main {
  margin-top: 50px;
}
.companies > ul {
  display: flex;
}

.companies > ul > li {
  margin-top: 20px;
  opacity: 0.3;
  padding-right: 20px;
  transition: 0.8s;
}
.companies > ul > li:hover {
  opacity: 1;
  transition: 0.8s;
}
.mainImg {
  width: 100%;
  height: auto;
}
.childExplinks {
  padding: 0 20px 20px 20px;
  width: 20%;
  border-radius: 20px;
  background-color: #ffffff;
  position: absolute;
  box-shadow: 0 10px 50px 0 rgb(0 0 0 / 9%);
  display: none;
}
.childExplinks > li > a {
  padding: 10px;
}
.childExplinks > li {
  padding-top: 20px;
}

.expandLinks:hover + .childExplinks {
  display: block;
}
.childExplinks:hover {
  display: block;
}
.secSec {
  padding: 50px 80px 107px;
}
h2 {
  font-size: 44px;
  line-height: 1.3;
  font-family: poppins;
  font-weight: bold;
  color: #161b37;
  font-style: normal;
}

p {
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  color: #242230;
  font-style: normal;
}
.One > div {
  margin-top: 30px;
}
.OneOne > h5 {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.6em;
}
.threeBlockDiv {
  display: flex;
  margin-top: 50px;
}
.ptext {
  width: 90%;
}
h3 {
  font-size: 30px;
  line-height: 1.3;
  font-weight: bold;
  color: #161b37;
  font-style: normal;
}
.thirdSec {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 0 80px 0px;
  margin-bottom: 50px;
}
.leftDivImg {
  position: relative;
  background-color: #fdb7b7;
  width: 50%;
}
.leftImg {
  position: absolute;
}
.leftImgOne {
  top: 0;
  left: 0;
}
.leftImgTwo {
  top: 33%;
  left: 15%;
}
.leftImgThree {
  top: 22%;
  left: 50%;
}
.threerightDiv {
  width: 50%;
  padding: 90px 0 90px 40px;
}
.threerightDiv > div {
  margin: 20px 0 20px 0;
}
.threerightDiv > div > a,
.leftPlanTxt > div > a {
  color: #ff5a5a;
  text-underline-offset: 5px;
  text-decoration: underline;
}
.threerightDiv > div > a:hover,
.leftPlanTxt > div > a:hover {
  color: #161b37;
}
.rightDivbg {
  background-color: #ffd2b1;
}
.threeleftDiv {
  width: 50%;
  padding: 90px 0 90px 0;
}
.mrgnDown {
  margin-bottom: 100px;
}
.ChosePlanSec {
  display: flex;
  /* padding: 128px 20px 132px; */
  padding: 132px 80px 132px;
  background-color: #fffcf9;
  width: 100%;
}
.leftPlanTxt {
  width: 30%;
  margin-right: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.choseplantitle > h3 {
  font-size: 44px;
}

hr {
  opacity: 0.2;
  color: #161b37;
}
.StarterPlan {
  width: 33%;
}
.premiumPlan {
  width: 33%;
}

.StarterPlan,
.premiumPlan {
  border-radius: 10px;
}
.starterTitle,
.premiumTitle {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.StarterPlan,
.premiumPlan {
  background-color: #ffffff;
  display: flex;
  box-shadow: 0 10px 50px 0 rgb(0 0 0 / 9%);
  margin: 0 0 0 -10px;
  flex-direction: column;
  justify-content: space-between;
}
.StarterPlan {
  margin-top: 40px;
}
.starterTitle,
.premiumTitle {
  text-align: center;
  padding: 28px 100px 15px 100px;
}
h4 {
  font-size: 24px;
  line-height: 1.3;
  font-family: poppins;
  font-weight: 600;
  color: #161b37;
  font-style: normal;
}
.starterTitle {
  background-color: #d7d7d7;
}
.premiumTitle {
  background-color: #fdb7b7;
}
.month {
  color: #7a7a7a;
  font-size: 20px;
  font-weight: 500;
}
.starterPrice,
.premiumPrice {
  text-align: center;
  margin: 40px;
}
.features > ul > li {
  display: flex;
  align-items: center;
}
hr {
  margin-bottom: 20px;
  margin-top: 5px;
}
.features > ul > li > ion-icon {
  color: #61ce70;
  font-size: 20px;
}
.features {
  padding: 0px 40px 20px 50px;
}
.buybtn {
  margin: 30px auto;
}
.forYouSec {
  background-color: #ffffff;
  padding: 132px 80px 0px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.forYouSecImg > img {
  width: 86%;
}
.forYouSecImg {
  width: 55%;
}
.forYouSecHeading {
  text-align: center;
}
.forYouSecHeading > h1,
.forYouSecHeading > p {
  margin-top: 20px;
}
.forYouSectxt {
  padding: 0;
  width: 100%;
}
.forAllimgTxt {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.checktxt > h3 {
  margin-left: 5px;
  font-size: 24px;
}
.checktxt > ion-icon {
  color: #ff5a5a;
  border-color: #ff5a5a;
  font-size: 30px;
}
.checktxt {
  display: flex;
  align-items: center;
}
.forYouSecAlltxt {
  display: flex;
  flex-direction: column;
  padding: 50px 0 90px 0px;
  width: 45%;
}
.findOut {
  background-color: #ffd2b1;
  width: 100%;
  padding: 107px 80px 107px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
}
.findOut > * {
  text-align: center;
}
.findOut > div {
  padding: 15px;
}

.footerSec {
  padding: 107px 80px 107px;
  background-color: #161b37;
  width: 100%;
}
footer > div > h5 {
  margin: 0 0 20px;
  text-align: left;
  color: #fff;
  font-family: lato, Sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1em;
  letter-spacing: 0;
}
footer > div > ul > li > * {
  color: #ffffff;
  font-size: 18px;
  font-weight: 400;
}
footer > div > ul > li > *:hover {
  color: #70e2d9;
}
footer {
  display: flex;
  justify-content: space-around;
}
.footerInput {
  padding: 15px 20px;
  border: 0;
  font: inherit;
  color: inherit;
  margin-bottom: 20px;
  max-width: 100%;
  color: #ff5a5a;
  width: 100%;
  outline: none;
  box-shadow: none;
  border-radius: 30px;
}
.footerInput:focus {
  color: #ff5a5a;
  outline: none;
}
.sbscrBtn > a {
  padding: 20px 100px;
}
.sbscrBtn > a:hover {
  background-color: #ffffff;
  color: #ff5a5a;
}
.footerblocks {
  display: flex;
  flex-direction: column;
}
.footerblocks > ul > li {
  margin-top: 15px;
}
.socialIcons > span {
  margin-right: 20px;
}
.socialIcons > span > a {
  color: #ffffff;
  font-size: 22px;
  transition: 0.1s;
}
.socialIcons > span > a:hover {
  transition: 0.1s;
  color: #7a7a7a;
}

/* Media Queries */
@media (max-width: 767px) {
  .headerLinks {
    flex-direction: column;
    align-items: flex-start;
    margin: 5px;
  }
  .headerLinks > li {
    padding-bottom: 30px;
  }
  header {
    width: max-content;
    /* foundIt */
    display: none;
    /*  */
  }
  .headerLinks > .getStartedbtn {
    display: none;
  }
  .MainSec {
    background-color: #fafafa;
    flex-direction: column;
    text-align: center;
  }
  .ptext,
  .leftDiv,
  .rightDiv,
  .threerightDiv,
  .leftDivImg,
  .leftPlanTxt,
  .PLAN,
  .forYouSecImg,
  .forYouSecAlltxt {
    width: 100%;
  }
  .allElement,
  .secSec,
  .thirdSec,
  .ChosePlanSec,
  .findOut,
  .footerSec {
    padding: 50px 40px;
  }
  .companies > ul {
    align-items: center;
  }
  h2 {
    font-size: 30px;
  }
  .threeBlockDiv,
  .ChosePlanSec,
  .forAllimgTxt,
  .companies > ul {
    flex-direction: column;
  }
  .premiumPlan {
    margin-top: 10px;
  }

  /* .thirdSec {
    flex-direction: column;
  } */
}