@charset "UTF-8";
/* CSS Document */

        body {
            background-color: #ffffff;
            margin: 0;
        }
	
	/* Default link styling */
a {
    text-decoration: none; 
    color: #007bff; 
    font-weight: bold;
    
}

a:hover {

    color: #fff; 
}

a:visited {
    color: #0056b3; 
}


a:active {
  
    color: #000;
  
}
		
.MainFooter {
    max-width: 1200px;
    border-top: 1px solid #efefef;
    padding: 10px;
    margin: 0 auto;
    display: flex;
    justify-content: center; /* Center items horizontally */
    text-align: center; /* Center text inside the items */
}

		.rentOverview {
			font-size: 17px;
			font-color:#999999;
		}
		
		img {
			border:0px;
		}	
		
		.header {
			width: 100%;
			background-color: #f0f0f0;	
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
			
		}

		 .TopNavM {
			display: flex;
			max-width: 1200px; /* Set the max width of the container */
			margin: 0 auto;    /* Center the container */
			width: 100%;       /* Ensure the container takes up full width */
			
			
		}
		
	.subscription-plan {
    border: 1px solid #efefef; /* Adds a border */
    padding: 15px; /* Adds some padding */
    border-radius: 8px; /* Rounds the corners */
    width: 350px; /* Sets a width for each plan */
    text-align: center; /* Centers the text */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
	margin: 0;
			
}

.subscription-plans {
    display: flex; /* Use flexbox to arrange items */
    justify-content: center; /* Center items horizontally */
    flex-wrap: wrap; /* Allow items to wrap to the next line if necessary */
    gap: 20px; 
}

/* Mobile styles */
@media only screen and (max-width: 768px) {
    .subscription-plan {
        width: 100%; /* Full width on mobile */
        max-width: 350px; /* Prevents stretching */
        margin: 10px auto; /* Centers each plan */
    }

    .subscription-plans {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
        gap: 20px;
        padding: 0; /* Ensure no padding conflicts */
        width: 100%; /* Full width container */
    }

    body {
        margin: 0; /* Ensures no extra margin is pushing items left */
        padding: 0; /* No padding around the viewport */
    }
}
		
.signup-btn {
    display: inline-block; /* Makes it behave like a button */
    margin-top: 10px; /* Adds space above the button */
    padding: 10px 15px; /* Adds padding to the button */
    background-color: #007bff; /* Button background color */
    color: white; /* Button text color */
    text-decoration: none; /* Removes underline */
    border-radius: 5px; /* Rounds the button corners */
}

.signup-btn:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

		
		
    .price {
        font-size: 48px;
        margin-bottom: 10px;
		font-weight:normal;
    }
		
    .description {
        margin-bottom: 15px;
    }

		
/* Additional CSS to style the toggle button and subscription plans */
  
		.left-column {
			flex: 0 0 30%;      /* background-color: #f0f0f0;  Left column takes up 30% of the width */
			
			padding: 10px;
		}

		.right-column {
			width: 70%;                 
			display: flex;
			justify-content: flex-end;   /* Align menu items to the right */
			align-items: center;         /* Vertically center items */
			gap: 25px;                   /* Space between the menu items */
			text-align: right;
		}

.EmailHeader img {
    max-width: 100%; /* Ensure the image is responsive */
    height: auto;    /* Maintain the aspect ratio */
}

/* Mobile styles */
@media only screen and (max-width: 768px) {
    .EmailHeader img {
        max-width: 80%; /* Adjust width for mobile */
        margin: 0 auto; /* Center the image */
        display: block;  /* Ensures the margin auto works */
    }
}



.menu-item {
    margin-right: 20px;         /* Optional: add spacing between text items */
    font-family: Arial, sans-serif;
}

.menu-item-login {
    margin-right: 5px;         /* Optional: add spacing between text items */
    font-family: Arial, sans-serif;
}
		
		
.menu-item-space {
    margin-right: 80px;         /* Optional: add spacing between text items */
    font-family: Arial, sans-serif;
}				
		
.signup-btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #285da5;  /*007bff Set background color */
    color: white;               /* Set text color */
    text-decoration: none;      /* Remove underline */
    border-radius: 8px;        /* Make button rounded */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a slight shadow */
    font-weight: bold;          /* Make the text bold */
    transition: background-color 0.3s ease;  /* Smooth hover transition */
	margin-bottom: 9px;
}
		
