.banner .banner-small-text, .post-sec-main .post-sec-text{ font-family: "Kalam", cursive; } /* Banner Section */ .banner .banner-content{ margin-left: 14%; } .banner .banner-buttons .wp-block-button{ margin-bottom: 0; } .banner .banner-btn1 a, .banner .banner-btn2 a, .post-section .wp-block-button a{ text-decoration: none !important; } .banner .banner-btn2 a:before{ content: "\f04b"; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #FFFFFF; background-color: #2979BF; border-radius: 50%; padding: 15px; margin-right: 15px; } .banner .banner-image{ position: relative; } .banner .banner-image .client, .banner .banner-image .skill, .banner .banner-image .reviews{ position: absolute; border-radius: 6px; } .banner .banner-image .client p, .banner .banner-image .skill p, .banner .banner-image .reviews p{ margin-bottom: 0; } .banner .banner-image .client{ top: 50%; left: 0; width: 165px; } .banner .banner-image .skill{ bottom: 10%; left: 37%; width: 152px; } .banner .banner-image .reviews{ top: 35%; left: 37%; width: 235px; } .banner .banner-image .client-no:before{ content: "\f0c0"; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #FFFFFF; background-color: #2979BF; padding: 12px 10px; border-radius: 50%; margin-right: 15px; font-size: 15px; position: relative; top: 11px; } .banner .banner-image .expert-no:before{ content: "\f2bb"; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #FFFFFF; background-color: #2979BF; padding: 10px; border-radius: 50%; margin-right: 15px; font-size: 18px; position: relative; top: 12px; } .banner .banner-image .review-no:before{ content: ''; background: url(../images/view.png) no-repeat; padding: 10px 80px; margin-right: 10px; } .banner .banner-image .review-no{ margin-top: 15px; margin-bottom: 10px !important; } /* Post Section */ .post-sec-main .post1{ box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; border-radius: 6px; position: relative; } .post-sec-main .post-section .wp-block-image img{ margin-top: 40px; } .post-sec-main .post1:hover{ background: #2979BF; } .post-sec-main .post1:hover h4, .post-sec-main .post1:hover p, .post-sec-main .post1:hover .post-no{ color: #fff !important; } .post-sec-main .post1:hover .wp-block-button a{ background: #fff !important; color: #000 !important; } .post-sec-main .post1 .post1-img, .post-sec-main .post1:hover .post1-main-img{ display: none; } .post-sec-main .post1:hover .post1-img{ display: block; } .post-sec-main .post1 .post-no{ position: absolute; right: 0; background: #a0c8eb82; top: 0; padding: 20px 15px 35px 35px; border-radius: 0px 6px 0px 95px; } .post-sec-main .post-section .wp-block-button{ margin-bottom: 0 !important; } .post-sec-main .post-section .wp-block-button a{ padding: 10px 10px; } /* Media */ @media screen and (max-width: 345px){ .banner .banner-btn2 a:before{ padding: 13px; } .banner .banner-btn2 a, .banner .banner-btn1 a{ font-size: 13px !important; } } @media screen and (max-width: 720px) { .banner .wp-block-cover__image-background, .banner .banner-image .client, .banner .banner-image .skill, .banner .banner-image .reviews{ display: none; } .banner{ background-color: #edeeef; } .banner .banner-content { margin-left: 0; text-align: center; } .banner .banner-content .banner-buttons{ justify-content: center; } .banner .banner-side-image img{ width: 310px !important; height: 455px !important; } .banner .banner-image{ display: flex; justify-content: center; } .post-sec-main{ padding: 40px 5px; } } @media screen and (min-width: 721px) and (max-width: 999px) { .banner .wp-block-cover__image-background{ display: none; } .banner{ background-color: #edeeef; min-height: 580px !important; } .banner .wp-block-columns{ flex-wrap: nowrap !important; } .banner .banner-content { margin-left: 3%; } .post-sec-main{ padding: 40px 5px; } .banner .banner-side-image img{ width: 360px !important; height: 510px !important; } .post-sec-main .post-section{ display: grid; grid-template-columns: auto auto; } .banner .banner-image .reviews{ width: 225px; } .banner .banner-image .review-no{ font-size: 13px !important; } .banner .banner-image .review-no:before { padding: 13px 80px; } .banner .banner-image .client { top: 70%; } .banner .banner-image .skill { bottom: 0; } } @media screen and (min-width: 1000px) and (max-width: 1200px) { .banner{ min-height: 500px !important; } .banner .banner-content { margin-left: 3%; } .banner .banner-side-image img{ width: 370px !important; height: 550px !important; } .banner .banner-image{ display: flex; justify-content: center; } .banner .banner-image .skill { bottom: 5%; left: 55%; } .banner .banner-image .reviews{ left: 50%; } } @media screen and (min-width: 1201px) and (max-width: 1440px){ .banner{ min-height: 700px !important; } .banner .banner-content { margin-left: 7%; } .banner .banner-side-image img{ width: 400px !important; height: 600px !important; } }