@import "https://fonts.googleapis.com/css2?family=Courgette&family=Montserrat:wght@500&family=Poppins&display=swap";

* {
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
text-decoration:none
}

body {
background-color:#104425cf;
margin:0;
padding:0;
background-image:radial-gradient(#ffffff2c 2px,transparent 0)
}

::-webkit-scrollbar {
display:none
}

.nav {
display:flex;
justify-content:center;
align-items:center;
width:90%;
height:70px;
position:fixed;
top:20px;
left:50%;
transform:translateX(-50%);
background-color:#ffffffe6;
border-radius:15px;
box-shadow:0 4px 12px #0000001a;
z-index:1
}

#nav #particles-js {
position:absolute;
top:0;
left:0;
height:100%;
width:100%
}

.nav img {
width:55px;
height:55px
}

.nav a {
text-decoration:none;
color:#12301ecf;
font-size:15px;
padding:5px 20px;
margin:0 10px;
letter-spacing:1px;
font-weight:600
}

.nav a:hover {
color:#1cde02;
transition:.3s ease
}

#btn-nav {
width:25px;
height:25px;
display:none
}

.btn-menu {
width:80%;
text-align:right
}

#btn-menu {
width:25px;
height:25px;
text-align:right;
cursor:pointer
}

.nav-menu {
width:80vh;
height:80vh;
position:fixed;
z-index:10;
background-color:#ffffffe6;
border-radius:15px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-evenly;
transform:translateX(-1000px);
transition:1s ease-in
}

.nav-menu.active {
transform:translateX(0px);
transition:1s ease-in
}

.nav-menu a {
font-size:1rem;
color:#000
}

.nav-menu a:hover {
color:#02de23;
transition:.3s ease
}

.container {
width:100%;
height:100%;
display:flex;
flex-direction:column;
padding:70px 0 40px
}

.buttonDownload {
display:inline-block;
position:relative;
padding:8px 23px;
background-color:#54c122;
color:#fff;
font-family:sans-serif;
text-decoration:none;
font-size:.9em;
text-align:center;
border:1px solid #25D366;
border-radius:.9em;
background:linear-gradient(45deg,#1b5201,#25D366);
background-size:200% 200%;
animation:gradientAnimation 3s ease infinite
}

.buttonKnowMore {
margin-top:5%;
display:inline-block;
position:relative;
padding:8px 23px;
background-color:#4CC713;
color:#fff;
font-family:sans-serif;
text-decoration:none;
font-size:.9em;
text-align:center;
border:1px solid #25D366;
border-radius:20px
}

.buttonKnowMoretreatment {
margin-top:5%;
display:inline-block;
position:relative;
padding:7px 15px;
background-color:#fff;
color:#4CC713;
font-family:sans-serif;
text-decoration:none;
font-size:.9em;
text-align:center;
border-radius:20px
}

@keyframes gradientAnimation {
0% {
background-position:0 50%
}

50% {
background-position:100% 50%
}

100% {
background-position:0 50%
}
}

.buttonDownload i {
margin-right:8px
}

.buttonKnowMore i {
margin-right:8px
}

/*Beranda starts here*/

.beranda2 {
    width:100%;
    height:100vh;
    background-size:cover;
    background-image: url("../img/bggg.webp");
    background-position:center;
    background-repeat:no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
    }
    

/* Main Container for the landing page */
/* Main Container for the landing page */
.beranda {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    animation: slideshow 18s infinite ease-in-out; /* Smooth slideshow animation */
  }
  
  /* Gradient Overlay for better text visibility */
  .gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)); /* Subtle gradient */
    z-index: 1;
  }
  
  /* Centered content */
  .content {
    z-index: 2;
    text-align: center;
    padding: 0 20px;
    max-width: 800px;
    margin: auto;
  }
  
  /* Floating leaves (minimal and subtle) */
  .floating-leaf {
    position: absolute;
    width: 120px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: floatLeaf 8s ease-in-out infinite;
  }
  
  .floating-leaf.left {
    left: 5%;
    bottom: 10%;
    background-image: url(../img/leaf-left.webp);
    opacity: 0.8;
  }
  
  .floating-leaf.right {
    right: 5%;
    bottom: 15%;
    background-image: url(../img/leaf-right.webp);
    opacity: 0.8;
  }
  
  /* Smoother image transitions */
  @keyframes slideshow {
    0%, 30% { background-image: url(../img/bg2.webp); opacity: 1; }
    35% { opacity: 0; }
    40%, 65% { background-image: url(../img/bg3.webp); opacity: 1; }
    70% { opacity: 0; }
    75%, 100% { background-image: url(../img/8023207.webp); opacity: 1; }
  }
  
  /* Floating leaves animation (subtle) */
  @keyframes floatLeaf {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  
  /* Text animation */
  @keyframes fadeSlideIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  
  /* Typography for modern look */
  .title-line {
    color: #ffffff;
    font-size: 4vw;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
  
  /* Responsive typography adjustments */
  @media (max-width: 768px) {
    .title-line {
      font-size: 6vw;
    }
  }
  
  @media (max-width: 480px) {
    .title-line {
      font-size: 8vw;
    }
  }
  
  /* Leaf and content responsiveness */
  @media (max-width: 768px) {
    .floating-leaf {
      width: 100px;
      height: 100px;
    }
  }
  
  @media (max-width: 480px) {
    .floating-leaf {
      width: 80px;
      height: 80px;
    }
  }
  

#text-animation {
position:relative;
z-index:1
}

@media (max-width: 768px) {
.floating-leaf {
width:120px;
height:120px
}

.floating-leaf.behind-title {
left:5%;
width:100px;
height:100px
}
}

@media (max-width: 480px) {
.floating-leaf {
width:100px;
height:100px
}

.floating-leaf.behind-title {
width:80px;
height:80px
}
}
.beranda2 span {
    font-family: 'Uni Sans', sans-serif; /* Geometric sans-serif font */
    font-weight:700;
    text-align:left;
    line-height:1.2;
    max-width:90%
    }

.beranda span {
font-family:"Roboto Condensed",sans-serif;
font-weight:700;
text-align:left;
line-height:1.2;
max-width:90%
}

.title-line {
color:#4cf952;
font-size:2.5vw;
text-shadow:2px 2px 4px #00000080
}

.subheading-line {
color:#28c114;
font-size:1.8vw;
text-shadow:2px 2px 4px #00000080

}

@media (max-width: 768px) {
.title-line {
font-size:5vw
}

.subheading-line {
font-size:4vw
}
}

#text-animation span {
opacity:0;
transform:translateX(-20px);
animation:fadeSlideIn 1s ease forwards
}

