body {
    font-family: iranyekan ;
    background-color: #30485d;
    margin: 0;
    padding: 0;
    /*background: linear-gradient(to bottom, rgb(207 207 207) 0%, rgb(51 74 95) 71%, rgb(45 75 104) 100%) fixed;*/
}

/* Global bidirectional text handling for mixed Persian-English content */
p, h1, h2, h3, h4, h5, h6, li, a, span, div {
    unicode-bidi: plaintext;
}

/*========================================================================
  RESPONSIVE TYPOGRAPHY SYSTEM
  Implements fluid typography scaling across breakpoints
  Based on 1.25 scale ratio (Major Third) for harmonious hierarchy
========================================================================*/

/* Base Typography - Mobile First (<768px) */
body {
    font-size: 15px; /* Base 14-16px range */
    line-height: 1.7;
}

h1 {
    font-size: 1.625rem; /* ~26px, range: 1.5-1.75rem */
    line-height: 1.3;
    margin: 0.5rem 0;
}

h2 {
    font-size: 1.3rem; /* ~21px, range: 1.2-1.4rem */
    line-height: 1.35;
    margin: 0.4rem 0;
}

h3 {
    font-size: 1.063rem; /* ~17px, range: 1-1.125rem */
    line-height: 1.4;
    margin: 0.3rem 0;
}

h4 {
    font-size: 0.95rem; /* ~15px, range: 0.9-1rem */
    line-height: 1.4;
    margin: 0.25rem 0;
}

h5 {
    font-size: 0.875rem; /* ~14px */
    line-height: 1.4;
    margin: 0.2rem 0;
}

h6 {
    font-size: 0.813rem; /* ~13px */
    line-height: 1.4;
    margin: 0.2rem 0;
}

p {
    font-size: 0.938rem; /* ~15px, range: 0.875-1rem */
    line-height: 1.7;
    margin: 0.5rem 0;
}

/* Tablet Typography (768px - 991px) */
@media (min-width: 768px) {
    body {
        font-size: 16px; /* Base 15-17px range */
        line-height: 1.7;
    }

    h1 {
        font-size: 1.875rem; /* ~30px, range: 1.75-2rem */
        line-height: 1.3;
        margin: 0.6rem 0;
    }

    h2 {
        font-size: 1.5rem; /* ~24px, range: 1.4-1.6rem */
        line-height: 1.35;
        margin: 0.5rem 0;
    }

    h3 {
        font-size: 1.188rem; /* ~19px, range: 1.125-1.25rem */
        line-height: 1.4;
        margin: 0.4rem 0;
    }

    h4 {
        font-size: 1.063rem; /* ~17px, range: 1-1.125rem */
        line-height: 1.4;
        margin: 0.3rem 0;
    }

    h5 {
        font-size: 0.938rem; /* ~15px */
        line-height: 1.4;
        margin: 0.25rem 0;
    }

    h6 {
        font-size: 0.875rem; /* ~14px */
        line-height: 1.4;
        margin: 0.25rem 0;
    }

    p {
        font-size: 1rem; /* ~16px, range: 0.95-1.05rem */
        line-height: 1.7;
        margin: 0.6rem 0;
    }
}

/* Desktop Typography (≥992px) */
@media (min-width: 992px) {
    body {
        font-size: 17px; /* Base 16-18px range */
        line-height: 1.7;
    }

    h1 {
        font-size: 2.25rem; /* ~38px, range: 2-2.5rem */
        line-height: 1.25;
        margin: 0.75rem 0;
    }

    h2 {
        font-size: 1.8rem; /* ~31px, range: 1.6-2rem */
        line-height: 1.3;
        margin: 0.6rem 0;
    }

    h3 {
        font-size: 1.375rem; /* ~23px, range: 1.25-1.5rem */
        line-height: 1.35;
        margin: 0.5rem 0;
    }

    h4 {
        font-size: 1.125rem; /* ~19px, range: 1.125-1.25rem */
        line-height: 1.4;
        margin: 0.4rem 0;
    }

    h5 {
        font-size: 1rem; /* ~17px */
        line-height: 1.4;
        margin: 0.3rem 0;
    }

    h6 {
        font-size: 0.938rem; /* ~16px */
        line-height: 1.4;
        margin: 0.3rem 0;
    }

    p {
        font-size: 1.063rem; /* ~18px, range: 1-1.125rem */
        line-height: 1.7;
        margin: 0.75rem 0;
    }
}

