/*!
Theme Name: Blocksy
Theme URI: https://creativethemes.com/blocksy/
Author: CreativeThemes
Author URI: https://creativethemes.com
Description: Blocksy is a blazing fast and lightweight WordPress theme built with the latest web technologies. It was built with the Gutenberg editor in mind and has a lot of options that makes it extendable and customizable. You can easily create any type of website, such as business agency, shop, corporate, education, restaurant, blog, portfolio, landing page and so on. It works like a charm with popular WordPress page builders, including Elementor, Beaver Builder, Visual Composer and Brizy. Since it is responsive and adaptive, translation ready, SEO optimized and has WooCommerce built-in, you will experience an easy build and even an increase in conversions.
Version: 2.0.95
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Copyright: (c) 2019 CreativeThemes.
Requires at least: 6.5
Requires PHP: 7.0
Tested up to: 6.7
Text Domain: blocksy
Blocksy Minimum Companion Version: 2.0.74-beta1
Tags: accessibility-ready, blog, block-patterns, e-commerce, wide-blocks, block-styles, grid-layout, one-column, two-columns, three-columns, four-columns, right-sidebar, left-sidebar, translation-ready, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, theme-options, threaded-comments, buddypress, rtl-language-support, news
*/

@import url("./fonts/helvetica-now-display/stylesheet.css");
@import url("./fonts/itc-garamond/stylesheet.css");

/* SF Pro Display Regular local font */
@font-face {
  font-family: "SF Pro Display";
  src: url("./fonts/FontsFree-Net-SFProDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "relationship of mélodrame regular";
  src: url("https://framerusercontent.com/assets/YB1mxZ3eu2b75FQgRaVZH0wLEo.woff2")
      format("woff2"),
    url("fonts/relationship-of-melodrame-font-1744575118-0/relationship-of-melodrame.ttf")
      format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ITC Garamond Std Light Narrow";
  src: url("https://framerusercontent.com/assets/YBo6hnenBuJPT6yTYZJ8fKFok.woff2")
    format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.page-template-default #main-container #header {
  position: fixed !important;
  z-index: 50;
  width: 100%;
  background: transparent;
  transition: all 0.3s ease;
}

.page-template-default #main-container #header.scrolled {
  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#header [data-row*="middle"] {
  z-index: 2;
  background-color: transparent !important;
}
.ct-container-full {
  padding-top: 0 !important;
}
.first-section {
  display: none !important;
  position: relative;
  width: 100vw !important;
  overflow: hidden;
  margin: 0 !important;
  max-width: 100% !important;
}

.blocksy-subscribe-form{
  border-radius: 20px !important;
}

#video-head {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.title-head {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  text-align: center;
  color: white;
}

/* Global Font Settings */
::root {
  --fontFamily: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
}

body {
  background-color: #000 !important;
  background: #000 !important;
}

body,
p,
span,
em,
ol,
ul,
li,
tr,
th,
td,
dl,
ins,
sub,
sup,
big,
cite,
form,
small,
label,
table,
figure,
button,
legend,
strike,
address,
caption,
fieldset,
blockquote,
button,
.page-numbers,
.ct-menu-link {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif !important;
  color: white !important;
  font-size: 20px !important;
}

/* Title Font Settings */
h1,
h2,
h3,
h4,
h5,
h6,
.ct-section-title,
.related-entry-title,
.entry-title {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif !important;
}

