/*!
Theme Name: Pintuna
Theme URI: https://underscores.me/
Author: Pintuna
Author URI: https://pintuna.com
Description: Pintuna offers a global solution for digital and contactless gift cards, tickets, coupons, membership and loyalty cards
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: pintuna
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Pintuna is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

body a {
	transition: all 0.5s ease;
}

.menu-separator {
	margin: 0 10px; /* Adjust the spacing as needed */
}

.about-solutions-contact ul li {
	display: inline-block;
	margin-right: 30px;
    position: relative;
}

.sign-in-register ul li {
	display: inline-block;
}

.menu-with-separators .menu-item:last-child .menu-separator {
    display: none;
}

.menu .current-menu-item a {
	color: var(--mosque);
}

.menu-toggle {
	cursor: pointer;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 1; /* Ensure the overlay is above other content */
}

.mobile-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background-color: black; /* Change to black */
    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease-in-out;
    z-index: 2; /* Ensure the menu is above the overlay */
}

.mobile-menu ul {
    list-style: none;
    padding: 0;
}

.mobile-menu li {
    padding: 10px 15px;
    border-bottom: 1px solid #222; /* Darken the border color */
}

.mobile-menu li:last-child {
    border-bottom: none; /* Remove border from the last item */
}

.mobile-menu .submenu-item {
    padding-left: 30px;
}

.mobile-menu ul li a {
	color: var(--white);
    font-family: var(--font-family-rubik);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
	text-decoration: none;
	text-transform: uppercase;
	transition: all 0.5s ease;
}

.mobile-menu ul li.request-btn a {
    padding: 0;
}

.mobile-menu ul .active a {
	color: var(--mosque);
	pointer-events: none;
}

.mobile-menu ul li a:hover,
.close-button:hover {
	color: var(--mosque);
}

.close-button {
    cursor: pointer;
    align-self: flex-end;
    padding: 10px;
    color: white; /* Change to white */
	font-size: 24px;
	transition: all 0.5s ease;
    margin-right: 10px;
}


.hover-button .get-pintuna-for,
.hover-button div {
    transition: all 0.5s ease;
}

.hover-button:hover .get-pintuna-for,
.hover-button:hover div {
    color: var(--mosque);
}

.wpcf7-form input, 
.wpcf7-form textarea {
    align-items: flex-start;
    background-color: var(--white);
    border: 1px solid;
    border-color: var(--celeste);
    border-radius: 10px;
    display: flex;
    height: 75px;
    width: 100%;
    letter-spacing: 0;
    line-height: 64px;
    min-height: 29px;
    color: var(--black);
    font-family: var(--font-family-rubik);
    font-style: normal;
    font-weight: 300;
    margin: 14px 0;
}

.wpcf7-form input.wpcf7-not-valid {
    border-color: #dc3232;
}

.wpcf7-not-valid-tip {
    display: none !important;
}

.wpcf7-form textarea {
    height: 126px;
    resize: none;
    font-size: var(--font-size-s);
    padding: 4.5px 20px;
    line-height: 1.6;
}

.wpcf7-form input {
    height: 62px;
    font-size: var(--font-size-s);
    padding: 4.5px 20px;
}

@media (min-width: 1024px) {
    .wpcf7-form textarea {
        height: 223px;
        font-size: var(--font-size-l);
        padding: 4.5px 30px;
    }

    .wpcf7-form input {
        height: 75px;
        font-size: var(--font-size-l);
        padding: 4.5px 30px;
    }
}


.wpcf7-form .wpcf7-submit {
    align-items: flex-start;
    background-color: var(--black);
    display: flex;
    justify-content: flex-end;
    padding: 4.5px 45px;
    letter-spacing: 0;
    min-height: 31px;
    color: var(--white);
    font-family: var(--font-family-barlow);
    font-style: normal;
    font-weight: 700;
    border-radius: 0;
    cursor: pointer;
    text-transform: uppercase;
    border: 0;
    width: auto;
    transition: all 0.5s ease;
    height: 62px;
    font-size: var(--font-size-xl);
    line-height: 48px;
}

@media (min-width: 1024px) {
    .wpcf7-form .wpcf7-submit {
        height: 76px;
        line-height: 64px;
    }
}

.wpcf7-form .wpcf7-submit:hover {
    color: var(--te-papa-green);
}

@media (min-width: 1024px) {
    .wpcf7-form .col-2-width-field {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 22px;
    }
}


.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #dc3232;
    padding: 20px;
    text-align: center;
    color: var(--black);
    font-family: var(--font-family-rubik);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 300;
    margin: 0;
    background: #fff;
}

.wpcf7-form-control:focus {
    border-color: var(--te-papa-green);
    box-shadow: none; 
    outline: none;
}

.mobile-form {
    left: 0;
    letter-spacing: 0;
    position: absolute;
    top: 1631px;
    white-space: nowrap;
    right: 0;
    margin: 0 auto;
    width: 80%;
}

.footer-nav {
    text-align: center;
}

.footer-nav ul li {
    display: inline-block;
    margin: 0 5px;
}

.footer-nav ul li.request-btn {
    display: none;
}

.footer-nav ul li a {
    color: var(--black);
}

.rubik-normal-black-24px a {
    color: var(--black);
}

.screen a:hover {
    color: #006677;
}

.screen a {
    transition: all 0.5s ease;
}

.image, .custom-logo {
    object-fit: cover;
    position: absolute;
}
  
.custom-logo {
    height: 62px;
    left: 0;
    top: 29px;
    width: 201px;
}

.wp-block-heading {
    color: var(--black);
    font-family: var(--font-family-barlow);
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 700;
    margin-bottom: 20px;
}

.entry-title {
    color: var(--black);
    font-family: var(--font-family-barlow);
    font-size: var(--font-size-xxxl);
    font-style: normal;
    font-weight: 700;
    margin-bottom: 20px;
}

.entry-content p {
    color: var(--black);
    font-family: var(--font-family-rubik);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 300;
    margin-bottom: 20px;
}

.site-main {
    padding: 20px;
}


.menu-item .sub-menu {
    display: none;
}

.menu-item .sub-menu li {
    margin-right: 0;
}

.menu-item .sub-menu a {
    font-size: var(--font-size-s);
}


/* Style the submenu */
.menu-item:hover .sub-menu {
    display: block; /* Show the submenu when hovering */
    position: absolute; /* Position submenu items relative to the parent */
    top: 100%; /* Position the submenu below the parent */
    left: 0; /* Align submenu with the left edge of the parent */
    background-color: #fff; /* Background color of the submenu */
    border: 1px solid #ccc; /* Add a border around the submenu */
    padding: 10px; /* Add padding to the submenu */
    z-index: 1000; /* Ensure the submenu appears above other content */
}

/* Style individual submenu items */
.menu-item:hover .sub-menu li {
    padding: 10px; /* Add padding to each submenu item */
    display: block;
}

.request-btn a {
    background-color: var(--black);
    display: flex;
    padding: 10px 20px;
    color: #fff;
    text-transform: uppercase;
    font-size: 20px;
    border-radius: 9px;
}

.request-btn a:hover {
    color: #006677;
}