/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Template: twentytwentyfive
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Tags: one-column,custom-colors,custom-menu,custom-logo,editor-style,featured-images,full-site-editing,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,wide-blocks,block-styles,style-variations,accessibility-ready,blog,portfolio,news
Version: 1.3.1757316069
Updated: 2025-09-08 10:21:09

*/

@import "tailwindcss";

@theme {
    --color-black: #231F20;
    --color-orange: #FAA11B;
    --color-orange-dark: #EC930C;
    --color-cream: #FFF8EE;
    --color-cream-dark: #FAF3E6;
    --breakpoint-3xl: 1800px;
}
html{
    scroll-behavior: smooth;
}
body{
    font-family: 'rubik', sans-serif;
    direction: rtl;
    @apply text-black;
}
a{
    text-decoration: none;
}
button{
    cursor: pointer;
}
.container {
    @apply px-4 w-full max-w-full lg:max-w-[92%] 2xl:max-w-[82%] mx-auto;
}
.btn-primary{
    @apply inline-flex items-center justify-center gap-2 px-5 py-2 rounded-full text-black text-lg md:text-xl xl:text-2xl transition-all;
}
.img-cover {
    @apply object-cover w-full h-full absolute inset-0;
}
/*==== titles ====*/
.title-70{
    @apply text-[11vw] sm:text-[clamp(50px,5.5vw,70px)] leading-[1.1] font-bold;
}
.title-h2{
    @apply text-[8.8vw] sm:text-[clamp(38px,3.5vw,42px)] leading-[1.2] font-bold;
}
.text-42{
    @apply text-[6.2vw] sm:text-[clamp(26px,2.5vw,42px)] leading-[1.3];
}
.text-30{
    @apply text-[5.5vw] sm:text-[clamp(24px,1.8vw,30px)] leading-[1.3];
}
.text-24{
    @apply text-[5vw] sm:text-[clamp(22px,1.8vw,24px)] leading-[1.3];
}
.text-22{
    @apply text-[4.5vw] sm:text-[clamp(18px,1.8vw,22px)] leading-[1.3];
}
/*====*/

