/* Theme Name: SCCCC Author: Seven Hills Creative Author URI: https://www.sevenhillscreative.co.uk/ Description: Another custom theme for a happy customer! Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready Version: 2022.1 Requires at least: 5.2 Requires PHP: 7.0 */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent} .sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{} .screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal} .screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000} .skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline} .skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto} .visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap} /* BASE */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; color: #662E8E; box-sizing: border-box; font-family: 'Poppins', sans-serif; /* outline: 1px solid red !important; */ } html{ overflow-x: hidden !important; } body { font-family: 'Poppins', sans-serif; overflow-x: hidden !important; display: grid; } /* main { overflow: hidden; } */ @media only screen and (max-width: 1100px) {} @media only screen and (max-width: 960px) {} @media only screen and (max-width: 760px) {} @media only screen and (max-width: 660px) {} @media only screen and (max-width: 560px) {} @media only screen and (max-width: 460px) {} @media only screen and (max-width: 360px) {} @media only screen and (max-width: 320px) { body, header, main, section, footer { width: 320px; } } /* LAYOUT */ .no-wavy-border::before { clip-path: none !important; content: none !important; } section, article, main, nav, header, #primary { display: grid; grid-template-columns: repeat(16, 1fr); grid-column: 1 / 17; justify-self: center; max-width: 2000px; width: 100%; } footer { display: grid; grid-template-columns: repeat(16, 1fr); grid-column: 1 / 17; justify-self: center; max-width: 2000px; width: 100%; } /* BUTTON LINKS */ .all-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 1.25em !important; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; cursor: Pointer; border-radius: 40px; justify-self: center; padding: 0.5em 2.5em; } .green-button { background-color: #8AC53F; border: 1px solid #8AC53F; color: #fff; } .white-button { background-color: #fff; border: 1px solid #fff; color: #662E8E; } .purple-button { background-color: #662E8E; border: 1px solid #662E8E; color: #fff; } @media only screen and (max-width: 800px) { .all-button { font-size: 1em !important; padding: 0.7em 2em; } } /* TEXT */ h1, h2, h3, h4, h5, h6{ font-family: 'Poppins', sans-serif; font-weight: 700; line-height: 1.2; } h1{ font-size: 3.75em; } h2{ font-size: 3.125em } h3{ font-size: 2.188em; } h4{ font-size: 1.688em; } p, li{ font-size: 1.125em; line-height: 2; font-weight: 300; word-break: break-word; } label { font-size: 1.25em; text-transform: uppercase; font-weight: 500; letter-spacing: 2.5px; color: #8AC53F; } img { width: 100%; } ul.main-nav{ padding: 0; } li::marker { } strong { font-weight: 700; } em { font-style: italic; } .underline { text-decoration: underline; } a { cursor: Pointer !important; text-decoration: none; } @media only screen and (max-width: 800px) { h1, h1 span{ font-size: 2.188em; } h2{ font-size: 2.188em; } h3{ font-size: 1.563em; } h4{ font-size: 1.25em; } p , li{ font-size: 1.125em; line-height: 1.5; } label { font-size: 18px; } } /* HEADER TEXT IMAGE SPLIT */ .header-text-image-split .outer-main-banner { display: grid; grid-column: 2/17; grid-template-columns: 48% 52%; gap: 1em; } /* left image */ .position-image-left .outer-main-banner { grid-column: 1/16; } /* .position-image-left .image-left .sub-header-contents { padding: 0; } */ .position-image-left .image-left .sub-page-image .sub-img { left: 20%; right: unset; } .text-image-split.light-purple-image .split-content p a strong, .text-image-split.light-purple-image .split-content p a { color: #662E8E; } .text-image-split.light-purple-image .split-cocntent p a { font-weight: 600; } .text-image-split.light-purple-image .split-content p .link-grid strong, .text-image-split.light-purple-image .split-content p .link-grid { color: #fff; } .main-header-links { display: flex; gap: 2em; flex-wrap: wrap; padding-top: 1em; } .main-header-links a:nth-child(even) { background-color: #fff; border: 1px solid #fff; color: #662E8E; } .header-contents p span { color: #8AC53F; font-weight: 700; } .header-contents p strong { font-weight: 700; color: #fff; } .main-banner{ position: relative; } .top-home-overlay { position: absolute; top: -3em; right: 0; width: 70%; height: 60%; clip-path: polygon(100% 100%, 0% 100% , 0.00% 91.73%, 2.00% 91.53%, 4.00% 90.93%, 6.00% 89.95%, 8.00% 88.61%, 10.00% 86.93%, 12.00% 84.96%, 14.00% 82.75%, 16.00% 80.33%, 18.00% 77.77%, 20.00% 75.13%, 22.00% 72.46%, 24.00% 69.83%, 26.00% 67.29%, 28.00% 64.90%, 30.00% 62.72%, 32.00% 60.80%, 34.00% 59.18%, 36.00% 57.89%, 38.00% 56.97%, 40.00% 56.44%, 42.00% 56.30%, 44.00% 56.57%, 46.00% 57.24%, 48.00% 58.28%, 50.00% 59.68%, 52.00% 61.41%, 54.00% 63.42%, 56.00% 65.68%, 58.00% 68.12%, 60.00% 70.70%, 62.00% 73.35%, 64.00% 76.02%, 66.00% 78.64%, 68.00% 81.15%, 70.00% 83.51%, 72.00% 85.65%, 74.00% 87.52%, 76.00% 89.09%, 78.00% 90.32%, 80.00% 91.18%, 82.00% 91.64%, 84.00% 91.71%, 86.00% 91.38%, 88.00% 90.65%, 90.00% 89.54%, 92.00% 88.08%, 94.00% 86.30%, 96.00% 84.25%, 98.00% 81.96%, 100.00% 79.49%); background-color: #8AC53F; transform: scaley(-1); } .bottom-home-overlay { clip-path: polygon(100% 100%, 0% 100% , 0.00% 91.73%, 2.00% 91.53%, 4.00% 90.93%, 6.00% 89.95%, 8.00% 88.61%, 10.00% 86.93%, 12.00% 84.96%, 14.00% 82.75%, 16.00% 80.33%, 18.00% 77.77%, 20.00% 75.13%, 22.00% 72.46%, 24.00% 69.83%, 26.00% 67.29%, 28.00% 64.90%, 30.00% 62.72%, 32.00% 60.80%, 34.00% 59.18%, 36.00% 57.89%, 38.00% 56.97%, 40.00% 56.44%, 42.00% 56.30%, 44.00% 56.57%, 46.00% 57.24%, 48.00% 58.28%, 50.00% 59.68%, 52.00% 61.41%, 54.00% 63.42%, 56.00% 65.68%, 58.00% 68.12%, 60.00% 70.70%, 62.00% 73.35%, 64.00% 76.02%, 66.00% 78.64%, 68.00% 81.15%, 70.00% 83.51%, 72.00% 85.65%, 74.00% 87.52%, 76.00% 89.09%, 78.00% 90.32%, 80.00% 91.18%, 82.00% 91.64%, 84.00% 91.71%, 86.00% 91.38%, 88.00% 90.65%, 90.00% 89.54%, 92.00% 88.08%, 94.00% 86.30%, 96.00% 84.25%, 98.00% 81.96%, 100.00% 79.49%); bottom:-1px; left: 0; transform: scalex(-1); background-color: #8AC53F; width: 90%; height: 50%; position: absolute; } .outer-main-banner { display: grid; grid-template-columns: 1fr 1fr; grid-column: 2 / 16; position: relative; z-index: 3; overflow: hidden; } .outer-main-banner.image-left .sub-main-banner-title { order: 2; } .outer-main-banner.image-left .sub-page-image { order: 1; } .outer-main-banner h1, .outer-main-banner p{ color: white; } .main-banner-title { display: grid; /* gap: 2em; */ max-width: 700px; align-content: center; align-items: center; padding: 5em 0 10em 0; } .main-banner-title h1 span { color: #fff; font-weight: 700; } .main-banner-title a { color: #fff; justify-self: left; } .header-contents { display: grid; gap: 1em; text-align: left; justify-self: left; justify-items: left; } .header-contents h1 strong { color: #fff; } .header-contents p { margin: 0; } .home-page-links { display: flex; flex-wrap: wrap; gap: 1em; justify-content: left; } .upper-green-splodge, .lower-green-splodge { position: absolute; width: 70%; z-index: 1; } .upper-green-splodge { right: 0; top: 0; } .lower-green-splodge { left: 0; bottom: 0; } .main-banner-image .clip-rotator{ height: 100%; } .main-banner-image .clip-rotator img{ height: 100%; width: 100%; object-fit: cover; border-radius: 65% 0 0 50%; } /* HEADER TEXT IMAGE SPLIT WITH PURPLE BACKGROUND */ .header-text-image-split--purple { background-color: #662E8E; /* min-height: 100vh; */ } /* HEADER TEXT IMAGE SPLIT WITH WHITE BACKGROUND */ .header-text-image-split--white { background-color: #fff; } /* GREEN WAVY BANNER */ .header-green-wavy-banner .outer-main-banner { grid-template-columns: 1fr; align-items: end; } .header-green-wavy-banner { position: relative; background: #E8F4D8; color: #fff; min-height: 15vh; z-index: 1; } .header-green-wavy-banner::before { content: ""; position: absolute; left: 0; width: 100%; bottom: -140px; background: #E8F4D8; clip-path: polygon(100% 100%, 0% 100%, 0.00% 82.61%, 2.00% 82.02%, 4.00% 81.40%, 6.00% 80.76%, 8.00% 80.11%, 10.00% 79.45%, 12.00% 78.81%, 14.00% 78.18%, 16.00% 77.58%, 18.00% 77.02%, 20.00% 76.51%, 22.00% 76.05%, 24.00% 75.65%, 26.00% 75.33%, 28.00% 75.07%, 30.00% 74.90%, 32.00% 74.80%, 34.00% 74.79%, 36.00% 74.86%, 38.00% 75.01%, 40.00% 75.23%, 42.00% 75.54%, 44.00% 75.91%, 46.00% 76.35%, 48.00% 76.85%, 50.00% 77.39%, 52.00% 77.98%, 54.00% 78.60%, 56.00% 79.24%, 58.00% 79.89%, 60.00% 80.55%, 62.00% 81.19%, 64.00% 81.82%, 66.00% 82.42%, 68.00% 82.98%, 70.00% 83.49%, 72.00% 83.95%, 74.00% 84.35%, 76.00% 84.67%, 78.00% 84.93%, 80.00% 85.10%, 82.00% 85.20%, 84.00% 85.21%, 86.00% 85.14%, 88.00% 84.99%, 90.00% 84.77%, 92.00% 84.46%, 94.00% 84.09%, 96.00% 83.65%, 98.00% 83.15%, 100.00% 82.61%); z-index: 6; height: 140px; transform: scaleY(-1); } .header-green-wavy-banner > * { position: relative; z-index: 1; } .header-green-wavy-banner .sub-page-image { display: none; } .header-green-wavy-banner .sub-main-banner-title, .header-green-wavy-banner .sub-header-contents, .header-green-wavy-banner .sub-header-contents h1 { padding: 0; justify-self: center; text-align: center; gap: 0; color: #662E8E; } .header-green-wavy-banner .taxonomy-header { grid-column: 2 / 16; text-align: center; justify-self: center; align-content: end; z-index: 999; } .taxonomy-header h1, .taxonomy-header h1 span { font-size: 60px; } .header-green-wavy-banner { padding-top: 5em; } @media only screen and (max-width: 1175px){ .header-green-wavy-banner .outer-main-banner { padding: 4em 0 2em 0; } .header-green-wavy-banner { min-height: 12vh; } .header-green-wavy-banner .sub-page-image { padding: 0; } .outer-main-banner.image-left .sub-main-banner-title { order: 1; } .outer-main-banner.image-left .sub-page-image { order: 2; } .taxonomy-header h1, .taxonomy-header h1 span { font-size: 35px; } .text-image-split.light-purple-image .split-content p a strong, .text-image-split.light-purple-image .split-content p a { font-size: 1rem; } .upper-green-splodge, .lower-green-splodge { z-index: 3; } } /* text floating image split - white background + text floating image split - white background */ .header-text-floating-split--white .sub-page-image .sccc-green-behind-img, .header-text-floating-split--purple .sub-page-image .sccc-green-behind-img { display: none; } .header-text-floating-split--white .sub-page-image .sub-img, .header-text-floating-split--purple .sub-page-image .sub-img { bottom: unset; } .header-text-floating-split--white .outer-main-banner, .header-text-floating-split--purple .outer-main-banner { grid-template-columns: 1fr 1fr; } .header-text-floating-split--white .header-contents h1, .header-text-floating-split--white .header-contents p, .header-text-floating-split--white .header-contents p strong { color: #662E8E; } .header-text-floating-split--white .main-banner-title, .header-text-floating-split--purple .main-banner-title { gap: 0; } .header-text-floating-split--white .sub-main-banner-title, .header-text-floating-split--purple .sub-main-banner-title { /* padding: 5em 0 10em 0; */ } .header-text-floating-split--white .sub-page-image .sub-img, .header-text-floating-split--purple .sub-page-image .sub-img { bottom: unset; top: 2em; max-width: 566px; width: 100%; right: unset; justify-self: center; } /* text floating image split - white background */ .header-text-floating-split--purple { background-color: #662E8E; } @media only screen and (max-width: 1000px){ .header-text-floating-split--purple .outer-main-banner, .header-text-floating-split--white .outer-main-banner { grid-template-columns: 1fr; } .header-text-floating-split--purple .sub-main-banner-title, .header-text-floating-split--white .sub-main-banner-title { padding: 2em 0; } .header-text-floating-split--purple .sub-page-image .sub-img, .header-text-floating-split--white .sub-page-image .sub-img { width: 100%; right: auto; } } /* BLOG PAGE HEADER */ .blog-header-contents { display: grid; grid-column: 2/16; text-align: center; align-items: center; } /* NO HEADER */ .no-header { display: none; } /* Gradient with image background */ /* SUB PAGE HEADER */ .sub-page-image { position: relative; display: grid; } .sub-main-banner-title { padding: 2em 0 2em 2em; } .sub-page-image .sub-img { border-radius: 50%; aspect-ratio: 1 / 1; z-index: 2; border: 20px solid #8AC53F; max-width: 712px; width: 80%; object-fit: cover; right: 14%; position: absolute; align-self: center; bottom: 19%; } .sccc-green-behind-img { position: absolute; bottom: 1em; right: 0; transform: rotate(270deg); max-width: 638px; width: 100%; } .image-left .sccc-green-behind-img { position: absolute; bottom: 1em; right: unset; transform: rotate(0deg); max-width: 638px; width: 100%; } .main-sub-header.header-text-image-split.header-text-image-split--purple { position: relative; background: #6b2494; color: #fff; min-height: 100vh; } .main-sub-header.header-text-image-split.header-text-image-split--purple::before { content: ""; position: absolute; left: 0; width: 100%; height: 140px; bottom: 0; background: #fff; clip-path: polygon(100% 100%, 0% 100%, 0.00% 44.52%, 2.00% 42.24%, 4.00% 40.19%, 6.00% 38.37%, 8.00% 36.83%, 10.00% 35.57%, 12.00% 34.61%, 14.00% 33.96%, 16.00% 33.64%, 18.00% 33.64%, 20.00% 33.97%, 22.00% 34.63%, 24.00% 35.59%, 26.00% 36.86%, 28.00% 38.42%, 30.00% 40.24%, 32.00% 42.30%, 34.00% 44.58%, 36.00% 47.04%, 38.00% 49.66%, 40.00% 52.40%, 42.00% 55.23%, 44.00% 58.11%, 46.00% 61.00%, 48.00% 63.87%, 50.00% 66.68%, 52.00% 69.40%, 54.00% 71.98%, 56.00% 74.41%, 58.00% 76.63%, 60.00% 78.64%, 62.00% 80.39%, 64.00% 81.88%, 66.00% 83.07%, 68.00% 83.96%, 70.00% 84.54%, 72.00% 84.79%, 74.00% 84.71%, 76.00% 84.31%, 78.00% 83.59%, 80.00% 82.55%, 82.00% 81.22%, 84.00% 79.60%, 86.00% 77.73%, 88.00% 75.61%, 90.00% 73.29%, 92.00% 70.79%, 94.00% 68.14%, 96.00% 65.38%, 98.00% 62.53%, 100.00% 59.65%); z-index: 1 !important; } .main-sub-header.header-text-image-split.header-text-image-split--purple > * { position: relative; z-index: 1; } .sub-header-contents { padding: 2em 2em 5em 0; } .sub-header-contents ul li { color: #fff; list-style-type: disc; margin-left: 1em; font-weight: 600; } .main-banner.main-sub-header.header-text-floating-split.header-text-floating-split--white-with-slanted-image .sub-page-image .sccc-green-behind-img{ display: none; } .main-banner.main-sub-header.header-text-floating-split.header-text-floating-split--white-with-slanted-image .sub-page-image .sub-img { border: none; border-radius: 0; width: 100%; bottom: 0; right: 0; transform: rotate(10deg); object-fit: contain; } .main-banner.main-sub-header.header-text-floating-split.header-text-floating-split--white-with-slanted-image .sub-header-contents p, .main-banner.main-sub-header.header-text-floating-split.header-text-floating-split--white-with-slanted-image .sub-header-contents p strong, .main-banner.main-sub-header.header-text-floating-split.header-text-floating-split--white-with-slanted-image .sub-header-contents h1 { color: #662E8E; } .main-banner.main-sub-header.header-text-floating-split .outer-main-banner { padding: 5em 0; } @media only screen and (max-width: 1300px){ .sub-page-image .sub-img { width: 85%; } .sub-page-image .sub-img { border: 10px solid #8AC53F; } .sub-header-contents ul li { list-style-position: inside; } } @media only screen and (max-width: 1175px){ .top-home-overlay { display: none; } .main-banner-image .clip-rotator img { border-radius: 105% 0 0 25%; } .bottom-home-overlay { width: 100%; height: 10%; z-index: 3; } .header-text-image-split .outer-main-banner { grid-template-columns: 1fr; grid-column: 1/17; padding: 4em 0 0; } .main-banner-title { justify-self: center; padding: 2em 1em 0 1em } .header-contents { text-align: center; justify-items: center; } .upper-green-splodge { display: none; } .main-header-links { justify-content: center; } .lower-green-splodge { width: 100%; } .main-banner-image img { padding: 0; } .sccc-green-behind-img { justify-self: end; max-width: 277px; } .sub-page-image .sub-img { max-width: 290px; right: 3em; bottom: unset; justify-self: end; position: relative; border: 10px solid #8AC53F; } /* left image */ .position-image-left .image-left .sub-page-image .sub-img { left: 6%; justify-self: start; } .image-left .sccc-green-behind-img { justify-self: start; max-width: 277px; } .sub-page-image { position: relative; display: grid; padding-bottom: 5em; } .sub-header-contents { padding: 0; } .main-sub-header.header-text-image-split.header-text-image-split--purple::before { height: 60px; bottom: 0; } .outer-main-banner { padding: 4em 0; gap: 1em; grid-template-columns: 1fr; } .main-banner.main-sub-header.header-text-floating-split.header-text-floating-split--white-with-slanted-image .sub-page-image .sub-img { right: unset; justify-self: center; } } /* 404 PAGE */ section.error{ min-height: 60vh; align-content: center; grid-column: 2 / 16; } section.error h1 { color: #0E2D4B; text-align: center; grid-column: 2 / 16; } section.error p { text-align: center; grid-column: 2 / 16; } /* WP CONTENT */ .wp-content-section { grid-column: 4 / 14; grid-template-columns: 1fr; display: grid; gap: 2em; margin: 5em 0; text-align: center; justify-items: center; } .wp-content-section ul li { font-size: 20px; font-weight: 300; } @media only screen and (max-width: 1350px) { .wp-content-section { grid-column: 2 / 16; } } /* MENU BAR DESKTOP VIEW */ header { position: relative; } .grid-header-section { display: grid; background-color: #662E8E; z-index: 99999; border-bottom: 3px solid #8AC53F; } .header-logo-background { position: absolute; top: 0; left: 0; width: 100%; } .header-logo-img { max-width: 207px; } #header { position: fixed; /* top: 2em; */ width: 100%; z-index: 99999999; } main { margin-top: 160px; } @media only screen and (min-width: 1495px) { /* Smooth transitions on scroll */ .contact-banner, .side-menu-contact-info, .grid-header-outer, .header-menu, .header-logo-img { transition: all 0.25s ease; } /* Keep the green contact-banner BACKGROUND visible in compact mode */ #header.header--compact .contact-banner { transform: none; opacity: 1; pointer-events: auto; } /* Slide ONLY the contact info content up out of view */ #header.header--compact .side-menu-contact-info { transform: translateY(-100%); opacity: 0; pointer-events: none; } /* Tighter header bar when compact (you can tweak these) */ #header.header--compact .grid-header-outer { margin: 1.5em 0; padding: 0 2em; } /* Hide all main menu items EXCEPT the CTA buttons */ /*#header.header--compact .header-menu .menu-item:not(.contact-menu-link) { display: none; }*/ /* Keep the CTA buttons aligned to the right in compact mode */ #header.header--compact .header-menu ul { justify-content: flex-end; } #hamburger-input:checked, #hamburger-menu #sidebar-menu{ display: none; } .grid-header-section { display: grid; } .grid-header-outer { display: grid; grid-template-columns: auto auto; grid-column: 1 / 17; align-items: center; margin: 1.5em 0; padding: 0 1em; z-index: 99; } .grid-header-outer a img{ width: 100%; display: grid; } .header-menu { display: grid; } .header-menu ul{ display: flex; text-align: center; justify-content: flex-start; column-gap: 0.8rem; justify-self: end; } .header-menu ul li { list-style: none; align-self: center; position: relative; } .header-menu ul .contact-menu-link { border-right: 0 !important; } .menu-item a span{ text-transform: uppercase; color: #fff; font-weight: 500; font-size: 18px; letter-spacing: 0.9px; } .menu-item a span i { color: #C9B28D; font-size: 30px; } .front-page-menu .menu-item a span{ color: #fff; } .menu-item .sub-menu a span:hover { color: #00528C; } #hamburger-input, .overlay, #hamburger-menu, #sidebar-menu, .header-bar { display: none; } .menu-item-has-children .toggle-icon::before { content: '\f078'; display: inline-block; font-size: 0.7em; color: #fff; font-weight: 900; font-family: "Font Awesome 5 Pro"; } .menu-item-has-children:hover .toggle-icon::before { transform: rotate(180deg); } /* SUB MENU ***************************************************************************/ .menu-item .sub-menu { display: none; } .menu-item .sub-menu .menu-item .sub-menu { display: none; } .menu-item .sub-menu .menu-item-has-children > a:after { color: #F8C624; } .menu-item .sub-menu .menu-item a:hover { font-weight: 700; } /* Make the top-level li the positioning context */ .main-nav > .menu-item { position: relative; } /* Your existing hover styles, with centring tweaks */ .menu-item:hover .sub-menu { display: grid; grid-template-columns: 1fr; text-align: left; z-index: 50 !important; position: absolute; padding: 1em 0 0; top: 100%; left: 50%; transform: translateX(-50%); max-height: 70vh; overflow-y: auto; overflow-x: hidden; } /* No longer needs to be relative */ .menu-item .sub-menu { position: static; /* or just delete this rule entirely */ } /* The arrow */ .menu-item:hover > .sub-menu::before { content: ""; position: absolute; top: 1em; left: 50%; transform: translate(-50%, -100%); border-width: 0 50px 20px 50px; border-style: solid; border-color: transparent transparent #E0D5E8 transparent; } .menu-item .sub-menu .menu-item { text-align: center; border-right: 0; min-width: 297px; background-color: #E0D5E8; } .menu-item .sub-menu .menu-item a span { color: #662E8E !important; text-transform: capitalize; font-size: 18px; font-weight: 500; } .menu-item .sub-menu .menu-item:last-child a { border-bottom: 0 !important; } .menu-item .sub-menu .menu-item a { text-transform: none; display: flex; padding: 0.5em 0; justify-content: center; align-items: center; width: 90%; text-align: center; justify-self: center; margin: 0.2em 0; border-bottom: 2px solid #fff; background-color: #E0D5E8; border-radius: 0; } .contact-menu-link a { font-weight: 700; font-size: 18px; letter-spacing: 2px; padding: 0.3em 0.5em; background: #8AC53F; border-radius: 24px; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; } .contact-menu-link a span { color: #fff !important; } } .donate-menu-link a { font-weight: 700; font-size: 18px; letter-spacing: 2px; padding: 0.3em 0.5em; background: #8AC53F; border-radius: 24px; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; } .donate-menu-link a { background: #fff; } .donate-menu-link a span { color: #662E8E !important; } /* RESPONSIVE MENU UNCLICKED */ @media only screen and (max-width: 1495px) { main { margin-top: 80px; } .grid-header-outer { display: none; } .header-bar { display: grid; grid-template-columns: 1fr auto; grid-column: 2 / 16; align-self: center; margin: 1em 0; z-index: 20; align-items: center; } .header-logo-img { max-width: 142px; margin: 0; } .header-logo-img-inner { max-width: 142px; } .responsive-menu { align-self: center; justify-self: end; display: flex; gap: 0.5em; align-items: center; } .menu-icon { width: 39px; height: 5px; background-color: #8AC53F; margin: 4px 0; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s, height .35s; overflow: hidden; background: #F4F0F0; } #hamburger-input{ display: none; } #hamburger-menu { display: flex; align-items: start; flex-direction: column; } #hamburger-menu #sidebar-menu { grid-template-columns: 1fr; visibility: hidden; position: fixed; top: 0; right: -100%; width: 100%; background-color: #662E8E; transition: 0.3s; box-sizing: border-box; z-index: 20; } /* Scroll Side Menu */ #sidebar-menu { overflow-y: auto; background-color: #662E8E; height: 100%; } /* Hide sub-menu by default */ .sub-menu.hidden { display: none; } #hamburger-menu ul li ul, #hamburger-menu ul li ul li ul { height: auto; } #hamburger-menu li { list-style-type: none; justify-items: center; padding: 0.5em 0; display: grid; } #hamburger-menu a { text-decoration: none; transition: transform 0.5s; align-items: center; display: flex; text-transform: capitalize; justify-content: center; letter-spacing: 0; } #hamburger-menu i { font-size: 18px; } #hamburger-menu a:active{ -ms-transform: translateX(30px); -webkit-transform: translateX(30px); transform: translateX(3px); } #hamburger-input:checked + #hamburger-menu #sidebar-menu { visibility: visible; right: 0; } #scccc-side-nav li > a > span, #scccc-side-nav li > .menu-link-wrapper > a > span { color: #EDF1F8; font-weight: 500; } .side-nav li a span { font-size: 18px; text-transform: uppercase; font-weight: 500; color: #EDF1F8; } #scccc-side-nav { padding: 2em 1em; display: grid; } #scccc-side-nav .sub-menu.hidden { display: none !important; } /* SUB MENU */ #hamburger-menu ul .sub-menu{ display: grid; max-width: 294px; width: 100%; background-color: rgba(224, 213, 232, 0.4); justify-items: center; } #hamburger-menu li .sub-menu .menu-item { list-style-type: none; text-align: center; border-right: 0; width: 90%; justify-self: center; } #hamburger-menu li .sub-menu .menu-item:nth-last-child(1) { border-bottom: none; } #hamburger-menu li:nth-last-child(1) { border-bottom: none; } #sidebar-menu ul li .sub-menu li { padding: 0.7em 0; border-bottom: 1px solid #fff; } #sidebar-menu ul li .sub-menu li a { width: 90%; } #sidebar-menu ul li .sub-menu li a > span { color: #fff; font-size: 18px; font-weight: 500; text-transform: capitalize; } #sidebar-menu ul li .sub-menu li .sub-menu li { padding: 0.1em 0; border: 0; } #sidebar-menu ul li .sub-menu li .sub-menu li a > span { font-weight: 400; font-size: 20px; } .menu-link-wrapper { display: flex; align-items: center; gap: 0.2em; justify-content: center; } .toggle-icon::before { content: '\f078'; display: inline-block; font-size: 0.7em; font-weight: 900; color: #8AC53F; font-family: "Font Awesome 6 Pro"; } .toggle-icon.open::before { transform: rotate(180deg); } } /* CONTACT BANNER */ .contact-banner { background-color: #8AC53F; display: grid; } .side-menu-contact-info { grid-column: 1 / 17; display: flex; justify-content: right; gap: 1em; padding: 0.8em 2em; background-color: #8AC53F; } .side-menu-contact-info a, .side-inner-contact-details { color: #fff; font-weight: 500; display: flex; gap: 0.5em; align-items: center; font-size: 18px; word-break: break-all; text-transform: none !important; } .side-inner-contact-details strong { color: #fff; } .side-inner-contact-details i { color: #662E8E; } .side-menu-contact-info span { font-weight: 300; color: #fff; } .header-tel { font-size: 18px; } .side-menu-contact-info i { color: #662E8E; padding-right: 0.2em; } @media only screen and (max-width: 1000px) { .side-menu-contact-info { display: flex; flex-wrap: wrap; padding: 1em 0; justify-content: center; justify-items: center; align-self: end; grid-column: 1/17 !important; text-align: center; } .responsive-menu a i { color: #EDF1F8; } .side-menu-contact-info i, .side-menu-contact-info a{ font-size: 15px; padding: 0; } .side-menu-contact-info.side-menu-contact-info-mobile .side-inner-contact-details:first-of-type { display: none !important; } .side-menu-contact-info span { display: none; } } /* FOOTER */ .footer { background-color: #662E8E; position: relative; padding: 2em 0; } .wave-top { position: relative; background: #6b2494; color: #fff; } .wave-top::before { content: ""; position: absolute; left: 0; width: 100%; height: 140px; top: -139px; background: #6b2494; clip-path: polygon(100% 100%, 0% 100% , 0.00% 44.52%, 2.00% 42.24%, 4.00% 40.19%, 6.00% 38.37%, 8.00% 36.83%, 10.00% 35.57%, 12.00% 34.61%, 14.00% 33.96%, 16.00% 33.64%, 18.00% 33.64%, 20.00% 33.97%, 22.00% 34.63%, 24.00% 35.59%, 26.00% 36.86%, 28.00% 38.42%, 30.00% 40.24%, 32.00% 42.30%, 34.00% 44.58%, 36.00% 47.04%, 38.00% 49.66%, 40.00% 52.40%, 42.00% 55.23%, 44.00% 58.11%, 46.00% 61.00%, 48.00% 63.87%, 50.00% 66.68%, 52.00% 69.40%, 54.00% 71.98%, 56.00% 74.41%, 58.00% 76.63%, 60.00% 78.64%, 62.00% 80.39%, 64.00% 81.88%, 66.00% 83.07%, 68.00% 83.96%, 70.00% 84.54%, 72.00% 84.79%, 74.00% 84.71%, 76.00% 84.31%, 78.00% 83.59%, 80.00% 82.55%, 82.00% 81.22%, 84.00% 79.60%, 86.00% 77.73%, 88.00% 75.61%, 90.00% 73.29%, 92.00% 70.79%, 94.00% 68.14%, 96.00% 65.38%, 98.00% 62.53%, 100.00% 59.65%); z-index: 0; } .wave-top > * { position: relative; z-index: 1; } .footer-areas { display: grid; grid-template-columns: 1fr 10% 1fr 1fr; grid-column: 2 / 16; margin: 2em 0; z-index: 1; gap: 2em; } .footer-box { align-content: start; gap: 1em; list-style: none; margin: 0; padding: 0; } .footer-box p, .footer-box p strong { color: #FFF; font-weight: 300; } .footer-box p strong { font-weight: 500; } .footer-box p i { color: #C9B28D; } .footer-box p a { font-size: 18px; font-weight: 500; color: #FFF; text-decoration: underline; text-underline-offset: 2px; } .footer-col-four p a { display: flex; flex-wrap: wrap } .outer-footer-details { display: grid; gap: 1em; align-content: start; } .footer-box li { display: flex; align-items: flex-start; gap: 1em; margin: 0; color: #FFF; list-style: none; align-items: center; } .footer-box li i { color: #8AC53F; font-size: 3em; } .footer-box li strong { color: #fff; font-weight: 600; } .col-three ul li { position: relative; margin-bottom: 0.5em; padding-left: 1.8em; } .col-three ul li a { display: block; text-decoration: none; } .col-three ul li i { position: absolute; left: 0; top: 0.2em; font-size: 25px; } .footer-box h4 { font-weight: 500; font-size: 18px; color: #8AC53F; text-transform: uppercase; } .footer-box li a span { text-transform: none; font-weight: 300; font-size: 18px; color: #fff; text-decoration: underline; text-underline-offset: 3px; } .footer-col-four { display: flex; gap: 1em; } .footer-col-four i { color: #C9B28D; font-size: 24px; } .footer-nav { display: grid; grid-template-columns: 1fr; column-gap: 1em; } .inner-social-icons { display: flex; flex-wrap: wrap; gap: 1em; } .inner-social-icons a { display: inline-flex; justify-content: center; align-items: center; color: #fff; background-color: #8AC53F; border-radius: 50%; width: 49px; height: 49px; text-decoration: none; } .inner-social-icons a i { font-size: 32px; color: #fff; } /* sing up form */ form input.wpcf7-form-control.wpcf7-submit { margin: 0 auto; cursor: pointer; } .sign-up-form form p{ background-color: #fff; display: grid; grid-template-columns: auto auto; padding: 8px; border-radius: 30px; } .sign-up-form form br, .sign-up-form form span.wpcf7-spinner{ display: none; } .sign-up-form form input[type=submit]{ display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 18px !important; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; border-radius: 40px; justify-self: center; padding: 0.2em 0.7em; background-color: #8AC53F; border: 1px solid #8AC53F; color: #fff; } .sign-up-form form p > span{ align-self: center; } .sign-up-form form p > span input{ padding-left: 1em; border: 0; width: 100%; border-radius: 30px; } .footer-box img { max-width: 270px; } @media only screen and (max-width: 1220px) { .inner-social-icons a { width: 42px; height: 42px; } .inner-social-icons a i { font-size: 25px; } .col-three ul li { justify-self: center; } .footer-box li { flex-wrap: wrap; justify-content: center; } .sign-up-form { margin-top: 2em; } .footer { padding: 4em 0 2em 0; } .footer-box { gap: 3em; } .lower-footer-content { padding: 2em 0 0 0; display: grid; } .footer-areas { grid-template-columns: 1fr; gap: 2em; justify-content: center; text-align: center; justify-items: center; margin: 2em 0; } .footer-logo { justify-self: center; } .wave-top::before { height: 60px; top: -3.5em } .footer-logo img { display: grid; justify-self: center; } .outer-footer-details { justify-items: center; gap: 1em; } .footer-col-four p a { font-size: 24px; font-weight: 700; } .footer-nav { grid-template-columns: 1fr; } .inner-contact-details { justify-content: center; } .footer-col-four, .footer-inner-contact-details a, .footer-inner-contact-details { flex-direction: column; } .footer-about-nav { gap: 0.5em; } .lower-footer-content p { padding-top: 0; } } /* REPEATED ELEMENTS */ .donate-top-wave { position: relative; background: #E8F4D8; color: #fff; } .donate-top-wave::before { content: ""; position: absolute; left: 0; width: 100%; height: 140px; top: -139px; background: #E8F4D8; clip-path: polygon(100% 100%, 0% 100% , 0.00% 44.52%, 2.00% 42.24%, 4.00% 40.19%, 6.00% 38.37%, 8.00% 36.83%, 10.00% 35.57%, 12.00% 34.61%, 14.00% 33.96%, 16.00% 33.64%, 18.00% 33.64%, 20.00% 33.97%, 22.00% 34.63%, 24.00% 35.59%, 26.00% 36.86%, 28.00% 38.42%, 30.00% 40.24%, 32.00% 42.30%, 34.00% 44.58%, 36.00% 47.04%, 38.00% 49.66%, 40.00% 52.40%, 42.00% 55.23%, 44.00% 58.11%, 46.00% 61.00%, 48.00% 63.87%, 50.00% 66.68%, 52.00% 69.40%, 54.00% 71.98%, 56.00% 74.41%, 58.00% 76.63%, 60.00% 78.64%, 62.00% 80.39%, 64.00% 81.88%, 66.00% 83.07%, 68.00% 83.96%, 70.00% 84.54%, 72.00% 84.79%, 74.00% 84.71%, 76.00% 84.31%, 78.00% 83.59%, 80.00% 82.55%, 82.00% 81.22%, 84.00% 79.60%, 86.00% 77.73%, 88.00% 75.61%, 90.00% 73.29%, 92.00% 70.79%, 94.00% 68.14%, 96.00% 65.38%, 98.00% 62.53%, 100.00% 59.65%); z-index: 0; transform: scaleX(-1); transform-origin: center top; } .donate-top-wave > * { position: relative; z-index: 1; } .donate-left-image, .donate-right-image { position: absolute; max-width: 580px; width: 100%; border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; } .donate-left-image { left: -8em; bottom: 1em; } .donate-right-image { right: -8em; top: -3em; } .book-now-cta { position: relative; min-height: 70vh; /* display: none; */ } .inner-book-now-cta-content { display: grid; grid-template-columns: 1fr; grid-column: 2/16; align-items: center; z-index: 1; justify-content: center; text-align: center; } .inner-book-now-cta-content p, .inner-book-now-cta-content p strong { font-size: 18px; } .cta-content { display: grid; gap: 2em; max-width: 651px; justify-self: center; padding: 5em 0; } @media only screen and (max-width: 1550px) { .donate-left-image, .donate-right-image { max-width: 32%; } } @media only screen and (max-width: 1050px) { .donate-left-image, .donate-right-image { max-width: 230px; } .donate-left-image { left: 50%; bottom: unset; transform: translate(-50%, -50%); top: 4em; } .donate-right-image { right: 50%; top: unset; transform: translate(50%, -50%); bottom: -11em; } .book-now-cta { min-height: 90vh; } .cta-content { gap: 1em; padding: 12em 0; text-align: center; } .cta-content a { justify-self: center; } .inner-book-now-cta-content { grid-column: 2/16; /* padding-top: 9em; */ } .inner-book-now-cta-content p, .inner-book-now-cta-content p strong { line-height: 30px; font-size: 18px; } .inner-book-now-cta-content h2 { font-size: 35px; } .donate-top-wave::before { height: 60px; top: -3.5em; } } /* HOME BLOG PAGE */ .blogs { background-color: #fff; padding: 4em 0; } .blogs-header { display: grid; grid-column: 2/16; padding: 2em 0; text-align: center; gap: 1em; } .blogs-header h2 { color: #00528C; } .blog-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 2em; } .blog-boxes-home { grid-template-columns: repeat(3,1fr); grid-column: 2/16; } .blog-related-boxes { grid-template-columns: 1fr 1fr 1fr; grid-column: 2/16; } .blog-related { background-color:#fff; } .blog-content { display: grid; gap: 1em; text-align: center; } .blog-title-date { display: grid; grid-template-columns: 1fr; gap: 1em; align-items: center; } .blog-content a { justify-self: center; display: flex; gap: 0.5em; align-items: center; font-weight: 700; } .blog-box-home:hover .blog-content p a, .blog-box-home:hover .blog-content p, .blog-box-home:hover .blog-content h3 { color: #fff; } .blog-content a h3 { font-size: 22px; } .blog-content h3 { text-transform: capitalize; color: #662E8E; font-size: 35px; } .blog-content p { font-size: 20px; font-weight: 300; } .blog-box-home { background-color: #E0D5E8; padding: 18em 1em 2em 1em; position: relative; display: grid; gap: 1em; text-align: center; align-content: start; height: 100%; border-radius: 70px; } .blog-box-home:hover { background-color: #662E8E; cursor: pointer; } .blog-content-button { font-size: 22px; text-transform: uppercase; } .blog-content-button::after { content: '\f054'; display: inline-block; font-size: 0.7em; color:#662E8E; font-weight: 900; font-family: "Font Awesome 5 Pro"; } .blog-box-home:hover .blog-content-button, .blog-box-home:hover .blog-content-button::after { color: #8AC53F; } .blog-box-home * { position: relative; z-index: 1; } .blog-box-home-img { width: 100%; display: grid; position: absolute; top: -8em; } .blog-box-home-img img { max-height: 385px; object-fit: cover; border-radius: 50%; aspect-ratio: 1 / 1; max-width: 385px; justify-self: center; height: 100%; } .single-product-img img { max-height: 200px; } .blog-date { position: absolute; bottom: -0.7em; justify-self: center; font-weight: 600; background: #fff; border-radius: 23px; padding: 0.5em 1em; } .post-category-home a { color: #662E8E; font-size: 22px; text-transform: uppercase; } .blog-box-home:hover .post-category-home a { color: #fff; } .outer-blog-link { display: grid; grid-column: 2/16; justify-content: center } @media only screen and (max-width: 1000px) { .blog-box-home-img img { max-height: 245px; max-width: 245px; } .blog-title-date .blog-date{ order: 1; } .blog-title-date h3 { order: 2; } .blog-box { gap: 2em; padding: 1em 1em 2em 1em; } .blogs { padding: 2em 0; } .blog-boxes { grid-template-columns: 1fr; grid-column: 2/16; order: 2; } .blog-boxes-home { order: 1 !important; gap: 2em; padding: 0; } .outer-blog-link { order: 2; } .blog-content { text-align: center; } .blog-content a { justify-self: center; font-weight: 600; } .blog-content span { justify-self: center; } .blog-content p { font-size: 20px; } .blog-date { justify-self: center; } } /* BLOG PAGE */ .blog-page { padding: 4em 0 8em 0; position: relative; border-bottom: 5px solid #95C11F; } .inner-blog-page { display: grid; grid-template-columns: 30% 1fr; grid-column: 2/16; gap: 2em; padding-top: 12em; } /* Blog Search and Categories */ .blog-catergories-search { display: grid; gap: 2em; align-self: start; } .bog-search, .blog-categories { background-color: #E8F4D8; padding: 2em 1em; } .blog-categories { display: grid; gap: 1em; border-radius: 50px; } .blog-categories h3 { font-size: 20px; color: #662E8E; font-weight: 700; text-transform: capitalize; } .blog-categories ul { display: grid; gap: 1em; } .blog-categories ul li { padding: 0.5em; border-bottom: 1px solid #fff; display: flex; justify-content: space-between; align-items: center; } .blog-categories ul li a { font-size: 20px; color: #662E8E; font-weight: 400; text-transform: capitalize; } .blog-categories-search { display: grid; gap: 1em; align-content: start; margin-top: -6em; } .blog-search { background-color: #E8F4D8; border-radius: 50px; } .blog-search .search-submit { background: none; border: none; cursor: pointer; padding: 0; } .blog-search form { display: grid; grid-template-columns: 1fr 20%; } .blog-search .search-submit span, .screen-reader-text { display: none; } /* pagination */ .blog-pagination { display: flex; gap: 2em; align-items: center; flex-wrap: wrap; justify-content: start; padding: 4em 0; } .blog-pagination .page-chip { display: inline-flex; font-weight: 700; } .blog-pagination a.page-numbers, .blog-pagination span.page-numbers { display: inline-flex; align-items: center; justify-content: center; font-size: 30px; } .blog-pagination span.page-numbers.current { color: #662E8E; padding: 8px; text-decoration: underline; } /* search form */ .blog-search form input[type=search] { border: none; resize: vertical; background-color: transparent; padding: 0.8em; width: 100%; text-transform: none; font-size: 20px; font-weight:400; text-align: left; } .search-results-title { padding: 1em 0; } .blog-search form input[type=search]::placeholder { color: #662E8E; } .search-submit { text-align: right; padding-right: 2em !important; } .search-submit i { font-size: 35px; color: #662E8E; } /* Blog Boxes display */ .blog-boxes-page { grid-template-columns: 1fr 1fr; display: grid; gap: 3em; z-index: 1; row-gap: 10em; } /* .blog-boxes-page h2 { display: grid; grid-column-start: span 2; text-align: center; padding-bottom: 0.5em; } */ .blog-box { padding: 1em; background-color: #EFF0F0; box-shadow: 0px 3px 6px #00000029; } .blog-box, .blog-content, .blog-box-img { position: relative; z-index: 1; } .blog-boxes-page .blog-box-img img { max-width: none; width: 100%; max-height: 350px; object-fit: cover; } .blog-box:hover { background-color: #662E8E !important; } .blog-box h4 { font-size: 22px; font-weight: 600; text-transform: uppercase; } .blog-box:hover h4, .blog-box:hover p { color: #fff; } .blog-box a { color: #00AC4B; text-transform: uppercase; font-weight: 600; } .blog-box:hover a { color: #8AC53F; } .blog-button { grid-column-start: span 2; justify-self: center; margin: 2em 0; display: grid; } .blog-box-img { position: relative; } .post-category { justify-self: center; font-weight: 600; } .blog-box-content { display: grid; gap: 1em; padding: 4em 1em 1em 1em; position: relative; } .post-date { position: absolute; padding: 0.5em; display: grid; max-width: 94px; max-height: 86px; top: -2em; left: 0.5em; z-index: 1; text-align: center; font-size: 22px; font-weight: 700; height: 100%; align-items: center; width: 100%; letter-spacing: 0; bottom: -0.7em; justify-self: center; font-weight: 600; background: #fff; border-radius: 23px; padding: 0.5em 1em; } .post-date-year { font-size: 18px; font-weight: 700; } @media only screen and (max-width: 1120px) { .inner-blog-page { grid-template-columns: 1fr; padding-top: 2em; } .blog-boxes-page { grid-template-columns: 1fr; padding: 10em 0 0; } .blog-boxes-page .blog-content { display: grid; gap: 1em; flex-direction: column; align-items: start; } .blog-large-triangle { display: none; } .blog-page { padding: 2em 0; } .blog-categories-search { gap: 1em; margin-top: 0; } .post-date { left: 0.2em; } .post-category { right: auto; left: auto; justify-self: center; } } /* BREADCRUMBS */ .breadcrumbs { display: flex; font-size: 30px; font-weight: 600; padding: 0 0 1em 0; } /* SINGLE BLOG POST */ section.single-post { position: relative; padding: 2em 0; } .inner-single-post { grid-column: 2 / 16; margin: 0 0 4em 0; gap: 3em; } .inner-single-post h1 { text-align: center; } .single-blog-image { position: relative; } .single-blog-image img { display: block; width: 100%; object-fit: cover; max-height: 798px; border-radius: 42px; } .single-content { display: grid; gap: 2em; position: relative; max-width: 85%; padding: 3em 0 2em 0; justify-self: center; } .blog-box-single { background-color: #fff; } .single-content p { font-weight: 300; } .single-content h2 { font-weight: 500; font-size: 50px; } .single-content a { color: #662E8E; font-size: 22px; text-transform: uppercase; } .outer-blog-boxes-single { grid-column: 2 / 16; } .blog-page-single .label-header-single { text-align: left; font-weight: 500; margin: 0; } .single-post-meta { bottom: auto; top: -1em; justify-self: start; } .blog-button-single { grid-column: 2 / 16; display: flex; justify-content: space-between; } .blog-page-single { padding: 5em 0 8em 0; background-color: #E0D5E8; } .blog-button-single a { font-weight: 500; } .blog-button-single a i { color: #6b2494; } .single-date { top: -1em; justify-self: unset; bottom: unset; } .blog-boxes-single { margin-top: 10em; } @media only screen and (max-width: 1150px) { .blog-page-single .label-header-single { text-align: center; } .single-post { padding: 2em 0; } .blog-boxes-single { grid-template-columns: 1fr; padding-bottom: 10em; gap: 10em; } .blog-button-single { display: grid; gap: 1em; justify-content: center; padding: 1em 0 2em 0; } .single-blog-image { height: 100%; } .single-content h2 { font-size: 35px; } .inner-single-post { grid-column: 2/16; margin: 0 0 2em 0; } .single-blog { display: grid; } .single-content, .single-content h1 { text-align: center; } .single-blog-image { float: none; width: 100%; } .single-blog img { z-index: 1; } .single-blog-image img { max-height: 260px; } .single-content { max-width: 100%; } .blog-page-single { padding: 2em 0 } .single-post-meta { justify-self: center; } .single-date { justify-self: center; } } /* SINGLE PROJECTS */ .single-page-banner { background-color: #0E2D4B; background-image: none; min-height: 25vh !important; align-items: center; } .full-width-image-single-project { margin-top: -18em; } /* CUSTOM POST ARCHIVE */ .sub-page-banner { position: relative; background-size: cover; background-position: center; min-height: 30vh; } .sub-page-banner::before { content: ""; position: absolute; inset: 0; z-index: 0; background-size: cover, cover; background-position: 0% 0%, center; background-repeat: no-repeat, no-repeat; } /* SEARCH PAGE */ .search-banner .sub-page-banner-inner { display: grid; grid-column: 2/16; text-align: center; align-items: center; } .search-banner .sub-page-banner-inner h1 { color: #fff; } /* PICTURE WITH FADE */ .projects-banner { position: relative; z-index: 1; } .projects-page-banner { background-color: #0E2D4B; align-items: center; background-image: none; min-height: 40vh; } .projects-page-banner p { color: #fff; max-width: 677px; justify-self: center; } /* PROJECT ARCHIVE */ .project-sub-content { grid-column: 2/16; text-align: center; display: grid; gap: 1em; } .project-sub-content p { color: #28499A; } .cpt-projects { padding: 5em 0; } .inner-cpt-projects { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column: 2/16; gap: 3em; } .project-box { background-image: var(--project-bg); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 593px; overflow: hidden; position: relative; } .project-box.no-thumb { background: #f4f6fa; } .project-box-inner { inset: 0; position: relative; height: 100%; display: flex; align-items: flex-end; } .project-box .projects-content { color: #fff; padding: 1.25rem 1.5rem; background-color: rgba(14,45,75,.9); margin-left: 2em; width: calc(100% - 2em); box-sizing: border-box; } .project-box .projects-content h3 { margin: 0 0 .5rem; color: #fff; } .project-box .projects-content p { padding-right: 2em; } .project-box .projects-content p, .project-box .projects-content p a { color: #fff; } .project-box .projects-content a.all-button { display: inline-block; } .project-box .projects-content p { opacity: 0; max-height: 0; overflow: hidden; margin-top: 0; transition: opacity .25s ease, max-height .25s ease, margin-top .25s ease; } .project-box:hover .projects-content p, .project-box .projects-content:hover p, .project-box .projects-content:focus-within p { opacity: 1; max-height: 200px; margin-top: .5rem; } .archive-project-button { position: absolute; right: 1em; bottom: 1.5em } @media (max-width: 1000px) { .project-box .projects-content p { opacity: 1; max-height: 100px; } .project-box .projects-content:focus-within p { margin-top: 0; } .project-box .projects-content { margin-left: 0; width: 100%; } .project-box { min-height: 450px; } } /* PROJECTS HOME PAGE */ .home-projects { padding: 5em 0; } .projects-header-contents, .all-projects { display: grid; grid-column: 2/16; text-align: center; gap: 1em; } .inner-home-projects { display: grid; grid-template-columns: repeat(3,1fr); grid-column: 2/16; gap: 1em; padding: 2em 0 4em 0; } /* SINGLE PROJECTS PAGE */ .single-projects-header-contents { display: grid; grid-column: 2 / 17; gap: 1em; grid-template-columns: auto 1fr; } .single-projects-header-contents hr { width: 100%; border: 0; border-bottom: 3px solid #C9B28D; display: grid; align-self: center; } @media (max-width: 1150px) { .single-projects-header-contents { grid-column: 2 / 16; grid-template-columns: 1fr; text-align: center; } .single-projects-header-contents hr { display: none; } .cpt-projects { padding: 3em 0; } .home-projects { padding: 3em 0; } .inner-home-projects { grid-template-columns: 1fr; padding: 2em 0; } .inner-cpt-projects { grid-template-columns: 1fr; gap: 2em; padding: 2em 0; } .inner-cpt-projects .blog-content, .inner-home-projects .blog-content { padding: 0 !important; } .inner-cpt-projects .blog-content a, .inner-home-projects .blog-content a { font-size: 18px; } } /* SIMPLE TEXT CONTENT */ .simple-text { padding: 5em 0; } .simple-text-blue { background-color: #EDF1F8; } .inner-simple-text { grid-column: 2 / 16; text-align: center; justify-self: center; max-width: 947px; gap: 2em; display: grid; } .inner-simple-text i { color: #C9B28D; font-size: 26px; } .inner-simple-text p { display: grid; } .simple-text span { background-color: #F5F5F5; padding: 1em 2em; justify-self: center; display: flex; } .simple-text span i { margin-right: 0.5em; } @media only screen and (max-width: 1000px) { .simple-text-content { padding: 4em 0 2em 0; } .cpt-inner-simple-text { grid-column: 2/16; } } /* TEXT IMAGE SPLIT */ .text-image-split { padding: 5em 0 10em 0; position: relative; } .text-image-split::before { content: ""; position: absolute; left: 0; width: 100%; height: 140px; top: -139px; background: var(--bg-color, #E0D5E8); clip-path: polygon(100% 100%, 0% 100%, 0.00% 44.52%, 2.00% 42.24%, 4.00% 40.19%, 6.00% 38.37%, 8.00% 36.83%, 10.00% 35.57%, 12.00% 34.61%, 14.00% 33.96%, 16.00% 33.64%, 18.00% 33.64%, 20.00% 33.97%, 22.00% 34.63%, 24.00% 35.59%, 26.00% 36.86%, 28.00% 38.42%, 30.00% 40.24%, 32.00% 42.30%, 34.00% 44.58%, 36.00% 47.04%, 38.00% 49.66%, 40.00% 52.40%, 42.00% 55.23%, 44.00% 58.11%, 46.00% 61.00%, 48.00% 63.87%, 50.00% 66.68%, 52.00% 69.40%, 54.00% 71.98%, 56.00% 74.41%, 58.00% 76.63%, 60.00% 78.64%, 62.00% 80.39%, 64.00% 81.88%, 66.00% 83.07%, 68.00% 83.96%, 70.00% 84.54%, 72.00% 84.79%, 74.00% 84.71%, 76.00% 84.31%, 78.00% 83.59%, 80.00% 82.55%, 82.00% 81.22%, 84.00% 79.60%, 86.00% 77.73%, 88.00% 75.61%, 90.00% 73.29%, 92.00% 70.79%, 94.00% 68.14%, 96.00% 65.38%, 98.00% 62.53%, 100.00% 59.65%); z-index: 9999; } .text-image-split.light-purple-image::before { top: -140px; } .full-text-split { padding: 0 !important; min-height: 35vh; } .text-image-split.dark-blue-image .split-content p, .text-image-split.dark-blue-image .split-content h2, .text-image-split.dark-blue-image .split-content a, .text-image-split.dark-blue-image .split-content p strong { color: #fff; } .split-content i { color: #8AC53F; } .split-content ol li { list-style-type: decimal; margin-left: 1em; font-size: 18px; } .split-content ol li ul li { list-style-type: disc; } .split-content ul li { list-style-type: disc; margin-left: 1em; list-style-position: inside; } .split-content img { max-width: 243px; width: 100%; padding: 1em; border-radius: 105px; background-color: #fff; } .split-content h2 label { color: #8AC53F; text-transform: none; font-weight: 600; letter-spacing: 0; font-size: 40px; } .split-content h2 span { font-weight: 300; } /* RIGHT IMAGE */ .inner-text-image-split { display: grid; grid-template-columns: 1fr 1fr; grid-column: 2/16; gap: 4em; } .inner-text-text-split { grid-column: 1/17; } .inner-floating-split { gap: 4em; } .inner-floating-split > .split-content-text { max-width: 100%; } .split-content { display: grid; gap: 1em; align-content: center; } .split-content-text { padding: 0; justify-self: center; align-items: center; max-width: 550px; padding: 4em 0; } .split-content-text li { color: #fff; } .split-content li::marker { color: #8AC53F; } .split-content-text i { color: #C9B28D; font-size: 35px; margin-right: 0.5em; } .split-content-text h1 { color: #fff; } .split-content-text p { display: flex; align-items: center; } .split-content p span { background-color: #EDF1F8; padding: 1em; display: flex; gap: 1em; align-items: center; font-weight: 700; color: #0E2D4B; } .split-content a, .split-content a strong { justify-self: left; /* color: #8AC53F; */ } .image-split { position: relative; justify-self: center; } .image-split.image-circle .split-image { max-width: 664px; max-height: 664px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; border: 15px solid #8AC53F; } .image-circle .img-list-overlay { display: none; } .image-no-circle { display: grid; } .image-split.image-no-circle .split-image { border: none; z-index: 1; align-self: center; } .video-link-button { position: absolute; bottom: 30%; z-index: 3; right: 4em; } .floating-image-split { position: relative; align-items: center; display: grid; align-content: center; align-self: center; } /* LEFT IMAGE */ .inner-text-image-split.image-left .image-split { order: 1; } .inner-text-image-split.image-left .split-content { order: 2; } .inner-text-image-split.image-left .right-image { align-self: center; justify-self: center; max-width: 695px; } .split-content.green-image h2, .split-content.green-image p { color: #fff; } .split-content.green-image label { color: #F4E038; } .split-content.green-image a { background-color: #F4E038; border-color: #F4E038; color: #222320; } .sliders-test-slider.text_choice { background: transparent !important; } /* TWO IMAGE RIGHT */ .inner-text-image-split.image-right.grey-image > .image-split > .inner-image-split:first-child { z-index: 999; top: -4em; } .inner-text-image-split.image-right.grey-image > .image-split > .inner-image-split:last-child { bottom: -5em; } .inner-image-split-text-text, .inner-image-split-text-text img { height: 100%; } /* FLOATING IMAGE TEXT SPLIT */ .floating-split { padding: 5em 0; } @media only screen and (max-width: 1000px) { .split-content h2 label { font-size: 25px; } .split-content ul { list-style-position: inside; } .image-split.image-circle .split-image { border: 10px solid #8AC53F; } .text-image-split::before { height: 60px; top: -60px; } .split-content a { justify-self: center; } .inner-text-image-split.image-right.grey-image > .image-split > .inner-image-split:first-child { top: 2em; } .text-image-split.grey-image { padding: 2em 0 7em 0; } .full-text-split > .inner-text-text-split > .split-content-text { order: 1; padding: 5em 1em 3em 1em; justify-items: center; } .full-text-split > .inner-text-text-split > .image-split-text-text { order: 2; } .inner-text-image-split { grid-template-columns: 1fr; } .inner-image-split { position: relative; } .split-content { padding: 0; text-align: center; } .text-image-split { padding: 2em 0 5em 0; } .inner-image-split:last-child { bottom: -2em; } .inner-image-split:first-child { top: 2em; } .video-link-button, .inner-text-image-split.image-left .video-link-button { bottom: 1em; right: 1em; } .inner-text-image-split.image-left .image-split, .inner-text-image-split.image-right .image-split { order: 2; } .inner-text-image-split.image-left .split-content, .inner-text-image-split.image-right .split-content { order: 1; } .inner-floating-split > .split-content-text { order: 1; } .inner-floating-split > .image-split-text-text { order: 2; } .inner-floating-split { gap: 2em; } } /* TEXT AND BOX GRID SPLIT */ .text-box-grid-split { background-color: #662E8E; padding: 5em 0; position: relative; } .text-box-grid-split::before { content: ""; position: absolute; left: 0; width: 100%; height: 140px; top: -8em; background: var(--bg-color, #662E8E); clip-path: polygon(100% 100%, 0% 100%, 0.00% 44.52%, 2.00% 42.24%, 4.00% 40.19%, 6.00% 38.37%, 8.00% 36.83%, 10.00% 35.57%, 12.00% 34.61%, 14.00% 33.96%, 16.00% 33.64%, 18.00% 33.64%, 20.00% 33.97%, 22.00% 34.63%, 24.00% 35.59%, 26.00% 36.86%, 28.00% 38.42%, 30.00% 40.24%, 32.00% 42.30%, 34.00% 44.58%, 36.00% 47.04%, 38.00% 49.66%, 40.00% 52.40%, 42.00% 55.23%, 44.00% 58.11%, 46.00% 61.00%, 48.00% 63.87%, 50.00% 66.68%, 52.00% 69.40%, 54.00% 71.98%, 56.00% 74.41%, 58.00% 76.63%, 60.00% 78.64%, 62.00% 80.39%, 64.00% 81.88%, 66.00% 83.07%, 68.00% 83.96%, 70.00% 84.54%, 72.00% 84.79%, 74.00% 84.71%, 76.00% 84.31%, 78.00% 83.59%, 80.00% 82.55%, 82.00% 81.22%, 84.00% 79.60%, 86.00% 77.73%, 88.00% 75.61%, 90.00% 73.29%, 92.00% 70.79%, 94.00% 68.14%, 96.00% 65.38%, 98.00% 62.53%, 100.00% 59.65%); z-index: 0; } .text-box-img { position: absolute; bottom: 0; left: 0; max-width: 550px; } .inner-text-box-grid-split { display: grid; grid-column: 2/16; grid-template-columns: 38% 1fr; gap: 6em; min-height: 70vh; } .inner-content { display: grid; gap: 1em; align-content: start; } .inner-content h2, .inner-content p { color: #fff; text-transform: none; } .inner-grid-box h3 { grid-column-start: span 2; color: #8AC53F; font-weight: 600; } .location-grid-box { display: grid; grid-template-columns: 1fr 1fr; gap: 2em; padding-bottom: 3em; } .grid-box { background-color: #fff; border-radius: 25px; padding: 2em 1.5em; display: grid; gap: 1em; align-content: start; height: 100%; } .grid-box p, .grid-box h4 { color: #662E8E; position: relative; } .grid-box h4::before { content: "•"; display: inline-block; color: #8AC53F; font-size: 2em; line-height: 1; position: absolute; left: -0.45em; top: 50%; transform: translate(-50%, -50%); } .content_only { display: grid; gap: 1em; } .content_only p .link-grid, .closing-content p .link-grid { background-color: #8AC53F; border-radius: 40px; padding: 0.5rem 1.5rem; color: #fff; text-transform: uppercase; font-weight: 600; display: grid; justify-self: center; } .text-box-grid-split-white-background { padding: 5em 0 10em 0; } .text-box-grid-split-white-background .content_only p, .text-box-grid-split-white-background .inner-text-box-grid-split h2 { color: #662E8E; } .content_only ul li { font-weight: 600; padding: 0.3em 0; list-style: disc; margin-left: 1em; } .content_only ul li::marker { color: #8AC53F; } @media only screen and (max-width: 1250px) { .content_only { text-align: center; padding: 0 0 2em 0; } .location-grid-box { grid-template-columns: 1fr; } .inner-grid-box h3 { grid-column-start: span 1; text-align: center; } .text-box-img { max-width: 47% } } @media only screen and (max-width: 1000px) { .inner-text-box-grid-split { grid-template-columns: 1fr; gap: 2em; text-align: center; } .inner-text-box-grid-split ul li { list-style-position: inside; } .grid-box { text-align: center; } .grid-box h4::before { left: 50%; top: -0.8em; } .inner-content { text-align: center; } .text-box-grid-split { padding: 2em 0 60% 0; } .location-grid-box { padding-bottom: 2em; } .text-box-img { max-width: 60% } .text-box-grid-split::before { height: 60px; top: -3.5em; } } /* ICON GRID */ .icon-banner { padding: 5em 0 10em 0; row-gap: 5em; background-color: #E0D5E8; position: relative; } /* .icon-grid-wave-after::after { content: ""; position: absolute; left: 0; width: 100%; height: 140px; bottom: 0; background: #6b2494; clip-path: polygon(100% 100%, 0% 100%, 0.00% 44.52%, 2.00% 42.24%, 4.00% 40.19%, 6.00% 38.37%, 8.00% 36.83%, 10.00% 35.57%, 12.00% 34.61%, 14.00% 33.96%, 16.00% 33.64%, 18.00% 33.64%, 20.00% 33.97%, 22.00% 34.63%, 24.00% 35.59%, 26.00% 36.86%, 28.00% 38.42%, 30.00% 40.24%, 32.00% 42.30%, 34.00% 44.58%, 36.00% 47.04%, 38.00% 49.66%, 40.00% 52.40%, 42.00% 55.23%, 44.00% 58.11%, 46.00% 61.00%, 48.00% 63.87%, 50.00% 66.68%, 52.00% 69.40%, 54.00% 71.98%, 56.00% 74.41%, 58.00% 76.63%, 60.00% 78.64%, 62.00% 80.39%, 64.00% 81.88%, 66.00% 83.07%, 68.00% 83.96%, 70.00% 84.54%, 72.00% 84.79%, 74.00% 84.71%, 76.00% 84.31%, 78.00% 83.59%, 80.00% 82.55%, 82.00% 81.22%, 84.00% 79.60%, 86.00% 77.73%, 88.00% 75.61%, 90.00% 73.29%, 92.00% 70.79%, 94.00% 68.14%, 96.00% 65.38%, 98.00% 62.53%, 100.00% 59.65%); z-index: 0; } */ .icon-header-content { grid-column: 2/16; text-align: center; max-width: 916px; justify-self: center; gap: 1em; display: grid; } .inner-icon-banner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column: 2/16; gap: 2em; grid-auto-rows: 1fr; align-items: stretch; } .icon-banner-box { display: flex; flex-direction: column; align-items: center; gap: 1em; padding: 7em 2em 2em 2em; background: #fff; border-radius: 37px; text-align: center; position: relative; height: 100%; } .icon-banner-box:hover { background-color: #B9DC8C; } .icon-banner-box:hover p { color: #662E8E; } .inner-icon { background-color: #8AC53F; border-radius: 50%; max-width: 140px; aspect-ratio: 1 / 1; align-items: center; display: grid; width: 100%; position: absolute; top: -3em; } .inner-icon i { font-size: 5em; color: #662E8E; z-index: 999; } .icon-banner-box h3 { font-size: 30px; } .icon-link-content { margin-top: auto; text-align: center; display: block; } .icon-banner-box:hover .icon-link-content a{ background-color: #662E8E; border: 1px solid #662E8E } @media only screen and (max-width: 1000px) { .icon-banner { padding: 3em 0; gap: 1em; } .inner-icon-banner { grid-template-columns: 1fr; gap: 4em; padding: 4em 0; grid-auto-rows: unset; } .icon-link-content { padding: 0; margin-top: unset; } .icon-banner-box { padding: 5em 1em 1em; } /* .icon-grid-wave-after::after { height: 60px; } */ .inner-icon { max-width: 104px; } .inner-icon i { font-size: 4em; } } /* PROJECTS SLIDER */ .project-slider { padding: 5em 0; background-color: #fff; } .projects-header-content { display: grid; grid-column: 2/16; gap: 1em; } .projects-header-actions a { justify-self: start; } .inner-projects-header { display: grid; gap: 1em; max-width: 711px; text-align: left; } .blog-area { grid-column: 2/16; min-width: 0; } .projects-swiper { width: 100%; overflow: hidden; } .projects-swiper .swiper-wrapper { align-items: stretch; } .projects-swiper .swiper-slide { height: auto; box-sizing: border-box; } .projects-nav { grid-column: 2/16; position: relative; } .projects-prev, .projects-next { width: 36px; height: 36px; border: none; background: transparent; color: #111827; } .swiper-area { margin: 2em 0 4em 0; grid-column: 2/17; } .projects-prev::after, .projects-next::after { content: none !important; } .projects-prev i, .projects-next i { font-size: 3em; } .projects-prev .swiper-navigation-icon, .projects-next .swiper-navigation-icon { display: none !important; } .swiper-button-disabled { opacity: 0.35; cursor: default; } .swiper-button-next, .swiper-button-prev { top: auto; } .project-box { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; } .archive-project-button { position: absolute; display: block; background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; } .all-button.archive-project-button { background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; transform: none !important; } .projects-content { position: relative; z-index: 2; } @media (max-width: 1000px) { .project-slider { padding: 3em 0; } .swiper-area { margin: 2em 0 0; } .projects-swiper { padding: 2em 0 1.5em; } .projects-nav { justify-content: flex-start; margin-top: 1rem; } .inner-projects-header { text-align: center; } .projects-header-actions { justify-self: center; } } /* HOME BLOGS */ .home-blog { background-color: #fff; padding: 6em 0 10em 0; position: relative; } .home-blog::before { content: ""; position: absolute; left: 0; width: 100%; top: -8em; background: #fff; clip-path: polygon(100% 100%, 0% 100%, 0.00% 44.52%, 2.00% 42.24%, 4.00% 40.19%, 6.00% 38.37%, 8.00% 36.83%, 10.00% 35.57%, 12.00% 34.61%, 14.00% 33.96%, 16.00% 33.64%, 18.00% 33.64%, 20.00% 33.97%, 22.00% 34.63%, 24.00% 35.59%, 26.00% 36.86%, 28.00% 38.42%, 30.00% 40.24%, 32.00% 42.30%, 34.00% 44.58%, 36.00% 47.04%, 38.00% 49.66%, 40.00% 52.40%, 42.00% 55.23%, 44.00% 58.11%, 46.00% 61.00%, 48.00% 63.87%, 50.00% 66.68%, 52.00% 69.40%, 54.00% 71.98%, 56.00% 74.41%, 58.00% 76.63%, 60.00% 78.64%, 62.00% 80.39%, 64.00% 81.88%, 66.00% 83.07%, 68.00% 83.96%, 70.00% 84.54%, 72.00% 84.79%, 74.00% 84.71%, 76.00% 84.31%, 78.00% 83.59%, 80.00% 82.55%, 82.00% 81.22%, 84.00% 79.60%, 86.00% 77.73%, 88.00% 75.61%, 90.00% 73.29%, 92.00% 70.79%, 94.00% 68.14%, 96.00% 65.38%, 98.00% 62.53%, 100.00% 59.65%); z-index: 6; height: 140px; transform: scaleX(-1); } .home-blog > .blog-area > .inner-blog-header { text-align: center; display: grid; gap: 1em; } .home-blog > .blog-area > .outer-blog-boxes > .blog-boxes { grid-template-columns: 1fr 1fr 1fr; padding-top: 10em; gap: 5%; } .home-blog-button { display: grid; justify-self: center; } .inner-home-blog-button { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1em; align-items: center; padding: 5em 0 0; } .inner-home-blog-button hr { border: none; border-bottom: 2px solid #A382BB; width: 100%; } @media (max-width: 1400px) { .blog-box-home { padding: 70% 1em 2em 1em; } } @media (max-width: 1000px) { .home-blog > .blog-area > .outer-blog-boxes > .blog-boxes { grid-template-columns: 1fr; gap: 10em } .home-blog::before { height: 60px; top: -3.5em; } .home-blog { padding: 3em 0 14em 0; } .blog-box-home { padding: 10em 1em 2em 1em; } } /* INNER TEXT BANNER */ .text-banner { background-color: #fff; } .outer-text-banner { gap: 8%; grid-column: 2/16; } .inner-text-banner { text-align: center; align-content: start; display: grid; gap: 1em; } .inner-text-banner h3 { font-size: 22px; } .inner-text-banner img { border-radius: 50%; max-width: 307px; aspect-ratio: 1 / 1; object-fit: cover; justify-self: center; border: 10px solid #8AC53F; } @media only screen and (max-width: 1000px) { .outer-text-banner { grid-column: 2/16; gap: 2em; padding: 2em 0; } .inner-text-banner img { border-radius: 50%; max-width: 232px; } } /* TEAMS */ .teams { background-color: #F5F5F5; padding: 5em 0; } .inner-teams-header { display: grid; grid-column: 2/16; text-align: center; gap: 1em; align-items: center; } .inner-teams { display: flex; grid-column: 2/16; gap: 3em; flex-wrap: wrap; justify-content: space-evenly; padding: 16em 0 5em 0; row-gap: 14em; } .teams-box { position: relative; padding: 14em 4em 4em; text-align: center; max-width: 578px; background-color: #fff; display: grid; gap: 1em; } .teams-box p label { color: #C9B28D; text-transform: capitalize; letter-spacing: 0; } .teams-box img { position: absolute; top: -11em; border-radius: 50%; border: 5px solid #C9B28D; justify-self: center; max-width: 340px; aspect-ratio: 1 / 1; object-fit: cover; height: auto; } @media only screen and (max-width: 1000px) { .teams-box { padding: 8em 1em 1em; } .inner-teams { row-gap: 8em; padding: 7em 0 0 0; } .teams { row-gap: 2em; } .teams-header { gap: 5px; } .inner-teams h3 { font-size: 20px; } .teams-col-split { padding: 10em 0 5em 0; } .teams-box img { top: -6em; max-width: 183px; } } /* TWO FLOATING IMAGES */ .two-floating-images { background-color: #0E2D4B; /* min-height: 30vh; */ position: relative; } .inner-two-floating-images { position: relative; display: grid; grid-column: 2 / 16; grid-template-columns: 1fr 1fr; gap: 1em; z-index: 1; margin-bottom: 4em; justify-self: center; } .inner-two-floating-images img { max-width: 719px; aspect-ratio: 1/1; object-fit: cover; } .floating-border { position: absolute; min-height: 195px; bottom: 0; background-color: #fff; display: grid; grid-column: 1 / 17; width: 100%; } @media only screen and (max-width: 1000px) { .inner-two-floating-images { grid-template-columns: 1fr; } } /* GALLERY */ .gallery { padding: 5em 0; } .gallery-header-content, .inner-gallery { display: grid; grid-column: 2/16; gap: 1em; text-align: center; } .gallery-header-content p { font-weight: 700; } .inner-gallery { grid-template-columns: repeat(3,1fr); gap: 2em; padding: 2em 0; } .inner-gallery img { height: 100%; object-fit: cover; max-height: 446px; } @media (max-width: 1000px) { .inner-gallery { grid-template-columns: 1fr 1fr; gap: 1em; } .inner-gallery img { max-height: 191px; } .gallery { padding: 2em 0; } } @media (max-width: 600px) { .inner-gallery { grid-template-columns: 1fr; } } /* TESTIMONIALS */ .testimonials { background-color: #F5F5F5; padding: 5em 0; } .inner-testimonials { display: grid; grid-column: 2/16; max-width: 1070px; justify-self: center; text-align: center; gap: 2em; } .inner-testimonials h2 { font-size: 40px; } .inner-testimonials p strong { font-size: 25px; } .inner-testimonials p label { font-weight: 600; font-size: 18px; letter-spacing: 0; text-transform: none; color: #0E2D4B; } .inner-testimonials p span strong { font-weight: 700; color: #EDF1F8; } @media (max-width: 1000px) { .testimonials { padding: 2em 0; } .inner-testimonials p { font-size: 25px; } .inner-testimonials { gap: 1em; } .inner-testimonials p span { font-size: 20px; } } /* REWARDS LOGOS */ .rewards-logo { padding: 4em 0; background-color: #E8F4D8; } .rewards-logo h2 { display: grid; grid-column: 2/16; text-align: center; } .inner-rewards-logo { display: flex; grid-column: 2/16; justify-content: center; gap: 5em; padding-top: 2em; } .logo-image { background-color: #fff; border-radius: 50%; max-width: 237px; aspect-ratio: 1 / 1; align-content: center; width: 100%; display: grid; } .logo-image img { max-width: 150px; justify-self: center; } @media (max-width: 1000px) { .inner-rewards-logo { flex-wrap: wrap; gap: 3em; } } /* GREEN WAVY TEXT IMAGE SPLIT */ .green-wavy-text-image-split { background-color: #E8F4D8; position: relative; } .inner-green-wavy-text-image-split { display: grid; grid-column: 1/16; grid-template-columns: 45% 1fr; position: relative; z-index: 1; gap: 1em; } .green-wavy-contents { display: grid; gap: 1em; text-align: left; align-content: center; padding: 8em 0; max-width: 645px; } .green-wavy-contents a { justify-self: start; } .green-wavy-image { position: relative; } .green-wavy-image .green-image { border-radius: 50%; aspect-ratio: 1 / 1; z-index: 2; border: 20px solid #8AC53F; max-width: 550px; width: 65%; object-fit: cover; position: absolute; align-self: center; bottom: 5em; left: 14%; } .behind-green-wavy-img { position: absolute; bottom: 0; right: unset; transform: rotate(0deg); max-width: 550px; width: 65%; } .green-wavy-wave-top::before { content: ""; position: absolute; left: 0; width: 100%; height: 140px; top: -8em; background: #E8F4D8; clip-path: polygon(100% 100%, 0% 100%, 0.00% 44.52%, 2.00% 42.24%, 4.00% 40.19%, 6.00% 38.37%, 8.00% 36.83%, 10.00% 35.57%, 12.00% 34.61%, 14.00% 33.96%, 16.00% 33.64%, 18.00% 33.64%, 20.00% 33.97%, 22.00% 34.63%, 24.00% 35.59%, 26.00% 36.86%, 28.00% 38.42%, 30.00% 40.24%, 32.00% 42.30%, 34.00% 44.58%, 36.00% 47.04%, 38.00% 49.66%, 40.00% 52.40%, 42.00% 55.23%, 44.00% 58.11%, 46.00% 61.00%, 48.00% 63.87%, 50.00% 66.68%, 52.00% 69.40%, 54.00% 71.98%, 56.00% 74.41%, 58.00% 76.63%, 60.00% 78.64%, 62.00% 80.39%, 64.00% 81.88%, 66.00% 83.07%, 68.00% 83.96%, 70.00% 84.54%, 72.00% 84.79%, 74.00% 84.71%, 76.00% 84.31%, 78.00% 83.59%, 80.00% 82.55%, 82.00% 81.22%, 84.00% 79.60%, 86.00% 77.73%, 88.00% 75.61%, 90.00% 73.29%, 92.00% 70.79%, 94.00% 68.14%, 96.00% 65.38%, 98.00% 62.53%, 100.00% 59.65%); z-index: 0; } @media (max-width: 1430px) { .green-wavy-image .green-image { width: 74%; } } @media (max-width: 1100px) { .inner-green-wavy-text-image-split { grid-template-columns: 1fr; grid-column: 1/17; gap: 5em; padding: 2em 0 0; } .green-wavy-contents { text-align: center; padding: 0 1em; } .green-wavy-contents a { justify-self: center; } .green-wavy-image .green-image { position: relative; bottom: 3em; width: 83%; border: 10px solid #8AC53F; } .green-wavy-contents { order: 1; } .green-wavy-image { order: 2; } .green-wavy-wave-top::before { height: 60px; top: -3.5em; } } .text-text-split { padding: 5em 0 10em 0; position: relative; /* z-index: 1; */ } .text-text-split::before { content: ""; position: absolute; left: 0; height: 140px; width: 100%; top: -139px; background: var(--bg-color, #fff); clip-path: polygon(100% 100%, 0% 100%, 0.00% 44.52%, 2.00% 42.24%, 4.00% 40.19%, 6.00% 38.37%, 8.00% 36.83%, 10.00% 35.57%, 12.00% 34.61%, 14.00% 33.96%, 16.00% 33.64%, 18.00% 33.64%, 20.00% 33.97%, 22.00% 34.63%, 24.00% 35.59%, 26.00% 36.86%, 28.00% 38.42%, 30.00% 40.24%, 32.00% 42.30%, 34.00% 44.58%, 36.00% 47.04%, 38.00% 49.66%, 40.00% 52.40%, 42.00% 55.23%, 44.00% 58.11%, 46.00% 61.00%, 48.00% 63.87%, 50.00% 66.68%, 52.00% 69.40%, 54.00% 71.98%, 56.00% 74.41%, 58.00% 76.63%, 60.00% 78.64%, 62.00% 80.39%, 64.00% 81.88%, 66.00% 83.07%, 68.00% 83.96%, 70.00% 84.54%, 72.00% 84.79%, 74.00% 84.71%, 76.00% 84.31%, 78.00% 83.59%, 80.00% 82.55%, 82.00% 81.22%, 84.00% 79.60%, 86.00% 77.73%, 88.00% 75.61%, 90.00% 73.29%, 92.00% 70.79%, 94.00% 68.14%, 96.00% 65.38%, 98.00% 62.53%, 100.00% 59.65%); z-index: 2; } .inner-header-text { grid-column: 2 / 16; gap: 1em; display: grid; text-align: center; padding-bottom: 2em; } .inner-text-text-split { grid-column: 2 / 16; grid-template-columns: 1fr 1fr; gap: 4em; display: grid; } .inner-text-text-split ul { display: grid; gap: 1em; padding: 1em 0; } .inner-text-text-split ul li { background-color: #fff; border: 1px solid #8AC53F; padding: 0.5em 1em; border-radius: 25px; position: relative; } .inner-text-text-split ul li::before { content: "•"; display: inline-block; color: #8AC53F; font-size: 3em; line-height: 1; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); } .split-content_one { display: grid; gap: 1em; align-content: start; } .split-content_one ul li { font-weight: 400; } .split-content_one p a strong i { color: #8AC53F; } .split-content_one p:has(.link-grid) br, .split-content p:has(.link-grid) br { display: none; } .split-content_one p:has(.link-grid), .split-content p:has(.link-grid) { display: flex; gap: 1em; flex-wrap: wrap; } .inner-full-text .split-content p:has(.link-grid) { justify-content: center; } .inner-full-text .split-content.text-position-left p:has(.link-grid) { justify-content: left; } .split-content_one p .link-grid, .split-content p .link-grid { background: #8AC53F; padding: 0.2em 1em; border-radius: 40px; max-width: 283px; width: 100%; display: grid; text-align: center; color: #fff; font-weight: 600; text-transform: uppercase; } @media (max-width: 1100px) { .split-content_one p:has(.link-grid), .split-content p:has(.link-grid) { justify-content: center; } .inner-full-text .split-content.text-position-left p:has(.link-grid) { justify-content: center; } .inner-text-text-split { grid-column: 2 / 16; grid-template-columns: 1fr ; gap: 4em; display: grid; } .text-text-split::before { height: 60px; top: -3.5em; } .split-content_one { text-align: center; } .text-text-split { padding: 2em 0; } .inner-text-text-split { gap: 3em; } .inner-text-text-split ul li { text-align: left; } } /* TEXT IMAGE LIST */ .text-list-split { padding: 5em 0 7em 0; position: relative; } .lists-content, .text_image_lists_list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; grid-column: 2 / 16; padding: 2em 0; } .text_image_lists-content { display: grid; gap: 1em; align-content: start; } .text_image_lists-content a { justify-self: start; } .text_image_lists_list li, .text_image_lists_list li strong { color: #662E8E; } .text_image_lists_list li { background-color: #fff; padding: 0.5em 1em; position: relative; border-radius: 27px; align-content: center; } .text_image_lists_list li::before { content: "\f058"; font-family: "Font Awesome 6 Pro"; font-weight: 900; display: inline-block; font-size: 1.5em; line-height: 1; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); color: #8AC53F; background: #fff; border-radius: 50%; } .text_image_lists-image { position: relative; display: grid; } .text-vid-link { right: unset; bottom: 3em; } .list-image { z-index: 1; display: grid; align-self: center; max-width: 500px; object-fit: cover; justify-self: center; } .img-list-overlay { position: absolute; background-color: #8AC53F; border-radius: 50%; max-width: 562px; max-height: 562px; aspect-ratio: 1 / 1; height: 100%; display: grid; z-index: 0; justify-self: center; align-self: center; } .no-green-overlay { display: none; } .text-list-split.purple-background .text_image_lists-content h2, .text-list-split.purple-background .text_image_lists-content p { color: #fff; } .text-list-split.no-wavy-border { margin-top: -5em; } @media (max-width: 1450px) { .img-list-overlay { width: 84%; height: auto; } } @media (max-width: 1100px) { .text-list-split.no-wavy-border { margin-top: 0; } .text_image_lists-image { display: none } .lists-content, .text_image_lists_list { grid-template-columns: 1fr; text-align: center; } .text_image_lists-content a { justify-self: center; } .text_image_lists_list li { text-align: left; } .text-list-split { padding: 2em 0 10em 0; } } /* TIMELINE */ /* Wrapper */ .sccc-timeline { padding: 5em 0; } .sccc-timeline__heading{ margin-bottom: 5rem; color: #662e8e; font-weight: 700; display: grid; grid-column: 2 / 16; font-size: 25px; text-align: center; } /* Inner grid */ .sccc-timeline__inner { display: grid; grid-column: 2 / 16; } /* Each row */ .sccc-timeline__row { display: grid; grid-template-columns: 50% 50%; align-items: center; } .sccc-timeline-col { position: relative; } /* Year pill */ .sccc-timeline__row:nth-child(odd) .sccc-timeline__year { position: absolute; z-index: 1; display: inline-block; background: #8ac53f; color: #fff; border-radius: 999px; padding: 0.2rem 1.5rem; font-weight: 700; margin-right: 2em; top: -1em; line-height: normal; } .sccc-timeline__row:nth-child(even) .sccc-timeline__year { position: absolute; z-index: 1; display: inline-block; background: #8ac53f; color: #fff; border-radius: 999px; padding: 0.2rem 1.5rem; font-weight: 700; margin-left: 2em; top: -1em; line-height: normal; } .sccc-timeline__row:nth-child(odd) .sccc-timeline__year::after { content: "•"; display: inline-block; color: #8AC53F; font-size: 2em; line-height: 1; position: absolute; right: -1.52em; top: 50%; transform: translate(-50%, -50%); } .sccc-timeline__row:nth-child(even) .sccc-timeline__year::after { content: "•"; display: inline-block; color: #8AC53F; font-size: 2em; line-height: 1; position: absolute; left: -1em; top: 50%; transform: translate(-50%, -50%); } /* Content box */ .sccc-timeline__row:nth-child(odd) { grid-template-columns: 50.1% 49% } .sccc-timeline__row:nth-child(odd) .sccc-timeline-col { display: grid; gap: 1em; justify-items: right; text-align: right; border-right: 1px solid #A382BB; margin-left: -1px; padding-right: 2em; margin-top: -0.8em; padding: 2em 2em 2em 0; } .sccc-timeline__row:nth-child(even) .sccc-timeline-col { display: grid; gap: 1em; justify-items: left; text-align: left; grid-column-start: 2; border-left: 1px solid #A382BB; margin-right: -1px; padding-left: 2em; margin-top: -0.8em; padding: 2em 0 2em 2em; } .timeline-lower-content { display: grid; grid-column: 2 / 16; text-align: center; max-width: 1136px; justify-self: center; padding: 2em 0 6em 0; } .timeline-lower-content p { font-weight: 700; } /* Responsive */ @media (max-width: 900px) { .sccc-timeline__row, .sccc-timeline__row:nth-child(odd) { grid-template-columns: 1fr; justify-self: center; } .sccc-timeline__row:nth-child(odd) .sccc-timeline-col, .sccc-timeline__row:nth-child(even) .sccc-timeline-col { margin: 1em 0; text-align: center; justify-items: center; border: none; padding: 0; } .sccc-timeline__row:nth-child(odd) .sccc-timeline__year::after, .sccc-timeline__row:nth-child(even) .sccc-timeline__year::after { display: none; } .sccc-timeline__row:nth-child(odd) .sccc-timeline__year, .sccc-timeline__row:nth-child(even) .sccc-timeline__year { margin: 0; position: relative; top: 0; } .timeline-lower-content { padding: 2em 0; } .sccc-timeline__heading { margin-bottom: 1em; } } /* Verical Grid Info Boxes */ .vertical-grid-info-boxes { background-color: #662E8E; padding: 5em 0 10em 0; position: relative; } .vertical-grid-info-boxes::before { content: ""; position: absolute; left: 0; width: 100%; height: 140px; top: -139px; background: #6b2494; clip-path: polygon(100% 100%, 0% 100%, 0.00% 44.52%, 2.00% 42.24%, 4.00% 40.19%, 6.00% 38.37%, 8.00% 36.83%, 10.00% 35.57%, 12.00% 34.61%, 14.00% 33.96%, 16.00% 33.64%, 18.00% 33.64%, 20.00% 33.97%, 22.00% 34.63%, 24.00% 35.59%, 26.00% 36.86%, 28.00% 38.42%, 30.00% 40.24%, 32.00% 42.30%, 34.00% 44.58%, 36.00% 47.04%, 38.00% 49.66%, 40.00% 52.40%, 42.00% 55.23%, 44.00% 58.11%, 46.00% 61.00%, 48.00% 63.87%, 50.00% 66.68%, 52.00% 69.40%, 54.00% 71.98%, 56.00% 74.41%, 58.00% 76.63%, 60.00% 78.64%, 62.00% 80.39%, 64.00% 81.88%, 66.00% 83.07%, 68.00% 83.96%, 70.00% 84.54%, 72.00% 84.79%, 74.00% 84.71%, 76.00% 84.31%, 78.00% 83.59%, 80.00% 82.55%, 82.00% 81.22%, 84.00% 79.60%, 86.00% 77.73%, 88.00% 75.61%, 90.00% 73.29%, 92.00% 70.79%, 94.00% 68.14%, 96.00% 65.38%, 98.00% 62.53%, 100.00% 59.65%); z-index: 0; } .vertical-grid-info-boxes-heading { display: grid; grid-column: 2/16; text-align: center; max-width: 820px; justify-self: center; gap: 1em; } .vertical-grid-info-boxes-heading h2, .vertical-grid-info-boxes-heading p { color: #fff; } .inner-info-boxes { display: grid; grid-column: 2/16; text-align: center; gap: 4em; padding: 2em 0; } .info-box h3, .info-box i { color: #8AC53F; margin-bottom: 0.3em; } .info-box-backg { background-color: rgb(255, 255, 255, 0.1); border-radius: 26px; padding: 2em 4em; max-width: 830px; justify-self: center; text-align: center; width: 100%; } .info-box-content { background-color: rgb(255, 255, 255, 0.1); border-radius: 26px; padding: 2em 4em; max-width: 830px; justify-self: center; text-align: center; width: 100%; } .info-box-content:has(h4) { background-color: transparent; padding: 0; } .info-box-content p, .info-box-content p em { color: #fff; } .info-box-content h4 { color: #8AC53F; } /* When converted to grid */ .info-box-content--grid { text-align: left; padding: 2em 2em; } .info-box-grid-item { display: grid; gap: 0.5em; text-align: center; } .info-box-content--grid .info-box-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; } @media (max-width: 1000px) { .vertical-grid-info-boxes::before { height: 60px; top: -3.5em; } .vertical-grid-info-boxes { background-color: #662E8E; padding: 5em 0; position: relative; } .info-box-content { padding: 1em; } .inner-info-boxes { gap: 2em; } .info-box-grid { grid-template-columns: 1fr !important; } .info-box-backg { padding: 1em; } } /* VIDEO */ .video { padding: 5em 0 10em 0; gap: 2em; position: relative; } .video::before { content: ""; position: absolute; left: 0; width: 100%; height: 140px; top: -139px; background: #fff; clip-path: polygon(100% 100%, 0% 100%, 0.00% 44.52%, 2.00% 42.24%, 4.00% 40.19%, 6.00% 38.37%, 8.00% 36.83%, 10.00% 35.57%, 12.00% 34.61%, 14.00% 33.96%, 16.00% 33.64%, 18.00% 33.64%, 20.00% 33.97%, 22.00% 34.63%, 24.00% 35.59%, 26.00% 36.86%, 28.00% 38.42%, 30.00% 40.24%, 32.00% 42.30%, 34.00% 44.58%, 36.00% 47.04%, 38.00% 49.66%, 40.00% 52.40%, 42.00% 55.23%, 44.00% 58.11%, 46.00% 61.00%, 48.00% 63.87%, 50.00% 66.68%, 52.00% 69.40%, 54.00% 71.98%, 56.00% 74.41%, 58.00% 76.63%, 60.00% 78.64%, 62.00% 80.39%, 64.00% 81.88%, 66.00% 83.07%, 68.00% 83.96%, 70.00% 84.54%, 72.00% 84.79%, 74.00% 84.71%, 76.00% 84.31%, 78.00% 83.59%, 80.00% 82.55%, 82.00% 81.22%, 84.00% 79.60%, 86.00% 77.73%, 88.00% 75.61%, 90.00% 73.29%, 92.00% 70.79%, 94.00% 68.14%, 96.00% 65.38%, 98.00% 62.53%, 100.00% 59.65%); z-index: 0; } .video-header { display: grid; grid-column: 2/16; text-align: center; justify-items: center; } .inner-video { display: grid; grid-column: 2/16; text-align: center; justify-items: center; } .inner-tabs { grid-column: 2/16; text-align: center; justify-content: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 2em; padding: 2em 0; } .my-video { border-radius: 46px; border: 10px solid #E0D5E8; box-shadow: 0px 7px 7px #00000029; max-width: 845px; width: 100%; aspect-ratio: 1 / 1; max-height: 542px; } .responsive-video { position: relative; overflow: hidden; } .responsive-video iframe, .responsive-video video { position: absolute; inset: 0; height: 100%; max-width: 845px; width: 100%; aspect-ratio: 1 / 1; max-height: 542px; } @media (max-width: 1000px) { .video::before { height: 60px; top: -3.5em; } .video { gap: 1em; padding: 3em 0 10em 0; } .inner-tabs { padding: 2em 0 0; } .video::before { height: 60px; top: -3.5em; } } /* VIDEO */ .text-company-logos { padding: 5em 0 10em 0; background-color: rgb(224, 213, 232, 0.5); position: relative; } .text-company-logos.no-wavy-border { margin-top: -5em; } .text-company-logos::before { content: ""; position: absolute; left: 0; width: 100%; height: 140px; top: -140px; background: var(--bg-color, #fff); clip-path: polygon(100% 100%, 0% 100%, 0.00% 44.52%, 2.00% 42.24%, 4.00% 40.19%, 6.00% 38.37%, 8.00% 36.83%, 10.00% 35.57%, 12.00% 34.61%, 14.00% 33.96%, 16.00% 33.64%, 18.00% 33.64%, 20.00% 33.97%, 22.00% 34.63%, 24.00% 35.59%, 26.00% 36.86%, 28.00% 38.42%, 30.00% 40.24%, 32.00% 42.30%, 34.00% 44.58%, 36.00% 47.04%, 38.00% 49.66%, 40.00% 52.40%, 42.00% 55.23%, 44.00% 58.11%, 46.00% 61.00%, 48.00% 63.87%, 50.00% 66.68%, 52.00% 69.40%, 54.00% 71.98%, 56.00% 74.41%, 58.00% 76.63%, 60.00% 78.64%, 62.00% 80.39%, 64.00% 81.88%, 66.00% 83.07%, 68.00% 83.96%, 70.00% 84.54%, 72.00% 84.79%, 74.00% 84.71%, 76.00% 84.31%, 78.00% 83.59%, 80.00% 82.55%, 82.00% 81.22%, 84.00% 79.60%, 86.00% 77.73%, 88.00% 75.61%, 90.00% 73.29%, 92.00% 70.79%, 94.00% 68.14%, 96.00% 65.38%, 98.00% 62.53%, 100.00% 59.65%); z-index: 0; } .inner-text-company-logos { display: grid; grid-column: 2/16; gap: 2em; } .intro-content, .closing-content { display: grid; text-align: center; gap: 1em; max-width: 981px; justify-self: center; } .intro-content p a strong { color: #8AC53F; text-decoration: underline; } .closing-content a, .closing-content a i, .closing-content a strong { color: #8AC53F; font-weight: 600; } .company-logos { display: grid; grid-template-columns: repeat(5, 1fr); padding: 2em 0; gap: 1em; justify-items: center; } .company-logo--image img, .company-logo--text { max-width: 167px; object-fit: contain; background: #fff; border-radius: 50%; padding: 1em; aspect-ratio: 1 / 1; } .inner-text-company-logos.image-background .company-logos { grid-template-columns: repeat(3, 1fr); max-width: 1000px; justify-content: center; justify-self: center; width: 100%; } .inner-text-company-logos.image-background .company-logo--image { border-radius: 25px; max-width: 376px; width: 100%; background: #fff; justify-content: center; display: grid; align-items: center; max-height: 146px; aspect-ratio: 1 / 1; } .inner-text-company-logos.image-background .company-logo--image img { border-radius: 0; padding: 0.5em 0; max-width: 147px; } .company-logo--text { align-content: center; text-align: center; font-weight: 600; } @media (max-width: 1000px) { .company-logos { display: flex; flex-wrap: wrap; justify-content: center; } .company-logo--image img, .company-logo--text { max-width: 117px; } .company-logo--text { font-size: 14px; padding: 10px; } .text-company-logos::before { height: 56px; top: -3.5em; } .inner-text-company-logos.image-background .company-logos { display: flex; flex-wrap: wrap; } .inner-text-company-logos.image-background .company-logo--image img { padding: 0; max-width: 80%; justify-self: center; } .inner-text-company-logos.image-background .company-logo--image { max-width: 130px; max-height: 146px; } } /* TEXT LISTS */ .text-list-only { position: relative; padding: 8em 0; } .text-list-only::before { content: ""; position: absolute; left: 0; width: 100%; height: 140px; top: -139px; background: #E8F4D8; clip-path: polygon(100% 100%, 0% 100%, 0.00% 44.52%, 2.00% 42.24%, 4.00% 40.19%, 6.00% 38.37%, 8.00% 36.83%, 10.00% 35.57%, 12.00% 34.61%, 14.00% 33.96%, 16.00% 33.64%, 18.00% 33.64%, 20.00% 33.97%, 22.00% 34.63%, 24.00% 35.59%, 26.00% 36.86%, 28.00% 38.42%, 30.00% 40.24%, 32.00% 42.30%, 34.00% 44.58%, 36.00% 47.04%, 38.00% 49.66%, 40.00% 52.40%, 42.00% 55.23%, 44.00% 58.11%, 46.00% 61.00%, 48.00% 63.87%, 50.00% 66.68%, 52.00% 69.40%, 54.00% 71.98%, 56.00% 74.41%, 58.00% 76.63%, 60.00% 78.64%, 62.00% 80.39%, 64.00% 81.88%, 66.00% 83.07%, 68.00% 83.96%, 70.00% 84.54%, 72.00% 84.79%, 74.00% 84.71%, 76.00% 84.31%, 78.00% 83.59%, 80.00% 82.55%, 82.00% 81.22%, 84.00% 79.60%, 86.00% 77.73%, 88.00% 75.61%, 90.00% 73.29%, 92.00% 70.79%, 94.00% 68.14%, 96.00% 65.38%, 98.00% 62.53%, 100.00% 59.65%); z-index: 0; } .text-list-content { grid-template-columns: 1fr; } .text-list-content .text_image_lists-content { text-align: center; max-width: 1046px; justify-self: center; } .text-list-content .text_image_lists-content p { color: #662E8E; } .text-list-only .text_image_lists_list li, .text-list-only .text_image_lists_list li strong { font-weight: 700; padding-left: 2em; } .text_image_lists_list_no_markers { display: flex; flex-wrap: wrap; gap: 2em; justify-content: space-between; align-items: stretch; } .text_image_lists_list_no_markers li { list-style-type: none; flex: 1 1 calc(50% - 2em); border-radius: 25px; text-align: center; padding: 1em !important; display: flex; align-items: stretch; justify-content: center; border: 1px solid #8AC53F; } .text_image_lists_list_no_markers li::before { display: none; } @media (max-width: 1000px) { .text-list-only::before { height: 60px; top: -3.5em; } .text-list-only { padding: 0em 0 2em 0; } .text_image_lists_list_no_markers { flex-direction: column; flex-wrap: nowrap; } } /* TEXT LIST WITH LINKS */ .text-list-links { position: relative; padding: 5em 0 10em; } .text-list-links::before { content: ""; position: absolute; left: 0; width: 100%; height: 140px; top: -139px; background: var(--bg-color, #E0D5E8); clip-path: polygon(100% 100%, 0% 100%, 0.00% 44.52%, 2.00% 42.24%, 4.00% 40.19%, 6.00% 38.37%, 8.00% 36.83%, 10.00% 35.57%, 12.00% 34.61%, 14.00% 33.96%, 16.00% 33.64%, 18.00% 33.64%, 20.00% 33.97%, 22.00% 34.63%, 24.00% 35.59%, 26.00% 36.86%, 28.00% 38.42%, 30.00% 40.24%, 32.00% 42.30%, 34.00% 44.58%, 36.00% 47.04%, 38.00% 49.66%, 40.00% 52.40%, 42.00% 55.23%, 44.00% 58.11%, 46.00% 61.00%, 48.00% 63.87%, 50.00% 66.68%, 52.00% 69.40%, 54.00% 71.98%, 56.00% 74.41%, 58.00% 76.63%, 60.00% 78.64%, 62.00% 80.39%, 64.00% 81.88%, 66.00% 83.07%, 68.00% 83.96%, 70.00% 84.54%, 72.00% 84.79%, 74.00% 84.71%, 76.00% 84.31%, 78.00% 83.59%, 80.00% 82.55%, 82.00% 81.22%, 84.00% 79.60%, 86.00% 77.73%, 88.00% 75.61%, 90.00% 73.29%, 92.00% 70.79%, 94.00% 68.14%, 96.00% 65.38%, 98.00% 62.53%, 100.00% 59.65%); z-index: 0; transform: scaleX(-1); } .text_lists_list { display: flex; grid-column: 2 / 16; gap: 2em; flex-wrap: wrap; justify-content: center; padding: 2em 0; } .text_lists_list a { background-color: #8AC53F; border-radius: 40px; padding: 1em 2em; color: #fff; text-transform: uppercase; font-weight: 600; max-width: 569px; width: 100%; text-align: center; } .text_lists-content h2 { color: #662E8E; } .list_no_links { display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 2em; max-width: 940px; } .list_no_links li { border: 1px solid #8AC53F; padding: 0.5em 2em; text-align: center; border-radius: 25px; min-width: 289px; } .text_image_lists-content.text_lists-content ul { display: grid; gap: 1em; grid-template-columns: 1fr 1fr; padding: 2em 0; } .text_image_lists-content.text_lists-content ul li { background-color: transparent; border: 1px solid #8AC53F; border-radius: 25px; position: relative; } .text_image_lists-content.text_lists-content ul li:before { content: "•"; display: inline-block; color: #8AC53F; font-size: 3em; line-height: 1; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%); } .white-image-back { background-color: #fff; border-radius: 50px; padding: 1em 2em; max-width: 359px; object-fit: contain; } @media (max-width: 1000px) { .text-image-split.light-purple-image::before { top: -60px; } .text-list-links::before { height: 60px; top: -3.5em; } .text-list-links { padding: 2em 0 8em; } .text_lists_list { padding: 0; } .text_lists_list a { padding: 1em; } .text_image_lists-content.text_lists-content ul { grid-template-columns: 1fr; } } /* CENTERED FULL WIDTH TEXT */ .inner-full-text { display: grid; grid-column: 2/16; text-align: center; max-width: 1042px; width: 100%; justify-self: center; } .text-position-left { text-align: left; } .inner-full-text a { justify-self: center; } .inner-full-text h2 { font-size: 40px; } .text-image-split.no-wavy-border { margin-top: -5em; } .text-image-split.dark-purple-image p, .text-image-split.dark-purple-image p strong, .text-image-split.dark-purple-image h2 { color: #fff; } .text-image-split.dark-purple-image p strong a, .inner-full-text p a strong { color: #8AC53F !important; } .text-image-split.dark-purple-image .inner-full-text .split-content p em { color: #fff; } @media (max-width: 1000px) { .text-image-split.no-wavy-border { margin-top: 0; } .inner-full-text h2 { font-size: 25px; } .text-image-split.dark-purple-image { padding: 5em 0 10em 0; } .text-image-split.dark-purple-image.no-wavy-border { padding: 5em 0; } .text-position-left { text-align: center; } } /* SERVICES TABS WITH ANCHOR LINKS */ .service-tabs { padding: 5em 0 10em 0; position: relative; } .service-tabs::before { content: ""; position: absolute; left: 0; width: 100%; height: 140px; top: -139px; background: #fff; clip-path: polygon(100% 100%, 0% 100%, 0.00% 44.52%, 2.00% 42.24%, 4.00% 40.19%, 6.00% 38.37%, 8.00% 36.83%, 10.00% 35.57%, 12.00% 34.61%, 14.00% 33.96%, 16.00% 33.64%, 18.00% 33.64%, 20.00% 33.97%, 22.00% 34.63%, 24.00% 35.59%, 26.00% 36.86%, 28.00% 38.42%, 30.00% 40.24%, 32.00% 42.30%, 34.00% 44.58%, 36.00% 47.04%, 38.00% 49.66%, 40.00% 52.40%, 42.00% 55.23%, 44.00% 58.11%, 46.00% 61.00%, 48.00% 63.87%, 50.00% 66.68%, 52.00% 69.40%, 54.00% 71.98%, 56.00% 74.41%, 58.00% 76.63%, 60.00% 78.64%, 62.00% 80.39%, 64.00% 81.88%, 66.00% 83.07%, 68.00% 83.96%, 70.00% 84.54%, 72.00% 84.79%, 74.00% 84.71%, 76.00% 84.31%, 78.00% 83.59%, 80.00% 82.55%, 82.00% 81.22%, 84.00% 79.60%, 86.00% 77.73%, 88.00% 75.61%, 90.00% 73.29%, 92.00% 70.79%, 94.00% 68.14%, 96.00% 65.38%, 98.00% 62.53%, 100.00% 59.65%); z-index: 0; } .service-tabs h2 { display: grid; grid-column: 2/16; text-align: center; } .inner-service-tabs { display: grid; grid-template-columns: repeat(3, 1fr); grid-column: 2/16; gap: 2rem; padding: 2em 0; } .service-tab { display: inline-block; width: 100%; border-radius: 39px; text-align: center; font-weight: 600; border: 1px solid #8AC53F; padding: 1em; background-color: #E0D5E8; color: #662E8E; max-width: 477px; justify-items: center; } .service-tab:hover { background-color: #662E8E; color: #fff; } @media (max-width: 1000px) { .inner-service-tabs { grid-template-columns: 1fr; padding: 2em 0; } .service-tabs::before { height: 60px; top: -3.5em } .service-tabs { padding: 5em 0; } } /* TEXT LISTS LINKS IMAGES */ .text-lists-links-images { background-color: #fff; position: relative; padding: 5em 0 10em 0; } .text-lists-links-images.no-wavy-border { margin-top: -5em; } .text-lists-links-images::before { content: ""; position: absolute; left: 0; width: 100%; height: 140px; top: -139px; background: #fff; clip-path: polygon(100% 100%, 0% 100%, 0.00% 44.52%, 2.00% 42.24%, 4.00% 40.19%, 6.00% 38.37%, 8.00% 36.83%, 10.00% 35.57%, 12.00% 34.61%, 14.00% 33.96%, 16.00% 33.64%, 18.00% 33.64%, 20.00% 33.97%, 22.00% 34.63%, 24.00% 35.59%, 26.00% 36.86%, 28.00% 38.42%, 30.00% 40.24%, 32.00% 42.30%, 34.00% 44.58%, 36.00% 47.04%, 38.00% 49.66%, 40.00% 52.40%, 42.00% 55.23%, 44.00% 58.11%, 46.00% 61.00%, 48.00% 63.87%, 50.00% 66.68%, 52.00% 69.40%, 54.00% 71.98%, 56.00% 74.41%, 58.00% 76.63%, 60.00% 78.64%, 62.00% 80.39%, 64.00% 81.88%, 66.00% 83.07%, 68.00% 83.96%, 70.00% 84.54%, 72.00% 84.79%, 74.00% 84.71%, 76.00% 84.31%, 78.00% 83.59%, 80.00% 82.55%, 82.00% 81.22%, 84.00% 79.60%, 86.00% 77.73%, 88.00% 75.61%, 90.00% 73.29%, 92.00% 70.79%, 94.00% 68.14%, 96.00% 65.38%, 98.00% 62.53%, 100.00% 59.65%); z-index: 0; } .inner-text-lists-links { display: grid; gap: 1em; padding: 2em 0; } .inner-text-lists-links-images { display: grid; grid-column: 2/17; grid-template-columns: 1fr 1fr; gap: 2em; } .text-lists-links-images.no-wavy-border { padding: 5em 0; } .inner-images { position: relative; display: grid; } .image_one, .image_two, .logo_image { position: absolute; } .image_one, .image_two { border-radius: 50%; border: 15px solid #8AC53F; object-fit: cover; aspect-ratio: 1/1; } .image_one { max-width: 450px; right: 0; top: 0; } .image_two { max-width: 600px; bottom: 0; justify-self: left; } .inner-logo-image { background-color: #8AC53F; padding: 2em; display: grid; max-width: 244px; border-radius: 50%; aspect-ratio: 1 / 1; justify-content: center; align-items: center; top: 30%; position: absolute; width: 100%; justify-items: center; transform: translate(-0%, -30%); } .logo_image { max-width: 183px; object-fit: cover; width: 100%; aspect-ratio: 1/1; } .inner-text-lists-links ol { display: grid; gap: 1em; list-style: none; counter-reset: inner-ol; margin-left: 0; padding: 2em 0; } .inner-text-lists-links ol > li { background-color: #E0D5E8; border-radius: 25px; padding: 1em 2em; font-weight: 700; margin-left: 1em; counter-increment: inner-ol; position: relative; } /* Show 1 2 3 with no dot */ .inner-text-lists-links ol > li::before { content: counter(inner-ol) " "; position: absolute; left: -1em; background-color: #8AC53F; border-radius: 50%; max-width: 31px; aspect-ratio: 1 / 1; width: 100%; display: grid; text-align: center; max-height: 31px; } .inner-text-lists-links a { background-color: #8AC53F; border-radius: 40px; padding: 0.5em 2em; color: #fff; font-size: 20px; font-weight: 600; text-transform: uppercase; } .inner-text-lists-links a[href^="mailto:"] { color: #8AC53F; background-color: transparent; border-radius: 0; padding: 0; font-size: 18px; font-weight: inherit; text-transform: none; } .inner-text-lists-links a[href^="mailto:"] strong, .inner-text-lists-links a[href^="mailto:"] strong i { color: #8AC53F; } @media (max-width: 1300px) { .inner-text-lists-links p { display: grid; gap: 1em; } .image_two { bottom: 20%; } } @media (max-width: 1100px) { .text-lists-links-images.no-wavy-border { margin-top: 0; } .inner-images { display: none; } .text-lists-links-images::before { height: 60px; top: -3.5em } .inner-text-lists-links-images { grid-column: 2/16; grid-template-columns: 1fr; } .inner-text-lists-links { text-align: center; } .inner-text-lists-links ol { gap: 2em; } .inner-text-lists-links ol > li { margin: 0; padding: 1em; } .inner-text-lists-links ol > li::before { left: 50%; top: 0; transform: translate(-50%, -50%); } .inner-text-lists-links a { padding: 0.5em 1em; font-size: 1rem; justify-self: center; } } /* Icons and Info Grid with Lower Text */ .icon-info-grid { } .inner-icon-info-text { display: grid; grid-template-columns: repeat(4, 1fr); grid-column: 2 / 16; gap: 2rem; padding: 2em 0; row-gap: 4em; } .info-icon-box { position: relative; display: grid; justify-items: center; gap: 1em; } .info-icon-box .inner-icon { position: relative; display: grid; justify-content: center; top: unset; background-color: #B9DC8C; } .info-icon-box .inner-image { position: relative; display: grid; justify-content: center; top: unset; background-color: #B9DC8C; border-radius: 50%; max-width: 140px; aspect-ratio: 1 / 1; align-items: center; width: 100%; } .info-icon-box .inner-image img { width: 100%; object-fit: contain; } .info-icon-box .inner-content { text-transform: uppercase; font-weight: 600; font-size: 30px; text-align: center; } .lower_content { display: grid; grid-column: 2 / 16; padding: 2em 0; text-align: center; max-width: 812px; justify-self: center; } @media (max-width: 1100px) { .inner-icon-info-text { grid-template-columns: repeat(2, 1fr); gap: 1rem; row-gap: 1rem; padding: 0; } .info-icon-box .inner-content { font-size: 18px; } .info-icon-box .inner-image, .info-icon-box .inner-icon { max-width: 96px; } .info-icon-box .inner-icon i { font-size: 3em; } } /* CENTERED FULL WIDTH TEXT WITH INFO BOXES */ .inner-content-grid { display: grid; grid-column: 2 / 16; text-align: center; max-width: 1054px; justify-self: center; gap: 1em; width: 100%; } .inner-content-grid p i, .split-content p .donate, .inner-content-grid img { position: relative; display: grid; justify-content: center; top: unset; background-color: #B9DC8C; border-radius: 50%; max-width: 125px; aspect-ratio: 1 / 1; align-items: center; display: grid; width: 100%; font-size: 3em; justify-self: center; color: #662E8E; object-fit: contain; } .text-image-split .info_boxes { display: flex; grid-column: 2/16; flex-wrap: wrap; gap: 3em; padding: 2em 0; justify-content: center; } .text-image-split .info_boxes .inner-full-text-grids { background-color: #fff; border-radius: 25px; padding: 2em; text-align: center; align-items: center; display: grid; gap: 1em; max-width: 376px; } .inner-full-text-grids h3 { font-size: 27px; } .inner-full-text-grids h3 span { color: #8AC53F; } .split-content p:has(.donate) { display: flex; flex-wrap: wrap; gap: 1em; justify-content: center; } .inner-content-grid h4 { background-color: #fff; padding: 1em; text-align: center; border-radius: 25px; font-size: 18px; font-weight: 600; justify-self: center; } .inner-content-grid p a[href^="tel"] i, .inner-content-grid p a[href^="mailto"] i, .inner-content-grid p strong i { background-color: transparent; border-radius: 0; font-size: 18px; color: #8AC53F; padding: 0; max-width: fit-content; display: inline; } .inner-content-grid p a[href^="tel"] strong, .inner-content-grid p a[href^="mailto"] strong{ color: #8AC53F; } .numbered_info_boxes, .table_grid_3_cols { display: grid; grid-column: 2/16; grid-template-columns: repeat(3, 1fr); gap: 2em; padding: 4em 0 2em 0; counter-reset: numbered-box; } .numbered_info_boxes .inner-full-text-grids { background-color: #fff; border-radius: 25px; padding: 3em 2em; text-align: center; counter-increment: numbered-box; position: relative; margin-bottom: 1.5rem; } /* The number circle */ .numbered_info_boxes .inner-full-text-grids::before { content: counter(numbered-box); position: absolute; left: 50%; top: 0; width: 66px; height: 66px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 2rem; background-color: #8AC53F; transform: translate(-50%, -50%); } .table_grid_3_cols { gap: 1em; padding: 2em 0; } .table_grid_3_cols .inner-full-text-grids { background-color: #fff; text-align: center; padding: 1em 0; } .table_grid_3_cols .inner-full-text-grids:nth-child(1) p, .table_grid_3_cols .inner-full-text-grids:nth-child(2) p, .table_grid_3_cols .inner-full-text-grids:nth-child(3) p { font-weight: 700; } .inner-content-grid.content-table_grid_3_cols p a strong { color: #8AC53F; } .inner-content-grid ul { display: grid; gap: 1em; padding: 2em 0; } .inner-content-grid ul li { background-color: #E0D5E8; border-radius: 24px; padding: 1em 2em; list-style: none; position: relative; text-align: left; } .inner-content-grid ul li:before { content: "•"; display: inline-block; color: #8AC53F; font-size: 3em; line-height: 1; position: absolute; left: 0; top: 30%; transform: translate(-50%, -50%); } @media (max-width: 1100px) { .inner-content-grid p { display: grid; } .text-image-split .info_boxes { grid-template-columns: 1fr; gap: 1em; } .inner-content-grid { justify-content: center; } .inner-content-grid p i, .split-content p .donate { max-width: 96px; font-size: 3em; } .numbered_info_boxes { grid-template-columns: 1fr; } .table_grid_3_cols { gap: 0.3em; } .numbered_info_boxes .inner-full-text-grids { padding: 3em 1em 1em; } .table_grid_3_cols .inner-full-text-grids p { font-size: 16px; } .table_grid_3_cols .inner-full-text-grids { padding: 0.2em; } .inner-content-grid ul li { text-align: center; padding: 1em; } .inner-content-grid ul li:before { top: 0; left: 50%; } } /* CONTACT DETAILS */ .contact-details { padding: 5em 0; background-color: #F5F5F5; } .inner-contact-details { display: grid; grid-template-columns: 1fr 1fr; grid-column: 2 / 16; padding: 2em 0; gap: 1em; } .all-contact-details { display: grid; } .inner-contact-details-content { display: grid; grid-template-columns: 2em 1fr; gap: 1em; } .inner-contact-details-content i { font-size: 2em; color: #8AC53F; } .social-media-links { display: flex; flex-wrap: wrap; gap: 1em; } .inner-social-media-links { border-radius: 50%; width: 50px; height: 50px; background: #8AC53F; align-items: center; justify-items: center; display: grid; } .inner-social-media-links a i { font-size: 2em; color: #fff; } /* CONTACT FORM */ .contact-form { display: grid; } .contact-form form .wpcf7-spinner { display: none; } .contact-form form { margin: 0 auto; width: 100%; background: #E0D5E8; padding: 1em; border-radius: 20px; } form input.wpcf7-form-control.wpcf7-submit { margin: 0 auto; cursor: Pointer; } .contact-form form input[type=text], .contact-form form input[type=tel], .contact-form form input[type=email], .contact-form form textarea { width: 100%; padding: 2em 1.5em; border: none; resize: vertical; background: #F5F5F5; justify-items: start; margin-bottom: 1em; border-radius: 20px; } .contact-form form input[type=text]::placeholder, .contact-form form input[type=email]::placeholder, .contact-form form input[type=tel]::placeholder, .contact-form form textarea::placeholder { font-size: 20px; text-align: left; color: #662E8E; } /* FORM SUBMIT BUTTON */ .contact-form form .wpcf7-submit { justify-self: start; font-size: 18px; font-weight: 700; text-align: center; padding: 0.5em 1.5em; text-transform: uppercase; align-self: center; display: flex; background-color: #8AC53F; color: #fff; border: 2px solid #8AC53F; margin: 2em 0 0; letter-spacing: 1px; border-radius: 40px; cursor: pointer; } .contact-form form .wpcf7-submit::after { content: "\f0a9"; font-family: "Font Awesome 6 Pro"; font-weight: 300; display: inline-block; margin-left: 0.5rem; color: #C9B28D; font-size: 1.1em; line-height: 1; } .wpcf7-submit.contact-submit br { display: none; } .wpcf7 form.sent .wpcf7-response-output { border-color: #C9B28D; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; } .full-width { grid-template-columns: 1fr; } /* MAPS */ .google-maps-info { padding: 5em 0 10em 0; background-color: #E0D5E8; } .inner-google-maps-info { display: grid; grid-column: 2 / 16; grid-template-columns: 1fr 1fr; gap: 3em; } .google-content { display: grid; gap: 1em; align-content: center; } .contact-map .acf-map{ display: grid; border-radius: 50%; border: 10px solid #8AC53F; max-width: 709px; width: 100%; aspect-ratio: 1/1; } .acf-map img { max-width: inherit !important; } @media only screen and (max-width: 1000px) { .contact-details { padding: 2em 0; } .contact-map { order: 1; } .contact-map .acf-map{ min-height: 100%; } .address-content { padding: 1em; text-align: center; } .contact { padding: 2em 0; } .inner-contact { grid-template-columns: 1fr; grid-column: 2 / 16; padding: 0; } .inner-contact-details { justify-items: center; gap: 2em; text-align: center; grid-template-columns: 1fr; grid-column: 2 / 16; } .contact-form form input[type=text], .contact-form form input[type=tel], .contact-form form input[type=email], .contact-form form input[type=file], .contact-form form textarea { justify-items: unset; } .contact-form form input[type=text]::placeholder, .contact-form form input[type=email]::placeholder, .contact-form form input[type=tel]::placeholder, .contact-form form input[type=file]::placeholder, .contact-form form textarea::placeholder { text-align: left; } .inner-contact-details-content, .inner-google-maps-info { grid-template-columns: 1fr; } .social-media-links { justify-content: center; gap: 0.5em; padding: 2em 0; } .inner-social-media-links { width: 45px; height: 45px; } .form-grid { grid-template-columns: 1fr; gap: 0; } .google-content { text-align: center; } } .inner-blog-boxes.case{ grid-template-columns: 1fr; } .outer-blog-boxes.case .blog-box-home{ padding-top: 10em; } .lp-background li{ background-color: #fff !important; } /* CASE STUDIES ARCHIVE */ .cs-page { padding: 8em 0; } .cs-boxes-page { display: flex; gap: 1em; justify-content: space-evenly; } .inner-case { grid-template-columns: 1fr; } .case-studies-box-home { max-width: 457px; width: 100%; padding: 2em !important; min-height: 350px; height: auto; } .case-studies-home-img { position: relative; } .cs-content { margin-top: -8em; } @media only screen and (max-width: 1000px) { .cs-boxes-page { flex-wrap: wrap; gap: 8em; padding: 2em 0; } .case-studies-home-img img { max-height: 385px; max-width: 385px; } .cs-page { padding: 4em 0; } }