.slide-container {
  height: 600px;
  width: 70vw;
  position: relative;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 40%;
  left: 15%;
  opacity: 0;
  transition: 0.4s ease;
  color: white;


}


.slide.active {
  opacity: 1;
}


.arrow {
  display: none; 
}

@media (max-width: 751px){
  .slide-container{
    width:100%;
    padding:20px;
  }
  .slide {
    top: 40%; 
    left: 5%;  
    width: 90%; 
    font-size: 14px; 
    line-height: 1.5;
    word-wrap: break-word;
  }

}

@media (min-width: 768px) {
  .arrow {
    display: block;
    position: absolute;
    background-color: transparent;
    color: #fff;
    padding: 20px;
    font-size: 30px;
    border: none;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }
}

.arrow:focus {
  outline: 0;
}

.left-arrow {
  left: calc(15vw - 60px);
}

.right-arrow {
  right: calc(15vw - 60px);
}



.video-container {
  position: relative;
  height: 600px; 
  overflow: hidden; 
  width:100%;

  
}

.background-video {
  position: absolute; 
  top: 50%;
  left: 50%;
  min-width:100%;
  max-height:700px;
  width:100%;
  height:600px;
  transform: translate(-50%, -50%);
  opacity: 0.7; 
  object-fit: cover; 
}

.content {
  position: absolute; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1; 
  color: white;
  text-align: center;
  padding: 20px;
}
.container-fluid {
  display: flex;
  justify-content: center;
}

.Welcome-section-elaynemed{
  width: 100%;
  margin-top:80px;
}

.container-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  padding: 20px;
  margin: 10px;
  flex: 1 1 30%; 
  text-align: center;
  border-radius: 10px;
  transition: transform 1.5s ease;
}

.two {
  flex: 1 1 100%; 
}

.responsive-image {
  max-width: 100%; 
  height: auto;   
  border-radius: 10px; 
}

.one {
  background-color: var(--primarycolor);
  border: 1px solid var(--primarycolor);
  border-radius: 15px;
  max-height: 500px;
  height: auto;
  color: white;
}

@media (max-width: 1000px) {
  .box {
      flex: 1 1 100%; 
  }
}



.m-content{
margin:50px 2px;
color:white;
}
.h-content{
margin-top:30px;
color: white;
}


.b:hover{
background-color:var(--primarycolor)
}
.icon svg{
width:80px;
height:80px;


}
.icon{
width:110px;
height:110px;
padding:5px;
background-color:white;
margin:auto;

border-radius:8px;
cursor: pointer;
transition: stroke 0.3s ease; 
text-align:center;
}
.icon .code{
width:70px;
height:85px;
}
.icon p{
margin-top:-5px;
color:var(--secondarycolor);
}
.code + p{
margin-top:-8px;
}
.icon svg{
color: var(--secondarycolor);
fill:var(--secondarycolor);
stroke:var(--secondarycolor);

}
.icon:hover p{
color: #ffffff;
}

.icon:hover svg{

fill:white;
stroke:white;
color:white;

}
.icon:hover{ 
background-color:rgb(122, 151, 47);
border:1px solid rgb(89,112,30);;
color: white;

}

@media (max-width: 500px) {
.icon svg{
width:50px;
height:50px;
}
.icon p{
margin-top:-5px;
color:var( --primarycolor);
}
.code + p{
margin-top:-8px;
}
.icon .code{
width:40px;
height:55px;
}
.icon{
width:80px;
height:80px;
padding:10px;
border:1px solid gray;
font-size:13px;
border:2px solid  var( --primarycolor);
}
#centersection{

margin-top:60px;



}
.Fabulous-Services-section {
  margin-top:40px;
}
.Fabulous-Services-section h2{
  font-size: 1.5em;
}


}
#centersection .d-flex{

border-radius:15px;
padding:30px;
background-color:rgba(255, 255, 255, 0.5);
}



#centersection{

margin-top:0px;

position: relative;
padding:5px;


background-color:rgb(231, 230, 230)


}


.box.show {
transform: translateX(0);
}

.Fabulous-Services-section{

padding:200px 20px;



margin-top:-200px;
text-align:center;


}


.ElayneMED-section {
padding: 20px;
background-color: #ffffff; 
border-radius: 8px; 
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
max-width: 800px; 
margin: 100px auto; 
}

.ElayneMED-list {
text-align: center; 
}

.Fabulous-Services-section h2 {
font-size: 2.5em; 

font-weight:600;
color: var( --secondarycolor);
}

.ElayneMED-list  ul {
list-style-type: none; 
padding: 0; 
text-align: left; 
margin: 0; 
}



.ElayneMED-list  ul li {
font-size: 1.2em; 
margin: 10px 0; 
color: #333; 
padding: 5px 15px; 
background-color: #f9f9f9; 
border-radius: 5px; 
}
.ElayneMED-list h2{
color:var(--secondarycolor);
font-weight:600;
}
.ElayneMED-list ul li:hover{
  color:var(--secondarycolor);
}


@media (max-width: 768px) {
h2 {
font-size: 1.8em;
}

li {
font-size: 1em; 
}
.ElayneMED-section {
  padding: 50px;
}


}

@media (max-width: 480px) {
.ElayneMED-section {
padding: 15px; 
}
}
.icon-container{
padding:20px;

}
.icon-container1{
background-color: var( --primarycolor);;

}
.icon-container p{
  color:var(--secondarycolor);
}




.card {

border-radius: 8px; 
transition: transform 0.6s, box-shadow 0.6s; 

max-width:400px;

height:auto;
text-align: left;



}
@media (max-width:790px){
.card{
  margin:auto
}
}


.card:hover {
transform: scale(1.05);
box-shadow: 0 4px 20px #555;
background-color: #555;
}
.card-body:hover{
background-color:rgb(209, 239, 252);
}


.card-body {

background-color: #f9f9f9; 
border: 2px solid var(--primarycolor);
border-radius:8px;


}

.card-title {
color:var(--primarycolor) 
}

.card-text {
color: #555; 
}


@media (max-width:445px){

  .btn-section{
    margin-top:20px;
  }
}

@media (max-width:368px){
  .responsivebtn{
    margin-top:15px;
  }

}




@media (max-width:848px) {
.col {
flex: 0 0 100%; 
max-width: 100%;
} 
}

.represent{
background-color:  #f1f1f1;
padding:150px 20px;
text-align:center;



}
.col-a{
background-color:white;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
padding:20px;
border-radius:10px;
transition: transform 0.6s, box-shadow 0.6s; 
box-shadow:var(--box-shadow)


}
.col-b {
background-color:white;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
row-gap:10px;
padding:20px;
gap:15px;
border-radius:10px;
transition: transform 0.6s, box-shadow 0.6s; 
box-shadow:var(--box-shadow)



}
.col-b:hover{
transform: scale(1.01);
box-shadow: 0 4px 20px #555;


}
.col-a:hover{
transform: scale(1.01);
box-shadow: 0 4px 20px #555;


}
.representp{
       margin-top:0px;
        font-size: 16px;
       line-height: 1.6;
        color: #555;
}
.represent h2{
color:var(--secondarycolor);
}
.mission{
  gap:64px;
}
#footer{
  margin-top:-70px;
}
.responsive-box{
  border:4px solid var(--primarycolor);
  background-color:var(--primarycolor);
  text-align: left;
}
.responsive-box h2{
 text-align: center;
 color:white;
}
.responsive-box p{
  color:white;
  padding:5px;
}
.responsive-box div{

  background-color:white;
  padding:10px;
  width:100px;
  border-radius:10px;
  margin-top:20px;
}