/*

TemplateMo 570 Chain App Dev

https://templatemo.com/tm-570-chain-app-dev

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  background-color: #fff;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 30px;
  font-weight: 300;
  color: #afafaf;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Roboto', sans-serif;
}

::selection {
  background: #4b8ef1;
  color: #fff !important;
}

::-moz-selection {
  background: #4b8ef1;
  color: #fff !important;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.section-heading {
  position: relative;
  z-index: 2;
}

.section-heading h4 {
  color: #2a2a2a;
  font-size: 30px;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 10px;
}

.section-heading h4 em {
  font-style: normal;
  color: #4b8ef1;
}

.section-heading img {
  width: 45px;
  height: 2px;
}

.section-heading p {
  margin-top: 10px;
}

.show-up {
  position: relative;
  z-index: 2;
}

.white-button a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #4b8ef1 !important;
  text-transform: capitalize;
  font-size: 15px;
  background-color: #fff;
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all .5s;
}

.white-button a i {
  margin-left: 5px;
  font-size: 18px;
}

.white-button a:hover {
  background-color: #4b8ef1;
  color: #fff !important;
}

.text-button a {
  font-size: 15px;
}

.text-button a i {
  margin-left: 5px;
  font-size: 14px;
  transition: all .3s;
}

.text-button a:hover i {
  margin-left: 8px;
}

.gradient-button a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #fff !important;
  text-transform: capitalize;
  font-size: 15px;
  background: rgb(19,175,240);
  background: linear-gradient(105deg, rgba(91,104,235,1) 0%, rgba(40,225,253,1) 100%);
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all .5s;
}

.gradient-button a:hover {
  color: #fff !important;
  background: rgb(19,175,240);
  background: linear-gradient(105deg, rgba(91,104,235,1) 0%, rgba(40,225,253,1) 100%);
}

.border-button a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #4b8ef1 !important;
  border: 1px solid #4b8ef1;
  text-transform: capitalize;
  font-size: 15px;
  display: inline-block;
  background-color: #fff;
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all .5s;
}

.border-button a:hover {
  background-color: #4b8ef1;
  color: #fff !important;
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.background-header {
  background-color: #fff !important;
  height: 80px!important;
  border-bottom: none !important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 5px 8px rgba(0,0,0,0.03);
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #fff;
}

.background-header .main-nav .nav li:hover a {
  color: #4b8ef1;
}

.background-header .nav li a.active {
  position: relative;
  color: #fff;
}

.background-header .nav li a.active:after {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #4b8ef1;
  content: '';
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
}

.background-header .nav li:last-child a.active:after {
  background-color: transparent;
}

.header-area {
  background-color: transparent;
  border-bottom: 1px solid rgba(42,42,42,0.2);
  position: absolute;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo {
    line-height: 100px;
    float: left;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.background-header .main-nav .logo {
  line-height: 80px;
}

.background-header .main-nav .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}

.header-area .main-nav .nav li:nth-child(6) {
  padding-right: 0px;
  padding-left: 40px;
}

.header-area .main-nav .nav li:last-child a ,
.background-header .main-nav .nav li:last-child a,
.header-area .main-nav .nav li:nth-child(6) a ,
.background-header .main-nav .nav li:nth-child(6) a {
  padding: 0px 20px !important;
  font-weight: 400;
}

.header-area .main-nav .nav li:last-child a:hover ,
.background-header .main-nav .nav li:last-child a:hover,
.header-area .main-nav .nav li:nth-child(6) a:hover ,
.background-header .main-nav .nav li:nth-child(6) a:hover {
  color: #fff !important;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 500;
  font-size: 15px;
  color: #2a2a2a;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #4b8ef1!important;
}

.header-area .main-nav .nav li:last-child a.active {
  color: #fff !important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #4b8ef1!important;
  opacity: 1;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 30px;
}

.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #2a2a2a;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #2a2a2a;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 50px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
  background: #fff;
  color: #4b8ef1!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #2a2a2a;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #2a2a2a;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #2a2a2a;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #2a2a2a;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #2a2a2a;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #2a2a2a;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #2a2a2a;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #2a2a2a;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #4b8ef1;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav .nav li:last-child  ,
  .background-header .main-nav .nav li:last-child {
    color: #069;
  }
  .header-area .main-nav .nav li:nth-child(6),
  .background-header .main-nav .nav li:nth-child(6) {
    padding-right: 0px;
  }
  .background-header .nav li a.active:after {
    display: none;
  }
}

@media (max-width: 767px) {
  .pre-header ul.info li:last-child,
  .pre-header ul.info li:nth-child(6) {
    display: none!important;
  }
  .background-header .main-nav .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #4b8ef1!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #fff;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
    box-shadow: 0px 5px 8px rgba(0,0,0,0.03);
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .background-header .nav {
    margin-top: 80px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e7e7e7;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #4b8ef1!important;
  }
  .header-area .main-nav .nav li.submenu ul {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.submenu ul.active {
    height: auto !important;
  }
  .header-area .main-nav .nav li.submenu:after {
    color: #3B566E;
    right: 25px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}

/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@-webkit-keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@-webkit-keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

@keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

.preloader-inner {
    position: relative;
    width: 142px;
    height: 40px;
    background: #fff;
}

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: #4b8ef1;
    border-radius: 50%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: dot 2.8s infinite;
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    -webkit-animation: dots 2.8s infinite;
    animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: #4b8ef1;
    border-radius: 50%;
}



/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 250px 120px 150px 120px;
  position: relative;
  overflow: hidden;
}

.main-banner:after {
  content: '';
  background-image: url(../images/slider-left-dec.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.main-banner .left-content {
  margin-right: 15px;
}

.main-banner .left-content h2 {
  z-index: 2;
  position: relative;
  font-weight: 700;
  line-height: 70px;
  font-size: 50px;
  margin-bottom: 20px;
}

.main-banner .left-content p {
  margin-bottom: 45px;
  color: #2a2a2a;
  font-weight: 400;
}

.main-banner .left-content .first-button {
  margin-right: 15px;
}

.main-banner .left-content .white-button {
  display: inline-block;
}

.main-banner .right-image {
  text-align: center;
  position: relative;
  z-index: 20;
}

.main-banner .right-image img {
  max-width: 710px;
}

.main-banner .left-content .white-button a {
  background-color: #4b8ef1;
  color: #fff !important;
}

/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.services {
  padding-top: 130px;
  position: relative;
}

.services  .section-heading p {
  margin-top: 10px;
  margin-left: 18%;
  margin-right: 18%;
}

.services .container-fluid {
  padding-left: 65px;
  padding-right: 65px;
}

.services:after {
  content: '';
  background-image: url(../images/services-left-dec.png);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  bottom: -300px;
  width: 261px;
  height: 368px;
  z-index: 0;
}

.services:before {
  content: '';
  background-image: url(../images/services-right-dec.png);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 0;
  width: 1136px;
  height: 244px;
  z-index: 0;
}

.services .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.services .section-heading .line-dec {
  margin: 0 auto;
}

.service-item {
  position: relative;
  z-index: 1;
  padding: 30px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  background-color: #fff;
  border-radius: 10px;
  border-top-right-radius: 50px;
  transition: all .3s;
}

.service-item .icon {
  margin-left: 0px;
  margin-bottom: 30px;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  transition: all .3s;
}

.service-item h4 {
  transition: all .3s;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
}

.service-item p {
  transition: all .3s;
  font-size: 15px;
  margin-bottom: 20px;
}

.service-item:hover h4,
.service-item:hover p,
.service-item:hover .text-button a {
  color: #fff;
}

.first-service .icon {
  background-image: url(../images/service-icon-01.png);
}

.first-service:hover .icon {
  background-image: url(../images/service-icon-hover-01.png);
}

.second-service .icon {
  background-image: url(../images/service-icon-02.png);
}

.second-service:hover .icon {
  background-image: url(../images/service-icon-hover-02.png);
}


.third-service .icon {
  background-image: url(../images/service-icon-03.png);
}

.third-service:hover .icon {
  background-image: url(../images/service-icon-hover-03.png);
}

.fourth-service .icon {
  background-image: url(../images/service-icon-04.png);
}

.fourth-service:hover .icon {
  background-image: url(../images/service-icon-hover-04.png);
}

.service-item:hover {
  background-image: url(../images/service-bg.jpg);
  background-position: right top;
  background-repeat: no-repeat;
  background-size: cover;
}



/*
---------------------------------------------
About Us
---------------------------------------------
*/

