/*************************************
** Author: Afsar
** Website:
** Email:
**************************************/

/*Primary Color:rgb(15,108,107)*/
/*Secondary Color:rgb(50,50,50)*/
/*Grey:rgb(240,240,240)*/
/*Green:rgb(163,169,72)*/
/* wrapper-width:700px */

*
{
padding: 0;
margin: 0;
}
/***************
*General Styles
****************/
html{
font-size: 16px;
max-width: 100%;
max-height: 100%;
font-family: 'Roboto', sans-serif;
}


@media(max-width:1124px){
html{
font-size: 10px;
}

}
@media(max-width:768px){
html{
font-size: 12px;
}

}
@media(max-width:550px){
html{
font-size: 10px;
}

}
@media(max-width:414px){
html{
font-size: 10px;
}

}
@media(max-width:375px){
html{
font-size: 8px;
}

}
@media(max-width:360px){
html{
font-size: 6px;
}

}

.box1{
background: #002147;

}
.box1 ul {
display: flex;
list-style: none;
justify-content: space-between;


}

.box1 .box1-sec1{
text-align: left;
width: 40%;
margin-left: 2%;

}

.box1 .box1-sec2{
text-align: right;
width: 60%;
font-family: Cursive;
margin-right: 2%;
margin-top: .5%;
}

.box1 .box1-sec1 a i{
color: white;
padding: 2.5% 2.5%;
}

.box1 .box1-sec2 a i{
color: white;
padding: 1% 1%;

}
.logo-col{
align-items: center;
}
.logo-col img{
width: 95%;
height: auto;
padding-left: 3%;
padding-right: 2%;
}

.bom-col{
align-items: center;
}
.bom-col img{
width: 100%;
height: auto;
#padding-left: 3%;
#padding-right: 2%;
}

.logo-iqac{
align-items: center;
}
.logo-iqac img{
width: 90%;
padding-left: 3%;
padding-right: 2%;
}

.main-drop-down-multi{
background: #002147;
position: relative;

}
.main-drop-down-multi ul{
list-style-type: none;
display: flex;
list-style: none;
justify-content: space-between;
padding: 0% 2% 0% 2%;
}

.main-drop-down-multi li {
display: inline-block;
}


.main-drop-down-multi li a {
color: white;
display: block;
padding: 5px 10px;
text-decoration: none;
}

/* Style the dropdown menu */
.main-drop-down-multi ul ul {
position: absolute;
top: 100%;
display: none;
margin: 0;
padding: 0;
}

.main-drop-down-multi ul ul li {
display: block;
}

.main-drop-down-multi li:hover ul {
display: block;
background-color: yellowgreen;
}

/* Change the background color of dropdown links on hover */
.main-drop-down-multi ul ul li a:hover {
background-color: black;
}




.gap{
padding: 30px 30px;

}





.announcement-list{
background: lightpink;
}
.announcement-list a {
margin: 1% ;
font-weight: 700;
font-size: 1.2rem;

}
.ann{
margin: 1%;
}
.box2 ul {
display: flex;
list-style: none;
justify-content: space-between;
}
.box2 .founder{
text-align: center;
width: 30%;
color: rgb(0, 33, 71);
font-weight: 700;
}