/* Extra Large Desktop Typography (≥1600px) - For better readability on large screens */
@media (min-width: 1600px) {
    body {
        font-size: 18px; /* Slightly larger for big screens */
        line-height: 1.75;
    }

    h1 {
        font-size: 2.5rem; /* ~45px */
        line-height: 1.2;
        margin: 1rem 0;
    }

    h2 {
        font-size: 2rem; /* ~36px */
        line-height: 1.3;
        margin: 0.75rem 0;
    }

    h3 {
        font-size: 1.5rem; /* ~27px */
        line-height: 1.35;
        margin: 0.6rem 0;
    }

    p {
        font-size: 1.125rem; /* ~20px */
        line-height: 1.75;
        margin: 1rem 0;
    }
}

/* Persian Font Adjustments - Slightly larger for better readability */
body[dir="rtl"] h1,
body[dir="rtl"] h2,
body[dir="rtl"] h3 {
    font-size: 1.05em; /* 5% larger than base */
    line-height: 1.5; /* Increased for diacritic spacing */
}

body[dir="rtl"] p,
body[dir="rtl"] li {
    line-height: 1.8; /* Increased for Persian text */
}

/*========================================================================
  END RESPONSIVE TYPOGRAPHY SYSTEM
========================================================================*/

.navbar {
    background-color: rgba(34, 51, 142, 0.17);
    border-bottom: 1px solid rgba(150, 155, 183, 0.55);
    transition: all 0.313s;
    padding: 0.5rem 14px; /* Mobile: 0.5-1rem padding */
    flex-flow: row-reverse nowrap;
    min-height: 60px; /* Mobile: 60-70px */
}

/* Tablet navbar (768px-991px) */
@media (min-width: 768px) {
    .navbar {
        padding: 0.75rem 14px;
        min-height: 65px;
    }
}

/* Desktop navbar (≥992px) */
@media (min-width: 992px) {
    .navbar {
        padding: 1rem 14px; /* Desktop: 1-1.5rem padding */
        min-height: 70px; /* Desktop: 70-90px */
    }
}

.mr-auto {
    margin-right: 1px !important;
}

@media (min-width: 768px) {
    .navbar-expand-md {
        flex-flow: row-reverse nowrap;
    }
}

@media (max-width: 768px) {

    .orderlast {
        -webkit-box-ordinal-group: 14;
        -ms-flex-order: 13;
        order: 13
    }

    .orderfirst {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1
    }
}

.navbar-light .navbar-nav .nav-link {
    color: #fff;
    font-size: 15px; /* Slightly smaller for mobile */
    padding: 12px 20px; /* Mobile: min 44px height for touch targets */
    min-height: 44px;
}

/* Tablet nav links */
@media (min-width: 768px) {
    .navbar-light .navbar-nav .nav-link {
        font-size: 15.5px;
        padding: 12px 18px;
    }
}

/* Desktop nav links */
@media (min-width: 992px) {
    .navbar-light .navbar-nav .nav-link {
        font-size: 16px; /* Original size */
        padding: 10px 14px; /* Desktop: 10-14px vertical, 12-20px horizontal */
    }
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: #f8a000;
}

.navbar-light .navbar-brand {
    color: #01579B;
    position: relative;
}

.navbar-light .navbar-brand img {
    width: 50px; /* Mobile: smaller navbar logo */
    transition: all 0.413s;
}

/* Tablet navbar logo */
@media (min-width: 768px) {
    .navbar-light .navbar-brand img {
        width: 55px;
    }
}

