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

:root {
    --primary-color: #ffaacc;
    --text-color: #333;
    --bg-color: #fff;
}


body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background: linear-gradient(to right, #fff, #ffe6f0); /* Soft fade */
    transition: background 0.5s ease-in-out;
}

.human-script {
    font-family: 'Great Vibes', cursive;
    /*font-size: 1.2rem;*/
    /*color: #ffaacc;*/
}

.logo img {
    object-fit: contain;
}

.navbar {
    border-bottom: 2px solid var(--primary-color);
}


.navbar-nav .nav-link:hover {
  color: var(--primary-color);
}

.text-pink {
  color: #ffaacc;
}

.btn-outline-pink {
  border: 1px solid #ffaacc;
  color: white;
  background-color: #ffaacc;
}

.btn-outline-pink:hover {
  background-color: #ff88bb;
  color: white;
}

.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus-visible {
  background-color: var(--primary-color) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: white !important;
}

.btn-primary:hover{
  background-color: #ff88bb !important;
}

.btn-primary:focus-visible {
  outline: 2px solid #ff88bb;
  outline-offset: 2px;
}
.btn-primary::-moz-focus-inner {
  border: 0 !important;
}

/* Override Bootstrap btn-outline-secondary */
.btn-outline-secondary {
  color: #f47aa0; /* text color */
  border-color:#ffaacc; /* border rose */
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  color: white; /* text turns white */
  background-color: #ff88bb; /* darker rose */
  border-color: #ff88bb; /* darker border */
}


/* Search Input Styling */
.search-form {
  position: relative;
  margin-left: 1rem;
}

.search-input {
  border-radius: 25px;
  border: 1px solid #f994bd;
  padding: 6px 12px 6px 35px; /* space for icon */
  font-size: 0.9rem;
  max-width: 160px;
  background-color: white;
  color: black;
  transition: background-color 0.3s ease;

  /* search icon inside */
  background-image: url("data:image/svg+xml,%3Csvg fill='%23f994bd' xmlns='http://www.w3.org/2000/svg' height='16' viewBox='0 0 24 24' width='16'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C8.01 14 6 11.99 6 9.5S8.01 5 10.5 5 15 7.01 15 9.5 12.99 14 10.5 14z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 16px;
}

.search-input:focus {
  background-color: #fdd8e5; /* pale pink on focus */
  outline: none;
}

.search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  background: url("data:image/svg+xml,%3Csvg fill='%23f994bd' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12l-4.89 4.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4z'/%3E%3C/svg%3E") no-repeat center;
  background-size: 14px;
  cursor: pointer;
}
/* Login Button Styling*/
.btn-login {
  background-color: #f994bd;
  border: none;
  color: white;
  border-radius: 25px;
  padding: 6px 16px;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background-color 0.3s ease;
}

.btn-login:hover {
  background-color: #e67aa5;
}

/* select for language */
form select.form-select {
  border: 1px solid #f994bd;
  border-radius: 10px;
  padding: 4px 28px 4px 12px;
  background-color: white;
  color: black;
  background-position: right 8px center;
  font-size: 0.9rem;
}

form select.form-select:focus {
  border-color: #f994bd;
  background-color: #fdd8e5;
  outline: none;
  box-shadow: none;
}


input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  border: 1px solid #f994bd;
  border-radius: 6px;
}


.form-control:focus {
  background-color: #fdd8e5 !important;
  border-color: #f994bd !important;
  outline: none !important;
  box-shadow: none !important;
}


.auth-form button[type="submit"]:hover {
  background-color: #f794ac;
}



.card-title {
  color: var(--primary-color);
}
/* Carousel wrapper style */
#featuredPosts {
  max-width: 960px;
  margin: 2rem auto;
  margin-top: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Override Bootstrap default arrow buttons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none;
  width: 48px;
  height: 48px;
  background-color: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-item img {
  max-height: 400px;
  object-fit: cover;
  width: 100%;
  display: block;
}


.caption-bg {
  background-color: rgba(128, 128, 128, 0.5);
  padding: 8px 15px;
  border-radius: 8px;
  display: inline-block;
}

