*, body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
 
}
:root{
  font-size: 16px;
}
body{
  background-color: #343A40;
}
.registerInput p,#messageError{
  color: red;
  font-weight: bold;

}
/* Navigation */
/* Navigation */
.navigation-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #343A40;
  padding: 0 15px;
  height: 60px;
  display: flex;
  padding-left: 40px;
  padding-top: 20px;
  padding-bottom: 20px;
  align-items: center;
  z-index: 1000; 
  border-bottom: 1px solid gray;
  /* Set a high z-index to ensure the navigation bar stays on top */
}
.active{
  border-bottom: white;
}
.active:hover{
  border-bottom: #343A40;
}
main {
  background-color: #343A40;
  /* overflow-x: hidden; */
  width: 100%;
  height: 200vh;
  margin-top: 60px; /* Adjusted margin for the fixed navigation bar */
}
  
nav {
  /* position: fixed; */
  width: 100%;
  max-width: 1700px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 1000px;Set a high z-index to ensure the navigation bar stays on top */

  /* z-index: 1; */
}
.sectionOne{
  width: 100%;
  height: auto;
  padding-top: 40px;
}
.logo-container > a {
  color: #858792;
  text-decoration: none;
  font-weight: 700;
  font-size: 40px;
  justify-content: center;
  font-weight: bold;
  padding-left: 58px;
  /* background-color: white; */

  
}
.navigation-items {
  display: flex;
  gap: 40px;
}
.navigation-items > a {
  color: ghostwhite;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  transition: .4s ease-in-out;
  transition-timing-function: ease-in-out;
}
#active{
border-bottom: white;
color: white;
box-shadow: 0px 1px white;
font-weight: bold;
font-size: 18px;
}
#active:hover{
  box-shadow: 0px 1px #343A40;
}
.link:hover {
  color: white;
  border-bottom: 1px solid white;
  font-weight: bold;
font-size: 18px;
}
.hamburger {
  display: none;
  font-size: 20px;
  font-weight: 800;
  color: white;
}
main{
  background-color:#343A40;
  overflow-x: hidden;
  width: 100%;
  height: auto;
  
}


/* Style for large screens and above */
.mainconatiner {
display: flex;
justify-content: space-between;
padding-left: 100px;
padding-right: 100px;
}

.mainone {
flex: 1;
padding-top: 20px;
box-sizing: border-box;
/* border: 1px solid white; */
}

.ImageContainers {
flex: 1;
text-align: center;
}

.ImageContainers img {
  width: 100%; /* Make the image fill its container */
  max-width: 644px; /* Limit the image width */
  height: auto;
  /* object-fit: cover; */
  height: 100%;
  z-index: 1;
}


.mainone .hithere{
  background-color: white;
  width: auto;
  /* height: 32px; */
  border-radius: 5px;
  border: none;
  outline: none;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 30px;
  padding: 10px;
  padding-bottom: 10px;
  cursor: pointer;
  transition-timing-function: ease-in-out;
  box-shadow: 1px 1px 3px 4px gray;
 
  

}

.mainone .hithere:hover{
  padding: 11px;
  box-shadow: 1px 1px 3px 3px white;
}
.mainconatiner .mainone .descriptionone > p{

font-size: 42px;
font-weight: bold;
color: white;


}

.mainconatiner .mainone .descriptiontwo{
margin-top: 30px;
}
.mainconatiner .mainone .descriptiontwo > p{
color:#858792;
font-size: 25px;
font-weight: bold;
}
.buttoncontainer{
margin-top: 40px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
}
.buttoncontainer .buttonone {
background-color: #5B69E2;
display: flex;
padding: 15px;
border: none;
outline: none;
justify-content: center;
align-items: center;
border-radius:5px;
transition-timing-function: ease-in-out;
box-shadow: 1px 1px 1px 1px white;

}
.buttoncontainer .buttonone:hover{
  padding: 16px;

}
.buttoncontainer .buttonone .one{
color: white;
font-weight: bold;
margin-right: 5px;
font-weight: bold;
font-size: 15px;

}

