/* Represents the remaining CSS common across all pages */

.pgBlue { background-color: #f5faff; }
.pgBeige { background-color: rgb(248, 242, 229); }
@media only screen and (min-width: 640px) {
    .pgBlue { padding-bottom: 25px !important; }
}

.bringInWhenScroll { opacity: 0; transform: translate3d(0, 30px, 0); }
.bringInSidewaysWhenScroll { opacity: 0; transform: translate3d(-50px, 0, 0); }
.scrollIntoView { transform: translate3d(0, 0, 0); transition-duration: 0.6s; opacity: 1; }

.traditionalProbsDiv { margin-top: 75px !important; margin-bottom: 25px !important; }
.traditionalProbsDiv div { margin-bottom: 0; }
.flexImg { width: 100%; max-width: 420px; aspect-ratio: 1; }
.long { aspect-ratio: 244/358 !important; }
.flexImg img { width: 100%; height: 100%; }

@media only screen and (max-width: 639px) {   
    .flexSectionImg { order: 2; margin-top: -35px; }
    .flexSectionImg img { max-width: 300px; }
    .traditionalProbsDiv { margin-top: 30px !important; margin-bottom: 30px !important; }
}

@media only screen and (min-width: 640px) {
    .equalWidth { max-width: 48%; }
}


@media only screen and (max-width: 639px) {
    .subHeadline {margin-bottom: 25px;}
}



.flexColumn { flex-direction: column; }
.flexSpread { justify-content: space-between; }
.white { color: #FFF }
.divider { width: 90%; margin: 75px auto 50px auto; height: 3px; border-radius: 2px; background-color: #f27038; }

#instituteSolutions { display: flex; justify-content: center; margin-top: 75px; flex-wrap: wrap; }
.oneSolution {
    display: flex; flex-direction: column; align-items: center; 
    flex: 1 0 48%;
    margin-bottom: 25px;
    
}
.oneSolution div { width: 100px; height: 100px; }
.oneSolution div img { width: 100%; height: 100%; }
.oneSolution h4, .oneSolution p { text-align: center; }
.oneSolution p { width: clamp(250px, 40vw, 350px); font-size: 16px; }

@media only screen and (max-width: 639px) {
    #instituteSolutions { flex-direction: column; flex-wrap: nowrap; }
}


@media only screen and (max-width: 639px) {
    input, select { font-size: 14px; line-height: 1.5rem; margin-bottom: 24px; }
    .flexContent { flex-direction: column; align-items: center; margin-top: 30px; }
    .flexSection { padding: 25px 0; margin: 0 auto;}
    .reverse { flex-direction: column-reverse; }
    .flexSectionImg { margin-top: 0; }
    .flexSectionImg img { max-width: 300px; }
    .mobFirst { order: 1; }
    .exSpace { margin: 20px 0; }
    .evenMoreSpace { margin-top: 30px; }
    .lessTopSpace { margin-top: -20px }
    .quoteDiv ul li { margin-bottom: 12px; }
    .mobSecond { order: 2; }
}


@media only screen and (min-width: 640px) {
    input, select { font-size: 1.125rem; line-height: 1.5rem; margin-bottom: 16px; }
    .flexContent {align-items: center; height:100%; justify-content: space-between; margin-top: 50px;}
    .oneModule { margin-top: 70px; }
    .lessTopSpace { margin-top: 0 }
    .quoteDiv ul li, .quoteDiv ol li { margin-bottom: 12px; }
}


@media only screen and (min-width: 768px) {
    li { padding-left: 20px; }
    .exSpace { margin: 30px 0; }
    .evenMoreSpace { margin-top: 50px; }
    .rowReverse { flex-direction: row-reverse; }
    .rightMargin { margin-right: 40px; }
    .leftMargin { margin-left: 40px; }
}


@media only screen and (min-width: 1024px) {
    li { padding-left: 20px; }
}


@media only screen and (min-width: 1280px) {
    li { padding-left: 20px; }
}


@media only screen and (min-width: 1537px) {
    li { padding-left: 20px; }
}


ol, ul { padding-left: 25px; }

.imgCenterDiv { max-width: 80%; margin-inline: auto; margin-top: 50px; margin-bottom: 50px;}
@media only screen and (max-width: 639px) { .imgCenterDiv { max-width: 100%; margin-top: 25px; margin-bottom: 25px; } }
.imgCenterDiv img { width: 100%; height: 100%; }


/* ======================== */

/* Orange div */
.quoteDiv { padding: 20px; border-radius: 15px; background-color: rgba(255,217,102,0.3); margin: 40px 0; }
.quoteDivBlue { background-color: #f2f8ff !important; }
.quoteDiv p { margin: 10px; text-align: center; font-style: italic }
@media only screen and (max-width: 640px) { .quoteDiv { margin: 25px 0; }}
@media only screen and (min-width: 640px) { .quoteDivExtraPadding { padding: 40px;  } }
#quoteLead { margin-top: 75px; }
@media only screen and (max-width: 639px) {
    #quoteLead { margin-top: 0; }
}





/* is course for you section */
.flex { display: flex; }
.red { color: #ce0909; }
.yellow { color: #FEA94C; }
.blue { color: #103d83; }
@media only screen and (max-width: 639px) {
    .forYouSection { margin-top: 30px; }
    .tickCross { margin-right: 10px; }
    .biggerFont { font-size: 1.5rem; }
}

@media only screen and (min-width: 640px) {
    .forYouSection { margin-top: 50px; }
    .tickCross { margin-right: 20px; }
    .biggerFont { font-size: 2rem; }
}
/* ======================== */



.extraSpace { margin-top: 50px; }
.emphasis { color: #FEA94C; font-weight: 600; }
.emphasisNeg { color: #f87171; font-weight: 600; }
.pInline { display: inline; }

.punchline { text-align: center; font-weight: 600; margin-block: -10px; }
.punchlineDivider { 
    background-color: #FEA94C; height: 3px; border-radius: 5px; 
    width: 100px; margin: 25px auto !important;
}

@media only screen and (max-width: 639px) {
    .punchline { margin: -10px auto; width: 90%; }
}



/* FAQ */
.faq { margin-bottom: 30px; border-bottom: 1px solid lightgray;}
.question { 
    display: flex; align-items: center; justify-content: space-between; 
    margin-bottom: 20px; 
}
.qText { width: 80%; font-weight: 600; }
.qArrow { 
    display: flex; align-items: center; justify-content: center;
    width: 50px; height: 50px; background-color: #f3f3f3; border-radius: 50%;
    font-size: 20px; cursor: pointer;
}
.qAnswer { 
    /*border-bottom: 1px solid;*/
    overflow: hidden; max-height: 0; transition: max-height 0.75s cubic-bezier(0, 1, 0, 1); 
    min-width: 120px;
}
.qAnswer div { margin-bottom: 20px; }
.fullHeight { max-height: 2000px; transition: max-height 0.75s ease-in-out; }
.noFlip, .flipDown { transition-duration: 0.75s; transition-property: transform; }
.noFlip { transform: rotate(0deg); }
.flipDownFaq { transform: rotate(90deg);}
/* ======================== */



/* social media div */
#socialMediaDiv { 
    display: flex; align-items: center; justify-content: center;
    margin-left: auto; margin-right: auto;
    margin-bottom: 10px;
}
#socialMediaDiv img { 
    width: 28px; height: 28px; 
    margin-left: 20px; margin-right: 20px;
}