:root{
    
    /*--site-background: rgb(0, 7, 47);*/
    --site-background: rgb(0, 1, 80);
    --hover-color: rgba(255, 255, 255, 0.103);
    --nav-text-color: rgba(255, 0, 0, 0.25);
    
    
    --accent-color: rgba(255, 0, 0, 0.25);
    --sidebar-color: var(--site-background);
    --section-1: rgba(255, 255, 255, 0.2);
    --section-2: rgba(255, 255, 255, 0.1);
    --section-3: rgba(255, 255, 255, 0.05);
    --section-4: rgba(255, 255, 255, 0.01);
    --section-5: rgba(255, 255, 255, 0.001);
    /*--contact-color: rgba(255, 255, 255, 0.115); */
    --contact-background-color: rgb(40,36,52);
    --input-background: rgba(255, 255, 255, 0.1);
    --footer-background: rgb(0, 0, 0);

}
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        
        body {
            font-family: Arial, sans-serif;
            min-height: 100vh;
            display: grid; 
            display: grid;
            grid-template-columns: 312px 4fr;
            grid-template-rows: auto 100vh auto auto auto auto auto auto; /* changed this line */
            grid-template-areas:
                "sidebar main"
                "sidebar main"
                "sidebar testimonials"
                "sidebar section1"
                "sidebar section2"
                "sidebar section3"
                /* "sidebar section4" */
                "sidebar contact-us"
                "sidebar footer";
                background-color: var(--site-background);
                overflow-x: hidden; /* Added overflow hidden */
                margin: 0;


        }

        aside {
            grid-area: sidebar;
            background-color: var(--site-background);
            padding: 20px;
        }

        aside ul {
            display: flex;
            flex-direction: column;
            list-style: none;
            position: sticky;
            top: 35vh;
        }

        aside li {
            padding-bottom: 2em;
            text-align: right;
        }

        li a {
            text-decoration: none;
            color: white;
            font-family: Poppins, sans-serif;
            font-size: 1.1em;

        }

        /* Sidebar link styles */
        aside ul li a {
            color: white;
            opacity: 0.6;
            transition: color 0.5s ease-in-out, opacity 0.5s ease-in-out;
        }

        li::after {
            content: "";
            display: block;
            /* width: 100%; */
            height: 3px;
            background: linear-gradient(to left, rgb(205, 0, 20) 0%, rgba(139, 0, 123, 0.636) 100%);
            background-size: 200% 100%;
            background-position: 100% 0;
            margin-top: 9px;
            opacity: 0.2;
            transition: opacity 0.5s ease-in-out, background-position 0.5s ease-in-out;
        }

        aside ul li.active a {
            color: rgb(255, 255, 255);
            opacity: 1;
            font-weight: bold;
        }

        aside ul li.active::after {
            opacity: 1;
            background-position: 0% 0;
        }



/* TOP NAV BAR */ 

nav {
    
    position: absolute;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 120;
    
    
    
    
    
}

nav ul {
    list-style: none;
    display: flex;
    
}

nav li{
    display: flex;
    
    
}

nav .home-li{
    margin-right: auto;
    
    
}

nav a{
    display: flex;
    text-decoration: none;
    color: white;
    padding: 1em 2em;
    transition: background-color 150ms ease;
    
    
    
    
    
    
}

nav a:hover{
    background-color: var(--hover-color);
    
}

nav a span{
    margin-top: 3px;
}


nav a.active-link{
    border-bottom: 2px solid var(--nav-text-color);
}

nav a.accent-link{
    background-color: var(--accent-color);
    
}

.desk-top-hide{
    display: none;
}

@media screen and (max-width:1400px){
    #open-sidebar-button, #close-sidebar-button{
        display: block !important;
        z-index: 111;
        
    }
    nav{
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: min(20em, 100%);
        z-index: 120;
        border-left: 1px solid var(--hover-color);
        background-color: rgba(0, 0, 0, 0.909);
        transition: right 300ms ease-out;
    }

    nav.show ~ #overlay{
        display: block;
        
        
    }

    nav.show{
        right: 0;
    }

    nav li {
        padding-bottom: 0;
    }



    nav ul{
        width: 100%;
        flex-direction: column;
    }
    nav a{
        width: 100%;
        
        padding-left: 2.5em;
    }

    

    .mobile-break{
        display: block;   
            }
    .desk-top-hide{
        display: flex;
    }

    


        
}

#open-sidebar-button{
    display: none;
    background: none;
    border: none;
    padding: 1em;
    margin-left: auto;
    cursor: pointer;
    position: fixed;
    top: 0;
    right: 0;
}

