body {
   font-family: 'Roboto', sans-serif;
 }

 /* header style start */
 .header_top {
   background-color: #1a4695;
   padding: 5px;
   width: 71%;
   border-radius: 0px 0px 0px 29px;
   position: absolute;
   right: 0;
 }

 .header_logo {
   display: flex;
   align-items: center;
   justify-content: start;
 }

 .header_text h4 {
   font-family: fantasy;
   color: #00308a;
   text-transform: uppercase;
   font-weight: 100;
   font-size: 50px;
   margin-bottom: 0px;
   margin-top: 15px;
 }

 .header_text h5 {
   font-size: 14px;
   color: #fe0101;
 }

 .header_text h6 {
   font-family: 'prata';
   font-weight: 600;
   color: #00308a;
   margin-bottom: 5px;
   text-transform: uppercase;
   font-size: 12px;
 }

 .h7_header-top-list {
   display: flex;
   align-items: center;
   gap: 10px;
   justify-content: center;
 }

 .h7_header-top-list li {
   margin-right: 15px;
   padding-right: 25px;
 }

 .h7_header-area {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   /* Adjust as needed */
   z-index: 999;
   position: sticky;
 }

 .h7_header-top-list li {
   position: relative;
   z-index: 1;
 }

 .h7_header-top-list li:not(:last-child)::before {
   position: absolute;
   right: -5px;
   top: 50%;
   transform: translateY(-50%);
   width: 1px;
   background: rgba(255, 255, 255, 0.2);
   height: 16px;
   content: "";
   z-index: 1;
 }

 .h7_header-top-list li a {
   display: flex;
   text-decoration: none;
   align-items: center;
   gap: 10px;
   color: #fff;
   font-size: 14px;
   font-weight: 500;
 }

 .navbar {
   float: right;
 }

 .navbar_ul {
   list-style-type: none;
   display: flex;
   align-items: center;
   padding-left: 0rem;
   margin-bottom: 0rem;
   margin-top: 15px;
   gap: 20px;
 }

 .navbar ul li {
   display: inline-block;
   margin-right: 5px;
 }

 .navbar li a {
   font-size: 17px;
   color: #222222;
   padding: 10px 0;
   font-weight: 500;
   display: block;
   text-decoration: none;
 }

  

 .menu-has-child {
   position: relative;
 }

 .header_top .social_icon ul li a {
   color: #fff;
   font-size: 16px;
   transition: 0.3s;
   padding: 0px 10px;
 }

 .social_icon ul li a:hover {
   color: #f70304;
 }

 .submenu {
   display: none;
   position: absolute;
   background-color: #fff;
   padding: 10px 30px;
   list-style: none;
   top: 100%;
   left: 0;
   z-index: 1000;
   min-width: 180px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .menu-has-child:hover .submenu {
   display: block;
 }

 .submenu li a {
   display: block;
   padding: 8px 15px;
   color: #333;
   text-decoration: none;
 }

 .navbar_ul li:hover a {
   color: #f70304;
 }

 .menu-has-child>a i {
   margin-left: 5px;
   font-size: 12px;
 }

 .navbar_ul li a {
   position: relative;
   display: inline-block;
   padding-bottom: 5px;
   text-decoration: none;
   white-space: nowrap;
 }

 .navbar_ul li a::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0;
   height: 2px;
   background-color: #f70304;
   /* Underline color */
   transition: width 0.3s ease;
 }

 .navbar_ul .submenu li a::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0;
   height: 0;
   background-color: #f70304;
   /* Underline color */
   transition: width 0.3s ease;
 }

 .navbar .submenu li {
   margin-right: 0px;
 }

 .navbar .submenu li a {
   color: #222222;
 }

 .navbar .submenu li a :hover {
   color: #222222;
 }

 .navbar_ul li:hover a::after {
   width: 100%;
 }

 .side-navbar {
   position: fixed;
   top: 0;
   right: -280px;
   /* Start off-screen */
   width: 280px;
   height: 100vh;
   background-color: #fff;
   z-index: 1000;
   transition: right 0.4s ease-in-out;
   box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
   overflow-y: auto;
   padding: 20px;
 }

 .side-navbar.show {
   right: 0;
   /* Slide in */
 }

 .side-navbar p {
   text-align: right;
   margin-bottom: 20px;
 }

 .side-navbar p i {
   font-size: 24px;
   cursor: pointer;
   color: #1a4695;
 }

 .side-navbar_ul {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
 }

 .side-navbar_ul li {
   margin-bottom: 15px;
   border-bottom: 1px solid #f0f0f0;
   padding-bottom: 15px;
   width: 100%;
 }

 .side-navbar_ul li:last-child {
   border-bottom: none;
 }

 .side-navbar_ul li a {
   color: #222222;
   font-size: 16px;
   text-decoration: none;
   display: block;
   width: 100%;
   transition: color 0.3s;
 }

 .side-navbar_ul li a:hover {
   color: #f70304;
 }

 .side-navbar_ul .menu-has-child>a {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .side-navbar_ul .submenu {
   display: none;
   padding-left: 15px;
   margin-top: 10px;
   width: 100%;
 }

 .side-navbar_ul .submenu.show {
   display: block;
 }

 .side-navbar_ul .submenu li {
   border-bottom: none;
   margin-bottom: 10px;
   padding-bottom: 10px;
 }

 .side-navbar .pay-button {
   background-color: red;
   color: white;
   border: none;
   padding: 10px 20px;
   border-radius: 5px;
   cursor: pointer;
   width: 100%;
   margin-top: 15px;
   transition: background-color 0.3s;
 }

 .side-navbar .pay-button:hover {
   background-color: white;
   color: red;
   border: red;
 }

 .overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 999;
   display: none;
 }

 /* .overlay.show {
   display: block;
 } */
@media (max-width:414px){
  #carouselExampleIndicators{
    height: 11rem;
  }
}

