@import"https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&family=Raleway:wght@300;400;500;600;700;800;900&display=swap";

body {
    color: #000000;
    font-size: 1rem;
    line-height: 1.5;
    font-family: "Open Sans", sans-serif;
}

body::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 10px;
}

body::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

body::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background-image: -webkit-gradient(linear,
    left bottom,
    left top,
    color-stop(0.44, rgb(122,153,217)),
    color-stop(0.72, rgb(73,125,189)),
    color-stop(0.86, rgb(28,58,148)));
}

a {
    text-decoration: none;
    color: inherit;
}

.truncate {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.truncate-two {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.truncate-one {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.justify {
    text-align: justify;
}

.bg-yellow{
    background: #FFEB00;
}

.bg-bis{
    background: bisque;
}

.bg-alice{
    background: aliceblue;
}

.list{
    display: flex;
    align-items: center;
}

.list1 .list .title{
    font-weight: 600;
}

.list1 .desc{
    margin-left: 3rem;
    padding-left: 2rem;
    font-size: 0.9rem
}

.hero-title {
    font-family: "Raleway", sans-serif;
    color: #000000;
    font-size: 2.8rem;
    line-height: 1.5;
   /* font-weight: 900;*/
    color: white;
    text-align: center;
    text-transform: capitalize;
}

.hero-para {
    font-family: "Raleway", sans-serif;
    font-size: 1.3rem;
    line-height: 1.5;
    font-weight: 700;
    color: #f7d818  !important;
    text-align: center;
    text-transform: capitalize;
    font-style: italic;
}

.hero-image{
    height: 80vh;
    object-fit: cover
}

.hero-icon{
    width:24%;
    object-fit: fill;
}

.hero-text {
    font-family: "Raleway", sans-serif;
    color: #ffffff;
    font-size: 3rem;
    line-height: 1.5;
    font-weight: 800;
    text-transform: capitalize;
}

.text-title {
    font-family: "Raleway", sans-serif;
    color: #000000;
    font-size: 2.2rem;
    line-height: 1.5;
    font-weight: 800;
    text-transform: capitalize;
}

.text-sub-para {
    font-family: "Raleway", sans-serif;
    color: #000000;
    font-size: 0.9rem;
    line-height: 1.5;
    font-weight: 900;
}

.text-para {
    font-family: "Raleway", sans-serif;
    color: #000000;
    font-size: 0.9rem;
    line-height: 1.5;
}


.heading {
    font-family: "Raleway", sans-serif;
    color: #000000;
    font-size: 3rem;
    line-height: 1.5;
    font-weight: 900;
    text-transform: uppercase;
}

.bg-ash {
    background: #e3e7e8 !important;
}

/*.small {*/
/*    width: 55px;*/
/*    height: 6px;*/
/*    background-color: #5faf1f;*/
/*}*/

.small {
    width: 55px;
    height: 6px;
    background-color: #5faf1f;
    position: relative; /* Ensures the animation works relative to the element */
    animation: moveLine 2s infinite ease-in-out; /* Animation name, duration, iteration, and timing function */
}

@keyframes moveLine {
    0% {
        transform: translateX(-25px); /* Start position */
    }
    50% {
        transform: translateX(25px); /* End position */
    }
    100% {
        transform: translateX(-25px); /* Return to start position */
    }
}

.line-container {
    position: relative;
    width: 55px;
    height: 6px;
    overflow: hidden; /* Ensures that anything outside the container is hidden */
}

.line-container .line {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: moveLine 2s infinite ease-in-out;
}

.line-container .line.light {
    background-color: #a1d855; /* Light shade */
}

.line-container .line.dark {
    background-color: #5faf1f; /* Dark shade */
    animation-delay: 1s; /* Optional: Stagger the animation start time */
}

@keyframes moveLine {
    0% {
        transform: translateX(-25px);
    }
    50% {
        transform: translateX(25px);
    }
    100% {
        transform: translateX(-25px);
    }
}
/**************************************/

.h-width {
    width: 20px;
    height: 100%;
    background-color: #5faf1f;
}


/*click to top*/
#button {
    display: inline-block;
    background-color: #0ca62f;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 4px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s,
    opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}
#button::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    line-height: 50px;
    color: #fff;
}
#button:hover {
    cursor: pointer;
    background-color: #333;
}
#button:active {
    background-color: #555;
}
#button.show {
    opacity: 1;
    visibility: visible;
}

/*click to top*/



.myEventSwiper .text-title{
    font-size: 1.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}



/*****common Section *****/

a.green-animated-button {
    background-color: #059212;
    color: white;
    border: 1px solid #059212;
    padding: 12px 22px;
    font-size: 16px;
    transition: color 0.4s, background-color 0.4s;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    display: inline-block; /* Ensures the anchor behaves like a button */
    text-align: center;
    cursor: pointer;
}

