/**
* Template Name: Mentor
* Template URL: https://bootstrapmade.com/mentor-free-education-bootstrap-theme/
* Updated: Jun 06 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
: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: "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: #37423b; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #5fcf80; /* 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 {
  --nav-color: #272828;  /* The default color of the main navmenu links */
  --nav-hover-color: #5fcf80; /* 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: #272828; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #5fcf80; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/*--------------------------------------------------------------
# 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;
}

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);
}
/*--------------------------------------------------------------
# Start Css Here
--------------------------------------------------------------*/




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


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

@media (max-width: 1199px) {

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


/*--------------------------------------------------------------
# Start Css Here
--------------------------------------------------------------*/
  
/*--------------------------------------------------------------
////////////////////////////////////////////////////////////////          header1transp.css
--------------------------------------------------------------*/
.header {
    color: white ;/*  var(--default-color); */
 
    padding: 10px 0;
    transition: all 0.5s;
    z-index: 997;
    position: fixed;
    width: 100%;
}

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

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

.header .logo h1 {
    font-weight: 700;
    font-size: 30px;
    margin: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent-color);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
    color: var(--contrast-color);
    background: var(--accent-color);
    font-size: 14px;
    padding: 8px 25px;
    margin: 0 0 0 30px;
    border-radius: 50px;
    transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
    color: var(--contrast-color);
    background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 1200px) {
    .header .logo {
        order: 1;
    }

    .header .btn-getstarted {
        order: 2;
        margin: 0 15px 0 0;
        padding: 6px 15px;
    }

    .header .navmenu {
        order: 3;
    }
}

