/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --default-font: "Open Sans", 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: "Roboto", sans-serif;
  --nav-font: 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";
  ;
}

/* 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: #fbfbfb;
  /* Background color for the entire website, including individual sections */
  --default-color: #364d59;
  /* Default color used for the majority of the text content across the entire website */
  --heading-color: #52565e;
  /* Color for headings, subheadings and title throughout the website */
  --accent-color: #00b594;
  /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff;
  /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant 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 {
  --body-color: #fafafa;
  --nav-color: rgba(255, 255, 255, 0.55);
  /* The default color of the main navmenu links */
  --nav-hover-color: #ffffff;
  /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff;
  /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #212529;
  /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #14967F;
  /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

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

/* For Webkit browsers (Chrome, Safari) */
::-webkit-scrollbar {
  width: 6px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
  /* Color when hovering over the thumb */
}

/* For Firefox */
* {
  scrollbar-width: thin;
  /* Use 'thin' for a thinner scrollbar */
  scrollbar-color: #888 #f1f1f1;
  /* Thumb color and track color */
}


::selection {
  background-color: #8c8788;
  /* Change this to your desired background color */
  color: #ffffff;
  /* Change this to your desired text color */
}

/* For WebKit browsers (Chrome, Safari, etc.) */
::-webkit-selection {
  background-color: #8c8788;
  /* Change this to your desired background color */
  color: #ffffff;
  /* Change this to your desired text color */
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
  cursor: pointer;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

.btngreen{
  background-color: var(--accent-color);
  border: solid var(--accent-color);
}

.btngreen:hover{
  background-color: var(--accent-color);
  border: solid var(--accent-color);
}
/*--------------------------------------------------------------
# logmieer Header
--------------------------------------------------------------*/
 
.logo img {
  height:60px;
max-width: 100%;

} 



/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {


    color: var(--default-color);
    transition: all 0.5s;
    z-index: 997;
    padding-top:5px ;
    padding-bottom: 5px;
background: rgb(250,250,255);
background: linear-gradient(90deg, rgba(250,250,255,1) 15%, rgba(187,247,236,1) 50%, rgba(250,250,255,1) 85%);
}

@media (max-width: 1060px) {
  .marquee-wrapper {
    display: none;
  }
}
.institute-name-div h6{
    color: #01143C;
    font-size: 15.2px !important;
}


/* @media (min-width: 1640px) {
  .header {
    padding: 5px 10%;
  }
} */

@media (max-width: 1157px) {
  .vertical-line{
display: none !important;
  }
}


.container-fluid {
  margin-right: 5px;
  width: auto;
}

@media (min-width:1059.99px) {
  .contact-marquee {
    display: none;
  }

  .impnews-marquee-mobile {
    display: none;

  }
}
/*Header text & logo*/
@media (max-width: 660px) {
  .institute-name-div h6 {
    font-size: 0.5rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .institute-name-div h5 {

    font-size: 0.9rem; /* smaller than usual heading */
  }

  .institute-name-div small {
    font-size: 0.5rem; /* keep your font size */
    line-height: 1.1;  /* reduce spacing between lines */
    display: block;    /* optional: ensures it behaves like a block element */
    margin: 0;         /* remove extra margin */
    padding: 0;        /* remove extra padding */
  }
}
@media (max-width: 414px) {
  .institute-name-div img,
  .logo-img {
    height: 56px !important;
  }
}

@media (max-width: 1060px) {
  .position-absolute.d-flex {
    display: none !important;
  }
}

@media (max-width: 414px) {
  .logo-img {
    height: 58px;
  }
}

/* Global Header on Scroll
------------------------------*/
/* .scrolled .header {
  --background-color: rgba(255, 255, 255, 0.95);
  --heading-color: #3c3c3c;
  --nav-color: #3c3c3c;
  --nav-hover-color: #3c3c3c;
} */

.admission-contact-popup {
  margin-top: -2.7%;
}

/* Only target the modal with the id 'admissionModal' */
#admissionModal .modal-dialog {
  position: absolute;
  max-width: 300px;
  right: 2%;
  top: 0;
  margin: 0;
  margin-top: -0.5%;
}

#admissionModal hr{
  margin: 0;
}



.navbar-div {
  display: inline-flex;
  position: fixed;
  top: 0; /* We'll override this with JS */
  background-color: #00B594;
  z-index: 996;
  width: 100%;
  align-items: center;
}




@media (max-width: 1253px) {
  .navmenu ul {
    
      flex-wrap: wrap; /* Allow items to wrap to the next line */
  }

  
}
.navmenu .dropdown .pdf-icon {
width: 20px;
margin-right: 7px;
}

.pdf-links-icon {
width: 14px !important;
height: auto;
margin-left: 5px;
}


.submenu-right {
position: absolute;
left: 100%;
top: 0%;
background-color: white;
list-style: none;
padding: 10x;
margin: 0;
width: 100px;
border: 1px solid #ccc;
z-index: 999; /* Ensure it's above the navbar */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add subtle shadow for visibility */
border-radius: 4px; /* Optional: for rounded corners */
}

/* Optional: Add hover effect for better interaction */
.navmenu .dropdown:hover .submenu-right {
display: block;
}


/* Desktop Navigation */
@media (min-width: 1060px) {
  .navmenu {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    max-height: 35px;
    margin-top: 0px;
    display: flex;
    /*min-height: 40px;*/
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;

  }

  .navmenu li {
    position: relative;

  }

  .navmenu>ul>li {
    white-space: nowrap;
    padding: 5px 7px;
  }

.navmenu > ul > li:not(:first-child) {
    border-left: 1px solid white;
}


  .navmenu a,
  .navmenu a:focus {
    color: var(--contrast-color);
    font-size: 14px;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
    /*text-shadow: 0 0 10px rgb(255, 255, 255);*/
    /* text-transform: uppercase; */
  }
  

@media (min-width: 1225px) {
  .navmenu a,
  .navmenu a:focus {
    font-size: 15.5px; /* Increase font size for screens wider than 1225px */
  }
}

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }


  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--accent-color);
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }

  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 100%;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--heading-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 5px 0;
    /* background: var(--nav-dropdown-background-color); */
    background: rgba(255, 255, 255, 0.92);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 132%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 3px;
    z-index: 99;
    box-shadow: 0px 0px 20px rgba(148, 148, 148, 0.321);
  }

  .navmenu .dropdown ul li {
    min-width: 150px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    font-weight: 400;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
    transition: ease-in-out 0.5s;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    transform: scale(1.05);
    color: #ffffff;
  }

  .navmenu .dropdown ul li:hover {
    background-color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }

  .navmenu .dropdown-content {
    /*display: none;*/
    position: absolute;
    background-color: rgba(252, 252, 252, 0.92);
    min-height: 400px;
    min-width: 900px;
    top: 100%;
    right: -35vw;
    border-radius: 3px;
    z-index: 99;
    justify-content: space-evenly !important;
    box-shadow: 0px 0px 20px rgba(148, 148, 148, 0.321);
    
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    transition-delay: 0.4s; /* Delay by default (mouse out) */
}