a.green-animated-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: white;
    transition: left 0.4s;
    z-index: 0;
}

a.green-animated-button:hover::before {
    left: 0;
}

a.green-animated-button:hover {
    color: #059212;
}

a.green-animated-button span {
    position: relative;
    z-index: 1;
}




a.white-animated-button {
    background-color: #ffffff;
    color: #059212;
    border: 1px solid #059212;
    padding: 12px 22px;
    font-size: 16px;
    transition: color 0.4s, background-color 0.4s;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    display: inline-block; /* Ensures the anchor behaves like a button */
}

a.white-animated-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #059212;
    transition: left 0.4s;
    z-index: 0;
}

a.white-animated-button:hover::before {
    left: 0;
}

a.white-animated-button:hover {
    color: #ffffff;
}

a.white-animated-button span {
    position: relative;
    z-index: 1;
}


/*****common End Section *****/


/* --------------------------------- navbar --------------------------------- */

.navbar {
    transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
    top: 0;
    z-index: 10000;
    background-color: rgba(255, 255, 255, 0.8);
}

/* Navbar styles when sticky */
.navbar.sticky-top {
    background-color: #ffffff;
    /* background-color: rgba(0, 0, 0, 0.8); */
    /* Change the background color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Add a shadow */
    padding: 10px 0;
    /* Adjust padding */
    z-index: 9999;
}

/* .navbar {
    background-color: #059212;
} */

/* .navbar .navbar-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
} */

 .navbar .dropdown-menu {
    display: none;
    /*visibility: hidden;*/
    opacity: 0;
    transform: translateY(20px);
    transition: visibility 0.3s, opacity 0.3s, transform 0.3s;
}

 .navbar .nav-item:hover .dropdown-menu {
    /*visibility: visible;*/
     display: block;
     opacity: 1;
     transform: translateY(0);
}

.navbar .navbar-nav .nav-item a {
    color: #000000;
    font-weight: 500;
}

.navbar .navbar-nav .nav-item .nav-link {
    padding: 5px;
    border-bottom: 1px solid transparent;
    transition: color 0.3s, border-bottom 0.3s;
}

.navbar .navbar-nav .nav-item .nav-link.active {
    color: #059212;
    border-bottom: 1px solid #ffffff;
}

.navbar .navbar-nav .nav-item .nav-link:hover {
    color: #059212;
    border-bottom: 1px solid #ffffff;
}

.navbar .navbar-nav .nav-item .dropdown-menu .dropdown-item {
    color: rgb(0, 0, 0);
    transition: color 0.3s, transform 0.3s;
}

.navbar .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover {
    background-color: #059212;
    color: white;
}
.navbar .navbar-nav .nav-item .dropdown-menu .dropdown-item.active {
    background-color: #059212;
    color: #ffffff;
}

.join{
    background-color: #0A3DAB;
    color: #ffffff;
    border-radius: 0;
    font-weight: 600;
    border: none;
}

.donate{
    background-color: #F9C910;
    color: #000000;
    border-radius: 0;
    font-weight: 600;
    border: none;
}

.one,
.two,
.three {
    /*transition: all 0.2s ease;*/
    /* Smooth transition for resizing and repositioning */
}
/* --------------------------------- navbar --------------------------------- */



/* ---------------------------------- hero ---------------------------------- */
.hero-bg {
    background-image: linear-gradient(to top, #edf6fb, #e5f2f9, #deeef8, #d6ebf6, #cee7f4, #c8e4f3, #c3e2f1, #bddff0, #b8ddef, #b3daed, #aed8ec, #a9d5eb);
}


/* hero-container */
.swiper-container .swiper-slide img {
    height: auto;
    width: 100%;
    margin: 0 auto;
    object-fit: cover;
}

/* Swiper container */
.swiper-container {
    width: 100%;
    height: 85vh;
    /* Full viewport height */
    overflow: hidden;
}

.swiper-container .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    color: white;
}
.swiper-container .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    color: white;
}
/* Swiper wrapper */
.swiper-container .swiper-wrapper {
    display: flex;
}

/* Swiper slide */
.swiper-container .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-container .swiper-wrapper .swiper-slide .overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Overlay */
.swiper-container .swiper-wrapper .swiper-slide .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Black with 50% opacity */
    z-index: 0;
}

/* hero-container */


/*
.swiper-container .swiper-slide img {
    height: auto;
    width: 100%;
    margin: 0 auto;
    object-fit: cover;
}
*/

#swiper-cat-cont main {
    padding: 2rem 0;
}

#swiper-cat-cont .tiny {
    font-size: 1rem;
    text-align: center;
    margin-bottom: 2rem;
}

