body {
    line-height: 1.6;
    color: #000000;
    background: #ffffff;
    background-image: linear-gradient(to bottom, #e6e6e6, #ffffff) !important;
    font-family: "Encode Sans Semi Expanded", sans-serif;
    font-weight: 300;
    font-style: normal;
}

input,
textarea,
button,
select {
    font-family: "Encode Sans Semi Expanded", sans-serif !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    color: #000;
}

a:hover {
    color: #000;
}

p {
    max-width: 1000px;
}

em {
    text-align: center;
    max-width: 700px;
    display: inline-flex;
}

b {
    font-weight: 700;
}

.mt70 {
    margin-top: 70px;
}

.smenu {
    color: #fff;
}

.container,
.header_container {
    width: 90vw;
    max-width: 1920px;
    margin: 0 auto;
}

.header_container {
    margin: 5px auto;
}

.logo {
    position: absolute;
    top: 5px;
}

.container {
    min-height: 420px;
    padding: 1% 2% 1% 2%;
    border-radius: 3px;
    transition: all 0.35s ease;
}


.sub_container {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
}

.sub_container.top_border {
    border-top: 5px solid #29698f;
    padding-top: 20px;
}

.anim_color_blue {
    color: #85eeff;
    transform: scale(1.1);
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
    transition: all 0.4s ease-in-out;
}

.but_upload_file {
    position: absolute;
    font-size: 15px;
    width: 270px;
    left: 50vw;
    margin-left: -135px;
    margin-top: -150px;
}

.but_upload_file_contact {
    width: 220px;
    padding: 5px;
}

/* Header */
.site-header {
    background: #ffffffd9;
    padding: 5px 0;
    background: #2894bf;
    background: linear-gradient(90deg, #0080bddb 25%, #0074eba1 60%, #ff0000 100%);
    position: fixed;
    width: 100vw;
    height: 60px;
    z-index: 999;
    top: 0px;
    -moz-box-shadow: 1px 1px 2px #e9e9e9;
    -webkit-box-shadow: 1px 1px 2px #e9e9e9;
    box-shadow: 1px 1px 2px #e9e9e9;
}

.slogan {
    display: none;
    position: absolute;
    width: 500px;
    height: 280px;
    line-height: 55px;
    left: 50vw;
    top: 140px;
    margin-left: -250px;
    font-weight: 700;
    color: #ffff00;
    padding: 15px;
    text-align: center;
    font-size: 50px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.slogan.consulting,
.slogan.installation,
.slogan.storage_cabinet,
.slogan.our_projects,
.slogan.comprehensive_design,
.slogan.fabrication,
.slogan.prefinished_panelized,
.slogan.bim,
.slogan.magna,
.slogan.contact_us {
    min-width: 500px;
    width: 100%;
    max-width: 800px;
    height: auto;
    left: 20vw;
    top: 250px;
    color: #fff700 !important;
    text-align: left;
    background-color: #2e2e2e4d;
}

.slogan.fabrication {
    width: auto;
    max-width: 500px;
}

.slogan_menu {
    display: none;
    position: absolute;
    width: 300px;
    line-height: 30px;
    padding: 20px 25px 20px 25px;
    left: 50vw;
    top: 400px;
    margin-left: -150px;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    -webkit-border-radius: 80px 50px 80px 20px;
    -moz-border-radius: 80px 50px 80px 20px;
    border-radius: 80px 50px 80px 20px;
    background-color: #24000059;
    border: 1px solid #ffffff2f;
    -moz-box-shadow: 1px 1px 2px #4d4d4d;
    -webkit-box-shadow: 1px 1px 2px #4d4d4d;
    box-shadow: 1px 1px 2px #4d4d4d;
}

.slogan_menu a {
    padding: 10px;
}

.slogan_menu a:hover {
    color: #000;
    background-color: #ff9900be;
}

.gradient2 {
    background: #c0392b;
    background: -webkit-linear-gradient(to right, #8e44ad, #c0392b);
    background: linear-gradient(to right, #8e44ad, #c0392b);
}

.gradient3 {
    background: #de6161;
    background: -webkit-linear-gradient(to right, #2657eb, #de6161);
    background: linear-gradient(to right, #2657eb, #de6161);
}

.slogan_two,
.slogan_lite,
.slogan_lite_mini {
    font-size: 45px;
    line-height: 50px;
    padding: 15px;
    margin-bottom: 25px;
    text-align: center;
    background-color: #7f6751;
    color: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.slogan_lite {
    background: #614d49;
    background: -webkit-linear-gradient(to right, #94716B, #614d49);
    background: linear-gradient(to right, #94716B, #614d49);
}

.slogan_lite {
    font-size: 28px;
    line-height: 32px;
}

.slogan_lite_mini {
    font-size: 15px;
    line-height: 22px;
    background-color: transparent;
    border: 2px dashed #ffff00;
    max-width: 1000px;

    border: 2px solid transparent;
    border-radius: 50%;
    border-image: conic-gradient(from var(--angle),
            #ff00003b,
            #ffff003b,
            #00ff003b,
            #00ffff3b,
            #0000ff3b,
            #ff00ff3b,
            #ff00003b) 1;
    --angle: 0deg;
}

.box_lite_mini {
    padding: 20px 35px 20px;
    border: 2px solid transparent;
    border-radius: 50%;
    border-image: conic-gradient(from var(--angle),
            #ff00003b,
            #ffff003b,
            #00ff003b,
            #00ffff3b,
            #0000ff3b,
            #ff00ff3b,
            #ff00003b) 1;
    --angle: 0deg;
}

.button_services {
    font-size: 24px;
    line-height: 30px;
    padding: 15px;
    text-align: center;
    background-color: #ff7d00;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
}

.button_services:hover {
    background-color: #ff8000d0;
}

.unsel {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
  supported by Chrome and Opera */
}

.line_revolution {
    font-size: 30px;
    line-height: 34px;
    max-width: 1000px;
}

.line_revolution_lite {
    font-size: 20px;
    line-height: 24px;
    max-width: 1000px;
    display: inline-flex;
    background-color: transparent;
    background-image: linear-gradient(to bottom, #ffffff03, #e6e6e65e) !important;
    padding: 10px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.site-header .logo img {
    position: relative;
    height: 30px;
    top: 10px;
    z-index: 1;
}

.right_ico {
    margin-left: -10px;
    top: -30px;
    position: relative;
    width: 10px !important;
    height: 10px !important;
    -webkit-mask: url("menu/right_ico.svg") center/contain no-repeat !important;
    mask: url("menu/right_ico.svg") center/contain no-repeat !important;
    background-color: #dcdcdc !important;
}

.info_ico {
    margin-left: -55px;
    margin-top: 25px;
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: #000;
    -webkit-mask: url("menu/info_ico.svg") center / contain no-repeat;
    mask: url("menu/info_ico.svg") center / contain no-repeat;
}

.man_ico {
    margin-left: -55px;
    margin-top: -5px;
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #000;
    background: url("menu/man_ico_1.png") center/cover no-repeat;
}

.man_ico.man2 {
    background: url("menu/man_ico_2.png") center/cover no-repeat;
}

.menu_btn_ico {
    display: none;
    background-color: white;
    -webkit-mask: url("menu/menu_btn.svg") center/contain no-repeat;
    mask: url("menu/menu_btn.svg") center/contain no-repeat;
    width: 48px;
    height: 32px;
    background-position-y: 0;
    float: right;
    margin-top: 5px;
    transition: all 0.4s ease;
    cursor: pointer;
}

.menu_btn_ico:hover {
    background-color: #ffff00;
    transform: translateY(-2px);
}

.main-nav {
    display: inline-flex;
    float: right;
    overflow: hidden;
}

.main-nav ul {
    list-style: none;
    gap: 30px;
    width: 100%;
    justify-content: flex-end;
    margin-top: 15px;
    overflow: hidden;
    opacity: 1;
    display: flex;
}

.main-nav a {
    color: #fff;
    text-decoration: none;
    transition: all 1s ease;
    font-size: 0.9em;
    font-weight: normal;
    letter-spacing: 1px;
    padding: 10px;
}

.main-nav .lnk_active {
    color: #fff;
    transition: all 0.5s ease;
}

.main-nav .lnk_active:hover {
    color: #ffff00 !important;
}

.page_a_active {
    color: #ffff00 !important;
    font-weight: 900;
}

#id_consulting_section_video,
#id_installation_section_video,
#id_our_projects_section_video,
#id_comprehensive_design_section_video,
#id_bim_section_video,
#id_magna_section_video {
    width: 100%;
    max-width: 1920px;
    height: 100%;
    max-height: 1200px;
}

#id_consulting_section_video {
    height: 120%;
}

#id_installation_section_video {
    height: 140%;
}

#id_our_projects_section_video {
    height: 150%;
}

#id_comprehensive_design_section_video {
    height: 150%;
}

#id_bim_section_video {
    height: 150%;
}

#id_magna_section_video {
    height: 150%;
}

.main-nav .icon {
    position: absolute;
    margin-left: -30px;
    margin-top: -8px;
    transition: all 0.5s ease;
    cursor: pointer;
}


.main-nav div {
    width: 32px;
    height: 32px;
    background-color: white;
    /* белая иконка */
    -webkit-mask: center/contain no-repeat;
    mask: center/contain no-repeat;
    transition: all 0.5s ease;
}

/* ---------- HOME ---------- */
.main-nav .home {
    -webkit-mask-image: url("menu/Home.svg");
    mask-image: url("menu/Home.svg");
    transform: translateY(0);
}

.main-nav .home:hover,
.main-nav .home.active,
.main-nav .page_active.home {
    background-color: #ffff00;
    transform: translateY(-1px);
}

/* ---------- CONSULTING ---------- */
.main-nav .consulting {
    -webkit-mask-image: url("menu/Consulting.svg");
    mask-image: url("menu/Consulting.svg");
    transform: translateY(2px);
}

.main-nav .consulting:hover,
.main-nav .consulting.active,
.main-nav .page_active.consulting {
    background-color: #ffff00;
    transform: translateY(0px);
}

/* ---------- PREFABRICATION ---------- */
.main-nav .prefabrication {
    -webkit-mask-image: url("menu/Prefabrication.svg");
    mask-image: url("menu/Prefabrication.svg");
    transform: translateY(0px);
}

.main-nav .prefabrication:hover,
.main-nav .prefabrication.active,
.main-nav .page_active.prefabrication {
    background-color: #ffff00;
    transform: translateY(-2px);
}

/* ---------- INSTALLATION ---------- */
.main-nav .installation {
    -webkit-mask-image: url("menu/Installation.svg");
    mask-image: url("menu/Installation.svg");
    transform: translateY(3px);
}

.main-nav .installation:hover,
.main-nav .installation.active,
.main-nav .page_active.installation {
    background-color: #ffff00;
    transform: translateY(0px);
}

/* ---------- PROJECTS ---------- */
.main-nav .projects {
    -webkit-mask-image: url("menu/Projects.svg");
    mask-image: url("menu/Projects.svg");
    transform: translateY(3px);
}

.main-nav .projects:hover,
.main-nav .projects.active,
.main-nav .page_active.projects {
    background-color: #ffff00;
    transform: translateY(0px);
}

/* ---------- CONTACT ---------- */
.main-nav .contact {
    -webkit-mask-image: url("menu/Contact.svg");
    mask-image: url("menu/Contact.svg");
    transform: translateY(4px);
}

.main-nav .contact:hover,
.main-nav .contact.active,
.main-nav .page_active.contact {
    background-color: #ffff00;
    transform: translateY(2px);
}

/* ---------- STORAGE CABINET ---------- */
.main-nav .building_modeling {
    -webkit-mask-image: url("menu/BuildingModeling.svg");
    mask-image: url("menu/BuildingModeling.svg");
    transform: translateY(3px);
}

.main-nav .building_modeling:hover,
.main-nav .building_modeling.active,
.main-nav .page_active.storage_cabinet {
    background-color: #ffff00;
    transform: translateY(0px);
}

.cs_video_play_ico {
    cursor: pointer;
    display: block;
    left: 50%;
    margin-left: -40px;
    position: absolute;
    top: 50vh;
    width: 80px;
    height: 80px;
    background: url("../files/icons/play.svg") center/contain no-repeat;
}

.cs_video_play_ico:hover {
    filter: drop-shadow(0 6px 10px rgba(255, 255, 255, 0.596));
    outline: none;
}

.button_on_the_top_page,
.button_on_section_page {
    position: fixed;
    left: 95.5vw;
    top: 85vh;
}

.button_on_the_top_page {
    display: none;
    width: 35px;
    height: 35px;
    background: url("../files/icons/button_on_the_top_page.svg") center/contain no-repeat;
}

.button_on_section_page.sect1 {
    top: 80vh;
}

.button_on_the_top_page:hover,
.button_on_section_page:hover {
    cursor: pointer;
    opacity: 0.5;
}

/* Hero */
.hero {
    background: url("../files/images/background/welcome-to-dynamic-dfma.webp") center/cover no-repeat;
    background-position-y: 30%;
    /* 25% слева, 75% сверху */
    color: #000;
    text-align: center;
    margin-top: 60px;
    min-height: 92.5vh;
    opacity: 0.5;
    transition: all 0.15s ease;
    border-bottom: 5px solid #fff;
}

.consulting_section_video,
.installation_section_video,
.bim_section_video,
.our_projects_section_video,
.comprehensive_design_section_video,
.buy_storage_cabinet,
.fabrication_section,
.prefinished_panelized_section,
.magna_section_video,
.contact_us_section {
    /* 25% слева, 75% сверху */
    color: #000;
    text-align: center;
    margin-top: 60px;
    height: 90vh;
    opacity: 0.5;
    transition: all 0.15s ease;
    border-bottom: 5px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.contact_us_section {
    background: url("../files/images/design-projects/we-have-achieved-success-in-prefabricated-construction-and-modular-design.jpg") center/cover no-repeat;
    background-position-y: 30%;
    opacity: 1;
}

.consulting_section_video {
    background: url("../files/images/background/video-prefabrication-and-modular-construction-consulting-services.jpg") center/cover no-repeat;
    background-position-y: 30%;
}

.magna_section_video {
    background: url("../files/images/background/video-sheridan-college-magna-skilled-trades-centre.jpg") center/cover no-repeat;
    background-position-y: 30%;
}

.installation_section_video {
    background: url("../files/images/background/video-installation-services.jpg") center/cover no-repeat;
    background-position-y: 30%;
}

.bim_section_video {
    background: url("../files/images/background/video-building-information-modeling-dynamic-dfma.jpg") center/cover no-repeat;
    background-position-y: 30%;
}

.our_projects_section_video {
    background: url("../files/images/background/video-our-projects-services.jpg") center/cover no-repeat;
    background-position-y: 30%;
}

.comprehensive_design_section_video {
    background: url("../files/images/background/video-comprehensive-design-and-development-services.jpg") center/cover no-repeat;
    background-position-y: 30%;
}

.buy_storage_cabinet {
    background: url("../files/images/background/prefabricated-self-storage-locker-systems.jpg") center/cover no-repeat;
    background-position-y: 30%;
}

.fabrication_section {
    background: url("../files/images/background/assembly-services-and-prefabrication-solutions-for-modern-construction.jpg") center/cover no-repeat;
    background-position-y: 30%;
    height: 67vh;
}

.prefinished_panelized_section {
    background: url("../files/images/projects/Prefabricated-Eifs-Facade-Mississauga-Hotel-Courtyard-Marriott-Project/Courtyard-Marriott-Mississaugas-Project-featuring-prefinished-EIFS-Panels.jpeg") center/cover no-repeat;
    background-position-y: 30%;
}

.consulting_section_video.hidden,
.installation_section_video.hidden,
.our_projects_section_video.hidden,
.comprehensive_design_section_video.hidden,
.magna_section_video.hidden,
.buy_storage_cabinet.hidden {
    background: none !important;
    background-color: #0000008a !important;
}

/**** images ****/

.hero_design_for_manufacturing {
    float: left;
    margin-right: 25px;
    margin-bottom: 20px;
    background: url("../files/images/background/design-for-manufacturing-dynamic-dfma.jpg") center/cover no-repeat;
    width: 90vw;
    height: 300px;
    max-width: 300px;
    max-height: 300px;
    border: 1px solid #2a97d673;
}

/* /Main photos: */

.panelization_general_photo {
    background: url("../files/images/projects/Panelization/process-of-monitoring-the-construction-of-a-facility-sml.jpg") center/contain no-repeat;
}

.prefabricated_panel_installation_1 {
    background: url("../files/images/projects/Panelization/prefabricated-panel-installation-1-sml.jpg") center/contain no-repeat;
}

.prefabricated_panel_installation_2 {
    background: url("../files/images/projects/Panelization/prefabricated-panel-installation-2-sml.jpg") center/contain no-repeat;
}

.modular_construction_photo {
    background: url("../files/images/projects/Modular-Construction/prefabrication-and-modular-construction-design-for-manufacturing-and-assembly-sml.jpg") center/contain no-repeat;
}

.building_envelope_photo {
    background: url("../files/images/projects/Building-Envelope/vecteezy_installation-of-double-glazed-windows-in-a-residential.webp") center/contain no-repeat;
}

.design_for_manuf_assembly_photo {
    background: url("../files/images/projects/Design-for-Manufacturing-and-Assembly/prefabrication-and-modular-construction-design-for-manufacturing-and-assembly-sml.jpg") center/contain no-repeat;
}

/* /assembly-services-and-prefabrication-solutions-for-modern-construction photos: */

.development_of_projects_photo {
    background: url("../files/images/development-of-projects/prefabricated-roof-truss-design-sml.webp") center/contain no-repeat;
}

.prefabricated_metal_panel_photo {
    background: url("../files/images/development-of-projects/Prefabricated-metal-panel-layout-for-Sheridan-College-interior-atrium-design-sml.jpg") center/contain no-repeat;
}

.wall_panels_photo {
    background: url("../files/images/projects/Wall-Panels/prefabrication-and-modular-construction-design-for-manufacturing-and-assembly-3-sml.webp") center/contain no-repeat;
}

.cladding_photo {
    background: url("../files/images/projects/Cladding/Dynamic-DFMA-ready-to-install-structure-sml.jpg") center/contain no-repeat;
}

/* /... photos: */

.prefabricated_panel_installation_photo {
    background: url("../files/images/projects/Panelization/prefabricated-panel-installation-sml.webp") center/contain no-repeat;
}

/* /prefabrication-and-modular-construction-consulting-services photos: */

.constructability_reviews_photo {
    background: url("../files/images/construction-analysis/we-perform-project-analysis-our-experience-technology-warranties-construction-perform-assessments-and-create-solutions-sml.jpg") center/contain no-repeat;
}

.design_assist_photo {
    background: url("../files/images/design-assist/design-support-services-bringing-your-construction-ideas-to-life-with-a-guarantee-of-high-quality-Dynamic-DFMA.webp") center/contain no-repeat;
}

.design_projects_photo {
    background: url("../files/images/design-projects/we-have-achieved-success-in-prefabricated-construction-and-modular-design-sml.jpg") center/contain no-repeat;
}

.custom_fabrication_photo {
    background: url("../files/images/custom-fabrication/we-manufacture-high-quality-custom-made-components-with-precise-specifications-sml.jpg") center/contain no-repeat;
}

.project_management_photo {
    background: url("../files/images/project-management/we-tackle-complex-challenges-ensuring-projects-are-on-schedule-and-meet-their-goals-Dynamic-DFMA-sml.jpg") center/contain no-repeat;
}

.project_optimization_photo {
    background: url("../files/images/project-optimization/we-identify-opportunities-to-optimize-material-use-reduce-costs-and-optimize-processes-sml.jpg") center/contain no-repeat;
}

.hygrothermal_and_energy_modeling_photo {
    background: url("../files/images/projects/Hygrothermal-Energy-Modeling/hygrothermal-and-energy-modeling-sml.jpg") center/contain no-repeat;
}

.our_building_information_modeling_photo {
    background: url("../files/images/projects/BIM-VDC/our-building-information-modeling-VDC-technology-Dynamic-DFMA-sml.jpg") center/contain no-repeat;
}


.point_cloud_data_extraction_photo {
    background: url("../files/images/projects/Point-Cloud-Data-Extraction/Point-Cloud-Data-Extraction-Dynamic-DFMA-sml.jpg") center/contain no-repeat;
}

/* BIM */

.bim_dynamic_dfma_bim_lots_of_parameters_photo {
    background: url("../files/images/projects/BIM-Technical-Marketing/dynamic-dfma-bim-lots-of-parameters.webp") center/contain no-repeat;
}

.bim_dynamic_dfma_3d_detailed_rendering_construction_photo {
    background: url("../files/images/projects/BIM-Technical-Marketing/detailed-3D-rendering-of-an-architectural-cornice-as-a-construction-product-featuring-a-modern-and-elegant-design-sml.jpg") center/contain no-repeat;
}

.bim_dynamic_dfma_3d_detailed_rendering_decorative_prefabricated_photo {
    background: url("../files/images/projects/BIM-Technical-Marketing/detailed-3D-rendering-of-a-construction-product-a-decorative-prefabricated-concrete-column-sml.jpg") center/contain no-repeat;
}

.bim_dynamic_dfma_3d_detailed_rendering_brick_cladding_over_photo {
    background: url("../files/images/projects/BIM-Technical-Marketing/developed-3D-model-of-brick-cladding-over-CMU-concrete-block-sml.jpg") center/contain no-repeat;
}

.bim_object_black {
    background: url("../files/images/partners/BIM-object-black.png") center/contain no-repeat;
}

.key_features {
    border-top: 1px solid #196fa7;
    border-bottom: 1px solid #196fa7;
    margin-top: 10px;
    margin-bottom: 10px;
}

.bim_dfma_box_lite {
    display: inline-flex;
    min-width: 280px;
    max-width: 480px;
    background-color: #186c9e;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    margin: 25px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: #fff;
}

.bim_best_dynamic_dfma_box {
    display: inline-flex;
    width: 280px;
    background-color: #444444;
    height: 280px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    margin: 25px 2% 0 2%;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: #fff;
}

.bim_best_dynamic_dfma_box:hover {
    background-color: #5c5c5c;
}

.bim_best_dynamic_dfma_box div {
    text-align: center;
}

.bim_best_dynamic_dfma_box h3 {
    display: inline-flex;
    width: 150px;
    text-align: center;
    padding: 25px;
}

.bim_regular_updates_ico,
.bim_compliance_assurance_ico,
.bim_ongoing_support_ico {
    width: 128px;
    height: 128px;
    background-color: #ff7d00;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

/* Regular Updates */
.bim_regular_updates_ico {
    -webkit-mask: url("projects/regular-updates.svg") center/contain no-repeat;
    mask: url("projects/regular-updates.svg") center/contain no-repeat;
}

/* Compliance Assurance */
.bim_compliance_assurance_ico {
    -webkit-mask: url("projects/compliance-assurance.svg") center/contain no-repeat;
    mask: url("projects/compliance-assurance.svg") center/contain no-repeat;
}

/* Ongoing Support */
.bim_ongoing_support_ico {
    -webkit-mask: url("projects/ongoing-support.svg") center/contain no-repeat;
    mask: url("projects/ongoing-support.svg") center/contain no-repeat;
}

.bim_content_video_dynamic_dfma_construction {
    margin: 0px;
    width: 551.111px;
    height: 310px;
    background: url("../files/video/BIM-Content.mp4") center/contain no-repeat;
}

/* Our Projects / Storage Systems - photos: */

.stacked_self_storage_locker_systems {
    background: url("../files/images/projects/Stacked-Self-Storage-Locker-Systems/stacked-self-storage-locker-systems-sml.webp") center/contain no-repeat;
}

.dynamic_dfma_self_storage_projects {
    background: url("../files/images/projects/Stacked-Self-Storage-Locker-Systems/dynamic-dfma-self-storage-projects-sml.webp") center/contain no-repeat;
}

.self_storage_locker_system {
    background: url("../files/images/projects/Stacked-Self-Storage-Locker-Systems/self-storage-locker-system-sml.webp") center/contain no-repeat;
}

.self_storage_locker_systems {
    background: url("../files/images/projects/Stacked-Self-Storage-Locker-Systems/self-storage-locker-systems-sml.webp") center/contain no-repeat;
}

/* Our Projects / Hotel Condominium photos: */

.optimizing_building_hotel_le_vent_condominium_1 {
    background: url("../files/images/projects/Comprehensive-Design-And-Development-Services/optimizing-building-structural-integrity-and-sustainability-using-advanced-prefabrication-technologies-hotel-le-vent-condominium-1.webp") center/contain no-repeat;
}

.optimizing_building_hotel_le_vent_condominium_2 {
    background: url("../files/images/projects/Comprehensive-Design-And-Development-Services/optimizing-building-structural-integrity-and-sustainability-using-advanced-prefabrication-technologies-hotel-le-vent-condominium-2.jpg") center/contain no-repeat;
}

.optimizing_building_hotel_le_vent_condominium_3 {
    background: url("../files/images/projects/Comprehensive-Design-And-Development-Services/optimizing-building-structural-integrity-and-sustainability-using-advanced-prefabrication-technologies-hotel-le-vent-condominium-3.webp") center/contain no-repeat;
}

.optimizing_building_hotel_le_vent_condominium_4 {
    background: url("../files/images/projects/Comprehensive-Design-And-Development-Services/optimizing-building-structural-integrity-and-sustainability-using-advanced-prefabrication-technologies-hotel-le-vent-condominium-4.webp") center/contain no-repeat;
}

/* Our Projects / Hotel Courtyard Marriott Mississauga photos: */

.optimizing_building_hotel_courtyard_marriott_mississauga_3 {
    background: url("../files/images/projects/Prefabricated-Eifs-Facade-Mississauga-Hotel-Courtyard-Marriott-Project/Courtyard-Marriott-Mississauga-Prefinished-panelized-EIFS-facade-construction-methods-1-sml.webp") center/contain no-repeat;
}

.optimizing_building_hotel_courtyard_marriott_mississauga_4 {
    background: url("../files/images/projects/Prefabricated-Eifs-Facade-Mississauga-Hotel-Courtyard-Marriott-Project/prefabricated-assemblies-sml.webp") center/contain no-repeat;
}

.optimizing_building_hotel_courtyard_marriott_mississauga_5 {
    background: url("../files/images/projects/Prefabricated-Eifs-Facade-Mississauga-Hotel-Courtyard-Marriott-Project/Courtyard-Marriott-Mississauga-Prefinished-panelized-EIFS-facade-construction-methods-2-sml.webp") center/contain no-repeat;
}

.optimizing_building_hotel_courtyard_marriott_mississauga_6 {
    background: url("../files/images/projects/Prefabricated-Eifs-Facade-Mississauga-Hotel-Courtyard-Marriott-Project/Installation-of-prefabricated-parapet-panels-sml.webp") center/contain no-repeat;
}

.optimizing_building_hotel_courtyard_marriott_mississauga_7 {
    background: url("../files/images/projects/Prefabricated-Eifs-Facade-Mississauga-Hotel-Courtyard-Marriott-Project/Courtyard-Marriott-Mississaugas-façade-finishing-sml.jpg") center/contain no-repeat;
}


/* Our Projects / Magna photos: */

.sheridan_college_magna_1 {
    background: url("../files/images/projects/Sheridan-College-Magna-Skilled-Trades-Centre/Skilled-Trades-Centre-Atrium-sml.jpg") center/contain no-repeat;
}

.sheridan_college_magna_2 {
    background: url("../files/images/projects/Sheridan-College-Magna-Skilled-Trades-Centre/Interior-Cladding-Project-Prefabricated-Custom-Interior-Panels-2-sml.jpg") center/contain no-repeat;
}

.sheridan_college_magna_3 {
    background: url("../files/images/projects/Sheridan-College-Magna-Skilled-Trades-Centre/Interior-Cladding-Project-Prefabricated-Custom-Interior-Panels-12.webp") center/contain no-repeat;
}

.sheridan_college_magna_4 {
    background: url("../files/images/projects/Sheridan-College-Magna-Skilled-Trades-Centre/Interior-Cladding-Project-Prefabricated-Sheridan-College-Magna.webp") center/contain no-repeat;
}

.sheridan_college_magna_9 {
    background: url("../files/images/projects/Sheridan-College-Magna-Skilled-Trades-Centre/Interior-Cladding-Project-Prefabricated-Custom-Interior-Panels-9-sml.jpg") center/contain no-repeat;
}

.sheridan_college_magna_10 {
    background: url("../files/images/projects/Sheridan-College-Magna-Skilled-Trades-Centre/Interior-Cladding-Project-Prefabricated-Custom-Interior-Panels-10-sml.jpg") center/contain no-repeat;
}

.sheridan_college_magna_11 {
    background: url("../files/images/projects/Sheridan-College-Magna-Skilled-Trades-Centre/Interior-Cladding-Project-Prefabricated-Custom-Interior-Panels-11-sml.webp") center/contain no-repeat;
}

/* .... */

.box_for_partners {
    color: #000000;
    background-Color: #e3e3e3;
    padding: 20px;
}

.clgs {
    width: 100%;
}

.contact_center_phone {
    display: inline;
    width: 200px;
    margin-left: 210px;
    margin-top: 10px;
    font-size: 25px;
    color: #fff;
}

.footer_contact_center_phone {
    margin: 10px;
}

.services ul li {
    margin-bottom: 15px;
}

.contacts_email_box {
    background-color: #ff7c30;
    color: #000;
    border: 1px solid #64646436;
    padding: 10px;
    font-size: 24px;
    line-height: 40px;
    background: linear-gradient(256deg,
            #4b80a786 0%,
            #0f25b380 25%,
            #ff7c30d7 50%,
            #8b797971 75%,
            #ff7c30 100%);
    background-size: 400% 400%;
    animation: shineMove 10s ease-in-out infinite;
    border-radius: 10px;
}

@keyframes shineMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.imgbox {
    border: 1px solid #64646436;
    width: 100vw;
    min-width: 300px;
    max-width: 500px;
    height: 100vh;
    min-height: 200px;
    max-height: 400px;
    margin: 10px 0 10px 0;
}

.imgbox.sml {
    width: 280px;
    height: 215px;
}

.imgbox.big {
    width: 600px;
    height: 600px;
    max-width: 600px;
    max-height: 600px;
}

.imgbox:hover {
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.5s ease;
}

/**** images ****/

#scrollProgress {
    position: fixed;
    z-index: 9999;
    background: transparent;
    width: 100vw;
    height: 5px;
    top: 45px;
    pointer-events: none;
}

#fillMask {
    transition: width 0.15s linear;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.btn-primary {
    display: inline-flex;
    background-color: #ff7d00;
    color: #000;
    padding: 12px 25px;
    text-decoration: none;
    font-weight: 500;
    border-radius: 10px;
    -moz-box-shadow: 1px 1px 2px #443d3dcf;
    -webkit-box-shadow: 1px 1px 2px #443d3dcf;
    box-shadow: 1px 1px 2px #443d3dcf;
    text-align: center;
    justify-content: center;
}

.btn-primary.sml {
    background-color: #000;
    font-size: 12px;
    color: #fff;
}

.btn-primary.sml:hover {
    background-color: #e2e2e2;
    color: #000;
}

.btn-primary.img {
    height: 40px;
    width: 275px;
    padding: 20px;
}

.btn-primary.img:hover {
    background-color: #e2e2e2;
}

.btn-primary:hover {
    background-color: #dc6c00;
    color: #000;
    transition: all 0.5s ease;
    -moz-box-shadow: 1px 1px 2px #222222cf;
    -webkit-box-shadow: 1px 1px 2px #222222cf;
    box-shadow: 1px 1px 2px #222222cf;
}

.m15 {
    margin: 15px;
}

.p15 {
    margin: 15px;
}

.ready_to_optimize {
    font-size: 50px;
    color: #ff8d00;
}

.btn-secondary {
    border: 2px solid #ff9900;
    color: #ff9900;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

.btn-secondary:hover {
    background: #ff9900;
    color: #111;
}

/* Sections */
section {
    padding-top: 20px;
    padding-bottom: 20px;
}

section.consulting_section_video,
section.installation_section_video,
section.our_projects_section_video,
section.comprehensive_design_section_video,
section.magna_section_video,
section.buy_storage_cabinet {
    padding-top: 0;
    max-height: 1000px;
}

section.expertise {
    height: auto;
}

h1 {
    font-size: 2.2em;
    line-height: 1.3em;
    min-width: 250px;
    max-width: 1100px;
    margin-bottom: 15px;
}

h2 {
    display: inline-flex;
    margin-bottom: 20px;
    min-width: 250px;
    width: 100%;
    text-align: left;
}

.our_projects_top_line,
.comprehensive_design_top_line {
    font-size: 30px;
}

.prefabr_video {
    max-width: 100%;
    margin: 0;
    width: 100%;
    height: 350px;
}

.prefabr_video_max {
    max-width: 1000px;
    margin: 0;
    width: 100vw;
    height: 450px;
}

.benefits {
    list-style: none;
    padding: 0;
}

.benefits li {
    margin: 10px 0;
}

/* Services */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.service-item {
    text-align: center;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.service-item img {
    width: 64px;
    margin-bottom: 15px;
}

/* Projects */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.project-item {
    text-align: center;
}

.project-item img {
    width: 100%;
    border-radius: 8px;
}

.projects_list,
.our_projects_list,
.comprehensive_design_list {
    display: inline-flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 50px;
    padding: 20px;
    border-radius: 3px;
}

.comprehensive_design_list {
    border: 1px solid #ffffff48;
}

.box_prefab {
    font-style: italic;
    font-size: 12px;
    color: #2a44a1;
}

.box_prefab_s {
    font-style: italic;
    font-size: 12px;
    color: #2a44a1;
    margin-left: -15px;
}

.box,
.box_fabrication {
    width: 35vw;
    padding: 15px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

.box_fabrication {
    width: 40vw;
}

.box.building_border,
.box.building_border_1,
.box.building_border_2 {
    border: 1px solid #cccccc3a;
    border-radius: 5px;
    margin: 15px;
    padding: 30px;
    min-width: 500px;
    max-width: 800px;
}

.box.building_border_2 {
    align-items: center;
}

.box.building_border_1 {
    border: none !important;
}

.box.building_border.max,
.box.building_border_1.max,
.box.building_border_2.max {
    padding: 1px;
    border-radius: 0;
}

.box_comment {
    border: 1px solid #cccccc3a;
    border-radius: 5px;
    margin: 5px;
    padding: 25px;
    font-size: 12px;
    max-width: 600px;
}

.box_comment:hover {
    border: 1px solid #cccccc9f;
}

.box_lines_descr {
    max-width: 1300px;
}

.box_lines {
    display: inline-flex;
    flex-direction: column;
}

.box_flex {
    display: inline-flex;
    flex-wrap: wrap;
}

.box_flex_line {
    display: inline-flex;
    overflow-y: hidden;
    overflow-x: auto;
    width: 100%;
}

.box_flex_line_lite {
    display: inline-flex;
    width: 100%;
    padding: 25px;
}

.bgcolor_black {
    background-color: #00000033;
}

.bgcolor_blue {
    background-color: #2b6b96;
}

.photo_slider_light {
    -webkit-border-radius: 15px 15px 0 0;
    -moz-border-radius: 15px 15px 0 0;
    border-radius: 15px 15px 0 0;
}

.color_light_black {
    color: #000000;
}

.c_orange {
    color: #ffae00;
}

.c_red {
    color: #ff0000;
}

.c_gray_dark {
    color: #be0000;
    font-weight: 500;
}

.c_gray {
    color: #ccc;
}

.c_blue_light {
    color: #4b93ff;
}

.line_descr {
    color: #327ab9;
    font-weight: 400;
}

.head_line_descr {
    color: #444;
}

.head_line_max {
    width: 100%;
    color: #327ab9;
    font-size: 18px;
}

.footer_line_descr {
    font-size: 35px;
    font-weight: bold;
    width: 100%;
    text-align: center;
    color: #327ab9;
}

.textarea {
    width: 100%;
    max-width: 350px;
    min-width: 260px;
    min-height: 150px;
}

/* Contact */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
    width: 100%;
    max-width: 350px;
    min-width: 260px;
    min-height: 150px;
}

.contact-form input,
.contact-form textarea {
    padding: 12px;
    border: 1px solid #ffffffa6;
    border-radius: 5px;
    width: 100%;
    background-color: #ffffff;
    color: #000000;
}

.contact-form button {
    cursor: pointer;
}

/* Map */
/*#map {
    min-height: 300px;
    max-height: 1000px;
    height: 75vh;
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.map_slogan {
    font-size: 50px;
}*/


/* Map */
#map,
#google_map_canvas_pano {
    min-height: 300px;
    max-height: 500px;
    height: 75vh;
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
}

#google_map_canvas_pano {
    display: none;
}

.map-btn {
    display: none;
    position: relative;
    top: 10px;
    left: 100%;
    margin-left: -124px;
    padding: 8px 14px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--text-color);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s ease;
}

.map-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.map_descr {
    font-size: 30px;
    line-height: 30px;
}

/* Footer */
.site-footer {
    color: #000000;
    text-align: center;
    font-size: 1.2rem;
    padding-bottom: 5px;
    margin-bottom: 15px;
    border-top: 5px solid #fff;
}

.bottom_space {
    border-bottom: 5px solid #fff;
    padding-bottom: 25px;
}

.site-footer small {
    display: block;
    margin-top: 10px;
    font-size: 0.75rem;
    color: #aaa;
}

.footer_img {
    background: url("../files/images/background/footer.png") center/contain no-repeat;
    width: 200px;
    height: 267px;
    display: inline-flex;
}

#leafletmap {
    width: 100%;
    height: 400px;
    /* или сколько нужно */
}

.projects_menu {
    display: none;
    position: absolute;
    margin-top: 35px;
    margin-left: -220px;
    padding: 15px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    font-size: 12px;
    color: #000;
    border-bottom: 2px solid #ff0000;
    border-left: 1px solid #fdfdfd7d;
    border-right: 1px solid #fdfdfd7d;
    width: 300px !important;
    height: auto !important;
    background-color: #bb0e16d9 !important;
}

.projects_menu a {
    padding: 5px;
    margin-top: 3px;
    font-size: 13px;
    line-height: 15px;
}

.projects_menu a:hover {
    color: #000;
}

.projects_menu.active {
    display: inline-flex !important;
}

.bim_link {
    font-size: 20px;
}

/* Responsive */
@media (max-width: 1566px) {
    .main-nav ul {
        gap: 30px;
        width: 100%;
        margin-left: 30px;
    }

    .imgbox {
        width: 100%;
        height: 100vh;
        min-height: 200px;
        max-height: 360px;
    }

    .contact_center_phone {
        font-size: 18px;
        left: 60%;
        top: 60px;
        position: absolute;
        background-color: #ff7d00;
        padding: 5px;
        text-align: center;
    }

    .imgbox.sml {
        width: 150px;
        height: auto;
    }
}

/* Responsive */
@media (max-width: 1366px) {
    .hero {
        min-height: 650px;
    }

    .prefabr_video,
    .prefabr_video_max {
        max-width: 80vw;
    }
}

@media (max-width: 1280px) {
    .main-nav {
        display: none;
        align-items: flex-start;
        height: 650px;
        margin-top: 15px;
        background-color: #a81923;
        overflow-y: scroll;
    }

    .main-nav ul {
        position: relative;
        left: -7px;
        top: 10px;
        gap: 15px;
        width: 90vw;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 0 15px 60px;
        margin: 0;
        background-color: #ab0b17f0;
        flex-wrap: wrap;
        border-bottom: 1px solid #ffffffb0;
        align-content: flex-start;
        font-size: 14px;
    }

    .projects_list,
    .our_projects_list,
    .comprehensive_design_list {
        justify-content: flex-start;
    }

    .menu_btn_ico {
        display: inline-flex;
    }

    .hero {
        min-height: 550px;
        margin-top: 60px;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .consulting_section_video,
    .installation_section_video,
    .our_projects_section_video,
    .comprehensive_design_section_video,
    .magna_section_video,
    .buy_storage_cabinet {
        margin-top: 60px;
    }

    .site-header .logo img {
        position: relative;
        top: 10px;
    }

    .slogan_menu {
        font-size: 15px;
        top: 280px;
        display: inline-flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        width: 70vw;
        margin-left: 0;
        left: 15%;
        justify-content: space-evenly;
        padding: 3%;
    }

    .slogan_menu a {
        padding: 1px;
        margin: 5px;
    }

    .slogan {
        width: 250px !important;
        margin-left: -125px !important;
        min-width: auto !important;
        left: 50vw !important;
        font-size: 30px;
        line-height: 30px;
        top: 85px;
    }

    .slogan.consulting,
    .slogan.installation,
    .slogan.storage_cabinet,
    .slogan.our_projects,
    .slogan.comprehensive_design,
    .slogan.fabrication,
    .slogan.prefinished_panelized,
    .slogan.bim,
    .slogan.magna,
    .slogan.contact_us {
        left: 5vw !important;
        top: 20vh !important;
        margin-left: auto !important;
        width: 320px !important;
    }

    .container {
        max-width: 90vw;
        padding: 2% 3% 2% 3%;
    }

    h1 {
        font-size: 1.8em;
        line-height: 1.2em;
        display: inline-flex;
    }

    .hero_design_for_manufacturing {
        max-width: 270px;
    }

    .projects_menu {
        display: inline-flex;
        position: relative;
        width: 100% !important;
        margin-top: 10px;
        margin-left: -50px;
        font-size: 10px;
        padding: 0px 50px 10px;
        border: none;
    }

    .imgbox {
        width: 250px;
    }

    .ready_to_optimize {
        font-size: 45px;
        line-height: 45px;
        text-align: center;
        display: inline-flex;
        padding: 45px;
    }

    .map_slogan {
        font-size: 40px;
        line-height: 51px;
    }

    .map_descr {
        font-size: 22px;
        line-height: 30px;
    }

    .contact_center_phone {
        position: absolute;
        font-size: 20px;
        top: 0px;
        left: 50px;
        background-color: transparent;
        text-align: center;
    }

    .right_ico {
        top: -22px;
    }

    .box.building_border,
    .box.building_border_1,
    .box.building_border_2 {
        min-width: auto;
        max-width: 450px;
        font-size: 12px;
    }

    .slogan_two,
    .slogan_lite,
    .slogan_lite_mini {
        font-size: 30px;
        line-height: 36px;
        margin: 15px;
    }

    .slogan.bim {
        width: 90vw !important;
        top: 80px !important;
        font-size: 20px;
    }

    .box_fabrication {
        width: 100%;
    }

    .bim_section_video {
        height: 500px;
    }

    .cs_video_play_ico {
        top: 40vh;
    }
}

@media (max-width: 1024px) {

    .imgbox {
        width: 200px;
        height: auto;
    }

    .imgbox.big {
        width: 200px;
        height: auto;
    }

    .slogan_two,
    .slogan_lite,
    .slogan_lite_mini {
        font-size: 24px;
        line-height: 30px;
    }
}

/* Responsive */
@media (max-height: 768px) {
    .slogan_menu {
        top: 300px;
    }

    .slogan.consulting,
    .slogan.installation,
    .slogan.storage_cabinet,
    .slogan.our_projects,
    .slogan.comprehensive_design,
    .slogan.fabrication,
    .slogan.prefinished_panelized,
    .slogan.bim,
    .slogan.magna,
    .slogan.contact_us {
        width: 90vw !important;
        top: 140px !important;
        font-size: 20px;
    }

    .cs_video_play_ico {
        top: 42vh;
    }

    .main-nav {
        height: 300px;
    }
}

/* Responsive */
@media (max-height: 500px) {
    .bim_section_video {
        height: 350px;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .slogan_menu {
        padding: 2%;
    }

    .box_flex {
        flex-direction: column;
    }

    .box_flex_line {
        flex-direction: column;
        align-items: center;
    }

    .box {
        width: 100%;
    }

    .ready_to_optimize {
        font-size: 40px;
        line-height: 40px;
    }

    .container {
        padding: 5%;
    }

    .button_on_the_top_page,
    .button_on_section_page {
        width: 25px;
        height: 25px;
    }

    .btn-primary {
        padding: 12px 15px;
    }

    .map_slogan {
        font-size: 40px;
        line-height: 51px;
    }

    .map_descr {
        font-size: 18px;
        line-height: 28px;
    }

    .man_ico {
        width: 40px;
        height: 40px;
        margin-left: -45px;
    }

    .box.building_border,
    .box.building_border_1,
    .box.building_border_2 {
        min-width: auto;
        max-width: 100%;
        padding: 5%;
        margin: 1%;
    }

    .slogan_two,
    .slogan_lite,
    .slogan_lite_mini {
        font-size: 18px;
        line-height: 22px;
    }

    .bim_content_video_dynamic_dfma_construction {
        width: 280px;
    }

}

/* Responsive */
@media (max-width: 568px) {

    .slogan_menu {
        font-size: 15px;
        justify-content: center;
        top: 250px;
        left: 20%;
        width: 60vw;
    }

    .slogan_menu a {
        padding: 1px;
    }

    .ready_to_optimize {
        font-size: 30px;
        line-height: 30px;
    }

    .button_on_the_top_page,
    .button_on_section_page {
        left: 94.5vw;
        width: 20px;
        height: 20px;
    }

    .contact_center_phone {
        font-size: 16px;
        top: 5px;
        left: 30px;
    }

}

/* Responsive */
@media (max-width: 450px) {

    .contact_center_phone {
        font-size: 12px;
        left: -35px;
    }
}

/* Responsive */
@media (max-width: 380px) {

    .contact_center_phone {
        font-size: 12px;
        left: -190px;
        top: -17px;
    }
}