@import "./Web_Color.css";


/* All selector starts here */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* All selector Ends here */



/* popup modal starts here */

.modal {
  background-color: #0000006b;
}

.modal-body {
  text-align: justify;
}

.modal-body p {
  font-size: 20px;
  text-align: justify;
}

.modal-body img {
  width: 99%;
}

@media screen and (max-width: 512px) {
  .modal-title {
    text-align: center;
    font-size: 13px !important;
  }
  .modal-body p {
    font-size: 13px;
  }
}

/* popup modal ends here */


/* upper-infoNav starts here */

.uppernavone{
    background-color:  var(--main-Color-bg-2);
}

.upper-infoNav-sec {
    background-color: #e9e9e9;
}
.upper-infoNav{
    margin: 0 auto;
}

.upper-infoNavSec1{
    background-color: var(--main-color-secondary-3);
    color: white;
    font-weight: bold;
}


.upper-infoNavSec2 a{
    text-decoration: none;
    color: white;
    font-weight: bolder;
}

@media screen and (max-width:993px){
    .upper-infoNav{
        width: 100%;
    }
    .upper-infoNavSec2{
        display: none;
    }
}

.upper-infoNavSec3 a{
    margin: 0 10px;
    font-size: 20px;
    color: white;
}

.upper-infoNavSec3 a:hover:nth-child(1){
 color: rgb(51, 51, 252);
}

.upper-infoNavSec3 a:hover:nth-child(2){
    color: rgb(15, 203, 15);
   }

 .upper-infoNavSec3 a:hover:nth-child(3){
    color: rgb(19, 238, 238);
   }

   @media screen and (max-width:993px){
    .upper-infoNavSec3{
        display: none;
    }
}

/* upper-infoNav Ends here */


/* upper-infoNav Ends here */


.main-Nav{
    background-color: white ;
    box-shadow: 0px 15px 10px -15px #111;    
    position: sticky;
    top: 0px;
    width: 100%;
    z-index: 10;
}

.main-Nav>nav{
    width: 95%;
}

/* .main-logo{
   color: #fff;
} */


.mylinks{
    margin: 0  5px;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
}

.ddown-links{
    background-color: var(--main-Color-bg-2);
    border-radius: 8px;
    padding: 10px;
    margin: 1px 0 0 0 ;
    font-size: 14px;
    color: var(--main-Color-bg);
    opacity: 0.9;
}

.ddown-links:hover{
    color: var(--main-Color-bg);
}

.ddown-links li a{
    color: var(--main-Color-bg);
    margin:8px 0;
    font-weight: 500;
    border-radius: 10px;
}

.ddown-links li a:hover{
    background-color: var(--main-Color-bg);
    color: var(--main-Color-bg-2);
}

.navbar{
    width: 90%;
    margin: auto;
}

.main-logo{
    width: 550px;
}

.main-logo img{
    width: 100%;
}

.nav-item a{
    color: var(--main-Color-bg-2);
}

.nav-item a:hover{
    transition: .5s ease;
    color: var(--main-Color-bg);
    background-color: var(--main-Color-bg-2);
}

@media screen and (max-width:1568px){
    .main-logo{
        width: 400px;
    }
    .mylinks{
        font-size: 14px;
    }

    .navbar{
        width: 90%;
        margin: auto;
    }
}

@media screen and (max-width:1368px){
    .mylinks{
        font-size: 14PX;
    }
}

@media screen and (max-width:1268px){
    .main-logo{
        width: 320px;
    }
    .mylinks{
        font-size: 12PX;
    }

    .navbar{
        width: 90%;
        margin: auto;
    }
}


@media screen and (min-width:993px) 
{

    .dropdown:hover .dropdown-menu{
        display: block !important;;
    }

    .dropdown:focus .dropdown-menu{
        display: block !important;;
    }

    .dropdown .dropdown-menu .show{
        display: none !important;
    }    
}

@media screen and (max-width:993px){
    .navbar{
        width: 98%;
    }
    
    .main-logo{
        width: 250px;
    }
}
@media screen and (max-width:768px){
    .main-logo{
        width: 230px;
    }
}



@media screen and (max-width:312px){
    .nav-toggle-btn-f{
        font-size: 10px;
        margin: 5px 0 5px 200px;
    
    }
}


/* @media screen and (max-width:512px){
    .main-Nav>nav>div>a>img{
        width: 100px;
    }

    .nav-toggle-btn-f{
        font-size: 10px;
        margin: 5px 0 5px 200px;
    
    }
} */


/* Carosel Starts Here */