/* Desktop navbar logo */
@media (min-width: 992px) {
    .navbar-light .navbar-brand img {
        width: 61px; /* Original size */
    }
}

.navbar-expand-md .navbar-nav .nav-link {
    padding: 10px;
}

.fillBackGround-nav {
    transition: all 0.313s;
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 71%, rgba(225,245,254,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(71%, rgba(255,255,255,1)), color-stop(100%, rgba(225,245,254,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 71%, rgba(225,245,254,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 71%, rgba(225,245,254,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 71%, rgba(225,245,254,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 71%, rgba(225,245,254,1) 100%);
    border-bottom: 1px solid #bbdcea;
    box-shadow: 0 0 15px #dcdcdc;
}

.fillBackGround-nav .navbar-brand img {
    width: 61px;
}

.fillBackGround-nav .navbar-nav .nav-link {
    color: #113332;
}

.no-shadow {
    box-shadow: none !important;
}

.navbar-brand {
    margin-left: 0px;
    margin-right: 0rem;
}

.font-cellnam {
    font-family: CellNama !important;
    line-height: 0;
}

.navbar-nav .nav-item + .nav-item {
    margin-right: 1rem;
    margin-right: 14px;
}

.dropdown-menu {
    background-color: #fff;
    width: 245px;
    top: 80%;
}

.dropdown-menu:hover {
    background-color: #eaeaef;
    color: #fff;
}

/*------------------------------------------------------------------Footer-----------------------------------------------------------------*/

#footer {
    background-color: #10161d;
    padding-bottom: 1px;
    padding-top: 25px;
}

#footer .footer-box {
    max-width: 340px;
    margin: auto;
    text-align: right
}

#footer h4 {
    color: #fff;
    font-size: 18px;
}

#footer ul {
    color: #ccc;
    list-style: none;
    margin-top: 30px;
    padding-right: 0;
    font-size: 16px;
}

#footer ul li {
    padding: 12px 0;
}

#footer ul li a {
    color: #ccc;
}

#footer p {
    padding: 14px 12px 12px;
    text-align: center;
    color: #eb880e;
    font-size: 15px;
}

.dropdown-item {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 243px;
    white-space: nowrap;
    font-size: 16px;
}

@media (max-width: 768px) {
    .navbar {
        -ms-align-items: flex-start;
        -o-align-items: flex-start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
        transition: all 0.313s;
        background: rgba(255,255,255,1);
        background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 71%, rgba(225,245,254,1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(71%, rgba(255,255,255,1)), color-stop(100%, rgba(225,245,254,1)));
        background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 71%, rgba(225,245,254,1) 100%);
        background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 71%, rgba(225,245,254,1) 100%);
        background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 71%, rgba(225,245,254,1) 100%);
        background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 71%, rgba(225,245,254,1) 100%);
        border-bottom: 1px solid #bbdcea;
        box-shadow: 0 0 15px #dcdcdc;
    }

    .navbar-toggler {
        font-size: 1.7rem;
        margin-top: 0.5rem;
        -o-order: 1;
        -webkit-order: 1;
        order: 1;
    }

    .navbar-nav {
        padding-top: 7rem;
        font-size: 15px;
        padding-bottom: 2rem;
        padding-right: 0px;
        text-align: center;
        overflow-x: visible;
        max-width: 220px;
    }

    .navbar-nav li {
        padding: 6px 0;
    }

    .navbar-toggler-icon {
        width: 35px;
        height: 35px;
    }

    .navbar-light .navbar-brand img {
        width: 60px;
    }

    .dropdown-menu {
        background-color: #fff;
        width: auto;
        font-size: 12px;
        padding: 3px 0;
        text-align: center;
    }

    .dropdown-item {
        padding: 10px 0;
        width: 185px;
    }

    #footer ul {
        color: #ccc;
        list-style: none;
        margin-top: 30px;
        padding-right: 0;
        font-size: 14px;
    }

    #footer h4 {
        font-size: 18px;
    }

    .navbar-light .navbar-nav .nav-link {
        color: #111;
        font-size: 16px;
    }
}