#close-sidebar-button{
    display: none;
    background: none;
    border: none;
    padding: 1em;
    cursor: pointer;
}



/*


/*
#overlay{
    position: fixed;
    display: none;
    background-color: red;
    z-index: 114;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
} */

/* END TOP NAV BAR */






        main {
            grid-area: main;
            /*background-color: rgba(42, 64, 160, 0.676);*/
           position: relative;
            padding: 4em;
            align-items: center;
            justify-content: center;
            display: flex;
            flex-direction: column;
            overflow: hidden; /* Added overflow hidden */

            background-image: url("/assets/custom-top.jpg"); 
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;

            
            
            
        }

        #testimonials {
            grid-area: testimonials;
        }

        

        main video {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
            
        }





        

        .title-wrapper {
            
            background: rgba(255, 255, 255, 0); 
            padding-top: 2em;
            padding-bottom: 2em;
            padding-right: 10px;
            padding-left: 10px;
            border-radius: 10px;
            width: 90%;
            /*backdrop-filter: blur(4px); */
            
            
        }

        
        .title-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*border-radius: 10px;*/
    
    background-color: rgba(0, 0, 0, 0.304);

    z-index: -1; 
    
} 





    /*background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red for debugging */


/*    -webkit-mask-image: radial-gradient(ellipse 120% 70%, black 20%, rgba(0, 0, 0, 0.5) 50%, transparent 90%);
/* mask-image: radial-gradient(ellipse 120% 70%, black 20%, rgba(0, 0, 0, 0.5) 50%, transparent 90%);
*/
    
    





        .title-wrapper h1 {
            font-size: 5em;
            margin-bottom: 20px;
            color: rgb(255, 255, 255); 
            font-family: Poppins, sans-serif;
            text-align: center;
            text-shadow: 0 0 20px #000000,
                0 0 10px #00000000,
                0 0 20px rgba(0, 0, 0, 0.600),
                0 0 30px rgba(0, 0, 0, 0.600),
                0 0 40px rgba(0, 0, 0, 0.600),
                0 0 55px rgba(0, 0, 0, 0.600),
                0 0 70px rgba(0, 0, 0, 0.600);
            
        }

        .title-wrapper p {
            font-size: 2em;
            font-family: Poppins, sans-serif;
            color: rgb(255, 255, 255);
            text-align: center;
            line-height: 1.2em;
            text-shadow: 0 0 20px #000000,
                0 0 10px #00000000,
                0 0 20px rgba(0, 0, 0, 0.600),
                0 0 30px rgba(0, 0, 0, 0.600),
                0 0 40px rgba(0, 0, 0, 0.600),
                0 0 55px rgba(0, 0, 0, 0.600),
                0 0 70px rgba(0, 0, 0, 0.600);

        }

       

        /* Section styling */
/*
        section {
            display: flex;
            align-items: center;
            justify-content: center;
            /*padding: 20px;*/
        /*} */
        

        /* Section grid structure */
        .section-grid {
            display: grid;
            grid-template-columns: 1fr 3fr; /* 25% left side, 75% right */
            width: 100%;
            height: 100%;
        }

        .image-area {
            background-color: rgba(0, 0, 0, 0.1); /* Placeholder */
            min-width: 30vw;
            height: 100%;

        }

        .image-area img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .text-content {
            display: flex;
            flex-direction: column;
            padding: 50px;
        }

        .testimonial-section{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 50px;
            background-color: rgba(255, 255, 255, 0.181);
        }

        .testimonial-h2{
            color: rgba(255, 255, 255, 0.876);
            font-size: 3em;
            margin-bottom: 10px;
        }

        .testimonial-cards {
            display: flex;
        }

        @media (max-width: 1350px) {
            .testimonial-cards {
                display: flex;
                flex-direction: column;
                align-items: center;
                
            }
        }

       

        /* Individual section colors */
        #section1 { grid-area: section1; background-color: var(--section-1); }
        #section2 { grid-area: section2; background-color: var(--section-2); }
        #section3 { grid-area: section3; background-color: var(--section-3); }
        #section4 { grid-area: section4; background-color: var(--section-4); }
        #contact-us { grid-area: contact-us; background-color: var(--contact-color); }

        /* Responsive Design */
        @media(max-width: 1100px) {
            body {

                display: flex;
                flex-direction: column;
            }

            .section-grid{
                display: flex;
                flex-direction: column;;
            }

            .image-area {
               /* min-height: 300px;*/
                width: 100%;
                max-height: 50vh;
                object-fit: cover;
            }


            aside {
                display: none;
            }

            main video {
                display: none;
            }

            main{
            background-image: url("/assets/custom-training.jpg"); 
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            min-height: 100vh;
            }

            .title-wrapper{
                margin-bottom: 15px;
            }

            .title-wrapper h1 {
                font-size: 3em;
            }

            .title-wrapper p {
                font-size: 1.5em;

            }


        }

        .maru-logo {
            width: 250px;
            height: auto;
            position: fixed;
            top: 0;
            left: 10px;
            padding: 10px;
            z-index: 150;
            cursor: pointer;
        }

        section h2{
            color: rgb(255, 255, 255);
            font-size: clamp(0.8rem, 1.9em, 2rem);
            margin: 0 0 1.5em 0; 
            
        }

        section p{
            color: rgba(255, 255, 255, 0.671);
            font-size: 1.4em;
            
            
        }


