/*start components*/
.specialhiding {
  font-size: 100px;
  color: #ebeced;
  text-align: center;
  letter-spacing: -4px;
  margin: 0;
  font-weight: 800;
  
}
.specialhiding +p {
  text-align: center;
  margin-top: -20px;
  font-size: 20px;
  color: #797979;
 

}
/*end components*/


/*GOLBALE style*/
*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
}
body {
    font-family: "Work Sans", sans-serif;
}

.parent {
    background-color: grey;
    
}
.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}
@media (min-width: 768px) {
  .container {
    
    max-width: 960px; /* Optional: Set a maximum width */
  }
}

/* Media query for large screens (e.g., desktops) */
@media (min-width: 1200px) {
  .container {
   
    max-width: 1140px; /* Optional: Set a maximum width */
  }
}

/* Optional: Media query for extra-large screens */
@media (min-width: 1600px) {
  .container {
    
    max-width: 1400px; /* Optional: Set a maximum width */
  }
}
/*end Global style*/

/* start header style*/

.Header {
    padding: 10px;
}

.Header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.Header .container .links {
  position: relative;
}
.Header .container .links ul {
  list-style: none;
  position: absolute;
  padding: 0;
  margin: 0;
  right: 0;
  width: 200px;
  background-color: #f6f6f6;
  top: calc(100% + 15px);
  display: none;
  z-index: 1;
}
.Header .container .links:hover ul {
  display: block;
  
}


.Header .container .links ul li {
  margin: 20px;
  padding: 10px;
}
.Header .container .links ul a {
  margin-bottom: 15px;
  text-decoration: none;
  display: block;
  color: #333;
}
.Header .container .links ul a:hover {
  text-decoration: underline;
  color:#10cab7;
  transition: 0.3s;
}
.Header .container .links ul::before{
  content: "";
  border: solid 20px ;
  border-color: #f6f6f6 transparent transparent transparent;
  position: absolute;
  top: -20px;
  right: 0;
}
/*start landing style*/
  .landing {
    background-image: url("../images/istockphoto-942114106-612x612.jpg");
    background-size: cover;
    height: calc(100vh - 58px);
    position: relative;

  }
  .landing .intro-text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    text-align: center;
    width: 320px;
    max-width: 100%;
  
  }
  .landing .intro-text h1{
    margin: 0;
    color: #10cab7;
    font-size: 50px;
    font-weight: bold;


  }
  .landing .intro-text p {
    font-size: 20px;
    color: #000;
  }

/*end landing style*/
/*start features styles*/
.features{
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: #f6f6f6;
}

.features .container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-gap: 20px;
  
}
.features .feet {
  padding: 10px;
  text-align: center;
}

.features .feet i {
  color: #10cab7;
  font-size: 50px;
}

.features .feet h3 {
  font-weight: 800;
}
.features .feet p {
  color: #333;
  line-height: 1.8;
}
/*end features style*/
/*start services*/
.services{
  padding-top: 60px;
  padding-bottom: 60px;
}

.services .service {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
  grid-gap: 20px;
  margin: 80px 0px 0px;
}
.srv{
  text-align: center;
}

.srv i{
  color: #10cab7;
  font-size: 50px;
}
.srv h3 {
  font-weight: 800;
  
}
.srv p {
  color: #797979;
  word-spacing: 2px;
  letter-spacing: 1px;
}
.services .service .col .image {
  position: relative;
  width: 220px;
  padding-left: 200px;
}

.service .col img{
  width: 220px;
}

@media (max-width:1199px){
  .service .col img ,
  .service .col  .image::before{
    display: none;
  }
}

.service .col .image::before{
  content: '';
  position: absolute;
  width: 80px;
  height: calc(100% + 100px);
  top: -50px;
  right: -230px;
  z-index: -1;
  background-color: black;
  

}
/*end services*/
/*start portfolio*/
.portfolio {
   padding-top: 60px;
  padding-bottom: 60px;
  background-color: #f6f6f6;
}
.portfolio .portfolio-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  grid-gap: 20px;
  margin: 80px 0px 0px;
}

.portfolio .card{
  background-color: white;
}
.portfolio .portfolio-content .card img{
  max-width: 100%;
}
.portfolio .portfolio-content .info {
  padding: 20px;
}
.portfolio .card h2 {
  font-weight: 800;
  margin: 0;
}

/*end portfolio*/

/*start about*/
.about{
  padding-top: 60px;
  padding-bottom: 100px;
}
.about .about-content {
  display: flex;
  flex: 1;
  align-items: center;
   margin: 80px 0px 0px;
}

@media (max-width:1199px)
{
  .about .about-content {
    flex-direction: column;
     margin: 80px 0px 0px;
  }
}
.about .about-content .image{
  width: 290px;
}
.about img {
  max-width: 100%;
  
  
}
.info2 {
  margin-left: 50px;
}
.about .first-paragraph{
  font-weight: bold;
  line-height: 1.6;
}
@media (max-width:1199px){
  .about .first-paragraph {
    margin-top: 60px;
  }
}

.about .about-content hr {
  width: 50%;
  border-color: #10cab7;
  display: inline-block;
}
.about .second-paragraph{
  color:#797979;
  line-height: 1.6;
}
/*end about*/
/*start conctact*/
.contact{
  background-color: #f6f6f6;
  padding-top: 60px;
  padding-bottom: 60px;
}
.contact-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
   margin: 80px 0px 0px;

}

.contact-content h2{
  color: #2c4755;
  font-size: 35px;
  letter-spacing: -2px;
  font-weight: 800;
  margin-bottom: 15px;
}
.contact-content h3 {
  color: #10cab7;
  font-size: 35px;
  font-weight: bold;
  margin: 4px;
}

.contact-content .networks {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
/*end contact*/
/*start footer*/
.footer{
  background-color: #2c4755;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
}
.footer p {
  color: #ebeced;
  font-size: 20px;
}
.footer span {
  color: #10cab7;
  font-weight: bold;
}
/*end footer*/