.about-us {
  padding-top: 130px;
  position: relative;
}

.about-us .section-heading {
  margin-bottom: 45px;
}

.about-us .section-heading,
.about-us .box-item,
.about-us p,
.about-us .box-item .gradient-button,
.about-us .box-item span {
  position: relative;
  z-index: 1;
}

.about-us .box-item {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.07);
  padding: 10px 30px;
  background-color: #fff;
  border-radius: 40px;
  margin-bottom: 30px;
}

.about-us .box-item h4 a {
  font-size: 20px;
  font-weight: 700;
  margin-top: 8px;
  color: #2a2a2a;
  transition: all .3s;
}

.about-us .box-item p {
  margin-bottom: 0px;
}

.about-us .box-item:hover h4 a {
  color: #4b8ef1;
}

.about-us .gradient-button {
  margin-top: 30px;
  margin-bottom: 10px;
}

.about-us span {
  font-size: 14px;
  color: #7a7a7a;
}

.about-us .right-image {
  position: relative;
  z-index: 1;
}

.about-us:after {
  background-image: url(../images/about-bg.jpg);
  width: 777px;
  height: 1132px;
  content: '';
  position: absolute;
  background-repeat: no-repeat;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
}



/* 
---------------------------------------------
The Clients
---------------------------------------------
*/

.the-clients {
  margin-top: 130px;
}

.the-clients  .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.the-clients  .section-heading p {
  margin-top: 10px;
  margin-left: 18%;
  margin-right: 18%;
}

.the-clients .naccs {
  position: relative;
}

.menu .thumb h4 {
  margin-bottom: 0px;
  font-size: 20px;
  color: #2a2a2a;
}

.menu .thumb span.date {
  display: inline-block;
  margin-top: 0px;
  color: #afafaf;
}

.menu .thumb span.category,
.menu .thumb span.rating {
  font-weight: 700;
  color: #afafaf;
}

.menu .thumb i {
  color: #afafaf;
}

.the-clients .naccs .menu div {
  color: #fff;
  font-size: 15px;
  margin-bottom: 15px;
  margin-top: 15px;
  text-align: left;
  padding: 0px 15px;
  cursor: pointer;
  position: relative;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.the-clients .naccs .menu div.active h4,
.the-clients .naccs .menu div.active i,
.the-clients .naccs .menu div.active span.rating,
.the-clients .naccs .menu div.active .thumb {
  color: #4b8ef1;
}

.the-clients ul.nacc {
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.the-clients ul.nacc li {
  opacity: 0;
  transform: translateX(-50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.the-clients ul.nacc li.active {
  transition-delay: 0.3s;
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
}

.the-clients ul.nacc li {
  width: 100%;
}

.the-clients .nacc .thumb .client-content img {
  width: 76px;
  height: 62px;
}

.the-clients .nacc .thumb .client-content {
  padding: 60px 30px;
  background-image: url(../images/client-bg.png);
  background-size: cover;
  border-radius: 50px;
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
}

.the-clients .nacc .thumb .client-content p {
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  font-style: italic;
  margin-top: 30px;
}

.the-clients .nacc .thumb .down-content {
  margin-top: 30px;
}

.the-clients .nacc .thumb .down-content img {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  display: inline;
}

.the-clients .nacc .thumb .down-content .right-content {
  display: inline-block;
  margin-left: 20px;
}

.the-clients .nacc .thumb .down-content .right-content h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
}

.the-clients .nacc .thumb .down-content .right-content span {
  color: #2a2a2a;
}


/* 
---------------------------------------------
The Clients
---------------------------------------------
*/

.pricing-tables {
  padding-top: 130px;
}

.pricing-tables  .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.pricing-tables  .section-heading p {
  margin-top: 10px;
  margin-left: 18%;
  margin-right: 18%;
}

.pricing-item-regular {
  margin-top: 30px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.07);
  border-radius: 50px;
  padding: 90px 30px;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.pricing-item-regular:before {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../images/regular-table-top.png);
  z-index: 0;
  content: '';
  width: 274px;
  height: 221px;
}

.pricing-item-regular:after {
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: url(../images/regular-table-bottom.png);
  z-index: 0;
  content: '';
  width: 370px;
  height: 171px;
}

.pricing-item-regular span.price {
  font-size: 20px;
  color: #fff;
  position: absolute;
  font-weight: 700;
  z-index: 1;
  left: 30px;
  top: 30px;
}

.pricing-item-regular h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 30px;
}

.pricing-item-regular .icon img {
  width: 120px;
  height: 106px;
  margin-bottom: 30px;
}

.pricing-item-regular ul li {
  color: #4b8ef1;
  font-size: 15px;
  margin-bottom: 15px;
}

.pricing-item-regular ul li:last-child {
  margin-bottom: 0px;
}

.pricing-item-regular ul li.non-function {
  color: #afafaf;
  text-decoration: line-through;
}

.pricing-item-regular .border-button {
  position: relative;
  z-index: 1;
  margin-top: 40px;
}

.pricing-item-pro {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.07);
  border-radius: 50px;
  padding: 120px 30px;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.pricing-item-pro:before {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../images/pro-table-top.png);
  z-index: 0;
  content: '';
  width: 281px;
  height: 251px;
}

.pricing-item-pro:after {
  position: absolute;
  bottom: 0;
  right: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../images/pro-table-bottom.png);
  z-index: 0;
  content: '';
  width: 100%;
  height: 201px;
}

.pricing-item-pro span.price {
  font-size: 28px;
  color: #fff;
  position: absolute;
  font-weight: 700;
  z-index: 1;
  left: 30px;
  top: 30px;
}

.pricing-item-pro h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 30px;
}

.pricing-item-pro .icon img {
  width: 120px;
  height: 106px;
  margin-bottom: 30px;
}

