/* Styleshee by alberto tuesta
April 6th 2024
css styling for jrc-electri
*/
body {
    background-color: black;
    color: #afafaf; 
       
}

.containero {
    max-width: 1440px;
    width: auto;
    margin: auto;
    
}

a {
    text-decoration: none;
    color: inherit; /* Optional: ensures the link color matches the surrounding text */
}


.circle-background {
    position: absolute;
    top: 10%;
    left: 30%;
    transform: translate(-50%, -50%);
    width: 50px; /* Make sure the circle covers the entire container */
    height: 850px; /* Make sure the circle covers the entire container */
    border-radius: 50%; /* Ensures it's a circle */
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%);
    z-index: -1; /* Send the circle to the background */
    filter: blur(80px); /* Add a blur effect */
  }

.heroLanding {
    width: 100%;
    height: 700px; 
    margin: auto;
    background-image: url(landingImages/hero1a.jpg) ;
    background-size: cover;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    position: relative;
    max-height: 750px;
    margin-bottom: 40px;
}

.shade {
    background-color: rgba(0, 0, 0, 0.37); /* Black color with 37% transparency */
    width: 100%;
    height: 100%;
    

}
.navBar {
    display: flex;
    justify-content: space-between; /* Align items to the left and right edges */
    align-items: center; /* Vertically center items */
    color: white;    
    font-size: 18px;
    background-color: rgba(0, 0, 0, 0.37);
    padding: 2%;
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

.logo {
    background-image: url(landingImages/logo.png);
    width: 204px;
    height: 48px;
    background-size: cover;
}

.navLinks {
    display: flex;/* Ensure the navigation links are displayed horizontally */
    align-items: center;/* Align items vertically in the center */
}

.navLinks a {
    margin-right: 20px;
    color: white;
    text-decoration: none;
}

.navLinks a:hover {
    color: #16A6FF;
}
.navLinks a.contactButton {
    /* Add specific styling for the "Contact us" button */
    background-color: #16A6FF;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
}

.navLinks a.contactButton:hover {
    /* Add specific hover styles for the "Contact us" button */
    background-color: #1b88cb;
    /* Add hover styles */
}
.hero-title h1 {
    color: white;
    font-size: 5.5rem;
    padding-left: 2%;
    margin-bottom: 0%;
    margin-top: 9%;
    line-height: 1.5cap;

}

.hero-title h1 span {
    font-size: 4.5rem;
}



.hero-title p {
    color: white;
    font-size: 1.5rem;
    padding-left: 3%;    
}
.learn {
    background-color: #18CFDC;
    color: white;
    padding: 10px 25px;
    border-radius: 5px;
    text-decoration: none;
    margin-left: 3%;
    font-size: 1.3rem;
    margin-bottom: 1%;  
    transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;  
    
}

.button2 {
    color: white;
    border: solid white 1px;
    border-radius: 5px;
    padding: 8px 25px;
    margin-left: 10px;
    font-size: 1.3rem;
    transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
}

.learn:hover {
    background-color: #16A6FF;
}

.button2:hover {
    background-color: #16A6FF ;
}

.socialM {
    
    gap: 15px; /* Adds space between icons */
    padding: 10px;
    margin-left: 2%;
    margin-top: 2cap;

}

.socialM img {
    
    transition: transform 0.3s ease-in-out;
    border-radius: 5px;
}

.socialM a:hover img {
    transform: scale(1.1); /* Slightly enlarges icon on hover */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); /* White glow effect */
}

/* hamburger iconnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn*/
/* Hamburger icon */
.hamburger-icon {
    cursor: pointer;
    padding: 1%;
    border: solid white 2px;
    display: none;
    
  }

  .hamburger-icon.hide-hamburger {
    display: none; /* Hide when the class is applied */
    /* Other styles */
}

