/* main header */

.mainPageHeader{
    padding:0px 0 15px;
    width: 100%;
    display:flex;
    height: 80px;
    justify-content: space-between;
    background-color: white;
    z-index: 4;
    top:0px;
}
@media (min-width:820px){
    .mainPageHeader{
        position: fixed;
    }
}
.bigScreenLeftHeader, .bigScreenRightHeader{
    display:flex;
    align-items: flex-end;
}
.bigScreenLeftHeader{
    margin-left:var(--mediumScreen-mainBox-padding);
}
.bigScreenRightHeader{
    margin-right:var(--mediumScreen-mainBox-padding);
}
.smallScreenLeftHeader, .smallScreenRightHeader, .smallScreenMiddleHeader{
    display:none;
}
.bigScreenLeftHeader img{
    width:220px;
}
@media (min-width:1100px){
    .bigScreenLeftHeader img{
        height:65px;
    }
}
.navigationItems{
    padding:10px;
    margin-left:40px;
    color: var(--footer-txt-color);
    font-size:var(--p-bigScreen-fontSize);
    font-weight:500;
    border-bottom:2px solid #daf1ea;
    align-items: center;
}
.navigationItems:hover{
    background-color: #daf1ea;
    border-radius:5px;
    transition: 0.2s ease-in;
}

.loginButton{
    width:90px;
    border:none;
    background-color: white;
    border:1px solid black;
    font-family:uptoddBold;
    font-size:18px;
    height:50px;
    margin-right:20px;
    border-radius: 5px;
}

.headerBookNow{
    border: none;
    outline: none;
    position: relative;
    z-index: 0;
}


.headerBookNow:before {
    content: '';
    background: linear-gradient(45deg, #1a477f, #36B69B, #FFE6FD, #CBAFD4, #CBAFD4, #FFE6FD, #36B69B, #1a477f);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.headerBookNow:before {
    opacity: 0.4;
}

.headerBookNow:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

@media (max-width:1100px){
    .mainPageHeader{
        padding:0px 0 10px;
        height: 70px;
    }
    
    .bigScreenLeftHeader img{
        width:180px;
    }
    .navigationItems{
        padding-bottom:5px;
        margin-left:30px;
        font-size:var(--p-smallScreen-fontSize);
    }
    .loginButton{
        width:90px;
        font-size:12px;
        height:40px;
        margin-right:10px;
    }
}
@media (max-width:820px){
    .bigScreenLeftHeader, .bigScreenRightHeader{
        display:none;
    }
    .smallScreenLeftHeader, .smallScreenRightHeader, .smallScreenMiddleHeader{
        display:flex;
        align-items: flex-end;
    }
    .smallScreenLeftHeader{
        margin-left:var(--mediumScreen-mainBox-padding);
    }
    .smallScreenRightHeader{
        margin-right:var(--mediumScreen-mainBox-padding);
    }
    .mainPageHeader{
        height: 60px;
    }
    .mainPageHeader img{
        width:200px;
        margin-bottom:-8px;
    }
    .mainPageHeader i{
        font-size:25px;
        color:var(--footer-txt-color);
        margin-bottom:5px;
    }
    .mainPageHeader button{
        margin-right:0px;
        height:50px;
        width:75px;
        color:var(--footer-txt-color);
    }
}

@media (max-width:450px){
    .mainPageHeader{
        height:60px;
        padding:0px 0px 10px;
    }
    .smallScreenLeftHeader{
        margin-left:15px;
    }
    .smallScreenRightHeader{
        margin-right:15px;
    }
    .mainPageHeader img{
        width:150px;
    }
    .mainPageHeader i{
        font-size:25px;
    }
}

@media (max-width:320px){
    .mainPageHeader img{
        width:120px;
        margin-bottom: 5px;
    }
    .mainPageHeader i{
        font-size:20px;
        margin-bottom:5px;
    }
    .mainPageHeader button{
        height:40px;
        width:60px;
    }
}

/* main header */



/* mainBanner */
@media (min-width:1000px){
    .mainPageBanner{
        background-image: url('../images/upbg.png');
    }
}
.mainPageBanner{
    background-repeat: no-repeat;
    margin-top:95px;
}
.bannerContent{
    padding:50px 0px 60px var(--mediumScreen-mainBox-padding);
    max-width: 100%;
    display:flex;
}
.bannerText{
    padding:40px 50px 0px 0px;
}
.bannerText div{
    display:block;
}
.bannerText h1{
    margin-bottom:20px;
    font-size:35px;
    font-weight:bold;
}
.bannerText p{
    line-height: 1.5em;
    margin-bottom:30px;
    font-weight: 500;
    font-size:16px;
}
.bannerText span{
 margin-left:10px;
 font-size:15px;
}
.bannerVisual{
    position: relative;
    height:460px;
}
.bannerVisual img{
    height:450px;
}
@keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  
  @keyframes drop {
    0% {
      bottom: -10px;
      opacity: 1;
    }
    
    65% {
      opacity: 1;
    }
    
    100% {
      opacity: 0;
      bottom: -100px;
    }
  }
  
  @keyframes wave {
    0% {
      background-position: 0 160px;
      background-size: 170px 300px;
    }
    
    100% {
      background-position: 500px -18px;
      background-size: 250px 150px;
    }
  }
  
  .loader {
    width: 125px;
    height: 40px;
    position: absolute;
    left:38%;
    bottom:4%;
    text-align: center;
    line-height: 0px;
    cursor: pointer;
  }
  .loader span {
    z-index: 1;
    color:white;
    font-size:16px;
  }
  
  .loader-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: transparent repeat-x 0 100px/150px 300px url('../images/use_mainpage.png'); 
    z-index: 1;
    animation: wave 2s ease-out forwards;
    border-radius:10px;
  }
  
  .drops {
    -webkit-filter: url('#liquid');
    filter: url('#liquid');
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index: 1;
    opacity: 0;
    animation: fade-in 2s linear .4s forwards;
  }
  
  .drop1 , .drop2 {
    width: 21px;
    height: 24px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #10a7c1;
  }
  
  .drop1 {
    width: 90px;
    height: 16px;
    bottom: 2px;
    border-radius: 0;
  }
  @media (max-width:1120px){
    .drop1 {
      width: 23px;
      height: 4px;
    }
  }
  .drop2 {
    animation: drop 2.5s cubic-bezier(1,.19,.66,.12) 0.9s infinite;
  }
