@charset "UTF-8";

@import url("");

:root {
  --border-radius-1x: 0px;
  
  --custom-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Maykenbel Group colours */
  --brand-color-2: #A38D6B;
  --custom-background-color: #181B31B3;
}

:root:has(body[title*="Chesham Court Apartments"]) {
  --brand-color: #061230; /* Darker colour, header background */
  --brand-color-2: #A38D6B; /* Accent colour */
  --custom-background-color: #061230; /* Top most header colour */
  
  --brand-color-rgb: 6, 18, 48;
  --brand-pressed: #091B49;
  --brand-hovered: #030A1B;
  --brand-background: #06123014;
  --brand-bg50: #06123080;
  --brand-bg60: #06123099;
  --brand-bg70: #061230B3;
}

:root:has(body[title*="130 Queens Gate Apartments"]) {
  --brand-color: #061230; /* Darker colour, header background */
  --brand-color-2: #F6B527; /* Accent colour */
  --custom-background-color: #2A2F3C; /* Top most header colour */
  
  --brand-color-rgb: 6, 18, 48;
  --brand-pressed: #081B49;
  --brand-hovered: #030A1B;
  --brand-background: #06123014;
  --brand-bg50: #06123080;
  --brand-bg60: #06123099;
  --brand-bg70: #061230B3;
}

:root:has(body[title*="Fountain House Apartments"]) {
  --brand-color: #434C4B; /* Darker colour, header background */
  --brand-color-2: #000000; /* Accent colour */
  --custom-background-color: #5D8A9B; /* Top most header colour */
  
  --brand-color-rgb: 67, 76, 75;
  --brand-pressed: #4D5655;
  --brand-hovered: #373E3D;
  --brand-background: #434C4B14;
  --brand-bg50: #434C4B80;
  --brand-bg60: #434C4B99;
  --brand-bg70: #434C4BB3;
}

:root:has(body[title*="Queensgate Court Apartments"]) {
  --brand-color: #434C4B; /* Darker colour, header background */
  --brand-color-2: #000000; /* Accent colour */
  --custom-background-color: #9FAFA3; /* Top most header colour */
  
  --brand-color-rgb: 67, 76, 75;
  --brand-pressed: #4D5655;
  --brand-hovered: #373E3D;
  --brand-background: #434C4B14;
  --brand-bg50: #434C4B80;
  --brand-bg60: #434C4B99;
  --brand-bg70: #434C4BB3;
}

:root:has(body[title*="Ashburn Hotel"]) {
  --brand-color: #3F0440; /* Darker colour, header background */
  --brand-color-2: #E7C130; /* Accent colour */
  --custom-background-color: #1F232B; /* Top most header colour */
  
  --brand-color-rgb: 63, 4, 64;
  --brand-pressed: #570557;
  --brand-hovered: #260226;
  --brand-background: #3F044014;
  --brand-bg50: #3F044080;
  --brand-bg60: #3F044099;
  --brand-bg70: #3F0440B3;
}

:root:has(body[title*="Claverley Court Apartments"]) {
  --brand-color: #243434; /* Darker colour, header background */
  --brand-color-2: #E7C130; /* or #EFC462*/ /* Accent colour */
  --custom-background-color: #1F232B; /* Top most header colour */
  
  --brand-color-rgb: 36, 52, 52;
  --brand-pressed: #2F4242;
  --brand-hovered: #192424;
  --brand-background: #24343414;
  --brand-bg50: #24343480;
  --brand-bg60: #24343499;
  --brand-bg70: #243434B3;
}