@media (max-width:360px){
  #carouselExampleIndicators{
    height: 13rem;
  }
}
 /* Hide menu and show toggle on mobile */
 @media (max-width: 850px) {
   .navbar_ul {
     display: none;
     flex-direction: column;
     background: #fff;
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     padding: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }

   .navbar_ul.active {
     display: flex;
   }

   

   .menu-has-child>.submenu {
     display: none;
     padding-left: 15px;
   }

   .menu-has-child.active>.submenu {
     display: block;
   }

   .navbar_ul {
     display: none;
   }

   .mobile-menu-toggle {
     display: block;
     cursor: pointer;
     font-size: 24px;
     color: #1a4695;
   }
 }



 /* @media (max-width: 820px) {
  .navbar_ul {
    display: none;
    flex-direction: column;
    background: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .navbar_ul.active {
    display: flex;
  }

  .mobile-menu-toggle {
    cursor: pointer;
    font-size: 24px;
    color: #000;
    display: block;
  }

  .menu-has-child>.submenu {
    display: none;
    padding-left: 15px;
  }

  .menu-has-child.active>.submenu {
    display: block;
  }

  .navbar_ul {
    display: none;
  }

  .mobile-menu-toggle {
    display: block;
    cursor: pointer;
    font-size: 24px;
    color: #1a4695;
  }
  .custom-carousel-btn{
    top: 42%;
  }
} */




 /* header style end  */


 /* banner style start */
 .carousel-item {
   position: relative;
 }

 .carousel-item::before {
   position: absolute;
   content: "";
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
   /* Higher than image */
   /* background: linear-gradient(90deg, rgba(10, 10, 10, 0.31) 0%, rgba(0, 0, 0, 0) 81.54%); */
 }

 .carousel-item img {
   position: relative;
   z-index: 0;
 
 }

 .carousel-caption-custom {
   position: absolute;
   top: 50%;
   left: 16%;
   transform: translate(-50%, -50%);
   color: #fff;
   text-align: center;
   z-index: 2;
 }

 .h7_banner-content {
   text-align: start;
   margin-left:60px;
 }

 .h7_banner-content-title {

   color: rgb(255, 255, 255);
   font-size: 70px;
   font-weight: 500;
   line-height: 1.1;
   text-transform: capitalize;
   margin-bottom: 20px;

 }

 .h7_banner-content p {
   font-size: 25px;
   font-weight: 600;
 }

 .h7_banner-content .inner_btn {
   background-color: #f70304;
   color: #fff;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }

 .sub_head {
   font-size: 20px;
   color: #2c4393;
 }

 .message {
   color: white;
   font-weight: 600;
   overflow: hidden;
   padding-left: 0.5rem;
   top: 0.2rem;
   left: 270px;
 }



 .h7_banner-content-text {
   font-family: "quicksand", sans-serif;
   white-space: nowrap;
   display: inline-block;
   transform: translateX(-100%);
   animation: slide-in 2s ease forwards;
   color: white !important;
 }

 .h7_banner-content-btn {
   font-family: "quicksand", sans-serif;
 }

 .row.align-items-center>div {
   padding-top: 0px;
   padding-bottom: 0px;
 }





 @keyframes slide-in {
   to {
     transform: translateX(0);
   }
 }



 .btn_class {
   border-radius: 6px;
   background: #a11b1e;
   font-weight: 600;
   font-size: 16px;
   color: #fff;
   display: inline-flex;
   align-items: center;
   height: 35px;
   padding: 0 20px;
   text-transform: capitalize;
   cursor: pointer;
   margin: 10px 0px;
   text-align: center;
   touch-action: manipulation;
   transition: all 0.3s ease 0s;
   white-space: nowrap;
   border: none;
   position: relative;
   overflow: hidden;
   z-index: 1;
 }

 .btn_class::after {
   content: "";
   position: absolute;
   top: 10px;
   left: 0;
   width: 500px;
   height: 200px;
   background-color: #223e6e;
   border-radius: 100px;
   transform: translate(-40px, -80px) scale(0.1);
   opacity: 0;
   z-index: -1;
   transition: all 0.5s linear 0s;
 }

 .btn_class:hover::after {
   transform: translate(0, 0) scale(2);
   opacity: 1;
 }

 .header_top p {
   margin-bottom: 0px;
 }

 .logo_img img {
   width: 125px;
   height: auto;
   padding: 5px 0px;
 }

 .navbar-expand-lg .navbar-collapse {
   display: flex !important;
   flex-basis: auto;
   justify-content: center !important;
 }

 .dropdown-menu {
   padding: 0px;
 }

 .first {
   color: white;
 }

 .first a {
   position: relative;
 }

 .first a:hover {
   background-color: transparent;
 }

 .first a:hover::after {
   width: 100%;
 }

 .first a::after {
   content: '';
   position: absolute;
   height: 1px;
   width: 0;
   bottom: -0.1rem;
   left: 0;
   transition: 200ms ease-in;
   background: white;
 }

 .dropdown-toggle::after {
   border-top: 0px;
 }

 .abt_img {
   border-radius: 30px;
   height: 100%;
 }

 .section_padding {
   padding: 30px 0px 15px 0px;
 }

 .section_title {
   font-family: "Poppins", sans-serif;
   font-size: 30px;
   font-weight: 500;
   line-height: 1.2;
   color: #393939;
 }

 .section_padding .section-subtitle::before {
   position: absolute;
   left: 0;
   top: 0;
   width: 2px;
   height: 100%;
   background-color: #1337b2;
   content: "";
 }

 .section_padding .section-subtitle {
   color: #1337b2;
   font-size: 15px;
   font-weight: 500;
   display: inline-block;
   background-color: rgb(238 242 255);
   padding: 10px 25px;
   line-height: 1;
   position: relative;
   z-index: 1;
   margin-bottom: 10px;
 }

 .section_padding p {
   line-height: 28px;
 }

 .counter-inner .count {
   color: #2c47a2;
   font-size: 31px;
   font-weight: 900;
   font-family: "Mulish", sans-serif;
   line-height: 1.1;
 }

 .counter_class {
   border-right: 1px solid #ccc;
   margin: 0px 5px;
 }

 .overlay-text {
   position: absolute;
   bottom: 0px;
   left: 10px;
   color: black;
   padding: 0px 10px;
   font-size: 14px;
   border-radius: 4px;
   width: 253px;
 }

 /* Enhanced Principal's Message Section */
 .principal_msg {
   background-color: #ffffff;
   position: relative;
   overflow: hidden;
   padding: 20px 0;
 }

 /* Animated Background */
 .animated-background {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;

   background-size: 400% 400%;
   animation: gradientBG 15s ease infinite;
   z-index: 1;
 }

 @keyframes gradientBG {
   0% {
     background-position: 0% 50%;
   }

   50% {
     background-position: 100% 50%;
   }

   100% {
     background-position: 0% 50%;
   }
 }

 /* Container positioning */
 .principal_msg .container {
   position: relative;
   z-index: 10;
 }

 /* Principal Image Styling */
 .principal-image-container {
   padding: 50px;
 }

 .principal-image-wrapper {
   position: relative;
   border-radius: 10px;
   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
   overflow: hidden;
   transition: transform 0.5s ease;
 }

 .principal-image-wrapper:hover {
   transform: translateY(-10px);
 }

 .principal-image-wrapper img {
   width: 100%;
   border-radius: 10px 10px 0 0;
   transition: all 0.3s ease;
 }

 .principal_name {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   background: linear-gradient(to top, rgba(26, 70, 149, 0.95), rgba(26, 70, 149, 0.7));
   color: white;
   padding: 15px;
   text-align: center;
   border-radius: 0 0 10px 10px;
 }

 .principal_name h4 {
   font-size: 18px;
   margin-bottom: 5px;
   font-weight: 600;
 }

 .principal_name h6 {
   font-size: 14px;
   margin-bottom: 0;
   font-weight: 500;
   color: #f0f0f0;
 }

 /* Message Content Styling */
 .principal-message {

   border-radius: 15px;
   padding: 5px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
   backdrop-filter: blur(5px);
 }

 .principal-message .section_title {
   color: #393939;
   position: relative;
   padding-bottom: 15px;
 }


 .message-content {
   margin-top: 20px;
 }

 .message-content p {
   padding: 10px;
   margin-bottom: 15px;
   line-height: 1.8;
   color: #444;
   text-align: justify;
 }




 /* Media Queries */
 @media (max-width: 767px) {
   .principal-image-container {
     margin-bottom: 30px;
   }

   .principal-image-wrapper {
     max-width: 300px;
     margin: 0 auto;
   }

   .principal-message {
     padding: 20px;
   }

   

   
 }

 /* inner body button */
 .inner_btn {
   position: relative;
   padding: 5px 20px;
   margin-top: 10px;
   font-size: 1rem;
   font-weight: 600;
   color: #f70304;
   background: none;
   border: 2px solid #f70304;
   border-radius: 8px;
   cursor: pointer;
   overflow: hidden;
   transition: all 0.3s ease;
 }

 .inner_btn i {
   font-size: 1rem;
   vertical-align: middle;
   transition: transform 0.3s ease;
 }

 .inner_btn:hover i {
   transform: translateX(5px);
   /* cute arrow movement on hover */
 }

 .liquid {
   background: linear-gradient(#f70304 0 0) no-repeat calc(200% - var(--p, 0%)) 100% / 200% var(--p, 0.2em);
   transition: 0.3s var(--t, 0s),
     background-position 0.3s calc(0.3s - var(--t, 0s));
 }

 .liquid:hover {
   --p: 100%;
   --t: 0.3s;
   color: #fff;
 }


  .pay-button {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   font-weight: 500;
   background-color: rgb(247, 3, 4);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   color: white;
   border-radius: 5px;
   border: 2px solid red;
   padding: 5px 5px;
   margin: 5px;
   cursor: pointer;
   transition: background-color 0.4s ease, color 0.4s ease;
 }

 .pay-button:hover {
   background-color: white;
   color: rgb(247, 3, 4);
   border: 2px solid red;
 } 



 .section_padding .inner_btn {
   /* width: 150px; */
   padding: 5px 10px;
 }

 .footer_contact span,
 a {
   font-family: var(--bs-body-font-family);
   color: #fff;
   font-weight: normal;
   line-height: normal;
 }

 footer h5 {
   margin-bottom: 15px;
 }
 

 /* animation style */
 .h3_about-wrap-shape {
   position: absolute;
   left: 155px;
   bottom: 25px;
   animation: section-animation 5s linear 0s infinite;
   height: auto;
 }


 @keyframes section-animation {
   0% {
     width: 0;
   }

   15% {
     width: 50%;
   }

   85% {
     opacity: 1;
   }

   90% {
     width: 50%;
     opacity: 0;
   }

   100% {
     width: 0;
     opacity: 0;
   }
 }


 /* animation style */



 /* fluid_slider style start */
 .event-bg-img {
   position: absolute;
   left: 0;
   top: 0;
   z-index: -1;
   max-width: 400px;
   height: 100%;
 }



 /* social media style start */

 .social_media {
   display: inline-block;
   position: relative;
   top: 6%;
   left: 26%;
   -ms-transform: translate(-50%, -50%);
   -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
 }

 /* Icons */

 .social_media a {
   color: #fff;
   background: #003a6a;
   border-radius: 4px;
   border: 1px solid #fff;
   text-align: center;
   text-decoration: none;
   font-family: fontawesome;
   position: relative;
   display: inline-block;
   width: 39px;
   height: 36px;
   padding-top: 10px;
   margin: 0 2px;
   -o-transition: all .5s;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   transition: all .5s;
   -webkit-font-smoothing: antialiased;
 }

 .social_media a:hover {
   background: #962527;
 }

 /* pop-up text */

 .social_media a span {
   color: #666;
   position: absolute;
   font-family: sans-serif;
   bottom: 0;
   left: -25px;
   right: -25px;
   padding: 5px 7px;
   z-index: -1;
   font-size: 14px;
   border-radius: 2px;
   background: #fff;
   visibility: hidden;
   opacity: 0;
   -o-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   -moz-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 }

 /* pop-up text arrow */

 .social_media a span:before {
   content: '';
   width: 0;
   height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 5px solid #fff;
   position: absolute;
   bottom: -5px;
   left: 40px;
 }

 /* text pops up when icon is in hover state */

 .social_media a:hover span {
   bottom: 50px;
   visibility: visible;
   opacity: 1;
 }

 /* font awesome icons */

 .social_media a:nth-of-type(1):before {
   content: '\f09a';
   font-family: 'Font Awesome 5 Brands';
 }

 .social_media a:nth-of-type(2):before {
   content: '\f232';
   font-family: 'Font Awesome 5 Brands';
 }

 .social_media a:nth-of-type(3):before {
   content: '\f167';
   font-family: 'Font Awesome 5 Brands';
 }



 /* card section style start */
 .feature-wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-column-gap: 60px;
   grid-row-gap: 80px;
   margin: 10px 0px;
 }

 .feature-wrapper .feature-type {
   padding: 18px;
   border: 2px dashed #d9d9d9;
   border-radius: 25px;
   text-align: center;
   position: relative;
   z-index: 1;
 }

 .feature-wrapper .feature-type .feature-icon {
   position: relative;
   z-index: 1;
   display: inline-block;
 }

 .feature-wrapper .feature-type .feature-icon i {
   font-size: 100px;
   color: #F24080;
   font-weight: 400;
 }

 .feature-wrapper .feature-type .feature-heading {
   margin-bottom: 15px;
   margin-top: 5px;
   color: #002f8a;
   font-weight: 600;
   font-size: 22px;

 }

 .feature-wrapper .feature-type .feature-info {
   margin-bottom: 15px;
   text-align: justify;
 }

 .home-feature-section .feature-wrapper .feature-type .right-arrow-link {
   display: inline-block;
   position: absolute;
   z-index: -1;
   bottom: 0;
   left: 50%;
   transform: translate(-50%, 50%);
 }

 .feature-wrapper .feature-type .right-arrow-link {
   position: absolute;
   bottom: -29px;
   left: 40%;
 }

 .moto_claretian .feature-wrapper .feature-type .right-arrow-link {
   position: absolute;
   bottom: -29px;
   left: 45%;
 }

 /* Add this part */
 @keyframes jump {
   0% {
     transform: translateY(0);
   }

   30% {
     transform: translateY(-10px);
   }

   50% {
     transform: translateY(0);
   }

   70% {
     transform: translateY(-6px);
   }

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

 .feature-wrapper .feature-type .right-arrow-link:hover i {
   animation: jump 1s ease-in-out;
   background-color: #f70304;
   color: #fff;
 }

 .feature-wrapper .feature-type .right-arrow-link i {
   padding: 20px;
   border-radius: 100%;
   background-color: #ffffff;
   box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.15);
   color: #f70304;
   transition: all 0.3s ease;
 }

 /* Left-Right Section Layout */
 .full-card-section {
   /* background: linear-gradient(to right,  #1a4695, #1a4695); */
   padding: 25px 0px;
   border-radius: 20px;
   max-width: 1100px;
   margin: 50px auto;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
   overflow: hidden;
 }

 .content-wrapper {
   display: flex;
   align-items: center;
   gap: 20px;
   flex-wrap: wrap;
   padding: 10px;
 }

 /* Image Styles */
 .image-container {
   flex: 1;
   text-align: center;
 }

 .image-container img {
   width: 100%;
   max-width: 250px;
   height: auto;
   border: 5px solid #fff;
   border-radius: 15px;
   object-fit: cover;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
 }

 /* Text Styles */
 .text-container {
   flex: 2;
   color: black;
   position: relative;
 }

 .trophy-svg {
   width: 60px;
   margin: 0 auto 20px;
   display: block;
 }

 .text-container h2 {
   font-size: 35px;
   margin-bottom: 20px;
   text-align: center;
   color: #002f8a;
 }

 .text-container p {
   font-size: 16px;
   line-height: 1.7;
   text-align: center;
 }

 /* Responsive */
 @media (max-width: 768px) {
   .content-wrapper {
     flex-direction: column;
     text-align: center;
   }

   .image-container img {
     max-width: 300px;
   }

   .text-container h2 {
     font-size: 28px;
   }

   .text-container p {
     font-size: 16px;
   }

   

   
 }




 /* carousel style start */

 #news-slider {
   margin-top: 10px;
 }

 #news-slider .owl-nav {
   display: flex !important;
   justify-content: space-between;
   align-items: center;
   position: absolute;
   top: -56px;
   right: 35px;
 }

 #news-slider .owl-dots {
   display: none;
 }

 #news-slider .owl-nav .owl-prev {
   /* position: absolute; */
   top: 50%;
   left: 0px;
 }

 #news-slider .owl-nav .owl-next {
   /* position: absolute; */
   top: 50%;
   right: 0px;
 }

 #news-slider .owl-nav .owl-prev,
 #news-slider .owl-nav .owl-next {
   padding: 10px !important;
   background: #c12504;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   color: #fff;
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 30px;
 }

 #news-slider .owl-nav .owl-prev span,
 #news-slider .owl-nav .owl-next span {
   font-size: 32px;
   margin-bottom: 6px;
 }

 #club_slider {
   margin-top: 10px;
 }

 #club_slider .owl-nav {
   display: flex !important;
   justify-content: space-between;
   align-items: center;
 }

 #club_slider .owl-dots {
   display: none;
 }

 #club_slider .owl-nav .owl-prev {
   position: absolute;
   top: 50%;
   left: 0px;
 }

 #club_slider .owl-nav .owl-next {
   position: absolute;
   top: 50%;
   right: 0px;
 }

 #club_slider .owl-nav .owl-prev,
 #club_slider .owl-nav .owl-next {
   padding: 10px !important;
   background: #c12504;
   color: #fff;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 30px;
 }

 #club_slider .owl-nav .owl-prev span,
 #club_slider .owl-nav .owl-next span {
   font-size: 32px;
   margin-bottom: 10px;
 }


 #physical_education {
   margin-top: 10px;
 }

 /*#physical_education .owl-nav {*/
 /*  display: flex !important;*/
 /*  justify-content: space-between;*/
 /*  align-items: center;*/
 /*}*/

 /*#physical_education .owl-dots {*/
 /*  display: none;*/
 /*}*/

 /*#physical_education .owl-nav .owl-prev {*/
 /*  position: absolute;*/
 /*  top: 50%;*/
 /*  left: 0px;*/
 /*  transform: translateY(-50%);*/
 /*  z-index: 10;*/
 /*}*/

 /*#physical_education .owl-nav .owl-next {*/
 /*  position: absolute;*/
 /*  top: 50%;*/
 /*  right: 0px;*/
 /*  transform: translateY(-50%);*/
 /*  z-index: 10;*/
 /*}*/

 /*#physical_education .owl-nav .owl-prev,*/
 /*#physical_education .owl-nav .owl-next {*/
 /*  padding: 10px !important;*/
 /*  background: #c12504;*/
 /*  color: #fff;*/
 /*  width: 40px;*/
 /*  height: 40px;*/
 /*  display: flex;*/
 /*  align-items: center;*/
 /*  justify-content: center;*/
 /*  border-radius: 30px;*/
 /*}*/

 /*#physical_education .owl-nav .owl-prev span,*/
 /*#physical_education .owl-nav .owl-next span {*/
 /*  font-size: 32px;*/
 /*  margin-bottom: 10px;*/
 /*}*/
 
  #physical_education .owl-nav {
  display: flex !important;
  justify-content: center; /* Center the buttons */
  align-items: center;
  gap: 20px; /* Space between buttons */
  margin-top: 5px; /* Space from carousel */
  position: relative; /* Remove absolute positioning */
}

