@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

:root {
  --primary-color: #f6703d;
  --secondary-color: #f1f1f1;
  --grey-color: grey;
  --black-color: black;
  --box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
    rgba(140, 143, 145, 0.32) 0px 2px 16px 0px;
  --primary-lite: blanchedalmond;
  --paragraph-color: #666;
}
body {
  font-family: "Lato", sans-serif;
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}
.mobile-intro{
  
 
 img{
    width: 100%;
    height: 100vh;
    object-fit: cover;
  }
  .textoverlay-mobile-intro{
    padding: 2rem;
    position: absolute;
    overflow: hidden;
    max-width: 100%;
    max-height: 100vh;
    top: 50%;
    left: 50%;
    border-radius: 1rem;
    transform: translate(-50%, -50%); 
    text-align: center; 
    color: var(--secondary-color); 
    background-color: rgba(0, 0, 0, 0.7);
    
}
a{
  color: var(--black-color);
  text-decoration: none;
  background-color: var(--primary-color);
  border:var(--secondary-color);
  font-size: 1rem; 
  padding: 12px 24px; 
  border-radius: 25px; 
  max-width: fit-content;
  text-align: center;
  
}
a:hover{
  background-color: var(--black-color);
  color:var(--secondary-color);
  box-shadow: var(--box-shadow);
}
}
.overview-content{
  padding:2rem;
  background-color: var(--secondary-color);
  img{
    width: 100%;
    height: 100%;
    border-radius: 1rem;
  }
  p{
    text-align: justify;
  }
h3{
  font-size: 1.8rem;
  color: var(--primary-color);
  font-weight: bold;
}
}
.mobiledev-expertise {
  background-color: var(--secondary-color);
  max-width: 100%;
  padding: 2rem 0;
}

.mobiledev-expertise h3 {
  text-align: center;
  font-size: 1.5rem;
  color: var(--primary-color);
  border-radius: 1rem;
  margin-bottom: 1rem;
}

.mobiledev-expertise ul {
  text-align: left;
  list-style: none;
  padding: 0 1rem;
}
.mobiledev-expertise li{
  padding:.5rem;
}
.mobiledev-expertise p {
  text-align: left;
}
.mobiledev-expertise i{
  color:var(--primary-color);
}
.mobiledev-expertise .mobile-dev {
  margin-top: 1rem;
}

.mobiledev-expertise .item {
  margin-top: 2%;
  padding: 2rem;
  border-radius: 1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mobiledev-expertise .item:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  background-color: #fff;
}
.mobile-tech-stack{
  margin:2rem;
  img{
    width: 100%;
    height: 100%;
    border-radius: 5px 20px 5px;
    background: #BADA55;
  }
  .section-title{
    text-align: center;
    color: var(--primary-color);
    font-weight: bold;
  }
  h3{
    color: var(--primary-color);
  }
  ul{
    padding:2rem;
    list-style: none;
    text-align: left;
    line-height: 30px;

  }
  i{
    color: var(--primary-color);
  }
  li {
    padding: 1rem;
    transition: transform 0.3s ease;
  }
  
  li:hover {
    transform: scale(1.05);
    background-color: var(--secondary-color);
  }
  
  h3{
    font-weight: bold;
    text-align: center;
  }
}
@media (min-width: 767px){

  
}
@media (max-width: 575.98px) {
  .mobile-intro {
    .textoverlay-mobile-intro {
        padding: 2rem;
        position: relative;
        overflow: hidden;
        max-width: 100%;
        max-height: 100vh;
        top: 50%;
        left: 50%;
        border-radius: 1rem;
        transform: translate(-50%, -50%);
        text-align: center;
        color: var(--secondary-color);
        background-color: rgba(0, 0, 0, 0.7);
    }
}
.mobile-tech-stack{
 
  ul{
    padding:2rem;
    list-style: none;
    
  }
}

.mobiledev-expertise .item:hover {


align-items: center;
margin-left:10%;
padding:10px;
max-width: 80vw;
}
}

/* Small devices (phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .mobile-intro {
    .textoverlay-mobile-intro {
        padding: 2rem;
        position: relative;
        overflow: hidden;
        max-width: 100%;
        max-height: 100vh;
        top: 50%;
        left: 50%;
        border-radius: 1rem;
        transform: translate(-50%, -50%);
        text-align: center;
        color: var(--secondary-color);
        background-color: rgba(0, 0, 0, 0.7);
    }
  }
  .mobiledev-expertise .item{
  
  }
  .mobiledev-expertise .item:hover {
  
  
  align-items: center;
  margin-left:10%;
  padding:10px;
  max-width: 80vw;
  }
  
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .mobile-intro {
    .textoverlay-mobile-intro {
        padding: 2rem;
        position: relative;
        overflow: hidden;
        max-width: 100%;
        max-height: 100vh;
        top: 50%;
        left: 50%;
        border-radius: 1rem;
        transform: translate(-50%, -50%);
        text-align: center;
        color: var(--secondary-color);
        background-color: rgba(0, 0, 0, 0.7);
    }
}

.overview-content {
p{
  text-align: left;
  hyphens: auto;
  word-spacing: 0.5px;
}

}
.mobiledev-expertise .item {


  align-items: center;
  margin-left:10%;
  padding:10px;
}
  
.mobiledev-expertise .item:hover {


align-items: center;
margin-left:10%;
padding:10px;
}
}