@import url(//fonts.googleapis.com/css?family=Inter);
@import url(//fonts.googleapis.com/css?family=Quattrocento:400);

/*---------------------------------------------------FONT IMPORTS END---------------------------------------------------*/


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body{
  background-color: #e0e0e0;
  overflow-x: hidden;
  margin: 0 !important;
  padding: 0;
  font-family: 'Inter', serif;
}

body h1, h2, h3, h4, h5 {
  font-family: 'Quattrocento', serif;
}

/*---------------------------------------------------GLOBAL LINK STYLING START---------------------------------------------------*/

body a {
  color: #5d4037;
  text-decoration: none;
  margin: 0;
  transition: color 0.3s ease;
  position: relative;
  padding-bottom: 2px;
}

body a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #4A3728;
  transition: width 0.3s ease;
 
}

body a:hover {
   color: #5d4037;
}

body a:hover::after {
  width: 100%;
}

/*---------------------------------------------------GLOBAL LINK STYLING END-----------------------------------------------------*/

/*----------------------------------------------------CURSOR STYLING START-------------------------------------------------------*/

/* Cursor Styling */

/* Hide default cursor on all clickable elements */
a, button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"] {
  cursor: none;
}

.cursor {
  pointer-events: none;
  visibility: hidden; /* Hidden by default until mouse moves */
  position: fixed; /* Ensure it stays above all content */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100; /* Very high z-index */
  mix-blend-mode: difference !important;
}

.cursor__ball {
  position: fixed;
  top: 0;
  left: 0;
  mix-blend-mode: difference !important;
}

.cursor__ball circle {
  fill: #f7f8fa;
}

/* Optional: Hide cursor when device doesn't support hover */
@media (hover: none) {
  .cursor {
    display: none;
  }
  
  :root {
    cursor: auto;
  }
  
  a, button, [role="button"], input[type="button"], input[type="submit"], input[type="reset"] {
    cursor: pointer;
  }
}

/*---------------------------------------------------CURSOR STYLING END---------------------------------------------------*/

/*---------------------------------------------------HERO STYLING START---------------------------------------------------*/
 
    .hero-section {
      width: 100%;
      height: 100vh;
      z-index: -100;
   
   
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 1rem;
    }

    .hero-content {
      padding: clamp(1.5rem, 5vw, 3rem) clamp(2rem, 8vw, 5rem);
      border-radius: clamp(25px, 5vw, 50px);
      background: #e0e0e0;
      box-shadow: 20px 20px 60px #bebebe,
        -20px -20px 60px #ffffff;
      width: 90%;
      /* max-width: 1200px; */
    }

    .hero-content h4 {
      font-size: large;
      text-align: center;
      margin-top: 1vh;
    }

    .ml12 {
      font-size: clamp(2rem, 10vw, 100px);
      color: #333;
      font-weight: 100;
      /* font-family: Arial, sans-serif; */
      text-align: center;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
      /* opacity: 1; */
      white-space: wrap;
    }

    /* .ml12 {
      word-wrap:normal;
      overflow-wrap: break-word;
    } */

    @media (max-width: 768px) {
      .hero-content {
        padding: 1.5rem 2rem;
      }
      .hero-content p {
      font-size: small;
  
    }

    }

    @media (max-width: 768px) {
      .ml12 {
        font-size: clamp(2rem, 10vw, 100px);
      }
    }

/*---------------------------------------------------HERO STYLING END---------------------------------------------------*/


/*------------------------------------------CUSTOM CONTENT BLOCK STYLING START -----------------------------------------*/
.container {
  max-width: 90%;
  padding: 3rem 2rem;
}

.custom-content-block {
  background-color: #e0e0e0;
  border-radius: 10px;
  padding: 2rem;
  
}

.custom-content-block h2 {
  color: #5d4037;
  font-size: 1.8rem;
  margin-bottom: 1.2rem;
  text-align: center;
}

