h1 {
    font-family: "Playfair Display", serif;
    font-size: 32px; /* Adjust font size as needed */
}

h3 {
    font-size: 22px; /* Adjust font size as needed */
}

h4 {
    font-size: 18px;
}

.back-button {
    border: none;
    background-color: #F5F7F8;
    color: black;
}

.back-button:focus {
    outline: none;
    box-shadow: none;
}

.back-button:hover {
    outline: none;
    box-shadow: none;
    color: grey;
}


/* Base styles for two-column layout */
.two-column-container {
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
    align-items: stretch; /* Ensure columns stretch to the full height of the container */
    position: relative; /* Make the container a relative-positioned element */
}

/* Column styles */
.two-column-container .column {
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
    flex: 1; /* Allow columns to grow and shrink equally */
    min-width: 0;
    height: 100%;
}

/* Image styling */
.two-column-container .column img {
    max-width: 100%;
    height: auto;
    max-height: 275px;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    opacity: 1;
}

/* Adjust column widths */
.two-column-container .column:nth-child(1) {
    flex: 0 0 35%;
}

.two-column-container .column:nth-child(2) {
    flex: 0 0 65%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Align content to the bottom */
}

/* Additional styles for text alignment */
.fsfeature {
    font-size: 13px;
}


/* Overlapping effect on small screens */
@media only screen and (max-width: 1024px) {
    .two-column-container {
        flex-direction: column; /* Stack items vertically */
        align-items: flex-start;
        height: 500px; /* Adjust the height based on your content */
    }

    .fsfeature {
        font-size: 11px;
    }

    .carry-card {
        margin: 10px;
        border-radius: 10px;
    }

    .two-column-container .column {
        position: absolute;
        width: 100%;
    }

    .two-column-container .column:nth-child(1) {
        top: 0;
        left: 0;
        align-self: center; /* Center the image column */
    }

    .two-column-container .column:nth-child(2) {
        bottom: 0;
        left: 0;
        padding: 10px; /* Optional: Add padding to the text column */
    }
}


#carryImage {
    width: 100%; /* Set a maximum width for the image */
    height: auto;
}

.custom-list-spacing .list-group-item {
    padding: 5px 10px; /* Adjust padding as needed */
    margin-bottom: 2px; /* Adjust margin as needed */
    line-height: 1.2;  /* Adjust line-height as needed */
}

.highlight {
    color: #FF5733; /* Change to your desired color */
    font-weight: bold;
}


.list-group-item {
    border: 1px solid #e0e0e0 !important; /* White border color */
    background-color: transparent; /* Optional: Make background transparent */
    display: flex;
    align-items: center; /* Center items vertically */
}


.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    background: #000;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.pink {
    color: #816b6b;
}

#carryTitle {
    padding-top: 40px;
    padding-bottom: 10px;
}

.fa-star {
    font-size: 20px; /* Adjust this value to change the size of the stars */
    padding:2px;
}

.big {
    font-size: 24px !important; /* Adjust this value to change the size of the stars */
    cursor: pointer;
}

.small-star {
    font-size: 22px !important; /* Adjust this value to change the size of the stars */
}

/* Styles for checked stars */
.checked {
    color: #ad9393; /* You can change this color if needed */
}

/* Styles for unchecked stars */
.notchecked {
    color: lightgrey; !important; /* Almost #e0e0e0 color for unchecked stars */
}


/* Add vertical padding between rating groups */
.feature {
    margin-bottom: 10px; /* Adjust this value to change the space between groups */
}

/* Media query for small screens */
@media only screen and (max-width: 1024px) {
    .small-star {
        font-size: 17px !important; /* Adjust this value to change the size of the stars */
    }

    .big {
        font-size: 20px !important;
        cursor: pointer;
    }
}



#imageGrid {
    padding: 30px;
}

.carry-card {
    background-color: #b6a89e;
}

@media only screen and (max-width: 425px) { 
    .carry-card {
        min-height: 600px;
    }
}



.table-container {
    max-width: 600px; /* Adjust based on your layout */
    padding: 0px;
}

.table-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px; /* Space between items */
}

.table-icon {
    font-size: 24px; /* Adjust the size of the icon */
    margin-right: 15px; /* Space between icon and text */
    color: #ad9393; /* Example color */
}

.table-content {
    width: 100%; /* Adjust based on your layout */
}

.table-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px; /* Space between title and description */
    max-width: 600px;
}

.table-title {
    font-family: "Poppins";
    font-weight: 600;
    font-size: 14px;
    margin: 0; /* Remove margin */
    max-width: 200px;
}

.table-description {
    font-family: "Poppins";
    font-weight: 300;
    font-size: 13px;
    margin: 5px 0 0 0; /* Adjust space between title and description */
}


.submit-button {
    background: none;         /* No background */
    border: none;            /* No border */
    text-decoration: underline; /* Underlined text */
    color: inherit;          /* Inherit the text color from the parent */
    cursor: pointer;         /* Change cursor to pointer on hover */
    padding: 0;              /* Remove default padding */
    font: inherit;           /* Inherit font properties */
}

.flex-container {
    display: flex;
    align-items: center; /* Center items vertically */
}