﻿.container{
   max-width: 1200px; 
}
section{
    overflow-x:hidden;
}
h1,h2,h3,h4,h5{
 
 color:#003366;

}
p,a,button,li{
 


}
p{
     color: var(--text-color);
}
:root {
    --primary-color: #5C5470; /* Deep Mauve */
    --secondary-color: #F9B208; /* Golden Glow */
    --accent-color: #9BC995; /* Sage Green */
    --background-color: #F3F4ED; /* Light Cream */
   
}
.slider_text_con{
    padding-top:50px;
}
h1 {
  font-size: 46px;   /* Main heading */
  font-weight: 700;  /* Bold font weight */
    line-height:1.3;
}

h2 {
  font-size: 35px;   /* Sub-heading */
  font-weight: 700;
 line-height:1.3;
}

h3 {
  font-size: 30px;   /* Smaller heading */
  font-weight: 700;
  line-height:1.4;
}
h4 {
  font-size: 25px;   /* Smaller heading */
  font-weight: 700;
    line-height:1.4;
}
h5 {
  font-size: 20px;   /* Smaller heading */
  font-weight: 700;
   line-height:1.4;
}

p {
  font-size: 16px;   /* Body text size */
  font-weight: 400;
  line-height: 1.6;  /* Better readability */
}


a {
  font-size: 18px;   /* Same size as paragraphs */
  font-weight: 400;
  text-decoration: none;  /* No underline */
   line-height:1.4;
}

