* {
     margin: 0;
     padding: 0;
     font-family: 'Poppins' , sans-serif;
}
body{
     
     background: black;
     color: #fff;
}
html{
     scroll-behavior: smooth;
}

/* header start */
#header{
  width: 100%;
  height: 100vh;
  background-image: url("");
  background-size: cover;
  background-position:  center;
}

.container {
  padding: 10px 10%;
 

}

nav{
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
}
.logo{
     width: 140px;;
}

 nav ul li {
     display: inline-block;
     list-style: none;
     margin: 10px 20px;
 }

 nav ul li a{
     color: white;
     text-decoration: none;
     font-size: 18px;
     position: relative;
 }

nav ul li a::after{
     content: '';
     width: 0;
     height: 3px;
     background: #ff004f;
     position: absolute;
     left: 0;
     bottom: -6px;
     transition: 0.5s;
}
span{
     color:#ff004f;
}
nav ul li a:hover::after{
     width: 100%;
}
.header-text{
     margin-top: 20%;
     font-size: 30px;
}
.header-text h1{
     font-size: 60px;
     margin-top: 20px;
}
/* header end */



/* about start*/


#about{
     padding: 80px 0;
     color: #ababab;
}
.row{
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;

}
.about-col-1{
     flex-basis: 35%;
}

.about-col-1 img{
     width: 100%;
     border-radius: 15px;
}
.about-col-2{
     flex-basis: 60%;
}

.sub{
     font-size: 60px;
     font-weight: 600;
     color: white;
}

.tab-title{
     display: flex;
     margin: 20px 0 40px;
}
.tab-link{
     margin-right: 50px;
     font-size: 18px;
     font-weight: 500;
     cursor: pointer;
     position: relative;
}

.tab-link::after{
     content: '';
     width: 0;
     height: 3px;
     background: #ff004f;
     position: absolute;
     left: 0;
     bottom: -8px;
     transition: 0.5s;
}
.tab-link.active-link::after{
     width: 50%;
}
.tab-content ul li {
     list-style: none;
     margin: 10px 0;
}
.tab-content ul li span {
   color:#b54769;
   font-size: 14px;

}

.tab-content{
     display: none;
}
.tab-content.active-tab{
     display: block;
}


/* services */

#services{
     padding: 30px 0;

}
.services-list{
     display:grid;
     grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
     grid-gap:40px;
     margin-top:50px;
     
}

.services-list div{
     background: #262626;
     padding: 40px;
     font-size: 13px;
     font-weight: 300;
     border-radius: 10px;
     transition: backgroung 0.5s , transform 0.5s;
}

.services-list div i{
     font-size: 50px;
     margin-bottom: 30px;
}

.services-list div h2{
     font-size: 30px;
     font-weight: 500;
     margin-bottom: 15px;

}

.services-list div a{
     text-decoration: none;
     color: white;
     font-size: 12px;
     margin-top: 20px;
     display: inline-block;
}

.services-list div:hover{
   background: #ff004f;
   transform: translateY(-10px);
}


/* services end */



/* contact */

.contact-left{
     flex-basis: 35%;
}
.contact-right{
     flex-basis: 60%;
}
.contact-left p{
     margin-top: 30px;
}
.contact-left p i{
     color: #ff004f;
     margin-right: 15px;
     font-size: 25px;

}
.social-icon{
     margin-top: 30px;

}
.social-icon a{
text-decoration: none;
font-size: 30px;
margin-right: 15px;
color: #ababab;
display: inline-block;
transition:transform 0.5s ;
}
.social-icon a:hover{
     color: #ff004f;
     transform: translateY(-5px);

}

.btn{
     display: block;
     margin: 50px auto;
     width: fit-content;
     border: 1px solid #ff004f;
     padding: 14px 50px;
     border-radius: 6px;
     text-decoration: none;
     color: white;
     transition: background 0.5s;
}
.btn:hover{
     background: #ff004f;

}
.btn.btn2{
     display: inline-block;
     background: #ff004f;

}

.contact-right form{
     width: 100%;
}
form input, form textarea{
     width: 100%;
     border: 0;
     outline: 0;
     background: #262626;
     padding: 15px;
     margin: 15px 0;
     color: #fff;
     font-size: 18px;
     border-radius: 6px;

}
form .btn2{
     padding: 14px 60px;
     font-size: 18px;
     margin-top: 20px;
     cursor: pointer;
}
.copyrigth{
     width: 100%;
     text-align: center;
     padding: 25px 0;
     background: #262626;
     font-weight: 300;
     margin-top: 20px;
}
.copyrigth i{
     color: #ff004f;
}
nav .fas{
     display: none ;
}
/* css for small scr */

@media only screen and (max-width: 600px){
     #header{
          background-image: url("");
     }
     .header-text{
          margin-top: 100%;
          font-size: 16px;
     }
     .header-text h1{
          font-size: 30px;
     }
     nav .fas{
          display: block;
          font-size: 25px;
     }
     
     nav ul {
          background: #ff004f;
          position: fixed;
          top: 0;
          right: -200px;
          width: 200px;
          height: 100vh;
          padding-top: 50px;
          z-index: 2;
          transition: right 0.5s;
     }
     nav ul li{
          display: block;
          margin: 25px;
     }
     nav ul .fas{
          position: absolute;
          top: 25px;
          left: 25px;
          cursor: pointer;
     }
     .sub{
          font-size: 40px;
     }
     .about-col-1  .about-col-2{
          flex-basis: 100%;
     }
     .about-col-1 {
          margin-bottom: 30px;
          }
     .about-col-2 {
          font-size: 14px;
     }

     .tab-title{
          font-size: 16px;
          margin-right: 20px;
     }
     .contact-right .contact-right{
          flex-basis: 100%;
     }

     .copyrigth{
          font-size: 14px;
     }
}

#msg{
     color: #61b752;
     margin-top: -40px;
     display: block;
}