#swiper-cat-cont .swiper-container {
    width: 100%;
    height: 100%;
    position: relative;
}


#swiper-cat-cont .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
    position: relative;
}

#swiper-cat-cont .swiper-slide {
    text-align: center;
    font-size: 33px;
/*    background: #fff;*/
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    position: relative;
    overflow: hidden;
    padding: 0 10px;
}

.black-btn {
    color: white;
    background-color: #059212;
    font-weight: 600;
}

.black-btn:hover {
    color: #059212;
    background-color: white;
    border: 1px solid #001A00;
    font-weight: 600;
}

/* ---------------------------------- hero ---------------------------------- */

/* ----------------------------------- tab ---------------------------------- */
.backgroundimage {
    background-image: url('../images/background/Rectanglesustainability1.webp');
    height: 100%;
}

.sustainability-nav .nav-link {
    display: block;
    padding: 0.75rem 0;
    color: #000000;
    text-decoration: none;
    transition: color .15s ease-in-out;
    text-align: start;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
}

.sustainability-nav.nav-tabs .nav-link {
    background: 0 0;
    border: 1px solid transparent;
    border: 0;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.sustainability-nav.nav-tabs .nav-link img {
    width: 40px;
    margin: 10px;
}


.sustainability-nav.nav-tabs {
    border-bottom: 0px solid #000000;
}

.sustainability-nav.nav-tabs .nav-item.show .nav-link,
#sustainabilityTab .nav-link.active {
    color: #ffffff;
    background-color: rgb(56, 190, 29);
    width: 100%;
}

/* #sustainabilityTab .nav-item{
    color: #059212;
    background-color: red;
} */

/* #sustainabilityTab .nav-link:hover {
    color: #ffffff;
    background-color: rgb(56, 190, 29);
    width: 100%;
} */

.border_style {
    border-right: 1px dashed rgba(0, 0, 0, 0.5);
}



