body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family:Montserrat, sans-serif;
			overflow-x:hidden;
           
        }
		.page-content {
    /* Set a minimum height to push the footer to the bottom */
    min-height: calc(100% - 80px); /* Adjust 80px to the height of your footer */
    box-sizing: border-box;
    padding-bottom: 80px; /* Equal to the height of your footer */
}
		/* Header with hamburger */
		header {
            display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 5px 30px;
			background-color:white;
			position: -webkit-sticky; /* For Safari */
			position: sticky;
			top: 0;
			z-index: 10;
			
            
        }
        .logo img {
		    
            height: 50px;
            transition: transform 0.3s ease-in-out;
        }
        nav ul {
            list-style-type: none; /* Remove bullets */
            margin: 0;
            padding: 0;
            display: flex;
        }
		
        nav ul li {
			position: relative; /* Make the parent li positioned */
            padding: 0 10px;
        }
        nav ul li a {
            text-decoration: none;
            color: black;
			font-weight:bold;
        }
		nav ul li a:hover{
			                color: #38b6ff;
							
		}
		nav ul li a .active {
            background-color: #778da9;
			color:white;
			padding: 5px 5px;
			border-radius: 5px;
        }
		 /* Dropdown styling */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: white;
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0);
            min-width: 300px;
			text-align: left; /* Left-align the dropdown content */
			top: 100%;
            left: -20%;
		    z-index: 1;
        }
		

           .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
	    text-align: left; /* Ensure links are left-aligned */
        }

       

        /* Show the dropdown on hover */
        .dropdown:hover .dropdown-content {
            display: block;
        }
		
		
		.buttons {
			display: flex;
			gap: 10px;
		}

		.btn {
				padding: 10px 20px;
				border-radius: 5px;
				text-decoration: none;
				color: white;
				background-color: #778da9;
				border: none;
				cursor: pointer;
				transition: background-color 0.3s, color 0.3s;
		}
		.btn:hover {
				background-color:  #38b6ff; /* Darken the background color on hover */
		}
        .hamburger {
            display: none; /* Hidden by default */
            font-size: 30px;
            cursor: pointer;
			
        }
        @media (max-width: 768px) {
            .hamburger {
                display: block; /* Show the hamburger icon */
				float:left;
            }
			
			nav ul {
                flex-direction: column;
                display: none; /* Hide navigation links initially */
                width: 50%;
                position: fixed;
                background-color: #e8e8e8;
                top: 60px;
                left: 0;
                border-top: 0.5px solid #ccc;
                z-index: 9999;
            } 
            nav ul.show {
                display: flex;
            }
           
            nav ul li {
                text-align: left; /* Align to the left */
                padding: 5px 0px; /* Increased padding for touch targets */
            }
			   nav ul li .dropdown-content {
                position: static; 
                box-shadow: none;
				border:none;
                background-color: transparent;
            }

            .dropdown-content li a {
                padding-left: 0px; /* Add some indent for dropdown links */
                background-color: transparent;
				padding: 5px 5px;
                
            }

            /* Ensure dropdown is visible below the parent on mobile */
            .dropdown-content {
                display: block;
                position: relative; /* Make the dropdown inline with menu items */
            }
			  /* Ensure dropdown is visible below the parent on mobile */
            input[type="checkbox"] {
                display: none;
            }

            /* When the checkbox is checked, show the dropdown */
            input[type="checkbox"]:checked + .dropdown-content {
                display: block;
            }

            /* Responsive dropdown styling */
            .dropdown-content {
                display: none;
                position: relative;
            }

		.buttons {
       
				flex-direction: rows; /* Stack buttons vertically */
				gap: 8px;
			}

    

    .btn {
        padding: 8px 10px; /* Reduce padding for smaller buttons */
        font-size: 10px; /* Reduce font size for smaller screens */
    }
			
        }
		
		/*Header end */

       /* CSS of SSS starting*/
	.video-container {
		 width: 100%;
		  height: auto;
		  display:flex;
		  justify-content:center;
		  align-items:center;
		}