#physical_education .owl-dots {
  display: none;
}

#physical_education .owl-nav .owl-prev {
  position: relative; /* Change from absolute */
  transform: none; /* Remove transform */
  z-index: 10;
}

#physical_education .owl-nav .owl-next {
  position: relative; /* Change from absolute */
  transform: none; /* Remove transform */
  z-index: 10;
}

#physical_education .owl-nav .owl-prev,
#physical_education .owl-nav .owl-next {
  padding: 10px !important;
  background: #c12504;
  color: #fff;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  border: none;
  cursor: pointer;
}

#physical_education .owl-nav .owl-prev span,
#physical_education .owl-nav .owl-next span {
  font-size: 32px;
  margin-bottom: 6px;
}

 .post-slide {
   background: #fff;
   margin: 20px 15px 20px;
   border-radius: 15px;
   padding-top: 1px;
   box-shadow: 0px 14px 22px -9px #bbcbd8;
 }

 .post-slide .post-img {
   position: relative;
   overflow: hidden;
   border-radius: 10px;
   /* Set fixed height for image container */
   height: 250px;
   /* Adjust this value as needed */
   width: 100%;
 }

 .post-slide .post-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* This makes the image cover the container without stretching */
   object-position: center;
   /* Centers the image in the container */
   transition: transform 0.2s linear;
 }

 /* .post-slide:hover .post-img img{
  transform: scale(1.1,1.1);
} */

 .post-slide .over-layer {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
   background: linear-gradient(-45deg, rgba(6, 190, 244, 0.75) 0%, rgba(45, 112, 253, 0.6) 100%);
   transition: all 0.50s linear;
 }

 .post-slide:hover .over-layer {
   opacity: 1;
   text-decoration: none;
 }

 .post-slide .over-layer i {
   position: relative;
   top: 45%;
   text-align: center;
   display: block;
   color: #fff;
   font-size: 25px;
 }

 .post-slide .post-content {
   background: #fff;
   padding: 2px 20px 15px;
   border-radius: 15px;
 }

 .post-slide .post-title {
   text-align: center;
 }

 .post-slide .post-title a {
   font-size: 20px;
   font-weight: bold;
   color: #002f8a;
   display: inline-block;
   text-transform: capitalize;
   transition: all 0.3s ease 0s;
 }

 .post-slide .post-title a:hover {
   text-decoration: none;
   color: #3498db;
 }

 .post-slide .post-description {
   line-height: 24px;
   color: #808080;
   margin-bottom: 25px;
 }

 .post-slide .post-date {
   color: #a9a9a9;
   font-size: 14px;
 }

 .post-slide .post-date i {
   font-size: 20px;
   margin-right: 8px;
   color: #CFDACE;
 }

 .post-slide .read-more {
   padding: 7px 20px;
   float: right;
   font-size: 12px;
   background: #2196F3;
   color: #ffffff;

   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   border-radius: 25px;
   text-transform: uppercase;
 }

 .post-slide .read-more:hover {

   text-decoration: none;
   color: #fff;
 }

 .owl-controls .owl-buttons {
   text-align: center;
   margin-top: 20px;
 }

 .owl-controls .owl-buttons .owl-prev {
   background: #fff;
   position: absolute;
   top: -13%;
   left: 15px;
   padding: 0 18px 0 15px;
   border-radius: 50px;
   box-shadow: 3px 14px 25px -10px #92b4d0;
   transition: background 0.5s ease 0s;
 }

 .owl-controls .owl-buttons .owl-next {
   background: #fff;
   position: absolute;
   top: -13%;
   right: 15px;
   padding: 0 15px 0 18px;
   border-radius: 50px;
   box-shadow: -3px 14px 25px -10px #92b4d0;
   transition: background 0.5s ease 0s;
 }

 .owl-controls .owl-buttons .owl-prev:after,
 .owl-controls .owl-buttons .owl-next:after {
   content: "\f104";
   font-family: FontAwesome;
   color: #333;
   font-size: 30px;
 }

 .owl-controls .owl-buttons .owl-next:after {
   content: "\f105";
 }


 /* side image animation style start */
 .shape_2 {
   position: absolute;
   left: -53px;
   animation: moveLeftRight 3s linear infinite;
 }

 .shape_4 {
   position: absolute;
   left: 32%;
   animation: moveLeftRight2 3s linear infinite;
 }

 .shape_6 {
   position: absolute;
   left: -53px;
   animation: moveLeftRight3 3s linear infinite;
 }

 @keyframes moveLeftRight {
   0% {
     left: -10px;
   }

   50% {
     left: 10px;
     /* adjust this value based on how far you want it to move */
   }

   100% {
     left: -10px;
   }
 }

 @keyframes moveLeftRight2 {
   0% {
     left: 34%;
   }

   50% {
     left: 35%;
     /* adjust this value based on how far you want it to move */
   }

   100% {
     left: 34%;
   }
 }

 @keyframes moveLeftRight3 {
   0% {
     left: 68%;
   }

   50% {
     left: 69%;
     /* adjust this value based on how far you want it to move */
   }

   100% {
     left: 68%;
   }
 }

 .shape-5 {
   position: absolute;
   width: 154px;
   height: auto;
   right: -10px;
   top: 1px;
   animation: rotateShape 10s linear infinite;
 }
 
 .shape-t {
   position: absolute;
   width: 154px;
   height: auto;
   left: -10px;
   top: 40px;
   animation: rotateShape 10s linear infinite;
 }

 @keyframes rotateShape {
   from {
     transform: rotate(0deg);
   }

   to {
     transform: rotate(360deg);
   }
 }

 .footer_shape_1 {
   position: absolute;
   width: 100px;
   bottom: 50px;
   right: 0px;
 }

 .footer_shape_2 {
   position: absolute;
   width: 100px;
   top: 0px;
   left: 0px;
   rotate: 181deg;
 }

 .shape_3 {
   position: absolute;
   left: 30%;
   top: 97%;
   animation: moveRightLeft 3s ease-in-out infinite;
 }

 .shape_5 {
   position: absolute;
   left: 30%;
   top: 97%;
   animation: moveRightLeft2 3s ease-in-out infinite;
 }

 .shape_7 {
   position: absolute;
   left: 30%;
   top: 97%;
   animation: moveRightLeft3 3s ease-in-out infinite;
 }

 @keyframes moveRightLeft {
   0% {
     left: 30%;
   }

   50% {
     left: 31%;
     /* adjust this value as needed */
   }

   100% {
     left: 30%;
   }
 }

 @keyframes moveRightLeft2 {
   0% {
     left: 64%;
   }

   50% {
     left: 65%;
     /* adjust this value as needed */
   }

   100% {
     left: 64%;
   }
 }

 @keyframes moveRightLeft3 {
   0% {
     left: 99%;
   }

   50% {
     left: 100%;
     /* adjust this value as needed */
   }

   100% {
     left: 99%;
   }
 }


