@import "https://use.fontawesome.com/releases/v5.5.0/css/all.css";
html {
    scroll-behavior:smooth;
} 

body {
margin:0;
    padding:0; 
}

#logo {

    font-weight:bold;
    position:absolute ;
    left:3%;
    top:8%;
    font-size:40px;
    padding:1.5%;
    color:white;
}
.header {
    background-attachment:fixed;
    background-size:cover;
    background-color:rgba(0,0,255,0.9);
    background-blend-mode:color; 
    text-align:center;
    width:100%;
    overflow:auto;
    padding-bottom:5%;
    
}

.headertext {
    float:left;
    width:70%;
    text-align:left;
    margin-left:10%;
    padding-right:10%;
    animation-duration:1s;
    animation-iteration-count:1;
    
    animation-timing-function:linear;
    animation-name:text;
}


@keyframes text {
    0% {transform:scale(1.2);opacity:0;}
    
    100% {transform:scale(1.0);opacity:1.0;}
}
.header h1 {
    color:white;
    font-family:georgia;
    font-weight:bold;
    font-size:45px;
}
.header p {
    color:white;
    font-family:arial;
    font-size:15px;
    line-height:30px;
    font-weight:light;
}


.header button {
    color:white;
    padding:3px;
    background:none;
    border:2px solid white;
    margin:1%;
    transition:all 0.5s;
    outline:none;
    font-weight:bolder;
    border-radius:0px 25px 0px 25px;
}



.header button:hover {
    color:black;
    background:white;
}


    .navbar {
    background:none;
    margin:0;
    padding:0;
}


.header ul {
    margin:0;
    padding:0;
    list-style-type:none;
    width:100%;
    overflow:auto;
    float:left;
    text-align:right;
    height:auto;
    background-color:rgba(0,0,0,0.3);
    position:fixed;
    top:0;
    z-index:50;
    
}



.header li {
    display:inline-block ;
    margin-left:3%;
    padding:0.5%;
    color:white;
    outline:none;
    text-decoration:none;
    font-size:12px;
    font-weight:bold;
}

.header li:hover {
    border-bottom:2px solid white;
}

button.bar {
    color:white;
    font-weight:bold;
    font-size:25px;
    position:absolute;
    right:5%;
    top:6%;
    border:none;
    background:none;
    outline:none;
}

.header i {
    margin-right:5%;
    font-size:20px;
}


.icons i {
    color:white;
    font-size:20px;
}

.icons {
    margin-top:10%;
}

@media screen and (min-width:600px) {
    button.bar, button.search {
        display:none;
    }
}

@media screen and (max-width:600px) {
    .header li {
        display:block;
        text-align:left;
        outline:none;
        padding-top:5%;
        padding-bottom:5%;
        color:white;
    }
    
    .header a {
        outline:none;
        text-decoration:none;
    }
    
    
    .header li:hover {
        border-bottom:2px solid white;
        
    }
    
    
    .header ul {
        position:absolute ;
        height:0vh;
        top:0%;
        width:80%;
        padding-left:10%;
        padding-right:10%;
        
   background:rgba(0,0,0,0.9);
   transition:height 0.3s;
   
   
   
}


}


.icons i {
    color:white;
    font-size:15px;
    display:block;
    margin-bottom:100%;

}

.icons {
    position:absolute ;
    right:5%;
    
}


.it {
    padding:3%;
    background:transparent ;
    border-radius:25px 25px;
    border:2px solid white;
    position:absolute;
    top:8%;
    right:20%;
    outline:none;

    color:white;
    
}

.about {
    width:85%;
    margin-left:7.5%;
    padding-right:7.5%;
}

.about p{
    line-height:30px;
    font-size:18px;
    font-family:arial;
    color:red;
}

.about h1 {
    font-family:georgia;
    font-size:40px;
    color: red;
}


.about i {
    margin:1px;
    padding:15px;  
    background:white;
    text-align:center;
    transition:all 1s;
}

.about i:hover  {
    background:red;
}


.services {
    background-image:url("https://img.freepik.com/free-photo/woman-tailor-working-sewing-factory_1303-15841.jpg?w=1060&t=st=1689927455~exp=1689928055~hmac=6f724ff36440a8adafe792513d2f5719f603dd73329811179968db9aee922873");
    background-attachment:fixed;
    background-size:cover;
    background-color:rgba(0,0,0,0.7);
    background-blend-mode:color;
    overflow:auto;
    width:100%;
    text-align:center;
    color:white;
}