.carousel-control-prev-icon::after,
.carousel-control-next-icon::after {
  content: '';
  display: inline-block;
  border: solid white;
  border-width: 0 3px 3px 0;
  padding: 8px;
}

.carousel-control-prev-icon::after {
  transform: rotate(135deg);
}

.carousel-control-next-icon::after {
  transform: rotate(-45deg);
}

.carousel-item a {
  text-decoration: none;
  color: inherit;
}
.carousel-item a:hover h5 {
  text-decoration: underline;
}


.popular-post {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 10px;
  overflow: hidden;
}

.popular-post:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}

.popular-post img {
  transition: transform 0.3s ease;
}

.popular-post:hover img {
  transform: scale(1.05);
}


.card {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.card:hover{
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}

.card-img-top {
  height: 200px; /* to be responsive */
  width: 100%;
  object-fit: cover;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  transition: transform 0.3s ease;
}

.card-img-top:hover{
    transform: scale(1.05);
}
.read-more-btn {
  background-color: #f8a5c2;
  border: none;
  color: white;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.read-more-btn:hover {
  background-color: #ff7faa;
  transform: scale(1.05);
}



.card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-body .btn {
  margin-top: auto;
}

.instagram-wrapper {
  display: flex;
  justify-content: center;
  padding: 0 15px;
  overflow-x: hidden;
}

.instagram-container {
  width: 100%;
  max-width: 540px;
}

.instagram-media {
  width: 100% !important;
  max-width: 100% !important;
  min-width: unset !important;
}

.promo-box {
  margin: 20px auto;
  max-width: 728px;       /* max size on desktop */
  width: 95%;            /* take full width on smaller screens */
  aspect-ratio: 728 / 200; /* keeps the rectangle proportion */
  overflow: hidden;       /* hide parts of image that don’t fit */
  border-radius: 10px;
  border: none;
}

.promo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* crop if aspect ratio doesn’t match */
  display: block;
}




@media (max-width: 992px) {
  .carousel-item img {
    height: 250px;
  }

   .navbar-collapse {
    flex-direction: column;
    align-items: flex-start; /* Align everything to the left */
  }

  .navbar-nav {
    align-items: flex-start;
    width: 100%;
  }

  /* Ensure search bar aligns with nav items */
  .search-form {
    width: 100%;
    margin-left: 0; /* Remove extra space */
  }

  /* Make search input full width and stacked nicely */
  .search-input {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  /* Add space between search and dropdown */
  .navbar-collapse form.ms-3 {
    margin-left: 0 !important; /* Remove Bootstrap's left margin */
    margin-top: 0.5rem;         /* Add small vertical gap */
  }

  /* Make language select fit content nicely */
  .navbar-collapse select {
    width: auto;
  }
}
}

@media (max-width: 576px) {
  .card-title {
    font-size: 1.1rem;
  }
  .navbar-brand span {
    font-size: 1rem;
  }
  .navbar-collapse {
    flex-direction: column;
    align-items: flex-start; /* align everything to the left */
  }
  .search-input,
  .btn-login {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  .navbar-nav {
    align-items: flex-start;
    width: 100%;
  }
  form.d-flex {
    flex-direction: column;
    width: 100%;
  }
  .search-input {
    max-width: 100%;
    margin-bottom: 0.5rem;
  }

  /* Ensure search bar aligns with nav items */
  .search-form {
    width: 100%;
    margin-left: 0; /* Remove extra space */
  }

  .btn-login {
    align-self: flex-start;
  }
  h1.display-4 {
    font-size: 2rem;
  }
    /* Add space between search and dropdown */
  .navbar-collapse form.ms-3 {
    margin-left: 0 !important; /* Remove bootstrap left margin */
    margin-top: 0.5rem;         /* Add small vertical gap */
  }

  /* Make language select fit content nicely */
  .navbar-collapse select {
    width: auto;
  }
  .instagram-wrapper {
    padding: 0 10px;
  }

  .popular-post{
    margin:1rem
  }
  .popular-post:active {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
  }
  .popular-post:active img {
  transform: scale(1.05);
  }
}