.auth-main-area {
    margin-top: 88px;
}

/*============================
    SIGN IN START
============================*/
.wsus__login_header {
    justify-content: space-between;
}

.wsus__login_header li {
    width: 50%;
}

.wsus__login_header li a {
    display: block;
    text-align: center;
    color: var(--colorBlack);
    font-size: 15px;
    font-weight: 500;
    background: #e0e7f0;
    padding: 20px;
    text-transform: capitalize;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    border-right: 1px solid var(--colorWhite);
}

.wsus__login_header li:last-child a {
    border-right: 0;
}

.wsus__login_header li a:hover,
.wsus__login_header li a.active {
    background: var(--colorPrimary);
    color: var(--colorWhite);
}

.wsus__sign_in_form form {
    padding: 40px 50px 0px 50px;
    border-radius: 0;
}

.wsus__sign_in_form form h3 {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 30px;
}

.wsus__sign_in_input {
    margin-top: 20px;
}

.wsus__sign_in_input label {
    display: block;
    color: var(--tg-common-black);
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px;
}

.wsus__sign_in_input input {
    border: 1px solid #ddd;
    border-radius: 0;
    font-size: 18px;
}

.wsus__sign_in_input input::placeholder,
.wsus__sign_in_input textarea::placeholder {
    font-size: 18px;
    letter-spacing: -0.36px;
}

.wsus__sign_in_input .form-check {
    margin-bottom: 0;
    padding-left: 0;
}

.wsus__sign_in_input .form-check input {
    padding: 0;
    border-radius: 3px;
    margin-top: 7px;
}

.wsus__sign_in_input .form-check label,
.wsus__sign_in_input .form-check label a {
    color: var(--paraColor);
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}

.wsus__sign_in_input .form-check label a {
    color: var(--colorBlack);
}

.wsus__sign_in_input .form-check label a:hover {
    color: var(--colorPrimary);
}