.hilight{
    color:#F4A261;
}
/*animation*/
@keyframes customAnimation {
  0% {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
  }
  100% {
    transform: translate3d(0px, 92.8774px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
  }
}

.element {
  animation: customAnimation 2s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
}
@keyframes upAndDown {
  0% {
    transform: translate3d(0px, 0px, 0px);
  }
  50% {
    transform: translate3d(0px, 92.8774px, 0px); /* Move down */
  }
  100% {
    transform: translate3d(0px, 0px, 0px); /* Move back up */
  }
}

.element1 {
  animation: upAndDown 2s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
}

@keyframes leftToRight {
  0% {
    transform: translate3d(0px, 0px, 0px);
  }
  50% {
    transform: translate3d(92.8774px, 0px, 0px); /* Move right */
  }
  100% {
    transform: translate3d(0px, 0px, 0px); /* Move back to the start */
  }
}

.element2 {
  animation: leftToRight 2s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
}
.spaces{
 
    /* Replace with your image URL */
    background-size:40%; /* Ensures the image covers the container */
    background-image: url('../img/bubbles.png');
    background-position:left top ;
    background-repeat: no-repeat;

}
.background-image {
    animation: zoomInAndOut 5s ease-in-out infinite; /* Adjust timing as needed */
    /* Replace with your image URL */
    background-size:contain; /* Ensures the image covers the container */
    background-image: url('../img/ihes.png');
    background-position: right 80%;
    background-repeat: no-repeat;

}

@keyframes zoomInAndOut {
  0% {
    background-size: 10px; /* Initial size */
  }
  50% {
    background-size:    50px; /* Zoom in */
  }
  100% {
    background-size:100px; /* Return to original size */
  }
}
  /* Circular Image Styling */
        .rotating-img {
         
            border-radius: 50%; /* Makes the image circular */
            animation: rotate 3s linear infinite;
        }

        /* Keyframes for rotation */
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

/*animation end*/.gapes{
                     gap:15px;
                 }



 /*facuity*/
.r-postion{
    position:relative;
}
.a-postion{
    position:absolute;
}
   
      .about{
            width:40px;
            height:40px;
            border-radius:50%;
            background:#bf0a30;
            display:inline-block;
            box-shadow:1px 1px 10px 1px  rgba(0,0,0,0.4);
            text-align:center;
         padding-top:5px;
         
        }
        .about-inner h6{
            font-size:19px;
            font-weight:700;
        }
        .highter{
            font-size:14px;
            color:#bf0a30;
              font-weight:700;
        }
        .nmaer::after{
            position:absolute;
            width:60px;
            height:3.9px;
            bottom:-15px;
            left:0px;
            content:"";
            background:#bf0a30;
            border-radius:40px;
        }
        .rpostion{
            position:relative;
        }
        .padder {
            padding: 0px 70px 90px 0px;
            background: url('../img/about-1-bg.png');
background-repeat: no-repeat;
  background-size: auto;
            background-position: 200px 100px;
        }
        .buuutton{
            background-color: #bf0a30;
  border-radius: 4px 4px 4px 4px;
  box-shadow: -3px 9px 16px -4px rgba(0,0,0,0.26);
  font-size: 16px;
  padding: 15px 30px;
  color:white;
        }
        .bg-vluteer {
            background-image: url('../img/donate-bg-main-1.jpg');
            
        }
        .text-leftsss{
            text-align:left;
            padding:40px 20px;
            background:white;
        }
        .inner-alider{
            box-shadow:1px 1px 3px 1px rgba(0,0,0,0.2);
            margin:10px;
            border-bottom:4px solid #bf0a30;
               border-radius:10px 10px 10px 10px;
               height:450px;
        }
          .inner-alider img{
              border-radius:10px 10px 0px 0px;
          }
          .text-leftsss{
               border-radius:0px 0px 10px 10px;
          }
          .wrapper{
  padding: 40px 0;
  overflow-x: hidden;
}



.slick-initialized .slick-slide{
 
  color: #FFF;

  margin: 0 0px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slick-initialized .slick-slide img{
    object-fit:cover;
    width:300px;
    height:300px;
}

.slick-next, .slick-prev{
  z-index: 5;
}
.slick-next{
  right: 15px;
}
.slick-prev{
  left: 15px;
}
.slick-next:before, .slick-prev:before{
  color: #000;
  font-size: 26px;
}

.img-area{
    position:relative;
    z-index:-1;
    height:100%;
    width:100%;
}
.img-area img{
    width:100vh;
} 
    .frist-img {
    position: relative;
    overflow: hidden;
}

.frist-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(12, 35, 63, 0.455); /* Dark Blue Overlay */
    z-index: 1;
}

/* Apply Zoom Effect to the Background Image */
.slick-current {
    animation: zoomEffect 5s forwards;
}

@keyframes zoomEffect {
    0% { background-size: 100%; }
    100% { background-size: 110%; }
}

/* Ensure Content is Above the Overlay */
.content {
    position: relative;
    z-index: 2;
    color: white;
    text-align: center;
    width: 100%;
    padding-top: 40%; /* Adjust as needed */
      opacity: 0;
    transform: translateY(100px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.slick-current .content {
    opacity: 1;
    transform: translateY(0);
}
    .img-slide .frist-img .content {
        position: absolute;
        bottom: 30%;
        z-index: 1;
        color: white;
        text-align: center;
        width: 100%;
        left:20%;
    }
    .img-area {
        position: relative;
        z-index: 1;
        height: 100%;
        width: 100%;
    }
    .frist-img {
    position: relative;
    overflow: hidden;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(12, 35, 63, 0.3); /* Dark Blue Overlay with 70% Opacity */
    z-index: 1;
}

.content {
    position: relative;
    z-index: 2; /* Ensures text appears above overlay */
    color: white;
    text-align: center;
    width: 100%;
    padding-top: 40%;
    max-width:900px;
}
.content  h1{
    color:white;
}
.texter{
    color:#bf0a30;
}
.gap-6{
 gap:50px;
}
.left-conatact{
  
}
 .flip-card {
             background:#bf0a30;
    width:100%;
    height:400px;
   
            perspective: 1000px;
        }

        .flip-card-inner {
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.6s;
            transform-style: preserve-3d;
        }

        .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg);
        }

        .flip-card-front,
        .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            padding:10px 30px;
        }

        .flip-card-front {
            
            color: white;
        }

        .flip-card-back {
            background-color: #00162F;
            color: white;
            transform: rotateY(180deg);
            padding: 15px;
            box-sizing: border-box;
             width:100%;
    height:400px;
        }

        .flip-card-back p {
            margin: 5px 0;
        }
        .over-efe{
            position:relative
        }
        .inner-alider .over-efe::before{
            position:absolute;
            top:100%;
            left:0;
            width:100%;
            height:0px;
            content:"";
            background:rgba(191, 10, 48, 0.8);
            transition:0.2s ;

        }
        .inner-alider .over-efe:hover::before{
              width:100%;
            height:100%;
            top:0px;
            
        }
         .inner-alider .over-efe::after {
             position: absolute;
             top: 10%;
             left: 0;
             width: 100%;
             height: 100%;
             content: "";
             background-image: url('../img/cross.png');
             background-repeat:no-repeat;
             background-position:center;
             transition: 0.2s;
             opacity:0;
              transform:scale(0.9);

         }
         .inner-alider .over-efe:hover::after{
              opacity:1;
              transform:scale(1.3);
        }
        .bg-footer ul{
            flex-direction:column;
        }
   
