/*__fonts*/
@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Voltaire&display=swap');

/*--- variables ---*/
:root{
    /*--- color ---*/
    --sm-black-font: #000000;
    --sm-gray-font: #BBBBBB;
    --sm-white-font: #FFFFFF;

    --sm-translucid-white: #e1e1e140;
    --sm-translucid-gray: #69696995;
    --sm-dark-translucid: #00000015;
    --sm-shadow: #0e121b4d;
    --sm-translucid-black: #0e0f1395;

    --sm-black-background: #0D0D0D;
    --sm-black-highlight: #191a1b;
    --sm-dark-background: #1C2326;
    --sm-gray: #393E40;
    --sm-light-gray: #A4A6A1;
    --sm-dark-white: #F2F2F0;
    --sm-light-background: #eceff1;
    --sm-white-background: #FFFFFF;

    --sm-dark-red: #A61414;
    --sm-brand-red: #D91A1A;
    --sm-strong-red: #F21313;

    --sm-lighten-dark-red: #D63E20;
    --sm-lighten-red: #FC4A26;

    --sm-translucid-dark-red: #a6141485;
    --sm-translucid-light-red: #FC4A2685;
    --sm-pale-white: #e1e1e185;


    /*--- variables ---*/
    --nav-height: 52px;


    /*--- font-config ---*/
    /*__font-families*/
    --body-font: "DM Sans", sans-serif; /*regular_text*/
    --display-font: "Afacad Flux", sans-serif; /*display_titles*/
    --secondary-display-font: "Voltaire", sans-serif; /*display_subtitles*/

    /*__typography*/
    /*note: 1rem = 16px*/
    --body-font-size: .938rem; /*p: 15px*/
    --caption-font-size: 12px; /*small-caption*/
    --title-font-size: clamp(2.375rem, 5vw, 3rem); /*h1: 38-48px*/    
    --section-font-size: clamp(1.75rem, 3vw, 2rem); /*h2: 28-32px*/
    --subsection-font-size: 1.5rem; /*h3: 24px*/
    --subtitle-font-size: 1.28rem; /*h4: 20px*/
    /*__special-typography*/
    --nav-font-size: clamp(1rem, 5vw, 1.125rem); /*16-18px*/
    --header-font-size: clamp(3rem, 6vw, 4.25rem); /*48-68px*/

    /*__font-weight*/
    --extralight-font-weight: 200;
    --light-font-weight: 300;
    --normal-font-weight: 400;
    --semibold-font-weight: 600;
    --bold-font-weight: 700;
    --heavy-font-weight: 900;
}

/*--- html-reset ---*/
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

/*============== page-config ==============*/
html{
    scroll-padding-top: var(--nav-height);
    scroll-behavior: smooth; }
body{ /*__page*/
    font-family: var(--body-font);
    font-size: var(--body-font-size);
    background-color: var(--sm-light-background); }
main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: var(--nav-height); /*header_margin*/
    min-height: 100%; }
@media screen and (min-width: 1120px){ /*__nav-margin-small-screen-RESPONSIVE*/
    html{
        scroll-padding-top: calc(2.2rem + var(--nav-height));}
    main{
        margin-top: calc(var(--nav-height) + 1.2rem); }
}

main ::-webkit-scrollbar{ /*__scrollbar-config*/
    width: 28px;
    height: 28px; }
main ::-webkit-scrollbar-track{
    background-color: var(--sm-translucid-gray);
    border: 8px solid transparent;
    background-clip: padding-box;
    margin-block: 2px;
    border-radius: 15px; }
main ::-webkit-scrollbar-thumb{
    background-color: var(--sm-lighten-dark-red);
    border: 10px solid transparent;
    background-clip: padding-box;
    border-radius: 15px; }
main ::-webkit-scrollbar-thumb:hover{
    background-color: var(--sm-lighten-red); }

::selection { /*__text-highlight*/
  background-color: var(--sm-lighten-dark-red); 
  color: var(--sm-white-font); }

/*--- text ---*/
h1{ /*titles*/
    font-weight: var(--bold-font-weight);
    font-family: var(--display-font);
    font-size: var(--title-font-size); }
h2{ /*sections*/
    font-size: var(--section-font-size); }
