@font-face {
     font-family: 'saint carell';
     src: url(../saint_carell/SaintCarellClean_PERSONAL_USE_ONLY.otf);
     text-transform: lowercase;
 }

 body {
     font-family: Poppins;
     color: #3a3a3a;
     padding: 0px;
 }

 :root {
     --primary-color: #9DAF89;
     --secondary-color: #F0F1EF;
     --accent-color: #ffd08c;
     --tetriary-color: #A59A88;
    
 }
 .p-color{
    color: var(--primary-color);
 }
 .bold{
    font-weight: 600;
 }

 .bg-1 {
     background-color: var(--primary-color);
 }
 .bg-2 {
     background-color: var(--secondary-color);
 }


.s1{
 font-size:12px;
 font-weight:500;
}
.alight-color{
 color : var(--accent-color);
}

 /* TOP BAR */
 .top-bar {
     background: var(--tetriary-color);
     color: #fff;
     font-size: 14px;
     padding: 6px 100px;
 }

 .top-bar .location {
     color: #fff;
     text-decoration: none;
     align-items: center;

 }

 /* NAVBAR */
 .navbar {
     background: #fff;
     padding: 5px 100px;
 }

 .navbar-toggler, 
 .navbar-toggler:active, 
 .navbar-toggler:focus,
 .navbar-toggler:hover
  {
     border: none;
     box-shadow: none;;
 }

 .navbar-collapse {
     justify-content: end;
 }

 .nav-link{
    color: #000;
 }
 .nav-link:hover {
     color: var(--accent-color);
 }

 .navbar-brand img {
     width: 48px;
     height: 48px;
     object-fit: color;
 }

 .navbar .btn-book {
     background: var(--accent-color);
     border-radius: 16px;
     padding: 12px 26px;
 }

 .btn-book:hover {
     background-color: var(--accent-color);
     color: #fff;
 }

 /* HERO */

 .hero-row{
    display:flex;
 }

 .hero-image{
        background-image:url('../images/personal\ care\ on\ duty.jpeg');
        background-size:auto 100%; 
        background-position:top 10% left 20%;
        background-repeat: no-repeat;
        min-height: 100%;
        overflow: hidden;
        clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
 }
 .hero {
     background-color:var(--primary-color);
     height: 90vh;
    
 }

 .services{
    position:relative;
     z-index:1;
     background-color:white;
 }

 .hero-content {
     color: #ffffff;
     padding-left: 100px;
 }

 .hero h1 {

     color: rgb(255, 255, 255);
     font-size: 38px;
     font-family: 'saint carell';
 }

 .hero p {
     max-width: 860px;
     margin: auto;
     font-size: 16px;
     font-weight: 240;
     font-family: poppins;
     text-transform: capitalize;
 }

 /* BUTTONS */
 .btn-primary-custom {
     background: var(--accent-color);
     color: #000;
     border: none;

 }

 .btn-primary-outline{
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    background-color: transparent;
 }

 .btn-primary-custom:hover,
 .btn-primary-outline:hover {
     background-color: var(--accent-color);
     color: #fff;
 }

 .btn-rule {
     padding: 16px 26px;
     font-size: 14px;
     border-radius: 16px;
 }

 .btn-outline-custom {
     border: 1px solid #fff;
     color: #fff;
     background-color: transparent;

 }

 .btn-outline-custom:hover {
     background-color: #fff;
     color: rgb(0, 0, 0)
 }


 /* SECTION TITLE */

 .section {
     padding: 98px 107px;
 }

 .section-top {
     border: 1px solid var(--primary-color);
     font-size: 20px;
     background-color: transparent;
     color: var(--primary-color);
     border-radius: 100px;
     padding: 8px 20px;

 }

 .section-title {
     font-family: 'saint carell';
     font-weight: normal;
     font-size: 36px;
     line-height: 52px;
     letter-spacing: 5px;
     color: #000;
 }

 .small {
     font-size: 16px;
     text-transform: capitalize;
 }


 .feature-card {
     border: none;
     border-radius: 16px;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 16px;

 }

 .feature-card p {
     font-size: 14px;
     font-weight: 500;
     margin: 0;
 }

 .feature-card img {
     height: 200px;
     object-fit: cover;
     margin-bottom: 5px;
     border-radius: 16px;
 }

 

 .service-img {
     width: 80%;
     border-radius: 24px;
     object-fit: cover;
     height: 350px;
     transition: 0.4s ease;
 }

 

 
 /* SERVICE CARDS */
 .service-card {
     background-color: var(--secondary-color);
     border:none;
 }

 .service-title {
     font-weight: bold;
     font-size: 14px;
 }

 .service-list li,
 .service-subtitle {
     font-size: 13px;
     font-weight: 300;
 }

 .service-list{
    list-style-type:none;
    padding-left:5px;
 }

 .service-list li::before {
    content: "\F26A";
    font-family:'bootstrap-icons';
     margin-right: 8px;
    display:inline-block;
    width:0.5rem;
    color: var(--primary-color);
  
}

 /* the service btn always down and aligned even when the sevice cards dont have same content all the button should have their btn at same level*/
 .service-btn {
     position: absolute;
     bottom: 24px;
     left:0px;
     width: 100%;
 }

 .sbtn-pane {
     margin-top: 3.5rem;
 }

 /* TESTIMONIALS */
 .testimonial-card {
     position: relative;
     border: none;
     border-radius: 16px;
     padding: 20px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

 }

 .stars {
     font-size: 12px;
     color: var(--accent-color);
 }

 .active {
     background: linear-gradient(var(--primary-color),var(--primary-color));
     color: white;
 }

 .card-bg-2 {
     background: #ffffff;
 }

 .quote {
     font-size: 90px;
     position: absolute;
     right: 10px;
     top: 10px;
     z-index: 1;
     opacity: 0.3;
 }

 .client-review {
     font-size: 16px;
     font-weight: 300;
     position: relative;
     z-index: 2;
 }

 .client-style-1 {
     color: var(--primary-color);
 }



 .client-name {
     font-weight: 600;
 }



 /* CTA */
 .cta {
     padding: 60px 0;
 }

 .cta-panel {

     background-image: url(../images/cta-bg.png);
     background-repeat: no-repeat;
     background-size: cover;
     border: 1px solid rgb(255, 255, 255);
     color: white;
     text-align: center;
     padding: 40px;
     border-radius: 24px;
 }

 .cta-title {
     font-family: poppins;
     text-transform: sentence-case;
     font-weight: bold;
     padding: 0px 20px;
     font-size: 32px;

     line-height: 52px;
 }

 .cta-subtitle {
     font-family: poppins;
     text-transform: sentence-case;
     padding: 0px 20px;
     font-weight: normal;
     font-size: 20px;
     line-height: 28px;
 }

 /* CONTACT */
 .contact-section {
     background: #4d5542;
     padding: 60px 0;
 }

