@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");

:root {
/* --aboutus-max-width: 1720px; */
--aboutus-color: #4e4e4e;
--aboutus-super-heading: 4rem;
--aboutus-heading: 3rem;
--aboutus-sub-heading: 1.3rem;
--aboutus-alt-sub-heading: 2rem;
--aboutus-alt-heading: 1.8rem;
--aboutus-text: 1rem;
}

@media (max-width: 768px) {
:root {
/* font-size: calc(12px + 8 * ((100vw - 320px) / 680)); */
font-size: 16px;
--aboutus-super-heading: 2.5rem;
--aboutus-heading: 1.875rem;
--aboutus-sub-heading: 1rem;
--aboutus-alt-sub-heading: 1.4rem;
--aboutus-alt-heading: 1.5rem;
--aboutus-text: 0.875rem;
}
}

* {
font-family: "Roboto", sans-serif;
box-sizing: border-box;
}

body {
margin: 0;
}

.aboutus__header-section {
width: 100%;
/* max-width: 1720px; */
height: 35vmax;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url(https://dimensionlesswebsite.azureedge.net/dimensionlesswebsiteimage/about-us-header-bg.svg);
box-shadow: inset -5em 6em 367px black;
}
.aboutus_header-section__inner-section {
display: flex;
flex-direction: column;
width: 60vw;
gap: 1em;
justify-content: center;
align-items: center;
}
.aboutus_header-left-quote {
display: flex;
width: 100%;
padding: 0 1em;
height: 10%;
}
.aboutus_header-left-quote img {
width: 30px;
}
.aboutus_header-right-quote {
display: flex;
width: 100%;
padding: 0 1em;
height: 10%;
justify-content: flex-end;
}
.aboutus_header-right-quote img {
width: 30px;
}
.aboutus_header-heading {
display: flex;
width: 100%;
padding: 0 1em;
justify-content: center;
align-items: center;
}
.aboutus_header-heading > h1 {
text-align: center;
font-size: var(--aboutus-super-heading);
color: white;
font-weight: 500;
}
.aboutus_header-subheading {
display: flex;
width: 100%;
padding: 0 1em;
align-items: center;
}
.aboutus_header-subheading > h3 {
text-align: center;
font-size: var(--aboutus-alt-sub-heading);
color: white;
line-height: 1.5em;
font-weight: 400;
width: 100%;
}
.aboutus_header-bottonheading {
/* color: #8eb4e3; */
color: white;
text-align: center;
font-size: var(--aboutus-heading);
font-weight: 400;
}
/*----------------------info section------------------------*/
.aboutus__info-section {
width: 100%;
/* max-width: 1720px; */
overflow: hidden;
height: auto;
}
.aboutus__info-section__inner-section {
width: 100%;
padding: 6em 4em;
display: flex;
}

.info-section__left-side-container {
width: 50%;
position: relative;
}
.aboutus__info-first-img {
width: 60%;
}
.aboutus__info-second-img {
right: 0;
width: 60%;
bottom: 0;
height: 75%;
position: absolute;
}
.info-section__right-side-container {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1em;
padding: 4em 4em 10em;
}
.info-section__heading {
width: 100%;
}
.info-section__heading h2 {
font-size: var(--aboutus-heading);
font-weight: 500;
}
.info-section__first-para {
width: 100%;
font-size: var(--aboutus-text);
line-height: 1.5em;
}
.info-section__second-para {
width: 100%;
font-size: var(--aboutus-text);
line-height: 1.5em;
}
.info-section__pointers {
width: 100%;
display: flex;
flex-wrap: wrap;
row-gap: 1em;
}
.info-section__individual-pointers {
display: flex;
align-items: center;
width: 50%;
gap: 1em;
}
.info-section__individual-pointers img {
width: 10%;
}
.info-section__third-para {
width: 100%;
font-size: var(--aboutus-text);
line-height: 1.5em;
}

/*---------------------leadership section--------------------------*/
.aboutus__leadership-section {
width: 100%;
/* max-width: 1720px; */
overflow: hidden;
height: auto;
background-image: url(https://dimensionlesswebsite.azureedge.net/dimensionlesswebsiteimage/hero-background.svg);
background-repeat: no-repeat;

background-size: 60% 100%;
background-position: left center;
}
@supports (-moz-appearance: none) {
.aboutus__leadership-section {
background-size: 60% 52%;
background-position: 1em -1em;
}
}
.aboutus__leadership__inner-section {
width: 100%;
padding: 8em 4em;
display: flex;
flex-direction: column;
align-items: center;
gap: 4em;
}
.aboutus__leadership__header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2em;
width: 100%;
}
.aboutus__leadership__header h1 {
font-size: var(--aboutus-heading);
font-weight: 500;
text-align: center;
}
.aboutus__leadership__header p {
width: 100%;
text-align: center;
font-family: var(--font-style-body);
font-size: var(--aboutus-sub-heading);
font-weight: 400;
letter-spacing: 1px;
}
.aboutus__leadership__content {
display: flex;
justify-content: center;
align-items: center;
padding: 4em;
width: 100%;
gap: 10em;
flex-wrap: wrap;
}
.aboutus__leadership__first-person {
/* width: 30%; */
width: 25vw;
position: relative;
}
.aboutus__leadership__first-person img {
width: 100%;
}
.aboutus__leadership__second-person {
/* width: 30%; */
width: 25vw;
position: relative;
}
.aboutus__leadership__second-person img {
width: 100%;
}

.aboutus__leadership__first-info-card {
width: 70%;
flex-direction: column;
gap: 0.5em;
padding: 1em;
background: #ffffff;
border: 0.5px solid #a39a8f6c;
border-radius: 10px;
position: absolute;
left: 15%;
bottom: -3em;
}
.aboutus__leadership__first-info-card h3 {
font-weight: 500;
text-align: center;
}
.aboutus__leadership__first-info-card h4 {
font-weight: 400;
text-align: center;
}
.aboutus__leadership__second-info-card {
width: 70%;
gap: 0.5em;
padding: 1em;
flex-direction: column;
background: #ffffff;
border: 0.5px solid #a39a8f6c;
border-radius: 10px;
position: absolute;
left: 15%;
bottom: -3em;
}

.aboutus__leadership__second-info-card h3 {
font-weight: 500;
text-align: center;
}
.aboutus__leadership__second-info-card h4 {
font-weight: 400;
text-align: center;
}
.aboutus__leadership__first-person:hover .aboutus__leadership__first-info-card {
background-color: #186daa;
color: white;
border-color: #186daa;
}
.aboutus__leadership__second-person:hover
.aboutus__leadership__second-info-card {
background-color: #186daa;
color: white;
border-color: #186daa;
}
.social-media-icon__instagram__1 {
width: 11%;
display: block;
/* display: none; */
height: 10%;
border-radius: 50%;
background: white;
position: absolute;
left: 30%;
visibility: hidden;
cursor: pointer;
}
.social-media-icon__instagram__1:hover {
background-color: #186daa;
}
.social-media-icon__instagram__1 img {
width: 100%;
display: block;
margin-right: auto;
margin-left: auto;
}
.social-media-icon__tiwtter__1 {
/* bottom: 15%; */
width: 11%;
display: block;
/* display: none; */
height: 10%;
border-radius: 50%;
background: white;
position: absolute;
left: 45%;
cursor: pointer;
visibility: hidden;
}
.social-media-icon__tiwtter__1:hover {
background-color: #186daa;
}
.social-media-icon__tiwtter__1 img {
width: 100%;
display: block;
margin-right: auto;
margin-left: auto;
}
.social-media-icon__linkedin__1 {
width: 11%;
display: block;
height: 10%;
border-radius: 50%;
background: white;
position: absolute;
left: 60%;
cursor: pointer;
visibility: hidden;
}
.social-media-icon__linkedin__1:hover {
background-color: #186daa;
}

.social-media-icon__linkedin__1 img {
width: 100%;
display: block;
margin-right: auto;
margin-left: auto;
}
.social-media-icon__instagram__2 {
width: 11%;
display: block;
/* display: none; */
height: 10%;
border-radius: 50%;
background: white;
position: absolute;
left: 30%;
visibility: hidden;
cursor: pointer;
}
.social-media-icon__instagram__2 img {
width: 100%;
display: block;
margin-right: auto;
margin-left: auto;
}
.social-media-icon__tiwtter__2 {
/* bottom: 15%; */
width: 11%;
display: block;
/* display: none; */
height: 10%;
border-radius: 50%;
background: white;
position: absolute;
left: 45%;
cursor: pointer;
visibility: hidden;
}
.social-media-icon__tiwtter__2 img {
width: 100%;
display: block;
margin-right: auto;
margin-left: auto;
}
.social-media-icon__linkedin__2 {
/* bottom: 15%; */
width: 11%;
display: block;
/* display: none; */
height: 10%;
border-radius: 50%;
background: white;
position: absolute;
left: 60%;
cursor: pointer;
visibility: hidden;
}
.social-media-icon__linkedin__2 img {
width: 100%;
display: block;
margin-right: auto;
margin-left: auto;
}
.social-media-icon__instagram__2:hover {
background-color: #186daa;
}
.social-media-icon__tiwtter__2:hover {
background-color: #186daa;
}
.social-media-icon__linkedin__2:hover {
background-color: #186daa;
}
.popupsocialmediaicon__1 {
animation: popupicon 0.2s linear 1 alternate;
animation-fill-mode: forwards;
}
.popupsocialmediaicon__2 {
animation: popupicon 0.2s linear 1 alternate;
animation-delay: 0.2s;
animation-fill-mode: forwards;
}
.popupsocialmediaicon__3 {
animation: popupicon 0.2s linear 1 alternate;
animation-delay: 0.4s;
animation-fill-mode: forwards;
}
@keyframes popupicon {
from {
bottom: 0%;
}
to {
visibility: visible;
bottom: 15%;
}
}
.aboutus-particles {
pointer-events: none;
}

/*---------------------------Mentorsection----------------------*/
.aboutus__mentor-section {
width: 100%;
/* max-width: 1720px; */
overflow: hidden;
height: auto;
box-shadow: inset 0px 35em 0px #186daa;
}
.aboutus__mentor__inner-section {
width: 100%;
padding: 10em 4em;
display: flex;
flex-direction: column;
align-items: center;
gap: 4em;
}
.aboutus__mentor__header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2em;
width: 100%;
}
.aboutus__mentor__header h1 {
font-size: var(--aboutus-heading);
font-weight: 500;
text-align: center;
color: white;
}
.aboutus__mentor__header p {
width: 100%;
text-align: center;
font-family: var(--font-style-body);
font-size: var(--aboutus-sub-heading);
font-weight: 400;
letter-spacing: 1px;
color: white;
}