.marquee-wrapper {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 10px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.marquee {
  display: flex;
  width: max-content;
  animation: marquee 15s linear infinite;
}

.marquee span {
  display: inline-block;
  white-space: nowrap;
  font-size: 28px;
  font-weight: 400;
  color: black;
  -webkit-text-stroke: 2px #2c47a200;
  text-stroke: 2px #d94f5c;
  padding-right: 50px; /* Space between repeats */
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {

  .marquee-wrapper {
    padding: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  }

  .marquee {
    animation: marquee 25s linear infinite; /* slower */
  }

  .marquee span {
    font-size: 16px;      /* smaller text */
    font-weight: 400;
    padding-right: 25px; /* less spacing */
    -webkit-text-stroke: 1px transparent;
    text-stroke: 1px transparent;
  }
}


 /* BANNER ANIMATION STYLE START */
 /* Base animation classes */
 [data-animation] {
   opacity: 0;
   transform: translateY(20px);
   animation-fill-mode: both;
 }

 /* Fade In Up Animation */
 @keyframes fadeInUp {
   0% {
     opacity: 0;
     transform: translateY(40px);
   }

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

 [data-animation="fadeInUp"] {
   animation-name: fadeInUp;
   animation-duration: 1s;
   animation-timing-function: ease-out;
 }

 
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }

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

[data-animation="fadeInLeft"] {
  animation-name: fadeInLeft;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

 /* appointment form style start */

 .appointment-form {
   background-color: #fef5ff;
   padding: 60px;
   border-radius: 50px;
 }

 .sub-title {
   font-size: 24px;
   font-weight: 500;
   color: rgb(21, 131, 1);
   display: block;
   margin-bottom: 29px;
   margin-top: 0px;
 }

 .sec-title.big-title {
   font-size: 45px;
   margin-top: -1.1rem;
 }

 .wave-btn {
   background-color: #002f8a;
   color: #fff;
   padding: 5px 10px;
   border: 1px solid #002f8a;
   border-radius: 10px;
 }

 footer .text_footer {
   margin-right: 41px;
 }

 footer h5 {
   font-size: 24px;
 }

 .footer_heading {
   font-family: "Poppins", sans-serif;
   font-weight: 400;
   display: inline-block;
   position: relative;
   font-size: 22px;
   color: #fff;
   padding-bottom: 5px;
 }

 .footer_heading::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   height: 2px;
   width: 100%;
   background-color: #e0300bab;
   /* change to your preferred underline color */
 }

 /* admission_section style start */
 .admission_section {
   position: relative;
   background: url('img/banner_1.png') center/cover no-repeat;
 }

 .admission_section .overlay_section {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #1a4695a6;
   /* Use rgba for opacity instead of opacity property */
   z-index: 1;
 }

 .admission_section .container {
   position: relative;
   z-index: 2;
   /* To make sure content stays above overlay */
   font-family: 'quicksand', sans-serif;
 }

 .admission_section .bottom_heading {
   color: #fff;
   font-size: 43px;
   font-family: fantasy;
 }

 .admission_section .bottom_p {
   color: #fff;
   font-size: 18px;
 }

 .admission_section a {
   padding: 0px 20px;
   font-size: 25px;
   font-weight: 600;
 }

 .button-group {
   display: flex;
   gap: 20px;
   justify-content: center;
 }

 .admission_section .bottom_img2 {
   position: absolute;
   left: 79%;
   top: 0px;
   width: 59px;
   height: auto;
   animation: slideRightToLeft 3s linear 0s infinite alternate;

 }

 .read-more-btn {
   margin-top: 15px;
   background: #1a4695;
   color: white;
   border: none;
   padding: 8px 16px;
   border-radius: 20px;
   cursor: pointer;
   font-size: 14px;
   transition: background 0.3s;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }

 .read-more-btn:hover {
   background: #1a4695;
   color: white;
 }

 .admission_section .bottom_img {
   position: absolute;
   left: 15%;
   top: 0px;
   width: 75px;
   height: auto;
   animation: slideLeftToRight 3s linear 0s infinite alternate;
 }

 @keyframes slideLeftToRight {
   0% {
     transform: translateX(-100%);
   }

   100% {
     transform: translateX(0%);
   }
 }

 @keyframes slideRightToLeft {
   0% {
     transform: translateX(100%);
   }

   100% {
     transform: translateX(0%);
   }
 }

 /* facilities card style start */
 #news-slider .item {
   margin: 15px;
   background: #fff;
   border-radius: 10px;
   display: flex;
   height: 100%;
 }

 #news-slider .card_img {
   overflow: hidden;
   position: relative;
   /* Just in case for layering or absolute children */
 }

 #news-slider .item:hover .card_img img {
   transform: scale(1.04);
 }

 .facilities_title {
   margin-left: 27rem;
 }

 .card_facilities {
   display: flex;
   flex-direction: column;
   /* background: linear-gradient(to right, #1a4695, #1a4695); Cornflower blue to dark blue gradient */
   border-radius: 15px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
   overflow: hidden;
   transition: transform 0.4s ease, box-shadow 0.4s ease;
   position: relative;
 }

 .card_facilities:hover {
   transform: translateY(-10px);
   box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
 }

 /* Card Image */
 .card_img img {
   width: 100%;
   height: 250px;
   object-fit: cover;
   border-radius: 15px 15px 0 0;
   transition: transform 0.5s ease;
 }

 .card_facilities:hover .card_img img {
   transform: scale(1.05);
 }



 /* Card Content */
 .card_content {
   background: transparent;
   padding: 20px 15px 30px;
   text-align: center;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }

 .card_title {
   margin-bottom: 15px;
 }

 .card_title a {
   font-family: 'poppins', sans-serif;
   color: black;
   font-size: 18px;
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: color 0.3s ease;
 }


 .card_text p {
   color: black;
   font-size: 15px;
   line-height: 1.6;
   text-align: justify;
   margin-bottom: 10px;
   /* Reduced from 20px */
   min-height: 100px;
   /* Reduced height */
 }


 /* Button */
 .card_button {
   display: flex;
   justify-content: center;
 }

 .inner_btn {
   box-shadow: inset;
   background: #043798;
   color:#ffffff;
   padding: 10px 25px;
   border-color: #1a4695;
   border-radius: 30px;
   font-weight: bold;
   font-size: 12px;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
 }

 .inner_btn:hover {
   background: #ffffff;
   color: #043798;
   transform: scale(1.05);
 }

 /* Responsive Adjustments */
 @media (max-width: 768px) {
   .card_img img {
     height: 200px;
   }
 }

 @media (min-width:760px) and (max-width:860px){
  .mobile-menu-toggle {
    display: block;
    cursor: pointer;
    font-size: 64px;
    color: #1a4695;
  }
  .header_top{
    display: none;
  }
 }

 @media (min-width:1020px) and (max-width:1370px){
  .navbar li a {
    font-size: 10px;
    color: #222222;
    padding: 10px 0;
    font-weight: 500;
    display: block;
    text-decoration: none;
    white-space: nowrap;
 }

 .side-navbar {
  display: none;
 }
}


 /* .section_title{
  text-transform: uppercase;
} */

 @keyframes zoomRotate {
   0% {
     transform: scale(0.2) rotate(0deg);
   }

   40% {
     transform: scale(0.5) rotate(180deg);
   }

   80% {
     transform: scale(1) rotate(360deg);
   }

   100% {
     transform: scale(1) rotate(360deg);
   }
 }

 .circle-button {
   display: flex;
   align-items: center;
   font-size: 18px;
   color: #fff;
   text-decoration: none;
   font-family: sans-serif;
 }

 .admission_section a:hover .arrow-circle {
   border-right-color: #ebe72a;
   border-left-color: #ebe72a;
   border-top-color: #ebe72a;
 }

 .arrow-circle {
   margin-left: 10px;
   width: 41px;
   height: 40px;
   border: 2px solid transparent;
   border-right-color: #e6352c;
   border-left-color: #e6352c;
   border-top-color: #e6352c;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transform: rotate(88deg);
 }

 .arrow-circle i {
   transform: rotate(-87deg);
   /* rotates arrow back to right */
   font-size: 16px;
   color: #fff;
 }

 .admission_section a i {
   padding-left: 0px;
 }

 .admission_section .bottom_bottom {
   margin: 15px 0px;
 }


 .footer_links .nav-item:hover .nav-link {
   transform: translateX(8px);
   transition: transform 0.3s ease;
 }


 /* inner banner style start */
 .inner-banner {
   position: relative;
   z-index: 1;
   background-image: url(img/inner_banner_claret.png);
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
   padding-top: 100px;
   padding-bottom: 90px;
 }

 .inner-banner::before {
   position: absolute;
   content: "";
   height: 100%;
   width: 100%;
   background-color: #0123610e;
   left: 0;
   right: 0;
   top: 0;
   z-index: -1;
   opacity: 0.6;

 }

 .inner-banner .banner-content {
   position: relative;
   z-index: 2;
   color: #00308a;
   text-align: center;
 }

 .inner-banner h1 {
   font-size: 35px;
   font-weight: 400;
   margin: 0;
   font-family: quicksand, san-serif
 }

 .inner-banner p {
   font-size: 18px;
   margin-top: 10px;
 }

 @media only screen and (max-width: 767px) {
   .inner-banner {
     padding-top: 60px;
     padding-bottom: 50px;
     background-position: center center;
     background-size: cover;
     min-height: 150px;
     display: flex;
     align-items: center;
   }

   .inner-banner .banner-content {
     width: 100%;
     padding: 0 15px;
     box-sizing: border-box;
   }

   .inner-banner h1 {
     font-size: 28px;
     line-height: 1.2;
     margin-bottom: 5px;
   }

   .inner-banner p {
     font-size: 16px;
     line-height: 1.4;
     margin-top: 8px;
   }
 }

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

  .navbar ul li {
    display: inline-block;
    margin-right: 14px;
  }

  .header_text h4 {
    font-size: 39px;
  }

  .header_text h6 {
    font-size: 12px !important;
  }

  .header_text h5 {
    font-size: 11px;
  }

  .h7_banner-content-title {
    font-size: 39px;
  }
  
  .social_media {
    top: 10%;
    left: 15%;
  }


}

  


 /* For extra small devices */
 @media only screen and (max-width: 480px) {
   .inner-banner {
     padding-top: 50px;
     padding-bottom: 40px;
   }

   .inner-banner h1 {
     font-size: 24px;
   }

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

   
 }


 /* inner about section style */
 .inner_abt_section .section_title .sub_head {
   font-size: 35px;
 }

 .inner_abt_section .abt_1 {
   position: absolute;
   top: 0;
   left: 0;
   width: 115px;
   z-index: 1;
   animation: moveLeftBounce 3s linear infinite;
 }

 .inner_abt_section .abt_2 {
   position: absolute;
   right: 0%;
   width: 146px;
   top: 64%;
   transform: translateY(-50%);
   z-index: 1;
   animation: moveLeftBounce 3s linear infinite;
   z-index: -1;
 }

 .inner_abt_section .abt_3 {
   position: absolute;
   bottom: 10%;
   left: 10%;
   z-index: -1;
   animation: moveLeftBounce 3s linear infinite;
 }

 @keyframes moveLeftBounce {
   0% {
     transform: translateX(0px);
   }

   50% {
     transform: translateX(20px);
   }

   100% {
     transform: translateX(0px);
   }
 }

 .founder_section .founder_img {
   border-radius: 50%;
 }

 .founder_section .founder_text {
   text-align: justify;
 }

 .moto_claretian .feature-wrapper {
   grid-template-columns: repeat(2, 1fr);
 }

 .moto_claretian .feature_ul {
   list-style-type: none;
   padding-left: 0rem;
 }

 .moto_claretian .feature_ul li {
   text-align: start;
 }

 .moto_claretian .feature_ul li::before {
   color: #f70304;
   font-family: "Font Awesome 5 Free";
   content: "\f058";
   font-weight: 400;
   font-size: 14px;
   margin-right: 5px;
 }

 /* contact us page style start */

 .contact-page-section .contact-form-inner {
   position: relative;
   z-index: 1;
   margin-top: 30px;
 }

 .contact-page-section .contact-form-inner .zigzag-patten {
   background-image: url('img/shape/educator-img5.png');
   background-position: bottom center;
   background-repeat: no-repeat;
   background-size: 20% auto;
   opacity: 0.5;
 }

 .title-divider {
   position: relative;
   margin-bottom: 20px;
   height: 17px;
 }

 /* .title-divider:before {
  mask: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' overflow='visible' height='100%' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='square' stroke-miterlimit='10'%3E%3Cpolyline points='0,18 12,6 24,18 '/%3E%3C/svg%3E);
  -webkit-mask: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' overflow='visible' height='100%' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='square' stroke-miterlimit='10'%3E%3Cpolyline points='0,18 12,6 24,18 '/%3E%3C/svg%3E);
  background-repeat: repeat-x;
  content: "";
  width: 100px;
  height: 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-mask-size: 22px;
  mask-size: 22px;
  background-color: #F24080;
  background-size: 22px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
} */
 .contact-page-section .contact-form-inner .contact-detail-container .section-disc {
   margin-bottom: 20px;
 }

 .contact-page-section .contact-form-inner .contact-detail-container .section-disc p {
   margin-bottom: 0;
 }

 .contact-page-section .contact-form-inner .contact-detail-container .contact-details-list {
   margin-right: 50px;
 }

 .contact-page-section .contact-form-inner .contact-detail-container .contact-details-list ul {
   padding: 0;
   margin: 0;
   list-style-type: none;
 }

 .contact-page-section .form_shape {
   position: absolute;
   bottom: 11px;
   right: 0;
   z-index: -11111111;
   opacity: 0.5;
 }

 .contact-page-section .contact-form-inner .contact-detail-container .contact-details-list ul li {
   display: flex;
   align-items: center;
   margin-bottom: 5px;
   padding: 15px 50px 5px 30px;
   background-color: #f8f8f8;
   border-radius: 25px;
 }

 .contact-page-section .contact-form-inner .contact-detail-container .contact-details-list ul li .icon {
   margin-right: 30px;
   text-align: center;
   display: inline-block;
 }

 .contact-page-section .contact-form-inner .contact-detail-container .contact-details-list ul li .icon i {
   width: 50px;
   height: 50px;
   line-height: 50px;
   background-color: #043798;
   color: #ffffff;
   font-size: 30px;
   border-radius: 50%;
   display: inline-block;
   position: relative;
   margin-right: 0;
 }

 .contact-page-section form input {
   background-color: #f8f8f8;
   border-radius: 30px;
   font-size: 15px;
 }

 .contact-page-section form textarea {
   background-color: #f8f8f8;
   border-radius: 30px;
   font-size: 15px;
 }

 .contact-page-section form .submit_btn {
   background-color: #002f8a;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   color: #fff;
   transition: transform 0.3s ease;
 }

 .contact-page-section form .submit_btn:hover {
   background-color: #fff;
   color: #002f8a;
   border: 1px solid #002f8a !important;
   transform: translateX(5px);
 }

 .contact-page-section .contact-form-inner .contact-detail-container .contact-details-list ul li .details-content h5 {
   margin-bottom: 5px;
 }

 .contact-page-section .contact-form-inner .contact-detail-container .contact-details-list ul li .details-content span {
   display: inline-block;
 }

 .contact-page-section .contact-form-inner .contact-from-wrap {
   position: relative;
   z-index: 2;
   border-radius: 25px;
   padding: 70px 50px 70px 50px;
   box-shadow: 0px 0px 15px 10px rgba(0, 0, 0, 0.03);
   background-color: #e1ecfa;
 }

 .contact-page-section .contact-form-inner .contact-from-wrap {
   position: relative;
   z-index: 2;
   border-radius: 25px;
   padding: 70px 50px 70px 50px;
   box-shadow: 0px 0px 15px 10px rgba(0, 0, 0, 0.03);
   background-color: #e1ecfa;
 }

 .contact-page-section .contact-form-inner .contact-from-wrap .contact-from {
   
   margin-left: -10px;
   margin-right: -10px;
 }

 .contact-page-section .contact-form-inner .contact-from-wrap .contact-from p {
   width: 50%;
   padding: 0 15px;
   margin-bottom: 30px;
 }

 .contact-page-section .contact-form-inner .contact-from-wrap .contact-from p input,
 .contact-page-section .contact-form-inner .contact-from-wrap .contact-from p textarea {
   border: 0;
   padding: 12px 20px;
   width: 100%;
 }

 .contact-page-section .contact-form-inner .contact-from-wrap .contact-from .width-full {
   width: 100%;
 }

 .contact-page-section .contact-form-inner .contact-from-wrap .contact-from p {
   width: 100%;
   padding: 0 15px;
   margin-bottom: 30px;
 }


 footer .footer_links .nav .nav-item a {
   text-wrap: nowrap;
   margin-bottom: -1px;
 }

 @media only screen and (max-width:1280px) {
   .post-slide .post-content {
     padding: 0px 15px 25px 15px;
   }
 }



 @media(max-width:1400px) and (min-width:1200px) {
   .section_title {
     font-size: 25px;
   }

   .counter-inner .count {
     padding: 0px !important;
   }

   .footer_link_class {
     /* width: 31%; */
   }

   footer .footer_links .nav .nav-item a {
     font-size: 13px;
   }

   footer p {
     font-size: 13px;
   }

   footer .opening_hours li {
     font-size: 13px;
   }

   .navbar ul li {
     display: inline-block;
     margin-right: 0px;
   }

   .h7_header-area .col-md-8 {
     padding-left: 0px;
     padding-right: 0px;
   }

   .navbar li a {
     font-size: 16px;
   }

   .h7_banner-content-title {
     color: rgb(255, 255, 255);
     font-size: 40px;
     font-family: 'quicksand', san-serif;
   }

   .h7_banner-content p {
     font-size: 15px;
     font-weight: 600;
   }

   .card_text p {
     text-align: justify;
     font-size: 15px;
     line-height: 1.6;
     margin-bottom: 0;
     height: 120px;
   }

   .logo_img img {
     width: 110px;
   }

   .header_text h4 {
     font-size: 39px;
   }

   .header_text h6 {
     /* font-size: 16px; */
     font-size: 12px !important;
   }

   .header_text h5 {
     font-size: 11px;
   }

   .h7_header-top-list li {
     margin-right: 15px;
     padding-right: 6px;
   }

   .h7_header-top-list li a {
     font-size: 12px;
   }

   

  

 }

 @media (max-width:1785px) and (min-width:1605px) {
   .navbar ul li {
     display: inline-block;
     margin-right: 14px;
   }

   #sixth-slide{
    margin-bottom: 55%;
    margin-left: 30%;
   }

   #third-slide{
    margin-top:90%;
   }
 }

 @media (min-width: 1701px) and (max-width: 1800px) {
   .header_text h4 {
     font-size: 39px;
   }

   .header_text h6 {
     font-size: 12px !important;
   }

   .header_text h5 {
     font-size: 11px;
   }

   .h7_banner-content-title {
     font-size: 39px !important;
   }

   #sixth-slide{
    margin-bottom: 55%;
    margin-left: 30%;
   }

   #third-slide{
    margin-top:90%;
   }

 }

 @media (min-width: 1601px) and (max-width: 1700px) {
   .header_text h4 {
     font-size: 39px;
   }

   .header_text h6 {
     font-size: 12px !important;
   }

   .header_text h5 {
     font-size: 11px;
   }

   .h7_banner-content-title {
     font-size: 39px !important;
   }

   .social_media {
     left: 17%;
   }

   #sixth-slide{
    margin-bottom: 55%;
    margin-left: 30%;
   }

   #third-slide{
    margin-top:90%;
   }
 }

 @media (max-width:1369) {
  .header_text h4 {
    font-size: 39px;
  }

  .header_text h6 {
    font-size: 15px !important;
  }

  .header_text h5 {
    font-size: 11px;
  }

  .h7_header-area .col-md-8 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .navbar ul li {
    display: inline-block;
    margin-right: 13px;
  }

  .navbar li a {
    font-size: 15px;
  }

  .h7_header-top-list li {
    margin-right: 15px;
    padding-right: 0px;
  }

  .h7_header-top-list li:not(:last-child)::before {
    right: -11px !important;
  }

  .h7_banner-content-title {
    font-size: 39px !important;
  }

  .social_media {
    left: 15%;
  }

  #sixth-slide{
    margin-bottom: 55%;
    margin-left: 30%;
   }

   #third-slide{
    margin-top:90%;
   }
 }

 

 @media (max-width:1600px) and (min-width:1400px) {

   .header_text h4 {
     font-size: 39px;
   }

   .header_text h6 {
     font-size: 12px !important;
   }

   .header_text h5 {
     font-size: 11px;
   }

   .h7_header-area .col-md-8 {
     padding-left: 0px;
     padding-right: 0px;
   }

   .navbar ul li {
     display: inline-block;
     margin-right: 13px;
   }

   .navbar li a {
     font-size: 15px;
   }

   .h7_header-top-list li {
     margin-right: 15px;
     padding-right: 0px;
   }

   .h7_header-top-list li:not(:last-child)::before {
     right: -11px !important;
   }

   .h7_banner-content-title {
     font-size: 39px !important;
   }

   .social_media {
     left: 17%;
   }

   #sixth-slide{
    margin-bottom: 55%;
    margin-left: 30%;
   }

   #third-slide{
    margin-top:90%;
   }
 }

 @media (max-width:1024px) {

  .header_text h4 {
    font-size: 39px;
  }

  .header_text h6 {
    font-size: 12px !important;
  }

  .header_text h5 {
    font-size: 11px;
  }

  .social_media {
    left: 17%;
  }
  
  
}