.HomeCarosel{
    width:  100%;
    height: auto;
    margin: 0px auto 10px;
    object-fit: contain;
}

.carousel-item img{
   width: 100%;
   object-fit:cover;
   object-position:center;
}


.carousel-inner>div>div h1{
    color: var(--main-Color-bg);
    text-shadow: 4px 7px 13px rgba(0,0,0,1);
}

.carousel-caption{
    background-color: rgba(70, 70, 70, 0.603);
}



@media screen and (min-width:1370px) {
    .carousel-item img{
        width: 100%;
        height: 70vh;
        object-fit:cover;
     }



     .carousel-inner>div>div h1{
        font-size: 30px;
    }
    
    .carousel-inner>div>div p{
        font-size: 20px;
    }
} 

@media screen and (max-width:1368px){
    .carousel-item img{
        height: 78vh;
        object-fit:cover;

     }
     /* .carousel-inner{
        height: 400px;

    } */

    .carousel-item>div{
        margin: 0px;
    }

    .carousel-inner>div>div h1{
        font-size: 20px;
    }
    
    .carousel-inner>div>div p{
        font-size: 16px;
    }
}

@media screen and (max-width:993px) 
{
    
    .HomeCarosel{
        margin-bottom: 20px;
    }
    
    .carousel-inner>div>div{
        margin: 0 0px 100px 0 ;
        
    }

    .carousel-inner>div>div h1{
        font-size: 16px;
    }
    
    .carousel-inner>div>div p{
        font-size: 12px;
    }


    .carousel-item img{
        height: auto;
        object-fit:cover;
     }

     .carousel-inner{
        height: auto;

    }
    
}

@media screen and (max-width:512px) {
    .carousel-inner>div>div{
        margin: 0 0px 0px 0 ;
        
    }

    .carousel-inner>div>div h1{
        font-size: 10px;
    }
    
    .carousel-inner>div>div p{
        font-size: 8px;
    }
}

/* Carosel Ends Here */

/* WC starts Here */
.WC-section{
    width: 99%;
    margin: 20px auto 0 auto;
    text-align: justify;
}