.navmenu .academicsdrop:hover .dropdown-content {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.1s; /* No delay when hovered */
}

  .navmenu .dropdown-content .side-heading {
    justify-content: center;
    width: 70px;
    padding: 5px;
  }

  .navmenu .dropdown-content .side-heading p {

    /* color: #364d59; */
    color: #3e5a6a;
    /* color: var(--accent-color); */
    font-weight: bold;
    font-family: "Exo 2", sans-serif;
    font-style: italic;
    font-size: 36px;
    transform: rotate(270deg);
    margin-top: 230px;
    margin-bottom: 0;
  }

  .navmenu .dropdown-content .col {
    flex: 1;
    padding: 20px;
    max-width: 400px;
  }

  .navmenu .dropdown-content .col .div-line {
    margin-top: 31px;
    width: 3px;
    height: 35px;
    margin-right: 5px;
    background-color: var(--accent-color);
    background-color: #3e5a6a;

  }

  .navmenu .dropdown-content .col h4 {
    padding-top: 30px;
    /* color:  #3e5a6a; */
    color: var(--accent-color);
    font-weight: bold;

  }

  .navmenu .dropdown-content .col a {
    padding: 6px 6px;
    padding-left: 15px;
    color: black;
    text-decoration: none;
    display: block;
  }

  .navmenu .dropdown-content .col a:hover {
    color: var(--accent-color);
    transform: scale(1.03);
  }

  .mobile-nav-toggle {
    display: none;
  }


}


@media (max-width: 1059.99px) {
  .header {
    z-index: 995;
  }

  .navbar-div {
    background-color: transparent;
  }

  .mobile-nav-toggle {
    color: rgb(106 105 105);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
    position: fixed;
    right: 1%;
    top: 1.4%;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 55px 10px 20px 10px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;

  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu li {
    border-bottom: 1px solid #d3d3d378;

  }

  .navmenu li:last-child,
  .navmenu li:last-child:focus {
    border-bottom: none;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 60px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: scaleY(-1);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #ffffff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }

  .logo img {
    max-height: 45px;
  }

  .nav-contact-detail p {
    display: none;
  }

}

@media (max-width: 1269px) {
  .number h5 {
      font-size: 1rem; /* Smaller font size for screens <= 1269px */
  }
}
.submenu{
  left: 100% !important;
}

@media(max-width:1059.99px) {

  .admission-contact-popup {
    display: none;
  }
}


  .contact-marquee {
    position: fixed;
    top: px;
    z-index: 995;
    background-color: #ffffffc4;
    font-size: 14px;
    scroll-behavior: smooth;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.80);
  }
  @media(max-width:360px) {
    .contact-marquee {
      top: 44px;
    }
  }
  @media (min-width: 361px) and (max-width: 414px) {
    .contact-marquee {
      top: 36px !important; /* Use !important if needed to override */
    }
  }
  /* 416px to 975px */
@media (min-width: 416px) and (max-width: 975px) {
  .contact-marquee {
    top: 57px !important;
  }
}
@media (min-width: 976px) {
  .contact-marquee {
    top: 63px !important;
  }
}

  .contact-marquee i {
    margin-right: 5px;
  }

  .impnews-marquee {
    display: none;
    font-weight:bold;
  }
/*marquee cintainer*/
@media (min-width: 361px) and (max-width: 414px) {
        .marquee-container a {
            font-size: 12px; /* Reduce font size */
        }
    }


  @media (max-width: 1059) {
    .impnews-marquee-mobile {
        position: fixed;
        display: block;
        top: 94px;
        right: 0;
        z-index: 994;
        background-color: #ffffffc4;
        font-size: 14px;
        font-weight: bold;
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.80);
        white-space: nowrap;
        overflow: hidden; /* Hide overflowing content */
        width: 100vw; /* Ensure it spans the full width */
    }
}

@media (max-width: 600) {
  .impnews-marquee-mobile {  
      top: 85px;
  }
}

@media (min-width:1060px) {
  .dropdown .dropdown-content-mobile {
    display: none !important;
  }


}

/* Backdrop for dropdown menu */
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.553);
  /* Semi-transparent background */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 98;
  /* One level below the dropdown menu */
}

/* Ensure backdrop is visible when any dropdown is hovered */
.navmenu a:hover + .backdrop,
.navmenu a:focus + .backdrop {
    opacity: 1;
    visibility: visible;
}


.nav-contact-detail p {
  color: var(--accent-color);
  padding: 0;
  margin: 0;
  text-align: right;
  font-size: 15px;
}

/* Mobile Navigation */
@media (max-width: 1059.99px) {
  .header {
    z-index: 995;
  }

  .navbar-div {
    background-color: transparent;
  }

  .mobile-nav-toggle {
    color: rgb(106 105 105);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
    position: fixed;
    right: 1%;
    top: 1.4%;
  }


  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 55px 10px 20px 10px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;

  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu li {
    border-bottom: 1px solid #d3d3d378;

  }

  .navmenu li:last-child,
  .navmenu li:last-child:focus {
    border-bottom: none;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 60px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: scaleY(-1);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #373b3e;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu > ul {
    display: block;
    position: absolute;
    top: 116px; /* adjust depending on your header height */
    left: 0;
    right: 0;
    background: #fff;
    z-index: 9999;
    padding: 20px 0;
    margin: 0;
}
header {
  z-index: 1000; /* make sure it's lower than 9999 */
  position: relative; /* or static */
}

  .logo img {
    max-height: 45px;
  }

  .nav-contact-detail p {
    display: none;
  }

}



.master-sidebar .accordion {
  --bs-accordion-border-color: rgb(255, 255, 255) !important;

}

.master-sidebar .accordion-button {
  padding: 12px 8%;
}



