/*
Theme Name: Mot Juste
Theme URI:
Author:
Author URI: 
Description:u
Tags: 
Version: 1.0
*/
:root {
  --voltext: #444444;
  --volxblack: #000000;
  --volwhite: #ffffff;
  --volpink: #e07da8;
  --volviolet: #5f6aae;
  --volgreen: #0EA4B8;
  /*--volprimegreen:#089b61;*/
  --volprimegreen:#459D68;
  --volprimeblue: #3F8FB6;
  --volorange: #D47F7A;
}




* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 20px;
}

@media (max-width: 1200px) {
  html {
    font-size: 18px;
  }
}

@media (max-width: 1199px) {
  html {
    font-size: 18px;
  }
}

@media (max-width: 991px) {
  html {
    font-size: 18px;
  }
}

@media (max-width: 576px) {
  html {
    font-size: 16px;
  }
}

body {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  font-size: 20px;
  font-family: "Montserrat", sans-serif;
  overflow-x: hidden !important;
}

html {
  scroll-behavior: smooth;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
}

.row {
  margin: 0;
  position: relative;
}

.col,
.col-1,
.col-10,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
  padding: 0;
}

.container-1200 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem
}

.container-full {
  padding: 0 3rem;
}

.container-1100 {
  max-width: 1100px;
  margin: 0 auto;
}
.container-960 {
  max-width: 960px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1400px) {
  .container-1200 {
    max-width: 1320px;
  }

  .container-1300 {
    max-width: 1340px;
  }
}

@media (min-width: 1900px) {
  .container-1200 {
    max-width: 1440px;
  }

  .container-1300 {
    max-width: 1480px;
  }
}

p{font-size:0.85rem;}

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu nav ul {
  display: flex;
  justify-content: space-between;
  margin: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

header {
  background-color: #ffffff;
  position: fixed;
}

nav ul {
  margin: 0;
}

nav ul li {
  position: relative;
  padding-left: 2rem;
}

.logo {
  padding: 1.8rem 0 0 0;
}

nav ul li a:hover {
  color: var(--volpink);
}

nav ul li a {
  font-size: 0.8rem;
  display: block;
  color: #000000;
  padding-left: 1rem;
  transition: all 0.5s linear;
  line-height: 90px;
  font-weight: 600;
}

.menu .menu-item-has-children ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 4px;
}

.menu .menu-item-has-children ul li {
  min-width: 200px;
}

.menu .menu-item-has-children ul a {
  padding: 10px 20px;
  font-size: 1rem;
  text-transform: none;
  font-weight: 600;
}

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

.menu nav ul li:hover>a {
  color: var(--volpink);
}

.menu nav ul li:hover {
  color: var(--volpink);
}

.menu nav ul li ul li:hover {
  color: var(--volpink);
}

.menu .menu-item-has-children:hover>ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.menu .menu-item-has-children .menu-item-has-children ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.menu .menu-item-has-children .menu-item-has-children:hover>ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

.menu .menu-item-has-children>a:after {
  content: "\f107";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  padding-left: 5px;
}

.menu .menu-item-has-children:hover>a:after {
  content: "\f106";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  padding-left: 5px;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }

  .navbar .dropdown .dropdown:hover>ul {
    left: -100%;
  }
}

/*Mobile Navigation*/
.mobile-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 9999;
  overflow-y: auto;
  left: -260px;
  width: 260px;
  padding-top: 18px;
  padding-bottom: 18px;
  background: #f8f8f8;
  transition: 0.4s;
}

.mobile-nav * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav ul {
  margin-top: 40px;
}

.mobile-nav li a {
  display: block;
  position: relative;
  color: #3B89CB;
  padding: 10px 20px;
  font-weight: 500;
  outline: none;
}

.mobile-nav a:hover,
.mobile-nav li:hover>a {
  color: #000;
  text-decoration: none;
}

.mobile-nav-toggle {
  position: absolute;
  top: 29px;
  right: 15px;
  z-index: 9998;
  border: 0;
  background: none;
  font-size: 24px;
  transition: all 0.4s;
  outline: none !important;
  line-height: 1;
  cursor: pointer;
  text-align: right;
}

.mobile-nav-toggle i {
  color: var(--volprimeblue);
}

.icofont-close {
  color: #000 !important;
}

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

.mobile-nav-active .mobile-nav {
  left: 0;
}

.mobile-nav-active .mobile-nav-toggle i {
  color: #fff;
}

.menu-item-has-children>a:after {
  content: "\ea99";
  font-family: IcoFont;
  padding-left: 2px;
}

.mobile-nav .menu-item-has-children ul {
  display: none;
  overflow: hidden;
}

.mobile-nav li.actives ul {
  display: none;
}

@media(max-width: 576px) {
  .mobile-nav li a {
    font-size: 1rem;
    font-weight: 600;
    color: var(--volprimeblue);
    height: 20px;
    padding: 0;
    line-height: 15px;
  }

   .mobile-nav li {
    padding: 0.5rem 1.5rem 0.85rem 1.5rem;
   }
}

/* New css starts */

.main-container {
  width: 100%;
  max-width: 1320px; /* Bootstrap 5's container-xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}


.inner-container {
  width: 100%;
  max-width: 1140px; /* Bootstrap 5's container-lg or a bit narrower */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Section 1 */

.hero-wrapper {
  background-image: url('/images/Bnr.png');
  background-size: cover;
  background-position: center;
  border-radius: 1rem 0 0 1rem;
  padding: 4rem; 
  position: relative;
  margin-left: 8.5rem;
  margin-top: 5rem;
}

.hero-content-card {
  background: #ffffffce;
  padding: 2rem;
  border-radius: 1.25rem;
  max-width: 900px;
  border: 2px solid #999;
  z-index: 5;
  position: relative;
  margin-left: -9rem;
}


/* Title Styling */
.hero-content-card h1 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--volxblack);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.hero-content-card h1 span {
  color: var(--volprimeblue); /* Match your design's pink */
}

/* Description */
.hero-content-card p {
  font-size: 0.85rem;
  color: var(--volxblack);
  font-weight: 500;
  margin-bottom: 2rem;
}



/* Buttons */
.hero-content-card a {
  background-color: var(--volwhite);
  color: var(--volwhite);
  border: none;
  border-radius: 0.75rem;
  padding: 1rem 1.5rem;
  font-size: 0.95rem;
  text-align: center;
  /*line-height: 1.4;*/
  transition: all 0.3s ease;
}

.hero-buttons a strong {
  color: var(--volprimeblue); /* Match blue tone */
}

.hero-content-card a:hover {
  background-color: #f6f6f6;
}


/* Large Devices - max 1199px */
@media (max-width: 1199px) {
  .hero-wrapper {
    margin-left: 0;
    padding: 3rem 2rem;
    border-radius: 1rem; /* Adjust for full layout on tablet */
  }

  .hero-content-card {
    margin-left: 0;
    padding: 2rem;
    max-width: 100%;
  }


 

 .hero-content-card a {
    padding: 0.9rem 1.2rem;
   
  }
}


/* Medium Devices - max 991px */
@media (max-width: 991px) {
  
  .hero-wrapper {
    margin-left: 0;
    padding: 3rem 2rem;
    border-radius: 1rem; /* Adjust for full layout on tablet */
  }

  .hero-content-card {
    margin-left: 0;
    padding: 2rem;
    max-width: 100%;
  }

  .hero-content-card h1 {
    text-align: center;
  }

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

  .hero-buttons {
    justify-content: center;
  }
}


/* Small Devices - max 576px */
@media (max-width: 576px) {

  html {
    font-size: 14px;
  }

  .hero-wrapper {
    padding: 2rem 1.5rem;
  }

  .hero-content-card {
    padding: 1.5rem;
    border-radius: 1rem;
  }

  .hero-buttons a {
    width: 100%;
    padding: 1rem;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 1rem;
  }
}


/* Section 2 */

.section2 {
  padding: 3rem 0;
}


.container-fluid {
  padding: 0;
}

.section2-header-left{
  background-color: var(--volprimeblue);
  margin-left: 5.5rem;
  padding: 3rem;
  border-radius: 1rem 0 0 1rem;
}

.section2-header-left h5 {
  color: #c3c3c3;
  font-size: 2rem;
  font-weight: 600;
}

.section2-header-left h2 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--volwhite);
}

.section2-header-right img {
  border-radius: 1rem 0 0 1rem;
  width: 100%;
  height: 100%;
}

.section2-row2 .row {
  row-gap: 2rem;
}

.section2-row2-content {
  margin-top: -2.5rem;
}

.feature-card-left {
  padding-right: 1rem;
}

.feature-card-right {
  padding-left: 1rem;
} 

.section2-row2 p{

  color: var(--voltext);
  font-weight: 500;
}

.feature-card {
  display: flex;
  justify-content: space-between;align-content: center;
  border: 2px solid var(--volprimeblue);
  border-radius: 1rem;
  padding: 1rem;
  height: 100%;
}

.feature-card img {
  width: 2rem;
  height: 2rem;
}

.feature-contents {
  padding-left: 1rem;
}

.feature-contents h6 {
  color: var(--volprimeblue);
  font-size: 1rem;
  font-weight: 700;
  padding-bottom: 0.6rem;
}


.feature-contents p {
  
  color: var(--voltext);
  margin-bottom: 0;
}

.section2-btn {
  text-align: center;
  margin-top: 2rem;
  text-transform: uppercase;

}

.section2-btn a {
  background-color: transparent;
  color: var(--volprimeblue);
  padding: 1rem 2rem;
  border: 1px solid var(--volprimeblue);
  border-radius: 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.3s ease;
}

.section2-btn a:hover {
  background-color: var(--volprimeblue);
  border-color: var(--volprimeblue);
  color: var(--volwhite);
}


@media (max-width: 1199px) {
  .section2-header-left {
    margin-left: 1rem;
    padding: 2rem;
    border-radius: 1rem 0 0 1rem;
  }

  .feature-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
  }

  .feature-card img {
    margin-bottom: 0.75rem;
  }

 .feature-card-left {
    padding-right: 1rem;
  }

  .feature-card-right {
    padding-left: 1rem;
  }
}


@media (max-width: 991px) {
  .section2-header-left {
    margin-left: 1rem;
    padding: 2rem 1.5rem;
    border-radius: 1rem 0 0 1rem;
    margin-right: -6px;
  }

  .section2-header-right img {
    width: 100%;
    height: 250px;
    border-radius: 1rem 0 0 1rem;
    margin-top: 0;
  }

  .feature-card {
    flex-direction: row;
    align-items: center;
  }

  .section2-row2 .row {
    row-gap: 1.5rem;
  }
  
  
  .section2-row2-content {
  margin-top: 0;
}

  .section2-btn {
    margin-top: 1.5rem;
  }

  .feature-card-left {
    padding-right: 1rem;
  }

  .feature-card-right {
    padding-left: 1rem;
  }
}


@media (max-width: 576px) {
  .section2 {
    padding: 2rem 1rem;
  }

  .section2-header-left {
    margin-left: 0;
    padding: 1.5rem;
    text-align: center;
    border-radius: 1rem;
  }

  .section2-header-right img {
    border-radius: 1rem;
    margin-top: 1rem;
  }
  
  .section2-row2-content {
  margin-top: 0;
}

  .feature-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem;
  }

  .feature-contents {
    padding-left: 0;
  }

  .section2-btn a {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-size: 0.8rem;
  }

  .section2-row2 .row {
    row-gap: 1rem;
  }

  .feature-card-left {
    padding-right: 0;
  }

  .feature-card-right {
    padding-left: 0;
  }
}




/* Section 3 */
.main-container2 {
  width: 100%;
  max-width: 1260px; 
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.section3 {
  padding: 3rem 0;
  background-color: var(--volprimeblue);
  border-radius: 1.5rem;
}

.section3 h2 {
  font-size: 2rem;
  font-weight: 600;
}

.section3-cards {
  background-color: #ffffff28;
  padding: 1rem;
  border-radius: 1rem;
}

.section3-cards-col {
  padding-right: 1rem;
}

.section3-cards-col:last-child {
  padding-right: 0;
}

.section3-cards img {
  width: 4rem;
  height: 4rem;
}

.section3-cards-body h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--volwhite);
  padding: 1rem 0;
  padding-bottom: 0.5rem;
}


.section3-cards-body p {
  margin-bottom: 0;
  font-weight: 500;
  color: var(--volwhite);
}

.section3-footer p {
  color: var(--volwhite);
  margin-bottom: 0;
  font-weight: 500;
  padding-top: 2rem;
}

@media (max-width: 991px) {
  .section3-cards-col {
    padding-right: 0;
  }
}

@media (max-width: 576px) {
  .section3-cards-col {
    padding-right: 0;
  }
}


/* Section 4 */

.section4 {
  padding: 3rem 0;
}

.section4-heading h2 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--volxblack);
  padding-bottom: 2rem;
}

.section4-heading h2 span {
  color: var(--volprimeblue);
}

.section4-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.partner-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}


.section4-arrow-wrap {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px; 
}


.section4-slider-wrap {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
}


.section4-slider-track {
  display: flex;
  transition: transform 0.6s ease-in-out;
}


.section4-item {
  flex: 0 0 23%; 
  box-sizing: border-box;
  padding: 0 0.5rem;
}

