/* General Styles */
body {
    max-width:960px;
    width:100%;
    padding:0;
    margin:auto;
    font-size:17px;
    line-height:1.6;
    background-color:#e7e8e0;
    font-family:'Playfair Display', serif;
}

#main {
    padding:0;
}

.content {
    margin:25px 25px 25px 25%;
    padding:0 25px 0 0;
}

.themeBlue {
    background-color:#ccd7e2;
    border-left:20px solid #fff;
    border-right:20px solid #fff;
    border-bottom:5px solid #fff;
    padding-bottom:10px;
}

.themeGreen {
    background-color:#ecf1e3;
    border-left:20px solid #fff;
    border-right:20px solid #fff;
    border-bottom:5px solid #fff;
    padding-bottom:10px;
}

.teamsGreen {
    background-color:#ecf1e3;
}

#content {
    max-width: 960px;
    margin: auto;
    background-color:#fff;
    border:20px solid #fff;
}

.top-image {
    width:100%;
    height:200px;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:middle;
}

section {
    font-family:'Playfair Display', serif;
}


h1 {
    margin:0;
    padding:0;
  
}

h2 {
    line-height:120%;
}

h3, h4 {
    margin:20px 0 0 0;
    padding:0;
}

h3 { 
    font-family:'Playfair Display', serif;
    font-size:1.5em;
    line-height:120%;
}

h4 {
    color:#000;
    font-family:'Assistant', serif;
    font-weight:700;
}
a {
    text-decoration:none; 
}

#header {
    vertical-align:text-top;
}

.logo {
    width:15%;
    max-width:100px;
    position:relative;
    font-size: 1.5rem;
}

#mainlogo_png {
    width:100px;
    max-width:100px;
    position:relative;
    font-size: 1.5rem;
}


.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    color: white;
    padding: 0.5rem 1rem;
    font-family:'Assistant', serif;
    font-weight:700;
}


.nav-toggle {
    display: none;
    background: none;
    border: none;
}

.nav-toggle .hamburger {
    width: 25px;
    height: 2px;
    background-color: white;
    display: block;
    transition: all 0.3s ease;
}

.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
    content: '';
    background-color: white;
    height: 2px;
    width: 25px;
    display: block;
    transition: all 0.3s ease;
}

.nav-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav-item {
    margin-left: 20px;
    color:#000;
}

.nav-link {
    color: #000;
    text-decoration: none;
}


.leaderBlock {
	background-color:#ccd7e2;
}

.leaderBlock h3{
	color:#000;
}

.leaderBlock button {
	background-color:#003a70;
}

.LeaderhrefButton {
	background-color:#003a70;
    margin-bottom:25px;
}

.teamBlock button {
	background-color:#899064;
}

.TeamhrefButton {
	background-color:#899064;
    margin-bottom:25px;
}

.teamsBlock {
	background-color:#cfd2c1;
}
.teamsBlock button {
	background-color:#899064;
}
.teamsBlock h3 {
	color:#000;
}

.button-container {
	padding-top: 25px;
}

.button-group {
	display: flex;
	gap: 10px; /* spacing between buttons */
	flex-wrap: wrap;
	justify-content: space-between;
}

.blue-button {
  color: #003a70;
  padding: 10px 20px; /* Add padding to the button */
  border: none; /* Remove default border */
  border-radius: 5px; /* Add rounded corners */
  text-decoration: none; /* Remove underline from link */
  background-color: #fff; /* Add a background color */
  transition: background-color 0.3s ease; /* Smooth background color change on hover */
  border: 1px solid;
}

.blue-button:hover {
  background-color: #e0e0e0; /* Darker background on hover */
}

.green-button {
  color: #899064;
  padding: 10px 20px; /* Add padding to the button */
  border: none; /* Remove default border */
  border-radius: 5px; /* Add rounded corners */
  text-decoration: none; /* Remove underline from link */
  background-color: #fff; /* Add a background color */
  transition: background-color 0.3s ease; /* Smooth background color change on hover */
  border: 1px solid;
}

.green-button:hover {
  background-color: #e0e0e0; /* Darker background on hover */
}

.white-button {
  color: #003a70;
  padding: 10px 20px; /* Add padding to the button */
  border: none; /* Remove default border */
  border-radius: 5px; /* Add rounded corners */
  text-decoration: none; /* Remove underline from link */
  background-color: #fff; /* Add a background color */
  transition: background-color 0.3s ease; /* Smooth background color change on hover */
  border: 1px solid;
}

.white-button:hover {
  background-color: #e0e0e0; /* Darker background on hover */
}

.inner {
	padding:25px;	
}

.material-icons {
    color: #000; /* or any color you prefer */
    font-size: 24px; /* adjust size as needed */
}

#our-usp {
    background-image: url("../images/main.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom; 
    color:#fff;
    padding:50px 50px 150px 50px;
    margin:5px 3px 8px 5px;
}

#our-usp-leader {
    background-color:#003a70;
    background-size: cover;
    background-position: bottom; 
    color:#fff;
    padding:30px 50px 40px 90px;
    margin:5px 0 5px 0;
}
 