.video-content {
    	height: 65vh;
        width: 95%;
        object-fit: fill; /*use "cover" to avoid distortion*/
        position: relative;
}

.hide-button {
				padding: 10px 10px;
				border-radius: 5px;
				text-decoration: none;
				color: black;
				background-color:#e8e8e8;
				border: none;
				cursor: pointer;
				transition: background-color 0.3s, color 0.3s;
}
.main-content {
    display: flex;
    align-items: center;
    padding: 20px;
    margin-top: -20px;
}

.text-section {
    max-width: 600px;
    text-align: left;
    margin-left: 2cm;
    margin-right: 10px; /* Added margin to separate from the image */
}

.illustration {
    margin-top: 1px;
    max-width: 50%; /* Adjust width as needed */
    display: flex;
    justify-content: flex-end;
    align-items: right;
    position: relative;
}

.illustration-img {
    display: block; /* Ensures the image is treated as a block-level element */
    margin-left: 6cm; /* Adds margin to move the image to the right */
}

.highlighted-text {
    color: #38b6ff;
    transition: color 0.7s;
    opacity: 1;
    visibility: visible; 
}
.main-content {
    display: flex;
    align-items: center;
    padding: 20px;
    margin-top: -20px;
   
}

.text-section {
    max-width: 600px;
    text-align: left;
    margin-left: 2cm;
    margin-right: 10px; /* Added margin to separate from the image */
}

.illustration {
    margin-top: 1px;
    max-width: 50%; /* Adjust width as needed */
    display: flex;
    justify-content: flex-end;
    align-items: right;
    position: relative;
}

.illustration-img {
    display: block; /* Ensures the image is treated as a block-level element */
    max-width: 100%; /* Adjust width as needed */
}

.highlighted-text {
    color: #38b6ff;
    transition: color 0.7s;
    opacity: 1;
    visibility: visible; 
}

 	
.imagecontainer {
    display: flex; /* Flex container for side-by-side layout */
    width: 90%;
	height:auto;
    max-width: 800px; /* Increase max width to accommodate side-by-side layout */
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center; /* Align items vertically in the center */
    flex-direction: column;
}

.imagecontrols {
    display: flex;
    flex: 1;        
    flex-direction: rows; /* Stack words horizontally */
    font-size: 30px; /* Increase font size */
    font-weight: bold;
    color: #333;
	margin-top: 0px;
    margin-right: 10px; /* Space between text and images */
  }

.imageword {
    cursor: pointer;
    transition: color 0.3s ease; /* Smooth transition for color change */
}

.imageword.active {
    color: #38b6ff; /* Highlight the active word */
}



.imageblue-button {
    background-color: #778da9; /* Blue color */
    color: white; /* Text color */
    padding: 10px 20px; /* Padding for button */
    border-radius: 5px; /* Rounded corners */
    text-decoration: none; /* Remove underline from link */
    display: inline-block; /* Make it inline block */
    margin-bottom: 20px; /* Added margin for spacing */
}
.imageblue-button:hover {
    background-color:  #38b6ff; /* Darken the background color on hover */
}
/* Text Scrolling */
/* Define a custom bullet style using CSS */
ul {
    list-style-type: none;
    padding: 0px;
}

ul li {
    padding: 5px;
	padding-left:5px;
    transition: color 1s; /* Smooth transition for color change */
    text-align: center;
    font-size: 17px;
}

/* Define blue color for list items */
.blue {
    background-color: #cae8ff; 
}

/* Text Scrolling end */
.slider-container {
    width: 100%; /* Adjust as needed */
    max-width: 500px; /* Adjust as needed */
    margin: auto;
    position: relative;
    overflow: hidden;
}

.slider {
    display: flex;
    width: 100%; /* 100% per slide for 3 slides */
    height: 400px; /* Adjust height as needed */
    transition: transform 1s ease; /* Smooth transition */
}

.slides {
    display: flex;
    width: 100%;
    height: 100%;
}

.slide {
    flex: 0 0 100%;
    box-sizing: border-box;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images cover the container */
}

.dots {
    text-align: center;
    position: absolute;
    bottom: 10px;
    width: 100%;
}

