/* Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
.body {        
font-family: 'Oswald', sans-serif;    
}
/* Header Below */
.Header__header {
    background-image: url("https://myokosnowsports.com/akakura/wp-content/uploads/MSS25-Skiing-Advanced-web-107.jpg");
  background-size: cover; /* Keeps the image filling the whole area */
    background-position: center; /* Moves image 50px higher */
}
/* Style of the tabs on the header bar */
.Header__tabs__link {
  font-family: Oswald,Arial,Helvetica,sans-serif;
    color: inherit;
  letter-spacing: 1px;
    font-weight: 400;
  	text-transform: uppercase;
}
/* Hiding the Help Centre on the header bar, maybe better in HTML */
.Header__name {
  visibility:hidden;
    font-family: Oswald,Arial,Helvetica,sans-serif;
    color: #0085b5;
  letter-spacing: 1px;
    font-weight: 500;
  	text-transform: uppercase;

  margin-left:-125px;
}
.Header__description{
  visibility:hidden;
}
/* Sign In Tab at the top's style */
.LoginDetail__tabLink {
    color: inherit;
  font-family: Oswald,Arial,Helvetica,sans-serif;
    text-decoration: none;
letter-spacing: 1px;
    font-weight: 400;
  	text-transform: uppercase;
}
/* Style for the text above search bar */
.Header__searchTitle {
    font-family: Oswald, Arial, Helvetica, sans-serif;
    margin-right: auto;
    font-size: 2.25rem; /* Default font size */
    color: #f5f5f5;
    text-shadow: 1px 1px 2px #000000;
    letter-spacing: 1px;
    text-align: center;
    font-weight: 500;
    max-width: 100%; /* Ensure text does not exceed container width */
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide any overflow */
    text-overflow: ellipsis; /* Show ellipsis (...) for truncated text */
}

/* Color the search button blue */
.commonStyle__zt3BrandBg {
    background-color: #0085b5;
}



/* Header Above */
/* Widgets / Main Content Below */

/* Custom Widget Css Here */
/*.CustomWidget__customDescription{
    font-family: Oswald,Arial,Helvetica,sans-serif;
    font-size: 1.25rem;
  	color: #545454;
    letter-spacing: 1px;
    text-align: center;
    font-weight: 500;
  
}*/
.browse-widget {
     font-family: Oswald,Arial,Helvetica,sans-serif;
  	margin-right:auto;
    font-size: 1.25rem;
  	color: #545454;
    letter-spacing: 1px;
    text-align: center;
    font-weight: 400;
  text-transform: uppercase;
  
}
/* Container for the items */

/* Individual item */
/* Container for the items */
.ss_container {
    width: 100%; /* Full width */
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Horizontally center items */
    max-width: 1100px; /* Maximum width */
}

/* Individual item */
.ss_col {
    background-color: #0085b5;
    width: calc(33.33% - 20px);
    margin: 10px;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    justify-content: center;
    border-radius: 5px; /* Adjust border radius as needed */
    transition: background-color 0.3s; /* Smooth transition for background color change */
}

.ss_col:hover {
    background-color: #0099cc; /* Change to your desired hover color */
}

.ss_col:hover .ss_desc {
    font-size: 22px; /* Change to your desired font size */
    transition: font-size 0.3s; /* Smooth transition for font size change */
}

.ss_col:hover img {
    transform: scale(1.1); /* Scale up the image by 20% on hover */
    transition: transform 0.3s; /* Smooth transition for image scale */
}

.ss_row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.ss_logo {
    max-width: 100px !important;
    filter: invert(1);
}

.ss_midLine {
    height: 1px;
    background: #fff;
    width: 90px;
    margin: 20px 0;
}

.ss_desc {
    color: #fff;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 400;
    font-family: Oswald, Arial, Helvetica, sans-serif;
    transition: font-size 0.3s; /* Smooth transition for font size change */
}

.ss_midLine::after {
    content: "";
    display: flex;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background-color: #fff;
    position: relative;
    top: -3px;
    left: calc(50% - 3px);
}

.ss_link {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    cursor: pointer;
}

.ss_logo.ss_logo_2,
.ss_logo.ss_logo_3 {
    width: 60px;
}

.ss_logo.ss_logo_6 {
    width: 65px;
}

.ss_logo.ss_logo_4 {
    width: 70px;
}







/* Widgets / Main Content Above */

/* Footer Below */