.box2 .founder img{
width: 60%;
height: auto;

}
.box2 .founder p{
text-align: justify;
height: auto;
padding: 2%;
color: rgb(68, 68, 68);
font-weight: 400;
line-height: 1.5rem;
}
.box2 .img-slider{
background: url('pic11.jpeg');
background-size: 100% 100%;
width: 65%;

margin-top: 5%;
margin-bottom: 5%;
margin-right: 2%;
box-shadow: 1px 2px 10px 7px black;
animation-name: slid;
animation-direction: right;
animation-duration: 50s;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes slid{
0%{background: url('pic11.jpeg');background-size: 100% 100%;}
10%{background: url('pic12.jpeg');background-size: 100% 100%;}
20%{background: url('pic13.jpeg');background-size: 100% 100%;}
30%{background: url('pic14.jpeg');background-size: 100% 100%;}
40%{background: url('pic15.jpeg');background-size: 100% 100%;}
50%{background: url('pic12A.jpeg');background-size: 100% 100%;}
60%{background: url('pic13A.jpeg');background-size: 100% 100%;}
70%{background: url('pic14A.jpeg');background-size: 100% 100%;}
80%{background: url('pic15A.jpeg');background-size: 100% 100%;}
90%{background: url('pic11A.jpeg');background-size: 100% 100%;}


}

.principal{
padding: 2% 0%;

}
.principal ul {
display: flex;
list-style: none;
}

.principal .principal-text{
width: 70%;
color: rgb(68, 68, 68);
font-weight: 400;
line-height: 1.5rem;
text-align: justify;
}
.principal .principal-text{

padding: 0% 1% 0% 1%;
}
.principal .principal-text p{
text-align: justify;
padding-top: 5%;
}
.principal .principal-pic img{
width: 100%;
border-radius: 10%;


}
.principal .principal-title img{
width: 6%;
}

.campus{
padding: 2% 0%;

}
.campus ul {
display: flex;
list-style: none;
}

.campus .campus-text{
width: 70%;
text-align: justify;
height: auto;
color: rgb(68, 68, 68);
font-weight: 400;
line-height: 1.5rem;
}
.campus .campus-text{
text-align: center;
padding: 0% 1% 0% 1%;
}
.campus .campus-text p{

padding-top: 5%;
}
.campus .campus-pic img{
width: 100%;
border-radius: 10%;


}
.divider1 img{
padding-left: 40%;
padding-bottom: 2%;
}

.teachers{
display: block;
list-style: none;
}
.teachers h1{
background: #2e5f85;
color: rgb(0, 33, 71);
font-weight: 700;
text-align: center;
font-family: Cursive;
}
.teachers-l{
padding: 3% 3% 3% 3%;

}
.teachers-l ul{
display: flex;
list-style: none;
text-align: center;
}
.teachers-l ul li{
width: 25%;
box-shadow: 1px 2px 10px 7px black;

}

.teachers-l .rusa img{
width: 100%;
}
.teachers-l .ncc img{
width: 100%;
height: 80.3%;
}
.teachers-l .nss img{
width: 100%;
height: 80.3%;
}
.teachers-l .naac img{
width: 100%;
height: 80.3%;
}

.not-eve{
padding: 1% 0% 2% 0%;


}
.not-eve ul {
display: flex;
list-style: none;
background: #2e5f85;

}
.not-eve ul li {
width: 100%;
align-content: space-between;

}
.not-eve ul li h1{
color: rgb(0, 33, 71);
font-weight: 700;
font-family: Cursive;
}
.notice-eve-text ul{
display: flex;
list-style: none;

}
.notice-eve-text .notice-text{
width: 50%;
}
.notice-eve-text .notice-text ul{
display: block;
list-style: none;
}
.notice-eve-text .notice-text ul li{
padding: 1% 0 1% 0;
}
.notice-eve-text .evb {
display: block;
list-style: none;
width: 50%;
}
.notice-eve-text .evb li{
display: flex;
list-style: none;
}
.evb-date {
font-family: Georgia, "Times New Roman", Times, serif;
background: rgba(59,89,152,0.5);
display: block;
margin-bottom: 2%;
border-radius: 25%;
color: #FFFFFF;
}
.evb-text{
padding: 1.5% 0 2% 1%;

}
.academics{
display: block;
list-style: none;
}
.academics h1{
background: #2e5f85;
color: rgb(0, 33, 71);
font-weight: 700;
text-align: center;
font-family: Cursive;
}
.academics-l ul{
display: flex;
list-style: none;
text-align: center;
padding:3% 1% 2% 2%;
}
.academics-l ul li{
width: 33%;
box-shadow: 1px 2px 10px 7px black;

}

.academics-l .naac img{
width: 100%;
height: 80.3%;
}
.academics-l .ncc img{
width: 100%;
height: 80.3%;
}
.academics-l .nss img{
width: 100%;
height: 80.3%;
}
.iqac-text{

padding:2% 1% 2% 1%;
line-height: 130%;
list-style: circle;

}
.iqac-text1{

padding:2% 1% 2% 1%;
line-height: 130%;

}
.footer-list{
display: flex;
background-color: #24262b;

}
.footer-list ul{
display: block;
list-style: none;
color: blueviolet ;
margin-top: 5%;
font-family: 'texgyreadventorbold';
color: #fff;
text-transform: uppercase;
width: 100%;
}
.footer-list ul li{

padding: 1% 1%;
text-transform: none;


}
.footer-list ul li a{
color: white;
font-size: small;
color: #8eb6d6;
}
.footer-list ul li p{
color: #8eb6d6;
font-size: small;
}
.footer-list-1{
display: flex;
background: #2e5f85;
text-align: center;
}

.footer-list-1 ul a i{
text-align: center;
padding: 1% 1%;
}
#fl1-p1{
text-align: left;
width: 50%;
padding: 10% 1% 1% 1%;

}
#fl1-p2{
padding: 10% 1% 1% 1%;
display: block;
text-align: left;
width: 50%;

}
#fl1-p2 li{
padding: 1% 1%;
display: block;
list-style: none;
text-align: left;

}
#fl1-p3{
padding: 1% 1%;
}

/*---------------------------------people page---------------------------------*/
.container {
max-width: 1000px;
padding: 0 10px;
margin: 0 auto;
}

.rectangle {
position: relative;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}


