@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Syne:wght@400;500;600;700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    overflow-x: hidden;
    font-family: 'Poppins', sans-serif;
}

.navbar {
    display: flex;
     position: fixed;/*change*/
    width: 100vw;/*change*/
    z-index: 9999;/*change*/
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px;
    background-color: #ffffff;
    font-family: 'Poppins', sans-serif;
    
}

.mobile-header, .menu-icon {
            display: none;
}
        
.left-menu , .right-menu {
    display: flex;
    align-items: center;
}

.menu {
    display: flex;
    list-style: none;
   
}
.menu li {
    margin: 0 15px;
    /* top:10px; */
}
.menu li a {
    text-decoration: none;
    color: #000000;
    font-size: 14px;
    margin-left: 26px;
    /* top: 10px; */
}
.menu-item a{
    top:10px;
}
.menu li a:hover{
    color: #07124D;
     text-decoration: underline;
}

.cta-button {
    margin-left: 15px;
}


.cta-button .get-in-touch{
    display: inline-block;
    background-color: #0a1e3f;
    font-size: 16px;
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    /* font-weight: bold; */
    transition: background-color 0.3s ease;
    
}


.menu-item, .robo-kidz, .explore-netpy {
    position: relative; 
}
            

.robo-kidz, .explore-netpy {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
   
}
.robo-kidz li, .explore-netpy li{
    margin: 0 15px;

}
 .explore-netpy a {
    text-decoration: none;
    /* font-weight: bold; */
    font-size: 14px;
    color: #000000; 
    position: relative;
    /* top: 10px; */
}
.robo-kidz li a {
    text-decoration: none;
    font-size: 14px;
    color: #000000 !important; 
    position: relative;
    /* top: 10px; */
}

.kidz-text {
    color: #F36F2C !important;
    display: inline;
}
.robo-kidz li a:hover, .kidz-text:hover{
    cursor: pointer;
     color: #07124D !important;
      text-decoration: underline;
}

 .explore-netpy li a:hover {
     cursor: pointer;
     color: #07124D;
      text-decoration: underline;
}

.menu-item  .learn{
    top: 0px;
}
       
.learn {
    color: #0D47A1;
    position: relative;
}
.learn i {
    margin-left: 5px;
}

      
      
        /***************Learn Section ******************/ 

        .learn-section {
            width: 100%; 
            display: flex;
            justify-content: center;
            align-items: center; 
            padding: 10px 0;
            position: fixed;
            top:4rem;
            background-color: #ffffff;
            z-index: 1;
            }
        
        .learn-popup-content {
            width: 100%;
            max-width: 1200px; 
            margin-left: 24rem;
            margin-top: 20px;
            
        }
        
        .list {
            display: flex;
            flex-direction: column; 
            gap: 12px; 
            text-align: left;
        }
        
        .list a {
            text-decoration: none;
            color: #000000; 
            font-size: 14px;
            padding: 5px;
        }
       
        
        .list a:hover {
            color: #07124D; 
            font-weight: bold;
        }

        /***************Explore Netpy Section ******************/

        .explore-netpy-section{
            width: 100vw;
            background-color: #ffffff;
            position: fixed;
            top:4rem; 
            z-index: 1;
          }

         .explore-popup-content {
            display: grid;
            grid-template-columns: 1fr 1fr auto 1fr 1fr;
            align-items: center;
            justify-content: center;
            text-align: justify;
            /* margin: 60px 191px 0px 301px; */
                /* margin-left: 210px;
                margin-top: 30px; */
            padding: 10px;
            max-width: 1108px;
            margin: auto;

        }
        .content-list-3{
            margin-left: 120px;
        }
        .content-list-1 li,.content-list-2 li, .content-list-3 li {
            padding: 10px;
        }
        .content-list-1, 
        .content-list-2, 
        .content-list-3 {
            list-style: none;
            text-decoration: none;
        }
        
        .content-list-1 li a, 
        .content-list-2 li a, 
        .content-list-3 li a {
            text-decoration: none;
            font-size: 14px;
            color: #000000;
        }
 
        
         .content-list-1 a:hover,
         .content-list-2 a:hover,
         .content-list-3 a:hover {
            color: #07124D; 
            font-weight: bold;
        }
        
        .divider {
            width: 1px;
            height: 50%;
            background-color: #000000;
            margin-top: 3rem;
        }
        
        .icon-list {
            margin-top: 10px;
            margin-left: 40px;
            display: flex;
            flex-wrap: wrap;  
            justify-content: center; 
            gap: 20px;
            
        }
        .icon-list a {
            padding: 5px;
            text-decoration: none;
        }
        .icon-list a img {
           padding-bottom: 10px;
           margin-left: 14px;
          
        }
        
         

 
        
        
    
        
