: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(--black-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;}
.text-primary { color: var(--primary-color) !important;}
.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:60px;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;font-weight: 700;left: -10px;color: transparent;display: flex;align-items: center;justify-content: center;font-size: 30px;letter-spacing: 0;text-transform: uppercase;opacity: 0.75;-webkit-text-stroke: 1px #bababa;}
.invalid-feedback{padding-left: 8px; margin-top: 0;}
.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}
.measurement-cl .text-center.w-100 {max-width: fit-content;}
.text-center.position-relative .mt-2.fw-bold {text-align: start;}
.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}
.height-input, .width-input {border-radius: 8px;height: 40px;font-size: 14px;line-height: normal;border: 1px solid lightgray;padding: 10px;}
.layout-item.d-flex.align-items-center.justify-content-between.gap-3 {flex-direction: column;align-items: start !important;justify-content: start !important;}
.layout-preview{border-radius: 0 !important;}
.layout-block{max-width: fit-content !important;}
.grid {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 12px;
}
.dimension-group {
    flex-wrap: wrap;
    align-items: center;
}
.dimension-field {
    max-width: fit-content;
    text-align: center;
    flex: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.blade-image-wrapper {
    width: 100%;
    max-width: 380px;
    margin-bottom: 0 !important;
    text-align: start !important;
}
.blade-image-wrapper img.blade-image {
    max-width: fit-content;
    width: 100%;
}
input.dimension-input {
    max-width: 90px;
}
.dimension-field.width {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    max-width: 100% !important;
    margin-right: 125px;
}
.width::after {
    content: '';
    display: block;
    height: 17px;
    width: 95px;
    margin-top: 21px;
    background: url('../img/arrows-r.png') no-repeat;
    background-size: contain;
    background-position: center;
}

.width::before {
    content: '';
    position: relative;
    display: block;
    height: 17px;
    width: 95px;
    margin-top: 21px;
    background: url('../img/arrows-l.png') no-repeat;
    background-size: contain;
    background-position: center;
}

.height::after {
    content: '';
    display: block;
    height: 50px;
    width: 10px;
    background: url('../img/arrows-d.png') no-repeat;
    background-size: contain;
    background-position: center;
}

.height::before {
    content: '';
    position: relative;
    display: block;
    height: 50px;
    width: 10px;
    background: url('../img/arrows-t.png') no-repeat;
    background-size: contain;
    background-position: center;
}
.pick-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 30px;
}
.select-edges {
    display: flex;
    flex-direction: column;
    height: fit-content;
    margin: auto 0;
}
.input-content {
    display: flex;
    gap: 10px;
    flex-direction: column;
    margin-right: 10px;
}
.input-content input {
    max-width: 125px;
}