/* LEVEL-1 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-1 {
width: 50%;
margin: 0 auto 40px;
background: var(--level-1);
}

.level-1::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 20px;
background: var(--black);
}


/* LEVEL-2 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-2-wrapper {
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
}

.level-2-wrapper::before {
content: "";
position: absolute;
top: -20px;
left: 25%;
width: 50%;
height: 2px;
background: var(--black);
}

.level-2-wrapper::after {
display: none;
content: "";
position: absolute;
left: -20px;
bottom: -20px;
width: calc(100% + 20px);
height: 2px;
background: var(--black);
}

.level-2-wrapper li {
position: relative;
}

.level-2-wrapper > li::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 20px;
background: var(--black);
}

.level-2 {
width: 70%;
margin: 0 auto 40px;
background: var(--level-2);
}

.level-2::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 20px;
background: var(--black);
}

.level-2::after {
display: none;
content: "";
position: absolute;
top: 50%;
left: 0%;
transform: translate(-100%, -50%);
width: 20px;
height: 2px;
background: var(--black);
}


/* LEVEL-3 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-3-wrapper {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 20px;
width: 90%;
margin: 0 auto;
}

.level-3-wrapper::before {
content: "";
position: absolute;
top: -20px;
left: calc(25% - 40px);
width: calc(50% + 85px);
height: 2px;
background: var(--black);
}

.level-3-wrapper > li::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -100%);
width: 2px;
height: 20px;
background: var(--black);
}

.level-3 {
margin-bottom: 20px;
background: var(--level-3);
}


/* LEVEL-4 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-4-wrapper {
position: relative;
width: 80%;
margin-left: auto;
}

.level-4-wrapper::before {
content: "";
position: absolute;
top: -20px;
left: -20px;
width: 2px;
height: calc(100% + 20px);
background: var(--black);
}

.level-4-wrapper li + li {
margin-top: 20px;
}

.level-4 {
font-weight: normal;
background: var(--level-4);
}

.level-4::before {
content: "";
position: absolute;
top: 50%;
left: 0%;
transform: translate(-100%, -50%);
width: 20px;
height: 2px;
background: var(--black);
}


/*other part -------------------------------*/

/* LEVEL-3 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-3-wrappera {
position: relative;
display: grid;
grid-template-columns: repeat(1, 2fr);
grid-column-gap: 20px;
width: 80%;
margin: 0 auto;
}

.level-3-wrappera::before {
content: "";
position: absolute;
top: -20px;
height: 2px;
background: var(--black);
}

.level-3-wrappera > li::before {
content: "";
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, -100%);
width: 2px;
height: 20px;
background: var(--black);
}

.level-3a {
margin-bottom: 20px;
background: var(--level-3);
}


/* LEVEL-4 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-4-wrappera {
position: relative;
width: 80%;
margin-left: 10%;

}

.level-4-wrappera::before {
content: "";
position: absolute;
top: 0px;
left: 50%;
width: 2px;
height: calc(100% - 10px);
background: var(--black);
}

.level-4-wrappera li + li {
margin-top: 20px;
}

.level-4a {
font-weight: normal;
background: var(--level-4);
}

.level-4a::before {
content: "";
position: absolute;
top: 50%;
left: 0%;
transform: translate(-100%, -50%);
width: 20px;
height: 2px;
background: var(--black);
}

.rectanglea{
padding: 10% 2% 10% 2%;
}

/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 700px) {
.rectangle {
padding: 20px 10px;
}

.level-1,
.level-2 {
width: 100%;
}

.level-1 {
margin-bottom: 20px;
}

.level-1::before,
.level-2-wrapper > li::before {
display: none;
}

.level-2-wrapper,
.level-2-wrapper::after,
.level-2::after {
display: block;
}

.level-2-wrapper {
width: 90%;
margin-left: 10%;
}

.level-2-wrapper::before {
left: -20px;
width: 2px;
height: calc(100% + 40px);
}

.level-2-wrapper > li:not(:first-child) {
margin-top: 50px;
}
}


fieldset {
background-color: floralwhite;
width: 50%;
}

legend {
background-color: #234a66;
color: white;
padding: 5px 10px;

}


/********** Teachers Section CSS Starts **********/
.our-teacher {
padding:20px;
width:100%;
float:left;
}
.our-teacher p {
font-size:15px;
line-height: 25px;
margin-top:10px;
}
.our-teacher a {
background: #68bb59;
color: #fff;
padding: 14px 20px;
float: left;
text-decoration: none;
font-size: 16px;
margin-top:20px;
}

.meet-tech {
position: relative;
display: flex;
list-style: none;
justify-content: space-between;
}
.meet-tech img {
border-radius: 50px;
width: 213px;
height: 285px;
padding:5%
}
.meet-tech-div {
position: absolute;
bottom: 20px;
left: 65px;
border-radius: 5px;
text-align: center;
background-color: white;
padding:10px;
}

.teacher-box{
background: #002147;

}
.dept ul {
display: flex;
list-style: none;
justify-content: space-evenly;
}

.dept .dept1{
text-align: center;
width: 40%;
margin-left: 2%;

}

.dept .dept1 img {
border-radius: 100px;
width: 213px;
height: 285px;
padding: 10%;
}

.dept .dept2{
text-align: left;
width: 60%;
margin-right: 2%;
margin-top: 10%;
text-justify: justify;
}

.dept .dept2 ul{
margin-top: 5%;

}
/********** Teachers Section CSS Ends **********/