/*=============================================== What we do? Dropdown =====================================*/

 
  
  /* Center the What we do section with equal space on both sides */
  .what-we-do-section {
    position: fixed;
    top:4rem; 
    width: 100vw;  
    background-color: #ffffff;  
    display: flex;
    justify-content: center;  
    align-items: flex-start; 
    padding: 20px 0;  
    box-sizing: border-box;
    z-index: 1;
    left: 0; 
    right: 0; 
    margin: 0 auto; 
    height: 40%;
}

.columns-container {
   
    display: flex;
    flex-wrap: nowrap;
    justify-content: center; 
    align-items: flex-start;
    gap: 60px; 
    max-width: 1200px; 
    width: 100%; 
    margin: 0 auto; 
    padding: 0; 
    position: relative;
    left: 0; 
    transform: translateX(0); 
}

.column {
    margin: 0 auto;
}

#firstColumn {
    flex: 0 0 12rem; 
}

#secondColumn {
    flex: 0 0 20rem; 
    margin-left: 2rem;
}

#thirdColumn {
    flex: 1; 
    min-width: 250px; 
    margin-left: 2rem;
}

.vertical-separator {
    width: 1px;
    background-color: #000;
    height: 70px; 
    margin-top: 33px;
    align-self: flex-start; 
}

/* .vertical-separator {
    width: 2px;
    background-color: gray;
    height: auto;
} */

@media (max-width: 900px) {
    .columns-container {
        flex-direction: column; 
        align-items: center;
    }

    .vertical-separator {
        display: none; 
    }
}

  
  .hover-item {
    cursor: pointer;
    font-size: 14px;
    padding: 10px;
    /* transition: color 0.3s ease; */
    list-style-type: none;
    
  }
  .hover-item:hover, .hover-item.default-active {
    color: #07124D;
    font-weight: bold;
  }
  
  
  .subcategory-hover {
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
    padding: 10px;
    transition: color 0.3s ease;
    list-style-type: none;
  }
  .subcategory-hover:hover {
    color: #07124D;
    font-weight: bold;
  }
  
  
  .blue-text {
    color: #07124D;
    font-weight: bold;
  }
  
  
  .heading {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    padding-bottom: 5px;
    margin-top: 0.5rem;
    text-align: left;
  }
  
  
  .paragraph {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 12px; 
    text-align: left;
  }
  
 
  

  

/*=============================================== Robokidz =====================================*/


.robo-kidz-section {
    position: fixed;
    top:4rem;
    padding: 20px;
    z-index: 50;
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: auto;
    z-index: 1;
  
}


/*=============================================== Responsive =====================================*/



/* Style for menu items */
.menu-item-responsive {
    display: none; 
    background: white;
    padding: 10px;
    cursor: pointer;
    transition: background 0.3s ease;
}


.menu-item-responsive.active {
    background: #091B52 !important; 
    color: white !important;
}


.menu-item-responsive.active a {
    color: white !important;
}

/* Chevron icon color */
.menu-item-responsive.active i {
    color: white !important;
}

/* Submenu styling */
.submenu {
    list-style: none;
    display: none;
    width: 100%;
}




/* Submenu items */
.submenu li {
    padding: 10px 15px;
    font-size: 14px;
    color: #000000;
    transition: background 0.3s ease;
    padding-left: 90px !important;
}

/* Hover effect for submenu items */
.submenu li:hover {
    background: #E2E6F3 !important;
    color: #07124D;
    font-weight: bold;
}

/* Default and dynamic selected submenu item */
.selected-submenu-item {
    background-color: #E2E6F3 !important;
    font-weight: bold;
    color: #07124D;
}


/* Hamburger and X icon */
.menu-toggle {
    display: none;
    
    cursor: pointer; 
    
}
.menu-toggle .fa-xmark {
    font-size: large;
    display: none;
}
.menu-toggle.active .fa-bars {
    font-size: large;
    display: none;
    
}
.menu-toggle.active .fa-xmark {
    display: inline;
}



/* Popup container */
.popup-container {
    display: none; 
    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgb(240, 240, 240);
    border-radius: 6px;
    border: 0.1px solid #AFBBFF;
    width: 80%;
    max-width: 350px;
    text-align: center;
    z-index: 1;
}

/* Popup list items */
.popup-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.popup-content li {
    padding: 12px 0;
    font-size: 13px;
    width: 100%; 
    display: block; 
    text-align: center; 
    cursor: pointer; 
   
}

/* Background change on hover */
.popup-content li:hover {
    background: #07124D; 
    color: #ffffff;
    
}




/* Close button */
.close-popup {
    position: absolute;
    top: -35px;
    right: 15px;
    font-size: 25px;
    cursor: pointer;
}


