@import url('https://fonts.googleapis.com/css2?family=Rasa:wght@300;400;500&display=swap');
/* font-family: 'Rasa', serif; */
:root { 
	--c1 : #ffffff;
    --c2 : #000;
    --c3 : #FD9A05;
    --c4 : #F0F0F0;
    --c5 : #FDDA26;
    --c6 : #70B339;
    --c7 : #575757;
    --c8 : #f3f3f3;
}     

p, a, h4, h5, h6, h3, h1, h2, span,em, small{font-family: 'Rasa', sans-serif!important; }
p{font-size: 1.2em!important;}
em{font-size: 1em!important;}
li{font-size: 1em;}
.btn-slide{background-color: var(--c3); font-weight: bold; width: 10em;}
.btn-slide{ background: linear-gradient(to right, var(--c6) 50%, var(--c3) 50%); background-size: 200% 100%; background-position: right bottom; transition: all .5s ease-out;}
.btn-slide:hover {  background-position: left bottom; }
.text{color: var(--c7);}
.bellefonte-bg{background-color: var(--c8);}

/* header */
header nav {grid-gap: 3rem!important;}
header {z-index: 2;padding: 0px 4em!important;  position: fixed; top: 0; width: 100%; background-color: var(--c1);}
header nav a { font-size: 1.2em;font-weight: 500;}
header nav a::after { content: ''; display: block;  width: 0; height: 3px; background: var(--c3); transition: all ease-in-out .2s;}
header nav a:hover::after {  width: 100%; left: 0;}
.active{ color: var(--c3);}