@keyframes fadeSlideIn {
0% {
opacity:0;
transform:translateX(-20px)
}

100% {
opacity:1;
transform:translateX(0)
}
}

/*beranda endd*/

.floating-menu {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    z-index: 1000;
}

.menu-open {
    display: none;
}

.menu-open-button {
    width: 60px;
    height: 60px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 10;
    transition: transform 200ms;
    border: 2px solid #004401; /* Border added for animation */
    animation: heartbeat 1s infinite; /* Heartbeat animation */
}

/* Customer care icon styling */
.menu-open-button i {
    font-size: 24px; /* Adjust size of the icon */
    color: #004401; /* Icon color */
}

/* Sub-buttons */
.menu-item {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(21, 112, 0);
    text-align: center;
    line-height: 50px;
    opacity: 0;
    pointer-events: none;
    transition: all 200ms ease-out;
    transform: translate3d(0, 0, 0);
    border: 2px solid #004401; /* Border for animation */
}

/* Sub-buttons appearing when the menu is open */
.menu-open:checked ~ .menu-item {
    opacity: 1;
    pointer-events: auto;
}

/* Position the buttons upwards */
.menu-open:checked ~ .menu-item:nth-child(3) {
    transform: translateY(-70px);
}

.menu-open:checked ~ .menu-item:nth-child(4) {
    transform: translateY(-140px);
}

.menu-open:checked ~ .menu-item:nth-child(5) {
    transform: translateY(-210px);
}

/* Keyframes for heartbeat animation */
@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
        border-width: 2px;
    }
    25% {
        transform: scale(1.05);
        border-width: 3px;
    }
    50% {
        transform: scale(1.1);
        border-width: 4px;
    }
    75% {
        transform: scale(1.05);
        border-width: 3px;
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .menu-open-button,
    .menu-item {
        width: 50px;
        height: 50px;
    }

    .menu-open:checked ~ .menu-item:nth-child(3) {
        transform: translateY(-70px);  /* Increased spacing */
    }

    .menu-open:checked ~ .menu-item:nth-child(4) {
        transform: translateY(-140px); /* Increased spacing */
    }

    .menu-open:checked ~ .menu-item:nth-child(5) {
        transform: translateY(-210px); /* Increased spacing */
    }
}