/* .bannerVisual button{
    color:var(--main-web-color);
    font-size:13px;
    position: absolute;
    width:125px;
    height:40px;
    left:40%;
    bottom:22%;
    border:none;
    border:2px solid var(--main-web-color);
    background: transparent;
    border-radius: 10px;
} */
.smallScreenBookNow{
     margin-left:-12px;
    display: none;
    width:94%;
    /* border:1px solid var(--box-border-color); */
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 6px 0 rgba(0, 0, 0, 0.19);
    padding:10px;
    background-color:white;
}

@media (max-width:1110px){
    .mainPageBanner{
        margin-top:80px;
    }
    .bannerContent{
        padding:60px var(--mediumScreen-mainBox-padding) 100px;
    }
    .bannerText{
        padding:0px 30px 0px 0px;
    }
    .bannerText h1{
        margin-bottom:20px;
        font-size:22px;
    }
    .bannerText p{
        font-size:var(--p-smallScreen-fontSize);
    }
    .bannerText span{
     font-size:13px;
    }
    .bannerVisual img{
        width:400px;
        height: 500px;
    }
    /* .bannerVisual button{
        font-size:12px;
        width:100px;
        height:30px;
        left:37%;
        bottom:23%;
    } */
    .loader {
        width:100px;
        height:30px;
        left:37%;
        bottom:7%;
      }
      .loader span {
        font-size:12px;
      }
}
@media (max-width:820px){
    .mainPageBanner{
        margin-top:20px;
    }
    .bannerContent{
        padding:10px 15px 20px;
        max-width: 100%;
        display:flex;
        flex-wrap: wrap;
    }
    .bannerText{
        padding:0px;
    }
    .bannerText div{
        display:none;
    }
    .bannerText h1{
        margin-bottom:15px;
        font-size:21px;
        line-height: 1.3;
    }
    .bannerVisual{
        margin-bottom: 20px;
        text-align: center;
        height:310px;
    }
    .bannerVisual img{
        width:90%;
        height:370px;
    }
    /* .bannerVisual button{
        left:42%;
        bottom:22%;
    } */
    .loader {
        left:42%;
        bottom:5%;
    }
    .smallScreenBookNow{
        display: block;
        position:fixed;
        bottom:0
    }
    .smallScreenBookNow span{
        margin-left:0px;
        font-size:12px;
    }
}
@media (max-width:500px){
    .bannerVisual img{
        width:95%;
    }
    /* .bannerVisual button{
        left:35%;
        bottom:22%;
    } */
    .loader {
        width:90px;
        height:25px;
        left:35%;
        bottom:6%;
    }
}
/* mainBanner */

/* babySkills */


.dreamsAndSkills{
    padding:0px var(--fullScreen-mainBox-padding);
    max-width: 100%;
}