/*--------------------------------------------------------Animation Effect-----------------------------------------------------------------------*/
.effect {
    visibility: hidden;
}

delay1 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

delay2 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

delay3 {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

.fade-in {
    visibility: visible;
    -webkit-animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.slide-in-bottom {
    visibility: visible;
    -webkit-animation: slide-in-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-in-up {
    visibility: visible;
    -webkit-animation: slide-in-up 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-up 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-up {
    0% {
        -webkit-transform: translateY(-80px);
        transform: translateY(-80px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-up {
    0% {
        -webkit-transform: translateY(-80px);
        transform: translateY(-80px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-in-right {
    visibility: visible;
    -webkit-animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-left {
    visibility: visible;
    -webkit-animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
    height: 60px;
    padding: 4px 0;
    transition: all 0.5s;
    z-index: 997;
    pointer-events: auto;
}

#header * {
    pointer-events: auto;
}

/* Prevent canvas elements (particle effects) from blocking clicks */
canvas {
    pointer-events: none !important;
}

/*#header.header-transparent {
        background: none;
        height: 80px;
        padding: 20px 0;
    }*/

#header.header-scrolled {
    background-color: #30485d !important;
    height: 60px !important;
    padding: 4px 0 !important;
}

#main {
    margin-top: 80px;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
.nav-menu, .nav-menu * {
    margin: 0;
    padding: 2px;
    list-style: none;
}

.nav-menu > ul > li {
    position: relative;
    white-space: nowrap;
    float: right;
}

.nav-menu a {
    font-weight: 400;
    display: block;
    position: relative;
    color: white;
    padding: 10px 10px;
    transition: 0.3s;
    font-size: 16px;
}

.nav-menu span {
    font-weight: 400;
    display: block;
    position: relative;
    color: white;
    padding: 10px 10px;
    transition: 0.3s;
    font-size: 16px;
}

.nav-menu span:hover, .nav-menu .active > span, .nav-menu li:hover > span {
    color: #a2cce3;
    text-decoration: none;
}
.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
    color: #a2cce3;
    text-decoration: none;
}

.nav-menu .drop-down ul {
    display: block;
    position: absolute;
    top: 100%;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    padding: 0px 0;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
    border-top: 5px solid #2296f3;
}

.nav-menu .drop-down:hover > ul {
    opacity: 1;
    visibility: visible;
}

.nav-menu .drop-down li {
    min-width: 180px;
    position: relative;
}

.nav-menu .drop-down ul a {
    text-align: right;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    color: #1c3745;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    /*border-bottom: 1px solid #f5f5f5;*/
}

.nav-menu .drop-down ul ul a {
    padding: 8px 20px;
}

.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {
    color: #68A4C4;
    background: #fff;
    padding-right: 25px;
}

.nav-menu .drop-down > span:after {
    content: "\ea99";
    font-family: IcoFont;
    padding-right: 5px;
}

.nav-menu .drop-down .drop-down ul {
    top: 0;
    right: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.nav-menu .drop-down .drop-down:hover > ul {
    opacity: 1;
    visibility: visible;
}

.nav-menu .drop-down .drop-down > a {
    padding-left: 35px;
}

.nav-menu .drop-down .drop-down > a:after {
    content: "\eaa0";
    font-family: IcoFont;
    position: absolute;
    left: 15px;
}

/*@media (max-width: 1366px) {*/
.nav-menu .drop-down .drop-down ul {
    width: fit-content;
}

.nav-menu .drop-down .drop-down > a:after {
    content: "\ea9d";
}
/*}*/

/* Mobile Navigation */
.mobile-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 9999;
    overflow-y: auto;
    right: -280px;
    width: 280px;
    padding-top: 18px;
    background: rgb(51 74 95);
    transition: 0.4s;
}

.mobile-nav * {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-nav a,
.mobile-nav span {
    font-size: 1.3rem;
    display: block;
    position: relative;
    color: #ddecf5;
    padding: 10px 20px;
    font-weight: 500;
}

.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a,
.mobile-nav span:hover, .mobile-nav .active > span, .mobile-nav li:hover > span {
    color: #a2cce3;
    text-decoration: none;
}

.mobile-nav .drop-down > a:after,
.mobile-nav .drop-down > span:after {
    content: "\ea99";
    font-family: IcoFont;
    padding-right: 10px;
    position: absolute;
    left: 15px;
}

.mobile-nav .active.drop-down > a:after,
.mobile-nav .active.drop-down > span:after {
    content: "\ea9d";
}

.mobile-nav .drop-down > a,
.mobile-nav .drop-down > span {
    padding-left: 35px;
    display: block;
    cursor: pointer;
}

.mobile-nav .drop-down ul {
    display: none;
    overflow: hidden;
}

.mobile-nav .drop-down li {
    padding-right: 20px;
}

.mobile-nav .active.drop-down,
.mobile-nav .active.drop-down > a,
.mobile-nav .active.drop-down > span {
    background: transparent;
}

.mobile-nav .logo-item {
    display: none !important;
}

.mobile-nav-toggle {
    margin: 10px 0px;
    position: fixed;
    right: 20px;
    /*top: 23px;*/
    z-index: 9998;
    border: 0;
    background: none;
    font-size: 24px;
    transition: all 0.4s;
    outline: none !important;
    line-height: 1;
    cursor: pointer;
    text-align: right;
    width: 32px;
    height: 40px;
}

.mobile-nav-toggle i {
    color: #fff;
}

.mobile-nav-overly {
    width: 100%;
    height: 100%;
    z-index: 9997;
    top: 0;
    left: 0;
    position: fixed;
    background: rgba(51, 74, 95, 0.75);
    overflow: hidden;
    display: none;
}

.mobile-nav-active {
    overflow: hidden;
}

.mobile-nav-active .mobile-nav {
    right: 0;
}

.mobile-nav-active .mobile-nav-toggle i {
    color: #fff;
}

/*//////////////////////////////////////////////////*/
/*.mobile-nav-toggle {
    cursor: pointer;
    display: block;
    position: absolute;
    top: 23px;
    width: 32px;
    height: 40px;
    text-indent: -9999em;
    z-index: 99;
    right: 40px;
    display: none;
}*/
.mobile-nav-toggle span,
.mobile-nav-toggle span:before,
.mobile-nav-toggle span:after {
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    background-color: #fefefe;
    display: block;
    position: absolute;
    width: 30px;
    height: 2px;
    left: 0;
}

    /*.background-header .main-nav .mobile-nav-toggle span,
.background-header .main-nav .mobile-nav-toggle span:before,
.background-header .main-nav .mobile-nav-toggle span:after {
    background-color: #1e1e1e;
}*/

.mobile-nav-toggle span:before,
.mobile-nav-toggle span:after {
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    background-color: #fefefe;
    display: block;
    position: absolute;
    width: 30px;
    height: 2px;
    left: 0;
    width: 75%;
}

    /*.mobile-nav-toggle span:before,
.background-header .main-nav .mobile-nav-toggle span:after {
    background-color: #1e1e1e;
}*/

.mobile-nav-toggle span:before,
.mobile-nav-toggle span:after {
    content: "";
}

.mobile-nav-toggle span {
    top: 16px;
}

.mobile-nav-toggle span:before {
    -moz-transform-origin: 33% 100%;
    -ms-transform-origin: 33% 100%;
    -webkit-transform-origin: 33% 100%;
    transform-origin: 33% 100%;
    top: -10px;
    z-index: 10;
}

.mobile-nav-toggle span:after {
    -moz-transform-origin: 33% 0;
    -ms-transform-origin: 33% 0;
    -webkit-transform-origin: 33% 0;
    transform-origin: 33% 0;
    top: 10px;
}

.mobile-nav-active .mobile-nav-toggle span,
.mobile-nav-active .mobile-nav-toggle span:before,
.mobile-nav-active .mobile-nav-toggle span:after {
    background-color: transparent;
    width: 100%;
}

.mobile-nav-active .mobile-nav-toggle {
    left: 20px !important;
    right: unset;
}

.mobile-nav-active .mobile-nav-toggle span:before {
    -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
    -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
    -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
    transform: translateY(6px) translateX(1px) rotate(45deg);
    background-color: #fefefe;
}

/*mobile-nav-active .mobile-nav-toggle span:before {
background-color: #1e1e1e;
}*/

.mobile-nav-active .mobile-nav-toggle span:after {
    -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
    -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
    -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
    transform: translateY(-6px) translateX(1px) rotate(-45deg);
    background-color: #fefefe;
}

/*.background-header .main-nav .mobile-nav-toggle.active span:after {
    background-color: #1e1e1e;
}*/

.header-btn {
    background: #88049a;
    padding: 20px 11px;
    min-width: 120px;
    position: relative;
    -moz-user-select: none;
    text-transform: capitalize;
    color: white !important;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 0;
    margin-bottom: 0;
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.4s linear;
    z-index: 1;
    border: 0;
    overflow: hidden;
    margin: 0;
}

.header-btn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ec0874;
    z-index: 1;
    border-radius: 5px;
    transition: transform 0.5s;
    transition-timing-function: ease;
    transition-timing-function: ease;
    transform-origin: 0 0;
    transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
    transform: scaleX(0);
}

.header-btn:hover::before {
    /*color: black;*/
    transform: scaleX(1);
    color: black !important;
    z-index: -1
}

.header-btn.focus, .btn:focus {
    outline: 0;
    box-shadow: none
}

@media (min-width: 992px) {
    .d-lg-block {
        display: flex !important;
    }
}

@media (min-width: 768px) {
    .hidemenu .col-md-9:not(:nth-child(2)) table tr:first-child {
        display: none;
    }
}
/*accordion*/
.accordion {
    text-align: center;
    background-color: #0d487d;
    color: #c1bcb1;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    outline: none;
    font-size: 22px;
    transition: 0.7s;
    border-radius: 5% 30% 5% 25%;
}

.active, .accordion:hover {
    background-color: #010d19;
}

.accordion:after {
    transition: 0.7s;
    content: "\eac8";
    font-family: IcoFont;
    color: #c1bcb1;
    font-weight: bold;
    float: left;
    margin-left: 5px;
    font-size: 25px;
    margin-top: -9px;
}

.accordion.active:after {
    transition: 0.7s;
    content: "\eac8";
    transform: rotate(180deg);
    font-family: IcoFont;
    float: left;
    margin-left: 5px;
    font-size: 25px;
    margin-top: -9px;
    color: #c1bcb1;
    font-weight: bold;
}

.panel {
    margin-top: 10px;
    text-align: -webkit-center;
    padding: 0 18px;
    background-color: transparent;
    overflow: hidden;
    transition: max-height 0.7s ease-out;
}

#applications .panel {
    max-height: 0;
}
/*////////more*/
a.hovermore:hover div.hovermove {
    width: 10px !important;
}

#attached {
    /*height: 100vh;*/
    /*padding: 150px 0px;*/
    /*background-image: linear-gradient(rgb(0 0 0 / 78%), rgb(0 0 0 / 8%)), url(../img/attached.jpg);*/
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.index {
    background-color: #010d1973;
    display: inline-block;
    width: 160px;
    height: 160px;
    border-top: 4px solid #ffffff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 0 10px 20px;
    position: relative;
    padding: 70px 20px 0;
    font-size: 20px;
    font-family: 'iransharp';
    color: #fbfbfb !important;
    vertical-align: top;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(168,168,168,0.5);
    -moz-box-shadow: 0px 0px 20px 0px rgba(168,168,168,0.5);
    box-shadow: 0px 0px 20px 0px rgba(168,168,168,0.5);
    box-sizing: border-box;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
}

@media (max-width: 768px) {
    .index {
        margin: 0 1px 7px;
    }
}

.index::before {
    content: "\ea5b";
    font-family: IcoFont;
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translate(-50%, 0);
    width: 22px;
    height: 22px;
}

.index:hover {
    border-top: 20px solid #ffffff
}
/*////////////////////////imgbold*/
.imgbold {
    padding-bottom: 10px;
}

.imgbold .background {
    margin-right: 0px;
    overflow: visible;
    z-index: 9;
    border-radius: 0;
}

.imgbold .background img {
    max-width: 100%;
    transition: all 0.3s ease-in-out;
}

.imgbold .background:hover img {
    transform: scale(1.1);
}

.imgbold > div {
    text-align: center;
}

.background::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 94%;
    height: 107%;
    transform: translate(-50%,-50%);
    background: transparent;
    background: radial-gradient(circle,hsl(0deg 0% 0% / 30%) 0,hsl(189deg 87% 32% / 10%) 30%,hsl(189deg 43% 29% / 0%) 70%);
    border-radius: 59%;
    z-index: 1;
}

#Product .col-md-4 {
    margin-top: 20px;
}

#Functionality ul li {
    padding-top: 16px;
}

#Functionality ul {
    margin-top: 16px;
}

.modal-dialog-full-width {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
}

.modal-content-full-width {
    height: auto !important;
    min-height: 100% !important;
    border-radius: 0 !important;
    background-color: #001c30 !important;
}

a.hovermore.focus, a.hovermore:focus, a.hovermore:hover {
    color: white !important;
    background-color: #007bff !important;
}

.modal-content-full-width button {
    position: sticky;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 18px;
    border-radius: 49%;
    font-size: 25px;
    padding: 17px 9px;
    background-color: #0a2344;
    border-radius: 50%;
    color: #b1c4cc;
    text-transform: uppercase;
    font-size: 25px;
    transition: 0.3s;
    cursor: pointer;
    border: 2px solid white;
}

.modal-content-full-width button:hover {
    background-color: #1171ec;
    color: white;
    border: 2px solid white;
}

.modal-content-full-width button:focus {
    background-color: #1171ec;
    color: white;
    border: 2px solid white;
}
/*pure css responsive infinite loop sliders*/

section.slide-option div.container {
    transition: all 0.3s ease;
}

section.slide-option div.container h1 {
    margin: 15px 0 0 0;
}

section.slide-option div.container h3 {
    margin: 0 0 25px 0;
}

@media (max-width: 992px) {
    section.slide-option {
        padding: 0 20px 0 20px;
    }
}

section.slide-option {
    margin: 0 0 50px 0;
    direction: ltr;
    display: flex;
    flex-flow: column;
    align-items: center;
}

section.slide-option .no-marg {
    margin: 0 0 0 0;
}

div.highway-slider {
    display: flex;
    justify-content: center;
    width: 100%;
}

div.highway-slider div.highway-barrier {
    overflow: hidden;
    /*position: relative;*/
}

div.highway-slider ul.highway-lane {
    display: flex;
    height: 100%;
}

div.highway-slider ul.highway-lane li.highway-car {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    color: #343434;
    margin: 0px 20px 0px 20px;
}

div.highway-slider ul.highway-lane li.highway-car img {
    width: 100%;
}

@-webkit-keyframes translateinfinite {
    100% {
        transform: translateX(calc(-140px * 9));
    }
}

@keyframes translateinfinite {
    100% {
        transform: translateX(calc(-140px * 9));
    }
}

#infinite1 div.highway-barrier {
    background: transparent;
    box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.3);
}



#infinite1 div.highway-barrier::before {
    top: 0;
    left: 0;
    background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

#infinite1 div.highway-barrier::after {
    top: 0;
    right: 0;
    background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

#infinite1 div.highway-barrier ul.highway-lane {
    width: calc(142px * 18);
}