h3{ /*subsections*/
    font-size: var(--subsection-font-size); }
h4{ /*subtitles*/
    margin: 0 0 6px;
    font-size: var(--subtitle-font-size); }
p{ /*body*/
    margin: 8px 0 16px;
    font-size: var(--bold-font-weight);
    font-size: var(--body-font-size); }
caption, small{ /*captions*/
    font-weight: var(--light-font-weight);
    font-size: var(--caption-font-size); }

/*============== classes-config ==============*/
/*--- general-classes ---*/
.container{
    position: relative;
    width: 100%;
    max-width: 1240px;
    padding: min(5vw, 40px); }
.section{
    justify-content: center;
    align-items: center;
    margin: 8px 0 24px; }
.white_icon{
    color: var(--sm-white-font); }
.content{
    display: flex; }

.title_container{
    position: relative;
    justify-content: center;
    text-align: center;
    margin-bottom: 3.5rem; }
.title_container::before{
    position: absolute;
    content: '';
    bottom: -8px;
    width: 20%;
    height: 4px;
    background-color: var(--sm-lighten-dark-red);
    transform: translateX(-50%); }
@media screen and (max-width: 524px) {
    .title_container::before{
        width: 50%;
    }
}

.subtitle_container{
    position: relative;
    margin-bottom: 0.5rem;
    margin-left: 12px;
}
.subtitle_container::before{
    position: absolute;
    content: '';
    background-color: var(--sm-lighten-dark-red);
    left: -10px;
    width: 3px;
    height: 1.8rem;
}

/*--- text ---*/
.bold_text{
    font-weight: var(--bold-font-weight); }


/*--- reusable-classes ---*/
/*__header*/
.header_cover{
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 12px;
    padding-bottom: 0.5rem;
     }
.header_cover h1{ /*__header-font-config*/
    margin-bottom: 1rem;
    line-height: var(--header-font-size);
    font-size: var(--header-font-size); }
.header_cover small, .header_cover caption{
    position: relative;
    margin-left: 12px;
    color: var(--sm-translucid-gray);
    font-size: var(--subtitle-font-size);
    font-family: var(--secondary-display-font); }
.header_cover small::before, .header_cover caption::before{
    position: absolute;
    content: '';
    background-color: var(--sm-lighten-dark-red);
    left: -10px;
    width: 3px;
    height: 1.28rem; }

.header_box{
    justify-self: center;
    width: 100%;
    max-width: 1240px;
    padding: 12px min(5vw, 40px); }
@media screen and (max-width: 1120px){ /*__header-box-small-screen-RESPONSIVE*/
    .header_box{
        display: flex;
        justify-content: center;
    }
}

.header_image{
    padding: 3.5rem 0;
    color: var(--sm-white-font);
    background: linear-gradient(135deg, var(--sm-translucid-black), var(--sm-translucid-light-red)), url(../images/sm-services_a01006042026.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; }
.header_image small, .header_image caption{
    color: var(--sm-pale-white); }

.header_float_content{
    padding: 1rem;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--sm-white-font);
    position: absolute;
    align-content: center;
    justify-self: center;
    justify-content: center;
    z-index: 1; }
.header_float_content small, .header_float_content caption{
    color: var(--sm-pale-white); }

/*__content_side_box*/
.content_side_box{
    width: 50%;
    align-self: center;
    margin-inline: 1rem; }
.content_side_box h2{
    position: relative;
    width: fit-content;
    margin-right: 12px; }
.content_side_box h2::before{
    content: '';
    position: absolute;
    background-color: var(--sm-lighten-dark-red);
    right: -16px;
    width: 4px;
    height: clamp(2rem, 3vw, 2.25rem); }
@media screen and (max-width: 1120px){ /*__content-grid-small-screen-RESPONSIVE*/
    .content{
        flex-direction: column; }
    .content_side_box{
        width: 100%; }
}

/*__diagonal_background*/
.diagonal_background{
    color: var(--sm-white-font);
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 50px;
    background-color: var(--sm-black-highlight);
    clip-path: polygon(0 0, 0 90%, 100% 100%, 100% 10%); }