/* Hover state for .signup-btn links */
.signup-btn:hover {
    background-color: #004085; /* Darker shade of blue on hover */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Increase shadow depth on hover */
	color:#ffffff;
}

/* Visited state for .signup-btn links */
.signup-btn:visited {
    background-color: #285da5; /* Keep the same background color after visiting */
    color:#ffffff;            /* Ensure text color remains white */
}

/* Active state for .signup-btn links */
.signup-btn:active {
    background-color: #003366; /* Darker shade for when the button is clicked */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* Reduce shadow on click */
	color:#ffffff;
}		
		
	

.signup-btn:hover {
    background-color: #6a0dad;  /* Change background on hover */
	 text-decoration: none;      /* Remove underline */
	font-color:#ffffff;
		}

	.MainBdContent {
    width: 100%;
    max-width: 1200px; /* Adjust max width as per your requirement */
    margin: 0 auto;    /* Center the container */
}

.row {
    display: flex;
    justify-content: space-between; /* Ensure columns are spaced out */
    margin-bottom: 20px;            /* Add spacing between rows */
	margin-top: 50px;
}

.left-columnbd, .right-columnb {
    width: 50%;
    padding: 0 10px;                 /* Adds 10px of padding on the left and right */
}


/* Optional - Add responsive styling for smaller screens */
@media (max-width: 768px) {
    .left-columnbd, .right-columnbd {
        width: 95%;  /* Stack columns vertically on small screens */
        text-align: center;
    }

    .row {
        flex-direction: column;
    }
}

}
/*Header for H1 tag */

h1 {
    padding-top: 40px;
    font-size: 47px;
    margin: 0;
    line-height: 1.2; /* More space between lines */
}

		
.styled-image {
    border-radius: 10px;  /* Adjust the radius as needed */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adjust shadow properties as needed */
    max-width: 100%;      /* Prevents the image from exceeding the width of its container */
    height: auto;         /* Maintains the aspect ratio */
}


		

		
/*Slider CSS*/
		
.toggle-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* Optional: space between Monthly, toggle, and Annual */
  padding: 10px;
}		
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #285da5;
}

input:focus + .slider {
  box-shadow: 0 0 1px #285da5;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
	 

/* Regular site styles - TOP Menu*/
.header {
    width: 100%;
    background-color: #f0f0f0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.TopNavM {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.left-column {
    flex: 0 0 30%;
    padding: 10px;
}

.right-column {
    width: 70%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 25px;
    text-align: right;
}

.EmailHeader img {
    max-width: 100%;
}

/* Breadcrumb Menu styles for mobile */
.breadcrumb-menu {
    display: none; /* Hidden on large screens */
    flex: 0 0 30%;
    text-align: right;
    padding: 15px;
}

.breadcrumb-icon {
    font-size: 30px;
    cursor: pointer;
}

	 /* Menu Items*/

@media only screen and (max-width: 768px) {
    .TopNavM {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
    }

    .breadcrumb-menu {
        display: block; /* Show hamburger menu on mobile */
        flex: 0 0 30%; /* Adjust if necessary */
    }

    .right-column {
        display: none; /* Hide the menu by default on mobile */
        flex-direction: column; /* Stack menu items vertically */
        gap: 15px;
        align-items: center; /* Center items horizontally */
        position: absolute; /* Position it as a dropdown */
        top: 60px; /* Adjust based on your header height */
        right: 0;
        background-color: #f0f0f0;
        width: 100%;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        padding: 20px;
        z-index: 10; /* Ensure it appears above other content */
    }

    .right-column.show {
        display: flex; /* Show the menu when the toggle is activated */
    }

    /* Center the menu items */
    .right-column .menu-item {
        text-align: center; /* Center text within each menu item */
        width: 100%; /* Ensures full width for centering */
    }

    .right-column .menu-item a {
        display: block; /* Makes the anchor tags occupy the full width */
        width: 100%; /* Ensures full width for clickable area */
        padding: 10px; /* Add some padding for better clickability */
        text-align: center; /* Center align text within the link */
    }
}