/* styles.css */
html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

header {
    background-color: #001f3f; /* Navy blue */
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

/* Hide hamburger button on larger screens */
.hamburger {
    display: none; /* Hidden by default */
    font-size: 24px; /* Size of the hamburger icon */
    background: none; /* No background */
    border: none; /* No border */
    color: white; /* White color for visibility */
    cursor: pointer; /* Pointer cursor on hover */
}

/* Navigation Menu Styles */
.nav-menu {
    display: flex; /* Display as flexbox */
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Align items vertically */
}

.nav-menu ul {
    display: flex; /* Horizontal layout for desktop */
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}

.nav-menu ul li {
    margin: 0 15px; /* Space between menu items */
}

/* Change menu text color to white and remove underline */
.nav-menu ul li a {
    color: white; /* Set text color to white */
    text-decoration: none; /* Remove underline */
}

/* Mobile Styles */
@media (max-width: 768px) {
    
    .hamburger {
        display: block; /* Show hamburger icon on mobile */
    }

    .nav-menu {
        display: none; /* Hide menu by default on mobile */
        flex-direction: column; /* Stack items vertically */
        position: absolute; /* Positioning for dropdown effect */
        top: 60px; /* Below header */
        right: 0;
        background-color: #001f3f; /* Same as header background */
        width: 100%; /* Full width for dropdown */
        z-index: 1; /* Ensure it appears above other elements */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Add shadow for depth */
        transition: max-height 0.3s ease-in-out; /* Smooth transition */
    }

    .nav-menu.active {
        display: flex; /* Show menu when active */
    }

    nav ul {
        flex-direction: column; /* Stack links vertically on mobile */
        padding: 20px; /* Add padding around the menu items */
    }

    nav ul li {
        margin-left: 0; /* Remove left margin for vertical stacking */
        text-align: center; /* Center align text on mobile */
        padding: 15px 0; /* Add padding for each menu item */
    }

    nav ul li a {
        color: white; /* Set text color to white */
        text-decoration: none; /* Remove underline */
        font-size: 20px; /* Increase font size for readability */
        transition: color 0.3s ease; /* Smooth color transition on hover */
    }

    nav ul li a:hover {
        color: #e0e0e0; /* Change color on hover for better visibility */
    }
}

main {
   flex: 1;
}

.hero {
   background-image:url('./images/bg.jpg'); 
   background-repeat:no-repeat;
   background-size:cover;
   background-position:center;
   height:400px;
}

.hero-content {
   text-align:center ;
   color:#ffffff ; 
   
}

.hero-content h1 {
   font-size :48px ; 
   font-weight :bold ; 
   margin :0 ; 
   text-shadow :2px 2px 4px rgba(0, 0, 0, 0.5); 
}

.hero-content .tagline {
   font-size :24px ; 
   font-weight :normal ; 
   margin-top :10px ; 
   color :#e0e0e0 ; 
}

h2 {
   color :#001f3f ;
}

.why-us {
   background-color:#e9ecef ;
   padding :40px 20px ;
}

.tiles {
   display:grid ;
   grid-template-columns :repeat(auto-fill, minmax(250px, 1fr));
   gap :20px ;
}

.tile {
   background-color:#ffffff ;
   border-radius :8px ;
   padding :20px ;
   box-shadow :0 2px 5px rgba(0,0,0,0.1);
}

.tile h3 {
   color:#001f3f ;
}

.tile p {
   font-size :14px ;
   color :#333333 ;
   line-height :1.5 ;
}

/* New styles for services section */
.services {
   padding :40px 20px ;
   background-color :#f4f4f4 ;
}

.service-tiles {
   display:grid ;
   grid-template-columns :repeat(2, 1fr);
   gap :20px ;
}

.service-tile {
   background-color:white ; 
   border-radius :8px ;
   padding-top :40px ; 
   box-shadow :0 2px 5px rgba(0,0,0,0.1);
   text-align:center ; 
}

/* Centering and styling images in service tiles without overlap*/
.service-tile img {
   width :80px ;
   height :80px ;
   border-radius :50%; 
   margin-bottom :10px ;
}

.service-tile h3 {
   margin-top :10px ;
}

.service-tile p {
   margin-top :5px ;
}

/* Footer Styles */
footer {
   background-color:#001f3f ; 
   color:white ; 
   padding-top :20px ; 
}

/* Center copyright text in footer bottom */

.footer-content {
   display:flex ; 
   justify-content :space-around ; 
   padding-bottom :20px ; 
}

.footer-section {
   flex-basis :calc(33% -40px); 
   margin-right :20px ; 
}

.footer-section h3 {
   margin-bottom :10px ; 
}

.footer-section ul {
   list-style-type:none ; 
   padding-left :0 ; 
}

.footer-section ul li {
   margin-bottom :8px ; 
}

.footer-section ul li a {
   color:white ; 
   text-decoration:none ; 
}

.footer-section ul li a:hover {
   text-decoration :underline ; 
}

/* Footer Bottom Styles */

.footer-bottom {
   text-align:center ; 
   padding-top :10px ; 
}

.Copyright{
text-align: center;

}
/* Responsive Styles */

/* Mobile Styles (max-width of devices) */

@media (max-width :768px) { 
 .hero-content h1{
     font-size :28px ; 
 }
 .hero-content .tagline{
     font-size :16px ; 
 }
 .footer-content{
     flex-direction :column ; 
     align-items:center ; 
 }
 .footer-section{
     margin-right :0 ; 
     margin-bottom :20px ; 
 }
}

/* Tablet Styles (between mobile and desktop) */

@media (min-width :768px) and (max-width :1024px) { 
 .hero-content h1{
     font-size :32px ; 
 }
 .hero-content .tagline{
     font-size :18px ; 
 }
 .footer-content{
     flex-direction :row ; 
 }
 .footer-section{
     margin-right :20px ; 
 }
}