@media screen and (min-width: 1920px){ /*__diagonal-config-4k-screen-RESPONSIVE*/
    .diagonal_background{
        padding: 40px;
        clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); }
}
@media (max-width: 480px){ /*__info-list-grid-phone-screen-RESPONSIVE*/
    .diagonal_background{
        padding: 40px;
        clip-path: polygon(0 0, 0 96%, 100% 100%, 100% 4%); }
}

/*__info_lists*/
.info_item_list{
    display: flex;
    justify-content: center;
    align-items: top;
    flex-wrap: wrap;
    margin: 1.5rem 0 3rem;
    gap: 16px; }
.item_box{ /*__four-columns*/
    display: flex;
    flex-direction: column;
    flex: 0 1 calc(25% - 16px); }
.info_item_box{
    text-align: center; }

.info_item_list.triple_item_column{
    gap: 16px; }
.triple_item_column .item_box{ /*__three-columns*/
    flex: 0 1 calc(33% - 16px); }

@media (max-width: 1024px){ /*__info-list-grid-small-screen-RESPONSIVE*/
    .item_box{
        flex: 0 1 calc(50% - 16px); }

    .triple_item_column .item_box{ /*__three-columns*/
        flex: 0 1 calc(50% - 16px); }
}
@media (max-width: 680px){ /*__info-list-grid-phone-screen-RESPONSIVE*/
    .item_box{
        flex: 0 1 100%; }

    .triple_item_column .item_box{ /*__three-columns*/
        flex: 0 1 100%; }
}
.info_item_icon{
    align-self: center;
    position: relative;
    display: flex;
    height: 5rem;
    width: 5rem;
    border-radius: 100%;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background-color: var(--sm-translucid-dark-red);
    color: var(--sm-lighten-red);
    transition: all 400ms;
    margin-bottom: 12px; }
.info_item_secondary_icon{
    background-color: var(--sm-lighten-dark-red);
    color: var(--sm-black-background);
    height: 4rem;
    width: 4rem; }

@media (hover: hover) {
    .info_item_box:hover .info_item_icon{
        transform: scale(1.2);
        cursor: pointer; }
}

/*__backgrounds*/
.dark_background{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: var(--sm-black-highlight);
    color: var(--sm-white-font); }
.translucid_background{
    background-color: var(--sm-translucid-white); }
.to_black_gradient_background{
    color: var(--sm-white-font);
    display: flex;
    justify-content: center;
    position: relative;
    background: linear-gradient(transparent, var(--sm-black-background));
    width: 100%; }
.black_background{
    color: var(--sm-white-font);
    display: flex;
    justify-content: center;
    position: relative;
    background: var(--sm-black-background);
    width: 100%; }
.red_background{
    text-align: center;
    color: var(--sm-white-font);
    background: linear-gradient(var(--sm-lighten-red), var(--sm-brand-red));
    width: 100%;
    justify-content: center;
    margin: 2rem; }
