.nav-container .nav-button-1, 
.nav-container-1 .nav-button-2 {    
	    display: inline-block; /* Align like a button */
	text-decoration: none;
	font-size: 16px
			/* Remove underline from links */
		margin: 2px
}

.nav-button-1 {
    background-color: #4CAF50; /* Background color for the first button */
    color: #ffffff; /* Text color for the first button */
    padding: 3px 4px; /* Size of the first button */
    /* Other styles like border, border-radius, etc. */
	border-radius: 2px;
    font-family: 'eb garamond';
		margin-right: 0
}

.nav-button-1:hover {
    background-color: #6CABDD; /* Hover color for the first button */
	color: #000000
}


.nav-button-2 {
    background-color: #4CAF50; /* Background color for the first button */
    color: #ffffff; /* Text color for the first button */
    padding: 3px 4px; /* Size of the first button */
    /* Other styles like border, border-radius, etc. */
	border-radius: 2px;
    font-family: 'eb garamond';
		margin-left: 0
}

.nav-button-2:hover {
    background-color: #6CABDD; /* Hover color for the first button */
	color: #000000
}

.price-list .scroll-button {    
	    display: inline-block; /* Align like a button */
	text-decoration: none;
	font-size: 16px
			/* Remove underline from links */
		margin: 2px
}

.scroll-button {
    background-color: #4CAF50; /* Background color for the first button */
    color: #ffffff; /* Text color for the first button */
    padding: 3px 4px; /* Size of the first button */
    /* Other styles like border, border-radius, etc. */
	border-radius: 2px;
    font-family: 'eb garamond';
		margin-right: 0
}

.scroll-button:hover {
    background-color: #6CABDD; /* Hover color for the first button */
}




@media screen and (max-width: 900px) { /* Adjust the max-width as needed for your mobile breakpoint */
     .nav-container-1 .nav-button-2,
	.price-list {
        display: none; /* Hides the buttons on screens smaller than 768px */
    }
}




