@import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400&display=swap");

.bg-light {
    background-color: #000000 !important;
}

.navbarbg {
    background-color: #fccb71;
}

/* Menu link sizing: prevent wrapping, allow automatic width based on text, and provide a sensible min-width */
.navbarbg .nav-link {
    color: #fff !important;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px; /* space between icon and text */
    padding: 0.45rem 0.95rem !important;
    min-width: 8ch; /* at least ~8 characters wide */
    max-width: 20ch; /* prevent excessively wide items */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Add margin to icon to ensure separation from text */
.navbarbg .nav-link i {
    margin-left: 1px;
}

/* Ensure nav items don't stretch and keep their intrinsic width */
.navbar-nav .nav-item { flex: 0 0 auto; }

/* On small screens allow wrapping/stacking */
@media (max-width: 767.98px) {
    .navbarbg .nav-link { white-space: normal; }
}

/* Header grid: left (account), center (logo), right (phone) */
.header-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}
.header-left {
    justify-self: start;
    display: flex;
    align-items: center;
}
.header-center {
    justify-self: center;
    text-align: center;
}
.header-right {
    justify-self: end;
    display:flex;
    align-items:center;
}

/* Desktop: nudge the account pill 20px to the right to match design request */
@media (min-width: 992px) {
    .account-area .dropdown > #accountMenu {
        transform: translateX(20px);
        /* ensure no layout jump animation */
        transition: none !important;
    }

    /* Also shift the dropdown panel itself 20px to the right on desktop so it appears under the pill */
    .account-area .dropdown .dropdown-menu {
        transform: translateX(20px);
        transition: none !important;
    }

    /* Ensure the navbar expands into a horizontal menu on desktop (bootstrap-expand breakpoint) */
    /* (mobile/desktop visibility rules for .mobile-hamburger moved out to top-level to avoid accidental nesting) */

    /* Make the collapse area behave like a normal navbar-collapse on desktop */
    .collapse#navbarNav {
        position: static !important;
        display: flex !important;
        background: transparent !important;
        width: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: auto !important;
    }

    .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .navbar-nav .nav-item {
        margin: 0 !important;
    }

    /* If any rules earlier used display: contents for .d-content, restore standard behavior on desktop */
    .navbar-nav.d-content { display:flex !important; }
}

/* Ensure logo never becomes taller than header and scales */
.header-center img {
    max-height: 60px;
    width: auto;
}

/* Account area: keep buttons from growing too wide */
.account-area .btn {
    white-space: nowrap;
}

/* Prevent the dropdown from overflowing the viewport on small screens */
.dropdown-menu {
    max-width: 90vw;
    word-break: keep-all;
}

/* Mobile behavior: stack into three rows, center logo, full-width account actions */
@media (max-width: 767.98px) {
    .header-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        text-align: center;
        gap: 6px;
    }

    /* (desktop nudging rule removed - reverted per user request) */
    /* Use absolute side controls so logo stays centered and never wraps */
    .header-grid {
        position: relative;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .header-left, .header-right {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        width: auto;
        max-width: 48%;
    }
    .header-left {
        left: 8px;
        justify-content: flex-start;
        /* logical start to support RTL */
        inset-inline-start: 8px;
        left: auto !important;
    }
    .header-right {
        right: 8px;
        justify-content: flex-end;
        /* logical end to support RTL and ensure visual right placement */
        inset-inline-end: 8px !important;
        right: auto !important;
        left: auto !important;
        flex-direction: column; /* stack the three lines vertically */
        align-items: flex-end; /* align text to the right */
        gap: 2px;
        direction: rtl; /* ensure child text aligns RTL */
    }
    /* Force text inside the phone block to align visually right */
    .header-right .phone_btn,
    .header-right .phone-header {
        text-align: right !important;
        direction: rtl !important;
    }
    .header-center {
        /* center block remains in normal flow */
        position: relative;
        display: block;
        margin: 0 auto;
    }
    /* Reduce logo size on small screens to avoid pushing into side controls */
    .header-center img {
        max-height: 54px;
    }
    /* In mobile, collapse standard dropdown menu (we keep account controls compact) */
    .dropdown .dropdown-menu {
        position: absolute !important;
        right: 0;
        left: auto;
        max-width: 80vw;
    }
}