.image_background{
    color: var(--sm-white-font);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3.5rem 0;
    color: var(--sm-white-font);
    background: linear-gradient(var(--sm-translucid-dark-red), var(--sm-black-background)), url(../images/sm-services_a00806042026.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%; }
.white_background{
    background-color: var(--sm-white-background);
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
}

/*============== component-classes ==============*/
/*--- buttons-desing ---*/
.button{ /*__general_button*/
    text-align: center;
    font-size: var(--body-font-size);
    font-family: var(--body-font);
    margin: 0 4px 8px 0;
    display: inline-block;
    position: relative;
    padding: 8px 14px;
    border: 2px solid;
    border-radius: 4px;
    border-color: var(--sm-translucid-gray);
    color: var(--sm-gray);
    background-color: transparent;
    transition: 100ms; }
.button:hover{
    border-color: var(--sm-lighten-red);
    color: var(--sm-lighten-red); }
.button:active{
    background-color: var(--sm-lighten-red);
    color: var(--sm-white-font);
    transform: translateY(2px); }
.button:disabled{ /*__disabled_button*/
    cursor: not-allowed;
    background-color: var(--sm-gray);
    color: var(--sm-gray-font); }
.button:disabled:hover{
    border-color: transparent; }

.button_ghost_red{ /*__highlight_button*/
    border-color: var(--sm-lighten-red);
    color: var(--sm-lighten-red); }
.button_ghost_red:hover{
    border-color: transparent;
    color: var(--sm-white-font);
    background-color: var(--sm-lighten-red); }
.button_ghost_red:active{
    background-color: var(--sm-dark-red); }

.button_ghost_white{ /*__highlight_button*/
    border-color: var(--sm-white-font);
    color: var(--sm-white-font); }
.button_ghost_white:hover{
    border-color: var(--sm-white-font);
    color: var(--sm-white-font);
    background-color: var(--sm-translucid-white); }
.button_ghost_white:active{
    color: var(--sm-lighten-red);
    background-color: var(--sm-white-font); }

.button_solid_primary{ /*__primary_button*/
    border-color: transparent;
    background-color: var(--sm-lighten-dark-red);
    color: var(--sm-white-font); }
.button_solid_primary:hover{
    border-color: transparent;
    color: var(--sm-white-font);
    background-color: var(--sm-lighten-red); }
.button_solid_primary:active{
    background-color: var(--sm-dark-red); }

.button_solid_secondary{ /*__secondary_button*/
    border-color: transparent;
    background-color: var(--sm-light-gray);
    color: var(--sm-white-font); }
.button_solid_secondary:hover{
    border-color: transparent;
    color: var(--sm-white-font);
    background-color: var(--sm-gray-font); }
.button_solid_secondary:active{
    background-color: var(--sm-gray); }

.long_button{
    width: 100%;
    max-width: 428px;
    padding: 8px 24px; }

a.hyperlink{
    color: var(--sm-lighten-red);
    font-size: var(--caption-font-size);
    transition: color 300ms; }
a.hyperlink:hover{
    color: var(--sm-white-font);
    text-decoration: underline; }
a.hyperlink i{
    transition: all 300ms; }
a.hyperlink:hover i{
    padding-left: 8px; }

a.hyperlink_white{
    color: var(--sm-white-font);
    font-size: var(--caption-font-size);
    transition: color 300ms; }
a.hyperlink_white:hover{
    color: var(--sm-lighten-red);
    text-decoration: underline; }

a.hyperlink_in_text{
    color: var(--sm-lighten-red);
    font-size: var(--body-font-size);
    transition: color 300ms; }
a.hyperlink_in_text:hover{
    color: var(--sm-strong-red);
    text-decoration: underline; }

.bullet_list li{
    list-style-type: disc;
    margin-left: 20px; }
.bullet_list li::marker{
    color: var(--sm-lighten-red); }

/*============== __GENERAL_EFFECTS__ ==============*/
/*============== effect ==============*/
main h1, main h2, main h3, main h4, main p, main small, main caption, main li{
    animation: _fadeIn 1.5s ease;
}

/*============== animations ==============*/
@keyframes _fadeIn {
  from { opacity: 0; transform: translateY(20px); };
  to { opacity: 1; transform: translateY(0); };
}


/*============== __SPECIAL_CONFIG__ ==============*/
@media screen and (max-width: 1120px){ /*__content-grid-small-screen-RESPONSIVE*/
    #mision .content{
        flex-direction: column-reverse; };
}


/*============== __PARTIALS_CONFIG__ ==============*/
/*============== navbar ==============*/
.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--sm-dark-background);
    box-shadow: 0 2px 16px var(--sm-shadow);
    z-index: 100; }
.nav{ /*nav-config*/
    height: var(--nav-height);
    font-family: var(--display-font); }
.nav_container{
    margin-inline: 2.5rem; }
.nav_content{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center; }

.nav_logo{ /*__nav-logo*/
    position: relative;
    display: inline;
    align-items: center;
    column-gap: 0.25rem;
    font-weight: var(--semibold-font-weight); }
.nav_logo svg{
    display: block;
    height: 34px;
    width: auto; }
.nav_logo small{
    height: 1rem;
    width: 1rem;
    position: absolute;
    color: var(--sm-gray-font);
    font-size: 1.75rem;
    top: -10px;
    right: -10px;
    text-align: center;
}

.nav_icon{ /*__nav-icons*/
    font-size: 1.5rem;
    font-weight: 200;
    cursor: pointer; }