.section4-box p {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--voltext, #333);
  border: 1px solid var(--voltext, #333);
  border-radius: 0.5rem;
  padding: 0.5rem;
  text-align: center;
  margin-bottom: 0;
  height: 100%;
  white-space: pre-wrap;
}


.section4-arrow {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.section4-arrow:hover {
  background: #333;
  color: #fff;
}


@media (max-width: 992px) {
  .section4-item {
    flex: 0 0 33.33%;
  }
}

@media (max-width: 576px) {
  .section4-item {
    flex: 0 0 50%;
  }
}



.section4 p {
  
  font-weight: 500;
  color: var(--voltext);
}

/* Section 5 */

.section5 {
  padding: 2rem 0;
}

.section5-header-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 1.5rem 1.5rem 0;
  display: block;
}

.section5-header-content {
  background-color: var(--volprimeblue);
  padding: 3rem 2rem;
  border-radius: 0 1.5rem 1.5rem 0;
  width: 100%;
  margin-left: -0.1rem;
  margin-right: 5.5rem;
}

.section5-header-content h5 {
  color: var(--volwhite);
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.section5-header-content h5:first-child {
  color: #c3c3c3;
}

.section5-row1-content {
  padding: 3rem;
  margin-top: -13.5rem;
}

.section5-row1-content p {
  margin-right: 5.5rem;
}

.section5-row2-content p {
  padding: 1rem;
  margin-bottom: 0;
  
  color: var(--voltext);
  font-weight: 500;
}



.section2-row2-content {
  margin-top: -2.5rem;
}

.section5-feature-card-left {
  padding-right: 1rem;
}

.section5-feature-card-right {
  padding-left: 1rem;
} 

.section2-row2 p{
  
  
  color: var(--voltext);
  font-weight: 500;
}

.section5-feature-card {
  display: flex;
  justify-content: space-between;align-content: center;
  border: 2px solid var(--volprimegreen);
  border-radius: 1rem;
  padding: 1rem;
  height: 100%;
}

.section5-feature-card img {
  width: 2rem;
  height: 2rem;
}

.section5-feature-contents {
  /*padding-left: 1rem;*/
}

.section5-feature-contents h6 {
  color: var(--volprimegreen);
  font-size: 1rem;
  font-weight: 700;
  padding-bottom: 0.6rem;
}


.section5-feature-contents p {
 
  color: var(--voltext);
  margin-bottom: 0;
}


.section5-feature-card-left, .section5-feature-card-right{padding:0 0.3rem;}
.section5-feature-card img{margin-right: 0.5rem;}

.section5-btn a {
  background-color: transparent;
  color: var(--volprimegreen);
  padding: 1rem 2rem;
  border: 1px solid var(--volprimegreen);
  border-radius: 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.3s ease;
}

.section5-btn a:hover {
  background-color: var(--volprimegreen);
  border-color: var(--volprimegreen);
  color: var(--volwhite);
}

/* ====== Max Width 1199px ====== */
@media (max-width: 1199px) {
  .section5-header-content {
    padding: 2.5rem 2rem;
    margin-right: 1rem;
    border-radius: 0 1rem 1rem 0;
  }

  .section5-row1-content {
    padding: 2.5rem;
    margin-top: -4rem;
  }

  .section5-row1-content p {
    margin-right: 3rem;
  }
}


/* ====== Max Width 991px ====== */
@media (max-width: 991px) {
  .section5-header-img {
    padding: 1rem;
  }

  .section5-header-img img {
    border-radius: 1rem;
    height: auto;
  }

  .section5-header-content {
    margin: 0 1rem 1rem 1rem;
    border-radius:1rem;
    padding: 2rem;
    text-align: center;
  }

  .section5-row1-content {
    padding: 2rem;
    margin-top: 0;
    text-align: center;
  }

  .section5-row1-content p {
    margin-right: 0;
  }
}


/* ====== Max Width 576px ====== */
@media (max-width: 576px) {
  .section5-header-content {
    padding: 1.5rem 1rem;
    border-radius: 1rem;
  }

  .section5-header-img {
    padding: 1rem;
  }

  .section5-header-content {
    margin: 0 1rem 1rem 1rem; ;
  }

  .section5-header-img img {
    border-radius: 1rem;
  }

  .section5-row1-content {
    padding: 1.5rem 1rem;
    margin-top: -1rem;
  }

  .section5-row2-content p {
    padding: 0.75rem 0.5rem;
  }

  .section5-row1-content p {
    margin-right: 0;margin-bottom: 0;
  }
}






@media (max-width: 1199px) {

  .section5-feature-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
  }

  .section5-feature-card img {
    margin-bottom: 0.75rem;
  }

 .section5-feature-card-left {
    padding-right: 1rem;
  }

  .section5-feature-card-right {
    padding-left: 1rem;
  }
}


@media (max-width: 991px) {

  .section5-feature-card {
    flex-direction: row;
    align-items: center;
  }

  .section5-feature-card-left {
    padding-right: 1rem;
  }

  .section5-feature-card-right {
    padding-left: 1rem;
  }
}


@media (max-width: 576px) {
 
  .section5-feature-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem;
  }

  .section5-feature-contents {
    padding-left: 0;
  }

  .section5-feature-card-left {
    padding-right: 0;
  } 

  .section5-feature-card-right {
    padding-left: 0;
  }
}

/* Section 6 */

.section6 {
  padding: 3rem 0;
  background-color: var(--volprimegreen);
  border-radius: 1.5rem;
}

.section6 h2 {
  font-size: 2rem;
  font-weight: 600;
}

.section6-cards {
  background-color: #ffffff28;
  padding: 1rem;
  border-radius: 1rem;
}

.section6-cards-col {
  padding-right: 1rem;
}

.section6-cards-col:last-child {
  padding-right: 0;
}

.section6-cards img {
  width: 4rem;
  height: 4rem;
}

.section6-cards-body h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--volxblack);
  padding: 1rem 0;
}


.section6-cards-body p {
  margin-bottom: 0;
  font-weight: 500;
  color: var(--volwhite);
}

.section6-footer p {
  color: var(--volwhite);
  
  font-weight: 500;
  padding-top: 2rem;
}

@media (max-width: 991px) {
  .section6-cards-col {
    padding-right: 0;
  }
}

@media (max-width: 576px) {
  .section6-cards-col {
    padding-right: 0;
  }
}

/* Section 7 */

.section7 {
  padding: 3rem 0;
}

.section7-left-col {
  padding-right: 3rem;
}

.section7-left {
  border: 2px solid var(--volprimeblue);
  border-radius: 1rem;
  padding: 2.5rem 3rem;
}

.section7-left img {
  width: 3rem;
  height: 3rem;
}

.section7-left p {
  color: var(--volprimeblue);
  font-size: 0.85rem;
  padding-top: 1.5rem;
  margin-bottom: 0;
}

.section7-right {
  padding: 0 3rem;
  border-left: 2px solid var(--voltext);
  font-size: 1rem;
  font-weight: 500;
  color: var(--voltext);
}

.section7-right img {
  width: 100%;
  height: auto;
  border-radius: 1rem;
}

.section7-right h5 {
  font-weight: 700;
  padding-top: 1rem;
}

.section7-right p {
margin-bottom: 0;
}

@media (max-width: 991px) {
  .section7-left-col {
    padding-right: 0;
  }

  .section7-right {
    padding: 0;
    padding-top: 1rem;
    border-left: none;
  }
}


@media (max-width: 576px) {
  .section7-left-col {
    padding-right: 0;
  }

  .section7-right {
    padding: 0;
    padding-top: 1rem;
    border-left: none;
  }
}


/* Section 8 */

.section8 {
  padding: 3rem 0;
  background-color: var(--volprimeblue);
  border-radius: 1.5rem;
}

.section8 h2 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--volwhite);
  text-align: center;
  margin-bottom: 2rem;
}

.section8 h2 span {
  color: #c3c3c3;
}

.section8-activity-card img {
  width: 100%;
  height: auto;
  /*border-radius: 1rem;*/
}

.section8-activity-card h6 {
  font-size: 0.8rem;
  font-weight: 600;
  padding-top: 0.5rem;
  color: #000000;
  padding-bottom: 0.5rem;
  min-height: 62px;
}
.section8-activity-cardcol{position: relative;}
 .section8-activity-card .event-loc-bottom{position: absolute;bottom: 0;left:0;width:100%;background:#c6c6c6;padding-left:0.7rem;}
.section8-activity-card{position: relative;}
.section8-activity-card .last-child{padding-bottom:1.3rem;}
.section8-activity-card-date {
  display: flex;
  justify-content: center;
  /*align-items: anchor-center;*/
  background-color: #fff;
  width: fit-content;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  align-items: center;
}

.section8-activity-card-date img{
  width: 0.87rem;
  height: 1.5rem;
  border-radius: none;
}

.section8-activity-card-date p {
  margin-bottom: 0;
  font-size: 0.7rem;
  font-weight: 500;
  padding-left: 0.5rem;
  color: #000;
}

.section8-btn {
  margin-top: 3rem;
  text-transform: uppercase;
}


.section8-btn a {
  background-color: var(--volwhite);
  color: var(--volprimeblue);
  padding: 1rem 2rem;
  border: 1px solid var(--volwhite);
  border-radius: 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.3s ease;
}

.section8-btn a:hover {
  background-color: transparent;
  border-color: var(--volwhite);
  color: var(--volwhite);
}

/* section 9 */

.section9 {
  padding: 3rem 0;
}

.section9-count-card {
  padding-right: 1rem;
}

.section9-count {
  height: 100%;
  width: 100%;
  border: 1px solid var(--volxblack);
  text-align: center;
  padding: 2rem 3rem;
  border-radius: 1rem;
  align-content: center;
}

.section9-count h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--volxblack);
}

.section9-count p {
  margin-bottom: 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--volprimeblue);
}

@media (max-width: 991px) {
  .section9-count-card {
    padding-right: 0;
  }
}

@media (max-width: 576px) {
  .section9-count-card {
    padding-right: 0;
  }
}

/* Footer */
.footer {
  padding: 3rem;
 /* background-color: var(--volprimegreen);*/
  border-radius: 1.5rem;
  background-color:#eeeeee;
}

.footer img {
  padding-bottom: 0;
}

.footer ul {
  padding-left: 0;
}

.footer ul li {
  color: #444444;
  font-size: 0.7rem;
  font-weight: 600;
  padding-bottom: 0.8rem;
}

footer .copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: left;
}

footer p {
  margin-bottom: 0;
  
  
  color: var(--volxblack)
}


@media (max-width: 991px) {
  .footer img {
    padding-bottom: 2rem;
  }
}


@media (max-width: 576px) {
  .footer img {
    padding-bottom: 2rem;
  }

  footer .copyright {
    display: block;
    text-align: center;
  }
}


/* Oppurtunities Page */

.oppurtunities-sec1 {
  padding: 0.5rem 0;
  background-color: var(--volprimeblue);
  margin-top: 7rem;
  border-radius: 1rem;
}

.oppurtunities-sec1 h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--volxblack);
  padding-bottom: 1rem;
  padding-bottom: 0;
  color: var(--volwhite);
}

.oppurtunities-sec2 {
  padding: 1.5rem 0 1.5rem 0;
}

.oppurtunities-sec1 h2 span {
  color: #c3c3c3;
}


.oppurtunities-sec2 input, .oppurtunities-sec2 select {
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid #ddd;
  color: var(--voltext);
  background-color: #ffffff;
  
}

.oppurtunities-sec2 select {
  width: 100%;
  height: auto;
  padding: 0.4rem 0.5rem;
  border-radius: 0.3rem;
}


.form-control:focus, .oppurtunities-sec2 select:focus, .oppurtunities-sec2 select:active{
  box-shadow: none;
  border-color: var(--volprimeblue);
}

.oppurtunities-sec2 input.form-control.One-time {
  width: 250px;
}

.oppurtunities-sec2 input::placeholder {
  color: #a3a2a2;
}

.oppurtunities-sec2 select::placeholder {
  color: #a3a2a2;
}

.oppurtunities-sec2 .filter {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--volprimeblue);
  align-content: right;
}

.oppurtunities-sec2 .filter img {
  color: var(--volviolet);
}


.oppurtunities-sec2-card-row {
  margin-top: 3rem;
  row-gap: 3rem;
}

.oppurtunities-sec2-card-row .col-lg-4 {
  padding-right: 4rem;
}

.oppurtunities-sec2-card-row .col-md-6 {
  padding-right: 1rem;
}


.section8-activity-card {
  box-sizing: border-box;                 
  padding: 0.5rem;                       
  border-radius: 0.5rem;                  
  transition: all 0.3s ease;
  background: transparent;
  overflow: hidden;    
}

.section8-activity-card:hover {
                 
    transform: translateY(-8px); 
}
/*.section8-activity-card:hover .section8-activity-card-date {
  background: rgba(0,0,0,0.6);                    
   
}*/

.oppurtunities-sec2-card {
  box-sizing: border-box;                 
  padding: 0.5rem;                       
  border-radius: 0.5rem;                  
  transition: all 0.3s ease;
  background: transparent;
  overflow: hidden;              
}


.oppurtunities-sec2-card:hover {
    background: #f8f4f4;                    
    transform: translateY(-3px);   
}

.oppurtunities-sec2-card-img img {
  width: 100%;
  height: auto;
  /*border-radius: 1rem;*/
}


.oppurtunities-sec2-card-content h6 {
  font-size: 0.8rem;
  font-weight: 600;
  color: #000000;
  padding-top: 1rem;
  min-height: 62px;
}

.oppurtunities-sec2-card-calender {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  color: #000000;
  font-size: 0.7rem;
  font-weight: 600;
  width: fit-content;
  padding:0.25rem 0.7rem;
  border-radius: 0.3rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  border: 1px solid #dddddd;
}

.oppurtunities-sec2-card-calender span {
  padding-left: 0.5rem;
}
 .oppurtunities-sec2-card-calender{transition: all 0.4s linear;}
/*.oppurtunities-sec2-card:hover .oppurtunities-sec2-card-calender{background-color: rgba(0,0,0,0.6);}*/
.oppurtunities-sec2-card-location {
  display: flex;
  justify-content: center;
  align-items: baseline;
  background-color: transparent;
  color: #000000;
  font-size: 0.7rem;
  font-weight: 500;
  width: fit-content;
  padding:0.25rem 0.7rem;
  border-radius: 0.3rem;
}

.oppurtunities-sec2-card-location span {
  padding-left: 0.5rem;
}

.oppurtunities-sec2-card-view-more {
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.oppurtunities-sec2-card-view-more a {
  background-color: transparent;
  color: var(--volprimeblue);
  padding: 1rem 2.5rem;
  border: 1px solid var(--volprimeblue);
  border-radius: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.3s ease;
  text-transform: uppercase;
}

.oppurtunities-sec2-card-view-more a:hover {
  background-color: var(--volprimeblue);
  border-color: var(--volprimeblue);
  color: var(--volwhite);
}

@media (max-width: 991px) {
  .oppurtunities-sec2-card-row .col-lg-4, .oppurtunities-sec2-card-row .col-md-6 {
    padding-right: 1rem;
  }

  .oppurtunities-sec2-card-row {
    row-gap: 2rem;
  }

  .oppurtunities-sec2 input.form-control.One-time {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .oppurtunities-sec2-card-row .col-lg-4, .oppurtunities-sec2-card-row .col-md-6 {
    padding-right: 0;
  }

  .oppurtunities-sec2 input.form-control.One-time {
    width: 100%;
  }
}


/*--------------------------------------------------------------------------- For NGO's Page Styles-------------------------------------------------------------------------------------------*/

/* For NGO's Hero Section */
.for-ngo-hero-wrapper {
  background-image: url('/images/vt-ngo-bnr.png');
  background-size: cover;
  background-position: center;
  border-radius: 1rem 0 0 1rem;
  padding: 5rem;
  position: relative;
  margin-left: 8.5rem;
  margin-top: 5rem;
}

.for-ngo-hero-content-card {
  background: #ffffffce;
  padding: 2rem;
  border-radius: 1.25rem;
  max-width: 800px;
  border: 2px solid #999;
  z-index: 5;
  position: relative;
  margin-left: -9rem;
}


/* Title Styling */
.for-ngo-hero-content-card h1 {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--volxblack);
  margin-bottom: 1rem;
  /*line-height: 1.3;*/
}

.for-ngo-hero-content-card h1 span {
  color: var(--volprimegreen);
  /* Match your design's pink */
}

/* Description */
.for-ngo-hero-content-card p {
  font-size: 0.85rem;
  color: var(--volxblack);
  font-weight: 500;
  margin-bottom: 2rem;
}



/* Buttons */
.for-ngo-hero-content-card a {
  background-color: var(--volwhite);
  color: var(--volxblack);
  border: none;
  border-radius: 0.75rem;
  padding: 1rem 1.5rem;
  font-size: 0.95rem;
  text-align: center;
  /*line-height: 1.4;*/
  transition: all 0.3s ease;
}



/* Large Devices - max 1199px */
@media (max-width: 1199px) {
  .for-ngo-hero-wrapper {
    margin-left: 0;
    padding: 3rem 2rem;
    border-radius: 1rem;
    /* Adjust for full layout on tablet */
  }

  .for-ngo-hero-content-card {
    margin-left: 0;
    padding: 2rem;
    max-width: 100%;
  }

  .for-ngo-hero-content-card a {
    padding: 0.9rem 1.2rem;

  }
}


/* Medium Devices - max 991px */
@media (max-width: 991px) {

  .for-ngo-hero-wrapper {
    margin-left: 0;
    padding: 3rem 2rem;
    border-radius: 1rem;
    /* Adjust for full layout on tablet */
  }

  .for-ngo-hero-content-card {
    margin-left: 0;
    padding: 2rem;
    max-width: 100%;
  }

  .for-ngo-hero-content-card h1 {
    text-align: center;
  }

  .for-ngo-hero-content-card p {
    text-align: center;
  }

}


/* Small Devices - max 576px */
@media (max-width: 576px) {

  html {
    font-size: 14px;
  }

  .for-ngo-hero-wrapper {
    padding: 2rem 1.5rem;
  }

  .for-ngo-hero-content-card {
    padding: 1.5rem;
    border-radius: 1rem;
  }

}


/* Section 2 */
.for-ngo-section2-feature-card-left {
  padding-right: 1rem;
}

.for-ngo-section2-feature-card-right {
  padding-left: 1rem;
}

.for-ngo-section2-feature-card {
  display: flex;
  justify-content: space-between;
  align-content: center;
  border: 2px solid var(--volprimegreen);
  border-radius: 1rem;
  padding: 2rem;
  height: 100%;
}

.for-ngo-section2-feature-card img {
  width: 2rem;
  height: 2rem;
}

.for-ngo-section2-feature-contents {
  padding-left: 1rem;
}

.for-ngo-section2-feature-contents h6 {
  color: var(--volprimegreen);
  font-size: 1rem;
  font-weight: 700;
  padding-bottom: 0.6rem;
}


.for-ngo-section2-feature-contents p {
  font-size: 0.85rem;
  color: var(--voltext);
  margin-bottom: 0;
}

.for-ngo-section2-footer p {
  font-size: 0.85rem;
  color: var(--volwhite);
  
  padding: 1rem 2rem;
  border-radius: 1rem;
}



@media (max-width: 1199px) {
  .for-ngo-section2-feature-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
  }

  .for-ngo-section2-feature-card img {
    margin-bottom: 0.75rem;
  }

  .for-ngo-section2-feature-card-left {
    padding-right: 1rem;
  }

  .for-ngo-section2-feature-card-right {
    padding-left: 1rem;
  }
}


