@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap");

:root {
  --background-color: #F9F9F9;
  --black: #000000;
  --grey: #979797;
  --white: #FFFFFF;
  
  --custom-transition: all 0.2s ease-in-out;
  
  --img-ratio-rate-primary: 4 / 3;
  --img-ratio-rate-primary-mobile: 4 / 3;
  --img-ratio-rate-secondary: 4 / 3;
  --img-ratio-rate-secondary-mobile: 4 / 3;
  --img-ratio-mda-secondary-rate: 4 / 3;
  --img-ratio-mda-secondary-rate-mobile: 4 / 3;
}

/*------------------------------------------------------------------------------------------------------*/
/* - Crieff group - */
:root:has(body[title="Crieff Group"]) {
  --brand-color: #345742; /* Brand color */
  --brand-color-rgb: 52, 87, 66;
  --brand-pressed: #213629; /* Darker shade */
  --brand-hovered: #487559;
  
  --brand-background: #345742914;
  --brand-bg50: #345742980;
  --brand-bg60: #345742999;
  --brand-bg70: #345742B3;
}

/*------------------------------------------------------------------------------------------------------*/
/* - Crieff hydro - */
:root:has(body[title="Crieff Hydro"]) {
  --brand-color: #2A4A61; /* Brand color */
  --brand-color-rgb: 42, 74, 97;
  --brand-pressed: #1A2E3D; /* Darker shade */
  --brand-hovered: #396384;
  
  --brand-background: #2A4A6114;
  --brand-bg50: #2A4A6180;
  --brand-bg60: #2A4A6199;
  --brand-bg70: #2A4A61B3;
}

/*------------------------------------------------------------------------------------------------------*/
/* - Isles of Glencoe - */
:root:has(body[title="Isles of Glencoe"]) {
  --brand-color: #41465E; /* Brand color */
  --brand-color-rgb: 65, 70, 94;
  --brand-pressed: #2C2F3F; /* Darker shade */
  --brand-hovered: #565B7B;
  
  --brand-background: #41465E14;
  --brand-bg50: #41465E80;
  --brand-bg60: #41465E99;
  --brand-bg70: #41465EB3;
}

/*------------------------------------------------------------------------------------------------------*/
/* - Ballachulish - */
:root:has(body[title="Ballachulish"]) {
  --brand-color: #415D5E; /* Brand color */
  --brand-color-rgb: 65, 93, 94;
  --brand-pressed: #2C3F3F; /* Darker shade */
  --brand-hovered: #567B7B;
  
  --brand-background: #415D5E14;
  --brand-bg50: #415D5E80;
  --brand-bg60: #415D5E99;
  --brand-bg70: #415D5EB3;
}

/*------------------------------------------------------------------------------------------------------*/
/* - Taypark - */
:root:has(body[title="Taypark"]) {
  --brand-color: #6C6061; /* Brand color */
  --brand-color-rgb: 108, 96, 97;
  --brand-pressed: #514849; /* Darker shade */
  --brand-hovered: #87787A;
  
  --brand-background: #6C606114;
  --brand-bg50: #6C606180;
  --brand-bg60: #6C606199;
  --brand-bg70: #6C6061B3;
}

/*------------------------------------------------------------------------------------------------------*/
/* - The Park - */
:root:has(body[title="The Park"]) {
  --brand-color: #583D56; /* Brand color */
  --brand-color-rgb: 88, 61, 86;
  --brand-pressed: #392838; /* Darker shade */
  --brand-hovered: #755273;
  
  --brand-background: #583D5614;
  --brand-bg50: #583D5680;
  --brand-bg60: #583D5699;
  --brand-bg70: #583D56B3;
}

/*------------------------------------------------------------------------------------------------------*/
/* - Peebles Hydro - */
:root:has(body[title*="Peebles Hydro"]) {
  --brand-color: #622B2B; /* Brand color */
  --brand-color-rgb: 98, 43, 43;
  --brand-pressed: #401C1C; /* Darker shade */
  --brand-hovered: #873B3B;
  
  --brand-background: #622B2B14;
  --brand-bg50: #622B2B80;
  --brand-bg60: #622B2B99;
  --brand-bg70: #622B2BB3;
}