#infinite1 div.highway-barrier ul.highway-lane li.highway-car {
    width: 140px;
    -webkit-animation: translateinfinite 15s linear infinite;
    animation: translateinfinite 15s linear infinite;
}

#infinite1 div.highway-barrier ul.highway-lane li.highway-car span.fab {
    font-size: 65px;
}

/* ========== Navbar with SVG Decorations ========== */
.navbar-with-decorations {
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1045 79'%3E%3Cpath d='M-87 0H1045C1035 0.195056 1025 3.70106 1015 9.72779C1005 16.2397 998 25.6924 996 35.5202C995.9 37.2432 995.8 38.9687 995.7 40.6917L995.6 40.6716C995.5 37.5608 995.3 34.4524 995.2 31.344L995.1 31.334C995.2 36.1328 994 40.8992 992 45.4355C988 55.0333 980 63.5257 970 69.3274C960 74.6014 950 77.5447 940 78.0223H105C90 77.7748 75 72.7358 65 64.2084C56 57.549 50 48.844 48 39.5138C47.8 38.586 47.2 37.7333 47.3 36.7805C46.6 25.3072 39 14.2241 28 7.47464C20 2.85082 10 0.240069 -87 0Z' fill='%2330485d'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
}

/* Logo and image in navbar */
.logo-item,
.image-item {
    max-width: 100px !important;
    display: inline-block !important;
}