@media (max-width: 991px) {

  .for-ngo-section2-feature-card {
    flex-direction: row;
    align-items: center;
  }

  .for-ngo-section2-feature-card-left {
    padding-right: 1rem;
  }

  .for-ngo-section2-feature-card-right {
    padding-left: 1rem;
  }
}


@media (max-width: 576px) {

  .for-ngo-section2-feature-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem;
  }

  .for-ngo-section2-feature-contents {
    padding-left: 0;
  }

  .for-ngo-section2-feature-card-left {
    padding-right: 0;
  }

  .for-ngo-section2-feature-card-right {
    padding-left: 0;
  }
}


/* For NGO's Section 3 */
.for-ngo-section3-heading h2 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--volxblack);
}

.for-ngo-section3-heading h2 span {
  color: var(--volprimegreen);
}

.for-ngo-section3 .step-card {
  border-radius: 1rem;
  padding: 1.7rem 1rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--volwhite);
  height: 100%;
}

.for-ngo-section3 .step-card-blue {
  background-color: var(--volprimeblue);
}

.for-ngo-section3 .step-card-green {
  background-color: var(--volpink);
}

.for-ngo-section3 .step-card-darkblue {
  background-color: var(--volviolet);
}


.for-ngo-section3 .step-card-container {
  padding-right: 1.5rem;
}

.for-ngo-section3 .step-card h5 {
  font-size: 1rem;
  padding-bottom: 0.5rem;
  font-weight: 600;
}

.for-ngo-section3 .step-card p {
  font-size: 0.8rem;
  margin-bottom: 0;
  padding: 0 0.9rem;
}

.for-ngo-section3 .shape {
  width: 22px;
  height: 22px;
  background: #fff;
  margin-top: auto;   /* pushes to bottom */
  align-self: flex-end;
}


.shape.circle {
  border-radius: 50%;
}


.shape.square {
  border-radius: 5px;
}


.shape.play {
 width: 32px;
  height: 33px;
  background: var(--volwhite);

  clip-path: path("M16 8 Q12 6 12 10 L12 30 Q12 34 16 32 L30 22 Q32 20 30 18 L16 8 Q14.8 7.2 14 8 Z");
}


.for-ngo-section3-footer p {
  font-size: 0.85rem;
  color: var(--voltext);
}



@media(max-width:991px) {
   .for-ngo-section3 .step-card-container {
    flex: 0 0 50%;   /* 2 per row */
    max-width: 50%;
  }

  
}

@media(max-width:576px) {
  .for-ngo-section3 .step-card-container {
    flex: 0 0 50%;   /* 2 per row */
    max-width: 50%;
    padding-right: 15px;
  }

  .shape {
    margin-left: 22.5rem;
  }

  
}

/* For NGO's Section 4 */

.for-ngo-section4 {
  margin-top: 11rem;
  background-color: #ffffff;
}

.for-ngo-section4 .for-ngo-section4-image {
  position: relative;
}

.for-ngo-section4 .for-ngo-section4-image img {
  border-radius: 0 1rem 1rem 0;
  margin-top: -9rem;
}

.for-ngo-section4 .for-ngo-section4-text h2{
  position: absolute;
  bottom: 8rem;
  right: 12rem;
  color: #fff;
  font-size: 2rem;
  font-weight: 600;
  width: fit-content;
  text-align: right;
  /*line-height: 1.4;*/
}


.for-ngo-section4 .for-ngo-section4-text h2 span {
  color: var(--volprimegreen);
}

.for-ngo-section4-feature {
  padding-right: 3rem;
  padding-left: 2rem;
}

.for-ngo-section4-feature-icon {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.for-ngo-section4-feature-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}


.for-ngo-section4-feature-content h6 {
  color: var(--volprimegreen);
  font-size: 1rem;
  font-weight: 700;
  padding-bottom: 0.25rem;
}

.for-ngo-section4-feature-content p {
  font-size: 0.85rem;
  color: var(--voltext);
  margin-bottom: 0;
}

.for-ngo-section4-content-footer p {
  font-size: 0.85rem;
  color: var(--voltext);
  margin-bottom: 0;
}

@media(max-width:1199px) {
  .for-ngo-section4 .for-ngo-section4-image {
    margin-right: 2rem;
  }

  .for-ngo-section4 .for-ngo-section4-text h2{
    bottom: 8rem !important;
    right: 2rem !important;
    text-align: right !important;
  }
}


@media (max-width: 991px) {
  .for-ngo-section4 .for-ngo-section4-image {
    margin-right: 2rem;
  }

  .for-ngo-section4 .for-ngo-section4-text h2{
    bottom: 5rem !important;
    right: 2rem !important;
    text-align: right !important;
  }
}



@media (max-width: 576px) {
  .for-ngo-section4 .hero-text {
    font-size: 1.4rem;
  }

  .for-ngo-section4 .for-ngo-section4-image {
    margin-right: 1rem;
  }

  .for-ngo-section4 .for-ngo-section4-text h2{
    bottom: 2rem !important;
    right: 4rem !important;
    text-align: center !important;
  }
  
  .for-ngo-section4-feature {
  padding-right: 0;
  padding-left: 0;
}
}



/* ------------------------------------------------------------------------------------- For Volunteers Page Styles------------------------------------------------------------------------------------------------------- */

/* For Volunteer Hero Section */
.for-volunteer-hero-wrapper {
  background-image: url('/images/vt-volun-bnr-re.png');
  background-size: cover;
  background-position: center;
  border-radius: 1rem 0 0 1rem;
  padding: 5rem;
  position: relative;
  margin-left: 8.5rem;
  margin-top: 5rem;
}

.for-volunteer-hero-content-card {
  background: #ffffffce;
  padding: 2rem;
  border-radius: 1.25rem;
  max-width: 800px;
  border: 2px solid #999;
  z-index: 5;
  position: relative;
  margin-left: -9rem;
}


/* Title Styling */
.for-volunteer-hero-content-card h1 {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--volxblack);
  margin-bottom: 1rem;
  /*line-height: 1.3;*/
}

.for-volunteer-hero-content-card h1 span {
  color: var(--volprimeblue);
  /* Match your design's pink */
}

/* Description */
.for-volunteer-hero-content-card p {
  font-size: 0.85rem;
  color: var(--volxblack);
  font-weight: 500;
  margin-bottom: 2rem;
}



/* Buttons */
.for-volunteer-hero-content-card a {
  background-color: var(--volwhite);
  color: var(--volxblack);
  border: none;
  border-radius: 0.75rem;
  padding: 1rem 1.5rem;
  font-size: 0.95rem;
  text-align: center;
  /*line-height: 1.4;*/
  transition: all 0.3s ease;
}



/* Large Devices - max 1199px */
@media (max-width: 1199px) {
  .for-volunteer-hero-wrapper {
    margin-left: 0;
    padding: 3rem 2rem;
    border-radius: 1rem;
    /* Adjust for full layout on tablet */
  }

  .for-volunteer-hero-content-card {
    margin-left: 0;
    padding: 2rem;
    max-width: 100%;
  }

  .for-volunteer-hero-content-card a {
    padding: 0.9rem 1.2rem;

  }
}


/* Medium Devices - max 991px */
@media (max-width: 991px) {

  .for-volunteer-hero-wrapper {
    margin-left: 0;
    padding: 3rem 2rem;
    border-radius: 1rem;
    /* Adjust for full layout on tablet */
  }

  .for-volunteer-hero-content-card {
    margin-left: 0;
    padding: 2rem;
    max-width: 100%;
  }

  .for-volunteer-hero-content-card h1 {
    text-align: center;
  }

  .for-volunteer-hero-content-card p {
    text-align: center;
  }

}


/* Small Devices - max 576px */
@media (max-width: 576px) {

  html {
    font-size: 14px;
  }

  .for-volunteer-hero-wrapper {
    padding: 2rem 1.5rem;
  }

  .for-volunteer-hero-content-card {
    padding: 1.5rem;
    border-radius: 1rem;
  }

}


/* For volunteer's Section 2 */
.for-volunteer-section2-paragraph {
  font-size: 0.95rem;
  color: var(--voltext);
}


.for-volunteer-section2-feature-card-left {
  padding-right: 1rem;
}

.for-volunteer-section2-feature-card-right {
  padding-left: 1rem;
}

.for-volunteer-section2-feature-card {
  display: flex;
  /*justify-content: space-between;*/
  align-content: center;
  border: 2px solid var(--volprimeblue);
  border-radius: 1rem;
  padding: 1rem;
  height: 100%;
}

.for-volunteer-section2-feature-card img {
  width: 2rem;
  height: 2rem;
}

.for-volunteer-section2-feature-contents {
  padding-left: 1rem;
}

.for-volunteer-section2-feature-contents h6 {
  color: var(--volprimeblue);
  font-size: 1rem;
  font-weight: 700;
  padding-bottom: 0.6rem;
}


.for-volunteer-section2-feature-contents p {
  
  color: var(--voltext);
  margin-bottom: 0;
}

.for-volunteer-section2-footer p {
  font-size: 0.85rem;
  color: var(--volwhite);
  background-color: var(--volprimeblue);
  padding: 1rem 2rem;
  border-radius: 1rem;
}



@media (max-width: 1199px) {
  .for-volunteer-section2-feature-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
  }

  .for-volunteer-section2-feature-card img {
    margin-bottom: 0.75rem;
  }

  .for-volunteer-section2-feature-card-left {
    padding-right: 1rem;
  }

  .for-volunteer-section2-feature-card-right {
    padding-left: 1rem;
  }
}


@media (max-width: 991px) {

  .for-volunteer-section2-feature-card {
    flex-direction: row;
    align-items: center;
  }

  .for-volunteer-section2-feature-card-left {
    padding-right: 1rem;
  }

  .for-volunteer-section2-feature-card-right {
    padding-left: 1rem;
  }
}


@media (max-width: 576px) {

  .for-volunteer-section2-feature-card {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem;
  }

  .for-volunteer-section2-feature-contents {
    padding-left: 0;
  }

  .for-volunteer-section2-feature-card-left {
    padding-right: 0;
  }

  .for-volunteer-section2-feature-card-right {
    padding-left: 0;
  }
}




/* For volunteer's Section 3 */

.for-volunteer-section3 {
  margin-top: 11rem;
  background-color: #ffffff;
}

.for-volunteer-section3 .for-volunteer-section3-image {
  position: relative;
}

.for-volunteer-section3 .for-volunteer-section3-image img {
  border-radius: 0 1rem 1rem 0;
  margin-top: -9rem;
}

.for-volunteer-section3 .for-volunteer-section3-text h2{
  position: absolute;
  bottom: 8rem;
  right: 12rem;
  color: #fff;
  font-size: 2rem;
  font-weight: 600;
  width: fit-content;
  text-align: right;
  /*line-height: 1.4;*/
}


.for-volunteer-section3 .for-volunteer-section3-text h2 span {
  color: var(--volprimeblue);
}

.for-volunteer-section3-feature {
 padding: 1rem;
 
}

.for-volunteer-section3-feature-icon {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.for-volunteer-section3-feature-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}



.for-volunteer-section3-feature-content h6 {
  color: var(--volprimeblue);
  font-size: 1rem;
  font-weight: 700;
  padding-bottom: 0.25rem;
}

.for-volunteer-section3-feature-content p {
  font-size: 0.95rem;
  color: var(--voltext);
  margin-bottom: 0;
}

.for-volunteer-section3-content-footer p {
  font-size: 0.85rem;
  color: var(--voltext);
  margin-bottom: 0;
}

@media(max-width:1199px) {
  .for-volunteer-section3 .for-volunteer-section3-image {
    margin-right: 2rem;
  }

  .for-volunteer-section3 .for-volunteer-section3-text h2{
    bottom: 8rem !important;
    right: 2rem !important;
    text-align: right !important;
  }
}

@media(max-width:991px) {
  .for-volunteer-section3 .for-volunteer-section3-image {
    margin-right: 2rem;
  }

  .for-volunteer-section3 .for-volunteer-section3-text h2{
    bottom: 5rem !important;
    right: 2rem !important;
    text-align: right !important;
  }
}


/* Responsive adjustments */
@media (max-width: 576px) {
  .for-volunteer-section3 .hero-text {
    font-size: 1.4rem;
  }

  .for-volunteer-section3 .for-volunteer-section3-image {
    margin-right: 1rem;
  }

  .for-volunteer-section3 .for-volunteer-section3-text h2{
    bottom: 2rem !important;
    right: 5rem !important;
    text-align: center !important;
  }

  .for-volunteer-section3-feature {
    padding-right: 0;
    padding-left: 0;
  }
}



/* For volunteer's Section 4 */
.for-volunteer-section4-heading h2 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--volxblack);
}

.for-volunteer-section4-heading h2 span {
  color: var(--volprimeblue);
}

.for-volunteer-section4 .step-card-container-row {
  column-gap: 50px;
}