.insurance {
    float:left;
    width:25%;
    height:auto;
    border:1px solid white;
    margin-left:2%;
    padding:2.5%;
    color:white;
    text-align:center;
    margin-bottom:10%;
}

@media screen and (max-width:600px) {
    .insurance {
        width:70%;
        margin-left:5%;
        padding:10%;
        margin-bottom:10%;
    }
}

.services h1{
  color: red;
}

.insurance p {

    font-weight:lighter ;
}



.insurance button {
    color:white;
    padding:15px;
    background:none;
    border:1px solid white;
    margin:1%;
    transition:all 0.5s;
    outline:none;
    font-weight:bolder;
    border-radius:0px 25px 0px 25px;
}
.insurance button:hover {
    color:black;
    background:white;
}
.insurance i {
    font-size:50px;
}
.contact {
    width:100%;
    background-attachment:fixed;
    background-size:cover;
    background-color:rgba(0,0,255,0.9);
    background-blend-mode:color;
    border:none;
    
}
.contact2 {
    background-color:rgba(0,0,0,0.3);
    width:90%;
    height: auto;
    margin-left:5%;
    border-left:3px solid red;
    border-right:3px solid red;
    border-radius:0px 25px 0px 25px;
}

.contact input, textarea {
    
    padding:20px;
    margin-bottom:10%;
    background:none;
    border:none;
    margin-left:5%;
    border-bottom:2px solid white;
    color:white;
    outline:none;
    width:50%;
} 

textarea {
    height:50px;
    margin-left:20%;
}

.contact i{
    color:white;
    margin-left:15%;
    
  }
.contact a {
  color: white;
  font-size: 10px;
  font-weight: bold;
  align-content: center;
}
  
  .text {
      color:white;
      width:70%;
      text-align:center;
      font-weight:bold;
      margin-left:15%;
  }
  
  
  .text p {
      color:whitesmoke;
  }
  
  .icon {
      text-align:center;
  }
  
  .icon i {
       margin:4%;
       text-align:center;
  }
  
  
  
  .contact button {
    color:white;
    padding:15px;
    background:none;
    border:1px solid white;
    margin:1%;
    transition:all 0.5s;
    outline:none;
    width:40%;
    font-weight:bolder;
    border-radius:0px 25px 0px 25px;
    margin-left:20%;
}



.contact button:hover {
    color:black;
    background:white;
}


.comments {
    background:white;
    overflow:auto;
    width:100%;
    height:auto;
    text-align:center;
    color:gray;

}



footer {
    text-align:center;
    background-attachment:fixed;
    background-size:cover;
    background-color:rgba(0,0,255,0.9);
    background-blend-mode:color; 
    border:none;
    
}

footer i, a {
    margin:1px;
    padding:15px;  
    background:none;
    text-align:center;
    transition:all 1s;
    color: white;

}

footer i:hover  {
    background:red;
    
}
footer h1 {
    color:white;
    font-family:georgia;
}

footer p {
    color:white;
    line-height:30px;
    font-size:15px;
}



.client1, .client2, .client3{
    
    float:left;
    width:25%;
    height:auto;
    border-top:1px solid black;
    box-shadow:0px 0.5px 20px lightgray;
    margin-left:2%;
    padding:2.5%;
    color:gray;
    text-align:center;
    margin-bottom:10%;
    border-radius:10px 10px 10px 10px;
    margin-top:10%;


}



.client1 {
    display:block;
}



.comments {
    overflow-y:hidden;
}

@media screen and (max-width:600px) {
  .client1, .client2, .client3
          {
        width:70%;
        margin-left:5%;
        padding:10%;
        margin-bottom:10%;
    }
    
    
    
   
}




.client1 p, .client2 p, .client3 p

    {

    font-weight:lighter ;
}



.comments img {
    width:100px;
    height:110px;
    border-radius:50%;
    
}


p {
    font-size:15px;
    font-weight:lighter;
}

   
 .gallery {
     text-align:center;
     color:gray;
     overflow:auto;
     width:100%;
     overflow-y:hidden;
 }

.gallery h1 {
  color: red;
}

.images {
    width:45%;
    margin-left:2.5%;
    margin-right:2.5%;
    float:left;
    height:35vh;
    margin-bottom:5%;
  
    }

.images img {
    width:100%;
    height:100%;
}