:root {
  --primary-font: "Geist", sans-serif;

  --primary-color: #2FA7C5;
  --white: #fff;
  --yellowish-green: #95BE2A;
  --navy-blue: #0A4981;
  --abyss-blue: #002238;

  --14-font: 1.4rem;
  --16-font: 1.6rem;
  --18-font: 1.8rem;
  --24-font: 2.4rem;
  --28-font: 2.8rem;
  --30-font: 3rem;
  --40-font: 4rem;
  --60-font: 6rem;
  --75-font: 7.5rem;
  --80-font: 8rem;
  --110-font: 11rem;

  --transition-03: all 0.3s ease-in-out;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    outline: none;
}

/* Works on Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: red;

}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 8px;
    padding: 10px;

}

*::-webkit-scrollbar-track {
    background: red
}

*::-webkit-scrollbar-thumb {
    background-color: #000;

}

::-moz-selection {
    color: #fff;
    background: #000;
    text-shadow: none;
}

::selection {
    color: #fff;
    background: #000;
    text-shadow: none;
}

html {
    font-size: 62.5%;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth
}

body {
    line-height: 1;
    font-size: var(--18-font);
    font-family: var(--primary-font);
    font-weight: 400; 
    color: var(--abyss-blue);
    background:#F6F8ED;
    transition: var(--transition-03);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    font-size: inherit;
    margin: 0;
}

ol,
ul,
li {
    list-style: none;
}

a {
    outline: none;
    color: inherit;
    background-color: transparent;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}


main {
    display: block;
}

section{
    display: flex;
    flex-direction: column;
    width: 100%;
}

img {
    border-style: none;
}
  
.img-res {
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 0;
    -ms-interpolation-mode: bicubic;
    vertical-align: bottom;
}

.Sticky__footer {
    min-height: calc(100vh - 65rem);
}

/* ! Global css */
.cnt {
    width: 100%;
    margin: 0 auto;
}

.cnt_wp {
    display: flex;
    width: 100%;
}

.cnt_1540 {
    max-width: 154rem;
}

.cnt_1600 {
    max-width: 160rem;
}

.cnt_1640 {
    max-width: 164rem;
}

.cnt_1720 {
    max-width: 172rem;
}

.cnt_1890 {
    max-width: 189rem;
}

/* ! Header */
.mob_request_quote,
.burger_menu-svg  {
   display: none;
}

.header {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 999;
    transition: var(--transition-03);
    transform: translateZ(0);
    padding: 5rem 0 2rem;
}

.header.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateZ(-10px);
}

.header.shrink {
    background: var(--white);
    padding: 2rem 0
}

.header.shrink .left_nav ul li a, 
.header.shrink .right_nav ul li a {
    color: var(--navy-blue);
}

.header.shrink .right_nav ul li a.estimator_tool {
    color: var(--white);
}

.header.shrink .left_nav ul li a::before,
.header.shrink .right_nav ul li a::before {
    background: var(--navy-blue);
} 

.header .cnt_wp {
    align-items: center;
}

.duraco_logo {
    max-width: 15rem;
}

.navigation {
    display: flex;
    align-items: center;
    gap: 18rem;
    margin-left: auto;
}

.left_nav ul,
.right_nav ul {
   display: flex;
   gap: 5rem;
   align-items: center;
}

.left_nav ul li a,
.right_nav ul li a {
    font-weight: 500;
    line-height: 2rem;
    letter-spacing: -0.54px;
    transition: var(--transition-03);
    cursor: pointer;
    display: inline-block;
    position: relative;
    color: var(--white);
}

.left_nav ul li a::before,
.right_nav ul li a::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: -5px;
    width: 0%;
    height: 1px;
    background: var(--white);
    transition: all 0.3s linear;
} 

.left_nav ul li a:hover::before,
.right_nav ul li a:hover::before {
    content: "";
    left: 0;
    right: auto;
    width: 100%;
}

.menu_has_submenu {
    position: relative;
    cursor: pointer;
    font-weight: 500;
}

.menu_has_submenu::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
}

.menu_has_submenu::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    display: block;
    top: 50%;
    transform: translateY(-50%);
    right: -15px;
    background-image: url("../assets/images/todelete/arrow_down.png");
}

.menu_has_submenu .has_submenu {
    position: absolute;
    top: 3rem;
    left: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    border: 1px solid #B9B9B8;
    border-radius: 10px;
    width: 20rem;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-10px);
    transition: var(--transition-03);
    background: white;
}

.left_nav ul.has_submenu {
    gap: 3rem;
    z-index: 1;
}

.left_nav ul.has_submenu li a {
    color: var(--abyss-blue);
}

.left_nav ul.has_submenu li a::before {
    background: var(--abyss-blue);
}

.menu_has_submenu.active .has_submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.page_link {
    padding: 1.5rem 6rem 1.5rem 3rem;
    color: #FFF;
    font-size: var(--16-font);
    line-height: 2rem;
    letter-spacing: -0.48px;
    border-radius: 50px;
    position: relative;
    display: inline-block;
    transition: var(--transition-03);
}

.page_link.estimator_tool,
.page_link.view_img {
    background: var(--yellowish-green);
}

.page_link.banner-link,
.page_link.link-more-duraco,
.page_link.footer-contact {
    background: var(--primary-color);
}

.page_link.link-read-more {
    background: var(--navy-blue);
}     

/* .page_link.estimator_tool,
.header.inner_page .right_nav ul li .page_link.estimator_tool {
    background: var(--yellowish-green);
    color: var(--white);
} */

.page_link > .link_text {
    transition: var(--transition-03);
}

.page_link::after {
    content: url("../assets/images/todelete/arrow_forward.png");
    position: absolute;
    top: 55%;
    transform: translateY(-50%) translateX(6px);
    transition: var(--transition-03);
}

.right_nav ul li a.estimator_tool::before {
    content: none;
}

.page_link:hover > .link_text {
    transform: translateX(-3px);
    display: inline-block;
}

.page_link:hover::after {
    transform: translateY(-50%) translateX(10px);
}

.arrow_icon {
    padding-left: 20px;
    display: inline-block;
    transition: var(--transition-03);
}

.page_link.estimator_tool:hover,
.page_link.view_img:hover {
    box-shadow: 0 0 10px var(--yellowish-green),
                0 0 20px var(--yellowish-green);
}

.page_link.banner-link:hover,
.page_link.link-more-duraco:hover,
.page_link.footer-contact:hover {
    box-shadow: 0 0 10px var(--primary-color), 
                0 0 20px var(--primary-color);
}

.page_link.link-read-more:hover {
    box-shadow: 0 0 10px var(--navy-blue),
                0 0 20px var(--navy-blue);
}

/* ! Footer */
.footer {
    background: var(--navy-blue);
    padding-bottom: 1.7rem;
}

.footer .cnt_wp {
    flex-direction: column;
}

.top_footer {
    padding: 9.3rem 16.2rem;
}

.top_footer-wp {
    display: flex;
    gap: 7.2rem;
    align-items: flex-end;
}

