* {box-sizing:border-box; padding:0; margin:0;}

html {
    /* Default Colours*/
    --black: #000;
    --white: #fff;
    --mainBrandColour: #D3AA5F;
    --secondaryBrandColour: #031730;
    --blue: #052752;
    /* Default */
    --transition-default: all 0.3s ease-out;
    --border-radius-default: 0.25rem;
    /* Fonts */
    --defaultFontFamily: 'Inter', sans-serif;
    --secondaryFontFamily: 'Orbitron', sans-serif;
    /*scroll-behavior: smooth;*/
}


body {
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
    font-family: var(--defaultFontFamily);
    background: var(--white);
    counter-reset: section;
    color: var( --secondaryBrandColour);
}
  
/* Grid */
.container {
    width: min(100%, 1340px);
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(12, 1fr);
    column-gap: 0;
    /* row-gap: 1.5rem; */
}
.container .container {padding:0;}
.container .col-12,
.container .col-11,
.container .col-10,
.container .col-9,
.container .col-8,
.container .col-7,
.container .col-6,
.container .col-5,
.container .col-4,
.container .col-3 {
    grid-column:1/-1;
}
.pt-0 {padding-top:0 !important;}
.pb-0 {padding-bottom:0 !important;}
.mt-1 {margin-top:1rem;}
.pt-2 {padding-top:2rem;}
.pb-2 {padding-bottom:2rem;}
main {background:var(--white);}
section {padding:4rem 0; position:relative;}
a {color:var(--mainBrandColour); text-decoration:none; transition:var(--transition-default); display:inline-block;}
a:hover {color:var(--secondaryBrandColour); text-decoration:none;}
p {margin:0 0 1.5rem 0;}
img {display:block;}
img.img-fluid {width:100%; max-width:100%; height:auto;}
.img-radius {border-radius:var(--border-radius-default);}
.img-shadow {box-shadow:-1px 0px 14px 0px rgba(0,0,0,0.25);}
.img-icon {position:relative; margin-bottom:2rem;}
.img-icon::before {content:""; position:absolute; right:1rem; bottom:1rem; width:40px; height:40px; background-image:url(/images/icon-logo-white.svg); background-repeat:no-repeat; background-position:50% 50%; background-size:contain;}
.img-icon-gold::before {background-image:url(/images/icon-logo-gold.svg); width:20px; height:20px;}
.img-gold-border {border-bottom: 3px solid var(--mainBrandColour); border-right:3px solid var(--mainBrandColour);}
iframe {border:none; width:100%; min-height:480px; display:block;}
.text-center {text-align:center;}

.logo {max-width:175px;}
.logo img {width:100%;}
.level1-title {font-size:1.75rem; font-family:var(--secondaryFontFamily); font-weight:900; text-transform:uppercase; margin-bottom:1rem; line-height:1.1;}
.level2-title {font-size:1.5rem; font-family:var(--secondaryFontFamily); font-weight:900; text-transform:uppercase; margin-bottom:1rem; line-height:1.3;}
.level2-title span {font-weight:400;}
span.nowrap {white-space:nowrap; font-weight:900;}

@keyframes fadeInUp {
    0% {
        opacity:0;
        transform:translate3d(0,50%,0);
    }
    100% {
        opacity:1;
        transform:translate3d(0,0%,0);
    }
}

@keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

@keyframes fadeOut{
    0% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}


/* scroll in */
.fadeup {opacity:0; transform:translateY(150px) translateZ(0); transition-delay:.5s; transition:.6s; transition-property:opacity, transform;}
.fadeup.inView {opacity:1; transform:translateY(0) translateZ(0);}
.fadein {opacity:0; transition-delay:.5s; transition:.6s; transition-property:opacity;}
.fadein.inView {opacity:1;}


/* lists */
ul.list { list-style:none; padding:0;}
ul.list li {position:relative; margin-bottom:1.6rem; padding-left:30px;}
ul.list li::before {color:var(--white); content:""; position:absolute; left:0; top:0; background-color:var(--secondaryBrandColour); background-repeat:no-repeat; background-position:50% 50%; width:22px; height:22px; border-radius:50%; text-align:center;}
ul.list.list-check li::before {background-image:url(/images/icon-check.svg);}
ul.list.list-counter li::before {counter-increment:section; content:counter(section); font-size:12px; display:flex; justify-content:center; align-items:center;}
a.link-underline {text-decoration:underline;}
a.link-underline:hover {text-decoration:none;}


/* Buttons */
.btn {background:var(--mainBrandColour); color:var(--secondaryBrandColour); border-radius:var(--border-radius-default); padding:0.6rem 1rem; border:none; font-weight:700; font-size:1.125rem;}
.btn:hover {color:var(--white); background:var(--secondaryBrandColour);}