.hamburger-icon.hide-hamburger + .close-button {
    display: block;
}

  .close-button {
    background: transparent;
    color: white;
    border: solid white 2px;
    font-size: 16px;
    padding: 1%;
    order: 2;
    display: none;
   
  }
  .navbar2 {
    background-color: #333;
    color: #fff;
    height: 40vh;
    width: 90%;
    position: fixed;
    top: 0;
    display: none;
    transition: left 0.3s ease;
    margin-top: 70px;
    order: 1;
  }

  .navbar2.show-navbar2 {
    display: block; /* Displayed when show-navbar2 class is present */
    height: 400px;
}


  
  .navbar2 ul {
    list-style-type: none;
    padding: 0;
  }
  
  .navbar2 li {
    padding: 10px 0;
    border-bottom: 2px solid rgb(101, 100, 100);
  }
  
  .navbar2 a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;    
    width: 100%;
  }

  #toggle-menu:checked + .navbar2 {
    left: 0;
  }




/*    ENDENDENDENDENDEND HAMBURGER  nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn*/



.containero-cards {
    display: flex;
    justify-content: space-between; /* Distribute items evenly along the main axis */
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    
}
.card {
    background: transparent; 
    color: white;
    padding: 20px;
    margin: 1%;
    border-radius: 10px;
    width: 30%; /* Adjust the width of the cards */
    border: 1px solid rgba(255, 255, 255, 0.3); /* 50% transparent white border */

}



.call-card p {
    font-size: 2rem;
}

.call-card:hover {
    background-color: #010c13;
    cursor: pointer;
    transition: font-size 0.2s ease-in-out;
}

.call-card:hover h1, 
.call-card:hover p {
    font-size: 2.05rem; /* Slightly larger text on hover */
    transition: font-size 0.2s ease-in-out; /* Smooth transition effect */
}




.footer {
    border: rgb(30, 30, 30) solid 1px;
    width: 100%;    
    color: #16A6FF;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;    
    text-align: center;
    box-sizing: border-box;
    padding: 3%;
    margin-bottom: 60px;
    border-radius: 8px;
}

.footer p {
    margin: 10px 0; /* Adds vertical spacing between paragraphs */
}

@media screen and (max-width: 1050px) {
    /* Adjust font size for horizontal orientation on smaller screens */
    .hero-title h1 {
        font-size: 3rem ;
        line-height: 1.2;
        margin-top: 45px;
        }

    .hero-title h1 span {
        display: block; /* Ensures the span acts as a separate block */
        font-size: 2rem; /* Adjust size as needed */
        line-height: 1.1;
        word-wrap: break-word; /* Helps with responsiveness */
    }

    .hero-title p {
        font-size: 16px;  
    }

    .heroLanding {        
        height: 500px;     
    }

    .call-card p {
        font-size: 1.5rem;
    }

    



  }

/* Media query for screens 800px or smaller */
@media screen and (max-width: 800px) {
   

    /* Hide the original navbar */
    .navLinks {
      display: none;
    }
  
    /* Display the hamburger icon */
    .hamburger-icon {
      display: block; /* Displayed when screen is 800px or smaller */
      /* Your styles for the hamburger icon */
    }

    .heroLanding {        
        height: 500px;     
    }

    

    .hero-title h1 {
        font-size: 2.5rem ;  
        margin-top: 5vh; 
        }

    .hero-title h1 span {
        font-size: 2.7rem;
    }
    .hero-title p {
        font-size: 16px;
        padding-bottom: 30px;
        }

    .learn {
        
        padding: 10px 25px;
        border-radius: 5px;
        text-decoration: none;
        margin-left: 3%;
        font-size: 1rem;
        margin-bottom: 1%;    
        
    }
    
    .button2 {
        
        border-radius: 5px;
        padding: 8px 25px;
        margin-left: 10px;
        font-size: 1rem;
    }

   
    

    .containero-cards {
            flex-direction: column; /* Change layout to vertical on small screens */
        }

    .card {
            width: 90%; /* Make cards occupy full width on small screens */
            margin: auto;
            margin-bottom: 20px; /* Add some space between the cards */
            
        }
    

    



    }