.nav_toggle{ /*__nav-toggle*/
    position: relative;
    width: 32px;
    height: 32px; }
.nav_open, .nav_close{ 
    position: absolute;
    width: max-content;
    height: max-content;
    inset: 0;
    margin: auto;
    transition: opacity 100ms, transform 400ms; } /*icons_initial_state*/
.nav_close{
    opacity: 0; } 

/*--- search-bar ---*/
.nav_search{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--sm-shadow);
    transition: background-color 400ms, width 400ms; }
.nav_search::before{
    content: '';
    position: absolute;
    background-color: var(--sm-lighten-dark-red);
    bottom: -3px;
    height: 3px;
    left: 0;
    right: 0;
    transition: left 500ms ease-out, background-color 300ms; }
.search_bar form{
    display: flex; }
.search_bar input{
    background: transparent;
    flex: 1;
    border: 0;
    outline: none;
    color: var(--sm-gray-font);
    font-family: var(--body-font); }
.search_bar input::placeholder{
    color: var(--sm-translucid-white); }
.search_bar button{
    border: 0;
    height: 37px;
    width: 37px;
    background-color: transparent;
    color: var(--sm-white-font);
    cursor: pointer; }

.nav_search:focus-within .search_toggle{ /*__focus-animation*/
    color: var(--sm-white-font); }
.nav_search:focus-within::before{
    background-color: var(--sm-lighten-red); }

.search_delete i{ /*__search_icons*/
    color: var(--sm-gray-font);
    transition: color 300ms; }
.search_delete:hover i{
    color: var(--sm-white-font); }
button.search_send i{
    color: var(--sm-gray-font);
    transition: color 500ms ease; }
button.search_send{
    background-color: var(--sm-gray);
    transition: all 500ms ease; }
button.search_send:hover{
    background-color: var(--sm-brand-red); }
button.search_send:hover i{
    color: var(--sm-white-font); }

@media screen and (max-width: 1120px){ /*small-screen-device-RESPONSIVE*/
    /*--- nav-bar ---*/
    .nav_menu{ /*__nav-resize*/
        position: absolute;
        left: 0;
        top: 40px;
        width: 100%;
        height: calc(100vh - var(--nav-height));
        overflow: auto;
        pointer-events: none;
        opacity: 0;
        transition: top 400ms, opacity 300ms; }

    .nav_menu::-webkit-scrollbar{
        width: 0; }
    .nav_items{
        background-color: var(--sm-dark-background);
        padding-top: 1rem; }

    .nav_item .nav_icon{ /*__hide-nav-icon-items*/
        display: none; }

    /*--- nav-search ---*/
    .nav_search{ /*__search-style*/
        background-color: transparent; }
    .nav_search::before{
        left: 100%; }
    .search_bar{
        display: block;
        width: 0; }
    .search_bar input{
        opacity: 0;
        width: 0;
        height: 100%;
        transition: width 400ms ease-out; }

    .search_bar button{/*__hide-search-buttons*/
        display: none; }

    .nav_container:has(.active#_search-bar) #_nav-toggle, .nav_container:has(.active#_search-bar) .nav_logo{ /*__toggle-show-search-RESPONSIVE*/
        display: none; }
    .nav_search:has(.active#_search-bar){ 
        background-color: var(--sm-shadow);
        width: 100%; }
    .nav_search:has(.active#_search-bar)::before{
        left: 0; } /*active_animation*/
    .active.search_bar{
        width: 100%;
        left: 0; }
    .active.search_bar input{
        opacity: 1;
        padding: 10px 8px;
        width: 100%;
        pointer-events: initial; }
    .active.search_bar button{
        display: block; } /*show_buttons*/
}

.nav_item{ 
    display: flex;
    cursor: pointer;
    position: relative;
    color: var(--sm-white-font);
    font-weight: var(--semibold-font-weight);
    font-size: var(--nav-font-size);
    background-color: var(--sm-black-background);
    padding: 1.25rem 1.5rem;
    justify-content: space-between;
    align-items: center;
    transition: background-color 300ms, color 300ms; }
.nav_item p{ 
    position: relative; }
