:root {
    --default-font: "IRANSans", tahoma;
    --heading-font: "IRANSans", tahoma;
    --nav-font: "IRANSans", tahoma;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
    --background-color: #ffffff; /* Background color for the entire website, including individual sections */
    --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
    --heading-color: #111111; /* Color for headings, subheadings and title throughout the website */
    --accent-color: #1bbd36; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
    --nav-color: #444444; /* The default color of the main navmenu links */
    --nav-hover-color: #1bbd36; /* Applied to main navmenu links when they are hovered over or active */
    --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
    --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #444444; /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #1bbd36; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
    --background-color: #f7f7f7;
    --surface-color: #ffffff;
}

.dark-background {
    --background-color: #060606;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #252525;
    --contrast-color: #ffffff;
}

.accent-background {
    --background-color: #1bbd36;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --accent-color: #ffffff;
    --surface-color: #2ae149;
    --contrast-color: #ffffff;
}

/*--------------------------------------------------------------
        # Hero Section
        --------------------------------------------------------------*/
.hero {
    padding: 0;
}

    .hero .carousel {
        width: 100%;
        min-height: calc(80vh - 75px);
        padding: 0;
        margin: 0;
        position: relative;
    }

@media (max-height: 500px), (max-width: 1200px) {
    .hero .carousel {
        min-height: calc(80vh - 48px);
    }
}

.hero img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero .carousel-item {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.hero .container {
    background: color-mix(in srgb, var(--surface-color), transparent 40%);
    position: relative;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 50px;
    border-top: 4px solid var(--accent-color);
    z-index: 3;
}

@media (max-width: 1200px) {
    .hero .container {
        margin-left: 50px;
        margin-right: 50px;
    }
}

.hero h2 {
    margin-bottom: 20px;
    font-size: 36px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .hero h2 {
        font-size: 30px;
    }
}

.hero .btn-get-started {
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 8px 32px;
    transition: 0.5s;
    margin: 10px;
    border-radius: 4px;
    color: var(--contrast-color);
    border: 2px solid var(--accent-color);
}

    .hero .btn-get-started:hover {
        background: var(--accent-color);
        color: var(--contrast-color);
    }

.hero .carousel-control-prev {
    justify-content: start;
}

@media (min-width: 640px) {
    .hero .carousel-control-prev {
        padding-right: 15px;
    }
}

.hero .carousel-control-next {
    justify-content: end;
}

@media (min-width: 640px) {
    .hero .carousel-control-next {
        padding-left: 15px;
    }
}

.hero .carousel-control-next-icon,
.hero .carousel-control-prev-icon {
    background: none;
    font-size: 26px;
    line-height: 0;
    background: color-mix(in srgb, var(--default-color), transparent 90%);
    border-radius: 50px;
    color: var(--contrast-color);
    transition: 0.3s;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero .carousel-control-prev,
.hero .carousel-control-next {
    transition: 0.3s;
    opacity: 0.5;
}

    .hero .carousel-control-prev:focus,
    .hero .carousel-control-next:focus {
        opacity: 0.5;
    }

    .hero .carousel-control-prev:hover,
    .hero .carousel-control-next:hover {
        opacity: 0.9;
    }

        .hero .carousel-control-prev:hover .carousel-control-next-icon,
        .hero .carousel-control-prev:hover .carousel-control-prev-icon,
        .hero .carousel-control-next:hover .carousel-control-next-icon,
        .hero .carousel-control-next:hover .carousel-control-prev-icon {
            background: var(--accent-color);
            color: var(--default-color);
        }

.hero .carousel-indicators li {
    cursor: pointer;
    background: var(--default-color);
    overflow: hidden;
    border: 0;
    width: 12px;
    height: 12px;
    border-radius: 50px;
    opacity: 0.6;
    transition: 0.3s;
}

    .hero .carousel-indicators li.active {
        opacity: 1;
        background: var(--accent-color);
    }


.center-header {
    background-image: url(/img/map.png), url(/img/pattern-right.png);
    background-repeat: no-repeat;
    background-position: center center, 75% center;
    height: 110px;
    position: relative;
}

.img-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-left {
    justify-content: flex-start;
}

.img-right {
    justify-content: flex-end;
}

.center-header img {
    max-height: 100px;
    width: auto;
    object-fit: contain;
}


.tophead {
    background-color: #eaeff3;
    padding: 10px;
    height: 40px;
}
/* تغییر رنگ پس‌زمینه منو به آبی تیره */
.navbar,
.navbar.bg-white,
.navbar.navbar-light {
    background-color: #08215f !important;
}

.bg-primary {
    background-color: #08215f !important
}

.list-group-item.active {
    z-index: 2;
    color: #ffffff;
    background-color: #08215f !important;
    border-color: #08215f !important;
}


/* تغییر رنگ متن‌های منو به سفید */
.navbar .nav-link,
.navbar .navbar-nav .nav-link.active,
.navbar .dropdown-toggle,
.navbar .navbar-brand,
.navbar-light .navbar-nav .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-brand {
    color: white !important;
}

/* تغییر رنگ آیکون دکمه همبرگر در حالت موبایل */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* استایل منوی کشویی */
.dropdown-menu,
.dropdown-menu-end,
.new-style-13 {
    background-color: #08215f !important;
    border-color: #06194d !important;
    z-index: 1050 !important; /* Bootstrap default */
}


.dropdown-item {
    color: white !important;
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: #0a2a78 !important;
        color: white !important;
    }

    /* استایل بخش کاربری */
    .navbar .avatar i,
    .navbar .dropdown-menu i,
    .navbar .dropdown-menu span,
    .navbar .dropdown-menu small,
    .navbar .dropdown-menu button,
    .dropdown-menu .text-muted,
    .dropdown-item button,
    .dropdown-item span,
    .dropdown-item small {
        color: white !important;
    }

/* خط جداکننده در منوی کاربر */
.dropdown-divider {
    border-top-color: rgba(255, 255, 255, 0.15) !important;
}

/* اصلاح نمایش دکمه‌ها و فرم‌ها در منوی کشویی */
.navbar .dropdown-menu button,
.navbar .dropdown-menu form button {
    color: white !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    text-align: right !important;
    padding: 0 !important;
}

.navbar .dropdown-menu .dropdown-item:hover button {
    color: white !important;
}

/* استایل دکمه‌های ورود و ثبت‌نام */
.navbar .btn-outline-primary {
    color: white !important;
    border-color: white !important;
}

    .navbar .btn-outline-primary:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

.navbar .btn-primary {
    background-color: white !important;
    color: #08215f !important;
    border-color: white !important;
}

/* تنظیمات RTL */
.dropdown-menu,
.dropdown-menu-end {
    text-align: right !important;
    direction: rtl !important;
}



.copyright-box {
    padding: 15px 0px;
    font-size: 14px;
    color: #ffffff;
    background-color: #08215f !important;
    text-align: center
}


.undernav {
    height: 3px;
    background-color: aqua;
}

.authentication-wrapperx{margin-top:40px;margin-bottom:40px; max-width:500px;margin-left:auto;margin-right:auto}