.dot {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    cursor: pointer;
}

.dot.active {
    background-color: #717171;
}
@media screen and (max-width: 768px) { /* Adjust the max-width as needed */
    .main-content {
        flex-direction: column-reverse; /* Reverse the order of elements */
        align-items: left;
		width:98%;
		margin-top:0;
    }

    .imagecontainer {
        width: 90%; /* Make container full width */
		margin-top:0px;
    }

    .slider-container {
        width: 100%;
        max-width: 800px; /* Remove max-width to use full available width */
        height: auto; /* Adjust height to fit the content */
        margin: 20px; /* Add some margin between text and slider */
    }
	
	.slide img {
    width: 90%;
    height: 100%;
    object-fit: cover; /* Ensures images cover the container */
}

    
.dot {
    width: 10px;
    border-radius: 50%;
    height:10px;
}
    

    .imagecontrols {
        justify-content: flex-start; /* Center text */
        flex-direction: rows; /* Stack words vertically */
        align-items:center; /* Center text horizontally */
       
    }

    .imageword {
        margin: 0px; /* Add some space between text elements */
		font-size:16px;
    }
	ul li {
    
	margin-right:20px;
    transition: color 1s; /* Smooth transition for color change */
    text-align: center;
    font-size: 12px;
}
}
/* Media Queries for responsiveness */

/* Hide image slider and images on tablets */
@media only screen and (max-width: 768px) {
    #image-slider {
        display: none; /* Hide image slider on tablets */
    }
	ul li{
		font-size:14px;
	}
	
}

/* Hide image slider and images on mobile devices */
@media only screen and (max-width: 480px) {
    #image-slider {
        display: none; /* Hide image slider on mobile devices */
    }
	ul li{
		font-size:14px;
	}
}

/* Show image slider on non-responsive screens */
@media only screen and (min-width: 769px) {
#image-slider {
    flex: none;
    width: 550px; /* Fixed width for image container */
    height: 600px; /* Increased height for better visibility */
    position: relative;
}

.imageslide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 100px;
    left: 50px;
    right: 10px;
    opacity: 0; /* Start all images as invisible */
    transition: opacity 1s ease; /* Smoother transition */
    object-fit: cover; /* Ensure images do not get distorted */
}

.imageslide.active {
    opacity: 1; /* Only the active slide is visible */
}
   
}


/* CSS SSS ends*/
 /* Accurate Adaptive Advance */
        .aaacontainer {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            flex-wrap: wrap; /* Allows wrapping of boxes on smaller screens */
        }

        .aaabox, .aaabox1 {
            flex: 1;
            display: flex;
            flex-direction: column;            
            align-items: center;
			text-align:left;
            margin-bottom: 20px;
            background-color: #FFFFFF;
            border: 6px solid #778da9;
            border-radius: 15px;
            margin-right: 30px;
            padding: 20px;
            box-sizing: border-box;
            outline: 6px double #778da9;
            outline-offset: -15px;			
            height: 470px;
            max-width: 290px;
        }

        .aaabox img, .aaabox1 img {
            max-width: 100px;
            max-height: 100px;
            margin-bottom: 0px;
        }

        .aaabox h2, .aaabox1 h2 {
            margin-bottom: 10px;
            font-size: 1.5em;
            color: #333;
            text-align: center;
        }

        .aaap {
            font-size: 16px;
            line-height: 1.5;
            text-align: justify;
			max-width:240px;
			margin: 0 auto; 
        }

        /* Media query for smaller screens */
        @media (max-width: 768px) {
            .aaacontainer {
                flex-direction: column;
				justify-content:center;
				align-items:center; 
                
            }

            .aaabox, .aaabox1 {
                flex: 0 1 auto; /* Ensures the boxes take full width on smaller screens */
                max-width: 100%;
				margin-right:10px;
            }
        }