.buttoncontainer .buttonone .fa{
color: white;
margin-left: 10px;
margin-top: 3px;
  
}


.buttoncontainer .buttonones {
  background-color:white;
  display: flex;
  padding: 15px;
  border: none;
  outline: none;
  justify-content: center;
  align-items: center;
  border-radius:5px;
  cursor: pointer;
  box-shadow: 1px 1px 3px 3px #8888;
  text-decoration: none;
  outline: none;
 
}

.buttoncontainer .buttonones:hover{
padding: 16px;
}
.buttoncontainer .buttonones .ones{
  color: #5B69E2;
  font-weight: bold;
  margin-right: 5px;
  font-weight: bold;
  font-size: 15px;
    
  }
  
  .buttoncontainer .buttonones .fa{
    color: #5B69E2;
    margin-left: 10px;
    margin-top: 3px;
      
    }
    .socialMedia{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 40px;
      margin-bottom: 20px;
    }
    .socialMedia .twitter > a{
      text-decoration: none;
      cursor: pointer;
      transition-timing-function: ease;
    }

    .socialMedia .twitter > a:hover{
font-size: 20px;
background-color: #5B69E2;
    }
    .socialMedia .twitter  a>p{
      color: white;
      margin-bottom: 30px;
      font-size: 15px;
      font-weight: bold;
      transition-timing-function: ease;

    }