#strip {
margin:0;
padding:0;
position:relative;
top:-30px
}

.full-width-strip {
width:100%;
background-color:#fff;
color:#128026;
padding:20px 0;
text-align:center;
font-size:1.5em;
font-weight:700;
font-family:'Arial',sans-serif;
position:relative;
overflow:hidden;
transform:rotate(-3deg) translateY(-5px);
margin-top:0
}

.moving-text {
display:inline-block;
white-space:nowrap;
text-shadow:1px 1px 3px #0003;
animation:slideText 35s linear infinite
}

@keyframes slideText {
0% {
transform:translateX(1%)
}

100% {
transform:translateX(-100%)
}
}

@media (max-width: 768px) {
.full-width-strip {
font-size:1.2em;
padding:15px 0
}
}

@media (max-width: 480px) {
.full-width-strip {
font-size:1em;
padding:10px 0
}
}

.tentang {
flex-direction:row;
justify-content:space-evenly;
align-items:center;
flex-wrap:wrap
}

.tentang img {
width:500px;
height:400px;
animation-name:tentang;
animation-duration:2s;
animation-iteration-count:infinite;
animation-timing-function:linear
}

.area-tentang {
width:500px;
display:flex;
flex-direction:column;
align-items:center
}

.judul {
font-size:35px;
font-family:'Playfair Display',serif;
text-align:center;
font-weight:600;
letter-spacing:2px;
color:#ffce09;
margin:10px 0 15px
}

.judulins {
font-size:35px;
font-family:'Playfair Display',serif;
text-align:center;
font-weight:600;
letter-spacing:2px;
color:#12301ecf;
margin:10px 0 15px
}

.judul2 {
font-size:23px;
font-family:'EB Garamond',serif;
text-align:center;
font-weight:600;
letter-spacing:2px;
color:#128026;
margin:10px 0 15px
}

.judul4 {
font-size:23px;
font-family:'EB Garamond',serif;
text-align:center;
font-weight:600;
letter-spacing:2px;
color:#fff;
margin:10px 0 15px
}

.area-tentang p {
text-align:center;
letter-spacing:1px;
color:#ececec;
font-family:"Lato",sans-serif;
line-height:1.8
}

@keyframes tentang {
0% {
transform:translate(0px,0px)
}

50% {
transform:translate(0px,-20px)
}

100% {
transform:translate(0px,0px)
}
}

.visi {
background-color:#fff
}

.area-visi {
width:100%;
height:100%;
display:flex;
justify-content:space-evenly;
flex-wrap:wrap-reverse
}

.area-visi img {
width:400px;
height:550px
}

.area-visi .main-carousel {
width:400px;
height:600px
}

.visi-kiri {
width:400px;
display:flex;
flex-direction:column;
justify-content:space-evenly;
align-items:center;
margin:20px 0
}

.box-visi {
width:280px;
padding:10px;
text-align:center;
margin:10px;
border:2px dotted #12301e;
border-radius:15px;
position:relative;
background-color:#fff;
box-shadow:2px 2px 8px #0000001a
}

.box-visi img {
width:60px;
height:60px
}

.box-visi h1 {
color:#128026;
font-size:20px;
margin-bottom:10px
}

.box-visi p {
color:#12301ecf;
font-size:13px
}

.menu {
justify-content:center;
align-items:center
}

.carousel,.main-carousel {
width:90%;
min-height:100%;
padding:20px 0;
}

/* Specialization */
/* Specialization Section */
.specialization-section {
    background-color: #f9f9f9;
    padding: 60px 0;
    position: relative;
    overflow: hidden;
    color: #333; /* Default text color */
}

/* Adding background patterns on multiple sides */
.specialization-section::before,
.specialization-section::after {
    content: '';
    position: absolute;
    background-image: url('../img/leaf.webp'); /* Replace with your pattern image */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.1; /* Adjust as needed */
    width: 200px;
    height: 200px;
}