.top_footer-text {
    color: var(--white);
    font-size: var(--80-font);
    font-weight: 500;
    line-height: 8.5rem;    
    letter-spacing: -3.2px;
    max-width: 90rem;
}

.footer-contact {
    margin-bottom: 2.4rem;
}

.bot_footer {
    background: var(--white);
    padding: 5.5rem 11.8rem  4.3rem 14.2rem;
    border-radius: 40px;
}

.bot_footer-top,
.duraco_privacy {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #B9B9B8;
}

.bot_footer-top {
    padding-bottom: 9rem;
}

.duraco_privacy {
    padding: 3.5rem 0;
}

.footer-logo {
    max-width: 16rem;
}

.mini_nav-wp {
    display: flex;
    align-items: flex-start;
    gap: 13rem;
}

.footer_nav a, 
.duraco_info a,
.developed_by,
.social_media-wp a {
    font-weight: 400;
    line-height: 2rem;
    letter-spacing: -0.36px;
    margin-bottom: 1.2rem;
    display: block;
}

.duraco-tel a {
    display: inline-block;
}

.other_links ul,
.social_media-wp ul {
    display: flex;
    gap: 2.8rem;
}

.other_links ul li a {
    font-weight: 400;
    line-height: 2rem;
    letter-spacing: -0.36px;
    position: relative;
}

.other_links ul li:not(:last-child) a::after {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--abyss-blue);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -1.4rem;
}

.social_media-wp {
    padding-top: 3.3rem;
}

.social_media-wp ul {
    justify-content: flex-end;
}

.footer_nav a:hover, 
.duraco_info a:hover,
.duraco-tel a:hover,
.other_links a:hover,
.social_media-wp a:hover {
    color: var(--yellowish-green);
}

/* homepage */
.primo {
    margin-top: 20rem;
}

.home_intro {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.hero_video {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 1.6rem;
    top: 0;
    left: 0;
}

.hero_video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 40px;
    position: relative;
}

.video_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    pointer-events: none;
    border: 1.6rem solid #F6F8ED;
    border-radius: 55px;
}

.hero_desc {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    text-align: center;
}

.hero_desc_wp {
    max-width: 98.5rem;
    margin: 20rem auto 0;
}

.hero_text {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    align-items: center;
    justify-content: center;
}

.page_title {
    color: var(--white);
    text-align: center;
    font-size: var(--110-font);
    line-height: 11rem;
    letter-spacing: -5.5px;
}

.banner_txt {
    margin-top: 1.6rem;
    color: var(--white);
    font-size: var(--24-font);
    font-weight: 400;
    line-height: 3rem;
    letter-spacing: -0.96px;
    max-width: 55rem;
    margin: 0 auto;
}

.banner-link {
    display: inline-block;
    margin-top: 2.5rem;
}

.tag_banner {
    display: flex;
    gap: 12rem;
    justify-content: center;
    margin-top: 4rem;
}

.tag_banner span {
    color: var(--white);
    position: relative;
}

.tag_banner span:not(:last-child)::after {
   content: '';
   height: 100%;
   width: 1px;
   background-color: var(--white);
   position: absolute;
   right: -6rem;
}

.play_btn {
    position: absolute;
    bottom: 5%;
    right: 2%;
    z-index: 1;
    cursor: pointer;
}

.svg_play {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    background: var(--yellowish-green);
    transition: var(--transition-03);
}

.play_btn:hover .svg_play {
    box-shadow: 0 0 10px rgba(149, 190, 42, 0.7), 
                0 0 20px rgba(149, 190, 42, 0.5);
}

.reliable_section {
    margin-top: 15rem;
}

.reliable_section .cnt_wp {
    flex-direction: column;
}

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

.left_text {
    width: 46%;
}

.section_subtitle {
    font-size: var(--75-font);
    font-weight: 500;
    line-height: 7.5rem;
    letter-spacing: -4.8px;
}

.right_text {
    width: 35%;
    margin-left: 9%;
}

.section_txt {
    line-height: 2.5rem;
    font-weight: 400;
    padding-top: 3rem;
    max-width: 74rem;
}

.top_realiable .right_text span {
    border-radius: 50px;
    color: var(--white);
}

.top_realiable .right_text .respect {
    padding: 2px 10px;
    background-color: var(--primary-color);
}

.top_realiable .right_text .empower {
    padding: 2px 10px;
    background-color: var(--yellowish-green);
}

.top_realiable .right_text .innovate {
    padding: 2px 10px;
    background-color: var(--navy-blue);
}

.link-more-duraco {
    margin-top: 1rem;
}

.bot_realiable {
    margin-top: 4rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.water_storage {
    max-width: 46.5rem;
    overflow: hidden;
    position: relative;
    top: 6rem;
}

.mechaincal_engineer {
    max-width: 67rem;
    padding-right: 10rem;
    overflow: hidden;
}
            
.imageAccordion {
    margin-top: 15rem;
}

.imageAccordion .cnt_wp {
    background: var(--navy-blue);
    text-align: center;
    flex-direction: column;
    border-radius: 40px;
}

.imageAccordion_title {
    color: var(--white);
    font-family: Geist;
    font-size: var(--75-font);
    font-weight: 500;
    line-height: 8.5rem;
    letter-spacing: -3.2px;
    padding: 8.2rem 30rem 3rem ;
}

.accordionImg {
    padding: 0 2%;
    display: flex;
    height: 680px;
    overflow: hidden;
    gap: 1.6rem;
    position: relative;
    top: 7rem;
}

.panelImg {
    flex: 1;
    height: 100%;
    position: relative;
    transition: var(--transition-03);
    overflow: hidden;
    border-radius: 21px;
}

.panelImg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.panelImg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
    transition: var(--transition-03);
    border-radius: 20px;
    left: 3px;
    top: 2px;
    height: 99.3%;
}

.panelImg img {
    border-radius: 20px;
    border: 3px solid #FFF;
    object-fit: cover;
    overflow: hidden;
    position: relative;
}

.panelImg a {
    width: 100%;
    height: 100%;
    display: flex;
}

.panelImg_desc {
    position: absolute;
    justify-content: space-between;
    align-items: flex-end;
    display: flex;
    text-align: left;
    bottom: 7%;
    padding: 0 7%;
    color: white;
    width: 100%;
    display: none;
    z-index: 1;
}

.panel_txt_wp,
.panel_link {
    opacity: 0;
    transition: var(--transition-03);
    visibility: hidden;
    transform: translateY(20px);
}

