/**
Theme Name: Astra Child
Author: WebWiseSolutions
Author URI: https://webwisesolutions.ca
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

.main-header-menu > .menu-item > .menu-link {
  outline: none;
}

#ast-scroll-top {
  animation-name: bounceInUp;
  animation-duration: 1s;
}

/*Nav li's have a hover scale*/
@media (min-width: 920px) {
  .main-header-menu > .menu-item > .menu-link:hover {
    scale: 1.1;
  }
}

/*Nav Menu for mobile*/
.ast-hfb-header .ast-builder-menu-mobile .main-navigation .main-header-menu,
.ast-hfb-header .ast-builder-menu-mobile .main-navigation .main-header-menu,
.ast-hfb-header
  .ast-mobile-header-content
  .ast-builder-menu-mobile
  .main-navigation
  .main-header-menu {
  background: black;
  position: fixed;
  text-align: center;
  /* left: 50%; */
  width: 100%;
  height: 100vh;
  top: 0%;
  /* padding-top: 15vh; */
  border: none;
  transition: 0.5s ease;
  font-size: 3rem;
  align-content: space-around;
  display: flex;
  padding-top: 30vh;
  padding-bottom: 30vh;
}

.ast-builder-menu-mobile
  .main-navigation
  .main-header-menu
  .menu-item
  > .menu-link {
  color: white;
}

/*Burger outline color*/
.ast-theme-transparent-header
  [data-section="section-header-mobile-trigger"]
  .ast-button-wrap
  .ast-mobile-menu-trigger-minimal {
  background: black;
  outline: none;
}

/*Site logo size*/
@media (max-width: 786px) {
  header .custom-logo-link img {
    max-width: 110px;
  }
}

.custom-logo-link,
.custom-logo-link:hover,
.custom-logo-link:active,
.custom-logo-link:focus {
  outline: none;
}

@media (min-width: 788px) {
  .ast-hfb-header .ast-builder-menu-mobile .main-navigation .main-header-menu,
  .ast-hfb-header .ast-builder-menu-mobile .main-navigation .main-header-menu,
  .ast-hfb-header
    .ast-mobile-header-content
    .ast-builder-menu-mobile
    .main-navigation
    .main-header-menu {
    margin-top: 2rem;
  }
}

/*removing outline from Nav menu*/
.ast-mobile-header-wrap .ast-button-wrap .menu-toggle.main-header-menu-toggle {
  outline: none;
}

.ast-hfb-header
  .ast-builder-menu-mobile
  .main-navigation
  .menu-item
  .sub-menu
  .menu-link,
.ast-hfb-header .ast-builder-menu-mobile .main-navigation .menu-item .menu-link,
.ast-hfb-header
  .ast-builder-menu-mobile
  .main-navigation
  .menu-item
  .sub-menu
  .menu-link,
.ast-hfb-header .ast-builder-menu-mobile .main-navigation .menu-item .menu-link,
.ast-hfb-header
  .ast-mobile-header-content
  .ast-builder-menu-mobile
  .main-navigation
  .menu-item
  .sub-menu
  .menu-link,
.ast-hfb-header
  .ast-mobile-header-content
  .ast-builder-menu-mobile
  .main-navigation
  .menu-item
  .menu-link,
.ast-hfb-header
  .ast-mobile-popup-content
  .ast-builder-menu-mobile
  .main-navigation
  .menu-item
  .sub-menu
  .menu-link,
.ast-hfb-header
  .ast-mobile-popup-content
  .ast-builder-menu-mobile
  .main-navigation
  .menu-item
  .menu-link {
  border-bottom: none;
}

/* @media (max-width: 920px) {
  .main-header-menu li:nth-child(-n + 5) {
    border-bottom: 1px solid hsl(0, 0%, 100%, 0.6);
  }

  .main-header-menu li .menu-link:hover {
    color: white !important;
    scale: 1.1;
  }
} */

/*Line height on nav*/
.ast-header-break-point .main-header-bar-navigation {
  line-height: 2;
}

/*Mobile menu transitions*/

