body {
      font: 400 15px Lato, sans-serif;
      line-height: 1.8;
      color: #333333;
    }

    h2 {
      font-size: 24px;
      text-transform: uppercase;
      color: #1B5E20;
      font-weight: 600;
      margin-bottom: 30px;
    }
@media (max-width: 576px) {
  .mobile-padding-top {
    padding-top: 10px !important;
  }
}
    h4 {
      font-size: 19px;
      line-height: 1.375em;
      color: #2E7D32;
      font-weight: 400;
      margin-bottom: 10px;
    }

    .jumbotron {
      background-color: #00796B;
      color: #fff;
      font-family: Montserrat, sans-serif;
      height: auto;
      padding: 35px;
      background-repeat: no-repeat;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
      text-align: center;
    }

    .container-fluid {
      border: thin solid #00796B;
      text-align: justify;
      margin: 10px 0 0 0;
    }

    .bg-grey {
      background-color: #E0F2F1;
    }

    .logo-small {
      color: #00796B;
      font-size: 50px;
    }

    .logo {
      color: #00796B;
      font-size: 200px;
    }

    .thumbnail {
      padding: 0 0 15px 0;
      border: none;
      border-radius: 0;
    }

    .thumbnail img {
      width: 100%;
      height: 100%;
      margin-bottom: 10px;
    }

    .carousel-control.right,
    .carousel-control.left {
      background-image: none;
      color: #00796B;
    }

    .carousel-indicators li {
      border-color: #00796B;
    }

    .carousel-indicators li.active {
      background-color: #00796B;
    }

    .carousel-inner>.item>img {
      width: 100%;
      height: 580px;
      /* or whatever height you want */
      object-fit: cover;
      margin: 0 auto;
    }

    .item h4 {
      font-size: 19px;
      line-height: 1.375em;
      font-weight: 400;
      font-style: italic;
      margin: 70px 0;
      color: #00796B;
    }

    .item span {
      font-style: normal;
    }

    .panel {
      border: 1px solid #00796B;
      border-radius: 0 !important;
      transition: box-shadow 0.5s;
    }

    .panel:hover {
      box-shadow: 5px 0 40px rgba(0, 0, 0, 0.2);
    }

    .panel-footer .btn:hover {
      border: 1px solid #00796B;
      background-color: #fff !important;
      color: #00796B;
    }

    .panel-heading {
      color: #fff !important;
      background-color: #00796B !important;
      padding: 25px;
      border-radius: 0 !important;
      border-bottom: 1px solid transparent;
    }

    .panel-footer {
      background-color: white !important;
    }

    .panel-footer h3 {
      font-size: 32px;
    }

    .panel-footer h4 {
      color: #aaa;
      font-size: 14px;
    }

    .panel-footer .btn {
      margin: 15px 0;
      background-color: #00796B;
      color: #fff;
    }

    .mylinks {
      color: #388E3C !important;
      text-decoration: none;
    }

    .navbar {
      margin-bottom: 0;
      background-color: #F5F5F5;
      z-index: 9999;
      border: 0;
      font-size: 12px !important;
      line-height: 1.42857143 !important;
      letter-spacing: 1px;
      border-radius: 0;
      font-family: Montserrat, sans-serif;
    }

    .navbar li a,
    .navbar .navbar-brand {
      color: #388E3C !important;
      background-color: #F5F5F5 !important;
    }

    .navbar-nav li a:hover,
    .navbar-nav li.active a {
      color: #388E3C !important;
      background-color: #F5F5F5 !important;
      border-bottom-color: #060606;
    }

    .navbar-index .navbar-toggle {
      border-color: transparent;
      color: #fff !important;
    }

    .dropdown-menu {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.2);
    }

    .dropdown-menu li a {
      color: #000 !important;
      border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
    }

    .dropdown-menu li a:hover {
      color: #388E3C !important;
      border-bottom: thick solid #060606;
    }

    footer .glyphicon {
      font-size: 20px;
      margin-bottom: 20px;
      color: #388E3C;
    }

    .slideanim {
      visibility: hidden;
    }

    .slide {
      animation-name: slide;
      -webkit-animation-name: slide;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      visibility: visible;
    }

    .cardbox {
      margin: 5px;
      width: 98%;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19);
    }

    @keyframes slide {
      0% {
        opacity: 0;
        transform: translateY(70%);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @-webkit-keyframes slide {
      0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
      }

      100% {
        opacity: 1;
        -webkit-transform: translateY(0);
      }
    }

    @media screen and (max-width: 768px) {
      .col-sm-4 {
        text-align: center;
        margin: 25px 0;
      }

      .btn-lg {
        width: 100%;
        margin-bottom: 35px;
      }
    }

    @media screen and (max-width: 480px) {
      .logo {
        font-size: 150px;
      }
    }

    /* Embedded digi content */
    .embed-holder {
      padding: 20px 60px 30px;
    }

    .embed-holder>[class*="col"] {
      margin: 5px 0;
    }

    .embed-wrapper {
      padding: 10px;
      border: 1px solid #e5e5e5;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
    }

    .slider-content .img-block .bg-image,
    .process .img-block .bg-image {
      height: 100%;
      overflow: hidden;
    }

    .top120 {
      padding: 20px 0 120px;
    }

    .top80 {
      padding: 80px 0;
    }

    .img-block .embed-wrapper {
      box-sizing: border-box;
      background-repeat: no-repeat;
      background-size: contain;
      padding: 8.3% 17% 11.6% 17.5%;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: transparent;
      border: none;
      box-shadow: none;
    }

    /* General Page Styling */
.page-container {
    background-color: #E5E5E5;
    margin-top: 60px; /* To offset for a fixed navbar */
}

/* Header / Jumbotron Styling */
.page-header {
    padding: 2rem 1rem;
    background-color: #f8f9fa; /* A light grey, you can change this */
}

/* Logo Styling */
.header-logo {
    width: 120px;
    height: 120px;
    border: 3px solid #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* College Title Styling */
.header-title {
    font-size: 2.5rem; /* Larger font size for desktops */
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    color: #333;
}

/* Details Section Styling */
.header-details {
    font-size: 0.9rem;
    color: #555;
}

.header-details p {
    margin-bottom: 0.5rem; /* Tighter spacing between paragraphs */
}

.header-details .vision-statement {
    font-style: italic;
    margin-top: 1rem;
    color: #000;
}

/* ============================================= */
/*       MOBILE OPTIMIZATION (Media Query)       */
/* ============================================= */
/* This block applies styles ONLY on screens smaller than 768px (tablets and phones) */
@media (max-width: 767.98px) {

    .page-header {
        text-align: center; /* Center all text on mobile */
    }

    .header-logo {
        width: 100px;
        height: 100px;
        margin-bottom: 20px; /* Add space below the logo when it stacks */
    }

    .header-title {
        font-size: 1.8rem; /* Make the main title smaller on mobile */
        margin-bottom: 20px; /* Add space below the title */
    }
    
    .header-details {
        font-size: 0.85rem; /* Slightly smaller text for details on mobile */
        text-align: center;
    }
}
.a{
  padding-top: 50px !important; /* Adjust padding for mobile */

}
@media (max-width: 767px) {
  .mobile-padding-top {
    padding-top: 20% !important; /* Adjust padding for mobile */
  }
}

/*
 git add. 
git commit -m "Updated meta tag for Open Graph image in index.html"
git push

*/