:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #040677; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #1acc8d; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #ffffff;  /* The default color of the main navmenu links */
  --nav-hover-color: #1acc8d; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #444444; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #1acc8d; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f4f5fe;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #08005e;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #0c0091;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
    font-family: "Mukta", sans-serif; } 

a {
  color: #097ad9;
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color:#d93300;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
   font-family: "Anek Devanagari", sans-serif;
  font-optical-sizing: auto;
}
img {border: 0; max-width: 100%; height: auto; }



@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

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

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  padding: 20px 0 0;
  transition: all 0.5s;
  z-index: 997;
    background:#FFFFFF; 
    max-height: 200px;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 88px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

.head_contact{border-left: 1px solid gainsboro; color: #006aba;}
.head_contact .head_email{font-size: 0.9em;}
.head_contact .bi {margin-right: 7px; color: #aca6a6;}
.logo-bg{position: absolute; top:0; left: 0; z-index: 20;}

.scrolled .header {
 box-shadow: 0 0 18px rgba(0, 0, 0, 0.44);
    background: #FFFFFF;
}
.scrolled .header .logo img{max-height: 60px;}

.scrolled .header .navmenu a{color: #0977d8;   font-family: "Anek Devanagari", sans-serif;
  font-optical-sizing: auto;}

.scrolled .header .head_contact{border-left: 0; width: 30%; margin-top:15px;}
.scrolled .header .head_contact p{float: left; margin-left: 15px;}



.menu-main{  background-image: linear-gradient(to right, #0075BF, #034d7e);}


/* show the menu on mobile when .menu-open is present */
@media (max-width: 991.98px) {
  .main-menu { display: none; }
  .main-menu.menu-open { display: block; }
}

/* style the toggle icon if you’re using a <span class="icon"> */
#mobile-menu { cursor: pointer; font-size: 28px; line-height: 1; }
#mobile-menu .icon { display: inline-block; }

.menu-item-has-children .sub-menu {
  transform: translateY(-10px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
}

.menu-item-has-children.submenu-open .sub-menu {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}





@media (max-width: 1400px) and (min-width: 992px) {
    .news-section, .gallery, .footer-top, .boxes{
        max-width: 95% !important;
        margin: auto;
    }
}


@media (max-width: 992px) and (min-width: 768px) {
    .news-section, .gallery, .footer-top, .boxes{
        max-width: 90% !important;
        margin: auto;
    }
}

@media (max-width: 768px) and (min-width: 576px) {
    .news-section, .gallery, .footer-top, .boxes {
        max-width: 85% !important;
        margin: auto;
    }
  
      .news-thumbnail img {width: 100%;}
    .news-thumbnail{height: auto !important;}
    .news-title {  margin-top: 10px !important;
    }
    .news-content {
  padding: 10px 25px 25px !important;
    }        .thumbnail-container img {
  width: 100% !important;
}

    
}
@media (max-width: 576px) {
    .news-section, .gallery, .footer-top, .boxes{
        max-width: 95% !important;
        margin: auto;
    }
    
     .news-thumbnail img {width: 100%;}
    .news-thumbnail{height: auto !important;}
       .news-title {  margin-top: 10px !important;
    }
    .news-content {
  padding: 10px 25px 25px !important;
}
  .thumbnail-container img {
  width: 100% !important;
}
    .gallery{  padding-bottom: 10px !important;}
    
    
    
}




@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1200px;
  }
}


@media (max-width: 991px) {

 .head_contact{display: none;}

.menu-toggle{     
width: 40px;
  position: absolute;
  top: 25px;
  right: 20px;
  color: #0163a2;    
  }
.navbar {
  padding: 0;
}    
    
}




/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --background-color: #10058c;
}

.insidemain{position: relative; margin-top: 50px;}


/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Base menu styling */
.main-menu {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0;
}

.main-menu li {
  position: relative;
}

.main-menu a {
  display: block;
  padding: 0.5rem 1rem;
font-size: 1.1em;
}

/* --- Submenu (animated) --- */
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: white;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 1000;
  list-style: none;
  padding: 0.25rem 0;

  /* animation state (hidden) */
  transform-origin: top center;
  transform: scaleY(0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* prevent hover glitches while hidden */
  will-change: transform, opacity;
  transition:
    transform .22s ease-out,
    opacity .22s ease-out,
    visibility 0s linear .22s;
}

/* Staggered child items (hidden state) */
.submenu > li {
  opacity: 0;
  transform: translateY(-6px);
  transition: transform .22s ease-out, opacity .22s ease-out;
}

.submenu li a {
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

/* --- Show submenu on hover/focus (desktop & keyboard) --- */
@media (min-width: 992px) {
  .menu-item-has-children:hover > .submenu,
  .menu-item-has-children:focus-within > .submenu {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      transform .22s ease-out,
      opacity .22s ease-out,
      visibility 0s;
  }

  /* Stagger reveal of each child item */
  .menu-item-has-children:hover > .submenu > li,
  .menu-item-has-children:focus-within > .submenu > li {
    opacity: 1;
    transform: translateY(0);
  }
  .submenu > li:nth-child(1) { transition-delay: .02s; }
  .submenu > li:nth-child(2) { transition-delay: .05s; }
  .submenu > li:nth-child(3) { transition-delay: .08s; }
  .submenu > li:nth-child(4) { transition-delay: .11s; }
  .submenu > li:nth-child(5) { transition-delay: .14s; }
  .submenu > li:nth-child(6) { transition-delay: .17s; }
}

/* --- Mobile menu toggle button --- */
#mobile-menu {
  display: none;
  cursor: pointer;
  font-size: 1.6em;
  padding: 0.5rem;
}

/* --- Responsive (mobile) --- */
@media (max-width: 991.98px) {
  #mobile-menu { display: block; }
  .main-menu {
    flex-direction: column;
    display: none;
  }
  .main-menu.menu-open { display: flex; }

  /* Keep mobile simple & full-width; no absolute positioning */
  .menu-item-has-children .submenu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    transition: none;
  }
  .menu-item-has-children.submenu-open > .submenu {
    display: block;
  }
  /* Remove stagger on mobile */
  .submenu > li {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Navbar background and base text styling --- */
.navbar {}

.navbar .main-menu > li > a {
  color: white;
  padding: 0.75rem 1rem;
  text-decoration: none;
  display: block;
  transition: all 0.3s ease;
}

.navbar .main-menu > li > a:hover,
.navbar .main-menu > li > a:focus {
  color: #B9B9B9;
}

/* --- Submenu theme colors --- */
.navbar .submenu {
  background-color: #01385e; /* your existing color */
  color: #fff;
  border-radius: 5px;
}

/* Up arrow for dropdown (points up, sits under the hovered item) */
.navbar .submenu::before {
  content: "";
  position: absolute;
  top: -8px;               /* sit just above the box */
  left: 18px;              /* tweak to align under parent link */
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #01385e; /* same as submenu bg */
  filter: drop-shadow(0 -1px 0 rgba(0,0,0,.06));
  opacity: 0;
  transform: translateY(-4px);
  transition: transform .22s ease-out, opacity .22s ease-out;
}



/* Submenu link hovers */
.navbar .submenu a {
  color: white;
  padding: 0.5rem 1rem;
  display: block;
  transition: background-color .2s ease, color .2s ease;
}

.navbar .submenu a:hover {
  background-color: #045d96;
  color: #B9B9B9;
}


/* Show arrow when submenu opens */
@media (min-width: 992px) {
  .menu-item-has-children:hover > .submenu::before,
  .menu-item-has-children:focus-within > .submenu::before {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .02s;
    }  }
    
@media (max-width: 992px) {

.menu-open {margin: 15px 0;}   
.navbar .main-menu > li > a{padding: 0 !important;}
.navbar .submenu{background-color: transparent;}
.navbar .submenu a:hover{background-color: transparent;}
    
.navbar .submenu > li > a::before {
  content: "−"; /* arrow symbol */
  margin-right: 5px; /* space between arrow and text */
/* arrow color, can be changed */
}
    
    
}







/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .submenu,
  .submenu > li,
  .navbar .submenu::before {
    transition: none !important;
    transform: none !important;
  }
}






#hero-slider {
  margin-top: 0;
  position: relative;
  z-index: 1;
}

#hero-slider .carousel-item img {
  height: 85vh;
      width: 100%;
  object-fit: cover;
}