/*------------------------------------------------------------------------------------------------------*/
/* - Murray Park - */
:root:has(body[title*="Murray Park"]) {
  --brand-color: #695D69; /* Brand color */
  --brand-color-rgb: 105, 93, 105;
  --brand-pressed: #4E464E; /* Darker shade */
  --brand-hovered: #837783;
  
  --brand-background: #695D6914;
  --brand-bg50: #695D6980;
  --brand-bg60: #695D6999;
  --brand-bg70: #695D69B3;
}

/*------------------------------------------------------------------------------------------------------*/
/* - Kingshouse - */
:root:has(body[title*="Kingshouse"]) {
  --brand-color: #4D4D4D; /* Brand color */
  --brand-color-rgb: 77, 77, 77;
  --brand-pressed: #333333; /* Darker shade */
  --brand-hovered: #666666;
  
  --brand-background: #4D4D4D14;
  --brand-bg50: #4D4D4D80;
  --brand-bg60: #4D4D4D99;
  --brand-bg70: #4D4D4DB3;
}



@media screen {
  
  .sticky .content {
    background-color: var(--background-color);
  }
  
  .header a i,
  .backtotop a i,
  .footer a i {
    margin-right: 0px;
  }
  
  .main-be-area {
    background-color: transparent;
  }
  
  body {
    background-color: var(--background-color);
    font-family: "Josefin Sans", "Trebuchet MS", trebuchet, sans-serif;
  }
  
  .header {
    background-color: var(--brand-background);
    
    padding: 0px;
  }
  
  .header .space-between {
    display: flex;
    
    width: 100%;
  }
  
  .header .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: var(--white);
    
    min-width: 240px;
    height: auto;
    padding-block: 5px;
    padding-inline: 25px;
  }
  
  .header .logo img {
    display: block;
    
    height: 72px;
    width: auto;
    
    transition: var(--custom-transition);
  }
  
  body[title = "Murray Park"] .header .logo img {
    height: 52px;
  }
  
  body[title = "Crieff Group"] .header .logo img {
    height: 40px;
  }
  
  .header .logo:hover img {
    opacity: 75%;
  }
  
  .header .backtosite a {
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: var(--brand-color);
    color: var(--white);
    
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1.39px;
    line-height: 29.4px;
    text-align: center;
    text-transform: uppercase;
    
    height: 90px;
    padding-inline: 50px;
    
    transition: var(--custom-transition);
  }
  
  .header .backtosite:hover a {
    background-color: var(--brand-hovered);
  }
  
  .footer {
    background-color: var(--background-color);
  }
  
  .footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    max-width: 1310px;
    padding-inline: 30px;
    padding-top: 45px;
    padding-bottom: 30px;
    gap: 45px;
  }
  
  .footer .sister-sites {
    display: flex;
    flex-direction: column;
  }
  
  .footer .sister-sites .group-logo {
    display: flex;
    justify-content: center;
    
    padding: 20px;
    border-bottom: 1px solid var(--grey);
  }
  
  .footer .sister-sites .group-logo img {
    display: block;
    
    width: 220px;
    height: auto;
  }
  
  .footer .sister-sites .sister-logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    
    gap: 6px;
    padding-block: 20px;
    padding-bottom: 8px;
  }
  
  .footer .sister-sites .sister-logos img {
    display: block;
    
    background-color: var(--white);
    
    width: 108px;
    height: auto;
  }
  
  .footer small {
    font-size: 12px;
    letter-spacing: 1.5px;
    line-height: 17.64px;
  }
  
}



/* ----- Tablet specific ----- */
@media screen and (max-width: 999px) {
  
  .header .logo img {
    height: 67px;
  }
  
  .header .backtosite a {
    height: 100%;
    padding-inline: 30px;
  }
  
}



/* ----- Mobile specific ----- */
@media screen and (max-width: 499px) {
  
  .header {
    background-color: var(--white);
  }
  
  .header .space-between {
    justify-content: center;
  }
  
  .header .logo img {
    height: 62px;
  }
  
  .header .backtosite {
    display: none;
  }
  
}