#headdiv{
background-image: url('/images/aboutus-main.png'); 
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
object-fit: cover;
height: 100vh;
background-position: center; 

}
h1{
width: 100%;
font-weight: 600;
font-size: 48px;
line-height: 58px;
text-align: center;
letter-spacing: -0.005em;
text-transform: capitalize;
color: #FFFFFF;
margin-top: calc(40vh - 86px);
}

/* general@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
h2{
font-size: 36px;
font-weight: 600;
line-height: 1.6;
letter-spacing: -0.18px;
text-align: left;
color: #577bd0;
}
h3{
font-weight: 600;
font-size: 36px;
line-height: 58px;
text-align: center;
letter-spacing: -0.005em;
color: #333366;
}
/* aboutus @@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
.textbox p{
font-weight: 400;
font-size: 14px;
line-height: 26px;
color: #535353;
}
.imgbox img{
max-width: 100%;
width: 100%;
}
/* ready to take the leap @!@!!@!@!@!@!@!@!@!@!@!@!@!@ */
#readytotaketheleap{
/* display: none; */
}

@media only screen and (max-width: 768px) {
#readytotaketheleap{
display: block;
}
#ourhistory{
display: none;
}
#readourhistorybutton:hover{
    cursor: pointer;
}
}

/* sections */
#ourstudents, #wedothingsdifferently, #weknowwhatwearedoing{
display: flex;
width: 88%;
margin-left: 6%;
gap: 78px;
row-gap: 0;
margin-top: 250px;
}
/* ourstudentsspeakforus ---------- */
#ourstudentssmall{
display: none;
width: 88%;
margin-left: 6%;
gap: 78px;
row-gap: 0;
margin-top: 100px;
}
#ourstudentsleft{
    flex: 0 0 35%;
}
#ourstudentsleft img{
    max-width: min(100%, 493px);
}

#ourstudentsright{
padding-top: 50px;
padding-right: 10px;
flex: 1 0 55%;
position: relative;
}
#ourstudentsright img{
position: absolute;
bottom: 0;
left: 0;
}

@media only screen and (max-width: 1500px) {
#ourstudentsleft{
    flex: 0 0 45%;
}   
#ourstudentsright{
    flex: 0 0 45%;
}
}
@media only screen and (max-width: 1300px) {
#wedothingsdifferentlyleft{
padding-top: 5px;
}
}
@media only screen and (max-width: 1150px) {
#ourstudentsright{
padding-top: 0;
padding-right: 0;
flex: 0 0 55%;
}
#ourstudentsleft{
flex: 0 0 30%;
}
#ourstudentsleft{
    max-width: 100%;
}
#ourstudentsright img{
position: relative;

}

}
@media only screen and (max-width: 992px) {
#fasttony{
    display: none;
}
#ourstudentssmall{
    display: flex;
    flex-wrap: wrap;

}
#ourstudents{
    display: none;
}
#ourstudentssmall #ourstudentsleft{
flex: 0 0 100%;
}
#ourstudentssmall #ourstudentsright{
flex: 0 0 100%;
}
#ourstudentsright{
display: flex;
}
.egorvarvara{
max-width: min(493px, 60%) !important;
}
.knowthestorybutton{
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: 15%;
}
.knowthestorybutton.showat768{
margin: 3rem auto 0 auto;
}
#ourstudentsleft{
margin-bottom: 3rem;
}
}

