/* ============ Toggle Button  =========== */
 .toggle-button {
            padding: 0px 15px; 
            border: 2px  solid rgba(0,0,0,0.15) ;
            opacity: 0.5 px;
            border-radius: 5px; /* Rounded corners */
            color: black; /* Text color */ 
            cursor: pointer;
            background : none;
        } 

    .toggle-button:active {
    border-radius: 5px; /* Change the value to your desired border radius */
    border-color: rgba(0, 0, 0, 0.5); /* Darker border color */
    opacity: 1; /* Full opacity */
}

          /* ============ Solution Div  =========== */

.grid-container {
            display: grid;
            grid-template-columns: repeat(3, 250px);
            grid-row-gap: 50px;  
            grid-column-gap: 70px;
	          margin-bottom:3%;
          	width: 120px;  
            height: 480px;
        }

        .grid-item {
            position: relative;
            border: 1px solid #ccc;
            border-radius: 16px;
            overflow: hidden;
            cursor: pointer;
	          border: 2px solid purple; 
        }

        .grid-item img {
            width: 100%;
					  margin-top: 25%;
					margin-left:5%;
            transition: transform 0.3s ease-in-out;
        }

        .grid-item:hover img {
            margin-top: -2%;
        }

        .grid-item a {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .grid-item h3 {
            position: absolute;
				  	width: 100%;
            top: 30%; 
            transform: translate(-50%, -50%);
			  		color: black;
            z-index: 3;
            margin: 0; 
				   	margin-left: 50%;
            text-align: center;
            font-size: 32px; 
            padding: 10px;
            border-radius: 5px;
        }


  /* Add colors to individual divs */
        .grid-item:nth-child(1) {
            background-color: #ff6347; /* Coral */
        }
        
        .grid-item:nth-child(2) {
            background-color: #66cc99; /* Green */
        }
        
        .grid-item:nth-child(3) {
            background-color: #3498db; /* Blue */
        }
        
        .grid-item:nth-child(4) {
            background-color: #e74c3c; /* Red */
        }
        
        .grid-item:nth-child(5) {
            background-color: #ffb400; /* Orange */
        }
        
        .grid-item:nth-child(6) {
            background-color: #9b59b6; /* Purple */
        }





 /* ============ Consulting Div  =========== */

.grid-container2 {
            display: grid;
            grid-template-columns: repeat(3, 250px);
            grid-row-gap: 50px;  
            grid-column-gap: 70px;
	          margin-bottom:3%;
	          width: 120px;  
            height: 480px;
        }

        .grid-item2 {
            position: relative;
            border: 1px solid #ccc;
            border-radius: 16px;
            overflow: hidden;
            cursor: pointer;
			   		border: 2px solid purple; 
					
        }

        .grid-item2 img {
            width: 100%;
					margin-top:-15%;
            transition: transform 0.3s ease-in-out;
        }

        .grid-item2:hover img {
            margin-top: -28%;
        }

        .grid-item2 a {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .grid-item2 h3 {
            position: absolute;
				  	width: 100%;
            top: 30%; 
            transform: translate(-50%, -50%);
			  		color: black;
            z-index: 3;
            margin: 0; 
				   	margin-left: 50%;
            text-align: center;
            font-size: 32px; 
            padding: 10px;
            border-radius: 5px;
        }

 /* Add colors to individual divs */
        .grid-item2:nth-child(1) {
            background-color: #ff6347; /* Coral */
        }
        
        .grid-item2:nth-child(2) {
            background-color: #66cc99; /* Green */
        }
        
        .grid-item2:nth-child(3) {
            background-color: #3498db; /* Blue */
        }
        
        .grid-item2:nth-child(4) {
            background-color: #e74c3c; /* Red */
        }
        
        .grid-item2:nth-child(5) {
            background-color: #ffb400; /* Orange */
        }
        
        .grid-item2:nth-child(6) {
            background-color: #9b59b6; /* Purple */
        }









body {
	font-family: 'Montserrat', sans-serif; 
}


.divv{
  height: 130px;
  width:220px;  
  margin-left:13%; margin-top:3%;
	overflow: hidden;
}

.pic{
    position: fixed;
    height: 130px; 
    width:240px; 
    display:none;
    overflow: hidden; 
    transform: scaleX(1);
    transition: all 1s ease-in-out 1s;
   	border-radius: 16px;
	  border: 1px solid #008080;
}

            /* <!--  ==========    Social icons    ===========  -->  */
.social{
  align-items: center;
  justify-content: center;
  position: relative;
  width: 450px;
	margin-top:20%;
	margin-left:10%;
}
.social ul li a{
	    padding: 10px;
}
.social ul{
	
}
.social ul li{
	display:inline-block;

}
            /* <!--  ==========    MAin Navigation Menu bar     ===========  -->  */

.overlay {
	
   height: 100%;
   width: 0;
   position: fixed;
   z-index: 5;
   top: 0;
   right: 0;
   background-image: repeating-linear-gradient(45deg, #f4f4f4 0, #f4f4f4 1px, #fafafa 0, #fafafa 50%);
	
   background-size: 10px 10px; 
   overflow-x: absolute;
   transition: 0.7s;  /* backdrop-filter: blur(15px);  */
   font-family: sans-serif; 
}

.overlay-content {
  position: relative;
  top: 12%;
  width: 100%;

  text-align: left; 
	color: #ffffff; 
 
}

.overlay a {
  padding: 8px 50px;
  text-decoration: none;
  font-size: 24px;
  color: #818181; 
	font-weight:500;
  display: block;
  font-family:sans-serif; 
}

.overlay a:hover, .overlay a:focus {
  color: red;
}

.overlay .closebtn {
  position: absolute;
	width: 2%;
  top: 28px;
  left: 300px;
  font-size: 28px;
}

                 /* <!--  ==========    Hover on Service open sidebar    ===========  -->  */
.service {
  height: 100vh;
  width: 0;
  position: fixed;
  z-index: 5;
  top: 0;
  left: -20%;
  background-color: #ffffff;
  transition: 0.5s;   
}

.service-content { 
  position: relative;
  top: 10%;
  margin-left: 25%;
  width: 100%;
  text-align: left; 
	color: black;   
}

.service a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: white;
  display: block; 
  transition: 0.3s; 
}

                /* <!--  ==========    Service's Sidebar items    ===========  -->  */
* {
    box-sizing: border-box;
    text-decoration: none; 
}

.column { 
    float: left;
    margin-left: -70px;
    width: 28.33%;
    padding: -10px;
    height: 100px;
}

ul {
    list-style-type: none;
    text-decoration: none;
}

                /* <!--  ==========   Service's Sidebar items (Icons and NAmes)   =========  -->  */
.inside-sub-li {
	  list-style-type: none;
    margin-left: 45px;
    position: relative;
    cursor: pointer;
    padding: 10px;
	  color: #818181;
}

/* heading icon */
.inside-head-li {
    margin-left: -28px;
    position: relative;
    cursor: no-drop;
    padding: 10px;
     list-style-type: none;  
	  color: #818181;
	  width:260px;  
}
.inside-head-li a {
    font-size: 18px;  
    font-family: Montserrat, sans-serif;
    font-weight: 400;
	  color: #818181;
}

.headicon-margin {
    margin-bottom: -10px;
}


.inside-sub-li:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -5px; 
    background-color: black;  
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.4s ease-in-out 0s;  width: 260px;
}

.inside-sub-li:hover:before {
    visibility: visible;
    transform: scaleX(1);
     width: 260px;
}

.inside-sub-li:hover {
    font-weight: 600;
}

.inside-sub-li a {
    font-size: 18px;  
    color: #818181;
	font-weight:400;
    font-family: verdana;
}

.inside-sub-li a:hover {
    color: black;
}

.icon-margin {
    margin-bottom: -10px;
}

   /* <!--  ==========    Headings in Service Sidebar      ===========  -->  */

.inside2-sub-li {
	  list-style-type: none;
    margin-left: 45px;
    position: relative;
    cursor: pointer;
    padding: 10px;
	  
}

/* heading icon */
.inside2-head-li {
    margin-left: -28px;
    position: relative;
    cursor: no-drop;
    padding: 10px;
     list-style-type: none;   width:260px;  
}
.inside2-head-li a {
    font-size: 18px;  
    color: black;
    font-family: Montserrat, sans-serif;
    font-weight: bold;
}

.headicon-margin {
    margin-bottom: -10px;
}


.inside2-sub-li:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -5px; 
    background-color: black;  
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.4s ease-in-out 0s;  width: 260px;
}

