/*
Theme Name: شرکت ابتکار صنعت نادین
Theme URI: http://esnadin.com
Author: Ali Chenani
Author URI: http://esnadin.com
Description: طراحی شده تویط علی چنانی
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: esnadin

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

Twenty Nineteen is based on Underscores https://underscores.me/, (C) 2012-2018 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/
*/
@import url(css/fontiran.css);
@import url(css/animate.css);

/**************************css Reset*********************/
@-ms-viewport {
    width: device-width;
}

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
    display: block;
}

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    scroll-behavior: smooth;
}

/*************** Main ***************/
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
}

body,
input,
textarea,
button {
    direction: rtl;
    line-height: 1.5;
    font-family: "IRANSans", sans-serif;
}

a {
    text-decoration: none;
    color: #000
}


body,
html {
    margin: 0;
    padding: 0;
    font-family: IRANSans;
    background-color: #fff;
    color: #333;
    direction: rtl;
    overflow-x: hidden;
    width: 100%;
}

.logo-container {
    width: 100%;
    height: 100vh;
    background: white;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeUp 2s ease forwards, shine 2s 2s infinite;
    opacity: 0;
    overflow: hidden;
}

.logo-container img {
    max-width: 350px;
    animation: floatUpDown 3s ease-in-out 2s infinite;
}

.click-hint {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    color: #666;
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    opacity: 0;
    animation: fadeInHint 1s 3s ease forwards;
}

@keyframes fadeInHint {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes floatUpDown {
    0%, 100% {
        opacity: 1;
        transform: translateY(0);
    }
    50% {
        opacity: 0.65;
        transform: translateY(-20px);
    }
}


header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #fff;
    color: #fff;
    margin-top: 0;
    padding-top: 0;
    column-gap: 10px;
    transition: all 0.3s ease;
}

header .logo {
    flex: 0.6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s ease;
}

header .logo .the-slug {
    color: black;
    text-align: center;
}

header .logo img {
    width: 80%;
    max-width: 300px;
    margin: 0 auto;
}

header .the-content {
    flex: 1;
    transition: all 0.3s ease;
}

.language-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 5px;
    transition: all 0.3s ease;
}

body[style*="direction: ltr"] .language-toggle {
    right: auto;
    left: 20px;
}

.lang-btn {
    padding: 8px 12px;
    border: 2px solid #a6090a;
    background: white;
    color: #a6090a;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
    transition: all 0.3s ease;
}

#en-btn {
    font-family: Arial, Helvetica, sans-serif;
}

#fa-btn {
    font-family: IRANSans, sans-serif;
}

.lang-btn.active {
    background: #a6090a;
    color: white;
    display: none;
}

.lang-btn:hover {
    background: #a6090a;
    color: white;
}

header .the-content p {
    color: black;
}

.the-content h1 {
    font-size: 24px;
    color: black;
    margin-bottom: 10px;
}

.the-text h2 {
    font-size: 18px;
    color: #555;
    text-align: center;
    margin-bottom: 10px;
}

.the-text p {
    font-size: 14px;
    margin: 10px 0;
}

.btn-download-catalog {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px 5px;
    background-color: #004aad;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.btn-download-catalog:hover {
    background-color: #002b7a;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #a6090a;
    color: #fff;
    padding: 20px;
}

.footer-menu {
    display: flex;
    gap: 20px;
    transition: all 0.3s ease;
}

.footer-menu a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-menu a:hover {
    color: #00aaff;
}

.full-width-image {
    width: 100%;
    height: 300px;
    background-image: url('footer-img.jpg');
    background-size: cover;
    background-position: center;
    margin-top: 20px;
}