@media screen {
  
  ::selection {
    color: #FFFFFF;
    background-color: var(--brand-color);
  }
  
  a[href = "NULL"] {
    display: none !important;
  }
  
  .header a i,
  .footer a i {
    margin-right: 0px;
  }
  
  .main-be-area {
    background-color: #F0F1F3;
  }
  
  .header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    padding-block: 0px;
    border-bottom: 1px solid var(--border-default);
  }
  
  .header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    width: 100%;
    /* max-width: 1230px; */
    padding-inline: calc((100% - 1230px) / 2);
  }
  
  .header .container.top {
    background-color: var(--custom-background-color);
    color: var(--brand-color-2);
    
    font-size: 9px;
    line-height: 12px;
    
    row-gap: 5px;
    column-gap: 12px;
    padding-block: 5px;
    border-bottom: 0px solid transparent;
  }
  
  .header .contact {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    
    row-gap: 5px;
    column-gap: 12px;
  }
  
  .header .contact p {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    
    column-gap: 6px;
    margin-block: 0px;
  }
  
  .header .contact p:has(a[href*="NULL"]) {
    display: none !important;
  }
  
  .header .contact a {
    color: var(--brand-color-2);
    
    transition: var(--custom-transition);
  }
  
  .header .contact a:hover {
    color: #FFFFFF;
  }
  
  .header .socials {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    
    column-gap: 9px;
  }
  
  .header .socials a {
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: #FFFFFF;
    color: #1F232B;
    
    font-size: 12px;
    
    width: 18px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    
    transition: var(--custom-transition);
  }
  
  .header .socials a:hover {
    background-color: var(--brand-color-2);
    color: #FFFFFF;
  }
  
  .header .container.bottom {
    background-color: var(--brand-color); /* Except Chesham, where I want it to be brand-color-2*/
    color: #FFFFFF;
  }
  body[title*="Chesham Court Apartments"] .header .container.bottom {
    background-color: var(--brand-color-2);
  }
  
  .header .logo {
    padding-block: 15px;
  }
  
  .header .logo img {
    display: block;
    
    width: 180px;
    height: auto;
    
    transition: var(--custom-transition);
  }
  body[title*="Chesham Court Apartments"] .header .logo img {
    width: 84px;
  }
  body[title*="130 Queens Gate Apartments"] .header .logo img {
    width: 156px;
  }
  body[title*="Fountain House Apartments"] .header .logo img {
    width: 214.86px;
  }
  body[title*="Queensgate Court Apartments"] .header .logo img {
    width: 214.86px;
  }
  body[title*="Ashburn Hotel"] .header .logo img {
    width: 232.77px;
  }
  body[title*="Claverley Court Apartments"] .header .logo img {
    width: 214.86px;
  }
  
  .header .logo:hover img {
    filter: grayscale(100%) invert(15%);
  }
  body[title*="Fountain House Apartments"] .header .logo:hover img {
    filter: grayscale(100%);
    opacity: 80%;
  }
  
  .header .backtosite {
    display: flex;
    align-self: stretch;
    
    height: 100%;
  }
  
  .header .backtosite a {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    
    background-color: transparent;
    color: #FFFFFF;
    
    font-size: 10.5px;
    font-weight: 500;
    line-height: 15px;
    text-align: center;
    text-transform: uppercase;
    
    padding-block: 18px;
    padding-inline: 15px;
    
    transition: var(--custom-transition);
  }
  
  .header .backtosite:hover a {
    color: var(--brand-color);
    background-color: #FFFFFF;
  }
  
  .footer {
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: #2A2F3C; /* Except Chesham, where I want it to be brand-color*/
    color: #ACACAC;
    
    font-size: 9px;
    line-height: 12px;
    text-align: center;
    
    padding-block: 15px;
  }
  body[title*="Chesham Court Apartments"] .footer {
    background-color: var(--brand-color);
  }
  
  .footer .container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    
    gap: 15px;
  }
  
  .footer .socials {
    display: flex;
    justify-content: center;
    align-items: center;
    
    column-gap: 12px;
  }
  
  .footer .socials a {
    color: #FFFFFF;
    
    font-size: 18px;
    
    transition: var(--custom-transition);
  }
  
  .footer .socials a:hover {
    color: var(--brand-color-2);
  }
  
  .footer .contact {
    display: flex;
    justify-content: center;
    align-items: center;
    
    color: #ACACAC;
    
    gap: 5px;
  }
  
  .footer .contact a {
    color: #ACACAC;
  }
  
  .footer .contact a:hover {
    color: var(--brand-color-2);
  }
  
  .footer .contact div:has(a[href*="NULL"]) {
    display: none !important;
  }
  
  .footer .address {
    display: flex;
    justify-content: center;
    align-items: center;
    
    gap: 5px;
  }
  
  .footer .address a {
    color: #ACACAC;
    
    transition: var(--custom-transition);
  }
  
  .footer .address a:hover {
    color: var(--brand-color-2);
  }
  
  .footer small {
    font-size: inherit;
    line-height: inherit;
  }
  
  .footer small a {
    color: #ACACAC;
    
    transition: var(--custom-transition);
  }
  
  .footer small a:hover {
    color: var(--brand-color-2);
  }
  
  .footer .phone {
    display: flex;
    justify-content: center;
    align-items: center;
    
    gap: 5px;
  }
  
  .footer .phone a {
    color: #ACACAC;
    
    transition: var(--custom-transition);
  }
  
  .footer .phone a:hover {
    color: var(--brand-color-2);
  }
  
  .footer .links {
    display: flex;
    justify-content: center;
    align-items: center;
    
    color: #ACACAC;
    
    gap: 5px;
  }
  
  .footer .links a {
    color: var(--brand-color-2);
    
    transition: var(--custom-transition);
  }
  
  .footer .links a:hover {
    color: #ACACAC;
  }
  
  body[title*="Fountain House Apartments"] .footer .socials a:hover,
  body[title*="Fountain House Apartments"] .footer .contact a:hover,
  body[title*="Fountain House Apartments"] .footer .address a:hover,
  body[title*="Fountain House Apartments"] .footer small a:hover,
  body[title*="Fountain House Apartments"] .footer .phone a:hover,
  body[title*="Fountain House Apartments"] .footer .links a,
  
  body[title*="Queensgate Court Apartments"] .footer .socials a:hover,
  body[title*="Queensgate Court Apartments"] .footer .contact a:hover,
  body[title*="Queensgate Court Apartments"] .footer .address a:hover,
  body[title*="Queensgate Court Apartments"] .footer small a:hover,
  body[title*="Queensgate Court Apartments"] .footer .phone a:hover,
  body[title*="Queensgate Court Apartments"] .footer .links a {
    color: #E7C130;
  }
  
}



@media screen and (max-width: 1249px) {
  
  .header .container {
    padding-inline: 15px;
  }
  
}



/* ----- Tablet specific ----- */
@media screen and (max-width: 999px) {
  
  .header .container {
    padding-block: 8px;
  }
  
  .header .contact {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .footer .contact {
    flex-direction: column;
  }
  
  .footer .contact > span {
    display: none;
  }
  
  .footer .address > span {
    display: none;
  }
  
  .footer .phone > span {
    display: none;
  }
  
}



@media only screen and (max-width: 744px) {
  
  .header .container.bottom {
    flex-direction: row;
  }
  
}



@media screen and (max-width: 699px) {
  
  .header .container {
    
  }
  
  .header .container.bottom {
    justify-content: center;
    padding-inline: 0px;
  }
  
  .header .backtosite {
    display: none;
  }
  
}



/* ----- Mobile specific ----- */
@media screen and (max-width: 499px) {
  
  .header {
    flex-direction: column-reverse;
  }
  
  .header .container.top {
    flex-direction: column-reverse;
    
    padding-block: 12px;
  }
  
  .header .contact {
    align-items: center;
  }
  
  .footer .links {
    flex-direction: column;
  }
  
  .footer .links > span {
    display: none;
  }
  
}