.babySkills{
    padding: 40px 0px;
    text-align:center;
    border:1px solid var(--box-border-color);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 15px 10px 0 rgba(0, 0, 0, 0.19);
    z-index: 5;
}
.babySkills h3{
    font-size:25px;
    margin-bottom:50px;
}
.skillList{
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 20px;
    
}
.skillItem{
    width:180px;
    margin-left:10px;
}
.skillItem p{
    margin-top:10px;
    line-height: 1;
    font-size:16px;
}
.skillItem img{
    width:55px;
    height:55px;
}
.skillList div:first-of-type{
    margin-left:0px;
}
.largeScreenSkillList{
    display:flex;
}
.largeScreenSkillList div:first-of-type{
    margin-top:30px;
}
.babySkills div:first-of-type{
    margin-bottom:30px;
}
.smallScreenSkillList{
    display:none;
}
@media (max-width:1100px){
    .dreamsAndSkills{
        padding:0px var(--mediumScreen-mainBox-padding);
    }
    .skillItem img{
        width:40px;
        height:40px;
    }
    .skillItem p{
        font-size:14px;
    }
}
@media (max-width:850px){
    .skillItem p{
        font-size:14px;
    }
}
@media (max-width:700px){
    .skillList{
        flex-wrap: wrap;
    }
    .skillItem{
        width:165px;
        margin-left:0px;
    }
    .skillItem img{
        width:40px;
        height:40px;
    }
    .largeScreenSkillList{
        display:none;
    }
    .smallScreenSkillList{
        display:flex;
        margin-bottom:0px;
    }
    .smallScreenSkillList div:first-of-type{
        margin-top:29px;
    }
}
@media (max-width:610px){
    .skillItem{
        width:140px;
    }
}
@media (max-width:525px){
    .skillItem{
        width:120px;
    }
}
@media (max-width:500px){
    .dreamsAndSkills{
        padding:0px var(--smallScreen-mainBox-padding);
    }
    .babySkills h3{
        font-size:22px;
    }
}
@media (max-width:440px){
    .skillItem{
        width:100px;
    }
}
@media (max-width:370px){
    .skillItem{
        width:80px;
    }
}

/* babySkills */

/* parentsDream */


.dreamText{
    padding:20px 0px 60px;
    text-align: center;
}
.dreamText p:first-of-type{
    margin-bottom: 30px;
}
.dreamText p{
    line-height: 1.6em;
    font-weight: 500;
    font-size:17px;
}
.dreamText p i{
    color: #ffd700;
}
.dreamText p span{
    font-weight: bold;
    color:black;
}
@media (max-width:1100px){
    .dreamText{
        padding:30px 0px 0px 20px;
    }
    .dreamText p{
        margin-bottom:30px;
        font-size:16px;
    }
}
@media (max-width:750px){
    .dreamText{
        padding:20px 10px 0px 10px;
    }
}
@media (max-width:500px){
    .dreamText p{
        font-size:14px;
    }
}

/* parentsDream */

/* expertGuidance */

.expertGuidance{
    padding:0px var(--fullScreen-mainBox-padding);
    max-width: 100%;
}
.expertCardAndText{
    display:flex;
}
.expertCard{
    margin-right:40px;
}
.expertCard img{
    width:540px;
}
.expertText h2{
    margin-bottom:20px;
    font-size:22px;
}
.expertText p{
    line-height: 1.7;
    margin-bottom:30px;
    font-weight: 500;
}
@media (max-width:1100px){
    .expertGuidance{
        padding:0px var(--mediumScreen-mainBox-padding);
    }
    .expertCard{
        margin-right:20px;
    }
    .expertCard img{
        width:450px;
    }
    .expertText h2{
        font-size:16px;
    }
    .expertText p{
        font-size:14px;
    }
}
@media (max-width:750px){
    .expertGuidance{
        padding:0px var(--fullScreen-mainBox-padding);
    }
    .expertCardAndText{
        flex-wrap: wrap;
    }
    .expertCard{
        margin-right:0px;
    }
    .expertCard img{
        width:100%;
        margin-bottom:20px;
    }
}
@media (max-width:500px){
    .expertGuidance{
        padding:0px var(--smallScreen-mainBox-padding);
    }
    .expertCard img{
        width:100%;
    }
    .expertText p{
        font-size:13px;
    }
}

.whyUptodd .expertText p:first-of-type{
    margin-bottom:20px;
}
.emphasizedText{
    display:flex;
    border-left:3px solid var(--main-web-color);
    padding-left:15px;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 30px;
}
.emphasizedText h6{
    font-size:20px;
    color: var(--secondMain-web-color);
    text-align: right;
}
.emphasizedText h6:first-of-type{
    text-align: left;
}
.emphasizedText h4{
    margin:8px 0px 8px;
    font-size:15px;
    font-family:uptodd;
    letter-spacing: 0.1em;
}

/* expertGuidance */

/* productList */

.uptoddProducts{
    padding:0px var(--fullScreen-mainBox-padding);
    max-width: 100%;
}
.productNavigation{
    text-align:center;
    margin-bottom:50px;
}
.productNavigation button{
    height:60px;
    width:150px;
    color:black;
    background-color: white;
    font-size:16px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 5px 10px 0 rgba(0, 0, 0, 0.19);
    border-radius: 5px;
    position: relative;
}
.productNavigation .active{
    color:white;
    background-color: var(--main-web-color);
    border:none;
}
.bottomArrowOnButton{
    position: absolute;
    width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
    border-top: 30px solid var(--main-web-color);
    left:45px;
}
.productList{
    display:flex;
    justify-content: space-between;
}
#shortPeriodProduct{
    display:none;
}
.productItem{
    width:31%;
    background-color:white;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 5px 10px 0 rgba(0, 0, 0, 0.19);
}