.pricing-item-pro ul li {
  color: #4b8ef1;
  font-size: 15px;
  margin-bottom: 15px;
}

.pricing-item-pro ul li:last-child {
  margin-bottom: 0px;
}

.pricing-item-pro ul li.non-function {
  color: #afafaf;
  text-decoration: line-through;
}

.pricing-item-pro .border-button {
  position: relative;
  z-index: 1;
  margin-top: 40px;
}




/* 
---------------------------------------------
Free Quote
--------------------------------------------- 
*/

.free-quote {
  background-image: url(../images/quote-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 120px 0px;
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: 130px;
}

.free-quote .section-heading {
  margin-bottom: 60px;
}

.free-quote .section-heading h6,
.free-quote .section-heading h4 {
  color: #fff;
}

.free-quote .section-heading .line-dec {
  margin: 0 auto;
  background-color: #fff;
}

.free-quote form {
  background-color: #fff;
  display: inline-block;
  width: 100%;
  min-height: 80px;
  border-radius: 40px;
  position: relative;
  z-index: 1;
}

.free-quote form input {
  width: 100%;
  margin-top: 20px;
  margin-left: 30px;
  color: #afafaf;
  font-weight: 400;
  font-size: 15px;
  height: 40px;
  background-color: transparent;
  border-bottom: 1px solid #eee;
  border-top: none;
  border-left: none;
  border-right: none;
  position: relative;
  z-index: 2;
  outline: none;
}

.free-quote form button {
  width: 100%;
  height: 80px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  outline: none;
  border: none;
  margin-left: 30px;
  background-color: #726ae3;
  font-size: 15px;
  color: #fff;
}


/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer {
  background-image: url(../images/footer-bg.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 130px;
  padding-top: 300px;
  padding-bottom: 60px;
}

footer .section-heading {
  margin-bottom: 45px;
}

footer .section-heading h4 {
  line-height: 45px;
  color: #fff;
  margin-left: 13%;
  margin-right: 13%;
  text-align: center;
}

footer #search {
  margin-bottom: 80px;
}

footer #search input::placeholder {
  color: #fff;
}

footer #search input {
  font-size: 15px;
  color: #fff;
  outline: none;
  height: 46px;
  border: none;
  background-color: transparent;
  border-bottom: 1px solid #fff;
  width: 100%;
}

footer #search button {
  height: 46px;
  border-radius: 23px;
  border: 1px solid #fff;
  background-color: transparent;
  color: #fff;
  width: 100%;
  transition: all .5s;
}

footer #search button:hover {
  background-color: #fff;
  color: #4b8ef1;
}

.footer-widget .logo img {
  max-width: 96px;
  margin-bottom: 30px;
}

.footer-widget h4 {
  font-size: 20px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 30px;
}

.footer-widget p {
  margin-bottom: 15px;
}

.footer-widget p,
.footer-widget p a {
  color: #fff;
}

.footer-widget ul {
  display: inline;
  max-width: 40%;
  float: left;
  margin-right: 10%;
}

.footer-widget ul li {
  margin-bottom: 10px;
}

.footer-widget ul li:last-child {
  margin-bottom: 0px;
}

.footer-widget ul li a {
  font-size: 15px;
  color: #fff;
  transition: all .3s;;
}

.footer-widget a:hover {
  opacity: 0.75;
}

footer .copyright-text p {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 0px;
  color: #fff;
}

footer p a {
  color: #fff;
  transition: all .5s;
}

footer p a:hover {
  opacity: 0.75;
  color: #fff;
}


/*
---------------------------------------------
PopUp
---------------------------------------------
*/

#lean_overlay {
  position: fixed;
  z-index: 100;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: #000;
  display: none;
}

.popupContainer {
  position: absolute;
  width: 330px;
  height: auto;
  left: 45%;
  top: 60px;
  background: transparent;
}

.btn {
  padding: 10px 20px;
  background: #4b8ef1;
  color: #fff;
  transition: all .3s;
}

.btn_red {
  background: #4b8ef1;
  color: #FFF;
}

.btn:hover {
  background: #E4E4E2;
}

.btn_red:hover {
  color: #2a2a2a;
  background: #E4E4E2;
}

a.btn {
  color: #fff;
  text-align: center;
  text-decoration: none;
}

a.btn_red {
  color: #FFF;
}

.one_half {
  width: 50%;
  display: block;
  float: left;
}

.one_half.last {
  width: 45%;
  margin-left: 5%;
}
/* Popup Styles*/

.popupHeader {
  font-size: 16px;
  text-transform: uppercase;
}

.popupHeader {
  background: #F4F4F2;
  position: relative;
  padding: 10px 20px;
  border-bottom: 1px solid #DDD;
  font-weight: bold;
}

.popupHeader .modal_close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px 15px;
  background: #4b8ef1;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
}

.popupBody {
  padding: 20px;
}

.social_login .social_box {
  display: block;
  clear: both;
  padding: 10px;
  margin-bottom: 10px;
  background: #F4F4F2;
  overflow: hidden;
}

.social_login .icon {
  display: inline-block;
  
  padding: 5px 10px;
  margin-right: 10px;
  float: left;
  color: #FFF;
  font-size: 16px;
  text-align: center;
}

.social_login .fb .icon {
  background: #3B5998;
}

.social_login .google .icon {
  background: #DD4B39;
}

.social_login .icon_title {
  display: block;
  padding: 5px 0;
  float: left;
  font-weight: bold;
  font-size: 16px;
  color: #777;
}

.social_login .social_box:hover {
  background: #E4E4E2;
}

.centeredText {
  color: #afafaf;
  text-align: center;
  margin: 20px 0;
  clear: both;
  overflow: hidden;
  text-transform: capitalize;
}

.user_login label {
  color: #afafaf;
}

.action_btns {
  clear: both;
  overflow: hidden;
}

.action_btns a {
  display: block;
}
/* User Login Form */

.user_login {
  display: none;
}

.user_login label {
  display: block;
  margin-bottom: 5px;
}

.user_login input[type="text"],
.user_login input[type="email"],
.user_login input[type="password"] {
  display: block;
  width: 90%;
  padding: 10px;
  border: 1px solid #DDD;
  color: #666;
}

.user_login input[type="checkbox"] {
  float: left;
  margin-right: 10px;
  width: 22px;
  height: 22px;
}

.user_login input[type="checkbox"]+label {
  float: left;
}

.user_login .checkbox {
  margin-bottom: 10px;
  clear: both;
  overflow: hidden;
}

.forgot_password {
  display: block;
  margin: 20px 0 10px;
  clear: both;
  overflow: hidden;
  text-decoration: none;
  color: #4b8ef1;
  transition: all .3s;
}
/* User Register Form */

.user_register {
  display: none;
}

.user_register label {
  color: #afafaf;
  display: block;
  margin-bottom: 5px;
}

.user_register input[type="text"],
.user_register input[type="email"],
.user_register input[type="password"] {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid #DDD;
  color: #666;
}

.user_register input[type="checkbox"] {
  width: 22px;
  height: 22px;
  float: left;
  margin-right: 8px;
}

.user_register input[type="checkbox"]+label {
  float: left;
  color: #afafaf;
}

