/* Import font */
@import url('https://fonts.googleapis.com/css?family=Roboto:300');

/* General reset and font styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 300;
}

/* Body background styling */
/*body {
  background-image: linear-gradient(to right, #c7c1aa, #ECCB48, #c7c1aa);
}

  
  /* background-image:url('https://gurugramuniversity.ac.in/img/background.png'); background-repeat:no-repeat; 
   background-size: 100% 100%  */

  
/*-----------------containers background----------------------------------*/
.light-bg{
    background-color:white;/*#c9bf99;*/
}
.dark-bg{
    background-color:white; /*#999480;*/
}

/*-------------------modal css----------------------------------------------*/

      .responsive{height: auto; width:100% }
      
  
/****------------------------- Header CSS Starts from here------------------*/ 
/*-------------------------topbar class for logo image----------------------*/
/* Import font */
@import url('https://fonts.googleapis.com/css?family=Roboto:300');

/* General reset and font styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: 300;
}



/* Body background styling */
body {
  background-image:linear-gradient(to right, #e4abab00, #e4abab14);
}
/*body {
   background-image: url('https://gurugramuniversity.ac.in/img/flag.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;}
/* Top bar styling */

.topbar {
    border-bottom: 1px solid #ebebed;
    min-height: 20px;
    position: relative;
    z-index: 102;
    font-size: 14px;
}

.topbar-middle-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* centers horizontally */
    align-items: center;       /* centers vertically */
    gap: 10px;                 /* spacing between items */
}

