
:root{
    --main-color: #d72435;
    --dark-red:#8DC443;
    --secondary-color:#026938;
    --light-color:#EBE4DC;
    --text-color:#212529;
    --black-color: #000;
    --white-color:#fff;
    --border-color:#dee2e6;
}

@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');


html {
    overflow-y: scroll;
    overflow-x: hidden;
}
body {
    color: var(--black-color);
    background: var(--white-color);
    font-size: 16px;
    font-family: "Outfit", sans-serif;
    font-weight: 400;   
    overflow-x: hidden;
}

ul{
    margin: 0;
    padding: 0;
}

li{
    list-style: none;
}


p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}

h1, h2, h3, h4, h5, h6{
    font-family: "Barlow Semi Condensed", sans-serif;
    margin: 0;
}

img {
    width: 100%;
    max-width: 100%;
}

a {
    font-size: 18px;
    text-decoration: none;
    font-family: "Barlow Semi Condensed", sans-serif;
}

.site-wrapper {
    max-width: 2500px;
    margin: 0 auto;
}

/* Global Section Padding */

.services_block_sec, .main_hero_section, .brand_logo_sec, .recently_added_sec, .recently_product_block, .building_product_sec, .steel_bending_sec {
    padding: 30px 0;
}


/* Update Css */

.top_header_section {
    background-color: var(--light-color);
}

.top_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 20px;
}

.serach_bar form {
    display: flex;
    align-items: center;
    position: relative;
}

.search_field {
    border: 1px solid var(--border-color);
    border-radius: 7px;
    width: 100%;
}

.search_field input {
    width: 690px;
    height: 56px;
    border: none;
    border-radius: 7px;
    padding: 0 15px;
}

.search_field input:focus-visible{
    outline: none;
}

.search_btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.search_btn a{
    color: var(--text-color);
}

.signup_btn_box {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: end;
}

.signup_btn_b a, .signup_btn a{
    color: var(--text-color);
    font-weight: 700;
    font-size: 18px;
}

.signup_btn a{
    font-weight: 400;
}

.logo {
    width: 180px;
}


.logo_bar {
    width: 25%;
    display: flex;
    align-items: center;
    /* gap: 15px; */
}

.signup_btn_cc {
    width: 20%;
}

.serach_bar {
    /* width: 60%; */
    width: 55%;
    display: flex;
    align-items: center;
    gap: 15px;
}

