html, body{  font-family: 'Pilat Wide'; background-color: #ffffff; font-size:16px;font-weight:400;height:auto !important;text-align:left;margin:0;padding:0;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}

input, textarea, select, button{border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0;-webkit-border-radius:0}

/*input:not(.input-file){-moz-appearance:none;-ms-appearance:none;-o-appearance:none;-webkit-appearance:none;appearance:none}*/

[class*="col-"]{}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{transition:background 5000s ease, color 5000s ease !important;transition-delay:background-color 5000s, color 5000s !important;}

a, button{text-decoration:none;text-decoration:none !important;cursor:pointer;}

p{margin:0;line-height:1.60;font-size: 16px; margin-bottom:30px;  font-family: 'Pilat Wide'; color: #626464;}

p strong {  font-family: 'Pilat Wide'; }

p:last-child{margin-bottom:0px;}

.transition,:before,:after, a, button{transition:all 0.5s ease;-moz-transition:all 0.5s ease;-ms-transition:all 0.5s ease;-o-transition:all 0.5s ease;-webkit-transition:all 0.5s ease;}

.container{max-width:1676px;margin:0 auto;width:100%;}

input[type=text]::-ms-clear{display:none;}

input[type=submit], input[type=button]{cursor:pointer;}

select:focus::-ms-value{color:inherit;background:none;}

*{outline:none !important;}

b, strong{  font-family: 'Pilat Wide'; font-weight:bold;color: #000;}

img{max-width:100%;vertical-align:middle;height:auto;border-radius: 0;}

ul, ol{margin:0 0 20px 0;padding:0;list-style:none;}

li{list-style:none;}

select:-moz-focusring{color:transparent;text-shadow:0 0 0 #606060;-moz-transition:all 0s ease;}

select::-ms-expand{display:none;}

input::-ms-clear{display:none;}

figure{margin:0;}

img.alignleft{margin:0 30px 30px 0;float:left;max-width:625px;}

img.alignright{margin:0 0 30px 30px;float:right;max-width:500px;}

.aligncenter{float:none;display:block;margin:15px auto 0 auto}

.noscript{background:#2e2a2b;display:block;text-align:center;color:#fff;padding:10px 0;position:fixed;bottom:0;right:0;left:0;z-index:9;}

p.noscript{margin:0;}

.warning-icon{display:inline-block;vertical-align:middle;position:relative;width:30px;height:30px;z-index:1;margin:0 10px 0 0;}

*::-webkit-input-placeholder{color:inherit;opacity:1;}

*:-moz-placeholder{color:inherit;opacity:1;}

*::-moz-placeholder{color:inherit;opacity:1;}

*:-ms-input-placeholder{color:inherit;opacity:1;}

*::placeholder{color:inherit;opacity:1;}

svg{}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6{  font-family: 'Pilat Wide'; font-weight: 400; line-height:1.2;display:block;margin:0 0 15px 0;color: #111;}

h1, .h1{font-size:35px;}

h2, .h2{font-size:25px;}

h3, .h3{font-size:22px;}

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

h5, .h5{font-size:18px;}

h6, .h6{font-size:16px;}

a{color: #212529;}

p a, p a strong, .cms_page ul li a strong, .cms_page ul li a {color:#0177ff;  font-family: 'Pilat Wide'; }

a:hover{color: #416bcd;}

.m0{margin:0 !important;}

.mb0{margin-bottom:0 !important;}

.p0{padding:0 !important;}

.pb0{padding-bottom:0 !important}

.pt0{padding-top:0 !important}

.logged-in{margin-top:32px;}

section{width:100%;padding:150px 0;z-index: 1;position: relative;float: left;}
button{background:no-repeat;border:none;padding:0;line-height:normal;}

.btn, .btn input {text-align: center; min-width: inherit; font-size: 14px; font-weight: 450; display: inline-flex; align-items: center; justify-content: center; line-height: normal; position: relative; z-index: 1; border-radius: 30px; padding: 3px 3px 3px 16px; box-shadow: none !important; outline: none; color: #fff; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; height: auto; border: none; } 

header .gray-btn{    border: none;  display: inline-block; color: #fff; text-decoration: none; border-radius: 0; background: #99918B; position: relative; z-index: 1;}



.banner_content_box .white-btn:hover span{ background: #fff }
.banner_content_box .white-btn:hover svg path{fill: #000;}


.white-btn {background: #fff; color: #000; gap: 10px; } 
.white-btn span {width:38px; height:38px; background:#087bf5; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; } 
.white-btn:active, .white-btn:focus-visible{    background: #fff !important; color: #000 !important;}
.white-btn span svg{width: 11px; height: 11px;}

.blue-btn{    background: #0177ff;    color: #fff;  }
.blue-btn span{ background:#fff; height: 35px; width: 35px; margin: 0 0 0 10px;    line-height: 32px; border-radius: 50%; text-align: center;     vertical-align: middle; display: inline-block; }
.blue-btn span svg{width: 11px; height: 11px;}
.blue-btn span svg path{ fill: #0077FE;  }
.blue-btn:active, .blue-btn:focus-visible{    background: #0177ff !important; color: #fff !important;}

.arrow-btn {flex-shrink: 0; width: 49px; height: 49px; border-radius: 50%; background: #0077FE; border: none; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.2s ease; margin-top: 2px; } 
.arrow-btn:hover {background: #1d4ed8; transform: scale(1.08); } 
.arrow-btn svg {width: 17px; height: 17px; stroke: #fff; }
.arrow-btn:active, .arrow-btn:focus-visible{    background: #0177ff !important; color: #fff !important;}


/* border button */
.border-btn {display: flex; align-items: center; gap: 10px; background: transparent; border: 1.5px solid #0077FE; color: #ffffff; cursor: pointer; text-decoration: none; flex-shrink: 0; transition: border-color 0.2s ease, background 0.2s ease; align-self: end; margin-top: 0; border-radius: 30px; padding: 3px 3px 3px 16px; }
.border-btn:hover {border-color: #fff; background: #fff; color: #0177ff;} 
.border-btn span {width: 35px; height: 35px; background: #2563EB; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s ease, transform 0.2s ease; } 
.border-btn:hover span {background: #1d4ed8; transform: scale(1.08); } 
.border-btn span svg {width: 11px; height: 11px; stroke: #fff; }
.border-btn:active, .border-btn:focus-visible{    background: transparent !important;  border: 1.5px solid #0077FE !important ; color: #ffffff !important ;}










.up-arrow span{width: 32px; height: 32px;margin-right: -10px; background: #fff; border-radius: 50%; text-align: center;     vertical-align: middle; display: inline-block;padding: 5px; }
.up-arrow span svg{height: 16px;  width: 16px;}

.form-control:focus{ outline: 0; box-shadow:none; border:2px solid #8D8D8D; background: none; }







.btn input {border-radius: 0px;}
.btn:hover{ background:#fff;color:#0177ff;}

.submit_btn_box .btn:not(.call_btn):after {left: calc(50% - -57px);right: auto;transform: translate(-50%, -50%);position: absolute;margin-bottom: 0;margin-top: 5px;}
.call_btn:before {content: "";height: 14px;width: 14px;background-size: 14px auto;margin-right: 12px;margin-bottom: 4px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8.7 1C10.3709 1 11.9733 1.66375 13.1548 2.84523C14.3363 4.02671 15 5.62914 15 7.3M8.7 3.8C9.62826 3.8 10.5185 4.16875 11.1749 4.82513C11.8313 5.4815 12.2 6.37174 12.2 7.3M9.2824 11.1976C9.42697 11.264 9.58984 11.2792 9.74418 11.2406C9.89853 11.2021 10.0351 11.1121 10.1315 10.9855L10.38 10.66C10.5104 10.4861 10.6795 10.345 10.8739 10.2478C11.0683 10.1506 11.2827 10.1 11.5 10.1H13.6C13.9713 10.1 14.3274 10.2475 14.5899 10.5101C14.8525 10.7726 15 11.1287 15 11.5V13.6C15 13.9713 14.8525 14.3274 14.5899 14.5899C14.3274 14.8525 13.9713 15 13.6 15C10.2583 15 7.05341 13.6725 4.69045 11.3095C2.3275 8.94659 1 5.74173 1 2.4C1 2.0287 1.1475 1.6726 1.41005 1.41005C1.6726 1.1475 2.0287 1 2.4 1H4.5C4.8713 1 5.2274 1.1475 5.48995 1.41005C5.7525 1.6726 5.9 2.0287 5.9 2.4V4.5C5.9 4.71734 5.8494 4.9317 5.7522 5.1261C5.655 5.3205 5.51387 5.48959 5.34 5.62L5.0124 5.8657C4.88389 5.96382 4.79331 6.10341 4.75605 6.26075C4.71879 6.41808 4.73715 6.58346 4.808 6.7288C5.76468 8.67191 7.3381 10.2434 9.2824 11.1976Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position: center;background-repeat: no-repeat;transition: all .5s ease;-moz-transition: .5s;-ms-transition: .5s;-o-transition: .5s;-webkit-transition: .5s}

.btn br{display:none;}
.btn span {z-index: 20;}


.submit_btn .btn span.wpcf7-spinner:after {display: none;}
.submit_btn .btn, .form-submit {width: 100%;padding: 0 !important;}
.submit_btn .btn p {  width: 100%;}
.submit-bx .btn span { margin: 0;}

.btn input, .form-submit input {width:100%;min-width:100%;background:transparent;border:none;color:#ffffff;padding: 0 30px;height:60px;}
.btn:not(.call_btn).white:after {content: "";background-size: 10px auto;background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1H11M11 1V11M11 1L1 11' stroke='%23990D19' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");;background-position: center;background-repeat: no-repeat;transition: all .5s ease;-moz-transition: .5s;-ms-transition: .5s;-o-transition: .5s;-webkit-transition: .5s}
.btn:focus{outline:none;}
.btn+.btn{margin-left:15px;}

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

.site_main {width: 100%; float: left; position: relative; padding-top: 115px; }


.main_title{margin: 0 0 60px;}
.small_title{font-size: 20px; font-family: 'Pilat Wide Book'; font-weight: 300; color: #0077FE; margin: 0 0 8px; letter-spacing: 0; display: inline-block;} 
.main_title .h1{font-size: 50px; font-weight: bold;    color: #000;     margin: 0;}
.main_title .h3{font-size: 30px; line-height: 45px;font-weight: bold;    color: #000;    margin: 0;}
.title_main{    font-size: 40px; color: #000;font-family: 'Pilat Wide Book'; line-height: 60px; font-weight: 400;}
.main_title p{color:#000;font-size: 16px;}
 
header {width: 100%;float: left; padding: 20px 0; z-index: 3; border: none !important; z-index: 11; position: fixed; top: 0; left: 0; right: 0; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }

.main_logo img {-moz-transition: all 0.5s ease;-ms-transition: all 0.5s ease;-o-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}
header.sticky .main_logo img {max-width: 200px;height: auto;-moz-transition: all 0.5s ease;-ms-transition: all 0.5s ease;-o-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}
header.sticky {border: none !important;    z-index: 11;-moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; transition: all 0.5s ease;   } 
.desk-menu { width: calc(100% - 320px); }
header.sticky .navigation ul.menu > li > a { color: #fff;}
header.sticky .call_detail_bx span { color: #fff;}
.phone-icon {border-radius: 5px; border: 1.5px solid #0177ff; height: 42px; width: 50px; text-align: center; line-height: 42px; } 
.call_detail_bx span {display: block; padding: 0 0px 0 16px; font-size: 14px; font-weight: 400; } 
.call_detail_bx span a {width: 100%; display: block; font-size: 18px; font-weight: 600; color: #0177ff; } 
.call_detail_bx { margin: 0 30px 0 0;}
.serach_icon{    margin: 0 0 0 10px;}
.serach_icon span{    background: #0177ff; height: 42px; width: 42px; display: inline-block; border-radius: 50%; text-align: center; line-height: 38px;}
.serach_icon span svg{}
.serach_icon:hover svg path{ fill: #fff }

.main_menu{    padding: 0 35px 0 0;}


.home_banner_box_main { position: relative;   padding: 0; margin: 0px 0 0;     z-index: 1;    width: 100%;
    min-height: 100vh; overflow: hidden; }
.home_banner figure.home_banner_main img { max-width: 100%; position: relative; z-index: -1; min-height: 100%; object-fit: cover;    height: 100%; width: 100%; }
.home_banner { position: relative; z-index: 1; }
.home_banner figure.home_banner_main { position: relative; z-index: 1; height: 100vh; }
.home_banner figure.home_banner_main figcaption {position:relative;margin-top: 0px;max-width: 760px;}
.home_banner figure.home_banner_main figcaption .banner_content_box { }
.home_banner .owl-nav { max-width: 1392px; margin: 0 auto 0 auto; width: 100%; }
.home_banner figure.home_banner_main figcaption .banner_content_box .small_title {color: #fff; font-size: 16px; text-transform: uppercase; letter-spacing: 2.9px;  font-weight: 400; margin: 0 0 15px; line-height: 20px; } 
.home_banner figure.home_banner_main figcaption .banner_content_box .h1 {  
    letter-spacing: 0;
    margin: 0 0 15px;
    display: inline-block;
    font-size: 64px;
    color: #fff;
    font-weight: 400;
    line-height: 58px;
    padding: 0;
}
.home_banner figure.home_banner_main figcaption .banner_content_box .h1 span { font-weight: normal;color:#fff;    display: inline-block;}
.home_banner figure.home_banner_main figcaption .banner_content_box p { 
    font-family: 'Pilat Wide Book';
    color: #fff;
    letter-spacing: 0px;
    font-size: 20px;
    line-height: 30px;
    margin: 7px 0 5px;
} 
.home_banner figure.home_banner_main figcaption .banner_content_box p span { font-weight: 400;}

.home_banner figure.home_banner_main img {
    width: 100%;
}


  .hero-banner {
      position: relative;
      width: 100%;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

 
    .hero-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      transform: scale(1.05);
      animation: videoZoom 20s ease-in-out infinite alternate;
    }

    @keyframes videoZoom {
      0%   { transform: scale(1.05); }
      100% { transform: scale(1.12); }
    }


    .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(to bottom,
          rgba(0,0,0,0.45) 0%,
          rgba(0,0,0,0.25) 40%,
          rgba(0,0,0,0.65) 80%,
          rgba(0,0,0,0.85) 100%
        );
    }

 
    .hero-overlay-tint {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: rgba(10, 30, 80, 0.25);
    }



.banner_figcaption {width: 100%; margin-left: 0; position: absolute; top: 77%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }
.main_logo { }
.banner-form .container { position: relative;}

.button_box a + a{       margin: 0 0 0 10px; min-width: 142px; padding: 5px 10px 5px 15px; justify-content: space-around;}
.banner_content_box .button_box, .banner_button_box {    margin: 20px 0 0;} 


.page-down {position: absolute; bottom: 24px; left: 50%; z-index: 1;    height: 43px; width: 43px; border-radius: 50%; } 
.page-down:hover { background: #0077FE }
.page-down:hover svg path{  }


/* About Section */
.about_content { }
.about_left_content .main_title {   margin: 0 0 40px;}
.about_left_content .h1, .about_left_content h2 {color: #0077FE; font-family: "Pilat Wide"; font-size: 40px; font-style: normal; font-weight: 450; } 
.about_left_content .h1 span, .about_left_content h2 span{color: #000;}
.about_content .button_box {    width: 100%; text-align: left; display: flex ; flex-wrap: wrap; align-items: center; align-content: center; justify-content: left;}
.about_content .button_box .blue-btn:hover {background: #000; color: #fff; }
.about_left_content { text-align: left; padding: 0; height: 100%; } 
.about_left_content p{ font-weight: 400; font-size: 25px; text-align: left; letter-spacing: 0; margin-bottom: 25px; float: left; width: 100%; line-height: 1.5; color: #404040;  }
.about_left_content p strong {font-size: 20px; font-weight: 500; color: #000; }
.about_left_content h3{ font-size: 24px; font-weight: 400; line-height: 34px;   color: #111;    display: inline-block; margin: 14px 0 18px;     letter-spacing:0;}
.about_left_content ul{}
.about_left_content ul li{ position: relative; padding: 0 0 0 25px; font-weight: 400; font-size: 25px; text-align: left; letter-spacing: 0; margin-bottom: 15px; float: left; width: 100%; line-height: 1.5; color: #404040;}
.about_left_content ul li:before{ content: ""; position: absolute; left: 0; top: 16px; border-radius: 50%; background:#0077FE; height: 8px; width: 8px; }
.about_left_content ul li a{color: #0077FE;}
.about_left_content ul li a:hover, .about_left_content p a:hover{color: #404040;}
.about-img {     }  
.about-img img{ border-radius: 24px;    margin:0;  } 





/* FAQ Section */
.faq_section { background: #fff;}
.faq_section .title_1 h2, .faq_section .title_1 .h2 { line-height: 35px;} 
.faq_section .accordion .accordion-header .accordion-button{box-shadow: none; color: #000; padding: 0; line-height: 24px; border-radius: 0; background: none; border: none !important;font-family: "Pilat Wide"; font-size: 24px; font-style: normal; font-weight: 450; } 
.faq_section .accordion .accordion-item { background: #fff; margin-bottom: 50px; border: none; border-radius: 0; overflow: hidden; position: relative; z-index: 1; border-bottom: 1px solid #ACACAC; padding: 0 0 50px; }
.faq_section .accordion .accordion-body { padding: 0 40px 0 0;}
.faq_section .accordion-button.collapsed { color: #000;}
.faq_section .accordion .accordion-body p { font-size: 16px; color: #404040;}
.faq_section .faq_details {max-width: 90%; margin: 0 auto; padding: 0 0 0 50px; height: 100%; display: flex; flex-wrap: wrap; align-items: center; align-content: center; }
.faq_section .accordion { width: 100%;max-width: 100%; margin: 0 auto;}
.faq_section .accordion .accordion-header .accordion-button:not(.collapsed) {background: none;  padding: 0; border: none; border-radius: 0; }
.faq_section .accordion-button::after {background-image: url("../images/plus.svg"); width: 50px;    height: 50px;   background-size: 100%; transition: all 0.5s;    z-index: 1;  } 
.faq_section .accordion-button:not(.collapsed)::after {background-image: url("../images/minus.svg"); width: 50px;   height: 50px;   } 
.faq_section .accordion-header {  border-radius: 0px; overflow: hidden;}
.faq_section .accordion-collapse {padding-top: 0px; }
.faq_section .faq_right_sec {   border-radius: 25px;   }
.faq_section .main_title { margin: 9px 0 49px;}
.faq-content { height: 100%;  margin-top: 35px;}
.faq_section .main_title .title_main {    margin-bottom: 10px;}
.faq-content .main_title p {  margin-bottom: 40px;}
.faq_section .accordion .accordion-item:last-child {    margin-bottom: 0;}




/* Logo Section */
.trusted-logos{ overflow: hidden;    background: #1C1C1C;}
.trusted-logos .title_main {color:#fff; } 
.trusted-logos .main_title { margin: 0 0 50px;}
.trusted-logos .slide {text-align: center; width: 15.5%; }


.two_row_logos{ padding-bottom: 70px; }
.multilogo{    gap: 40px;}
.multilogo .slide {text-align: center;}




/* Product section */
.products-section {background-color: #EFEFEF; } 
.product-card {background: #ffffff; border-radius: 10px; overflow: hidden; transition: box-shadow 0.25s ease, transform 0.25s ease; cursor: pointer; height: 100%; } 
.product-card .card-img-wrap {background: #fff; display: flex; align-items: center; justify-content: center; height: 300px; padding: 20px 24px; overflow: hidden; } 
.product-card .card-img-wrap img {max-height: 200px; width: auto; object-fit: contain; transition: transform 0.3s ease; } 
.product-card .card-info {padding: 30px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; height: 100%; } 
.product-label {font-size: 17px; font-weight: 400; color: #404040; letter-spacing: 0; margin-bottom: 6px; } 
.product-name {font-size: 30px; font-weight: normal; font-family: 'Pilat Wide Book'; color: #000; letter-spacing: 0; line-height: 1.2; margin-bottom: 0; } 
.product-desc {font-size: 17px; font-weight: 400; line-height: 1.55; margin-top: 8px;    opacity: 0; } 


/* Benchmark Section */
.benchmark-section {background-color: #1c1c1e; } 
.top-row { gap: 24px; margin-bottom: 48px; } 
.benchmark-section .title_main{ color: #fff; margin: 0; }
.benchmark-section .main_title { margin: 0;}
.benchmark-section .cards-row {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.benchmark-section .feature-card {display: flex; flex-direction: column; gap: 0; }
.benchmark-section .card-img-wrap {width: 100%; height: 260px; border-radius: 10px; overflow: hidden; margin-bottom: 20px; }
.benchmark-section .card-img-wrap img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.benchmark-section .feature-card:hover .card-img-wrap img {transform: scale(1.04); } 
.benchmark-section .card-title {font-size: 32px; font-weight: normal; font-family: 'Pilat Wide Book'; color: #ffffff; letter-spacing:0; margin: 0 0 10px; line-height: 1.2; } 
.benchmark-section .card-desc {font-size: 17px; font-weight: normal; color: #fff; line-height: 1.6; margin: 0; }



/* Case Study Section */
.case-study-section{ background: #1C1C1C;  }
.case-study-section .title_main{ color: #fff; margin: 0; }
.case-study-section .main_title { margin: 0;    width: 100%;}
.study_image{ min-height: 725px; width: 100% }







/* Solution Section */
.solution-section {    background-color: #EFEFEF;} 
.solution-section .top-row { gap: 24px; margin-bottom: 48px; } 
.solution-section .title_main{ color: #000; margin: 0; }
.solution-section .main_title { margin: 0;}
.solution-section .cards-row {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.solution-section .feature-card {    display: flex; flex-wrap: wrap; gap: 0; border-radius: 10px; overflow: hidden; height: 100%; } 
.solution-section .card-img-wrap {    width: 100%; height: 330px; overflow: hidden; } 
.solution-section .card-img-wrap img {    width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } 
.solution-section .feature-card:hover .card-img-wrap img {transform: scale(1.04); } 
.solution-section .card-title {font-size:17px; font-weight: normal; font-family: 'Pilat Wide'; color: #404040; letter-spacing:0; margin: 0 0 10px; line-height: 1.2; } 
.solution-section .solution-name {font-size: 32px; color: #000; font-family: 'Pilat Wide Book'; }
.solution_content {}
.solution_detail { height: 100%; background: #fff; padding: 30px; display: flex; align-items: flex-start; justify-content: space-between; width: 100%; } 
.solution-section .top-row p {max-width: 632px; font-size: 17px; color: #1C1C1C; text-align: left; }


/* Hub Section  */
.hub-section {background-color: #1c1c1e;padding-bottom: 300px; } 
.hub-section .main_title, .hub-section .title_main {margin: 0; color: #fff; } 
.hub-section .hub-grid {display: grid; grid-template-columns: 1fr 0.55fr; gap: 20px; align-items: stretch; } 
.hub-section .badge-featured {display: inline-block; background: #0077FE; color: #fff; font-size: 16px; font-weight: normal; letter-spacing: 0; padding: 10px 25px; border-radius: 10px 0; } 
.hub-section .main-card {position: relative; border-radius: 10px; overflow: hidden; height: 100%; min-height: 980px; cursor: pointer; } 
.hub-section .main-card img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; } 
.hub-section .main-card:hover img { transform: scale(1.04); } 
.hub-section .main-card .overlay {position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.88) 100% ); } 
.hub-section .main-card .badge-wrap {position: absolute; top: 0px; left: 0px; } 
.hub-section .main-card .card-body-content {position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 28px 32px; } 
.hub-section .main-card .card-cat {font-size: 17px; font-weight: normal; color: #fff; letter-spacing: 0; margin-bottom: 8px; } 
.hub-section .main-card .card-title {font-size: 32px; font-weight: normal; color: #ffffff; letter-spacing: 0; line-height: 1.2; margin-bottom: 10px; font-family: 'Pilat Wide Book'; } 
.hub-section .main-card .card-date {font-size: 14px; color:#fff; margin-bottom: 10px; } 
.hub-section .main-card .card-desc {font-size: 17px; color: #fff; line-height: 1.6; margin-bottom: 18px; max-width: 100%; } 
.hub-section .side-stack {display: flex; flex-direction: column; gap: 20px; } 
.hub-section .side-card { background: transparent; display: flex; flex-direction: column; cursor: pointer; transition: background 0.2s ease; flex: 1; } 
.hub-section .side-card .sc-img-wrap {width: 100%; height: 300px;    border-radius: 10px; overflow: hidden; position: relative; flex-shrink: 0; } 
.hub-section .side-card .sc-img-wrap img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } 
.hub-section .side-card:hover .sc-img-wrap img { transform: scale(1.04); } 
.hub-section .side-card .sc-img-wrap .badge-wrap {position: absolute; top: 0px; left: 0px; } 
.hub-section .side-card .sc-body {padding: 18px 0px 22px; display: flex; flex-direction: column; flex: 1; } 
.hub-section .side-card .sc-cat {font-size: 17px; font-weight: normal; color: #fff; letter-spacing: 0; text-transform: inherit; margin-bottom: 8px; } 
.hub-section .side-card .sc-title {font-size: 32px; font-weight: normal; color: #ffffff; letter-spacing: 0; line-height: 1.2; margin-bottom: 10px; font-family: 'Pilat Wide Book'; } 
.hub-section .side-card .sc-desc {font-size: 17px; color: #fff; line-height: 1.6; margin: 0; }



/* Read More link */ 
.read-more {display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 14px; font-weight: normal; text-decoration: none; letter-spacing: 0; font-family: 'Pilat Wide Book'; } 
.read-more span {width: 24px; height:24px; background: #2563EB; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s ease, transform 0.2s ease; } 
.read-more:hover .span { background: #1d4ed8; } 
.read-more span svg {width: 8px; height: 8px; stroke: #fff; }


.black-bg{ background-color: #282828 }
.blue_bg{background: #0077FE;}



/*CTA section */
.cta-content .main_title {margin: 0 0 25px; } 
.cta-section { position: relative; display: flex;    padding: 90px 0; align-items: center; } 
.cta-section .title_main{  font-size: 56px; color: #fff;} 
.cta-section:before {content: ""; position: absolute; width: 699px; height: 469px; right: 70px; bottom: 0px; border-radius: 0; background: url(../images/Speak-to-one-of-our-experts-today.webp) no-repeat 0 0; } 
.cta_img {position: absolute; bottom: 0; right: 200px; }
.cta-content{position: relative; z-index: 2;  } 
.cta-content .title_main {color: #fff; } 
.cta-content p {color: #fff; font-size: 16px; line-height: 26px; font-weight: 500; margin-bottom: 0px; } 
.cta-content p + p{ margin-top: 20px; }

/*Footer Contact Form Section */
.contact-form {max-width: 860px; margin: 0 auto; width: 100%; }
.contact-form .input-box .input, .contact-form textarea {width: 100%; background: none; color: #fff; height: 39px; padding: 13px 20px; font-size: 14px; border: none; border-radius: 10px; background: #5D555580; backdrop-filter: blur(14px);}
.contact-form .input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #fff; opacity: 1; /* Firefox */}
.contact-form .input:-ms-input-placeholder { /* Poppinsnet Explorer 10-11 */ color: #fff; } 
.contact-form .input::-ms-input-placeholder { /* Microsoft Edge */ color: #fff; } 
.contact-form .input-box textarea.input {height: 70px;     resize: none; }
.contact-form .submit_btn .btn input { text-align: center;    text-transform: capitalize;}
.contact-form .form-group { margin: 0 0 14px;}
.contact-form .submit_btn .btn {min-width: 100%; background: #0d62a2; border: 2px solid #0d62a2; }
.contact-form .submit_btn .btn:hover {background: #B92025 ; border: 2px solid #B92025 ; } 
.submit-bx .btn {  border: none; margin: 15px 0 0; min-width: inherit; padding: 6px 4px 6px 20px; height: auto;} 
.submit-bx .btn input{     font-size: 14px; font-weight: 400; padding: 0; height: inherit; width: inherit; min-width: inherit; margin: 0 10px 0 0;}



/*Footer */
.top_footer{width: 100%;float: left;}
.top_footer{    padding: 0 0 50px; }
.top_footer .title_1 { margin: 0 0 35px;}
.footer {width: 100%; position: relative; float: left; padding:90px 0 40px 0;background:url(../images/footer-logo-badge.webp) no-repeat bottom center #1C1C1C; }
.footer .footer_links_box .title {     letter-spacing: 0; margin-bottom: 24px; font-weight: 700; font-size: 20px; color: #fff; position: relative; display: inline-block;   } 
.footer .footer_links_box ul li span{ display: inline-block;     font-size: 16px; color:#fff;    margin: 3px 0 6px; }
.footer .footer_links_box ul li a { letter-spacing: 0; font-weight: 400; font-size: 14px; color: #fff; position: relative; line-height: 30px;width: 100%; display: inline-block;}
.footer .footer_links_box ul li span .fa-phone {transform: rotate(90deg); margin: 7px 0 0; }
.footer .footer_links_box ul li a:hover, .footer .footer_links_box ul li.selected a {color: #426ece;}
.footer .footer_links_box ul li {display: flex; align-items: flex-start; align-content: flex-start; flex-wrap: wrap;     margin: 0 0 9px; }
.footer .footer_links_box ul li:before{ display: none; }
.footer .footer_links_box ul li:last-child {margin-bottom: 0px;}
.footer_links_box.mobile-accordion.quick_links {  padding-left: 74px;}
.footer_links_box.mobile-accordion.footer_contact .address { margin: 10px 0 0;}
.footer .footer_links_box p { font-size: 16px; line-height: 25px; font-weight: 400; color: #333;} 
.copyright_footer { width: 100%; float: left;   }
.copyright_footer .bottom_copyright{      padding: 18px 12px; border-radius: 14px; border: 1px solid #FFFFFF33;} 
.copyright_footer .row {align-items: center;}
.copyright_footer ul {}
.copyright_footer ul li {    color: #aebdc8; font-size: 14px;  font-weight: 300;     padding: 0 5px;}
.copyright_footer ul li:last-child{ padding-right: 0; }
.copyright_footer .copyright_footer_link ul li p, .copyright_footer .copyright_footer_link ul li p a, .copyright_footer_link p, .copyright_footer_link p a {       font-size: 14px;    font-size: 14px; font-weight: 400; line-height: 24px; color: #fff; }
.copyright_footer_link p a:hover{color: #416bcd;}
.signature{ text-align: right; font-size: 14px; }
.signature, .signature a { color: #fff;}
.signature a:hover{ color: #0177ff; }
.social_follow{    display: flex;flex-wrap: wrap;    margin: 0;}
.social_follow li{    margin: 0 !important;}
.social_follow p {  margin: 0 20px 0 0;}
.footer .footer_links_box .social_follow li a{height: 45px; width: 45px; margin: 0 6px 0 4px; text-align: center; line-height: 38px; border-radius: 50%; border: 2px solid #BEBEBE; } 
.footer .footer_links_box .social_follow li a svg path { fill: #0177ff;}
.footer .footer_links_box .social_follow li a:hover{border:2px solid #0177ff; background:#0177ff; }
.footer .footer_links_box .social_follow li a:hover svg path{fill:#fff;}
.company_links {margin: -1px 0 0 -5px; } 
.products_menu {margin: -1px 0 0 -12px; } 
.certify_logo{    text-align: center;    margin: 41px 0 0; width: 219px;} 
.certify_logo svg{} .contact_logo {    padding: 10px 0px 0 7px;} 
.footer_contact {padding: 0 0 0 7px; margin: -1px 0 0 0; } 
.footer_links_box{ position: relative; } 
.footer .footer_links_box.footer_contact li { margin-bottom: 20px;} 
.footer_contact_form {padding: 0 0 0 87px; margin: -1px 0 0; } 
.capcha_box {margin: 10px 0 0px; } 
.footer .footer_links_box.footer_contact li:last-child {align-content: flex-start; align-items: flex-start; }
.footer .footer_links_box.contact_logo ul li {display: flex; flex-wrap: wrap; } 
.footer_logo { margin-bottom: 38px; } 
.footer .footer_links_box.contact_logo h5.title {display: none; }
.copyright_footer_link {    text-align: left;}




#inner_banner {position: relative; z-index: 0; background: #282828;   padding-bottom: 30px;padding-top: 175px; } 
.inner-banner-title {display: block; left: 0; z-index: 1; position: absolute; top: 50%; transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 100%; } 
.inner_banner_caption {text-align: left; background: none; justify-content: left; margin: 0; } 
.inner_banner_caption h1, .inner_banner_caption .h1 {    color: #fff; margin: 13px 0 80px; text-align: left;line-height: 1.1; font-family: "Pilat Wide"; font-size: 60px; font-style: normal; font-weight: 700; } 
.inner_breadcrumb ol {text-align: left; display: flex; flex-wrap: wrap; background: no-repeat; margin: 0; align-items: center; align-content: center; } 
.inner_breadcrumb ol li { position: relative; color: #fff; line-height: normal; font-family: "Pilat Wide"; font-size: 20px; font-style: normal; font-weight: 450; } 
.inner_breadcrumb ol li+li {margin-left: 39px; display: inline; } 
.inner_breadcrumb ol li.active {color: #0177ff; } 
.inner_breadcrumb ol li a {color: #fff; } 
.inner_breadcrumb ol li:after {position: absolute; content: ""; background: url(../images/breadcrum-arrow.svg) no-repeat;    height: 15px; width: 15px; right: -29px; bottom: 2px; margin: auto; background-size: 100%; }
.inner_breadcrumb ol li:last-child:after { display: none; } 
#inner_banner p{ color: #fff; font-size: 20px; font-weight: 450; line-height: 1.4;}


.faq_section .content {display: none;}





.category_section{ background: #fff; }
.category_section .product-card .card-img-wrap { background: #F3F3F3;}
.category_section .product-card .card-info { background: #F3F3F3; padding: 20px;}
.category_section .product-desc { opacity: 1; color: #404040; font-size: 16px; }
.category_section .product-card:hover .card-info { background: #f3f3f3;}
.category_section .product-card:hover .card-info .product-label { color: #404040;}
.category_section .product-card:hover .card-info .product-name { color: #404040;}
.category_section .product-card:hover .card-info .product-desc { opacity: 1; color: #404040; }
.category_section .product-card:hover { box-shadow: 0 12px 36px rgb(255 255 255 / 12%);}
.load-more-btn .blue-btn:hover{ background: #000; color: #fff }

.category_section .product-card { border-radius: 10px; border: none;}
.category_section .product-card .card-info .arrow-btn { width: 36px;
    height: 36px;}

.solution_content {max-width: calc(100% - 60px); } 
.project_section.solution-section .card-img-wrap { height: 660px;} 
.project_section{background: #fff; padding-bottom: 300px} 
.project_section .solution_detail {border-radius: 0 0 10px 10px; background: #F3F3F3; flex-wrap: wrap; height: auto; } 
.project_content {display: flex; flex-wrap: wrap; width: 100%; justify-content: space-between; } 
.project_name {width: 100%; display: flex; flex-wrap: wrap; justify-content: right; }





/* Table */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;border: 1px solid #00000033;
}

/* Header */
thead {
  background: #e6ebf5;
}

th {
  padding: 20px;
  text-align: left;
  font-weight: 500;
  color: #111;
  position: relative;    font-size: 16px;
}

/* Dashed vertical lines */

th:not(:last-child),
td:not(:last-child) {
  border-right: 1px dashed #6fa3ff;
}

/* Body */
td {
  padding: 25px 20px;
  vertical-align: middle;
 color: #111;
    font-size: 16px;
    border-top: 1px solid #eee;
    line-height: 26px;
}

/* Price column */
td:nth-child(2) {
  font-weight: bold;
  color: #222;
}

/* Images */
td img {
  /*max-height: 40px;*/
}

/* First row bold text */
tbody tr:first-child td:first-child {
  font-weight: 600;
  color: #111;
}

/* Rounded corners */
thead tr th:first-child {
  border-top-left-radius: 15px;
}
thead tr th:last-child {
  border-top-right-radius: 15px;
}



@media (max-width: 768px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }

  th {
    display: none;
  }

  tr {
    margin-bottom: 20px;
    background: #fff;
    border-radius: 10px;
    padding: 15px;
  }

  td {
    border: none;
    padding: 10px 0;
  }
 
}






.features-section {background: #fff; position: relative; overflow: hidden; } 
.features-layout {position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: center; margin-top: 56px; }

.center-image-wrap {position: relative; display: flex; align-items: center; justify-content: center; padding: 0 20px; z-index: 2; } 
.hose-image {width: 100%; max-width: 800px; filter: drop-shadow(0 24px 48px rgba(0,0,0,0.18)); opacity: 0; transform: scale(0.88) translateY(20px); transition: opacity 0.75s cubic-bezier(0.4,0,0.2,1) 0.2s, transform 0.75s cubic-bezier(0.4,0,0.2,1) 0.2s; }
 .hose-image.revealed {opacity: 1; transform: scale(1) translateY(0); }

@keyframes floatHose {
  0%, 100% { transform: scale(1) translateY(0px); }
  50%       { transform: scale(1) translateY(-8px); }
}
.hose-image.floating {animation: floatHose 5s ease-in-out infinite; }
 .features-col {display: flex; flex-direction: column; gap: 48px; padding: 0 16px; } 
 .features-col-right { align-items: flex-start; } .features-col-left  { align-items: flex-end; } 
 .feature-item {position: relative; max-width: 275px; opacity: 0; transition: opacity 0.55s ease, transform 0.55s ease; } .features-col-left  .feature-item { transform: translateX(-32px); text-align: left; }
.features-col-right .feature-item { transform: translateX(32px);  text-align: left; }

.feature-item.revealed {opacity: 1; transform: translateX(0); }
.feature-title {font-size: 24px; font-weight: 450; color: #000; line-height: 1.25; margin-bottom: 8px; letter-spacing: 0; }
.feature-desc {font-size: 16px; font-weight: 400; color: #404040; line-height: 1.65; }
 .feature-item::after {content: ''; position: absolute; top: 6px; width: 6px; height: 6px; background: #0d0d0d; border-radius: 50%; opacity: 0; transition: opacity 0.4s ease 0.5s; } 
 .feature-item.revealed::after { opacity: 1; }

.features-col-left  .feature-item::after { right: -28px; }
.features-col-right .feature-item::after { left: -28px; }
 .feature-item::before {content: ''; position: absolute; top: 8px; height: 1px; background: #000; opacity: 0; transition: opacity 0.4s ease 0.45s, width 0.5s ease 0.45s; width: 0; }
.feature-item.revealed::before { opacity: 1; width: 90px; }
.features-col-left  .feature-item::before { right: -20px; }
.features-col-right .feature-item::before { left: -20px; }







  /* ── Filter button ── */
.btn-filter { display: inline-flex; align-items: center; gap: 10px; border: none; padding: 4px 16px; font-size: 18px; font-weight: 400; color: #000; cursor: pointer; transition: background 0.18s, border-color 0.18s; white-space: nowrap; border-radius: 10px; background: #F3F3F3; }

.btn-filter img{ height: 18px; width: 18px;}

.btn-filter:hover { background: #ebebeb; border-color: #b8b8b4; }
.btn-filter.active { background: #111; color: #fff; border-color: #111; }
.btn-filter.active img {filter: invert(1); }



  /* ── Page header ── */
  .page-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 1.5rem;
  }
  .page-title {
      font-size: 40px;
    font-weight: 450;
    color: #1C1C1C;
    margin: 0;
    letter-spacing: 0;
  }

  /* ── Layout wrapper ── */
  .layout {
    display: flex;
    gap: 0;
    align-items: flex-start;
  }

  /* ── Sidebar ── */
  .sidebar {
    width: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      width 0.38s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.28s ease,
      margin-right 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    margin-right: 0;
    flex-shrink: 0;
  }
  .sidebar.open {
    width: 380px;
    opacity: 1;
    margin-right: 22px;
  }

  .sidebar-inner {
    width: 380px;
    background: #F3F3F3;
    border-radius: 12px;
    border: none;
    padding: 6px 15px;
    transform: translateX(-12px);
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sidebar.open .sidebar-inner { transform: translateX(0); }

  /* Accordion groups */
  .filter-group {    border-bottom: 1px solid #6B6B6B;padding: 5px 0 10px;}
  .filter-group:last-child { border-bottom: none; }

.ti-minus{ position: relative; }
.ti-minus:before{ 
    content: "";
    background: url(../images/accordian_minus.svg) no-repeat;
    height: 14px;
    width: 14px;
    position: absolute;
    right: 0;
    top: 0;
    background-size: 100%; }

.ti-plus{ position: relative; }
.ti-plus:before{     content: "";
    background: url(../images/accordian_plus.svg) no-repeat;
    height: 14px;
    width: 14px;
    position: absolute;
    right: 0px;
    top: -7px;
    background-size: 100%; }

.products-area .product-name {font-size: 20px;}

  .filter-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
  }
  .filter-group-header:hover { background: #f7f7f5; }
  .filter-group-title {
   font-size: 20px;
    font-weight: 450;
    color: #000;
  }
  .filter-group-icon { transition: transform 0.2s;}

  .filter-items {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .filter-items.open { max-height: 400px; }

  .filter-item {
       display: block;
    padding: 7px 16px 7px 30px;
    font-size: 17px;
    color: #404040;
    font-weight: 450;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.13s, color 0.13s;
    text-decoration: none;
  }
  .filter-item:hover { background: #f4f4f2; color: #1a1a1a; }
  .filter-item.active {color: #0077FE;}

  /* ── Product grid ── */
  .products-area { flex: 1; min-width: 0; }

  .products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 18px;
    transition: all 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* ── Product card ── */
  .product-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e2e2de;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.22s, transform 0.22s, border-color 0.22s;
    animation: fadeSlideIn 0.38s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .product-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.10);
    transform: translateY(-3px);
    border-color: #c8c8c4;
  }

  @keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .card-image-wrap {
    background: #f0f0ee;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    position: relative;
  }
  .card-image-wrap img {
    max-height: 130px;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .product-card:hover .card-image-wrap img { transform: scale(1.05); }

  .card-body-inner {
    padding: 14px 16px 16px;
    position: relative;
  }
  .card-tag {
    font-size: 11.5px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
  }
  .card-name {
    font-size: 14px;
    font-weight: 600;
    color: #111;
    margin: 0 0 6px;
    line-height: 1.35;
    padding-right: 28px;
  }
  .card-desc {
    font-size: 12.5px;
    color: #666;
    line-height: 1.5;
    margin: 0;
  }

  .card-arrow {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 26px;
    height: 26px;
    background: #0066ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    transition: background 0.18s, transform 0.18s;
    flex-shrink: 0;
  }
  .product-card:hover .card-arrow { background: #0052cc; transform: scale(1.1) rotate(-10deg); }

  /* ── Stagger animation delay for cards ── */
  .product-card:nth-child(1) { animation-delay: 0.03s; }
  .product-card:nth-child(2) { animation-delay: 0.07s; }
  .product-card:nth-child(3) { animation-delay: 0.11s; }
  .product-card:nth-child(4) { animation-delay: 0.15s; }
  .product-card:nth-child(5) { animation-delay: 0.19s; }
  .product-card:nth-child(6) { animation-delay: 0.23s; }





  .scroll-sections {
  position: relative;
}

/* ─────────────────────────────────────────
   LEFT STICKY PANEL
───────────────────────────────────────── */
.sticky-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 42%;
  float: left;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f3;
}

/* Clip mask — image exits through the TOP when section changes */
.image-clip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0s;
}

/* Each image slot */
.img-slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.img-slot img {
  max-width: 85%;
  max-height: 80vh;
  object-fit: contain;
  
  transition:
    transform 0.9s cubic-bezier(0.4, 0, 0.2, 1),
    opacity   0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* States */
.img-slot { opacity: 0; pointer-events: none; }
.img-slot.state-above  { opacity: 0;  transform: translateY(-110%) rotate(var(--rot-from, -15deg)) scale(0.85); }
.img-slot.state-active { opacity: 1;  transform: translateY(0)     rotate(var(--rot-to,   0deg))   scale(1);    }
.img-slot.state-below  { opacity: 0;  transform: translateY(110%)  rotate(var(--rot-from,  15deg)) scale(0.85); }

/* Background color morphs per section */
.sticky-panel { transition: background 0.8s ease; }

/* Section accent lines in sticky panel */
.panel-accent { display: none !important;
  position: absolute;
  bottom: 32px;
  left: 32px;
  display: flex;
  gap: 6px;
}
.panel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  transition: background 0.4s ease, transform 0.3s ease;
}
.panel-dot.active {
  background: #0055ff;
  transform: scale(1.3);
}

/* ─────────────────────────────────────────
   RIGHT CONTENT AREA
───────────────────────────────────────── */
.content-area {
  margin-left: 42%;
}

/* Each text section */
.text-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 80px 64px;
  position: relative;

}


/* Text reveal animation */
.text-inner {
  max-width: 480px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.text-section.in-view .text-inner {
  opacity: 1;
  transform: translateY(0);
}


.section-title {


  line-height: 1.18;
  letter-spacing: -0.5px;
  color: #0d0d0d;
  margin-bottom: 22px;
}
.section-title .accent { color: #0055ff; }

.section-body {
  font-size: 14.5px;
  line-height: 1.75;
  color: #555;
  margin-bottom: 36px;
}

/* CTA button */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid #d4d4d0;
  border-radius: 40px;
  padding: 10px 22px;
  font-size: 13.5px;
  font-weight: 600;
  color: #111;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.18s;
}
.btn-cta:hover {
  border-color: #0055ff;
  color: #0055ff;
  box-shadow: 0 4px 16px rgba(0,85,255,0.12);
  transform: translateY(-1px);
}
.btn-cta .icon {
  width: 26px;
  height: 26px;
  background: #0055ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
.btn-cta:hover .icon { background: #003ecc; transform: rotate(-10deg); }
.btn-cta .icon svg { width: 13px; height: 13px; fill: #fff; }

/* Section number watermark */
.section-num {
  position: absolute;
  top: 40px;
  right: 40px;
  font-size: 72px;
  font-weight: 800;
  color: #f0f0ee;
  line-height: 1;
  user-select: none;
  letter-spacing: -4px;
}
.sticky-panel { background: transparent !important;}