.user_register .checkbox {
  margin-bottom: 10px;
  clear: both;
  overflow: hidden;
}



/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/



@media (max-width: 1200px) {
  .header-area .main-nav .logo h4 {
    font-size: 24px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 25px;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:last-child {
    padding-left: 20px;
  }
  
  .main-banner .left-content h2 {
    z-index: 2;
    position: relative;
    font-weight: 700;
    line-height: 70px;
    font-size: 50px;
    margin-bottom: 20px;
  }

  .main-banner .left-content p {
    margin-bottom: 45px;
  }
}

@media (max-width: 992px) {
  .header-area {
    background-color: #fff;
  }
  .main-banner:after {
    display: none;
  } 
  .main-banner .left-content h2 {
    color: #2a2a2a;
    margin-right: 0;
  }
  .main-banner .left-content p {
    color: #afafaf;
    margin-right: 0;
  }
  .main-banner .left-content .white-button a {
    background-color: #4b8ef1;
    color: #fff !important;
  }
  form#contact {
    overflow: hidden;
  }
  .header-area .main-nav .logo h4 {
    font-size: 20px;
  }
  .main-banner .left-content {
    margin-right: 0px;
  }
  .main-banner {
    text-align: center;
    padding: 226px 0px 30px 0px;
  }
  .main-banner:before {
    display: none;
  }
  .main-banner .right-image {
    margin: 30px auto 0px auto;
    text-align: center;
  }
  .features-item {
    margin-bottom: 45px;
  }
  .last-features-item,
  .last-skill-item {
    margin-bottom: 0px !important;
  }
  .skill-item {
    margin-bottom: 30px;
  }
  .about-left-image img {
    margin-right: 0px;
    margin-bottom: 45px;;
  }
  .services .naccs .menu div {
    font-size: 15px;
    font-weight: 500;
  }
  .service-item {
    text-align: center;
    margin-bottom: 30px;
  }
  .about-us .box-item {
    text-align: center;
  }
  .about-us:after {
    display: none;
  }
  .about-us .gradient-button,
  .about-us span {
    text-align: center;
    display: block;
  }
  .about-us .right-image {
    margin-top: 30px;
  }
  .service-item .icon {
    margin: 0 auto 30px auto;
  }
  .about-us .section-heading {
    text-align: center;
  }
  .about-us .left-image {
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 45px;
  }
  .blog-posts {
    margin-left: 0px;
    margin-top: 30px;
  }
  .post-item {
    margin-bottom: 70px;
  }
  .pricing-item-regular {
    margin-bottom: 30px;
  }
  .our-portfolio .owl-nav {
    display: none !important;
  }
  .contact-info {
    margin-top: 60px;
  }
  form#contact {
    padding: 45px;
  }
}

@media (max-width: 767px) {
  .the-clients .naccs .menu div {
    text-align: center;
  }
  footer .section-heading h4 {
    color: #2a2a2a;
  }
  footer #search {
    margin-bottom: 45px;
  }
  footer {
    padding-top: 0px;
    text-align: center;
  }
  .footer-widget ul {
    display: block;
    width: 100%;
    float: none;
    text-align: center;
    margin: 0 auto;
  }
  .footer-widget h4 {
    margin-top: 45px;
    margin-bottom: 20px;
  }
  footer #search input {
    border: 1px solid #eee;
    color: #afafaf;
    background-color: #fff;
    border-radius: 23px;
    margin-bottom: 15px;
    padding: 0px 30px;
  }
  footer #search button {
    background-color: #fff;
    color: #4b8ef1;
  }
  footer #search input::placeholder { 
    color: #2a2a2a;
  }
  .header-area .main-nav .logo h4 {
    font-size: 30px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 30px;
    margin-left: 5px;
  }
  .main-banner .info-stat {
    margin-bottom: 15px;
  }
  .menu .thumb span.date {
    margin-bottom: -20px;
    display: block;
  }
  .service-item {
    text-align: center;
    padding: 30px;
  }
  .menu .thumb span.category {
    display: none;
  }
  .about-us .right-image {
    margin-top: 30px;
  }
  .service-item .icon {
    float: none;
    margin-right: 0px;
    margin-bottom: 15px;
  }
  .service-item .right-content {
    display: inline-block;
  }
  .services .naccs .menu div .thumb {
    padding: 5px;
  }
  .services .icon img {
    margin: 0px;
  }
  .the-clients .nacc .thumb .down-content .right-content {
    margin-left: 0px;
    margin-top: 15px;
  }
  .services ul.nacc li.active {
    padding: 45px;
  }
  .services .naccs .menu div  {
    font-size: 0px;
  }
  .the-clients .nacc .thumb .down-content {
    text-align: center;
  }
  .services ul.nacc li .right-image img {
    float: none;
  }
  .our-portfolio .section-heading,
  .about-us .section-heading,
  .about-us .about-item,
  .about-us p,
  .about-us .main-green-button {
    text-align: center;
  }
  .our-portfolio .section-heading .line-dec {
    margin: 0 auto;
  }
  .our-services .section-heading {
    margin-left: 15px;
    margin-right: 15px;
  }
  .free-quote form input {
    margin-left: 0px;
    padding: 0px 30px;
  }
  .free-quote form button {
    margin-left: 0px;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 0px;
  }
  .blog-posts {
    margin-left: 0px;
    margin-top: 30px;
  }
  .post-item {
    margin-bottom: 30px;
  }
  .post-item .thumb img {
    max-width: 140px;
  }
  .post-item .right-content p {
    display: none;
  }
  .about-us .about-item {
    margin-top: 15px;
  }
  form#contact {
    padding: 30px;
  }
}

/* Custom: dark rounded box behind logo */
.header-area .main-nav .logo img.logo-badge {
  background-color: #1f1f26;
  border-radius: 14px;
  padding: 6px 10px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  height: 36px;
  width: auto;
  display: inline-block;
}

/* Mobile: smaller logo height to prevent header overflow */
@media (max-width: 767px) {
  .header-area .main-nav .logo img.logo-badge {
    height: 28px !important;
  }
}