#ast-desktop-header .ast-desktop-header-content,
.ast-mobile-header-content .ast-search-icon,
.ast-desktop-header-content .ast-search-icon,
.ast-mobile-header-wrap .ast-mobile-header-content,
.ast-main-header-nav-open.ast-popup-nav-open
  .ast-mobile-header-wrap
  .ast-mobile-header-content,
.ast-main-header-nav-open.ast-popup-nav-open .ast-desktop-header-content {
  display: block;
}

@media (max-width: 920px) {
  .main-header-menu {
    opacity: 0;
    visibility: hidden;
    transition: 0.5s ease-out;
  }

  .menu-open {
    opacity: 0.9;
    visibility: visible;
    display: block;
    transition: 0.5s ease-in;
  }
}

/*Images for mobile*/

@media (max-width: 920px) {
  .wp-block-image.is-style-circle-mask img,
  .wp-block-image.is-style-rounded img,
  .wp-block-image .is-style-rounded img {
    max-width: 200px;
    max-height: 200px;
  }

  .wp-block-media-text__media img,
  .wp-block-media-text__media video {
    max-width: 300px;
    display: flex;
    margin: auto;
    justify-content: center;
  }
}

/*Services images for desktop*/
.wp-block-image.is-style-circle-mask img,
.wp-block-image.is-style-rounded img,
.wp-block-image .is-style-rounded img {
  width: 250px;
  height: 250px;
}

/*Padding for the blank space while no testimonials*/
body .is-layout-flow > .aligncenter {
  padding-bottom: 2rem;
}

/*Testimonial being hidden*/

#reviews {
  display: none;
}

/*Fixing padding while we have no testimonials*/
#whyus {
  padding-top: 0px !important;
}

/* Why us animations for desktop and mobile */

/* Duration for mobile (adjust the max-width as needed) */
@media (max-width: 768px) {
  #whyus .animated.fadeInLeft.animation-mobile {
      animation-delay: 0.5s; /* Example duration for mobile */
  }
}

/* Services animations for desktop and mobile */

@media (max-width: 768px) {
  #services .animated.fadeUpIn.animation-mobile {
      animation-delay: 0.5s; /* Example duration for mobile */
  }
}

/* #about {
    padding-bottom: 4rem !important;
} */

/*Call to actions styling*/

.wp-block-button__link {
  position: relative;
  transition: 1s ease;
}

/* Slider button styles */

/* @media (max-width: 768px) {
  .slider-content img {
    min-width: 250px !important;
  }
} */

.slider-content p {
  font-size: 1rem !important;
}

.slider-content {
    display: flex;
    margin-top: 10vh;
}

.slider-button * {
  background: white !important;
  border: none;
  transition: 0.6s ease !important;
}

.slider-button-2 * {
  background: black !important;
  border: none;
  transition: 0.6s ease !important;
}

.slider-button:hover * {
  background: black !important;
  border: none;
  color: white !important;
  transition: 1s ease !important;
  scale: 105%;
}

.slider-button-2:hover * {
  background: black !important;
  border: none;
  color: white !important;
  transition: 1s ease !important;
  scale: 105%;
}

/* .slider-button:active *{
    background: black !important;
    border: none;
    scale: 1.1;
    color: white !important;
    transition: .4s ease !important;
} */

/* form .tracer-button:hover {
  background: red !important;
} */

.tracer-button *:focus::before,
.tracer-button *:hover::before,
.tracer-button *:active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 3px solid white;
  border-right: 3px solid white;
  /* border-top-right-radius: 25px; */
  animation: border-top 1.5s alternate;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  touch-action: manipulation;
  cursor: pointer;
}

.tracer-button *:focus::after,
.tracer-button *:hover::after,
.tracer-button *:active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-bottom: 3px solid white;
  border-left: 3px solid white;
  /* border-bottom-left-radius: 25px; */
  animation: border-bottom 1.5s alternate;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  transition: 2s ease;
  touch-action: manipulation;
  cursor: pointer;
}

@keyframes border-top {
  0% {
    width: 0px;
    height: 0px;
  }
  25% {
    width: 100%;
    height: 0px;
  }
  50% {
    width: 100%;
    height: 120%;
  }
  100% {
    width: 100%;
    height: 120%;
  }
}