#our-usp-leader-text {
        position:relative;
        float:right;
        width:89%;
    }

#our-usp-teams {
    background-color:#899064;
    background-size: cover;
    background-position: bottom; 
    color:#fff;
    padding:30px 50px 40px 80px;
    margin:5px 0 5px 0;
}
#our-usp-teams-text {
        position:relative;
        float:right;
        width:89%;
        /* padding:30px 50px 30px 50px; */
    }



#headblock {
    background-image: url("../images/main.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom; 
    color:#fff;
    padding:50px 50px 50px 50px;
    margin:5px;
}



#explore {
    display:flex;
    flex-wrap: wrap;
    padding: 20px;
    gap: 20px; /* Spacing between articles */
    background-color:#fff;
    margin:5px;
    margin-top: 0px;
    border-bottom:1px solid #000;	
}

#explore article {
    display: flex; /* Make the article itself a flex container */
    flex-direction: column; /* Stack its children vertically */
    /* Remove the fixed 'width: 100%;' if you want them to size automatically within the flex container */
    /* Or, if you need specific widths, define them with flex-basis and max-width.
    Currently, your @media (min-width: 769px) has `article { flex: 1; }`
    and `article { width: 100%; }` for smaller screens.
    This is compatible with `display: flex; flex-direction: column;` here.
    */
}

#explore article .article-link {
    display: flex; /* Make the anchor also a flex container */
    flex-direction: column; /* Stack its children vertically */
    height: 100%; /* Make the link fill the article's height */
}

#explore article .post {
    flex-grow: 1; /* This makes the paragraph expand to fill available space */
    margin-bottom: 5px; /* Add some space above the footer/button */
}

#explore article footer {
    margin-top: auto; /* Pushes the footer to the bottom */
    margin-bottom: 5px; /* Space between footer and button */
}

#explore article > .article-link > div { /* This targets the div containing the button */
    margin-top: 5px; /* This pushes the button container to the bottom */
    padding-top: 0px; /* Optional: adds a little space above the button itself */
}

.Explore {
    font-size:1.4em;
    margin-bottom:15px;
}

.b2b button {
	background-color:#003a70;
}
.b2c button {
	background-color:#899064;
}

.tags {
    color: #003a70;
    padding: 0 5px 10px 0;
    border-radius: 5px;
    display: inline-block;
    font-size: 0.8em;
    margin-bottom: 10px;
    font-family:'Assistant', serif;
    font-weight:700;
}

article {
    background-color: #fff;
    padding: 15px;
}

article header {
    margin-bottom: 10px;
}

article h2 {
    margin: 0;
    color: #000;
    text-align: left;
}

article img {
    position:relative;
    float:left;
    width:100%;
    max-width:340px;
    margin-bottom:20px;
}

article footer {
    margin-top: 15px;
    text-align: left;
    color: #666;
}

article time {
    color:#003a70;
}

article .ReadMoreLink {
    font-family:'Assistant', serif;
    color:#003a70;
    font-weight:700;
}

article {
    width: 100%;
}

.sections-container {
    width:100%;	
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin:0 0 0 5px;;
    padding:0;		
}

/* --- NEW CSS FOR THE WRAPPING LINK --- */
.article-link {
    display: block; /* Makes the entire link block-level */
    text-decoration: none; /* Removes default underline */
    color: inherit; /* Ensures text inside (like H2, P) doesn't turn blue by default */
    /* If your H2 or P tags are explicitly set to a color, this might not change them.
       You might need to be more specific if they still turn blue:
       .article-link h2, .article-link p { color: #000; } // or whatever color you want
    */
}

.article-link:hover {
    background-color: #f0f0f0; /* Light background on hover */
    cursor: pointer; /* Changes cursor to a pointer */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
    transform: translateY(-2px); /* Slight lift effect */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
}

.b2c:hover {
    background-color: #e7e8e0; /* green hover background for b2c offers*/
}

.b2b:hover {
    background-color: #ccd7e2; /* blue hover background for b2c offers*/
}

/* Removed empty ruleset for #for-teams */

#for-leaders, #for-teams, #kukka, #jaana, #erik, #tuija {
    flex-basis: 100%; /* On smaller screens, each section takes full width */
    padding: 20px;
    box-sizing: border-box; /* Includes padding in the width calculation */
}

.ReadMore {
    border-radius: 14px;
    cursor: pointer;
    color: #ffffff;
    font-family: Assistant;
    font-size: 11px;
    font-weight: 700;
    padding: 8px 25px;
    text-decoration: none;
    border:0;
    margin:20px;	
}

  .box-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-family:'Assistant', serif;
  }
  
  .box-green {
    color: white;
    flex: 1 1 100px; /* grow, don't shrink, basis 200px */
    margin: 20px 5px 20px 10px;
    padding: 20px;
    text-align: left;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: adds shadow for depth */
    font-family:'Assistant', serif;
    background-color: #899064;
  }

  .box-green h2 {
    background-color:#fff;
    text-align:center;
    color:#899064;
}
  .box-white {
/*	width:90%; */
    flex: 1 1 100px; /* grow, don't shrink, basis 200px */
	border:1px;
	border-radius:10px;
	padding:20px;
    margin: 20px 5px 20px 10px;
    background-color:#fff;
	color:#000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: adds shadow for depth */
    font-family:'Assistant', serif;
}