.inside2-sub-li:hover:before {
    visibility: visible;
    transform: scaleX(1);
     width: 260px;
}

.inside2-sub-li:hover {
    font-weight: 500;
}

.inside2-sub-li a {
    font-size: 18px;  
    color: black;
    font-family: verdana;
}

.inside2-sub-li a:hover {
    color: black;
}

               /* <!--  ==========    Dividers in Service Sidebar      ===========  -->  */

 
.sb:hover {
  cursor: help;
}
.sb:hover > small {
  opacity: 0.8;
  transform: translate(-50%, -75%);
} 

.section-break {
  background-color: transparent;
  border: 0;
  border-top: 1px solid #c8c8c8;
  height: 1px;
  margin: 2rem auto;
  text-align: center;
  width: 280%;
  margin-left: -165%;
	
}   
.section-break:before {
  background-color: none;
  color: #959595;
  display: inline-block;
  font-size: 20px;
  left: 50%;
  letter-spacing: 0;
  line-height: 1;
  text-indent: -1px;
  text-rendering: geometricPrecision;
  transform: translateY(-53%);
  width: 15px;
}
                       /*   Ended Dividers of Service Sidebar  */

     /* <!--  ==========    Hover on Solution open sidebar    ===========  -->  */

 .solution {
   
  height: 100vh;;
  width: 0;
  position: fixed;
  z-index: 5;
  top: 0;
  left: -20%;
  background-color: #F5F5F5; 
  transition: 0.5s;  
}