.custom-content-block p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.custom-content-block .phone,
.custom-content-block .email {
  color: #5d4037;
  font-weight: bold;
}


/*---------------------------------------------CUSTOM CONTENT BLOCK STYLING END ------------------------------------------------*/

/*------------------------------------------ABOUT SECTION WITH IMAGE STYLING START ---------------------------------------------*/
 .container {
        max-width: 90%;
        margin: 0 auto;
        padding: 20px;
    }

    .about-section {
        background-color: #e0e0e0;
        border-radius: 20px;
        box-shadow: 4px 4px 8px #c8c8c8, -4px -4px 8px #f8f8f8;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .about-content {
        padding: 40px;
    }

    .about-image {
        max-width: 100%;
        margin: 0 auto;
        padding: 40px;
        border-radius: 20px;
        overflow: hidden;
    }

    .about-image img {
        width: 100%;
        height: auto;
        border-radius: 15px;
    }

    p {
        margin-bottom: 15px;
        text-align: justify;
    }

   
    /* Responsive styles for Bootstrap two-column layout */
    @media (min-width: 768px) {
        .about-section {
            flex-direction: row;
            align-items: center;
        }

        .about-image {
            flex: 0 0 40%;
            margin: 0;
            padding: 0;
        }

        .about-content {
            flex: 1;
            padding: 40px;
        }
    }

/*------------------------------------------ABOUT SECTION WITH IMAGE STYLING END ---------------------------------------------*/

/*---------------------------------------------- ANGEBOT PRICING CARDS START ---------------------------------------------*/

   .pricing-card {
        background: #e0e0e0;
        border-radius: 20px;
        padding: 2rem;
        box-shadow: 2px 2px 8px #bebebe,
                    -2px -2px 8px #ffffff;
        display: flex;
        flex-direction: column;
        margin-bottom: 2rem;
        width: 100%;
    }

    .pricing-card h3 {
        font-size: 1.5rem;
        color: #333;
        margin-bottom: 1rem;
        text-align: left;
    }

    .pricing-card p {
        color: #4a5568;
        margin-bottom: 1rem;
        line-height: 1.6;
    }

    .pricing-card ul {
        list-style: none;
        margin-bottom: 1rem;
        padding-left: 0;
    }

    .pricing-card ul li {
        color: #4a5568;
        margin-bottom: 0.8rem;
        padding-left: 1.5rem;
        position: relative;
    }

    .pricing-card ul li::before {
        content: "•";
        color: #5d4037;        
        position: absolute;
        left: 0;
    }

    .pricing-card .price {
        font-size: 1.8rem;
       color: #5d4037;
        margin-bottom: 1rem;
        font-weight: bold;
    }

    .pricing-card .separator {
        height: 2px;
        background: #cbd5e0;
        margin: 1.5rem 0;
        border-radius: 1px;
    }

    .pricing-card .duration {
        color: #2c5282;
        font-weight: bold;
        text-align: center;
        margin-top: auto;
    }

/*---------------------------------------------------- ANGEBOT PRICING CARDS END ---------------------------------------------*/
	