.scrolled .header {
    box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 85%);
    background-color: white;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
    .navmenu {
        padding: 0;
    }

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

    .navmenu li {
        position: relative;
    }
    :root{
        --nav-color:white;
    }

    .navmenu a,
    .navmenu a:focus {
        color: var(--nav-color);
        padding: 18px 15px;
        font-size: 16px;
        font-family: var(--nav-font);
        font-weight: 400;
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
        transition: 0.3s;
    }

        .scrolled .navmenu a,
           .scrolled .navmenu a:focus {
                /* color: var(--nav-color); */
                color: black;

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

    .navmenu li:last-child a {
        padding-right: 0;
    }

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

    .navmenu .dropdown ul {
        margin: 0;
        padding: 10px 0;
        background: var(--nav-dropdown-background-color);
        display: block;
        position: absolute;
        visibility: hidden;
        left: 14px;
        top: 130%;
        opacity: 0;
        transition: 0.3s;
        border-radius: 4px;
        z-index: 99;
        box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
    }

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

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

    .navmenu .dropdown ul a i {
        font-size: 12px;
    }

    .navmenu .dropdown ul a:hover,
    .navmenu .dropdown ul .active:hover,
    .navmenu .dropdown ul li:hover>a {
        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 - Mobile */
@media (max-width: 1199px) {
    .mobile-nav-toggle {
        color: var(--nav-color);
        font-size: 28px;
        line-height: 0;
        margin-right: 10px;
        cursor: pointer;
        transition: color 0.3s;
    }

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

    .navmenu ul {
        display: none;
        position: absolute;
        inset: 60px 20px 20px 20px;
        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 a i,
    .navmenu a:focus i {
        font-size: 12px;
        line-height: 0;
        margin-left: 5px;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        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: rotate(180deg);
    }

    .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: #fff;
        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;
    }
}
/*--------------------------------------------------------------
////////////////////////////////////////////////////////////////          header1transp.css
--------------------------------------------------------------*/

/*--------------------------------------------------------------
////////////////////////////////////////////////////////////////          herosec1.css
--------------------------------------------------------------*/
.hero {
    --default-color: #ffffff;
    --background-color: #000000;
    --heading-color: #ffffff;
    width: 100%;
    height: 100vh;
    position: relative;
    padding: 80px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--default-color);
}

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

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

.hero .container {
    position: relative;
    z-index: 3;
}

.hero h2 {
    margin: 0;
    font-size: 48px;
    font-weight: 700;
}

.hero p {
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    margin: 10px 0 0 0;
    font-size: 24px;
}

.hero .btn-get-started {
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 8px 35px 10px 35px;
    border-radius: 50px;
    transition: 0.4s;
    margin-top: 30px;
    border: 2px solid var(--default-color);
    color: var(--default-color);
}

.hero .btn-get-started:hover {
    background: var(--accent-color);
    border: 2px solid var(--accent-color);
}

@media (max-width: 768px) {
    .hero h2 {
        font-size: 32px;
    }

    .hero p {
        font-size: 18px;
    }
}
/*--------------------------------------------------------------
////////////////////////////////////////////////////////////////          herosec1.css

--------------------------------------------------------------*/
.section-title{
    text-align: center;
 margin-bottom: 20px;
    font-size: 25px;
}
.section-title h2{
    font-size: 32px;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 10px;
    text-align: center;
}
/*--------------------------------------------------------------
////////////////////////////////////////////////////////////////          aboutsec1.css
--------------------------------------------------------------*/
.about .content h3 {
    font-size: 2rem;
    font-weight: 700;
}

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

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

.about .content ul i {
    font-size: 1.25rem;
    margin-right: 4px;
    color: var(--accent-color);
}

.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: 15px;
    letter-spacing: 1px;
    padding: 10px 24px 12px 24px;
    border-radius: 50px;
    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;
}
/*--------------------------------------------------------------
////////////////////////////////////////////////////////////////          aboutsec1.css
--------------------------------------------------------------*/
/*--------------------------------------------------------------
////////////////////////////////////////////////////////////////          counter.css
--------------------------------------------------------------*/
.counts {
    --background-color:color-mix(in srgb, #81fe8f, transparent 72%);
    padding: 25px 0;
}

.counts .stats-item {
    padding: 30px;
    width: 100%;
}

.counts .stats-item span {
    font-size: 48px;
    display: block;
    color: var(--accent-color);
    font-weight: 700;
}

.counts .stats-item p {
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    padding: 0;
    margin: 0;
    font-family: var(--heading-font);
    font-size: 15px;
    font-weight: 600;
}
/*--------------------------------------------------------------
////////////////////////////////////////////////////////////////          counter.css
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Events Section
--------------------------------------------------------------*/
.cards-i .card {
    border: 0;
    padding: 0 30px;
    margin-bottom: 60px;
    position: relative;
}

.cards-i .card-img {
    width: calc(100% + 60px);
    margin-left: -30px;
    overflow: hidden;
    z-index: 9;
    border-radius: 0;
}

.cards-i .card-img img {
    max-width: 100%;
    transition: all 0.3s ease-in-out;
}

.cards-i .card-body {
    z-index: 10;
    background: var(--background-color);
    border-top: 4px solid var(--background-color);
    /* padding: 30px; */
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
    margin-top: -60px;
    transition: 0.3s;
}

.cards-i .card-title {
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}

.cards-i .card-title a {
    color: var(--default-color);
    transition: 0.3s;
}

.cards-i .card-text {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.cards-i .card:hover img {
    transform: scale(1.1);
}

.cards-i .card:hover .card-body {
    border-color: var(--accent-color);
}

.cards-i .card:hover .card-body .card-title a {
    color: var(--accent-color);
}
/*--------------------------------------------------------------
////////////////////////////////////////////////////////////////          calenderevents cel1.css
--------------------------------------------------------------*/
.events{
    background-color: color-mix(in srgb, var(--default-color), transparent 96%);
}

.event-item {
  padding: 5px;
  margin:0px 0px 5px 0px;
  max-height: 110px;
 min-width:50%;
 max-width:50%;
    /* shadow */
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}
.events .content h3{
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.event-item:hover {
  border-radius: 2px;
  background-color: #e8e8e886;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}
.event-meta-data {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-size: 14px;
  margin-right: 10px;
  text-transform: uppercase;
  color: var(--accent-color);
  text-align: center;
  border: 4px solid var(--accent-color);
  padding: 5px;
  height: 100%;
}
 
.event-meta-icon {
  border-top: 1px solid var(--accent-color);
}

.event-content-text{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
    margin-top: 10px;
        display: -webkit-box;
    -webkit-line-clamp: 4; /* Adjust this value to limit the number of lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
 
}

/* responsive design */
@media (max-width: 768px) {
  .event-item {
    min-width: 100%;
  }
}




 /*--------------------------------------------------------------
////////////////////////////////////////////////////////////////          calenderevents cel1.css
--------------------------------------------------------------*/
/*--------------------------------------------------------------
////////////////////////////////////////////////////////////////          cards.css
--------------------------------------------------------------*/
.cards .card-item {
    border-radius: 5px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.cards .card-content {
    padding: 15px;
}

.cards .card-content h3 {
    font-weight: 700;
    font-size: 20px;
}

.cards .card-content h3 a {
    color: var(--heading-color);
    transition: 0.3s;
}

.cards .card-content h3 a:hover {
    color: var(--accent-color);
}

.cards .card-content .category {
    background: var(--accent-color);
    color: var(--contrast-color);
    font-size: 14px;
    padding: 6px 14px;
    margin: 0;
    border-radius: 5px;
}

.cards .card-content .date {
    margin: 0;
    font-weight: 600;
     
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.cards .card-content .description {
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
}
#services-cards  img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16/9;
}


/*--------------------------------------------------------------
////////////////////////////////////////////////////////////////          cards.css
--------------------------------------------------------------*/
/*--------------------------------------------------------------
////////////////////////////////////////////////////////////////          team
--------------------------------------------------------------*/
  .team-section .team-card{
    width: 100%;
    max-width: 300px;
    height:400px ;
   
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 65px;
    border: 0.5px solid color-mix(in srgb, var(--default-color), transparent 90%);

    background-color: #e6e6e62d;
    
} 
.team-card:hover{
    transition: 0.8s;
    background-color: #e6e6e6;
}

.team-card:hover .team-name{
    color: var(--accent-color);
}
.service-card{
height: 400px;
    width: 100%;
    max-width: 400px;
    background-color: white;
    margin: 0px 10px 35.0px 10px ;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}
p.service-detail{
    margin: 9px 0;
    max-lines: 4;
      
        overflow: hidden;
}
.team-name ,.service-name{
    display: block;
    font-size: 30px;
    font-weight: 600;
 position: relative;
 
}
.icon-holder{
    height:70px;
    width: 70px;
    text-align: center;
    border: 3px solid var(--accent-color);
    background-color: var(--accent-color);
    outline: 7px solid white    ;
        outline-offset: -9px;
        transition: width 1s, height 1s;
}

.service-card:hover .icon-holder {
height: 80px;
    width: 80px;
transition: width 1s, height 1s;
border: 3px solid var(--accent-color);
    background-color: var(--accent-color-light);
    outline: 7px solid white;



}
.service-card:hover .service-name{
    color: var(--accent-color);
transition: color 1s;
}
.icon-holder i {
    font-size: 30px;
    transition: font-size 1s;
    color:white; 
}

.service-card:hover .icon-holder i {
    font-size: 30px;
    
    transition: font-size 0.5s;
    color: var(--accent-color);
}



.team-position {
    font-size: 16px;
    margin: 3px;

}
.social-icon{
margin: 0px 5px;
}

 .team-section  .section-title{
    color: var(--nrn-secondary);
 }

@media (min-width:992px) {
.height-100 {
        min-height: 104vh;
    }
}

.team-card .holder {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 140px;
}

.team-member-img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    object-position: center;
}

.professional-modal .profile-image-wrapper {
    height: 400px;
    overflow: hidden;
}

.professional-modal .profile-image-wrapper img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
}

 
.team-card {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.professional-modal .modal-content {
    border-radius: 15px;
    overflow: hidden;
}

.professional-modal .profile-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.professional-modal .profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.professional-modal .social-overlay {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
}

.professional-modal .social-overlay .social-icon {
    color: white;
    background: rgba(0,0,0,0.5);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.professional-modal .social-overlay .social-icon:hover {
    background: rgba(0,0,0,0.7);
}

.professional-modal .description-section {
    border-top: 1px solid #e9ecef;
    padding-top: 15px;
    margin-top: 15px;
}
 
/*--------------------------------------------------------------
////////////////////////////////////////////////////////////////          gallery1.css
--------------------------------------------------------------*/
 
.gallery-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16/9;


}
/*--------------------------------------------------------------
////////////////////////////////////////////////////////////////          gallery1.css
--------------------------------------------------------------*/
#maps{

    background-color: #81fe9067;
}

/*--------------------------------------------------------------
////////////////////////////////////////////////////////////////          footer1.css
--------------------------------------------------------------*/
.footer {
    color: var(--default-color);
    background-color: color-mix(in srgb, var(--default-color), transparent 97%);
    font-size: 14px;
    padding-bottom: 5px;
    position: relative;
}

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

.footer .footer-about .logo {
    margin-bottom: 0;
}

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

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

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

.footer .footer-newsletter .newsletter-form {
    margin-top: 30px;
    padding: 6px 8px;
    position: relative;
    border-radius: 50px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
    display: flex;
    background-color: var(--background-color);
    transition: 0.3s;
}

.footer .footer-newsletter .newsletter-form:focus-within {
    border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type=email] {
    border: 0;
    padding: 4px 8px;
    width: 100%;
    background-color: var(--background-color);
    color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
    outline: none;
}

.footer .footer-newsletter .newsletter-form input[type=submit] {
    border: 0;
    font-size: 16px;
    padding: 0 20px 2px 20px;
    margin: -7px -8px -7px 0;
    background: var(--accent-color);
    color: var(--contrast-color);
    transition: 0.3s;
    border-radius: 50px;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .footer-newsletter .error-message {
    display: none;
    background: #df1529;
    color: #ffffff;
    text-align: left;
    padding: 15px;
    margin-top: 10px;
    font-weight: 600;
    border-radius: 4px;
}

.footer .footer-newsletter .sent-message {
    display: none;
    color: #ffffff;
    background: #059652;
    text-align: center;
    padding: 15px;
    margin-top: 10px;
    font-weight: 600;
    border-radius: 4px;
}

.footer .footer-newsletter .loading {
    display: none;
    background: var(--background-color);
    text-align: center;
    padding: 15px;
    margin-top: 10px;
}

.footer .footer-newsletter .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: subscription-loading 1s linear infinite;
}

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

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

.footer .copyright {
    padding: 25px;
 
    background-color: color-mix(in srgb, var(--default-color), transparent 95%);
}

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

.footer .credits {
    margin-top: 6px;
    font-size: 13px;
}
/*--------------------------------------------------------------
////////////////////////////////////////////////////////////////          footer1.css
--------------------------------------------------------------*/