/* Policy Modal styles */
.policy-body { padding: 0; }
.policy-wrap { padding: 20px 22px; }
.policy-title { font-size: 22px; font-weight: 700; color: #2a2a2a; margin-bottom: 8px; }
.policy-subtitle { color: #7a7a7a; margin-bottom: 18px; }
.policy-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.policy-card { background: #f7f7f7; border-radius: 16px; padding: 14px 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.policy-card .section-heading-sm { font-size: 16px; font-weight: 700; margin-bottom: 8px; color: #2a2a2a; }
.policy-card .bullets { padding-left: 18px; }
.policy-card .bullets li { list-style: disc; color: #3B566E; margin: 6px 0; line-height: 1.6; }
.policy-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.policy-cta .btn { border-radius: 20px; }
.policy-note { font-size: 12px; color: #afafaf; margin-top: 12px; }

/* Policy Modal — Enhanced UI */
#policyModal .popupHeader {
  background: linear-gradient(105deg, rgba(91,104,235,1) 0%, rgba(40,225,253,1) 100%);
  color: #fff;
  border-bottom: none;
}
#policyModal .popupHeader .header_title { color: #fff; }
#policyModal .popupHeader .modal_close { background: rgba(255,255,255,0.18); }
.policy-wrap { background: #fff; }
.policy-card { background: #ffffff; border-radius: 18px; padding: 16px 18px; box-shadow: 0 10px 24px rgba(20, 20, 43, 0.08); border: 1px solid rgba(20,20,43,0.06); }
.policy-card .bullets { padding-left: 0; }
.policy-card .bullets li { list-style: none; position: relative; padding-left: 26px; }
.policy-card .bullets li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(105deg, rgba(91,104,235,1) 0%, rgba(40,225,253,1) 100%); position: absolute; left: 6px; top: 10px; box-shadow: 0 0 0 3px rgba(91,104,235,0.08); }
.policy-title { display: flex; align-items: center; gap: 10px; }
.policy-title::before { content: "\f5b0"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #4b8ef1; background: rgba(75,142,241,0.12); border-radius: 10px; padding: 8px; display: inline-block; }
.policy-cta .btn { border: none; background: linear-gradient(105deg, rgba(91,104,235,1) 0%, rgba(40,225,253,1) 100%); color: #fff; }
.policy-cta .btn:hover { opacity: 0.9; }
.policy-cta .btn.btn_red { background: linear-gradient(105deg, rgba(114,106,227,1) 0%, rgba(75,142,241,1) 100%); }

/* desktop */
@media (min-width: 992px) {
  #policyModal { width: 860px; }
  .policy-wrap { padding: 26px 28px; }
  .policy-title { font-size: 24px; }
  .policy-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* tablet */
@media (min-width: 768px) and (max-width: 991px) {
  #policyModal { width: 720px; }
}

/* mobile */
@media (max-width: 767px) {
  #policyModal { width: calc(100% - 32px); left: 50%; margin-left: 0 !important; transform: translateX(-50%); top: 40px !important; }
  .policy-wrap { padding: 18px; }
  .policy-card { border-radius: 14px; }
}

/* Modal corners */
.popupContainer {
  border-radius: 18px;
  overflow: hidden;
}

/* Policy Modal — Centered and Scrollable */
#policyModal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin-left: 0 !important;
  width: min(860px, calc(100% - 40px)) !important;
  max-height: 90vh;
  overflow: hidden;
}
#policyModal .policy-body {
  overflow-y: auto;
  max-height: calc(90vh - 56px);
  -webkit-overflow-scrolling: touch;
}

/* Integrations Modal — Centered and Scrollable */
#integrationsModal {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin-left: 0 !important;
  width: min(860px, calc(100% - 40px)) !important;
  max-height: 90vh;
  overflow: hidden;
}
#integrationsModal .policy-body {
  overflow-y: auto;
  max-height: calc(90vh - 56px);
  -webkit-overflow-scrolling: touch;
}

/* Clients — Tatvan customization */
.client-stats { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 10px 0 20px; }
.stat-card { background: #fff; border: 1px solid rgba(20,20,43,0.06); border-radius: 14px; padding: 14px 16px; box-shadow: 0 6px 18px rgba(20,20,43,0.06); }
.stat-title { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: #7a7a7a; margin-bottom: 4px; }
.stat-value { font-size: 22px; font-weight: 800; color: #2a2a2a; }
.stat-value.ok { color: #22c55e; }
.stat-hint { font-size: 12px; color: #9aa0a6; margin-top: 2px; }
.client-logos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.logo-badge-text { background: #1f2937; color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,.12); }

@media (min-width: 768px) {
  .client-stats { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .stat-value { font-size: 24px; }
}

/* Clients — placeholders for logos and cards */
.client-showcase .logo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.logo-placeholder { background: #f3f4f6; border: 1px dashed #cbd5e1; color: #64748b; border-radius: 12px; padding: 16px; text-align: center; font-size: 14px; }
.logo-placeholder.belediye { background: rgba(75,142,241,0.08); border-color: rgba(75,142,241,0.35); }
.logo-placeholder.halk { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.35); }
.client-showcase .cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.card-placeholder { background: #fff; border: 1px solid rgba(20,20,43,0.08); border-radius: 14px; padding: 30px 16px; text-align: center; color: #3B566E; box-shadow: 0 6px 18px rgba(20,20,43,0.06); }

@media (max-width: 767px) {
  .client-showcase .logo-row { grid-template-columns: 1fr; }
  .client-showcase .cards-row { grid-template-columns: 1fr; }
}

/* Clients — logo image sizing */
.logo-image { display: block; width: 100%; height: 72px; object-fit: contain; background: #fff; border: 1px solid rgba(20,20,43,0.08); border-radius: 12px; padding: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.06); }
/* Clients — card images */
.card-image { display: block; width: 100%; height: 140px; object-fit: contain; background: #fff; border: 1px solid rgba(20,20,43,0.08); border-radius: 14px; padding: 10px; box-shadow: 0 6px 18px rgba(20,20,43,0.06); }
@media (max-width: 767px) {
  .card-image { height: 120px; }
}

/* Clients — showcase polish */
.client-showcase { position: relative; background: #fff; border-radius: 20px; padding: 18px; }
.client-showcase:before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: 20px; background: linear-gradient(105deg, rgba(91,104,235,.6) 0%, rgba(40,225,253,.6) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.divider-soft { height: 1px; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,.08), rgba(0,0,0,0)); margin: 10px 0; }
.rating-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.rating-row .stars i { color: #f59e0b; margin-right: 2px; }
.rating-row .rating-text { font-weight: 700; color: #374151; }

/* stats hover polish */
.stat-card { transition: box-shadow .2s ease, transform .2s ease; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20,20,43,0.12); }

/* chips polish */
.chip { transition: background .2s ease, box-shadow .2s ease; }
.chip:hover { box-shadow: 0 6px 18px rgba(20,20,43,0.10); }

/* Clients — showcase grid and side panel */
.client-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.client-main { min-width: 0; }
.client-side { display: grid; gap: 12px; }
.side-card { background: #fff; border: 1px solid rgba(20,20,43,0.06); border-radius: 14px; padding: 12px 14px; box-shadow: 0 8px 20px rgba(20,20,43,0.08); }
.side-card h5 { font-size: 14px; font-weight: 800; color: #111827; margin-bottom: 8px; }
.side-list { margin: 0; padding-left: 0; list-style: none; }
.side-list li { display: flex; align-items: center; gap: 8px; color: #3B566E; margin: 6px 0; }
.side-list i { color: #22c55e; }
.side-link { display: block; color: #374151; padding: 8px 10px; border-radius: 10px; border: 1px solid #e5e7eb; margin-top: 6px; transition: all .2s ease; }
.side-link i { margin-right: 6px; color: #4b8ef1; }
.side-link:hover { background: #f9fafb; box-shadow: 0 8px 20px rgba(20,20,43,0.08); }

@media (min-width: 992px) {
  .client-grid { grid-template-columns: 2fr 1fr; }
}

/* MD3 tokens for clients */
:root { --md3-primary:#355CFF; --md3-secondary:#0F766E; --md3-accent:#00D4AA; --md3-surface:#FFFFFF; --md3-surfaceContainer:#F5F7FB; --md3-surfaceVariant:#E5E7EB; --md3-onSurface:#101828; --md3-onSurfaceVariant:#344054; --md3-success:#16A34A; --md3-warning:#D97706; --md3-error:#DC2626; --md3-radius-lg:20px; --md3-radius-md:14px; --md3-radius-sm:10px; }

/* Section header */
.md3-clients .section-heading h4 { font: 600 28px/1.2 'Inter', system-ui; color: var(--md3-onSurface); }
.md3-clients .section-heading p { font: 400 15px/1.7 'Inter', system-ui; color: var(--md3-onSurfaceVariant); }

/* Stats row as MD3 cards */
.md3-clients .client-stats { display:grid; grid-template-columns:1fr; gap:16px; margin:18px 0 10px; }
.md3-clients .stat-card { background:var(--md3-surface); border:1px solid var(--md3-surfaceVariant); border-radius: var(--md3-radius-lg); padding:18px; box-shadow: 0 2px 10px rgba(16,24,40,.06); display:flex; flex-direction:column; gap:6px; min-height:92px; }
.md3-clients .stat-title { font:600 12px/1.4 'Inter'; color: var(--md3-onSurfaceVariant); text-transform:uppercase; letter-spacing:.6px; }
.md3-clients .stat-value { font:700 22px/1.2 'Inter'; color: var(--md3-onSurface); }
.md3-clients .stat-value.ok { color: var(--md3-success); }
.md3-clients .stat-hint { font:400 15px/1.7 'Inter'; color:#667085; }
@media(min-width:576px){ .md3-clients .client-stats{ grid-template-columns: repeat(3,1fr);} }

/* Chips row */
.md3-clients .client-logos { margin:6px 0 18px; display:flex; flex-wrap:wrap; gap:10px; }
.md3-clients .logo-badge-text { background: var(--md3-surfaceContainer); color: var(--md3-onSurface); border:1px solid var(--md3-surfaceVariant); border-radius:999px; padding:6px 12px; font:600 12px/1.4 'Inter'; }

/* Case layout */
.md3-clients .client-showcase { background: var(--md3-surface); border-radius: var(--md3-radius-lg); padding:20px; box-shadow: 0 2px 10px rgba(16,24,40,.06); }
.md3-clients .client-showcase:before { background: linear-gradient(105deg, rgba(53,92,255,.35) 0%, rgba(0,212,170,.35) 100%); }
.md3-clients .logo-image { background: #fff; border:1px solid var(--md3-surfaceVariant); }
.md3-clients .card-image { background:#fff; border:1px solid var(--md3-surfaceVariant); aspect-ratio:16/9; object-fit:cover; height:auto; }
.md3-clients .client-cta .btn { font:600 12px/1.4 'Inter'; }

/* Two-column grid */
.md3-clients .client-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:992px){ .md3-clients .client-grid{ grid-template-columns: 7fr 5fr; } }

/* Side panel cards */
.md3-clients .side-card{ background: var(--md3-surface); border:1px solid var(--md3-surfaceVariant); border-radius: var(--md3-radius-md); padding:16px; box-shadow: 0 2px 10px rgba(16,24,40,.06); }
.md3-clients .side-card h5{ font:600 18px/1.4 'Inter'; margin:0 0 8px; color:var(--md3-onSurface); }
.md3-clients .side-list li{ color:var(--md3-onSurfaceVariant); }
.md3-clients .side-link{ font:600 12px/1.4 'Inter'; }

/* Rating badge */
.md3-clients .rating-row .rating-text{ color:var(--md3-onSurface); }

/* Motions */
@keyframes fadeUp { from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none;} }
.md3-clients .client-showcase, .md3-clients .stat-card{ animation: fadeUp 300ms ease-out both; }

/* Clients — vivid background and accents */
.md3-clients { position: relative; overflow: hidden; background: linear-gradient(180deg, #F5F7FB 0%, #EEF2FF 100%); padding-top: 60px; padding-bottom: 60px; }
.md3-clients:before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(600px 600px at 90% -10%, rgba(53,92,255,0.20), rgba(53,92,255,0) 60%), radial-gradient(500px 500px at 10% 110%, rgba(0,212,170,0.18), rgba(0,212,170,0) 60%); }
.md3-clients > .container, .md3-clients .section-heading, .md3-clients .client-stats, .md3-clients .case-row { position: relative; z-index: 1; }

/* Stat accents */
.md3-clients .client-stats .stat-card { border-top: 3px solid rgba(53,92,255,.85); }
.md3-clients .client-stats .stat-card:nth-child(2) { border-top-color: var(--md3-success); }
.md3-clients .client-stats .stat-card:nth-child(3) { border-top-color: var(--md3-secondary); }

/* Chip surface tweak */
.md3-clients .chip { background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFC 100%); border-color: var(--md3-surfaceVariant); }

/* Ensure rounded corners on card images */
.md3-clients .card-image { border-radius: var(--md3-radius-md); padding: 0; overflow: hidden; }

/* Clients — entrance animations */
@keyframes md-scale-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes md-slide-in-right { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }

/* initial states */
.md3-clients .stat-card,
.md3-clients .client-showcase,
.md3-clients .side-card,
.md3-clients .chips-row .chip,
.md3-clients .logo-image,
.md3-clients .card-image { opacity: 0; }

/* animate when section becomes visible */
.md3-clients.animate .stat-card { animation: fadeUp 420ms ease-out forwards; }
.md3-clients.animate .stat-card:nth-child(2) { animation-delay: 120ms; }
.md3-clients.animate .stat-card:nth-child(3) { animation-delay: 240ms; }

.md3-clients.animate .client-showcase { animation: fadeUp 520ms ease-out 120ms forwards; }
.md3-clients.animate .side-card:nth-child(1) { animation: md-slide-in-right 420ms ease-out 200ms forwards; }
.md3-clients.animate .side-card:nth-child(2) { animation: md-slide-in-right 420ms ease-out 280ms forwards; }

.md3-clients.animate .chips-row .chip { animation: fadeUp 360ms ease-out forwards; }
.md3-clients.animate .chips-row .chip:nth-child(2) { animation-delay: 100ms; }
.md3-clients.animate .chips-row .chip:nth-child(3) { animation-delay: 180ms; }

.md3-clients.animate .logo-image { animation: md-scale-in 380ms cubic-bezier(.2,.8,.2,1) 180ms forwards; }
.md3-clients.animate .logo-image.halk { animation-delay: 240ms; }
.md3-clients.animate .card-image:nth-child(1) { animation: md-scale-in 420ms cubic-bezier(.2,.8,.2,1) 260ms forwards; }
.md3-clients.animate .card-image:nth-child(2) { animation: md-scale-in 420ms cubic-bezier(.2,.8,.2,1) 320ms forwards; }

/* hover motions */
.md3-clients .stat-card { transition: transform .18s ease, box-shadow .2s ease; will-change: transform; }
.md3-clients .stat-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20,20,43,0.12); }
.md3-clients .client-showcase { transition: box-shadow .2s ease, transform .18s ease; will-change: transform; }
.md3-clients .client-showcase:hover { box-shadow: 0 8px 24px rgba(16,24,40,.16); transform: translateY(-1px); }
.md3-clients .chip { transition: background .18s ease, box-shadow .2s ease, transform .16s ease; }
.md3-clients .chip:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16,24,40,.10); }
.md3-clients .card-image, .md3-clients .logo-image { transition: transform .18s ease, box-shadow .18s ease; will-change: transform; }
.md3-clients .card-image:hover, .md3-clients .logo-image:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16,24,40,.12); }

/* Clients — richer hover animations */
/* Sheen on images */
.md3-clients .card-image, .md3-clients .logo-image { position: relative; overflow: hidden; }
.md3-clients .card-image::after, .md3-clients .logo-image::after { content:""; position:absolute; top:0; left:-60%; height:100%; width:55%; background: linear-gradient(75deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); opacity:.0; pointer-events:none; }
@keyframes md-sheen { from{ left:-60%; opacity:.0; } 30%{ opacity:.6; } to{ left:120%; opacity:.0; } }
.md3-clients .card-image:hover::after, .md3-clients .logo-image:hover::after { animation: md-sheen 900ms ease; }

/* Client showcase hover intensifier */
.md3-clients .client-showcase:hover { transform: translateY(-1px) scale(1.01); }
.md3-clients .client-showcase:hover:before { background: linear-gradient(105deg, rgba(53,92,255,.55) 0%, rgba(0,212,170,.55) 100%); }

/* CTA buttons state layer and outline reactions */
.md3-clients .client-cta .btn { position: relative; overflow: hidden; }
.md3-clients .client-cta .btn::before { content:""; position:absolute; inset:0; background: currentColor; opacity:0; transition: opacity .18s ease; }
.md3-clients .client-cta .btn:hover::before { opacity:.08; }
.md3-clients .client-cta .btn:not(.btn_red):hover { color: var(--md3-primary); border-color: var(--md3-primary); }

/* Side links hover */
.md3-clients .side-link { transition: color .18s ease, border-color .18s ease, transform .16s ease, box-shadow .18s ease; }
.md3-clients .side-link:hover { color: var(--md3-primary); border-color: var(--md3-primary); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(16,24,40,.1); }

/* Clients — stronger paragraph contrast */
.md3-clients .client-showcase p { color: var(--md3-onSurface); }

/* RFQ modal styles */
#rfqModal .popupHeader { background: linear-gradient(105deg, rgba(53,92,255,1) 0%, rgba(0,212,170,1) 100%); color: #fff; }
.rfq-wrap { background:transparent; padding: 16px 18px; }
.form-grid { display:grid; grid-template-columns: 1fr; gap: 12px; }
.form-field { display:flex; flex-direction:column; gap:6px; }
.form-field label { font: 600 12px/1.4 'Inter'; color: #334155; }
.form-field input, .form-field textarea, .form-field select { border:1px solid #E5E7EB; border-radius: 12px; padding: 10px 12px; font: 400 15px/1.6 'Inter'; color:#111827; background:#fff; outline:none; transition:border-color .18s ease, box-shadow .18s ease; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color:#355CFF; box-shadow:0 0 0 3px rgba(53,92,255,.18); }
.form-field .hint { color:#9aa0a6; font: 400 12px/1.4 'Inter'; }
.form-field .checkbox { display:flex; align-items:flex-start; gap:10px; }
.form-field .checkbox input { margin-top:3px; width:18px; height:18px; }
.form-field.span-2 { grid-column: span 1; }
.rfq-actions { display:flex; gap:10px; margin-top: 8px; }
@media (min-width: 768px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-field.span-2 { grid-column: span 2; } }

/* RFQ modal — pro UI */
#rfqModal .popupHeader { position: relative; }
#rfqModal .popupHeader .header_title { font: 600 18px/1.4 'Inter'; }
.rfq-wrap { border-radius: 16px; box-shadow: 0 12px 28px rgba(16,24,40,.16); }
.rfq-wrap:before { content:""; position:absolute; inset:0; border-radius:16px; padding:1px; background: linear-gradient(105deg, rgba(53,92,255,.5) 0%, rgba(0,212,170,.5) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }
.rfq-badge { display:inline-flex; align-items:center; gap:6px; background:#fff; color:#355CFF; border:1px solid rgba(53,92,255,.25); border-radius:999px; padding:6px 10px; font:600 12px/1.4 'Inter'; box-shadow:0 4px 12px rgba(16,24,40,.08); margin-bottom:8px; margin-right: 40px;}

/* input groups */
.input-group { position: relative; }
.input-group i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#94a3b8; }
.input-group input, .input-group select, .input-group textarea { padding-left:38px; }

/* buttons */
.rfq-actions .btn { border-radius: 999px; padding: 10px 16px; }
.rfq-actions .btn.btn_red { background: linear-gradient(105deg, rgba(53,92,255,1) 0%, rgba(0,212,170,1) 100%); }
.rfq-actions .btn:hover { box-shadow: 0 10px 24px rgba(16,24,40,.14); transform: translateY(-1px); }

/* RFQ layout two-column */
.rfq-layout { display:grid; grid-template-columns: 1fr; gap:16px; }
.rfq-main { min-width:0; }
.rfq-aside { display:grid; gap:12px; }
.aside-card { background:#fff; border:1px solid #E5E7EB; border-radius:14px; padding:14px; box-shadow:0 8px 20px rgba(16,24,40,.10); }
.aside-card.gradient { background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FB 100%); border-color:#E5E7EB; }
.aside-card h5 { font:600 16px/1.4 'Inter'; margin:0 0 8px; color:#111827; }
.aside-card h6 { font:600 14px/1.4 'Inter'; margin:0 0 8px; color:#111827; }
.aside-card p { margin:0 0 10px; color:#344054; }
.aside-meta { display:flex; gap:10px; flex-wrap:wrap; }
.aside-meta .meta-item { background:#fff; border:1px solid #E5E7EB; border-radius:999px; padding:6px 10px; font:600 12px/1.4 'Inter'; color:#334155; }
.aside-card ul { margin:0; padding-left:0; list-style:none; }
.aside-card ul li { display:flex; align-items:center; gap:8px; color:#3B566E; margin:6px 0; }
.aside-card ul li i { color:#22c55e; }
@media(min-width:992px){ .rfq-layout{ grid-template-columns: 7fr 5fr; } }

/* RFQ modal responsiveness and spacing */
#rfqModal { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; margin-left: 0 !important; width: min(920px, calc(100% - 40px)) !important; max-height: 90vh; overflow: hidden; }
#rfqModal .policy-body { overflow-y: auto; max-height: calc(90vh - 56px); -webkit-overflow-scrolling: touch; }
#rfqModal .popupHeader { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding-right: 12px; }
.rfq-wrap { position: relative; padding: 20px 22px; }
.form-grid { gap: 14px; }
@media (max-width: 767px) { #rfqModal { width: calc(100% - 24px) !important; top: 50% !important; transform: translate(-50%, -50%) !important; } .rfq-wrap { padding: 16px 16px; } .form-grid { gap: 12px; } }

/* RFQ popup — screenshot-like layout */
.rfq-container { position: relative; min-height: 520px; display: flex; align-items: stretch; }
.rfq-info-panel { position: absolute; top: 24px; left: 24px; width: 300px; height: calc(100% - 48px); background:#fa4c4c; color:#fff; padding: 48px 28px; box-shadow: 0 14px 28px rgba(0,0,0,.25); border-radius: 8px; display:flex; flex-direction:column; justify-content:center; }
.rfq-info-panel h2 { font:600 20px/1.4 'Inter'; margin-bottom: 12px; }
.rfq-info { list-style:none; padding:0; margin: 10px 0 0; }
.rfq-info li { display:flex; align-items:flex-start; gap:10px; margin:12px 0; opacity:.9; }
.rfq-info li i { margin-top: 3px; }
.rfq-form-card { position: relative; background:#fff; margin-left: 160px; padding: 40px 40px 30px 220px; box-shadow: 0 40px 50px rgba(0,0,0,.15); border-radius: 6px; flex:1; }
.rfq-form-card h2 { color:#0f3959; font:600 20px/1.4 'Inter'; }
.rfq-formBox { position: relative; display:flex; flex-wrap: wrap; justify-content: space-between; padding-top: 18px; }
.rfq-inputBox { position: relative; margin: 0 0 22px 0; }
.rfq-inputBox.w50 { width: 47%; }
.rfq-inputBox.w100 { width: 100%; }
.rfq-inputBox input, .rfq-inputBox textarea, .rfq-inputBox select { width:100%; padding: 10px 6px; font: 400 16px/1.6 'Inter'; color:#111827; border:none; border-bottom:1px solid #cbd5e1; outline:none; background: transparent; }
.rfq-inputBox textarea { resize: vertical; min-height: 80px; }
.rfq-inputBox span { position:absolute; left:6px; top:8px; font: 400 14px/1.4 'Inter'; color:#64748b; pointer-events:none; transition: all .18s ease; }
.rfq-inputBox input:focus ~ span, .rfq-inputBox input:valid ~ span, .rfq-inputBox textarea:focus ~ span, .rfq-inputBox textarea:valid ~ span, .rfq-inputBox select:focus ~ span { transform: translateY(-18px); font-size: 11px; letter-spacing: 1px; color:#fa4c4c; }
.rfq-consent { margin-top: 4px; color:#475569; }
.rfq-inputBox input[type="submit"] { cursor: pointer; background:#000; color:#fff; border-radius: 2px; padding: 12px; transition: background .2s ease; border:none; }
.rfq-inputBox input[type="submit"]:hover { background:#fa4c4c; }

@media(max-width: 991px){ .rfq-info-panel{ position:relative; width:100%; height:auto; margin-bottom:16px; left:auto; top:auto; border-radius:8px; } .rfq-form-card{ padding:24px; margin-left:0; } .rfq-inputBox.w50{ width:100%; } }

/* === RFQ Screenshot Match Overrides === */
#rfqModal .popupHeader { background:#fff; color:#0f3959; border-bottom:none; }
#rfqModal .popupHeader .rfq-badge { display:none; } /* طبق شات نیازی نیست */

.rfq-container { min-height: 420px; display:flex; align-items:stretch; }
.rfq-info-panel{
  position:absolute; inset:auto auto 0 0; /* چسبیده سمت چپ */
  width: 300px; height: calc(100% - 48px);
  margin:24px 0 24px 24px;
  background:#ff6a5b; /* قرمز-مرجانی شبیه شات */
  color:#fff; border-radius:8px; box-shadow:0 18px 40px rgba(0,0,0,.18);
  padding:48px 28px; display:flex; flex-direction:column; justify-content:center;
}
.rfq-info-panel h2{ color:#fff; font-weight:700; margin-bottom:12px; }
.rfq-info li{ color:#fff; opacity:.95; }
.rfq-info li i{ width:18px; text-align:center; }

.rfq-social{ margin-top:14px; display:flex; gap:14px; }
.rfq-social a{ color:#fff; opacity:.9; transition:opacity .2s }
.rfq-social a:hover{ opacity:1; }

.rfq-form-card{
  background:#fff; border-radius:6px;
  margin-left:160px; /* جا برای پنل قرمز */
  padding:40px 40px 30px 220px; /* هم‌تراز با اسکرین‌شات */
  box-shadow:0 40px 50px rgba(0,0,0,.15);
}
.rfq-form-card h2{ color:#0f3959; font-weight:700; margin-bottom:6px; }

.rfq-inputBox input,
.rfq-inputBox textarea,
.rfq-inputBox select{
  border:none; border-bottom:1px solid #e5e7eb; border-radius:0;
  padding:10px 0; background:transparent;
}
.rfq-inputBox span{ left:0; } /* لیبل‌ها چسبیده به خط */
.rfq-inputBox input[type="submit"]{
  width:100%; background:#111; color:#fff; border-radius:0; padding:12px 14px;
  transition: background .2s ease;
}
.rfq-inputBox input[type="submit"]:hover{ background:#ff6a5b; }

/* فاصله و تایپوگرافی ریز شبیه شات */
.rfq-inputBox{ margin-bottom:22px; }
.rfq-inputBox.w50{ width:47%; }
.rfq-inputBox.w100{ width:100%; }

/* واکنش‌گرا: موبایل شِبه شات (پنل قرمز بالا، فرم زیرش) */
@media (max-width: 991px){
  .rfq-info-panel{
    position:relative; width:100%; height:auto;
    margin:0 0 16px 0; border-radius:8px; padding:28px 24px;
  }
  .rfq-form-card{ padding:24px; margin-left:0; }
  .rfq-inputBox.w50{ width:100%; }
}

/* RFQ — density, spacing and clarity improvements */
#rfqModal { width: min(1040px, calc(100% - 40px)) !important; max-height: 92vh; }
.rfq-container{ min-height: 560px; }
.rfq-info-panel{ width: 320px; margin:24px 0 24px 24px; height: calc(100% - 48px); }
.rfq-form-card{ margin-left: 200px; padding: 48px 48px 32px 300px; }
.rfq-formBox{ gap: 10px; }
.rfq-inputBox{ min-height: 56px; }
.rfq-inputBox input, .rfq-inputBox textarea, .rfq-inputBox select{ border-bottom:2px solid #e5e7eb; padding:12px 0 10px; font-size:16px; }
.rfq-inputBox span{ top:8px; font-size:14px; }
.rfq-inputBox input:focus, .rfq-inputBox textarea:focus, .rfq-inputBox select:focus{ border-bottom-color:#0f3959; }
.rfq-inputBox input:focus ~ span, .rfq-inputBox input:valid ~ span, .rfq-inputBox textarea:focus ~ span, .rfq-inputBox textarea:valid ~ span, .rfq-inputBox select:focus ~ span{ transform: translateY(-18px) scale(.92); color:#0f3959; }
.rfq-inputBox input[type="submit"]{ height: 44px; font-weight:600; }

@media (max-width: 991px){
  .rfq-container{ min-height: 0; }
  .rfq-form-card{ padding: 24px; }
}

/* RFQ panel width tweak */
.rfq-info-panel{ width: 800px; }