.topbar-middle-inner p {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.topanchor {
    color: white;
    text-decoration: none;
}

.topanchor:hover {
    color: #ffc107;
}

.top_bar {
  font-family: 'Catamaran', sans-serif;
}

/* Head bar styling */
.head-bar {
  background-color:#030727;
}

/* Header logo styling */
.headerlogo {
  max-width: 100%;
  height: auto;
  max-height: 120px;   /* prevents oversized logo */
  display: block;
  margin: 0 auto;     /* hard-centers image */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}



 .animate-char /*for the animation of butn*/
{
   text-transform: uppercase;
    background-image:
linear-gradient(-225deg, #ea0b68 0%, #dd1010 29%, #e0bf3e 67%, #ffb100f2 100%);
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  /*text-fill-color: transparent;*/
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
      font-size: 13px;
      font-weight:800;
}
@media screen and (max-width: 1200px){
    .animate-char {
    text-transform: uppercase;
   background-image:
linear-gradient(-225deg, #ea0b68 0%, #dd1010 29%, #e0bf3e 67%, #ffb100f2 100%);
    margin-top: 60px;
    margin-left:-230px;
    margin-bottom:-4px;
 
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    display: inline-block;
    font-size: 11px;
    font-weight:800;
}
}
@media screen and (max-width: 600px-1200px){
    .animate-char {
    text-transform: uppercase;
    background-image:
linear-gradient(-225deg, #ea0b68 0%, #dd1010 29%, #e0bf3e 67%, #ffb100f2 100%);
    margin-top: 44px;
    
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    display: inline-block;
    font-size: 12px;
    font-weight:800;
}
}

@media screen and (max-width: 600px){
    .animate-char {
    text-transform: uppercase;
     background-image:
linear-gradient(-225deg, #ea0b68 0%, #dd1010 29%, #e0bf3e 67%, #ffb100f2 100%);
    margin-left: 7px;
   
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    display: inline-block;
    font-size: 12px;
}
}

/*Old css for header*/
.brand-name{
    margin-top: 30px!important;
}
 .float-left{
     font-size: 25px;
      line-height:100%;
      font-weight: 900;
      color: black;
     font-family: 'Catamaran', sans-serif;
      margin-top: 37px;
    margin-bottom: 4px;
  }
  
 
    @media screen and (max-width: 600px){
      .float-left{  font-size: 25px;
    line-height: 100%;
    font-weight: 900;
    color: black;
  font-family: 'Catamaran', sans-serif;
    margin-top: 11px;
    margin-bottom: 4px;
    }  
  }
  .logo{
      margin-top:1px!important}
  .logo_wrap{
    height:auto;
    width:100px!important;
  }
  .logo-img{
      height:auto;
    width:140px!important;
        margin-left: 23px!important;
  }
  .butn{
 background-image: linear-gradient(to right,#ECCB48, #4abfd5);
    border:2px solid black;
    color:black;
    font-size:15px;
    padding:5px;
    border-radius: 10px;
    text-decoration:none;
  }
  .butn:hover{
    background-color: #4abfd5;
    color:black;
    font-size:15px;
    padding:5px;
    border-radius: 10px;
  }
 /* .uniname{Name of the University CSS
    text-align: center;
      font-size:32px;
      line-height: 100%;
      z-index: 2;
      font-weight: 900;
  }
  .para{/*Paragraph under the Universisty name CSS
    text-align: center !important;
    font-size:13px;
    letter-spacing: 1px;

  }*//*Second row in the header for right nav css*/
  .row{
   font-family: 'Catamaran', sans-serif;
  }
  
  .srch{
    margin-top: -45px!important;
    width:20rem; background-color: transparent; 
 /*   border:1px solid black; */
    color:black
}
.right-nav{
    margin-top: -1px!important;

}
  .topnav-right {/*Top right nav css starts from here*/
      float: right;
      margin-top: 0;
      margin-left: 0;
      margin-bottom:0;
      text-align: right;
      padding:1px;
    }
.topnav-right a{
  padding: 5px;
    text-decoration: none;
    color: white;
    border-right: 2px solid white;
    font-size: 15px;

}
.topnav-right a:hover{
  color: white;
  font-style: italic;
 border-right: 2px solid white;
  
}


@media screen and (max-width: 1024px){
  .srch{
    margin-top: -45px!important;
}
.right-nav{
    margin-top: -1px!important;

}
  .topnav-right {/*Top right nav css starts from here*/
      float: right;
      margin-top: 0;
      margin-left: 0;
      margin-bottom:0;
      text-align: right;
      padding:1px;
    }  
}
@media screen and (max-width: 600px){
  .uniname{/*Name of the University CSS*/
    text-align:left;
      font-size:14px;
      letter-spacing: 2px;
      font-weight: 800;
  }
  .para{/*Paragraph under the Universisty name CSS*/
    text-align: left;
    font-size: .5rem;
    letter-spacing: .1rem;;
  }
  .row{/*Second row in the header for right nav css*/
    font-family: 'Catamaran', sans-serif;
  }
  .topnav-right {/*Top right nav css starts from here*/
      float: right;
      margin-top: 20px;
      margin-left: 0;
      margin-bottom:0;
      text-align: left;
      padding:2px;
    }
.topnav-right a{
  padding:.2rem;
  text-decoration: none;
  
 
  color:White;

 
}
.topnav-right a:hover{
   
  color: white;
  font-style: italic;
 
  
}
}
@media screen and (max-width: 1200px){
  .uniname{/*Name of the University CSS*/
    text-align:left !important;
      font-size:14px;
      letter-spacing: 2px;
  }
  .para{/*Paragraph under the Universisty name CSS*/
    text-align: left !important;
    font-size: 11px;
    letter-spacing:1px;
 margin-bottom:.5rem;
  }
 
  .srch{
    margin-top: -10px!important;
}
.right-nav{
    margin-top: 23px!important;
    margin-bottom: -2px;
    margin-right: 1px;
}
  .row{/*Second row in the header for right nav css*/
    font-family: 'Catamaran', sans-serif;
  }
  .topnav-right {/*Top right nav css starts from here*/
      float: left;
      margin-top: -4px;
      margin-left: 0;
      margin-bottom:0;
      text-align: left;
      padding:2px;
      background-color: transparent;
      width: 377px;
  
  
    }
.topnav-right a{
  padding:.2rem;
  text-decoration: none;
  color:white;
  
  
  
}
.topnav-right a:hover{
  color: white;
  font-style: italic;
  background-color:black;

}
.float-left{  font-size: 25px;
    line-height: 100%;
    font-weight: 900;
    color: black;
font-family: 'Catamaran', sans-serif;
    margin-top: 11px;
    margin-bottom: 4px;
    width:500px;
    }  
  

    .form-control .me-2{
      width:20rem;
  text-align: left;
    }
    .col-md-2{
      text-align: left;
      margin-top:4px;
      margin-right: 100px;
    }
}
/*conferences in navbar*/
  .conference-banner {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: bold;
  }

  .conference-banner a {
    color: #ffdd00;
    text-decoration: underline;
    margin: 0 5px;
  }

  .conference-banner .highlight {
    color: #ffdd00;
    font-weight: bold;
  }

  .conference-banner .new-blink {
    color: #ff0000;
    font-weight: bold;
    margin: 0 8px;
    animation: blink 1s infinite;
  }

  @keyframes blink {
    50% { opacity: 0; }
  }

  /* Top NAVBAR CSS starts from here*/
       

/* Add a black background color to the top navigation 


.navbar{
  text-align: center;
  background-color: black ;
  color: white;
  padding:10px;
  align-items: center;
 
  }
  .navbar ul{
  text-align: center;

  align-items: center;
  }
  .dropdown-toggle{
      color:white;
      margin-left:1px;
  }
  .navbar ul li{
      font-family: 'Catamaran', sans-serif;  
  font-size: 13px;
  word-spacing:1px;
  font-weight:600;
  font-style: normal;
  padding:1px;
  text-align: center;
  align-items: center;
  }
  .navbar ul li a{
       font-family: 'Catamaran', sans-serif;
  color:white;
  background-color: #2e4e50cf;
  border-radius:5px;
  padding:2px;
  margin:1px;
  text-decoration: none;
  text-align: center;
  align-items: center;
  }
 .navbar ul li a:hover{
  background-image: linear-gradient(to right, #10164e,#176877);
  color:white;
  /*border: 2px solid white;
  border-radius: 10px;
  border:1px solid black;
  display: block;
  }
  .navbar ul li a:hover::after{
    background-color: #4abfd5;
    color:black;
    border: 1px solid black;
    border-radius: 10px;;
  }
  .active{
  background-color:#f0b400;;
  color:black;
  border: 1px solid black;
  border-radius: 10px;
  }
  
  
  
  .active li{
  color:white;
  }
  .navbar ul li a:hover .dropdown-menu{
    background-color: #bb8d91;
  color:black;
  text-decoration: none; 
  display: block;
  }
  
  
.nav-link:focus, .nav-link:hover {
    color: rgb(241 240 240 / 80%);
}




/* ... Other styles ... 

.dropdown-menu {
    display: none;
    transition: 0.3s;
}

.dropdown-menu .dropdown-item {
    background-color: rgb(114, 108, 108);
    text-align: left;
    text-decoration: none;
    padding: 8px;
    margin: 0px;
}

.dropdown:hover > .dropdown-menu {
    display: block;
}

.cusspan {
    background-color: white;
}
  .nav_item .dropdown-item{
 background-color: #bb8d91;;
  color:black;
  text-decoration: none;
  }
  .navbar ul li a:hover .dropdown-menu ul li{
  font-size: 1rem;
  word-spacing: .5rem;
  font-weight: 600;
    
  }
  .navbar ul li a:hover .dropdown-menu ul li .dropdown-item{
  color:rgb(231, 221, 228);
  text-decoration: none;
  }
  .navbar ul li a:hover .dropdown-menu ul li a:hover{
  background-color: rgb(72, 9, 9);
  color:white;
  border: 2px solid white;
 
  /*border-radius: 10px;
  }
 
 
 .dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}
@media screen and (max-width: 1024px){
   
  
  .navbar ul li{
      font-family: 'Catamaran', sans-serif;
        font-size: 14px;
        word-spacing: 2px;
        font-weight: 500;
        font-style: normal;
        padding: 1px;
        text-align: center;
        align-items: center;
  }
  
}
/*CSS of Image crousel starts from here


.crousel-item .carousel-caption h5{
font-size: 2.5rem;
color:rgb(89, 137, 107);;
}
.crousel-item .carousel-caption .top-caption p{
font-size:1.5rem;
}
/*blinking animation for marquee*/
.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
/*css for paragraph*/

.sleepingLine{
    height: 8px!important;
    background-color: black;
    border: 2px solid #29ffce;
}
/*css for paragraph*/

.pgraph
{color:black; 
  text-align:   justify; 
  line-height: 30px; 
  font-size:18px;
background-image: url("https://gurugramuniversity.ac.in/img/welcome.png");
}
  .heading2{
    text-align: center; 
     color:black; 
     padding: 5px;  
     font-weight: 800;
     background:transparent; 
     border-radius:8px; 
     font-size: 30px;
  }
 
  /*marquee*/
  
/* .marq{
      background-color:white;
    color: red;
    font-size: 16px;
    height: 35px;
    text-align: center!important;
    align-items: center;
    font-weight: 800;
    margin-top: 0px;
    padding: 4px;
    
  /*  margin-right: -970px;
    margin-left: -45px;
     
  }
/*banner image
.bannerimg{
    max-width:auto !important;
    height:60vh;
    overflow:hidden;
}
@media screen and (max-width: 600px){
.bannerimg{
    max-width: auto !important; 
    height:35vh; 
    overflow: hidden;
}
    
}*/
/* ================= SIDE NAVIGATION ================= */

#mySidenav{
    z-index: 100;
}

.navbar{
    position: sticky; /* or fixed */
    z-index: 1050 !important;
}
/* Links */
#mySidenav a{
    display: flex;
    align-items: center;
    gap: 12px;

    width: 220px;
    padding: 12px 18px;

    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--maroon, #6b0f1a);

    border-radius: 12px 0 0 12px;
    margin-bottom: 8px;

    background: #fff;

    box-shadow: -4px 4px 15px rgba(0,0,0,.12);

    transform: translateX(175px);
    transition: all .35s ease;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Hover Effect */
#mySidenav a:hover{
    transform: translateX(0);
    box-shadow: -8px 8px 25px rgba(0,0,0,.2);
    background: linear-gradient(135deg,#6b0f1a,#8b1e2d);
}

/* Active Click Effect */
#mySidenav a:active{
    transform: translateX(0) scale(.98);
}

/* Icons */
#mySidenav a i{
    font-size: 18px;
    min-width: 22px;
    text-align: center;
}

/* Text */
#mySidenav a span{
    white-space: nowrap;
}

/* Optional: Highlight current page */
#mySidenav a.active{
    background: linear-gradient(135deg,#8b1e2d,#b8860b);
    transform: translateX(0);
}

/* ================= TABLET ================= */

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

    #mySidenav{
        top: 30%;
    }

    #mySidenav a{
        width: 58px;
        height: 58px;
        padding: 0;
        justify-content: center;
        border-radius: 12px 0 0 12px;

        font-size: 0;
        transform: translateX(0);
    }

    #mySidenav a:hover{
        width: 180px;
        padding: 0 18px;
        justify-content: flex-start;
        font-size: 14px;
    }

    #mySidenav a i{
        font-size: 20px;
        margin-right: 12px;
    }
}