/* Contact Form Styles*/



/* Scroll Buttone */

/* .scroll-div{
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dotted red;
    
}*/




.scroll-button {
           
    
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            padding: 12px 24px;
            background: rgba(247, 247, 247, 0.275); /* Semi-transparent */ 
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.436);
            border-radius: 15px;
            cursor: pointer;
            font-size: 1rem;
            transition: background 0.3s ease, transform 0.2s ease;
            
        }

        .scroll-button:hover {
            background: rgba(255, 255, 255, 0.649);
            transform: translateX(-50%) scale(1.05);
        }
        .scroll-button:active {
            background: rgba(251, 0, 0, 0.426);
            transform: translateX(-50%) scale(0.95);
        }



        .standard-button, .submit-button {
            /* align-self: flex-start; */
            /* white-space: nowrap; */
            width: 160px;
            padding: 12px 24px; 
            background: rgba(247, 247, 247, 0.275); /* Semi-transparent */
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.436);
            border-radius: 15px;
            cursor: pointer;
            font-size: 0.8rem;
            transition: background 0.3s ease, transform 0.2s ease;
            margin-top: 1em;
            font-size: 1em;
            
        }

        .standard-button a{
            text-decoration: none;
            color: white;
        }

        .started {
            font-size: 1em;
            padding: 12px 4px;

        }



        .standard-button:hover, .submit-button:hover {
            background: rgba(255, 255, 255, 0.649);
            transform: scale(1.05);
        }
        .standard-button:active, .submit-button:active {
            background: rgba(255, 255, 255, 0.426);
            transform: scale(0.95);
        }
/* Long button */
.long-button {
            /* align-self: flex-start; */
            /* white-space: nowrap; */
            max-width: 265px;
            padding: 12px 24px; 
            background: rgba(247, 247, 247, 0.275); /* Semi-transparent */
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.436);
            border-radius: 15px;
            cursor: pointer;
            font-size: 1rem;
            transition: background 0.3s ease, transform 0.2s ease;
            margin-top: 2em;
        }
        .long-button:hover {
            background: rgba(255, 255, 255, 0.649);
            transform: scale(1.05);
        }
        .long-button:active {
            background: rgba(255, 255, 255, 0.426);
            transform: scale(0.95);
        }

        .indented-bullet-list {
            color: rgba(255, 255, 255, 0.671);
            padding-left: 8%;
            font-size: 1.3rem;
            list-style: none;
            
        }

       

        .indented-bullet-list li{
            text-align: left;
            padding-bottom: 2em;
        }

        .indented-bullet-list li::after{
            display: none;
            
        }

        .indented-bullet-list li .bold{
            font-weight: bold;
        }

img.badges {
    width: 5em;
    height: auto;
    margin-right: 1em;
}
    
.badges {
    width: 0.1em;
    height: auto;
    float: left;
    padding: 5px;
    margin-right: 10px;
    margin-top: 5px;
    background: rgba(255, 255, 255, 0.418);
    border-radius: 10px;
    transition: transform 0.5s ease-in-out;
}

.badges.in-view {
    transform: scale(1.1);
}

@media screen and (max-width:1100px){
    .badges {
        width: 4em;
        height: auto;
    }
}
       
/* css for the form */

.contact-wrapper {
    background-color: var(--background-color);
}

.contact-form{
    background-color: var(--contact-background-color);
    padding: 3em;
}

.contact-form h1, h2, h3{
    color: white;
    padding-bottom: 0.5em;
}

.contact-title p, .info{
    color: rgba(255, 255, 255, 0.67);
    padding-bottom: 1em;
    font-size: 1.4em;
}