@media (max-width: 1041px) {
  .side-heading {
    display: none;
  }
}

/* ----------------Quick-links----------- */

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

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

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

}

.quick-links {
  position: relative;
  /* Ensure the parent has a relative position */
}

.quick-links .link-btn {
  position: fixed;
  right: -3%;
  padding-bottom: 10px;
  padding-top: 2px;
  z-index: 995;
  top: 55%;
  transform: rotate(-90deg);
  background: linear-gradient(130deg, #00B594 26%, #00B594 51%, #00B594 74%); /* Full gradient with #00B594 */
  background-size: 200% 150%;
  border: none;
  animation: colorChange 2.5s ease infinite;
  border-radius: 5px;
  box-shadow: 0 0 5px rgb(170, 169, 169);
  cursor: pointer;
}


.quick-links .btn-primary.focus,
.quick-links .btn-primary:focus,
.quick-links .btn-primary:active {
  border-color: transparent;
  box-shadow: none;
}

.quick-links .modal-dialog {
  top: 25%;
  margin-right: 0;
}

.quick-links .modal-header .close {
  position: relative;
  padding: 0;
  margin: 0;
  margin-right: 15px;
}

.quick-links .modal-body {
  padding: 0;
}

.quick-links .modal-content {

  max-width: 240px;
  float: right;
}

.quick-links ul {
  padding: 0;
}

.quick-links li {
  list-style-type: none;
  border-bottom: 1px solid gainsboro;
  padding: 5px 10px;
  margin-bottom: 0;
  color: var(--accent-color);
}

.quick-links li:nth-last-child(1) {
  border-bottom: none;
}

.quick-links li a {
  text-decoration: none;
  font-size: 16px;
  padding-bottom: 15px;
  color: var(--accent-color);
}


.quick-links li:hover {
  background-color: var(--accent-color);
  transform: scale(1);
}

.quick-links li:hover a {
  color: white
    /* Set your desired hover color */
}

@media (max-width:1099px) {
  .quick-links .link-btn {
    right: -4%;
    top: 53%;
  }
}

@media (max-width:899px) {
  .quick-links .link-btn {
    right: -5%;
    top: 53%;
  }
}

@media (max-width:699px) {
  .quick-links .link-btn {
    right: -7%;
    top: 53%;
  }
}

@media (max-width: 515px) {
  .quick-links .link-btn {
    right: -9%;
    top: 53%;
  }
}

@media (max-width:415px) {
  .quick-links .link-btn {
    right: -11.5%;
    top: 53%;
  }
}

/* Blinking animation */
@keyframes blinkEffect {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}
.quick-links-img {
  position: fixed;
  right: 18px;
  top: 75%;
  height: 70px; /* Increased from 60px to 75px */
  width: auto;
  z-index: 999;
  border-radius: 37px;
  background-color: #fff;
  padding: 4px;
  cursor: pointer;

  /* Animation */
  animation: pulseZoom 2s infinite ease-in-out;

  /* Static shadow */
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);

  transition: transform 0.3s ease;
}

@keyframes pulseZoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15); /* Increased from 1.1 to 1.15 */
  }
  100% {
    transform: scale(1);
  }
}

/* For screens with a width of 450px or smaller */
@media (max-width: 450px) {
    .quick-links-img {
        top: 84%; /* Position the image 82% from the top for smaller screens */
    }
}
/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  --background-color: #000000;
  --heading-color: var(--contrast-color);
  --default-color: var(--contrast-color);
  color: var(--default-color);
  background-color: var(--background-color);
  background: url("../img/college-front-image.jpeg") center no-repeat;
  background-size: cover;
  font-size: 14px;
  padding-bottom: 50px;
  position: relative;
}

.footer .container {
  position: relative;
}

.footer:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 13%);
  position: absolute;
  inset: 0;
}

.footer .footer-top {
  padding-top: 50px;
}

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

.footer .footer-about .logo img {
width:80%
}

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

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



.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  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: 5px;
  margin-left: 3px;
}

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

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

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

.footer .footer-links .arrow {
  padding: 8px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links .arrow i {
  font-size: 15px;
  font-weight: bold;
  color: var(--accent-color);
  text-align: 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: 1;
}

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

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

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

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 8px;
  align-self: center;
}

.footer .credits p {
  text-align: center;
  font-size: 13px;
}

.footer .credits .nextin-logo {
  height: 15px;
  margin: 0 2px 3px 0;
}

/*--------------------------------------------------------------
# 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: var(--accent-color) transparent var(--accent-color) 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: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

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

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  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-title {
  --background-color: #000000;
  --heading-color: var(--contrast-color);
  --default-color: var(--contrast-color);

  color: var(--default-color);
  background-color: var(--background-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 105px 0 60px 0;
  text-align: center;
  position: relative;
}

.page-title:before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 30%);
  position: absolute;
  inset: 0;
}

.page-title h1 {
  font-size: 56px;
  font-weight: 500;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.page-title .breadcrumbs ol li {
  color: var(--accent-color);
}

.page-title .breadcrumbs ol li a {
  color: #ffffff;
}


/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 92px;
  overflow: clip;
}

@media (max-width: 1059.99px) {

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

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  position: relative;
}

.section-title h2:before,
.section-title h2:after {
  content: "";
  width: 50px;
  height: 2px;
  background: var(--accent-color);
  display: inline-block;
}

.section-title h2:before {
  margin: 0 15px 10px 0;
}

.section-title h2:after {
  margin: 0 0 10px 15px;
}

.section-title p {
  margin-bottom: 0;
}

@media (max-width:425px) {

  .section-title h2 {
    font-size: 28px;
  }

  .section-title h2:before,
  .section-title h2:after {
    content: "";
    width: 30px;
    height: 2px;
    background: var(--accent-color);
    display: inline-block;
  }
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  --default-color: #ffffff;
  --background-color: #00000054;
  --heading-color: #ffffff;
  width: 100%;
  height: 95vh;
  position: relative;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 0;
}

.hero .info {
  position: absolute;
  margin-top: 50vh;
  inset: 0;
  z-index: 3;
}

.hero .info .container .row .col-lg-6 {
  background-image: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.5));
  border-radius: 15px;
  margin-left: -1%;
}


@media (max-width: 768px),
(max-height: 480px) {
  .hero .info {
    /* height: auto; */
    padding: 100px 50px 60px 50px;
  }
}