.Custom-Media-Text {
    background-image: url('https://junglenationpw.com/wp-content/uploads/2024/01/2000-AFTER-E.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}



.custom-cover-block {
    position: relative;
  overflow: hidden;
    height: 700px; /* Adjust this value to your desired height */
	width: 100%; /* Full width */
}

.custom-cover-block video {
    width: 100%; /* Full width */
    height: auto; /* Maintain aspect ratio */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the video */
    object-fit: cover; /* Cover the container, might crop the video */
}


.custom-cover-block .Custom-Button-R1 {
	background-color: #4CAF50; /* Background color for the first button */
    color: #ffffff; /* Text color for the first button */
    padding: 5px 10px; 
	border-radius: 5px;
    position: absolute;
    top: 650px; /* Adjust as needed */
    left: 1500px; /* Adjust as needed */
    /* Style your button as needed */
}

.custom-cover-block .Custom-Button-R1:hover {
    background-color: #FF9800; /* Background color on hover */
    color: #1F2126; /* Text color on hover, if needed */
}

@media screen and (max-width: 1500px) {
    .custom-cover-block video {
        /* Adjust the width and height for smaller screens */
        width: 100%; /* Full width of the container */
        height: auto; /* Adjust height automatically to maintain aspect ratio */
        
        /* Adjust positioning if needed */
        top: 0;
        left: 0;
        transform: translate(0, 0); /* Reset transform for smaller screens */

        /* Optionally adjust object-fit if video cropping is an issue */
        object-fit: contain; /* This will show the entire video but might leave empty space */
    }
}





.custom-text-block-pop {
    position: relative;
	width: 100%
    z-index: 1;
	    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    /* Your existing styles */
}

.custom-text-block-pop {
    background-color: #F1EFE7; /* Background color for the text block */
	height: 20vh; /* 50% of the viewport height */
    padding: 5px; /* Padding around the text and buttons */
	padding-bottom: 5px; /* Padding around the text and buttons */
    text-align: center; /* Center align the text and buttons */
}

.custom-text-block-pop .highlight {
    color: #4CAF50; /* Color for the highlighted word */
}

p span{
	color: #4CAF50;
	Text-shadow: 0 0 10px #FF9800;
}

.custom-text-block-pop .bold {
    color: #000000; 
	font-weight: bold;
}

.custom-text-block-pop .larger-font-pop {
	Font-size:40px; 
	color: #000000;
	margin-top: -50px;
	margin-bottom: 5px;
	white-space: pre-line; /* Collapses whitespace but respects new lines */
}


.custom-text-block-pop .cta-buttons-pop{
    display: center; /* Align like a button */
    text-decoration: none; /* Remove underline from links */
    text-align: center;
    cursor: pointer;
	Margin-right: 10px;
}

.custom-text-block-pop .cta-button-1-pop {
    background-color: #FF9800; /* Background color for the first button */
    color: #ffffff; /* Text color for the first button */
    padding: 5px 10px; /* Size of the first button */
    /* Other styles like border, border-radius, etc. */
	border-radius: 2px;
	font-size: 30px;
		text-decoration: none

}

.custom-text-block-pop .cta-button-1-pop:hover {
    background-color: #4CAF50; /* Hover color for the first button */
	color: #ffffff
	
}

@media screen and (max-width: 1500px) {
    .custom-text-block-pop .larger-font-pop{
        width: 100%; /* Adjust width for smaller screens */
        font-size: smaller; /* Adjust font size for readability */
        /* Other necessary adjustments */
    }
}

.shortcode-container {
    display: flex; /* Aligns child divs in a row */
    justify-content: space-between; /* Adds space between the child divs */
    padding: 10px; /* Add padding as needed */
	background-color: #F1EFE7
}

.shortcode-block {
    flex-basis: 30%;
    margin: 0 10px;
    background-color: white; /* White background for each block */
    border: 1px solid #ccc; /* Optional border */
    padding: 15px; /* Padding inside each block */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
    text-align: center;
}

.header-link {
    display: block; /* Make the link a block element */
    margin-bottom: 10px; /* Space between the link and the shortcode */
    text-decoration: none; /* Optional: Removes underline from links */
    color: #000000;
	font-weight: bold;
}






/* Media query for mobile devices */
@media screen and (max-width: 1500px) {
    .shortcode-container {
        flex-direction: column; /* Stack children vertically */
        align-items: center; /* Center-align the children */
    }

    .shortcode-block {
        flex-basis: auto; /* Allow each block to take necessary space */
        margin: 10px 0; /* Adjust margin for vertical spacing */
        width: 100%; /* Adjust width to fit mobile screens */
overflow: hidden; /* Hide overflow to ensure content fits within the block */
}
    }


.video-container {
    background-color: rgba(255, 255, 255); /* Red color with 50% opacity */ 
padding: 25px;
    display: flex; /* Use flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    max-width: 1000px; /* Width of your video */
    height: 550px; /* Height of your video */
    margin: 0 auto; /* Center the container itself */
	border-radius: 2px; /* Rounded corners of the container */
    overflow: hidden; /* Ensures no overflow beyond the border radius */
	 box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Horizontal offset, vertical offset, blur radius, color */
}


.video-container video {
    display: block;
    width: 100%; /* Full width of the container */
    height: auto; /* Maintain aspect ratio */
	border-radius: 2px; /* Rounded corners of the video */
}

.full-width-background {
    background-color: #F1EFE7; /* Your desired background color */
    width: 100%; /* Full width of the container */
    margin: 0; /* Remove any default margins */
    padding: 50px 0; /* Vertical padding, no horizontal padding */
    box-sizing: border-box; /* Include padding in the width calculation */
}

.custom-text-block {
    background-color: #1F2E27; /* Background color for the text block */
    padding: 5px; /* Padding around the text and buttons */
	padding-bottom: 50px; /* Padding around the text and buttons */
    text-align: center; /* Center align the text and buttons */
}

.custom-text-block .highlight {
    color: #ff0000; /* Color for the highlighted word */
}

.custom-text-block .larger-font {
	Font-size:48px; font-weight: bold; /* Make the text bold */
	margin-bottom: 5px;
}
.custom-text-block .second-paragraph {
    margin-top: 5px; 
	margin-bottom: 5px;
}
.custom-text-block .third-paragraph {
    margin-top: 5px; 
	margin-bottom: 18px;
}

.custom-text-block .cta-button-1, .custom-text-block .cta-button-2 {
    display: inline-block; /* Align like a button */
    text-decoration: none; /* Remove underline from links */
    text-align: center;
    cursor: pointer;
	Margin-right: 10px;
}

.custom-text-block .cta-button-1 {
    background-color: #4CAF50; /* Background color for the first button */
    color: #ffffff; /* Text color for the first button */
    padding: 5px 10px; /* Size of the first button */
    border: 2px solid white; /* White border */
	border-radius: 2px;
		font-size: 20px
}

.custom-text-block .cta-button-1:hover {
    background-color: #FFEB3B; /* Hover color for the second button */
	color: #000000;
}

.custom-text-block .cta-button-2 {
    background-color: #6CABDD; /* Background color for the first button */
    color: #ffffff; /* Text color for the first button */
    padding: 5px 10px; /* Size of the first button */
    border: 2px solid white; /* White border */
	border-radius: 2px;
		font-size: 20px
}

.custom-text-block .cta-button-2:hover {
    background-color: #FF9800; /* Hover color for the second button */
}

.custom-text-block-call {
    background-color: #ffffff; /* Background color for the text block */
    padding: 20px; /* Padding around the text and buttons */
	padding-bottom: 20px; /* Padding around the text and buttons */
    text-align: center; /* Center align the text and buttons */
}

.cta-button-call-1{
	background-color: #FF9800; /* Background color for the first button */
    color: #ffffff; /* Text color for the first button */
    padding: 5px 10px; /* Size of the first button */
    /* Other styles like border, border-radius, etc. */
	border-radius: 2px;
	font-size: 30px;
		margin-right: 50px;
		font-family: 'eb garamond';
	text-decoration: none
}

.cta-button-call-1:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

.footer-call .foot-call-number {    
	    display: inline-block; /* Align like a button */
	text-decoration: none;
	font-size: 16px
			/* Remove underline from links */
		margin: 2px
}

.footer-call-number {
    background-color: transparent; /* Background color for the first button */
    color: #ffffff; /* Text color for the first button */
	border-radius: 2px;
    font-family: 'eb garamond';
		margin-top: 0;
			text-decoration:none
}

.footer-call-number:hover {
    background-color: #6CABDD; /* Hover color for the first button */
	color: #ffffff
}

/* Services CSS Below */


.custom-cover-block-services {
    position: relative;
  overflow: hidden;
    height: 700px; /* Adjust this value to your desired height */
	width: 100%; /* Full width */
}

.custom-cover-block-services video {
    width: 100%; /* Full width */
    height: auto; /* Maintain aspect ratio */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the video */
    object-fit: cover; /* Cover the container, might crop the video */
}


.custom-cover-block-services .Custom-Button-Services {
	background-color: #4CAF50; /* Background color for the first button */
    color: #ffffff; /* Text color for the first button */
    padding: 5px 10px; 
	border-radius: 5px;
    position: absolute;
    top: 650px; /* Adjust as needed */
    left: 1500px; /* Adjust as needed */
    /* Style your button as needed */
}

.custom-cover-block-services .Custom-Button-Services:hover {
    background-color: #FF9800; /* Background color on hover */
    color: #1F2126; /* Text color on hover, if needed */
}

@media screen and (max-width: 900px) {
    .custom-cover-block-services video {
        /* Adjust the width and height for smaller screens */
        width: 100%; /* Full width of the container */
        height: auto; /* Adjust height automatically to maintain aspect ratio */
        
        /* Adjust positioning if needed */
        top: 0;
        left: 0;
        transform: translate(0, 0); /* Reset transform for smaller screens */

        /* Optionally adjust object-fit if video cropping is an issue */
        object-fit: contain; /* This will show the entire video but might leave empty space */
    }
}

.video-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.video-wrapper {
    flex-basis: calc(33.333% - 20px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
	margin: 1px
}

.video-header {
    text-align: center;
    background-color: rgba(241, 239, 231, 0.5); /* Background color for the header */
	color: black;
    padding: 5px 0; /* Spacing above and below the text */
}

.video-wrapper iframe {
    width: 100%;
    height: 315px; /* Adjust height as needed */
}

@media screen and (max-width: 768px) {
    .video-wrapper {
        flex-basis: 100%;
    }
}

.content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background-color: #F1EFE7; /* Adjustable background color */
    padding: 20px;
    border-radius: 10px;
    width: auto; /* Adjustable width */
    margin: 20px auto; /* Centering the container */
}

.header-one {
    color: #333; /* Adjustable color */
    margin: 10px 0;
}

.header-two {
    color: #555; /* Adjustable color */
    margin: 10px 0;
}

.color-jungle {
    color: #4CAF50; /* Change this color for 'Jungle' */
}

.color-nation {
    color: #6CABDD; /* Change this color for 'Nation' */
}

.custom-button {
    background-color: #FF9800; /* Adjustable background color */
    color: #ffffff; /* Adjustable text color */
    padding: 5px 10px;
    border-radius: 5px;
    text-decoration: none; /* Removes underline from links */
    transition: background-color 0.3s ease; /* Smooth background color transition */
	font-family: 'eb garamond';
	font-size: 30px
}

.custom-button:hover {
    background-color: #5ECB6F; /* Color on hover */
	color: white;
}

/* text scrolling in from right */


.media-text-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
	background-color: #F1EFE7
}

.media {
    flex-basis: calc(33.333% - 20px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
	margin: 1px
}

.media iframe {
    width: 100%;
    height: 315px; /* Adjust height as needed */
}

.text-content {
    flex: 1; /* Adjust as needed */
    opacity: 0; /* Start with text hidden */
    transform: translateX(100px); /* Start position off-screen */
    transition: opacity 0.5s ease, transform 0.5s ease;
	color: #1F2E27;
}

.bold-brand-name {
    color: #4CAF50; /* Change this color for 'Nation' */
	font-weight: bold
}

/* Animation class */
.text-content-visible {
    opacity: 1;
    transform: translateX(0);
}

@media screen and (max-width: 768px) {
    .media-text-container {
        flex-direction: column;
    }
}

/* text scrolling in from left */

.media-text-container-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
       padding: 20px;
	background-color: #F1EFE7
}

.media-2 {
    flex-basis: calc(33.333% - 20px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
	margin: 1px
}

.media-2 iframe {
    width: 100%;
    height: 315px; /* Adjust height as needed */
}

.text-content-2 {
    flex: 1; /* Adjust as needed */
    opacity: 0; /* Start with text hidden */
    transform: translateX(-100px); /* Start position off-screen */
    transition: opacity 0.5s ease, transform 0.5s ease;
	color: #1F2E27;
}

.bold-brand-name-2 {
    color: #6CABDD; /* Change this color for 'Nation' */
	font-weight: bold
}

/* Animation class */
.text-content-visible-2 {
    opacity: 1;
    transform: translateX(0);
}

@media screen and (max-width: 768px) {
    .media-text-container-2 {
        flex-direction: column;
    }
}


/* Residential Services List */


.services-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
	background-color: #1f2e27;
	color: white
}

.service {
    margin-bottom: 20px;
}

.color-jungle {
    color: #28a745; /* Green color for 'Jungle' */
}

.color-nation {
    color: #6CABDD; /* Blue color for 'Nation' */
}

h2, h3 {
    position: relative;
    margin: 10px 0;
}

h3::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    width: 50%; /* Adjust line width as needed */
    height: 2px; /* Adjust line thickness as needed */
    background-color: #FF9800; /* Line color */
}