/* Header */
header {position:absolute; top:0; left:0; width:100%; z-index:2;}
.header-container {padding-top:1rem;}
header .container {align-items:center;}
header .logo {margin:0 auto;}
.top-bar {color:var(--white); background:var(--secondaryBrandColour); padding-top:0.75rem; padding-bottom:0.75rem; font-weight:600; font-size:0.75rem;}
.top-bar ul {list-style:none; display:flex; padding:0; margin:0; justify-content:center;}
.top-bar ul li {white-space:nowrap;}
.top-bar ul li:first-child {margin-right:2rem;}
.top-bar a {color:var(--white);}
.top-bar a span {color:var(--mainBrandColour);}
.top-bar a:hover {color:var(--mainBrandColour);}


/* Footer */
footer {padding-top:50px; padding-bottom:50px; color:var(--white); background:var(--secondaryBrandColour) center right; background-image:url(/images/footer-sayner-real-estate.webp); background-size:cover;}
footer .logo {max-width:175px;}
footer .btn:hover {background: var(--white); color:var(--secondaryBrandColour);}
footer ul {list-style:none; padding:0; margin:0;}
footer a {color: var(--white);}
footer a:hover {color: var(--mainBrandColour);}
footer a span {color: var(--mainBrandColour);}
.footer-links ul  {margin-top:1rem; font-size:0.75rem; font-weight:600;}
.footer-links ul li ul {line-height:2.2;}
.footer-links .level2-title {font-size:20px; line-height:1.6;}
.footer-links .level2-title br {display:none;}
.footer-links .level2-title a {color:var(--mainBrandColour); display:inline;}
.footer-links .level2-title a:hover {color:var(--white);}
.footer-copyright {margin-top:2.25rem; padding-top:1.75rem; position:relative;}
.footer-copyright::before {content:""; top:0; left:28px; width:calc(100% - 56px); position:absolute; border-top:1px solid var(--mainBrandColour);}
.footer-copyright ul li { line-height:2.2;}
.footer-copyright ul {margin-bottom:1rem;}
.footer-copyright {font-size:0.875rem;}
.footer-contact {max-width:460px;}


/* Nav */
nav ul {list-style:none; padding:0; margin:1rem 0 0 0; font-size:1rem; display:flex; justify-content:center; column-gap:1rem; row-gap:0.5rem; flex-wrap:wrap;}
nav a {white-space:nowrap; color:var(--white);}
nav a:hover {color:var(--mainBrandColour);}
nav a.active {color:var(--mainBrandColour);}
nav ul li {flex:0 0 30%; text-align:center;}


/* Banners */
section.banner {font-size:1rem; background-color:var(--blue); padding-top:15rem; padding-bottom:6rem; color:var(--white); background-position:50% 50%; background-repeat:no-repeat; background-size:cover; text-align:center; min-height:594px;}
section.banner br {display:none;}
section.banner.default {background-image:url(/images/banner-sayner-real-estate.webp);}
section.banner.home {background-image:url(/images/banner-sayner-real-estate.webp);}
section.banner .level1-title {opacity:0; animation-name:fadeInUp; animation-duration:1s; animation-fill-mode:forwards; animation-delay:0.5s; margin-top:3rem;}
section.banner p {opacity:0; animation-name:fadeInUp; animation-duration:1s; animation-fill-mode:forwards; animation-delay:1s;}
section.banner.clients {background-image:url(/images/banner-clients.webp);}
section.banner.contact {background-image:url(/images/banner-contact.webp?v=2);}
section.banner.track-record {background-image: url(/images/banner-track-record.webp);}
section.banner.banner-short {min-height:unset; padding-top:17rem; padding-bottom:2rem;}
section.banner.banner-short .level1-title {margin-top:0;}