.panelImg.open .panel_txt_wp,
.panelImg.open .panel_link {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.panel-title {
    color: var(--white);
    font-size: var(--40-font);
    font-style: normal;
    font-weight: 500;
    line-height: 4.2rem;
    letter-spacing: -1.2px;
    max-width: 31.5rem;
}

.panel-txt {
    color: var(--white);
    font-size: var(--16-font);
    font-weight: 500;
    line-height: 2rem;
    letter-spacing: -0.32px;
    max-width: 41.5rem;
    margin-top: 2rem;
}

.panelImg:hover {
    flex: 4;
}

.panelImg:hover::after {
    background: linear-gradient(249deg, rgba(47, 167, 197, 0.00) 1.17%, #015086 97.53%);
}

.panelImg:hover .panelImg_desc {
    display: flex;
}

.imageAccordion-slider {
    display: none;
}

.tabbling_btn {
    margin-top: 4rem;
    display: flex;
    gap: 4rem;
    padding: 1.6rem 2rem;
    background: var(--white);
    border-radius: 100px;
    border: 0.751px solid #B9B9B8;
    background: #FFF;
    max-width: fit-content;
}

.tab {
    border-radius: 74px;
    padding: 1.2rem 4rem;
    cursor: pointer;
    transition: var(--transition-03);
}

.tab.active {
    background: #0A4981;
    color: white;
}

.map_location {
    margin-top: 15rem;
}

.pin_location {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.map-left {
  width: 50%;
}

.store_location_wp {
    margin-top: 5rem;
    position: relative;
    height: 45rem;
    width: 100%;
}

.island_location,
.island_map {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--transition-03);
}

.island_map {
    transform: translateX(-20px);
    position: absolute;
}

 .mobile_map {
    display: none;
 }

.island_location.active,
.island_map.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateX(0);
}

.zoneContent_box {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: 5.5rem;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-03);
    pointer-events: none;
    transform: translateY(20px);
}

.zoneContent_box.active,
.island_location.active .rodrigues {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(0)
}

.zoneContent_box-pagination {
    width: 100%;
}

.zoneContent_box-pagination button {
    padding: 6px 12px;
    border: none;
    background: #0A4981;
    color: #fff;
    font-size: var(--14-font);
    line-height: 1.2rem;
    cursor: pointer;
    border-radius: 4px;
    font-weight: 400;
    text-transform: uppercase;
    font-family: var(--title-fonts);
    letter-spacing: -0.12px;
    transition: var(--transition-03s);
}

.page-info {
    font-size: var(--14-font);
}

.store_repeat {
    width: 48%;
}

.store_repeat-title {
    font-size: var(--30-font);
    font-weight: 600;
    line-height: 3.2rem;
    letter-spacing: -0.87px;
}

.store_repeat-info {
    margin-top: 1.1rem;
    display: flex;
    flex-direction: column;
    line-height: 2.4rem;
    letter-spacing: -0.36px;
}

.store_repeat-mail span {
    text-decoration: underline;
}

.store_repeat-link a {
    display: inline-block;
    color: var(--primary-color);
    font-size: var(--14-font);
    font-weight: 600;
    line-height: 1.6rem;
    margin-top: 1.8rem;
    position: relative;
    transition: var(--transition-03);
}

.store_repeat-link a::after {
    content: '';
    background-image: url('../assets/images/todelete/location_arrow.png');
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    right: -20px;
    top: 65%;
    transform: translateY(-50%);
    transition: var(--transition-03);
    width: 15px;
    height: 15px;
}

.store_repeat-link a:hover {
    color: var(--yellowish-green);
}

.store_repeat-link a:hover::after {
    background-image: url('../assets/images/todelete/location_arrow.png');
}

.link-view-more {
    margin-top: 2.5rem;
}

.map-right {
    width: 50%;
    position: relative;
    margin-left: auto;
}

.map_mauritius_svg {
    position: absolute;
    top: 0;
    left: 0;
}

.map_mauritius_svg svg {
    height: 100%;
    width: 100%;
}

.island_map.rodrigues {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pin_icon {
    font-size: var(--20-font);
    font-weight: 600;
    line-height: 2.8rem;
    letter-spacing: -0.87px;
    max-width: 13.5rem;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: var(--transition-03);
}

.pin_icon.fix_icon {
   opacity: 1;
   visibility: visible;
   font-size: 1.4rem;
}

.pin_icon.fix_icon.active {
   opacity: 0;
   visibility: hidden;
}

.pin_icon.fix_icon::before {
    width: 2rem;
    height: 2.4rem;
    top: -2.1rem;
    left: 0rem;
}

.pin_icon.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(0);
}

.pin_icon::before {
    content: '';
    position: absolute;
    top: -6rem;
    left: -1rem;
    width: 4.6rem;
    height: 5.5rem;
    background-image: url('../assets/images/todelete/pin_icon.png');
    background-size: cover;
    background-repeat: no-repeat;
}

.map-mau {
    opacity: 0;
    cursor: pointer;
    transition: var(--transition-03);
}

.map-mau.active,
.map-mau:hover {
    opacity: 1;
}

.riviere_du_rempart_store {
    top: 13%;
    right: 16%;
}

.pamplemousses_store {
    top: 25%;
    right: 40%;
}

.flacq_store {
    top: 45%;
    right: 15%;
}

.moka_store {
    top: 50%;
    left: 50%;
}

.port_louis_store {
    top: 35%;
    left: 40%;
}

.black_river_store {
    bottom: 30%;
    left: 15%;
}

.plain_wilhems_store {
    top: 57%;
    left: 32%;
}

.grand_port_store {
    bottom: 20%;
    right: 30%;
}

.savanne_store {
    bottom: 9%;
    right: 55%;
}

.riche_terre_store {
    top: 33%;
    left: 36%;
}

.pailles_store {
    top: 39%;
    left: 39%;
}

.get_latest_news {
    margin-top: 5rem;
    margin-bottom: 15rem;
}

.get_latest_news .cnt_wp {
    flex-direction: column;
}

.top_latest_news {
    display: flex;
}

.bot_latest_news {
    margin-top: 7rem;
}

.news_box {
    background: var(--white);
    padding: 1rem;
    border-radius: 30px;
}

.latest_news-repeat {
    text-align: center;
}

.news-img {
    overflow: hidden;
    border-radius: 30px;
}

.news-img img {
    transition: var(--transition-03);
    border-radius: 30px;
}

.latest_news-repeat:hover > .news-img img {
    transform: scale(1.1);     
}

.news-title {
    margin-top: 2rem;
    font-size: var(--30-font);
    font-weight: 500;
    line-height: 3.8rem;
    letter-spacing: -0.9px;
}

.news-txt {
    margin-top: 0.8rem;
    font-size: var(--16-font);
    line-height: 2rem;
    letter-spacing: -0.32px;
    padding: 0 2rem;
}

.news-btn_wp {
    display: flex;
    flex-direction: column;
    margin-top: 5rem;
}

.news-date {
    color: var(--primary-color);
    font-size: var(--16-font);
    font-weight: 500;
    line-height: 2rem;
    letter-spacing: -0.32px;
}

.article_read_more {
    margin-top: 1.3rem;
}

.link-read-more {
    background: var(--navy-blue);
    margin-bottom: 2rem;
}

/* inner page - where we buy */
.header.inner_page {
    padding: 5rem 0 4rem;
}

.header.inner_page::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 90%;
    width: 100%;
    margin: 0 auto;
    height: 1px;
    background:var(--abyss-blue);
    opacity: 0.3;
}