/* HOME */
.wallpaper { position: relative; min-height: 100vh; background-image: url('../img/newcollege.jpg'); background-position:bottom; background-size: cover; filter: brightness(90%);}
.notice { background-color:rgba(0,0,0,.8); color: white; width: 100%; position: relative;}
.notice-container { position: sticky; top:67px; bottom:0; }
.notification div{ border-right: 1px solid rgba(255,255,255,.3); padding:.4em 2em; }
.notification a,.notification p {font-family: sans-serif!important; font-size:.8em; max-width:350px; overflow: hidden; max-height:62px; }
.notification div:last-child{border-right: none;}
.events { bottom: 0px; background:rgba(0,0,0,.69); color:rgba(255,255,255,.8); width:250px; position: absolute; left:.5em; bottom:50px; border-radius:10px; padding-top:1em; }
.events h4 { font-weight:400; font-size:1.5em; margin:0px auto; color:orange; padding-left: 10px;}
.events ul {  max-height:350px; overflow: hidden; overflow-y: auto; }
.events ul > li { display: grid; grid-template-columns:auto 1fr; align-items: center; padding:.5em; grid-gap:.5em; }
.events ul > li > strong { display: grid; font-size:1.5em; font-weight:400; background:rgba(255,255,255,.9); border-radius:7px; padding:.3em; color:#333; transition:.5s all; }
.events ul > li > strong > span {font-size:.5em; }
.events ul > li > p { font-weight:300; text-align: justify; }

.notice marquee { scroll-behavior: smooth; }
.notice .eventdt { font-family: sans-serif; max-width:100px; max-height:70px; background-color: var(--c3); display:grid; justify-items: center; white-space:nowrap; overflow: hidden; border-radius: var(--radius); }
.notice .eventdt i {  font-family: sans-serif; font-size:1.5em; margin:0px auto; padding:.05em .5em; }
.notice .eventdt b {  font-family: sans-serif; font-size:.8em; background-color:rgba(0,0,0,.3); width: 100%; text-align: center; padding:.1em .5em; }
.notice .notification > div a { display: grid; align-items: center; grid-gap:1em; }
.notice .notification > div:hover p { color:var(--c3); }
.notice .eventdt-group {  display:grid; grid-template-columns:auto auto auto; justify-items: center; gap:.5em; font-family: sans-serif; max-width:150px; max-height:70px; background-color: var(--c3); justify-items: center; align-items: center; white-space:nowrap; overflow: hidden; border-radius: var(--radius); }
.notice .eventdt-group .eventdt { background-color: rgba(0,0,0,0.1); }
.notice .eventdt-group,.notice .eventdt { transform:scale(.8); }

.notice .controlmarquee { opacity:0; position:absolute; font-size:2.5em; z-index:1; height:100%; background-color:rgba(0,0,0,.5); margin:0 auto; top:0; bottom:0; display: grid; align-items: center; justify-items: center; min-width:100px; transition:.5s all; }
.notice .controlmarquee:hover { opacity:1; }
.notice .controlmarquee.left { left:0px; }
.notice .controlmarquee.right { right:0px; }


.about-us{display: grid; grid-template-columns: 1fr 30vw; grid-gap: 50px;}
.about-img img{height: 25rem; color: #F0F0F0;}

.box { height:auto; max-height:300px; cursor: pointer; position: relative; overflow: hidden; border-radius: 5px;}
.box  img { object-fit: cover; width: 100%; height: 100%; }
.box .bx-caption h5{color: var(--c3);}
.box:hover .bx-caption{top: 0%; transition: top .5s;}
.bx-caption { position: absolute;background: rgba(0,0,0,.8); padding: 1.5em; width: 100%;height: 100%; top: 70%;left: 0; bottom: 0; transition: top .5s;}
.bx-caption p,.bx-caption h5{ color: #fff;}
.bx-caption p { overflow:hidden; overflow-y:auto; max-height:200px; height:fit-content; padding-bottom:1em; }
.bx-caption h5{margin-bottom: 1.2em; text-align: center;}
.box:hover{box-shadow: 0px 8px 10px 3px rgba(111, 111, 111, 0.75);}

.notification{display: flex;}



/* curriculu`m */
.curriculum{    box-shadow: 0 2px 1px rgba(0,0,0,.2); min-height: 300px; overflow: hidden; border-radius: 5px;}
.curriculum-img1{background-image:  url('../../files/webpics/morning-school.JPG'); background-position:center; background-size: cover;}
.curriculum-img2{background-image:  url('../../files/webpics/out-of-school-programm.JPG'); background-position:center; background-size: cover;}
.curriculum-img3{background-image:  url('../../files/webpics/vocational.JPG');background-position:center; background-size: cover;}
.curriculum-img4{background-image:  url('../../files/webpics/nios.JPG'); background-position:center; background-size: cover;}
.curriculum-img5{background-image:  url('../../files/webpics/social-commitment.JPG'); background-position:center; background-size: cover;}
.curriculum:hover{  box-shadow: -1px 10px 20px -4px rgba(143,143,143,1);}
.curriculum p{ color: var(--c2); font-weight: 600;}
.curriculum-container p{font-size: 1.2em;}
.shutter-out-vertical{height: 200px; text-transform: uppercase;}
/* .shutter-out-vertical{ background-color: var(--c2);height: 200px;font-weight: bold; object-fit: fill; padding: 15px 0;text-align: center;text-decoration: none;text-transform: uppercase;} */
/* .shutter-out-vertical a{color: #4d4b4b; opacity: 0;}
.shutter-out-vertical a:hover{ color: #fff; opacity: 0.1;} */
/* shutter out vertical effect */
/* .shutter-out-vertical{ transition: color 500ms; position: relative;  transform: translateZ(0); backface-visibility: hidden;}
.shutter-out-vertical:before{ content: "Know More";position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #000000; opacity: 0.5; visibility: unset;transform: scaleY(0);transform-origin: 50%; transition-property: transform; transition: 500ms ease-out;}
.shutter-out-vertical:hover:before{transform: scaleY(1);} */
.gallery img{width: 100%; object-fit: cover;  height: 100%;}
.gallery-top img{width: 100%; object-fit: cover;}
.gallery-top{display: grid; grid-template-columns: auto 30vw auto; background-image: url("../img/wallpaper-001.jpg"); object-fit: cover; background-position:center; background-size: cover;} 


/* GALLERY */
.card {transition: 0.3s;}
.card:hover {transform: translate(0, -10px);box-shadow: 0 13px 17px 1px rgba(91, 91, 91, 0.75)!important;}
.career .card {background-color: #f7f7f7;}
.card p{font-size: 1em!important;}
.bgimg img{object-fit: cover; max-height: 60vh; width: 100%;}
.eligallery-modal .mediabox img { width:100%; max-height:90vh; max-width:90vw; }
.eligallery-modal .modal-container { padding:0px!important; background:transparent!important; overflow: hidden!important; }

/* footer */
.arrow-down {width: 0; height: 0; border-left: 20px solid transparent;border-right: 20px solid transparent;border-top: 20px solid var(--c5);margin: auto; }
.ft { position: relative; bottom: 0px; width: 100%; font-family: 'Rasa', sans-serif; }
.logo img { width: 70%; height: auto; background-color: #ffffff;} 
.ulcon { color: #575757; }
.h { size: 2px; width: 50%; background-color: #FD9A05;}
.logo{outline: 1px solid var(--c8);}
.hh .mdiicons { color: #575757; }


/*Contact Us*/
.contact { color: #fff; }
.address { color: #000000; }
.cbg { height: 50vh; background-image: url('../img/newcollege.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; }
.overlay{height: 100%;}
.overlay::before { content: ""; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); position: absolute; top:0; left:0; right:0; bottom:0; }
.map-responsive iframe{ padding-top: 40px; padding-bottom: 40px;}
/* .notice{background-color: #000; opacity: 0.7; border: 2px solid;  position: absolute;bottom: 0px; width: 100%;} */
.address{font-size:1.rem!important;}
.contentins { z-index:1; position:relative; display: grid; height: 100%; align-items: center; padding-top: 70px; }

/*Academics*/
.acadbg { min-height: 60vh; background-image: url('../img/newcollege.jpg'); background-position: center; background-size: cover; }
.acadbg h3 { color: #F0F0F0; }
.section-title span { font-size: inherit; }
.pics img {transition: 0.3s;  border-radius: 5px; box-shadow: 0 2px 1px rgba(0,0,0,.2); overflow: hidden;  width: 100%; }
.pics img:hover {transform: translate(0, -10px);box-shadow: 0 13px 17px 1px rgba(91, 91, 91, 0.75)!important;}
.bts { color: #FD9A05; }
.head,.hd {color: #FD9A05; }
.academics li, .academics p{text-align: justify;}
table { border-collapse: collapse; width: 100%; overflow: hidden; }
td, th { border: 1px solid #575757; padding: 10px; }
.list-courses{padding-left: 50px;}
.current-activities{padding-left: 16px;}
.shl span{ font-size: 6em; color: #FD9A05; }


/*about us*/
.bgimg {min-height: 60vh; background-image: url('../img/newcollege.jpg'); background-position:center; background-size: cover; filter: brightness(90%);}
.para { text-align: justify; }
.in{font-family: 'Rasa',sans-serif;}
.container-about .mdi{color:var(--c3) }
.container-about .tsize-20 { font-size: 2em!important;}
.btmleft{position: absolute;bottom: 8px;}
.imag img{ width: 100%; max-width: 400px;  border-radius:var(--radius);}
.mage { transition: .5s all; min-width:200px; min-height:200px; border-radius:var(--radius); overflow:hidden; position: relative; box-shadow:0px 3px 5px rgba(0, 0, 0, .5); }
.mage img { position:relative; width:100%; height:100%; object-fit:cover;  }
.mage:hover::after { z-index:-1;background-color:rgba(255,255,255,20); }
.mage:hover { transform:scale(1.2); box-shadow:0px 5px 10px rgba(0, 0, 0, .7);}
.about-us-main{padding-right: 4em; padding-left: 4em;}

/*admission*/
.lnk { display:grid; justify-items:start; }
.lnk a { display:block; }
.lnk a::before { content:"\f0162"; font:normal normal normal 16px/1 "Material Design Icons"; margin-right:.5em; }
.lnk a:hover{color: var(--c3);}
.lnk p { text-align:left; width: 100%; }
.admission-container{padding-right:4.5rem!important; padding-left:4.5rem!important;}



.cbox-container { border:1px solid rgba(0,0,0,.4); }
.cbox-container .cbox { border:1px solid rgba(0,0,0,.4); }
.cbox-container .cbox-title { border-bottom:2px solid rgba(0, 0, 0, .4); background-color:#ffecb3 !important; }
.cbox-container .csbox { padding:1em; border-top:1px solid rgba(0,0,0,.4); }

:root {
    --h5-lh : line-height:1.5!important; 
}

.academics .collapse-header { line-height: 1.5; }
.academics .collapse-header h5 { line-height: 1.5; letter-spacing:unset!important; }

/* Stories */
table.stories-table img {
    width: 300px;
    height: 300px;
    object-fit: contain;
    border-radius: var(--radius);
    margin: .5em;
}

/* = Loading =  */
body.loading::after {  content:""; background-color:rgba(255,255,255,.99); 
  animation:loadingpage 3s infinite ease-in-out; background-image:url('../img/logo.png');  background-repeat:no-repeat; background-position: center;
  color:rgba(0,0,0,.7); position:fixed; top:0; left:0; right:0; bottom:0; z-index:99; width:100%; height:100%;
}



@keyframes loadingpage {
  0%  { background-size:80px;  opacity:.9; }
  50%  { opacity:.98; background-size:180px; }
  90% { background-size:90px;  opacity:.95; }
  100% { background-size:80px;  opacity:.9; }
}

/* ==  */


@media (max-width: 450px) {.about-img{visibility: collapse;}}
@media (max-width: 280px){ .eligallery-modal .mediabox img {width:100vw; }}
/* @media (max-width: 2px){} */
@media (max-width: 960px) {
    .about-us{grid-template-columns: 1fr;}.about-us .about-img img{display: none;}  
    .gallery{display: none;}
    .gallery-top{grid-template-columns: 1fr;}
    .gallery-top div .btn{margin-top: 0px;}
    .add { padding-left: 20px;  }
    
}
@media (max-width: 450px) {
    .modal.active .modal-container{width: 100%!important}
    .btn.med { font-size: 14px;}.btn { font-size: 14px;}
    p{font-size: 15px!important;}
    li{font-size: 13px!important;}
    h1{font-size: 2.5em!important;}
    h3{font-size: 2em!important;}
    h4{font-size: 1.8em!important;}
    h6{font-size: 1.3em!important;}
    .box {height: 50vh;}
    .bx-caption {top: 70%}
    .wallpaper {position: relative; min-height: 65vh;}
    .about-us{grid-template-columns: 1fr;}
    .about-us-main{padding-right: 1.4em!important; padding-left: 1.4em!important;}
    .about-us .about-img img{display: none;}
    .gallery{display: none;}
    .gallery-top{grid-template-columns: 1fr;}
    .gallery-top div .btn{margin-top: 0px;}
    /* header */
    header{padding: 0px 16px!important;}
    .brand img{height: 56px;}
    header nav a{font-size: 18px;}
    .logo img{width: 150px!important; padding-left: 0px!important; }
    /*  */
    footer small{font-size: 12px; padding: 0px!important; }
    .card {min-width: 0px!important}
    .map-responsive iframe{ width: 90vw;}
    .add { padding-left: 20px; }
    td,th{font-size: 8px!important;}
    td li{font-size: 8px!important;}
    .current-activities ol{padding-left: 10px;}
    .list-courses {padding-left: 10px; }
    .list-courses li{text-align: left}
    .admission-container{padding-right:1.4rem!important; padding-left:1.4rem!important;}
    .eligallery-modal .mediabox img {max-width:97vw; }
    nav.active:not(.social)::before{    font-size: 2rem!important;}
    .head{padding-left: 10px;}
    .current-activities{padding-left: 0;}
}

/*Universal Scrollbar*/
/* width */
::-webkit-scrollbar { height: 7px ;width: 7px; }
  
  /* Track */
  ::-webkit-scrollbar-track { background: #f1f1f1; }
   
  /* Handle */
  ::-webkit-scrollbar-thumb { background: #575757 ; border-radius: 25px;}
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover { background: #FD9A05; }