/* Footer BG image below */
.Footer__container{
	padding:0 0.9375rem;
	max-width:73.125rem;
}
.Footer__footerBg {
    /* Set background image */
    background-image: url('https://myokosnowsports.com/akakura/wp-content/uploads/Test-Image-HelpCenter-1920x1080-1.jpg');
    /* Center the background horizontally and vertically */
    background-position: center 35%;
    /* Ensure the background covers the entire element */
    background-size: cover;
    /* Add padding as needed */
    padding: 1.875rem 0;
}
/* Footer BG above */
/* Footer Question */
.Footer__footerQus {
    /* Hide the original text */
    font-size: 0; /* Set font size to 0 to hide text */
}

/* Add new text using ::before pseudo-element */
.Footer__footerQus::before {
    content: "Can't find what you're looking for?"; /* Replace with new text */
font-family: Oswald,Arial,Helvetica,sans-serif;
  	margin-right:auto;
    font-size: 2.25rem;
  	color: #f5f5f5;
  text-shadow: 1px 1px 2px #000000;
    letter-spacing: 1px;
    text-align: center;
    font-weight: 500;
}
/*Footer Description*/
.Footer__footerDescription {
    /* Position the existing text off-screen */
    position: relative;
    overflow: hidden;
}

.Footer__footerDescription span {
    /* Hide the existing text */
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
}

.Footer__footerDescription::before {
    /* Add new text */
    content: "Please get in touch with us, and we'll be sure to assist you promptly.";
    font-weight: 400;
  font-family: Lato,Arial,Helvetica,sans-serif;
}
/*Footer Description above */
/* Footer button */
.Button__footerBtn {
    position: relative; /* Needed to position the pseudo-element */
}

.Button__footerBtn::after {
    content: 'Get in Touch'; /* Your new button text */
    display: block;
  font-family: Lato,Arial,Helvetica,sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #636363; /* Same background as your original button */
    color: white;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
    text-align: center;
    line-height: 46px; /* Adjust this based on your button's height */
    border-radius: 2rem; /* Match original button's border radius */
    font-size: 1rem; /* Match original button's font size */
  font-weight: 300;
    pointer-events: none; /* Disable interactions with this overlay */
    transition: background-color .15s ease; /* Smooth transition for background color */
}

.Button__footerBtn:hover{
	background:#0085b5;
	border:1px solid transparent
}
.Button__footerBtn:hover::after {
    background-color: #0085b5; /* New background color on hover */
  outline-color: #0085b5;
}
.Button__footerBtn button {
    visibility: hidden; /* Hide the original button */
}
/* Footer button above */

@media only screen and (max-width: 991px) {
    .ss_col {
        width: calc(49% - 20px);
    }
  .Header__searchTitle {
        font-size: 2rem; /* Adjusted font size for smaller screens */
    }
}

@media only screen and (max-width: 768px) {
  .ss_col {
        width: 100%;
    }
   .ss_container {
     	justify-content:center;
        width: 100%; /* Full width on smaller screens */
        height: auto; /* Auto height */
    }
   .Header__searchTitle {
        font-size: 1.5rem; /* Adjusted font size for smaller screens */
    }
  .Footer__footerQus::before {
    font-size:1.3rem;
}
  .Footer__footerDescription::before {
   font-size:1.0rem;
}
}

/* All code I don't need but don't want to lose incase I need to refer to it > */
/*
#Capa3 path.commonStyle__zt3BrandFill {
    fill: #00ff00; 
}
.Header__description {
    color: #f5f5f5;
  text-shadow: 2px 2px 2px #000000;
}
/* How to directly affect each tab along the header top *//*
.Header__menuTab ul li:nth-child(2){
  visibility:hidden;
  margin-left:-50px;
  font-family: Oswald,Arial,Helvetica,sans-serif;
    color: #777777;
  letter-spacing: 1px;
    font-weight: 400;
  	text-transform: uppercase;
}
.Header__menuTab ul li:nth-child(2):after{
  visibility:visible;
  content:"Test";
  
}
.mainContainer Ul li:first-child span:first-child{
  visibility:hidden;
  margin-left:-50px;
}
.mainContainer Ul li:first-child span:first-child:after{
  visibility:visible;
  content:"Test";
}

*/
.commonStyle__zt3BrandBorder {
    border-color:#0085b5;
}
.commonStyle__zt3Brand {
    color: #0085b5;
}
.Readingprogress__progressBar {
    height: 4px;
    transition: all .2s;
    background: linear-gradient(90deg, #4cb0d3 16%, #0085b5 75.89%, #006b8f 99.8%);  /* gradient from light to darker blue */
    box-shadow: rgba(0, 0, 0, 0.24) 0 8px 18px;
    border-radius: 0 5px 5px 0;
}

.Icon__icon {
    fill: #0085b5;
}
.Icon__white {
    fill: #ffffff !important; /* Ensure it stays white */
}