/* Ensure no horizontal scrolling and full-width layout */
html,
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important; /* Ensure vertical scrolling remains */
	font-size: 1rem; /* NEW: smaller base text size */
}

/* Light Mode FORCE */
:root {
    color-scheme: light;
    /* Force light mode */
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: white; /* Ensure a light background */
  }
}

@media (prefers-color-scheme: light) {
  body {
    background-color: white; /* Default light mode */
  }
}

body {
  background-color: white;
}


:root {
  --bg-color: white;
  
  /* For WebKit browsers */
@media screen and (-webkit-prefers-color-scheme: dark) {
  body {
    background-color: white;
  }
}

/* Set background color for the body - light mode force */
body {
	top: 0px !important; /*CSS rules to target and hide the Google Translate iframe and container.*/
    background-color: rgb(255, 255, 255);}
/* Hide Google Translate toolbar */
body>.skiptranslate {
    display: none;
}

/* Prevent interactions or visibility changes from parent containers */
body .goog-te-spinner-pos {
    display: none !important; /* Hide the container holding the spinner */
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Hide the Google Translate iframe and its container */
.goog-te-banner-frame.skiptranslate, .goog-te-gadget-icon {    
                display: none !important;
}

/* Top bar styling */
.top-bar {
  width: 100%;
  height: 2rem;
  padding-top: 1rem;
  background: linear-gradient(90deg, #e4c678 0, #f2e5c2 50%, #e8d199 100%);
  color: black;
  display: flex;
  justify-content: center; /* Center the content horizontally */
  align-items: center; /* Center the content vertically */
  position: fixed; /* Fix the top-bar to the top of the viewport */
  top: 0; /* Align to the top */
  left: 0; /* Align to the left */
  z-index: 1000; /* Keep the existing z-index */
}

/* Top bar paragraph styling */
.top-bar p {
  font-weight: bold; /* Keep your existing bold style */
}



/* Force light mode */
:root {
    color-scheme: light;
}


/* Button styling for both desktop and mobile */
.home-page-buttons.primary {
    background-color: rgb(192, 113, 163);
    color: white;
    font-weight: 550;
}

/* Hover effect for primary buttons */
.home-page-buttons.primary:hover {
    background-color: #43434319;
	color: black;
}

/* Styling for secondary buttons */
.home-page-buttons.secondary {
    background-color: rgb(179, 169, 177);
    color: white;
    font-weight: 550;
}

/* Hover effect for secondary buttons */
.home-page-buttons.secondary:hover {
    background-color: #43434319;
	color: black;
}

nav.container-fluid {
	padding-top: 1rem; /* or try 3rem if needed */
	margin-bottom: 1rem;
}


.heart-container {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.8);
    padding: 0.3rem 0.6rem;
    border-radius: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    user-select: none;
    transition: transform 0.2s ease;
	z-index: 10; /* Keep the existing z-index */
}
.heart-container:hover {
    transform: scale(1.1);
}

/* ------------------------- */
/* Desktop-Specific Styles (min-width: 450px) */
/* ------------------------- */
@media (min-width: 450px) {

    /* Styling for the company logo on desktop */
    .company-logo {
        height: 10rem;
    }

    /* Styles for the main figure section */
    .home-page-figure {
        position: relative;
        text-align: center;
        margin: 0 auto;
        border-radius: 1rem;
        max-width: 80%;
    }

    .home-page-figure img:not(.adult-icon):not(.child-icon) {
        border-radius: 1rem;
        filter: brightness(93%);
    }


    /* Overlay text styles (e.g., for model names) */
    .overlay-text {
        position: absolute;
        top: 15%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: white;
        background-color: transparent;
		z-index: 10;
    }

    .overlay-text h1 {
        color: white;
    }

    /* Button container positioning for the overlay */
    .overlay-buttons {
        position: absolute;
        bottom: 5%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        gap: 1rem;
    }

    /* Button styles within the overlay */
    .home-page-buttons {
        padding: 0.5rem 1.5rem;
        border-radius: 0.3rem;
        width: 15rem;
        cursor: pointer;
		border: 1px solid #000; /* Added border */

    }

    /* Styling for icons on the right (chat, languages, profile) */
	.transparent-icon {
		background-color: transparent;
		width: 1.7rem;
		height: 1.7rem;
		border-radius: 20%;
		padding: 0.1rem;
		margin: 0 0.9rem; /* Adds horizontal spacing left & right */
	}

    .transparent-icon:hover {
        background-color: #00000027;
    }

    /* Hover effect for navigation links */
    .contrast:hover {
        background-color: #00000027;
    }

    /* Hide elements on desktop */
    .hide-on-desktop {
        display: none !important;
    }
	
		/* Footer styles for desktop */
    footer p,
    footer nav ul li a {
        color: rgb(0,0,0);
    }
	
	footer p,
    footer nav ul li a {
       
		color: rgb(0,0,0);
    }
	
	.adult-icon {
    background-color: transparent;
    /* Ensure no background color is applied */
    margin: 0px;
    /* Reset margin */
	padding: 0px;
    vertical-align: baseline;
    /* Align icons to the text baseline */
    width: auto;
    /* Fixed width for adult icons */
    height: 1.6rem;
    /* Fixed height for adult icons */
	margin-left: -1rem; /* Shrinks horizontal gap */
	}



	.adult-icon:first-of-type {
		margin-left: 0.6rem;
		/* Add space only to the first icon */
	}

	/* Specific styling for a smaller, child-sized icon */
	.child-icon {
		background-color: transparent;
		/* Ensure no background color is applied */
		width: auto;
		/* Smaller width for child icons */
		height: 1.2rem;
		/* Smaller height for child icons */
		margin: 0px;
		/* Reset margin */
		vertical-align: baseline;
		/* Align child icon to the same baseline */
	}
}


/* ------------------------- */
/* Mobile-Specific Styles (max-width: 450px) */
/* ------------------------- */
@media (max-width: 450px) {

    /* Mobile navigation bar adjustments */
    nav {
        height: 5rem;
        margin-bottom: 0;
    }
	
	/* Top bar styling */
	.top-bar {
	  height: 1rem;
	  padding-top: 1rem;

	}
		
	
	.adult-icon {
    background-color: transparent;
    /* Ensure no background color is applied */
    /* Reset margin */
    vertical-align: baseline;
    /* Align icons to the text baseline */
    width: auto !important;
    /* Fixed width for adult icons */
    height: 0.6rem !important;
    /* Fixed height for adult icons */
	margin-left: -0.45rem; /* Shrinks horizontal gap */

	}

	.adult-icon:first-of-type {
		margin-left: 0.2rem;
		/* Add space only to the first icon */
	}

	/* Specific styling for a smaller, child-sized icon */
	.child-icon {
		background-color: transparent;
		/* Ensure no background color is applied */
		width: auto !important;
		/* Smaller width for child icons */
		height: 0.45rem !important;
		margin-left: -0.45rem; /* Shrinks horizontal gap */
		/* Smaller height for child icons */
		/* Reset margin */
		vertical-align: baseline;
		/* Align child icon to the same baseline */
	}

    /* Resize the logo for mobile */
    .company-logo {
        height: 2.8rem;
        padding: 0;
        margin: 0;
    }

    /* Ensure the figure section adapts for mobile */
    .home-page-figure {
        position: relative;
        text-align: center;
        margin: 1rem auto;
        margin-top: 0;
        width: 100%;
        max-width: 90%;
        /* Restrict width to 90% of the screen */
        overflow: hidden;
    }

    /* Ensure images scale correctly on mobile */
    .home-page-figure img:not(.adult-icon):not(.child-icon) {
        margin-top: 0;
        border-radius: 1rem;
        width: 100%;
        height: auto;
        object-fit: cover;
        max-width: 100%;
        filter: brightness(93%);
    }

    /* Adjustments for text overlays on mobile */
    .overlay-text {
        position: absolute;
        top: 14%;
        left: 53%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: white;
        background-color: transparent;
        font-size: 0.8rem;
        /* Smaller font size for mobile */
        width: 90%;
        /* Prevent text from overflowing */
		z-index: 10;
    }

    /* Smaller heading size for mobile */
    .overlay-text h1 {
        color: white;
        font-size: 0.9rem;
        margin: 0;
    }
	
	.h1-with-icons {
		margin-bottom: 0.1rem !important;
	}

    /* Strong text styling within overlay */
    .overlay-text strong {
        color: white;
        font-size: 0.5rem;
        white-space: nowrap;
        width: 100%;
        display: inline-block;
        text-align: center;
    }

    /* Button container adjustments for mobile */
    .overlay-buttons {
        position: absolute;
        bottom: 12%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        gap: 0.3rem;
    }

    /* Button styles for mobile */
    .home-page-buttons {
        padding: 0.2rem 0.7rem;
        border-radius: 0.2rem;
        width: 5rem;
        cursor: pointer;
        font-size: 0.5rem;
		border: 1px solid rgba(0, 0, 0, 0.5); /* Appears thinner */
		
		
    }

    /* Resize icons for mobile */
    .transparent-icon {
        background-color: transparent;
        width: 0.8rem;
        height: 0.8rem;
        padding: 0;
        margin: 0;
        border-radius: 20%;
    }

    /* Adjust navigation link size */
    .contrast {
        font-size: 0.45rem;
    }
	
	.heart-container {
	top: 0.5rem;
	right: 0.5rem;
	font-size: 0.5rem;
	padding: 0.3rem 0.4rem;
	border-radius: 1rem;
	gap: 0.2rem;
	
    }

    /* Adjustments for screens smaller than 360px */
    @media (max-width: 380px) {
        .company-logo {
            height: 2.5rem;
        }

        .contrast {
            font-size: 0.42rem;
        }
    }

    /* Mobile body font size */
    body {
        font-size: 0.6rem;
    }

    /* Hover effect for navigation links on mobile */
    .contrast:hover {
        background-color: #00000027;
    }

    /* Hide elements on mobile */
    .hide-on-mobile {
        display: none !important;
    }

    /* Footer styles for mobile */
    footer p,
    footer nav ul li a {
        font-size: 0.5rem;
        margin-bottom: 0;
        padding-bottom: 0;
		color: rgb(0,0,0);
    }

    footer nav {
        margin-top: 0;
        padding-top: 0;
    }
}