.box-blue {
    color: white;
    flex: 1 1 100px; /* grow, don't shrink, basis 200px */
    margin: 20px 5px 20px 10px;
    padding: 20px;
    text-align: left;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: adds shadow for depth */
    font-family:'Assistant', serif;
    background-color:#003A70;
  }

.box-blue h2 {
    background-color:#fff;
    text-align:center;
    color:#000;
}

.Button {
	border-radius:14px;
	cursor:pointer; /*	color:#ffffff; */
	font-family:Assistant;
	font-size:11px;
	font-weight:700;
	padding:8px 16px;
	text-decoration:none;
}

.DL_Button { background-color:#899064; }
.DL_Button:hover { background-color:#d0debb; }

.APP_Button {
	background-color:#fff;
    color:#899064;
    border:1px solid #899064;
    float:right;
    border-color:#003a70;
    color:#003a70;
}

.XAPP_Button:hover { background-color:#d0debb; }

#Pagefooter {
    background-color:#899064;
    color:#fff;
    text-align:center;
    padding:20px 10px 20px 10px;
    font-family:'Assistant', serif;
    border-bottom:20px solid #fff;
    
    border-right:20px solid #fff;
    border-left:20px solid #fff;
    
}

.PersonPicHolder {
    width: 49%;
    position: relative;
    float: left;
}

.PersonTextHolder {
    width: 49%;
    position: relative;
    float: right;
}

/* Responsive Styles */
@media (max-width: 768px) {

    body {
        font-size:14px;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

    .nav-menu.active {
        display: block;
    }

    .nav-item {
        margin-bottom: 1rem;
    }

    .nav-toggle {
        display: block;
    }

    .nav-toggle .hamburger::before {
        transform: translateY(8px) rotate(45deg);
    }

    .nav-toggle .hamburger::after {
        transform: translateY(-8px) rotate(-45deg);
    }
    #our-usp {
       min-height:350px;   
       padding:25px 5px 5px 5px;
    }
    #our-usp h1 {                     
           line-height:1.3;
    }
    #our-usp-teams {
        height:auto;
        min-height:220px;
        padding:30px 50px 10px 50px;
    }
    #our-usp-teams h1 {
        line-height:1.3;
    }
    
    #our-usp-leader {
        padding:50px 50px 30px 50px;
        height:auto;
        min-height:250px;
    }
    
    #our-usp-leader h1 {
        line-height:1.3;
    }
    
    h1 {
        top:75px;
    }
    #explore {
        flex-direction: column;
    }

    .sections-container {
        width: 100%;
    }
    
    #for-leaders, #for-teams, #kukka, #jaana, #erik, #tuija {
        width: 100%;
    }

    .box {
      flex: 1 1 100%; /* on small screens, take full width */
   }

    #Pagefooter {
      border-right:0;
      border-left:0;
    }

    .button-group {
      flex-direction: column; /* Stack buttons vertically on smaller screens */
      align-items: center; /* Center buttons horizontally when stacked */
    }

    .my-button {
      width: 100%; /* Make buttons full width on smaller screens */
      margin-bottom: 10px; /* Add spacing between vertically stacked buttons */
      box-sizing: border-box; /* Include padding and border in the element's total width and height */
    }

    #content {
        border-left: 0;   /* Recommended from previous answer */
        border-right: 0;  /* Recommended from previous answer */
    }

    .top-image {
        /*
         * Adjust the background-position here.
         * The first percentage is horizontal, second is vertical.
         * 50% 50% is 'middle'.
         * If the subject you want to see is slightly to the right of the image's center,
         * try a value like 60% or 70%.
         * For example, if the person canoeing is a bit to the right of the
         * exact middle of the wide image, increasing the first percentage will
         * shift the image to the left, thus showing more of the right side.
         */
        background-position: 50% 50%; /* Start with 50% 50% if you changed it, then fine-tune */
        /*
         * You might also consider adjusting the height slightly for mobile if 200px
         * is causing too much cropping, but that's a design choice.
         * For example: height: 150px;
         */
    }

    .PersonPicHolder {
        width: 15%;
        position: relative;
        float: left;
        padding-right: 0;
    }

    .PersonPicHolder img {
        max-width: 75px;
        position: relative;
        left: -10px;
    }

    .PersonTextHolder {
        width: 74%;
        position: relative;
        float: right;
        padding-left: 0;
    }
}

@media (min-width: 769px) {
    article {
        flex: 1;
    }
    #for-leaders, #for-teams, #kukka, #jaana, #erik, #tuija {
        flex-basis: 49%; /* Each section takes half the width of the container */
    }
    #kukka, #erik {
        border-right:1px solid #000;;
    }
}