.solution-content { 
	
  position: relative;
  top: 10%;
  margin-left: 25%;
  width: 100%;
  text-align: left; 
	color: black;  

}

.solution a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #ffffff;
  display: block; 
  transition: 0.3s;
}
  

               /* <!--  ==========    Solution's Sidebar items   ===========  -->  */
body
{ 
  font-family: 'RobotoDraft', 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
}

*
{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

h5
{
  margin-top: 25%;
  font-size:1.6em;
  font-weight:700;
}

                      
     /* <!--  ==========    Hover on consulting open sidebar    ===========  -->  */

 .consulting {
   
  height: 100vh;;
  width: 0;
  position: fixed;
  z-index: 5;
  top: 0;
  left: -20%;
  background-color: #F5F5F5; 
  transition: 0.5s;  
}

.consulting-content { 
	
  position: relative;
  top: 10%;
  margin-left: 25%;
  width: 100%;
  text-align: left; 
	color: black;  

}

.consulting a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #ffffff;
  display: block; 
  transition: 0.3s;
}
  

               /* <!--  ==========    consulting's Sidebar items   ===========  -->  */
body
{ 
  font-family: 'RobotoDraft', 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
}

*
{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

h5
{
  margin-top: 25%;
  font-size:1.6em;
  font-weight:700;
}





 
 /* Scroller in Navigation box */
.scrollbarr
{ z-index: 5;
	margin-left: 30px;
	float: left;
	height: 100vh;
	width: 98%;
	background: #F5F5F5;
	overflow-y: scroll;
	  overflow-x: hidden;
	margin-bottom: 25px;
}

.force-overflow
{
	z-index: 5;
	min-height: 450px;
} 


@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}


                 /* <!--  ==========    Social Icons      ===========  -->  */