.productHeader, .productBody, .productFooter{
    padding:25px 20px;
    padding-bottom:30px;
}
.productHeader{
    background-color: var(--main-color-shade);
}
.productHeader h3{
    font-size: 20px;
    margin-bottom:30px;
}
.productHeader p{
    text-align:center;
    width:80px;
    line-height: 1.3;
    background-color: var(--main-web-color);
    color:white;
    font-family: uptoddBold;
    font-size:11px;
    padding:2px;
}
.productItem:hover{
    box-shadow: 0 10px 48px 0 rgba(0, 0, 0, 0.2), 0 20px 90px 0 rgba(0, 0, 0, 0.19);
    transition: 0.4s;
}
.productItem:hover .productHeader{
    background-color: var(--main-web-color);
}
.productItem:hover .productHeader h3{
    color: white;
}
.productItem:hover .productHeader p{
    background-color: white;
    color:var(--main-web-color);
}
.productItem h6{
    font-size:12px;
    padding:5px 7px;
    width:150px;
    color:white;
    text-align:center;
}
#mostPopular{
    background-color:#F58624;
}
#bestValue{
    background-color:var(--main-web-color);
}

.productBody{
    border-bottom:1px solid var(--box-border-color);
}
.productBody h3{
    font-size: 16px;
    margin-bottom:8px;
}
.productBody ul{
    padding-left:15px;
    margin-bottom:20px;
}
.productBody ul li{
    line-height: 1.8;
    font-size:14px;
}
.productBody a{
    font-size:14px;
    color:var(--main-web-color);
    font-weight: bold;
    margin-bottom:5px;
}

.productBody button{
    font-size:12px;
    color:var(--main-web-color);
    border:1px solid var(--main-web-color);
    background-color: transparent;
    padding:4px;
}
.productBody p{
    line-height: 1.4em;
    font-size:13px;
    font-weight:bold;
}
.productFooter h3{
    font-size: 24px;
    margin-bottom:4px;
}
.productFooter p{
    line-height: 1;
    margin-bottom:25px;
    font-size:13px;
    color:var(--secondMain-web-color);
}
.productFooter h3 s{
    font-size: 14px;
    font-weight: 100;
    font-family: uptodd;
}
.productFooter button{
    width:100%;
    border:none;
    background-color: var(--main-web-color);
    color:white;
    font-family:uptoddBold;
    font-size:16px;
    height:45px;
    border-radius: 5px;
}
.productFooter h5 i{
    color:var(--main-web-color);
}
.productFooter h5{
    font-size:18px;
}

.productDisclaimer{
    display:flex;
    margin-top:80px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.productDisclaimer p{
    font-size:13px;
}

@media (max-width:1300px){
    .uptoddProducts{
        padding:0px var(--mediumScreen-mainBox-padding);
    }
}

@media (max-width:1100px){
    .productItem{
        width:32%;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    }
    .productHeader, .productBody, .productFooter{
        padding:15px 10px;
        padding-bottom:25px;
    }
    .productHeader h3{
        font-size: 18px;
        margin-bottom:25px;
    }
    .productHeader p{
        font-size:11px;
    }
    .productBody h3{
        font-size: 15px;
    }
    .productBody ul li{
        font-size:12px;
    }
    .productBody a{
        font-size:12px;
    }
    .productFooter h3{
        font-size: 23px;
    }
    .productFooter h3 s{
        font-size: 12px;
    }
    .productFooter button{
        font-size:15px;
        height:35px;
    }
    .productFooter h5{
        font-size:14px;
    }
    .productDisclaimer{
        margin-top:40px;
    }
    .productDisclaimer p{
        font-size:12px;
        margin-bottom:15px;
    }
}

@media (max-width:1000px){
    .productItem{
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.19);
    }
}
@media (max-width:900px){
    .productNavigation{
        text-align:center;
        margin-left:20px;
    }
    .uptoddProducts{
        padding:0px var(--smallScreen-mainBox-padding) 0px 0px;
    }
    .productList{
        overflow-x: scroll;
        padding-bottom:20px;
    }
    .productItem{
        min-width:40%;
        margin-left:20px;
    }
    .productDisclaimer{
        padding: 0px var(--smallScreen-mainBox-padding);
    }
}
@media (max-width:750px){
    .productItem{
        min-width:50%;
    }
}
@media (max-width:620px){
    .productItem{
        min-width:60%;
    }
}
@media (max-width:500px){
    .productNavigation button{
        height:50px;
        width:110px;
        font-size:14px;
    }
    .bottomArrowOnButton{
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-top: 25px solid var(--main-web-color);
        left:35px;
    }

    .productItem{
        min-width:80%;
    }
    .productItem:hover{
        box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.2), 0 10px 40px 0 rgba(0, 0, 0, 0.19);
        transition: 0.4s;
    }
    .productItem h6{
        font-size:10px;
        width:130px;
    }
    .productHeader h3{
        font-size: 18px;
        margin-bottom:20px;
    }
    .productHeader p{
        font-size:11px;
    }
    .productBody h3{
        font-size: 14px;
    }
    .productBody ul li{
        line-height: 1.6;
        font-size:13px;
    }
    .productBody a{
        font-size:11px;
    }
    .productFooter h3{
        font-size: 20px;
    }
    .productFooter h5{
        font-size:12px;
    }
    .productFooter p{
        font-size:13px;
    }
    
}
@media (max-width:360px){
    .productItem{
        min-width:90%;
        margin-left:10px;
    }
}
@media (max-width:300px){
    .productItem{
        min-width:100%;
    }
}