.carousel-caption {
  background-color: rgba(0, 0, 0, 0.7);
  padding: 1.5rem;
  border-radius: 0.5rem;
}

.carousel-caption h2,
.carousel-caption p {
  color: white;
}
@media (max-width: 680px) {
  #hero-slider .carousel-item img { height: 60vh;
      width: 100%;
  object-fit: cover;
    }   
}

@media (max-width: 680px) {
 #hero-slider .carousel-item img { height: 50vh;
      width: 100%;
  object-fit: cover;
    }
}

@media (max-width: 500px) {
  .carousel-caption {
    position: static !important;
    margin-top: 1rem;
    text-align: center;
    border-radius: 0;
    background-color: rgba(0, 0, 0, 0.6);
  }

  #hero-slider .carousel-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* Hide Bootstrap arrows */
.carousel-control-prev,
.carousel-control-next {
  display: none !important;
}

/* Position caption a bit above the bottom to make room for dots */
#hero-slider .carousel-caption {
  position: absolute;          /* overlay */
  left: 50%;
  transform: translateX(-50%);
  bottom: 32px;
  width: 60%;                  /* <-- 80% of parent */
  max-width: none;             /* remove previous cap */
  box-sizing: border-box;      /* include padding in that 80% */
font-size:1.2em;    
}
/* Optional: define once so you can tweak easily */
#hero-slider {
  --dot-active: #0075BF;   /* “dark white” (bright white) */
  --dot-inactive: #a9d5f0; /* slightly gray */
}
.carousel-indicators{margin-bottom: 0 !important;}
/* Base dot */
#hero-slider .carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--dot-inactive);
  opacity: 1;                          /* keep full opacity, color carries the state */
  margin: 0 5px;
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease;

}

