*{
    margin:0;
    font-family: Arial;
    border: border-box;
    position: relative;
    overflow: visible;
}    


.card{
    margin: 0%;
    border: none !important;
    border-radius: 0px !important;
}

.servicesdetails {
    background-color: #656D4A;
  }
  
.servicesdetails h3 {
    padding: 100px;
    font-size: 60px;
    font-style: italic;
    color: #fff;
  }
  
.servicesdetails h3 span {
    font-size: 60px;
    font-style: italic;
    color: #fff;
    font-family: "Dancing Script", cursive;
  }
  
.servicesdetails p {
    padding-left: 100px;
    padding-right: 100px;
    font-family: "Montserrat", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 20px;
    color: #fff;
    line-height: 1.9;
  }
  
.all-packages {
    background-color: #fff;
    text-align: center;
    margin-bottom: 1.5rem;
    color: #656D4A;
}
  
.all-packages h4 {
    font-size: 3rem;
    font-style: italic;
    font-family: "Dancing Script", cursive;
    margin: 0.5rem 0 1rem 0;
}
  
.all-package-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    padding: 0 12px 2rem;
    border: none !important;
    border-radius: 0px !important;
}
  
.all-package {
    flex: 1 1 280px;
    max-width: 520px;
    text-align: center;
    color: #656D4A;
    padding: 16px 12px;
}
  
  #rightborder {
    border-right: 2px solid #656D4A;
}
  
  .all-package p {
    margin: 24px 0;
}
  

.services-one,
.services-two,
.services-three,
.services-four {
    height: auto;
    padding: 2rem 0;
    border: none !important;
    border-radius: 0px !important;
}
  

.services-one {
    background-color: #afbea3 !important;
    color: #fff !important;
}
  
.services-two {
    background-color: #ffffff !important;
    color: #656D4A !important;
}
  
.services-three {
    background-color: #656D4A !important;
    color: #fff !important;
}
  
.services-four {
    background-color: #ffffff !important;
    color: #656D4A !important;
}
  
.service-head {
    font-size: clamp(28px, 3.5vw, 48px) !important;
    font-family: Arial, sans-serif !important;
    margin-bottom: 0.5rem;
}
  
.service-content p {
    margin: 10px !important;
}
  

  
.video-container {
    position: relative;
    width: 100%;
    max-width: 380px;     
    aspect-ratio: 9 / 16;  
    overflow: hidden;
    border-radius: 0;
}
  
.service_video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
  
 
.service-video {
    padding: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
  
 
  
@media (max-width: 991px) {

  .servicesdetails h3 {
      padding: 24px;
      font-size: 40px;
  }

  .servicesdetails p {
      padding: 0 16px 24px;
      font-size: 16px;
  }

  /* Text comes first, video second */
  .services-one .col-md-7,
  .services-two .col-md-7,
  .services-three .col-md-7,
  .services-four .col-md-7 {
      order: 1;
  }

  .services-one .service-video,
  .services-two .service-video,
  .services-three .service-video,
  .services-four .service-video {
      order: 2;
      justify-content: center;
      align-items: center;    
  }

  .video-container {
      max-width: 350px;
      width: 100%;
      margin: 0 auto;
  }

  .service-video {
      padding: 1.5rem 0;
      margin: 0;
  }
}

@media (max-width: 575px) {
    .servicesdetails h3 span {  /*need to fix this*/
    font-size: 4rem !important;
  }

    .all-package {
      padding: 10px 8px;
    }
  
    .all-package-container {
      padding: 0px 25px;
    }
  
    #rightborder {
      border-right: 0;
      border-bottom: 2px solid #656D4A;
      margin-bottom: 0;
    }
  
    .all-packages h4 {
      font-size: 2.2rem;
    }
  
    
    .services-one .row,
    .services-two .row,
    .services-three .row,
    .services-four .row {
      align-items: flex-start !important;
    }
  
    .services-one,
    .services-two,
    .services-three,
    .services-four {
      padding: 1.5rem 0 !important;
      height: auto !important;
      min-height: 0 !important;
    }
  
    
    .services-one .col-md-7,
    .services-two .col-md-7,
    .services-three .col-md-7,
    .services-four .col-md-7 {
      width: 90%;
      margin: 0 auto;
    }
  
    .services-one .card-body,
    .services-two .card-body,
    .services-three .card-body,
    .services-four .card-body {
      padding: 0.5rem 1rem !important;
    }
  
    .service-head {
      font-size: 22px !important;
      text-align: center !important;
      margin-bottom: 0.3rem !important;
    }
  
    .card-body p {
      margin: 6px 0 !important;
      font-size: 15px !important;
      line-height: 1.4 !important;
    }
  
    .card-body hr {
      margin: 6px 0 !important;
    }
  
    
    .service-video {
      width: 100%;
      padding: 0.5rem 0 !important;
      margin: 0 auto !important;
      display: flex;
      justify-content: center !important;
      align-items: center !important;
    }
  
    
    .video-container {
      width: 100%;
      max-width: 420px;
      aspect-ratio: 9 / 16 !important;
      margin: 0 auto;
      overflow: hidden;
      transform: scale(0.8);
      transform-origin:center;
      margin-bottom: -40px;
    }
  
    
    .video-container video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 0px;
    }
  
    .servicesdetails h3 {
      padding: 24px;
      font-size: 34px;
      text-align: left;
    }
  
    .servicesdetails p {
      padding: 0 16px 24px;
      font-size: 16px;
    }
    .card-text .content-details .service-content{
      margin-top: 20px !important;
    }
  
  }
  
  .card .col-md-4 > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
.card .mb-3.service-photo{
  border-radius: 0px !important;
}