/* Keyframes for vibrating effect */
@keyframes vibrate {
    0% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

.thematic-div {
    display: inline-block; /* Ensure the hover effect works */
    transition: 0.3s ease-in-out;
}

.thematic-div img {
    transition: transform 0.3s ease-in-out; /* Smooth transition for scaling */
}

.thematic-div:hover img {
    transform: scale(1); /* Scale the image */
    animation: vibrate 0.5s ease-in-out; /* Apply vibration effect */
}

/*.thematic-div:hover {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); !* Example with a soft black shadow *!
    border-radius: 0.4px
}*/


.thematic-div .text-title {
    /*color: #315910 !important;*/
    transition: 0.3s ease-in-out;
    font-weight: 700 !important;
}

.thematic-div:hover .text-title {
    color: black !important;
    transform: scale(1.2);
}

.thematic-div .text-title {
    font-family: "Raleway", sans-serif;
    color: #000000;
    font-size: 1.5rem;
    line-height: 1.5;
    text-transform: capitalize;
}


/* Initial navbar styles */
.breadcrumb-outer {
    position: relative;
    margin-top: -4rem;
    z-index: 10
}

.breadcrumb-outer .share-box {
    top: 50%;
    bottom: inherit;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
}

.breadcrumb {
    padding: 1.5625rem 2.1875rem;
    margin: 0 -2.1875rem;
    background: #fff;
    /*border-top: 1px solid #e7e7e7;
    border-left: 1px solid #e7e7e7;
    border-right: 1px solid #e7e7e7;*/
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-top-left-radius: 5px;
    -moz-border-top-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -ms-border-top-left-radius: 5px;
    -o-border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-top-right-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -ms-border-top-right-radius: 5px;
    /* -moz-box-shadow: 0 -4px 4px 1px rgba(0, 0, 0, 0.1);
     -webkit-box-shadow: 0 -4px 4px 1px rgba(0, 0, 0, 0.1);
     -ms-box-shadow: 0 -4px 4px 1px rgba(0, 0, 0, 0.1);
     -o-box-shadow: 0 -4px 4px 1px rgba(0, 0, 0, 0.1);
     box-shadow: 0 -4px 4px 1px rgba(0, 0, 0, 0.1)*/
}

.breadcrumb-item+.breadcrumb-item {
    position: relative;
    padding-left: 1.25rem
}

.breadcrumb-item+.breadcrumb-item::before {
    content: "";
    border: solid #6c757d;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 2px;
    transform: rotate(-45deg) translateY(-50%);
    -webkit-transform: rotate(-45deg) translateY(-50%);
    position: absolute;
    left: 8px;
    top: 50%
}

.breadcrumb-item {
    font-size: .875rem;
    line-height: .875rem;
    text-transform: uppercase
}

.breadcrumb-item a {
    display: inline-block;
    color: #0e5b44;
}

.breadcrumb-item a.home {
    color: #727272 !important
}

.breadcrumb-item.active {
    color: #000000
}

.breadcrumb-item a:hover {
    color: #000000
}

.text-stroke {
    /*-webkit-text-stroke: 2px #ffffff;*/
    color: #ffffff;
    letter-spacing: 5px;
    font-size: 2.5rem;
    font-weight: 700;
    /*font-family: Arial #ffffff, Gadget, sans-serif;*/
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
}

/* ----------------------------------- tab ---------------------------------- */

.thankful-bg {
    position: relative;
    background-image: url('../images/banner/01.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 60vh;
    z-index: -1;
}

/* .thankful-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.thankful-bg > * {
    position: relative;
    z-index: 2;
} */



/* ---------------------------------- about --------------------------------- */
.icon-div .icon-circle {
    display: inline-block;
    border: 1px solid #059212;
    margin: 15px;
    /* space between circles */
    border-radius: 50%;
    height: 120px;
    width: 120px;
    text-align: center;
    vertical-align: middle;
}

.icon-div .icon-circle a {
    color: #059212;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    height: 120px;
    width: 120px;
}

.icon-div .icon-circle a:hover,
.icon-div .icon-circle a:active {
    color: rgb(170, 170, 170);
    text-decoration: none;
}

/* ---------------------------------- about --------------------------------- */


/* --------------------------------- gallery -------------------------------- */


.filter-button {
    font-size: 18px;
    text-align: center;
    color: #000000;
    border: none;
    background-color: white;
    font-weight: 700;
    margin-left: 10px;
    margin-right: 10px;
}

.filter-button:hover,
.filter-button.active {
    font-size: 18px;
    border-radius: 5px;
    text-align: center;
    color: #42B32F;
}

.port-image {
    width: 100%;
}

.gallery_product {
    display: flex;
   /* margin-bottom: 30px;*/
}


/* --------------------------------- gallery -------------------------------- */

/* ---------------------------------- news ---------------------------------- */
.blog-card {
    position: relative;
    width: 100%;
}

.blog-card .blog-image {
    height: 38vh;
    object-fit: cover;
}

.blog-card .blog-div {
    height: 50%;
    width: 70%;
    bottom: 0;
    right: 0;
    max-height: 60%;
    /* overflow: auto; */
    position: absolute;
    background-color: white;
    padding: 10px;
}

.blog-card .blog-date {
    font-size: 1rem;
    color: grey;
}

.blog-card .blog-author {
    font-size: 1rem;
    text-transform: capitalize;
    color: grey;
}

.blog-card .blog-comment {
    font-size: 1rem;
    color: grey;
}

.blog-card .blog-title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.blog-card .blog-content {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* ---------------------------------- news -----------------------------:----- */

/* ---------------------------------- video gallery ---------------------------------- */
.video-card {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.video-card .video-image {
    height: 38vh;
    object-fit: cover;
    transition: transform 0.4s ease; /* Smooth zoom transition */
}

/* Hidden yellow overlay initially */
.video-card .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 0, 0.6); /* Yellow overlay with 60% opacity */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.4s ease; /* Smooth transition for visibility */
    z-index: 1; /* Overlay above image */
}

/* Play icon initial style */
.video-card .play-icon {
    transition: color 0.4s ease; /* Smooth transition for icon color */
    z-index: 2;
}

/* Hover effect for the anchor wrapper */
.video-card .overlay-wrapper:hover .video-image {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

/* Show overlay on hover */
.video-card .overlay-wrapper:hover .overlay {
    opacity: 1; /* Display yellow overlay when hovering */
}

/* Change play icon color on hover */
.video-card .overlay-wrapper:hover .play-icon i {
    color: black; /* Icon turns black on hover */
}
/* ---------------------------------- video gallery ---------------------------------- */



/* ------------------------------- achivement ------------------------------- */
.achivement .achivement-icon {
    color: #5faf1f;
    font-size: 3.5rem;
}

/* ------------------------------- achivement ------------------------------- */



/*--------------------------logo--------------------------------------------*/
.mySwiper4 .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mySwiper4 .swiper-slide {
    width: 100px;
    /* Set your desired width */
    height: 150px;
    /* Set your desired height */
}

.mySwiper4 .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
}
/*--------------------------logo--------------------------------------------*/



/* --------------------------------- social --------------------------------- */
.social {
    /*background-color: #1D1D1D;*/
}

.social .social-title {
    color: white;
}

.social .border-last {
    border-right: 1px solid grey;
}

.social .social-icon-div .icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid #059212; */
    margin: 15px;
    /* space between circles */
    border-radius: 50%;
    height: 40px;
    width: 40px;
    text-align: center;
    vertical-align: middle;
    /* background-color: #051a92; */
}

.social .social-icon-div .icon-circle a {
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    /*vertical-align: middle;*/
    text-align: center;
    text-decoration: none;
    height: 40px;
    width: 40px;
}

.social .social-icon-div .icon-circle a i {
    font-size: 1.3rem;
}

.social .social-icon-div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.social .social-icon-div .icon-circle a {
    color: white;
}

.social .social-icon-div .icon-circle a:hover {
    color: rgb(255, 255, 255);
    text-decoration: none;

    transform: scale(1.5);
    transition: 0.3s transform ease-in-out;
}

.social .social-icon-div .icon-circle.facebook {
    background-color: #1877F2;
}

.social .social-icon-div .icon-circle.linkedin {
    background-color: #0a66c2;
}

.social .social-icon-div .icon-circle.pinterest {
    background-color: #bd081c;
}

.social .social-icon-div .icon-circle.twitter {
    background-color: #1da1f2;
}

/* --------------------------------- social --------------------------------- */

/* --------------------------------- footer --------------------------------- */
footer .text-title {
    font-size: 1.6rem;
}

footer .recent-post {
    margin-bottom: 1rem;
    display: flex;
    justify-content: start;
    flex-direction: row;
}

footer .recent-post-img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

footer .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

footer .gallery-img {
    width: 100%;
    height: 78px;
    object-fit: cover;
}

footer a.text-reset {
    transition: all 0.3s ease;
}

footer .recent-post:hover {
    transform: scale(1.05);
    text-decoration: none;
    transition: 0.3s;
}

footer .contact-item {
    transition: transform 0.3s ease, color 0.3s ease;
}

footer .contact-item:hover {
    transform: translateX(10px);
    color: #007bff;
}

/* --------------------------------- footer --------------------------------- */

/* ---------------------------------- event --------------------------------- */
.user {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    /* Ensure the image does not overflow the container */
    position: relative;
    /* Positioning context for the image */
}

.user-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures the image covers the container */
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.swiper-button-next,
.swiper-button-prev {
    color: #059212 !important;
}


/* ---------------------------------- event --------------------------------- */




/* -------------------------------------------------------------------------- */
/*                                 event page                                 */
/* -------------------------------------------------------------------------- */

/* event */
.event .card {
    overflow: hidden;
}

.event .card:hover .text-title {
    color: #059212;
}

.event .card img {
    transition: transform 0.5s ease;
    object-fit: cover;

}

.event .card:hover img {
    transform: scale(1.2);
}

.event .card .date {
    background-color: #D1D3D5;
    color: white;
    width: 55px;
    height: 28%;
    position: absolute;
    top: 10%;
    left: 10%;
}

/* event */

/* blog */

.sidebar-bg{
    background: darkgreen;
    color: white;
}

.hover-div {
    /*border-bottom: 1px solid rgb(224, 224, 224);*/
}

.hover-div .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px;
    font-weight: 600;
    color: grey;
}