/* ================= MOBILE ================= */

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

    #mySidenav{
        top: auto;
        bottom: 15px;
        left: 50%;
        right: auto;

        transform: translateX(-50%);

        display: flex;
        gap: 8px;

        width: auto;

        overflow-x: auto;
        padding: 0 10px;

        scrollbar-width: none;
    }

    #mySidenav::-webkit-scrollbar{
        display: none;
    }

    #mySidenav a{
        width: 52px;
        height: 52px;

        min-width: 52px;

        border-radius: 50%;

        justify-content: center;
        padding: 0;

        font-size: 0;
        transform: none;

        margin-bottom: 0;
    }

    #mySidenav a:hover{
        transform: translateY(-5px);
    }

    #mySidenav a i{
        font-size: 20px;
        margin: 0;
    }
}
 
 /* Hero Carousel Section */
#hero-carousel {
  background: #f8f9fa;
}

.slider-wrapper {
  background: #000;
  border-radius: 12px;
}

.marquee-wrapper {
  background: #ffffff;
  border-radius: 10px;
  padding: 10px 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}


/*css of faculties and programmes starts from here*/
.slideText{
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  text-align: center;
  margin-top: 10px; 
  font-size: 40px;
  font-weight: 500;
  color:#efd12a;
  width:100%;
  background-size: cover;
 }

.slideText:first-of-type{
  animation: showup 3s infinite ;
}
/*.slideText:last-of-type{
  width:0px;
  animation: reveal 3s infinite;
}  */
.slideText:last-of-type .slideSpan{
  margin-left:-1000px;
  animation: slidein 5s infinite;
}
@keyframes showup {
  0% {opacity:0;}
  20% {opacity:1;}
  80% {opacity:1;}
  100% {opacity:0;}
}