.principal-image-container {
  padding: 5px;
}

 /* mobile response style start */
 @media(max-width:400px) {
  .social_media {
    left: 20% !important;
}


 }

 @media(max-width:360px) {
  

#head_line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 45%;
  background-color: #e0300bab;
  /* change to your preferred underline color */
}

#header_line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 65%;
  background-color: #e0300bab;
  /* change to your preferred underline color */
}

.carousel-inner {
  height: 200px;
}

.carousel-inner img {
  height: 200px;
}

.h7_banner-content .inner_btn{
margin-left: 5%;
}


  
}
 
 /* mobile response style start! */
 @media(max-width:650px) {
  
  

  .social_media {
    top: 10%;
    left: 18% ;
}

#head_line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 50%;
  background-color: #e0300bab;
  /* change to your preferred underline color */
}

#header_line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 80%;
  background-color: #e0300bab;
  /* change to your preferred underline color */
}

   .header_top {
     position: relative;
     width: 100%;
     display: none;
   }


   ol,
   ul {
     padding-left: 0.4rem;
   }

   .h7_header-top-list li {
     margin-right: 10px;
     padding-right: 15px;
     margin-bottom: 5px;
   }

   .h7_header-top-list li a {
     font-size: 13px;
     line-height: 20px;
     gap: 7px;
   }

   .h7_header-top-list {
     display: block;
   }

   .logo_img img {
     width: 100px;
     height: auto;
     padding: 5px 0px;
   }

   .header_text h4 {
     font-size: 39px;
   }

   .header_text h6 {
     font-size: 16px;
   }

   .header_text h5 {
     font-size: 11.5px;
   }

   .h7_header-area .col-md-4 {
     width: 90%;
   }

   .h7_header-area .col-md-8 {
     width: 10%;
   }

   .h7_banner-content-title {
     color: rgb(255, 255, 255);
     font-size: 25px;
     margin-bottom: 10px;
     margin-left: 1rem;

   }

   .h7_banner-content-text{
    margin-left: 10px;
   }

   .carousel-inner {
     height: 250px;
   }

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

   .carousel-caption-custom {
     position: absolute;
     top: 45%;
     left: 50%;
   }

   .h7_banner-content p {
     font-size: 13px;
     font-weight: 600;
     margin-bottom: 0.6rem;
   }

   .inner_btn {
     padding: 4px 7px;
     margin-top: 5px;
     font-size: 0.8rem;
   }

   .abt_heading .section_title {
     font-size: 21px;
   }

   .abt_heading .sub_head {
     font-size: 17px;
     color: #2c4393;
   }

   p {
     font-size: 14px;
     margin-bottom: 0.7rem;
   }

   .head_line::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 50%;
    background-color: #e0300bab;
    /* change to your preferred underline color */
  }

   .social_media {
     top: 10%;
     left: 18%;
   }

   .counter-inner .col-6 {
     flex: 0 0 auto;
     width: 25%;
   }

   .counter_class {
     border-right: 1px solid #ccc;
     margin: 0px 0px 10px;
     padding-top: 0.5rem !important;
     padding-bottom: 0.5rem !important;
   }

   .counter-inner .count {
     color: #2c47a2;
     font-size: 25px;
     padding-top: 0rem !important;
     padding-bottom: 0rem !important;
   }

   .counter_class .years {
     font-size: 13px;
   }

   .section_padding .inner_btn {
     width: 115px;
   }

   .marquee-text {
     font-size: 28px;
   }

   .section_padding {
     padding: 20px 0px 15px 0px;
   }

   .section_title {
     font-size: 25px;
   }

   .feature-wrapper {
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     grid-column-gap: 5px;
     grid-row-gap: 30px;
     margin: 10px 0px;
   }

   .feature-wrapper .feature-type .feature-heading {
     font-family: "Poppins", sans-serif;
     margin-bottom: 5px;
     margin-top: 5px;
     color: #002f8a;
     font-weight: 600;
     font-size: 18px;
   }

   .feature-wrapper .feature-type .right-arrow-link {
     position: absolute;
     bottom: -20px;
     left: 40%;
   }

   .feature-wrapper .feature-type .right-arrow-link i {
     padding: 14px;
   }

   .shape_3 {
     position: absolute;
     left: 30%;
     top: 32%;
     animation: moveRightLeft 3s ease-in-out infinite;
   }

   @keyframes moveRightLeft {
     0% {
       left: 89%;
     }

     50% {
       left: 90%;
     }

     100% {
       left: 89%;
     }
   }

   @keyframes moveLeftRight {
     0% {
       left: 3px;
     }

     50% {
       left: 26px;
     }

     100% {
       left: 3px;
     }
   }

   .shape_4 {
     position: absolute;
     left: 32%;
     top: 34%;
     animation: moveLeftRight2 3s linear infinite;
   }

   @keyframes moveLeftRight2 {
     0% {
       left: 7%;
     }

     50% {
       left: 6%;
     }

     100% {
       left: 5%;
     }
   }

   .shape_6 {
     position: absolute;
     left: -53px;
     top: 67%;
     animation: moveLeftRight3 3s linear infinite;
   }

   @keyframes moveLeftRight3 {
     0% {
       left: 7%;
     }

     50% {
       left: 6%;
     }

     100% {
       left: 5%;
     }
   }

   .shape_5 {
     position: absolute;
     left: 30%;
     top: 65%;
     animation: moveRightLeft2 3s ease-in-out infinite;
   }

   @keyframes moveRightLeft2 {
     0% {
       left: 88%;
     }

     50% {
       left: 89%;
     }

     100% {
       left: 88%;
     }
   }

   .shape_7 {
     top: 98%;
     animation: moveRightLeft3 3s ease-in-out infinite;
   }

   @keyframes moveRightLeft3 {
     0% {
       left: 88%;
     }

     50% {
       left: 89%;
     }

     100% {
       left: 88%;
     }
   }

   .pricipal_msg .section_title {
     position: absolute;
     top: -37px;
     left: 22%;
   }

   .pricipal_msg img {
     margin-left: 18%;

   }

   .principal_name {
     width: 100%;
   }

   .card_text p {
     height: auto;
   }

   .location_footer {
     display: flex;
     flex-direction: column;
   }

   .admission_section .bottom_heading {
     color: #fff;
     font-size: 15px;
     font-family: fantasy;
   }

   .admission_section .bottom_p {
     color: #fff;
     font-size: 15px;
   }

   .admission_section a {
     padding: 0px 20px;
     font-size: 20px;
     font-weight: 600;
   }

   .admission_section .bottom_bottom {
     margin: 0px 0px;
   }

   .bottom_img2 {
     display: none;
   }

   .bottom_img {
     display: none;
   }

   .shape-5 {
     position: absolute;
     width: 115px;
     height: auto;
     left: 0px;
     top: 19px;
     animation: rotateShape 10s linear infinite;
   }
   
   .shape-t {
     position: absolute;
     width: 115px;
     height: auto;
     right: 0px;
     top: 150px;
     animation: rotateShape 10s linear infinite;
   }

   .inner_abt_section .section_title .sub_head {
     font-size: 21px;
   }

   .inner_abt_section .abt_2 {
     position: absolute;
     right: 0%;
     width: 113px;
     top: 64%;
     transform: translateY(-50%);
     z-index: 1;
     animation: moveLeftBounce 3s linear infinite;
     z-index: -1;
   }

   @keyframes moveLeftBounce {
     0% {
       transform: translateX(0px);
     }

     50% {
       transform: translateX(-22px);
     }

     100% {
       transform: translateX(0px);
     }
   }

   .moto_claretian .feature-wrapper {
     grid-template-columns: repeat(1, 1fr);
   }

   #third-slide{
    margin-top:10%;
   }

   #sixth-slide{
  margin-left: 5%;
  margin-bottom: 10%;
   }
 }

 

 @media (min-width: 1024px) and (max-width: 1440px) {
   .social_media {
     top: 10%;
     /* left: 26%; */
     left: 19%;
   }

  .mobile-menu-toggle {
        display: block;
        cursor: pointer;
        font-size: 24px;
        color: #1a4695;
    }
 }


 @media (max-width:350px) {
   .h7_header-top-list li {
     margin-right: 6px;
     padding-right: 6px;
     margin-bottom: 5px;
   }

   .logo_img img {
     width: 95px;
     height: auto;
     padding: 5px 0px;
   }

   .header_text h4 {
     font-size: 38px;
   }

   .header_text h6 {
     font-size: 16px;
   }

   .header_text h5 {
     font-size: 11.3px;
   }

   .abt_heading .section_title {
     font-size: 18px;
   }

   .pricipal_msg img {
     margin-left: 10%;
   }

   .pricipal_msg .section_title {
     position: absolute;
     top: -37px;
     left: 18%;
   }

   .arrow-circle {
     margin-left: 10px;
     width: 36px;
     height: 37px;
   }

   .arrow-circle i {
     transform: rotate(-87deg);
     font-size: 13px;
     color: #fff;
   }

   .admission_section a {
     padding: 0px 20px;
     font-size: 14px;
     font-weight: 600;
   }

   .social_media {
     top: 10%;
     left: 23%;
   }

   .footer_links .col-5 {
     width: 100%;
   }

   .footer_links .col-6 {
     width: 100%;
   }

   
 }

 @media (max-width:850px){
     .navbar{
    display: block;
   }
 }

 @media (max-width:1024px) and (min-width:768px) {
   .header_top {
     position: relative;
     width: 100%;
   }

   ol,
   ul {
     padding-left: 0.5rem;
   }

   .h7_header-top-list li {
     margin-right: 10px;
     padding-right: 10px;
   }

   .mobile-menu-toggle {
     display: flex !important;
   }

   .h7_header-area .col-md-4 {
     width: 50%;
   }

   .h7_header-area .col-md-8 {
     width: 50%;
   }

   .h7_banner-content-title {
     color: rgb(255, 255, 255);
     font-size: 35px;
   }

   .h7_banner-content p {
     font-size: 17px;
     font-weight: 600;
   }

   .h7_banner-content-title {
     margin-bottom: 10px;
   }

   .inner_btn {
     margin-bottom: 0px;
   }

   .carousel-caption-custom {
     position: absolute;
     top: 50%;
     left: 35%;
   }

   .welcome_section .col-md-6 {
     width: 100%;
   }

   .counter-inner .col-6 {
     flex: 0 0 auto;
     width: 25%;
   }

   .feature-wrapper {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-column-gap: 30px;
     grid-row-gap: 38px;
     margin: 10px 0px;
   }

   .shape_4 {
     position: absolute;
     left: 32%;
     animation: moveLeftRight2 3s linear infinite;
   }

   @keyframes moveLeftRight2 {
     0% {
       left: 51%;
     }

     50% {
       left: 52%;
     }

     100% {
       left: 51%;
     }
   }

   .shape_6 {
     top: 52%;
     position: absolute;
     left: -53px;
     animation: moveLeftRight3 3s linear infinite;
   }

   @keyframes moveLeftRight3 {
     0% {
       left: 0%;
     }

     50% {
       left: 1%;
     }

     100% {
       left: 0%;
     }
   }

   .shape_3 {
     position: absolute;
     left: 30%;
     top: 49%;
     animation: moveRightLeft 3s ease-in-out infinite;
   }

   @keyframes moveRightLeft {
     0% {
       left: 46%;
     }

     50% {
       left: 47%;
     }

     100% {
       left: 46%;
     }
   }

   .shape_5 {
     position: absolute;
     left: 30%;
     top: 49%;
     animation: moveRightLeft2 3s ease-in-out infinite;
   }

   @keyframes moveRightLeft2 {
     0% {
       left: 96%;
     }

     50% {
       left: 97%;
     }

     100% {
       left: 96%;
     }
   }

   .pricipal_msg .col-md-3 {
     width: 35%;

   }

   .pricipal_msg .col-md-6 {
     flex: 0 0 auto;
     width: 65%;
   }

   .principal_name {
     width: 100%;
   }

   .card_text p {
     height: 260px;
   }

   .shape-5 {
     left: 0px;
   }
   
   .shape-t {
     left: 0px;
   }


   .admission_section .bottom_img {
     position: absolute;
     left: 0%;
     top: -30px;
     width: 60px;
     height: auto;
     animation: slideLeftToRight 3s linear 0s infinite alternate;
   }

   @keyframes slideLeftToRight {
     0% {
       transform: translateX(-41%);
     }

     100% {
       transform: translateX(0%);
     }
   }

   .admission_section .bottom_img2 {
     position: absolute;
     left: 94%;
     top: -30px;
     width: 45px;
     height: auto;
     animation: slideRightToLeft 3s linear 0s infinite alternate;
   }

   @keyframes slideRightToLeft {
     0% {
       transform: translateX(45%);
     }

     100% {
       transform: translateX(0%);
     }
   }

   footer .text_footer {
     margin-right: 0px;
   }

   footer .col-md-3 {
     width: 50%;
   }

   footer .col-md-4 {
     flex: 0 0 auto;
     width: 50%;
   }

   footer .col-5 {
     flex: 0 0 auto;
     width: 50%;
   }

   .location_footer {
     display: flex;
     flex-direction: column;
     /* align-items: center; */
   }

   footer .col-md-2 {
     flex: 0 0 auto;
     width: 50%;
   }

   .social_media {
     left: 21%;
   }

   .h7_banner-content-title {
     font-size: 20px;
   }

   .h7_banner-content-title {
     margin-right: 352px !important;
   }

   .carousel-inner p {
     font-size: 10px !important;
     margin-left: -7px !important;
   }

   .inner_btn {
     font-size: 12px !important;
     margin-bottom: 0px !important;
   }

   .header_top{
    display: none;
   }



   .side-navbar{
    display: block;
   }

 }

 /* school-card */

 .btn-primary {
   background-color: #1a4695;
   border: none;
   padding: 6px 18px;
   font-weight: 500;
   border-radius: 25px;
   transition: background-color 0.3s;
 }

 .btn-primary:hover {
   background-color: #16366e;
 }


 .card-container {
   width: 100%;
   padding: 40px 125px;
   display: flex;
   justify-content: center;
   background: #e0eaf2;
 }

 .card-content {
   display: flex;
   flex-direction: row;
   background: #e0eaf2;
   border-radius: 15px;
  /* box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); */
   overflow: hidden;
   max-width: 1200px;
   width: 100%;
 }

 .card-image {
   flex: 0 0 40%;
   background: #1a4695;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
 }

 .card-image img {
   max-width: 100%;
   height: auto;
   border-radius: 10px;
 }

 .card-text {
   flex: 0 0 60%;
   padding: 30px;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 .card-text h3 {
   font-size: 28px;
   color: #1a4695;
   margin-bottom: 20px;
 }

 .card-text p {
   font-size: 16px;
   line-height: 1.8;
   color: #333;
   text-align: justify;
 }

 /* Responsive */
 @media (max-width: 768px) {
   .card-content {
     flex-direction: column;
   }

   .card-image,
   .card-text {
     flex: 0 0 100%;
     padding: 20px;
   }

   .card-text h3 {
     text-align: center;
   }

   .card-text p {
     text-align: center;
   }
 }

 /* school-club */

 
#readMoreBtn {
    padding: 5px 10px;
    font-size: 12px;
    background-color: #1a4695;
    color: white;
    font-weight: bold;
    border: 2px solid white;
    border-radius: 20px;
    border-color: #1a4695;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#readMoreBtn:hover {
    background-color: white;
    color: rgb(4, 55, 152);
}