.aboutus__mentor__content {
display: flex;
justify-content: center;
align-items: center;
padding: 4em;
width: 100%;
gap: 8em;
flex-wrap: wrap;
}
.aboutus__mentor__card-wapper {
width: 25%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 2em;
}
.aboutus__mentor__first-person {
width: 100%;
position: relative;
}
.aboutus__mentor__first-person img {
width: 100%;
height: 20em;
border-radius: 50%;
}

.aboutus__mentor__first-info-card {
width: 100%;
flex-direction: column;
gap: 0.5em;
padding: 1em;
background: #ffffff;
border: 0.5px solid #a39a8f6c;
border-radius: 10px;
position: absolute;
/* bottom: -15%; */
top: 90%;
}
.aboutus__mentor__first-info-card h3 {
font-weight: 500;
text-align: center;
}
.aboutus__mentor__first-info-card h4 {
font-weight: 400;
text-align: center;
width: 100%;
}
.aboutus__mentor__card-wapper p {
text-align: center;
width: 90%;
margin-top: 20%;
font-size: var(--aboutus-text);
}

.aboutus__mentor__first-person:hover .aboutus__mentor__first-info-card {
border-color: #186daa;
color: #186daa !important;
}
.aboutus__mentor__linkedin {
display: block;
height: 12%;
width: 12%;
border-radius: 50%;
background: white;
cursor: pointer;
}
.aboutus__mentor__linkedin img {
width: 100%;
height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
border: 0.5px solid #00000042;
}