@keyframes slidein {
  0% { margin-left:-800px; }
  20% { margin-left:-800px; }
  35% { margin-left:0px; }
  100% { margin-left:0px; }
}

@keyframes reveal {
  0% {opacity:0;width:0px;}
  20% {opacity:1;width:0px;}
  30% {width:550px;}
  80% {opacity:1;}
  100% {opacity:0;width:517px;}
}
.lineUp {
  animation: 2s anim-lineUp ease-out 7;
}
@keyframes anim-lineUp {
  0% {
    opacity: 0;
    transform: translateY(80%);
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: translateY(0%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

/* Row 3 CSS of Card of Authorities starts from here*/
.card-anchor{
  color:white;
  text-decoration: none;
  border-radius: 10px;
  font-size:14px;
}
.card-anchor:hover{
    color:black;
  border: 2px solid black;
  background-color: #4abfd5;
  border-radius: 5px; 
  padding:8px
}

.card{
  width: 100%; 
  border:10px solid;
   border-image-source: url(img/border.png); 
  border-image-slice: 30;
  border-radius: 10px;

}
.card{
  background-color: rgb(224, 233, 222);
  color: rgb(24, 22, 22);
}
img{
  float: left;

}
/*i{
  font-size: 1.3em;
  text-transform: lowercase;
  margin-right: 3px;
  word-wrap:normal;
}*/
.btn{
  background-color:#4abfd5;
  color: black;
}
.btn a:hover{
  background-color:#4abfd5;
  color: black;
}

/*Authoity images*/
.image{
  height: 300px;
   width:289px;
    border: 3px solid #2020;
     border-radius:3px;
}
/*Row 4 Events and Seminar/Conferences CSS starts from here*/
/* events*/
.admission-list-container {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 10px;
}

/* Heading */
.heading2 {
    text-transform: uppercase;
    margin-bottom: 25px;
    border-bottom: 3px solid #ECCB48;
    padding-bottom: 10px;
    font-weight: 700;
    color: #003366;
    letter-spacing: 1px;
}

/* List Item */
.admission-list-container{
    max-height:500px;
    overflow-y:auto;
    padding-right:10px;
}

/* Heading */
/* ===============================
   SECTION LAYOUT
================================*/

.section-notice{
padding:60px 0;
background:#fafafa;
}

.admission-list-container{
max-height:600px;
overflow-y:auto;
padding-right:10px;
}

/* ===============================
   SECTION HEADING
================================*/

.section-title{
font-size:14px;
font-weight:600;
letter-spacing:1px;
text-transform:uppercase;
}

.heading-underline{
display:block;
width:70px;
height:3px;
background:#cc0000;
margin:10px auto 0;
border-radius:2px;
}

/* ===============================
   SEARCH BOX
================================*/

.notice-search{
max-width:600px;
margin:0 auto 30px auto;
}

.notice-search input{
width:100%;
padding:12px 18px;
border:1px solid #ddd;
border-radius:5px;
font-size:15px;
transition:0.3s;
}

.notice-search input:focus{
border-color:#003366;
box-shadow:0 0 6px rgba(0,51,102,0.15);
outline:none;
}

/* ===============================
   NOTICE LIST
================================*/
.list-group{
    padding-left:0;
    margin:0;
    width:100%;
}


/* Ensure text starts from left */
.list-group-item a{
    text-align:left;
}

/* NOTICE ROW */

.list-group-item{
    border-left: 4px solid #0c0c7e !important;
display:flex;
text-align:left;
gap:12px;
padding:14px 18px;
margin-bottom:10px;
background:#fff;
border-radius:6px;
border:1px solid #e6e6e6;
border-left:4px solid #003366;
transition:all .25s ease;
}

/* HOVER EFFECT */

.list-group-item:hover{
background:#f5f9ff;
border-left:4px solid #cc0000 !important;
transform:translateX(4px);
box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

/* NOTICE ICON */

.notice-icon{
font-size:17px;
color:#003366;
}

/* NOTICE TITLE */

.list-group-item a{
flex:1;
text-decoration:none;
color:#003366;
font-weight:500;
font-size:15px;
}

.list-group-item a:hover{
color:#cc0000;
}

/* DATE BADGE */

.badge-date{
background:#f1f1f1;
padding:5px 10px;
border-radius:20px;
font-size:12px;
color:#555;
white-space:nowrap;
}

/* NEW BADGE */

.badge-new{
background:#cc0000;
color:#fff;
font-size:10px;
padding:3px 7px;
border-radius:4px;
margin-left:8px;
font-weight:600;
}

/* ===============================
   PAGINATION
================================*/

.pagination{
text-align:center;
margin-top:30px;
}

.pagination a{
display:inline-block;
padding:8px 14px;
margin:3px;
border:1px solid #ddd;
border-radius:4px;
text-decoration:none;
color:#003366;
font-size:14px;
transition:.25s;
}

.pagination a:hover{
background:#003366;
color:#fff;
border-color:#003366;
}

/* ===============================
   BACK BUTTON
================================*/

.back-home{
margin-top:40px;
}

.back-home a{
background:#003366;
color:#fff;
padding:12px 30px;
border-radius:30px;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.back-home a:hover{
background:#cc0000;
}

/* ===============================
   SCROLL TO TOP BUTTON
================================*/

#topBtn{
display:none;
position:fixed;
bottom:35px;
right:35px;
z-index:9999;
background:#003366;
color:white;
border:none;
width:45px;
height:45px;
border-radius:50%;
font-size:18px;
cursor:pointer;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
transition:.3s;
}

#topBtn:hover{
background:#cc0000;
transform:translateY(-3px);
}

/* ===============================
   MOBILE RESPONSIVE
================================*/

@media(max-width:768px){

.list-group-item{
flex-direction:column;
align-items:flex-start;
gap:6px;
}

.badge-date{
margin-top:4px;
}

}


 /*CSS for Seminar/Conference*/
 
 .view-header{
  color:white;
  text-align: center;

 }
 .more-link{

text-align: left;
margin:0px;
padding: 0px;
font-size:18px;}
.more-link a{
  color:white;
  text-decoration: none;
}
.more-link:hover{
  font-style: italic;
  color:black;
  background: #4abfd5;
  border: 2px solid white;
 }

 h2 h3 a{
  text-decoration: none;
  color:white;
   
 }
 h3 a:hover{
  color:black;
  font-style: italic;
  font-weight:100;
 }
 .all a{
  color:white;
  text-decoration: none;
 }
 .all :hover{
  font-style: italic;
  color:black;
  background: #4abfd5;
  border: 2px solid white;
 }
  span
  {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
 }
 .field-item-single
 {
  font: inherit;
  float: left;
  color:black;
  font-style: italic;
  padding: 4px;
  width:20%;
 }
 .name-block{
     width:100%;
     font-size:12px;
 }
 .group-event-details .field-group-div{
text-decoration: none;
color: white;
float:left;
 }
 .node-event.view-mode-ow_listing_teaser .dates-calendardate{
  font-family: "PT Sans",'Helvetica Neue',Arial,Helvetica,sans-serif;
    background: #4abfd5;
    color: black;
    float: left;
    line-height: 1;
    margin-top: 0px;
    margin-right: 1em;
    margin-left: 0px;
    padding: .25em .5em;
    text-align: center;
    text-transform: uppercase;
    width: 40px;
 }
 .field-name-field-event-date .dates-calendardate 
 {
  font-family: "PT Sans",'Helvetica Neue',Arial,Helvetica,sans-serif;
    background: #4abfd5;
    color: black;
    float: left;
    line-height: 1;
    margin-top: 5px;
    margin-right: 1em;
    padding: 0.25em 0.5em;
    text-align: center;
    text-transform: uppercase;
    width: 1.75em;
 }
 .dates-calendardate .date-calendardate-no-end{
  border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    margin-left: 2px;
    margin-bottom: 5px;

 }
 .date-calendardate .date-calendardate-start{
      color: #fff;
    text-align: center;
    text-transform: uppercase;
    
 }
 .date-calendardate-month{
  display: block;
    font-size: 14px;
 }
 .date-calendardate-day
 {
  display: block;
    font-size: 14px;
    letter-spacing: 2px;
 }
 .node-event-ow-listing-teaser-group-event-details .group-event-details .field-group-div.group-event-details
 {margin: 0;
    padding: 0;
    color:#fff;
    float:left;
 }
 .node-event.view-mode-ow_listing_teaser .group-event-details h2{
  max-width: 500px;
 }
 /*Row 5 Programs CSS starts from here*/
 .zoom:hover {/* CSS for Program Images animation */
  transform: scale(.9); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
 
.card-text .prog{ /*CSS of program cards starts from here*/
  text-decoration: none;
  color: white;
  font-family: 'Catamaran', sans-serif;
  text-transform: uppercase;
  font-size: 14px;
}
.prog{
 font-family: 'Catamaran', sans-serif;
  text-transform: uppercase;
  padding:4px;
  letter-spacing: 1px;
  word-spacing:2px;
}
.prog:hover{
  border:2px solid black;
  background-color: #4abfd5;
  border-radius: 5px;
}
.news:hover{
  opacity: 1;
}
/*Row 5 CSS of Notice column starts from here*/



 .notice-bt{
   padding: 2px;
     background-color:#4abfd5;
    
    text-decoration:none;
    color:black;
   font-size:18px;

}
.notice-bt:hover{
   
    padding:2px;
    font-size:20px;
    color:white;
    
}

.notices{/*notice tabs animation starts from here*/
  background-color: transparent;
  height: 50vh;
  margin-top: 12px;

}

.notices .nav{/*CSS of Notice nav bar starts from here*/
  font-size: 1.3rem;
  word-spacing: 2rem;
  font-weight: 300;


}
.nav-tabs{
  text-align: center;
  vertical-align: middle;
}
.tabs {
  
  width:200px;
  background-color: white;
  border-right: 2px solid #064a31;
  
}
 .nav li{
background-color: transparent;
text-align: center;


 }
 .nav li a{

  text-decoration: none;
        color: maroon;;
  margin:30px;
 }
 
 .nav  li a:hover{
  background-color:rgb(20, 21, 25);
  color:black;
   height:20px;
  padding:3px;
 }
 .tab-content{
  height:20vh;
 }
 
/*Authrities image*/
.animg:hover {
  transform: scaleX(-1);
}
    
  /* CSS of Row 7 Social Media starts from here */
.responsive-iframe {
  padding-top: 20px;
  height:60vh;
  overflow: scroll;
  background-color:transparent;
  }
  .text p {
    margin-left: 2rem;
    margin-top: 2rem;
  }
  .text p a{
    text-decoration: none;
    color:white;
    padding:5px;
  
  }
.text p a:hover{
    border:2px solid white;
    background-color:rgb(89, 137, 107);;
    color:white;
    border-radius:10px;
    
  } 
  .animate-charcter /*for the animation social media header*/
{
   text-transform: uppercase;
  background-image:
  linear-gradient( -225deg, #101010 0%, #fd0052 29%, #0f9ce3 67%, #1edd1bf2 100% );
  /*linear-gradient(
    -225deg,
    #bc0ca4 0%,
    #0bd3da 29%,
    #830d0d 67%,
    #fff800 100%
  );*/
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  /*text-fill-color: transparent;*/
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
      font-size: 2em;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}
.soc{
  width: 100%;
    background: white;
    border:2px solid white;
    height: 600px;
    overflow: scroll;
  }

 /*Form input Text Box css*/
 .textBox{
    width: 756px;
    height: 56px;

 }
 .textBox2{
     width:500px;
     height:50px;
 }
 
 
/*CSS of Footer starts from here*/
.footer-bottom{
    background: #0d1b4c;
    color: #ffffff;
    font-size: 15px;
}

.footer-link{
    color: #ffd166;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease;
}

.footer-link:hover{
    color: #ffffff;
    text-decoration: underline;
}
  footer{
    background-color:#ECCB48;
    color:black;
    float:left;
      }
      footer h2{
        color:black;
      text-align: left;
      font-size: 25px;
      font-weight: 800;
      }
      footer ul{
        list-style: none;
        text-align: left;
      }
      footer ul li{
        color:black;
        
      }
      footer ul li a{
      text-decoration: none;
      color:black;
      }
      footer ul li a:hover{
        
        color: black;
        border: none;
        border:2px solid black;
        border-radius:5px;
        padding:.1rem;
         background-image: linear-gradient(to right,#ECCB48, #4abfd5);
      }
      
  .page-footer .row .social-links .social li {
        float: left;
        display: block;
        height: 3rem;
        width: 60px;
        margin-bottom: 15px;
    }
     .page-footer .row .social-links .social li a:hover{
         background-color:transparent;
           border: none;
     }
    .page-footer .row .social-links .social li .fa-youtube {
      background-position: 0px -36px;
      background-color: #eb3737;
      margin-left: -2px;
      padding: .6rem;
      font-size: 34px;
      border-radius:50px;
      border: 2px solid white;
    }
    .page-footer .row .social-links .social li .fa-facebook-square {
      background-position: 0px -36px;
      background-color: #7d7dd3;
      margin-left: 2px;
      padding: .6rem;
      font-size: 34px;
      border-radius:50px;
      border: 2px solid white;
    }
    .page-footer .row .social-links .social li .fa-twitter-square {
      background-position: 0px -36px;
      background-color: yellow;
      color:black;
      margin-left:0;
      padding: .6rem;
     font-size: 34px;
      border-radius:50px;
      border: 2px solid white;
    }
    .page-footer .row .social-links .social li .fa-linkedin{
      background-position: 0px -36px;
      background-color: maroon;;
      margin-left: 0;
      font-size: 34px;
      border-radius:50px;
      border: 2px solid white;
    }
    .page-footer .row .social-links .social li .fa-instagram-square{
      background-position: 0px -36px;
      background-color: #ed6589;;
      margin-left: 0;
      padding: .6rem;
      font-size: 34px;
      border-radius:50px;
      border: 2px solid white;
    }
    

.page-footer .row #copyright ul li{/* CSS of Copyright starts from here*/
  float: left;
   margin: 1rem;
}

#copyright ul li{
  margin-right:74px; 
  margin-left: -45px;
  padding:2px;
float: left;
}

#copyright, #copyright a{
  text-decoration: none;
  
      color:black ;}
      #copyright, #copyright a:hover{
        background-color:#4abfd5; 
        color:white;
      }
 /* faulty page  css*/  
  .facimg{
      height:12vh; 
      width:7vw; 
      margin-right: 3px;
      border-radius:10px;
      box-shadow:2px solid green;
       float: left;
       margin-left: 5px;
  }
  .faCard{
    background-color:#d5e5e3;
    color:black;
    border-radius: 10px;
  }
  .faCard-title{
    font-size:16px;
    font-weight:100;

  }
  .facIOne {
     word-wrap: break-word;
    font-size: 10px;
    text-transform: lowercase;
    /* margin-right: 3px; */
    word-wrap: normal;
    text-align: left;
   
}
  
  .facITwo{
        
    font-size: 10px;
    text-transform: lowercase;
    /* margin-right: 3px; */
    word-wrap: normal;
   
   
  }
  .facPara{
      font-size: 14px;
    text-align: left;
    font-weight: 100;
    margin-right: 10px;
    margin-top: 10px;
    text-align: justify;
      word-wrap: normal;
  }
      #counter{
          font-size:12px;
      }
     /*Galley for ucdac*/ 
     
 /*Sandwitch bar css*/ 
.breadanchor{
    color:black;
    text-decoration:none;
}

.new-blink {
  font-size: 16px;
  font-weight: bold;
  font-style: italic;   /* थोड़ा तिरछा */
  color: red;
  text-decoration: none;
  display: inline-block;
  transform: rotate(-8deg);  /* text थोड़ा tilt */
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50%, 100% { 
    opacity: 1; 
    text-shadow: 0 0 8px red, 0 0 15px darkred; 
  }
  25%, 75% { 
    opacity: 0.4; 
    text-shadow: none; 
  }
}


/*Dean Page*/


.dean-profile{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.dean-img{
    max-width:260px;
    border-radius:10px;
}

@media (max-width:768px){
    .dean-img{
        max-width:200px;
    }
}
.dean-section{
background:#f8f9fa;
}

.heading-line{
width:70px;
height:3px;
background:#6b0000;
}

.dean-img{
border-radius:10px;
max-width:260px;
}

.dean-message p{
font-size:16px;
line-height:1.8;
text-align:justify;
}

/* Mobile optimization */
@media (max-width:768px){

.dean-img{
max-width:200px;
}

.dean-message p{
font-size:15px;
}

}
/*Dean page end*/

/*main page*/


/* Left logo styling */
.headerlogo-left {
  max-height: 95px;
  width: auto;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,.15);
  transition: transform .3s ease;
}

.headerlogo-left:hover {
  transform: scale(1.04);
}

/* Title area */
.gu-title-wrap {
  line-height: 1.25;
}

.gu-title {
  font-family: "Joan", serif;
  font-size: 2rem;
  font-weight: 700;
  color: #0b2c55;
  letter-spacing: .6px;
}

.gu-tagline {
  font-size: .95rem;
  color: #444;
}

.gu-tagline-hi {
  font-size: .95rem;
  color: #666;
  font-family: "Mukta", sans-serif;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .headerlogo-left {
    max-height: 75px;
    margin-bottom: 10px;
  }

  .gu-title {
    font-size: 1.6rem;
  }

  .gu-tagline,
  .gu-tagline-hi {
    font-size: .85rem;
  }
}

/* Modal Main */
.custom-modal{
  border-radius: 18px;
  overflow: hidden;
  border: none;
}

/* Header */
.custom-modal-header{
  background: linear-gradient(135deg, #6a0000, #a30000);
  color: white;
  padding: 18px 22px;
}
.scroll-hint {
  background: rgba(255,255,255,0.1);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: #ffd369;
}
.custom-modal-header .sub-title{
  color: #ffd700;
  font-weight: 600;
}

/* Close Button */
.custom-close{
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 50%;
  padding: 6px;
  opacity: 1;
}

.custom-close:hover{
  transform: rotate(90deg);
  transition: 0.3s;
}

/* Body Image */
.modal-img{
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  transition: transform 0.4s ease;
}

.modal-img:hover{
  transform: scale(1.04);
}

/* Footer */
.custom-modal-footer{
  background: #f8f9fa;
  justify-content: center;
  font-weight: 500;
  color: #6c757d;
}


/* Blink Animation */
@keyframes blinkText {
  0% { opacity: 1; }
  50% { opacity: 0.2; }
  100% { opacity: 1; }
}

  @keyframes fadeInUp {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  /* Video section styling */
#campus-video .video-wrapper {
  position: relative;
  border-radius: 18px;
  background: #000;
}

/* Optional: keep video aspect ratio neat */
#campus-video video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Responsive spacing */
@media (max-width: 768px) {
  #campus-video {
    text-align: center;
  }

  #campus-video .heading2 {
    font-size: 1.6rem;
  }
}