/* AAA ending*/
	
	/* Get Started */
	  /* Styling for the container */
	  .containerstyle {
	 display: flex;
      flex-direction: column; /* Arrange in a column */
	  justify-content: space-between;
	  align-items: center;
      width: 100%;
      
    }

    
    .getstartedcontainer {
    display: flex;
   
	flex-direction:rows;
    justify-content: center;
  }
    
	
    /* Styling for the box */
    .getstartedbox {
     
      width:450px;
      height:auto;
	  max-height:480px;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 8px;
      background-color: #cae8ff;
      margin-right: 20px;
  
    }
	.getstartedbox1 {
      
      width:450px;
      height:auto;
	  max-height:480px;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 8px;
      background-color: #e8e8e8;
      margin-right: 20px;
  
    }
   
    
    /* Styling for the image */
    .getstartedbox img {
      max-width: 100%;
      height: auto;
      border-radius: 6px; 
      align: center;
     }
	 .getstartedbox1 img {
      max-width: 100%;
      height: auto;
      border-radius: 6px; 
      align: center;
     }
   /* Styling for the button */
    .getstartedbox button,.getstartedbox1 button {
	  width:50%;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      background-color:#778da9;
      align : center;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
    }
    
     .getstartedbox button:hover {
    background-color:  #38b6ff; /* Darken the background color on hover */
}
.getstartedbox1 button:hover {
    background-color:  #38b6ff; /* Darken the background color on hover */
}
    /* Styling for the heading */
    .getstartedbox h2 {
      font-size: 18px;
      margin-bottom: 10px;
    }
	
  .getstartedcenter {
	  display: block;
	  margin-left: auto;	
	  margin-right: auto;
 	 width: 80%;
	}

	.getstartedresponsive{
	width:100%;
	height:auto;
	}

.getstartedrow {
  display: flex;
  
}

.getstartedcolumn {
  flex:20%;
  padding: 25px;
  justify-content:center;
  padding-right:0px;
}
@media screen and (max-width: 768px) {
    .getstartedcontainer {
		display:flex;
        flex-direction: column; /* Stack boxes vertically on smaller screens */
		justify-content: center;
		margin:20px;
		
    }
    .getstartedbox, .getstartedbox1 {
        width: 95%; /* Make boxes full width on smaller screens */
       	padding:10px;		/* Remove right margin on smaller screens */
		margin-bottom:20px;
    }
}
/*Get Started End*/
/* Mobile app */
.containermobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
  
}

/* Left Side: Text */
.left-content {
    flex: 1; /* Takes up half of the space */
    padding-left: 40px;
	text-align:justify;
}
.left-content span{
	text-decoration:none;
	color:blue
}
.left-content a{
	text-decoration:none;
	color:blue;
}
.left-content p {
    font-size: 18px;
	line-height:1.5;
    margin-bottom: 15px;
}

/* Right Side: Image */
.right-content {
    flex: 1; /* Takes up half of the space */
    display: flex;
    justify-content: center;
	margin-left:0px;
	
}

.right-content img {
	width:400px;
    max-width: 100%;
    height: 350px;
    border-radius: 10px; /* Optional: To add a rounded border to the image */
}
 /* Hidden video container */
         #video-container {
      display: none; /* Initially hidden */
      position: absolute;
      top: 30px;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* Optional: Semi-transparent background */
      z-index: 2; /* Place video on top of text */
      text-align: center;
      padding-top: 50px; /* Space at the top for centering */
    }

        /* Style for clickable text */
        .clickable-text {
            color: blue;
            cursor: pointer;
            text-decoration: underline;
        }
 .close-btn {
            display: inline-block;
            margin-top: 5px;
            padding: 8px 12px;
            background-color: #778da9;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 16px;
            border-radius: 4px;
        }

        .close-btn:hover {
            background-color:  #38b6ff;;
        }

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .containermobile {
		display:flex;
        flex-direction: column; /* Stack the text and image vertically on smaller screens */
	    text-align: center;
    }

    .left-content {
        padding-left: 0;
		
    }

    .right-content img {
        width: 100%; /* Adjust image to full width on smaller screens */
    }
}

/* End Mobile App */
/*PRoducts and Solutions */
/* General Styles */
.section-title {
    margin-bottom: 15px;
    text-align: center;
}

.product-text-container {
    text-align: center;
    margin-bottom: 20px;
}