.header.inner_page .left_nav ul li a, 
.header.inner_page .right_nav ul li a {
    color: var(----abyss-blue);
}

.header.inner_page .right_nav ul li a::after {
    filter: invert(10%) sepia(60%) saturate(1200%) hue-rotate(170deg) brightness(30%) contrast(110%);
}

.header.shrink .right_nav ul li a::after {
    filter: unset;
}

.header.inner_page .left_nav ul li a::before, 
.header.inner_page .right_nav ul li a::before {
    background: var(--abyss-blue);
}

.header.shrink .menu_has_submenu::before,
.header.inner_page .menu_has_submenu::before {
    background-image: url(../assets/images/todelete/arrow_down_blue.png);
}

.where_we_are {
    margin-bottom: 10rem;
}

.map_location.primo {
    margin-top: 20rem;
}

/* news */
.inner_intro {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
}

.inner_intro-title {
    font-size: var(--80-font);
    font-weight: 500;
    line-height: 8.5rem;
    letter-spacing: -4.8px;
    max-width: 90rem;
}

.inner_intro-txt {
    max-width: 81rem;
    line-height: 2.4rem;
}

.inner_intro-txt strong {
    color: var(--primary-color);
    font-weight: 600;
}

.news_contain .cnt_wp {
    flex-direction: column;
    gap: 9rem;
    align-items: center;
}

.news_contain {
    margin-top: 9rem;
    margin-bottom: 15rem;
}

.news_contain .news_box {
    opacity: 0;
    transform: translateY(40px);
}

.news_wp {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2rem;
    row-gap: 4rem;
}

.news-pagination {
    display: flex;
    gap: 9rem;
}

.newsPagination {
    font-size: var(--16-font);
    font-weight: 500;
    line-height: 1.8rem;
    letter-spacing: -0.5px;
    background: none;
    border: none;
    cursor: pointer;
}

.pagination_num {
    border: none;
    background: none;
    opacity: 0.5;
    cursor: pointer;
}

.pagination_num:hover,
.pagination_num.active {
    opacity: 1;
}

.pagination_num:not(:last-child) {
    border: none;
    background: none;
    padding-right: 1rem;
    margin-right: 1rem;
    border-right: 1px solid var(--abyss-blue);
}

/* news detail */
.news_details {
    padding-bottom: 11rem;
    margin-bottom: 11rem;
    position: relative;
}

.news_details:after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 90%;
    height: 1px;
    background: var(--abyss-blue);
    opacity: 0.3;
}

.news_details .cnt_wp {
    flex-direction: column;
}

.news_detail_wp {
    width: 100%;
    display: flex;
}

.news_details-left {
    width: 52%;
    font-size: var(--16-font);
}
.news_details-right {
    width: 46%;
    margin-left: auto;
}

.news_detais_img {
    position: sticky;
    top: 1rem;
}

.news_detais_img img {
    border-radius: 30px;
}

.back_link {
    font-weight: 500;
    position: relative;
    display: flex;
    gap: 1rem;
    width: fit-content;
    align-items: center;
}

.back_link svg,
.back_link {
   transition: var(--transition-03);
}

.back_link:hover span {
    color: var(--yellowish-green);
}

.back_link:hover svg {
    transform: translateX(-5px);
}


.news_detail-title {
    margin-top: 6rem;
    font-size: var(--60-font);
    font-weight: 500;
    line-height: 6.5rem;
    letter-spacing: -2.4px;
}

.news_detail-info-share {
    margin-top: 6rem;
    margin-bottom: 7rem;
    display: flex;
    align-items: center;
    gap: 3.5rem;
}

.news_date_publi {
    color: var(--primary-color);
    font-weight: 500;
    font-size: var(--16-font);
}

.news_share_wp {
    display: flex;
    align-items: center;
    gap: 2rem;
    background: var(--primary-color);
    padding: 1.2rem 2.4rem;
    border-radius: 50px;
    color: var(--white);
}

.media_icon_wp {
    display: flex;
    gap: 1rem;
}
.media_icon svg path {
    transition: var(--transition-03);
}

.media_icon:hover svg path {
   fill: var(--yellowish-green);
}

.news_detail_txt {
    line-height: 2rem;
}

.news_detail_txt h2 {
    font-size: var(--24-font);
    font-weight: 600;
    line-height: 2.6rem;
    letter-spacing: -0.69px;
}

/* about */
.about .cnt_wp {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--white);
    border-radius: 40px;
    padding: 2rem;
}

.about .inner_intro-title {
    max-width: 96rem;
}

.about .inner_intro-txt{
    max-width: 73rem;
    margin-top: 2rem;
}

.timeline_slider {
    margin-top: 10rem;
    width: 100%;
}

.timeline_card {
    position: relative;
}

.timeline_card-info {
    display: flex;
    align-items: flex-end;
    gap: 5rem;
    margin-left: 17%;
}

.timeline_card-img img {
    border-radius: 30px;
}

.timeline_card-txt-wp {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 1rem;
    margin-bottom: 3rem;
}

.timeline_card-title {
    font-size: var(--40-font);
    font-weight: 500;
    line-height: 4.5rem;
    letter-spacing: -2.05px;
}

.timeline_card-txt {
    font-size: var(--16-font);
    font-weight: 400;
    line-height: 2rem;
    letter-spacing: -0.32px;
    max-width: 62rem;
}

.timeline_card-year {
    color: #34739E;
    font-size: 40rem;
    line-height: 30rem;
    font-weight: 500;
    letter-spacing: -20px;
    opacity: 0.05;
    position: absolute;
    right: 5%;
    top: 0;
}

.timeline_nav .swiper-button-next,
.timeline_nav .swiper-button-prev {
    top: 33%;
}

.timeline_nav .swiper-button-prev {
    left: 47%;
}

.timeline_nav .swiper-button-next {
    right: unset;
    left: 50%;
}

.second_slider {
    margin-top: 6rem;
    padding: 0 6% 12rem 3%;
}

.timeline_event_year-wp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.7rem;
    position: relative;
}

.timeline_event_year-wp::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: #B0C9D9;
}

.timeline_event_year,
.timeline_event_txt {
    color: #B0C9D9;
    font-weight: 600;
    line-height: 2.4rem;
    letter-spacing: -0.36px;
    transition: var(--transition-03);
}

.timeline_point {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: #B0C9D9;
    position: relative;
    transition: var(--transition-03);
}

.second_slider .swiper-slide-active .timeline_event_year,
.second_slider .swiper-slide-active .timeline_event_txt {
   color: var(--primary-color);
}

.swiper-slide-active .timeline_point {
   background: var(--primary-color);
}

.impact {
    margin-top: 12rem
}