/* ================= CAMPUS SERVICES ================= */
/* ================= CAMPUS SERVICES ================= */

#campus-services {
  background: #f8f9fb;
}

/* Card */
#campus-services .service-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 32px 20px;
  height: 100%;
  display: flex;
  align-items: center;      /* vertical center */
  justify-content: center;  /* horizontal center */
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  transition: all 0.35s ease;
}

/* Inner content */
/* Ensure vertical stacking: image on top, title below */
#campus-services .service-inner {
  display: flex;
  flex-direction: column;   /* 👈 THIS is the key */
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Image spacing */
#campus-services .service-inner img {
  width: 60px;
  margin-bottom: 16px;      /* space between image & title */
}

/* Title styling */
#campus-services .service-inner h5 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
}


#campus-services .service-inner h5 a {
  text-decoration: none;
  color: black;
  line-height: 1.4;
}

/* Hover effect */
#campus-services .service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 36px rgba(220,53,69,0.25);
}

#campus-services .service-card:hover h5 a {
  color: #a71d2a;
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {

  #campus-services .service-card {
    padding: 26px 16px;
  }

  #campus-services .service-inner img {
    width: 54px;
  }

  #campus-services .service-inner h5 {
    font-size: 1rem;
  }
}

/* ================= MOBILE OPTIMIZATION ================= */
@media (max-width: 768px) {

  #campus-services {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  #campus-services .service-card {
    padding: 26px 16px;
  }

  #campus-services .service-card h5 {
    font-size: 1rem;
  }
}



