/*
Theme Name: parlatta
Theme URI: http://parlatta.com
Version: 0.1
Author: tinisi
Author URI: http://parlatta.com/
Description: A Minimal Wordpress Theme.
Tags: minimal, simple, responsive, light-weight
Text Domain: parlatta
*/

/* ========================================
  Variables & Imports
  ======================================== */
  @import url("https://use.typekit.net/exj6cix.css");

  :root {
    /* colors */
    --background-color: #203DCE;
    --text-color: #ececee;
    --link-color: #9cb8f6;
    /* text */
    --font-family: sofia-pro, sans-serif;
    --base-font-size: 16px;
    --line-height: 1.5;
  }


/* ========================================
  Base
  ======================================== */

  /* Structure */

  html {
    margin: 0 !important;
    padding: 0 !important;
  }

  body {
    /* text */
    font-family: var(--font-family);
    font-weight: 300 !important;
    font-size: var(--base-font-size) !important;
    line-height: var(--line-height) !important;
    text-align: left;
    /* colors */
    color: var(--text-color) !important;
    background-color: var(--background-color) !important;
  }

  .wrapper {
    max-width: 80vw;
    margin: 0 auto;
    /* css grid */
    display: grid;
    grid-template-rows: 1fr auto; /* Header, Content, Footer */
    grid-template-columns: 1fr; /* Single column layout */
    gap: 20px;
  }

  header {
  
  }

  main {
    display: grid;
    grid-template-columns: 1fr; /* one column */
    gap: 20px; /* Gap between grid items */
  }

  section {

  }

  footer {

  }

  .section-center {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    z-index: 6;
    text-align: center;
    transform: translateY(-50%);
  }

  #mainContent {
    display: inline-block;
    margin: 0 auto;
    width: 100%;
    min-height: 50vh;
  }

  .center {
    border: 5px solid;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
  }
  /* text */
  h1, h2, h3, h4, h5, h6 {
    /*line-height: 1.2;*/
    font-weight: 400 !important;
  }
  a {
    color: var(--link-color) !important;
    text-decoration: none;
  }
  h1 {
    font-size: 2.25rem !important;
  }
  h2 {
    font-size: 1.25rem !important;
  }
  h3 {
    font-size: 1.125 !important; 
  }
  p {
  }