.impact .cnt_wp,
.duraco_people .cnt_wp {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.section_int_title {
    font-size: var(--80-font);
    font-weight: 500;
    line-height: 8rem;
    letter-spacing: -4px;
}

.section_int_txt {
    margin-top: 2.8rem;
    max-width: 80rem;
    text-align: center;
    line-height: 2.4rem;
}

.section_int_txt strong {
    color: var(--primary-color)
}

.impact_wp {
    margin-top: 6.4rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.impact_repeat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 30px;
    padding: 5rem 5.5rem;
    height: 35rem;
    color: var(--white);
}

.impact_repeat.local {
    background: var(--yellowish-green);
}

.impact_repeat.sustainable {
    background: var(--primary-color);
}

.impact_repeat.certified {
    background: var(--navy-blue);
}

.impact_icon {
    width: 6rem;
    height: 6rem;
}

.impact_title {
    font-size: var(--30-font);
    font-weight: 600;
    line-height: 3.8rem;
    letter-spacing: -0.96px;
}

.impact_txt {
    margin-top: 1.6rem;
    font-size: var(--16-font);
    font-weight: 400;
    line-height: 2rem;
    letter-spacing: -0.32px;
}

.gallary_photo {
    margin-top: 15rem;
}

.gallary {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

/* .gallary::before {
  content: "";
  background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 100%;
  z-index: 9;
}

.gallary::after {
  content: "";
  background: linear-gradient(to left, #fff 0%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 100%;
  z-index: 9;
} */

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

.gallary-top .galleryBlock-item {
    animation: image_slide_right 30s linear infinite;
}

.gallary-bottom .galleryBlock-item {
    margin-top: 2rem;
    animation: image_slide_left 30s linear infinite;
}

.galleryBlock-item:hover {
  animation-play-state: paused;
}

.galleryBlock-item img {
    border-radius: 30px;
}

@keyframes image_slide_right {
  from { transform: translateX(0);}
  to {transform: translateX(-100%);}
}

@keyframes image_slide_left {
  from { transform: translateX(-100%);}
  to { transform: translateX(0); }
}

.duraco_people {
    margin-top: 12rem;
    margin-bottom: 20rem;
}

.peopleSwiper, .productsSwiper {
    margin-top: 7.5rem;
    width: 100%;
}

.people-repeat {
    padding: 1.3rem 0.8rem;
    background: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 57rem;
    border-radius: 40px;
}
.people-img {
    position: relative;
}

.people-img img {
    border-radius: 40px;
}

.people-info {
    padding: 0 2.2rem 4.5rem; 
}

.people-name {
    font-size: var(--30-font);
    font-weight: 500;
    letter-spacing: -1.5px;
    line-height: 5rem;
}

.linkedin_link {
    position: absolute;
    right: 4%;
    bottom: 4%;
    transition: var(--transition-03);
}

.linkedin_link:hover {
    transform: scale(1.1);
}

/* product page */
.product_page {
    padding: 1.5rem;
    position: relative;
}

.banner_img img {
    border-radius: 40px;
}

.banner_desc {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 13%;
}

.banner_desc_wp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.2rem;
}

.banner_title {
    color: var(--white);
    text-align: center;
    font-size: var(--80-font);
    font-weight: 500;
    line-height: var(--80-font);
    letter-spacing: -4px;
}

.banner_desc_wp .banner_txt {
    color: var(--white);
    font-size: var(--18-font);
    text-align: center;
    font-weight: 400;
    line-height: 2.4rem;
    letter-spacing: -0.36px;
    max-width: 78rem;
}

.filter_sec {
    margin-top: 10rem;
}

.filter_sec .cnt_wp {
    flex-direction: column;
    align-items: center;
    gap: 8rem;
}

.product_filter-wp {
    display: flex;
}

.filter-left {
    width: 16%;
}

.filter_sticky-wp {
    position: sticky;
    top: 2rem;
}

.filter_opt-title {
    color: var(----abyss-blue);
    font-size: var(--24-font);
    font-weight: 600;
    line-height: 2.6rem;
    letter-spacing: -0.69px;
}

.filter_opt-options {
    margin-top: 3.2rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    position: relative
}

.filter_opt-options::after {
    content: '';
    width: 85%;
    height: 1px;
    background: var(--abyss-blue);
    opacity: .2;
    position: absolute;
    bottom: 0;
}

.check_rp {
    display: flex;
    align-items: center;
    gap: 13px;
}

.check_rp input[type='checkbox'] {
    width: 2rem;
    height: 2rem;
}

.check_rp input[type='checkbox'] + label {
    transition: var(--transition-03)
}

.check_rp input[type='checkbox']:checked + label {
    font-weight: 700;
}

.tank_desc-title {
    color: var(--primary-color);
    margin-bottom: 10px;
    font-weight: 600;
}

.tank_desc-txt {
    font-size: var(--16-font);
    font-weight: 400;
    line-height: 2rem;
    letter-spacing: -0.32px;
}

.tank_desc-list {
    margin-top: 1.2rem;
    font-size: var(--16-font);
    font-weight: 400;
    line-height: 2rem;
    letter-spacing: -0.32px;
    font-weight: 500;
}

.tank_desc-list li {
    margin-bottom: 5px;
    margin-left: 2rem;
    list-style: disc;
}

.filter-right {
    width: 80%;
    margin-left: auto;
}

.products_wp {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.5rem;
    row-gap: 6.5rem;
}

.products_card {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    padding: 8rem 2.5rem 6.3rem;
    background: var(--white);
    border-radius: 20px;
    position: relative;
}

.product-cat {
    position: absolute;
    top: 5%;
    right: 5%;
    background: var(--yellowish-green);
    color: var(--white);
    padding: 8px 12px;
    font-size: var(--14-font);
    font-weight: 600;
    border-radius: 100px;
}

.product-name {
    font-size: var(--28-font);
    font-weight: 600;
    line-height: 3.5rem;
    letter-spacing: -0.84px;
    padding-bottom: 1.2rem;
    margin-bottom: 1.2rem;
    border-bottom: 1px solid #B0C9D9;
}

.product-name span {
    font-size: var(--18-font);
    font-weight: 500;
}

.product_desc {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product_info {
    font-size: var(--16-font);
    line-height: 2rem;
}

.product_info-title {
    font-weight: 600;
}

.product_quote {
    display: block;
    position: absolute;
    bottom: -5%;
    background: var(--primary-color);
    text-align: center;
    font-size: var(--16-font);
    font-weight: 600;
    color: var(--white);
    width: 90%;
    padding: 1.6rem 3rem;
    border-radius: 100px;
    transition: var(--transition-03);
}

.product_quote:hover {
    background: var(--navy-blue);
}

.product_quote::after {
    content: '';
    background-image: url('../assets/images/todelete/arrow_forward.png');
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    margin-left: 1rem;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
}

.product_pagination {
    display: flex;
    gap: 9rem;
}

.get_quote-left {
    width: 70%;
}

.quote_form {
    margin-top: 15rem;
    background: var(--navy-blue);
    padding: 14rem 16rem;
}

.quote_form .cnt_wp {
    flex-wrap: wrap;
}

.get_quote-wp {
    padding: 5.7rem 6.7rem 3rem;
    background: var(--white);
    border-radius: 20px;
    position: relative;
}

.form_group-wp,
.water_cal_form {
    padding-bottom: 3.2rem;
    margin-bottom: 3.2rem;
    border-bottom: 1px solid #DDD;
}

.tank_btn {
    width: 100%;
    background: none;
    padding: 2rem 3rem;
    display: flex;
    align-items: center;
    gap: 2.5rem;
    border-radius: 20px;
    border: 2px solid #D9D9D9;
    margin-top: 2rem;
    cursor: pointer;
    transition: var(--transition-03);
}

.tank_btn-icon {
    border-radius: 11px;
    padding: 2rem;
    background: #D9D9D9;
    transition: var(--transition-03);
}

.tank_btn-info {
    text-align: left;
}

.tank_btn-heading {
    line-height: 3rem;
    transition: var(--transition-03);
}

.tank_btn-icon svg path {
    transition: var(--transition-03);
}

.tank_btn-txt {
    font-size: var(--16-font);
    font-weight: 400;
    line-height: 3rem;
    color: #0A0A0A;
}

.tank_btn.active,
.tank_btn:hover {
    border-color: var(--primary-color);
    background: rgba(0, 165, 181, 0.05);
}

.tank_btn.active .tank_btn-heading,
.tank_btn:hover .tank_btn-heading {
    color: var(--primary-color);
    font-weight: 600;
}

.tank_btn.active .tank_btn-icon,
.tank_btn:hover .tank_btn-icon {
   background: var(--primary-color);
}

.tank_btn.active .tank_btn-icon svg path,
.tank_btn:hover .tank_btn-icon svg path {
   stroke: var(--white);
}

.form_input:last-child {
   margin-top: 2rem;
}

.form_input label {
    display: flex;
    align-items: center;
    gap: 13px;
}

.form_input input {
    padding: 2rem;
    width: 100%;
    border-radius: 12px;
    border: 1.081px solid #D9D9D9;
    background: #F3F3F5;
    margin-top: 13px;
}

.form_input select {
    position: absolute;
    left: -99999px;
}

.custom-select {
    transition: var(--transition-03);
}

.select {
    position: relative;
}

.select-styled {
    padding: 2rem;
    width: 100%;
    border-radius: 12px;
    border: 1.081px solid #D9D9D9;
    background: #F3F3F5;
    margin-top: 13px;
    position: relative;
    cursor: pointer;
}

.select-styled::after {
    height: 8px;
    width: 15px;
    position: absolute;
    top: 40%;
    transform: translateY(-50%) rotate(0);
    -webkit-transform: translateY(-50%) rotate(0);
    right: 20px;
    content: "";
    display: block;
    background-size: 15px 8px;
    background-image: url("../assets/images/todelete/select-Icon.svg");
    transition: 0.3s all ease;
}

.select-options {
    display: none;
    position: absolute;
    left: 0;
    padding: 0;
    top: 100%;
    right: 0;
    background: #FFFFFF;
    z-index: 12;
    list-style: none;
    max-height: 250px;
    overflow: auto;
}

.select-options li:nth-child(1) {
    display: none;
}

.select-options li {
    font-size: var(--18-font);
    padding: 1rem 2rem;
    cursor: pointer;
    transition: var(--transition-03);
}

.select-options li:hover {
    background: var(--yellowish-green);
    color: var(--white);
}

.form_input:nth-child(2) {
    margin-top: 3rem;
}

.input_heading {
    color: var(----abyss-blue);
    font-size: var(--16-font);
    font-weight: 400;
    line-height: 2.2rem;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.calculator_wp {
    position: relative;
}

.calculate_tank {
    position: absolute;
    bottom: -50%;
    background: var(--primary-color);
    text-align: center;
    font-size: var(--16-font);
    font-weight: 600;
    color: var(--white);
    width: 100%;
    padding: 2rem 3rem;
    border-radius: 100px;
    transition: var(--transition-03);
    border: none;
    cursor: pointer;
}

.calculate_tank:hover {
    background: var(--abyss-blue);
}

.form-container {
    position: relative;
    height: 76rem;
}

.water_cal_form {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--white);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-03);
    pointer-events: none;
    transform: translateY(20px);
}

.water_cal_form.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(0);
}

