@import url('https://fonts.googleapis.com/css2?family=Sevillana&family=Spicy+Rice&display=swap');
@import url('https://fonts.googleapis.com/css2?family=News+Cycle:wght@400;700&family=Sevillana&family=Spicy+Rice&display=swap');

body {
    background-color: #333;
}

.main-con {
    width: 80%;
    /* border: 1px solid #333; */
    box-shadow: 0 1px 6px black;
    margin: auto;
}

.intro {
    background-image: url(image/Bg-icon.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 25px;
    background-color: #ffffff17;
    box-shadow: 0 1px 3px black;
    height: 50px;

}

h2 {
    font-family: "Spicy Rice", serif;
    font-weight: 200;
    color: goldenrod;
}

.toggle-button {
    font-size: 24px;
    cursor: pointer;
    display: none;
    /* Hidden by default */
    color: goldenrod;
    margin-right: 15px;
}

.toggle-button:hover {
    color: white;
}

/* Nav Bar */
.nav-bar {
    flex-grow: 1;
}

.nav-bar ul {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    list-style: none;
    margin-right: 10px;
}

.nav-bar ul li a {
    text-decoration: none;
    padding-right: 30px;
    font-size: 11px;
    color: rgb(255, 255, 255);
    font-family: "News Cycle";
    font-weight: 400;
    font-style: normal;
    transition: color 0.3s;
}

.nav-bar ul li a:hover {
    color: goldenrod;
}

/* Responsive Design */
@media (max-width: 768px) {
    .toggle-button {
        display: block;
        /* Show toggle button on smaller screens */
    }

    .nav-bar {
        display: none;
        /* Hide navigation menu by default */
        flex-direction: column;
        background-color: #333;
        position: absolute;
        top: 50px;
        left: 68%;
        width: 20%;
    }

    .nav-bar ul {
        flex-direction: column;
        align-items: left;
        gap: 10px;
    }

    .nav-bar.active {
        display: flex;
        /* Show navigation menu when active */
    }
}

.mySelf {
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 20px;
    line-height: 0.5;

}

h3 {
    font-size: 30px;
}

.mySelf p {
    font-family: sans-serif;
    font-size: 11px;
    /* Smaller font size */
    line-height: 1.5;
    /* Adjust line spacing for readability */
    width: 300px;
}

hr {
    width: 40px;
    margin-right: 100%;
    border-color: goldenrod;
    background-color: goldenrod;
    padding: 1px;
}

  .typing {
  overflow: hidden;
  white-space: nowrap;

  animation: typing 3s steps(40) infinite;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}


main {
    background-color: #333;
}

.sect-one {
    text-align: center;
    color: rgb(0, 0, 0);
    font-family: sans-serif;
    background-color: rgb(243, 174, 0);
    line-height: 0.5;
    padding-bottom: 10px;
}

.sect-one h4 {
    padding: 20px;
    font-size: large;
     background-color: #00000065;
     color: #fff;
     text-align: left;
}

.sect-one p {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    width: 500px;
    margin: auto;
    line-height: 1.5;
}

.grid-service {
    display: grid;
    grid-template-columns: repeat(3, 150px);
    place-content: center;
    gap: 20px;
    margin: 40px auto;

}

.grid-service img {
    width: 100%;
    /* Make images responsive */
    height: 100%;
    /* Maintain aspect ratio */
    object-fit: cover;
    /* Crop if needed */
    border-radius: 5px;
    /* Optional: rounded corners */
}

.grid-serve {
    background-color: rgb(1, 0, 3);
    border-radius: 10px;
    padding: 10px;
}

.overlay-text {

    color: white;
    /* Text color */
    padding: 1px 10px;
    /* Padding around the text */
    border-radius: 3px;
    /* Optional: rounded corners */
    font-size: 7px;
    /* Adjust font size */
}

.sect-two {
    text-align: center;
    color: rgb(255, 255, 255);
    font-family: sans-serif;
    background-image: url(image/Bg-icon.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
    font-family: sans-serif;
}

.language {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    place-content: center;
    gap: 20px;
    margin: 40px auto;
}

.grid-lang {
    border-radius: 10px;
    padding: 10px;
}

.sect-two p {
    font-size: small;
}

.sect-two h5 {
    font-size: large;
    text-align: left;
    padding-inline: 15px;

}

.grid-lang img {
    width: 50px;
    /* Make images responsive */
    height: 50px;
    /* Maintain aspect ratio */
    object-fit: cover;
    /* Crop if needed */
    border-radius: 5px;
    /* Optional: rounded corners */
}
.sect-three{
    background-color: goldenrod;
}
.sect-three h4{
 color: #fff;
 font-family: sans-serif;
 text-align: left;
 font-size: large;
 padding: 15px;
 background-color: #00000065;
}
.sect-three p{
 color: #ffffff;
 font-family: sans-serif;
 text-align: left;
 font-size: 11px;
 padding-inline: 15px;
 width: 30%;
 font-weight: bold;
 }

  .works {
  display: grid;
  grid-template-columns: repeat(4, 100px); /* Responsive grid */
  grid-auto-rows: 150px;
  gap: 20px; /* Space between images */
  padding: 20px;
  place-content: center;
  margin: auto;
  
}

.work-item {
 border-radius: 8px; /* Smooth edges */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
  background-color: #fff; 
  
} 
.work-item img {
   width: 100%;
  height: 100%;
 object-fit: cover; 
 transition: 0.3s ease, opacity 0.3s ease;  
}
 .work-item-cols{
    grid-column: span 2;
}
.work-item-row{
    grid-row: span 2;
} 

.work-item:hover img {
  transform: scale(1.1); /* Zoom effect on hover */
  opacity: 0.9; /* Slight dimming */
}
.contact{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: sans-serif;
    position: relative;
}
i{
    color: goldenrod;
    padding-right:20px ;
    padding-top: 15px;
  
}
.contact ul{
    display: grid;
    grid-template-columns: auto auto ;
    align-items: center;
}
.contact ul li {
    list-style: none;
    background: #333;
    margin-top: 10px;
    box-shadow: 0 1px 5px black;
    padding: 10px;
    color: #fff;
    font-size: small;
}
form{
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-items: left;
    font-size: small;
    color: #fff;
    font-weight: bold;
    margin-left: 40px;
    gap: 10px;
    width: 50%;
}
input{
    padding: 10px;
    outline: none;
}
#style{
     transform: rotate(90deg); 
      width: 250px;  
       position: absolute; 
       bottom: 50%;
       left: 28%;
    }
      
textarea{
   text-align: left;
   outline: none;
}
.contact h4{
    color: #fff;
    padding-left: 20px;
    background-color: goldenrod;
    width: 80%;
    padding: 20px;
}

.foot h3{
    color: goldenrod;
    padding: 20px;
    font-family: sans-serif;
    font-weight: bold;
}
.btncn{
    display: flex;
    align-items: center;
    justify-content: center;
}
 button{
    padding: 10px;
    margin-top: 15px;
    font-size: 20px;
    background-color: goldenrod;
    border: white 2px solid;
    box-shadow: 0 0 20px goldenrod;
    border-radius: 50px;
    color:white;
    
} 
button:hover{
     background: radial-gradient(circle, rgba(238, 183, 4, 0.863), rgb(248, 190, 0) 70%);
      transform: translate(-50%, -50%) scale(1);
     box-shadow: 0 0 50px goldenrod;
     transition: 2s ease-in-out;
}
 .button:active {
      transform: scale(1);
      box-shadow: none;
    }
    footer{
         background-image: url(image/Bg-icon.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
    }
  
@media (min-width:700px) {
    .works {
  display: grid;
  grid-template-columns: repeat(4, 150px); /* Responsive grid */
  grid-auto-rows: 150px;
  gap: 20px; /* Space between images */
  padding: 20px;
  place-content: center;
  margin: auto;
}
 
}

@media (max-width:820px) {
    .grid-service {
        display: grid;
        grid-template-columns: repeat(3, 100px);
    }

    .language {
        display: grid;
        grid-template-columns: repeat(4, 100px);
    }

    .sect-one p {
        width: 100%;
    }
     .works {
        display: grid;
        grid-template-columns: repeat(2, 100px);
    }
     .last{
        grid-column: span 1;
    }
    .contact{
    display: block;
    /* margin: auto; */
    width: 60%;
  }
  ul li{
    padding: none;
  }
  i{
    padding-left:20px;
  }
  #style{
   display: none;
  }
  form{
    width: 100%;
  }
}

@media (max-width:600px) {
    html body {
        width: 100%;
        margin: none;
        padding: none;
        overflow-x: hidden;
    }

    .main-con {
        width: 100%;
        overflow-x: hidden;
    }

    .mySelf {
        display: block;
    }

    .sect-one p {
        width: 100%;
    }

    .grid-service {
        display: grid;
        grid-template-columns: repeat(1, 100px);
    }

    .language {
        display: grid;
        grid-template-columns: repeat(2, 150px);
    }
     .works {
        display: grid;
        grid-template-columns: repeat(2, 100px);
    }
    .contact{
    display: block;
  }
   
}