.twitter a>p:hover{
/* background-color: #5B69E2; */
border-bottom: 2px solid white;
font-size: 16px;

    }
   .fa-twitter,.fa-linkedin,.fa-github,.fa-facebook{
      padding: 10px;
      font-size: 50px;
      width: 40px;
      text-align: center;
      text-decoration: none;
      /*margin: 5px 2px;
      */background-color: white;
      color: black;
      border-radius:5px ;
   
}
    .twitter{
       text-align: center;
    }

    .maintwo{
      flex: 1;
      /* width:628px; */
      height: 100%;
      /* position: relative; */
      border: 1px solid white;
      background-color: wheat;
 
    
  }
    .maintwo .ambroiseImage {
      /* width: 100%; */
      /* height: 100%; */
      cursor: pointer;
    }
    
    .maincontainersectionTwo{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 10px;
      width: 100%;
      padding-top: 50px;
      padding-bottom: 30px;
      background-image: linear-gradient(to top, #1F2937, #4F46E5);
      padding-left: 100px;
      padding-right: 100px;
      /* border: 1px solid white; */
      height: auto;
      cursor: pointer;

    }
    
    .maincontainersectionTwo .aboutMeImagecontainer{
      flex:1;
      /* border: 1px solid white; */
      margin-bottom: 20px;
      height: 600pxpx;
      cursor: pointer;


    }
    .maincontainersectionTwo .aboutMeImagecontainer .imageWeb{
     width: 100%;
     height: 100%;
     cursor: pointer;


    }
  
    .maincontainersectionTwo .aboutmeContainer{
      flex: 1;
      position: relative;
      /* width: 640px; */
      /* border: 1px solid white; */
      padding-top: 20px;
      padding-top: 20px;
      /* padding-bottom: 10px; */
      margin-bottom: 20px;
      height: auto;
      cursor: pointer;

    }

img
.aboutmeContainer{
height: auto;
cursor: pointer;

}
    .aboutmeContainer .aboutme{
      color: #858792;
      font-size: 30px;
      font-weight: bold;
      margin-bottom: 30px;
    }
     .problemsolution{
      color: #5B69E2;
      font-size: 32px;
      font-weight: bold;


    }
    .professional{
     
        color: white;
        font-size: 32px;
        font-weight: bold;
    }
    .digitalproduct{
      color: white;
      font-size: 32px;
      font-weight: bold;
      padding-bottom: 30px;

    }
    .webdesign{
      color: #858792;
      font-weight: bold;
      font-size: 20px;
      margin-bottom: 30px;
    }
    .design{
      display: flex;
      flex-direction: column;
      gap: 20px;
      flex-wrap: wrap;
      margin-bottom: 30px;
    }
    .design .designd > p{
      margin-bottom: 20px;
    }
    .design .designd > p .spanone{
     color: #858792;
     margin-right: 20px;
     font-size: 20px;
     font-weight: bold;
    }
    .design .designd > p .spantwo{
      color: white;
      
      font-size: 20px;
     }
     .design .mediaConatiner{
      display: flex;
      flex-direction: row;
      /*flex-wrap: wrap;
      *//*gap: 5px;
      */width: 100%;
      max-width: 420px;
      background-color: #343A40;
      border-radius:  3px;
      height: auto;

}

.mediaconatinerContent{
padding: 10px;
display: flex;
flex-direction: row;
/* flex-wrap: wrap; */
align-items: center;
text-align: center;

}
.mediaconatinerContent .mediaConatainermail{
display: flex;
align-items: center;
text-align: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 100%;
background-color: #5B69E2;
color: white;
margin-right: 5px;

}


.mediaContainerp >p{
padding: 2px;
color: white;
}

.serviceContainer{
width: 100%;
padding-left: 100px;
padding-right: 100px;
padding-top: 30px;
padding-bottom: 30px;
height: auto;
}
.serviceContainer >.Servicep{
font-size: 30px;
color: #858792;
margin-bottom: 30px;
font-weight: bold;

}
.serviceContainer >.Servicep1{
font-size: 32px;
color: white;
margin-bottom: 30px;
font-weight: bold;

}
.gridContainer{
display:grid;
grid-template-columns:repeat(4, 1fr);
grid-gap:20px;
/* grid-auto-rows:minmax(400px, auto) ; */
justify-content: space-between;
}
.gridBox {

background-color: #2A2C39;
color: white;
border-radius: 10px;
padding-left: 20px;
padding-top: 20px;
box-shadow: 0px 0px 30px black;
cursor: pointer;
transition-timing-function:ease-in-out;
/* justify-content: space-around; */

}
.gridBox:hover{
  transition-timing-function:ease-in-out ;
  box-shadow: 0px 0px 40px rgb(209, 206, 206);
  transition: 1s;
}

/* Apply this style to each grid item */

.gridBox img{
color: white;
width: 56px;
height: 56px;
margin-bottom: 20px;

}
.gridBox h1{
margin-bottom: 20px;
font-size: 32px;
}
.gridBox p{
color: white;
margin-bottom: 30px;
}
.gridBox >p >.spanone1{
color: #858792;
margin-right: 25px;
font-size: 13px;
font-weight: bold;
}
.gridBox > p >.spantwo2{
color: #858792;
margin-right: 20px;
font-size: 20px;
}

.skills{

display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
padding-top: 30px;
background-image: linear-gradient(to top, #1F2937, #4F46E5);
padding-left: 100px;
padding-right: 100px;
/* border: 1px solid white; */
margin-top: 20px;
padding-bottom: 30px;

/* margin-bottom: 20px; */
}

.SkillsContainerOne >h1{
color: #858792;
font-size: 30px;
font-weight: bold;
margin-bottom: 30px;
}

.SkillsContainerOne >.explore{
color: white;
font-size: 32px;
font-weight: bold;
margin-bottom: 30px;
}

.SkillsContainerOne .findingSkills{
  margin-top: 30px;
 
  margin-bottom: 30px;

}
.SkillsContainerOne .findingSkills p{
  color: #858792;
  font-size: 20px;
  font-weight: bold;
}
.exploreMoreSkilss button{

  padding-left: 10px;
  padding-right:10px;
  padding-bottom: 10px;
  padding-top: 10px;
  margin-bottom: 30px;
  color: #5B69E2;
  border-radius: 5px;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  transition-timing-function: ease-in-out;
  box-shadow: 1px 1px 3px 3px gray;
}

.exploreMoreSkilss button:hover{
  padding: 11px;

}
.exploreMoreSkilss button >.skillexploreMore{
margin-right: 5px;
}
.SkillsContainerTwo{
display: grid;
grid-template-columns:repeat(4, 141px);
grid-auto-rows:minmax(189px, auto) ;
grid-gap:40px;
/* padding: 10px; */
padding-top: 20px;
/* justify-content: space-between; */
/* padding-left: 100px; */
}
.skills .SkillsContainerTwo .skill1{
border: 1px solid white;
padding: 5px;
text-align: center;
border-radius: 20px;
box-shadow: 0px 0px 40px black;
transition: 1s;

}
.skills .SkillsContainerTwo .skill1:hover{
  box-shadow: 0px 0px 50px white;
  cursor: pointer;
  transition-timing-function:ease-in-out;
  transition: 1s;
}
.skill1 img{
width: 57px;
height: 47px;
margin-bottom: 20px;

}.skill1 p{
color: white;
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
}
.skill1 button{
padding: 10px;
background-color: #343A40;
border: none;
outline: none;
border-radius: 10px;
font-size: 16px;
font-weight: bold;
color: white;
margin-top: 10px;
width: 113px;
cursor: pointer;
box-shadow: 1px 1px 3px 3px #8888;
transition-timing-function: ease-in-out;


}

.skill1 button:hover{
  padding: 12px;
}

.projectSection{

width: 100%;
padding-top: 30px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 30px;
/* border: 1px solid white; */
background-color: #2A2C39;
margin-bottom: 30px;
}
.projectSection .awesome p{

color: #858792;
font-size: 30px;
font-weight:bold;
margin-bottom: 30px;
}
.projectSection .awesome  h1{
font-size: 32px;
font-weight: bold;
margin-bottom: 30px;

color: white;
}
.sectionFour .projectOne{
/* padding-top: 30px; */
/* text-align: center; */
/* border: 1px solid white; */
border-radius: 10px;
/* margin-bottom: 30px; */


}
.projects{
display: grid;
grid-template-columns: repeat(3,500px);
grid-auto-rows:minmax(312px, auto) ;
justify-content: space-between;
grid-gap: 20px;


}
.projects .projectOne img{
width: 100%;
height: 270px;
box-shadow: 0px 0px 50px black;
cursor: pointer;
transition-timing-function:ease-in-out ;
}

.projects .projectOne img:hover{
  box-shadow: 0px 0px 50px rgb(209, 206, 206);
  cursor: pointer;
  transition-timing-function:ease-in-out ;
}


.projectOne .bbhcs{
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;

margin-top: 30px;
}
.projectOne .bbhcs p{
font-size: 14px;
font-weight: bold;
color: white;

}

.projectOne .bbhcs button{
 text-align: center; padding: 5px; 
font-size: 14px; 
color: white; 
background-color: #858792;
border: none;
outline: none; 
border-radius: 5px; 
width: 120px;
cursor: pointer;
box-shadow: 1px 1px 3px 3px gray;
}
.blogSection,#blogSection{
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-left: 100px;
padding-right: 100px;
/* border: 1px solid white; */
padding-top: 30px;
padding-bottom: 20px;
justify-content: space-between;
background-color: #2A2C39;
margin-bottom: 30px;
margin-top: 30px;
gap: 20px;
box-shadow: 0px 0px 40px black;
transition: 1s;
}

.blogSection:hover{
  box-shadow: 0px 0px 50px rgb(209, 206, 206);
  cursor: pointer;
  transition-timing-function:ease-in-out ;


}
.waitUntill{
  width:100%;
}
.blogSection .blogpartOne img{
  width: 300px;
  /*Maketheimagefillitscontainer*/height: 350px;
  z-index: 1;
  background-color: white;
  border: 1px solid white;
  border-radius:5px ;
  cursor: pointer;
}
.blogSectionmain{
padding-left: 100px;
padding-right: 100px;
/* border:1px solid white; */
width: 100%;
}

.blogpartTwo{
  /* border: 1px solid white; */
flex: 1;
padding: 10px;

}
.blogpartOne ,.blogpartThree{
  flex: 1;
}
.error,#subscriptionError {
  color: red;
  font-size: 20px;
  margin-top: 5px;
  font-weight: bold;
}
#subscriptionEmail{
  color: black;
  font-weight: bold;
  font-size: 20px;
}
.blogpartTwo p >.businessspanone{
color: white;
margin-right: 10px;
font-size:20px;
font-weight: bold;
}
.blogpartTwo p >.businessspantwo{
color: white;
margin-right: 10px;
font-size:16px;
color: #858792;

}
.blogpartTwo .blogP{
margin-bottom: 20px;
}
.blogpartTwo .waitUntill >p{
color: white;
/* font-size: 1px; */
font-weight: bold;
}
.waitUntill{
  /* width: 100%; */
}
.until{
color: white;
font-size: 17px;
font-weight:500;
letter-spacing: 2px;
line-height: 25px;
}
.likeComment{
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-bottom: 20px;
margin-top: 20px;
}
.likeComment >p{
color: #858792;
}
.blogpartThree{

display: flex;
flex-direction: row;
text-align: center;
justify-content: center;
align-items: center;
}
.blogpartThree button{
background-color: #343A40;
color: #858792;
border-radius: 20px;
width: 162px;
height: 56px;
border: none;
outline: none;
border: 1px solid #858792;
font-size: 15px;
font-weight: bold;

cursor: pointer;
transition-timing-function: ease-in-out;

}

