style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

@font-face {
    font-family: pp;
    src: url("pp.ttf");
}

body{
    background-color:#171717 ;
    height: 97vh;
    font-family: pp;
}

nav{
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.logo img{
    width: 93px;
}

.social-link{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
}

.link a{
    color:#fff;
    text-decoration: none;
    font-family: pp;
    scroll-behavior: smooth;
    transition: all 0.4s ease;
}

.link a:hover{
    color:blue;
    border-radius: 20px;
}

.btn{
    padding: 6px 7px;
    border-radius: 10px ;
    border: 1px solid  aliceblue;
    background-color: transparent;
    color:#fff;
    font-family: pp;
    font-size: 0.7rem;
    transition: all 0.3s ease;
}

.btn:hover{
    color: blue ;
    background-color: #fff;
}

/* this is the about section for personal information*/

.about{
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr ));
    gap:15rem;
    padding-top: 50px;
    padding-left: 110px;
}

.info{
    padding-top: 10px;
    padding-left: 17px;
}
.info h1{
    font-family: pp;
    color: blue;
}
.info h1 span{
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0.5px ;
}

.info p{
    color:#ccc;
    font-size: 1rem;
    font-family: pp;
    gap: 10px;
    margin-top:3px;
}

.about .btn2{
    padding: 6px 7px;
    border-radius: 10px ;
    border: 1px solid  aliceblue;
    background-color: transparent;
    color:#fff;
    font-family: pp;
    margin-top: 1rem;
    font-size: 0.7rem;
    transition: all 0.3s ease;
}

 .about .btn2:hover{
    color: blue ;
    background-color: #fff;
}

 .wrap{
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr ));
    gap:2rem;
    padding-top: 50px;
    padding-left: 90px;
  
}
 h2{
    text-align: center;
    font-family: pp;
    color:#ccc;
    margin-top: 50px;
}

.fea h3{
    color: #fff;
    font-family: pp;
    text-align: center;
    padding: 4px ;
    margin-bottom: 5px;
}

.fea {
    background-color: #222222;
    text-align: center;
    height: 240px ;
    border-radius: 20px;
    transition: all 0.5s ease;
}

.fea:hover{
    border:2px solid #fff;
    transform: scale(1.02);
    background-color: #323232;

}

.fea .btn3{
    padding: 5px 7px;
    border-radius: 10px ;
    border: 1px solid  aliceblue;
    background-color: transparent;
    color:#fff;
    font-family: pp;
    margin-top: 1.5rem;
    font-size: 0.7rem;
    bottom: 2px;
    transition: all 0.3s ease;
  
}
.fea p{
    color:#ccc;
    font-family: pp;
    font-size: 12px;
    padding: 12px;
}

.fea .btn3:hover{
    color: blue ;
    background-color: #fff;
    
}

.fea span {
    color:#fff;
    font-size: 29px;
    background-color: blue ;
    padding: 4px;
    border-radius: 9px;
    margin-top: 19px;
}

/*This is the pricing section*/

.container {
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr ));
    gap:2rem;
    
    padding-top: 50px;
    padding-left: 90px;
  
}

.plan{
    background-color: #222222;
    text-align: center;
    height: 300px ;
    width: 250px;
    border-radius: 20px;
    transition: all 0.5s ease;
}

.plan:hover{
    border:2px solid #fff;
    transform: scale(1.02);
    display: flex;
    flex-direction: column;
    background-color: #323232;

}

.plan h3{
    border-bottom: 2px dashed #fff;
    border-width: 2px;
    color: #fff;
    font-family: pp;
    text-align: center;
    padding: 4px ;
    padding-top:10px ;
    margin-bottom: 5px;
}
.plan h2{
    font-size: 1.7rem;
    margin-bottom:10px ;
}

.plan p{
    text-align: left;
    padding-left: 10px;
    color: #fff;
    padding-top: 1px;
    font-size: 12px;
    font-family: pp;
}

.plan .btn-p1 button {
    margin: 20px;
    margin-top: 70px;
    border-radius: 5px;
    background-color: blue;
    color:#fff;
    outline: none;
    text-decoration: none;
    padding: 2px 5px ;
    border: 1px solid blue;
}