.get_quote-right {
    width: 27%;
    margin-left: auto;
    color: var(--white);
    display: flex;
    flex-direction: column;
    padding: 3rem 0;
}

.get_quote-right-bot {
    margin-top: auto;
}

.get_quote-txt {
    margin-top: 2rem;
    font-weight: 400;
}

.company_address-title span {
    font-weight: 600;
    margin-bottom: 5px;
    display: inline-block;
}

.company_address-title {
    line-height: 2.2rem;
}

.company_social-wp {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 2rem;
}

.company_address-title a:hover,
.company_social-wp a:hover,
.company_contant-wp a:hover,
.contact_info-address:hover {
   color: var(--yellowish-green);
}

.guidance {
    margin-top: 10rem;
}

.guidance_filter-wp {
    max-width: 150rem;
    margin: 0 auto;
    padding: 1.6rem 2rem;
    border-radius: 99px;
    border: 0.751px solid #B9B9B8;
    background: var(--white);
}

.filter_btn-wp {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
}

.fil_btn {
    color: #060606;
    font-size: var(--16-font);
    font-weight: 400;
    line-height: 2rem;
    letter-spacing: -0.32px;
    padding: 1.2rem 2rem;
    cursor: pointer;
    transition: var(--transition-03);
}

.fil_btn.active,
.fil_btn:hover {
    color: var(--white);
    /* font-weight: 600; */
    border-radius: 100px;
}

.fil_btn:hover {
    background: #B9B9B8;
}

.fil_btn.active.expert {
    background: var(--navy-blue);
}

.fil_btn.active.accessories {
    background: var(--primary-color);
}

.fil_btn.active.maintenance {
    background: var(--abyss-blue);
}

.fil_btn.active.warranty {
    background: rgb(122, 12, 12);
}

.fil_btn.active.faq {
    background: green;
}

.guidance_page {
    margin-top: 3rem;
    background: var(--white);
    position: relative;
    /*height: 116rem;*/
}

.guidance_page-wp {
    padding: 6rem 21.4rem 18rem;
    display: flex;
    flex-direction: column;
    gap: 3.8rem;
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*width: 100%;*/
    /*opacity: 0;*/
    /*visibility: hidden;*/
    /*transition: var(--transition-03);*/
    /*pointer-events: none;*/
    /*transform: translateX(-20px);*/
}

.guidance_page-wp.active {
    /*opacity: 1;*/
    /*visibility: visible;*/
    /*pointer-events: auto;*/
    /*transform: translate(0);*/
}

.guide_box-heading {
    font-size: var(--24-font);
    font-weight: 600;
    line-height: 2.6rem;
    letter-spacing: -0.69px;
    margin-bottom: 1.2rem;
}

.guide_box-txt {
    font-family: Geist;
    font-size: var(--16-font);
    font-weight: 400;
    line-height: 2rem;
    letter-spacing: -0.32px;
}

.guide_box-list {
    font-size: var(--16-font);
    line-height: 1.8rem;
}