.menu-link{
    @apply text-[5.2vw] sm:text-lg lg:text-xl font-medium lg:font-bold text-white hover:text-orange transition-all max-sm:py-2;
}
.slick-list{
    @apply h-full w-full;
}
.slick-track{
    @apply h-full flex;
}
.slick-dots li button:before {
    @apply hidden;
}
.slick-dots li {
@apply w-auto h-auto;
}
.slick-dots li button {
@apply w-2 h-2 xl:w-3 xl:h-3 rounded-full bg-white p-0 opacity-50 scale-90;
}
.slick-dots li.slick-active button {
@apply opacity-100 scale-100;
}
.slide-fade .slick-dots{
@apply bottom-8 z-[2];
}
.slick-arrow{
    background-image: url("./public/slide-l.svg") !important;
@apply w-14 h-14 bg-white/70 rounded-full flex items-center justify-center transition-all !bg-no-repeat !bg-center z-[3];
}
.slick-prev{
    background-image: url("./public/slide-r.svg") !important; 
}
.slick-disabled{
    @apply !hidden;
}
.slick-arrow:hover,
.slick-arrow:focus{
    @apply bg-white;
}
.slick-arrow:before{
    @apply hidden;
}
.plants-slider .slick-list{
    @apply overflow-visible max-md:pe-[18vw];
}
.slider-clients .slick-list{
    @apply overflow-visible max-md:px-[8vw];
}
.slider-clients .slick-track{
    @apply items-center;
}
.slider-projects .slick-list{
    @apply overflow-visible !px-[3.5vw] md:!px-[3vw];
}
.slider-projects .slick-prev{
    @apply right-5;
}
.slider-projects .slick-next{
    @apply left-5;
}
.wpcf7 {
    direction: rtl;
}
.wpcf7 input {
text-align: right;
}
.wpcf7 p {
margin: 0;
}
.wpcf7 br {
display: none;
}
.form-grid{
    @apply grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-6 md:gap-y-10;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea {
  @apply transition-all relative w-full px-0 py-4 2xl:py-6 text-start placeholder-black/60 outline-none
    text-[4.5vw] sm:text-[clamp(18px,2.2vw,22px)] leading-[1.3]
     bg-transparent text-black border-b border-black/60 rounded-none autofill:bg-transparent invalid:border-red-600 invalid:text-red-600 disabled:cursor-not-allowed;
}
.input-q:focus,
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 input[type="date"]:focus,
.wpcf7 textarea:focus {
  @apply outline-none border-black ring-0;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
  direction: rtl !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.form-submit{
@apply mt-8 md:mt-10 relative w-full md:w-[175px] md:ms-auto;
}
.form-submit .wpcf7-submit{
@apply w-full h-[50px] cursor-pointer border-none py-[0.625rem] px-[1.875rem] text-[1.375rem] text-white
bg-black flex items-center justify-center text-center hover:bg-black/80 transition-colors rounded-full;
}
.wpcf7-not-valid-tip{
@apply !text-red-600 !text-sm mt-2;
}
div.wpcf7 .wpcf7-spinner::before{
    @apply hidden
}
div.wpcf7 .wpcf7-spinner,
.is-loader {
  background: url("./public/loader.svg") no-repeat center;
  background-color: transparent !important;
  background-size: contain;
  width: 38px !important;
  height: 38px !important;
  position: absolute !important;
  right: 0;
  left: 0;
  margin: auto !important;
  top: 0;
  bottom: 0;
  visibility: visible;
  display: none;
}
.wpcf7-form.submitting .wpcf7-spinner,
div.wpcf7 .wpcf7-spinner.is-active {
  display: block;
}
.wpcf7-form.submitting .wpcf7-submit{
  @apply !text-[0px]
}
.wpcf7-response-output {
    display: none !important;
}
.wpcf7 form.sent .wpcf7-response-output{
    border:none !important;
    @apply !block text-[#46b450] font-bold text-lg !px-0 !m-0 !py-6;
}
.gallery-item{
    @apply relative w-[55vw] md:w-[38vw] aspect-[4.2/3] overflow-hidden rounded-[15px] md:rounded-[25px] mx-2 md:mx-3
}
.slider-item img{
    animation: zoomIn 20s ease-in-out infinite;
}
@keyframes zoomIn {
    0%,100%{
        transform: scale(1.13);
    }
    50%{
        transform: scale(1);
    }
}

@media (width < 64rem) {
    .menu{
        display: grid;
        grid-template-rows: 0fr;
        transition: 0.3s ease-in-out;
    }
    .menu nav{
        transition: 0.3s ease-in-out;
    }
    .menu.active{
        grid-template-rows: 1fr;
    }
    .menu.active nav{
        @apply py-12;
    }
    .btn-menu div {
        transition: all 0.15s ease-in-out;
        transform-origin: center;
    }
    
    .btn-menu.active div:nth-child(1) {
        transform: translateY(0.65rem) rotate(45deg);
    }
    
    .btn-menu.active div:nth-child(2) {
        opacity: 0;
    }
    
    .btn-menu.active div:nth-child(3) {
        transform: translateY(-0.5625rem) rotate(-45deg);
    }
}
@media (width >= 80rem) {
    .collapsible-text{
        display: grid;
        grid-template-rows: 0fr;
        transition: 0.3s ease-in-out;
    }
    .plants-slider-item:hover .collapsible-text{
        grid-template-rows: 1fr;
    }
}
.whatsapp-button{
    @apply fixed bottom-8 left-8 w-[48px] h-[48px] md:w-[60px] md:h-[60px] rounded-full bg-[#24d366] flex items-center justify-center z-[4];
    animation: whatsapp-heartbeat 3s ease-in-out infinite;
}

@keyframes whatsapp-heartbeat {
    0%, 40% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    
    100% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
}


.cky-revisit-bottom-left {
    bottom: 105px !important;
    left: 39px !important;
}