/* Arrow pointing to the right */
.arrow-right {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #00406D; /* Custom blue color */
    z-index: 10;
}

/* Arrow pointing down (only for the first tab) */
.arrow-down {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid white; /* Custom inner arrow color */
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
}

.arrow-down-inner {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid #5E97BB; /* Custom inner arrow color */
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
}

.custom-tabs-container {
    max-width: 100%;
    margin: 0 auto;
}

/* Default Tab Styling */
.tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    height: 250px;
    flex: 1;
    padding: 16px;
    position: relative;
    transition: all 0.3s ease;
    border: 2px solid #5E97BB;
    border-radius: 10px 10px 0 0; /* Rounded top corners */
}

.tab.active {
    background-color: #002A48;
    color: white;
    border-color: #002A48;
}

/* General tabs container */
.tabs {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.tab img {
    height: 85px;
    width: auto;
    margin-bottom: 10px;
}

.tab-text {
    font-size: 14px;
    height: 40px;
    line-height: 1.2;
    overflow: hidden;
}

/* Tab content container */
.tab-content {
    display: none;
    margin-top: 8px;
    background-color: #002A48;
    border-radius: 0 0 10px 10px; /* Rounded bottom corners */
    height: 650px; /* Set a fixed height based on your preference */
    overflow-y: auto; /* Enable vertical scrolling */
    padding: 24px; /* Optional: Add padding for inner content */
    border: 1px solid #002A48; /* Optional: Add a border for styling */
    box-sizing: border-box; /* Include padding and border in the total height */
}

.tab-content.active {
    display: block !important;
}

.tab-content-inner {
    text-align: center;
    color: white;
}

.tab-content-title {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 0;
}

.tab-content-description {
    color: #d1d5db;
    font-size: 0.875rem;
    margin-top: 8px;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

/* Container below the text */
.container-below-text {
    display: flex;
    margin-top: 16px;
    flex-wrap: wrap; /* Ensure content wraps on larger screens */
    gap: 20px;
}

/* Icon container */
.icon-container {
    position: relative;
    width: 175px;
    height: 172px;
    background: linear-gradient(to right, #00406D 0%, #025C7F 47%, #028293 100%);
    border-radius: 10px;
    border: 2px solid #5E97BB;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.icon-container .text-md {
    padding: 4px;
}

.icon-container img {
    height: 85px;
}

/* Container with border that fills the rest of the screen */
.flex-fill-container {
    flex: 1;
    margin-left: 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
	padding-top:16px;
    background-color: white;
    height: 172px;
}

.inner-flex-container {
    display: flex;
    width: 100%;
	height:100%;
	padding-bottom:16px;
}

.section {
    display: flex;
    flex: 1;
    flex-direction: column;
	padding: 0px 16px 0px 16px;
	justify-content:space-between;
}

.section-left, .section-middle {
    border-right: 1px solid #ccc;
}

.top-aligned-text {
    font-size: 0.775rem;
    font-weight: bold;
    margin-bottom: 12px;
}

.centered-image-text {
    display: flex;
    align-items: center;
}

.bottom-wrapper .centered-image-text:first-child{
	margin-bottom:6px;
}

/* Scoped alignment fix — applies only when icon+text are inside .bottom-wrapper */
.bottom-wrapper .centered-image-text {
  display: flex;
  flex-direction: row;
  text-align: left;     /* keeps text left-aligned */
  margin: 0;
  padding: 0;
}

.bottom-wrapper .centered-image-text img {
  display: block;
  margin-bottom: 4px;
}

.bottom-wrapper .centered-image-text .description {
  text-align: left;
  width: max-content;
  margin-left: 4px;     /* optional: subtle nudge for visual balance */
}

.centered-image-text .description {
    font-size: 0.775rem;
    color: #6b7280;
    margin-left: 8px;
}

.text-md {
    font-size: 12px;
    font-weight: 500;
}

/* Responsive Styling */
@media (max-width: 768px) {
    .tabs {
        gap: 5px;
    }

    .tab {
        height: 180px;
        padding: 8px;
    }

    .tab img {
        height: 38px;
        width: auto;
        margin-bottom: 5px;
    }

    .tab-text {
        font-size: 2vw;
        font-weight: 500;
    }
}

@media (max-width: 768px) {
    
	.section {
		display: flex;
		flex: 1;
		flex-direction: column;
		padding: 0px 16px 0px 16px;
		justify-content:center;
}
	
	
	/* Display all .icon-content-pair elements in a single row */
    .container-below-text {
        display: flex;
        overflow-x: auto; /* Enable horizontal scrolling if needed */
        gap: 10px; /* Add some spacing between the icons */
        flex-wrap: nowrap; /* Prevents wrapping */
    }

    /* Ensure each .icon-content-pair takes up fixed width */
    .icon-content-pair {
        flex: 0 0 auto; /* Maintain each pair's width */
        display: flex;
        flex-direction: column; /* Stack .flex-fill-container below .icon-container */
    }

    /* Ensure .icon-container has a fixed size */
    .icon-container {
        min-width: 328px; /* Set a minimum width for icons */
		height:240px;
    }

    /* Adjust .flex-fill-container to be displayed below */
    .flex-fill-container {
		width:328px;
		margin: 16px 0px 0px auto;
		padding: 16px 16px 0px 16px;
    }

    /* Stack .inner-flex-container elements vertically */
    .inner-flex-container {
        flex-direction: column;
    }

    /* Ensure sections take full width when stacked */
    .inner-flex-container .section {
        width: 100%;
    }
	
	.section-left, .section-middle {
		border-right: none;
		border-bottom: 1px solid gray;
		padding-bottom:16px;
		margin-bottom:16px;
	}

	.tab-content{
		height:auto;
	}
	
	.top-aligned-text {
        height: auto; /* Remove the fixed height */
    }

    .tab {
        height: 100px;
        padding: 5px;
    }

    .tab img {
        height: 38px;
        width: auto;
        margin-bottom: 4px;
    }

    .tab-text {
        font-size: 2vw;
        font-weight: 500;
    }
	.flex-fill-container {
		display: block;
    }

    /* Show the .flex-fill-container for the active .icon-container */
    .icon-container.active + .flex-fill-container {
        display: block;
    }
}

/* Larger screens: Display icon-content-pair in a row */
@media (min-width: 769px) {
    .icon-content-pair {
        display: flex;
        flex-direction: row; /* Align icon and content side by side */
		min-width:100%;
    }
}

.display-block {
	display:block;
}

.padding-bottom-adjustment {
	padding-bottom:6px;
}