/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 18 2025 | 16:34:33 */
/* Resources Page */
.blog-card{height:370px;}
.card .premium-blog-excerpt-link-wrap a{color:#fff;}
.card .premium-blog-excerpt-link-wrap {
    background: #1e1e1e;
    position: absolute;
    padding: 5px 15px;
    width: 100%;
    left: 0;
    color: #fff !important;
    bottom: 0;
	
}


.page-id-211 #custom-cta{margin:-9px auto}


/* MAIN CONTAINER */
.premium-blog-post-container.premium-blog-skin-classic {
  position: relative;
  overflow: hidden;
  height: 370px; /* Desktop Height (adjustable) */
	border-radius: 10px;
	margin:-9px 0px 0px 0px;
    
}
.page-id-1310 .premium-blog-post-container.premium-blog-skin-classic {
      margin:0 10px 10px 0px;
}
/* IMAGE WRAPPER */
.premium-blog-thumb-effect-wrapper {
  aspect-ratio: 16 / 9; /* Fixed aspect ratio for images */
  width: 100%;
  overflow: hidden;
  transition: transform 0.4s ease;
}

.premium-blog-thumb-effect-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures images fill the space without distortion */
  display: block;
}

/* CONTENT WRAPPER */
.premium-blog-content-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%; /* Initial content height */
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 15px !important;
  box-sizing: border-box;
  transition: height 0.4s ease;
  z-index: 2;
  overflow: hidden;
}

/* HOVER BEHAVIOR: Expands content and zooms image */
.premium-blog-post-container:hover .premium-blog-content-wrapper {
  height: 100%;
}

.premium-blog-post-container:hover .premium-blog-thumb-effect-wrapper {
  transform: scale(1.05);
}

/* --- TABLET --- */

/* For Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .premium-blog-post-container.premium-blog-skin-classic {
    position: relative;
    height: 450px; /* Maintain same height as desktop */
  }

  .premium-blog-thumb-effect-wrapper {
    aspect-ratio: 16 / 9; /* Keep same aspect ratio as desktop */
    height: 100%;
  }

  .premium-blog-thumb-effect-wrapper img {
    width: 100%;
    height: 100%; /* Ensure image height matches desktop version */
    object-fit: cover; /* Maintain proper fit */
  }

  .premium-blog-content-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px; /* Initial content height for tablet */
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 20px;
    box-sizing: border-box;
    transition: height 0.4s ease;
    z-index: 2;
    overflow: hidden;
  }

  /* Hover behavior: Expands content on hover */
  .premium-blog-post-container:hover .premium-blog-content-wrapper {
    height: 100%;
  }

  .premium-blog-post-container:hover .premium-blog-thumb-effect-wrapper {
    transform: scale(1.05);
  }
}

/* --- MOBILE --- */

/* For Mobile (≤767px) */
@media (max-width: 767px) {
  .premium-blog-post-container.premium-blog-skin-classic {
    position: relative;
    height: auto; /* Auto height for mobile */
  }

  .premium-blog-thumb-effect-wrapper {
    aspect-ratio: auto; /* Remove fixed aspect ratio for mobile */
    height: auto;
  }

  .premium-blog-thumb-effect-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Maintain good fit on mobile */
  }

  .premium-blog-content-wrapper {
    position: relative;
    height: auto; /* No fixed height for mobile */
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 20px;
    box-sizing: border-box;
  }

  .premium-blog-post-container:hover .premium-blog-content-wrapper {
    height: auto; /* No hover expansion on mobile */
  }

  .premium-blog-post-container:hover .premium-blog-thumb-effect-wrapper {
    transform: none; /* No zoom effect on mobile */
  }
}
/* Subscription Box*/

 #custom-cta {
  background: #4a4a49 url('https://utopiic.com/wp-content/uploads/2025/05/025.jpg') center top / cover no-repeat;
  color: #fff;
  padding: 20px;
  max-width: 600px;
  height: 370px;
  position: relative;
  overflow: hidden;
  margin: 0px auto;
  border-radius: 10px;
  font-family: Arial, sans-serif;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}


#custom-cta2 {
  background:url('https://utopiic.com/wp-content/uploads/2025/06/Group-1000004483.png') center top / cover no-repeat;
  color: #fff;
  padding: 20px;
  max-width: 600px;
  height: 370px;
  position: relative;
  overflow: hidden;
  margin: 0px auto;
  border-radius: 10px;
  font-family: Arial, sans-serif;
  box-shadow: 0 0 10px rgba(0,0,0,0.3); border-radius:10px;
}

@media (max-width: 600px) {
  #custom-cta {
    padding: 15px;
    height: 370px;
    max-width: 600px;
    background-position: center center;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
  }
	
	  #custom-cta2 {
    padding: 15px;
    height: 370px;
    max-width: 600px;
    background-position: center center;
    border-radius: 8px;
    font-size: 14px;
    box-shadow: 0 0 6px rgba(0,0,0,0.2);
  }
}


.cta-top h2 {
  font-size: 22px;
  margin-bottom: 10px;
	color:#fff;
}

.cta-top p {
  font-size: 14px;
  margin-bottom: 20px;
}

.cta-field input {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
}

.cta-form-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(74, 74, 73, 0.95);
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  transition: top 0.4s ease;
  z-index: 10;
}

.cta-form-overlay.show {
  top: 0;
}

.close-form {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 22px;
  color: #fff;
  cursor: pointer;
}

/* Contact Form 7 Styling */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
}

.wpcf7-form input[type="submit"] {
  background-color: #00c43c;
  color: #fff;
  padding: 12px 25px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/* ----------Resource ----------------*/