/* style.css */

body {
     font-family: "Open Sans", sans-serif; 
    line-height: 1.6;
    /* background-color: transparent; */
}

.hero-section {
    background-image: url('../img/adphotos/update.png'); 
    background-size: cover; 
    background-position: center right ;
     min-height: 100vh;
    /* This is already set in HTML for background image */
    /* You might want to add an overlay for better text readability */
    /* position: relative; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
}
.logo-text{
        font-size: xx-large;
    padding: 5px;
}

.subtext{
    margin-bottom: 50px;
}
 /* Dark overlay */
/* .hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6); 
   
} */
 .navbar{
    background-color: transparent !important;
    position: relative;
    color: white;
 }

 .navbar-brand{
    display: flex;
    flex-direction: row;
    align-items: anchor-center;
    color: white;
 }

.hero-section .container {
    position: relative; /* To bring content above the overlay */
    z-index: 2;
}
.text-background{
    /* background-image: url('../img/adphotos/gradient.png'); */
    /* background-size: cover;  */
    background-position: left center
}

.card img{
    min-height: 100%;
}

/* .btn-primary {
    background-color: #ff00ff;  
    border-color: #ff00ff;
} */

.btn-outline-light {
    color: white;
    border-color: #0d6efd;
}

.feature-card {
    transition: transform 0.3s ease-in-out;
}

.feature-card:hover {
    transform: translateY(-5px);
}

#testimonials{
    background-color: #e0ffe0;
    background: #ecf5ff;
    /* background: url("../img/adphotos/background.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center; */
}

.testimonial-bubble {
    background-color: white; /* Or light green from your image */
    border-radius: 40px; /* Rounded corners for the bubble shape */
    position: relative;
}
/* You might need to use CSS pseudo-elements for the speech bubble tail */
.testimonial-bubble::after {
    display: none;
    content: '';
    position: absolute;
    bottom: -15px; /* Adjust as needed */
    left: 100%;
    transform: translateX(-50%) rotate(45deg);
    width: 60px; /* Size of the tail */
    height: 30px;
    border-radius: 50px;
    background-color: white; /* Match bubble background */
    z-index: s1; /* Place behind the bubble */
}

/* Adjust testimonial bubble tail for different positions if needed */
/* #plans .card{
     box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
     border: 0;
} */
#plans .card:hover{
      /* opacity: 0.4; */
  /* transition: 0.3s; */
     box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.1);

}

.owl-nav{
    display: none;
}

.item h3{
    font-size: medium;
    text-align: center;
}

.item img{
    width: 320px;
    height: 320px;
    margin-bottom: 5px;
}
.item h3{
    font-size: 25px;
}

/* ============== card interaction============== */
 .insight-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  background: #f3f9f6;
  border-radius: 8px;
  padding: 20px;
  gap: 20px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.text-content {
  flex: 1 1 45%;
  min-width: 280px;
}

.tag {
  font-size: 14px;
  color: #444;
  margin-bottom: 10px;
}

.title {
  font-size: 26px;
  font-weight: bold;
  margin: 0 0 15px 0;
}

.subtext {
  font-size: 20px;
  color: #444;
  line-height: 1.5;
  display: none; /* hidden by default on desktop */
}

.list-features {
  margin-top: 15px;
}

.list-features p {
  font-weight: bold;
}

.list-features ul {
  margin: 5px 0 0 15px;
  padding: 0;
  list-style: disc;
   font-size: 20px;
}

.list-features ul li{
    font-size: 20px;
  /* margin: 5px 0 0 15px;
  padding: 0;
  list-style: disc; */
}

.image-content {
  flex: 1 1 45%;
  min-width: 280px;
}

.image-content img {
  max-width: 100%;
  border-radius: 6px;
}

/* Hover effect for desktop */
.insight-card:hover .subtext {
  display: block;
  transition: opacity 0.3s ease-in-out;
}

.value-image{
    height: 200px;
}

/* ================= end of card interactions ============= */

@media  (max-width:992px) {
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6); 
    }
}
 
/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-section{
        /* background: none; */
        /* color: black; */
        padding: 20px;
        /* background-color: grey; */
        /* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; */

    }

    .item img{
    /* width: 250px;
    height: 250px; */
    margin-bottom: 5px;
    }

    .item h3{
        font-size: 25px;
        }

    .hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6); 
    }
    .subtext{
        font-size: 18px;
    }
    .text-background{
        padding: 10px;
        margin-bottom: 20px;
    }
    .hero-section h1 {
        font-size: 2.5rem;
         line-height: 3.5rem;
    }
    
    .testimonial-bubble::after {
        left: 20%; /* Adjust tail for smaller screens */
        transform: translateX(-20%) rotate(45deg);
    }

    /* =============== card interaction ============= */
     .insight-card {
    flex-direction: column;
        text-align: left;
    }

    .subtext {
        display: block;
    }
    /* ================ end of card interaction ============== */
}