.hover-div:hover{
    background: darkgreen;
    color: white;
}

/* Specific hover styles */
.hover-div:hover .left-content {
    transform: translateX(10px);
    /* Move the arrow 10px to the right */
    transition: transform 0.3s linear;
    /* Smooth transition */
    color: #ffffff;
}

.hover-div:hover .badge {
    background-color: #059212 !important;
    /* Change background color to green */
    transition: background-color 0.3s;
    /* Smooth transition */
}

/* blog */


/* post */
.recent-post {
    margin-bottom: 1rem;
    display: flex;
    justify-content: start;
    flex-direction: row;
}

.recent-post-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-right: 10px;
}

.recent-post:hover .recent-post-img {
    transform: scale(1.1);
    transition: 0.2s;
}

.recent-post:hover .recent-post-text {
    /* transform: scale(1.05); */
    /* text-decoration: none; */
    transition: 0.2s;
    color: #059212;
}

/* post */


/* tag */
.tags .tag-badge {
    background-color: #E3E7E8;
    color: #7a7a7a;
    font-weight: 700;
    padding: 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

/* tag */

/* pagination */
.event .pagination .active>.page-link,
.event .pagination .page-link.active {
    background-color: #059212;
    border: #059212;
    color: white;
}

.event .pagination .page-link {
    color: #059212;
}

/* pagination */



/* -------------------------------------------------------------------------- */
/*                                 event page                                 */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/*                                event detail                                */
/* -------------------------------------------------------------------------- */
.event-detail .image-container {
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
}

.event-detail .image-container img {
    transition: transform 0.5s ease;
    width: 100%;
    height: 100%;
}

.event-detail .image-container:hover img {
    transform: scale(1.1);
}

/* -------------------------------------------------------------------------- */
/*                                event detail                                */
/* -------------------------------------------------------------------------- */

/*contact*/

/* Initial navbar styles */
.contact .contact-logo {
    border: 1px solid #5FAF1F;
    border-radius: 19px;
    padding: 8px 10px;
}

.contact .contact-logo i {
    color: #5FAF1F;
}
.contact .contact-content:hover span{
    background-color: #5FAF1F;
    color: aliceblue;
    transition: 0.3s ease-in-out;
}
.contact .contact-content:hover span i{
    color: aliceblue;
    transition: 0.3s ease-in-out;
}
.contact .contact-content:hover .contact-text{
    color: #5FAF1F;
    transition: 0.3s ease-in-out;
}


@media (max-width: 375px) {
    .social .border-last {
        border-right: none
    }
}





.price_plan_area {
    position: relative;
    z-index: 1;
    background-color: #f5f5ff;
}

.single_price_plan {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    border-radius: 0.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 30px;
    background-color: #ffffff;
    /*padding: 3rem;*/
}

.single_price_plan::after {
    position: absolute;
    content: "";
    background-image: url("https://bootdey.com/img/half-circle-pricing.png");
    background-repeat: repeat;
    width: 100%;
    height: 17px;
    bottom: -17px;
    z-index: 1;
    left: 0;
}

.single_price_plan .title {
    text-transform: capitalize;
    /*margin-bottom: 2rem;*/
}

.single_price_plan .title {
    color: #ffffff;
    font-weight: 700;
}

.single_price_plan .title span {
    color: #ffffff;
    padding: 0.2rem 0.6rem;
    font-size: 12px;
    text-transform: uppercase;
    background-color: #2ecc71;
    display: inline-block;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
}

.single_price_plan .title {
    font-size: 2rem;
}

.single_price_plan .title p {
    font-weight: 300;
    line-height: 1;
    font-size: 14px;
}

.single_price_plan .title .line {
    width: 80px;
    height: 4px;
    border-radius: 10px;
}

.single_price_plan .price {
    margin-bottom: 1.5rem;
}

.single_price_plan .price h4 {
    font-size: 2.4rem;
    margin-bottom: 0;
}

.single_price_plan .description {
    position: relative;
    margin-bottom: 1.5rem;
}

.single_price_plan .description p {
    line-height: 22px;
    margin: 0;
    padding: 10px 0;
}

.single_price_plan .description p strong {
    /*line-height: 16px;*/
    /*margin: 0;*/
    padding: 5px 0;
    display: block;
}

.single_price_plan .description p i {
    margin-right: 0.5rem;
}

.single_price_plan .button {
    text-align: center;
}

.single_price_plan .button .btn {
    font-size: 0.875rem;
    padding: 0.75rem 1.25rem;
}

.single_price_plan:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* EPOCH Specific Styles */
.single_price_plan.epoch .title{
    background-color: #bb1a1a;
    padding: 2rem;
}
.single_price_plan.epoch .details{
    padding: 2rem;
}

.single_price_plan.epoch .title .line {
    background-color: #ffffff;
}

.single_price_plan.epoch:hover {
    /* background-color: #b2dfdb; */
}

/* VIRID Specific Styles */
.single_price_plan.virid .title {
    background-color: #15a118;
    padding: 2rem;
}

.single_price_plan.virid .details {
    padding: 2rem;
}

.single_price_plan.virid .title .line {
    background-color: #ffffff;
}

.single_price_plan.virid:hover {
    /* background-color: #a5d6a7; */
}

/* AURA Specific Styles */
.single_price_plan.aura .title {
    background-color: #cfa416;
    padding: 2rem;
}

.single_price_plan.aura .details {
    padding: 2rem;
}

.single_price_plan.aura .title .line {
    background-color: #ffffff;
}

.single_price_plan.aura:hover {
    /* background-color: #ffab91; */
}

/* SWEAVEN Specific Styles */
.single_price_plan.sweaven .title {
    background-color: #2856c1;
    padding: 2rem;
}

.single_price_plan.sweaven .details {
    padding: 2rem;
}

.single_price_plan.sweaven .title .line {
    background-color: #ffffff;
}

.single_price_plan.sweaven:hover {
    /* background-color: #b39ddb; */
}

/* WELKIN Specific Styles */
.single_price_plan.welkin .title{
    background-color: #962acb;
    padding: 2rem;
}

.single_price_plan.welkin .details{
    padding: 2rem;
}

.single_price_plan.welkin .title .line {
    background-color: #ffffff;
}

.single_price_plan.welkin:hover {
    /* background-color: #ffcc80; */
}



/**********************isr**********************/

 .main-chapter {
     position: relative
 }

.main-chapter:before {
    content: "";
    display: block;
    width: 2px;
    height: 100%;
    background: #c6c6c6;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.main-chapter .timeline {
    margin-bottom: 40px;
    position: relative
}

.main-chapter .timeline:after {
    content: "";
    display: block;
    clear: both
}

.main-chapter .icon {
    width: 18px;
    height: 18px;
    line-height: 18px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0
}

.main-chapter .icon:before,
.main-chapter .icon:after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.33s ease-out 0s
}