.club-color {
    color: #002f8a;
    font-weight: 600;
}

.activities-clubs-section {
    /* background-color: #f8f9fa; */
    padding: 1rem 0;
}

.content-centered {
    display: flex;
    align-items: center;
    min-height: 255px;
}

.points-section {
    background-color: white;
    border-radius: 10px;
    padding: 1.5rem; /* Reduced from 2rem */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-top: 1rem;
}

.column-header {
    /* background: linear-gradient(135deg, #002f8a, #0056b3); */
    text-decoration: underline #ff0000;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px; 
    color: black;
    padding: 0.8rem; /* Reduced from 1rem */
    border-radius: 8px;
    text-align: left;
    margin-bottom: 1rem; /* Reduced from 1.5rem */
    font-weight: bold;
    font-size: 1.4rem;
}

.points-column p {
    margin-bottom: 0.8rem; /* Reduced from 1rem */
    padding: 0.3rem; /* Reduced from 0.5rem */
    background-color: #f8f9fa;
    border-radius: 5px;
    transition: all 0.3s ease;
    /* Removed border-left line */
}

.points-column p:hover {
    background-color: #e9ecef;
    transform: translateX(3px); /* Reduced from 5px */
}

.read-more-container {
    text-align: center;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .content-centered {
        min-height: auto;
        margin-bottom: 1rem;
    }
    
    .points-section {
        padding: 1rem;
    }
}



 /* school toppers */