.hero .info h2 {
  margin-top: 10px;
  padding-bottom: 20px;
  font-size: 30px;
  font-weight: 700;
  position: relative;
  text-shadow: 0 0 10px black;
}

.hero .info h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 200px;
  height: 5px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  text-shadow: 0 0 10px black;
}

@media (max-width: 768px) {
  .hero {
    height: 86vh
  }

  .hero .info h2 {
    font-size: 30px;
  }
}

.hero .info p {
  margin-bottom: 10px;
  color: var(--contrast-color);
  font-size: 42px;
  font-weight: bold;
  line-height: 1.05;
  text-shadow: 0 0 10px black;
  font-family: "Exo 2", sans-serif;
  font-style: italic;
}

.hero .info p span {
  color: var(--contrast-color);
  font-size: 33px !important;
  font-weight: bold;

  font-style: italic;
}

.hero .info p span span {
  color: var(--accent-color);
  font-size: 48px !important;
  font-weight: bold;

}

.hero .info .btn-get-started {
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid var(--accent-color);
}

.hero .info .btn-get-started:hover {
  background: var(--accent-color);
}

.hero .carousel {
  inset: 0;
  position: absolute;
  overflow: hidden;
}

.hero .carousel-item {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  transition-duration: 0.4s;
}

.hero .carousel-item img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero .carousel-item::before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 30%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .carousel-control-prev {
  justify-content: start;
}

@media (min-width: 640px) {
  .hero .carousel-control-prev {
    padding-left: 25px;
  }
}

.hero .carousel-control-next {
  justify-content: end;
  margin-right: 15px;
}

@media (max-width: 640px) {
  .hero .carousel-control-next {
    margin-right: 0;
  }

  .hero .info h2 {
    font-size: 20px;
  }

  .hero .info p span {
    font-size: 19px !important;
    line-height: 0;
  }

  .hero .info p {
    margin-bottom: 7px;

    font-size: 24px;

  }
}

@media (max-width: 520px) {
  .hide-on-small-screens {
    display: none;
  }
}

.hero .carousel-control-next-icon,
.hero .carousel-control-prev-icon {
  background: none;
  font-size: 26px;
  line-height: 0;
  background: color-mix(in srgb, var(--default-color), transparent 80%);
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  border-radius: 50px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero .carousel-control-prev,
.hero .carousel-control-next {
  z-index: 3;
  transition: 0.3s;
}

.hero .carousel-control-prev:focus,
.hero .carousel-control-next:focus {
  opacity: 0.5;
}

.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover {
  opacity: 0.9;
}

.carousel-item video {
  object-fit: cover;
  width: 100%;
  height: 100%;

}


/*--------------------------------------------------------------
# notice panel Section
--------------------------------------------------------------*/

/* Notices */
.notice-panel {
  padding: 1px 1%;
  background-color: var(--accent-color);
}

.notices {
  display: flex;
  align-items: center;
  column-gap: 3rem;
  padding: 5px 1%;

}

.notice-slider .swiper-wrapper {
  align-items: center;
}

.notices h5 {
  font-weight: 600;
  font-size: 1.1rem;
  color: white;
}

.notices .slide-item {
  padding-right: 60px;
}

.notices .slide-item a {
  line-height: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #000000;
  /* text-shadow:0 0 10px rgb(46, 46, 46); */
}

.notices :is(.swiper-button-prev, .swiper-button-next) {
  color: var(--accent-color);
  background-color: white;
  border-radius: 10px;
  position: absolute;
  width: 21px;
  height: 21px;
  top: 80%;
  bottom: auto;
  right: 0;
}

.notices :is(.swiper-button-prev, .swiper-button-next) i {
  font-size: 21px;
  text-align: center;
  padding: 0;
  margin: 0;
  margin-top: 3%;
}

.notices .swiper-button-prev {
  right: 40px !important;
}

@media (min-width: 1600px) {
  .quality-education-inner .left-panel .panel-content {
    column-gap: 3rem;
  }

  .department .department-content {
    padding: 2.5rem 3rem;
    padding-right: 4rem;
  }

  .swiper-button-prev,
  .swiper-rtl .swiper-button-next {
    left: auto !important;
  }
}

@media (min-width: 992px) {
  .notices .notice-slider::before {
    content: '';
    position: absolute;
    right: 0;
    width: 70px;
    height: 100%;
    top: 0;
    z-index: 2;
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: 12px !important;
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
  }

  .swiper-button-prev,
  .swiper-rtl .swiper-button-next {
    left: auto !important;
  }
}

@media (max-width: 991.98px) {
  .notices {
    display: block !important;
    text-align: center;
  }

  .notices .slide-item a {
    line-height: 0;

  }

  .notices .slide-item {
    padding-right: 0;
    padding-bottom: 3rem;
    padding-top: 0;
  }

  .notices :is(.swiper-button-prev, .swiper-button-next) {
    bottom: 10%;
    top: auto;
    left: 50%;
  }

  .notices .swiper-button-prev {
    transform: translateX(-70%);
  }

  .notices .swiper-button-next {
    transform: translateX(70%);
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 12px !important;
  }
}


/*--------------------------------------------------------------
# Get Started Section
--------------------------------------------------------------*/
.get-started {
  margin-top: 30px;
  padding: 0;
      padding-bottom: 20px;
}

.get-started .content {
  padding: 20px 0;
}

.get-started .content h3 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 25px;
  padding-bottom: 25px;
  position: relative;
  font-family: "Exo 2", sans-serif;
  color: #3e5a6a
}

.get-started .content h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 4px;
  background: var(--accent-color);
  left: 0;
  bottom: 0;
}

.get-started h4 {
  font-size: 24px;
  text-align: left;
}

.get-started .content p {
  font-size: 20px;
}

.get-started .programs {
  text-align: center;
  padding-top: 3%;
}

.get-started .programs h4 {
  color: var(--accent-color);
}

.get-started .programs i {
  font-size: 22px;
  margin-bottom: 3px !important;
  color: #6c757d;
  cursor: pointer;
}

@media (max-width:480px) {
  .get-started h4 {
    font-size: 17.5px;
  }

}




/* get started link modal styles */
.get-started .modal-dialog {

   margin-top: 1%; 

}

.get-started .modal-content h2 {
  color: var(--accent-color);
  margin: 0;
}

.get-started .modal-content ul {
  padding-left: 5px;
}

.modal-content li {
  list-style: none;
  margin-bottom: 6px;
  font-size: 18px;
  transition: ease 0.3s;
  /* font-weight: bold; */
}