.plan .btn-p1  button a, .btn-p2 button a , .btn-p3 button a{
    text-decoration: none;
    color: #fff;
    font-family: pp;
}

.plan .btn-p2 button{
    border-radius: 5px;
    margin: 20px;
    margin-top: 50px;
    background-color: blue;
    color:#fff;
    outline: none;
    text-decoration: none;
    padding: 2px 5px ;
    border: 1px solid blue;
}
.plan .btn-p3 button{
border-radius: 5px;
margin: 11px;
background-color: blue;
color:#fff;
outline: none;
text-decoration: none;
padding: 2px 5px ;
border: 1px solid blue;
}

/* this the Footer css*/
.col img{
    width: 100px;
    margin-top: -20px;
}


.foot{
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr ));
    gap:2rem;
    padding-top: 50px;
    margin-top: 60px;
    padding-left: 90px;
}

.col span a, span{
    color: #fff;
    text-decoration:none;
    transition: all 0.3s ease;
}


.col h4{

}

.col  span a:nth-child(2), span:nth-child(3), span:nth-child(4)
{
    color: #fff;
    margin-left: 13px;
}

.social{
    margin-top: -20px;
}

.col span :hover{
    color: blue ;
    background-color: #fff;
    padding: 4px 4px ;
    border-radius: 50%;
}

.col span:nth-child(2):hover{
    color: black;
    background-color: #fff;
    padding: 4px 4px ;
    border-radius: 50%;
}

.col span:nth-child(3):hover{
    background-color: #fff;
    color: #f15245 ;
}

.col span:nth-child(4):hover{
    background-color: #fff;
    color:#25D366;
}

.col h4{
    color: #fff;
    margin-bottom: 10px;
}

.col p a{
    text-decoration: none;
    color:blueviolet;
    font-size: 15px;
}

.col input{
    color: #fff;
    background-color: transparent;
    outline: none;
    border: 1px solid white  ;
    padding: 5px 10px ;
    margin-top: 7px;
    border-radius: 10px;
}

.col input::-webkit-input-placeholder{
    color:#fff;
    font-family: pp;
    font-size: 12px;
}

.col button{
    margin: 10px;
    padding: 3px 5px ;
    font-family: pp;
    background-color: royalblue;
    border-radius: 5px;
    border: none ;
    outline: none ;
}

.col button a{
    color:#fff;
    text-decoration: none ;
    font-size: 12px;
}

.col button:hover{
    color: royalblue;
    background-color: #fff;
}

.col button a:hover{
    color: royalblue;
}
/* This is responsive ness */

@media only screen and (max-width: 767px) {
  
  nav .btn{
   display: none;  
  }
    body {
        padding-left: 20px;
        padding-right: 20px;
    }

    nav {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logo img {
        width: 65px;
        /* Adjust as needed */
    }
     
     nav .link{
       display: none;
     }

    .about,
    .wrap,
    .container,
    .foot {
        padding-left: 20px;
        padding-right: 20px;
    }

  
    .wrap,
    .fea,
    
    .foot {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .info,
    h2,
    .fea h3,
    .plan h3,
    .plan h2,
    .col h4 {
        text-align: center;
    }

    .col img {
        width: 70px; /* Adjust as needed */
        margin-top: 0;
    }

    .col span {
        margin-left: 0;
    }

    .col input {
        margin-top: 10px;
    }
    
    .about {
       display: flex;
flex-direction: column-reverse; 
      
    }
    
    .about .man img{
      width:340px;
      margin-bottom: -240px;
    }
    
    .foot .col span {
      border-radius: 50% 50%;
      
    }
    
    .foot .col span:nth-child(2){
      margin-left: -1px;
    }
    
     .copy p {
      font-size: 12px;
      font-family: pp;
      color: white;
      text-align: center;
    }

    .col span:hover{
        color:blue:
        
    }
    
.plan{
    background-color: #222222;
    text-align: center;
    height: 300px ;
    width: 250px;
    margin-left:35px;
    border-radius: 20px;
    transition: all 0.5s ease;
}

.plan:hover{
      
border:2px solid #fff;
background-color: #323232;

}

}