/* ========================================
  Header
  ======================================== */
   
  header {
    position: sticky;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    top: 0;
    height: 8vh;
    width: 100%;
    z-index: 8;
    padding: 1rem;
  }

  header > * {
    flex: 1;
  }

  /* Logo */

  .tlogo {
    width: 135px;
  }

  /* Hamburger Menu */

  [type="checkbox"]:checked, [type="checkbox"]:not(:checked) {
    opacity: 0;
    pointer-events: none;
    left: -9999px;
  }
 .menu-icon:checked + label, .menu-icon:not(:checked) + label {
    position: fixed;
    right: 1rem;
    display: block;
    width: 30px;
    height: 15px;
    margin: 0;
    cursor: pointer;
    z-index: 10;
}
  .menu-icon:checked + label:before, .menu-icon:not(:checked) + label:before {
    position: absolute;
    content: '';
    display: block;
    width: 30px;
    height: 18px;
    z-index: 20;
    top: 0;
    left: 0;
    border-top: 2px solid #ececee;
    border-bottom: 2px solid #ececee;
    transition: border-width 100ms 1500ms ease, top 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1), height 100ms 1600ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .menu-icon:checked + label:after, .menu-icon:not(:checked) + label:after {
    position: absolute;
    content: '';
    display: block;
    width: 22px;
    height: 2px;
    z-index: 20;
    top: 8px;
    right: 4px;
    background-color: #ececee;
    transition: width 100ms 1750ms ease, right 100ms 1750ms ease, margin-top 100ms ease, transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .menu-icon:checked + label:before {
    top: 10px;
    transform: rotate(45deg);
    height: 2px;
    background-color: #ececee;
    border-width: 0;
    transition: border-width 100ms 340ms ease, top 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1), height 100ms 300ms cubic-bezier(0.23, 1, 0.32, 1), background-color 200ms 500ms ease, transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .menu-icon:checked + label:after {
    width: 30px;
    margin-top: 0;
    right: 0;
    transform: rotate(-45deg);
    transition: width 100ms ease, right 100ms ease, margin-top 100ms 500ms ease, transform 200ms 1700ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .nav {
    position: fixed;
    top: 1rem;
    right: 0.75rem;
    display: block;
    width: 30px;
    height: 24px;
    padding: 0;
    margin: 0;
    z-index: 9;
    border-radius: 50%;
    background-color: #203DCE;
    transition: top 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1), right 350ms 1100ms cubic-bezier(0.23, 1, 0.32, 1), transform 250ms 1100ms ease, width 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1), height 650ms 400ms cubic-bezier(0.23, 1, 0.32, 1);
    /* scrolling */
    overflow: scroll;
    /* Hide scrollbar for IE, Edge and Firefox 
    fixes the scrollbar header issue */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  /* Hide scrollbar for Chrome, Safari and Opera,
    fixes the scrollbar header issue */
  .nav::-webkit-scrollbar {
    display: none;
  }

  @keyframes border-transform {
    0%, 100% {
      border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    }
    14% {
      border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
    }
    28% {
      border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
    }
    42% {
      border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
    }
    56% {
      border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
    }
    70% {
      border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
    }
    84% {
      border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
    }
  }
  .menu-icon:checked ~ .nav {
    animation-play-state: paused;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 0;
    transition: top 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1), right 350ms 700ms cubic-bezier(0.23, 1, 0.32, 1), transform 250ms 700ms ease, width 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1), height 750ms 1000ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .nav ul {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    z-index: 6;
    text-align: center;
    transform: translateY(-50%);
    list-style: none;
  }
  .nav ul li {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    margin: 10px 0;
    text-align: center;
    list-style: none;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: all 250ms linear;
  }
  .nav ul li:nth-child(1) {
    transition-delay: 300ms;
  }
  .nav ul li:nth-child(2) {
    transition-delay: 250ms;
  }
  .nav ul li:nth-child(3) {
    transition-delay: 200ms;
  }
  .nav ul li:nth-child(4) {
    transition-delay: 150ms;
  }
  .nav ul li:nth-child(5) {
    transition-delay: 100ms;
  }
  .nav ul li:nth-child(6) {
    transition-delay: 50ms;
  }
  .nav ul li a {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    text-transform: uppercase;
    line-height: 1.2;
    font-weight: 800;
    display: inline-block;
    position: relative;
    color: #ececee;
    transition: all 250ms linear;
  }
  .nav ul li a:hover {
    text-decoration: none;
    color: #ffeba7;
  }
  .nav ul li a:after {
    display: block;
    position: absolute;
    top: 50%;
    content: '';
    height: 2vh;
    margin-top: -1vh;
    width: 0;
    left: 0;
    background-color: #353746;
    opacity: 0.8;
    transition: width 250ms linear;
  }
  .nav ul li a:hover:after {
    width: 100%;
  }
  .menu-icon:checked ~ .nav ul li {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 350ms ease, transform 250ms ease;
  }
  .menu-icon:checked ~ .nav ul li:nth-child(1) {
    transition-delay: 1400ms;
  }
  .menu-icon:checked ~ .nav ul li:nth-child(2) {
    transition-delay: 1480ms;
  }
  .menu-icon:checked ~ .nav ul li:nth-child(3) {
    transition-delay: 1560ms;
  }
  .menu-icon:checked ~ .nav ul li:nth-child(4) {
    transition-delay: 1640ms;
  }
  .menu-icon:checked ~ .nav ul li:nth-child(5) {
    transition-delay: 1740ms;
  }
  .menu-icon:checked ~ .nav ul li:nth-child(6) {
    transition-delay: 1820ms;
  }