.modal-content ul hr {
  margin: 9px 0;
  margin-left: -3px;
}

.modal-content li:hover {
  transform: scale(1.05);
}


.get-started  .modal-content img {
  max-width: 230px;
}

@media (max-width:500px) {
  .modal-content li {
    font-size: 13.5px;
  }

 .get-started .modal-content img {
    max-width: 160px;
  }
}

.close {
  color: #a1a0a0;
  float: right;
  font-size: 30px;
  font-weight: bold;
  text-align: right;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


/*--------------------------------------------------------------
# mkission Section
--------------------------------------------------------------*/
.mission {
  padding: 2% 10%;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
}

.mission .img-fluid {
  height: 180px;
}

.mission .container {
  padding: 5% 10%;
  background-color: var(--nav-dropdown-background-color);
}

.mission .row+.row {
  margin-top: 40px;
}

.mission-text {
  align-content: center;
}

.mission h3 i {
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
  margin-right: 8px;
  color: #ec364b;
}

.mission h3 {
  font-weight: 700;
  font-size: 24px;
  text-transform: uppercase;
}

.mission ul {
  list-style: none;
  padding: 0;
}

.mission ul li {
  padding-bottom: 10px;
}

.mission ul i {
  font-size: 20px;
  padding-right: 4px;
  color: #ec364b;
}

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

@media (max-width:480px) {
  .mission {
    padding: 10% 5%;
    background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  }

  .mission .container {
    padding: 5%;
    background-color: var(--nav-dropdown-background-color);
  }

  .mission .img-fluid {
    height: 150px;
  }
}


/*--------------------------------------------------------------
# why-logmieer Section
--------------------------------------------------------------*/
.why-logmieer-text {
  padding-bottom: 20px;
  padding-top: 70px;
}

.why-logmieer-text h2 {
  text-align: right;
  font-weight: 700;
  font-size: 34px;
  color: var(--accent-color);
  padding-right: 5px;
  font-style: italic;
  font-family: 'Exo 2', sans-serif;
}

.why-logmieer-text h3 {
  padding: 10px 0;
  color: rgb(77, 76, 76);
  font-size: 22px;
}

@media (max-width:768px) {
  .why-logmieer-text h2 {
    font-size: 30px;
  }

  .why-logmieer-text h3 {
    font-size: 18px;
  }

  .why-logmieer-text .sub-points {
    font-size: 14px;
  }

  .why-logmieer-text .why-img {
    width: 120px;
  }
}

.why-logmieer-text .sub-points {
  text-align: right;
  color: var(--accent-color);
  padding-right: 5px;
}

.why-logmieer-text-details {
  display: flex;

}

.why-logmieer-text .why-img {
  width: 130px !important;
  height: 80%;
  margin-left: 10px;
}

.why-logmieer div div {
  justify-content: space-evenly;
  text-align: center;
}

.why-logmieer img {
  max-width: 110px;
}

.why-logmieer p {
  font-size: 16px;
  margin-top: 10px;
  font-weight: bold;
  line-height: 1.10;
}

/*--------------------------------------------------------------
# our-recruiters Section
--------------------------------------------------------------*/

/* Slick Slider */
.our-recruiters {
  padding: 0 7% !important;
}

.our-recruiters .customer-logos img {
  width: 140px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

.our-recruiters .customer-logos .slick-prev,
.our-recruiters .customer-logos .slick-next {
  position: absolute;
  top: 35%;
  font-size: 1.8rem;
}

.our-recruiters .customer-logos .slick-prev {
  left: 0;
}

.our-recruiters .customer-logos .slick-next {
  right: 0;
}

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir='rtl'] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

.our-recruiters .slide {
  transition: filter .4s;
  margin: 0 40px;
}

.fas {
  color: var(--accent-color);
}

@media (max-width: 768px) {
  .our-recruiters .customer-logos img {
    width: 100px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }
}

@media (max-width: 401px) {
  .our-recruiters .customer-logos img {
    width: 85px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/

.home-testimonials {
  text-align: center;
}

.home-testimonials .section-title{
  padding-bottom:20px;
}

.home-testimonials .nav-tabs {
  max-width: 290px;
  align-items: center;
  margin-left: auto;
  margin-right: auto
}

.home-testimonials .nav-tabs .nav-item {
  min-height: auto;
  padding-inline: .6rem;
}

.home-testimonials .nav-tabs .nav-item:first-child {
  padding-left: 0
}

.home-testimonials .nav-tabs .nav-item a {
  background: transparent;
  color: #9d9d9d;
  font-size: 1rem;
  font-weight: 600;
  width: auto;
  padding: .5rem 0;
  cursor: pointer;
}

.home-testimonials .nav-tabs .nav-item a.active {
  color: #000000
}

.home-testimonials .tab-content {
  margin-top: 2.5rem
}

.home-testimonials .swiper-slide {
  padding-bottom: 1rem;
}

.home-testimonials .testimonials-content {
  position: relative;
  padding: 2rem 1.5rem;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: visible;
  margin-top: 4rem
}

/* .home-testimonials .testimonials-content::before, .home-testimonials .testimonials-content::after{content:''; position: absolute;top: 0; height: 100%; border: 2px solid var(--color-prime-dark); z-index: -1; } */
.swiper-button-next:after,
.swiper-button-prev:after {
  display: none;
}

.home-testimonials .testimonials-content blockquote {
    font-size: 17px;
    font-family: var(--georgia-reg);
    font-style: italic;
    color: var(--color-prime-dark);
    margin-bottom: 0;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: auto;
}

.home-testimonials .testimonials-content figure {
  position: absolute;
  left: 46%;
  top: 0rem;
  transform: translate(calc(-50% + 1rem), -50%);
  text-align: center;
}

.testimonials-content .person-name {
  font-weight: 600;
  display: block;
  text-align: center;
  margin-bottom: 0;
  margin-top: -5px;
  padding-bottom: 60px;
}

.testimonials-content .designation {
  text-align: center;
  display: block;
  margin-bottom: 0.5rem;
}

.home-testimonials .testimonials-image {
  margin-bottom: 0;
  height: 100%;
  position: relative;
  z-index: 3;
}

figure.testimonials-image img {
  height: 200px;
  object-fit: contain;
  aspect-ratio: 1/1;
}

.testimonials-content .quote-footer {
  margin-top: 2rem;
}

@media (min-width:992px) {
  .home-testimonials .testimonials-content {
    margin-top: 0;
    height: 350px;
  }

  .home-testimonials .swiper :is(.swiper-button-prev.swiper-button-bottom, .swiper-button-next.swiper-button-bottom) {
    left: 30% !important;
    top: auto;
    bottom: -10px !important;
    font-size: 25px;
    color: var(--accent-color);
  }

  .home-testimonials .swiper :is(.swiper-button-next.swiper-button-bottom) {
    left: 35% !important;
  }

  .home-testimonials .swiper-slide {
    height: 300px;
    padding-top: 2rem;
    padding-bottom: 1rem;
  }

}

@media (max-width: 991.98px) {

  .placement-testimonials-container,
  .why_desktop {
    display: none;
  }

  .home-testimonials .nav-tabs {
    margin-top: 1rem;
  }

  .home-testimonials .swiper-button-prev,
  .swiper-button-next {
    bottom: 10%;
    font-size: 25px;
    color: var(--accent-color);
  }

  .home-testimonials .testimonials-content blockquote {
    font-size: 16px;
  }

  .home-testimonials {
    padding-bottom: 0 !important;
  }

}

@media (max-width:575px) {
  .home-testimonials {
    padding-bottom: 0 !important;
  }

  .home-testimonials .nav-tabs {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .home-testimonials .nav-tabs .nav-item {
    padding-inline: .3rem;
  }

  .home-testimonials .nav-tabs .nav-item a {
    font-size: 1.2rem;
  }

  .home-testimonials .tab-content {
    margin-top: 1.5rem
  }

  .home-testimonials .testimonials-content {
    margin-left: 2rem;
    margin-right: 2rem;
    max-height: 300px;
  }

  .testimonials-content .person-name {
    padding-bottom: 20px;
  }
}

/* @media screen {
  .home-testimonials .nav-tabs .nav-item a { font-size: .8rem;}
	.home-testimonials .testimonials-content { margin-left: 0rem;  margin-right: 0rem;}
	.home-testimonials .swiper-button-prev, .swiper-button-next { bottom: 3%;}
} */


/*--------------------------------------------------------------
# Recent Blog Posts Section
--------------------------------------------------------------*/
.recent-blog-posts .post-item {
  box-shadow: 0px 2px 20px color-mix(in srgb, var(--default-color), transparent 80%);
  transition: 0.3s;
}

.recent-blog-posts .post-item .post-img img {
  transition: 0.5s;
  width: 100%;
}

.recent-blog-posts .post-item .post-date {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  text-transform: uppercase;
  font-size: 13px;
  padding: 6px 12px;
  font-weight: 500;
}

.recent-blog-posts .post-item .post-content {
  padding: 30px;
}

.recent-blog-posts .post-item .post-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  transition: 0.3s;
  margin-bottom: 15px;
}

.recent-blog-posts .post-item .meta i {
  font-size: 16px;
  color: var(--accent-color);
}

.recent-blog-posts .post-item .meta span {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.recent-blog-posts .post-item hr {
  color: color-mix(in srgb, var(--default-color), transparent 80%);
  margin: 20px 0;
}

.recent-blog-posts .post-item .readmore {
  display: flex;
  align-items: center;
  font-weight: 600;
  line-height: 1;
  transition: 0.3s;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.recent-blog-posts .post-item .readmore i {
  line-height: 0;
  margin-left: 6px;
  font-size: 16px;
}

.recent-blog-posts .post-item:hover .post-title,
.recent-blog-posts .post-item:hover .readmore {
  color: var(--accent-color);
}

.recent-blog-posts .post-item:hover .post-img img {
  transform: scale(1.1);
}



@media (max-width:991px) {
  .recent-blog-posts {
    padding-top: 0;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .inner-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 30px 0;
  color: var(--accent-color);
}

@media (min-width: 991px) {
  .about .inner-title {
    max-width: 75%;
    margin: 0 0 50px 0;
  }
}

.about .our-story {
  padding: 5%;
  text-align: justify;
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
}

@media (min-width: 991px) {
  .about .our-story {
    min-width: 135%;
    padding-right: 15%;
  }
}

.about .our-story h4 {
  text-transform: uppercase;
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--default-color), transparent 50%);

}

.about .our-story h3 {
  font-size: 2.25rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

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

.about ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.about ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.about ul i {
  font-size: 1.25rem;
  margin-right: 0.5rem;
  line-height: 1.2;
  color: var(--accent-color);
}

.about .watch-video i {
  font-size: 2rem;
  transition: 0.3s;
  color: var(--accent-color);
}

.about .watch-video a {
  font-weight: 600;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-left: 8px;
  transition: 0.3s;
}

.about .watch-video:hover a {
  color: var(--accent-color);
}

.about .about-img {
  width: 30%;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 0 10px #6c757d;
}

@media (min-width: 992px) {
  .about .about-img {
    position: absolute;
    top: 0;
    right: 0;
    min-height: 500px;
    border-radius: 10px;
  }
}

.about .about-img img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  border-radius: 10px
}

@media screen {}

/*--------------------------------------------------------------
# Stats Counter Section
--------------------------------------------------------------*/
.stats-counter .stats-item {
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 92%);
  padding: 30px;
}

.stats-counter .stats-item i {
  color: var(--accent-color);
  font-size: 42px;
  line-height: 0;
  margin-right: 20px;
}
@media (max-width:585px){
    .stats-counter .stats-item i {
  margin-right: 0;
    }
}

.stats-counter .stats-item span {
  color: var(--heading-color);
  font-size: 36px;
  display: block;
  font-weight: 600;
}

.stats-counter .stats-item .d-flex div h1 {
  margin: 0;
  margin-left: 5px;
  margin-top: 2px;
  text-align: center;
}

.stats-counter .stats-item p {
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 16px;
}

/*--------------------------------------------------------------
# Alt Services 2 Section
--------------------------------------------------------------*/
.about-disciplines .features-image {
  position: relative;
  min-height: 400px;
}

.about-disciplines.features-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.about-disciplines h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--accent-color);
}

.about-disciplines .icon-box {
  margin-top: 30px;
}

.about-disciplines .icon-box i {
  color: var(--accent-color);
  margin-right: 15px;
  font-size: 24px;
  line-height: 1.2;
}

.about-disciplines .icon-box h4 {
  font-weight: 600;
  margin-bottom: 10px;
  font-size: 18px;

}

.about-disciplines .icon-box p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.about-disciplines ul {
  list-style: none;
  padding: 0;
  font-size: 14px;
  margin-left: 10px;
}

.about-disciplines ul li {
  margin-left: 7px;
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.about-disciplines ul i {
  font-size: 1.25rem;
  margin-right: 0.5rem;
  line-height: 1.2;
  color: var(--accent-color);
}

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

.team .member .member-img {

  border-radius: 30%;
  overflow: hidden;
  position: relative;
  /* aspect-ratio: 1/1; */
  width: 150px;
}



.team .member .member-img img {
  position: relative;
  z-index: 1;

}

.team .member .member-img .social {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  padding-bottom: 20px;
  transition: 0.3s;
  visibility: hidden;
  opacity: 0;
}

.team .member .member-img .social a {
  transition: 0.3s;
  color: var(--contrast-color);
  font-size: 20px;
  margin: 0 8px;
}

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

.team .member .member-info {
  margin-top: 30px;
}

.team .member .member-info h4 {
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 18px;
}

.team .member .member-info span {
  font-style: italic;
  display: block;
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 10px;
}

.team .member .member-info p {
  margin-bottom: 0;
  font-size: 14px;
}

.team .member:hover .member-img .social {
  padding-bottom: 0;
  visibility: visible;
  opacity: 1;
}


/*--------------------------------------------------------------
# Principal desk
--------------------------------------------------------------*/
.principal-desk .inner-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 30px 0;
  color: var(--accent-color);
}

@media (min-width: 991px) {
  .principal-desk .inner-title {
    max-width: 75%;
    margin: 0 0 50px 0;
  }

  .principal-desk .mob-inner-tittle h2 {
    display: none;
  }
}

.principal-desk .principal-msg {
  padding: 5%;
  text-align: justify;
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
}

@media (min-width: 991px) {
  .principal-desk .principal-msg {
    min-width: 135%;
    padding-right: 15%;
  }
}

.principal-desk .principal-msg h4 {
  /* text-transform: uppercase; */
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--default-color), transparent 50%);

}