.for-volunteer-section4 .step-card {
  border-radius: 1rem;
  padding: 1.7rem 1rem;
  padding-bottom: 1rem;
  width: 237px;
  height: -webkit-fill-available;
  text-align: center;
  align-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--volwhite);
}

.for-volunteer-section4 .step-card-blue {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--volprimeblue);
}

.for-volunteer-section4 .step-card-green {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--volpink);
}

.for-volunteer-section4 .step-card-darkblue {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--volviolet);
}

.for-volunteer-section4 .step-card-orange {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--volorange);
}


.for-volunteer-section4 .step-card-container {
  padding-right: 1.5rem;
}

.for-volunteer-section4 .step-card h5 {
  font-size: 1rem;
  padding-bottom: 0.5rem;
  font-weight: 600;
}

.for-volunteer-section4 .step-card p {
  font-size: 0.8rem;
  margin-bottom: 0;
}

.for-volunteer-section4 .shape {
  width: 22px;
  height: 22px;
  background: #fff;
  margin-left: 8rem;
}


.for-volunteer-section4 .shape.circle {
  border-radius: 50%;
}


.for-volunteer-section4 .shape.square {
  border-radius: 5px;
}


/* .for-volunteer-section4 .shape.play {
  background: none;
  width: 0;
  height: 0;
  border-left: 18px solid #fff;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
} */

.for-volunteer-section4 .shape.play {
  width: 32px;
  height: 33px;
  background: var(--volwhite);

  clip-path: path("M16 8 Q12 6 12 10 L12 30 Q12 34 16 32 L30 22 Q32 20 30 18 L16 8 Q14.8 7.2 14 8 Z");
}



.for-volunteer-section4-btn a{
  background-color: transparent;
  color: var(--volprimeblue);
  padding: 1rem 2rem;
  border: 1px solid var(--volprimeblue);
  border-radius: 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.3s ease;
}


.for-volunteer-section4-btn a:hover {
  background-color: var(--volprimeblue);
  border-color: var(--volprimeblue);
  color: var(--volwhite);
}






.for-volunteer-section4-footer p {
  font-size: 0.85rem;
  color: var(--voltext);
}

@media(max-width:1199px) {
  .for-volunteer-section4 .step-card-container-row {
    column-gap: 32px;
  }

  .for-volunteer-section4 .step-card {
    width: 185px !important;
    /* Full width */
    margin: 0;
    /* spacing between */
  }


}

@media(max-width:991px) {
  .for-volunteer-section4 .step-card-container-row {
    column-gap: 0px;
  }

  .for-volunteer-section4 .step-card {
    width: 230px !important;
    /* Full width */
    margin: 0;
    /* spacing between */
  }


}

@media(max-width:576px) {
  .for-volunteer-section4 .step-card-container-row {
    column-gap: 0px;
  }

  .for-volunteer-section4 .step-card {
    width: 190px !important;
    /* Full width */
    margin: 0;
    /* spacing between */
  }

  .for-volunteer-section4 .step-card-container {
    padding-right: 0;
    padding-left: 0;
  }

  .for-volunteer-section4 .shape {
    margin-left: auto;
    /* align to right */
    margin-right: 0;
    align-self: flex-end;
  }


}


@media(max-width:400px) {
  .for-volunteer-section4 .step-card {
    width: 165px !important;
    margin: 0;
  }
}


/* For Volunteer Section 5 */
.for-volunteer-section5-container {
  border: 1px solid var(--volprimeblue);
  border-radius: 1rem;
  padding: 3rem;
}

.for-volunteer-section5-heading h2 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--volxblack);
  padding-bottom: 1rem;
}

.for-volunteer-section5-heading h2 span {
  color: var(--volprimeblue);
}

.for-volunteer-section5-para p {
  font-size: 0.85rem;
  color: var(--voltext);
  text-align: left;
  padding-bottom: 1rem;
}

.for-volunteer-section5-btn p {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: 500;
  color: var(--voltext);
  border: 1px solid var(--voltext);
  border-radius: 0.5rem;
  padding: 0 1rem;
  text-align: center;
  height: 100%;
}

@media(max-width:9916px) {
  .for-volunteer-section5 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media(max-width:576px) {
  .for-volunteer-section5 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}


/* For Volunteer Section 6 */

.for-volunteer-section6 {
  margin-top: 11rem;
  background-color: #ffffff;
}


.for-volunteer-section6 .for-volunteer-section6-image {
  position: relative;
}

.for-volunteer-section6 .for-volunteer-section6-image img {
  border-radius: 1rem 0 0 1rem;
  margin-top: -9rem;
}

.for-volunteer-section6 .for-volunteer-section6-text h2{
  position: absolute;
  bottom: 8rem;
  left: 12rem;
  color: #fff;
  font-size: 2rem;
  font-weight: 600;
  width: fit-content;
  text-align: left;
  /*line-height: 1.4;*/
}

.for-volunteer-section6-content-innercontainer {
  padding: 0 1rem;
}


.for-volunteer-section6 .for-volunteer-section6-text h2 span {
  color: var(--volprimeblue);
}

.for-volunteer-section6-feature {
  padding-right: 3rem;
  padding-left: 2rem;
}

.for-volunteer-section6-feature-icon {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.for-volunteer-section6-feature-icon img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}



.for-volunteer-section6-feature-content h6 {
  color: var(--volprimeblue);
  font-size: 1rem;
  font-weight: 700;
  padding-bottom: 0.25rem;
}

.for-volunteer-section6-feature-content p {
  font-size: 0.85rem;
  color: var(--voltext);
  margin-bottom: 0;
}

.for-volunteer-section6-content-footer p {
  font-size: 0.85rem;
  color: var(--voltext);
  margin-bottom: 0;
}

@media(max-width:1199px) {
  .for-volunteer-section6 .for-volunteer-section6-image {
    margin-left: 2rem;
  }

  .for-volunteer-section6 .for-volunteer-section6-text h2{
    bottom: 8rem !important;
    left: 2rem !important;
    text-align: left !important;
  }
}

@media(max-width:991px) {
  .for-volunteer-section6 .for-volunteer-section6-image {
    margin-left: 2rem;
  }

  .for-volunteer-section6 .for-volunteer-section6-text h2{
    bottom: 5rem !important;
    left: 2rem !important;
    text-align: left !important;
  }
}


@media (max-width: 576px) {
  .for-volunteer-section6 .hero-text {
    font-size: 1.4rem;
  }

  .for-volunteer-section6 .for-volunteer-section6-image {
    margin-left: 1rem;
  }

  .for-volunteer-section6 .for-volunteer-section6-text h2{
    bottom: 2rem !important;
    left: 5rem !important;
    text-align: center !important;
  }

  .for-volunteer-section6-feature {
    padding-right: 0;
    padding-left: 0;
  }

  .for-volunteer-section6-content-innercontainer {
    padding: 0;
  }
}



/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* NGO Registration Form */

/* Page */
.ngo-registration-page {
  background-image: url('/images/NGO Reg Banner.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 100vh;
}

/* Left */
.ngo-registration-left {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2rem;
}

/* Right */
.ngo-registration-right {
  background-color: #459d68d3;
  padding: 3rem 5rem;
  color: var(--volwhite);
  border-radius: 3rem 0 0 3rem;
  min-height: 100vh;
}

.ngo-registration-right-content-header h5 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--volwhite);
}

.ngo-registration-right-content-header p {
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

/* Form */
.ngo-registration-form input,
.ngo-registration-form textarea {
  margin-bottom: 0.5rem;
  border: none;
  border-radius: 0.375rem;
}

.ngo-registration-form input::placeholder,
.ngo-registration-form textarea::placeholder {
  color: #666;
  font-size: 0.75rem;
}

.ngo-registration-form input,
.ngo-registration-form textarea {
  font-size: 0.75rem;
}

.ngo-registration-form-footer button {
  background-color: var(--volwhite);
  color: var(--volprimegreen);
  font-weight: 600;
  width: fit-content;
  font-size: 0.85rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.375rem;
}

.ngo-registration-form p {
  font-size: 0.8rem;
}

.ngo-registration-form p a {
  color: var(--volwhite);
}

/* Select */
.form-select {
  font-size: 0.75rem;
  border-radius: 0.375rem 0 0 0.375rem;
  background-color: #ffffff;
  color: var(--voltext);
  border-color: var(--volprimegreen);
  padding: 0.33rem 0.5rem;

  appearance: none;
  /* removes default arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("/images/down\ arrow\ white.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;

}

.form-select option {
  background-color: white;
  color: black;
}




.input-with-icon {
  position: relative;
  display: inline-block;
  width: 100%; /* optional */
}

.input-with-icon .dob {
  padding-right: 40px; /* space for icon */
}

.input-with-icon .icon {
  position: absolute;
  right: 12px;
  top: 30%;
  transform: translateY(-50%);
  pointer-events: none; /* prevent blocking input clicks */
}

.input-with-icon .icon img {
  width: 16px;
  height: 16px;
}





.login_content .form-check {
  display: flex;
  justify-content: center;
  min-height: 1.5rem;
  padding-left: 1.5em;
  margin-bottom: .125rem;
}

.form-check-label {
  font-size: 0.75rem;
}

.form-check-input {
  font-size: 0.75rem;
}

.form-mobile {
  border-radius: 0 0.375rem 0.375rem 0 !important;
}

.form-select:focus {
  border: none;
  box-shadow: none;
}

/* Toolbar */
.toolbar {
  background-color: var(--volprimegreen);
  border-radius: 8px 8px 0 0;
  padding: 0.4rem 0.6rem;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  /* keep in one row */
}

/* Groups with divider */
.toolbar-tool {
  display: flex;
  align-items: center;
  gap: 4px;
  /* padding-right: 6px; */
  /* margin-right: 6px; */
  /* border-right: 1px solid white; */
}

/* Generic tool button */
.tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.tool-btn img {
  max-width: 14px;
  max-height: 14px;
  display: block;
}

.tool-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Select styling */
.toolbar-select {
  background: transparent;
  border: none;
  color: #fff;
  font-weight: 500;
  outline: none;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding: 4px 20px 4px 6px;
  height: 28px;
  line-height: 1.3;

  background-image: url("/images/down arrow white.svg");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 12px;

  /* border-right: 1px solid white; */

  font-size: 0.75rem;
}

.toolbar-select option {
  color: #000;
  /* dropdown text visible */
}


/* Profile textarea */
.profile-editor textarea {
  border-radius: 0 0 0.375rem 0.375rem;
}

/* ===================
   Responsive Queries
   =================== */

/* For tablets (≤1199px) */
@media (max-width: 1199px) {
  .ngo-registration-right {
    padding: 2rem 3rem;
    min-height: 100vh;
  }
}

/* For medium devices (≤991px) */
@media (max-width: 991px) {
  .ngo-registration-left {
    display: flex;
    justify-content: center;
  }

  .ngo-registration-right {
    border-radius: 0;
    padding: 2rem;
  }
}

/* For small devices (≤576px) */
@media (max-width: 576px) {
  .ngo-registration-right {
    padding: 1.5rem;
  }

  .toolbar {
    flex-wrap: wrap;
    gap: 4px;
  }

  .toolbar select {
    font-size: 0.7rem;
  }

  .ngo-registration-form-footer button {
    width: 100%;
  }
}






/* NGO Login Page */

.ngo-login-section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('/images/NGO\ Login\ Banner.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Left Section (Form) */
.ngo-login-section-left {
  background: rgba(69, 157, 104, 0.9);
  border-radius: 0 2rem 2rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 6rem;
  color: #fff;
  height: 100vh;
  text-align: center;
}

.ngo-login-section-left h5 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--volwhite);
}

.ngo-login-section-left p {
  margin-bottom: 2rem;
  font-size: 0.75rem;
}

.ngo-login-section-left .form-control {
  margin-bottom: 1rem;
  border-radius: 0.5rem;
}

.ngo-login-section-left .form-check-label {
  margin-left: 0.3rem;
}

.ngo-login-section-left .btn {
  background-color: var(--volwhite);
  color: var(--volprimegreen);
  font-weight: 600;
  width: fit-content;
  font-size: 0.85rem;
  padding: 0.5rem 1.2rem;
  border-radius: 0.375rem;
}

.ngo-login-section-left a {
  color: #fff;
  text-decoration: underline;
}

/* Right Section (Image) */
.ngo-login-section-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ngo-login-section-right img.logo {
  position: absolute;
  top: 20px;
  right: 30px;
  width: 150px;
}

.ngo-login-form input::placeholder {
  font-size: 0.75rem;
}


.ngo-login-form input {
  font-size: 0.75rem;
}

/* ========================= */
/* RESPONSIVE BREAKPOINTS */
/* ========================= */

/* Large devices (≤1199px) */
@media (max-width: 1199px) {
  .ngo-login-section-left {
    padding: 2.5rem 4rem;
  }

  .ngo-login-section-left h5 {
    font-size: 1.15rem;
  }

  .ngo-login-section-left p {
    font-size: 0.7rem;
  }

  .ngo-login-section-right img.logo {
    width: 120px;
  }
}

/* Medium devices (≤991px) */
@media (max-width: 991px) {
  .ngo-login-section {
    height: 100vh;
    /* padding: 2rem 0; */
  }

  .ngo-login-section .row {
    flex-direction: column-reverse;
    margin-top: -6rem;
  }

  .ngo-login-section-left {
    border-radius: 1rem 1rem 0 0;
    height: auto;
    padding: 2rem 3rem;
  }

  .ngo-login-section-right {
    border-radius: 0 0 1rem 1rem;
    min-height: 300px;
  }

  .ngo-login-section-right img.logo {
    position: relative;
    top: auto;
    right: auto;
    margin: 1rem auto;
    display: block;
  }
}

/* Small devices (≤576px) */
@media (max-width: 576px) {
  .ngo-login-section-left {
    padding: 1.5rem;
  }

  .ngo-login-section-left h5 {
    font-size: 1rem;
  }

  .ngo-login-section-left p {
    font-size: 0.65rem;
  }

  .ngo-login-section-left .btn {
    width: 100%;
    font-size: 0.8rem;
  }

  .ngo-login-section-right {
    min-height: 200px;
  }

  .ngo-login-section-right img.logo {
    width: 100px;
  }
}





/* Volunteer Registration Page */

/* Page */
.volunteer-registration-page {
  background-image: url('/images/Volunteer\ Reg\ Banner.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 100vh;
}

/* Left */
.volunteer-registration-left {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2rem;
}

/* Right */
.volunteer-registration-right {
  background-color: #3f8eb6e2;
  padding: 3rem 5rem;
  color: var(--volwhite);
  border-radius: 3rem 0 0 3rem;
  min-height: 100vh;
}



.volunteer-registration-right-content-header h5 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--volwhite);
}