.col-md-8 {
  width: 62.66%;
  padding: 0 15px;
  margin: 0 auto;
}

/* .section_title {
  color: black;
  margin-top: 20px;
    margin-bottom: 30px;
  font-size: 36px;
  font-weight: 700;
  position: relative;
  padding-bottom: 20px;
  letter-spacing: 1px;
} */

/* Card styles */
.toppers-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 30px;
  flex-wrap: nowrap;
  width: 100%;
  padding: 20px;
}

.topper-card {
  width: 28%;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  transition: all 0.4s ease;
  background-color: #fff;
  position: relative;
  border: 1px solid rgba(0,0,0,0.05);
}

.topper-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(11, 24, 201, 0.2);
  border-color: rgba(25, 22, 219, 0.3);
}

.card-content {
  padding: 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 20px;
}

.top-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(45deg, #c12504);
  color: white;
  padding: 8px 15px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.topper-name {
  font-size: 24px;
  color: #c12504;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: 600;
}


.topper-percentage {
  font-size: 28px;
  font-weight: 400;
  color: black;
  margin-bottom: 20px;
  display: block;
}


.topper-image {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.topper-card:hover .topper-image {
  transform: scale(1.03);
}

/* For responsiveness */
@media (max-width: 1200px) {
  .toppers-container {
      flex-wrap: wrap;
      justify-content: space-around;
  }
  
  .topper-card {
      width: 48%;
      margin-bottom: 30px;
  }
}

@media (max-width: 768px) {
  .topper-card {
      width: 100%;
  }
}

.congrats-text {
  margin-top: 15px;
  font-size: 1.8rem;
  font-weight: 600;
  color: #c12504;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  animation: fadeSlideBounce 1.8s ease forwards;
  flex-wrap: nowrap; /* prevent wrapping */
  text-align: center;
}

.medal-img img {
  width: 42px;
  height: 42px;
  display: block;
}

@media (max-width: 600px) {
  .congrats-text {
    font-size: 2.0rem !important;
    flex-wrap: nowrap !important;  /* force no wrap */
    justify-content: center !important;
    gap: 10px !important;
  }

  .medal-img img {
    width: 42px !important;
    height: 42px !important;
  }
}



/* Animation */
@keyframes fadeSlideBounce {
  0% {
      opacity: 0;
      transform: translateY(20px);
  }
  60% {
      opacity: 1;
      transform: translateY(-10px);
  }
  80% {
      transform: translateY(5px);
  }
  100% {
      transform: translateY(0);
  }
}


/* count 5 columns css */
@media (min-width: 992px) {
  .custom-col {
    flex: 0 0 20%;
    max-width: 25%;
  }
}