.principal-desk .principal-msg h3 {
  font-size: 2.25rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.principal-desk .principal-msg p:last-child {
  margin-bottom: 0;
}


.principal-desk .about-img {
  width: 30%;
  position: relative;
  border-radius: 5px;
  box-shadow: 0 0 10px #6c757d;
}

@media (min-width: 992px) {
  .principal-desk .about-img {
    position: absolute;
    top: 0;
    right: 0;
    min-height: 300px;
    border-radius: 10px;
  }
}

.principal-desk .about-img img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  z-index: 1;
  border-radius: 10px
}

.principal-msg h4 {
  color: #444444 !important;
}

.principal-msg p {
  font-size: 13px;
  text-indent: 40px;
}

@media (max-width:991.98px) {
  .principal-desk .about-img {
    width: 30%;
    min-width: 130px;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 0 10px #6c757d;
  }

  .principal-desk .about-img img {
    position: relative;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 1/1;
    z-index: 1;
    border-radius: 10px
  }

  .principal-desk .mob-inner-tittle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 1% 8%;
  }

  .principal-desk .mob-inner-tittle h2 {
    font-size: 2rem;
    font-weight: 700;
    white-space: pre;
    color: var(--accent-color);

  }

  .principal-desk .inner-title {
    display: none;
  }
}