.main-chapter .icon:before {
    background: #fff;
    border: 2px solid #232323;
    left: -3px
}

.main-chapter .icon:after {
    border: 2px solid #c6c6c6;
    left: 3px
}

.main-chapter .timeline:hover .icon:before {
    left: 3px
}

.main-chapter .timeline:hover .icon:after {
    left: -3px
}

.main-chapter .date-content {
    width: 50%;
    float: left;
    margin-top: 22px;
    position: relative
}

.main-chapter .date-content:before {
    content: "";
    width: 36.5%;
    height: 2px;
    background: #c6c6c6;
    margin: auto 0;
    position: absolute;
    top: 0;
    right: 10px;
    bottom: 0
}

.main-chapter .date-outer {
    width: 125px;
    height: 125px;
    font-size: 16px;
    text-align: center;
    margin: auto;
    z-index: 1
}

.main-chapter .date-outer:before,
.main-chapter .date-outer:after {
    content: "";
    width: 125px;
    height: 125px;
    margin: 0 auto;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transition: all 0.33s ease-out 0s
}

.main-chapter .date-outer:before {
    background: #fff;
    border: 2px solid #232323;
    left: -6px
}

.main-chapter .date-outer:after {
    border: 2px solid #c6c6c6;
    left: 6px
}

.main-chapter .timeline:hover .date-outer:before {
    left: 6px
}