/* First pattern (top-right) */
.specialization-section::before {
    top: 20px;
    right: 20px;
}

/* Second pattern (bottom-left) */
.specialization-section::after {
    bottom: 20px;
    left: 20px;
}

/* Third pattern (bottom-right) */
.specialization-section::before {
    bottom: 50px;
    right: 50px;
    opacity: 0.05; /* Lighter opacity */
}

/* Container styles */
.container2 {
    width: 90%;
    margin: 0 auto;
    max-width: 1200px;
}

/* Title and subtitle */
.main-title {
    font-size: 36px;
    text-align: center;
    margin-bottom: 10px;
    color: #104425cf; /* Primary theme color for title */
}

.section-subtitle {
    text-align: center;
    font-size: 18px;
    margin-bottom: 40px;
    color: #666;
}

/* Specializations grid layout for large screens */
.specializations-grid {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* Specialty row for aligning text and images */
.specialty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 2px solid #104425cf; /* Underline each row with the theme color */
    transition: all 0.3s ease;
}

/* Highlighted Post Natal Care */
.specialty-row:first-child {
    background-color: #e0f7e0; /* Light background for highlighting */
    border-left: 5px solid #104425cf; /* Adding border to the left side */
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Adding a soft shadow for emphasis */
}

.specialty-row:first-child .specialty-text h3 {
    font-size: 32px; /* Make the title larger */
    font-weight: bold; /* Bold the title */
    color: #104425cf; /* Use theme color for the title */
}

.specialty-row:first-child .specialty-image img {
    border: 3px solid #104425cf; /* Add a border around the image */
    transition: transform 0.3s ease-in-out;
}

.specialty-row:first-child .specialty-image img:hover {
    transform: scale(1.1); /* Slight zoom on hover */
}

/* Specialty text and image containers */
.specialty-text, .specialty-image {
    width: 45%; /* Adjusted for better alignment */
    padding: 20px;
}

.specialty-text {
    padding: 20px 30px;
}

.specialty-text h3 {
    font-size: 28px;
    color: #104425cf; /* Use theme color for section titles */
}

.specialty-text p {
    font-size: 16px;
    color: #666;
}

.specialty-image img {
    width: 100%;
    max-width: 500px; /* Control image size for better balance */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.specialty-image img:hover {
    transform: scale(1.05); /* Hover effect to zoom in on image */
}

/* Reverse layout for even rows */
.specialty-row:nth-child(even) .specialty-text {
    order: 2;
}

.specialty-row:nth-child(even) .specialty-image {
    order: 1;
}

/* ----------- Responsive Adjustments ----------- */

/* For tablets and smaller screens (below 1024px) */
@media screen and (max-width: 1024px) {
    .specialization-section {
        padding: 40px 20px;
    }

    /* Stack elements vertically for smaller screens */
    .specialty-row {
        flex-direction: column;
        text-align: center;
    }

    .specialty-text, .specialty-image {
        width: 100%; /* Full width for smaller screens */
    }

    .specialty-image img {
        max-width: 100%; /* Ensure images scale properly */
    }

    /* Adjust text size for readability */
    .specialty-text h3 {
        font-size: 22px;
    }

    .specialty-text p {
        font-size: 14px;
    }
}

/* For mobile screens (below 768px) */
@media screen and (max-width: 768px) {
    .specialization-section {
        overflow: visible;
        padding: 30px 20px;
    }

    .specialty-image img {
        max-width: 100%; /* Ensure images scale properly */
    }

    .specialty-text h3 {
        font-size: 20px;
    }

    .specialty-text p {
        font-size: 12px;
    }

    .specializations-grid {
        gap: 30px;
    }
}

/* For very small screens (below 480px) */
@media screen and (max-width: 480px) {
    .specialization-section {
        padding: 20px 10px;
    }

    .specialty-text h3 {
        font-size: 18px;
    }

    .specialty-text p {
        font-size: 10px;
    }

    .specializations-grid {
        gap: 20px;
    }
}

/* Additional hover effect on the specialty cards */
.specialty-row:hover {
    background-color: #e5f1e5; /* Slight background highlight on hover */
}

/* Button styles (if applicable) */
.button {
    background-color: #104425cf; /* Matching button color with theme */
    color: white;
    border: none;
    padding: 15px 30px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #0b2f1d; /* Darker shade on hover */
}

  
/*Specialization end */  

.box-menu {
width:500px;
margin:0 70px 0 0;
display:flex;
justify-content:space-evenly;
align-items:center
}

.box-menu img {
width:260px;
height:260px;
border-radius:10px
}

.area-menu {
width:200px;
margin:0 10px;
height:100%;
display:flex;
flex-direction:column;
justify-content:space-evenly
}

.harga {
font-size:20px;
letter-spacing:2px;
margin:10px 0;
color:#dea402
}

.area-menu .judul {
text-align:start
}

.area-menu p {
font-size:13px;
color:#ececec
}

.area-review {
width:100%;
height:100%;
display:flex;
justify-content:center;
flex-wrap:wrap
}

.box-review {
width:280px;
height:100%;
padding:0 20px 20px;
margin:30px 10px;
border-radius:10px;
display:flex;
flex-direction:column;
align-items:center;
background-color:#fff;
box-shadow:0 0 10px #c3c3c3;
text-align:center
}

.box-review img {
width:70px;
height:70px;
transform:translateY(-25px);
position:absolute
}

.box-review h1 {
font-size:18px;
margin:50px 0 10px
}

.box-review p {
font-family:'Cormorant Garamond',serif;
letter-spacing:1px;
line-height:1.7
}

.partner {
align-items:center;
background-color:#fff
}

.partner .carousel-cell img {
    width: 140px;
    height: 50px;
    margin: 10px 30px;
}


.lokasi {
padding:90px 0 20px;
align-items:center
}

#map {
width:80%;
height:350px;
margin:20px 0
}