/*--------------------------------------------------------------
# Features Cards Section
--------------------------------------------------------------*/
.features-cards h3 {
  font-size: 20px;
  font-weight: 700;
}

.features-cards p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.features-cards ul li {
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-top: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.features-cards ul li i {
  font-size: 16px;
  color: var(--accent-color);
  margin-right: 6px;
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}

.service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

.service-details .services-list a:hover {
  border-color: var(--accent-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

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

.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Project Details Section
--------------------------------------------------------------*/
.project-details .portfolio-details-slider img {
  width: 100%;
}

.project-details .swiper-wrapper {
  height: auto;
}

.project-details .swiper-button-prev,
.project-details .swiper-button-next {
  width: 48px;
  height: 48px;
}

.project-details .swiper-button-prev:after,
.project-details .swiper-button-next:after {
  color: rgba(255, 255, 255, 0.8);
  background-color: rgba(0, 0, 0, 0.15);
  font-size: 24px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.project-details .swiper-button-prev:hover:after,
.project-details .swiper-button-next:hover:after {
  background-color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 575px) {

  .project-details .swiper-button-prev,
  .project-details .swiper-button-next {
    display: none;
  }
}

.project-details .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.project-details .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.project-details .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.project-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.project-details .portfolio-info h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  bottom: 0;
}

.project-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.project-details .portfolio-info ul li {
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
}

.project-details .portfolio-info ul strong {
  text-transform: uppercase;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.project-details .portfolio-info .btn-visit {
  padding: 8px 40px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50px;
  transition: 0.3s;
}

.project-details .portfolio-info .btn-visit:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.project-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.project-details .portfolio-description p {
  padding: 0;
}

.project-details .portfolio-description .testimonial-item {
  padding: 30px 30px 0 30px;
  position: relative;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  margin-bottom: 50px;
}

.project-details .portfolio-description .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50px;
  border: 6px solid var(--background-color);
  float: left;
  margin: 0 10px 0 0;
}

.project-details .portfolio-description .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 15px 0 5px 0;
  padding-top: 20px;
}

.project-details .portfolio-description .testimonial-item h4 {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
}

.project-details .portfolio-description .testimonial-item .quote-icon-left,
.project-details .portfolio-description .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 50%);
  font-size: 26px;
  line-height: 0;
}