.nav_item p::before{
    content: '';
    position: absolute;
    background-color: var(--sm-lighten-red);
    bottom: -22px;
    height: 0;
    left: 0;
    right: 0;
    transition: height 300ms; }
.nav_item:hover{/*__hover*/
    background-color: var(--sm-gray); }

.active#_nav-menu{ /*__toggle-show-menu*/
    opacity: 1;
    top: 52px;
    pointer-events: initial; }

.active .nav_open{ /*__active-switch-nav-animation*/
    opacity: 0;
    transform: rotate(45deg); }
.active .nav_close{
    opacity: 1;
    transform: rotate(90deg); }
.active .nav_open.search_toggle{ /*__active-switch-search-animation*/
    opacity: 0;
    transform: rotate(-45deg); }
.active .nav_close{
    opacity: 1;
    transform: rotate(-90deg); }

/*--- navbar-dropdown ---*/
.dropdown_arrow{
    font-size: 1.5rem;
    font-weight: initial;
    transition: transform 400ms; }
.dropdown_item{
    padding: 1.25rem 1.25rem 1.25rem 2.5rem;
    position: relative;
    color: var(--sm-white-font);
    background-color: var(--sm-dark-background);
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    font-weight: var(--normal-font-weight);
    transition: background-color 300ms; }
.dropdown_item::before{
    content: '';
    position: absolute;
    background-color: var(--sm-lighten-red);
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    transition: width 300ms; }
.dropdown_item .dropdown_icon {
    font-size: 1.25rem; }

.dropdown_menu{ /*__hidden*/
    max-height: 0;
    overflow: hidden;
    transition: max-height 400ms ease-out; }
.dropdown_menu::before{
    content: '';
    position: absolute;
    background-color: var(--sm-lighten-dark-red);
    left: 0;
    right: 100%;
    top: 0;
    height: 100%;
    transition: left 400ms; }

.dropdown:hover .dropdown_menu{ /*__hover-show*/
    max-height: 400px;
    transition: max-height 400ms ease-in; }
.dropdown:hover .dropdown_menu::before{
    left: -3px; }

@media (hover:hover){ /*__hover-RESPONSIVE*/
    .dropdown_item:hover{ 
        background-color: var(--sm-black-highlight); }
    .dropdown_item:hover::before{
        width: 3px; }
}

.dropdown:hover .dropdown_arrow{ /*__rotate-arrow-anim*/
    transform: rotate(180deg);
    color: var(--sm-lighten-red); }

@media screen and (min-width: 1120px){ /*big-screen-device-RESPONSIVE*/
    /*--- nav-bar ---*/
    .nav{ /*__nav-resize*/
        height: calc(var(--nav-height) + 1.2rem);
        display: flex;
        justify-content: space-between; }

    .nav_open, .nav_close{ /*__hide-toggle*/
        display: none; }

    .nav_items{ /*__nav-style*/
        height: 100%;
        display: flex; }
    .nav_item{
        height: 100%;
        padding: 1rem;
        justify-content: initial;
        column-gap: 0.25rem;
        background-color: var(--sm-dark-background); }

    .nav_item:hover{/*__hover*/
        background-color: transparent;
        color: var(--sm-lighten-red); }

    /*--- nav-search ---*/
    .nav_search{
        margin-left: 3rem; }
    .search_bar{
        width: 300px; }
    .search_toggle{
        font-size: 1rem;
        color: var(--sm-gray-font);
        transition: color 300ms; }
    .nav_item:hover p::before{
        height: 3px;}
    
    /*--- nav-dropdown ---*/
    .dropdown{
        position: relative; }
    .dropdown_item{ /*__dropdown-style*/
        background-color: var(--sm-black-background);
        padding-inline: 1rem 3.5rem; }
    .dropdown_menu{ /*__dropdown-resize*/
        max-height: initial;
        overflow: initial;
        position: absolute;
        left: 0;
        top: 6rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity 300ms, top 300ms; }

    .dropdown:hover .dropdown_menu{
        opacity: 1;
        top: calc(52px + 1.2rem);
        pointer-events: initial;
        transition: top 300ms; }
    .nav_icon_name{
        display: none; }
    .nav_open.search_toggle{ /*__nav-search-show-toggle*/
        display: block; }
    .nav_toggle{
        pointer-events: none;}
    .active .nav_open.search_toggle{ /*__rotate-search-anim*/
        opacity: 1;
        transform: rotate(0);}
}