/*----------------------------------------------- ANGEBOT ADDITIONAL SERVICES START ---------------------------------------------*/
  .additional-services {
      /* max-width: 1400px; */
      /* margin: 4rem auto 2rem auto; */
      padding: 2rem;
    }

    .misc-section {
      background: #e0e0e0;
      border-radius: 20px;
      padding: 3rem;
      box-shadow: 2px 2px 8px #bebebe,
                  -2px -2px 8px #ffffff;
    }

    .section-title {
      color: #5d4037;
      font-size: 1.5rem;
      font-weight: bold;
      margin-bottom: 1.5rem;
    }

    .services-list {
      list-style: disc;
      margin-bottom: 2rem;
    }

    .services-list li {
      color: #6d4c41;
      margin-bottom: 0.8rem;
      padding-left: 1.5rem;
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .services-list li::before {
      content: "•";
      color: #8d6e63;
      position: absolute;
      left: 0;
    }

    .price-tag {
      color: #4e342e;
      font-weight: bold;
    }

    .warning-text {
      color: #3e2723;
      font-weight: bold;
      margin-top: 2rem;
      padding: 1.5rem;
      border-radius: 10px;
      background: #e0e0e0;
      box-shadow: inset 3px 3px 6px #bebebe,
                  inset -3px -3px 6px #ffffff;
    }

    .subsection {
      margin-bottom: 2rem;
    }

    .subsection:last-child {
      margin-bottom: 0;
    }

    .telemedicine {
      color: #5d4037;
      padding: 1rem 0;
    }

    @media (max-width: 768px) {
      .misc-section {
        padding: 1.5rem;
      }
      
      .services-list li {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 1rem;
      }
      
      .price-tag {
        margin-top: 0.3rem;
      }
    }

/*----------------------------------------------- ANGEBOT ADDITIONAL SERVICES END ---------------------------------------------*/


/*------------------------------------------------------ KONTAKT FORM START ---------------------------------------------*/
/* Neumorphic container for the form */
.form-block-container {
  background: #e0e0e0;
  border-radius: 20px;
  box-shadow: 4px 4px 15px #bebebe, -4px -4px 15px #ffffff;
  padding: 2rem;
  max-width: 600px;
  margin: 2rem auto;
}

/* Form elements */
.form-block-container form input, 
.form-block-container form textarea, 
.form-block-container form button, 
.form-block-container form select, 
.form-block-container form [type="radio"] {
  background: #e0e0e0;
  border: none;
  border-radius: 12px;
  box-shadow: 3px 3px 12px #bebebe, -3px -3px 12px #ffffff;
  padding: 10px 15px;
  font-size: 1rem;
  outline: none;
  margin-bottom: 1rem;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.form-block-container form input:focus, 
.form-block-container form textarea:focus, 
.form-block-container form select:focus, 
.form-block-container form [type="radio"]:focus {
  box-shadow: inset 3px 3px 12px #bebebe, inset -3px -3px 12px #ffffff;
  transform: scale(1.02);
}

.form-block-container form textarea {
  resize: none;
}

/* Radio buttons */
.form-block-container form [type="radio"] {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

/* Submit button */
.form-block-container form button {
  background: linear-gradient(145deg, #d6d6d6, #f4f4f4);
  border-radius: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.form-block-container form button:hover {
  box-shadow: inset 3px 3px 12px #bebebe, inset -3px -3px 12px #ffffff;
  transform: translateY(-3px);
}

.form-block-container form button:active {
  box-shadow: inset 4px 4px 12px #bebebe, inset -4px -4px 12px #ffffff;
  transform: translateY(2px);
}

/* Captcha styling */
.form-block-container form .g-recaptcha {
  margin-top: 1rem;
}

/*------------------------------------------------------ KONTAKT FORM END ----------------------------------------------------*/

/*--------------------------------------------------------- CTA START ---------------------------------------------*/
/* Outer container for the CTA block */
.cta-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff; /* Adjust for readability over background */
  border-radius: 20px;
  overflow: hidden;
}

/* Overlay for text readability */
.cta-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Dark overlay */
  z-index: 1;
}

/* Text container */
.cta-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  text-align: center;
  margin-bottom: 2rem;
}

.cta-hero-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: bold;
}

.cta-hero-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* Neumorphic button */
.cta-hero-button {
  position: relative;
  z-index: 2;
  background: #e0e0e0;
  border-radius: 12px;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #333;
  text-decoration: none;
  box-shadow: 3px 3px 8px #bebebe, -3px -3px 8px #ffffff;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.cta-hero-button:hover {
  box-shadow: inset 3px 3px 8px #bebebe, inset -3px -3px 8px #ffffff;
  transform: translateY(-3px);
}

.cta-hero-button:active {
  box-shadow: inset 4px 4px 10px #bebebe, inset -4px -4px 10px #ffffff;
  transform: translateY(2px);
}