.deliver_ry{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.deliver_ry h4, .deliver_ry a {
    font-size: 18px;
    color: var(--text-color);
}

.deliver_ry a {
    width: 100%;
    text-align: center;
    position: relative;
}

.deliver_ry i{
    font-size: 15px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

/*  */


.header_logo {
    display: none;
}

.product_menu {
    background-color: var(--dark-red);
}

/* .service_menu {
    background-color: var(--secondary-color);
} */

.main_header .navbar-nav li a:hover:before {
    transform: scaleX(1) !important;
    transform-origin: 0 50% !important;
    transition-delay: .3s !important;
}

.main_header .navbar-nav li a:before {
    display: block;
    content: '';
    padding-top: 4px;
    border-bottom: 9px solid var(--white-color) !important;
    transform: scaleX(0) !important;
    transform-origin: 0 50%;
    bottom: -8px;
    left: 0;
    position: absolute;
    width: 100%;
    transition: transform .3s ease-in-out;
}

.main_header ul.navbar-nav {
    width: 100%;
    justify-content: space-between;
}


/* 
.main_header ul:first-of-type{
    padding-right: 50px;
} */

/* .main_header ul:last-of-type{
    padding-left: 50px;
} */

.main_header ul .nav-item a {
   color: var(--white-color);
   font-weight: 700;
   text-transform: uppercase;
   padding: 0;
   position: relative;
}

.main_header .container-fluid, .main_header_sec .container-fluid{
    padding: 0;
}

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

.main_header nav.navbar.navbar-expand-lg {
    padding: 0;
}

/* New Section */


.services_block {
    display: flex;
    gap: 20px;
    align-items: center;
    width: 25%;
}


.services_block_box {
    display: flex;
    justify-content: space-between;
}

.services_block_icon {
    max-width: 35px;
}

.services_block_content p {
    font-size: 16px;
}

.services_block_content span {
    font-weight: 700;
}

/* New Section */

.main_hero_block {
    display: flex;
    align-items: flex-start;
}

.list_categories_block {
    width: 15%;
}

.slider_content {
    width: 100%;
    padding: 0 25px;
}

.slider_content .slick-dots li button:before {
    font-size: 15px;
    color: var(--dark-red);
}

.slider_content .slick-dots li.slick-active button:before {
    color: var(--secondary-color);
}

.recently_product > img {
    height: 350px;
    object-fit: cover;
    object-position: 60% 0%;
}

.list_categories li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.list_categories li:last-of-type{
    border-bottom:none;
}

.list_categories a{
    color: var(--text-color);
}

.list_categories a:hover {
    color: var(--dark-red);
}


.list_categories i {
    color: var(--dark-red);
    font-size: 14px;
}

.vendors_btn a{
    background-color: var(--secondary-color);
    color: var(--white-color);
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 8px 0;
    font-size: 16px;
}

.vendors_btn a:hover{
    background-color: var(--dark-red);
}

/* New Section */

.logos_slider a{
    padding: 0 15px;
}

.logos_slider {
    margin: 0 -15px;
}

.logos_slider_content h3{
    font-size: 1.125rem;
    color: var(--text-color);
    font-weight: 700;
}

.logos_slider_content a{
    color: var(--secondary-color);
    font-size: .875em;
}
.logos_slider_content a:hover{
    color: var(--text-color);
}

.logos_slider_content {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
}

/*  */

.recently_product_block {
    display: flex;
    flex-wrap: wrap;
}

.recently_product_card {
    width: 25%;
    height: auto;
}
.recently_product_boc {
    padding: 10px 10px;
    margin: 10px 10px;
    display: flex;
    flex-direction: column;
    min-height: 520px;
    background: var(--white-color);
    /* box-shadow: 0 5px 5px 1px rgba(0, 0, 0, 0.1); */
    box-shadow: 0 5px 5px 1px var(--light-color);
    
}

.recently_product_des {
    margin-top: auto;
    padding-top: 20px;
}

.recently_product_des h4{
    color: var(--dark-red);
}

.recently_product_card a{
    color: var(--text-color);
}

.recently_product_des p{
    color: var(--secondary-color);
    padding-top: 20px;
}

.recently_product_des span{
    color: var(--text-color);
}

.wish_list_btn {
    display: flex;
    gap: 5px;
}

.wish_list_btn button {
    background-color: var(--border-color);
    border-radius: 100px;
    width: 40px;
    height: 40px;
    display: inline-block;
    padding: 10px;
    line-height: 1.1;
    border: none;
}

.wish_list_btn a:first-of-type{
    display: none;
}

.recently_product {
    position: relative;
}

.wish_list_btn {
    position: absolute;
    top: 10px;
    right: 0;
    opacity: 0;
}

.recently_product_boc:hover .wish_list_btn{
    opacity: 1;
}

/* .recently_product_card > a{
    display: inline-block;
} */

/* New Section */

.categories_title a > p {
    display: flex;
    justify-content: space-between;
    color: var(--secondary-color);
    font-weight: 700;
    font-size: 1.125rem;
}

.categories_title a > p span {
    color: var(--secondary-color);
    font-weight: 400;
    font-size: .875em;
}

.categories_title {
    padding: 20px 0;
}

.equipments_categories_list {
    display: flex;
    flex-wrap: wrap;
    /* margin: 0 -15px; */
    margin: 50px -15px 30px;
}

.equipments_categories_block {
    width: 25%;
    padding: 0 15px;
}

.recently_added_content a{
    color: var(--secondary-color);
    font-size: .875em;
}

.recently_added_content h2 {
    color: var(--dark-red);
    font-size: 35px;
    padding-bottom: 10px;
    border-bottom: 2px dashed var(--dark-red);
    width: max-content;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.recently_added_content p {

}


/* Top Footer */

.footer_info_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.footer_info_content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer_contact_box {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer_des h3, .footer_des p, .footer_ct_num a, .footer_ct_mail a{
    color: var(--white-color);
    font-size: 20px;
}

.footer_des p{
    font-size: 18px;
}

/* Footer */

.footer_sec {
    padding: 80px 0 50px;
}

.footer_content_list {
    width: 50%;
    display: flex;
    justify-content: space-between;
}

.footer_content {
    display: flex;
}

.footer_logo_block {
    width: 25%;
    padding-bottom: 50px;
}

.footer_logo {
    max-width: 300px;
}

.footer_icon_list {
    width: 25%;
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    flex-direction: column;
    align-items: end;
}

.footer_list_items h3 {
    font-size: 20px;
    font-weight: 600;
    padding-bottom: 15px;
}

.footer_list_items li{
    padding: 7px 0;
}

.footer_list_items a{
    color: var(--dark-red);
    font-size: 18px;
}

.f_social_icon li{
    display: inline-block;
    padding: 0 3px;
}

.f_social_icon ul{
    display: flex;
}

.f_social_icon img {
    max-width: 40px;
}

.maroof_logo img{
    max-width: 60px;
}

.mobile_product_block {
    display: none;
}

/* .desktop_product_block {
    display: block;
} */

/* About Sec */


.about_block_top, .about_block_bottom {
    display: flex;
    flex-wrap: wrap;
}

.about_top_image, .about_top_content {
    width: 50%;
}

.about_top_image img{
    height: 100%;
}

.about_top_content {
    padding: 0 50px;
}

.about_top_content_bb h2 {
    color: var(--dark-red);
    font-size: 35px;
    padding-bottom: 10px;
    border-bottom: 2px dashed var(--dark-red);
    width: max-content;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.about_top_content_bb p{
    margin: 0;
    padding: 20px 0;
}

.about_top_content_bb {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.about_image {
    height: 100%;
}

.about_image img {
    height: 100%;
    object-fit: cover;
}

.about_top_content_bb ul {
    margin: 0 -15px;
}

.about_top_content_bb ul > li {
    display: inline-block;
    margin: 0 15px;
    border: none;
}

.about_block_bottom .about_top_content {
    padding-left: 15px;
}

/* Media Query */

@media(max-width:1340px){

    .logo_bar, .serach_bar, .signup_btn_cc {
        width: auto;
    }

    .logo_bar {
        order: 1;
    }

    .signup_btn_cc {
        order: 2;
    }

    .serach_bar {
        order: 3;
        margin-top: 20px;
        justify-content: center;
        width: 100%;
    }

    .top_header {
        flex-wrap: wrap;
    }

    .deliver_ry {
        justify-content: left;
    }

    .deliver_ry a {
        text-align: left;
    }

    .deliver_ry i {
        right: 50px;
    }

    .serach_bar form {
        /* order: 2; */
        width: calc(100% - 50px);
    }

    .rfp_btn {
        /* order: 1; */
    }
    .search_field input {
        width: 100%;
    }

    .recently_product_card {
        width: 25%;
        height: auto;
    }
}

@media(max-width:1200px){

    .logo_bar .logo {
        display: none;
    }

    .main_header_sec .container-fluid {
        padding: 0 15px;
    }
    .main_header .container-fluid {
        padding: 0;
        justify-content: space-between;
    }

    ul.navbar-nav li {
        padding: 20px 10px;
    }

    .main_header ul:first-of-type {
        padding-right: 0;
    }

    .main_header ul:last-of-type {
        padding-left: 0;
    }

    .main_header ul.navbar-nav {
        width: 100%;
    }

    .services_block_box {
        flex-wrap: wrap;
    }

    .services_block {
        width: auto;
    }

    .list_categories a {
        font-size: 14px;
    }

    .recently_product_card {
        width: 33.33%;
    }

    .main_header button:focus:not(:focus-visible) {
        outline: 0;
        box-shadow: unset;
    }
    .main_header button.navbar-toggler {
        border: none !important;
    }

    .navbar-collapse.collapse.show {
        position: absolute;
        top: 60px;
        width: 100%;
        z-index: 99;
    }

    .navbar-collapse.collapsing {
        position: absolute;
        top: 60px;
        width: 100%;
        z-index: 99;
    }


}

@media(max-width:1024px){
    .main_hero_block {
        flex-wrap: wrap;
    }

    .list_categories_block {
        width: 50%;
        order: 1;
        padding: 0 25px;
    }

    .slider_content {
        width: 100%;
        padding: 0 25px;
    }

    .about_top_content_bb {
        display: inline-block;
        height: auto;
        padding: 30px 0;
    }
}

@media(max-width:992px){

    .header_logo img{
        width: 150px;
    }

    .header_logo {
        display: block;
    }

    ul.navbar-nav li {
        padding: 15px 15px;
        border-bottom: 2px solid var(--dark-red);
        width: 100%;
    }

    ul.navbar-nav li:last-of-type {
        border-bottom: none;
    }

    .product_menu {
        background-color: var(--light-color);
        padding: 20px 0px;
    }

    .services_block_box {
        flex-wrap: wrap;
    }

    .mobile_product_block {
        display: block;
    }

    .desktop_product_block {
        display: none;
    }

    .recently_product_des h4 {
        font-size: 20px;
    }

    .recently_product_des {
        padding-top: 20px;
    }

    .recently_product_boc {
        min-height: 420px;
    }

    .equipments_categories_block {
        width: 50%;
    }

    .footer_content {
        flex-wrap: wrap;
    }

    .footer_content_list {
        width: 100%;
        flex-wrap: wrap;
    }

    .footer_icon_list {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        padding: 20px 0 0;
        gap: 20px;
        align-items: center;
        flex-direction: unset;
    }

    .footer_logo_block {
        width: 100%;
        padding-bottom: 50px;
    }

    .footer_logo {
        margin: 0 auto;
    }

    .footer_sec {
        padding: 50px 0 50px;
    }

    .footer_info_content {
        flex-wrap: wrap;
    }

    .footer_contact_box {
        flex-wrap: wrap;
        justify-content: end;
    }

    .footer_des h3, .footer_des p, .footer_ct_num a, .footer_ct_mail a {
        font-size: 16px;
    }

    .footer_des p {
        font-size: 14px;
    }

    .about_top_content, .about_block_bottom .about_top_content {
        padding: 0;
    }

    .about_top_image, .about_top_content {
        width: 100%;
    }

    .about_block_bottom {
        flex-wrap: wrap-reverse;
    }

    .recently_added_content h2, .about_top_content_bb h2 {
        width: 100%;
        font-size: 25px;
    }
}

@media(max-width:767px){
    .list_categories_block {
        display: none;
    }

    .slider_content {
        padding: 0;
    }

}

@media(max-width:640px){
    .equipments_categories_block {
        width: 100%;
    }

    .footer_sec {
        padding: 50px 0 50px;
    }
}

@media(max-width:580px){
    .footer_list_items {
        width: 100%;
        padding-bottom: 20px;
    }
}