.description {
    font-size: 22px;
    text-align: center;
    margin-bottom: 10px;
}

.highlight {
    
    font-weight: bold;
}

/* Layout for containerproduct */
.containerproductsol {
    display: flex;
    justify-content: space-around;
    align-items: center;
	margin-top:50px;
	margin-left:50px;
	
}

/* First Column: Product Image */
.product-image img {
    width: 350px;
    height: 300px;
}

/* Second Column: Circle Image */
.circle-image img {
    /* You can adjust dimensions here */
}

/* Third Column: Arrows Image and Text */
.arrows-container {
    position: relative;
    text-align: left;
	width:500px;
}

.arrows-image {
    height: 300px; /* Adjust as needed */
	
}

/* Text positioning for each arrow */

    .arrow-text {
    position:absolute;
    font-size: 20px;
    color: black;
	width: 350px;
  border: 2px solid white;
  text-align:left;
 
}

.arrow-text a{
	text-decoration:none;
	color:#1297e0;
}

.arrow-text-1 {
    top: 0px;   /* Adjust this to match the first arrow position */
    left: 80px;  /* Position next to the first arrow */
}

.arrow-text-2 {
    top: 125px;  /* Adjust this to match the second arrow position */
    left: 80px;  /* Position next to the second arrow */
}

.arrow-text-3 {
    top: 265px;  /* Adjust this to match the third arrow position */
    left: 80px;  /* Position next to the third arrow */
}

/* Bottom line text */
.bottomline {
    text-align: center;
	background-color: #CAE8FF; /* Set the background color here */
    border: 6px solid #cae8ff; 
	border-radius:20px;
	font-size:20px; 
	font-weight:bold;
}
@media (max-width: 768px) {
    .description {
        font-size: 18px; /* Adjust font size for smaller screens */
		text-align:justify;
		margin:20px;
    }

    .containerproductsol {
        flex-direction: column; /* Stack columns vertically */
        align-items: left;
		margin:20px;
    }

    .product-image img,
    .arrows-container,
    .circle-image img {
        max-width: 100%; /* Allow full width for smaller devices */
    }

    /* Adjust text positioning next to arrows for smaller screens */
    .arrow-text-1,
    .arrow-text-2,
    .arrow-text-3 {
        left: 80px; /* Bring text closer to arrows */
    }
}

/* Media Query for Mobile Devices */
@media (max-width: 480px) {
    .description {
        font-size: 16px;
		text-align:justify;
		margin:20px;
    }

    .arrow-text {
        font-size: 16px; /* Adjust text size for mobile */
    }

    .arrow-text-1,
    .arrow-text-2,
    .arrow-text-3 {
        left: 80 px;
    }
}

/*Footer*/

     footer {
      background-color: #e8e8e8;
      padding: 40px 20px;
      color: #000;
	  text-align:center;
    }

    .footer-container {
  display: flex;
  justify-content: space-around; /* Ensure equal spacing */
  align-items: center;            /* Vertically align the items */
  margin: 20px auto;
  width: 100%;                    /* Ensure the container spans full width */
}

   .footer-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  width: 25%;   
text-align:left;  
  
}

    .footer-main img {
      width: 40%;
	  height:auto;
	  align-items:center;
      margin-bottom: 10px;
    }

    .footer-contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 25%;                     /* Make this section take up 50% of the width */
                  
}

    .footer-contact ul {
      list-style: none;
      padding: 0;
    }

    .footer-contact ul li {
      margin-bottom: 10px;
	  text-align:center;
    }
	.footer-contact ul li a {
	 text-decoration:none;
	 color:black;
	 
	}
	.footer-contact ul li a:hover{
	  color:blue;
	}

    .footer-contact h3 {
      margin-bottom: 1px;
      font-size: 1.2em;
      color: #1297e0;
	  text-align:center;
    }
	.footer-line {
		border: 0;
		height: 2px; /* Thickness of the line */
		background-color: #ccc; /* Color of the line */
		margin: 1px 0; /* Space around the line */
	}
	 a{
	text-decoration:none;
	color:black;
	}
	a:hover{
	 color:blue;
	}
	
	/* Social Media Icons */