@keyframes border-bottom {
  0% {
    width: 0px;
    height: 0opx;
    opacity: 0;
  }
  50% {
    width: 0px;
    height: 0opx;
    opacity: 0;
  }
  50.1% {
    width: 0px;
    height: 0opx;
    opacity: 1;
  }
  75% {
    width: 100%;
    height: 0px;
    opacity: 1;
  }
  100% {
    width: 100%;
    height: 120%;
    opacity: 1;
  }
}

.tracer-button:hover a,
.tracer-button a:focus{
  background-color: black !important;
  color: white !important;
  border-radius: 0px !important;
  animation-fill-mode: forwards !important;
  transition: 1s ease !important;
}

/* hiide slider buttons */
.n2-bullet {
  display: none;
}
/* 
slider bg color */
.n2_clear {
  /* background: linear-gradient(177deg, black 90%, #ffffff 90%) !important; */
  background: black;
}

/* contact form submit button  */

.wpcf7-submit {
  background: white !important;
  transition: 0.6s ease !important;
  border-radius: 0px !important;
  transition: none;
}

.wpcf7-submit:hover::before,
.wpcf7-submit:active::before {
  transition: none !important;
}

.wpcf7-submit:hover::after,
.wpcf7-submit:active::beforae {
  transition: none !important;
}

.wpcf7-submit:hover {
  background-color: black !important;
  color: white !important;
  transition: 1s ease !important;
  border-radius: 30px !important;
}

/* custom post type styling for the archive page*/

/* container for posts/'article'*/
.cpt-site-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 40px 60px;
  margin: auto;
  max-width: 90vw;
}

/* article/post card */

.our-work-cpt-article {
  width: 40%; /*  400px */
  min-width: 320px;
  position: relative;
  overflow: hidden;
  box-shadow: -5px 5px 15px hsl(0, 0%, 0%, 60%);
  padding: 1rem;
  color: black;
  transition: .5s ease-in-out;
}

.our-work-cpt-article:hover {
    border-radius: 5%;
    transition: .5s ease-in-out;
}

/* article/post background animation */