.volunteer-registration-right-content-header p {
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

/* Form */
.volunteer-registration-form input,
.volunteer-registration-form textarea {
  margin-bottom: 0.5rem;
  border: none;
  border-radius: 0.375rem;
}

.volunteer-registration-form input::placeholder,
.volunteer-registration-form textarea::placeholder {
  color: #666;
  font-size: 0.75rem;
}

.volunteer-registration-form input,
.volunteer-registration-form textarea {
  font-size: 0.75rem;
}

.volunteer-registration-form-footer button {
  background-color: var(--volwhite);
  color: var(--volprimeblue);
  font-weight: 600;
  width: fit-content;
  font-size: 0.75rem;
  padding: 0.3rem 0.75rem;
  border-radius: 0.375rem;
}

.volunteer-registration-form p {
  font-size: 0.8rem;
  margin:0.5rem 0!important;
}

.volunteer-registration-form p a {
  color: var(--volwhite);
}

/* Select */
.volunteer-registration-page .form-select {
  font-size: 0.75rem;
  border-radius: 0.375rem 0 0 0.375rem;
  background-color: #ffffff;
  color: var(--voltext);
  border-color: #fff;
  padding: 0.3rem 0.5rem;

  appearance: none;
  /* removes default arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("/images/down\ arrow\ white.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;

}

.volunteer-registration-page .form-select option {
  background-color: white;
  color: #000;
}

.volunteer-registration-page .form-check {
  display: flex;
  justify-content: center;
  min-height: 1.5rem;
  padding-left: 1.5em;
  margin-bottom: .125rem;
}

.volunteer-registration-page .form-check-label {
  font-size: 0.75rem;
}

.volunteer-registration-page .form-check-input {
  font-size: 0.75rem;
}

.volunteer-registration-page .form-mobile {
  border-radius: 0 0.375rem 0.375rem 0 !important;
}

.volunteer-registration-page  .form-select:focus {
  border: none;
  box-shadow: none;
}

.volunteer-registration-form-footer-social {
  display: flex;
  justify-content: center;
}

.volunteer-registration-form-footer-social img {
  width: 40px;
  height: 40px;
}


/* ===================
   Responsive Queries
   =================== */

/* For tablets (≤1199px) */
@media (max-width: 1199px) {
  .volunteer-registration-right {
    padding: 2rem 3rem;
    height: 100vh;
  }
}

/* For medium devices (≤991px) */
@media (max-width: 991px) {
  .volunteer-registration-left {
    display: flex;
    justify-content: center;
  }

  .volunteer-registration-right {
    border-radius: 0;
    padding: 2rem;
  }
}

/* For small devices (≤576px) */
@media (max-width: 576px) {
  .volunteer-registration-right {
    padding: 1.5rem;
  }

  .volunteer-registration-form-footer button {
    width: 100%;
  }
  
  .volunteer-registration-right-inner {
      margin-top: -7rem;
  }
}



/* Volunteer Login Page */


.volunteer-login-section {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('/images/Volunteer Login Banner.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Left Section (Form) */
.volunteer-login-section-left {
  background: #3f8eb6e2;
  border-radius: 0 2rem 2rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 6rem;
  color: #fff;
  height: 100vh;
  text-align: center;
}

.volunteer-login-section-left h5 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--volwhite);
}

.volunteer-login-section-left p {
  margin-bottom: 2rem;
  font-size: 0.75rem;
}

.volunteer-login-section-left .form-control {
  margin-bottom: 1rem;
  border-radius: 0.5rem;
}

.volunteer-login-section-left .form-check-label {
  margin-left: 0.3rem;
}

.volunteer-login-section-left .btn {
  background-color: var(--volwhite);
  color: var(--volprimeblue);
  font-weight: 600;
  width: fit-content;
  font-size: 0.85rem;
  padding: 0.5rem 1.2rem;
  border-radius: 0.375rem;
}

.volunteer-login-section-left a {
  color: #fff;
  text-decoration: underline;
}

/* Right Section (Image) */
.volunteer-login-section-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.volunteer-login-section-right img.logo {
  position: absolute;
  top: 20px;
  right: 30px;
  width: 150px;
}

.volunteer-login-form input::placeholder {
  font-size: 0.75rem;
}


.volunteer-login-form input {
  font-size: 0.75rem;
}

.form-check .form-check-input {
    margin-left: -1.55rem;
}

/* ========================= */
/* RESPONSIVE BREAKPOINTS */
/* ========================= */

/* Large devices (≤1199px) */
@media (max-width: 1199px) {
  .volunteer-login-section-left {
    padding: 2.5rem 4rem;
  }

  .volunteer-login-section-left h5 {
    font-size: 1.15rem;
  }

  .volunteer-login-section-left p {
    font-size: 0.7rem;
  }

  .volunteer-login-section-right img.logo {
    width: 120px;
  }
}

/* Medium devices (≤991px) */
@media (max-width: 991px) {
  .volunteer-login-section {
    height: 100vh;
    /* padding: 2rem 0; */
  }

  .volunteer-login-section .row {
    flex-direction: column-reverse;
    margin-top: -6rem;
  }

  .volunteer-login-section-left {
    border-radius: 1rem 1rem 0 0;
    height: auto;
    padding: 2rem 3rem;
  }

  .volunteer-login-section-right {
    border-radius: 0 0 1rem 1rem;
    min-height: 300px;
  }

  .volunteer-login-section-right img.logo {
    position: relative;
    top: auto;
    right: auto;
    margin: 1rem auto;
    display: block;
  }
}

/* Small devices (≤576px) */
@media (max-width: 576px) {
  .volunteer-login-section-left {
    padding: 1.5rem;
  }

  .volunteer-login-section-left h5 {
    font-size: 1rem;
  }

  .volunteer-login-section-left p {
    font-size: 0.65rem;
  }

  .volunteer-login-section-left .btn {
    width: 100%;
    font-size: 0.8rem;
  }

  .volunteer-login-section-right {
    min-height: 200px;
  }

  .volunteer-login-section-right img.logo {
    width: 100px;
  }
  .form-check .form-check-input {
    margin-left: -2rem;
}
}



/* Forgot Password Page */

.forgot-password-page {
  background-image: url('/images/Reset Password.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 100vh;
}

/* Left */
.forgot-password-left {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 2rem;
}

/* Right */
.forgot-password-right {
  background-color: #459d68d3;
  padding: 3rem 5rem;
  color: var(--volwhite);
  border-radius: 3rem 0 0 3rem;
  min-height: 100vh;
}

.forgot-password-right-content-header h5 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--volwhite);
}

.forgot-password-right-content-header p {
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

/* Form */
.forgot-password-form input{
  margin-bottom: 1rem;
  border: none;
  border-radius: 0.375rem;
}

.forgot-password-form input::placeholder{
  color: #666;
  font-size: 0.75rem;
}

.forgot-password-form input{
  font-size: 0.75rem;
}

.forgot-password-form-footer button {
  background-color: var(--volwhite);
  color: var(--volprimegreen);
  font-weight: 600;
  width: fit-content;
  font-size: 0.75rem;
  padding: 0.35rem 1.5rem;
  border-radius: 0.375rem;
}

.forgot-password-form p {
  font-size: 0.8rem;
}

.forgot-password-form p a {
  color: var(--volwhite);
}



/* ===================
   Responsive Queries
   =================== */

/* For tablets (≤1199px) */
@media (max-width: 1199px) {
  .forgot-password-right {
    padding: 2rem 3rem;
  }
}

/* For medium devices (≤991px) */
@media (max-width: 991px) {
  .forgot-password-left {
    display: flex;
    justify-content: center;
  }

  .forgot-password-right {
    border-radius: 0;
    padding: 2rem 10rem;
    min-height: 50vh;
  }
}

/* For small devices (≤576px) */
@media (max-width: 576px) {
  .forgot-password-right {
    padding: 1.5rem 5rem;
  }
  
}


/* Fix for iPhone SE and very small screens (≤375px) */
@media (max-width: 375px) {
  .forgot-password-right {
    padding: 0.8rem;
    border-radius: 0;
    min-height: auto;
  }

  .forgot-password-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem; /* space between inputs */
  }

  .forgot-password-form input {
    width: 100% !important;
    font-size: 0.75rem;
    padding: 0.5rem;
    border-radius: 0.375rem;
  }

  /* Fix two-input rows (like First/Last Name) */
  .forgot-password-form .row {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .forgot-password-form-footer button {
    font-size: 0.85rem;
    padding: 0.6rem;
    border-radius: 0.375rem;
  }

  /* Center heading + logo */
  .forgot-password-right-content-header {
    text-align: center;
    margin-bottom: 1rem;
  }

}



/*----------------------------------------------------------------------------------------Opportunities New Page------------------------------------------------------------------------------------------------------*/


/* Header Section */
.opportunities-header {
  padding: 0.5rem 0;
  background-color: var(--volprimeblue);
  margin-top: 4rem;
  border-radius: 1rem;
}

.opportunities-header h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--volwhite);
}

/* Opportunity Details */
.opportunity-details-image img {
  width: 100%;
  height: auto;
}

.opportunity-details-share p {
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.opportunity-details-share-icons {
  display: flex;
  gap: 0.5rem;
}

.opportunity-details-share-icons img {
  width: 40px;
  height: 40px;
}

.opportunity-details-description p {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0 1rem;
  line-height: 1.3;
  text-align: justify;
}

.opportunity-details-content, .opportunity-details-image{
  padding-right: 1rem;
}

.opportunity-details-share.mt-3 {
    background: #f6f6f6;
    border-radius: 0.45rem;
    padding: 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* Sidebar */
.opportunity-sidebar {
  background-color: var(--volprimegreen);
  border-radius: 1rem;
  padding: 1.4rem 2rem;
  height: fit-content;
}

.opportunity-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.opportunity-sidebar li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--volwhite);
  padding: 0.6rem 0;
}

.opportunity-sidebar li:nth-child(5) {
    border-bottom: none;
}

.opportunity-sidebar li:last-child {
  border-bottom: none;
}

.opportunity-sidebar li img {
  width: 24px;
  height: 24px;
}

.opportunity-sidebar li p {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--volwhite);
  padding-left: 0.5rem;
  margin-bottom: 0;
}

.opportunity-sidebar-btn {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--volprimeblue);
  background-color: var(--volwhite);
  border: 1px solid var(--volwhite);
  border-radius: 0.3rem;
  text-transform: uppercase;
  display: block;
  width: 100%;
  padding: 0.3rem 0.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.opportunity-sidebar-btn:hover {
  border: 1px solid var(--volwhite);
  background-color: transparent;
  color: var(--volwhite);
}

.opportunity-details-extra {
    padding-right: 2rem;
}


.opportunity-details-extra-feature img {
  width: 24px;
  height: 24px;
}

.opportunity-details-extra-feature p {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--volprimeblue);
  margin-bottom: 0;
  padding-left: 0.3rem;
}

.opportunity-details-extra-feature span.opportunity-details-extra-feature-label {
  color: #000000;
  background-color: #dddddd;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.opportunity-details-extra-feature span.opportunity-details-extra-feature-nolabel {
  color: #464646;
}

.opportunity-details-extra-feature-container {
  display: flex;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #dddddd;
}

.opportunity-details-extra-feature-container:first-child {
    border-top: 1px solid #ddd;
}

.opportunity-details-extra-feature:nth-child(1) {
  width: 100%;
}


.opportunity-details-extra-feature:last-child {
  width: 100%;
}

.opportunity-details-extra-feature-container:last-child {
  border-bottom: 0;
}

.opportunity-details-extra-feature {
  display: flex;
  align-items: center;
}



.opportunity-details-extra-right h5 {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--volprimeblue);
    padding-top: 1rem;
    padding-bottom: 0.5rem;
}

.opportunity-details-extra-right h2 {
    font-size: 1.5rem;
    font-weight: 600;
    padding-bottom: 0.5rem;
}

.opportunity-details-extra-right p {
    font-size: 0.8rem;
    font-weight: 500;
}


@media(max-width:1199px) {
  .opportunities-header {
    margin-top: 4rem;
  }
}

@media(max-width:991px) {
  .opportunities-header {
    margin-top: 4rem;
  }

  .opportunity-details-content, .opportunity-details-image {
    padding-right: 0;
  }

  .opportunity-details-description {
    margin-top: 1rem;
  }

  .opportunity-details-extra-feature:nth-child(1) {
    width: 100%;
  }
  .opportunity-details-description p {
      padding: 0;
  }
}


@media(max-width:576px) {
  .opportunities-header {
    margin-top: 4.5rem;
  }

  .opportunity-details-content, .opportunity-details-image {
    padding-right: 0;
  }

  .opportunity-details-description {
    margin-top: 1rem;
  }

  .opportunity-details-extra-feature:nth-child(1) {
    width: 100%;
  }
  
  .opportunity-details-description p {
      padding: 0;
  }
}