.WC-inner-1{
    background-image: url(../Assets/Imges/BackgroundAttachments/background_attachment.webp);
    background-attachment: fixed;
    padding: 0 30px;
    height: 24em;
    background-repeat: no-repeat;
    background-size:cover;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.WC-inner-1 h1{
    border-bottom: 3px solid white;
    padding: 5px 0;
    font-size: 18px;
}

.WC-inner-1 p{
    font-size: 14px;
}

@media screen and (min-width:1369px) {
    .WC-inner-1{
        height: 24em;
        text-align: justify;
    }

    .WC-inner-1 h1{
        font-size: 30px;
    }

    .WC-inner-1 p{
        font-size: 16px;
    }
}

@media screen and (max-width:512px){
    .WC-inner-1{
        height: auto;
    }
} 

.WC-inner-1-1extend{
    height: 24em;
}

.WC-inner-1-1extend>div{

    display: flex;
    align-items: center;
}

.WC-inner-1-1extend>div>div{
    height: 180px;
    padding: 2px 5px;
    text-align: center;
    transition: .2s ease-in-out;
    background-color: var(--main-Color-bg-);
    box-shadow: rgb(152, 152, 152) 5px 5px 10px 3px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}


.WC-inner-1-1extend>div>div:hover{
    background-color: var(--main-color-secondary-1);
    box-shadow: none;
    transition: .3s ease-in-out;
}



.WC-inner-1-1extend>div>div a{
    color: black;
    font-size: 25px;
}

.WC-inner-1-1extend>div>div p:nth-child(even){
    margin: 0;
    padding: 0;
    font-weight: bolder;
    color: black;
    text-transform: uppercase;
}

.WC-inner-1-1extend>div>div p:nth-child(odd){
    font-size: 12px;
    text-align: justify;
    padding: 0 4px;
    color: black;
}

.WC-inner-1-1extend>div>div:hover{
    box-shadow: 1px 1px 5px black;
}

@media screen and (max-width:998px){
    .WC-inner-1-1extend{
        margin-top: 10px;
    }
    .WC-inner-1-1extend>div>div{
        width: 100%;
    }
    .WC-inner-1-1extend>div>div p:nth-child(odd){
        font-size: 13px;
        text-align: center;
        padding: 0 4px;
        color: black;
    }

}

@media screen and (max-width:512px){
    .WC-inner-1-1extend{
        height: auto;
    }

    .WC-inner-1-1extend>div>div{
        height: auto;
        margin: 10px auto;
    }
}



.WC-inner-2{
    padding: 0 20px 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 24em;
    background-image: url(../Assets/Imges/BackgroundAttachments/background_attachment.webp);
    background-attachment: fixed;
    background-size: cover;

}

.WC-inner-2 h2{
    color: var(--main-Color-bg);
    padding: 5px;
    text-align: center;
}

.WC-inner-2 ul li{
    margin: 10px 0;
    font-size: 15px;
    transition:.2s ease-in-out;
    color: var(--main-Color-bg);
}

.WC-inner-2 ul li:hover{
    color: var(--main-color-secondary-1);
    cursor:default;
}


@media screen and (max-width:1568px) {
    .WC-inner-2 h2{
        font-size: 30px;
    }

    .WC-inner-2 ul li {
        margin:5px 0;
        font-size: 14px;
    }
}

@media screen and (max-width:1368px) {
    .WC-inner-2 h2{
        font-size: 20px;
    }

    .WC-inner-2 ul li {
        margin:5px 0;
        font-size: 13px;
    }
}


@media screen and (max-width:993px) 
{
    .WC-section{
        width: 100%;
        margin: 10px auto 0 auto ;
    }

    .WC-inner-1{
        padding: 20px;
        max-height: 30em;
    }

    .WC-inner-1 h1{
       font-size: 18px;
       font-weight: bolder;
       text-align: center;
    }

    .WC-inner-1 p{
        font-size: 16px;
    }

    .WC-inner-1-1extend{
        height: auto;
    }
    .WC-inner-1-1extend>div>div{
        height: auto;
    }

    .WC-inner-2{
        border-left: 2px solid black;
        margin: 20px auto;
        padding: 0 10px 0 10px;
    }
    

}

@media screen and (max-width:512px){
    .WC-inner-2{
        height: auto;
        padding: 20px 20px 20px 0px;
        border: none;
    }
    .WC-inner-2 ul li{
        font-size: 14px;
    }
} 

/* WC Ends Here */

/* keysection starts here */

.keysection{
    margin: 20px auto 0px 0;
    padding:0;
    color: white;
    /* background-color: red; */
    width: auto;
}


.keysection>div{
    background-color: var(--main-Color-bg-2);
    padding: 50px 20px;
    margin: 0 auto;
    width: 24.5%;
}

.keysection>div h3{
    font-size: 22px;
}

.keysection>div a{
    text-decoration: none;
    color: black;
    font-weight: bolder;
    background: linear-gradient(to right,var(--main-color-secondary-2) 50%, white 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .4s ease-out;
    padding: 10px;
    border-radius: 25px;
    font-size: 14px;
}



.keysection>div a:hover{
    background-position: left bottom;
    color: white;
}


.keysection>div:nth-child(even){
    background-color:var(--main-color-secondary-5);
    color: black;
}

@media screen and (max-width:1368px) {
    .keysection>div h3{
        font-size: 20px;
    }

    .keysection>div p{
        font-size: 11px;
    }
    }

@media screen and (max-width:993px) {
    .keysection{
        padding: 10px 0;
    }
    }

@media screen and (max-width:512px){
    .keysection{
        margin: 0px auto 0px 0;
        padding:0;
    }

    .keysection>div{
        background-color: var(--main-Color-bg-2);
        padding: 50px 20px;
        margin: 0 auto 10px auto;
        width: 100%;
    }

    }

/* keysection Ends here */


/* NBoard New Starts Here */
.newnotice{
    width: 99.0%;
    margin: 20px auto;
}

.newnotice>div table{
    border: 3px solid var(--main-color-secondary-3);
}

.newnotice>div table thead tr th{
    background-color:  var(--main-color-secondary-3);
    color: var(--main-Color-bg);
}

.newnotice>div>table>thead>tr th{
    font-size: 20px;
}


.newnotice>div>table>tbody{
    font-size: .95vw;
    height: 300px;
}

.newnotice>div>table>tbody>tr>td:nth-child(2){
    text-align: center;
}

.newnotice>div>table>tbody>tr>td>a i{
    color:var(--main-color-secondary-3);
    font-size: 28px;
    transition: .2s ease-in-out;
}

.newnotice>div>table>tbody>tr>td>a i:hover{
    color: red;
}

@media screen and (max-width:1368px) {
    .newnotice>div>table>thead>tr th{
        font-size: 15px;
    }
    
    .newnotice>div>table>tbody{
        font-size: 14px;
    }
}

@media screen and (max-width:1368px) {
    .newnotice>div>table>thead>tr th{
        font-size: 11px;
    }
    
    .newnotice>div>table>tbody{
        font-size: 11px;
    }
}

.hotnews>i{
    color: red;
    margin: 0 0 0 5px;
    animation: upper-infoNavAnim 2s linear infinite alternate;
    background-color: var(--main-color-secondary-1);
    padding: 1px 5px;
    border-radius: 100%;
}

@keyframes upper-infoNavAnim {
    0%   {color:#11a739;}
    25%  {color:#2f55b5;}
    50%  {color:#560a57;}
    75%  {color:#e6593d;}
    100% {color:#137584;}
  }


/* NBoard New Ends Here */

/* highlights starts Here */



.highlights1-inner{
    width: 95%;
    margin:  auto;
}

.highlights1-inner>div{
    margin: auto;
    padding: 35px 0;
    text-align: center;
    border-radius: 10px;
    background: linear-gradient(to left, var(--main-Color-bg-2) 50%, var(--main-color-secondary-6) 50%) right;
    background-size: 200%;
    transition: .4s ease-out;
    color: var(--main-Color-bg);
}


.highlights1-inner>div>i{
    font-size: 50px;
}

.highlights1-inner>div:hover{
    background-position: left;
    color: white;
    color: var(--main-Color-bg-2);
}

@media screen and (max-width:993px) {
    .highlights1{
        padding: 5px 0;
        
    }

    .highlights1-inner>div{
        width: 98%;
        margin: 5px auto;
    }
}


/* highlights Endss Here */


.videoGlance{
    width: 88%;
    padding: 50px;
    margin: 10px auto 0 auto;
    align-items: center;
    text-align: justify;
    display: flex;
    justify-content: space-around;
    color: var(--main-Color-bg-2);
}

/* .videoGlance h2{
    font-size: 22px;
    text-align: center; 
} */



.videoGlance p{
    font-size: 17px;
}

.mainVideo video{
    width: 100%;
    height: auto;
    /* border: 2px solid var(--main-Color-bg-2); */
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

@media screen and (max-width:1368px){
    .videoGlance{
        width: 95%;
    }
}

@media screen and (max-width:993px) {
    .videoGlance{
        width: 100%;
        padding: 10px;
    }
    .videoGlance p{
        margin-top: 30px;
    }
}

.massageSection{
    text-align: center;
    margin: 2px auto 0 auto;
    padding: 10px 0;
    background-color: var(--main-Color-bg-2);
    color: white;
}


.massageSection-inner{
    padding: 10px 0 20px 0;
    margin:  0 auto;
    text-align: center;
}

.massageSection-inner>div>div{
    border: none;
    background-color: var(--main-Color-bg-2);
    border-radius: 10px;
    padding: 0;
    color: white;
    display: flex;
    align-items: center;
}

.massageSection-inner>div>div>img{
    border: none;
    height: 200px;
    width: 200px;
    margin: 5px 0;
    border-radius: 50% ;
    border: 5px solid white;
}

.msgbtn{
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    background: linear-gradient(to right, var(--main-color-secondary-2) 50%, var(--main-Color-bg) 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    transition: all .5s ease-out;
    color: var(--main-Color-bg-2);
}

.msgbtn:hover{
    background-position: left bottom;
}

.massageSection-inner-modal>div{
    border-radius: 10px;
    color: black;
    background-color: rgb(224, 224, 224);
}

.massageSection-inner-modal p{
 text-align: justify;
}



@media screen and (max-width:1366px){
    .massageSection{
        width: 95%;
    }

    .massageSection-inner{
        margin:  0 auto;
    }
    .massageSection-inner>div>div>img{
        height: 200px;
    }

    .massageSection-inner>div>div{
        color: white;
        max-width: 250px;
        margin: auto;
    }
}

@media screen and (max-width:993px){
    .massageSection{
        text-align: center;
        width: 90%;
        margin: 0 auto;
    }

    .massageSection-inner>div{
        margin: 10px 0 ;
    }

    .massageSection-inner>div>div{
        width: auto;
        color: white;
        margin: auto;
    }
    
}

@media screen and (max-width:993px){
    .massageSection{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: auto;
        padding: 0;
    }
}


.AlumniSection{
    text-align: center;
    margin:0px auto 0 auto;
    padding: 20px 0;
    background-color: var(--main-color-secondary-6);
    color: var(--main-Color-bg-2);
}


.AlumniSlick>div img{
    align-items: center;
    text-align: center;
    margin: 10px auto;
    border-radius: 25px;
}

.AlumniSlick>div p:nth-child(2){
    color: var(--main-Color-bg-2);
    font-size: 18px;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

.AlumniSlick>div p:nth-child(3){
    margin: 0;
    padding: 0;
}

.AlumniSection .AlumniSlick>div{
    color: var(--main-Color-bg-2);
}


@media screen and (max-width:1368px){
    .AlumniSlick{
        font-size: 14px;
    }


    .AlumniSlick>div img{
        padding: 0 10px;
        width: 200px;
        height: auto;
    }
    
}

@media screen and (max-width:512px){
    .AlumniSection{
        margin:10px auto;
        width: 99%;
        padding: 20px 0;
    }

    .AlumniSlick>div p:nth-child(odd){
        font-size: 12px;

    }
}


.NewsLetters{
    background-color:var(--main-Color-bg-2);
    margin: auto;
    padding: 0;
    align-items: center;
}

.NewsLetters>div:nth-child(1){
    /* background-color: #8f7a6f; */
    padding: 50px 300px 50px 0;
    text-align: right;
    color: white;
}

.NewsLetters>div:nth-child(2){
    padding: 50px 0 50px 120px;
}

.NewsLetters>div:nth-child(2) form input{
    width: 50%;
    height: 50px;
    text-align: left;
    padding: 10px;
    border: none;
    border-radius: 50px;
}

.NewsLetters>div:nth-child(2) form button{
    padding: 10px;
    border: none;
    border-radius: 50px;
}

@media screen and (max-width:993px){
    .NewsLetters>div:nth-child(1){
        padding:10px 0;
        text-align: center;
    }

    .NewsLetters>div:nth-child(2){
        padding: 0px;
        text-align: center;
    }

    .NewsLetters>div:nth-child(2) form input{
        width: 95%;
    }

    .NewsLetters>div:nth-child(2) form button{
        padding: 10px;
        border: none;
        border-radius: 50px;
        width: 25%;
        margin: 10px 0 0 0;
    }
    
}


.FooterTop>div{
    margin:auto;
    padding: 20px;
    background-color:var(--main-Color-bg-2);
}

.FooterTop1{
    text-align: center;
    font-size: 15px;
    color: white;
}

.FooterTop1 img{
    width: 130px;
    margin: 0 0 0px 0;

}

.FooterTop2{
    height: 200px;
    color: white;
}

.FooterTop2 a{
    text-decoration: none;
    color: white;
}

.FooterTop2 a:hover{
    color: #ffff00;
}

.FooterTop3{
    height: 200px;
    color: white;
}


.FooterTop3 a{
    text-decoration: none;
    color: white;
}

.FooterTop3 a:hover{
    color: #ffff00;
}

.FooterTop4{
    height: 200px;
    color: white;
}

.Footer-Copyright{
    display: flex;
    justify-content:center;
    padding: 10px 0;
    background-color:var(--main-Color-bg);
    color:var(--main-Color-bg-2);
    font-weight: 500;
}

.Footer-Copyright p{
    margin: 0 10px;
    padding: 0;
}

.Footer-Copyright a{
    color: red;
    text-decoration: none;
}

.Footer-Copyright a:hover{
    color: rgb(47, 0, 255);
}

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

    .FooterTop>div{
        margin:auto;
        padding: 20px 0 0 0px;
        /* text-align: center; */
        background-color:var(--main-Color-bg-2);
    }

    .FooterTop1 , .FooterTop2, .FooterTop3, .FooterTop4{
        height: auto;
        color: white;
        text-align: center;
        margin: 15px  0;
        font-size: 18px;
    }
    .Footer-Copyright{
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 15px;

    }
}


.float{
    position:sticky;
    bottom: 150px;
    text-align: center;
}

.float div{
    background-color: red;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    right: 10px;
    bottom: 0px;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    animation: myfirst 2s linear infinite alternate;
    border: 5px solid white;
}

.float div>i{
    font-size: 22px;
    color: white;
}

.float div>h1{
    font-size: 14px;
    color: white;
}

@media screen and (max-width:512px){
    .float{
        bottom: 60px;
        text-align: center;
    }
    .float div{
        width: 80px;
        height: 80px;
    }

    .float div>i{
        font-size: 15px;
        color: white;
    }
    
    .float div>h1{
        font-size: 12px;
        color: white;
    }
}
  
  @keyframes myfirst {
    0%   {background-color:var(--main-color-secondary-1);}
    50%  {background-color:var(--main-color-secondary-2);}
    100%  {background-color:var(--main-color-secondary-1);}
    /* 100%  {background-color:var(--main-color-secondary-2);} */
    /* 100% {background-color:rgb(255, 81, 0);} */
  }