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


}
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.4;
}

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: 15px;   /* 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;
}
  
        .postion-r{
            position:relative;
                overflow: visible; /* This is key */
        }
        .postion-a{
            position:absolute;
            bottom:30px;
            right:00px;
            display:block;
            transform:translate(60px,80px);
           
        }
        
       img {
  max-width: 100%;
  height: auto;
}
.btn-primary1{
  background:#c32b2e;
  padding:15px 30px;
  border-radius:7px;
  color:white;
  margin-top:30px;
}
.higherter{
    color: #ff4f9d;
}
.text-justify{
    text-align:justify;
}
.blue h3 {
  background:
blue;
  color: #3498db;
  font-size: 36px;
  line-height: 100px;
  margin:
10px;
  padding:
2%;
  position: relative;
  text-align: center;
 width:400px;
 height:400px;
}
.blue{
 width:250px;
 height:250px;
  background:
#884cd2;
  margin:0px 10px;
}
/* Style for both arrows */
.custom-arrow {
  background-color: #2c3e50;
  border: none;
  color: #fff;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  z-index: 1000;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Position left arrow */
.slick-prev.custom-arrow {
  left: -10px;
}

/* Position right arrow */
.slick-next.custom-arrow {
  right: -10px;
}

/* Style for both arrows */
.custom-arrow1 {
  background-color: #2c3e50;
  border: none;
  color: #fff;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  z-index: 1000000;
  position: absolute;
  top: 107%;
  transform: translateY(-50%);
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  overflow:visible;
}

/* Position left arrow */
.slick-prev.custom-arrow1 {
  left: 45%;
}

/* Position right arrow */
.slick-next.custom-arrow1 {
  right:47%;
}

/* Optional: Hide arrows on mobile */
@media (max-width: 600px) {
  .custom-arrow {
    display: none;
  }
}
.seriv-main {
    width: 400px;
    background: #FBF9F5;
    margin: 0px 10px;
    text-align: center;
    border-radius: 10px;
    position: relative;
    overflow: hidden; /* Ensures pseudo-elements don't spill out */
}

.seriv-main h5 {
    color: black !important;
    margin-top: 10px;
}

.seriv-main figure {
    padding: 15px 5px;
    position: relative;
    margin-bottom: 0px !important;
    z-index: 3;
}

/* Animation layer for figure */
.seriv-main figure::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    background: #c32b2e;
    transition: 0.4s;
    z-index: -1;
}

/* Animation layer for image */
.seriv-main .service-img {
    position: relative;
    z-index: 1;
}

.seriv-main .service-img::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    transition: 0.4s;
    z-index: 0;
}

.seriv-main .service-img img {
    height: 250px;
    width: 100%;
    border-radius: 0px 0px 10px 10px;
    display: block;
}

/* Trigger both animations on parent hover */
.seriv-main:hover figure::before {
    height: 100%;
    top: 0%;
}

.seriv-main:hover .service-img::before {
    height: 100%;
    top: 0%;
}
.seriv-main:hover h5{
    color:white !important
}
.nmaer{
    list-style:none;
     
}
.nmaer li{
   margin:30px 0px;
   box-shadow:2px 2px 2px 2px rgba(0,0,0,0.5);
   max-width:290px;
   padding: 10px 5px; 
   border-radius:20px;
}
.nmaer li p{
    font-weight:900;
  
}
.nmer-img{
    border-radius:50% 50% 0px 0px;
}
.ml-50{
    margin-left:50px !important;
}
.ml-40{
    margin-left:40px !important;
}
.ml-30{
    margin-left:30px !important;
}
.ml-20{
    margin-left:20px !important;
}
.ml-70{
    margin-left:70px !important;
}
.mr-50{
    margin-right:50px !important;
}
.mr-40{
    margin-right:40px !important;
}
.mr-30{
    margin-right:30px !important;
}
.mr-20{
    margin-right:20px !important;
}
.mr-70{
    margin-right:70px !important;
}
.full-slider{
    position:relative;
    z-index:-1;
    height:100%;
    width:100%;
}
.back-gound img{
    width:100vh;
} 
    .back-gound {
    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);
}
    .full-slider .back-gound .content {
        position: absolute;
        bottom: 10%;
        z-index: 1;
        color: white;
        text-align: center;
        width: 100%;
        left:20%;
    }
    .full-slider {
        position: relative;
        z-index: 1;
        height: 100%;
        width: 100%;
    }
    .back-gound {
    position: relative;
    overflow: hidden;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* 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;
}



        .parallaxie {
  height: 300px;
  background-attachment: fixed; 
  background-position: center -96.8025px;
  align-content: center;
}
        .position-a{
            position:absolute;
            
        }
        .ainner{
            top:20%;
            z-index:2;
            left:20%;
            margin-bottom:50px;
        }
        .higher{
            height:400px;
            background:white;
        }
        .position-r{
        position:relative;
        }

        .custom-box {
    position: relative;
    background-color: white;
    box-shadow:2px 2px 10px 2px rgba(0,0,0,0.5);
    padding: 40px 20px;
    color: black;
    margin:40px 15px 0px;
    border-radius:10px;
}

/* Pseudo-element for black background */
.custom-box::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 8%;
    height: 265px;
    width: 85%;
    background-color: red;
    z-index: -1;
    border-radius:20px;
}

/* Ensure content is above the ::before pseudo-element */
.custom-box * {
    position: relative;
    z-index: 1;
}
     .custom-box {
    position: relative;
    background-color: white;
    box-shadow:2px 2px 10px 2px rgba(0,0,0,0.5);
    padding: 40px 20px;
    color: black;
    margin:40px 15px 0px;
    border-radius:10px;
}

/* Pseudo-element for black background */
.custom-box::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 8%;
    height: 265px;
    width: 85%;
    background-color: #c32b51;
    z-index: -1;
    border-radius:20px;
}
.hligeter{
    color:#c32b78
}
/* Ensure content is above the ::before pseudo-element */
.custom-box * {
    position: relative;
    z-index: 1;
}
        .back-statgrer {
 background-image: url('../imger/scholar-bg.png');
 padding:70px 10px 100px;
        }