/*
*
* ==========================================
* FLIP CARD WITH TEXT
* ==========================================
*
*/

/* This is a 300px x 300px flip card with the front image defined on the page HTML */

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1500px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transform-origin: center; /* Ensures the rotation stays within the container */
  will-change: transform; /* Optimizes the animation */
}

/* Do a horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; /* Prevents visual glitches */
  overflow: hidden; /* Prevents content from causing overflow */
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #49176e;
  color: white;
	display: flex;
	align-items: center;
  transform: rotateY(180deg);
  vertical-align: middle;
}

.aParent div {
    float: left;
    clear: none; 
}

.center-elements {
  display: flex;
  margin: auto;
  justify-content: center;
  width: 100%; /* Ensure it doesn’t grow beyond the page width */
 
}


.title-align {
    text-align: center;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    
.paragraph-align {
    width: 100%;
    max-width: 900px;
    display: flex;
    margin: auto;
    justify-content: center;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: justify;
    } 

.img-header {

max-width: 100%;
height: auto;
}

html {
  scrollbar-gutter: stable; /* Ensures consistent scrollbar space */
}


















/* HORIZONTAL BAR WITH PROGRESSIVE RESPONSIVE BEHAVIOUR INTO SMALLER SCREENS AND MOBILE SCREENS */


/* Navbar Styling */
.navbar {
    width: 100%;
    background: #333;
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    align-items: center;
    padding: 10px; /* Add padding to avoid cutting off content */
    min-height: 60px; /* Minimum height, but will expand as needed */
    box-sizing: border-box;

}

/* Navbar list */
.navbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
	flex-wrap: wrap; /* Allow items to wrap when space runs out */
}

/* Navbar items */
.navbar ul li {
    position: relative;
    display: flex;
    align-items: center;
}

/* Navbar links */
.navbar ul li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    font-size: 15px;
    padding: 18px 20px;
    transition: background 0.3s;
    height: 100%;
}

/* Full height hover effect */
.navbar ul li:hover {
    background: #555;
}

/* Navbar icons */
.navbar ul li a .icon {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

/* Navbar text */
.link-text {
    white-space: nowrap;
}

/* Submenu Styling */
.submenu {
    list-style: none;
    position: absolute;
    left: 0;
    top: 100%;
    background: #444;
    padding: 0;
    margin: 0;
    min-width: 180px;
    display: flex; 
    flex-direction: column;
    max-height: 0;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
	z-index: 1001; /* Ensure it's above the main navbar */
}

/* Submenu items */
.submenu li {
    width: 100%;
}

/* Submenu links */
.submenu li a {
    display: block;
    padding: 12px;
    color: white;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.3s;
}

/* Submenu hover effect */
.submenu li a:hover {
    background: #555;
}

/* Show submenu with animation */
.has-submenu:hover .submenu {
    max-height: 500px;
    opacity: 1;
    visibility: visible;
}

/* RESPONSIVE STYLES FOR SMALL SCREENS */

/* Hide menu by default on small screens */
.menu-toggle-checkbox {
    display: none;
}

/* Mobile Styles */

@media screen and (max-width: 1200px) {
    .navbar ul li a {
        font-size: 14px;
        padding: 16px 15px;
    }
	
	.navbar ul li a .icon {
        width: 18px;
        height: 18px;
    }
}

@media screen and (max-width: 900px) {
    .navbar ul li a {
        font-size: 13px;
        padding: 14px 12px;
    }
	
	.navbar ul li a .icon {
        width: 16px;
        height: 16px;
    }
}




@media screen and (max-width: 600px) {
    /* Hamburger Icon */
    .menu-toggle {
        display: block;
        font-size: 13px;
        color: white; /* White hamburger icon */
        cursor: pointer;
    }

    /* Initially hide the navbar list (vertical menu) */
    .navbar ul {
        display: none; /* Hide the menu by default */
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: #333;
        z-index: 10;
    }
    
    /* Show the navbar when hovering over the hamburger icon or the navbar itself */
    .navbar:hover ul,
    .menu-toggle:hover + ul {
        display: flex; /* Show the menu */
    }

    /* Navbar links and submenu for mobile */
    .navbar ul li {
        width: 100%;
        text-align: center;
    }

    .navbar ul li a {
        padding: 15px;
        display: block;
	font-size: 14px;
    }
	
	.navbar ul li a .icon {
        width: 14px;
        height: 14px;
    }

    /* Submenu for Mobile */
    .submenu {
        position: relative;
        top: 0;
        left: 0;
        min-width: 100%;
	z-index: 1001; /* Ensure it's above the main navbar */
    }

    /* Show submenu on hover */
    .has-submenu:hover .submenu {
        max-height: 1000px;
        opacity: 1;
        visibility: visible;
	z-index: 1001; /* Ensure it's above the main navbar */
    }
	

}