/*============== footer ==============*/
.footer_row{
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 78px;
    row-gap: 1rem;
    justify-content: center; }
.footer_row::before{
    content: '';
    display: block;
    position: relative;
    background: var(--sm-translucid-white);
    top: -38px;
    left: 0;
    width: 95%;
    height: 3px; }
.footer{
    background-color: var(--sm-black-background);
    padding: 70px 0 0; }
.footer_container{
    max-width: 1520px;
    width: 100%;
    margin-inline: 1.5rem;
    margin: auto; }

/*--- footer-section ---*/
.footer_section{ /*__sections*/
    width: 25%;
    padding: 0 15px; }
.footer_section h4{
    color: var(--sm-white-font);
    font-size: var(--nav-font-size);
    font-family: var(--display-font);
    margin-bottom: 2.6rem;
    font-weight: var(--normal-font-weight);
    position: relative; }
.footer_section h4::before{
    content: '';
    position: absolute;
    background-color: var(--sm-lighten-dark-red);
    left: 0;
    top: 1.8rem;
    height: 3px;
    width: 50px; }
.footer_section li{
    margin-bottom: 10px;
    position: relative; }
.footer_section, .footer_section ul li a{ /*__footer-text*/
    font-weight: var(--extralight-font-weight);
    color: var(--sm-gray-font);
    display: block;
    transition: all 300ms ease;
    position: relative; }
.footer_section ul li::before{
    content: '';
    position: absolute;
    background-color: var(--sm-lighten-red);;
    height: 100%;
    width: 0;
    transition: all 200ms ease; }

@media (hover: hover){ /*__hover-RESPONSIVE*/
    .footer_section ul li a:hover{
        color: var(--sm-white-font);
        padding-left: 8px; }
    .footer_section ul li:hover::before{
        width: 3px; }
    .footer_section ul li a i{
        position: relative;
        left: -15px;
        opacity: 0;
        transition: left 300ms ease, opacity 300ms; }
    .footer_section ul li:hover a i{ /*__footer-arrow-animation*/
        left: 0;
        opacity: 1; }
}

.footer_section .footer_icons a{ /*__footer-social-media*/
    display: inline-block;
    height: 40px;
    width: 40px;
    background-color: var(--sm-translucid-white);
    margin: 0 10px 10px 0;
    text-align: center;
    font-size: 24px;
    line-height: 40px;
    color: var(--sm-gray-font);
    transition: all 500ms ease; }

@media (hover: hover){ /*__hover-RESPONSIVE*/
    .footer_section .footer_icons a:hover{
        color: var(--sm-white-font);
        background-color: var(--sm-brand-red); }
}

/*--- footer-bottom ---*/
.copy-right{
    background-color: var(--sm-dark-background);
    padding: 15px 20px;
    text-align: center;
    color: var(--sm-white-font);
    font-weight: var(--extralight-font-weight); }
.footer_logo svg{
    display: block;
    height: 56px;
    width: auto; }
.footer_logo{
    position: relative;
    display: block;
    justify-items: center; }
.footer_logo_row{
    padding-bottom: 46px;
    color: var(--sm-light-gray);
    font-family: var(--display-font);
    font-style: italic;
    font-weight: 500;
    text-align: center; }
.footer_logo small{
    height: 2.5rem;
    width: 2.5rem;
    position: absolute;
    color: var(--sm-gray-font);
    font-size: 2.5rem;
    font-style: normal;
    top: -10px;
    right: 32px; }

@media screen and (max-width: 1120px){ /*small-screen-device-RESPONSIVE*/
    .footer_section{ /*__footer-resize*/
        width: 90%; }
}
@media screen and (max-width: 700px){
    .footer_section{ /*__footer-resize*/
        width: 100%; }
}








.card_container{
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    gap: 2rem; }
.card_item{
    position: relative;
    background-color: var(--sm-translucid-gray);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-block: 1.25rem;
    display: grid;
    height: 100%;
    row-gap: 1.5rem;
    cursor: pointer;
    border: 2px solid;
    border-color: var(--sm-white-font);
    padding: 1.25rem;
    transition: border-color 400ms, transform 500ms;
    z-index: 0; }