/* Section background: Golden dominant */
.authorities-bg {
  background: linear-gradient(135deg, #d4af37, #f5e08c);
}

/* Heading underline: Maroon accent */
/* Heading underline */
.heading-underline {
  display: block;
  width: 90px;
  height: 4px;
  background: maroon;
  border-radius: 5px;
}
/* ===== Professional Background ===== */
.authorities-pro-bg{
  background: linear-gradient(
      rgba(12,18,35,0.92),
      rgba(12,18,35,0.92)
    ),
    url('img/pattern-bg.png'); /* optional texture */
  background-size: cover;
}

/* Heading */
.section-title{
 font-weight:700;
  color:#6a0000;
  letter-spacing:.5px;
}

.section-divider{
  width: 70px;
  height: 3px;
  background: #d4af37;
  border-radius: 3px;
  margin-top: 10px;
}

/* ===== Authority Card ===== */
/* ===== Neutral Academic Background ===== */
.authorities-neutral-bg{
  background: linear-gradient(
      rgba(245,245,245,0.95),
      rgba(240,240,240,0.95)
  );
}

/* Heading */
.section-title-dark{
  font-weight: 600;
  color: #222;
}

.section-divider-neutral{
  width: 60px;
  height: 3px;
  background: #b89b5e; /* soft gold */
  border-radius: 3px;
  margin-top: 10px;
}

/* ===== Card ===== */
.authority-card-neutral{
   background: linear-gradient(135deg,#6a0000,#8b0000);
   box-shadow: 0 10px 25px rgba(0,0,0,.15);
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  transition: 0.35s;
  border: 1px solid #e6e6e6;
}

.authority-card-neutral:hover{
  transform: translateY(-6px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

/* Image */
.authority-img{
  width: 140px;
  height: 140px;
  margin: 0 auto 18px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #f2f2f2;
}

.authority-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Text */
.authority-role-neutral{
  font-size: 13px;
  color: #ffffff;
  display:block;
  margin-bottom: 6px;
}

.authority-name-neutral{
  font-size: 18px;
  font-weight: 600;
  color: #dad500;
}

@media(max-width:576px){
  .authority-img{
    width:110px;
    height:110px;
  }

  .authority-name-neutral{
    font-size:16px;
  }
}

/* ================= NOTICE BOX COMMON ================= */


#notices{
  background: #f4f5f700;   /* Soft institutional grey */
}

.notice-box{
  background: #ffffff;
  border-radius: 10px;
  padding: 22px;
  height: 100%;
  border: 1px solid #e6e8ec;
  transition: all 0.3s ease;
}

.notice-box:hover{
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  transform: translateY(-4px);
}


.notice-icon {
  color: black;
  font-size: 22px;
  border-bottom: 2px solid #fff;
  padding-bottom: 5px;
  margin-bottom: 8px;
  display: inline-block;
}

.notice-title {
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}

.notice-scroll {
  height: 200px;
  overflow: hidden;
}

.notice-item {
  margin-bottom: 10px;
  font-size: 13px;
}

.notice-item img {
  width: 18px;
  margin-right: 5px;
}

.notice-item a {
  color: black;
  text-decoration: none;
}

.notice-item a:hover {
  text-decoration: underline;
}

.badge {
  display: block;
  font-size: 11px;
  opacity: 0.8;
  color:maroon;
}

.view-more {
  margin-top: auto;
  text-align: center;
  padding: 6px;
  background: #e6ae09ad;
  border-radius: 4px;
  color:maroon;
  text-decoration: none;
}

.view-more:hover {
  background: maroon;
    color: white;
}

.notice-scroll{
  height: 240px;
  overflow: hidden;
  position: relative;
}

.notice-marquee{
  animation: noticeScroll 25s linear infinite;
}

.notice-scroll:hover .notice-marquee{
  animation-play-state: paused;
}

@keyframes noticeScroll{
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
/* ================= COLOR THEMES ================= */
/* Notices */
.bg-recruitment{
  border-left: 4px solid maroon;   /* maroon */
}

/* Admissions */
.bg-tender{
  border-left: 4px solid #5a6b7a;   /* slate grey */
}

/* Exams / Results */
.bg-result{
  border-left: 4px solid #9d6b09;   /* muted yellow grey */
}

/* ================= MOBILE ================= */
@media (max-width: 576px) {
  .notice-scroll {
    height: 140px;
  }
}


/* NEWS SECTION – EQUAL HEIGHT CARDS */
#news-section .news-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#news-section .news-card .card-body {
  flex-grow: 1;
}

/* Fix iframe/video stretching */
#news-section iframe,
#news-section video {
  width: 100%;
  height: 100%;
}

/* Mobile spacing */
@media (max-width: 767px) {
  #news-section .news-card {
    margin-bottom: 20px;
  }
}
/* Media Gallery Section */
.gallery-card{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transition: all 0.4s ease;
}

.gallery-card img{
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-card:hover img{
  transform: scale(1.08);
}

.gallery-caption{
  position: absolute;
  bottom: 0;
  width: 100%;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  color: #fff;
  padding: 12px;
  font-size: 14px;
  text-align: center;
}

/* Highlight Box */
.media-highlight{
  background: #f8f9fa;
  border-left: 4px solid #0d6efd;
  padding: 15px 20px;
  border-radius: 6px;
  font-size: 15px;
}

/*social media*/
#social-media {
  background-color: #eef0f4; /* same tone as NEWS */
}

.social-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 140px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-card i {
  font-size: 36px;
  margin-bottom: 10px;
}

.social-card span {
  font-weight: 600;
  color: #333;
}

.social-card:hover {
  transform: translateY(-6px);
}

/* Brand Colors */
.social-card.youtube i { color: #ff0000; }
.social-card.facebook i { color: #1877f2; }
.social-card.twitter i { color: #000000; }
.social-card.instagram i {
  background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#social-media {
  background-color: #f2f5f9; /* same family as NEWS & Admission */
}

.social-box {
  display: block;
  padding: 25px 15px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  text-decoration: none;
  transition: all 0.3s ease;
}

.social-box i {
  font-size: 32px;
  margin-bottom: 8px;
  display: block;
}

.social-box span {
  font-weight: 600;
  color: #333;
  font-size: 15px;
}

.social-box:hover {
  transform: translateY(-4px);
}

/* Subtle official brand colors */
.social-box.youtube i { color: #cc0000; }
.social-box.facebook i { color: #1877f2; }
.social-box.twitter i { color: #000000; }
.social-box.instagram i { color: #c13584; }
#social-media {
  background-color: #f2f5f9; /* same family as NEWS & Admission */
}

.social-wrapper {
  background: #ffffff;
  border-radius: 14px;
  padding: 25px 15px;
}

.social {
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 22px;
}

.social li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  font-size: 28px;
  border-radius: 50%;
  background: #f5f6fa;
  transition: all 0.3s ease;
}
.text-muted {
    text-align:center;
    font-size: 20px;
}

/* Brand colors (subtle, official) */
.social li a.youtube { color: #cc0000; }
.social li a.facebook { color: #1877f2; }
.social li a.twitter { color: #1d1d1d; }
.social li a.instagram { color: #c13584; }

.social li a:hover {
  transform: translateY(-4px);
  background: #eef0f4;
}

/*footer*/


.footer-bottom{
    background: #0d1b4c;
    color: #ffffff;
    font-size: 15px;
    text-align: center;
}

.footer-link{
    color: #ffd166;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease;
}

.footer-link:hover{
    color: #ffffff;
    text-decoration: underline;
}