.main-chapter .timeline:hover .date-outer:after {
    left: -6px
}

.main-chapter .date {
    width: 100%;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.main-chapter .date img{
    width: 9%;
}

.main-chapter .month {
    font-size: 18px;
    font-weight: 700
}

.main-chapter .year {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: #232323;
    line-height: 36px
}

.main-chapter .timeline-content {
    width: 50%;
    padding: 20px 0 20px 50px;
    float: right
}

.main-chapter .title {
    font-size: 19px;
    font-weight: 700;
    line-height: 24px;
    margin: 0 0 15px 0
}

.main-chapter .description {
    margin-bottom: 0;
    font-style: italic;
}

.main-chapter .timeline:nth-child(2n) .date-content {
    float: right
}

.main-chapter .timeline:nth-child(2n) .date-content:before {
    left: 10px
}

.main-chapter .timeline:nth-child(2n) .timeline-content {
    padding: 20px 50px 20px 0;
    text-align: right
}

#style-15::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #F5F5F5;
    border-radius: 10px;
}

#style-15::-webkit-scrollbar {
    width: 10px;
    background-color: #F5F5F5;
}

#style-15::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #FFF;
    background-image: -webkit-gradient(linear,
    40% 0%,
    75% 84%,
    from(#4D9C41),
    to(#19911D),
    color-stop(.6, #54DE5D))
}

@media only screen and (max-width: 991px) {
    .main-chapter .date-content {
        margin-top: 35px
    }

    .main-chapter .date-content:before {
        width: 22.5%
    }

    .main-chapter .timeline-content {
        padding: 10px 0 10px 30px
    }

    .main-chapter .title {
        font-size: 17px
    }

    .main-chapter .timeline:nth-child(2n) .timeline-content {
        padding: 10px 30px 10px 0
    }
}

@media only screen and (max-width: 767px) {
    .main-chapter:before {
        margin: 0;
        left: 7px
    }

    .main-chapter .timeline {
        margin-bottom: 20px
    }

    .main-chapter .timeline:last-child {
        margin-bottom: 0
    }

    .main-chapter .icon {
        margin: auto 0
    }

    .main-chapter .date-content {
        width: 95%;
        float: right;
        margin-top: 0
    }

    .main-chapter .date-content:before {
        display: none
    }

    .main-chapter .date-outer {
        width: 110px;
        height: 110px
    }

    .main-chapter .date-outer:before,
    .main-chapter .date-outer:after {
        width: 110px;
        height: 110px
    }

   /* .main-chapter .date {
        top: 37%
    }*/

    .main-chapter .year {
        font-size: 24px
    }

    .main-chapter .timeline-content,
    .main-chapter .timeline:nth-child(2n) .timeline-content {
        width: 95%;
        text-align: center;
        padding: 10px 0
    }

    .main-chapter .title {
        margin-bottom: 10px
    }
}

.df-container.df-floating>.df-ui-next, .df-container.df-floating>.df-ui-prev {
    border-radius: 0% 0% !important;
    width: 40px;
}

.df-container.df-floating>.df-ui-next {
    right: -2px !important;
}

/**********************isr**********************/


/**********************media**********************/
.testimonial-section {
    background-color: #d01d1d;
    /* Red background */
    padding: 60px 0;
    text-align: center;
    color: white;
}

.testimonial-section h2 {
    margin-bottom: 40px;
    font-weight: bold;
    font-size: 2rem;
}

.testimonial-section .person {
    border-radius: 50%;
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    margin-bottom: 20px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.testimonial-section .person img {
    width: 100%;
    height: auto;
}

.testimonial-section .person.active {
    transform: scale(1.2);
    border: 3px solid white;
}

.testimonial-section .quote {
    font-style: italic;
    font-size: 1.2rem;
    margin: 20px auto;
    max-width: 700px;
}

.testimonial-section .author {
    margin-top: 10px;
    font-weight: bold;
}

.testimonial-section .role {
    font-style: italic;
    font-size: 1rem;
}
/**********************media**********************/




.error {
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    color: var(--bs-form-invalid-color);
}



/* tab */
.news .nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: #929292;
    text-decoration: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.news.nav-tabs .nav-link {
    margin-bottom: -1px;
    background: 0 0;
    border: 1px solid transparent;
    border: 0;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.news.nav-tabs {
    border-bottom: 0px solid #dee2e6;
}

.news.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #000000;
    background-color: #fff;
    /* border-color: #2880d8 #dee2e6 #fff; */
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, #26f132, #219623, #126c0b) 30;
}

.tab-content .anchor a{
    color: red;
    transition: 0.5s ease-in-out;
}

.tab-content .anchor a:hover{
    color: green;
}

.scroll-Tab {
    overflow: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
    padding-bottom: 15px;
}

/* tab */



/******************media*****************/
.media .swiper {
    width: 100%;
    height: 100%;
}

.media .swiper-slide {
    position: relative;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.media .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.media .gallery-name {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(22, 54, 19, 0.5);
    color: #fff;
    padding: 5px 10px;
    font-size: 16px;
    z-index: 10;
}

.media .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.media .swiper-slide:hover .overlay {
    opacity: 1;
}

.media .overlay-title {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
}
/******************media*****************/


/******************gallery*****************/
.mySwiper3 .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

mySwiper3 .swiper-slide {
    width: auto;
    /* Set your desired width */
    height: 200px;
    padding: 20px;
    /* Set your desired height */
}

.mySwiper3 .swiper-slide img {
    /* width: auto; */
    height: 200px;
    object-fit: contain !important;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
}
/******************gallery*****************/

/******************blog*****************/
.mySwiper-blog .blog-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
}


.mySwiper-blog .blog-card img {
    width: 100%;
    height: 35vh;
    object-fit: cover;
}

.mySwiper-blog .blog-date {
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: #008080;
    color: #fff;
    padding: 42px 52px;
    border-radius: 100% 0% 0% 0%;
    font-weight: bold;
    font-size: 1rem;
}

.mySwiper-blog .swiper {
    padding: 20px 0;
}

.mySwiper-blog .tags .tag-badge {
    background-color: #E3E7E8;
    color: #7a7a7a;
    font-weight: 700;
    padding: 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.mySwiper-blog .text-title{
    font-size: 1.2rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mySwiper-blog .num{
    font-size: 1.3rem;
}
.mySwiper-blog .blog-link {
    color: green;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
}

.mySwiper-blog .blog-link:hover {
    color: #bdb7b7;
}
/******************blog*****************/


.image-spin {
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin {
    100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}






@media (max-width: 375px) {

    .hero-title {
        font-family: "Raleway", sans-serif;
        color: #000000;
        font-size: 1.4rem;
        line-height: 1.8;
        /* font-weight: 900;*/
        color: white;
        text-align: center;
        text-transform: capitalize;
    }

    .text-title {
        font-family: "Raleway", sans-serif;
        color: #000000;
        font-size: 1.4rem;
        line-height: 1.5;
        font-weight: 800;
        text-transform: capitalize;
    }

    .hero-image{
        height: 35vh;
        object-fit: cover
    }



    .text-stroke {
        -webkit-text-stroke: 0.5px #000000;
        color: #030303;
        letter-spacing: 5px;
        font-size: 1rem;
        font-family: Arial Black, Gadget, sans-serif;
    }

    .hero-icon{
        width:24%;
        object-fit: fill;
    }



}


@media (min-width: 376px) and (max-width: 425px) {
        /* .navbar .navbar-nav {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        } */

        .social .border-last {
            border-right: none
        }

}

@media (min-width: 426px) and (max-width: 768px) {

    .social .border-last {
        border-right: none;
    }

}

@media (min-width: 769px) and (max-width: 1024px) {}

@media (min-width: 1025px) and (max-width: 1440px) {}

@media (min-width: 1441px) and (max-width: 2560px) {}

@media (min-width: 2561px) {}