.card_item::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(var(--sm-shadow), var(--sm-translucid-black));
    transition: all 500ms ease; }
.card_item::after{
    opacity: 0;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(transparent, var(--sm-translucid-dark-red));
    transition: all 500ms ease; }
.card_icon{
    align-self: center;
    position: relative;
    display: flex;
    height: 3rem;
    width: 3rem;
    min-width: 3rem;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background-color: var(--sm-dark-translucid);
    color: var(--sm-gray-font);
    transition: all 500ms ease; }

@media (hover: hover){
    .card_item:hover{
        transform: scale(1.035);
        border-color: var(--sm-lighten-red); }
    .card_item:hover .card_icon{
        background-color: var(--sm-brand-red);
        color: var(--sm-white-font); }
    .card_item:hover::before{
        opacity: 0; }
    .card_item:hover::after{
        opacity: 1; }
}

.card_buttons{
    display: flex;
    margin-top: 1.75rem; 
    align-items: center;
    justify-content: center; }
.modal_container{
    margin-top: var(--nav-height);
    position: fixed;
    inset: 0;
    z-index: 10;
    background-color: var(--sm-translucid-black);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 500ms ease, visibility 500ms ease; }
.modal_card{
    position: relative;
    color: var(--sm-black-font);
    background-color: var(--sm-light-background);
    padding: 1.75rem 1.25rem;
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
    max-width: 1000px;
    min-height: 348px;
    max-height: 600px;
    height: 100%; }
.card_top_title{
    margin-bottom: 12px; }
.modal_card .card_top_title{
    display: flex;
    gap: 0.75rem;
    align-items: end; }

.modal_card_close{
    color: var(--sm-gray-font);
    top: 1.5rem;
    right: 1.5rem;
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 300ms ease;
    position: absolute; }
.modal_card_close:hover{
    color: var(--sm-lighten-red); }

.card_content{
    position: relative;
    overflow: auto;
    padding: 0.5rem;
    height: 100%;
    background-color: var(--sm-dark-translucid); }
.card_image{
    width: 100%;
    height: 248px;
    object-fit: cover; }
.card_name{
    padding-right: 2rem;
    font-size: 1.12rem;  }
.modal_container.active{
    opacity: 1;
    visibility: initial;
    pointer-events: initial; }

@media screen and (min-width: 584px) {
    .card_container{
        grid-template-columns: 368px;
    }
    .modal_card{
        max-width: 568px;
    }
}

@media screen and (min-width: 824px) {
    .card_container{
        grid-template-columns: repeat(2, 368px);
    }
}

/*--- legals ---*/
.polices_wrapper{
    display: flex;
    flex-direction: row;
    gap: 2rem; }
.polices_sidebar{
    justify-content: center;
    align-items: start;
    position: sticky;
    margin-top: 2rem;
    height: fit-content;
    min-width: 200px;
    top: calc(2rem + var(--nav-height)); }

.polices_sidebar h4{
    margin: 0;
    width: 100%;
    background-color: var(--sm-dark-background);
    padding: 1rem 0.75rem 0.75rem 0.75rem; }
.polices_sidebar ul{
    width: 100%; }
.polices_sidebar ul li a{
    position: relative;
    background-color: var(--sm-black-background);
    transition: color 300ms background-color 500ms;
    width: 100%;
    color: var(--sm-gray-font);
    display: flex;
    padding: 0.5rem 1rem ; }
.polices_sidebar ul li a::before{
    content: '';
    position: absolute;
    background-color: var(--sm-lighten-red);
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    transition: width 300ms;
}
.polices_sidebar ul li a:hover{
    color: var(--sm-white-font);
    background-color: var(--sm-black-highlight); }
.polices_sidebar ul li a:hover::before{
    width: 3px; }
    
.polices_sidebar small{
    padding: 0.75rem 1rem 1rem 1rem;
    color: var(--sm-translucid-white); }

@media screen and (min-width: 1120px){
    .polices_sidebar{
        top: calc(3.2rem + var(--nav-height));
    }
}