.project-details .portfolio-description .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.project-details .portfolio-description .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.project-details .portfolio-description .testimonial-item p {
  font-style: italic;
  margin: 0 0 15px 0 0 0;
  padding: 0;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/

.contact .map {
  min-height: 45vh;
}

.contact .info-item {
  height: 100%;
  padding: 20px 0 30px 0;
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

.contact .info-item i {
  color: var(--accent-color);
  width: 56px;
  height: 56px;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  border: 2px dotted color-mix(in srgb, var(--accent-color), transparent 40%);
}

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

.contact .info-item p {
padding: 2px 4%;
    margin-bottom: 0;
    font-size: 14px;
    text-align: justify;
}

.contact .php-email-form {
  height: 100%;
  padding: 30px;
  box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}

.contact .php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.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: 4px;
}

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

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

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

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts article {
  box-shadow: 0px 2px 20px color-mix(in srgb, var(--default-color), transparent 90%);
  transition: 0.3s;
}

.blog-posts .post-img img {
  transition: 0.5s;
}

.blog-posts .post-date {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  position: absolute;
  right: 0;
  bottom: 0;
  text-transform: uppercase;
  font-size: 13px;
  padding: 6px 12px;
  font-weight: 500;
}

.blog-posts .post-content {
  padding: 30px;
}

.blog-posts .post-title {
  font-size: 20px;
  color: var(--heading-color);
  font-weight: 700;
  transition: 0.3s;
  margin-bottom: 15px;
}

.blog-posts .meta i {
  font-size: 16px;
  color: var(--accent-color);
}

.blog-posts .meta span {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-posts p {
  margin-top: 20px;
}

.blog-posts hr {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-bottom: 15px;
}

.blog-posts .readmore {
  display: flex;
  align-items: center;
  font-weight: 600;
  line-height: 1;
  transition: 0.3s;
  color: color-mix(in srgb, var(--heading-color), transparent 20%);
}

.blog-posts .readmore i {
  line-height: 0;
  margin-left: 6px;
  font-size: 16px;
}

.blog-posts article:hover .post-title,
.blog-posts article:hover .readmore {
  color: var(--accent-color);
}

.blog-posts article:hover .post-img img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Blog Pagination Section
--------------------------------------------------------------*/
.blog-pagination {
  padding-top: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-pagination ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.blog-pagination li {
  margin: 0 5px;
  transition: 0.3s;
}

.blog-pagination li a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-pagination li a.active,
.blog-pagination li a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.blog-pagination li a.active a,
.blog-pagination li a:hover a {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
  padding-bottom: 30px;
}

.blog-details .article {
  padding: 30px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog-details .title {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-details .content {
  margin-top: 20px;
}

.blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog-details .content blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog-details .content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--accent-color);
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog-details .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-details .meta-top ul li+li {
  padding-left: 20px;
}

.blog-details .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .meta-bottom i {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline;
}

.blog-details .meta-bottom a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}

.blog-details .meta-bottom a:hover {
  color: var(--accent-color);
}

.blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog-details .meta-bottom .cats li {
  display: inline-block;
}

.blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog-details .meta-bottom .tags li {
  display: inline-block;
}

.blog-details .meta-bottom .tags li+li::before {
  padding-right: 6px;
  color: var(--default-color);
  content: ",";
}

.blog-details .meta-bottom .share {
  font-size: 16px;
}

.blog-details .meta-bottom .share i {
  padding-left: 5px;
}

/*--------------------------------------------------------------
# Blog Author Section
--------------------------------------------------------------*/
.blog-author {
  padding: 10px 0 40px 0;
}

.blog-author .author-container {
  padding: 20px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-author img {
  max-width: 120px;
  margin-right: 20px;
}

.blog-author h4 {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 0px;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-author .social-links {
  margin: 0 10px 10px 0;
}

.blog-author .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-right: 5px;
}

.blog-author p {
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
  padding: 10px 0;
}

.blog-comments .comments-count {
  font-weight: bold;
}

.blog-comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog-comments .comment .comment-img {
  margin-right: 14px;
}

.blog-comments .comment .comment-img img {
  width: 60px;
}

.blog-comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}

.blog-comments .comment h5 a {
  font-weight: bold;
  color: var(--default-color);
  transition: 0.3s;
}

.blog-comments .comment h5 a:hover {
  color: var(--accent-color);
}

.blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-comments .comment h5 .reply i {
  font-size: 20px;
}

.blog-comments .comment time {
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 5px;
}

.blog-comments .comment.comment-reply {
  padding-left: 40px;
}

/*--------------------------------------------------------------
# Comment Form Section
--------------------------------------------------------------*/
.comment-form {
  padding-top: 10px;
}

.comment-form form {
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.comment-form form h4 {
  font-weight: bold;
  font-size: 22px;
}

.comment-form form p {
  font-size: 14px;
}

.comment-form form input {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  font-size: 14px;
  border-radius: 4px;
  padding: 10px 10px;
}

.comment-form form input:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.comment-form form textarea {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
  height: 120px;
}

.comment-form form textarea:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.comment-form form .form-group {
  margin-bottom: 25px;
}

.comment-form form .btn-primary {
  border-radius: 4px;
  padding: 10px 20px;
  border: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.comment-form form .btn-primary:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
  padding: 30px;
  margin: 60px 0 30px 0;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.widget-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.widget-item {
  margin-bottom: 40px;
}

.widget-item:last-child {
  margin-bottom: 0;
}

.search-widget form {
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  padding: 3px 10px;
  position: relative;
  transition: 0.3s;
}

.search-widget form input[type=text] {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  width: calc(100% - 40px);
  background-color: var(--background-color);
  color: var(--default-color);
}

.search-widget form input[type=text]:focus {
  outline: none;
}

.search-widget form button {
  background: var(--accent-color);
  color: var(--contrast-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size: 16px;
  padding: 0 15px;
  margin: -1px;
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
  line-height: 0;
}

.search-widget form button i {
  line-height: 0;
}

.search-widget form button:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.search-widget form:is(:focus-within) {
  border-color: var(--accent-color);
}

.categories-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.categories-widget ul li {
  padding-bottom: 10px;
}

.categories-widget ul li:last-child {
  padding-bottom: 0;
}

.categories-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.categories-widget ul a:hover {
  color: var(--accent-color);
}

.categories-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.recent-posts-widget .post-item {
  display: flex;
  margin-bottom: 15px;
}

.recent-posts-widget .post-item:last-child {
  margin-bottom: 0;
}

.recent-posts-widget .post-item img {
  width: 80px;
  margin-right: 15px;
}

.recent-posts-widget .post-item h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.recent-posts-widget .post-item h4 a {
  color: var(--default-color);
  transition: 0.3s;
}

.recent-posts-widget .post-item h4 a:hover {
  color: var(--accent-color);
}

.recent-posts-widget .post-item time {
  display: block;
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.tags-widget {
  margin-bottom: -10px;
}

.tags-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tags-widget ul li {
  display: inline-block;
}

.tags-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0 6px 8px 0;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
  display: inline-block;
  transition: 0.3s;
}

.tags-widget ul a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 1px solid var(--accent-color);
}

.tags-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 14px;
}