.active-menu {
    background: #ffffff;
    padding-left: 10px;
    padding-right: 10px;
    color: #051766 !important;
    border-radius: 6px;
    padding-top: 4px;
    padding-bottom: 4px;
}
.lang-en{
    direction: ltr;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Logo Container */
    .logo-container img {
        max-width: 250px;
        width: 70%;
        animation: floatUpDown 3s ease-in-out 2s infinite;
    }

    .click-hint {
        font-size: 36px;
        bottom: 30px;
    }

    /* Header */
    header {
        flex-direction: column !important;
        text-align: center;
        padding: 15px 10px;
        column-gap: 0;
        row-gap: 15px;
    }

    header .logo {
        flex: 1;
        width: 100%;
        order: 0 !important;
    }

    header .logo img {
        width: 60%;
        max-width: 200px;
    }

    header .logo .the-slug h1 {
        font-size: 20px !important;
    }

    header .logo .the-slug h2 {
        font-size: 14px !important;
    }

    header .the-content {
        width: 100%;
        order: 1 !important;
    }

    /* Language Toggle */
    .language-toggle {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        justify-content: center;
        margin: 10px 0;
        order: -1;
    }

    body[style*="direction: ltr"] .language-toggle {
        right: auto;
        left: auto;
    }

    .lang-btn {
        padding: 8px 16px;
        font-size: 14px;
    }

    /* Content Sections */
    .sections {
        height: auto;
        min-height: 200px;
        max-height: 400px;
        padding: 15px 10px;
        font-size: 14px;
        margin: 10px 0;
    }

    .sections.expanded {
        max-height: none;
        height: auto !important;
    }

    .sections p {
        height: auto;
        max-height: 250px;
        font-size: 13px;
        line-height: 1.6;
    }

    .sections p.expanded {
        max-height: none;
        height: auto !important;
    }

    .read-more-btn {
        padding: 6px 12px;
        font-size: 13px;
    }

    /* Wrapper & Footer */
    .wrapper {
        flex-direction: column;
        text-align: center;
        padding: 15px 10px;
    }

    .footer-menu {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .footer-menu a {
        padding: 8px;
        display: block;
    }

    .active-menu {
        padding: 8px 10px;
    }

    /* Full Width Image */
    .full-width-image {
        height: 150px;
        margin-top: 10px;
    }

    /* Other Elements */
    .btn-download-catalog {
        display: block;
        margin: 10px auto;
        padding: 8px 16px;
        font-size: 14px;
    }

    /* Adjust content for mobile */
    .the-content h1 {
        font-size: 20px;
    }

    .the-text h2 {
        font-size: 16px;
    }

    .the-text p {
        font-size: 13px;
    }

    /* Client logos on tablet */
    .clients-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding: 12px;
    }

    .client-logo {
        padding: 8px;
    }

    .clients-description {
        font-size: 13px;
        padding: 8px 10px;
    }
}

/* Extra small devices (phones, 480px and down) */
@media (max-width: 480px) {
    .logo-container img {
        max-width: 200px;
        width: 65%;
        animation: floatUpDown 3s ease-in-out 2s infinite;
    }

    .click-hint {
        font-size: 28px;
        bottom: 20px;
    }

    header {
        padding: 10px 8px;
    }

    header .logo img {
        width: 50%;
        max-width: 150px;
    }

    header .logo .the-slug h1 {
        font-size: 18px !important;
    }

    header .logo .the-slug h2 {
        font-size: 12px !important;
    }

    .sections {
        padding: 12px 8px;
        font-size: 13px;
    }

    .sections.expanded {
        max-height: none;
        height: auto !important;
    }

    .sections p {
        font-size: 12px;
    }

    .sections p.expanded {
        max-height: none;
        height: auto !important;
    }

    .footer-menu {
        gap: 6px;
    }

    .footer-menu a {
        font-size: 14px;
        padding: 6px;
    }

    /* Client logos on small phones */
    .clients-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .client-logo {
        padding: 8px;
        border-radius: 6px;
    }

    .clients-description {
        font-size: 12px;
        padding: 6px 8px;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    /* Increase tap targets for touch devices */
    .lang-btn {
        min-width: 50px;
        min-height: 44px;
    }

    .footer-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .read-more-btn {
        min-height: 44px;
        padding: 10px 16px;
    }

    /* Remove hover effects on touch devices */
    .lang-btn:hover {
        background: white;
        color: #a6090a;
    }

    .lang-btn.active:hover {
        background: #a6090a;
        color: white;
    }
}

.sections {
    height: 280px;
    display: none;
    padding: 12px;
    min-height: 180px;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin: 0px 0;
    line-height: 1.8;
    font-size: 16px;
    color: #333;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: 1s all ease-in;
    overflow: hidden;
}

.sections.expanded {
    height: auto !important;
    overflow: visible !important;
}

#services {
    height: auto;
    min-height: 280px;
}