/* Mobile full-width account menu (if added elsewhere) */
.account-mobile-menu {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: #111;
    color: #fff;
    padding: 12px;
    z-index: 1050;
}
.account-mobile-menu.show {
    display: block;
}

.navsize {

    height: 10px;
    padding: 0 !important;
}

.d-content {
    display: contents !important;
}

.clickoff:hover {
    text-decoration: none;
}

.fontsmall {
    font-size: 14px;
}

.guide-shop {
    display: block;
    color: black;
    font-size: 12px;
    transition: all 0.6s linear;
    margin: 20px auto;
    width: 300px;
    padding: 5px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    border-radius: 5px;
    text-align: center;
    background: linear-gradient(to left, #fad88e, #f2af55);
}

.padding {
    padding: 0;
}

@media(min-width: 600px) {
    .padding {
        padding-right: 70px;
    }
}

ul li.nav_cats {
    display: inline-block;
    margin-left: 16px;
}


#category-setction a {
    color: white !important;
    font-size: 14px;
    padding-bottom: 10px;
    transition: all 0.3s linear;
    position: relative;
}

#category-setction a::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0;
    left: 0;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s cubic-bezier(1, .25, 0, .75) 0s;
    transition: all 0.3s cubic-bezier(1, .25, 0, .75) 0s;
}

#category-setction a:hover:after {
    background-color: #fccb71;
}

#category-setction a:hover:after {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

#category-setction a:hover {
    color: #f5b237 !important;
    text-decoration: none;
}

#category-setction a i {
    color: rgb(252, 252, 252) !important;
    font-size: 16px;
    margin-left: 10px;
}

.border1 {
    border: 3px;
    border: solid #fccb71;
    border-radius: 7px;
}

.border2 {
    width: 100%;
    border: 10px solid #fccb71;
    border-radius: 36px;
}

/* Ensure the large hero image is always visible on desktop/tablet */
.home_about .border2 {
    display: block !important;
    position: relative !important;
    top: auto !important;
    margin-top: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2 !important;
}

.border3 {
    border-bottom: 2px;
    border-top: 2px;
    border-bottom: solid #fccb71;
    border-top: solid #fccb71;
}

.border4 {
    border: 3px;
    border: solid #fccb71;
    border-radius: 7px;
    background-color: #fccb71;
}

.btn-primary {
    background-color: #fccb71 !important;
    color: #000 !important;
    border: #fccb71 !important;
}