@media screen and (max-width: 1200px) {
    .grid, .pick-item {
        grid-template-columns: 1fr; 
    }
    .dimension-field.width {
        justify-content: start;
    }
}
.box-inline {display: flex;gap: 20px;margin-right: auto;}
.result-gride figure{max-width: 230px;}
.result-gride figure img{width: 100%;}
.fs-22{font-size:16px;}
.result-box .btn.btn-dark.btn-primary{opacity: 1;}
.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:305px;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)}
.mx-365{max-width: 365px;}
.ex-height{height:40px;}
.mark-text { position: relative; text-transform: uppercase; max-width: fit-content; padding: 5px;}
.mark-text::after {content: '';background: var(--primary-color);position: absolute;left: 0;top: -3px;width: 1px;height: 24px;display: inline-flex;transition: all ease .5s 0s;}
.mark-text::before {content: '';background: var(--primary-color);position: absolute;left: -3px;top: 0;width: 100%;height: 1px;display: inline-flex;transition: all ease .5s 0s;}
.inputfild-box{border:1px solid #b8b8b8;border-radius:8px;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:8px;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);}
.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: fit-content;width:100%; position: relative;}
.hori-mas-box:after{content:'';display: block;height: 17px;width: 95px;background:url('../img/arrows-r.png') no-repeat;background-size:contain;background-position:center;}
.hori-mas-box:before{content:'';position: relative;display: block;height: 17px;width: 95px;background:url('../img/arrows-l.png') no-repeat;background-size:contain;background-position:center;}
.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;display: flex;justify-content: start;align-items: center;flex-direction: column;}
.inpnumber:after{content:'';display: block;height: 140px;width: 17px;background:url('../img/arrows-d.png') no-repeat;background-size:contain;background-position:center;}
.inpnumber:before{content:'';position: relative;display: block;height: 140px;width: 17px;background:url('../img/arrows-t.png') no-repeat;background-size:contain;background-position:center;}
.inpnumber .form-control{border:0;border-radius:10px;height:44px;width:60px;text-align:center;font-size:14px}
.hornumber{position:relative;display: flex;align-items: center;justify-content: center;}
.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: relative;display: block;height:35px;width: 150px;background:url('../img/arrows-l.png') no-repeat;background-size:contain;background-position:center;transform: rotateY(180deg);}
.hornumber:before{content:'';position: relative;display: block;height:35px;width: 150px;background:url('../img/arrows-r.png') no-repeat;background-size:contain;background-position:center;transform: rotateY(180deg);}
.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{font-size:18px;color:#707070;opacity:.6;text-transform:capitalize;font-weight:700}
.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:0px;top:0px;bottom:0;transform: none;}
.edges-check-box .left-11-cir{left:0px;top:0;bottom:0;transform: none;}
.edges-check-box .top-11-cir{top:0px;left:0;right:0;transform: none;}
.edges-check-box .bottom-11-cir{bottom:0px;left:0;right:0;transform: none;}
.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%;}
.thank-you-section {padding: 62px 0;height: 780px;max-height: 100%;}
.thank-you-section .info-text {max-width: 580px;margin: 0 auto;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.thank-you-text {display: flex;flex-direction: column;justify-content: center;align-items: center;max-width: 252px;margin: 0 auto 62px;}
.thank-you-text img {max-width: 100%;}
.info-text p {text-align: center;margin-bottom: 36px;font-size: 22px;line-height: 40px;font-weight: 300;}
.info-text .btn-primary {font-size: 17px;line-height: 1;padding: 20px 52px !important;}
.step-flow{overflow-x: auto;}.social-links{margin-top:30px;margin-bottom:20px;}.edges-check-box .right-11-cir,.edges-check-box .left-11-cir{transform:none;}
.measurement-cl .layout-item {max-width: fit-content;}.measurement-cl {display: grid;grid-template-columns: 1fr 1fr;gap: 30px;}.text-center.position-relative {max-height: fit-content;}.product-slider .product-card .button-components > a {display: none;}.dimension-box {display: flex;gap: 20px;max-width: 100%;}.dimension-box input {max-width: 100px;}.height-input, .width-input {max-width: 100px;}.result-head { margin-top: 20px;}
@media screen and (max-width: 767px) { .thank-you-section { max-height: 750px; } .result-gride.d-flex.align-items-center {flex-direction: column;}.hori-mas-box:before, .hori-mas-box:after, .inpnumber:before, .inpnumber:after {display: none;}.layout-item.d-flex.align-items-center.justify-content-between.gap-3{align-items: center;}.box-inline{flex-direction:column;}.hori-mas-box{margin-inline: auto}.prod-box-bottom .mt-2.fw-bold{margin-inline:auto;}.steps {margin: 0;min-width: 720px;}.footer-btm .d-flex {flex-direction: column;}.footer-links {display: flex;flex-direction: column;text-align: center;}.measurement-cl{grid-template-columns: 1fr;}.edges-check-box{justify-content:center}.verticale-lign {margin: 0 10px 0 10px;}.result-gride > div {flex-direction: column;padding-right: 0 !important;}.fs-22.d-flex.justify-content-between.mt-3:has(strong) {flex-direction: column;align-items: stretch;width: 100%;}}
@media (max-width:719px) {.banner-title{font-size: 53px;line-height: 55px;}.result-gride{flex-direction: column;}}
.hidden{ display: none !important;}
img.card-img-top{aspect-ratio: 1;}
.material-card .card-img-top { width: 100%;}
.card-body.text-center.p-0 { position: absolute; width: 100%; display: block; bottom: 0; height: 100%;}
.text-center.mb-4.w-100 { max-width: 400px;}
.prod-box-bottom.d-flex.align-items-center.justify-content-between.gap-5 { justify-content: start !important; align-items: start !important;}
.prod-box-bottom .mt-2.fw-bold { position: relative; text-align: center; width: 100%; bottom: 0; max-width: fit-content;}
.border-btm-green .mt-2.fw-bold { display: block; position: absolute; left: 0; bottom: -30px;}