
.captchaFeedback{color:red!important; top:60px!important;}
.invalid-tooltip{top:60px!important;}
.main_sec {padding-block: 50px; background-color: var(--_c-light); --_c-light: #f2f2f2; --_fs-2xl: calc(var(--fs-2xl) + 16px);}
.main_sec .title {text-align: center; margin-bottom: 20px;}
.main_sec .title > :first-child {font-size: var(--_fs-2xl); font-weight: 700;}
.main_sec ul {width: fit-content; display: flex; align-items: center; gap: 12px; margin-inline: auto;}
.main_sec li {line-height: 1;}
.main_sec li:first-of-type {position: relative;}
.main_sec li:first-of-type::before {position: absolute; inset: 0 -6px 0 auto; width: 1px; height: 100%; background-color: #000; content: '';}
.main_sec li a {font-weight: 600; line-height: 1;}
.main_sec li a:hover {color: var(--c-primary);}

.price {padding-block: 40px;}
.price .wrapper {display: grid; grid-template-columns: repeat(2 ,1fr); gap: 50px;}
.price .instant :first-child {font-size:32px; line-height: 48px; font-weight: 700; color: #000; margin-bottom: 30px;}
.price .instant :nth-child(2) {font-size: 16px; color: #2e2e2e; margin-bottom: 20px;}
.price .order {display: flex; gap: 50px; align-items: center; margin-bottom: 30px;}
.price .order div :first-child {font-size:24px; font-weight: 700; color: #000; margin-bottom: 10px;}
.price .order div :nth-child(2) {font-size: 16px; color: #252921;}


.quote {padding-top: 45px; margin-bottom: 50px;  background: no-repeat center / cover url('https://www.kolaxoprint.pk/wp-content/themes/KolaxoPrint/assets_new/images/form%20background.webp');}
.quote .wrapper {display: grid; grid-template-columns: repeat(2 , 1fr); gap: 40px; margin-bottom: 30px;}
.quote .title :first-child {font-size:32px; line-height: 48px; font-weight: 700; color: #000; margin-bottom: 30px;}
.quote .beat {display: flex; gap: 20px;}
.quote .beat > div {display: flex; gap: 16px;}
.quote .beat > div > :first-child {display: block; font-size: 50px; font-weight: 700; color: #f1582d;}
.quote .custom :first-child {font-size: 20px; color: #212529;}
.quote .request {background-color: #fff; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }
.quote .request-title {background-color: #f1582d; text-align: center; padding-block: 16px; border-radius: 5px 5px 0 0 ;}
.quote .request-title :nth-child(2) {font-size:24px; color: #fff; font-weight: 700; padding-left: 25px;}
.quote .form {display: grid; grid-template-columns: 80% 1fr;}
.quote .form form {padding: 30px 60px 30px;}
.quote .step {position: relative; padding: 30px 15px 30px;}
.quote .step::before {position: absolute; top: 40px; left: -20px; width: 3px; height: 305px; border-left: 5px solid #f4f4f4; content: '';}
.quote .step :first-child {font-size: 22px; color: #abaaaa; margin-bottom: 20px; font-weight: 700; display: block;}
.quote .step p {font-size: 16px; color: #abaaaa; margin-bottom: 20px;}

.rates {padding-block: 50px;}
.rates .title {background-color: #f2f2f2; padding: 40px; max-width: 636px; margin-bottom: 30px;}
.rates .title :first-child {font-size:32px; line-height: 48px; font-weight: 700; color: #000; text-decoration: underline;}
.rates .heading {margin-bottom: 30px;}
.rates .heading p {font-size: 20px; color: #757575; margin-bottom: 30px;}
.rates .wrapper {display: grid; grid-template-columns: 60% 1fr; gap: 50px;}
.rates .content p {font-size: 16px; color: #757575; margin-bottom: 30px;}
.rates ul li {position: relative; font-size: 16px; color: #212529; margin-bottom: 25px; font-weight: 700; padding-left: 35px;}
.rates ul li::before {position: absolute; top: 3px; left: 0; width: 20px; height: 20px; background: no-repeat center / cover url('https://www.kolaxoprint.pk/wp-content/themes/KolaxoPrint/assets_new/images/quote/plus_icon.svg'); content: '';}

 @media only screen and (max-width: 991px){
.head .title :first-child {font-size:28px; line-height: 36px;}
.price .wrapper {grid-template-columns:1fr; gap: 20px;}
.price .instant :first-child {font-size:28px; line-height: 36px;  margin-bottom: 20px;}
.price .instant :nth-child(2) {margin-bottom: 16px;}
.price .order {margin-bottom: 20px;}
.price .order div :first-child {font-size:20px;}
.quote .wrapper {grid-template-columns: 1fr; gap: 10px;}
.quote .title :first-child {font-size:28px; line-height: 36px; margin-bottom: 20px;}
.quote .beat > div > :first-child { font-size: 40px;}
.quote .form {display: grid; grid-template-columns: 1fr;}
.quote .form form {padding: 15px 15px 30px;}
.quote .step {padding: 10px 15px 30px;}
.rates .title {padding: 30px; margin-bottom: 20px;}
.rates .title :first-child {font-size:28px; line-height: 36px;}
.rates .heading {margin-bottom: 20px;}
.rates .heading p {font-size: 18px;  margin-bottom: 20px;}
.rates .wrapper { gap: 30px;}
.rates .content p {margin-bottom: 20px;}
.rates ul li {margin-bottom: 18px; font-weight: 700;}
.quote {max-height:unset ;}	 
.quote {height:auto;}	 
.rates{margin-top:0; padding-block:15px; }

}

@media only screen and (max-width: 767px) {

.rates .wrapper { grid-template-columns:1fr; gap: 15px;}

}

@media only screen and (max-width: 575px){
.head .title :first-child {font-size:22px; line-height: 30px;}
.price .order { gap: 20px; align-items: center; margin-bottom: 30px;}
.price .instant :first-child {font-size:22px; line-height: 30px;  margin-bottom: 14px;}
.price .instant :nth-child(2) {margin-bottom: 10px;}
.price .order div :first-child {font-size:16px;}
.price .order div :nth-child(2) {font-size: 14px;}
.quote .title :first-child {font-size:22px; line-height: 30px; margin-bottom: 16px;}
.quote .beat > div > :first-child { font-size: 30px;}
.quote .beat {flex-direction: column;}
.rates .title {padding: 36px; margin-bottom: 16px;}
.rates .title :first-child {font-size:22px; line-height: 30px;}
.rates .heading {margin-bottom: 16px;}
.rates .heading p {font-size: 18px;  margin-bottom: 16px;}
.rates .wrapper { gap: 16px;}
.rates .content p {margin-bottom: 16px;}
}