/* productList */

/* footer */

.webFooter{
    padding:0px var(--fullScreen-mainBox-padding);
    max-width: 100%;
}
.webFooter p, .webFooter li{
    text-align: justify;
    text-justify: inter-word;
}
.shortIntroAndAllLinks{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 60px;
}
.introLogo img{
    width:200px;
}
.shortIntro{
    max-width:450px;
}
.shortIntro .intro{
    margin-bottom: 15px;
}


/* social media links*/
.socialMediaLinks{
    display: flex;
}
.socialMediaLinks div{
    width:30px;
    height: 30px;
    background-color: var(--box-border-color);
    display:flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    margin-right:15px;
}
.socialMediaLinks i{
    color:white;
}
.socialMediaLinks div:hover{
    background-color: var(--footer-txt-color);
}
/* social media links*/

.webLinks{
    display:flex;
    flex-grow: 1;
    justify-content: space-evenly;
    /*border:1px solid red;*/
}
.webLinks h2{
    margin-bottom: 5px;
}
.webLinks a{
    color:var(--footer-txt-color);
}

/* Faqs related css*/
.FaqsItem{
    margin-bottom:30px;
}
.FaqsItem h3{
    color: var(--footer-txt-color);
    margin-bottom:5px;
    font-size:19px;
}

/* bottom most footer*/
.footerBottom{
    border-top:1px solid var(--box-border-color);
    border-bottom:1px solid var(--box-border-color);
    padding: 30px 0px;
    margin-bottom: 10px;
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.madeWithLove span{
    color:var(--love-color);
}


@media (max-width:1100px){
    .webFooter{
        padding:0px var(--mediumScreen-mainBox-padding);
    }
}
@media (max-width:820px){
    .shortIntro{
        max-width:100%;
        margin-bottom:40px;
    }
    .webLinks{
        justify-content: stretch;
    }
    .webLinks div:first-of-type{
        margin-right:60px;
    }
}
@media (max-width:420px){
    .webFooter{
        padding:0px var(--smallScreen-mainBox-padding);
    }
    .shortIntroAndAllLinks{
        margin-bottom: 50px;
    }
    .webLinks{
        flex-wrap: wrap;
    }
    .webLinks div:first-of-type{
        margin-right:30px;
    }
    .webLinks h2{
        font-size:18px;
    }
    .FaqsItem h3{
        font-size:17px;
    }
    .footerBottom{
        padding: 15px 0px;
    }
    .copyright{
        margin-bottom:10px;
    }
}


/* footer */

/* institutions */



/* insitutions */
.broughtToYouBy{
    padding:0px var(--fullScreen-mainBox-padding);
    max-width: 100%;
    text-align:center;
}
.twoLineHeading{
    display: flex;
    justify-content: center;
}
.twoLineHeading h3{
    width:80%;
    line-height: 1.6em;
}
.institutionsList{
    display:flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
}
.institutionItem img{
    height:160px;
}
@media (max-width:1100px){
    .twoLineHeading h3{
        width:90%;
    }
    .broughtToYouBy{
        padding:0px var(--mediumScreen-mainBox-padding);
    }
    .institutionsList img{
        margin-bottom:20px;
    }
}
@media (max-width:500px){
    .twoLineHeading h3{
        width:100%;
    }
    .broughtToYouBy{
        padding:0px var(--smallScreen-mainBox-padding);
    }
    .institutionsList{
        justify-content: space-evenly;
    }
    .institutionsList img{
        height:100px;
    }
    #outOfOrder img{
        height:60px;
    }
}

/* institutions */

/* uptoddMentors */