.social-icons {
  margin-top: 0px;
  display: flex;  /* This makes the icons appear in a row */
  justify-content: center;  /* Align them in the center */
  align-items:center;
  gap: 10px;  /* Space between the icons */
}

.social-icons a {
  color: #fff;
  font-size: 24px;
  text-decoration: none;
}
.social-icons img {
  width: 30px;  /* Adjust the size here */
  height: 30px; /* Adjust the size here */
}

.social-icons a:hover img {
  transform: scale(1.1);  /* Slightly enlarge the icons on hover */
  transition: transform 0.3s ease;  /* Smooth hover effect */
}

.social-icons a:hover {
  color: #3498db; /* Change color on hover */
}
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column; /* Stack the sections vertically */
    align-items: center;
  }

  .footer-main, .footer-contact {
    width: 90%; /* Make sections take up full width */
    text-align: center; /* Center-align for smaller screens */
  }

  .footer-main img {
    max-width: 150px; /* Adjust logo size for smaller screens */
  }

  .footer-contact ul li {
    font-size: 0.9em; /* Reduce font size slightly for mobile */
	text-align:center;
  }
}

@media (max-width: 480px) {
  footer {
    padding: 20px 10px;
  }

  .footer-main img {
    max-width: 120px; /* Smaller size for mobile */
  }

  .footer-contact h3 {
    font-size: 1em; /* Adjust font size */
	text-align:center;
	
  }

  .social-icons img {
    width: 25px; /* Smaller icons for mobile */
    height: 25px;
  }
}

/* ABOUT US PAGE CSS*/
/* Container for flex items */
  .container {
            display: flex;
            flex-direction: rows;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
			margin-top:70px;
            padding: 20px;
        }

        .capsule {
            width: 100%;
            max-width: 375px;
            height: 350px; /* Increased height */
            background-color: #e8e8e8;
            border-radius: 50px;
            overflow: visible;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 5);
            text-align: center;
            position: relative;
            padding-top: 20px 10px; /* Space for image overlap */
            
        }

        .capsule img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            position: absolute;
            top: -60px; /* Move image to overlap */
            z-index: 2; /* Ensure image is above content */
            border: 5px solid #e8e8e8; /* Border for better visibility */
            background-color: white; /* Background color to match the capsule */
        }

        .content {
            padding: 30px 10px;
            text-align: center;
            width: 100%;
            z-index: 1; /* Ensure content is below image */
        }

        .content h2 {
            margin: 60px 0px 10px; /* Space for image overlap */
            font-size: 1.5em;
			color:#454545;
        }

        .content h3 {
            margin: 0 0 10px;
            font-size: 1.2em;
            /*color: #333;*/
        }

        .content p {
            margin: 10px 10px 20px 10px;
            /*color: #666;*/
            text-align: justify; /* Justify alignment for paragraphs */
        }

        /* Media query for smaller screens */
        @media (max-width: 600px) {
			.container{
			   display:flex;
			   margin-top:40px;
			}
            .capsule {
			   
                max-width: 100%;
                border-radius: 30px;
                height: auto; /* Adjust height for smaller screens */
            }

            .content h2 {
                font-size: 1.2em;
            }

            .content h3 {
                font-size: 1em;
            }
        }
/* HOW IT WORKS CSS */
 .hwmain-content {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 20px;
            flex-wrap: wrap;
        }
  .hwsteps-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 20px; /* Add padding to the left and right of the container */
  }
  .hwstep {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 20px; /* Maintain spacing between the steps */
  }
  .hwcircle {
    border-radius: 50%;
    width: 250px;
    height: 250px;
    padding: 1px; /* Reduced padding to show more image */
    background: #8fdcfe no-repeat center center;
    background-size: 450%; /* Adjust to zoom out */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  img.arrow {
    width: 150px;
    height: auto;
  }
  h2 {
    text-align: center;
    color: black;
    padding: 20px 0;
  }
  @media (max-width: 768px) {
    .hwsteps-container {
      flex-direction: column;
      align-items: center;
      padding: 20px;
    }
    .hwstep, img.arrow {
      margin: 20px 0;
    }
    .hwstep .hwcircle, img.arrow {
      width: 150px;
      height: 150px;
    }
  }
.hwshift-up-left {
    background-position: calc(50% - 25px) 70%; /* Moves the image left and up */
}
/*Captcha*/
.captcha-container {
    display: flex;
    align-items: center;
	margin-left:30px;
    margin-bottom: 10px;
  }
  
  .captcha-refresh {
    cursor: pointer;
    font-size: 18px;
    color: #007bff;
    text-decoration: underline;
  }
  canvas {
    background-color: #f2f2f2;
    border: 1px solid #d3d3d3;
	margin-right:20px;
  }
   #captchaError {
            color: red;
            font-size: 14px;
            margin-top: 10px;
        }
