/* hero banner styling */
.hero_banner {background-color: #FDFBEB;padding-bottom: 103px;padding-top: 80px;}
.hb_main {background-image: url("../images/banner/hero_background.webp");background-position: right center;background-repeat: no-repeat;background-size: 71%;padding-left: 50px;height: 619px;align-content: center;}
.hb_main > span {font-weight: 600;font-size: 20px;color: #282828;margin-bottom: 10px;}
.hb_main > h1 {font-size: 48px;line-height: 60px;color: #282828;margin-bottom: 30px;}
.hb_main > h1 span {color: #24C66D;}
.hb_main > p {color: #282828;margin-bottom: 13px;line-height: 24px;}
.hb_main > a {background-color: #24C66D;border-radius: 30px;height: 50px;line-height: 50px;max-width: 194px;text-align: center;color: #fff;font-weight: 600;font-size: 14px;width: 100%;}

/* hero bottom section styling */
.hero_bottom {background-color: #2D4C62;text-align: center;border-radius: 57px;padding-block: 100px;margin-top: -90px;}
.hero_bottom h2 ,.hero_bottom h1 {color: #fff;font-weight: 600;font-size: 36px;margin-bottom: 15px;}
.hero_bottom p {color: #fff;font-size: 18px;line-height: 26px;}

/* achievement section styling */
.achievement {margin-top: 60px;}
.achievement .wrapper {display: grid;grid-template-columns: repeat(4,1fr);border-bottom: 5px dotted #000;padding-block: 40px;}
.achievement .wrapper > div {display: flex;align-items: center;gap: 20px;}
.achievement .wrapper > div > img {height: 74px;width: 74px;object-fit: contain;}
.achievement .wrapper > div > div > strong {font-weight: 900;font-size: 48px;color: #2D4C62;line-height: 45px;}
.achievement .wrapper > div > div p {color: #7A7A7A;line-height: 26px;}

/* why us section styling */
.why_us {margin-top: 70px;}
.why_us .wrapper {display: grid;grid-template-columns: repeat(2,1fr);gap: 40px;}
.why_us .wrapper > :nth-child(1) > h2 {font-weight: 600;font-size: 36px;color: #282828;margin-bottom: 14px;}
.why_us .wrapper > :nth-child(1) > p {color: #5A5A63;font-size: 18px;margin-bottom: 15px;}
.why_us .wrapper > :nth-child(1) > a {background-color: #24C66D;border-radius: 30px;width: 194px;height: 50px;line-height: 50px;text-align: center;color: #fff;font-size: 14px;font-weight: 600;}
.why_us .wrapper > :nth-child(1) > img {width: 509px;height: 442px;object-fit: contain;box-shadow: 0px 0px 15px 10px rgba(0, 0,0, .05);}
.why_us .wrapper > :nth-child(2) > ul > li {display: flex;align-items: center;border-radius: 129.5px;margin-bottom: 34px;padding: 17px 17px 15px 17px;gap: 20px;box-shadow: 0px 0px 15px 10px #0000000D;}
.why_us .wrapper > :nth-child(2) > ul > li h3 {color: #fff;font-weight: 600;font-size: 24px;}
.why_us .wrapper > :nth-child(2) > ul > li p {color: #fff;line-height: 26px;}
.why_us .wrapper > :nth-child(2) > ul > li:nth-child(1) {background-color: #0B532C;}
.why_us .wrapper > :nth-child(2) > ul > li:nth-child(2) {background-color: #2D4C62;}
.why_us .wrapper > :nth-child(2) > ul > li:nth-child(3) {background-color: #416F70;}
.why_us .wrapper > :nth-child(2) > ul > li:nth-child(4) {background-color: #FDFBEB;}
.why_us .wrapper > :nth-child(2) > ul > li:nth-child(4) h3 {color: #282828;}
.why_us .wrapper > :nth-child(2) > ul > li:nth-child(4) p {color: #5A5A63;}

/* print boxes section styling */
.print_boxes {background-color: #FDFBEB;padding-block: 60px 300px;margin-top: 100px;}
.print_boxes .wrapper > :nth-child(1) {display: flex;justify-content: space-between;align-items: center; flex-wrap: wrap; margin-bottom: 35px;}
.print_boxes .wrapper > :nth-child(1) > h2 {font-weight: 600;font-size: 36px;color: #282828;}
.print_boxes .wrapper > :nth-child(1) > a {background-color: #282828;border-radius: 3px;height: 55px;width: 100%;max-width: 223px;line-height: 55px;color: #fff;font-weight: 600;font-size: 18px;text-align: center;}
.print_boxes .wrapper > :nth-child(2) {display: grid;grid-template-columns: repeat(4, 1fr);gap: 30px;}
.print_boxes .wrapper > :nth-child(2) > div {display: flex; align-items: start; justify-content: space-between; flex-direction: column; background-color: #fff;padding: 18px 18px 25px 18px;box-shadow: 0px 0px 15px 10px rgba(0, 0, 0, 0.05);border-radius: 16px;}
.print_boxes .wrapper > :nth-child(2) > div > img {border: 1px solid #D9D9D9;border-radius: 18px;margin-bottom: 14px;width: 100%;height: 256px;object-fit: cover;}
.print_boxes .wrapper > :nth-child(2) > div > h3 {color: #000;font-weight: 600;font-size: 24px;line-height: 30px;margin-bottom: 6px;}
.print_boxes .wrapper > :nth-child(2) > div > p {display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; color: #5A5A63;font-size: 14px;line-height: 22px;margin-bottom: 14px;}
.print_boxes .wrapper > :nth-child(2) > div > a {border: 1px solid #24C66D;border-radius: 3px;height: 55px;line-height: 55px;text-align: center;width: 100%;color: #24C66D;font-weight: 600;font-size: 18px;transition: 1s all;}
.print_boxes .wrapper > :nth-child(2) > div > a:hover {background-color: #24C66D;color: #fff;}

/* home works section styling */
.home_works {margin-top: -208px;}
.home_works .wrapper {background-color: #416F70;border-radius: 49px;padding: 50px 27px 75px 45px;display: grid;grid-template-columns: minmax(300px, 370px) minmax(250px, 282px) minmax(250px, 282px) minmax(250px, 282px);gap: 30px;}
.home_works .wrapper > :nth-child(1) {padding-top: 30px;}
.home_works .wrapper > :nth-child(1) > h2 {font-weight: 600;font-size: 36px;color: #fff;margin-bottom: 25px;}
.home_works .wrapper > :nth-child(1) > p {color: #fff;margin-bottom: 35px;line-height: 26px;}
.home_works .wrapper > :nth-child(1) > a {color: #fff;font-weight: 600;font-size: 14px;background-color: #24C66D;border-radius: 30px;height: 50px;line-height: 50px;width: 100%;max-width: 194px;text-align: center;}
.home_works .wrapper > :nth-child(n+2) {text-align: center;}
.home_works .wrapper > :nth-child(n+2) > img:first-of-type {margin-bottom: 25px;text-align: center;height: 112px;width: 112px;object-fit: contain;}
.home_works .wrapper > :nth-child(n+2) > h3 {color: #fff;font-weight: 600;font-size: 24px;line-height: 30px;margin-bottom: 18px;}
.home_works .wrapper > :nth-child(n+2) > p {color: #fff;line-height: 26px;}
.home_works .wrapper > :nth-child(n+2):not(:last-child) {position: relative;}
.home_works .wrapper > :nth-child(n+2):not(:last-child) > img:last-of-type {position: absolute;top: 45px;width: 63px;height: 24px;right: -45px;}

/* home form section styling */
.home_form {margin-top: 100px;}
.home_form .wrapper {display: grid;grid-template-columns: repeat(2,1fr);gap: 25px;}
.home_form .wrapper > img {height: 751px;width: 627px;object-fit: cover;border-radius: 16px;}
.home_form .gen_form > form > :nth-child(3) > button:nth-of-type(2) {display: none;}

/* home content section styling */
.home_content {margin-block: 70px 70px;}
.home_content .wrapper {max-height: 555px;padding-right: 20px;overflow-y: auto; scrollbar-width: thin; scrollbar-color: transparent transparent}
.home_content .wrapper:hover {scrollbar-color: #24C66D #e9e9e9;}
.home_content .wrapper > h2 {color: #282828;font-weight: 600;font-size: 36px;margin-bottom: 20px;}
.home_content .wrapper > h3 {color: #575757;font-weight: 600;font-size: 18px;line-height: 26px;}
.home_content .wrapper > p {color: #575757;line-height: 26px;margin-bottom: 25px;}
.home_content .wrapper > ul {margin-bottom: 1rem;}
.home_content .wrapper > ul li {list-style-type: disc;list-style-position: inside;color: #575757;margin-bottom: 8px;}

/* home blog sec styling */
.home_blog .wrapper > h2 {color: #282828;font-size: 36px;font-weight: 600;text-align: center;margin-bottom: 20px;}
.home_blog .wrapper > p {color: #282828;font-size: 18px;line-height: 24px;text-align: center;max-width: 734px;margin-inline: auto;margin-bottom: 40px;}
.home_blog .wrapper > div {display: grid;grid-template-columns: repeat(3,1fr);column-gap: 30px;margin-bottom: 40px;}
.home_blog .wrapper > a {font-weight: 600;font-size: 18px;color: #fff;background-color: #282828;border-radius: 3px;width: 100%;max-width: 223px;margin-inline: auto;height: 55px;line-height: 55px;text-align: center;}


@media only screen and (max-width:1200px) {
    /* home works */
    .home_works .wrapper {gap: 20px;grid-template-columns:minmax(215px, 370px) minmax(210px, 282px) minmax(210px, 282px) minmax(210px, 282px);padding: 50px 27px 75px 30px;}
}
@media only screen and (max-width:991px) {
    /* hero banner */
    .hero_banner {padding-block: 0;}
    /* hero bottom */
    .hero_bottom {padding-block: 75px;border-radius: 40px;}
    .hero_bottom h2 ,.hero_bottom h1 {font-size:30px;}
    .hero_bottom p {font-size: 16px;}
    /* achievement */
    .achievement .wrapper {grid-template-columns: repeat(2,1fr);gap: 15px;}
    /* why us */
    .why_us .wrapper {grid-template-columns: repeat(1,1fr);}
    /* print boxes */
    .print_boxes {margin-top: 60px;padding-block:45px 300px;}
    .print_boxes .wrapper {max-width: 750px;margin-inline: auto;}
    .print_boxes .wrapper > :nth-child(2) {grid-template-columns: repeat(2, 1fr);}
    .print_boxes .wrapper > :nth-child(1) > h2 {font-size: 30px;}
    .print_boxes .wrapper > :nth-child(1) > a {font-size: 16px;}
    /* home works */
    .home_works .wrapper {grid-template-columns: repeat(3,1fr);}
    .home_works .wrapper > :nth-child(1) {grid-area: 1/1/2/4;padding: 15px 30px 40px 30px;}
    .home_works .wrapper > :nth-child(1) > h2 {font-size: 30px;}
    /* home content */
    .home_content .wrapper > h2 {font-size: 30px;}
    /* home blog */
    .home_blog .wrapper > h2 {font-size: 30px;}
    .home_blog .wrapper > p {font-size: 16px;}
    .home_blog .wrapper > div {grid-template-columns: repeat(2,1fr);row-gap: 25px;}

}
@media only screen and (max-width:767px) {
    /* home works */
    .home_works .wrapper > :nth-child(n+2) > img:first-of-type {width: 90px;height: 90px;}
    .home_works .wrapper > :nth-child(n+2) > h3 {font-size: 22px;}
    .home_works .wrapper > :nth-child(n+2):not(:last-child) > img:last-of-type {width: 50px;height: 19px;}
    .home_form .wrapper {display: block;text-align: center;}
    .home_form .wrapper > img {margin-bottom: 20px;height: 530px;}
    .home_form .gen_form {max-width: 627px;margin-inline: auto;}
    .home_form {margin-top: 60px;}
    /* home blog */
    .home_blog .wrapper > div {grid-template-columns: repeat(1,1fr);row-gap: 25px;}
}
@media only screen and (max-width:575px) {
    /* hero banner */
    .hb_main {height: 550px;background-image: url("../images/banner/hero_background_mob.webp");background-size: 335px 220px;}
    .hb_main > h1 {font-size: 40px;line-height: 45px;margin-bottom: 20px;}
    /* hero bottom */
    .hero_bottom {border-radius: 30px;padding-block: 65px;}
    .hero_bottom h2 ,.hero_bottom h1 {font-size:26px;}
    /* achievement */
    .achievement {margin-top: 30px;}
    .achievement .wrapper > div > img {height: 55px;width: 55px;}
    .achievement .wrapper > div > div > h3 {font-size: 35px;}
    .achievement .wrapper > div > div p {line-height: 20px;}
    /* why us */
    .why_us .wrapper > :nth-child(1) > h2 {font-size: 26px;}
    .why_us .wrapper > :nth-child(1) > p {font-size: 16px;}
    .why_us .wrapper > :nth-child(2) > ul > li h3 {font-size: 22px;}
    .why_us .wrapper > :nth-child(2) > ul > li {margin-bottom: 25px;}
    /* print boxes */
    .print_boxes .wrapper > :nth-child(1) > h2 {font-size: 26px;}
    .print_boxes .wrapper > :nth-child(2) {grid-template-columns: repeat(1,1fr);}
    .print_boxes .wrapper > :nth-child(2) > div > img {height: 390px;object-fit: contain;}
    /* home works */
    .home_works .wrapper {display: block;}
    .home_works .wrapper > :nth-child(n+2):not(:last-child) > img:last-of-type {display: none;}
    .home_works .wrapper > :not(:last-child) {margin-bottom: 20px;}
    .home_form .wrapper > img {height: 450px;}
    .home_form {margin-top: 40px;}
    /* home content */
    .home_content .wrapper > h2 {font-size: 26px;}
     /* home blog */
    .home_blog .wrapper > h2 {font-size: 26px;}
    .blog_card > a:nth-of-type(2) > h3 {font-size: 22px;}
    .home_blog .wrapper > a {font-size: 16px;}
}