.uptoddMentors{
    padding:0px var(--fullScreen-mainBox-padding);
    max-width: 100%;
    text-align:center;
}
.mentorsShowcase{
    display:flex;
    justify-content: space-between;
}
.metorItem img{
    margin-bottom: 25px;
    width:140px;
    height:140px;
    border-radius: 50%;
    background-color:#ecf8f4;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.metorItem img:hover{
    box-shadow: none;
}
.metorItem h5{
    margin-bottom: 15px;
    color:var(--footer-txt-color);
    font-weight:bold;
    font-size:14px;
}
.metorItem p{
    color:var(--footer-txt-color);
    font-size:11px;
}
@media (max-width:1100px){
    .uptoddMentors{
        padding:0px var(--mediumScreen-mainBox-padding);
    }
}
@media (max-width:900px){
    .uptoddMentors{
        padding:0px;
    }
    .mentorsShowcase{
        overflow-x: scroll;
        padding-bottom:20px;
    }
    .metorItem{
        margin-left:30px;
    }
    .metorItem img{
        width:100px;
        height:100px;
    }
    .metorItem h5{
        font-size:12px;
    }
    .metorItem p{
        font-size:9px;
    }
}

/* uptoddMentors */

/* joinUptodd */



/* Join uptodd revolution */

.joinUptodd{
    padding:0px var(--fullScreen-mainBox-padding);
    max-width: 100%;
}
.revolutionStats{
    display:flex;
}
.appContent{
    padding:20px 30px 0px 20px;
    display:flex;
    width:58%;
}
.appImage{
    display:flex;
    align-items: flex-end;
    margin-left:30px;
}
.appImage img{
    height:250px;
}
.appLinks h3{
    font-family: uptodd;
    font-size:22px;
    margin-bottom:30px;
}
.appLinks p{
    margin-bottom:50px;
}
.appLinks img{
    width:120px;
    height:38px;
}
.uptoddStats{
    background-color:var(--main-color-shade);
    padding:20px;
    width:42%;
}
.uptoddStats div{
    margin-top:20px;
}
.uptoddStats div:first-of-type{
    margin-top:0px;
}
.statsItem{
    display:flex;
}
.statsItem img{
    margin-right:30px;
    width: 100px;
}
.statsItem h2{
    font-size:22px;
}

@media (max-width:1100px){
    .joinUptodd{
        padding:0px var(--mediumScreen-mainBox-padding);
    }
    .appContent{
        padding:10px 15px 0px 10px;
        width:58%;
    }
    .appImage{
        margin-left:15px;
    }
    .appImage img{
        height:250px;
    }
    .appLinks h3{
        font-size:18px;
        margin-bottom:25px;
    }
    .appLinks p{
        margin-bottom:50px;
        font-size:14px;
    }
    .appLinks img{
        width:100px;
        height:32px;
    }
    .uptoddStats{
        padding:15px;
    }
    .uptoddStats div{
        margin-top:15px;
    }
    .uptoddStats div:first-of-type{
        margin-top:0px;
    }
    .statsItem img{
        margin-right:20px;
    }
    .statsItem h2{
        font-size:17px;
    }
    .statsItem p{
        font-size:12px;
    }
}
@media (max-width:770px){
    .revolutionStats{
        flex-wrap: wrap;
    }
    .appContent{
        width:100%;
        margin-bottom:10px;
    }
    .uptoddStats{
        width:100%;
        padding:30px;
    }
}
@media (max-width:500px){
    .joinUptodd{
        padding:0px var(--smallScreen-mainBox-padding);
    }
    .appContent{
        padding:20px 15px 0px 10px;
    }
    .appImage img{
        height:200px;
    }
    .appLinks h3{
        font-size:15px;
        margin-bottom:10px;
    }
    .appLinks p{
        line-height: 1.3em;
        margin-bottom:20px;
        font-size:12px;
    }
    .appLinks img{
        width:70px;
        height:22px;
    }
}

/* joinUptodd */

/* featuredIn */


.featuredIn{
    padding:0px var(--fullScreen-mainBox-padding);
    max-width: 100%;
    text-align:center;
}
.featuredImages{
    display:flex;
    align-items: center;
    justify-content: space-evenly;
}
.featuredImages img{
    width:180px;
    height:50px;
}
#unFeatured{
    width:130px;
    height:130px;
}
.featuredImages img:first-of-type{
    margin-left:0px;
}
.featuredIn h1{
    font-size:30px;
    margin-bottom:50px;
    text-align:center;
}
@media (max-width:1100px){
    .featuredIn{
        padding:0px var(--mediumScreen-mainBox-padding);
    }
    .featuredIn h1{
        font-size:22px;
    }
}
@media(max-width:900px){
    .featuredImages img{
        width:120px;
        height:30px;
    }
    #unFeatured{
        width:80px;
        height:80px;
    }
}
@media (max-width:700px){
    .featuredIn{
        padding:0px var(--smallScreen-mainBox-padding);
    }
    .featuredIn h1{
        font-size:18px;
    }
    .featuredImages{
        flex-wrap: wrap;
    }
    .featuredImages img{
        width:120px;
        height:30px;
        margin-left:20px;
    }
    #unFeatured{
        width:80px;
        height:80px;
    }
}

/* featuredIn */

/* review */