.blogpartThree button:hover{

  width: 165px;
  box-shadow: 1px 1px 3px 3px gray;
  }
.latestTips p{
color: #858792;
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
}
.latestTips h1{
font-size: 30px;
color: white;
font-weight: bold;
margin-bottom:30px;
}

.ContactUscontainer{
  background-color: #2A2C39;
  /* width: 100%; */
  padding-left: 100px;
  padding-right: 100px;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  /* border: 1px solid white; */
  grid-gap: 30px;
  height: auto;
  padding-top: 50px;
  padding-bottom: 50px;
}

.registermain{
  display: flex;
  flex-direction: row;
  gap: 100px;
  
  /* justify-content: space-between; */
/*  */
}

.checkContainer{
  margin-bottom: 30px;
}

.textArea textarea{
  width: 100%;
  outline: none;
border: 1px solid #858792;
background-color: #343A40;
border-radius: 10px;
padding: 5px;
height: 111px;
font-weight: bold;
padding: 10px;
font-size: 15px;
margin-bottom: 30px;
}

.textArea p{
  color: white;
  font-size: 20px;
  margin-bottom: 20px;
  }
.registerStyle input{
  
  width: 374px;
  padding: 20px;
  outline: none;
  border: 1px solid #858792;
  background-color: #343A40;
  font-size: 20px;
  border-radius: 10px;
  margin-top: 15px;
  margin-bottom: 15px;

}
.sendMessage{
  /* margin-top: 30px; */
  padding: 15px;
  outline: none;
  border: none;
  color: white;
  cursor: pointer;
  background-color: #5B69E2;
  border-radius:3px ;
  font-weight: bold;
  box-shadow: 0px 0px 3px 3px white;
transition-timing-function: ease-in-out;
}
.sendMessage:hover{
  padding: 17px;
  }