.logo-item img,
.image-item img {
    max-height: 35px !important;
    max-width: 100px !important;
    height: auto !important;
    width: auto !important;
    vertical-align: middle !important;
    object-fit: contain !important;
}

.logo-item a,
.image-item a {
    padding: 8px 10px !important;
    display: inline-block !important;
    max-width: 100px !important;
}

/* Navbar Decoration SVGs */
/* Navbar decorations removed - using SVG background instead */
.navbar-decoration-left,
.navbar-decoration-right {
    display: none;
}

/* Ensure navbar stays fixed during slider transitions */
#header {
    z-index: 9999;
}

/* Navbar hover color update */
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: #eb880e !important;
}

/* Responsive navbar decorations */
@media (max-width: 768px) {
    /* Navbar decorations removed */
}

/* Ensure navbar stays fixed at top - Override any conflicting styles */
#header.fixed-top {
    position: fixed !important;
    z-index: 9999 !important;
}

#header.navbar-with-decorations {
    position: fixed !important;
    border-radius: 200px 200px 0 0;
}

/* Mobile top bar styling */
.mobile-top-bar {
    display: none;
}

/* Ensure desktop navbar works properly above 992px */
@media (min-width: 993px) {
    .navbar-with-decorations {
        top: 20px !important;
        left: 20px !important;
        right: 20px !important;
    }

    html, body {
        overflow: visible !important;
        height: auto !important;
    }
}

@media (max-width: 992px) {
    /* Disable scrolling and fix body */
    html, body {
        height: 100vh;
    }

    /* Hide SVG background when navbar collapses */
    .navbar-with-decorations {
        background-image: none !important;
        background-color: transparent !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        z-index: 99999 !important;
    }

    /* Show mobile top bar */
    .mobile-top-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background-color: #010d19 !important;
        padding: 15px 20px;
        width: 100%;
        border-radius: 0;
    }

    /* Mobile toggle button */
    .mobile-nav-toggle {
        position: absolute;
        right: 20px;
        background: none;
        border: none;
        color: #eb880e;
        font-size: 32px;
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }

        .mobile-nav-toggle i {
            font-size: 32px;
        }

    /* Mobile logo centered */
    .mobile-logo {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .mobile-logo img {
            max-height: 40px;
            height: auto;
        }

    /* Hide desktop navbar container on mobile */
    #header .FixContainer {
        display: none;
    }
}