/* PLANS AND PRICING */

 .pph2
		{
		  margin-top:0;
		  margin-bottom:0;
		}
        .ppmain-content {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 30px;
			
        }
		
        .ppimage-contact-container {
            display: flex;
            align-items: center;
            flex-direction: rows;
            flex-wrap: wrap;
            justify-content: center;
            padding-bottom: 20px;
			width:100%
		
        }
        .ppimage-container {
            
			
            margin-right: 20px;
            max-width: 100%;
            padding: 0 10px;
			margin-bottom:20px;
        }
        .ppoverlay {
           
        }
        .ppcenter {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width:500px;
            height: 95vh;
        }
        .ppcontact-container {
            
            padding: 0px;
            
        }
        .ppcontact-form {
            background-color: #f0f0f0;
            padding: 20px;
            border-radius: 5px;
            
			box-sizing:border-box;
        }
        #myppForm {
            width: 100%;
            max-width: 400px;
            
        }
         input[type="text"],
         input[type="email"],
         textarea,
        input[type="tel"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }
         textarea {
            height: 150px;
        }
        .ppsubmit-btn {
            background-color: #778da9; 
            color: white;
            padding: 15px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: block;
            margin: 0 auto;
        }
        .ppsubmit-btn:hover {
            background-color: #38b6ff;
        }
		@media (max-width: 768px) {
    .ppmain-content {
        flex-direction: column; /* Stack content vertically */
        align-items: center;
        padding: 15px; /* Reduce padding for smaller screens */
    }

    .ppimage-contact-container {
        flex-direction: column; /* Stack image and contact container */
    }

    .ppimage-container {
        margin-right: 0;
        max-width: 90%; /* Ensure images fit within smaller screens */
    }

    .ppcenter {
        width: 100%;
        height: auto; /* Make sure the image maintains aspect ratio */
    }

    #myppForm {
        max-width: 100%; /* Ensure form takes full width on small screens */
    }

    .ppsubmit-btn {
        width: 100%; /* Make submit button take full width */
    }
}
        
/* CONTACT US */

.contactmain-content {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding-bottom: 20px;
         			
        }
		
        .contactimage-contact-container {
            display: flex;
            align-items: center;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            padding: 20px;
			width:100%
        }
        .contactimage-container {
            
			
            margin-right: 20px;
            max-width: 100%;
            padding: 0 10px;
			margin-bottom:20px;
        }
        .contactoverlay {
           
        }
        .center {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width:500px;
	    height:95vh;
            
        }
        .contact-container {
            
            padding: 0px;
            
        }
        .contact-form {
            background-color: #f0f0f0;
            padding: 20px;
            border-radius: 5px;
            
			box-sizing:border-box;
        }
        #mycontactForm {
            width: 100%;
            max-width: 400px;
            
        }
        input[type="text"],
        input[type="email"],
        textarea,
        input[type="tel"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-sizing: border-box;
        }
        textarea {
            height: 150px;
        }
        .submit-btn {
            background-color: #778da9; 
            color: white;
            padding: 15px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: block;
            margin: 0 auto;
        }
        .submit-btn:hover {
            background-color: #38b6ff;
        }
	/* Responsive Styles */