.parentReview{
    background-color: var(--some-boxes-bg-color);
}
.parentsReviewList{
    display: flex;
    overflow: hidden;
}
.parentReviewItem{
    width:25%;
    margin-left:20px;
    box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.2), 0 0px 10px 0 rgba(0, 0, 0, 0.19);
    flex-shrink: 0;
    margin-bottom:20px;
    background-color: white;
    position: relative;
}
.parentAnimation{
    animation: animatedParent 90s linear infinite;
}
.doctorAnimation{
    animation: animatedDoctor 70s linear infinite;
}
.parentsReviewList:hover .parentAnimation, .parentsReviewList:hover .doctorAnimation{
    animation-play-state: paused;
}

@keyframes animatedParent {
    from {
        left: 0px;
    }
    100%{left: -290%;}
}
@keyframes animatedDoctor {
    from {
        left: 0px;
    }
    100% {
        left: -180%;
    }
}

@media (max-width:600px){
    @keyframes animatedDoctor {
        from {
            left: 0px;
        }
        100% {
            left: -300%;
        }
    }
    @keyframes animatedParent {
        from {
            left: 0px;
        }
        100%{left: -550%;}
    }
}
@media (max-width:400px){
    @keyframes animatedDoctor {
        from {
            left: 0px;
        }
        100% {
            left: -450%;
        }
    }
    @keyframes animatedParent {
        from {
            left: 0px;
        }
        100%{left: -900%;}
    }
}
.parentReviewItem img{
    width:100%;
    height:250px;
}
.parentReviewItem div {
    padding:20px 20px 20px;
}
.parentReviewItem h4{
    margin-bottom:20px;
    font-size:15px;
}
.parentReviewItem p{
    font-size:12px;
    line-height: 1.5em;
}
.reviewBy{
    text-align:right;
    color:black;
    font-weight: bold;
}
@media (max-width:1100px){
    .parentReviewItem{
        width:300px;
        margin-left:10px;
    }
    .parentReviewItem img{
        height:220px;
    }
    .parentReviewItem div {
        padding:15px 15px 0px;
    }
    .parentReviewItem h4{
        margin-bottom:15px;
    }
    .parentReviewItem p{
        font-size:11px;
    }
}

@media (max-width:750px){
    .parentReviewItem{
        width:260px;
    }
    .parentReviewItem img{
        height:190px;
    }
    .parentReviewItem div {
        padding:10px 10px;
    }
    .parentReviewItem h4{
        font-size:14px;
    }
    .parentReviewItem p{
        font-size:11px;
    }
}

/* review */

/* milestone */


.babyMilestone{
    padding:0px var(--fullScreen-mainBox-padding);
    max-width: 100%;
}
.babyMilestone h1{
    margin-bottom:20px;
}
.babyMilestone p{
    text-align:center;
    font-size:20px;
    margin-bottom: 60px;
    font-weight:bold;
}
.babyMilestone div{
    text-align:center;
}
.babyMilestone img{
    width:100%;
}

@media (max-width:700px){
    .babyMilestone{
        padding:0px var(--smallScreen-mainBox-padding);
    }
    .babyMilestone img{
        height:300px;
    }
    .babyMilestone p{
        font-size:16px;
    }
}
@media (max-width:500px){
    .babyMilestone{
        padding:0px 0px 0px var(--smallScreen-mainBox-padding);
    }
    .babyMilestone div{
        overflow-x: scroll;
    }
    .babyMilestone img{
        width:200%;
        height:400px;
        margin-bottom:20px;

    }
    .babyMilestone p{
        font-size:16px;
    }
}

/* milestone */

/*@import url("./mainHeader.css");*/
/*@import url("./mainBanner.css");*/
/*@import url("./babySkills.css");*/
/*@import url("./parentsDream.css");*/
/*@import url("./expertGuidance.css");*/
/*@import url("./productList.css");*/
/*@import url("./footer.css");*/
/*@import url("./institutions.css");*/
/*@import url("./uptoddMentors.css");*/
/*@import url("./joinUptodd.css");*/
/*@import url("./featuredIn.css");*/
/*@import url("./review.css");*/
/*@import url("./milestone.css");*/