.sections p {
    height: 60%;
    margin: 15px 0;
    font-size: 14px;
    overflow: hidden;
}

.sections p.expanded {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.read-more-btn {
    display: inline-block;
    margin-top: 10px;
    background-color: #000;
    color: #fff;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 4px;
}

/* Client Logos Grid */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.client-logo {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    aspect-ratio: 1;
    overflow: hidden;
}

.client-logo:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: #a6090a;
}

.client-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.client-logo:hover img {
    filter: grayscale(0%);
}

.clients-description {
    text-align: center;
    font-size: 14px;
    color: #666;
    padding: 0 15px 10px 15px;
    margin: 0;
    line-height: 1.6;
}

/* Fade Up Effect */
@keyframes fadeUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Fade Out Effect */
@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Hide the main content initially */
header,
.content,
.wrapper,
.full-width-image {
    display: none;
}

.the-content {
    opacity: 0;
    animation: fadeInContent 2s ease forwards;
}

/* Fade in content */
@keyframes fadeInContent {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* PDF Downloads Section */
.pdf-downloads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 0;
    margin: 0;
}

.pdf-download-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.pdf-download-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #a6090a;
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.pdf-download-card:hover {
    border-color: #a6090a;
    box-shadow: 0 6px 20px rgba(166, 9, 10, 0.15);
    transform: translateY(-3px);
}

.pdf-download-card:hover::before {
    transform: scaleY(1);
}

.pdf-icon {
    font-size: 48px;
    flex-shrink: 0;
    filter: grayscale(50%);
    transition: all 0.3s ease;
}

.pdf-download-card:hover .pdf-icon {
    filter: grayscale(0%);
    transform: scale(1.1);
}

/* Thumbnail for PDF cards (real images instead of icons) */
.pdf-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
    border: 1px solid #e0e0e0;
    background: #f6f6f6;
    filter: grayscale(100%);
    transition: all 0.3s ease;
}

.pdf-download-card:hover .pdf-thumb {
    transform: scale(1.05);
    border-color: #a6090a;
    filter: grayscale(0%);
}

/* Ensure language-specific sections also apply grayscale */
.lang-fa .pdf-thumb,
.lang-en .pdf-thumb {
    filter: grayscale(100%) !important;
}

.lang-fa .pdf-download-card:hover .pdf-thumb,
.lang-en .pdf-download-card:hover .pdf-thumb {
    filter: grayscale(0%) !important;
}

.pdf-info {
    flex: 1;
    min-width: 0;
}

.pdf-info h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    transition: color 0.3s ease;
}

.pdf-download-card:hover .pdf-info h4 {
    color: #a6090a;
}

.pdf-info p {
    margin: 0;
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.download-btn {
    padding: 10px 18px;
    background: #a6090a;
    color: white;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.pdf-download-card:hover .download-btn {
    background: #8a0708;
    transform: scale(1.05);
}

/* Product Catalogue Section Height */
#product-catalogue {
    height: auto !important;
    min-height: 400px;
    max-height: none;
}

#product-catalogue .pdf-downloads-grid {
    overflow: visible;
}

/* Responsive adjustments for PDF downloads */
@media (max-width: 768px) {
    .pdf-downloads-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .pdf-download-card {
        padding: 15px;
        gap: 12px;
    }

    .pdf-icon {
        font-size: 36px;
    }
    .pdf-thumb {
        width: 48px;
        height: 48px;
    }

    .pdf-info h4 {
        font-size: 14px;
    }

    .pdf-info p {
        font-size: 12px;
    }

    .download-btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    #product-catalogue {
        min-height: 300px;
        padding: 15px 10px;
    }
}

@media (max-width: 480px) {
    .pdf-download-card {
        flex-direction: column;
        text-align: center;
        padding: 15px 10px;
    }

    .pdf-thumb {
        width: 72px;
        height: 72px;
        margin-bottom: 8px;
    }

    .pdf-info p {
        white-space: normal;
    }

    .download-btn {
        width: 100%;
    }
}