/* Contact */
.list-contact a {color:var(--secondaryBrandColour);}
.list-contact a:hover {color:var(--mainBrandColour);}
#contact-form {scroll-margin-top:2rem;}
.form-container {background:var(--blue); border-radius:var(--border-radius-default); padding:2rem;}
form .error {color:#E00C44; margin-bottom:1rem; font-size:1.2rem;}
form label {display:none;}
.submitButton .btn {font-weight:700; font-size:1.125rem; width:100%; transition:var(--transition-default);}
.form-control {display:block; width:100%; padding:0.7rem 1.2rem; font-size:1rem; border:none; border-radius:var(--border-radius-default); margin-bottom:1.5rem;}
textarea {min-height:200px}
.form-control:focus {color:#000; border-color:#E00C44; outline:0; box-shadow:none;}
#success_fail_info {color:#fff; text-align:center;}
#success_fail_info.error {background:#E00C44; padding:1rem; margin-bottom:1rem; border-radius:var(--border-radius-default);}
#success_fail_info.success {background:#1BD3AF; padding:1rem; margin-bottom:1rem; border-radius:var(--border-radius-default);}
#success_fail_info p {margin:0;}
::-webkit-input-placeholder {font-size:1rem; font-family:var(--defaultFontFamily);}
::-moz-placeholder {font-size:1rem; font-family:var(--defaultFontFamily);}
:-ms-input-placeholder {font-size:1rem; font-family:var(--defaultFontFamily);}
:-moz-placeholder {font-size:1rem; font-family:var(--defaultFontFamily);}
.grecaptcha-badge {z-index:2;}
.form-container .btn:hover {background:var(--white); color:var(--secondaryBrandColour);}


/* Clients */
.section-intro p {font-size:1.125rem;}
.section-intro p, .section-intro .level2-title {text-align:center; max-width:690px; margin:0 auto;}
.section-intro .level2-title {margin-bottom:1rem;}
.section-intro p:last-child {margin-bottom:0;}
.logo-grid {display:flex; flex-wrap:wrap; --cols:2; --gap:1rem; display:flex; gap:var(--gap);}
.logo-grid>div {border:1px solid #F4F4F4; aspect-ratio:1/0.8; padding:1rem; box-shadow:5px 5px 8px 0px rgba(0,0,0,0.05); transition:all 0.5s ease-out; display:flex; justify-content:center; align-items:center; flex-basis:calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));}
.logo-grid>div:hover {box-shadow:5px 5px 8px 0px rgba(0,0,0,0.2);}
.logo-grid>div img {width:auto; max-width:100%; max-height:120px;}


/* Track Record */
.grid {display:flex; flex-wrap:wrap; --cols-transactions:1; --gap-transactions:1rem; gap:var(--gap-transactions);}
.grid-card {background-color:transparent; aspect-ratio:1/1; border:1px solid #f1f1f1; perspective:800px; flex-basis:calc(100% / var(--cols-transactions) - var(--gap-transactions) / var(--cols-transactions) * (var(--cols-transactions) - 1)); position:relative; z-index:1;} 
.grid-card-inner {position:relative; width:100%; height:100%; text-align:center; transition:transform 0.8s; transform-style:preserve-3d;}
.grid-card:hover .grid-card-inner {transform:rotateY(180deg); }
.grid-card-front, .grid-card-back {position:absolute; width:100%; height:100%; -webkit-backface-visibility:hidden; backface-visibility:hidden; box-shadow:5px 5px 8px 0px rgba(0,0,0,0.5);}
.grid-card-front {background-color:var(--secondaryBrandColour); background-size:cover; background-position:50% 50%; background-repeat:no-repeat; color:var(--white); font-family:var(--secondaryFontFamily); font-size:1.5rem; line-height:1.3; padding:2rem 1rem; display:flex; justify-content:center; align-items:flex-end;}
.grid-card:hover {z-index:2;}
.grid-card-back {background-color:var(--blue); color:white; transform:rotateY(180deg); text-align:left; padding:1rem; line-height:1.3;}
.grid-card-back h3 {font-family:var(--secondaryFontFamily); display:inline-block; padding-bottom:0.75rem; margin-bottom:1rem; border-bottom:2px solid var(--mainBrandColour);}
.grid-card-back ul {list-style:none; padding:0;}
.grid-card-back ul li {margin-bottom:0.5rem;}


/* Home */
.section-about {background:var(--blue) url(/images/banner-about.webp) no-repeat 50% 50%; background-size:cover; color:var(--white);}
.about-profile {display:flex; flex-direction:column;}
.about-profile .img-fluid {max-width:120px;}
.stats {display:flex; font-size:1.125rem; column-gap:4rem; margin-bottom:2rem; flex-wrap:wrap;}
.stats>div>div {color:var(--mainBrandColour); font-weight:600; font-size:2.5rem;}
.section-services {text-align:center;}
.section-services .level2-title {margin-bottom:2rem;}
.grid.services-grid {--cols-services:1; --gap-services:2rem; gap:var(--gap-services);}
.grid.services-grid .grid-card {flex-basis:calc(100% / var(--cols-services) - var(--gap-services) / var(--cols-services) * (var(--cols-services) - 1));}
.grid.services-grid span {display:block;}
.grid.services-grid .service-title {display:block; font-family:var(--secondaryFontFamily); font-size:1.5rem; line-height:1.2; margin-bottom:0.75rem; color:var(--white);}
.grid.services-grid .service-link {position:relative; display:inline-block; font-size:1rem; transition:var(--transition-default); color:var(--mainBrandColour);}
.grid.services-grid .service-link::before {position:absolute; content:""; bottom:0; left:0; width:100%; border-bottom:1px solid var(--mainBrandColour);}
.grid.services-grid .grid-card-front {align-items:center;}
.grid.services-grid .grid-card-back {display:flex; justify-content:center; align-items:center; text-align:center; font-size:1.4rem;}


/* section Banner */
.section-banner {background:var(--mainBrandColour); color:var(--white);}
.section-banner .level2-title {margin:0;}
.section-banner.contact {background-position:center 80%; background-image:url(/images/banner-contact.webp); background-size:cover;}


@media (min-width:360px) {
    /* Footer */
    .footer-links ul {display:flex; justify-content:space-between;}
    .footer-links ul ul {flex-direction:column; align-items:flex-end; justify-content:space-between;}
    .footer-links ul ul {margin-top:0;}
    .footer-links ul ul li {line-height:inherit;}
    .footer-links .level2-title br {display:block;}
}


@media (min-width:400px) {
    /* Btn */
    .btn {padding:0.6rem 2rem;}
}


@media (min-width:420px) {
    /* Footer */
    .footer-copyright ul {display:flex; gap:2rem;}
    .footer-copyright {font-size:1rem;}
}


@media (min-width:440px) {
    /* Banner */
    section.banner.banner-short {padding-top:16rem; padding-bottom:3rem;}
}


@media (min-width:520px) {
    /* Footer */
    .footer-links .level2-title {font-size:28px;}
}


@media (min-width:540px) {
    /* Nav */
    nav ul {margin:1rem 0 0 0; justify-content:center; column-gap:1.5rem; row-gap:0.5rem; flex-wrap:nowrap;}
    nav ul li {flex:0 0 auto; text-align:center;}
}


@media (min-width:576px) {
    /* Nav */
    nav ul {font-size:1.125rem;}
    /* Banners */
    section.banner br {display:inline;}
    /* Footer */
    .footer-copyright p br {display:none;}
    footer .logo {max-width:250px;}
    /* Home */
    .service-grid span {font-size:2rem;}
    /* Track Record */
    .grid {--cols-transactions:2;}
}


@media (min-width:640px) {
    /* Clients */
    .logo-grid {--cols:3;}
    /* Home */
    .grid.services-grid {--cols-services:2;}
}


@media (min-width:710px) {
    /* Banner */
    section.banner.banner-short {padding-top:12rem; padding-bottom:3rem;}
    /* Header */
    header .container .col-6 {grid-column:auto / span 6;}
    header .logo {margin:0;}
    .top-bar ul {flex-direction:row; justify-content:flex-end;}
    /* Nav */
    nav ul {justify-content:flex-end; margin-top:1.1rem; flex-wrap:wrap;}
}


@media (min-width:768px) {
    .level1-title {font-size:2.2rem; line-height:1.1;}
    .level2-title {font-size:1.875rem;}
    .container .col-5 {grid-column:auto / span 5;}
    .container .col-6.offset-right {grid-column:span 6 / -1;}
    .section-about .container,
    .section-clients .container,
    .section-team .container {position:relative; grid-template-columns:repeat(2, 1fr); gap:4rem;}
    .section-clients .col-6,
    .section-about .col-6,
    .section-team .col-6 {grid-column:auto / span 1;}
    .section-about .container::before {position:absolute; top:0; left:50%; border-left:1px solid var(--mainBrandColour); height:100%; content:"";}
    /* Banners */
    section.banner {font-size:1.125rem;}
    /* Footer */
    .container.footer-links .col-4 {grid-column:auto / span 4;}
    .container.footer-links .col-8 {grid-column:auto / span 8; justify-self:flex-end;}
    .container.footer-links .col-6 {grid-column:7 / span 6;}
    .footer-copyright ul {margin-bottom:0;}
    footer .footer-copyright.container .col-6 {grid-column:auto / span 6;}
    footer .footer-copyright.container .col-6:last-child {text-align:right;}
    /* Clients */
    .logo-grid {--cols:4;}
    /* Home */
    .service-grid {--cols-service:2;}
}


@media (min-width:820px) {
    /* Track Record */
    .grid {--cols-transactions:3;}
    /* Nav */
    nav ul {flex-wrap:nowrap;}
}


@media (min-width:992px) {
    .level1-title {font-size:2.7rem; line-height:1.1;}
    /* Home */
    .grid.services-grid {--cols-services:3;}
}


@media (min-width:1120px) {
    /* About */
    .about-profile {flex-direction:row;}
    .about-profile div:first-child {flex:0 0 140px;}
    .about-profile .img-fluid {margin-right:20px; margin-top:5px;}
    /* Clients */
    .logo-grid {--cols:5;}
    /* Home */
    .service-grid {--cols-service:3;}
    /* Track Record */
    .grid {--cols-transactions:4;}
}