@media (max-width: 768px) {
	
    .contactimage-contact-container {
        flex-direction: column; /* Stack elements vertically on smaller screens */
        align-items: center;
		margin:10px;
		
    }

    .contactimage-container {
        
        margin-bottom: 20px;
		
    }
	 .center {
       max-width: 100%;
        height: auto; /* Make sure the image maintains aspect ratio */
    }
    .contact-form {
        max-width: 95%; /* Remove width restriction on smaller screens */
    }
}

/* LOGIN PAGE */
.logmain-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0px;
    flex-wrap: wrap;
}

.logcontainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	padding-top:0px;
}

.logmain-section {
    background: url('path-to-your-building-image.jpg') no-repeat center center;
    background-size: cover;
    width: 100%; /* Adjusted width for responsiveness */
    padding: 0px;
    box-sizing: border-box;
    text-align: center;
    margin-top: 0px;
}

.logbuilding-image {
    width: 100%; /* Full width */
    max-width: 200px; /* Maximum width for larger screens */
    height: auto;
}
.logh2{
	margin-bottom:5px;
}
.logget-started-btn {
    background-color: #778da9;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-top: 0px;
    cursor: pointer;
    border-radius: 5px;
}

.loglogin-section {
    width: 100%; /* Adjusted width for responsiveness */
    padding: 30px;
    box-sizing: border-box;
    text-align: center;
}

.login-form {
    max-width: 300px;
    margin: 0 auto; /* Centering the form */
}

.login-form input[type="text"],
.login-form input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
	box-sizing: border-box;
}

.login-btn, .signup-btn {
    background-color: #778da9;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: block;
    width: 100%;
    font-size: 16px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
}

.logget-started-btn:hover {
            background-color: #38b6ff;
        }
.login-btn:hover {
            background-color: #38b6ff;
        }


.logforgot-link a {
    color: #dc143c;
    text-decoration: none;
}

.logp{
	   margin-top:0px;
	   font-size:16px;
	   text-align:center;
}

/* Media Queries for responsiveness */
@media screen and (min-width: 768px) {
    .logmain-section {
        width: 50%; /* Adjusted width for larger screens */
		margin-top:10px;
    }

    .loglogin-section {
        width: 50%; /* Adjusted width for larger screens */
    }
}
/* tc and privacy policy */

.pp{
		    text-align:justify-content;
			line-height:1.5;
			margin-left:20px;
			}
/* Registration form */
			.regmain-content {
            width: 100%;
            flex: 1; /* Fill available space */
            display: flex;
            flex-direction: column;
            justify-content: center; /* Center content vertically in the header */
            align-items: center; /* Center content horizontally */
        }

        .regcontainer {
            display: flex;
            flex-direction: rows; /* default to side by side */
            align-items: flex-start;
            width: 100%; /* fill the screen width */
            max-width: 1000px; /* Limit max width */
			justify-content:center;
			text-align: center;
        }

        .regbox, .regcontact-container {
            flex: 1; /* makes both divs share the space evenly */
            padding: 20px; /* spacing around the content */
        }

        .regimage-box {
            background-color: white;
        }
		.center {
            display: block;
            margin-left: auto;
            margin-right: auto;
            height: auto;
        }

        .img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        .regcontact-form {
            background-color: #f0f0f0;
            padding: 50px;
			padding-left:10px;
			padding-right:10px;
            border-radius: 5px;
           box-sizing: border-box;
			
        }
		#myregForm input[type="text"], 
		#myregForm input[type="email"], 
		#myregForm textarea, 
		#myregForm input[type="tel"] {
            width: 90%;
            padding: 10px;
            margin-bottom: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 10px;
            box-sizing: border-box;
        }

        .regbutton {
            padding: 10px 20px;
            background-color: #778da9;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            width: 20%;
			
        }

        .regbutton:hover {
            background-color: #38b6ff;
        }

        @media (max-width: 768px) {
            .regcontainer {
                flex-direction: column; /* stack the divs vertically */
            }
			.regimage-box{
				width:90%;
			}
			
	       .regbox, .regcontact-container {
                width: 90%; /* each take full width of the screen */
            }
			.regbutton{
				padding: 10px 10px;
			}
		}