.follow-us {
    display: none;  
    text-align: center;
    padding: 15px 0;
    margin-top: 20px;
}

.follow-us span {
    display: block;
    color: #000000;
    font-size: 13px;
}

.social-icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 5px; 
    justify-content: center;
    align-items: center;
    max-width: 200px; 
    margin: 0 auto;
    margin-top: 10px;
   
}

.social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    text-decoration: none;
    margin-left: 0px !important;
    
}
.social-icons a i {
    color: #07124D;
    font-size: 16px;
    padding: 10px;
    
}


.fa-chevron-up {
    margin-left: 160px;
}


@media screen and (max-width: 950px) {
   
    .what-we-do-section,
    .learn-section,
    .robo-kidz-section,
    .explore-netpy-section {
        display: none !important; 
    }
    #learn-for-desktop{
        display: none;
    }
    .navbar {
        overflow-x: hidden;
          position: static;  
        margin: 0px 0px;
    }
    .fa-solid, .fas {
        font-weight: 900;
        /* margin-top: -10px; */
        font-size: 17px;

    }
    .dropdown-container{
        display: none;
    }
    .logo img {
        height: 30px;
    }
    .right-menu{
        display: none;
    }
    .menu-item-responsive{
        display: block;
        z-index: 1000;
        padding-left: 30px !important;
    }
    #small-it-services, #small-cloud-solutions{
        padding-left: 30px !important;
        /* background-color: red !important; */
    }
  
    .fa-solid, .fas {
        font-weight: 900;
        font-size: 17px;
    }
    .menu-item-responsive.active + .submenu {
        display: block;
        z-index: 1;
    }

    .menu-item-responsive li {
        display: flex;
        flex-direction: space-between;
    }


    .fas.fa-chevron-down{
        opacity: 1;
        display: block;
        /* margin-left: 125px; */
        margin-top: -14px;
        display: flex
;
        flex-direction: row-reverse;
        padding-right: 3rem !important; 
    }
    .menu-item:hover .toggle-icon{
        color: #ffffff !important;
    }
   
    .menu {
        width: 100%;
        display: none;
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        text-align: justify;
        padding: 20px 0;
        overflow-x: hidden;
        background-color: #ffffff;
       
    }
    .menu.active {
        display: flex;
        z-index: 1;
        margin-top: -5px;
    }
    .menu li {
        width: 100%;
        padding: 14px;
        color: #000000;
    }
    .menu li:hover{
        background-color:#07124D;
        /* color: #07124D; */
        font-weight: bold;
    }
    .menu li a{
        font-weight: normal;

    }
    .menu li , .robo-kidz{
        font-weight: normal;
        margin-left: 0px;
        font-size: 14px;
    }
    .menu-toggle {
        display: flex; 
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 35px; 
        top: 24px; 
        font-size: 48px;
        cursor: pointer;
    }
    .menu-item a {
        display: block;
        width: 100%;
        
    }
    
    @media screen and (max-width: 370px) {
        .menu li{
            font-size: 10px;
        }
        .menu li a{
            font-size: 10px;
            margin-left: 0px;
    
        } 
    }
   

    @media screen and (max-width: 950px) {
        .menu li a:hover{
            text-decoration: none;
        }
        
        .menu-item a:hover {
            color: #FFFFFF !important;
        }
    }
    .menu-item a:hover {
        
        color: #ffffff ; 
    }
    .menu-item-responsive:hover, 
.menu-item-responsive:hover a {
    
    color: #ffffff !important;
}

.menu-item-responsive:hover i {
    color: #ffffff !important;
    display: flex;
    flex-direction: row-reverse;
    padding-right: 3rem;
}
.blur-effect {
    opacity: 0.3; 
}

.follow-us{
    display: block;
    background-color: white !important;
}


}


@media screen and (min-width:940px) and (max-width: 1224px) {
   
    .navbar {
        padding: 10px 7px;
        font-size: 10px;
      
        /* margin: 0px 20px; */
        
    }
    .logo img {
        height: 30px;
    }
    .cta-button .get-in-touch {
        padding: 6px 10px;
        font-size: 14px;
    }
    .menu li {
        margin: 0 7px;
    }
    .menu li a {
        font-size: 14px;
     margin-left: 0px;
    }
    .columns-container {
        gap: 0px;
    }
    .content-list-3{
        margin-left: 40px;
    }
    .explore-popup-content {
        padding: 10px 40px;
    }

}
@media screen and (min-width:1225px) and (max-width: 1330px) {
    .navbar{
        /* margin: 0px 10px; */
        padding: 11px 9px;
        
    }
    .menu li {
        margin: 0 0px;
    }

}