/*  &&& banner_slide &&&  */
.banner_slider {position: relative;overflow: hidden;width: 100%;height: auto;text-align:center}
.banner_slide {display: none;width: 100%;}
.banner_slide picture img {width: 100%;}
.banner_slide.active { display: block; }
.banner_slider button { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0); color: white; font-size: 2rem; padding: 10px; border: none; cursor: pointer; z-index: 10; }
.banner_slider button.prev {left: 10px;}
.banner_slider button.next {right: 10px;}
.banner_slider button:hover { background-color: rgba(0, 0, 0, 0.8);}

@media only screen and (min-width: 1920px) {
	.banner_slide picture img {max-height: 629px; object-fit: cover;}
}

/*  &&& th_work_sec &&&  */
.th_work_sec { padding-block: 50px; text-align: -webkit-center; }
.work_head h1 { font-size: 32px; color: #282828; margin-bottom: 20px; font-weight:800; }
.th_work_sec .work_head  p { color: #212529; width: 100%; max-height:76px; padding-inline:15px;  }
.work_list { display: grid; gap: 20px; grid-template-columns: repeat(4 ,1fr);}
.th_box { margin-top: 50px; display: flex; flex-direction: column; gap: 15px; place-items: center; }
.th_box h3 { font-size: 18px; color: #010101; margin: 20px 0; font-family: 'Bold_700'; }
.th_box p { color: #747474; font-size: 15px; }

/*  &&& branding &&&  */
.branding {padding-block: 50px;  background: no-repeat center / cover url('https://www.kolaxoprint.pk/wp-content/themes/KolaxoPrint/assets/images/bg-3.webp');}
.branding .head  {margin-bottom: 50px; text-align: center; max-width:1180px; margin-inline:auto; }
.branding .head  > :first-child {font-size: 32px; color:#212529; font-weight: 800; margin-bottom: 30px;}
.branding .head  p {font-size: 16px; color: #2e2e2e; font-weight: 400;max-height:76px; padding-inline:15px;} 
.branding .wrapper {display: grid; grid-template-columns: repeat(3 ,1fr); gap: 30px;}
.branding .card {padding: 33px 30px; border: 1px solid #e4e3e2;}
.branding .card  img {margin-bottom: 22px;}
.branding .card > :nth-child(2) {display: block; font-size: 20px; color: #212529; margin-bottom: 14px; font-weight:800; }
.branding .card p {font-size: 16px; color: #747474; margin-bottom: 14px;}
.branding .card ul li {position: relative; font-size: 14px; color: #747474; padding-left: 25px; margin-bottom: 10px; line-height:1.4; }
.branding .card  li::before {position: absolute; top:3px; bottom:0; margin-block:auto;  left: 0; width: 15px; height: 15px; background: no-repeat center / cover url('https://www.kolaxoprint.pk/wp-content/themes/KolaxoPrint/assets_new/images/tick.svg'); content: '';}

/*  &&& boxes &&&  */
.boxes {padding-block: 70px; background: no-repeat center / cover url('https://www.kolaxoprint.pk/wp-content/themes/KolaxoPrint/assets/images/formback.webp');}
.boxes .wrapper {display: grid; grid-template-columns: repeat(2 ,1fr); gap: 40px; align-items:center;}
.boxes .content > :first-child {font-size: 32px; color:#212529; font-weight: 800; margin-bottom: 30px;}
.boxes .content p {font-size: 16px; color: #2e2e2e; font-weight: 400; margin-bottom: 16px;} 
.boxes .quote .head {margin-bottom: 20px; text-align: center;}
.boxes .quote {padding: 35px 25px; background-color:#f1582d; box-shadow: 0 2px 10px -3px rgba(0, 0, 0, 0.5); }
.boxes .quote .head > :first-child {color: #000; font-size: 16px; display: block; margin-bottom: 14px;}
.boxes .quote .head > :nth-child(2) {font-size: 44px; color: #fff;}
.boxes .content ul {display: flex; flex-wrap: wrap;}
.boxes .content ul li {position: relative; width: 50%; font-size: 16px; color: #212529; padding-left: 25px; margin-bottom: 14px;
line-height:1.4;}
.boxes .content ul li::before{position: absolute;  top:3px; bottom:0; margin-block:0; left: 0; width: 15px; height: 15px; background: no-repeat center / cover url('https://www.kolaxoprint.pk/wp-content/themes/KolaxoPrint/assets/images/tick1.svg'); content: '';}

/*  &&& PDF &&&  */
.pdf {padding-block: 50px 30px;}
.pdf .wrapper {display: grid; grid-template-columns: repeat(3 , 1fr); gap: 30px;}
.pdf .head {margin-bottom: 50px; text-align: center;}
.pdf .head :first-child {font-size: 32px; color:#212529; font-weight: 800; }
.pdf .content {display: flex; gap: 20px; align-items: center;}
.pdf .content :first-child {display: block; font-size: 22px; color: #cb421b;}
.pdf .content :nth-child(2) {display: block; font-size: 26px; color: #383838;}

/*  &&& printend &&&  */
.product {padding-block: 50px; overflow:hidden;}
.product .head {margin-bottom: 30px; text-align: center;  max-width:1180px; margin-inline:auto; }
.product .head :first-child {font-size: 32px; font-weight: 800; color: #282828; margin-bottom: 30px;}
.product .head  p {font-size: 16px; color: #747474; height:75px; margin-inline:auto; padding-inline:15px;}
.product .wrapper {display: grid; grid-template-columns: repeat(3 ,1fr); gap: 20px;}
.product .card {padding: 15px; background-color: #fff; margin:20px 1px;  }
.product .card:hover{box-shadow:0 0 10px rgba(0,0,0,0.3);}
.product .card img {margin-bottom: 15px; background-color: #fbfbfb; padding: 20px;}
.product .card > :nth-child(2) {display: block; font-size: 16px; text-align: center; color: #747474; margin-bottom: 15px;}
.product .card p {color: #747474; margin-bottom: 15px;}
.product .card ul {margin-bottom: 16px;}
.product .card li {position: relative; font-size: 14px; color: #747474; margin-bottom: 10px; padding-left: 25px; line-height:1.4;}
.product .card li::before{position: absolute;  top:4px; bottom:0; margin-block:auto; left: 0; width: 12px; height: 12px; background: no-repeat center / cover url('https://www.kolaxoprint.pk/wp-content/themes/KolaxoPrint/assets_new/images/tick-1.svg'); content: '';}
.product .card div {display: flex; justify-content: end;}
.product .card div :first-child {color: #cb421b; font-size: 14px; font-weight: 800;}

/*  &&& ___Printing &&&  */
.print {padding-block: 50px;}
.print .wrapper {display: grid; grid-template-columns: repeat(2 ,1fr); gap: 30px;}
.print .content :first-child {font-size: 32px; font-weight: 800; color: #282828; margin-bottom: 40px;}
.print .content p {font-size: 16px; color: #747474; margin-bottom: 16px;}

/*  &&& Unique &&&  */
.unique {padding-block: 50px;}
.unique .head {margin-bottom: 70px; text-align: center;}
.unique .head :first-child {font-size: 32px; font-weight: 800; color:#1c1c1c; margin-bottom: 20px;}
.unique .head p {font-size: 16px; color: #2e2e2e; font-weight: 400;}
.unique .wrapper {display: grid; grid-template-columns: repeat(6 ,1fr); gap: 20px;}
.unique .box  {display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 10px; text-align: center;}
.unique .wrapper .box:nth-child(odd) {background-color: #fbfbfb;}
.unique .box img {margin-bottom: 30px;}
.unique .box :nth-child(2) {display: block; color: #1c1c1c; font-weight:600;}

/*  &&& success &&&  */
.success {padding-block: 50px;}
.success .wrapper {display: grid; grid-template-columns: repeat(2 ,1fr); gap: 40px; align-items:center;}
.success .content :first-child {font-size: 32px; font-weight: 700; color: #282828; margin-bottom: 40px;}
.success .content p {font-size: 14px; color: #747474; margin-bottom: 12px;}
.success .content a { background-color: #d34017; color: #fff; padding: 10px 20px; border-radius: 5px; text-transform: uppercase; font-weight:700; }
.success .img {display: flex; justify-content: end;}

/*  &&& order &&&  */
.order {padding-block: 50px;}
.order .wrapper {display: grid; grid-template-columns: repeat(4 ,1fr); background-color: #fbfbfb;}
.order .card {padding: 30px 10px; text-align: center; border-right: 1px solid #9b9c99;}
.order .card :nth-child(2) {font-size: 28px; color: #282828; font-weight: 800; display: block; margin-bottom: 12px; }
.order .card :last-child {font-size: 16px; color: #282828; font-weight: 400; display: block;}

/*  &&& inspire &&&  */
.inspire {padding-block: 50px;}
.inspire .head {margin-bottom: 40px; text-align: center;}
.inspire .head :first-child {color: #282828; font-size: 32px; font-weight: 800; margin-bottom: 22px;}
.inspire .head p {font-size: 14px; color: #747474;}
.inspire .wrapper {display: grid; grid-template-columns: repeat(4,1fr); gap: 20px;}
.inspire .card {padding: 20px; box-shadow:2px 2px 10px 2px rgb(235 235 235 / 70%);}
.inspire .card > div {display: flex; align-items: center; gap: 30px; margin-bottom: 14px;}
.inspire .content :first-child {display: block; font-size: 20px; color: #0c0c0c; font-weight: 700;}
.inspire .content :last-child {display: block; color:#686868; font-size: 18px; }
.inspire .card p {font-size: 14px; color: #747474;}

/*  &&& gallery &&&  */
.th_gallery_btn {display: flex;justify-content: center;margin-top: 40px;}
.th_gallery_btn a { background: #d34017; color: #fff; padding: 10px 15px; font-size: 15px; font-weight:600; text-decoration:none;}
.sec-gallery {padding-block: 60px;text-align: -webkit-center;}
.sec-gallery .wrapper {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.sec-gallery .wrapper img { border-radius: 8px; width:100% }
.sec-gallery .wrapper > div:nth-child(1) { display: flex; flex-direction: column;  gap: 10px;text-align:left;  }
.sec-gallery .wrapper > div:nth-child(1) img {height: 290px; object-fit:cover; }
.sec-gallery .wrapper > div:nth-child(1) :first-child { font-size: 34px; font-weight:700; }
.sec-gallery .wrapper > div:nth-child(1) p { font-size: 14px; line-height: 1.6;color:#747474}
.sec-gallery .wrapper > div:nth-of-type(2) img {height: 100%; object-fit: cover;}
.sec-gallery .wrapper > div:nth-of-type(3) { display: flex; flex-direction: column; gap: 8px;  } 
.sec-gallery .wrapper > div:nth-of-type(3) img { height: 50%; object-fit: cover; }
.sec-gallery .wrapper > div:nth-of-type(4) img { height: 100%; object-fit: cover;}

/*  &&& Feedback &&&  */

.feedback {padding-block: 50px;}
.feedback .bg-image {background: url('https://www.kolaxoprint.pk/wp-content/themes/KolaxoPrint/assets_new/images/testimonial.webp') no-repeat center / cover; padding: 44px 30px; 
border-radius: 0 0 50px 0;}
.feedback .wrapper {display: grid; grid-template-columns: repeat(2 ,1fr); gap: 50px; align-items:center; }
.feedback .content > :first-child {display:block; font-size: 22px; font-weight:700; color: #cd431c; margin-bottom:10px}
.feedback .content > :nth-child(2) {display:block; font-size: 32px; font-weight:700; color: #212529; margin-bottom:30px}
.feedback .content p {width: 90%; font-size: 16px; color: #212529; margin-bottom: 30px;}
.feedback .content a { background-color: #d34017; color: #fff; padding: 10px 20px; border-radius: 5px; text-transform: uppercase;}
.feedback .testimonial {width:100%;background:#fff; margin:10px 0;overflow:hidden;border-radius: 0 0px 30px 0; }
.feedback .card {position:relative; padding:35px 50px 0 50px; overflow:hidden}
.feedback .card::before {position:absolute;top:-17%;right:-12%;background:#f1582d;width:170px;height:145px; border-radius:100%;content: '';background-image:url('https://www.kolaxoprint.pk/wp-content/themes/KolaxoPrint/assets/images/quote_icon.webp');background-repeat:no-repeat; background-position: 35px 70px;transition:0.3s;}
.feedback .card > :first-child {font-size: 22px; color: #0c0c0c; font-weight: 800; display: block; margin-bottom: 15px;}
.feedback .card :nth-child(2) {font-size: 14px; color: #535353; font-weight: 600; display: block; margin-bottom: 25px;}
.feedback .card p {font-size: 16px; color: #535353; margin-bottom: 50px;}
.feedback .card ul {display: flex; width: 100%; justify-content: center; gap: 7px; align-items:baseline;}


/*  &&& Media Query &&&  */

@media (max-width: 991px) { 
button.prev {top:150px; left:10px;}
button.next {top:150px; right:10px;}
.work_list { grid-template-columns: repeat(2, 1fr); } 
.branding {padding-block: 40px;}
.branding .head  {margin-bottom: 30px;}
.branding .wrapper {display: grid; grid-template-columns: repeat(2 ,1fr); gap: 30px;}
.branding .head  > :first-child {font-size: 28px;}
.boxes .wrapper {grid-template-columns: 1fr;} 
.boxes .content > :first-child {font-size: 28px;margin-bottom: 20px;}
.pdf {padding-block: 40px;}
.pdf .head :first-child {font-size: 28px;}
.product .head :first-child {font-size: 28px;}
.print .wrapper {grid-template-columns: 1fr; gap: 20px; place-items: center;}
.print .content :first-child {font-size: 28px;margin-bottom: 30px;}
.print .content p {margin-bottom: 12px;}
.unique {padding-block: 40px;}
.unique .head :first-child {font-size: 28px; margin-bottom: 10px;}
.unique .wrapper {grid-template-columns: repeat(3 ,1fr);}
.success .content :first-child {font-size: 28px; margin-bottom: 30px;}
.success .wrapper {display: grid; grid-template-columns:1fr; gap: 20px; place-items: center;}
.order .wrapper { grid-template-columns: repeat(2 ,1fr);}
.order .card :nth-child(2) {font-size: 24px;}
.inspire {padding-block: 40px;}
.inspire .head {margin-bottom: 30px; }
.inspire .head :first-child {font-size: 28px; margin-bottom: 18px; }
.inspire .wrapper { grid-template-columns: repeat(2,1fr); gap: 15px;}
.sec-gallery .wrapper { grid-template-columns: repeat(3,1fr); }
.sec-gallery .wrapper > div:nth-child(1) {  flex-direction: row; grid-area: 1 / 1 / 2 / 4; align-items: center;  }
.sec-gallery .wrapper > div:nth-child(1) p {max-width: 42%;}
.feedback .wrapper {grid-template-columns:1fr; gap: 30px;}
.feedback .card::before {right: -7%;}
.feedback .content :first-child {margin-bottom: 14px;}
}


@media only screen and (max-width: 767px){
.boxes .content ul li {width:100%; margin-bottom: 8px;}
.pdf .wrapper {grid-template-columns: repeat(2, 1fr); gap: 20px;}
.print .content :first-child {margin-bottom: 22px;}
.unique .wrapper {grid-template-columns: repeat(2 ,1fr);}
.sec-gallery .wrapper { grid-template-columns: repeat(2,1fr); }
.sec-gallery .wrapper > div:nth-child(1) {  flex-direction:column; grid-area: 1 / 1 / 2 / 2; align-items: start;  }
.sec-gallery .wrapper > div:nth-child(1) p {max-width: 100%;}
.sec-gallery .wrapper > div:nth-child(1)  img { height: 100%; object-fit: cover; }
}

@media (max-width: 575px) { 
.th_work_sec {padding-block:30px;}
button.prev {top:150px; left:10px;}
button.next {top:150px; right:10px;}
.work_list { grid-template-columns: 1fr; } 
.work_head h1 { font-size: 24px; }
.branding {padding-block: 30px;}
.branding .head  {margin-bottom: 20px;}
.branding .wrapper {display: grid; grid-template-columns: 1fr; gap: 20px;}
.branding .head  > :first-child {font-size: 22px; margin-bottom:14px;}
.boxes .wrapper { gap: 30px;} 
.boxes .content > :first-child {font-size: 22px;margin-bottom: 16px;}
.pdf {padding-block: 30px;}
.pdf .wrapper {grid-template-columns: 1fr; gap: 15px; place-items: center;}
.pdf .content {justify-content: center;}
.pdf .head :first-child {font-size: 22px;}
.product .head :first-child {font-size: 22px;}
.print .content :first-child {font-size: 22px; margin-bottom: 16px;}
.unique {padding-block: 25px;}
.unique .head :first-child {font-size: 22px;}
.unique .box img {margin-bottom: 18px;}
.success .content :first-child {font-size: 22px; margin-bottom: 20px;}
.order .wrapper { grid-template-columns: 1fr;}
.order .card {border-bottom: 1px solid #9b9c99; border-right: 0;}
.order .card :nth-child(2) {font-size: 20px;}
.inspire {padding-block: 30px;}
.inspire .head {margin-bottom: 20px; }
.inspire .wrapper { grid-template-columns: 1fr;}
.inspire .head :first-child {font-size: 22px; margin-bottom: 14px; }
.inspire .card > div {margin-bottom: 10px;}
.feedback .card::before {right: -22%; top:-13%;}
.boxes .quote .head > :nth-child(2) {font-size:32px;}
}

@media only screen and (max-width: 475px){
.unique .wrapper {grid-template-columns: 1fr;}
.sec-gallery {padding-block: 30px;}
.sec-gallery .wrapper > div:nth-child(1) {  place-items: center;  }
.sec-gallery .wrapper { grid-template-columns: 1fr; place-items: center; }
.sec-gallery .wrapper > div:nth-child(1) p { text-align: center; }
.sec-gallery .wrapper img { width:auto; }
.product { padding-block:20px; } 
.print  { padding-block:20px; }
}