*{
    margin: 0px auto;
    margin-bottom: 0px auto;
}

body{
    background-color: #f9f9f9;
    width: calc(100% - 0%);
}

header{
    min-width: calc(100% - 15%);
    text-align: center;
    text-decoration: dashed;
    text-decoration: solid;
    text-decoration: wavy;
    margin: 40px auto;
            padding: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            align-items: center;
            max-width: calc(100% - 15%);
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            align-self: center;
            justify-content: center;
            align-self: center;
            justify-content: center;
            justify-items: center;
            justify-self: center;
            align-content: center;
            align-items: center;
             justify-content: center;
     justify-items: center;
     justify-self: center;
     text-align: center;
     text-decoration: wavy;
}

.main-content{
    margin: 40px auto;
            padding: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            align-items: center;
            min-width: calc(100% - 15%);
            max-width: calc(100% - 15%);
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            align-self: center;
            justify-content: center;
            align-self: center;
            justify-content: center;
            justify-items: center;
            justify-self: center;
            align-content: center;
            align-items: center;
             justify-content: center;
     justify-items: center;
     justify-self: center;
     text-align: center;
     text-decoration: wavy;
}

.services{
      margin: 40px auto;
            padding: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            align-items: center;
            max-width: calc(100% - 20%);
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            align-self: center;
            justify-content: center;
            align-self: center;
            justify-content: center;
            justify-items: center;
            justify-self: center;
            align-content: center;
            align-items: center;
             justify-content: center;
     justify-items: center;
     justify-self: center;
     text-align: center;
     text-decoration: wavy;  
}

.dev-service{
        margin: 40px auto;
            padding: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            align-items: center;
            max-width: calc(100% - 25%);
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            align-self: center;
            justify-content: center;
            align-self: center;
            justify-content: center;
            justify-items: center;
            justify-self: center;
            align-content: center;
            align-items: center;
             justify-content: center;
     justify-items: center;
     justify-self: center;
     text-align: center;
     text-decoration: wavy;  
}

.container{
    max-width: calc(100% - 50%);
    text-align: center;
            margin: 40px auto;
            padding: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.get_started-button{
    background-color: mediumpurple;
    color: white;
    margin: 40px auto;
            padding: 20px;
            background-color: mediumpurple;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            align-self: center;
            justify-content: center;
            justify-items: center;
            justify-self: center;
            align-content: center;
            align-items: center;
}

.container-1{
      max-width: calc(100% - 30%);
    text-align: center;
            margin: 40px auto;
            padding: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#subscribe-button{
    background-color: mediumpurple;
    color: white;
    margin: 40px auto;
            padding: 20px;
            background-color: mediumpurple;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            align-self: center;
            justify-content: center;
            justify-items: center;
            justify-self: center;
            align-content: center;
            align-items: center;
            pointer-events: all;
}

.footer_div{
      max-width: calc(100% - 10%);
    text-align: center;
            margin: 40px auto;
            padding: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 20px;
}

.sub-container{
     max-width: calc(100% - 15%);
    text-align: center;
            margin: 40px auto;
            padding: 20px;
            background-color: mediumpurple;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 20px;
}

.whatsapp-us{
    background-color: mediumpurple;
    color: white;
    margin: 40px auto;
            padding: 20px;
            background-color: mediumpurple;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            align-self: center;
            justify-content: center;
            justify-items: center;
            justify-self: center;
            align-content: center;
            align-items: center;
}

.container-2{
      max-width: calc(100% - 30%);
    text-align: center;
            margin: 40px auto;
            padding: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 50px;
}

.container-3{
    max-width: calc(100% - 30%);
    text-align: center;
            margin: 40px auto;
            padding: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 50px;
}

/* ==== Sidebar Navigation ==== */
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: mediumpurple; /* Dark background */
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

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

  .menu-button☰ {
        width: calc(100% - 80%);
  background-color: mediumpurple;
    color: white;
    margin: 0px auto;
            padding: 20px;
            background-color: mediumpurple;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            align-self: center;
            justify-content: center;
            justify-items: center;
            justify-self: center;
            align-content: center;
            align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: fixed;
  position-area: top;
  }

  .urls{
        background-color: mediumpurple;
        align-items: center;
        text-align: center;
         background-color: mediumpurple;
    color: white;
    margin: 40px auto;
            padding: 20px;
            background-color: mediumpurple;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            align-self: center;
            justify-content: center;
            justify-items: center;
            justify-self: center;
            align-content: center;
            align-items: center;
            position: fixed;
  }

.urls a{
          padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: normal;
  color: white;
  transition: 0.3s;
}

.other-pages{
        width: calc(100% - 10%);
               background-color: mediumpurple;
        align-items: center;
        text-align: center;
         background-color: mediumpurple;
    color: white;
    margin: 40px auto;
            padding: 20px;
            background-color: mediumpurple;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            align-self: center;
            justify-content: center;
            justify-items: center;
            justify-self: center;
            align-content: center;
            align-items: center; 
}

.other-pages a{
         padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: normal;
  color: white;
  transition: 0.3s;
}

.e-mail{
        background-color: transparent;
        color: white;
        padding: 10px;
        border-radius: 20%;
        transition: 0.3s;
        border: 1px solid black;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.our-services-container{
         margin: 40px auto;
            padding: 20px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            align-items: center;
            min-width: calc(100% - 15%);
            max-width: calc(100% - 15%);
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            align-self: center;
            justify-content: center;
            align-self: center;
            justify-content: center;
            justify-items: center;
            justify-self: center;
            align-content: center;
            align-items: center;
             justify-content: center;
     justify-items: center;
     justify-self: center;
     text-align: center;
     text-decoration: wavy;
}

.image{
        width: 80%;
        justify-content: center;
        justify-self: center;
        justify-items: center;
        align-self: center;
        align-self: center;
        align-content: center;
        text-align: center;
        border-top-left-radius: 50%;
        border-bottom-right-radius: 50%;
}
html{
        justify-content: center;
        justify-self: center;
        justify-items: center;
        align-self: center;
        align-self: center;
        align-content: center;
        text-align: center;
}

img{
        border-top-left-radius: 50%;
        border-bottom-right-radius: 50%;
}