@media only screen and (max-width: 768px) {
.egorvarvara{
margin: 0 auto;
max-width: min(493px, 80%) !important;

}
#fasttony{
    display: block;
    margin: -85px auto 0 auto;
}
#ourstudentssmall{

}
#ourstudentsleft{
margin-bottom: 0;
}
}
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ we do things differently */
#wedothingsdifferently{
flex-wrap: wrap;
}
#wedothingsdifferentlyleft{
flex: 0 0 50%;
padding-top: 50px;
padding-left: 10px;
}
#wedothingsdifferentlyright{
flex: 1 0 40%;
}
@media only screen and (max-width: 1150px) {
#wedothingsdifferentlyleft{
    padding-top: 5px;
}
}
@media only screen and (max-width: 992px) {
#wedothingsdifferentlyleft, #wedothingsdifferentlyright{
    flex: 0 0 100% !important;
}
#wedothingsdifferentlyleft{
    padding-bottom: 3rem;
}
}
/* We know what we are doing @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
#weknowwhatwearedoingleft{
flex: 0 0 35%;
}
#weknowwhatwearedoingright{
flex: 1 0 55%;
padding-top: 50px;
padding-right: 10px;
}


@media only screen and (max-width: 992px) {
#weknowwhatwearedoingleft, #weknowwhatwearedoingright{
flex: 0 0 100%;
}
#weknowwhatwearedoingleft{
text-align: center;
}
#weknowwhatwearedoingleft img{
max-width: 430px;
margin: 0 auto;
}
#weknowwhatwearedoing {
flex-wrap: wrap;
margin-top: 10px;
}

}
/* OUR STORY @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
#readourhistorybutton{
    display: None;
}
#ourstory{
display: flex;
flex-wrap: wrap;
margin-top: 0;
}
.leftbluebox{
flex: 0 0 50%;
height: 247px;
background: #577BD0;
border-top-right-radius: 131px;
border-bottom-right-radius: 131px;
color: #fff;
padding: 2rem 2rem 2rem 4rem;
}
.leftbluebox h4{

font-weight: 500;
font-size: 21px;
line-height: 58px;
letter-spacing: -0.005em;
}
.leftbluebox p{
font-style: italic;
font-weight: 400;
font-size: 14px;
line-height: 26px;
color: #FFFFFF;
}
.righttransparentbox{
flex: 0 0 40%;
text-align: center;
}
@media only screen and (max-width: 992px) {
.leftbluebox{
    flex: 0 0 100%;
    border-radius: 0;
    height: auto;
}
.righttransparentbox{
    flex: 0 0 100%;
}
#readourhistorybutton{
    display: block;
    margin: 50px auto 25px auto;
    
}
#readourhistorybutton:hover{
    cursor: pointer;
}
h2{
    margin-bottom: 2rem;
}
#ourstudents, #wedothingsdifferently, #weknowwhatwearedoing {

    margin-top: 100px;
  }
}
@media only screen and (max-width: 768px) {
.righttransparentbox  img{
    margin-top: -90px;
}
.righttransparentbox{
    display: block;
}
}

/* our history @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
#ourhistory{
margin-top: 250px;
position: relative;
}
#ourhistory p{
width: 60%;
margin-left: 20%;
margin-bottom: 2rem;


font-weight: 400;
font-size: 14px;
line-height: 26px;
text-align: justify;
color: #535353;
}
#ourhistory h3{
margin-bottom: 50px;

}
#ourhistory h6{

font-weight: 500;
font-size: 21px;
line-height: 38px;
text-align: center;
letter-spacing: -0.005em;
color: #577BD0;
max-width: 80%;
margin-left: 10%;

}
#readingtony{
margin: 0 auto;
width: 300px;
display: block;
}
#ourhistorybluetransparentbackgroundleftside{
background-color: #D8E0F1;
border-top-right-radius: 131px;
border-bottom-right-radius: 131px;
height: 247px;
color: #fff;
padding: 2rem 6rem;
width: 45%;
position: absolute;
left: 0;
top: 40%;
z-index: -1;
}
#ourhistorybluetransparentbackgroundrightside{
background-color: #D8E0F1;
border-top-left-radius: 131px;
border-bottom-left-radius: 131px;
height: 247px;
color: #fff;
padding: 2rem 6rem;
width: 45%;
position: absolute;
right: 0;
top: 75%;
z-index: -1;
}

/* ALSO ALREADY IN STANDAARD @@@@@@@@@@@@@@@@@@@@@@ */
@media only screen and (max-width: 992px) {

h2{
    text-align: center;
}
}
#ourexperts2{
display: none !important;
}
@media only screen and (max-width: 768px) {
#soccont{
padding-right: 0;
}
#ourstudentsleft{
margin-top: 35px;
}
.knowthestorybutton {
margin: 3rem auto 75px auto !important;
}
#wedothingsdifferently{
margin-top: 100px;
}
#weknowwhatwearedoingright{
margin-top: 50px;

}
#ourexperts{
display: none !important;
}

#ourexperts2{
display: block !important;
}
#ourstory{
margin-top: 150px;
}
#ourhistory{
margin-top: 150px;
}
#ourhistory p {
width: 80%;
margin-left: 10%;

}
.leftbluebox{
    text-align: center;
    height: 388px;
}
.leftbluebox img{
    margin: 25px 0 10px 0;
}
}

@media only screen and (max-width: 500px) {


.leftbluebox {
padding: 2rem 2rem 6rem 4rem;
height: min(100%, 500px);
}
}