@font-face {
     font-family: 'IranSans';
     src: url('../font/iransans/IRANSansWeb.woff2') format('woff2');
     font-display: swap
 }

 :root {
     --primary: #0b5ed7;
     --text: #222;
     --muted: #666
 }

 html,
 body {
     height: 100%;
     font-family: 'IranSans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
     color: var(--text);
     margin: 0;
     background: #fff;
     line-height: 1.6
 }

 .container {
     display: flex;
     align-items: center;
     gap: 16px;
     padding: 12px 16px;
     max-width: 1100px;
     margin: 0 auto
 }

 .site-header {
     border-bottom: 1px solid #eee
 }

 .site-header .container {
     justify-content: flex-start
 }

 .logo {
     display: flex;
     align-items: center;
     gap: 12px
 }

 .site-nav {
     display: flex;
     flex-direction: row;
     gap: 12px;
     margin-inline-start: auto;
     position: static;
     width: auto;
     height: auto;
     background: transparent;
     box-shadow: none;
     padding: 0;
     z-index: 1;
     overflow: visible;
 }

 .site-nav.open {
     right: 0;
 }

 .site-nav a {
     display: block;
     padding: 12px 16px;
     font-size: 16px;
     text-align: right;
     border-radius: 6px;
 }

 .site-nav a:hover {
     background-color: #f5f5f5;
 }

 .site-nav a.active {
     background-color: var(--primary);
     color: white;
 }

 .nav-toggle {
     display: none;
     background: transparent;
     border: 0;
     font-size: 24px;
     padding: 12px;
     border-radius: 6px;
     margin-right: auto;
     order: -1;
     cursor: pointer;
     position: relative;
     z-index: 1101;
 }

 .nav-toggle:hover {
     background: #f0f0f0;
 }

 .nav-toggle:focus {
     outline: 3px solid #ffb703;
 }

 .nav-icon {
     margin-inline-start: 6px;
     margin-inline-end: 6px
 }

 .nav-text {
     vertical-align: middle
 }

 .about h2 i,
 .solutions h2 i {
     margin-left: 8px;
     color: #7aa2ff
 }

 .site-footer a i {
     margin-inline-end: 6px;
     color: #7aa2ff
 }

 .logo img {
     width: 160px;
     height: 128px;
     object-fit: contain
 }

 .site-brand {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-inline-start: 12px;
     color: var(--text)
 }

 .site-brand i {
     color: #7aa2ff;
     font-size: 20px
 }

 .site-brand span {
     font-weight: 700
 }

 .hero {
     position: relative;
     display: flex;
     align-items: center;
     gap: 24px;
     min-height: 48vh;
     padding: 48px 16px;
     overflow: hidden
 }

 .hero::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image: url('../image/hero.jpg');
     background-size: cover;
     background-position: center;
     filter: blur(4px) brightness(.6);
     transform: scale(1.05);
     z-index: 0
 }

 .hero::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(255, 255, 255, .0), rgba(255, 255, 255, .06));
     z-index: 1
 }

 .hero-content {
     position: relative;
     z-index: 2;
     max-width: 640px;
     color: #fff;
     text-align: left
 }

 .hero h1 {
     font-size: 2.2rem;
     margin: 0 0 8px
 }

 .hero p {
     color: rgba(255, 255, 255, .9)
 }

 .hero .btn {
     background: rgba(255, 255, 255, .15);
     border: 1px solid rgba(255, 255, 255, .2)
 }

 .gallery-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 12px
 }

 .gallery-grid img {
     width: 100%;
     height: 180px;
     object-fit: cover;
     border-radius: 6px
 }

 .gallery-card {
     display: block
 }

 .gallery-item {
     overflow: hidden;
     background: #fafafa;
     padding: 8px;
     border-radius: 6px
 }

 .gallery-grid img,
 .gallery-grid video {
     width: 100%;
     height: auto;
     display: block;
     max-width: 100%
 }

 .gallery-grid video {
     max-height: 480px;
     object-fit: cover;
     border-radius: 6px
 }

 #tab-videos .gallery-grid {
     grid-template-columns: 1fr
 }

 #tab-videos .gallery-item {
     padding: 6px
 }

 #tab-videos video {
     width: 100%;
     height: auto;
     max-height: 540px;
     object-fit: contain;
     border-radius: 6px
 }

 .gallery-caption {
     margin-top: 6px;
     font-size: .95rem;
     color: var(--muted)
 }

 .gallery-preview {
     padding: 20px 0
 }

 .gallery-section {
     max-width: 1100px;
     margin: 0 auto
 }

 @media (max-width:900px) {
     .gallery-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .hero {
         flex-direction: column
     }
 }

 /* Mobile styles */
 @media (max-width: 768px) {
     .site-nav {
         position: fixed;
         top: 0;
         right: -320px;
         width: 280px;
         height: 100%;
         background: #fff;
         box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
         padding: 20px;
         z-index: 1000;
         transition: right 0.3s ease-in-out;
         overflow-y: auto;
         flex-direction: column;
         align-items: stretch;
     }

     .site-nav.open {
         right: 0;
     }

     .nav-toggle {
         display: block;
     }

     .site-nav a {
         text-align: right;
         padding: 12px 16px;
     }
 }

 @media (max-width:600px) {
     .gallery-grid {
         grid-template-columns: repeat(1, 1fr)
     }

     .nav-toggle {
         display: block;
     }

     .site-nav {
         display: flex;
         padding-top: 60px;
         /* Space for close button */
     }

     /* Close button in mobile menu */
     .site-nav::before {
         content: '✕';
         position: absolute;
         top: 15px;
         left: 15px;
         font-size: 24px;
         cursor: pointer;
     }

     /* Adjust header for mobile */
     .site-header .container {
         padding: 8px 16px;
     }

     /* Make contact info more compact on mobile */
     .contact-info p {
         margin: 12px 0;
     }

     /* Adjust map container for mobile */
     .map-tabs-container {
         margin: 0 -16px;
     }

     .map-tab-pane iframe {
         min-height: 300px !important;
     }
 }

 @media (max-width: 768px) {
     .nav-toggle {
         display: block;
     }

     .site-nav {
         display: flex;
         padding-top: 60px;
         /* Space for close button */
     }

     /* Close button in mobile menu */
     .site-nav::before {
         content: '✕';
         position: absolute;
         top: 15px;
         left: 15px;
         font-size: 24px;
         cursor: pointer;
     }

     /* Adjust header for mobile */
     .site-header .container {
         padding: 8px 16px;
     }

     /* Make contact info more compact on mobile */
     .contact-info p {
         margin: 12px 0;
     }

     /* Adjust map container for mobile */
     .map-tabs-container {
         margin: 0 -16px;
     }

     .map-tab-pane iframe {
         min-height: 300px !important;
     }

     .solutions .card {
         flex-direction: column;
         align-items: flex-start
     }

     .solution-thumb {
         width: 100%;
         height: 200px
     }
 }

 .contact-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     align-items: start
 }

 .contact-map {
     background: #f5f5f5;
     border-radius: 6px;
     min-height: 200px;
     padding: 8px
 }

 .contact-info p {
     margin: 6px 0
 }

 .contact-section .btn {
     margin-top: 12px
 }

 .site-footer {
     border-top: 1px solid #eee;
     padding: 24px 16px;
     margin-top: 32px
 }

 .site-footer .container {
     justify-content: space-between
 }

 [role="tablist"] {
     display: flex;
     justify-content: center;
     margin: 8px 0
 }

 .tabs {
     display: flex;
     gap: 8px;
     margin: 16px 0
 }

 [role="tab"] {
     padding: 10px 16px;
     border-radius: 999px;
     background: linear-gradient(180deg, #fff, #f3f6ff);
     border: 1px solid #e6e9f8;
     cursor: pointer
 }

 [role="tab"]:focus {
     outline: 3px solid #7aa2ff
 }

 [role="tab"][aria-selected="true"] {
     background: var(--primary);
     color: #fff;
     border-color: var(--primary)
 }

 [role="tab"][aria-selected="true"] {
     background: var(--primary);
     color: #fff
 }

 :focus {
     outline: 3px solid #ffb703;
     outline-offset: 2px
 }

 .map-placeholder {
     padding: 12px;
     background: #fffbe6;
     border: 1px solid #ffecb3;
     border-radius: 6px
 }

 .btn {
     display: inline-block;
     padding: 8px 14px;
     background: var(--primary);
     color: #fff;
     border-radius: 6px;
     text-decoration: none
 }

 .view-all {
     text-align: center;
     margin-top: 12px
 }

 .section-card {
     background: #fff;
     border-radius: 12px;
     padding: 20px;
     margin: 18px auto;
     box-shadow: 0 6px 18px rgba(20, 20, 40, .06);
     max-width: 1100px
 }

 .media-lightbox {
     position: fixed;
     inset: 0;
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 9999;
     pointer-events: none
 }

 .media-lightbox.open {
     display: flex
 }

 .media-lightbox-backdrop {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, .75);
     pointer-events: auto
 }

 .media-lightbox-panel {
     position: relative;
     max-width: 95vw;
     max-height: 90vh;
     z-index: 10000;
     display: flex;
     align-items: center;
     justify-content: center
 }

 .media-lightbox-figure {
     margin: 0
 }

 .media-lightbox-img {
     max-width: 100%;
     max-height: 80vh;
     object-fit: contain;
     border-radius: 6px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, .6)
 }

 .media-lightbox-caption {
     color: #fff;
     margin-top: 8px;
     text-align: center;
     font-size: .95rem
 }

 .media-lightbox-close {
     position: absolute;
     top: -8px;
     left: -8px;
     z-index: 10001;
     background: rgba(255, 255, 255, .1);
     color: #fff;
     border: 0;
     padding: 8px 10px;
     border-radius: 6px;
     cursor: pointer
 }

 .section-card .container {
     flex-direction: row
 }

 .section-card .content-center {
     max-width: 900px;
     margin: 0 auto;
     text-align: center
 }

 .card {
     background: #fff;
     border-radius: 10px;
     padding: 18px;
     box-shadow: 0 4px 12px rgba(15, 20, 40, .04);
     margin: 12px auto;
     max-width: 880px
 }

 .video-card video {
     max-width: 880px;
     width: 100%;
     height: auto;
     border-radius: 8px
 }

 .video-card,
 .video-card * {
     pointer-events: auto
 }

 .video-card video {
     position: relative;
     z-index: 2
 }

 .gallery-grid .gallery-item img {
     height: 220px
 }

 .about.section-card {
     background: linear-gradient(180deg, #ffffff, #fcfcff);
     padding: 36px
 }

 .about .content-center {
     max-width: 760px;
     text-align: right
 }

 .about h1 {
     font-size: 2.2rem;
     margin-bottom: 6px;
     color: #0b3a66
 }

 .about h2 {
     font-size: 1.05rem;
     margin-top: 18px;
     color: #0b3a66
 }

 .about .card {
     background: linear-gradient(180deg, #fff, #fbfbff);
     border-left: 6px solid #7aa2ff;
     padding: 18px
 }

 .about p {
     color: #333;
     line-height: 1.8
 }

 .about ul {
     list-style: none;
     padding: 0;
     margin: 8px 0
 }

 .about ul li {
     position: relative;
     padding-right: 28px;
     margin: 8px 0
 }

 .about ul li:before {
     content: '•';
     position: absolute;
     right: 0;
     color: #7aa2ff;
     font-weight: 700
 }

 .about .contact-info a {
     color: var(--primary);
     text-decoration: none
 }

 .about .contact-info a:hover {
     text-decoration: underline
 }

 .about .card+.card {
     margin-top: 18px
 }

 .solutions.section-card,
 .contact-page.section-card {
     background: linear-gradient(180deg, #ffffff, #fcfcff);
     padding: 32px
 }

 .solutions .content-center,
 .contact-page .content-center {
     max-width: 760px;
     text-align: right
 }

 .solutions h1,
 .contact-page h1 {
     font-size: 2.0;
     margin-bottom: 6px;
     color: #0b3a66
 }

 .solutions .card,
 .contact-page .card {
     background: linear-gradient(180deg, #fff, #fbfbff);
     border-left: 6px solid #7aa2ff;
     padding: 18px
 }

 .solutions .card h2,
 .contact-page .card h2 {
     color: #0b3a66
 }

 .solutions .card h2::before {
     font-family: 'Font Awesome 7 Free';
     font-weight: 700;
     content: "\f2f1";
     display: inline-block;
     margin-left: 10px;
     color: #7aa2ff
 }

 .contact-info p {
     display: flex;
     align-items: center;
     gap: 10px;
     justify-content: flex-start
 }

 .contact-info i {
     color: #0b66b2;
     font-size: 18px;
     min-width: 22px;
     text-align: center
 }

 .contact-page form {
     display: block;
     margin-top: 16px
 }

 .contact-page input[type="text"],
 .contact-page input[type="email"],
 .contact-page textarea {
     width: 100%;
     padding: 10px;
     border: 1px solid #e6e9f8;
     border-radius: 8px;
     margin-top: 6px;
     background: #fff
 }

 .contact-page button.btn {
     margin-top: 10px
 }

 .fa,
 .fas,
 .far,
 .fal,
 .fab,
 .fa-solid {
     font-style: normal;
     display: inline-block
 }

 .solutions-cover-wrap {
     display: flex;
     justify-content: center;
     margin: 16px 0
 }

 .solutions-cover {
     width: 100%;
     max-width: 980px;
     height: 300px;
     object-fit: cover;
     border-radius: 10px;
     box-shadow: 0 6px 20px rgba(10, 20, 40, .06)
 }

 .solutions-cover[data-missing="true"] {
     background: #f5f7ff;
     display: block
 }

 .solution-thumb {
     width: 220px;
     height: 140px;
     object-fit: cover;
     border-radius: 8px;
     margin-bottom: 8px
 }

 .solutions .card {
     display: flex;
     gap: 16px;
     align-items: center
 }

 .solutions .card p {
     flex: 1
 }

 .solutions-cta {
     display: block;
     text-align: center;
     background: #e9f1ff;
     color: #0b3a66;
     padding: 12px;
     border-radius: 8px;
     margin: 12px 0;
     font-weight: 600
 }

 .hero .section-card {
     text-align: right;
     background: transparent;
     box-shadow: none;
     padding: 0
 }

 .hero .section-card h1,
 .hero .section-card p {
     color: #fff
 }

 .contact-info,
 .contact-page .card {
     font-family: 'IranSans', 'Segoe UI', Tahoma, Arial;
     font-size: 1rem
 }

 .force_left_right {
     direction: ltr;
 }

 .about-preview .about-card {
     text-align: right;
     max-width: 760px;
     margin: 0 auto
 }

 .about-preview .about-card h2 {
     font-size: 1.2rem;
     color: #0b3a66;
     display: flex;
     align-items: center;
     gap: 8px;
     justify-content: flex-start
 }

 .about-preview .about-card p {
     color: #333
 }

 .about-preview .about-card i {
     color: #7aa2ff;
     margin-left: 8px;
     font-family: 'Font Awesome 7 Free';
     font-weight: 900;
     font-size: 20px
 }

 .about-preview .about-card h2::before {
     font-family: 'Font Awesome 7 Free';
     font-weight: 900;
     content: "\f05a";
     margin-left: 8px;
     color: #7aa2ff
 }

 .about-preview .about-card .btn {
     background: var(--primary);
     color: #fff
 }

 .gallery-preview h2 i,
 .video-section h2 i,
 .contact-section h2 i {
     color: #7aa2ff;
     margin-left: 8px;
     font-family: 'Font Awesome 7 Free';
     font-weight: 900
 }