/* ---------------------------------------------- Profile Page ------------------------------------------------------- */


 .form-section-title h5{
      font-weight: 600;
      margin-top: 2.3rem;
      color: #666;
      font-size: 0.9rem;
    }

     .nav-tabs {
      border-bottom: 0;
      margin-left: 0.8rem;
     }
 .nav-tabs .nav-link {
  border: 1px solid #666;
  color: #666;
  margin-right: 1rem;
  font-size: 1rem;
  font-weight: 600;
  border-bottom: 0;
  margin-bottom: 0.01rem;
  padding: 0.3rem 2rem;
 }

 .nav-tabs .nav-link:hover {
  border: 1px solid var(--volprimeblue);
  color: var(--volwhite);
  background-color: var(--volprimeblue);
  border-bottom: 0;
 }

    .nav-tabs .nav-link.active {
      background-color: var(--volprimeblue);
      color: #fff;
      border-color: var(--volprimeblue);
    }

    .tab-content {
      padding: 1.5rem 2.5rem;
      border: 1px solid #666;
      border-radius: 0.5rem;
    }


    .card {
      border-radius: 0;
      border: 0;
    }
    .save-btn {
      background-color: var(--volprimeblue);
      color: var(--volwhite);
      border: 1px solid var(--volprimeblue);
      padding: 0.25rem 1rem;
      border-radius: 0.2rem;
      font-size: 0.8rem;
      font-weight: 600;
      transition: all 0.3s ease;
    }
    .save-btn:hover {
      background-color: transparent;
      color: var(--volprimeblue);
      border: 1px solid var(--volprimeblue);
    }

    .profile-page {
      margin-top: 4.5rem;
      padding-bottom: 3rem;
    }

    .profile-page form input, .profile-page form select {
      border-color: var(--volprimeblue);
      font-size: 0.8rem;
    color: var(--volxblack);
    margin-top: 0.5rem;
    }

 .profile-page form input::placeholder {
    font-size: 0.8rem;
    color: #666;
 }


 .profile-page form label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
    margin-bottom: 0;
    line-height: 1.2;
 }

 .profile-page form p {
  font-size: 0.65rem;
    color: #666;
    margin-bottom: 0.5rem;
    line-height: 1.2;
 }

 .profile-page .tab-pane p {
  font-size: 0.5rem;
    color: #666;
    margin-bottom: 0;
    line-height: 1.2;
 }

 .form-control {
  padding: 0.3rem .75rem;
 }

 .column-input {
  padding-right: 1rem;
  margin-top: 0.6rem;
 }


 .Checkbox input[type="checkbox"] {
  width: 24px;
  height: 24px;
  accent-color: var(--volprimeblue);
  appearance: none; /* removes the default browser style */
  -webkit-appearance: none;
   border: 1px solid var(--volprimeblue); /* custom border color */
 }

 .profile-form-select {
  background-image: url("/images/Down Arrow black.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
}

.profile-page .custom-file {
  position: relative;
  width: 100%;
}

.profile-page .custom-file-input {
  width: 100%;
  border: 1px solid var(--volprimeblue);
  border-radius: 0.375rem;
  padding: 0.3rem 1.8rem 0.3rem 0.6rem; 
  background-color: #fff;
  cursor: pointer;

 
  background-image: url("/images/Attachment green.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px;

  color: transparent;
}


.profile-page .custom-file-input::file-selector-button {
  display: none; 
}


 @media(max-width:576px) {
  .column-input {
    padding-right: 0;
  }
 }

 


/*new css added*/
.logo { padding: 0; }
.fixed-top { height:4rem;}
.mobile-nav-toggle {position: fixed; top: 25px;}
.hero-wrapper {margin-top: 4.5rem;}
.section2 {padding: 2rem 0;}
.section3 {padding: 2rem 0;margin-top:2rem;}
.section4 {padding: 2rem 0;}
.section5-row1-content {padding: 2rem;}
.section6 {padding: 2rem 0;margin-top:2rem;}
.section8 {padding: 2rem 0;}
.section8-btn {margin-right: 5rem;}
.section9 {padding: 2rem 0;}

@media(max-width:991px) { 
.logo { padding-top: 1rem;}
}

/*Opportunities Page*/
.oppurtunities-sec1 {margin-top: 4.5rem;}
.oppurtunities-sec2 {padding: 1rem 0;}
.oppurtunities-sec2-card-row {margin-top: 1rem;row-gap:1rem;}

/*For Volunteers Page*/
.for-volunteer-hero-wrapper {margin-top: 4.5rem;}
section.for-volunteer-section2 {margin-top: 1.5rem !important;}
.for-volunteer-section2-paragraph {margin-bottom: 0 !important;}
section.for-volunteer-section2.mt-5 .row:nth-child(2) {row-gap: 2rem !important;}
.for-volunteer-section2-footer {margin-top: 1.5rem !important;}
.for-volunteer-section2-footer-content {background-color: var(--volprimeblue);padding: 1rem 2rem; border-radius: 1rem;}
.for-volunteer-section2-footer p {
font-size: 0.85rem;
color: var(--volwhite);
margin-bottom:0;
/* background-color: var(--volprimeblue); */
/* padding: 1rem 2rem; */
/* border-radius: 1rem; */
}
.for-volunteer-section3 {margin-top: 10rem;}
.for-volunteer-section3-content-container .row {margin-top: 0 !important;}
.for-volunteer-section3-content-footer{padding-bottom: 0 !important;}
.for-volunteer-section6 {margin-top: 10rem;}

/*For NGO’s Page*/
.for-ngo-hero-wrapper {margin-top: 4.5rem;}
.for-ngo-section2 {margin-top: 2rem !important;}
.for-ngo-section2 .row:first-child {row-gap: 2rem !important;}
.for-ngo-section4 {margin-top: 9rem;}
.for-ngo-section2-footer p {
  font-size: 0.85rem;
  color: var(--voltext);
  /*background-color: var(--volorange);*/
  /*padding: 1rem 2rem;*/
  /*border-radius: 1rem;*/
}
.for-ngo-section2-footer-content {  background-color:#fff; padding: 0 2rem; }
for-ngo-section2-footer { margin-top: 2rem !important;}
.for-ngo-section3 {margin-top: 2rem !important;}

@media (max-width: 576px) {
  .for-volunteer-section2-footer-content p{padding:0;margin:0;}
  .for-ngo-section2-footer-content{padding:0;}
  .for-ngo-section2-footer p{padding:0;}
}

/*end*/



/*Added by PJ*/
/*password hide show icon*/
.toggle-password {
    position: absolute;
    right: 15px;
    top: 40%;
    font-size: 12px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #888;
}
.toggle-password:hover {
    color: #000;
}
/*Header dropdown btn*/
.form-check-input:checked[type="checkbox"] {
  background-image: image-set !important;
}
.form-check-input:checked
{
  background-color: #3080a5 !important;
}
.dropdown-menu.hide
{
  display: none;
}
.dropdown-menu
{
  display: none !important;
}

.dropdown-menu.show {
  display: block !important;
}

.dropdown-menu li
{
  padding-left: 0;
}
.dropdown-item
{
  /*line-height: 25px;*/
  line-height: 1.6;
  font-size: 0.75rem;
}

.dropdown-item:focus, .dropdown-item:hover
{
  background-color: #3080a5;
  color: #fff;
}

.home_opp_img
{
  padding: 0.25rem 0.5rem;
}
.home_opp_img img{
  width: auto !important;
  border-radius: unset !important;
  filter: brightness(0) invert(1);
}

.home_opp_img span{
  color: #000;
}

.home_opp_img img {
    filter: brightness(5) invert(1);
}

/*.nav-item.dropdown:hover .dropdown-menu {
  display: block !important;
  position: absolute;
  inset: 0px auto auto 0px;
  margin: 0px;
  transform: translate(40px, 68px);
}*/

.dropdown_btn {
  background-color: var(--volprimeblue);
  border-color: var(--volprimeblue);
  color: #fff !important;
  font-size: 0.85rem;
  font-weight: 700;
}

.dropdown_btn:hover {
  color: #fff !important;
  background-color:var(--volprimeblue);
  border-color: var(--volprimeblue);
}
.dropdown_btn:active {
  color: #fff !important;
  background-color:var(--volprimeblue);
  border-color: var(--volprimeblue);
}
.dropdown_btn:focus {
  color: #fff !important;
  background-color: var(--volprimeblue);
  border-color:var(--volprimeblue);
}

@media(max-width: 991px)
{
  .dropdown_btn {
      background-color: transparent;
      border-color: transparent;
      color: #5f6aae !important;
      margin-left: -98px;
  }

  .dropdown_btn:hover {
    color: #5f6aae !important;
    background-color: transparent;
    border-color: transparent;
  }
  .dropdown_btn:active {
    color: #5f6aae !important;
    background-color: transparent !important;
    border-color: transparent !important;
  }
  .dropdown_btn:focus {
    
    background-color: transparent !important;
    border-color: transparent !important;
  }
  .nav-item.dropdown .dropdown-menu
  {
    border: none;
  }
  /*.dropdown_btn
  {
    height: auto !important;
    padding: 15px !important;
  }*/
  .dropdown-menu a
  {
    padding: 10px !important;
  }
}

/* Desktop Hover Dropdown */
@media (min-width: 992px) { /* lg breakpoint for Bootstrap */
  .nav-item.dropdown:hover .dropdown-menu {
    display: block !important;
    position: absolute;
    inset: 0px auto auto 0px;
    margin: 0px;
    transform: translate(40px, 68px);
  }
}

/* Mobile (keep click-to-open behavior) */
@media (max-width: 991px) {
  .nav-item.dropdown .dropdown-menu {
    position: static;
    float: none;
    transform: none;
    margin: 0;
    box-shadow: none; /* remove extra shadow in mobile */
  }
}

/*Footer*/
footer li {
  color: #444444;
}
footer a {
  color: #444444;
}
footer a:hover {
  color: #000000;
}
/*end*/
/*.section_1 .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active
{
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  border-bottom: 3px solid #3080A5;
  border-radius: 0;
  color: #3080A5;
  font-weight: 600;
}
.section_1 .nav-link:hover
{
  color: #3080A5;
  background-color: transparent;
  border: none;
}

.section_1 .nav-link
{
  color: #000;
  font-weight: 600;
  border: none;
}*/

#commentModal .modal_btn {
  background-color: transparent;
  color: var(--volprimeblue);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--volprimeblue);
  border-radius: 0.375rem;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.3s ease;
}

#commentModal .modal_btn:hover {
  background-color: var(--volprimeblue);
  border-color: var(--volprimeblue);
  color: var(--volwhite);
}

#reportReviewModal .modal_btn {
  background-color: transparent;
  color: var(--volprimeblue);
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--volprimeblue);
  border-radius: 0.375rem;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.3s ease;
}

#reportReviewModal .modal_btn:hover {
  background-color: var(--volprimeblue);
  border-color: var(--volprimeblue);
  color: var(--volwhite);
}

.btn-danger
{
  font-size: 0.85rem !important;
  font-weight: 700 !important;
}
.modal-title
{
  font-size: 1rem;
}

textarea.form-control
{
  font-size: 0.75rem;
}

.for-volunteer-section5 button {
  background-color: transparent;
  color: var(--volprimeblue);
  padding: 1rem 2rem;
  border: 1px solid var(--volprimeblue);
  border-radius: 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.3s ease;
}

.for-volunteer-section5 button:hover {
  background-color: var(--volprimeblue);
  border-color: var(--volprimeblue);
  color: var(--volwhite);
}

.section_1 .alert-warning
{
  font-size: 0.75rem;
  font-weight: 500;
}

.event_con
{
  font-size: 0.95rem;
  color: var(--voltext);
  margin-bottom: 10px;
}
.event_con span
{
  font-weight: 600 !important;
}
.custom-pagination .pagination {
    display: flex;
    list-style: none;
    gap: 15px;
}

.custom-pagination .page-item {
    display: inline-block;
}

.custom-pagination .page-link {
    padding: 6px 12px;
    border: 1px solid #3080A5;
    color: #3080A5;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
}

.custom-pagination .page-item.active .page-link {
    background: #3080A5;
    color: #fff;
}

.page-item.active .page-link
{
  border-color: #3080A5;
}

/*login*/
.login_content .alert-danger
{
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
}

.login_content .alert-warning
{
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
}

.login_content .alert-success {
  font-size: 0.75rem;
  font-weight: 500;
}

.ck.ck-editor__main > .ck-editor__editable
{
  color: #000;
}
/*end*/

/*opportunities*/
.main-container2 .alert-info
{
  text-align: left;
  font-size: 0.75rem;
  font-weight: 500;
}
/*end*/

header .img-fluid
{
  height: 50px;
}

/*opportunities modal*/
#filterModal .nav-pills .nav-link.active, .nav-pills .show > .nav-link
{
  background-color: #3080A5;
  color: #fff;
}

#filterModal .nav-link
{
  color: #3080A5;
  font-weight: 600;
  font-size: 18px;
  text-align: left;
}

#filterModal .nav-link:hover
{
  color: #3080A5;
}

#filterModal .form-check-input:checked {
  background-color: #3080A5;
  border-color: #3080A5;
}

#filterModal .form-check-input[type="checkbox"] {
  padding: 7px !important;
  margin-left: -15px !important;
  margin-right: 10px !important;
  border: 1px solid var(--volprimeblue)!important;
}

#filterModal .form-check-input[type="radio"]
{
  padding: 7px !important;
  margin-left: -15px !important;
  margin-right: 10px !important;
   border: 1px solid var(--volprimeblue)!important;
}

#filterModal .form-check
{
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--voltext);
}

#filterModal .tab-content > .active
{
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
}

#filterModal .modal-header
{
  box-shadow: 0 0 5px 0 rgba(0,0,0,.2);
}

#filterModal .modal-footer
{
  box-shadow: 0 0 5px 0 rgba(0,0,0,.2);
}

#filterModal .body_content
{
  padding-right: 15px;
  width: 230px;
}

#filterModal .form-check {
    display: flex;
    align-items: center;
}

#filterModal .form-check-input {
    margin-top: 0 !important;
}

@media (max-width:991px) {
  #filterModal label.form-check-label {
      /*max-width: 190px;*/
      width: 85%;
  }
  header .img-fluid
  {
    height: 38px;
  }
}

@media (max-width:368px) {
   .for-ngo-hero-content-card h1 {
      font-size: 1.5rem;
  }
  .for-ngo-section4 .for-ngo-section4-text h2 {
      right: 2rem !important;
      bottom: 2.5rem !important;
  }
  .for-volunteer-section3 .for-volunteer-section3-text h2 {
      bottom: 2.5rem !important;
      right: 1rem !important;
  }
}

@media(max-width:991px)
{
  #filterModal .body_content {
    width: 100%;
    border: none !important;
    padding-right: 0;
  }

  #filterModal .body_content_2 {
    width: 100%;
  }

  #filterModal .form-check
  {
    font-size: 0.65rem;
  }

  #filterModal .ngo_content {
      margin-top: 12px;
  }

  .section2-row2 p {
      margin-top: 1.5rem !important;
  }
 
}

@media (min-width: 991px) and (max-width: 1199px) {
  #filterModal label.form-check-label {
    max-width: 200px;
  }

  #filterModal .body_content {
    width: 190px;
  }
}

@media(max-width:1199px) {

  #filterModal .nav-link
  {
    font-size: 15px;
  }

  #filterModal .form-check-input[type="checkbox"]
  {
    margin-left: -8px !important;
  }
  #filterModal .form-check-input[type="radio"]
  {
    margin-left: -8px !important;
  }

}

/*#filterModal .modal-footer button
{
  font-size: 0.75rem;
  font-weight: 500;
}*/