@font-face {
    font-family: uptodd;
    src: url(../fonts/Montserrat-Regular.ttf);
      font-display: swap;

}
@font-face {
    font-family: uptoddBold;
     src: url(../fonts/Montserrat-Regular.ttf);
      font-display: swap;

}
:root{
    --footer-txt-color:#485b6a;
    --box-border-color:#c2cdd6;
    --p-bigScreen-fontSize:15px;
    --p-smallScreen-fontSize:14px;
    --love-color:#FD5E34;
    --fullScreen-mainBox-padding:8%;
    --mediumScreen-mainBox-padding:40px;
    --smallScreen-mainBox-padding:20px;
    --main-color-shade:#d6edf6;
    --main-web-color: #2a73cc;
    --some-boxes-bg-color:#EBF3FF;
    --secondMain-web-color: #2f8d9d;
}
body{
    padding:0;
    margin:0;
    font-family: uptodd;
    letter-spacing: 0.05em;
}
h1, h2, h3, h4, h5, h6{
    margin:0;
    font-family: uptoddBold;
}
p, ul, li{
    margin:0;
    font-family: uptodd;
}
p, li, span{
    color: var(--footer-txt-color);
    line-height: 2;
    font-size:var(--p-bigScreen-fontSize);
}
a{
    text-decoration: none;
}
button{
    border:none;
    background-color: var(--main-web-color);
    font-family:uptoddBold;
    font-size:16px;
}
button:hover{
    cursor: pointer;
}
button:focus{
    outline: none;
}
.bookNowButton{
    width:270px;
    color:white;
    height:50px;
    border-radius: 5px;
}
.h1InRequiredBoxes{
    font-size:30px;
    margin-bottom:60px;
    text-align:center;
}
.variousFolds{
    padding: 50px 0px;
}
.alternateColorFold {
    background-color: var(--some-boxes-bg-color);
}
.variousFoldsFooter{
    padding: 50px 0px 0px;
    background-color: #FAFAFA;
}
.bookNowInEveryFold{
    text-align:center;
    margin-top:70px;
}


.scrollableDivDesing::-webkit-scrollbar {
    height: 4px;
}
  /* Track */
.scrollableDivDesing::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #F4F7FF; 
}
  /* Handle */
.scrollableDivDesing::-webkit-scrollbar-thumb {
    background: var(--main-web-color); 
    border-radius: 10px;
}
/* Handle on hover */
.scrollableDivDesing::-webkit-scrollbar-thumb:hover {
    background: var(--main-web-color); 
}


@media (max-width:750px){
    .h1InRequiredBoxes{
        font-size:22px;
    }
}
@media (max-width:500px){
    .h1InRequiredBoxes{
        font-size:22px;
    }
}
@media (max-width:1100px){
    .bookNowButton{
        width:250px;
        font-size:14px;
        height:40px;
    }
}
@media (max-width:600px){
    .bookNowButton{
        width:100%;
        font-size:14px;
        height:50px;
    }
    .variousFolds{
        padding: 40px 0px;
    }
    .variousFoldsFooter{
        padding: 40px 0px 0px;
    }
    .h1InRequiredBoxes{
        margin-bottom:50px;
    }
    .withMarginBookNow{
        margin: 0 var(--smallScreen-mainBox-padding);
    }
    .bookNowInEveryFold{
        margin-top:50px;
    }
}
@media (max-width:420px){
    p, li{
        line-height: 1.7;
        font-size:var(--p-smallScreen-fontSize);;
    }
}





.helpDesk{
    background-color: var(--some-boxes-bg-color);
    margin:50px 6% 50px 6%;
    padding: 30px 30px 20px 25px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    margin-top:150px;
}
.helpDesk h2{
    margin-bottom:35px;
}
.helpMethods{
    display:flex;
    flex-wrap: wrap;
    margin-bottom:20px;
}
.helpMethods div{
    flex-grow: 1;
}
@media (max-width:820px){
    .helpDesk{
        margin-top:70px;
    }
}
@media (max-width:500px){
    .helpDesk{
        margin:0px 20px 0 20px;
        padding: 20px 20px 30px 15px;
        margin-top:70px;
    }
    .helpDesk h2{
        font-size:23px;
        margin-bottom:30px;
    }
    .helpMethods{
        margin-bottom:0px;
    }
}

.refundPolicy{
    padding:0px 6% 0 6%;
    background-color: var(--some-boxes-bg-color);
}
.refundItem{
    padding: 20px 0px;
}
.refundItem div:first-of-type{
    margin-bottom:30px;
}
.refundItem h2{
    font-size:27px;
    margin-bottom:20px;
}
.refundItem h3{
    font-size:23px;
    margin-bottom:5px;
}
.refundItem p{
    font-size:16px;
    line-height: 1.2em;
}


.bookTrialForm{
    max-width: 310px;
    padding:30px 89px 30px 75px;
}
.bookTrialForm div{
    margin-bottom: 24px;
}
.bookTrialForm input, .bookTrialForm select{
    height:100%;
    border:none;
    border:1px solid var(--box-border-color);
    height:40px;
    width:100%;
    border-radius:5px;
    padding-left:10px;
}
.bookTrialForm select{
    width:104%;
}
.phoneDiv{
    display: flex;
}
.phoneDiv div{
    margin-bottom: 0px;
}
.phoneDiv select{
    width: 86px;
    margin-right:20px;
    height:100%;
}
.phoneNumberDiv{
    flex-grow: 1;
}
.bookTrialForm button{
    width:104%;
    margin:20px 0 30px 0;
    height:50px;
    border-radius:10px;
    color:white;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}
.bookTrialForm form p{
    font-size:13px;
    color:black;
    line-height: 1.3em;
    margin-bottom:20px;
}

@media(max-width:500px){
    .bookTrialForm{
        max-width: 310px;
        padding:30px 59px 30px 45px;
    }
}