/*.unorder-list li {*/
/*    list-style: disc;*/
/*    margin-left: 2rem;*/
/*}*/

/*.order-list li {*/
/*    list-style: decimal;*/
/*    margin-left: 2rem;*/
/*}*/

.order-list ul,
.order-list ol {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.order-list ul li {
    list-style: disc;
    margin-left: 2rem;
}

.guide_accordion {
    border-bottom: 1px solid var(--primary-color);
}

.guide_accordion-head {
    padding: 3rem 0;
    font-weight: 600;
    font-size: var(--24-font);
    cursor: pointer;
    position: relative;
}

.guide_accordion-head::after {
    content: '+';
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
}

.guide_accordion-head.active::after {
    content: '-';
}

.guide_accordion-body {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding-bottom: 5rem;
    padding-top: 3rem;
}


/* contact page */
.contact_banner {
    margin-top: 7rem;
    padding: 1.5rem;
}

.contact {
    margin-top: 8.5rem;
}

.contant-left {
    width: 30%;
}

.contact_info-wp {
    padding-top: 4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    font-size: var(--16-font);
}

.contact_info-address {
    margin-top: 3.5rem;
    line-height: 2rem;
}

.contact_info-address span {
    display: block;
    margin-bottom: 2px;
    font-weight: 600;
}

.company_contant-wp {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.company_contant-wp li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.social_media-title {
    color: var(--primary-color);
    margin-bottom: 2rem;
    font-weight: 600;
}

.social_icon {
    display: flex;
    align-items: center;
    gap: 12px;
}

.third_party {
    margin-top: 6.5rem;
    font-size: var(--18-font);
}

.third_party-txt {
    line-height: 2rem;
}

.third_party-txt span {
    font-weight: 600;
    color: var(--primary-color);
    display: block;
}

.third_party-btn {
    margin-top: 2.3rem;
    border-radius: 99px;
    background: var(--navy-blue);
    color: var(--white);
    padding: 5% 12% 5% 8%;
    display: inline-block;
    position: relative;
    transition: var(--transition-03);
    cursor: pointer;
}

.third_party-btn:hover {
    box-shadow: 0 0 10px var(--navy-blue),
                0 0 20px var(--navy-blue);
}

.contant-right {
    width: 65%;
    margin-left: auto;
    display: flex;
}

.contact_form {
    width: 100%;
    border-radius: 30px;
    background: var(--white);
    padding: 7.5% 7%;
}

.contact_form .umbraco-forms-fieldset {
    border: none;
}

.contact_form input[type="file"] {
    margin-top: 1.2rem;
}

.contact_form input[type="file"]::file-selector-button {
  background: #002238;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  margin-right: 10px;
}

.contact_form input[type="file"]::file-selector-button:hover {
  background: #004466;
}

.contact_form .umbraco-forms-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
}

.contact_form .umbraco-forms-field {
    width: 46.666%;
}

.contact_form .umbraco-forms-field.message{
    width: 100%;
}

.contact_form .umbraco-forms-field label {
    font-size: var(--16-font);
    font-weight: 400;
    line-height: 2rem;
}

.contact_form .umbraco-forms-field input.text,
.contact_form .umbraco-forms-field textArea {
    max-width: 100% !important;
    width: 100%;
    border: none;
    border-bottom: 1px solid #D7DCDF;
}

.contact_form .umbraco-forms-field input {
    height: 4rem;
}

.contact_form .umbraco-forms-field textArea {
    height: 10rem;
}

.contact_form .umbraco-forms-field select {
    border: none;
    border-bottom: 1px solid #bbb;
    width: 100%;
    font-size: 1.6rem;
}

.umbraco-forms-tooltip.help-block {
    font-size: 1.4rem;
    display: block;
    margin-top: 4px;
    margin-bottom: 10px;
    color: var(--primary-color);
    font-weight: bold;
}

.contact_form .umbraco-forms-hidden {
    display: none;
}

.contact_form .umbraco-forms-navigation {
  position: relative;
  display: inline-block;
  /*margin-top: 7rem;*/
}

.contact_form .umbraco-forms-navigation::after {
  content: url("../assets/images/todelete/arrow_forward.png");
  position: absolute;
  right: 20%;
  top: 50%;
  transform: translateY(-50%);
  transition: var(--transition-03);
}

.contact_form .umbraco-forms-navigation input[type="submit"] {
    border: none;
    background: var(--primary-color);
    color: var(--white);
    padding: 1.5rem 5rem 1.5rem 3rem;
    font-size: var(--16-font);
    font-weight: 600;
    line-height: 2rem;
    border-radius: 100px;
    position: relative;
    cursor: pointer;
    transition: var(--transition-03);
}

.contact_form .umbraco-forms-navigation:hover input[type="submit"] {
    box-shadow: 0 0 10px var(--primary-color), 
                0 0 20px var(--primary-color);
}

.contact_form .umbraco-forms-navigation:hover:after {
    right: 15%;
}

.contact_form .umbraco-forms-form input.text:focus, 
.contact_form .umbraco-forms-form input.title:focus, 
.contact_form .umbraco-forms-form select:focus, 
.contact_form .umbraco-forms-form textarea:focus {
    border: none;
    border-bottom: 1px solid var(--primary-color);
}

.location_map {
    margin-top: 10rem;
    margin-bottom: 10.8rem;
}

.location_map img {
    border-radius: 40px;
}

.social_icon li svg {
    transition: var(--transition-03);
}

.social_icon li:hover svg {
   scale: 1.2;
}

.page_link.view_img {
    margin-top: 2rem;
}

.filter_Guide_mobile {
    display: none;
}

.get_recommander_tank {
    width: 100%;
    margin-top: 5rem;
}

.get_recommander-wp {
    width: 70%;
    padding: 5.5rem 6.2rem 7rem;
    background: var(--white);
    border-radius: 20px;
    position: relative;
}

.recommander_title {
    font-size: var(--24-font);
    font-weight: 600;
    line-height: 2.6rem;
    letter-spacing: -0.69px;
}

.recommander_txt {
    margin-top: 4px;
    font-size: var(--16-font);
    font-weight: 400;
    line-height: 2rem;
    letter-spacing: -0.32px;
}

.recommander_tank {
    margin-top: 3.4rem;
    display: flex;
    align-items: center;
}

.recommander_tank-left {
    width: 60%;
    border-radius: 14px;
    border: 1px solid #D9D9D9;
    padding: 4rem 0;
    display: flex;
    justify-content: center;
    align-content: center;
}

.recommander_tank-img {
    max-width: 22rem;
}

.recommander_tank-name {
    color: #00A5B5;
    font-size: var(--24-font);
    font-weight: 600;
    line-height: 2.6rem;
    letter-spacing: -0.69px;
}

.recommander_tank-right {
    width: 34%;
    margin-left: auto;
}

.recommander_tank-info {
    margin-top: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.recommand-detail {
    display: flex;
    gap: 1.2rem;
}

.recommand-detail-icon {
    border-radius: 8px;
    background: rgba(0, 165, 181, 0.10);
    padding: 11px;
}

.recommand-detail-icon.price {
    background: rgba(139, 168, 44, 0.10);
    align-self: flex-start;
}

.tank_detail {
    font-size: var(--16-font);
    font-weight: 400;
    line-height: 2rem;
    letter-spacing: -0.32px;
}


.tank_detail span {
    display: block;
    font-weight: 600;
    margin-top: 4px;
}

.tank_detail.price span {
    color: #8BA82C;
    font-size: var(--24-font);
    font-weight: 500;
    line-height: 2.8rem;
    letter-spacing: -0.78px;
}

.recommander_action-wp {
    margin-top: 4.5rem;
    display: flex;
    gap: 4rem;
}

.recommand-btn {
    width: 100%;
    padding: 2rem;
    text-align: center;
    border-radius: 99px;
    border: 1px solid var(--primary-color);
    transition: var(--transition-03);
}

.recommand-btn-contact {
    background: var(--primary-color);
    color: var(--white);
}

.recommand-btn-download {
    color: var(--primary-color);
}

.recommand-btn-contact:hover {
    background: var(--abyss-blue);
    border-color: var(--abyss-blue);
}

.recommand-btn-download:hover {
    color: var(--abyss-blue);
    border-color: var(--abyss-blue);
}

.input-error {
    border: 2px solid #e74c3c;
}

.error-message {
    color: #e74c3c;
    font-size: 14px;
    margin-top: 5px;
}

/* calculatrice page */
.calculatrice .inner_intro-title {
    max-width: 120rem;
}

.calculator {
    margin-top: 7rem;
    margin-bottom: 10rem;
}

.calculation-left,
.default_display,
.result_display {
    border: 1px solid #F3F4F6;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
}

.calculation-left {
    width: 38%;
    height: 100%;
    padding: 4rem 2.5rem;
}

.calculator_form-inner {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.form_row-value {
    padding: 1.6rem;
    display: flex;
    justify-content: space-between;
    gap: 1.2rem;
    border-radius: 14px;
    background: #F5F5F5;
    margin-top: 1rem;
}

.form_row-value input[type='number'] {
    border: none;
    background: none;
    width: 100%;
    text-align: center;
}

.minus_icon,
.plus_icon {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    width: 3.5rem;
    height: 3.5rem;
    border: none;
    font-size: 2rem;
    padding: 1rem;
    cursor: pointer;
    transition: var(--transition-03);
}

.minus_icon:hover,
.plus_icon:hover {
    transform: scale(1.05);
}

.minus_icon:disabled,
.plus_icon:disabled {
    cursor: auto;
    transform: none;
}

.form_row-value select {
    width: 100%;
    border: none;
    border-bottom: 1px solid #F5F5F5;
    background: none;
}

.form_action_btn {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.calculation-right {
    width: 60%;
    margin-left: auto;
    position: relative;
}

.default_display {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50rem;
    padding: 2.5rem;
}

.default_display-txt {
    color: #99A1AF;
    font-size: var(--16-font);
    font-weight: 400;
    line-height: 2.4rem;
    letter-spacing: -0.312px;
}

.calculate_now {
    width: 100%;
}

.calculate_now input[type="submit"] {
    border-radius: 14px;
    border: none;
    background: var(--navy-blue);
    font-size: var(--16-font);
    color: var(--white);
    padding: 1.5rem 3rem;
    cursor: pointer;
    width: 100%;
    transition: var(--transition-03);
}

.reset_calculator {
    padding: 1.5rem 4.5rem;
    border-radius: 14px;
    border: 1px solid #E5E7EB;
    color: #4A5565;
    font-size: var(--16-font);
    background: none;
    cursor: pointer;
    transition: var(--transition-03);
}

.calculate_now input[type="submit"]:hover {
    background: var(--primary-color);
}

.reset_calculator:hover {
   background: var(--primary-color);
   color: var(--white);
}

.result_display {
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    width: 100%;
    /*position: absolute;*/
    /*top: 0;*/
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(20px);
}

.recommend_tank-repeat {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
    padding: 2rem;
    border-radius: 14px;
    border: 1px solid #F3F4F6;
    background: #FFF;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
}

.recommend_tank-icon {
    border-radius: 14px;
    background: var(--navy-blue);
    padding: 11px;
}

.recommend_tank-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.recommend_tank-capcity {
    font-size: var(--24-font);
}

.result_txt {
    text-align: center;
    padding: 3rem 0 2rem;
}

.email_btn {
    background: var(--navy-blue);
    border: none;
    padding: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 14px;
    color: var(--white);
    font-size: var(--20-font);
    cursor: pointer;
    transition: var(--transition-03);
}

.email_btn:hover {
    background: var(--primary-color);  
}

.calculation-right {
    display: grid;
}

.default_display,
.result_display {
    grid-column: 1;
    grid-row: 1;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.form_popup {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 0;
    display: grid;
    place-items: center;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--transition-03);
}

.form_popup.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    z-index: 999;
}

.popup_cnt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    height: auto;
}

.popup_wp {
    padding: 3rem;
    width: 100rem;
    height: 100%;
    min-height: 40rem;
    background: #fff;
}

.popup_wp-close {
    position: absolute;
    right: 3rem;
    top: 2rem;
    font-size: 2rem;
    color: #000;
    cursor: pointer;
    z-index: 2;
}

.tanks.multiplechoice,
.sewage.multiplechoice {
    width: 100%
}

.tanks.multiplechoice .checkboxlist,
.sewage.multiplechoice .checkboxlist {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 2rem;
}

.tanks.multiplechoice .checkboxlist > div,
.sewage.multiplechoice .checkboxlist > div {
    width: 23%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 15px;
    background: #f6f8ed;
    border-radius: 10px;
}

.featured_products {
    margin-bottom: 0;
}

.productsSwiper .swiper-slide .people-repeat {
    justify-content: unset;
    height: auto;
}

.productsSwiper .swiper-slide .people-info {
    padding: 0 2.2rem 1rem;
}

.productsSwiper .swiper-slide .product_quote {
    position: relative;
    bottom: unset;
    margin: 2rem auto;
}

.productsSwiper .swiper-slide .people-name {
    font-size: var(--20-font);
    line-height: 3rem;
    text-align: center;
}

/* Product colors */
.colorBtn-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.color-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.color-option input {
    display: none;
}

.color-btn {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    cursor: default;
    border: 2px solid transparent;
    transition: var(--transition-03);
    position: relative;
}

/* Colors */

.color-btn.white {
    background: linear-gradient(135deg, #ffffff, #e6e6e6);
    border-color: #D9D9D9;
}

.color-btn.grey {
    background: #65675C;
}

.color-btn.green {
    background: #5E7461;
}

.color-btn.beige {
    background: #B5ADA5;
}

.color-option span {
    font-size: var(--14-font);
    line-height: 1.6rem;
    letter-spacing: -0.2px;
    color: var(--abyss-blue);
    font-weight: 500;
}