.form-control {
     border: 1px solid var(--primary-color);
     background-color: transparent;
     color: var(--primary-color);
     padding: 12px 24px;
     border-radius: 12px;
     outline: none;
 }

 .form-control::placeholder {
     color:#00000044;
     opacity: 1;
 }

 .form-control:focus {
     border-color: var(--primary-color);
     color: #090909;
     box-shadow: 0 0 0 0.2rem rgba(255, 208, 140, 0.5);
     background-color: transparent;
     outline: none;

 }


 .btn-contact {
     background: var(--accent-color);
     color: #000;
     border-radius: 16px;
     padding: 12px 26px;
 }

 .btn-contact:hover {
     background-color: #FFD08C;
     color: #fff;
 }


 .contact-info-pane {
     font-size: 16px;
     font-weight: 300;
     color: var(--pimary-color);
     display: flex;
     align-items: center;
     margin-left: 20px;

 }

 .contact-context {
     padding: 0px 20px;
     color: #fff;
 }

 .contact-icon i {
     color:white;
     font-weight: bold;
     width: 24px;
     height: 24px;
     border-width: 2px;
     background-color: var(--accent-color);
     padding: 8px 12px;
     border-radius: 50%;
 }

 .contact-info {
     text-transform: capitalize;
 }

 label{
    color: #0000009a;
     font-weight: 300;
 }

 /* FOOTER */
 footer {
     border-top: 2px solid #fff;
     background: #000000;
     
    
 }
 .footer-pane{
     padding: 55px 100px;
     
 }

 .copyright-pane{
    background-color:#000;
   border-top: 1px solid #959494;
    color: #fff;
    font-size: 14px;
    padding: 12px 100px;
    
 }
 .social-icons {
     text-align: end;
 }

 .footer-icon {
     color: var(--accent-color);
     background-color:#fff;
     padding: 8px 12px;
     border-radius: 50%;
 }

 .footer-text{color:#dedede97;
    font-weight: 300;}

 .footer-icon:hover {
     color: #fff;
     background-color: var(--accent-color);
     padding: 8px 12px;
     border-radius: 50%;
 }

.footer-link{
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    display: block;
    margin-bottom: 8px;
}