/* ========================================
  Second Menu
  ======================================== */

  .navi {
    display: block;
    /* margin: 0 auto;
    max-width: 50vw; */
    text-align: center;
  }
  .navi h2 {
    padding: 0;
  }
  .navi li {
    display: inline-block;
    padding: 1em;
  }
  .navi li a {
    color: #afd0eb;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: .09rem;
    font-size: .85rem;
  }

/* ========================================
  Hero Section
  ======================================== */

  .hero-section {
    text-align: center;
    color: var(--background-color);
    background-color: white;
    width: 100%;
    height: 92vh;
  }

/* ========================================
  Content Section
  ======================================== */

  .content-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: center;
    gap: 20px; /* Gap between text and image */
    padding: 20px;
    border: 1px solid #ddd; /* border for showcase */
  }

  .content-text, 
  .content-image {
    max-width: 100%;
    height: auto;
  }

  .content-image {
    min-height: 200px;

  }

/* ========================================
  Forms
  ======================================== */

  .form-wrapper {
    position: relative;
    top: 350px;
    /*width: 55vw;*/
    width: 60%;
    margin: 0 auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*width: 80%;
    margin: 0 auto;*/
  }

  .forminator-input { 
    padding: .80em 1em !important; 
    
  }

 .forminator-label {
    font-size: .95em !important;
    font-family: sofia-pro !important;
    font-weight: normal !important;
    padding-bottom: 0.5em !important;
     
 }
 
 span.forminator-step-label {
    width: 8em !important;
    font-size: 1em !important;
    font-family: inherit !important;
    font-weight: 500 !important;
    margin-bottom: 1rem !important;
  }

  input {
      padding: 1rem !important;
  }

  .forminator-button-next,.forminator-button-back,#forminator-submit  {
      font-size: 1rem !important;
      font-family: inherit !important;
      font-weight: bold !important;
      text-transform: uppercase !important;
      letter-spacing: .025rem !important;
      padding: 1rem !important;
  }

  .forminator-ui#forminator-module-116.forminator-design--flat select.forminator-select2 + .forminator-select .selection .select2-selection--single[role="combobox"] .select2-selection__rendered {
      padding: 1rem !important;
  }

/* ========================================
  Modal
  ======================================== */

  #target-content {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms;
  }
  #target-content:target {
    pointer-events: all;
    opacity: 1;
  }
  #target-content #target-inner {
    position: absolute;
    display: block;
    padding: 48px;
    line-height: 1.8;
    width: 70%;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
    background: white;
    color: #34495E;
  }
  #target-content #target-inner h2 {
    margin-top: 0;
  }
  #target-content #target-inner code {
    font-weight: bold;
  }
  #target-content a.close {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #34495E;
    opacity: 0.5;
    transition: opacity 200ms;
  }
  #target-content a.close:hover {
    opacity: 0.4;
  }
  .modal-btn {
    background-color: pink;
    padding: 0.5rem;
    border-radius: 25px;
  }

/* ========================================
  Parlatta Homepage
  ======================================== */

  .bg-slate-900{
  background-color: #203DCE !important;
  }
  .text-white{
  color: white !important;
  }
  .homepage-h1{
    color: initial;
    text-align: left;
    -webkit-text-stroke: initial;
    text-stroke: initial;
    -webkit-text-fill-color: initial;
    text-fill-color: initial;
  }
  .inline-flex{
    align-items: center;
  }

/* ========================================
   Pricing Page
   ======================================== */

  .services-header {
    text-align: center;
  }
  .pricing-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
  }
  .placeholder-class {
    width: 100px;
    height: 100px;
    background-color: grey;
  }
  .pricing-container-one {}
  .pricing-container-two {}

/* ========================================
  Misc
  ======================================== */
    
  /* remove dev bar at the top */

  #wpadminbar {
    display: none;
  }

/* TINISI SEPT 1 2023 */

.fr-logo {
    width: 15rem;
    margin: 0 auto;
    display: block;
}

.p-home {
    z-index: 99;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    position: fixed !important;
    overflow: hidden !important;
}

.forminator-guttenberg {
    padding: 10rem 2.5rem 0rem;
    max-width: 40rem;  
    margin: 0 auto;
}