@import url(fontiran.css);

 h1 {
     font-weight: bold;
}
 body {
     direction: rtl;
}
 body {
     font-family: IRANSansMedium  !important;
}
 h1, h2, h3, h4, h5, h6,input, textarea {
     font-family: IRANSansBold !important;
}
 .nav {
     position: sticky;
     top: 0;
     z-index: 50;
     background: white;
     backdrop-filter: blur(10px);
     border-bottom: 1px solid var(--border);
}
 .nav__row {
     height: var(--h);
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     border-bottom: 1px solid #e2e2e2;
     padding-bottom: 5px;
     margin-left: 15px;
     margin-right: 15px;
     padding-top: 5px;
}
 .brand {
     display: flex;
     align-items: center;
     gap: 10px;
     min-width: max-content 
}
 .brand__logo {
     width: 5px;
     height: 5px;
     border-radius: 12px;
     background: linear-gradient(135deg, var(--accent), #a78bfa);
     box-shadow: var(--shadow);
}
 .brand__name {
     font-weight: 800;
     line-height: 1.1;
     display: none;
}
 .brand__name small {
     display: block;
     color: var(--muted);
     font-size: 12px;
     margin-top: 3px 
}
/* DESKTOP MENU */
 .menu {
     display: flex;
     align-items: center;
     gap: 4px;
     margin-bottom: 0px;
     margin-right: 12px;
     padding: 0 
}
 .menu > li {
     list-style: none;
     position: relative 
}
 .menu > li > a, .menu > li > button {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 10px 12px;
     border-radius: 10px;
     background: transparent;
     border: 0;
     color: var(--text);
     cursor: pointer;
     transition: .2s ease;
     font: inherit;
     white-space: nowrap;
     text-decoration: unset;
}
 .menu > li > a:hover, .menu > li > button:hover {
     background: rgba(255, 255, 255, .08) 
}
 .caret {
     width: 0;
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
     border-top: 6px solid rgba(229, 231, 235, .9);
     transform: translateY(1px);
}
/* Desktop dropdown */
 .dropdown {
     position: absolute;
     top: calc(100% + 10px);
     right: 0;
     min-width: 220px;
     background: rgb(249 249 249);
     box-shadow: var(--shadow);
     padding: 8px;
     opacity: 0;
     visibility: hidden;
     transform: translateY(-6px);
     transition: .18s ease;
     border-radius: 15px;
     border: 2px solid #DCDCDC;
}
 .dropdown a {
     display: flex;
     padding: 8px 10px;
     border-bottom: 1px solid #eeee;
     background: rgba(255, 255, 255, .04);
     margin: 0;
     transition: .2s ease;
     color: black;
     text-decoration: unset;
}
 .dropdown a:hover {
     background: rgba(255, 255, 255, .08) 
}
 .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
}
/* CTA */
 .cta {
     display: flex;
     align-items: center;
     min-width: max-content;
}
 .btn-menus {
     height: 40px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 0 14px;
     border-radius: 12px;
     border: 1px solid var(--border);
     background: rgba(255, 255, 255, .06);
     transition: .2s ease;
     white-space: nowrap;
}
 .btn-menus:hover {
     background: rgba(255, 255, 255, .10) 
}
 .btn-menus.primary {
     border-color: rgba(56, 189, 248, .35);
     background: rgba(56, 189, 248, .18);
}
/* ===== MOBILE DRAWER (CSS only) ===== */
 #nav-toggle {
     position: absolute;
     opacity: 0;
     pointer-events: none 
}
 .hamburger {
     display: none;
     width: 44px;
     height: 44px;
     border-radius: 12px;
     border: 1px solid var(--border);
     background: rgba(255, 255, 255, .06);
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: .2s ease;
}
 .hamburger:hover {
     background: rgba(255, 255, 255, .10) 
}
 .hamburger span {
     width: 18px;
     height: 2px;
     background: #4f4f4f;
     border-radius: 2px;
     position: relative;
     display: block;
}
 .hamburger span::before, .hamburger span::after {
     content: "";
     position: absolute;
     left: 0;
     width: 18px;
     height: 2px;
     background: #4f4f4f;
     border-radius: 2px;
     transition: .2s ease;
}
 .hamburger span::before {
     top: -6px 
}
 .hamburger span::after {
     top: 6px 
}
 .overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .45);
     opacity: 0;
     visibility: hidden;
     transition: .2s ease;
     z-index: 60;
}
 .drawer {
     position: fixed;
     top: 0;
     right: 0;
     width: 100%;
     height: 100vh;
     background: white;
     border-left: 1px solid var(--border);
     box-shadow: var(--shadow);
     transform: translateX(110%);
     transition: .25s ease;
     display: flex;
     flex-direction: column;
     z-index: 6999999999999999999;
}
/* Open state */
 #nav-toggle:checked ~ .overlay {
     opacity: 1;
     visibility: visible;
}
 #nav-toggle:checked ~ .drawer {
     transform: translateX(0);
}
 .drawer__top {
     height: var(--h);
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 10px;
     border-bottom: 1px solid var(--border);
}
 .close-btn {
     width: 44px;
     height: 44px;
     border-radius: 12px;
     border: 1px solid rgb(63 48 48 / 14%);
     background: rgb(12 10 10 / 6%);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: .2s ease;
     margin-top: 5px;
}
 .close-btn:hover {
     background: rgba(255, 255, 255, .10) 
}
 .x {
     width: 18px;
     height: 18px;
     position: relative;
}
 .x::before, .x::after {
     content: "";
     position: absolute;
     inset: 0;
     margin: auto;
     width: 18px;
     height: 2px;
     background: #4f4f4f;
     border-radius: 2px;
}
 .x::before {
     transform: rotate(45deg) 
}
 .x::after {
     transform: rotate(-45deg) 
}
 .drawer__body {
     overflow: auto;
}
 .m-item {
     border: 1px solid rgba(255, 255, 255, .10);
     border-radius: 14px;
     overflow: hidden;
     background: rgba(255, 255, 255, .03);
     margin-bottom: 8px;
     margin-right: 5px;
}
 .m-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     padding: 5px;
}
 .m-top a {
     flex: 1;
     color: black;
     text-decoration: unset;
}
/* Mobile accordion */
 .m-sub-toggle {
     position: absolute;
     opacity: 0;
     pointer-events: none;
}
 .m-sub-btn {
     width: 44px;
     height: 36px;
     border-radius: 12px;
     border: 1px solid rgba(255, 255, 255, .12);
     background: rgba(255, 255, 255, .04);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: .2s ease;
     flex: 0 0 auto;
}
 .m-sub-btn:hover {
     background: rgba(255, 255, 255, .08) 
}
 .m-sub-caret {
     width: 0;
     height: 0;
     border-left: 6px solid transparent;
     border-right: 6px solid transparent;
     border-top: 7px solid rgba(229, 231, 235, .9);
     transition: .2s ease;
}
 .m-sub {
     max-height: 0;
     overflow: hidden;
     transition: max-height .25s ease;
     padding: 0 12px;
}
 .m-sub a {
     display: block;
     padding: 5px 10px;
     margin: 0;
     border-right: 1px solid #DCDCDC;
     color: black;
     text-decoration: unset;
}
 .m-sub a:hover {
     background: rgba(255, 255, 255, .08) 
}
/* IMPORTANT: input and .m-sub must be siblings inside .m-item */
 .m-sub-toggle:checked ~ .m-sub {
     max-height: 420px 
}
 .m-sub-toggle:checked ~ .m-top .m-sub-caret {
     transform: rotate(180deg) 
}
 .drawer__actions {
     padding: 12px;
     border-top: 1px solid var(--border);
     display: flex;
     gap: 10px;
}
 .drawer__actions .btn-menus {
     width: 100% 
}
 #profile-svg {
     display: none;
}
 @media (max-width: 860px) {
     .brand__name_site {
         display: none 
    }
     .brand__name {
         display: block;
    }
     .nav__row {
         justify-content: space-between;
         margin: 0;
         padding: 0;
    }
     #profile-svg {
         display: block;
    }
     .menu, .cta {
         display: none 
    }
     .hamburger {
         display: inline-flex 
    }
     .my-container-mobile {
         margin: 0;
         padding: 0;
    }
}
 main {
     padding: 26px 16px 
}
 .box {
     border: 1px solid var(--border);
     border-radius: var(--r);
     background: rgba(255, 255, 255, .03);
     padding: 18px;
     color: var(--muted);
     line-height: 1.9;
     max-width: var(--max);
     margin: 0 auto;
}
 .title-kamion {
     font-weight: 700;
     font-family: IRANSansX-Bold, serif;
     font-size: 32px;
}
 .sub-title-kamion {
     font-weight: 400;
     max-width: 650px;
     font-size: 16px;
}
 .download-area {
     direction: ltr;
}
 .download-area li {
     display: inline;
     direction: rtl;
     list-style: none;
}
 .text-area li {
     text-align: right;
     background: #F9F9F9;
     padding: 5px;
     border-radius: 8px;
     margin-top: 5px;
}
 ::marker {
     color: #1c39bb;
}
 .background-panel-area {
     background: #F9F9F9;
     border-radius: 10px;
}
 .download-link {
     background: black;
     padding: 10px 17px;
     border-radius: 50px;
     color: white;
}
 .d-block-custom {
     display: none;
}
 .p-custom-4 {
     padding: 1.5rem !important;
}
 .center-custom {
     display: flex;
     align-items: center;
     flex-direction: column;
     justify-content: center;
}
 @media (max-width: 860px) {
     .center-custom {
         display: block;
    }
     .download-link {
         display: block;
         text-align: center;
    }
     .download-area {
         padding-left: 0 !important;
    }
     .p-custom-4 {
         padding: 0 !important;
    }
     .download-area li a img{
         margin-bottom: 5px;
    }
     .d-none-custom {
         display: none !important;
    }
     .d-block-custom {
         display: block !important;
    }
}

.faq-section {
            margin: 50px auto;
        }

        .faq-title {
            text-align: center;
            margin-bottom: 30px;
            font-size: 24px;
            font-weight: bold;
        }

        .faq-item {
            border-bottom: 1px solid #e5e5e5;
            margin-bottom: 10px;
        }

        .faq-question {
            width: 100%;
            background: none;
            border: none;
            outline: none;
            text-align: right;
            padding: 15px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .faq-question:hover {
            color: #1c39bb;
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            padding: 0 15px;
        }

        .faq-answer p {
            margin: 10px 0 15px;
            line-height: 1.8;
            color: #555;
        }

        .icon {
            font-size: 20px;
            transition: transform 0.3s ease;
        }