.registerStyle label{
  color: white;
  font-weight: bold;
  font-size: 18px;
}

.registerStyle i{
  margin-left: -40px;
  color: #858792;
  font-size: 20px;
}

.contactUsContainer .getIttouch p {
  color: #858792;
  font-weight: bold;
  font-size: 30px;
  margin-bottom: 30px;
  }
  .contactUsContainer .getIttouch h1{
  color: white;
  font-size: 30px;
  margin-bottom: 30px;
  font-weight: bold;
  }

  .contactUsContainer .getIttouch h2{
      color: #5B69E2;
      font-size: 32px;
      font-weight: bold;
      margin-bottom: 30px;
      
      }
      .contactUsContainer .letmeKnow{
          margin-bottom: 30px;
          }
          .contactUsContainer .letmeKnow p{
          color:#858792;
          font-size: 20px;
          
          }
          .check{
              width: 30px;
              height: 30px;
              background-color: #5B69E2;
              text-align: center;
              border-radius: 100%;
              display: flex;
              
              flex-direction: row;
              justify-content: center;
              align-items: center;
              
              }
              .checkContainer{
              display: flex;
              flex-direction: row;
              gap: 4px;
              align-items: center;

              
              }
              .checkContainer p{
              font-size: 20px;
              font-weight: bold;
              color: #858792;
              
              }
