/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
		
:root {
	--pink: #9d0059;
    --blue: #405a67;
    --red: #9d0059;
    --purple: #9d0059;
	--grey: #bbc5ce;
	--gold: #D4A017;
	--light-pink: #ffc2e5;
    --light-blue: #b6ddf0;
	--light-gold: #ffe9af;
    --light-grey: #f8f8f8;
	--grad-blue: linear-gradient(0deg, rgba(32,53,84,1) 0%, rgba(64,90,103,1) 100%);
}

.alignright{float:right; margin: 0 0 30px 30px}
.alignleft{float:left; margin: 0 30px 30px 0}
.alignright, .alignleft{width:100%; max-width: 40%; height: auto}

/* Testimonials */
.testimonials-list{max-width: 1200px; margin: 0 auto}
.testimonial-item{display: flex; justify-content: space-between; align-items: flex-start; margin: 0 auto 15px; grid-column-gap: 30px; transition:all 600ms ease-in-out}
.testimonial-item > div{width:100%; padding: 15px}
.testimonial-item > div:first-of-type{background-color: #f8f8f8; border-radius:10px; padding: 0 30px 30px}
.testimonial-item > div:last-of-type{max-width: 200px; padding: 10px; transition:all 600ms ease-in-out}
.testimonial-logo{max-width:200px; aspect-ratio:1/1; text-align: center}
.testimonial-logo img{object-fit: contain; object-position: center; width:100%; height: 100%}

.testimonial-item.start{opacity:0.1; transform:translate(0, 20px)}
.testimonial-item.start > div:first-of-type{transform:translate(-30px, 0)}
.testimonial-item.start > div:last-of-type{transform:translate(30px, 0)}

/* Showcase */
.showcase-list{max-width: 1200px; margin: 0 auto 30px; display: flex; justify-content: center; align-items: stretch; grid-gap: 30px; flex-wrap: wrap}
.showcase-list > div{background-color: var(--grey); width:100%; max-width: 380px}
.showcase-list > div h2{line-height: 1.2; font-size:1.4rem; transition:all 300ms ease}
.showcase-list > div h2:hover{color:var(--pink) !important}
.showcase-tease-wrap{text-align: center; border-top:5px solid var(--grey); max-width: 1260px; padding: 0 30px; margin: 60px auto}
.showcase-list-tease{padding: 0 16px}
.showcase-list-thumb{aspect-ratio:4/3; background-color: var(--grey)}
.showcase-list-thumb img{object-fit: cover; object-position: center; width:100%; height: 100%}
.showcase-tease{display: flex; justify-content: center; align-items: stretch; grid-gap: 30px; flex-wrap:wrap}
.showcase-tease > div{background-color: var(--light-grey); width:216px; position: relative; border:1px solid #eee}
.showcase-tease-img{aspect-ratio:4/3; background: var(--blue)}
.showcase-tease-img img{object-fit: cover; object-position: center; width:100%; height: 100%}
.showcase-tease h2{font-size:1.2rem; margin: 0; padding: 30px 0; text-align: left}
.showcase-tease-text{padding: 0 15px 30px}
.showcase-tease-button{position: absolute; right:10px; bottom:10px}
.showcase-tease-more{padding: 60px 30px 0; text-align: center}

.showcase-list-item{transition: all 600ms ease-in-out}
.showcase-list-item.start{transform:scale(0.8) rotate(2deg); opacity: 0.5}

@media only screen and (max-width: 600px) {
	.showcase-tease > div{width:300px}
	.showcase-list > div{max-width: 320px; margin: 0 auto}
}

/* Logos grid*/
.cert-logos-grid{display: flex; justify-content: center; align-items: center; flex-wrap:wrap; max-width: 900px; margin: 60px auto; grid-gap: 50px}
.cert-logos-grid > div{aspect-ratio:4/4; width:100%; max-width:150px}
.cert-logos-grid > div img{object-fit: contain; width:100%; height: 100%; object-position: center}

#logo-strip{text-align: left; background-color: var(--blue); color: #fff; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box}
#logo-strip > div:first-of-type{border-left:15px solid var(--pink); box-sizing: border-box; padding: 0; max-height: 80px}
#logo-strip img{max-height: 80px; margin: 0; object-fit: contain; object-position: top left; width:100%; height: 100%}


@media only screen and (max-width: 600px) {
	.cert-logos-grid{margin: 60px 30px}
	.cert-logos-grid > div{max-width: 200px; aspect-ratio:inherit;}
	#logo-strip > div:first-of-type{border-left:0}
}

/* Accreditations */
#accreditations{background: var(--blue); color:#fff; max-width: 1170px; margin: 30px auto; padding: 10px 15px; font-size:0.9em; border-radius:5px}
#accreditations a{color: #fff; text-decoration: underline}
.accreditations{display: flex; justify-content: space-between; align-items: center; max-width: 1100px; margin: 0 auto}
.accreditations > div{width:100%; max-width: 300px; height: 150px; background-size: contain; background-position: center; margin: 15px}

/* Text block */
.textblock{max-width: 1260px; margin: 30px auto; padding: 0 30px}
.textblock p:first-of-type{font-size:1.4rem}

/* Two box */
.twoBox{display: flex; justify-content: space-between; align-items: stretch; max-width:1200px; margin: 0 auto 30px}
.twoBox > div{width:100%; max-width: 50%; padding: 30px; aspect-ratio:16/9; display: flex; justify-content: flex-start; align-items: center; background-position: center; background-size: cover; transition:all 600ms ease-in-out}
.twoBox > div > div{font-size: 1.2rem; line-height: 1.6rem}


.twoBox.start > div:first-of-type{transform:translate(-100px, 0); opacity: 0.1}
.twoBox.start > div:last-of-type{transform:translate(100px, 0); opacity: 0.1}

/* Home page text panel */
.hpTextPanel{max-width: 1200px; margin: 90px auto 40px; column-count: 2; column-gap: 60px; padding: 10px 15px; transition: all 2000ms ease; font-size:18px}
.hpTextPanel p{padding: 0 0 15px; margin:0px}
.hpTextPanel p:first-of-type{font-weight:600; font-size:28px; color:var(--blue)}

/* Team */
.our-people-flex{display: flex; justify-content: space-between; align-items: stretch; grid-gap: 30px; max-width: 1200px; margin: 0 auto 60px}
.our-people-flex > div{width:100%; text-align: center; box-sizing: border-box}
.our-people-flex > div:first-of-type{padding:0; text-align: left}
.our-people-flex > div:last-of-type{padding:15px; max-width: 250px; background: var(--grad-blue); color: #fff; border-radius:10px}
.our-people-flex > div:last-of-type h2{color: #fff !important; padding: 0 0 5px; margin: 0 0 20px; border-bottom:3px solid var(--grey)}
.our-people-flex > div:first-of-type p:first-of-type{font-size:1.2rem}
.team-page-content{max-width: 1260px; margin: 0 auto 60px; padding: 0 30px; display: flex; justify-content: space-between; align-items: flex-start; grid-gap: 30px}
.team-page-content > div{width:100%}
.team-page-content > div:first-of-type{}
.team-page-content > div:last-of-type{max-width: 300px}
.team-page-content > div:last-of-type img{object-fit:contain; width:100%; height: 100%}
.team-page-content > div:first-of-type > h2{padding: 0; margin: 0}
.team-page-content > div:first-of-type > h3{padding: 0; margin: 0; color: var(--pink); font-size:1.4rem}
.team-member{padding: 0 0 15px}
.team-member h3{padding: 0; margin: 0}
.team-member h3 a{color: #fff; font-size: 1.4rem}
.team-member h3 a:hover{color:var(--grey)}
.team-member-photo{aspect-ratio:1/1; width:100%}
.team-member-photo img{object-fit: cover; object-position: center; width:100%; height: 100%; transition:all 300ms ease-in-out}
.team-member-photo img:hover{opacity: 0.8}
.teamlist{display:flex; justify-content: flex-start; align-items: stretch; flex-wrap:wrap; margin:0 auto}
.teamlist > div{border-radius:30px; width:100%; max-width:320px; height: 320px; background-size:cover; background-position: top center; margin:0 35px 50px; cursor:pointer; transition:all 500ms ease; position: relative; overflow: hidden}
.teamlist > div:hover{transform:scale(1.03); box-shadow:0px 0px 20px #666}
.teamlist > div > div{position: absolute; bottom:0px; left:0px; width:100%; background-color: rgba(9,102,189,0.7); padding: 10px 0}
.teamlist h2{font-size:18px; color: #fff; padding: 0 15px 0 25px}
.staffthumb{max-width: 30%; float:right; margin: 0 0 30px 30px; border-radius:30px}

/* News */
.newslist{display: flex; justify-content: space-between; align-items: stretch; flex-wrap: wrap}
.newslist > div{width:100%; max-width:270px; position: relative; padding-bottom: 60px; margin-bottom: 50px}
.newslist h2{font-size: 24px; padding: 0px; margin: 10px 0 15px}
.date{color: #ccc; font-size:12px; padding: 0px}
.newslistthumb{width:100%; height: 260px; background-color: #f8f8f8; display: block; background-size: cover; background-position: center}
.newslistthumb img{width:100%; max-width:100%}
.newsouter{text-align: center; padding: 0 0 80px}
.newsinner{max-width:1200px; padding:0 15px; display:flex; background-size: cover; background-position: center; justify-content: space-between; align-items: stretch; margin: 0 auto 60px; transition:all 1000ms ease}
.newsinner > div{background: #ccc; background-size: cover !important; background-position: center; flex-grow:1; max-width:360px; min-height: 400px; position: relative; padding: 0px; transition:all 500ms ease; cursor:pointer}
.newsinner > div:hover{box-shadow:0px 0px 20px #666}
.newsinner h3{position:absolute; font-size:22px; left:0px; bottom:0px; width:100%; background-color: rgba(0,0,0,0.8); margin: 0px; padding: 25px 15px; box-sizing: border-box; text-align: left}
.newsinner h3 a{color: #fff; text-align: left}
.newsinner > div:nth-of-type(1){background-image: url("../img/photo-02.jpg")}
.newsinner > div:nth-of-type(2){background-image: url("../img/photo-03.jpg")}
.newsinner > div:nth-of-type(3){background-image: url("../img/photo-04.jpg")}

.newsbutton{padding: 16px 40px; text-transform: uppercase; color:var(--red); border:2px solid var(--red); font-weight:700; font-size:24px; cursor:pointer; transition:all 500ms ease}
.newsbutton:hover{background: var(--red); color:#fff}

/* HP Video */
#hpVideo{max-width:1200px; margin: 0px auto 90px}
#hpVideo > div{padding-bottom: 56%; width:100%; position: relative}
#hpVideo iframe{position:absolute; top:0; left:0; width:100%; height: 100%}

/* Testimonials */
.testimonials-wrap{background: linear-gradient(0deg, rgba(32,53,84,1) 0%, rgba(64,90,103,1) 100%); color: #fff; padding: 40px 0 60px; text-align: center; transition:all 1000ms ease; }
.testimonials-wrap h2{color: #fff; margin: 20px 0 60px; padding: 0px}
.testimonialsouter{overflow: hidden; width:100%; max-width: 1080px; height: 600px; margin: 0 auto; position: relative}
.testimonialsinner{max-width:1100px; display:flex; justify-content: space-around; align-items: stretch; margin: 0 auto; position: absolute; left:0px; top:0px; grid-gap:25px}
.testimonialsinner > div{width:100%; min-width:340px; max-width: 340px; background-color: rgba(255,255,255,0.1); border-radius:20px; padding:30px 30px 80px; text-align: left; background-image:url("../img/quotes-1.png"), url("../img/quotes-2.png"); background-position: top 5px left 5px, bottom 5px right 5px; position: relative}
  
.testimonialsinner em{font-weight:700}
.testimonialsinner > div{background-color:aliceblue; color:var(--blue)}
@media only screen and (max-width: 600px) {
	.testimonialsinner > div{min-width:inherit; max-width: 300px; margin: 0}
}


/* CTA */
.cta3{display:flex; justify-content: space-between; align-items: stretch; max-width: 1200px; padding: 0 15px; margin: 40px auto 60px; transition:all 1000ms ease}
.cta3 > div{flex-grow:1; cursor:pointer; background-size:cover !important;  transition:all 500ms ease; background-position: top center; width:100%; max-width:360px; background: #efefef; color:#fff; min-height: 300px; position: relative; padding: 0px; overflow: hidden}
.cta3 > div:hover{transform:scale(1.03); box-shadow:0px 0px 20px #666}
.cta3 h3{position: absolute; left:0px; bottom:0px; width:100%; padding: 20px; margin:0px; box-sizing: border-box; font-size:24px; text-align: center}
.cta3 > div:nth-of-type(1){ border:2px solid rgba(157,0,89, 0.7)}
.cta3 > div:nth-of-type(2){ border:2px solid rgba(64,90,104,0.7)}
.cta3 > div:nth-of-type(3){ border:2px solid rgba(212,160,23,0.7)}
.cta3 > div:nth-of-type(1) h3{background-color: rgba(157,0,89,0.7)}
.cta3 > div:nth-of-type(2) h3{background-color: rgba(64,90,103,0.7)}
.cta3 > div:nth-of-type(3) h3{background-color: rgba(212,160,23,0.7)}
.cta3 > div h3 .fas{transform:translate(10px, 2px); color: #fff !important}
.cta3 a{color: #fff}

/* Heros */
#hero{background: #efefef; margin: 0 auto; border-top:1px solid #fff; border-bottom:1px solid #fff; background-size: cover; background-position: center; position: relative; aspect-ratio:16/4}
#hero.deep{aspect-ratio:16/6}

#heroinner{ display: flex; justify-content: center; align-items: center; margin: 40px auto; max-width:1200px; padding: 0 15px; height: calc(100% - 200px)}
#heroinner h1{padding:0px; margin:0px; color:#fff; font-size:3.6rem; line-height: 1; transition:all 600ms ease-in-out; transform:translate(60px, 0); opacity: 0.1}
#heroinner h1.rested{transform:translate(0, 0); opacity: 1}
#heroinner > div{flex-grow:1; text-align: left; box-sizing: border-box}

#heroinner .button{color: #fff; background: var(--pink); margin: 40px 0 0; font-weight:700; padding: 15px 60px; position: relative; box-sizing: border-box}
#heroinner .button:hover{background-color: var(--gold) !important; color: var(--pink); background: #ffffff !important}
#heroinner .fa-chevron-circle-right{font-size:40px; display: block; position: absolute; right:6px; top:6px; color: #fff}
.hero-text{color: #fff; font-size:1.4rem; padding: 0; transition:all 1s ease-in-out; opacity: 0}
.hero-text.rested{opacity: 1}

.hero-button-1:hover{color: var(--pink) !important}
.hero-button-2{background-color:var(--blue)!important; color: #fff !important}
.hero-button-2:hover{background-color: var(--gold) !important; color: var(--blue) !important}


.carousel{background-color: #efefef; min-height:600px; z-index: 2; position: relative}
.carousel > div{position: absolute; left:0px; top:0px; width:100%; height: 100%; opacity: 0; background-size: cover}
.carousel > div:first-of-type{opacity: 1}
#carouter{width:100%; max-width: 1200px; margin: 0 auto; position: relative; z-index: 3}
#carinner{max-width: 400px; background-color: rgba(0,124,255,0.5); border-radius:30px; padding: 30px; color: #fff; position: absolute; top:45px; left:15px}
#carinner a{color:#fff}
#carinner h1{padding:0px; margin:0px; color:#fff; font-size:46px}
#carinner .button{color: #fff; background: var(--pink); margin: 20px 0 0; font-weight:700; padding: 15px 60px 15px 30px; position: relative}
#carinner .button:hover{color: var(--pink) !important; background: #ffffff !important}
#carinner .fa-chevron-circle-right{font-size:40px; display: block; position: absolute; right:6px; top:6px}


.wpcf7{background-color:var(--light-grey); padding: 30px}
.wpcf7 h2{padding: 0; margin: 0}
.wpcf7 input{border:1px solid #ccc; border-radius:0; width:100%; box-sizing: border-box}
.wpcf7 textarea{width:100%}
.wpcf7 label{color: var(--pink); font-weight:700; margin: 0 !important; padding: 0 0 15px !important; display: block}

@media only screen and (max-width: 1200px) {
	.newslist{justify-content: space-around}
	.our-people-flex{margin: 30px}
	.our-people-flex > div {padding:0 !important}
	.twoBox{margin: 0 30px 30px}
}
@media only screen and (max-width: 1100px) {
    .testimonialsouter{height:inherit !important; overflow: inherit !important}
    .testimonialsinner{justify-content:space-around; flex-wrap:wrap; position: relative; top:inherit; left: inherit}
    .testimonialsinner > div{margin-bottom: 30px}
    .newsinner{justify-content:space-around; flex-wrap:wrap}
    .newsinner > div{min-width:360px; margin-bottom: 30px}
	.newsthumb{max-width: 50%}
    .cta3{flex-wrap:wrap; justify-content: space-around}
    .cta3 > div{margin: 10px 10px 30px}
	#hero{aspect-ratio:16/7}
	#hero.deep{aspect-ratio:16/9}
}
@media only screen and (max-width: 800px) {
	.cqc > div{flex-direction:column}
    .cqc > div > div{max-width: 100%; text-align: center !important}
    .cqc img{margin: 0px; max-width:100%}
    .hpTextPanel{column-count: 1; padding: 0 30px}
	.twoBox{display: block; margin: 30px}
	.twoBox > div{max-width: 100%; min-height: 400px; padding: 30px !important; aspect-ratio: auto !important; display: block}
	#hero{aspect-ratio:16/9}
}
@media only screen and (max-width: 700px) {
	.our-people-flex{display: block}
	.our-people-flex > div:last-of-type{padding: 30px; background-color: red; max-width: 300px; margin: 60px auto}
	.team-page-content{flex-direction: column-reverse}
	.team-page-content > div{max-width: 100%}
	.team-page-content > div:last-of-type{text-align: center}
	.team-page-content > div:last-of-type img{margin: 0 auto}
}
@media only screen and (max-width: 600px) {
	
    .enqform{flex-direction:column; padding: 30px; max-width: 90%; margin: 0 auto}
    .enqform > div{width:100%; padding: 0px}
    .enqform input, .enqform textarea{max-width:98%; box-sizing: border-box}
    .staffthumb{float: none; margin: 30px auto 15px !important; max-width:100%}
	.wpcf7{padding: 15px}
	#hero{aspect-ratio:4/2}
	#hero.deep{aspect-ratio:4/3}
	#hero.deep #heroinner{aspect-ratio:none}
	#heroinner{padding-bottom: 0}
	#heroinner h1{font-size: 2.5rem}
	#heroinner .button{min-width:250px}
	#heroinner{display: block; padding-left: 30px; height: auto}
	#heroinner .button{margin: 10px 0; width:calc(100% - 14px)}
	#heroinner .hero-text{padding:12px 0}
	.testimonial-item{display: block; margin: 0 30px 30px}
	.testimonial-item > div:first-of-type{padding-top: 20px}
}