.area-kontak {
width:500px
}

.area-gallery {
width:100%;
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap
}

.area-gallery img {
width:280px;
height:280px;
margin:20px 30px;
transition:.5s ease-in-out;
cursor:pointer
}

.area-gallery img:hover {
transform:scale(1.05);
transition:.5s ease-in-out
}

.footer {
width:100%;
height:100%;
padding:50px 20px;
display:flex;
justify-content:space-evenly;
flex-wrap:wrap;
background-color:#fff;
color:#000;
font-family:'EB Garamond',serif
}

.footer-1 .footer-logo {
display:flex;
align-items:center
}

.footer-logo img {
width:60px;
height:60px;
margin-right:10px
}

.footer-logo h1 {
font-family:'EB Garamond',serif;
font-size:20px;
letter-spacing:1px
}

.footer-1 p {
font-size:13px;
font-family:'EB Garamond',serif;
letter-spacing:1px;
margin-bottom:20px;
color:#000
}

.sosial-media img {
width:30px;
height:30px;
margin-right:10px
}

.footer-1,.footer-2,.footer-3,.footer-4 {
display:flex;
flex-direction:column;
margin:10px
}

.footer-2 h1,.footer-3 h1,.footer-4 h1 {
font-size:20px;
margin-bottom:10px
}

.footer-2 a,.footer-4 a {
color:#000;
margin-bottom:5px
}

.footer-4 a:hover {
color:#ffce09
}

.footer-3 p {
font-size:15px;
color:#000;
letter-spacing:1px;
margin-bottom:5px
}

footer {
width:100%;
height:100%;
background-color:#ffffff9f
}

footer h1 {
text-align:center;
line-height:50px;
color:#000;
font-size:1rem
}

footer h1 a {
color:#000;
display:inline-block
}

footer h1 a:hover {
color:#ffce09
}

@media screen and (max-width:768px) {
.nav {
justify-content:space-between;
padding:0 30px
}

.nav a {
display:none
}

#btn-nav {
display:block
}

.box-menu {
flex-direction:column;
margin:10px;
width:280px
}

.area-menu {
width:260px;
height:220px
}

.footer {
flex-direction:column
}

.area-visi .main-carousel {
width:300px
}

.area-visi img {
width:300px
}

.visi-kiri {
width:300px
}

.box-visi img {
width:60px;
height:60px
}
}

@media screen and (max-width:600px) {
.nav-menu {
width:100%
}

.beranda span {
font-size:30px
}

.tentang img {
width:300px;
height:260px
}

.area-tentang {
width:300px
}

.main-carousel {
width:95%
}

.main-carousel .carousel-cell img {
margin:10px
}
}