h1 {font-size: 4vw; line-height: 0.8em; color: #eef4f6; font-family: 'Bricolage Grotesque'; margin: 0;} h2 {font-size: 2.5vw; font-family: 'Bricolage Grotesque'; margin: 0; color: #eef4f6;} h3 {font-family: 'Bricolage Grotesque'; text-align: center;margin: 0; color: #eef4f6;} body {font-family: 'Bricolage Grotesque'; margin: 0; color: #205266; } a { color: #F9C784; } .container_hero {display: block; justify-content: center; align-items: center; width: 100vw; padding: 0px; flex-direction: row; height: 100vh; aspect-ratio: 1.5/1; position: relative; top: 0px; left: 0px;} .element_inner {padding: 10px; text-align: center; font-weight: 200; font-size: 1.5vw;} .menu3 {background-color: #205266; color: #dde8ee; width: 100%; box-shadow: 0px 10px 8px #191a19; z-index: 100; text-align: center; position: fixed; top: 0; left:0;} .menu3 a {text-decoration: none; color: inherit; transition: font-size 0.4s, width 0.3s; font-family: 'Bricolage Grotesque'; font-weight: 400; z-index: 5;} .menu3 li {padding: 10px; font-family: 'Bricolage Grotesque'; font-size: 16px;} .menu3 ul {list-style: none; padding: 0; display: flex; justify-content: space-around; align-items: center; margin: 0;} .menu3-logo {flex: 3; text-align: left; position: relative; left: 50px; height: 100%;} .menu3-items {flex: 1;} .emdr-find-out-more {font-family: 'Pacifico';} .emdr-find-out-more a:visited, .emdr-find-out-more a:link {color: #dde8ee;} .container_footer {width: 100vw; justify-content: center; display: flex; text-align: center; background-color: white; flex-direction: column;} .bottom-logo {width: 100%; max-width: 600px;} .footer-inner, .grid2a {display: grid; grid-template-columns: 1fr 1fr 1fr; width: 100vw; background-color: #255e74;} .footer-heading, .box2a {text-align: center; color: white; aspect-ratio: calc(3/1); align-content: center; background-image: linear-gradient(to bottom, #1f4e61 0%, #1f4e61 10%, #1f4e61 90%, #1f4e61 100%);} .footer-anchor, .box2a-anchor {color: white;} h3.box2a-heading{text-align: center; color: white; align-content: center;} #about-us {color: #2f6f82; font-family: 'Pacifico'; } #AM-photo {size: 50%; border-radius: 50%;} #box1-inner {padding: 50px; color: #000000; font-size: 1.2vw; font-weight: 200;} #box1-inner h2 {padding: 10px; color: #227C9D;} #box4-inner {padding: 50px; color: #dde8ee; font-size: 1.2vw; font-weight: 200; background-color: #1f4e61; height: inherit; width: 100%; line-height: 1.5;} #box4-inner.box4-inner-dark {background-color: #1f4e61; color: #dde8ee;} #box4-inner h2 {padding: 10px; color: #dde8ee; background-color: #1f4e61;} #box4-inner.box4-inner-dark h2 {color: #dde8ee; background-color: #1f4e61;} #box4-inner a {padding: 10px; color: #F9C784; background-color: #1f4e61;} #box4-inner.box4-inner-dark a {color: #F9C784; background-color: #1f4e61;} #box5-inner {padding: 50px; color: #000000; font-size: 1.2vw; font-weight: 200;} #box5-inner h2 {padding: 10px; color: #227C9D;} #box6-img {height: 100%; width: 100%; object-fit: cover; } #box7-inner {padding: 50px; color: #dde8ee; font-size: 1.2vw; font-weight: 200; } #box7-inner h2 {padding: 10px; color: #dde8ee;} #box8-inner {padding: 50px; color: #dde8ee; font-size: 1.2vw; font-weight: 200; } #box8-inner h2 {padding: 10px; color: #dde8ee;} #box9-inner {padding: 50px; color: #dde8ee; font-size: 1.2vw; font-weight: 200; } #box9-inner h2 {padding: 10px; color: #dde8ee;} #box10-inner {padding: 50px; color: #dde8ee; font-size: 1.2vw; font-weight: 200; } #box10-inner h2 {padding: 10px; color: #dde8ee;} #box11-inner {padding: 50px; color: #dde8ee; font-size: 1.2vw; font-weight: 200; } #box11-inner h2 {padding: 10px; color: #dde8ee;} #box12-inner {padding: 50px; color: #dde8ee; font-size: 1.2vw; font-weight: 200; } #box12-inner h2 {padding: 10px; color: #dde8ee;} #box13-inner {padding: 50px; color: #dde8ee; font-size: 1.2vw; font-weight: 200; } #box13-inner h2 {padding: 10px; color: #dde8ee;} #box14-inner {padding: 50px; color: #dde8ee; font-size: 1.2vw; font-weight: 200; width: 70%; } #box14-inner h2 {padding: 10px; color: #dde8ee;} #box15-inner {padding: 50px; color: #dde8ee; font-size: 1.2vw; font-weight: 200; width: 50%; text-align: left;} #box15-inner h2 {padding: 10px; color: #dde8ee; } #box16-inner {padding: 50px; color: #000000; font-size: 1.2vw; font-weight: 200;} #box16-inner h2 {padding: 10px; color: #227C9D;} #box17-inner {padding: 10px; color: #dde8ee; font-size: 1.2vw; font-weight: 200; width: 50%; text-align: left;} #box17-inner h2 {padding: 10px; color: #dde8ee; } #contact-us-button a {color: #FFFFFF; text-decoration: none;} #contact-us-button:visited, #contact-us-button:link {color: #FFFFFF; text-decoration: none;} #contact-us-button a:link {color: #FFFFFF; text-decoration: none;} #container-box6-img {width: 65%; height: 90%; object-fit: cover; justify-content: center; } #menu-logo3 {height: 10vh; display: flex;} #book-now2 {position: fixed; z-index: 15; bottom: 50px; left: 50px; border-style: solid; border-color: #dde8ee; height: 75px; width: 150px; align-items: center; justify-content: center; text-align: center; display: flex; border-radius: 15px; background-color: #205266; color: #dde8ee; box-shadow: 0px 10px 8px #191a19;} #book-now {position: fixed; z-index: 15; bottom: 50px; left: 50px; border-style: solid; border-color: #FFFFFF; height: 75px; width: 150px; align-items: center; justify-content: center; text-align: center; display: flex; border-radius: 15px; background-color: #E76F8A; color: #FFFFFF; box-shadow: 0px 10px 8px #191a19;} #contact-form {width: 100%;} #hero-image {position: absolute; left: 0; top: 0; z-index: -10; opacity: 1; object-fit: cover; height: 100%; max-height: 100vh; width: 100%; } #hero-image-logo {width: 50vw; position: absolute; top: 25vh; left: 25vw; z-index: 10; opacity: 1; text-shadow : horizontal-shadow vertical-shadow blur color;} #hero-image-text {width: 50vw; position: absolute; bottom: 10%; right: 8%; z-index: 10; opacity: 1; text-shadow: 2px 2px 5px #000000; font-size: 50px; color: white;} #landing-words, #landing-words2 {text-align: right;} #grid1-container {width: 100vw; display: flex; justify-content: center;} #grid3-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; } .grid3 {width: 70%; background-color: #205266; color: #dde8ee; padding: 50px;} #grid4-container {width: 100vw; display: flex; justify-content: center; background-color: #1f4e61; color: #dde8ee; position: relative; isolation: isolate; } #grid5-container {width: 100vw; display: flex; justify-content: center;} #grid6-container {width: 100vw; display: flex; justify-content: center; background-color: #205266;} #grid6 {width: 70%; background-color: #205266; color: #dde8ee; padding: 0px; display: flex;} .grid7-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; z-index: 20;} .grid8-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; z-index: 20;} .grid9-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; z-index: 20;} .grid10-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; z-index: 20;} .grid11-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; z-index: 20;} .grid12-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; z-index: 20;} .grid13-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; z-index: 20;} .grid14-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; z-index: 20;} .grid15-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; z-index: 20;} #grid16-container {width: 100vw; display: flex; justify-content: center;} .grid17-container {width: 100vw; display: flex; justify-content: center; background-color: #205266; z-index: 20;} .input-group {width: 100%;} .input-group input {width: 100%; height: 50px; border-radius: 5px;} #message {width: 100%; border-radius: 5px;} #submit_button input {font-size: 1.5vw;} #map_location, #map_location_2 {width: 100%; height: 100%; border-radius: 0%; background-color: #205266; color: #dde8ee; position: relative; z-index: 1; } #eye-picture1 {width: 100%; } #woman_with_client1 {width: 100%;} @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfedw.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2") format("woff2"); } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://fonts.gstatic.com/s/nunito/v25/XRXV3I6Li01BKofINeaB.woff2") format("woff2"); } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("https://fonts.gstatic.com/s/nunito/v25/XRXW3I6Li01BKofINeaBTMnFcQ.woff2") format("woff2"); } @font-face { font-family: "Karla"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://fonts.gstatic.com/s/karla/v23/qkBIXvYC6trAT55ZBi1ueQ.woff2") format("woff2"); } @font-face { font-family: "Karla"; font-style: normal; font-weight: 600; font-display: swap; src: url("https://fonts.gstatic.com/s/karla/v23/qkBIXvYC6trAT55ZBi1ueQ.woff2") format("woff2"); } /* ============================ BASE FONT OVERRIDES ============================ */ body { font-family: 'Bricolage Grotesque', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } h1, h2, h3, .menu, .menu a, .menu li, .menu3, .menu3 a, .menu3 li, .references, .data_table_column2, .data_table_column2 a { font-family: 'Bricolage Grotesque', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } /* Content */ .element, .element_dark, .element_dark2, .element_light, .body-content1, .blog_text { font-family: 'Bricolage Grotesque', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;} /* Forms & UI */ .input-group input, .input-group textarea, .input-group label, button { font-family: 'Bricolage Grotesque', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; } body { margin: 0; } .grid1 { display: flex; flex-wrap: wrap; width: 100%; max-width: 1200px; text-align: center; a:visited, a:link, a:hover {color: white; } } .grid2 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; a:visited, a:link, a:hover {color: white; text-decoration: none;}background-color: white; } .grid4 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; background-color: #1f4e61; color: #dde8ee; a:visited, a:link, a:hover {color: white; } } .grid5 { display: flex; flex-wrap: wrap; width: 100%; max-width: 1200px; text-align: center; a:visited, a:link, a:hover {color: white; } } .grid6 { display: flex; flex-wrap: wrap; width: 100%; max-width: 1200px; text-align: center; a:visited, a:link, a:hover {color: white; } } .grid7 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; a:visited, a:link, a:hover {color: white; }} .grid8 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; a:visited, a:link, a:hover {color: white; }} .grid9 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; a:visited, a:link, a:hover {color: white; }} .grid10 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; a:visited, a:link, a:hover {color: white; }} .grid11 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; a:visited, a:link, a:hover {color: white; }} .grid12 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; a:visited, a:link, a:hover {color: white; }} .grid13 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; a:visited, a:link, a:hover {color: white; }} .grid14 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; a:visited, a:link, a:hover {color: white; }} .grid15 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; a:visited, a:link, a:hover {color: white; }} .grid16 { display: flex; flex-wrap: wrap; width: 100%; max-width: 1200px; text-align: center; a:visited, a:link, a:hover {color: white; }} .grid17 { display: flex; flex-wrap: wrap; width: 100%; text-align: center; a:visited, a:link, a:hover {color: white; }} .box1 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 16; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box2 { width: calc(100% / 3); /* 3 columns */ aspect-ratio: 1 / 1; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2vw; color: white; position: relative; text-shadow: 2px 2px 5px #000000; } .box3 h3 {text-align: left; font-size: 1.5vw;} .box4 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 9; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #dde8ee; background-color: #1f4e61; position: relative; } .box5 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 16; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box6 { align-items: center; justify-content: center; color: white; position: relative; } .box7 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 9; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box8 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 9; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box9 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 9; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box10 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 9; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box11 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 9; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box12 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 9; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box13 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 9; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box14 { width: calc(100%); /* 2 columns */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box15 { width: calc(100%); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box16 { width: calc(100% / 2); /* 2 columns */ aspect-ratio: 16 / 16; /* perfect square */ display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } .box17 { width: calc(100%); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: white; position: relative; } /* Demo colours */ .box1:nth-child(1) { background: #FFFFFF; background-image: url("https://emdr-brisbane.com.au/resources/ph_pc_pen.jpg"); background-size: cover; background-position: center; border-radius: 50%;} .box1:nth-child(2) { background: #FFFFFF; text-align: center; } /* Demo colours https://emdr-brisbane.com.au/resources/eye-5248678_1280.jpg */ .box2:nth-child(1) { background: #205266; background-image: url("https://emdr-brisbane.com.au/resources/emdr_finger_1.jpg"); background-size: cover;} .box2:nth-child(2) { background: #2f6f82; background-image: url("https://emdr-brisbane.com.au/resources/male_soldier_hands_together.jpg"); background-size: cover;} .box2:nth-child(3) { background: #3f8fa3; background-image: url("https://emdr-brisbane.com.au/resources/desk_quill.jpg"); background-size: cover;} .box2:nth-child(4) { background: #4fa8bd; background-image: url("https://emdr-brisbane.com.au/resources/stressed_man.jpg"); background-size: cover;} .box2:nth-child(5) { background: #6fc3d5; background-image: url("https://emdr-brisbane.com.au/resources/eye-5248678_1280.jpg"); background-size: cover;} .box2:nth-child(6) { background: #8fdbe5; background-image: url("https://emdr-brisbane.com.au/resources/mother-daughter-field-playing-with-horse (1).jpg"); background-size: cover;} .box2:nth-child(1):hover {opacity: 0.5; transition: opacity 0.5s ease-out;} .box2:nth-child(2):hover {opacity: 0.5; transition: opacity 0.5s ease-out;} .box2:nth-child(3):hover {opacity: 0.5; transition: opacity 0.5s ease-out;} .box2:nth-child(4):hover {opacity: 0.5; transition: opacity 0.5s ease-out;} .box2:nth-child(5):hover {opacity: 0.5; transition: opacity 0.5s ease-out;} .box2:nth-child(6):hover {opacity: 0.5; transition: opacity 0.5s ease-out;} .box3:nth-child(1):hover {opacity: 0.9; transition: opacity 0.5s ease-out;} .box4:nth-child(1) { background: #1f4e61; } .box4:nth-child(2) { background: #1f4e61; text-align: center; } .box5:nth-child(1) { background: #FFFFFF; background-image: url("https://emdr-brisbane.com.au/resources/ther_notepad1.jpg"); background-size: cover; background-position: center; border-radius: 50%;} .box5:nth-child(2) { background: #FFFFFF; text-align: left; } .box5:nth-child(2) h2 { background: #FFFFFF; text-align: center; } .box6:nth-child(1) {opacity: 0.9; transition: opacity 0.5s ease-out; width: 100%;} .box6:nth-child(2) {opacity: 0.9; transition: opacity 0.5s ease-out; width: 50%; display: flex;} .box7:nth-child(1) {text-align: center; color: #dde8ee;} .box7:nth-child(1) h2 {text-align: center; color: #dde8ee;} .box7:nth-child(2) {background-image: url("https://emdr-brisbane.com.au/resources/pc_notepad.jpg"); background-size: cover; background-position: center; } .box8:nth-child(1) {background-image: url("https://emdr-brisbane.com.au/resources/pc_couch.jpg"); background-size: cover; background-position: center; } .box8:nth-child(2) {text-align: center; color: #dde8ee;} .box8:nth-child(2) h2 {text-align: center; color: #dde8ee;} .box9:nth-child(1) {text-align: center; color: #dde8ee;} .box9:nth-child(1) h2 {text-align: center; color: #dde8ee;} .box9:nth-child(2) {background-image: url("https://emdr-brisbane.com.au/resources/pen_lid.jpg"); background-size: cover; background-position: center; } .box10:nth-child(1) {background-image: url("https://emdr-brisbane.com.au/resources/couch_ipad.jpg"); background-size: cover; background-position: center; } .box10:nth-child(2) {text-align: center; color: #dde8ee;} .box10:nth-child(2) h2 {text-align: center; color: #dde8ee;} .box11:nth-child(1) {text-align: center; color: #dde8ee;} .box11:nth-child(1) h2 {text-align: center; color: #dde8ee;} .box11:nth-child(2) {background-image: url("https://emdr-brisbane.com.au/resources/workcover.jpg"); background-size: cover; background-position: center; } .box12:nth-child(1) {background-image: url("https://emdr-brisbane.com.au/resources/notepad_ndis2.png"); background-size: cover; background-position: center; background-position: center;} .box12:nth-child(2) {text-align: center; color: #dde8ee;} .box12:nth-child(2) h2 {text-align: center; color: #dde8ee;} .box13:nth-child(1) {text-align: center; color: #dde8ee;} .box13:nth-child(1) h2 {text-align: center; color: #dde8ee;} .box13:nth-child(2) {background-image: url("https://emdr-brisbane.com.au/resources/man_notepad.jpg"); background-size: cover; background-position: center; } .box14:nth-child(1) {text-align: center; color: #dde8ee;} .box14:nth-child(1) h2 {text-align: center; color: #dde8ee;} .box16:nth-child(1) { background: #FFFFFF; background-image: url("https://emdr-brisbane.com.au/resources/ph_pc_pen.jpg"); background-size: cover; background-position: center; border-radius: 50%;} .box16:nth-child(2) { background: #FFFFFF; text-align: center; } /* ===================================================================== BLOG CARD GRID — unified card layout replacing the old two-column rows Each card: rectangle, 2:1 height:width, image fills card, text overlaid in the bottom third via a gradient overlay. ===================================================================== */ /* Outer wrapper — full-width teal band to match the rest of the page */ #blog-cards-section { width: 100vw; display: flex; justify-content: center; background-color: #eef4f6; padding: 50px 0 60px; box-sizing: border-box; } /* Inner grid — 3 columns on desktop */ .blog-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 90%; max-width: 1200px; } /* Individual card */ .blog-card { position: relative; /* 2:1 height:width ratio */ aspect-ratio: 1 / 1.5; border-radius: 14px; overflow: hidden; cursor: pointer; text-decoration: none; display: block; box-shadow: 0 6px 20px rgba(0,0,0,0.18); transition: transform 0.3s ease, box-shadow 0.3s ease; } .blog-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(0,0,0,0.28); } /* Background image — fills the whole card */ .blog-card-image { position: absolute; inset: 0; background-size: cover; background-position: center; width: 100%; height: 100%; transition: transform 0.4s ease; } .blog-card:hover .blog-card-image { transform: scale(1.04); } /* Gradient overlay — fades from transparent at top to dark at bottom */ .blog-card-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0) 40%, rgba(20,50,62,0.72) 68%, rgba(20,50,62,0.92) 100% ); border-radius: 14px; } /* Text block — sits in the bottom third */ .blog-card-text { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px 22px 24px; color: #ffffff; text-align: left; } .blog-card-text h2 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.15vw; font-weight: 600; color: #ffffff; margin: 0 0 8px; line-height: 1.25; text-shadow: 0 1px 4px rgba(0,0,0,0.5); } .blog-card-text p { font-family: 'Bricolage Grotesque', sans-serif; font-size: 0.85vw; font-weight: 300; color: #dde8ee; margin: 0; line-height: 1.45; text-shadow: 0 1px 3px rgba(0,0,0,0.5); } /* Individual card background images */ .blog-card--1 .blog-card-image { background-image: url("https://emdr-brisbane.com.au/resources/books_and_brain.jpg"); } .blog-card--2 .blog-card-image { background-image: url("https://emdr-brisbane.com.au/resources/emdr_finger_1.jpg"); } .blog-card--3 .blog-card-image { background-image: url("https://emdr-brisbane.com.au/resources/anx_man_orange.jpg"); } .blog-card--4 .blog-card-image { background-image: url("https://emdr-brisbane.com.au/resources/agoraphobia_woman_on_train.jpg"); } .blog-card--5 .blog-card-image { background-image: url("https://emdr-brisbane.com.au/resources/ptsd_wooden_letters_a.png"); } .blog-card--6 .blog-card-image { background-image: url("https://emdr-brisbane.com.au/resources/3d_black_bg_q_mark.jpg"); } .blog-card--7 .blog-card-image { background-image: url("https://emdr-brisbane.com.au/resources/close_up_therapist_and_client.jpg"); } .blog-card--8 .blog-card-image { background-image: url("https://emdr-brisbane.com.au/resources/betrayal_remove_wedding_ring.jpg"); } /* Responsive — 2 columns on tablet */ @media (max-width: 1100px) { .blog-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; width: 92%; } .blog-card-text h2 { font-size: 2vw; } .blog-card-text p { font-size: 1.5vw; } } /* Responsive — 1 column on mobile */ @media (max-width: 600px) { .blog-cards-grid { grid-template-columns: 1fr; gap: 16px; width: 88%; } .blog-card-text h2 { font-size: 4.5vw; } .blog-card-text p { font-size: 3.5vw; } } @media (max-width: 1100px) { .menu3-logo {display: none; top: 15vw;} .men3 li {font-size: 15px;} #top-logo{display: block; width:30%; position: absolute; top: 10vw; left: 5vw; z-index: 80;} .menu3 {top: 0vw;} .container_hero {top: 40px; height: auto;} #hero-image-text {width: 75%;} .box2 {font-size: 4vw;} .container_footer .footer-inner {max-width: 100%;padding: 2.5rem 1.75rem 1.5rem;} .footer-heading {font-size: 0.95rem;} .footer-links a {font-size: 0.88rem;} .footer-brand p {font-size: 0.86rem;} .footer-bottom {font-size: 0.82rem;} .grid3 {padding: 50px; width: 100%} .box5 {width:calc(100%/1);} .box5:nth-child(1) {background-size: cover; background-position: center;border-radius: 0%; width: 100%; aspect-ratio: 16 / 8; } .box5:nth-child(2) {width: 100%; aspect-ratio: 16 / 8; } .grid4 {width: 100%;} .box4 {width: 100%; font-size: 3vw;} .grid4-second-location {flex-direction: column-reverse;} .box4 h2 {width: 100%; font-size: 4vw;} #box4-inner {width: 100%; font-size: 2.5vw; padding: 0px 50px; line-height: 1.75;} #box5-inner {font-size: 2vw;} #box5-inner h2 {font-size: 4vw;} #grid6-container {width: 100vw; display: flex; justify-content: center; background-color: #205266;} #grid6 {width: 100%; background-color: #205266; color: #dde8ee; padding: 0px 50px; display: flex;} .grid7 {flex-direction: column-reverse;} .box7 {width: 100%; flex-direction: column-reverse;} #box7-inner { font-size: 2vw; padding: 0px 50px;} .box7 h2 {width: 100%; font-size: 4vw;} .box8 {width: 100%; } #box8-inner {width: 100%; font-size: 2vw; padding: 0px 50px;} .box8 h2 {width: 100%; font-size: 4vw;} .grid9 {flex-direction: column-reverse;} .box9 {width: 100%; flex-direction: column-reverse;} #box9-inner {font-size: 2vw; padding: 0px 50px;} .box9 h2 {width: 100%; font-size: 4vw;} .box10 {width: 100%; } #box10-inner {font-size: 2vw; padding: 0px 50px;} .box10 h2 {width: 100%; font-size: 4vw;} .grid11 {flex-direction: column-reverse;} .box11 {width: 100%; flex-direction: column-reverse;} #box11-inner { font-size: 2vw; padding: 0px 50px;} .box11 h2 {width: 100%; font-size: 4vw;} .box12 {width: 100%; } #box12-inner { font-size: 2vw; padding: 0px 50px;} .box12 h2 {width: 100%; font-size: 4vw;} .grid13 {flex-direction: column-reverse;} .box13 {width: 100%; flex-direction: column-reverse;} #box13-inner { font-size: 2vw; padding: 0px 50px;} .box13 h2 {width: 100%; font-size: 4vw;} #box14-inner { font-size: 2vw; padding: 0px 50px;} .box14 h2 {width: 100%; font-size: 4vw;} #box15-inner { font-size: 2.5vw; padding: 0px 50px; width: 100%;} .box15 h2 {width: 100%; font-size: 4vw; text-align: center;} #submit_button input {font-size: 3vw;} #landing-line-break {display: none; line-height: 0.5;} } @media (min-width: 1101px) { #top-logo{display: none; width: 100%;} .menu3 {top: 0;} } /* Responsive (optional) */ @media (max-width: 900px) { .box1 {width: 100%; aspect-ratio: 16 / 8; } .box2 {width: 50%; font-size: 4vw;} .box1:nth-child(1) {border-radius: 0%;} #box1-inner {font-size: 3vw;} #box1-inner h2 {font-size: 4vw;} .grid3 {padding: 50px;} #top-logo {display: block; width:30%; position: absolute; top: 15vw; left: 5vw; z-index: 80;} #landing-line-break {display: none;} .menu3 li {padding: 10px; font-family: 'Bricolage Grotesque'; font-size: 12px;} .container_hero {top: 36px;} .grid2a {grid-template-columns: 1fr;} .container_footer .footer-inner {gap: 1.5rem; padding: 2.25rem 1.5rem 1.25rem; } .footer-col {flex: 1 1 140px; min-width: 140px;} .footer-heading {font-size: 0.9rem; margin-bottom: 0.7rem;} .footer-links a {font-size: 0.85rem;} .footer-brand p {font-size: 0.83rem;} .footer-bottom {font-size: 0.8rem;} } @media (max-width: 480px) { h1 {font-size: 7vw;} .box1 {width: 100%; aspect-ratio: 16 / 9;} .box2 {width: 100%; aspect-ratio: 16 / 9;} #box1-inner {font-size: 4vw;} #box1-inner h2 {font-size: 6vw;} #box3 {font-size: 4vw;} #box3 h1 {font-size: 6vw;} .grid3 {padding: 30px;} .find_out_more {font-size: 6vw;} #box5-inner {font-size: 4vw;} #box5-inner h2 {font-size: 6vw;} #box5-inner li {padding-inline-start: 20px;} .grid5 {padding: 30px;} #box7-inner {font-size: 3.5vw; padding: 30px;} #box7-inner h2 {font-size: 6vw;} #box8-inner {font-size: 3.5vw; padding: 30px;} #box8-inner h2 {font-size: 6vw;} #box9-inner {font-size: 3.5vw; padding: 30px;} #box9-inner h2 {font-size: 6vw;} #box10-inner {font-size: 3.5vw; padding: 30px;} #box10-inner h2 {font-size: 6vw;} #box11-inner {font-size: 3.5vw; padding: 30px;} #box11-inner h2 {font-size: 6vw;} #box12-inner {font-size: 3.5vw; padding: 30px;} #box12-inner h2 {font-size: 6vw;} #box13-inner {font-size: 3.5vw; padding: 30px;} #box13-inner h2 {font-size: 6vw;} #box4-inner {font-size: 3.5vw; padding: 30px;} #box4-inner h2 {font-size: 6vw;} #box14-inner {font-size: 3.5vw; padding: 30px;} #box14-inner h2 {font-size: 6vw;} #box15-inner {font-size: 5vw; padding: 30px;} #box15-inner h2 {font-size: 7vw;} #book-now {height: 50px; width: 120px;} .bottom-logo {width: 80%;} /* Hero — mobile */ .container_hero {height: 100vh; width: 100vw; top: 36px;} #hero-image {height: 100%;} #hero-image-text {width: 100vw; top: 38vh; right: 0; left: auto;} #hero-image-text h1 {font-size: 6vh;} #hero-image-text h2 {font-size: 3vh;} #landing-words, #landing-words2 {text-align: center;} #top-logo {display: block; width: 50%; position: absolute; top: 11vh; margin-left: 25%; z-index: 80; left: 0;} .container_footer .footer-inner {gap: 1.5rem; padding: 2rem 1.25rem 1rem;} .footer-heading {font-size: 0.95rem; margin-bottom: 0.6rem;} .footer-links li {margin: 0.6rem 0;} .footer-links a {font-size: 0.9rem;} .footer-brand p {font-size: 0.88rem;} .footer-bottom {font-size: 0.78rem; line-height: 1.5;} .footer-inner {display: grid; grid-template-columns: 1fr; width: 100vw; background-color: #255e74;} }