:root{--primary-color:#f41a4c;--secondary-color:#2ecc71;--white-color:#fff;--black-color:#000000;--gray2:#707070}
body{font-family:Ubuntu,sans-serif;font-size:15px;color:var(--dark-color);line-height:1.4em;font-weight:400;background:var(--gray-color);margin:0;padding:0}
html{font-size:10px;-webkit-tap-highlight-color:transparent;font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;scroll-behavior:smooth}
a:focus,a:hover,a:visited{text-decoration:none;outline:0;color:var(--dark-color)}
a{text-decoration:none;cursor:pointer;color:var(--dark-color)}
textarea{resize:none}
a:focus,button:focus,input:focus,select:focus,textarea:focus{outline:0!important;box-shadow:none!important}
.no-padding{padding:0}
.button{background-color:var(--primary-color);color:var(--white-color);border:none;padding:10px 20px;border-radius:4px;cursor:pointer}
.button.secondary{background-color:var(--secondary-color)}
.button.accent{background-color:var(--accent-color)}
.hero-banner{height:calc(100vh - 100px)}
.sitecolor{color:var(--primary-color)}
.addcol p{font-size:13px;margin:0;line-height:16px;font-weight:500}
.navbar-nav a.nav-link{font-size:14px;font-weight:500}
.navbar-nav .nav-item{margin-right:12px}
.navbar-nav a:hover{color: var(--primary-color);}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {color: var(--primary-color);}
.top-header{background:url("../img/tpheader.png") no-repeat;background-size:cover;background-position:center;padding:12px 0}
.logo-text{font-weight:700;font-size:22px;text-transform:uppercase}
.steps{display:flex;justify-content:center;flex-wrap:nowrap;margin:40px 0;overflow-x: auto;}
.step{text-align:center;flex:1;padding:10px;border-bottom:2px solid var(--black-color)}
.step.active{border-color:var(--primary-color)}
.step.completed{border-color:var(--primary-color)}
.step.completed .icon{background:var(--primary-color)}
.step .icon{width:58px;height:58px;margin:0 auto 10px;border-radius:50%;background:#000;color:var(--white-color);display:flex;align-items:center;justify-content:center;position:relative;font-size:20px}
.materials .nav-tabs{position:relative}
.materials .nav-tabs:after{content:'';height:1px;width:87%;background:var(--gray2);position:absolute;left:0;bottom:0;top:0;margin:auto;right:0}
.materials .nav-tabs .nav-link{color:#1a1a1a;font-size:11px;font-weight:500;border-color:transparent;border-bottom:0;border-right:0;border-radius:0;margin:16px 8px;background:var(--white-color);position:relative;z-index:1;text-transform:uppercase}
header .navbar{
      padding-top: 12px;
    padding-bottom: 12px;
}
.materials .nav-tabs .nav-link.active{color:var(--primary-color)}
.materials .nav-tabs .nav-link:before{content:'';background:var(--primary-color);position:absolute;left:-3px;top:0;width:100%;height:1px;display:inline-flex;opacity:0;transition:all ease .5s 0s}
.materials .nav-tabs .nav-link:after{content:'';background:var(--primary-color);position:absolute;left:0;top:-3px;width:1px;height:24px;display:inline-flex;opacity:0;transition:all ease .5s 0s}
.materials .nav-tabs .nav-link:hover:after{opacity:1}
.materials .nav-tabs .nav-link:hover:before{opacity:1}
.materials .nav-tabs .nav-link.active:after{opacity:1}
.materials .nav-tabs .nav-link.active:before{opacity:1}
.materials .nav-tabs .nav-link:hover{color:var(--primary-color)}
.titleoverlay{background:#000;height:50px;width:100%;position:absolute;color:var(--white-color);font-size:16px;display:flex;font-weight:400;align-items:center;justify-content:center;left:0;bottom:0;transition:all ease .5s 0s;border-top:1px solid var(--primary-color);flex-direction:column;padding: 10px 50px;}
.titleoverlay span{color:#b3b1b1}
.titleoverlay .btn-link{color:var(--primary-color);font-weight:600;font-size:14px;display:none;margin:20px 0;transition:all ease .5s 0s;text-decoration:underline}
.product-col:hover .titleoverlay{height:100%;opacity:.8;padding:40px 50px;}
.product-col:hover .btn-link{display:block}
.step .icon span{position:absolute;top:-7px;left:-10px;color:transparent;display:flex;align-items:center;justify-content:center;font-size:30px;letter-spacing:0;text-transform:uppercase;opacity:.17;-webkit-text-stroke:1px #000}
.step.active .icon{background:var(--primary-color)}
.step .icon img{width:24px;height:24px}
.steps p{color:#1a1a1a;margin:0;font-size:12px;font-weight:500}
.search-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / 79%);z-index:9999;display:none;align-items:center;justify-content:center}
.search-overlay input{width: 60%;padding: 15px;font-size: 20px;border: 0;color: var(--white-color);opacity: 1;
    background: transparent;border-bottom: 2px solid var(--white-color);border-radius: 0;font-weight: 100;}
.search-overlay .close{position:absolute;top:20px;right:40px;font-size:20px;color:var(--white-color);cursor:pointer}
.search-overlay .form-control:focus{background: transparent;color: var(--white-color);border-color:var(--white-color);}
.banner-caption{font-family:Ubuntu,sans-serif;letter-spacing:7.38px;color:var(--white-color);text-transform:uppercase;font-weight:300;font-size:16px;line-height:22px}
.banner-title{font-size:80px;line-height:74px;font-family:Ubuntu,sans-serif;font-weight:300;color:var(--white-color);text-transform:uppercase}
.section-cl{padding:46px 0}
.page-title{font-size:36px;line-height:49px;color:var(--black-color);font-weight:500}
.tagline{letter-spacing:2.48px;color:#000;font-weight:300;line-height:30px;font-size:16px;position:relative;padding-bottom:18px}
.tagline:after{content:'';border-bottom:1px dotted var(--primary-color);height:1px;width:140px;margin:auto;position:absolute;left:0;right:0;bottom:0}
.btn-primary{background:var(--black-color);border-color:var(--black-color);font-size:14px;color:var(--white-color);position:relative;padding:9px 23px!important;border-radius:0}
.btn-primary:before{content:"";border-right:2px solid #727070;position:absolute;right:-6px;width:4px;height:100%}
.btn-primary:after{content:"";border-bottom:2px solid #727070;position:absolute;right:-9px;width:100%;height:2px;bottom:-6px}
footer{background:url("../img/footer-bg.jpg") no-repeat;background-size:cover;background-position:center;color:var(--white-color);padding:50px 0 0;position:relative}
footer p{font-size:14px;font-weight:300}
footer .container{position:relative;z-index:1}
.footer-btm{background:var(--black-color);padding:12px 0;margin-top:36px}
footer h4{margin-bottom:18px;border-bottom:1px solid #ccc;padding-bottom:20px;position:relative}
footer h4 span{background:var(--primary-color);height:2px;width:60%;position:absolute;left:0;bottom:-1px;display:block;right:0}
footer i{color:var(--primary-color)}
footer a{color:var(--white-color);text-decoration:none}
footer a:hover{color:var(--white-color)}
.copyright{text-align:center;font-size:12px;color:var(--white-color)}
.social-links{margin-top: 30px;}
.social-links a{font-size:16px;width:24px;height:24px;line-height:24px;text-align:center;background-color:var(--white-color);color:var(--black-color)!important;border-radius:50%;transition:all .3s ease;display:inline-block;margin-right:15px}
.social-links a:hover{background-color:var(--primary-color);color:var(--white-color)}
.social-links a:hover i{color: var(--white-color);}
.social-links i{vertical-align:middle;color:var(--black-color)}
.footer-btm .footer-links a{font-size:12px;transition:color .2s;color:var(--white-color)}
small{font-size:12px}
.footer-btm .footer-links a:hover{color:var(--primary-color)}
#productModal .modal-content{border-radius:14px;padding:14px}
#productModal .btn-close{border:1px solid #000;border-radius:100%;font-size:7px;padding:4px}
.preview-image{border:1px solid var(--gray2);padding:11px;border-radius:0}
.materials{background:url('../img/cont-bg.png') no-repeat;background-position:center;background-size:contain;width:100%;height:100%}
.product-main-img{width:100%;height:340px;object-fit:contain}
.vertical-carousel-wrapper{width:80px;height:360px;display:flex;flex-direction:column;align-items:center;position:relative;margin:0 20px}
.arrow-btn{background:0 0;border:none;font-size:1.5rem;color:#333;cursor:pointer;z-index:2;position:absolute}
.arrow-btn:disabled{color:#ccc;cursor:not-allowed}
button#thumbUp{top:0}
button#thumbDown{bottom:0}
.thumbs-viewport{height:100%;overflow:hidden;position:relative;width:100%}
.thumbs-inner{display:flex;flex-direction:column;transition:transform .3s ease-in-out}
.thumbs-inner img{margin-bottom:11px;cursor:pointer;width:80px;height:80px;object-fit:cover;border:1px solid var(--gray2);padding:8px}
.thumbs-inner img:last-child{margin-bottom: 0;}
.thumb-img.active{border:1px solid var(--primary-color)}
#productModal p{font-size:14px;color:#6c6666}
#productModal strong{color:var(--black-color)}

.inputfild-box{border:1px solid #b8b8b8;border-radius:12px;position:relative}
.inputfild-box label{font-size:12px;position:absolute;top:-14px;left:5px;background:var(--white-color);padding: 3px 4px;
    line-height: normal;border-radius: 4px;}
.inputfild-box .form-control,.inputfild-box .form-select{border-radius:12px;height:40px;font-size:14px;line-height:normal;border:0}
.red-btn{background:var(--primary-color);border-color:var(--primary-color)}
.red-btn.btn-primary:after,.red-btn.btn-primary:before{border-color:var(--primary-color)}
.red-btn:hover{background:var(--primary-color);border-color:var(--primary-color)}
.btn-secondary{background:var(--gray2);font-size:14px;color:var(--white-color);position:relative;padding:9px 23px!important;border-radius:0;border:0}
.btn-secondary:before{content:"";border-left:2px solid var(--gray2);position:absolute;left:-6px;width:4px;height:100%}
.btn-secondary:after{content:"";border-bottom:2px solid var(--gray2);position:absolute;left:-9px;width:100%;height:2px;bottom:-6px}
.btn-check:checked+.btn-secondary,.btn-secondary.active,.btn-secondary.show,.btn-secondary:first-child:active,:not(.btn-check)+.btn-secondary:active{background:var(--gray2)!important;border-color:var(--gray2)!important}
.btn-check:checked+.btn,.btn.active,.btn.show,.btn:first-child:active,:not(.btn-check)+.btn:active{background:var(--primary-color);border-color:var(--primary-color)}
.inputfild-box sup{color:red}
.prod-box{width:350px;height:350px;border-radius:100%}
.prod-box img {border-radius: 100%;object-fit: cover;}
.design-step{margin:0;padding:0;list-style:none}
.design-step li{color:#1a1a1a;font-weight:500;font-size:12px;display:flex;align-items:center;margin-bottom:53px}
.btn.btn-secondary {
    color: var(--white-color);
}
/* .product-col {min-height: 464px;background: url('../img/ajax-loader.gif') no-repeat;background-position: center; background-size:100px;} */
.design-step li:nth-child(2n){margin-left:62px}
.design-step li:nth-child(3n){margin-left:96px}
.design-step li:nth-child(4n){margin-left:62px}
.design-step li:hover .cicle-t{border-color:var(--primary-color)}
.design-step li:hover .cicle-t:before{background-color:var(--primary-color)}
.cicle-t{width:30px;height:30px;border:1px solid #707070;border-radius:100%;display:inline-flex;align-items:center;justify-content:center;position:relative}
.design-step li:hover .tepr:before{opacity:1}
.design-step li:hover .tepr:after{opacity:1}
.cicle-t:before{content:'';width:3px;height:3px;background-color:var(--black-color);border-radius:100%;position:absolute;left:0;bottom:0;right:0;margin:auto;top:2px}
.tepr{position:relative;padding-right:4px}
.tepr:after{content:'';background:var(--primary-color);position:absolute;right:0;top:-3px;width:1px;height:24px;display:inline-flex;opacity:0;transition:all ease .5s 0s}
.tepr:before{content:'';background:var(--primary-color);position:absolute;right:-3px;top:0;width:100%;height:1px;display:inline-flex;opacity:0;transition:all ease .5s 0s}
.prod-box-mid{background:#f0f7ff 0 0 no-repeat padding-box;border:4px solid #1f73d2;width:100%;height:180px;color:#707070;text-transform:capitalize;opacity:.6;font-size:18px;font-weight:600;max-width:1035px}
.hori-mas-box{max-width:1035px;width:100%}
.prod-box-mid span{background:#6cb0fe 0 0 no-repeat padding-box;border:1px solid #1f73d2;height:30px;width:30px;position:absolute;border-radius:100%}
.prod-box-mid .left-ci-01{left:-13px;top:-13px}
.prod-box-mid .left-ci-02{left:-13px;bottom:-13px}
.prod-box-mid .right-ci-01{right:-13px;top:-13px}
.prod-box-mid .right-ci-02{right:-13px;bottom:-13px}
.inpnumber{position:relative}
.inpnumber:after{content:'';position:absolute;left:0;height:60px;width:9px;background:url('../img/arrows-d.png') no-repeat;background-size:contain;background-position:center;top:100%;right:0;margin:auto}
.inpnumber:before{content:'';position:absolute;left:0;height:60px;width:9px;background:url('../img/arrows-t.png') no-repeat;background-size:contain;background-position:center;bottom:100%;right:0;margin:auto}
.inpnumber .form-control{border:0;border-radius:10px;height:44px;width:60px;text-align:center;font-size:14px}
.hornumber{position:relative}
.hornumber .form-control{border:1px solid var(--gray2);border-radius:10px;height:44px;width:250px;text-align:center;font-size:14px}
.hornumber:after{content:'';position:absolute;left:auto;height:35px;width:282px;background:url('../img/arrows-l.png') no-repeat;background-size:contain;background-position:center;top:0;right:100%;margin:auto;bottom:0;margin-right:65px}
.hornumber:before{content:'';position:absolute;left:100%;height:35px;width:282px;background:url('../img/arrows-r.png') no-repeat;background-size:contain;background-position:center;bottom:0;right:auto;margin:auto;top:0;margin-left:65px}
.left-ci-01.dotline::after{content:'';border-left:1px dashed #bcb9b9;width:1px;height:89px;position:absolute;left:0;bottom:30px;right:0;margin:auto}
.left-ci-02.dotline::after{content:'';border-left:1px dashed #bcb9b9;width:1px;height:89px;position:absolute;left:0;top:30px;right:0;margin:auto}
.right-ci-01.dotline::before{content:'';border-top:1px dashed #bcb9b9;width:89px;height:1px;position:absolute;left:30px;bottom:15px;margin:auto}
.right-ci-01.dotline::after{content:'';border-left:1px dashed #bcb9b9;width:1px;height:89px;position:absolute;left:0;bottom:30px;right:0;margin:auto}
.right-ci-02.dotline::before{content:'';border-top:1px dashed #bcb9b9;width:89px;height:1px;position:absolute;left:30px;top:16px;right:0;margin:auto}
.right-ci-02.dotline::after{content:'';border-left:1px dashed #bcb9b9;width:1px;height:89px;position:absolute;left:0;top:30px;right:0;margin:auto}
.Blad-01 .right-ci-02.dotline.btmdot::after{display:none}
.Blad-01 .right-ci-01.dotline.topdot::after{display:none}
.Blad-02 .right-ci-01.dotline::after{display:none}
.cursor{cursor:pointer}
input::placeholder {color: #dbdada !important;}
.btn-normal{border-radius:12px;background:var(--primary-color);border-color:var(--primary-color)}
.btn-normal.btn:focus-visible{background:var(--primary-color);border-color:var(--primary-color)}
.btn.btn-normal:after,.btn.btn-normal:before{display:none}
.pr-s-img{border:1px solid var(--gray2);border-radius:0;overflow:hidden}
.edges-check-box{background:#f0f7ff;border:2px solid #000;height:190px}
.edges-check-box{font-size:18px;color:#707070;opacity:.6;text-transform:capitalize;font-weight:700}
.border-btm-green{border-bottom:8px solid #009414}
.border-top-green{border-top:8px solid #009414}
.edges-check-box span{position:absolute;border:1px solid #000;height:32px;width:32px;border-radius:100%;background:var(--white-color);display:flex;margin:auto}
.edges-check-box .right-11-cir{right:-17px;top:11px;bottom:0}
.edges-check-box .left-11-cir{left:-17px;top:0;bottom:0}
.edges-check-box .top-11-cir{top:-16px;left:0;right:0}
.edges-check-box .bottom-11-cir{bottom:-16px;left:0;right:0}

.edge-finishing-tab .tab-content{display:none}
.edge-finishing-tab .tab-content.active{display:block}
.verticale-lign{border:1px solid #c7c7c7;height:100%;margin:0 18px 0 22px}
.titleoverlay div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.product-col:hover .titleoverlay div{white-space:normal;overflow:visible;text-overflow:unset}
.headinfo{font-size:16px;font-weight:400;color:#707070;text-transform:capitalize;transition:all .3s ease}
.headinfo:hover .cicle-t{border-color:var(--primary-color)}
.headinfo:hover .cicle-t:before{background-color:var(--primary-color)}
.headinfo:hover{color:var(--primary-color)}
.result-box{border:1px solid #c1c1c1;border-radius:11px;padding:30px;background:var(--white-color)}
.result-head h3{border-bottom:1px solid #ccc;padding-bottom:20px;position:relative;font-weight:400}
.result-head h3 span{background:var(--primary-color);height:2px;width:20%;position:absolute;left:0;bottom:-1px;display:block;right:0}
#customForm .error{font-size:12px}
#customForm .error{
  position: absolute;
  top:100%;
}
@media (max-width:719px){
.banner-title{
  font-size: 53px;
    line-height: 55px;
}
}