@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

		.hyatt-page-wrap h2 {
			font-family: 'Poppins', sans-serif;
			font-weight: 500;
			color: #175391;
			text-align: center;
			font-size: 16px;
			z-index: 10;
			position: relative;
		}
		
        .hyatt-page-wrap h3 {
			font-family: 'Poppins', sans-serif;
			font-weight: 700;
			color: #0072ce;
			text-align: center;
			font-size: 20px;
			padding: 0 10px;
			z-index: 10;
			position: relative;
		}
		
        .hyatt-page-wrap {
			font-family: 'Open Sans', Arial, sans-serif;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }
		
		.page-head-image{
			text-align: center;
			width: 100%;
		}
		
		.page-head-image img{
			max-width: 100%;
		}
		
		.beach_hr {
			width: 90%;
			height: 25px;
			background: url(../images/beach_hr.png);
			background-repeat: repeat;
			background-position: left;
			background-size: contain;
		}
		
		.section-wrap{
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			margin: 20px 25px;
			padding: 10px 10px 20px 10px;
			justify-content: center;
		}
		
		.section-header{
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-around;
		}
		
		.section-header-mobile{
			display: none;
		}
		
		.section-header img{
			height: 100px;
		}
		
		.section-img-left{
			flex-direction: row-reverse;
		}
		
		.section-img-right{
			flex-direction: row;
		}
		
		.section-img-right p{
			/* text-align: left; */
		}
		
		.section-img-left p{
			/* text-align: left; */
		}
		
		.section-text{
			max-width: 600px;
			/* text-align: center; */
		}
		
		.section-text p{
			line-height: 3;
			font-size: 14px;
			padding: 10px 0 0 0;
		}
		
		/* --- Style for All Buttons in the Section --- */
		.section-button {
			/* Layout & Display */
			display: inline-block;
			padding: 12px 30px;
			margin: 10px; /* Space around the button */
			
			/* Text Styling */
			text-decoration: none; /* Remove underline from links */
			font-size: 16px;
			font-weight: 300; /* Semi-bold */
			text-align: center;
			letter-spacing: 0.5px;
			
			/* Appearance */
			border-radius: 6px; /* Slightly rounded corners */
			cursor: pointer;
			transition: all 0.4s ease; /* Smooth transition for hover effects */
		}

		/* --- Primary Button: The main call-to-action (e.g., "Book Now") --- */
		.primary-button {
			background-color: #327cbb;
			color: #ffffff;
			border: 2px solid #327cbb;
			box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
		}

		.primary-button:hover,
		.primary-button:focus {
			background-color: #0056b3; /* Darker blue on hover */
			border-color: #0056b3;
			color: #ffffff;
			box-shadow: 0 6px 15px rgba(0, 123, 255, 0.3);
			transform: translateY(-2px); /* Subtle lift effect */
		}

		/* --- Optional: To align buttons neatly within the section --- */
		.section-wrap .button-container {
			padding-top: 15px; /* Add some space above the buttons */
		}
		
		.icon-separator img {
			width: 70px;
			border-radius: 8px;
		}
		
		.waves {
            position: relative;
            width: 100%;
            height: 80px;
            overflow: hidden;
            transform: scaleY(-1); /* Flips the waves upside down */
        }

        .wave {
            position: absolute;
            bottom: -80px;
            left: 0;
            width: 120%;
            height: 150px;
            background: #0099ff;
			border-radius: 50%;
            animation: moveWave 4s ease-in-out infinite alternate;
            opacity: 0.7;
        }

        .wave:nth-child(2) {
            bottom: -95px;
            width: 140%;
            height: 120px;
            background: #0077cc;
            animation-duration: 5s;
            animation-delay: -4s; /* Starts 1 second into the animation */
            opacity: 0.5;
        }

        .wave:nth-child(3) {
            bottom: -85px;
            width: 160%;
            height: 160px;
            background: #0099ff;
            animation-duration: 6s;
            animation-delay: -2s; /* Starts 2 seconds into the animation */
            opacity: 0.3;
        }
        
        .wave:nth-child(4) {
            bottom: -90px;
            width: 200%;
            height: 130px;
            background: #0055aa;
            animation-duration: 7s;
            animation-delay: -5s; /* Starts 3 seconds into the animation */
            opacity: 0.3;
        }

        @keyframes moveWave {
            from {
                transform: translateX(-30%);
            }
            to {
                transform: translateX(30%);
            }
        }
	

        .solar-system {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .sun {
			position: relative;
            width: 350px; /* Значително по-голямо Слънце */
            height: 350px;
            background-color: #fff; /* Ярко жълт цвят за Слънцето */
            border-radius: 50%;
			box-shadow: 0 0 5px rgb(15 105 241 / 80%), 0 0 10px rgb(15 189 241 / 50%);
            z-index: 100; /* Много висок z-index, за да е винаги отпред */
        }
		
		.static-planet {
			position: absolute;
			bottom: 75%;
			left: 65%;
			z-index: 100;
			background-color: #ff8800f2;
			height: 75px;
			width: 75px;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			transform: rotate(-20deg);
		}
		
		.static-planet-content {
			color: #fff;
			font-size: 16px;
			font-weight: 600;
		}

        .planet {
            position: absolute;
            width: 320px;
            height: 320px;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(155, 89, 182, 0.6);
            z-index: 50; /* По-нисък z-index от Слънцето, но по-висок от фона */
			opacity: 0.7;
        }

        /* Орбити и анимации за всяка планета */
        /* Намалихме радиусите на орбитите, за да се пресичат със Слънцето */
        .planet:nth-child(1) {
            animation: orbit1 10s linear infinite;
        }
        .planet:nth-child(6) {
			background: #0055aa;
            animation: orbit2 4s linear infinite;
        }
        .planet:nth-child(3) {
			background: #0077cc;
            animation: orbit3 8s linear infinite;
        }
        .planet:nth-child(4) {
			background: #0099ff;
            animation: orbit4 7s linear infinite;
        }
        .planet:nth-child(5) {
			background: #00bbff;
            animation: orbit5 5s linear infinite;
        }

        @keyframes orbit2 {
            0% { transform: rotate(0deg) translateX(15px); } /* Средна орбита */
            50% { transform: rotate(180deg) translateX(30px); }
            100% { transform: rotate(360deg) translateX(15px); }
        }
        
        @keyframes orbit3 {
            0% { transform: rotate(0deg) translateX(-20px); } /* Средна орбита */
            50% { transform: rotate(-180deg) translateX(-40px); }
            100% { transform: rotate(-360deg) translateX(-20px); }
        }
        
        @keyframes orbit4 {
            0% { transform: rotate(0deg) translateY(22px); } /* Средна орбита */
            50% { transform: rotate(180deg) translateY(33px); }
            100% { transform: rotate(360deg) translateY(22px); }
        }
        
        @keyframes orbit5 {
            0% { transform: rotate(0deg) translateX(35px); } /* Средна орбита */
            50% { transform: rotate(-180deg) translateX(15px); }
            100% { transform: rotate(-360deg) translateX(35px); }
        }
		
		.solar-system:hover{
			.sun{
				box-shadow: 0 0 5px rgb(241 189 15 / 80%), 0 0 10px rgb(241 220 15 / 50%);
				transition: all 0.4s ease-in-out;
			}
			
			.planet:nth-child(6) {
				/* Starting point: A bright yellow (closer to pure yellow) */
				background: #ffcc00; /* Max Red (ff), High Green (cc), No Blue (00) */
				animation: orbit2 4s linear infinite;
				transition: all 0.4s ease-in-out;
			}
			.planet:nth-child(3) {
				/* Moving towards orange: Keep Red high, slightly decrease Green */
				background: #ffaa00; /* Max Red (ff), Mid Green (aa), No Blue (00) */
				animation: orbit3 8s linear infinite;
				transition: all 0.4s ease-in-out;
			}
			.planet:nth-child(4) {
				/* Clear orange: Keep Red maxed, decrease Green more */
				background: #ff8800; /* Max Red (ff), Lower Green (88), No Blue (00) */
				animation: orbit4 7s linear infinite;
				transition: all 0.4s ease-in-out;
			}
			.planet:nth-child(5) {
				/* Deep orange/reddish-orange: Max Red, lowest Green in the range */
				background: #ff6600; /* Max Red (ff), Lowest Green (66), No Blue (00) */
				animation: orbit5 5s linear infinite;
				transition: all 0.4s ease-in-out;
			}
		
		}
		
		@media screen and (max-width: 600px) {
			.section-wrap {
				flex-direction: column-reverse;
			}
			
			.icon-separator {
				padding: 20px 0 0 0;
			}
			
			.section-text p {
				line-height: 2;
			}
			
			.sun {
				max-width: 250px;
				max-height: 250px;
			}
			
			.planet {
				max-width: 210px;
				max-height: 210px;
			}
			
			.beach_hr {
				height: 18px;
			}
			
			.section-header img{
				display: none;
			}
			
			.section-header-mobile img{
				height: 100px;
			}
			
			.section-header-mobile{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-around;
			}
			
			
		}