.footer-link:hover{
    color: #FFD08C;
}
 .copyright {
     text-align: left;
 }


 /* titlehandling */
 .small {
     max-width: 800px;
     margin: auto;
     text-align: center;
 }

 /* About Us page */
 .about-text {
     text-align: justify;
 }



 .about{
    display: flex;
    justify-content: center;
 }



.img-holder{
    background-size: 100% 95%;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100%;
    
   
}

.about-mobile-img{
    display: none;
}
 

 /* Careers page */
 .career-form-pane {
     background-color:#fff;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     padding: 20px;
     border-radius: 10px;
 }
 .career-text p{
    text-align: justify;
     font-size: 16px;
     font-weight: 300;
 }
 
 
 /*application recieved page*/
 
  /* thank you page */
  .thank-you-section{
    min-height:100vh;
    background:#9DAF89;
}


.thank-you-card{
    max-width:700px;
    padding:20px;
    background:#fff;
    border-radius:24px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    text-align:center;
}

.success-icon{
    font-size:64px;
    margin-bottom:10px;
}


 /* ANIMATION EFFECTS */
 .card {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 /* hover effect */
 .card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
 }


 .icon-wrapper {
     position: relative;
     display: inline-block;
     width: 20px;
     height: 20px;
 }

 .icon {
     position: absolute;
     left: 0;
     top: 0;
     font-size: 16px;
 }

 /* first icon */
 .icon-1 {
     animation: swapIcon1 1.8s infinite ease-in-out;
 }

 /* second icon */
 .icon-2 {
     opacity: 0;
     animation: swapIcon2 1.8s infinite ease-in-out;
 }

 @keyframes swapIcon1 {

     0%,
     40% {
         opacity: 1;
         transform: scale(1);
     }

     50%,
     100% {
         opacity: 0;
         transform: scale(0.4);
     }
 }

 @keyframes swapIcon2 {

     0%,
     40% {
         opacity: 0;
         transform: scale(1.6);
     }

     50%,
     90% {
         opacity: 1;
         transform: scale(1);
     }

     100% {
         opacity: 0;
         transform: scale(0.4);
     }
 }


 /* mobile view design */
 @media (max-width: 768px) {

     .breaker {
         display: none;
     }

     .top-bar,
     .navbar {
         padding: 6px 20px;
     }

     .hero-row{
        padding-top:30px
     }
     .hero h1 {
         text-align: center;
         max-width: 100%;
         font-size: 24px;
         padding: 0px 20px;
     }

     .hero p {
         font-size: 16px;
         max-width: 100%;
     }

     .hero-btn {
         flex-direction: column;
     }

     .hero-content{
        padding:0px 20px;
        text-align: center;
     }

     .hero-image{
        background-position:top;
        background-size:auto 420px;
        min-height: 420px;
        border-radius: 50px 50px 0px 0px;
        clip-path:none;
        margin-top:20px;
     }
     .section {
         padding: 60px 20px;
     }

     .section-title {
         font-size: 28px;
         color: #000;
         
     }

     .align-center-md{
        text-align: center;
     }

     .feature-card p {
         font-size: 14px;
     }

     .service-img {
         height: auto;
     }

     
    

     .img-holder{
      display: none;
      
     }

     .about-mobile-img{
        height: auto;
        display: block;
        width: 100%;
        border-radius: 12px;
        margin-bottom: 12px;
     }

     .cta {
         padding: 40px 20px;
     }

     .cta-title {
         font-size: 24px;
         line-height: 32px;
     }

     .cta-panel {
         background-size: cover;
         background-position: left;
     }

     .contact-info-pane {
         padding: 16px 25px;
         margin-left: 0px;
     }
     .about-text {
         padding: 0px 20px;
     }

     .form-pane {
         padding: 20px 20px;
     }

     .footer-pane {
         padding: 40px 40px;
     }

     footer .social-icons {
         text-align: center;

     }

    .copyright-pane {
        padding: 16px 40px;
     }

     .copytext{
        order: 2;
     }

     



 }

 @media screen and (max-width:390px) {
    .hero h1 {
        font-size: 38px;
    }

    .hero-image{
        height: 200px;
    }
 }


 /* smaller devices */
 @media screen and (max-width: 375px) {
     .hero h1 {
         font-size: 24px;
     }

     .img-holder {
         order : 0;
     }
     .hero p {
         font-size: 14px;
     }

     .btn-rule {
         padding: 12px 20px;
         font-size: 14px;
     }

     .section-title {
         font-size: 24px;
     }

     .feature-card p {
         font-size: 12px;
     }

     .about-text{
        padding: 0px 10px;
     }
 }