* {

    margin: 0;

    padding: 0;

}

:root{
    --normal_sky: #4097f8 ;
    --deep_sky: #1b405b ;
    --orange: #ff8900;
    --white: #ffff;
    --main-heading:14px;
    --sub-heading:30px;
    --paragraph:15px;
    --paragraph-letter-spacing:.5px;
    --font-family:'popins', sans-serif;
  }



.teacher-rama {

    width: 90%;

    margin: auto;

}

.teacher-rama .teacher-main {



    margin: auto;





}

/* .teacher-rama .teacher-main .inner-teacher-main {
    margin: 3% 0%;
    justify-items: center;

    align-content: center;
} */

.teacher-rama .teacher-main .teacher-top {


    color: var(--orange);

    letter-spacing: 2px;

    font-size: var(--main-heading);

    display: flex;

    font-weight: 550;

    gap: 7px;

    /* text-align: center; */

    font-family: var(--font-family);



}

.teacher-rama .teacher-main .teacher-top-underline {

    height: 2px;

    width: 200px;

    background: var(--orange);

}

.teacher-rama .teacher-main h1 {

    font-size: var(--sub-heading);

    padding: 10px 0px;

    text-align: center;

    font-family: var(--font-family);

    font-weight: 650;

}

.teacher-rama .teacher-main span {

    color: var(--orange);

}



.teacher-rama .teacher-card-main {

    /* height: 70vh; */

    display: flex;

    align-items: center;

    justify-content: center;

    /* gap: 10px; */

    margin: 2% 0px;

    flex-wrap: wrap;



}

.teacher-rama .teacher-card-main .teacher-card {

    /* box-shadow: 0 0 20px rgba(0,0,0,0.2); */

    margin: 20px;

    position: relative;

    overflow: hidden;

    transition: .6s;

    border-radius: 50px 50px 50px 0px;

}

.teacher-rama .teacher-card-main .teacher-card:hover {

    transform: translateY(-8%);

    transition: .6s;



}

.teacher-rama .teacher-card-main .teacher-card .inner-teacher-card {

    /* height: 330px; */

    width: 250px;
border-radius: 50px 50px 50px 0px;
    /* position: relative; */

    /* border: 1px solid red; */

}

.teacher-rama .teacher-card-main .teacher-card .inner-teacher-card img {

    width: 100%;

    border-radius: 50px 50px 50px 0px;



}

.teacher-rama .teacher-card-main .teacher-card h2 {

    padding: 10px 0px;
font-size: 22px;
    font-family:var(--font-family);

}

.teacher-rama .teacher-card-main .teacher-card h2:hover {

    color:var(--deep_sky);

}

.teacher-rama .teacher-card-main .teacher-card .professor {

    letter-spacing: 2px;

    font-size: 13px;
  color:var(--deep_sky);

    font-weight: 500;

    text-transform: uppercase;

}

.teacher-rama .teacher-card-main .teacher-card .link-icon {

    height: 45px;

    width: 45px;

    border-radius: 50px 50px 0px 50px;

    background:linear-gradient(45deg,var(--deep_sky),var(--deep_sky),var(--normal_sky));

    float: right;



    display: flex;

    color: var(--white);

    align-items: center;

    justify-content: center;

    position: absolute;

    right: 0;

    bottom: 10px;

    transition: .5s all ease;

    cursor: pointer;
    transition: .5s;

}

.teacher-rama .teacher-card-main .teacher-card:hover .link-icon {

    background: var(--orange);
   transition: .5s;
}



.teacher-rama .teacher-card-main .teacher-card .inner-teacher-card .teacher-main-icon {

    position: absolute;

    right: -100%;

    top: 12%;

    transition: .8s;

}

.teacher-rama .teacher-card-main .teacher-card:hover .inner-teacher-card .teacher-main-icon {

    right: 8%;

    transition: .8s;



}



.teacher-rama .teacher-card-main .teacher-card .inner-teacher-card .teacher-main-icon .teacher-icon {

    height: 40px;

    width: 40px;

    display: flex;

    font-size: 18px;

    font-weight: 500;

    margin: 10px 0px;

    align-items: center;

    justify-content: center;

    border-radius: 50px 50px 50px 0px;

    color: var(--white);

    background: var(--orange);

    transition: .5s;

    cursor: pointer;

}

.teacher-rama .teacher-card-main .teacher-card .inner-teacher-card .teacher-main-icon .teacher-icon:hover {

    background: var(--white);

    color: var(--orange);

    transition: .5s;



}

@media(max-width:768px) {

    .teacher-rama .teacher-main p {

        width: 100%;

    }

    .teacher-rama .teacher-main .teacher-top-underline {

        height: 2px;

        width: 30%;

        background: var(--footer-background1);

    }

    .teacher-rama .teacher-card-main .teacher-card {

        margin: 20px 0px;



    }

    .teacher-rama .teacher-card-main .teacher-card .inner-teacher-card {

        width: 300px;



    }

}

@media(max-width:495px) {

    .teacher-rama .teacher-main .teacher-top-underline {

        height: 2px;

        width: 50%;

        background: var(--footer-background1);

    }

    .teacher-rama .teacher-card-main .teacher-card {

        align-content: center;

        justify-items: center;

    }

}

@media(max-width:375px) {

    .teacher-rama .teacher-main .teacher-top-underline {

        height: 2px;

        width: 70%;

        background: var(--footer-background1);

    }

}