/* Gradient Text Class */
.text-xl-gradient {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif !important;
  background: radial-gradient(
    48.7702% 499.197% at 48.7702% -87.2817%,
    rgb(204, 236, 65) 26.0355%,
    rgb(97, 136, 228) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 8.5rem;
  text-transform: capitalize;
  font-weight: 500;
  margin-bottom: 0px !important;
}

.text-lg-gradient {
  font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif !important;
    background-image: linear-gradient(to right, rgb(1, 221, 126), rgb(5, 223, 114), rgb(224, 255, 185), rgb(255, 255, 255));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 4rem;
  text-transform: capitalize;
  font-weight: 500;
}

[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a {
  text-transform: capitalize !important;
}

.page-title {
  color: white !important;
  font-size: 5rem !important;
  font-weight: 500 !important;
  width: fit-content !important;
  margin: 0 auto !important;
  line-height: 1 !important;
}

.entry-meta {
  text-align: center !important;
  margin-top: 0px !important;
  color: #808080 !important;
  text-transform: capitalize !important;
  font-size: 25px !important;
}

.subscribe-button{
  background: rgb(0, 221, 126) !important;
}

.ct-meta-element-date {
  color: rgb(114, 114, 114) !important;
  font-weight: 500 !important;
}
.ct-meta-element-author span {
  color: #808080 !important;
  font-weight: 500 !important;
}
/* .post-template-default {
  background: #dadad1 !important;
} */

/* Related Posts Styling */
.ct-related-posts-container {
  background: transparent !important;
  padding: 60px 0;
}

.ct-related-posts {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.ct-related-posts .ct-module-title {
  font-family: "ITC Garamond Std Light Narrow",
    "ITC Garamond Std Light Narrow Placeholder", sans-serif !important;
  font-size: 5rem !important;
  text-align: center;
  margin-bottom: 40px;
  color: white !important;
  text-transform: capitalize;
}

.ct-related-posts-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.ct-related-posts article {
  background: #2d2d2d;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

.ct-related-posts article > div {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem;
}

.ct-related-posts article:hover {
  transform: translateY(-5px);
}

.ct-related-posts .ct-media-container {
  width: 100%;
  display: block;
  position: relative;
  margin-bottom: 20px;
  padding: 0;
}

.ct-related-posts .ct-media-container img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.ct-related-posts article:hover .ct-media-container img {
  transform: scale(1.05);
}

/* Categories styling */
.ct-related-posts .cat-links {
  margin: 0 0 10px 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ct-related-posts .cat-links a {
  display: inline-block;
  padding: 0px 10px;
  background: #ccec41;
  border-radius: 10px;
  color: black !important;
  text-decoration: none;
  font-size: 20px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: transform 0.3s ease;
}
.ct-related-posts-items .post-content {
  padding-top: 0px !important;
}

.ct-related-posts .cat-links a:hover {
  transform: translateY(-2px);
}

.ct-related-posts-items .post-content .related-entry-title {
  font-family: "ITC Garamond Std Light Narrow",
    "ITC Garamond Std Light Narrow Placeholder", sans-serif !important;
  font-size: 57px !important;
  color: white !important;
  text-transform: capitalize;
  margin-bottom: 0px !important;
  margin-top: 1rem !important;
  font-weight: 500;
  line-height: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(57px * 2);
}

/* Meta and Read More container */
.ct-related-posts .entry-meta-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.ct-related-posts .entry-meta {
  padding: 0;
  margin: 0;
  list-style: none;
}

.ct-related-posts .read-more-button {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  background: #ccec41;
  border-radius: 10px;
  color: black !important;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.ct-related-posts .read-more-button:hover {
  transform: translateX(5px);
}

.ct-related-posts .read-more-button::after {
  content: "→";
  margin-left: 8px;
}

.related-entry-title a:hover {
  color: #ccec41 !important;
}

#site-footer .container {
  max-width: 80%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid #333;
  padding-bottom: 40px;
}

.footer-menus {
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  flex: 5;
}

/* Responsive styles for text-xl-gradient */
@media screen and (max-width: 768px) {
  .text-xl-gradient {
    font-size: 5.5rem;
  }

  .text-lg-gradient {
    font-size: 4rem;
  }
}

@media screen and (max-width: 480px) {
  body,
  p,
  span,
  em,
  ol,
  ul,
  li,
  tr,
  th,
  td,
  dl,
  ins,
  sub,
  sup,
  big,
  cite,
  form,
  small,
  label,
  table,
  figure,
  button,
  legend,
  strike,
  address,
  caption,
  fieldset,
  blockquote,
  button,
  .page-numbers,
  .ct-menu-link {
    font-size: 16px !important;
  }

  .text-xl-gradient {
    font-size: 2.5rem;
  }

  .text-lg-gradient {
    font-size: 2.5rem;
  }

  #site-footer .container {
    max-width: 95% !important;
    display: flow !important;
    padding-bottom: 20px !important;
  }

  .footer-menus {
    margin-top: 20px !important;
    gap: 20px !important;
    justify-content: center;
  }

  .footer-logo {
    display: flex;
    justify-content: center !important;
  }

  .footer-social {
    justify-content: center !important;
  }
  .page-title {
    font-size: 3rem !important;
  }

  .ct-related-posts .ct-module-title {
    font-size: 3rem !important;
  }
}