.form-heading{
    color: rgba(255, 255, 255);
    font-size: 1.2em;
    font-weight: 800;
    padding-bottom: 1em;
}

.contact-split{
    display: flex;
    
}

.contact-left-side{
    flex: 2;
}




.contact-right-side{
    width: 50%;
}

/* name and email sections */ 
.contact-name-email{
    
    display: flex;
    width: 100%;    
    
    gap: 1em;
}

.contact-name-email input, textarea{
    background-color: var(--input-background);
    margin-bottom: 2em;
    border: 1px solid rgba(255, 255, 255, 0.512);
    border-radius: 5px;
    resize: none;
    padding: 1em;
    color: rgba(255, 255, 255, 0.515);
    font-family: Poppins, sans-serif;
    font-size: 1em;
}

textarea{
    height: 10em;
}

.contact-name{
    flex: 1;
    width: 50%;
    
}

.contact-name input{
    width: 100%;
}

.contact-email{
    flex: 1;
    width: 50%;
    
}

.contact-email input{
    width: 100%;
}

.contact-message textarea{
    width: 100%;
}

/*
.contact-left-side .submit-button{
    color: white;
    width: 20%;
    padding: 1em;
    background-color: rgba(255, 255, 255, 0.141);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    border: 1px solid white;
    border-radius: 10px;
    cursor: pointer;
    min-width: 200px;
} */

.contact-right-side{
    margin-left: 2em;
    border-left: 1px solid rgba(255, 255, 255, 0.132);
    padding-left: 2em;
    flex: 1;  
}

.contact-right-side svg {
    width: 30px; /* Adjust size */
    height: 30px;
    fill: white; /* Change icon color */
    margin-right: 1em;
    transition: transform 0.3s ease, fill 0.3s ease;
}

.contact-right-side svg:hover {
    transform: scale(1.5); /* Slight zoom effect on hover */
    fill: rgb(79, 79, 255); /* Change color on hover */
}    

    
@media (max-width:960px){
.contact-name-email {
    display: flex;
    flex-direction: column;
    width: 100%;    
    
    gap: 1em;
}
.contact-name{
    flex: 1;
    width: 100%;
    
}

.contact-email{
    flex: 1;
    width: 100%;
    
}

}

@media (max-width:670px){
    .contact-split{
        display: flex;
        flex-direction: column;
    }

    .contact-right-side{
        border-left: none;
        padding-left: 0;
        margin: 3em 0;
    }
}



/* Media Query for Small Screens */
@media (max-width: 560px) {
    .contact-split {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100% 
    }

    .contact-right-side{
        margin: 1em 0;
        padding: 1em 0;
        
    }
    .contact-right-side p{
        font-size: 0.9em;
        text-align: center;
        
    }

    .contact-right-side .social-media, .contact-right-side p {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .contact-right-side svg {
        margin: 1em 0;
    }

    .submit-button {
        width: 100%;
    }
   
}




footer {
            grid-area: footer;
            
        }


        .footer-wrapper{
    background-color: var(--background-color);
    z-index: -1;
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  padding: 0;
  z-index: 0;
  background-color: rgb(0, 0, 0);
  
  
}

.footer-item {
  
  min-width: 25.33%;
  text-align: left;
  padding: 30px;
  
}

.footer-item p, .footer-bottom{
    font-size: 1em;
    padding: 2px 0;
    color: rgba(190, 190, 190, 0.714);
}

.footer-bottom{
    padding-bottom: 20px;
    text-align: center;
    min-width: 100%;
}

.footer-item i{
    font-size: 1em;
    margin-right: 5px;
    margin-top: 5px;
    position: relative;
    top: 2px;

}

.footer h2{
    color: rgba(255, 255, 255, 0.863);
}


/* Footer for mobile and small screens */
@media (max-width: 768px) {
    .footer {
      flex-direction: column;
    }
    .footer-item {
      min-width: 100%;
      text-align: center;
    }
    .footer-item{
      border: none;
    }
  
    .footer-bottom{
      text-align: center;
      margin: 2em;
    }
  
    .footer p {
      font-size: 1.3em;
      margin: 1em 0;
    }

    .footer-bottom {
        margin: 0;
        padding: 2em;
    }

    
    
  }
.footer a{
    text-decoration: none;
    color: rgba(190, 190, 190, 0.714);
}

.language {
    line-height: 25px;
}

.footer img{
    height: 21px;
    width: auto;
    vertical-align: middle;
    margin-left: 3px;
    
}