.Footer{
width: 100%;
display: flex;
justify-content: center;
text-align: center;
padding-top:30px ;
padding-bottom: 30px;

}

.Footer p{
  color: #858792;
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 20px;
}
.Footer h1{
  font-size: 32px;
  color: white;
  font-weight: bold;
  margin-bottom: 20px;
}

.Footer input{
  width: 594px;
  height: 72px;
  border: 1px solid #858792;
  border-radius: 30px;
  background-color: #343A40;
  outline: none;
  padding-left: 20px;margin-right: 20px;


}
.Footer button{ width: 185px; height: 72px; border-radius: 20px; background-color: #858792; border: none; outline: none; color: white; font-size: 20px; cursor: pointer; box-shadow: 1px 1px 3px 4px white; 
  transition-timing-function: ease-in-out;
}
.Footer button:hover{
  width: 190px;
}
.Footer input::placeholder{
color: #858792;
font-size: 18px;
}

.footerContainer{
margin-bottom: 20px;
}
.sectionSix{
width: 100%;
background-image: linear-gradient(to top, #1F2937, #4F46E5);
height: auto;

}
.sectionSix .line{
border: 1px solid #858792;
margin-bottom: 10px;
}
.scriptFooter{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-left: 100px;
padding-right: 100px;
margin-top: 30px;
padding-bottom: 20px;
}
.scriptFooter p{
font-size: 18px;
color: #858792;

}
.scriptFooter h1{
font-size: 40px;
color: #858792;
font-weight: bold;
}

.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
}

.form-popup {
  padding: 0;
  margin: 0;
  display: none;
  margin-top: 20px;
  bottom: 0;
  border: 3px solid black;
  z-index: 9;
}

.form-container {
  padding: 10px;
  background-color: white;
}



.form-container .btn {
  background-color: #4F46E5;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom: 10px;
  opacity: 0.8;
}

.form-container .cancel {
  background-color: #1F2937;
}

.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}


.container_textEditor {
	max-width: 991px;
	width: 100%;
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
    margin-bottom: 30px;
}
.toolbar {
	padding: 16px;
	background: #eee;
}
.toolbar .head {
	display: flex;
	grid-gap: 10px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.toolbar .head > input {
	max-width: 100px;
	padding: 6px 10px;
	border-radius: 6px;
	border: 2px solid #ddd;
	outline: none;
}
.toolbar .head select {
	background: #fff;
	border: 2px solid #ddd;
	border-radius: 6px;
	outline: none;
	cursor: pointer;
}
.toolbar .head .color {
	background: #fff;
	border: 2px solid #ddd;
	border-radius: 6px;
	outline: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	grid-gap: 6px;
	padding: 0 10px;
}
.toolbar .head .color span {
	font-size: 14px;
}
.toolbar .head .color input {
	border: none;
	padding: 0;
	width: 26px;
	height: 26px;
	background: #fff;
	cursor: pointer;
}
.toolbar .head .color input::-moz-color-swatch {
	width: 20px;
	height: 20px;
	border: none;
	border-radius: 50%;
}
.toolbar .btn-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	grid-gap: 10px;
}
.toolbar .btn-toolbar button {
	background: #fff;
	border: 2px solid #ddd;
	border-radius: 6px;
	cursor: pointer;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}