.second_style_btn {
    min-width: 104px;
    height: 33px;
    color: #000 !important;
    background: linear-gradient(to left, #fad88e, #f2af55);
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
    line-height: 34px;
    cursor: pointer;
    z-index: 8;
    position: relative;
    text-align: center;
    border-radius: 6px;
    -webkit-transition: all 0.5s !important;
    -moz-transition: all 0.5s !important;
    -o-transition: all 0.5s !important;
    transition: all 0.5s !important;
}

.home_about .about_vector {
    display: block;
    position: relative;
    margin-bottom: 16px;
}

.home_about .counter_num {
    background-image: url('./img/sprite.png');
    background-position: -3px -96px;
    width: 92px;
    height: 92px;
    display: block;
    padding-top: 16px;
    text-align: center;
    color: #f0ab50;
    font-size: 26px;
    line-height: 1.2;
    margin: 0 auto 8px;
    background-repeat: no-repeat;
}

.home_about .counter_item {
    text-align: center;
    transition: all 0.3s linear;
}

.home_about .counter_title {
    color: #f6e0b8;
    display: block;
    text-align: center;
    margin-top: 5px;
    transition: all 0.3s linear;
    line-height: 24px;
}

@media (max-width: 767.98px) {
    /* Keep three visual columns on small screens: left control, centered logo, right info */
    .header-grid {
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 8px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .header-left {
        justify-self: start;
        position: relative;
        display: flex;
        align-items: center;
        max-width: 40%;
        padding-inline-start: 8px;
    }
    .header-center {
        justify-self: center;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header-right {
        justify-self: end;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        max-width: 50%;
        gap: 2px;
        padding-inline-end: 8px;
    }
    .header-center img { max-height: 54px; }
    /* prevent long text from pushing layout */
    .header-right .phone_btn { white-space: nowrap; }
    .account-area .btn span { display: inline; }
}

/* Match user sketch: show hamburger button on left in mobile */
@media (max-width: 767.98px) {
    .phone-block { display: none; }
    .mobile-hamburger { 
        display: inline-flex !important; 
        position: absolute !important;
        left: 20px !important;
        top: 12px !important;
        z-index: 1100 !important;
        font-size: 20px !important; 
        color: #fff !important; 
        background: transparent !important; 
        border: none !important;
        cursor: pointer !important;
        padding: 8px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .account-area .btn { padding: 6px 10px; }
    /* keep logo centered */
    .header-center { justify-self: center; }
    .header-left { justify-self: start; }
    .header-right { justify-self: end; }
    .account-area .btn span { display: inline; }
}

/* Conflicting rule removed - handled in consolidated mobile section */

@media (max-width: 420px) {
    /* Only on very narrow phones move the right block absolutely so logo stays centered.
       Keep header-left in flow to avoid shifting other elements. */
    .header-grid {
        position: relative;
    }
    .header-right {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        max-width: 48%;
        inset-inline-end: 8px;
        justify-content: flex-end;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        direction: rtl;
    }
    .header-center img { max-height: 50px; }
    .dropdown .dropdown-menu {
        position: absolute !important;
        right: 0;
        left: auto;
        max-width: 80vw;
    }
}

.w100 {
    width: 100%;
}

.cardphoto1 {
    width: 100% !important;
    height: 200px !important;
    object-fit: contain !important;
    object-position: center center !important;
    background-color: #000;
}

.backgerand {
    background-color: #000 !important;
    color: white;

}

.card {
    background-color: unset !important;
}

.color2 {
    color: #f0ab50;
}

@media (min-width: 992px) {
    .col-lg-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    user agent stylesheet div {
        display: block;
        unicode-bidi: isolate;
    }

    body {
        font-family: 'Vazir-FD-WOL', sans-serif;
        font-weight: 300;
        font-size: 16px;
        line-height: 1.618;
    }

    .about-description-box {
        list-style: none;
        padding-right: 32px;
        margin: 32px 0;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    .about-description-box {
        list-style: none;
        padding-right: 32px;
        margin: 32px 0;
    }

    .about-01 .about-img img {
        width: 100%;
        border-radius: 16px;
    }

    img {
        vertical-align: middle;
        border-style: none;
    }

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    user agent stylesheet img {
        overflow-clip-margin: content-box;
        overflow: clip;
    }

    .about-description-box li {
        position: relative;

    }

    .about-description-box p i {
        font-size: 9px;
        position: absolute;
        top: 50%;
        right: -30px;
        transform: translate(0, -50%);
        background: linear-gradient(96deg, #01bed9 0%, #3500d3 100%);
        color: #fff;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 50%;
    }

}

.pill-button-01 {
    border-radius: 30px;
    border: none;
    padding: 10px 30px;
    transition: all 0.5s ease;
    font-size: 16px;
    display: inline-block;
    background-image: linear-gradient(96deg, #01bed9 0%, #3500d3 50%, #01bed9);
    background-size: 200% auto;
    color: #fff;
}

.pill-button-01:hover {
    color: #fff;
    background-position: right center;
}

a:hover {
    text-decoration: none !important;
}

section.slider-section {
    padding: 1rem 1.5rem 0;
    background-color: #fff;
    border-radius: 10px;
    -webkit-box-shadow: 0 2px 6px 0 rgba(51, 73, 94, .1);
    box-shadow: 0 2px 6px 0 rgba(51, 73, 94, .1);
}

.dt-sl {
    width: 100%;
    height: auto;
    float: right;
}

/* Styling for phone block when moved to left */
.phone-block-left { display:flex; flex-direction:column; align-items:flex-start; text-align:left; color:#fff; }
.phone-block-left .phone-btn, .phone-block-left .phone_btn { color:#fff; }
.phone-block-left .phone-header { font-size: 13px; color:#cfcfcf; }

/* Hamburger order handled in main positioning */

/* Small adjustments to spacing */
.header-left { padding-inline-start: 8px; }
.header-right { padding-inline-end: 8px; }

/* Emergency header fix: absolutely center the logo (horizontal + vertical) and keep left/right blocks in flow
   This is intentionally high-specificity and non-destructive to restore a predictable layout quickly. */
.container-fluid.header-grid, .header-grid {
    position: relative !important;
}
.container-fluid.header-grid > .header-center, .header-grid > .header-center {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 2 !important;
    pointer-events: none; /* make logo not intercept clicks */
}
.container-fluid.header-grid > .header-center img, .header-grid > .header-center img {
    pointer-events: auto;
    max-height: 56px !important;
}
.container-fluid.header-grid > .header-left, .header-grid > .header-left {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}
.container-fluid.header-grid > .header-right, .header-grid > .header-right {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Make sure the collapse menu does not push header content when opened */
/* Rules consolidated in main mobile section above */

/* If any element is visually overlapping, reduce logo size a bit more */
@media (max-width: 420px) {
    .header-center img { max-height: 48px !important; }
    .account-area .btn span { display: none !important; } /* optional: hide text to save space */
    /* on very narrow phones lower the phone block a bit more */
    .phone-block-left { margin-top: 72px !important; }
}

.mb-3,
.mb-3,
.my-3 {
    margin-bottom: 1rem !important;
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

@media (min-width: 1200px) {
    .col-xl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.title-wide h2:before {
    content: "";
    background: url(https://ghoflman.com/themes/defaultTheme/img/theme/title-circles.png) left no-repeat;
    display: block;
    position: absolute;
    right: -12px;
    top: 11px;
    height: 14px;
    width: 32px;
    margin-right: 13px;
    height: 14px;
    width: 32px;
}

footer {
    position: relative;
}

article,
aside,
footer,
header,
nav,
section {
    display: block;
}

*,
*::after,
*::before {
    box-sizing: border-box;
}

.main_footer .footer_info {
    text-align: justify;
}

@media (min-width: 992px) {
    .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
}

.main_footer .imgholder {
    margin-bottom: 17px;
    display: inline-block;
}

.main_footer .footer_logo {
    max-width: 100%;
    height: auto;
    display: block;
}

img {
    border-style: none;
}

.main_footer .imgholder {
    margin-bottom: 17px;
    display: inline-block;
}

body,
input,
textarea,
a {
    color: #3d434e;
    font-size: 12px;
    line-height: 1.625;
}

ol,
ul {
    list-style: none;
}

.main_footer .footer_item {
    color: #fff;
    font-size: 12px;
    line-height: 28px;
    margin-bottom: 7px;
}

.main_footer .footer_item .footer_phone {
    transform: rotate(-90deg);
}

.main_footer .item_icon {
    display: inline-block;
}

.main_footer .footer_item span {
    margin-right: 10px;
}

.main_footer .footer_item {
    color: #fff;
    font-size: 12px;
    line-height: 28px;
    margin-bottom: 7px;
}

.main_footer .item_icon {
    display: inline-block;
}

.main_footer .footer_item .footer_address::after {
    content: '\e916';
}

.main_footer .item_icon::after {
    color: #f0ab50;
    font-size: 14px;
    font-style: normal;
}

.main_footer .footer_info {
    text-align: justify;
}

@media (min-width: 992px) {
    .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
}

.main_footer .footer_title {
    text-align: right;
    display: block;
    color: #fff;
    font-size: 14px;
    margin-bottom: 16px;
}

.main_footer .contact_parts li {
    display: flex;
    justify-content: start;
    margin-bottom: 18px;
    align-items: baseline;
}

.main_footer .contact_parts .part_title {
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
}

.main_footer .contact_parts .part_title::before {
    color: #f0ab50;
    font-size: 14px;
    display: inline-block;
    transform: rotate(-90deg);
    margin-left: 10px;
}

.main_footer .contact_parts .part_tell {
    color: #fff;
}


*::after,
*::before {
    box-sizing: border-box;
}

.main_footer .contact_parts .part_tell {
    color: #fff;
}

.main_footer .contact_parts .part_title {
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    margin-left: 7px;
}

.main_footer .contact_parts .part_tell {
    color: #fff;
}

@media (min-width: 992px) {
    .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (min-width: 992px) {
    .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
}

.main_footer .footer_title {
    text-align: right;
    display: block;
    color: #fff;
    font-size: 14px;
    margin-bottom: 16px;
}

.main_footer .footer_title {
    text-align: right;
    display: block;
    color: #fff;
    font-size: 14px;
    margin-bottom: 16px;
}

.main_footer .footer_menu a {
    display: inline-block;
    color: #fff;
    font-size: 13px;
    transition: all 0.3s linear;
}

@media (min-width: 992px) {
    .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (min-width: 768px) {
    .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.main_footer .footer_menu li {
    text-align: justify;
    margin-bottom: 8px;
}


@media (min-width: 992px) {
    .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
}

.main_footer .footer_title {
    text-align: right;
    display: block;
    color: #fff;
    font-size: 14px;
    margin-bottom: 16px;
}

@media (min-width: 992px) {
    .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }
}

.main_footer .email_field {
    display: inline-block;
    width: 85%;
    height: 40px;
    background: #000;
    border: 1px solid #f0ab50;
    color: #fff;
    font-size: 13px;
    border-radius: 0 5px 5px 0;
    padding: 5px 10px;
    transition: all 0.3s;
}

.main_footer .btn_submit {
    font-size: 13px;
    border: 0;
    width: 22%;
    background: #f0ab50;
    border-radius: 5px 0 0 5px;
    color: #000;
    cursor: pointer;
    transition: all 0.3s;
}

[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled) {
    cursor: pointer;
}

body,
input,
textarea,
a {
    color: #3d434e;
    font-size: 12px;
    line-height: 1.625;
}

.wsn {
    white-space: nowrap;
    font-size: 13px;
}

.none {
    list-style: none;

}

.pad {
    padding-right: 40px;
}

.pad2 {
    padding-right: 40px !important;

}

.pad3 {
    margin-right: 40px;
}

.fontsaize {
    font-size: 12px;
}

.namad {
    width: 264px;
    height: 135px;
    padding-right: 50px;
}


.imgweb {
    width: 100px !important;
    height: 100px !important;
    object-fit: cover !important;
}

.card-img-top {
    height: 200px;
    object-fit: contain;
    object-position: center center;
}

.owl-nav {
    display: none;
}


.loader {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 99999999;
    right: 0;
    left: 0;
    bottom: 0;
    direction: ltr;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}
#container {
    position: relative;
    transform: scale(0.725);
  }
  
  .divider {
    position: absolute;
    z-index: 2;
    top: 65px;
    left: 200px;
    width: 50px;
    height: 15px;
    background: #000000;
  }
  
  .loading-text {
    position: relative;
    font-size: 3.75rem;
    font-weight: 300;
    margin: 0;
    white-space: nowrap;
  }
  .loading-text::before {
    position: absolute;
    content: "";
    z-index: 1;
    top: 40px;
    left: 115px;
    width: 6px;
    height: 6px;
    background: #f2af55;
    border-radius: 50%;
    -webkit-animation: dotMove 1800ms cubic-bezier(0.25, 0.25, 0.75, 0.75) infinite;
            animation: dotMove 1800ms cubic-bezier(0.25, 0.25, 0.75, 0.75) infinite;
  }
  .loading-text .letter {
    display: inline-block;
    position: relative;
    color: #f2af55;
    letter-spacing: 8px;
  }
  .loading-text .letter:nth-child(1) {
    transform-origin: 100% 70%;
    transform: scale(1, 1.275);
  }
  .loading-text .letter:nth-child(1)::before {
    position: absolute;
    content: "";
    top: 22px;
    left: 0;
    width: 14px;
    height: 36px;
    background: #000000;
    transform-origin: 100% 0;
    -webkit-animation: lineStretch 1800ms cubic-bezier(0.25, 0.25, 0.75, 0.75) infinite;
            animation: lineStretch 1800ms cubic-bezier(0.25, 0.25, 0.75, 0.75) infinite;
  }
  .loading-text .letter:nth-child(5) {
    transform-origin: 100% 70%;
    -webkit-animation: letterStretch 1800ms cubic-bezier(0.25, 0.23, 0.73, 0.75) infinite;
            animation: letterStretch 1800ms cubic-bezier(0.25, 0.23, 0.73, 0.75) infinite;
  }
  .loading-text .letter:nth-child(5)::before {
    position: absolute;
    content: "";
    top: 15px;
    left: 2px;
    width: 9px;
    height: 15px;
    background: #000000;
  }
  
  @-webkit-keyframes dotMove {
    0%, 100% {
      transform: rotate(180deg) translate(-110px, -10px) rotate(-180deg);
    }
    50% {
      transform: rotate(0deg) translate(-111px, 10px) rotate(0deg);
    }
  }
  
  @keyframes dotMove {
    0%, 100% {
      transform: rotate(180deg) translate(-110px, -10px) rotate(-180deg);
    }
    50% {
      transform: rotate(0deg) translate(-111px, 10px) rotate(0deg);
    }
  }
  @-webkit-keyframes letterStretch {
    0%, 100% {
      transform: scale(1, 0.35);
      transform-origin: 100% 75%;
    }
    8%, 28% {
      transform: scale(1, 2.125);
      transform-origin: 100% 67%;
    }
    37% {
      transform: scale(1, 0.875);
      transform-origin: 100% 75%;
    }
    46% {
      transform: scale(1, 1.03);
      transform-origin: 100% 75%;
    }
    50%, 97% {
      transform: scale(1);
      transform-origin: 100% 75%;
    }
  }
  @keyframes letterStretch {
    0%, 100% {
      transform: scale(1, 0.35);
      transform-origin: 100% 75%;
    }
    8%, 28% {
      transform: scale(1, 2.125);
      transform-origin: 100% 67%;
    }
    37% {
      transform: scale(1, 0.875);
      transform-origin: 100% 75%;
    }
    46% {
      transform: scale(1, 1.03);
      transform-origin: 100% 75%;
    }
    50%, 97% {
      transform: scale(1);
      transform-origin: 100% 75%;
    }
  }
  @-webkit-keyframes lineStretch {
    0%, 45%, 70%, 100% {
      transform: scaleY(0.125);
    }
    49% {
      transform: scaleY(0.75);
    }
    50% {
      transform: scaleY(0.875);
    }
    53% {
      transform: scaleY(0.5);
    }
    60% {
      transform: scaleY(0);
    }
    68% {
      transform: scaleY(0.18);
    }
  }
  @keyframes lineStretch {
    0%, 45%, 70%, 100% {
      transform: scaleY(0.125);
    }
    49% {
      transform: scaleY(0.75);
    }
    50% {
      transform: scaleY(0.875);
    }
    53% {
      transform: scaleY(0.5);
    }
    60% {
      transform: scaleY(0);
    }
    68% {
      transform: scaleY(0.18);
    }
  }
  @media (min-width: 48rem) {
    #container {
      transform: scale(0.725rem);
    }
  }
  @media (min-width: 62rem) {
    #container {
      transform: scale(0.85);
    }
  }

/* Responsive dropdown fixes: prevent dropdowns from overflowing small screens */
.dropdown-menu {
        max-width: calc(100vw - 32px);
        overflow: auto;
        word-break: break-word;
}

/* Mobile account menu is hidden by default; shown only on small screens when toggled */
.account-mobile-menu { display: none; }

@media (max-width: 575.98px) {
        /* On very small screens render dropdowns in-flow so Popper positioning can't place them off-screen */
        .dropdown .dropdown-menu {
                position: static !important;
                float: none;
                display: block;
                width: auto;
                margin-top: .5rem;
                box-shadow: 0 6px 12px rgba(0,0,0,0.08);
                background-clip: padding-box;
        }

        /* Ensure the toggle remains visible and dropdown aligns nicely */
        .dropdown-toggle { z-index: 1051; }
}

    @media (max-width: 575.98px) {
        /* On mobile we hide the original dropdown rendered by Bootstrap (we use the full-width panel instead) */
        .dropdown .dropdown-menu { display: none !important; }

        /* show/hide of the mobile panel controlled by .show class */
        .account-mobile-menu.show { display: block; }
    }

    /* Header mobile tweaks: stack and center logo, prevent overlaps */
    @media (max-width: 575.98px) {
        .navbar .navbar-brand { display:flex; justify-content:center; align-items:center; }
        .header_phone { text-align: center; margin-top: 6px; }
        .header_phone .phone_btn { display:inline-block; }
        .dropdown-toggle { margin-right: 6px; }
        .navbar .row { gap: 8px; }
    }

    /* Mobile account menu: full-width panel to avoid overflow/clipping */
    @media (max-width: 575.98px) {
    .account-mobile-menu {
            /* suggested nonstandard/containment hint (kept lowercase/valid CSS) */
            contain-intrinsic-block-size: auto 100px;
            font-weight: 200;
            position: fixed;
            top: 137px;
            right: -41px;
            left: 0px;
            background: transparent;
            color: #000;
            z-index: 1053;
            max-height: calc(100vh - 150px);
            overflow-y: auto;
            box-shadow: none;
            display: none;
            padding: 6px 12px;
            flex-direction: column;
            align-items: center;
            gap: 30px;
        }
        /* force .show to use flex so it overrides earlier display:block rules */
        .account-mobile-menu.show { display: flex !important; }

        /* Uniform, smaller items: compact padding, smaller text, consistent height */
        .account-mobile-menu a,
        .account-mobile-menu form {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            color: #222;
            border-radius: 16px;
            padding: 0 10px;
            margin: 0 auto; /* horizontal centering only; vertical gap provided by container gap */
            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
            text-decoration: none;
            font-size: 11px;
            width: 88px;
            height: 26px;
            line-height: 26px;
            box-sizing: border-box;
        }
        .account-mobile-menu a > *,
        .account-mobile-menu form > * { margin: 0; }
        .account-mobile-menu form { padding: 0; }
                .account-mobile-menu form button {
            background: transparent;
            color: #222;
            border: none;
            padding: 0;
            font-size: 11px;
            line-height: 26px;
        }
    }
}

/* Social Media Styles */
.footer_social ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.footer_social ul li {
    margin: 0;
}

.social_item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 15px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(240, 171, 80, 0.5);
    border-radius: 5px;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 12px;
    transition: all 0.3s ease;
    min-width: 80px;
    text-align: center;
}

.social_item:hover {
    background-color: #f0ab50;
    color: #000000 !important;
    border-color: #f0ab50;
    text-decoration: none;
    transform: translateY(-2px);
}

.social_item.facebook:hover {
    background-color: #1877f2;
    border-color: #1877f2;
    color: #ffffff !important;
}

.social_item.twitter:hover {
    background-color: #1da1f2;
    border-color: #1da1f2;
    color: #ffffff !important;
}

.social_item.instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-color: #e6683c;
    color: #ffffff !important;
}

.social_item.telegram:hover {
    background-color: #0088cc;
    border-color: #0088cc;
    color: #ffffff !important;
}

.social_item.whatsapp:hover {
    background-color: #25d366;
    border-color: #25d366;
    color: #ffffff !important;
}