/* Current (active) dot */
#hero-slider .carousel-indicators .active {
  background-color: var(--dot-active);
  transform: scale(1.4);
}



/* Keep arrows if you like them (no changes needed) */

/* Mobile: you already make caption static at <=500px.
   There we’ll keep dots in normal flow under the image/caption. */
@media (max-width: 500px) {
  #hero-slider .carousel-indicators {
    position: static;
    margin-top: 8px;
  }
}



.news-section {
                   padding: 0 0 40px 0;
        }
        
        .section-title {
            color: #0075BF;
            font-size: 2.5rem;
            font-weight: bold;
            text-align: center;
            margin-bottom: 50px;
        }
        
        .news-card {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }
        
        .news-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        .news-thumbnail {
            width: 100%;
            height: 200px;
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6c757d;
            font-size: 1.2rem;
            border-bottom: 1px solid #dee2e6;
        }
        
        .news-content {
            padding: 25px;
        }
        
        .news-title {
            color: #0075BF;
            font-size: 1.4rem;
            font-weight: bold;
            margin-bottom: 15px;
            line-height: 1.3;
			margin-top: 35px;
            font-family: Mukta;
        }
        
        .news-intro {
           color: #6c757d;
  font-size: 1.1em;
  line-height: 1.5em;
  margin-bottom: 10px;
        }
        
        .read-more-btn {
            background-color: #0075BF;
            border: none;
            color: white;
            padding: 10px 15px;     
            font-size: 0.9rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .read-more-btn:hover {
            background-color: #005a94;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 117, 191, 0.3);
			 color: white;
        }
        
        .container {
            max-width: 1200px;
        }



.gallery{background-image: linear-gradient(to right, #f7f7f7 , #D3D3D3); padding: 50px 0;}

       .gallery-section {
            margin-bottom: 10px;
        }
        
        .gallery-section:last-child {
            margin-bottom: 0;
        }
        
        .section-header {
            margin-bottom: 30px;
        }
        
        .section-title {
            color: #0075BF;
            font-size: 2rem;
            font-weight: bold;
            margin: 0;
        }
        
        .view-all-link {
            color: #0075BF;
            text-decoration: none;
            font-weight: 500;
            font-size: 1.1em;
        }
        
        .view-all-link:hover {
            color: #005a94;
            text-decoration: underline;
        }
        
        .thumbnail-container {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        
        .thumbnail-container:hover {
            transform: translateY(-5px);
        }
        
        .thumbnail-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .video-thumbnail {
            height: 250px;
        }
        
        .caption {
            color: #6c757d;
            font-size: 1.2em;
            margin-top: 8px;
            line-height: 1.4em;
        }
        
.caption a{color: #000;}

        .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 117, 191, 0.9);
            color: white;
            border: none;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s ease;
        }
        
        .play-button:hover {
            background: rgba(0, 117, 191, 1);
        }
        
        @media (max-width: 768px) {
            .section-title {
                font-size: 1.5rem;
            }
            
            .thumbnail-image {
                height: 150px;
            }
            
            .video-thumbnail {
                height: 180px;
            }
        }


.vertical-divider {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.vertical-divider::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #ccc;
  transform: translateX(-50%);
}





.inside_body{margin-top: 160px; background: #E8E8E8;}
@media (max-width: 991px) {
.inside_body{margin-top: 60px;
    }}
.col-8.main-col {
    flex: 0 0 calc(70% - 15px); /* Adjusts for gap */
    margin-right: 3%;
}

.col-4.sidebar {
    flex: 0 0 calc(27% - 15px); /* Adjusts for gap */
}


.inside_body p{font-family: "Mukta", sans-serif; font-size: 1.2em; line-height: 1.4em; margin-bottom: 18px;}
.inside_body
br, .inside_body p {
    margin-bottom: 15px;
    display: block;
}
.inside_page h1{color: #035185;}

.inside_body .featured-image{margin-bottom: 15px;}


.main-col{background: white;
  padding: 25px;
  border-radius: 10px;}



/*inside archive */



   
    
    /* News Cards Responsive Layout */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* Desktop: 3 cards per row for screens 1200px+ */
@media (min-width: 1200px) {
    .news-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet: 2 cards per row */
@media (min-width: 768px) and (max-width: 1199px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 1 card per row */
@media (max-width: 767px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
    
    .col-8.main-col {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }
    
    .col-4.sidebar {
        width: 100%;
        margin-top: 30px;
    }
    
    .container.inside_page .row {
        flex-direction: column;
    }
}

.news_card {
    width: 100%;
}

.news_card .card {
    height: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news_card .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.card-img {
    overflow: hidden;
}

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

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

.card-body {
    padding: 15px;
    flex-grow: 1;
}

.news_head {
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
}

.news_head a {
    color: #333;
    text-decoration: none;
    font-weight: 600;
}

.news_head a:hover {
    color: #007cba;
}

/* Pagination Styles */
.pagination-wrapper {
    margin: 40px 0;
    text-align: center;
}

.pagination {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 4px;
}

.pagination li {
    margin: 0 2px;
}

.pagination a,
.pagination span {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #007cba;
    transition: all 0.3s ease;
}

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

.pagination .current {
    background-color: #007cba;
    color: #fff;
    border-color: #007cba;
    font-weight: bold;
}

.pagination .dots {
    background: none;
    border: none;
    color: #999;
}

/* Sidebar Responsive */
@media (max-width: 991px) {
    .col-8.main-col,
    .col-4.sidebar {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
    
    
    
    
    
    











/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-image: linear-gradient(to right, #034d7e , #0075BF);

  font-size: 14px;
  position: relative;
    padding-bottom: 50px;
}

.footer .footer-top {
  padding-top: 50px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--heading-font);
  color: var(--heading-color);
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}
.footer h3{
	font-size: 1.5em;
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: inline-block;
  line-height: 1em;
font-size: 1.1em;    
}

.footer .footer-links ul a:hover {
  color: #fff;
}

.footer .footer-contact p {
  margin-bottom: 5px;
}


/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: #ff7a20 transparent #ff7a20 transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

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

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: #ff7926;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: #5a85aa;
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}




/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}


/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/

.page-header{
margin-top: 30px;  
background: url("../../images/hero-bg.svg");
background-size: cover;
}
.page-title{font-size: 2.0em;
  margin: 15px;
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;}
  .page-detail{margin: 30px 20px;}
    

  .page-detail, .page-detail p, .page-detail div{font-size: 1.1em;
   line-height: 1.5em;
    color: #3a3a3a;
    text-align: justify;}
.page-main{background: url("../../images/page-bg-shp.svg"); background-size: cover; background-position: bottom center;}
.page-container{background: #FFFFFF; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px;}  
.myspacer{width: 100%; float: left; padding: 30px 0;}

.pgloop{overflow: hidden; transition: all 0.5s;
  -webkit-transition: all 0.5s; }
.pgloop a{overflow: hidden; display: block;}
.pgloop img {transition: all 0.5s;
    -webkit-transition: all 0.5s;}
.pgloop:hover img{transform: scale(1.15);}


--------------------------------------------------------------*/
.custom-shape-divider-top-1732773954 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}



section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 100px;
  overflow: clip;
}

.intsyimg{text-align: right;}
.intsyimg img{border-radius: 50%; max-width: 100px; height: auto;}
.foot-logo img {max-width: 250px; margin-bottom: 150px; height: auto;}
@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

.grecaptcha-badge{display:none;}
    
/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/

.section-title {
  position: relative;
		font-size: 1.5em;
border-left: 1px solid #b3b3b3;
	padding-left: 10px; border-radius: 5px;
	width: 100%; float: left;
	text-align: left;
      font-family: "Mukta", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.news_setion_title
{
  padding-bottom: 0px;
	margin-bottom: 20px;
  font-family: "Mukta", sans-serif;
  font-weight: 500;
  font-style: normal;

}
.section-title span, .news_setion_title span{position: absolute; right: 5px; top: 0; font-size: 0.6em;}
.section-title span a, .news_setion_title span a{color: #0075bf; transition: color 0.2s ease-in-out;}
.section-title span a:hover, .news_setion_title span a:hover {color:#d93300; text-decoration: none;}

.section-title h2 {
  font-weight: 500;
  padding: 0;
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  position: relative;
}

.section-title div {
  color: #444;
  margin: 0;
  font-weight: 700;
  font-family: var(--heading-font);
}


.boxes .col-4 {
  border: 1px solid #DBDBDB;
  border-radius: 10px; 
  width: 30%; 
  margin-right: 5%; 
  position: relative; 
  text-align: center; 
  font-size: 1.5em; 
  color: #016db3; 
  padding-top: 60px;
  padding-bottom: 10px;
  margin-top: 30px;
  margin-bottom: 30px;
  box-shadow: 0 5px 5px rgb(196, 197, 198);
  font-family: "Anek Devanagari", sans-serif;
  
  /* Hover slide effect */
  transform: translateY(0);
  transition: all 0.3s ease;
  cursor: pointer;
}

@media (max-width: 576px) {
    .boxes .col-4{  width: 100%; }
}




.boxes .col-4:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 25px rgba(196, 197, 198, 0.8);
  border-color: #016db3;
}

/* Optional: Add smooth transition for the icon if you have one */
.boxes .col-4 .box_icon {
  transition: all 0.3s ease;
}

.boxes .col-4:hover .box_icon {
  transform: translateX(-50%) translateY(-5px);
}
.boxes .col-4:last-child {
  margin-right: 0;
}

.boxes .col-4 .box_icon {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: #016db3;
  border-radius: 50%;
  padding: 35px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
box-shadow: 0 2px 7px rgb(162, 162, 162);
    font-family: "Mukta", sans-serif;
}
.box_icon i{color:#FFFDFD; font-size: 1.2em;}






@media (min-width: 992px) and (max-width: 1100px) {
    .container {max-width: 1100px;}
}


@media (max-width: 999px) {
    .header{padding: 10px 0;} 
    .header .logo img {max-height: 70px;}
    .container{max-width: 900px;}
    .hero-img{width: 40%;}
    .hero-cont{width: 60%;}
    .hero h1{font-size: 3.0em;}
    .intpgbx1, .intpgbx2, .intpgbx3{width: 100%;}
    .icon-box figure{max-width: 100%; float: left; margin-left: 10px;}
    .icon-box figure img{max-width: 100%;}
    .beyolp {width: 24.6%;}
    .beyondbox h3{font-size: 1.1em;}
    .testimonial-item h3{font-size: 1.1em;}
    .testimonial-item{font-size: 1.0em;}
    .testimonial-item .row div{width: 100%;}
    .beyolp img{max-width: 100%;}
  }




@media (max-width: 640px) {
  .hero h1 {
 font-size: 2.7em;
line-height: 1.1em;;
  }

  .hero p {
    font-size: 1.0em;

    margin-bottom: 30px;
  }

  .hero .btn-get-started,
  .hero .btn-watch-video {
    font-size: 13px;
  }
}

.hero .hero-waves {
  display: block;
  width: 100%;
  height: 60px;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 3;
}

.hero .wave1 use {
  animation: move-forever1 10s linear infinite;
  animation-delay: -2s;
  fill: var(--default-color);
  opacity: 0.6;
}

.hero .wave2 use {
  animation: move-forever2 8s linear infinite;
  animation-delay: -2s;
  fill: var(--default-color);
  opacity: 0.4;
}

.hero .wave3 use {
  animation: move-forever3 6s linear infinite;
  animation-delay: -2s;
  fill: var(--default-color);
}

@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }

  100% {
    transform: translate(-90px, 0%);
  }
}

@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@keyframes move-forever3 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }

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

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about {
  padding-top: 100px;
}

.about .content h3 {
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  color: var(--accent-color);
  border-radius: 7px;
  display: inline-block;
}

.about .content h2 {
  font-weight: 700;
}

.about .content p:last-child {
  margin-bottom: 0;
}

.about .content .read-more {
  background: var(--accent-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 12px 24px;
  border-radius: 5px;
  transition: 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.about .content .read-more i {
  font-size: 18px;
  margin-left: 5px;
  line-height: 0;
  transition: 0.3s;
}

.about .content .read-more:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  padding-right: 19px;
}

.about .content .read-more:hover i {
  margin-left: 10px;
}

.about .icon-box {
  background-color: var(--surface-color);
  padding: 50px 40px;
  box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  transition: all 0.3s ease-out 0s;
}

.about .icon-box i {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 32px;
  line-height: 0;
  transition: all 0.4s ease-out 0s;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  color: var(--accent-color);
}

.about .icon-box h3 {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 700;
}

.about .icon-box p {
  margin-bottom: 0;
}

.about .icon-box:hover i {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.about .icon-boxes .col-md-6:nth-child(2) .icon-box,
.about .icon-boxes .col-md-6:nth-child(4) .icon-box {
  margin-top: -40px;
}

@media (max-width: 768px) {

  .about .icon-boxes .col-md-6:nth-child(2) .icon-box,
  .about .icon-boxes .col-md-6:nth-child(4) .icon-box {
    margin-top: 0;
  }
    .testimonial-item{max-width: 50%; margin: 0 auto;} 
     .testimonial-item h3 {font-size: 1.5em;}
    .sidebar-img{display: none;}
}

@media (max-width: 590px) {

     .testimonial-item{max-width: 80%; margin: 0 auto;}    
}

@media (max-width: 490px) {

    .testimonial-item{max-width: 100%; margin: 0 auto;}    
}

.sidebar{background:#c8c8c8;
  padding: 20px;
  border-radius: 5px;}
.sidebar h2{font-size: 1.6em; color:#035286;}


/* Sidebar News List Styles */
.sidebar-news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-news-item {
    margin-bottom: 20px;
    padding-bottom: 15px;
  border-bottom: 1px solid #b5b5b5;
}

.sidebar-news-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
/* Sidebar News List Styles */
.sidebar-news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-news-item {
    margin-bottom: 20px;
    padding-bottom: 15px;
      border-bottom: 1px solid #b7b7b7;

.sidebar-news-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Post Content Wrapper */
.post-content-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Thumbnail Styling */
.post-thumbnail {
    flex-shrink: 0;
    position: relative;
}

.post-thumbnail img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    margin-top: 10px;
}

/* Category Name Styling - Overlapping on thumbnail */
.post-category {

    font-size: 0.9em;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    background-color: rgb(2, 84, 137);
    padding: 3px 8px;
    border-radius: 3px;
    text-align: center;
    backdrop-filter: blur(2px);
    display: inline-block;
}


/* Post Details */
.post-details {
    flex: 1;
    min-width: 0; /* Prevents flex item from growing beyond container */
}

/* Post Title Link */
.post-title-link {
    color: #333;
    text-decoration: none;
    font-size: 1.3em;
    line-height: 1.4;
    font-weight: 500;
    display: block;
    transition: color 0.3s ease;
}

.post-title-link:hover {
    color: #0073aa; /* WordPress blue or your theme color */
    text-decoration: none;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .post-content-wrapper {
        gap: 10px;
    }
    
    .post-thumbnail img {
        width: 60px;
        height: 60px;
    }
    
    .post-title-link {
        font-size: 13px;
    }
    
    .post-category {
        font-size: 10px;
        padding: 2px 6px;
    }
}



/* Responsive adjustments */
@media (max-width: 480px) {
    .post-content-wrapper {
        gap: 10px;
    }
    
    .post-thumbnail img {
        width: 60px;
        height: 60px;
    }
    
    .post-title-link {
        font-size: 13px;
    }
    
    .post-category {
        font-size: 10px;
        padding: 2px 6px;
    }
}







/*--------------------------------------------------------------
# Details Section
--------------------------------------------------------------*/
.details .features-item {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.details .features-item+.features-item {
  margin-top: 100px;
}

@media (max-width: 640px) {
  .details .features-item+.features-item {
    margin-top: 40px;
  }
}

.details .features-item h3 {
  font-weight: 700;
  font-size: 26px;
}

.details .features-item ul {
  list-style: none;
  padding: 0;
}

.details .features-item ul li {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
}

.details .features-item ul li:last-child {
  padding-bottom: 0;
}

.details .features-item ul i {
  font-size: 20px;
  padding-right: 4px;
  color: var(--accent-color);
}

.details .features-item p:last-child {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Gallery Section
--------------------------------------------------------------*/
.gallery .gallery-item {
  overflow: hidden;
  border-right: 3px solid var(--background-color);
  border-bottom: 3px solid var(--background-color);
}

.gallery .gallery-item img {
  transition: all ease-in-out 0.4s;
}

.gallery .gallery-item:hover img {
  transform: scale(1.1);
}


/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .member {
  position: relative;
}

.team .member .pic {
  overflow: hidden;
  margin-bottom: 50px;
}

.team .member .member-info {
  background-color: var(--surface-color);
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  position: absolute;
  bottom: -50px;
  left: 20px;
  right: 20px;
  padding: 20px 15px;
  overflow: hidden;
  transition: 0.5s;
}

.team .member h4 {
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 16px;
  position: relative;
  padding-bottom: 10px;
}

.team .member h4::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 60%);
  bottom: 0;
  left: 0;
}

.team .member span {
  font-style: italic;
  display: block;
  font-size: 13px;
}

.team .member .social {
  position: absolute;
  right: 15px;
  bottom: 15px;
}

.team .member .social a {
  transition: color 0.3s;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.team .member .social a:hover {
  color: var(--accent-color);
}

.team .member .social i {
  font-size: 16px;
  margin: 0 2px;
}



@media (max-width: 992px) {
  .footer-newsletter{width: 50%; margin-top: 20px;}
}

@media (max-width: 767px) {
 
    .section-title{padding-bottom: 20px}
    .section-title div{font-size: 1.5em;}
    .icon-box figure{width: 100%; float: left; margin-left: 0;}
    .icon-box figure img{margin-bottom: 0;}
     .beyolp{width: 50%;} 
  
}
@media (max-width: 670px) {
    .hero-img img{position: absolute; bottom: -50px;}
}
@media (max-width: 670px) {
    .hero-img img{position: absolute; bottom: -130px;}
      .hero h1 {
          font-size: 1.9em;}
}

@media (max-width: 420px) {
    .footer-newsletter{width: 80%;}
        .hero-img img{position: absolute; bottom: -50px;}
     .beyolp{width: 100%;} 
  
    
}


    
    
    
    
    
    
    
    
 
    
    
    
    
    

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item+.info-item {
  margin-top: 40px;
}

.contact .info-item i {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}

.contact .info-item h3 {
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .info-item:hover i {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.contact .php-email-form {
  height: 100%;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 25%);
}