.toolbar .btn-toolbar button:hover {
	background: #f3f3f3;
}
#content {
	padding: 16px;
	outline: none;
	max-height: 50vh;
	overflow: auto;
}
#show-code[data-active="true"] {
	background: #eee;
}

@media screen and (max-width:768px) {

  .hamburger {
    display: flex;
    cursor: pointer;
  }
  .hamburger #closeHam {
    display: none;
  }
  .navigation-items {
    display: none;
    flex-direction: column;
    align-items: center;
    position: absolute;
    right: 0;
    top: 58px;
    /* background-color: #343A40; */
    background-image: linear-gradient(to top, #1F2937, #4F46E5);
    width: 100%;
    padding-top: 60px;
    padding-bottom: 10px;
    gap: 10vh;
  }

  .mainconatiner {
    flex-direction: column;
    padding-left: 40px;
    padding-right: 40px;
  }

  .mainone {
    /* flex: 1; */
    order: 2; /* Move .mainone below .ImageContainers */
  }

  .ImageContainers {
    order: 1; /* Move .ImageContainers above .mainone */
  }

  .maintwo{
    flex: 1;
    width: 100%;
    height: 517px;

  }

  .maincontainersectionTwo{
    display: flex;
    flex-direction: column;
    padding-left: 40px;
    padding-right: 40px;
  }


  .serviceContainer{
    padding-left: 20px;
    padding-right: 20px;
  }
  .gridContainer{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    grid-gap:10px;
  }

.gridBox{
padding-left: 5px;
}

.gridBox >p >.spanone1{
color: #858792;
margin-right: 5px;
font-size: 13px;
font-weight: bold;
}
.gridBox > p >.spantwo2{
  color: #858792;
margin-right: 5px;
font-size: 20px;
}


.skills{

  display: flex;
flex-direction: column;
 justify-content: space-between;
  width: 100%;
  padding-top: 30px;
  background-image: linear-gradient(to top, #1F2937, #4F46E5);
  padding-left: 10px;
  padding-right: 10px;
  /* border: 1px solid white; */
  margin-top: 20px;
  padding-bottom: 30px;

  margin-bottom: 20px;
}
.SkillsContainerTwo{
  display: grid;
  grid-template-columns:repeat(2, 1fr);
}
.projects{
  grid-template-columns: repeat(1,1fr);
}
.projects .projectOne img{
  width: 100%;
  height: 220px;
  }
  .projectSection{
    padding-left: 10px;
    padding-right: 10px;
  }
  .blogSectionmain{
    padding-left: 10px;
    padding-right: 10px;

    }


.ContactUscontainer{
  grid-template-columns: repeat(1,1fr);
  padding-left: 20px;
  padding-right: 20px;
}
.registermain{
  flex-direction: column;
  gap: 0px;
}
.registerStyle input{
  width: 99%;
}
.textArea textarea{
  width: 99%;
}

.registerStyle i{
display: none;

  margin-left: -10px;
  color: #858792;
  font-size: 20px;
}
.textArea{
  padding-left: 0%;
}
            .Footer input{
              width: 350px;
              margin-bottom: 10px;     
            }
            .blogSection{
              flex-direction: column;
            }
            .blogSection .blogpartOne img{
              width: 100%; /* Make the image fill its container */
              z-index: 1;
          
            
            }

            .blogSection{
              padding-left: 10px;
              padding-right: 10px;
            }
            .mediaConatiner{
              width: 100%;
              max-width:100%;
            }
}


@media only screen and (min-width: 280px) and (max-width: 540px) {
  .mainconatiner {
    flex-direction: column;
    padding-left: 10px;
    padding-right: 10px;
  }
  .mainone {
    padding: 0px; 
    padding-bottom: 10px;/* Adjust padding for smaller screens */
  }

  .maintwo{
    flex: 1;
    width: 100%;
    height: 517px;

  }

  .design{
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .design .designd > p{
    margin-bottom: 10px;
  }

  .maincontainersectionTwo{
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    padding-right: 10px;
  }


  .serviceContainer{
    padding-left: 10px;
    padding-right: 10px;
  }
  .gridContainer{
    display:grid;
    grid-template-columns:repeat(1, 1fr);
    grid-gap:10px;
  }
  .mediaConatiner{
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: space-between;
    padding-bottom: 20px;
    width: 100%;
    max-width: 100%;

  }
  .mediaconatinerContent{
    flex-direction: column;
  }

  .skills{

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding-top: 30px;
    background-image: linear-gradient(to top, #1F2937, #4F46E5);
    padding-left: 10px;
    padding-right: 10px;
    /* border: 1px solid white; */
    margin-top: 20px;
    padding-bottom: 30px;
  
    margin-bottom: 20px;
  }

  .SkillsContainerTwo{
    display: grid;
    grid-template-columns:repeat(2, 1fr);
  }
  .projects{
    grid-template-columns: repeat(1,1fr);
  }
  .projectSection{
    padding-left: 10px;
    padding-right: 10px;
  }
  .projects .projectOne img{
    width: 100%;
    height: 220px;
    }

    

    .blogSection,#blogSection{
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      padding-left: 10px;
      padding-right: 10px;
    }

    .blogSectionmain{
      padding-left: 10px;
      padding-right: 10px;

      }
      .blogSection{
        padding-left: 10px;
        padding-right: 10px;
      }
      .ContactUscontainer{
        grid-template-columns: repeat(1,1fr);
    }
    .registermain{
        flex-direction: column;
        gap:0px;
    }
    .registerStyle input{
        width: 99%;
    }
    .textArea{
        padding-left: 0%;
     }
     .textArea textarea{
        width: 99%;
             }

      .Footer input{
        width: 350px;
        margin-bottom: 10px;
      }
      
.blogSection{
  flex-direction: column;
}
.blogSection .blogpartOne img{
  width: 100%; /* Make the image fill its container */
  z-index: 1;


}
}


@media only screen and (min-width: 10px) and (max-width: 300px) {

  .SkillsContainerTwo{
    display: grid;
    grid-template-columns:repeat(1, 1fr);
  }
  .projects{
    grid-template-columns: repeat(1,1fr);
  }
  .projectSection{
    padding-left: 10px;
    padding-right: 10px;
  }
  .projects .projectOne img{
    width: 200px;
    height: 220px;
    }
    .blogSection{
      flex-direction: column;
    }

}


@media only screen and (min-width: 769px) and (max-width: 1629px) {
.gridContainer{
display:grid;
grid-template-columns:repeat(2, 1fr);
grid-gap:20px;
/* grid-auto-rows:minmax(400px, auto) ; */
justify-content: space-between;
}
.skills{
display: flex;
flex-direction: column;
justify-content: space-around;
}
.SkillsContainerTwo{
display: grid;
grid-template-columns:repeat(4, 1fr);
justify-content: space-between;
}
.projects{
grid-template-columns: repeat(2,1fr);
}
  .projectSection{
    padding-left: 100px;
    padding-right: 100px;
  }
  .container{
    grid-template-columns: repeat(1,1fr);
    padding-left: 20px;
    padding-right: 20px;
    justify-content: space-between;
    grid-gap: 20px;
}
.registermain{
    justify-content: space-around;
    flex-direction: column;
    gap: 0px;
}
.registerStyle input{
  width: 99%;
}
.textArea{
    padding-left: 0%;
 }
 .textArea textarea{
width: 99%;
 }
.registerStyle i{
display: none;
}
.mediaConatiner{
  width: 100%;
  max-width:100%;
}
}