p, li {
    margin: 5px 0;
}

li {text-align: left}

.intro, .conclusion {
    margin-bottom: 20px;
}

.faq-accordion {
    max-width: 70%;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff; /* Change as needed */
}

.faq-item {
	margin-bottom: 10px;
    background-color: #000000; /* Change as needed */
	 box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Horizontal offset, vertical offset, blur radius, color */
}

.faq-question {
    margin: 0;
	color: white;
    padding: 15px;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: left;
	font-size: 20px;
    background-color:	#1F2126; /* Change as needed */
}


.faq-question::after {
    content: '+';
    font-size: 20px;
    color: orange; /* Change as needed */
}

.faq-answer {
    display: none;
    padding: 15px;
	background-color: #F1EFE7;
	color: #1F2126
}

/* BLOG */

.custom-text-block-blog {
    position: relative;
	width: 100%
    z-index: 1;
	    display: flex;
    align-items: left; /* Center items horizontally */
    justify-content: left; /* Center items vertically */
    /* Your existing styles */
}

.custom-text-block-blog {
    background-color: #Ffffff; /* Background color for the text block */
	height: 20vh; /* 50% of the viewport height */
    padding: 5px; /* Padding around the text and buttons */
	padding-bottom: 5px; /* Padding around the text and buttons */
    text-align: left; /* Center align the text and buttons */
}

.custom-text-block-blog .cta-buttons-blog{
    display: center; /* Align like a button */
    text-decoration: none; /* Remove underline from links */
    text-align: center;
    cursor: pointer;
	Margin-right: 10px;
}

.custom-text-block-blog .cta-button-1-blog {
    background-color: #FF9800; /* Background color for the first button */
    color: #ffffff; /* Text color for the first button */
    padding: 5px 10px; /* Size of the first button */
    /* Other styles like border, border-radius, etc. */
	border-radius: 2px;
	font-size: 30px;
		text-decoration: none

}

.custom-text-block-blog .cta-button-1-blog:hover {
    background-color: #4CAF50; /* Hover color for the first button */
	color: #ffffff
	
}