.wsus__sign_in_input a {
    font-size: 16px;
    color: red;
    font-weight: 400;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.wsus__sign_in_input a:hover {
    color: var(--black-color);
}

.wsus__sign_in_input button {
    margin-top: 20px;
    text-transform: capitalize;
}

.wsus__sign_in_form .or {
    position: relative;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    margin-top: 35px;
    margin-bottom: 35px;
}

.wsus__sign_in_form .or::before,
.wsus__sign_in_form .or::after {
    position: absolute;
    content: "";
    width: 40%;
    height: 1px;
    background: rgba(4, 6, 24, 0.1);
    top: 12px;
    right: 0;
}

.wsus__sign_in_form .or::before {
    right: auto;
    left: 0;
}

.wsus__sign_in_form .wsus__another_login {
    padding: 0px 50px;
    list-style: none;
}

.wsus__sign_in_form .wsus__another_login li {
    width: 100%;
}

.wsus__sign_in_form .wsus__another_login li a {
    width: 100%;
    border: 1px solid #ddd;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 13px 10px;
    color: var(--tg-common-black);
    font-size: 16px;
    font-weight: 500;
}

.wsus__sign_in_form .wsus__another_login li a span {
    display: block;
    width: 18px;
    margin-right: 5px;
    position: relative;
    top: -1px;
}

.wsus__sign_in_form .dont_account {
    text-align: center;
    margin-top: 20px;
    font-size: 16px;
}

.wsus__sign_in_form .dont_account a {
    font-size: 16px;
    font-weight: 500;
    color: var(--black-color);
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.sign_in_radio_box {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.sign_in_radio_box .form-check input {
    border-radius: 50%;
}

.wsus__forgot_password {
    background: #eff5fc;
}

.wsus__forgot_password form a {
    display: block;
    text-align: center;
    color: var(--colorPrimary);
    margin-top: 25px;
}

.wsus__forgot_password form button {
    padding: 13px 25px;
}

.wsus__forgot_password form a:hover {
    text-decoration: underline;
}

.wsus__sign_in_form {
    border: 1px solid #eee;
    box-shadow: rgb(149 157 165 / 26%) 0px 8px 24px;
}

.wsus__sign_in_form input[type="checkbox"]:checked~label:before,
.sidebar__widget input[type="checkbox"]:checked~label:before {
    content: "\f00c";
    color: var(--white-color);
    background-color: var(--black-color);
    border-color: var(--black-color);
}

.wsus__sign_in_form input[type="checkbox"]~label:before,
.sidebar__widget input[type="checkbox"]~label:before {
    background-color: var(--white-color);
    border: 1px solid var(--black-color);
}

/*============================
  SIGN IN END
============================*/

.social-btn .social-icon {
    height: 20px;
    vertical-align: baseline;
}

.sidemenu-wrapper .sidebar-logo img {
    width: 250px;
    height: auto;
}

.hero-2 .hero-two-sub-title {
    margin-top: 26px;
    margin-bottom: 40px;
}

.hero-2 .hero-two-sub-title p {
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    color: var(--white-color);
}

.contact-page-address {
    max-width: 210px;
}

.comments-avatar img {
    width: 100px;
    height: auto;
}

.inner__page-nav .nav-btn.disabled {
    color: var(--light-color);
    cursor: no-drop;
}

.header-layout2 .header-cart,
.wsus-white-color {
    color: var(--white-color);
}

.header-layout2 .header-cart img {
    filter: brightness(0) saturate(100%) invert(100%);
}

.sidemenu-content img.social-icon.color-white {
    filter: brightness(0) saturate(100%) invert(100%);
}

p.ajax-response.error {
    color: var(--error-color);
}

.product-card .tag.left-side {
    right: auto;
    left: 0;
}

.product-about .actions {
    margin: 46px 0 12px 0;
}

.product-card .product-img {
    margin: 0 0 12px 0;
    position: relative;
}

#billing-address-form label {
    text-transform: uppercase;
}

/*------------------- Ajax Loader -------------------*/
.ajax-loader {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999999;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ajax-loader-inner {
    display: block;
    width: 45px;
    height: 45px;
}

.ajax-loader-inner span {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 37px;
    height: 37px;
    margin: 4px;
    border: 4px solid transparent;
    border-radius: 50%;
    animation: ajaxLoader 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: var(--theme-color) transparent transparent transparent;
}

.ajax-loader-inner span:nth-child(1) {
    animation-delay: -0.1s;
}

.ajax-loader-inner span:nth-child(2) {
    animation-delay: -0.2s;
}

.ajax-loader-inner span:nth-child(3) {
    animation-delay: -0.3s;
}

@-webkit-keyframes ajaxLoader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes ajaxLoader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.newsletter-form .btn {
    font-size: 18px;
    color: var(--black-color);
}

.wsus-badge {
    background-color: var(--theme-color);
    color: var(--white-color);
    border-radius: 30px;
    left: 100%;
}

.pricing-card .pricing-card_price {
    font-size: 42px;
}

.home_three .header-layout3 {
    background: none !important;
}

.home_four .hero-thumb-group img {
    border-radius: 0;
    border: none;
    width: 180px;
}

.home_four .sec-title p {
    margin-bottom: calc(var(--section-title-space) - 43px);
    margin-top: -0.18em;
    font-weight: 600;
    letter-spacing: -1.8px;
    line-height: 1.133;
    font-family: var(--title-font);
    color: var(--title-color);
    text-transform: none;
    font-size: 60px;
}

.wpcc-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 25px;
    max-width: 400px;
    position: fixed;
    z-index: 9999;
    bottom: 25px;
    left: 25px;
    border: 1px solid #fff;
}

.wpcc-container .wpcc-message {
    line-height: 26px;
    font-size: 16px;
    font-weight: 400;
}

.wpcc-container .wpcc-message a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wpcc-container .wpcc-compliance {
    margin-top: 15px;
}

.wpcc-container .wpcc-compliance a {
    padding: 5px 15px;
    border-radius: 50px;
    cursor: pointer;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    font-size: 14px;
}

.sidemenu-wrapper .sidemenu-content .widget_shopping_cart ul {
    overflow: hidden;
    overflow-y: auto;
}

.sidemenu-wrapper .sidemenu-content .widget_shopping_cart ul::-webkit-scrollbar {
    width: 3px;
    height: 10px;
    background: #ddd;
    display: none;
}

.checkout_tabs .nav-tabs {
    border-bottom: 1px solid var(--title-color);
}

.checkout_tabs .nav-tabs .nav-link {
    color: var(--title-color);
    border-radius: 0;
    border: none;
    padding: 10px 25px;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.checkout_tabs .nav-tabs .nav-link.active {
    background: var(--theme-color);
    color: var(--white-color);
    border-color: var(--theme-color);
}

.checkout_summery {
    border: 1px solid var(--title-color);
    padding: 35px;
    padding-bottom: 0;
}

.checkout_summery table tr th,
.checkout_summery table tr td,
.checkout_summery .cart_table thead {
    border-bottom: 1px solid var(--title-color) !important;
}

.checkout_summery table tr:last-child th,
.checkout_summery table tr:last-child td {
    border: none !important;
}

.checkout_tabs .form-check label {
    font-weight: 400;
}

.checkout_tabs .form-check input[type="checkbox"]~label:before {
    border: 1px solid var(--title-color);
}

.checkout_tabs .form-check input[type="checkbox"]:checked~label:before {
    color: var(--title-color);
    border-color: var(--title-color);
}

.checkout_payment a img {
    width: 140px;
    height: auto;
    border: 1px solid #ddd;
    box-shadow: none !important;
    cursor: pointer;
}

.home_four .project-area-4 .portfolio-wrap {
    height: 470px;
}

.home_four .project-area-4 .portfolio-thumb {
    height: 100%;
}

.home_four .project-area-4 .portfolio-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.home_four .project-area-4 .portfolio-details {
    padding: 40px;
    max-width: 100%;
    width: 100%;
}

.home_four .blog-card .blog-img {
    height: 460px;
}

.home_four .blog-card .blog-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.product-card .product-img .wsus-wishlist-btn {
    position: absolute;
    z-index: 999;
    bottom: 20px;
    right: 20px;
    background: var(--theme-color);
    color: var(--white-color);
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #ddd;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
    opacity: 0;
}

.product-card .product-img .wsus-wishlist-btn:hover {
    background: var(--title-color);
    color: var(--theme-color);
}

.product-card:hover .product-img .wsus-wishlist-btn {
    opacity: 1;
}

.product-about .wsus-wishlist-btn {
    background: var(--title-color);
    color: var(--white-color);
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    transition: all linear 0.3s;
    -webkit-transition: all linear 0.3s;
    -moz-transition: all linear 0.3s;
    -ms-transition: all linear 0.3s;
    -o-transition: all linear 0.3s;
}

.product-about .wsus-wishlist-btn:hover {
    color: var(--white-color);
    background: var(--theme-color);
}

.blog__details-thumb img {
    height: 740px;
}

.blog-post-description p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 25px;
}

.blog-post-description img {
    width: 48%;
    height: 400px;
}

.blog-post-item-two .blog-post-thumb img {
    height: 310px;
}

.portfolio-wrap.style2 .portfolio-details {
    max-width: 100%;
}

.portfolio-wrap.style2 .portfolio-thumb {
    height: 505px;
}

.portfolio-wrap.style2 .portfolio-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.home_two .blog-card .blog-img {
    height: 460px;
}

.home_two .blog-card .blog-img img {
    height: 100% !important;
    object-fit: cover !important;
}

.accordion-card {
    flex-wrap: wrap;
}

.accordion-card .accordion-body {
    padding: 2px 0px 0px 0px;
    max-width: 100%;
}

.home_main .blog-card .blog-img img {
    height: 340px;
    object-fit: cover;
}

.social-btn.style2 .link-effect {
    height: 22px;
}

.social-btn.style2 .link-effect span {
    width: 20px;
    height: 20px;
    display: block;
}

.social-btn.style2 .link-effect span img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.social-btn.style2 {
    gap: 20px;
}

.blog_page_two_column .blog-post-thumb img {
    height: 360px;
}

.nav-header {
    z-index: 5;
    top: 50px;
}

.checkout_modal .modal-header {
    line-height: 30px;
    padding: 20px;
}

.checkout_modal .modal-body {
    padding: 20px;
    padding-bottom: 0;
}

.checkout_modal .modal-footer {
    padding: 20px;
}

.wsus_topbar {
    height: auto;
    /* The site's black rather than #000 — same ink as the headings, so the bar
       belongs to the palette. White label 17.68:1, saffron separators 8.20:1. */
    background-color: var(--title-color);
}

.tg-header-top__info ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tg-header-top__info ul li a {
    color: var(--title-color);
    font-size: 18px;
    margin-top: 5px;
    display: inline-block;
}

.header_language {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    justify-content: end;
    margin: 0;
    padding: 0;
}

.header_language li {
    position: relative;
}

.header_language li.select_item:nth-child(1) {
    padding-left: 22px;
}

.header_language li.select_item:nth-child(2) {
    padding-left: 25px;
}

.header_language li.select_item:nth-child(2)::before {
    position: absolute;
    content: "";
    width: 1px;
    height: 25px;
    background: var(--title-color);
    top: 11px;
    left: 25px;
}

.header_language .nice-select {
    border: none;
    padding-left: 0;
    background: none;
    border-radius: 0;
    margin-top: 5px;
}

.header_language .nice-select .option {
    padding-left: 15px;
    padding-right: 15px;
}

.header_language .nice-select .option::after {
    display: none;
}

.header_language .nice-select .list {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    min-width: 100px;
}

.header_language .nice-select:after {
    right: 2px;
    width: 7px;
    height: 7px;
    border-bottom: 1px solid var(--title-color);
    border-right: 1px solid var(--title-color);
    margin-top: -6px;
}

.header_language #setCurrencyHeader {
    border-left: 1px solid #821212;
    padding-left: 30px;
}

.header_language .nice-select .current {
    font-size: 18px;
}

.header_language li.language-select-item::before {
    position: absolute;
    content: "";
    background: url(../images/translation.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 16px;
    height: 16px;
    top: 18px;
    left: 0;
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(322deg) brightness(98%) contrast(104%);
    -webkit-filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(322deg) brightness(98%) contrast(104%);
}

.home_four .wsus_topbar {
    background-color: var(--white-color);
}

.home_two .header-button a.btn.btn {
    background-color: var(--theme-color);
}

.home_two .header-button a.btn.btn .link-effect span {
    color: var(--title-color);
}

.product-about .actions .btn {
    padding: 21.5px 30px;
}

.product-about .actions {
    gap: 10px;
}

.choose-us-title p {
    margin-bottom: calc(var(--section-title-space) - 43px);
    margin-top: -0.18em;
    font-weight: 600;
    letter-spacing: -1.8px;
    font-family: var(--title-font);
    color: var(--title-color);
    text-transform: none;
    font-size: 60px;
    line-height: 1.2;
    /* Extra small devices */
}

.woocommerce-checkout .form-control,
.woocommerce-checkout .form-select {
    margin-bottom: 4px;
}

@media (max-width: 1399.99px) {
    .choose-us-title p {
        font-size: 45px;
        line-height: 1.2;
    }
}

@media (max-width: 767.99px) {
    .choose-us-title p {
        font-size: 32px;
    }

    .woocommerce-checkout .form-control,
    .woocommerce-checkout .form-select {
        margin-bottom: 10px;
    }
}

@media (min-width: 992.00px) and (max-width: 1199.99px) {
    .home_three .blog-grid .blog-img a {
        width: 375px;
        height: 300px;
    }

    .home_three .blog-grid {
        flex-wrap: wrap;
    }

    .home_three .blog-grid .blog-content {
        width: 53%;
    }

    .home_three .blog-grid .blog-img {
        min-width: initial;
        width: 370px;
    }

    .home_three .blog-grid .blog-img a {
        height: 300px !important;
    }
}

@media (min-width: 768.00px) and (max-width: 991.99px) {
    .home_three .blog-grid .blog-img a {
        height: 300px !important;
    }
}

@media (max-width: 390px) {
    .choose-us-title p {
        font-size: 30px;
    }
}

@media (max-width: 575px) {
    .shop-page.product-img{
        height: 350px;
    }
    .choose-us-title p {
        letter-spacing: normal;
    }

    .home_three .blog-grid .blog-img a {
        height: auto;
    }
}

@media (min-width: 1200px) and (max-width: 1399.99px) {
    .header-layout3 .main-menu>ul>li>a {
        padding: 44.5px 15px;
    }

    .header-layout3 .header-button {
        margin-left: 30px;
    }
}
@media (min-width: 1400px){
    .shop-page.product-img{
        height: 416px;
    }
}

@media (min-width: 1400px) and (max-width: 1599.99px) {
    .home_four .blog-card .blog-img {
        height: 350px;
    }

    .portfolio-wrap.style2 .portfolio-thumb {
        height: 450px;
    }

    .blog_page_two_column .blog-post-thumb img {
        height: 360px;
    }

    .home_three .blog-grid .blog-content {
        min-width: 440px;
    }
}

@media (min-width: 1200px) and (max-width: 1399.99px) {
    .shop-page.product-img{
        height: 370px;
    }
    .home_four .project-area-4 .portfolio-wrap {
        height: 410px;
    }

    .home_four .blog-card .blog-img {
        height: 360px;
    }

    .blog__details-thumb img {
        height: 635px;
    }

    .blog-post-description img {
        height: 340px;
    }

    .portfolio-wrap.style2 .portfolio-thumb {
        height: 335px;
    }

    .portfolio-wrap.style2 .portfolio-details .portfolio-title {
        font-size: 22px;
    }

    .home_two .blog-card .blog-img {
        height: 400px;
    }

    .home_main .blog-card .blog-img img {
        height: 300px;
    }

    .blog_page_two_column .blog-post-thumb img {
        height: 310px;
    }

    .main-menu>ul>li>a {
        padding: 46.5px 15px;
    }

    .header-button {
        margin-left: 40px;
    }

    .pricing-card .pricing-card_price {
        font-size: 28px !important;
    }

    .home_three .blog-grid .blog-content {
        min-width: 385px !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.99px) {
    .shop-page.product-img{
        height: 300px;
    }
    .home_four .project-area-4 .portfolio-wrap {
        height: 335px;
    }

    .home_four .blog-card .blog-img {
        height: 280px;
    }

    .wsus__dashboard_invoice .table tr th,
    .wsus__dashboard_invoice .table tr td {
        min-width: 135px;
    }

    .blog-post-thumb img {
        height: 510px;
    }

    .blog__details-thumb img {
        height: 510px;
    }

    .blog-post-description img {
        width: 47%;
        height: 265px;
    }

    .portfolio-wrap.style2 .portfolio-thumb {
        height: 325px;
    }

    .portfolio-wrap.style2 .portfolio-details .portfolio-title {
        font-size: 24px;
    }

    .home_two .blog-card .blog-img {
        height: 350px;
    }

    .home_main .blog-card .blog-img img {
        height: 250px;
    }

    .main-menu>ul>li>a {
        padding: 46.5px 15px !important;
    }

    .blog_page_two_column .blog-post-thumb img {
        height: 245px;
    }

    .pricing-card .pricing-card_price {
        font-size: 24px !important;
    }

    .pricing-card .pricing-card_price .duration {
        font-size: 16px;
    }

}

@media (min-width: 768px) and (max-width: 991.99px) {
    .shop-page.product-img{
        height: 320px;
    }
    .home_four .project-area-4 .portfolio-wrap {
        height: 250px;
    }

    .home_four .blog-card .blog-img {
        height: 280px;
    }

    .portfolio-wrap.style3 .portfolio-details .portfolio-title {
        font-size: 20px;
    }

    .wsus__dashboard_invoice .table tr th,
    .wsus__dashboard_invoice .table tr td {
        min-width: 150px;
    }

    .blog-post-thumb img {
        height: 570px;
    }

    .blog__details-thumb img {
        height: 570px;
    }

    .blog-post-description img {
        height: 305px;
    }

    .portfolio-wrap.style2 .portfolio-thumb {
        height: 570px;
    }

    .home_two .blog-card .blog-img {
        height: 370px;
    }

    .home_main .blog-card .blog-img img {
        height: 290px;
    }

    .blog_page_two_column .blog-post-thumb img {
        height: 275px;
    }

    .header_language {
        justify-content: center;
    }

    .home_four .wsus_topbar {
        background-color: var(--theme-color);
    }

    .pricing-card .pricing-card_price {
        font-size: 34px !important;
    }

    .home_three .blog-grid .blog-content {
        min-width: 390px;
    }
}

@media (min-width: 576px) and (max-width: 767.99px) {
    .shop-page.product-img{
        height: 260px;
    }
    .home_four .project-area-4 .portfolio-wrap {
        height: 550px;
    }

    .home_four .sec-title p {
        font-size: 38px;
    }

    .home_four .blog-card .blog-img {
        height: 420px;
    }

    .wsus__dashboard_invoice_right {
        text-align: left;
    }

    .blog-post-thumb img {
        height: 420px;
    }

    .blog__details-thumb img {
        height: 420px;
    }

    .blog-post-description img {
        width: 100%;
        height: auto;
        margin-bottom: 1rem;
    }

    .blog-post-item-two .blog-post-thumb img {
        height: 360px;
    }

    .portfolio-wrap.style2 .portfolio-thumb {
        height: 425px;
    }

    .home_two .blog-card .blog-img {
        height: 420px;
    }

    .home_main .blog-card .blog-img img {
        height: 440px;
    }

    .blog-post-item-two .blog-post-thumb img {
        height: 420px;
    }

    .header_language {
        justify-content: center;
    }

    .home_four .wsus_topbar {
        background-color: var(--theme-color);
    }

    .home_three .blog-grid .blog-img a {
        height: 230px;
    }

    .home_three .blog-grid .blog-content {
        min-width: 265px !important;
        width: 51%;
    }
}

@media (max-width: 575.99px) {
    .wsus__sign_in_form form h3 {
        font-size: 22px;
    }

    .wsus__sign_in_form form {
        padding: 25px 25px 0px 25px;
    }

    .wsus__sign_in_form .wsus__another_login {
        padding: 0px 25px;
    }

    .wsus__sign_in_form .dont_account {
        padding: 0px 25px 25px 25px !important;
        margin: 0 !important;
    }

    .forgot_password .dont_account {
        margin-top: 25px !important;
    }

    .home_four .sec-title p {
        font-size: 32px;
    }

    .home_four .project-area-4 .portfolio-wrap {
        height: auto;
    }

    .pricing-card .pricing-card_price {
        font-size: 34px;
    }

    .home_four .blog-card .blog-img {
        height: auto;
    }

    .wsus__dashboard_invoice_right {
        text-align: left;
    }

    .blog-post-thumb img {
        height: auto;
    }

    .blog__details-thumb img {
        height: auto;
    }

    .blog-post-description img {
        width: 100%;
        height: auto;
    }

    .blog-post-item-two .blog-post-thumb img {
        height: auto;
    }

    .portfolio-wrap.style2 .portfolio-thumb {
        height: 320px;
    }

    .home_two .blog-card .blog-img {
        height: auto;
    }

    .home_main .blog-card .blog-img img {
        height: auto;
    }

    .header_language {
        justify-content: center;
    }

    .home_four .wsus_topbar {
        background-color: var(--theme-color);
    }

    .blog-grid .blog-img {
        min-width: initial;
        width: 100% !important;
    }

    .blog-grid .blog-content {
        width: 100% !important;
    }

    .home_three .blog-grid .blog-content {
        width: 100% !important;
        min-width: 100% !important;
    }

    .home_three .blog-grid .blog-img a {
        height: auto !important;
    }
}

.table.table-no-border,
.table.table-no-border tr td {
    border: none;
}

.dashboard_invoice_top .wsus__dashboard_invoice_left h2 {
    color: var(--light-color);
    margin-bottom: 12px;
    text-transform: uppercase;
    font-size: 28px;
}

.dashboard_invoice_top .wsus__dashboard_invoice_left h5 {
    color: var(--light-color);
    margin-top: 20px;
    font-size: 16px;
}

img.cart-product-img {
    height: 60px;
    width: 60px;
}

.modal-dialog.custom-max-width {
    max-width: 700px;
}

.billing-address-select {
    height: 52px;
}

.testi-box_profile .testi-box_name.name {
    line-height: 1.333;
    font-size: 24px;
}

h3.blog-title {
    font-size: 24px;
}

.comments-wrap .latest-comments .children {
    padding: 0;
}

.comments-wrap .latest-comments .list-wrap li>.children {
    margin-left: 100px;
}

.comments-wrap .latest-comments .list-wrap li>.children li>.children {
    margin-left: 0;
}

@media (max-width: 767px) {
    .testi-box_profile .testi-box_name.name {
        font-size: 22px;
    }

    h3.blog-title {
        font-size: 16px !important;
    }

    .home_three .blog-grid {
        flex-wrap: wrap;
    }

    .home_three .blog-grid .blog-img {
        min-width: initial;
        width: 250px;
    }

    .comments-wrap .latest-comments .list-wrap li>.children {
        margin-left: 20px;
    }

    .home_three .blog-meta a,
    .home_three .blog-meta span {
        font-size: 14px;
    }

}

a.wpcc-privacy {
    font-weight: 600;
    display: block;
    margin-top: .5rem;
}

.home_three .blog-grid .blog-content {
    min-width: 445px;
}

.home_three .blog-grid .blog-img a {
    display: block;
    width: 100%;
    height: 270px;
}

.product_meta>span>a a::after,
.product_meta>span>span a:last-child:after {
    content: "";
}

.home_main .hero-style1 .hero-title {
    line-height: 1.4;
}
.header-logo,.footer-logo {
    max-width: 120px!important;
}
/* ------------------------------------------------------------------
   Dotlms — secondary (outline) button.
   .btn sets a near-black background and .btn-border sets a transparent
   one; they have equal specificity, so the winner depends on source
   order in the minified theme sheet. Pin it with a two-class selector
   so the outline button can never render dark text on a dark fill.
   ------------------------------------------------------------------ */
.btn.btn-border {
    background-color: transparent;
    color: var(--title-color);
    border: 2px solid var(--title-color);
}

.btn.btn-border:hover,
.btn.btn-border:focus,
.btn.btn-border:active {
    background-color: var(--title-color);
    color: var(--white-color);
    border-color: var(--title-color);
}

/* Same guard on a dark ground, where the outline has to invert. */
.bg-title .btn.btn-border {
    color: var(--white-color);
    border-color: var(--white-color);
}

.bg-title .btn.btn-border:hover {
    background-color: var(--white-color);
    color: var(--title-color);
}

/* ------------------------------------------------------------------
   Dotlms — header clearance for pages with NO breadcrumb banner.

   .nav-header is `position: absolute; top: 0`, so it floats over the page
   and occupies no space in flow. Every stock page absorbs that with
   `.breadcumb-wrapper { margin-top: 106px / 90px / 86px }` — the banner's
   own margin is what pushes content clear of the header.

   Strip the breadcrumb (as /rdv and /themes do) and that clearance goes
   with it: `space-top` alone gives 140px on desktop (enough for a ~106px
   header) but only 80px on mobile (NOT enough for an ~86px one), which is
   why such pages looked right on desktop and cropped the heading on a phone.

   Use this INSTEAD of `space-top` on any breadcrumb-less page.
   ------------------------------------------------------------------ */
.page-no-breadcrumb {
    padding-top: 166px;
}

@media (max-width: 1199px) {
    .page-no-breadcrumb {
        padding-top: 142px;
    }
}

@media (max-width: 767px) {
    .page-no-breadcrumb {
        padding-top: 126px;
    }
}

@media (max-width: 575px) {
    .page-no-breadcrumb {
        padding-top: 118px;
    }
}

/* ==================================================================
   Dotlms — brand system.  See docs/07-decisions-log.md, ADR-0021.

   The brand is a DARK petrol, #0F4C5C (9.51:1 on white). That one
   property is what makes the rest of the system work: the vendor
   theme's single biggest use of --theme-color is `color:` — 21 rules,
   the first of which is bare `a` — plus 12 more on borders. A dark
   brand makes every one of those correct by default, and also fixes
   the 6 vendor rules that pair a --theme-color fill with white text
   (checkboxes, radios, .badge, .category-tag, submenu chips, calendar
   caption) which no light accent could ever satisfy.

   Roles:
     --theme-color   the brand. Text, links, borders, fills under white.
     --brand-deep    pressed state of a brand fill.
     --brand-tint    pale petrol. Section bands — never the brand itself.
     --accent        saffron. Used sparingly, as a fill with dark ink.
     --accent-ink    the same warmth when it has to be text on white.

   Tokens are declared in frontend/layouts/styles.blade.php, which loads
   after this file, so Site Appearance settings can drive them.
   ================================================================== */

/* ---- 1. the primary button carries the brand -------------------
   The theme ships `.btn { background-color: var(--title-color) }`, so
   every call to action is near-black and says nothing about who we
   are. The label is already white, so moving the fill to the brand is
   a straight swap: white on petrol is 9.51:1. */
.btn {
    background-color: var(--theme-color);
}

.btn:hover,
.btn:focus-visible,
.btn:active {
    background-color: var(--brand-deep);
}

/* .btn-border is outlined in ink and fills with ink on hover — it never
   touched the brand, and it stays as the quiet second action. */
.btn.btn-border {
    background-color: transparent;
}

/* ---- 2. the only vendor fills that assume DARK ink --------------
   Everything else either inherits or already asks for white. */
.btn.style2,
.sidemenu-wrapper .chat-btn {
    color: var(--white-color);
}

/* ---- 3. fills that carried hand-written dark-ink overrides ------
   These were written when the brand was a light colour and dark ink
   was the only readable option. The brand is dark now, so they take
   white instead. */
.wsus_topbar,
.wsus_topbar a,
.wsus_topbar span,
.wsus_topbar i,
.home_four .wsus_topbar,
.home_four .wsus_topbar a,
.home_two .header-button a.btn.btn,
.home_two .header-button a.btn.btn .link-effect span {
    color: var(--white-color);
}

/* ---- 4. .bg-theme is a SECTION background, not the brand --------
   The theme paints five full-width sections with
   `.bg-theme { background-color: var(--theme-color) !important }`.
   At brand strength that is five dark slabs down the page. Sections
   take the pale tint; the brand keeps its accent role. !important is
   required to beat the theme's own !important. */
.bg-theme,
.bg-theme2 {
    background-color: var(--brand-tint) !important;
    color: var(--body-color);
}

/* Headings and body text need no rules here: every h1-h6 carries its own
   var(--title-color), and everything else inherits var(--body-color) from the
   section above. An explicit `.bg-theme span` rule was worse than useless — it
   outranked the inherited white on button labels and painted them slate on a
   petrol fill. */

.bg-theme .btn {
    background-color: var(--theme-color);
    color: var(--white-color);
}

.bg-theme .btn:hover,
.bg-theme .btn:focus-visible {
    background-color: var(--brand-deep);
}

.bg-theme .btn.btn-border {
    background-color: transparent;
    color: var(--theme-color);
    border-color: var(--theme-color);
}

.bg-theme .btn.btn-border:hover,
.bg-theme .btn.btn-border:focus {
    background-color: var(--theme-color);
    color: var(--white-color);
}


/* ---- 5. the marquee band ---------------------------------------
   One deliberately solid rule of brand across the page, sitting
   between tinted sections so the scroll has a rhythm instead of one
   flat tone. White words; saffron separators at 4.41:1 on the band,
   which is the one place the warm accent earns its keep on every
   screen. */
.slider__marquee,
.marquee-wrap {
    background-color: var(--theme-color);
}

/* The vendor prefixes these with .marquee-wrap (0,3,1 and 0,3,2). Without that
   prefix our rules are a level lighter and silently lose — which is exactly how
   the separators stayed petrol-on-petrol and vanished into the band. */
.marquee-wrap .marquee__group .m-item span {
    color: var(--white-color);
}

.marquee-wrap .marquee__group .m-item span i {
    color: var(--accent);
    opacity: 1;
    /* The star inherits the 36px headline size otherwise and competes
       with the words it is supposed to separate. */
    font-size: .5em;
    vertical-align: middle;
    /* Theme sets a physical margin-right, which points the wrong way
       in Arabic. */
    margin-right: 0;
    margin-inline-end: 18px;
    margin-inline-start: 2px;
}

/* ---- 6. links inside running text ------------------------------
   A petrol link and slate body text are only 1.17:1 apart, so colour
   alone cannot mark a link inside a paragraph. Underline it — which is
   what a prose link should have anyway. Buttons and the theme's own
   link components are excluded. */
.project-details-page-area p a:not(.btn):not(.link-btn),
.project-details-page-area li a:not(.btn):not(.link-btn),
.blog-content p a:not(.btn):not(.link-btn),
.blog-content li a:not(.btn):not(.link-btn) {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

/* ---- 7. the saffron accent -------------------------------------
   Deliberately rationed: it marks the one thing that matters on a
   screen and nothing else. As a fill it takes dark ink (8.2:1); when
   it has to be text on white it switches to --accent-ink (5.08:1). */
.accent-chip {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 999px;
    background-color: var(--accent);
    color: var(--title-color);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.text-accent {
    color: var(--accent-ink);
}

/* Where the accent recurs. Two forms, chosen by ground:

     --accent      only as a FILL, with dark ink on it (8.2:1), or on the brand
                   band (4.41:1). As text or a thin line on a light ground it is
                   2.0:1 and fails, so it is never used that way.
     --accent-ink  the same warmth when it has to BE the mark: 5.08:1 on white,
                   4.67:1 on smoke.

   Measured and deliberately excluded: the skill bars. A 4px bar encodes a value,
   so it is a meaningful graphic needing 3:1, and saffron on the tint is 1.95:1.
   Those stay ink. */

/* Counters — the figure itself, so it takes the text-safe warmth. */
.counter-card_number,
.counter-card .counter-card_number {
    color: var(--accent-ink);
}

/* The FAQ's open/close marker. */
.accordion-card .accordion-button::after,
.accordion-card .accordion-button:not(.collapsed)::after {
    color: var(--accent-ink);
}


/* ---- 8. the top bar is a contact ticker ------------------------
   Four ways to reach us, sliding on a brand band. It pauses on hover and on
   keyboard focus, so a link is never a moving target; three copies of the list
   make the loop seamless, and only the first is exposed to assistive tech. */
.dot-topbar {
    padding: 0;
    font-size: 14px;
}

.dot-topbar-viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.dot-topbar-track {
    display: flex;
    width: max-content;
    animation: dot-topbar-scroll 38s linear infinite;
}

.dot-topbar-viewport:hover .dot-topbar-track,
.dot-topbar-track:focus-within {
    animation-play-state: paused;
}

.dot-topbar-list {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dot-topbar-list li {
    display: flex;
    align-items: center;
}

/* The separator lives in the margin gap rather than beside the text, so a
   label never sits tight against it. Saffron on the band is 4.41:1. */
.dot-topbar-list li::after {
    content: "";
    flex: none;
    width: 4px;
    height: 4px;
    margin-inline: 22px;
    border-radius: 50%;
    background: var(--accent);
}

.dot-topbar-list a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    /* 16 + 16 + an 18px line box = the 50px that `.nav-header { top: 50px }`
       reserves for this bar, so the header sits flush under it. */
    padding: 16px 0;
    color: var(--white-color);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

.dot-topbar-list a:hover,
.dot-topbar-list a:focus-visible {
    color: var(--white-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dot-topbar-list a i {
    color: var(--accent);
    font-size: 13px;
}

@keyframes dot-topbar-scroll {
    from {
        transform: translateX(0);
    }

    to {
        /* One list of three, so the track is back where it started. */
        transform: translateX(calc(-100% / 3));
    }
}

[dir="rtl"] .dot-topbar-track {
    animation-direction: reverse;
}

/* Reduced motion: a plain centred row, not a frozen ticker. */
@media (prefers-reduced-motion: reduce) {
    .dot-topbar-viewport {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .dot-topbar-track {
        animation: none;
        width: 100%;
    }

    .dot-topbar-list {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    .dot-topbar-list[aria-hidden="true"] {
        display: none;
    }

    .dot-topbar-list li:last-child::after {
        display: none;
    }
}


/* ---- 8b. the dark header (layout2, used on the home page) ------
   The CTA sits first on the dark hero image and then on the near-black sticky
   bar. The brand fill is only 1.86:1 against either, so the button shape would
   vanish; saffron is 8.2:1 on both, with ink on top at 8.2:1 too.

   A compact pill: 14.5 + 14.5 padding + the 17px .link-effect window = 46px.
   No border — the fill already draws the shape, and one less edge is one less
   thing to look at. */
.header-layout2 .header-button .btn,
.header-layout3 .header-button .btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14.5px 22px;
    border: 0;
    border-radius: 999px;
    background-color: var(--accent);
}

.header-layout2 .header-button .btn .link-effect span,
.header-layout2 .header-button .btn i,
.header-layout3 .header-button .btn .link-effect span,
.header-layout3 .header-button .btn i {
    color: var(--title-color);
}

.header-layout2 .header-button .btn i,
.header-layout3 .header-button .btn i {
    font-size: 14px;
    line-height: 1;
}

/* Deliberately flat on hover. The theme's .link-effect already slides the label
   up to its duplicate, which is affordance enough without a colour change.

   This rule is not optional decoration: the global `.btn:hover` (0,2,0) repaints
   every button with --brand-deep, so without pinning it here at (0,4,0) the
   header CTA would turn petrol on hover. */
.header-layout2 .header-button .btn:hover,
.header-layout2 .header-button .btn:active,
.header-layout3 .header-button .btn:hover,
.header-layout3 .header-button .btn:active {
    background-color: var(--accent);
}

/* Keyboard focus is not a hover style — it still needs to be visible. */
.header-layout2 .header-button .btn:focus-visible {
    outline: 2px solid var(--white-color);
    outline-offset: 3px;
}

/* ---- 12. one header for the whole site ------------------------------
   The home page's bar is the brand: ink, white wordmark, saffron CTA. Every
   other page used layout3, which shipped as a white bar with the dark logo —
   so the site changed identity the moment a visitor left the home page.

   layout3 keeps its own markup and positioning (it is absolute, and the inner
   pages already reserve the space); only the surface changes. The saffron pill
   needs no border here: at 8.2:1 on ink it already draws its own shape, and the
   focus ring goes back to white like layout2's. */
.header-layout3.header-dark {
    background-color: var(--title-color);
}

.header-layout3 .main-menu > ul > li > a,
.header-layout3 .main-menu > ul > li > a:hover,
.header-layout3 .header-button .search-btn {
    color: var(--white-color);
}

/* The dropdown stays a white card — the items inside it are ink on white. */
.header-layout3 .main-menu ul.sub-menu {
    background: var(--white-color);
}

.header-layout3 .main-menu ul.sub-menu a,
.header-layout3 .main-menu ul.sub-menu li.active > a {
    color: var(--title-color);
}

/* Sticky repaints every header white (style.css, .sticky-wrapper.header-sticky).
   layout2 overrides it; layout3 has to as well or the bar flips colour the
   moment the page scrolls. */
.header-layout3 .sticky-wrapper.header-sticky {
    background-color: var(--title-color);
}

.header-layout3 .header-button .btn:focus-visible {
    outline: 2px solid var(--white-color);
    outline-offset: 3px;
}

.header-layout3 .sidebar-btn,
.header-layout3 .menu-toggle.sidebar-btn {
    border-color: var(--white-color);
}

.header-layout3 .sidebar-btn .line,
.header-layout3 .menu-toggle.sidebar-btn .line {
    background-color: var(--white-color);
}

/* The panel's one action. The theme ships it as a 210px circle, which cannot
   hold "Parlons de votre projet" — the label wrapped to three lines and spilled
   out of it, and the circle itself was clipped by the panel edge. A full-width
   pill holds the words and matches every other button on the site.
   Ink on saffron is 8.20:1; the white hover carries petrol at 9.51:1. */
.sidebar-cta {
    margin-top: 34px;
}

.sidemenu-wrapper .chat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: auto;
    padding: 17px 24px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--title-color);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
}

.sidemenu-wrapper .chat-btn i {
    font-size: 15px;
    line-height: 1;
    flex: none;
}

.sidemenu-wrapper .chat-btn:hover,
.sidemenu-wrapper .chat-btn:focus-visible {
    background: var(--white-color);
    color: var(--theme-color);
}


/* The header row is three auto-width columns: logo, the 7-item menu, then the
   CTA and the panel toggle. Past a certain width they no longer fit and the row
   WRAPS — the CTA drops onto a second line and the whole header falls across the
   hero. Pin it to one line and buy the space back from the menu's very generous
   40px-per-item side padding, which is where the overflow actually comes from. */
/* Desktop only: below 992px the menu and the CTA are display:none and the row
   holds just the logo and the burger, so pinning it to one line there only
   forces the page wider than the phone. */
@media (min-width: 992px) {
    .header-layout2 .menu-area > .container-fluid > .row,
    .header-layout3 .menu-area > .container-fluid > .row {
        flex-wrap: nowrap;
    }

    .header-layout2 .header-logo,
    .header-layout2 .header-button,
    .header-layout3 .header-logo,
    .header-layout3 .header-button {
        flex: none;
    }

    .header-layout2 .main-menu > ul > li > a,
    .header-layout3 .main-menu > ul > li > a {
        padding-inline: 15px;
    }
}

@media (max-width: 1399px) {
    .header-layout2 .main-menu > ul > li > a,
    .header-layout3 .main-menu > ul > li > a {
        padding-inline: 10px;
        font-size: 14px;
    }
}

@media (max-width: 1199px) {
    .header-layout2 .main-menu > ul > li > a,
    .header-layout3 .main-menu > ul > li > a {
        padding-inline: 7px;
        font-size: 13px;
    }

    /* Narrower to buy back row width, but padding-inline only — the block
       padding stays, so the button keeps the 60px height that matches the
       burger, which does not shrink until 575px. */
    .header-layout2 .header-button .btn,
    .header-layout3 .header-button .btn {
        padding-inline: 18px;
        font-size: 12px;
    }
}


/* ---- 9. mobile menu -------------------------------------------
   The theme caps only `.mobile-logo svg` at 185px, because the logo it shipped
   was an SVG. Ours is a PNG, so nothing constrained it and it rendered at its
   intrinsic 600px inside a 270px panel, running off the edge. Cap the image
   itself, not the element type. */
.mobile-menu-wrapper .mobile-logo img,
.mobile-menu-wrapper .mobile-logo svg {
    max-width: 150px;
    width: 100%;
    height: auto;
}

.mobile-menu-wrapper .mobile-logo {
    padding: 28px 0 34px;
}

/* The booking CTA on the white panel: white fill, brand border, brand label.
   Brand on white is 9.51:1, and the 2px border reads at 9.51:1 too.

   It needs this specificity (0,3,0) rather than a plain `.btn` override: the
   global `.btn:hover` repaints every button with --brand-deep at (0,2,0), so a
   lighter selector would lose the moment the button is touched. */
.mobile-menu-wrapper .mobile-menu .btn,
.mobile-menu-wrapper .mobile-menu .btn:hover,
.mobile-menu-wrapper .mobile-menu .btn:focus-visible,
.mobile-menu-wrapper .mobile-menu .btn:active {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14.5px 22px;
    border: 2px solid var(--theme-color);
    border-radius: 999px;
    background-color: var(--white-color);
}

.mobile-menu-wrapper .mobile-menu .btn .link-effect span,
.mobile-menu-wrapper .mobile-menu .btn i {
    color: var(--theme-color);
}

.mobile-menu-wrapper .mobile-menu .btn i {
    font-size: 14px;
    line-height: 1;
}

/* The language switcher that used to live in the side panel was removed on
   request, and its styles went with it. Nothing on the site offers language
   switching now — the locale follows the session default. */


/* ==================================================================
   Dotlms - contact line in the home footer.

   footer-layout.two prints the address on every other page. The home
   footer had no contact information at all, which is the wrong page to
   leave it off. One line between the links and the copyright bar: a
   third column would have unbalanced the menu row.
   ================================================================== */
.dot-footer-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 38px;
    margin: 0;
    padding: 26px 0 0;
    border-top: 1px solid var(--border-color);
    list-style: none;
}

.dot-footer-contact li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--body-color);
}

.dot-footer-contact i {
    font-size: 13px;
    color: var(--accent-ink);
}

.dot-footer-contact a {
    color: var(--body-color);
    transition: color .3s ease;
}

.dot-footer-contact a:hover {
    color: var(--theme-color);
}

@media (max-width: 575px) {
    .dot-footer-contact {
        gap: 12px 0;
        flex-direction: column;
    }
}


/* ==================================================================
   Dotlms - the shared footer's bottom row.

   The contact line and the newsletter share one row instead of taking
   one each; footer-layout.one is now on every page and did not need to
   grow by another band to absorb footer-layout.two's subscribe form.
   ================================================================== */
.dot-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 26px 48px;
    padding-top: 26px;
    border-top: 1px solid var(--border-color);
}

.dot-footer-bottom .dot-footer-contact {
    flex: 1 1 420px;
    padding-top: 0;
    border-top: 0;
}

.dot-footer-news {
    flex: 0 1 330px;
    min-width: 260px;
}

.dot-footer-news label {
    display: block;
    margin-bottom: 12px;
    font-family: var(--title-font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -.2px;
    color: var(--title-color);
}

.dot-footer-news .newsletter-form {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--title-color);
}

.dot-footer-news .form-control {
    flex: 1;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 15px;
    color: var(--title-color);
}

.dot-footer-news .form-control:focus {
    outline: none;
    box-shadow: none;
}

.dot-footer-news .subscribe_btn {
    flex: none;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 17px;
    color: var(--title-color);
    transition: color .3s ease, transform .3s ease;
}

.dot-footer-news .subscribe_btn:hover {
    color: var(--theme-color);
    transform: translateX(3px);
}

@media (max-width: 767px) {
    .dot-footer-bottom {
        gap: 24px;
    }

    .dot-footer-news {
        flex: 1 1 100%;
    }
}

/* ==================================================================
   Dotlms - blog titles are sentence case, not Title Case.

   The theme applies text-transform: capitalize to post headings,
   which is an English convention. Applied to French it produces
   "Posséder Ou Louer Sa Plateforme De Formation" - every article,
   every listing, wrong in the site's default language. Arabic has no
   case at all, so the rule is meaningless there too.
   ================================================================== */
.blog-post-content .title,
.blog__details-content > .title,
.blog__details-content .title-two,
.sidebar__post-content .title,
.recent-post .post-title,
.blog-title,
.blog-card .blog-title {
    text-transform: none;
}