/*   
Theme Name: TyVision by ThatGuyCode
Theme URI: https://www.thatguycode.com/
Description: A custom resposive theme
Author: ThatGuyCode
Author URI: https://www.thatguycode.com/
Version: 1.0
*/
/*
    VARIABLES

    ----------------------- */
/*
    COLORS

    ----------------------- */
/*
    MEDIA QUERIES

    ----------------------- */
/*
 *	MIXINS
 *	================================================== */
/*
    SITE CSS

    ----------------------- */
body {
  font-family: "Montserrat", sans-serif;
  background-color: #efefef;
}

/*  HEADER  */
header {
  position: fixed;
  width: 90%;
  z-index: 30;
  min-height: 90px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  text-align: center;
}

/*  MAIN  */
main {
  margin: 0 auto;
  width: 90%;
}
main .wpcf7-form.invalid .wpcf7-response-output {
  color: #FFFFFF;
}
main .wpcf7-form .wpcf7-response-output {
  border-radius: 8px;
}
main .wpcf7-form .btn-submit-block {
  padding-top: 20px;
}
main .wpcf7-form input {
  border: none;
  border-radius: 0;
  outline: none !important;
  box-shadow: none !important;
}
main .wpcf7-form textarea {
  margin-top: 25px;
  border: none;
  border-radius: 0;
}
main .wpcf7-form p {
  margin: 0;
  padding: 0;
}
main .wpcf7-form .wpcf7-submit {
  color: #14b5eb;
  padding-left: 0;
}
main .wpcf7-form .wpcf7-spinner {
  position: absolute;
}
main #base360_carousel .block {
  padding: 20px;
  background-color: transparent;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #015579 100%);
  text-align: center;
  margin: 10px;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  color: #FFF;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
main #base360_carousel .block img {
  margin: 0 auto;
  max-width: 60px;
}
main #base360_carousel element {
  width: 435px;
}
main #base360_carousel .slick-initialized .slick-slide {
  display: block;
  padding-right: 10px;
}
main #base360_carousel .elementor *, main #base360_carousel .elementor ::after, main #base360_carousel .elementor ::before {
  box-sizing: border-box;
}
main #base360_carousel .slick-slide {
  border: 5px solid transparent;
}
main #base360_carousel .slick-next-arr {
  right: -25px;
}
main #base360_carousel .slick-prev-arr {
  left: -35px;
}
main #base360_carousel button {
  background: none;
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}
main #base360_carousel button svg {
  fill: #000;
  width: 30px;
}
main #ourwork_flipcard .flip-card {
  background-color: transparent;
  width: 100%;
  height: 250px;
  perspective: 1000px;
}
main #ourwork_flipcard .flip-card h1 {
  position: absolute;
  color: #FFFFFF;
  font-size: 20px;
  z-index: 10;
}
main #ourwork_flipcard .flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
main #ourwork_flipcard .flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
main #ourwork_flipcard .flip-card:hover .flip-card-inner h1 {
  display: none;
}
main #ourwork_flipcard .flip-card-front, main #ourwork_flipcard .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
main #ourwork_flipcard .flip-card-front {
  background-color: #bbb;
  color: black;
}
main #ourwork_flipcard .flip-card-back {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}
main .double-heading span {
  color: #FFFFFF;
}
main .flip-card-front {
  height: 100%; /* Set the container to full height */
  display: flex;
  align-items: center; /* Center the image vertically */
  justify-content: center; /* Center the image horizontally */
}
main .flip-card-front:after {
  content: ""; /* Necessary for the pseudo-element */
  position: absolute; /* Position it absolutely within the container */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Black shade with 50% opacity */
  pointer-events: none; /* Allow clicks to go through the overlay */
}
main .flip-card-front img {
  height: 100%; /* Make the image full height */
  width: auto; /* Maintain aspect ratio */
  -o-object-fit: cover;
     object-fit: cover; /* Cover the area while preserving aspect ratio */
}

/*  FOOTER  */
footer ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
footer .copyright {
  font-size: 12px;
  color: #000000;
  border-top: 1px solid #000000;
  padding: 10px;
  text-align: center;
}

/*
  MOBILE MENU
  ----------------------------------- */
.mobile-main-menu {
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
}
.mobile-main-menu ul.nav {
  padding: 0;
}
.mobile-main-menu ul.nav li {
  opacity: 0;
  transform: translateY(-40px);
  animation-timing-function: cubic-bezier(0.45, 0.005, 0, 1);
}
.mobile-main-menu ul.nav li a {
  color: #FFF;
  font-size: 5vh;
  font-weight: 600;
}

.nav-open .mobile-main-menu {
  opacity: 1;
  visibility: visible;
  background: rgba(0, 0, 0, 0.92);
}

.nav-open .mobile-main-menu .nav li {
  opacity: 1;
  transform: translateY(0px);
  transition: transform 0.2s, opacity 0.2s;
}

.mobile-main-menu .nav li.delay-1 {
  transition-delay: 0.1s;
}

.mobile-main-menu .nav li.delay-2 {
  transition-delay: 0.2s;
}

.mobile-main-menu .nav li.delay-3 {
  transition-delay: 0.3s;
}

.mobile-main-menu .nav li.delay-4 {
  transition-delay: 0.4s;
}

.mobile-main-menu .nav li.delay-5 {
  transition-delay: 0.5s;
}

.mobile-main-menu .nav li.delay-6 {
  transition-delay: 0.6s;
}

.mobile-main-menu .nav li.delay-7 {
  transition-delay: 0.7s;
}

.mobile-main-menu .nav li.delay-8 {
  transition-delay: 0.8s;
}

.mobile-main-menu .nav li.delay-9 {
  transition-delay: 0.9s;
}

.nav-button {
  position: relative;
  z-index: 1111;
  border: solid 1px #f8f8f8;
  height: 42px;
  display: block;
  width: 50px;
  padding: 12px;
}

.nav-button #nav-icon3 {
  width: 24px;
  height: 22px;
  display: inline-block;
  position: relative;
  transform: rotate(0deg);
  transition: 0.5s ease-in-out;
  cursor: pointer;
}

.nav-button #nav-icon3 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #FFFFFF;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}

.nav-button #nav-icon3 span:nth-child(1) {
  top: 0;
}

.nav-button #nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) {
  top: 7px;
}

.nav-button #nav-icon3 span:nth-child(4) {
  top: 14px;
}

.nav-open #nav-icon3 span:nth-child(1) {
  top: 9px;
  width: 0;
  left: 50%;
}

.nav-open #nav-icon3 span:nth-child(2) {
  transform: rotate(45deg);
}

.nav-open #nav-icon3 span:nth-child(3) {
  transform: rotate(-45deg);
}

.nav-open #nav-icon3 span:nth-child(4) {
  top: 9px;
  width: 0;
  left: 50%;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}/*# sourceMappingURL=style.css.map */