/*---------------------Responsive part---------------------*/
@media only screen and (min-width: 2560px) {
}
@media only screen and (max-width: 1440px) {
html {
font-size: 90%;
}
}
@media only screen and (max-width: 1024px) {
html {
font-size: 80%;
}
.info-section__right-side-container {
padding: 4em;
}
.aboutus__mentor__first-info-card {
top: 80%;
}
}
@media only screen and (max-width: 998px) {
html {
font-size: 60%;
}
}
@media only screen and (max-width: 768px) {
html {
font-size: 50%;
}
.aboutus__header-section {
height: 70vmax;
padding: 1em;
}
.aboutus_header-section__inner-section {
width: 80vw;
}
.aboutus_header-left-quote img {
padding: 0;
}
.aboutus_header-right-quote img {
padding: 0;
}
.aboutus_header-subheading > h3 {
line-height: 1.2em;
}
.aboutus__info-section__inner-section {
flex-direction: column;
gap: 1em;
padding: 4em 2em;
}
.info-section__left-side-container {
width: 100%;
}
.info-section__right-side-container {
width: 100%;
padding: 0em;
}
.aboutus__leadership__inner-section {
padding: 4em 2em 8em;
}
.aboutus__leadership__content {
gap: 5em;
}
.aboutus__leadership__first-person {
width: 65%;
}
.aboutus__leadership__second-person {
width: 65%;
}
.aboutus__mentor__inner-section {
padding: 4em 2em 8em;
}
.aboutus__mentor__content {
padding: 0rem;
gap: 6em;
}
.aboutus__mentor__content {
gap: 3em;
row-gap: 6em;
}
.aboutus__mentor__card-wapper {
width: 45%;
gap: 1em;
}
.aboutus__mentor__linkedin {
width: 15%;
height: 15%;
}
}
@media only screen and (max-width: 600px) {
html {
font-size: 40%;
}
:root {
--aboutus-alt-sub-heading: 1.2rem;
}
.aboutus_header-section__inner-section {
width: 100%;
/* height: 80%; */
}
.info-section__left-side-container {
height: 30vh;
}
.info-section__pointers {
flex-direction: column;
}
.info-section__individual-pointers {
width: 100%;
}
.aboutus__leadership__content {
padding: 0em;
}
.aboutus__leadership__first-person {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.aboutus__leadership__second-person {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.aboutus__mentor__card-wapper {
width: 100%;
}
.aboutus__mentor__content {
gap: 0em;
row-gap: 8em;
}
}
@media only screen and (max-width: 320px) {
.aboutus__leadership__first-info-card {
width: 100%;
padding: 0.5em;
left: 0%;
}
.aboutus__leadership__second-info-card {
width: 100%;
left: 0%;
padding: 0.5em;
}
}