#filterModal .filter-grid
{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

#filterModal .section2-btn a
{
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
}

#filterModal .save_btn
{
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  background-color: transparent;
  color: var(--volprimegreen);
  border: 1px solid var(--volprimegreen);
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.3s ease;
}


#filterModal .save_btn:hover
{
  background-color: var(--volprimegreen);
  border-color: var(--volprimegreen);
  color: var(--volwhite);
  transition: all 300ms ease-in-out;
}

#registerModal .section2-btn a
{
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
}

#registerModal .save_btn
{
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  background-color: transparent;
  color: var(--volprimegreen);
  border: 1px solid var(--volprimegreen);
  font-size: 0.85rem;
  font-weight: 700;
  transition: all 0.3s ease;
}


#registerModal .save_btn:hover
{
  background-color: var(--volprimegreen);
  border-color: var(--volprimegreen);
  color: var(--volwhite);
  transition: all 300ms ease-in-out;
}

#registerModal .alert-danger
{
  font-size: 0.75rem;
  font-weight: 500;
}

.alert-success
{
  font-size: 0.75rem;
  font-weight: 500;
}
.alert-warning
{
  font-size: 0.75rem;
  font-weight: 500;
}
.opportunity-sidebar .alert-warning
{
  font-size: 0.75rem;
  font-weight: 500;
  background: transparent;
  border-color: #fff;
  color: #fff;
  margin-top: 20px;
  padding: 10px;
}

.alert-danger
{
  font-size: 0.75rem;
  font-weight: 500;
}

.alert-info {
  font-size: 0.75rem;
  font-weight: 500;
}

/*city region css*/
.select2-selection.select2-selection--single {
    /*border-radius: 0.5rem !important;*/
    border-radius: var(--bs-border-radius) !important;
    /*background: #dedede48 !important;*/
}
.select2-selection.select2-selection--single:focus {
    border-color: #e1dedec1 !important;
    box-shadow: none !important;
}
.select2-container--bootstrap-5 .select2-selection
{
    /*border: 1px solid #eee !important;*/
    border: 2px solid var(--volprimegreen) !important;
    background-color: #dedede48 !important;
    min-height: 2rem !important;
    background-color: #ffffff!important;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection
{
    box-shadow: none !important;
    /*border-color: #899af1 !important;*/
    border-color: var(--volprimeblue) !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected
{
    background-color: #3f8fb6 !important;
}
.select2-container--bootstrap-5 .select2-dropdown
{
    border-color: var(--volprimeblue) !important;
    color: var(--voltext) !important;
    
}
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option
{
    font-weight: 600 !important;
    font-size: 0.75rem !important;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered
{
  font-weight: 600 !important;
  color: var(--voltext) !important;
  font-size: 0.75rem;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder
{
    color: var(--voltext) !important;
    font-size: 0.75rem;
    font-weight: 600 !important;
    text-align: center;
    /*vertical-align: top;*/
}
.select2-dropdown.select2-dropdown--below {
    border-radius: 0.5rem !important;
}
/*end*/


/* CSS New Update 21-10-2025 */
.section2 .section2-header-left{margin-top:1.1rem;}
.section2-header-left{padding:1.5rem;}
.section2-row2-content {margin-top: -9.5rem;}
@media screen and (max-width:768px){
  .section2-row2-content {margin-top: 0.3rem;}
  .section2-row2-content p{margin:0.4rem 0 1rem!important;}
}
.section5-header-content{margin-top:1.1rem;width:auto;}
.section5-row2{margin-top: 1rem;}


.section8-activity-card{background:var(--volwhite);height: -webkit-fill-available;padding:0.75rem;}
.section8-activity-cardcol{padding:0.4rem;}
.social-icons li{margin-right:0.5rem;}
.fa-brands{font-size:1.1rem;}

.oppurtunities-sec2-card{background:var(--volwhite);height: -webkit-fill-available;border:1px solid #dddddd;}
.oppurtunities-sec2-card:hover {
    background:#ffffff;
    transform: translateY(-8px);
}

.oppurtunities-sec2-card-content img{filter: brightness(8) invert(1);}
.form-check-input{border: 1px solid var(--volprimeblue);}
.main-container2 .bx-wrapper{margin: 0;box-shadow: none;
    border:none;
    background:transparent;}

    .section8-activity-card .section8-activity-card-date{margin-bottom:0.5rem;}














    /* ---------------------------------------------------------------------------------------- About Us Page ---------------------------------------------------------------------*/
 
 /* About Hero Section */
.about-hero-wrapper {
  background-image: url('/images/hands-holding-globe-with-world-bottom-re.png');
  background-size: cover;
  background-position: center;
  border-radius: 1rem 0 0 1rem;
  padding: 5rem 0rem;
  /*position: relative;
  margin-left: 6rem;
  margin-top: 5rem;*/
}
.about-banner h1{margin-bottom: 0;}
.about-banner{background-image: url('/images/hands-holding-globe-with-world-bottom-re.png')!important;min-height: 530px;display: flex;
    justify-content: center;
    align-items: center;}
    @media screen and (max-width:576px){
      .about-banner{min-height: auto;}
    }
/*.about-hero-content-card {
  background: #ffffffce;
  padding:2rem 3.5rem;
  border-radius: 1.25rem;
  width: fit-content;
  border: 2px solid #999;
  z-index: 5;
  position: relative;
}*/


/* Title Styling */
.about-hero-content-card h1 {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--volxblack);
  margin-bottom: 0;
  /*line-height: 1.3;*/
}

.about-hero-content-card h1 span {
  color: var(--volprimeblue);
  /* Match your design's pink */
}

/* Description */
.about-hero-content-card p {
  font-size: 1rem;
  color: var(--volxblack);
  font-weight: 500;
  margin-bottom: 2rem;
}



/* Buttons */
.about-hero-content-card a {
  background-color: var(--volwhite);
  color: var(--volxblack);
  border: none;
  border-radius: 0.75rem;
  padding: 1rem 1.5rem;
  font-size: 0.95rem;
  text-align: center;
  /*line-height: 1.4;*/
  transition: all 0.3s ease;
}



/* Large Devices - max 1199px */
@media (max-width: 1199px) {
  .about-hero-wrapper {
    margin-left: 0;
    padding: 3rem 2rem;
    border-radius: 1rem;
    /* Adjust for full layout on tablet */
  }

  .about-hero-content-card {
    margin-left: 0;
    padding: 2rem;
    max-width: 100%;
  }

  .about-hero-content-card a {
    padding: 0.9rem 1.2rem;

  }
}


/* Medium Devices - max 991px */
@media (max-width: 991px) {

  .about-hero-wrapper {
    margin-left: 0;
    padding: 3rem 2rem;
    border-radius: 1rem;
    /* Adjust for full layout on tablet */
  }

  .about-hero-content-card {
    margin-left: 0;
    padding: 2rem;
    max-width: 100%;
  }

  .about-hero-content-card h1 {
    text-align: center;
  }

  .about-hero-content-card p {
    text-align: center;
  }

}


/* Small Devices - max 576px */
@media (max-width: 576px) {

  html {
    font-size: 14px;
  }

  .about-hero-wrapper {
    padding: 2rem 1.5rem;
  }

  .about-hero-content-card {
    padding: 1.5rem;
    border-radius: 1rem;
  }

}




/* Section 2 */
.about-section2 {
  position: relative;
  overflow: hidden;
}

.about-box {
  background-color: var(--volprimeblue);
  border-radius: 1rem;
  padding: 2.5rem 5rem 2.5rem 2rem;
  width: 100%;
  position: relative;
  z-index: 2;
  text-align: end;
}


.about-text {
  background-color: rgba(63, 142, 182, 0.1);
  border-radius: 1.5rem;
  padding: 2rem 4rem;
  color: var(--voltext);
  position: relative;
  z-index: 3;
  margin-left: -4.5rem;
}

.about-text p {
  font-size: 0.85rem;
  margin-bottom: 0;
  padding-left: 4.5rem;
}

.flex-lg-row-reverse .about-text {
  margin-right: -3rem; 
  margin-left: 0;
}

.about-box h2 {
  font-weight: 700;
  font-size: 1.6rem;
  margin: 0;
}


@media(max-width: 1199px) {
  .about-box {
    padding: 2.5rem 5rem 2.5rem 2rem;
  }

  .about-text {
    padding: 2rem 3rem;
    margin-left: -2rem;
  }

  .about-text p {
    padding-left: 0;
  }
}



@media (max-width: 991px) {
  .about-text {
    margin: 0;
    padding: 1.5rem;
  }

  .about-text p {
    padding-left: 0;
  }

  .flex-lg-row-reverse .about-text {
    margin-right: 0;
  }

  .about-box {
    text-align: center;
    border-radius: 1rem;
    padding: 1.8rem;
  }
}


/* About Section 3 */

.about-contact {
  background-color: var(--volprimegreen);
  padding: 3rem 0;
  border-radius: 0.65rem;
}

.about-contact-container {
  max-width: 900px;
  margin: 0 auto;
}

.about-contact h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--volwhite);
  margin-bottom: 1rem;
}

.about-contact p {
  font-size: 0.9rem;
  color: var(--volwhite);
}

.about-contact-left {
  padding-right: 1.5rem;
}

.about-contact-container .form-control::placeholder {
  font-size: 0.75rem;
}

.about-contact-container .form-control {
  font-size: 0.75rem;
}

.about-contact-container .form-submit {
  color: var(--volprimeblue);
  font-size: 0.75rem;
  font-weight: 600;
  border: none;
  border-radius: 0.3rem;
  width: fit-content;
  padding: 0.25rem 1rem;
  margin-right: 1.5rem;
  background-color: var(--volwhite);
  transition: all 0.3s ease;
}

.about-contact-container .form-submit:hover {
  color: var(--volwhite);
  background-color: var(--volprimeblue);

}


/* About Disclaimer */

.about-disclaimer {
  padding: 3rem 0;
  max-width: 1100px;
  margin: 0 auto;
}

.about-disclaimer p {
  font-size: 0.85rem;
  color: var(--voltext);
}

.about-disclaimer span {
  font-weight: 700;
}


@media(max-width: 576px) {
  .about-contact-left {
    padding-right: 0;
  }
  
  .about-contact-container .form-submit {
      margin-right: 0;
  }
}



/*------------------------ Profile Events ---------------------------------*/


.profile-page-events-tab table {
  border: none;
   --bs-table-bg: transparent !important;
}

.profile-page-events-tab table tbody {
  border-color: transparent;
}


.profile-page-events-tab table tbody tr:nth-child(odd) {
  background-color: #e6e6e6 !important; 
}

.profile-page-events-tab table tbody tr:nth-child(even) {
  background-color: transparent !important; 
}


.profile-page-events-tab img {
  width: 16px;
  height: 16px;
}

.profile-page-events-tab-heading h6 {
  font-size: 0.8rem;
  font-weight: 600;
  color: #515151; 
  margin-bottom: 0;
  padding-left: 2.5rem;
}

.profile-page-events-tab-date,
.profile-page-events-tab-ngo {
  display: flex;
  align-items: center;
}

.profile-page-events-tab-date span,
.profile-page-events-tab-ngo span {
  font-size: 0.65rem;
  padding-left: 0.35rem;
  color: #666;
  font-weight: 500;
}

.text-warning {
  display: block;
  padding-right: 0.85rem;
  font-size: 0.8rem;
  color: #b4b4b4 !important; 
}


.profile-page-events-tab-btn {
  background-color: var(--volprimeblue);
  color: var(--volwhite);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.25rem 1.25rem;
  border-radius: 0.3rem;
  display: inline-block;
}

.profile-page-events-tab-btn.approved {
  background-color: var(--volprimegreen);
}


.profile-page-events-tab-dots {
  padding-right: 1.5rem !important;
}

.profile-page-events-tab-dots img {
  width: 18px;
  height: 18px;
  cursor: pointer;
}



.profile-page-events-tab-star {
    margin-right: 0.35rem;
}


#profileTabsContent:has(> .tab-pane#events.active) {
    padding: 0 !important;
    padding-bottom: 1.5rem !important;
}

@media(max-width: 1199px) {
  .profile-page-events-tab-dots img {
    margin-top: -1rem;
  }
}

@media(max-width: 991px) {
  .profile-page-events-tab-dots img {
    margin-top: -1rem;
  }
}


@media(max-width: 576px) {
  .profile-page-events-tab-dots img {
    margin-top: -0.85rem;
    width: 12px;
    height: 12px;
  }

  .profile-page-events-tab-heading h6 {
    padding-left: 1rem;
  }
}


/* --------------------- Profile Details Page ------------------------------ */

.profile-detail-page {
  margin: 4.5rem 0 3rem 0;
}

.profile-detail-right {
  background-color: #f5f5f5;
  padding: 2rem;
  border-radius: 1rem;
}


.profile-detail-right-image-container {
  position: relative;
}

.profile-detail-right-image-container .cover-image {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  object-fit: cover;
}


.profile-detail-right-image-container .profile-image {
  width: 6rem;
  height: 6rem;
  border-radius: 0.7rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  position: absolute;
  bottom: 0;
  left: 0.5rem;
  background: #fff;
  padding: 0.4rem;
}

.profile-detail-right-image-container .profile-image img {
  border-radius: 0.6rem;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.profile-detail-right-image-container .organisation-name {
  font-size: 1.125rem;
  color: var(--volprimegreen, #2d7a46);
  font-weight: 600;
  margin-left: 7rem;
  margin-bottom: 0;
  margin-top: 0.125rem;
}


@media (max-width: 1199px) {
  .profile-detail-right {
    padding: 1.5rem;
  }

  .profile-detail-right-image-container .profile-image {
    width: 5.5rem;
    height: 5.5rem;
    left: 1.5rem;
    bottom: 0;
  }

  .profile-detail-right-image-container .organisation-name {
    margin-left: 8rem;
  }
}


@media (max-width: 991px) {
  .profile-detail-right-image-container .profile-image {
    width: 5rem;
    height: 5rem;
    left: 1.2rem;
    bottom: 0;
  }

  .profile-detail-right-image-container .organisation-name {
    margin-left: 7rem;
  }
}


@media (max-width: 576px) {
  .profile-detail-right {
    padding: 1.5rem 1rem;
  }

  .profile-detail-right-image-container .cover-image {
    border-radius: 0.6rem;
  }

  .profile-detail-right-image-container .profile-image {
    width: 4rem;
    height: 4rem;
    left: 1rem;
    bottom: 0;
  }

  .profile-detail-right-image-container .organisation-name {
    margin-left: 5.5rem;
  }
}



.profile-detail-right-primary-container {
  padding: 1rem 0;
  margin-top: 1.5rem;
  border-top: 1px solid #000;
}

.profile-detail-right-primary-container h6 {
  font-size: 0.6rem;
  color: var(--voltext);
  margin-bottom: 0.35rem;
}

.profile-detail-right-primary-category {
  background-color: var(--volwhite);
  padding: 0.25rem;
  border-radius: 0.6rem;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-detail-right-primary-category span {
  background-color: var(--volprimegreen);
  padding: 0.125rem 0.3rem;
  border-radius: 0.3rem;
  color: var(--volwhite);
}

.profile-detail-right-primary-container p {
  color: var(--volprimegreen);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0;
}


.profile-detail-right-about-bottom-inner a{color: var(--volprimegreen);font-weight: 500;font-size: 0.85rem;}


.profile-detail-right-about-container {
  padding: 1rem 0;
 border-top: 0!important;
}
.bdtop{border-top:1px solid #000000!important;}

.profile-detail-right-about-container h6 {
  color: #666;
  font-weight: 600;
  margin-bottom: 1rem;
}

.profile-detail-right-about-address {
  background-color: var(--volwhite);
  padding: 1rem;
  border-radius: 0.6rem;
}

.profile-detail-right-about-address-heading img{
  width: 20px;
  height: 20px;
}

.profile-detail-right-about-address-inner {
  padding: 0 1.16rem;
}

.profile-detail-right-about-address-heading .profile-detail-right-about-address-heading-main {
  font-size: 0.8rem;
  font-weight: 600;
  color: #666;
}

.profile-detail-right-about-container span {
  font-size: 0.6rem;
  color: var(--voltext);
  margin-bottom: 0.35rem;
}

.profile-detail-right-about-container p {
  color: var(--volprimegreen);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0;
}

.profile-detail-right-about-bottom-inner {
  padding: 0.5rem;
  row-gap: 0.2rem;
}

.profile-detail-right-about-bottom span {
  font-size: 0.6rem;
  color: var(--voltext);
  margin-bottom: 0.35rem;
}

.profile-detail-right-about-bottom p {
  color: var(--volprimegreen);
  font-weight: 500;
  padding-left: 1.8rem;
}

.profile-detail-right-about-bottom p a {
  color: var(--volprimegreen);
}


.profile-detail-right-about-address-heading2 {
  padding-left: 1.25rem;
}


.profile-detail-page img.icon {
  height: 20px;
  width: 20px;
}


.profile-detail-page-edit-btn {
  background-color: var(--volprimegreen);
  padding: 0.3rem 0.6rem;
  color: var(--volwhite);
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: 0.3rem;
}


.profile-detail-page label {
   font-size: 0.6rem;
    color: var(--voltext);
    margin-bottom: 0.35rem;
}


@media(max-width: 576px) {
  .profile-detail-right-about-address-inner {
    padding: 0 1.6rem;
  }

  .profile-detail-right-about-bottom p {
    padding-left: 2.2rem;
  }

  .profile-detail-right-about-address-heading2 {
    padding-left: 1.7rem;
  }
}





.left-text{text-align:left;padding-left:2rem;}
.btn-1{background-color: var(--volprimeblue)!important;}
.btn-2{background-color: var(--volprimegreen)!important;}
.btn-1 strong{color: var(--volwhite)!important;}
.btn-2 strong{color: var(--volwhite)!important;}
.hero-buttons a{width: 365px!important;}
.hero-buttons a:hover{background-color: var(--volwhite)!important;}
.btn-1:hover strong{color: var(--volprimeblue)!important;}
.btn-1:hover {color: var(--volprimeblue)!important;}
.btn-2:hover strong{color: var(--volprimegreen)!important;}
.btn-2:hover {color: var(--volprimegreen)!important;}
.oppurtunities-sec2 .f-button{width:100%;border:1px solid #dddddd;background-color: #fff!important;height: 39px;font-size:0.85rem;}
.innercol{padding:1rem;border: 2px solid var(--volprimeblue);width: 100%;border-radius: 1rem;}
.for-volunteer-section3-feature{margin: 0!important;}

@media screen and (max-width:576px){
  .hero-buttons a{width: 100%!important;}
}
.section2-row2 h3{color: var(--volprimeblue);font-size:1.4rem;padding-bottom: 0.8rem;}
.section3 .intro-para{color:var(--volwhite);margin-bottom: 0;padding-top: 0.8rem;}

.section8-activity-card-date img {
    filter: brightness(5) invert(1);
}
.section8-activity-card-date{border: 1px solid #dddddd;}

@media screen and (min-width:991px){
  .section9-count-card{width:20%;}
}
.section9-count{padding: 1.5rem;}

.select2-container--bootstrap-5 .select2-selection{border:1px solid #ddd!important;}

.for-volunteer-section3, .for-volunteer-section6{margin-top: 1.4rem!important;}
.volsec2, .volsec2 .section5 {padding-top:0;padding-bottom:0;}
.for-ngo-section4{margin-top: 0!important;}
.pbnone{padding-bottom: 0;}
.pb-main{padding:1.5rem 0!important;}
@media screen and (max-width:576px){
  .about-section2{padding:0 1rem;}
  .for-volunteer-section3, .for-volunteer-section6{margin-top: 0!important;}
  .for-ngo-section4{margin-top: 0!important;}
}

.section4-slider-wrap {
  overflow: hidden;
  width: 100%;
}

.section4-slider-track {
  display: flex;
  transition: transform 0.6s ease-in-out;
}

.section4-item-group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 0 20%; /* 5 columns per row (100% / 5) */
  gap: 15px;
}

.partner-logo {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(3, 120px);
  gap: 0px;
  flex: 0 0 100%; /* FULL SLIDE WIDTH */
  box-sizing: border-box;
  border-top: 1px solid var(--volprimegreen);
  border-left: 1px solid var(--volprimegreen);
}

/* mobile view - show only 2 boxes (1 group per 50%) */
@media (max-width: 768px) {
  .section4-item-group {
    flex: 0 0 50%; /* show 2 per view */
    padding-bottom: 20px;
  }

  .partner-logo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 100px);
    flex: 0 0 100% !important;
  }
  .logo-box a
  {
    padding: 10px !important;
  }
}

/* optional: small mobile screens (like <480px) show 1 per view */
@media (max-width: 480px) {
  .section4-item-group {
    flex: 0 0 100%; /* show 1 per view */
    padding-bottom: 20px;
  }
  .partner-logo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 100px);
    padding: 0px !important;
    flex: 0 0 100% !important;
  }
  .logo-box {
    height: 100px !important;
  }
}

body{max-width: 1440px;margin: 0 auto;}
.section5-header-content{padding: 1.5rem;}
@media screen and (min-width:1400px){
  .section2-row2-content{
    margin-top: -11rem;
  }
  .section5-row1-content {
    margin-top: -14.5rem;
}
}

h1,h2,h3,h4,h5,h6{line-height:1.3;}
.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: auto!important;
    margin-top: -16px;
    outline: 0;
    
    text-indent: 0px!important;
    z-index: 9!important;
    bottom: -50px!important;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 40px!important;
    height: 40px!important;
    display: flex!important;
    justify-content: center!important;
    align-items:center;
    color:#000!important;
    transition:all 0.3s linear;
}
.bx-wrapper .bx-prev, .bx-wrapper .bx-next{background-image: none!important;}
.bx-controls-direction a:hover{background-color: #000;color: #ffffff!important;}

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .section2-row2-content {
    margin-top: -6.5rem;
    padding-left: 1rem;
}
  }
@media (max-width: 1199px) {
    .section5-row1-content {
        padding: 2.5rem;
        margin-top: -10rem;
    }
  /* iPad Pro styles */
}

@media only screen 
  and (min-device-width: 820px)
  and (max-device-width: 820px)
  and (-webkit-min-device-pixel-ratio: 2) {
  /* iPad Air (10.9") both orientations */
   .section2-row2-content {
    margin-top: 0;
   
}
.section2-row2-content {
    margin-top: 0!important;
}
.section5-row1-content{margin-top:  0!important;}
  }

  @media only screen 
  and (min-device-width: 744px)
  and (max-device-width: 769px)
  and (-webkit-min-device-pixel-ratio: 2) {
  /* iPad Mini (6th Gen) – both orientations */
  .section5-row1-content{margin-top: 0!important;}
}
@media screen and (max-width:576px){
  .section5-row1-content{margin-top: 0!important;padding:0;}
}

.section8-btn{margin-right: 0;}
.event-image-cover {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: 8px; /* optional */
}

.event-image-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* or "contain" if you don’t want cropping */
  display: block;
}

.section4-item{min-height: 77px;}
.bx-prev{ position: absolute!important;left: 45%!important;margin-top:1rem!important;} 
.bx-next{ position: absolute!important;right: 45%!important;margin-top:1rem!important;}   

.oppurtunities-sec2-card{position: relative;}
.oppurtunities-sec2-card .event-loc-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #c6c6c6;
    padding-left: 0.5rem;
}
.col-md{padding-right:1rem;}
.bg-volgreen{background-color: var(--volprimegreen)!important;}

@media screen and (max-width:576px) {
  .about-box{text-align: left;}
}

.opportunity-details-description h2{
    color: var(--voltext);
    font-size: 1rem;
    margin-left: 1rem;
    border-bottom: 1px solid #ccc;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
}
.opportunity-details-image img{border-radius: 8px;}

.opportunity-details-extra-right h5 span{
    color: #464646;
    
        font-size: 1rem;
    }

    .section8-activity-card .section8-activity-card-date img {
    width: 15px !important;
}
.section8-activity-card .oppurtunities-sec2-card-location img {
    width: 15px !important;
}
.section8-activity-card .oppurtunities-sec2-card-location img {
    width: 15px !important;
}
.last-child span{padding-left:0.5rem;}
.last-child{min-height: 76px;}
.oppurtunities-sec2-card-content img{width: 15px!important;}

.oppurtunities-sec2-card-location.last-child{padding-bottom:1.3rem;}

.oppurtunities-sec2-card-location img{width: 15px!important;filter: brightness(5) invert(1);}
.volunteer-registration-form-footer button{border: 1px solid #fff;}
.volunteer-registration-form-footer button:hover{border: 1px solid #fff;}

.fixed-top {
    
    max-width: 1440px;
    margin: 0 auto;
}
.section5-header-content.green{background:var(--volprimegreen);}
.cat-1{min-height: 55px;}
.cat-2{min-height: 76px;}
.section4-heading h2{padding-bottom:0.5rem;}
.section4 p{padding-bottom:0.5rem;}

.profile-btn{background-color: #ffffff;color: #444444!important;font-weight: 600;font-size:0.7rem;
padding:0.5rem 1rem;border-radius:0.3rem;border:1px solid #ddd;}

.new-btn-groups a{border:2px solid #ffffff;}
.new-btn-groups a:hover{border:2px solid var(--volprimegreen);background:#ffffff;color:var(--volprimeblue);}
.new-btn-groups a:first-child{margin-right: 1.5rem;}
/*.main-container2 button{width:100%;font-size:0.75rem;margin-left:1rem;background-color: #ffffff;}
.main-container2 button:hover{background-color: #ffffff;}*/
@media screen and (max-width:660px){
  .section8 .d-flex{flex-direction: column;}
  .section8 h2{margin-bottom:1rem!important;}
  .section8-activity-card h6{min-height: auto;}
  .cat-1, .cat-2{min-height: auto;}
  .last-child{padding-bottom:1.8rem!important;}
  body{overflow-x: hidden;}
  .section2-header-left{margin-right: 0;}
  .section5 .section5-header-img{padding-left: 0;padding-right: 0;}
  .section5-header-content{margin-left: 0;margin-right: 0;}
  .section5-feature-card-right{padding-right: 0;}
  .new-btn-groups a:first-child{margin-right: 0;}
  .section4 p{padding-bottom:0;}
  .section4{padding-bottom: 0;}
  .section2{padding-top: 0;}
}
.oppurtunities-sec1, .opportunities-header{margin-left:1.5rem;margin-right:1.5rem;}


@media screen and (max-width:1000px){
.opportunity-details-extra-feature span.opportunity-details-extra-feature-label {margin-bottom:0.5rem!important;display: inline-block;
white-space: nowrap;}
}

@media screen and (max-width:576px){
  .opportunity-details-description h2{margin-left:0;}
}
.new-btn-groups img{width:18px;margin-bottom:0.3em;}
.filter img{width:18px;margin-bottom:0.3em;}
.filter span{color: var(--voltext) !important;
    font-size: 0.75rem;
    font-weight: 600 !important;
    text-align: center;}


    .event-image-covers {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 20px;
    max-height: 300px;   /* optional limit */
}

.cover-image {
    width: 100%;
    height: 100%!important;
    object-fit: cover;
}
.ngo-custom{padding:0.5rem;}
.ngo-custom .organisation-name{margin-bottom:0.3rem;}
.ngo-custom .profile-detail-right-primary-container{margin-top:0;}
.ngo-custom .profile-detail-right-primary-container{padding:0.5rem 0;}
.descp{margin-top:1.5rem;}
.ps-2{padding-left:0;cursor:pointer;}

.profile-detail-right-about-bottom p{display:inline;padding-left:0.3rem!important;}

@media screen and (max-width:576px){
  .ngo-custom{padding-left: 0;padding-right: 0;}
  .profile-detail-right-about-container{padding-left:1rem;padding-right:1rem}
  .descp{margin-top:0;}
  .new-btn-groups{display: flex;justify-content: space-between;flex-direction: column;}
  .new-btn-groups a{margin-bottom:0.5rem;}
      .section2-row2 p {
        margin-top: 0rem !important;
}
.feature-card {flex-direction: row;}
.feature-contents{padding-left:0.5rem;}
.section3-cards, .section5-feature-card, .section6-cards, .for-volunteer-section2-feature-card, .for-ngo-section2-feature-card {display:flex;flex-direction: row;}
.section3-cards-body, .for-ngo-section2-feature-contents{padding-left:0.5rem;}
.section6-cards-body, .for-volunteer-section2-feature-contents{padding-left:0.5rem;}
.oppurtunities-sec2-card-content h6{min-height: auto;}
}

.org-custom .row{padding:0;}
@media screen and (max-width:700px){
  .desktop-only{display: none;}
}

.descp ul li{list-style: disc;font-size: 0.85rem;}
.descp ol li{list-style: disc;font-size: 0.85rem;}
.descp strong{font-size: 0.85rem;font-weight:600}
.descp h1{font-size: 2rem;}
.descp h2{font-size: 1.8rem;}
.descp h3{font-size: 1.6rem;}
.descp h4{font-size: 1.4rem;}
.descp h5{font-size: 1.2rem;}
.descp h6{font-size: 1rem;}
.desc em{font-size: 0.85rem;font-style: italic;}
.desc i{font-style: italic;font-size: 0.85rem;}
.desc ul, .desc ol{padding-left:0}

.section5-btn a.btn-vol {
    background-color: transparent;
    color: var(--volprimeblue);
    padding: 1rem 2rem;
    border: 1px solid var(--volprimeblue);
    border-radius: 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.section5-btn a.btn-vol:hover {
    background-color: var(--volprimeblue);
    border-color: var(--volprimeblue);
    color: var(--volwhite);
}
.highlight-section{background:#E0E3DE;padding:1.5rem;border-radius:1.5rem;}
.highlight-section a{background-color: var(--volprimeblue);color: #fff;}
.highlight-section a:hover{background-color: #ffffff;color: var(--volprimeblue);}
.section2-row2 h3{font-weight: 500;}

.sec-4-custom .section4-item{
align-content: center;justify-content: center;flex:0 0 calc(100% / 6 - 22px);padding: 10px;text-align:center;border:1px solid var(--volprimegreen);margin: 0 5px;border-radius:0.5rem;
}

@media (max-width: 768px) {
  .sec-4-custom  .section4-item {
        flex: 0 0 calc(50% - 12px); /* 2 per row */
    }
}

.logo-slider {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1203px;
  margin: auto;
  position: relative;
}

.slider-window {
  overflow: hidden;
  width: 100%;
}

.slider-track {
  display: flex;
  gap: 20px;
  transition: transform 0.4s ease;
}

.slide {
  flex: 0 0 calc((100% - 100px) / 6); /* 6 visible slides */
  border: 1px solid #3aa35c;
  border-radius: 12px;
  background: #fff;
  height: 120px;

  display: flex;
  align-items: center;
  justify-content: center;
  
  text-align: center;
}
.slide a{padding: 10px;display:flex;justify-content:center;align-items:center;height:100%;}
.slide img {
  max-width: 90%;
  max-height: 70px;
  object-fit: contain;
}

.arrow {
  background: #fff;
  border: 1px solid #ccc;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  margin-right: 10px;
  margin-left: 10px;
}

/* 4 slides for tablet */
@media (max-width: 1024px) {
  .slide {
    flex: 0 0 calc((100% - 60px) / 4);
  }
}

/* 2 slides for mobile */
@media (max-width: 600px) {
  .slide {
    flex: 0 0 calc((100% - 20px) / 2);
  }
}
.oppurtunities-sec2 .alert-danger{background:var(--volprimeblue);color:#ffffff;}

/*logo section*/
.logo-section {
  padding: 40px 20px;
  background: #ffffff;
}

.logo-grid {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: #fff;
  overflow: hidden;
  /*outline: 2px solid var(--volprimegreen);*/
border-top:1px solid  var(--volprimegreen);
border-left:1px solid  var(--volprimegreen);
  /*outline-offset: -2px;*/
  /*border-radius: 0 50px;*/
}

.logo-box {
  border-right: 1px solid var(--volprimegreen);
  border-bottom: 1px solid var(--volprimegreen);
  display: flex;
  align-items: center;
  justify-content: center;
  /*padding: 25px;*/
  height: 120px;
}
.logo-box img{transition:all 0.3s linear;}
.logo-box:hover img {
  /*background: rgba(0, 128, 0, 0.04);*/
transform:scale(1.1);
}
.logo-box a{padding: 25px;}

.logo-box img {
  max-width: 100%;
  max-height: 70px;
  object-fit: contain;
}

/* remove right border on last column */
.logo-box:nth-child(6n) {
  /*border-right: none;*/
}

/* remove bottom border on last row */
.logo-box:nth-last-child(-n+6) {
  /*border-bottom: none;*/
}

/* Tablet */
@media (max-width: 1024px) {
  .logo-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /*.logo-box:nth-child(6n) {
    border-right: 2px solid var(--volprimegreen);
  }*/

  /*.logo-box:nth-child(4n) {
    border-right: none;
  }*/
}

/* Mobile */
@media (max-width: 600px) {
  .logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .logo-box {
    height: 120px;
  }
}