/*
Theme Name: Divi Child Theme
Description: Child Theme for Divi
Author:  Hand to Sky
Template: Divi
Version:  1.0.2
*/

/*
---------------------------
	CSS DIRECTORY
---------------------------
	=Font Setup
	=Global
	=Header
	=Footer
	=Media Queries
*/

/* ====Font Setup /////////////////////////////////////////////////*/
:root {
  --primary: #0b2639;
  --secondary: #0f4381;
  --light: #ffffff;
  --dark: #141414;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Questrial", Helvetica, Arial, Lucida, sans-serif;
}
/* ====Global /////////////////////////////////////////////////*/

/* ====Header /////////////////////////////////////////////////*/

/* ====Footer /////////////////////////////////////////////////*/

/* =========================================================
Page Block Links
========================================================= */
.pbl-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
  gap: 50px;
  width: 100%;
  max-width: 100%;
}

.home .pbl-wrapper {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.pbl-block {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  border-radius: 24px;

  &:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: calc((65 / 132) * 100%);
  }
}

.pbl-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.45s ease;
  background-color: black;
}

.pbl-bg__img {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pbl-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.pbl-content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 2;
  width: 100%;
  max-width: 66%;
}

.pbl-title {
  font-size: 3.059vw;
  font-weight: 600;
  line-height: 1.1em;
  color: #ffffff;
}

.pbl-arrow {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition:
    width 0.25s ease,
    height 0.25s ease,
    background-color 0.25s ease;
  border-radius: 100px;
}

.pbl-arrow svg {
  width: 42px;
  height: 42px;
  position: relative;
  right: -2px;
}

.pbl-block:hover .pbl-bg {
  transform: scale(1.04);
}

.pbl-block:hover .pbl-arrow {
  background-color: var(--secondary) !important;
}

/* ====Media Queries /////////////////////////////////////////////////*/
@media (max-width: 767px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}