.banner-header { background-color: #7c6ad6; text-align: center; } .banner-header h1 { color: #fff; font-size: 24px; padding: 20px 0; } .banner-image { width: 100%; min-height: 600px; background-image: url('/Images/header/home.webp'); background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden } .center-text { text-align: center; position: absolute; bottom: 10%; color: white; width: 80%; margin: 0 10%; } } .center-text h2 { text-align: center; font-size: 50px; } .center-text h3 { text-align: center; font-size: 24px; max-width: 1440px; display: block; margin: 30px auto 0; line-height: 1.5; } .get-started { background-color: #3e3b4e; padding: 20px; } .get-started h4 { text-align: center; margin-bottom: 20px; font-size: 50px; color: #fff; } .get-started p.large { text-align: center; margin-bottom: 10px; font-size: 28px; color: #fff; font-weight: 600; } .get-started p { text-align: center; margin-bottom: 0; font-size: 24px; color: #fff; } .get-started a { color: #fff; } .get-started a:hover { color: #7c6ad6; } .get-started .main-form { width: 450px; margin: 20px auto; } .get-started .main-form input { width: 310px; display: inline-block; } .get-started .main-form .submit { width:auto; display: inline-block; border: 0; margin-left: 20px; margin-right: 0; } @media (max-width: 425px) { .banner-header h1 { font-size: 18px; } .get-started .main-form { width: 100%; text-align: center; } .get-started .main-form input { width: 220px; text-align: center; margin: 0 auto; } .get-started .main-form .submit { margin-left: 0; clear: both; margin-top: 20px; } .center-text { bottom: 5%; width: 90%; margin: 0 5%; } .center-text h2 { font-size: 28px; } .center-text h3 { font-size: 20px; } } .blog-h2 { text-align: center; padding: 20px 0; font-size: 26px; } .blog-list img { border-radius: 5px; } .blog-list .blog-date { position: absolute; top: 1px; display:block; left: 8px; } .blog-list .blog-date p { background-color: #ab46bc; display:block; padding: 10px; width: 40px; font-weight: 600; border-radius: 5px; color: #fff; text-align: center; line-height: 1; font-size: 25px; margin-top: 5px; } .blog-list .blog-date p span { font-size: 16px; } .blog-list a { color: #212529; text-decoration: none; font-size: 20px; font-weight: 600; } .blog-list a:hover { color: #ab46bc; } .blog-list p { color: #8e8e8e; font-size: 14px; font-weight: 400; margin-top: 20px; } .author { display: inline-block; width: 100%; padding: 20px 0 10px; } .author .author-image { width: 100px; height: 100px; display: inline-block; } .author .author-image img { border-radius: 5px; } .author .author-content { display: inline-block; width: calc(99% - 110px); vertical-align: top; } .author .author-content a.author-name { font-weight: 500; font-size: 20px; text-decoration: none; color: #ab46bc; margin-left: 10px; } .author .author-content span { color: #000; font-size: 16px; font-weight: 500; margin-left: 10px; } .author .author-content a.author-name:hover { text-decoration: underline; } .author .author-content p.author-text { font-size: 14px; color:#6b6a6a; margin-left: 10px; margin-top: 10px; } @media (max-width: 425px) { .author .author-image { width: 200px; height:200px; display: block; margin-left: auto; margin-right: auto; } .author .author-content { display: block; width: 100%; margin-top: 20px; } .author .author-content a.author-name { font-size: 24px; text-align: center; } .author .author-content p.author-text { font-size: 18px; } } .list-box { height: calc(100% - 20px); padding: 9px; } .list-box .image { width: 100%; display: block; height: 240px; text-align: center; } .list-box .image img { max-height: 240px; width: auto; } .list-box h3 { width: 100%; font-size: 18px; margin-top: 20px; } .list-box a { text-decoration: none; color: #230A3D; font-weight: 500; font-size:18px ; } .list-box a:hover { text-decoration: underline; color: #663399; } .list-box p.address { line-height: 1.2; font-size: 14px; display: block; margin: 5px 0; } .list-box img.address-img{ width:20px; height: 20px; float: left; margin-right: 5px; } .list-box p.profile { padding: 0 ; margin: 5px 0; line-height: 1.4; font-size: 14px; display: inline-block; } .list-box a.readmore { font-size: 12px; font-weight: 600; margin-left: 5px; } .list-box .listing-rating { width: 100%; display: block; padding: 5px 0; } .list-box .listing-rating a.ratingbox { background: #a3d74e; color: #fff; padding: 2px 5px; font-size: 12px; font-weight: 600; text-align: center; } .list-box p.ratingcnt { padding: 0 ; margin-left: 10px; font-size: 12px; font-weight: 800; display: inline-block; }