/* CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}

html, body {
  width: 100%;
  min-height: 100%;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-size: 62.5%; /*10 px*/
}

:root {
  --white: #ffffff;
  --color-text: #000000;
  --color-primary: #7178BC;
  --color-secondary: #5f6368;
  --color-border: #e0e0e0;
  --gray:#FAFAFA;
  --color-muted: #f5f5f5;
  --purple: #6a0dad;
  --dark-blue: #2E3762;
  --sky:#EAF6FF;
  --blue:#1A87DB;
  --black-two:##606060;
  --font-family: 'Rajdhani', sans-serif;
}

body {
  
  color: var(--dark-blue);
  font-family: var(--font-family);
  margin: 0;
  padding: 0;
  line-height: 2.4em;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

button, [type="button"], [type="reset"], [type="submit"] {
  cursor: pointer;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button, input, optgroup, select, textarea {
  margin: 0;
}

.main_wrapper{max-width: 118rem; margin: 0 auto; padding:0 2rem}

/**Header Styles**/
header{
 padding: 1rem 7rem;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
}
header nav{flex:1;}
header nav ul{display: flex; justify-content: flex-end; gap:4rem;}
header nav ul li a{font-size: 1.6rem; font-weight: 600; color: var(--color-primary); transition: all 0.3s ease;}
header nav ul li a:hover{color:var(--color-primary); text-decoration: underline;}
/** End of Header Styles **/

/**Banner Styles**/
.banner_wrapper{
  background:url(../images/herobg.jpg) no-repeat center center/cover; 
  height: 70rem;
}
.banner_wrapper .main_wrapper{position: relative;}
.banner_wrapper .content_block{
  width: 57rem;
  color: var(--color-background);
  position: absolute;
  top:15rem;
  left: 50rem;
}
.banner_wrapper .content_block h1{font-size:6rem; font-weight: 700; line-height:6rem; margin:0 0 2rem 0; color: var(--white);}
.banner_wrapper .content_block h2{font-size:4rem; font-weight: 700; line-height:4rem; margin:0 0 2rem 0; color: var(--white);}
.banner_wrapper .content_block h3{font-size:2rem; font-weight: 700; line-height:2rem; margin:0 0 1rem 0; color:var(--dark-blue);}
.banner_wrapper .content_block p{font-size:1.6rem; font-weight: 600; line-height:3rem; margin:0 0 2rem 0; color:var(--dark-blue);}
.app_img{position: absolute; top: 40rem; right: 0; width:33.3rem; height: 39.5rem; }
/** End of Banner Styles **/

/** Problem Section Styles **/
.problem_wrapper{padding:8rem 0;}
.subtitle{font-size:2.4rem; font-weight: 700; line-height:2.4rem; margin:0 0 2rem 0; color:var(--dark-blue); position:relative; margin:0 0 5.6rem 0}
.subtitle::before{position: absolute; left: 0; top:2.6rem; width:2.8rem; height:0.4rem; background:var(--dark-blue); content:""; border-radius: 0.2rem;}

.four_block_wrapper{margin: 0; padding: 0;}
.four_block_wrapper h2{font-weight:700; font-size:4rem; line-height:4rem; margin:0 0 4rem 0; color:var(--dark-blue);}
.four_block_wrapper .inner_wrapper{display: grid; grid-template-columns: repeat(4, 1fr); grid-gap:2rem; margin: 0 0 5rem 0;}
.four_block_wrapper .inner_wrapper .block{height: 23rem; width: 100%; border-radius: 1rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; padding: 2rem; position: relative; overflow: hidden;}
.four_block_wrapper .inner_wrapper .block h4{font-size: 2rem; font-weight: 700; text-align: center; line-height: 2.6rem; color: var(--white); z-index: 1;}
.four_block_wrapper .inner_wrapper .block img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease;}
.four_block_wrapper .inner_wrapper .block:hover img{transform: scale(1.1);}
.two_wrapper{display: flex; flex-wrap: wrap; align-items: center; gap: 5rem;}
.two_wrapper .content_block{flex: 1;}
.two_wrapper .content_block h3{font-weight: 700; font-size: 3rem; color: var(--dark-blue); margin: 0 0 3rem 0; line-height:2.8rem;}
.two_wrapper .content_block h4{font-weight: 700; font-size: 2rem; color: var(--dark-blue); margin: 0 0 5rem 0; line-height: 2.6rem;}
.two_wrapper .content_block p{font-weight: 400; font-size: 2.8rem; color: var(--dark-blue); margin: 0 0 2rem 0; line-height: 3.5rem;}
.two_wrapper .content_block small{font-size: 1.6rem; font-weight: 600; color: var(--dark-blue);}
/** end of Problem Section Styles **/

/** Bio Wrapper **/
.bio_wrapper{background: var(--sky); padding: 3rem 0;}
.bio_wrapper h2{font-size: 4rem; font-weight: 700; color: var(--dark-blue); margin: 0 0 5rem 0;}
.bio_wrapper .inner{display: flex; flex-wrap: wrap; gap: 5rem;}
.bio_wrapper .inner .left_bio{margin: 0;padding: 0; flex: 1;}
.owner_card{display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; margin: 0 0 2rem 0;}
.owner_card .photo{width: 10rem; height: 12.5rem; overflow: hidden; border-radius: 1rem;}
.owner_card .photo img{object-fit: cover; width: 100%; height: 100%;}
.owner_card .details{color: var(--dark-blue); display: flex; flex-direction: column; gap: 1rem;}
.owner_card .details h3{font-size: 2rem; font-weight: 700;}
.owner_card .details p{font-size: 1.6rem; font-weight: 600;}
.owner_card .details small{font-size: 1.3rem; font-weight: 600;}
.about_wrapper{margin: 0;padding: 0;}
.about_wrapper p:not(:last-child){margin: 0 0 2rem 0;}
.about_wrapper p{font-size: 1.4rem; color: var(--dark-blue); line-height: 2.4rem; font-weight: 600;}
.about_wrapper p a{display: block;}
.about_wrapper h3{font-weight: 600; font-size: 1.4rem; margin: 0 0 1.5rem 0;}
.books_wrapper{flex-direction: column; display: flex; gap: 2rem; flex: 1;}
.books_wrapper p{font-size: 1.6rem; line-height: 2.4rem; font-weight: 500;}
.books_wrapper .block{display: flex; gap: 2rem; flex-direction:column; justify-content:center; align-items:center;}
.books_wrapper .block .photo{width: 23.1rem; height: 33.5rem; overflow: hidden; border-radius: 1rem;}
.books_wrapper .block .photo img{width: 100%; height: 100%; object-fit: cover;}
.books_wrapper .block .detailss{flex: 1; display: flex; flex-direction: column; gap: 1rem;}
.books_wrapper .block .detailss h3{font-size: 1.6rem; color: var(--dark-blue); line-height: 2.4rem;}
.books_wrapper .block .detailss h4{font-size: 1.5rem; font-weight: 600; color: var(--dark-blue);}
.books_wrapper .block .detailss p{font-size: 1.2rem; line-height: 1.6rem; font-weight: 600; color: var(--dark-blue);}
.books_wrapper .block .detailss small{font-size: 1.3rem; font-weight: 600; color: var(--dark-blue);}
/** End Bio Wrapper **/ 

/** Third Mid Row **/
.third_mid_row{padding:8rem 0;}
.third_mid_row .first_row{margin: 0 0 13rem 0;padding: 0;}
.third_mid_row .first_row .subtitle{margin: 0 0 5rem 0;}
.third_mid_row .first_row h2{font-size: 4rem; font-weight: bold; color: var(--dark-blue); margin: 0 0 3rem 0; line-height: 4.2rem;}
.third_mid_row .first_row p{font-size: 2rem; font-weight: 600; margin: 0 0 6rem 0; line-height:2.8rem;}
/*.third_mid_row .first_row h3{font-size: 2.4rem; font-weight: bold; color: var(--dark-blue); margin: 0 0 1rem 0; line-height: 3rem;}*/
.third_mid_row .first_row h4{font-size: 2rem; font-weight: bold; color: var(--dark-blue); margin: 0 0 1rem 0; line-height: 4.2rem;}
.third_mid_row .first_row ul{display: flex; flex-wrap: wrap; gap: 2rem; margin: 0 0 4rem 0;}
.third_mid_row .first_row ul li{flex: 1; display: flex; flex-wrap: wrap; gap:0.6rem; font-size: 1.8rem; font-weight: 600; align-items: center;}
/*.features{display: block; margin: 0 auto;}*/

.features {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
   
    margin: 0 auto;
}

.features img {
    display: block;
    height: auto;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Hover image sits on top */
.features .img-hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 0;
    width: 97.7rem;
    height: 73.5rem;
}

/* On hover */
.features:hover .img-default {
    opacity: 0;
}

.features:hover .img-hover {
    opacity: 1;
}

.howitworks{padding: 0; margin: 0;}
.howitworks h2{font-weight: bold; font-size: 4rem; margin: 0 0 5rem 0; line-height: 4rem;}
.howitworks .two_blocks{display: flex; flex-wrap: wrap; gap: 5rem; align-items: center;}
.howitworks .two_blocks .content{flex: 1;}
.howitworks .two_blocks .content p:not(:last-child){margin: 0 0 2rem 0;}
.howitworks .two_blocks .content p{font-size: 1.6rem; line-height: 2.4rem; font-weight: 600;}
.howitworks .two_blocks .content ul{display: flex; flex-direction: column; gap:2.2rem; margin: 3rem 0 0 0;}
.howitworks .two_blocks .content ul li h3{font-size: 2.8rem; font-weight: 400; line-height: 3rem;}
.howitworks .two_blocks .content ul li h4{font-size: 1.6rem; font-weight: 600; display: block; padding: 1.2rem 0 0 5rem;}
/** End Third Mid Row **/

/** Move Wrapper **/
.move_wrapper{background: var(--gray); padding: 3rem 0;}
.move_wrapper h2{display: flex; flex-direction: column; justify-content: center; align-items: center; gap:3.5rem; font-size: 4rem; font-weight: 700; color: var(--dark-blue);}
.move_wrapper h2 span{font-size: 3rem;}
.inner_move_wrapper{display: flex; flex-wrap: wrap;  flex-direction: column; gap: 7rem;}
.both_wrapper{display: flex; flex-wrap: wrap; gap: 4rem;}
.options_wrapper{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 3rem 10rem; flex: 1;}
.options_wrapper .block{display: flex; flex-direction: column; gap: 1.5rem;}
.options_wrapper .block img{width: 12.2rem; height: 12.2rem;}
.options_wrapper .block h3{font-size: 2rem; font-weight: 700; color: var(--dark-blue);}
.options_wrapper .block p{font-size: 1.6rem; font-weight: 600; color: var(--dark-blue); line-height: 2.2rem;}
/** End Move Wrapper **/

/**Footer**/
footer{margin: 0;padding: 0;}
.top_footer_wrapper{padding: 4rem 0 6.7rem; border-bottom: 0.1rem solid var(--blue);}
.top_footer_wrapper h2{display: block; text-align: center; font-weight: 700; font-size: 2rem; text-transform: uppercase; margin: 0 0 4.3rem 0;}
.top_footer_wrapper p{font-size: 1.6rem; font-weight: 500; display: block; text-align: center;}
.top_footer_wrapper p:not(:last-child){margin: 0 0 2rem 0;}
.top_footer_wrapper a.email{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-size: 1.4rem; font-weight: 600; margin: 0 0 2.3rem 0;}
.top_footer_wrapper a.email img{margin: 0 1rem 0 0;}
.top_footer_wrapper a.btn{width: 19rem; height: 4.4rem; margin: 0 auto; display: flex; justify-content: center; align-items: center; background: var(--color-primary); border-radius: 1rem; font-size: 1.6rem; color: var(--white); font-weight: 600;}
.bottom_footer{padding: 2rem 0;}
.bottom_footer .main_wrapper{display: flex; flex-wrap: wrap; justify-content: space-between;}
.bottom_footer .main_wrapper p{font-size: 1.4rem; color:var(--black-two); font-weight: 600;}
.bottom_footer .main_wrapper a{color: var(--color-primary); text-decoration: none; font-size: 1.4rem; font-weight: 600;}
.bottom_footer .main_wrapper span{margin: 0 1rem; color: var(--color-primary);}
/** End Footer **/

.privacy_template{background: url(../images/priva_bg.jpg) no-repeat center center/cover; position: relative;}
.policy_template{background: url(../images/policy.jpg) no-repeat center center/cover; position: relative;}
.privacy_template .content_block,
.policy_template .content_block{left: 0;}
.privacy_template .content_block h3,
.privacy_template .content_block p,
.policy_template .content_block h3,
.policy_template .content_block p{color: var(--white) !important;}
.privacy_template .app_img,
.policy_template .app_img{width: 54.7rem; height: 64.9rem; top: 15rem;}
.main_content_wrapper{padding: 8rem 0;}
.main_content_wrapper h2{font-size: 3rem; font-weight: 700; color: var(--dark-blue); margin: 0 0 3rem 0;}
.main_content_wrapper h3{font-size: 2rem; font-weight: 700; color: var(--dark-blue); margin: 0 0 2rem 0;}
.main_content_wrapper p{margin: 0 0 2rem 0; font-size: 1.6rem; line-height: 2.4rem; color: var(--dark-blue); font-weight: 500;}
.main_content_wrapper p:not(:last-child){margin: 0 0 2rem 0;}
.main_content_wrapper ul,
.main_content_wrapper ol{margin: 0 0 2rem 1rem; display: flex; flex-direction: column; gap: 1rem; list-style:inherit;}
.main_content_wrapper ol{list-style: inherit;}
.main_content_wrapper ul li,
.main_content_wrapper ol li{font-size: 1.6rem; line-height: 2.4rem; color: var(--dark-blue); font-weight: 500; position: relative; padding: 0;}
.mobile_close{display: none;}
.totop{position: fixed; right: 2rem; bottom: 2rem; width: 3.4rem; height: 3.4rem;}

ul.points{margin:8rem 0 !important;  list-style:none; gap:4rem !important;}
ul.points li{padding:0 0 0 2.5rem !important; font-size:2.8rem !important; font-weight:bold !important; color:var(--dark-blue); position:relative; flex:unset !important;}
ul.points li::before{position:absolute; left:0; top:0; width:13px; height:13px; background:#7178BC; content:""; border-radius: 100%;}

@media only screen and (max-width:767px) {
.mobile_close{display: block;}

/* Header */
header{
    padding: 1.5rem 2rem;
    justify-content: space-between;
}
header nav{
   position: fixed;
   left: 0;
   top: 0;
   background: var(--dark-blue);
   width: 100%;
   height: 100vh;
   padding: 4rem;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

header nav ul{flex-direction: column; justify-content: center; align-items: center; gap: 2rem;}
header nav ul li:not(:last-child){margin: 0 0 3rem 0;}
header nav ul li a{font-size: 2rem;}
header nav ul li:not(:last-child){margin: unset;}

.mobile_close{position: absolute; top: 2rem; right: 2rem; color: var(--white); font-size: 4rem; font-weight: 300; text-decoration: none;}
header .mobile_nav {
    width: 2.6rem;
    text-decoration: none;
    margin-right: 0;
    display: inline-block;
    vertical-align: middle;
}
header .mobile_nav span {
    background: var(--dark-blue);
    width: 100%;
    height: 0.4rem;
    display: block;
}
header .mobile_nav span:not(:last-child) {
    margin-bottom: 0.5rem;
}
.banner_wrapper{padding: 4rem 0; background-position: 65% 0; height: 58rem;}
.banner_wrapper .content_block{position: unset; width: 100%;}
.banner_wrapper .content_block h1,
.banner_wrapper .content_block h2{text-align: center;}
.banner_wrapper .content_block h1{font-size: 5rem; line-height: 5rem; margin: 0;}
.banner_wrapper .content_block h2{font-size:3rem; line-height: 5.5rem; margin: 0 0 1rem 0;}
.banner_wrapper .content_block h3,
.banner_wrapper .content_block p{color: var(--white); text-align: center;}
.banner_wrapper .content_block a.btn{display: flex; justify-content: center;}
.app_img{width: 22rem; height: auto; left: 0; margin: 0 auto; top: 35rem;}

.problem_wrapper{padding-bottom: 4rem; padding-top:10rem;}
.subtitle,
.third_mid_row .first_row .subtitle{margin-bottom: 3rem;}
.subtitle::before{top: 3.6rem;}
.four_block_wrapper h2{font-size: 3rem; line-height: 3.5rem; margin: 0 0 2rem 0;}
.four_block_wrapper .inner_wrapper{grid-template-columns: repeat(1,1fr);}
.two_wrapper .content_block h3{font-size: 2.5rem; line-height:2.8rem;}

.bio_wrapper h2{font-size: 2.8rem; line-height: 3rem; margin: 0 0 2rem 0;}
.bio_wrapper .inner{flex-direction: column; gap: 2rem;}
.books_wrapper{gap:3rem;}
.third_mid_row{padding: 4rem 0;}
.third_mid_row .first_row h2{font-size: 2.5rem; line-height: 3rem;}
.third_mid_row .first_row p{line-height: 2.4rem; margin: 0 0 3rem 0;}
.third_mid_row .first_row ul{flex-direction: column; gap: 1rem;}
.third_mid_row .first_row{margin-bottom: 4rem;}
.third_mid_row .first_row h3{font-size: 2.5rem;}
.howitworks h2{font-size: 2.5rem; margin: 0 0 2rem 0;}
.howitworks .two_blocks .content ul li h3{font-size: 2.2rem;}
.howitworks .two_blocks{flex-direction: column;}
.howitworks .two_blocks .content ul li h3{font-size: 1.8rem;}
.howitworks .two_blocks .content ul li h4{padding-left: 3rem; padding-top: 0.2rem;}
.howitworks .two_blocks .content ul{gap: 1.5rem;}

.inner_move_wrapper{gap: 3rem;}
.move_wrapper h2{font-size: 2.5rem; gap: 1.5rem;}
.move_wrapper h2 span{font-size: 2rem;}
.options_wrapper{grid-gap: 2rem;}
.options_wrapper .block h3{line-height: 2.5rem;}
.options_wrapper .block img{width: 8.5rem; height: 8.5rem;}
.bottom_footer .main_wrapper{flex-direction: column; justify-content: center; align-items: center;}
.bottom_footer .main_wrapper p{order: 1; margin: 1rem 0 0 0; text-align:center;}
.top_footer_wrapper a.email span br{display: none;}

.privacy_template .app_img,
.policy_template .app_img{width: 25rem; height: auto; top: 30rem;}

.privacy_template .content_block h1,
.policy_template .content_block h1{font-size: 4rem; line-height: 4.5rem;}
.banner_wrapper .content_block h2{line-height: 4rem;}

.features .img-hover{height: auto; opacity:100 !important;}
.features .img-default {opacity:0;}

ul.points{margin: 4rem 0 !important; gap:2rem !important}
ul.points li{font-size:1.8rem !important;}
ul.points li:not(:last-child){margin: unset !important;}
.two_wrapper .content_block h4{margin-bottom:2rem;}
}


@media only screen and (min-width:768px) and (max-width:1023px) {
  .mobile_close{display: block;}

/* Header */
header{
    padding: 1.5rem 2rem;
    justify-content: space-between;
}
header nav{
   position: fixed;
   left: 0;
   top: 0;
   background: var(--dark-blue);
   width: 100%;
   height: 100vh;
   padding: 4rem;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

header nav ul{flex-direction: column; justify-content: center; align-items: center; gap: 2rem;}
header nav ul li:not(:last-child){margin: 0 0 3rem 0;}
header nav ul li a{font-size: 2rem;}
header nav ul li:not(:last-child){margin: unset;}

.mobile_close{position: absolute; top: 2rem; right: 2rem; color: var(--white); font-size: 4rem; font-weight: 300; text-decoration: none;}
header .mobile_nav {
    width: 2.6rem;
    text-decoration: none;
    margin-right: 0;
    display: inline-block;
    vertical-align: middle;
}
header .mobile_nav span {
    background: var(--dark-blue);
    width: 100%;
    height: 0.4rem;
    display: block;
}
header .mobile_nav span:not(:last-child) {
    margin-bottom: 0.5rem;
}
.banner_wrapper{height: 50rem;}
.banner_wrapper .content_block{left: 6rem;}
.banner_wrapper .content_block h1{font-size: 3.5rem; margin: 0 ; line-height: 4.5rem;}
.banner_wrapper .content_block h2{margin: 0 0 1rem 0; font-size: 3rem;}
.banner_wrapper .content_block h3,
.banner_wrapper .content_block p{color: var(--white);}
.app_img{top: 15rem;}

.four_block_wrapper h2{font-size: 3rem;}
.img_block{margin: 0 auto;}
.bio_wrapper h2{font-size: 3rem;}
.bio_wrapper .inner{flex-direction: column; gap: 3rem;}
.books_wrapper{gap: 3rem;}
.third_mid_row{padding: 8rem 0;}
.third_mid_row .first_row p{line-height: 2.6rem;}
.third_mid_row .first_row ul li{line-height: 2.2rem;}
.pic_holder{margin: 0 auto;}
.indi_wrapper{margin: 0 auto;}
.top_footer_wrapper a.email span br{display: none;}

.privacy_template .app_img,
.policy_template .app_img{width: 34rem; height: auto; top: 17rem;}
.privacy_template .content_block,
.policy_template .content_block{top: 10rem;}

.features .img-hover{height: auto;}
ul.points li:not(:last-child){margin: unset !important;}
}

@media only screen and (min-width:1024px) and (max-width:1200px) {
  header{padding: 1rem 2rem;}
  header nav ul{gap: 2rem;}

  .banner_wrapper .content_block{left: 40rem;}
  .app_img{right: 4rem;}
  .third_mid_row .first_row p{line-height: 2.5rem;}
  .pic_holder{width: 40rem;}
  .privacy_template .content_block{left: 6rem;}

  .features .img-hover{height: auto;}


}