.cpt-article-cover {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    z-index: -1;
    top: 0;
    bottom: 0;
    right: 0%;
    left: 0%;
    background: linear-gradient(to bottom, #ffcd57 50% , white 50%);
    color: white;
    padding: .5rem;
    transform: translateY(-100%);
    transition: transform .5s ease-in-out, background .5s ease-in-out;
    border-radius: 0%;
}


.our-work-cpt-article:hover .cpt-article-cover {
    transform: translateX(0%);
    border-radius: 5%;
    transition: .5s ease-in-out;
}

.cpt-page-header {
  width: 100%;
}

/* Article/post content */

.page-title {
    text-align: center;
}

.entry-title {
  text-align: center;
  font-size: 2rem !important;
  font-weight: 400 !important;
}

.cpt-entry-title {
    font-size: 1.5rem;
    color: black;
    padding: .5rem;
    text-decoration: none;
    transition: .5s ease-in-out;
    display: flex;
    width: 100%;
    transform-origin: bottom center; /* Set the transform origin at the top center */
    transform: rotateX(0deg); /* Normal state: not flipped */
}

@media (max-width:809px) {
  .cpt-entry-title {
    text-decoration: underline;
    width: 100%;
    height: 5rem;
  }
}

/* Keyframe animation for flipping out */
@keyframes flipOut {
    0% {
        transform: rotateX(0deg); /* Normal state */
        opacity: 1; /* Fully visible */
    }
    100% {
        transform: rotateX(90deg); /* Flipped down 90 degrees */
        opacity: 0; /* Hide the original text during animation */
    }
}

/* Keyframe animation for flipping in */
@keyframes flipIn {
    0% {
        transform-origin: top center;
        transform: rotateX(-90deg) translateY(-100%); /* Flipped up 90 degrees and moved up 100% (out of view) */
        opacity: 0; /* Start with the new text hidden */
    }
    100% {
        transform: rotateX(0deg) translateY(0); /* Normal state */
        opacity: 1; /* Fully visible */
    }
}


.our-work-cpt-article:hover .cpt-entry-title {
    text-decoration: underline;
    /* transition: .5s ease-in-out; */
    color: white;
    animation: flipOut 0.5s forwards, flipIn 0.5s 0.5s forwards;
}

.cpt-entry-title:hover {
    color: black !important;
}

.our-work-button {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    border-radius: 15px;
}

.our-single-work-button {
  display: flex;
  justify-content: flex-end;
  text-decoration: none !important;
}

.cpt-entry-content li {
  list-style: none;
}

/* .cpt-content-container {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.cpt-content-container ul {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
  letter-spacing: 4px;
  color: black;
  font-weight: 800;
  font-size: 2rem;
  list-style: none;
  margin: 0rem;
  text-align: center;
  padding: 1rem;
  background: #ffcd57;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.cpt-content-container .project-description {
  padding: 1rem;
  border: 3px solid #ffcd57;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top: none;
} */

.cpt-content-container {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.cpt-content-container ul {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap: wrap;
  letter-spacing: 4px;
  color: black;
  font-weight: 800;
  font-size: 2rem;
  list-style: none;
  margin: 0rem;
  text-align: center;
  padding: 1rem;
  border-right: solid black 3px;
  border-left: solid black 3px;
}

.cpt-content-container .project-description {
  padding: 1rem;
  border: 3px solid #ffcd57;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top: none;
}

/* .our-work-cpt-article .primary_image {
    max-width: 80%;
    max-height: 80%;
    display: flex;
    margin: auto;
    overflow: hidden;
}

.secondary_image {
    display: none;
}

.our-work-cpt-article:hover .secondary_image {
    display: flex;
}

.our-work-cpt-article:hover .primary_image {
    display: none;
} */

.our-work-cpt-article .image-border {
    width: 350px; /* Adjust the width as needed */
    height: 250px; /* Adjust the height as needed */
    display: flex;
    overflow: hidden;
    position: relative;
    display: flex;
    margin: auto;
}

@media (max-width: 1170px) {
    .our-work-cpt-article .image-border {
        width: 300px; /* Adjust the width as needed */
        height: 200px; /* Adjust the height as needed */
        display: flex;
        overflow: hidden;
        position: relative;
        display: flex;
        margin: auto;
    }
}

.our-work-cpt-article img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.5s ease, transform 0.5s ease; /* Add transitions for opacity and transform */
    position: absolute; /* Position the images absolutely within the container */
    top: 0;
    left: 0;
    z-index: 1; /* Ensure the images are on top of each other */
    min-width: 300px;
}

.secondary_image {
    opacity: 0; /* Initially hide the secondary image */
    transform-origin: top center;
    transform: scale(0.9) translateY(-10%) rotateX(-90deg); /* Scale down and move up the secondary image slightly */
}

.our-work-cpt-article:hover .primary_image {
    opacity: 0; /* Fade out the primary image on hover */
    transform: scale(1.2); /* Scale up the primary image slightly */
}

.our-work-cpt-article:hover .secondary_image {
    opacity: 1; /* Fade in the secondary image on hover */
    transform: scale(.9) translateY(0) rotateX(0deg); /* Reset the scale and position for the secondary image */
}

/* Single works styling */

.our-work-single-image-container {
    display: flex;
    max-width: 90vw;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
}

.our-work-single-image {
    max-height: 300px;
    min-height: 250px;
    transition: .5s ease-in-out;
}

.our-work-single-image:hover {
  scale: 1.1;
  transition: .4s ease-in-out;
}

.our-services-wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.service-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 2rem;
  padding: 1rem;
  padding-bottom: 4rem;
  box-shadow: -5px 5px 15px hsl(0, 0%, 0%, 60%);
}

.service-card ul {
  margin-left: 1rem;
  margin-bottom: 3rem;
}

.service-card h3 {
  font-size: 1.5rem;
  height: 3.5rem;
}

.package-price {
  /* text-decoration: underline; */
  display: flex;
  border: 2px solid black;
  max-width: 100%;
  padding: .25rem;
  margin: 0;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  margin-left: 1rem;
}