/* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;400&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,400;0,500;1,400&display=swap');
*{
    padding: 0;
    margin: 0;
    /* box-sizing: border-box; */

}
body{
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
}
::selection {
  background:  #ff5a5a;;
  color: #fff;
}

.container{
    max-width: 1400px;
}
.navbar-nav{
    margin-left: auto;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}
.navbar-nav li:not(last-child){
    padding-right: 1rem;
}

/* .navbar{
    display: flex;
    justify-content: space-between;
} */

.header-section{
   
    padding-top: 0.5rem;
    position: fixed;
    width: 100%;
     z-index: 10; 
     background-color: white;
     padding-bottom: 6px;
    /* border-bottom: none; */
}
#header{
    padding: 16px 40px;
    border-radius: 30px;
    background-color: #ff5a5a;
    border: none;
    font-family: 'Poppins', sans-serif;
    color: white;
    font-weight: bold;
    margin-left: 1rem;
}
#header:hover{
    background-color: #161b37
}

.nav-item{
    margin-top: 0.5rem;
    font-size: 1.4rem;
}

.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
  color:#ff5a5a;
}

.navbar-light .navbar-nav .nav-link {
    color: black;
  }
 

/* drop down menu for page */
.fa-angle-down{
  padding-left: 5px;
}

.drop-down{
    box-shadow: -0.083333333in 0.5pc 1.125pc -7px rgb(25 42 70 / 13%);
    background-color: white;
    position: absolute;
    padding-left: 2rem;
    padding-right: 1rem;
    text-align:  left;
    display: none;
    transition: all 0.04s ease-in-out;
}


.dropdown:hover .drop-down{
    display: block;
}
.drop-down li{
    list-style: none;
    padding-bottom: 1rem;
    text-align:  left;
    padding-left: 2rem;
    padding-right: 1rem;
    padding-top: 0.75rem;

    height: 100%;
    z-index: 2;
}

.drop-down li :hover{
    color: red;
}
.drop-down a{
    text-decoration: none;
    color: black;
}



  .second-wrap{
    padding-top: 1.5rem;
    padding-bottom: 12rem;
  }
  .second-wrap .inner{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-top: 5rem;
  }
  .text{
    
    margin-top: 6rem;
    margin-left: 2rem;
  }
  #second-btn{
    padding: 16px 40px;
    border-radius: 30px;
    background-color: #ff5a5a;
    border: none;
    font-family: 'Poppins', sans-serif;
    color: white;
    font-weight: bold;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    
}
#second-btn:hover{
    background-color: #161b37;
}
  .second-img{
    margin-top: 3.5rem;
    height: 10px
  }
  .second-img img{
    height: 80vh;
  }
  .text h1{
    font-size: 3rem;
    font-weight: bold;
  }
  .para{
    margin-top: 1.5rem;
    margin-bottom: 1rem;
  }
  .text img{
    margin-top: 1rem;
    margin-left: -5px;
    width: 130px;
    height: 50px;
    transition: 0.7s ease-in-out;
    opacity: 0.4;
  }
  .text img:hover{
    transform: scale(0.99);
    opacity: 1;
  }
.heading{

    padding-bottom: 4rem;
}
  .heading h1{
    margin-top: 3rem;
    font-size: 3rem;
    font-weight: 500;
    margin-left: 1.5rem;
    letter-spacing: 1px;
    width: 100%;
  }
  .card img{
    width:5rem ;
    height: 3.5rem;
    margin-left: 1rem;
  }
 .card-section .card{
    border: none;
    
  }
  .card-section{
    margin: 0px 1.5rem;
    border: none;
    padding-bottom: 2rem;
  }


  .project-detail{
   margin-top: 2rem;
  }
  .project-img{
    width: 45%;
    background-color: #fdb7b7;
    margin: 0px 1rem;
    height: 60vh;
    position: relative;
  }
  .first-img{
    position: absolute;
    width: 40%;
    height: 65%;
    /* transform: translateY(50px); */
  }
  .sec-img{
    position: relative;
    top: 95px;
    left: 85px;
    width: 65%;

    /* transform: translate(-120px, 75%); */
  }
  .third-img{
    position: absolute;
    width: 40%;
    top: 55px;
    left: 320px
    /* width: 50%;
    height: 50%; */
    /* transform: translate(195px, -55%); */
  }

  .project-inner{
    display: flex;
    flex-wrap: wrap;
  }
  .project-text{
    width: 45%;
    margin: auto 1rem;
  }
  .project-text a{
    
    color:#ff5a5a;
  }
  .underline{
   
    border-bottom: 1px solid #ff5a5a ;
    padding-bottom: 5px;
    font-weight: bold;
    /* content: '';
    display: block;
    width: 0;
    height: 2px;
    background:#ff5a5a; */
   
  }
  .underline:hover{
    color: grey;
    border-bottom:1px solid grey;
  }

  .rank-website{
    padding-top: 5rem;
    margin: 1rem 1rem;
    padding-bottom: 40px;
   
  }
  .rank-inner{
    display: flex;
    flex-wrap: wrap;

  }
  .rank-text{
    width: 55%;
    margin: auto 0px;
    
  }
  .ranking-imgs{
    width: 45%;
    background-color: #ffd2b1;
    position: relative;
    height: 60vh;
  }
.first{
    width: 50%;
    position: absolute;
    top:19px;
    left: 190px;
    
}
.sec{
    width: 50%;
    position: absolute;
    top:100px;
    left: 60px;
    
    
}
.three{
    width: 55%;
    position: absolute;
    top:160px;
    left: 220px;
}
.rank-inner-text .underline{

   
        border-bottom: 1px solid #ff5a5a ;
        padding-bottom: 5px;
        font-weight: bold;
        /* content: '';
        display: block;
        width: 0;
        height: 2px;
        background:#ff5a5a; */
       
      }
      .rank-text a{
        color:#ff5a5a;
      }

      .budget-plan{
        background-color:#FFFCF9;
        margin: 0rem 1rem;
        padding-bottom: 6rem;
      }
      .plan-inner{
        display: flex;
        flex-wrap: wrap;
      }

      .plan-text{
        width: 24%;
        margin: auto 0px;
      }

      .plan-card{
        width: 70%;
        display: inline;
        /* display: flex; */
        /* flex-wrap: wrap; */
      }
      .st-plan{
        width: 50%;
        padding: 5px;
          box-shadow: -0.083333333in 0.5pc 1.125pc -7px rgb(25 42 70 / 13%);
         border-radius: 40px;

       

      }
      .st-plan li{
          list-style-type:none ;
      }

      .fa-circle-check{
        background-color: #61ce70;
      }
      .starter-plan{
        display: flex;
        margin-left: 2rem;
      }

      .plan-heading{
        background-color: #d8d8d8;
        padding: 4px;
          border-radius: 40px;
        margin-bottom: 1rem;
        width: 100%;
        text-align: center;

      }
      .pre-heading{
        text-align: center;
        background: #fdb7b7;
        padding: 4px;
        width: 100%;
          border-radius: 40px;
          margin-bottom: 1rem;
      }

      .pre-heading{

      }
    .plan-card  .card{
        border: 40px solid white;
      }
      #left-card{
        margin-top: 1.5rem;
      }
      #right-card{
        margin-left: -3rem;
      }


      #right-card-btn{
        padding: 12px 30px;
        border-radius: 30px;
        background-color: #ff5a5a;
        border: none;
        font-family: 'Poppins', sans-serif;
        color: white;
        font-weight: bold;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        max-width:150px ;
        margin: 0px auto;
      }
      #left-card-btn{
        padding: 12px 30px;
        border-radius: 30px;
        background-color: #ff5a5a;
        border: none;
        font-family: 'Poppins', sans-serif;
        color: white;
        font-weight: bold;
        max-width:150px ;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        margin: 0px auto;
      }
      #left-card-btn:hover{
        background-color: #161b37;
      }
      #right-card-btn:hover{
        background-color: #161b37;
      }

      .enterpre{
        padding-top: 4rem;
      }
      .enter-heading h1{
        text-align: center;
        
        
      }
      .enter-heading{
        text-align: center;
      }
      .enter-para{
        padding-top: 1rem;
      }

      .enter-img img{
        width: 100%;
      }

      .enter-inner-section{
        padding-top: 2rem;
        display: flex;


      }

      .fa-check{
        color: #ff5a5a;
        padding-right: 12px;
      }

      .enter-pre-text{
        padding-top: 2rem;
      }
      .enterpre{
        padding-bottom:6rem;
      }

      .find-heading{
        text-align: center;
      }

      .find-section{
        background-color:#ffd2b1;
        padding-top: 6rem ;
        padding-bottom: 6rem;
      }

      .find-text{
        text-align: center;
      }

      #find-btn{
        padding: 16px 30px;
        border-radius: 30px;
        background-color: #ff5a5a;
        border: none;
        font-family: 'Poppins', sans-serif;
        color: white;
        font-weight: bold;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
       
       
      }
      .find-inner-content button{
       
      }
      .find-inner-content{
        position: relative;
      }
      #find-btn{
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        /* -ms-transform: translate(-50%, -50%); */
        transform: translate(-50%, 120%);
      }
      #find-btn:hover{
        background-color: #161b37;
      }

      .footer-wrap{
          color: white;
          background-color: #161b37;
      }
      .row{
          justify-content: space-between;
          display: flex;
          flex-wrap: wrap;

      }

      .footer-content{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 80vh;

       
        padding-top: 7rem;
      }

      .footer-col li{
          list-style: none;

      }

.footer-col ul{
    display: flex;
    justify-content: space-between;
}

.footer-col{
    width: 15%;
}

 .fa-brands{
    font-size: 1.50rem;
     padding-top: 2rem;

}




      .footer-col a{
          text-decoration: none;
          padding-bottom: 2rem;
          color: white;
      }
      .karma{
        width: 20%;
      }
      .karma img{
        padding-left: 2rem;
      }
      .karma ul{
        display: flex;
        padding-left: 2rem;

      }
      .karma ul li{
        list-style-type: none;
        padding: 6px;
        background-color: #161b37;
      }
      .karma ul li{
        cursor: pointer;
      }
      .karma p{
        
        padding-left: 2rem;
        color: white;
        
      }
      .karma :first-child(p){
        margin-top: 2rem;
      }

      /* .company{
        width: 20%;
        padding-left: 1rem;
      }
      .company a{
        padding-top: 16px;
        color: white;
      }
      
      .services{
        width: 20%;
        padding-left: 1rem;
      }
      .services a{
        padding-bottom: 6px;
        color: white;
      }
      
      .resources{
        width: 20%;
        padding-left: 1rem;
      }
      .resources a{
        padding-bottom: 6px;
        color: white;
      }
      
      .subscribe{
        width: 20%;
      }
      .subscribe input{
        border-radius: 30px;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        border: none;
        
      } */
      /* .Sub-btn{
        margin-top: 1rem;
        border-radius: 30px;
       padding: 10px 70px;
        background-color: #ff5a5a;
        border: none;
        text-align: center;
      }

      .Sub-btn:hover{
        background-color:white;
      } */

      .footer-wrap .row .footer-col h4 {
        padding-bottom: 2rem;
        text-align: start;
    }

@media (max-width:1100px){
    .heading h1{
        margin-top: 25rem;
        margin-bottom: 2rem;
        text-align: center;
    }
}
      @media (max-width:1029px) {
        .third-img{
          position: absolute;
          width: 40%;
          top: 55px;
          left: 220px
          /* width: 50%;
          height: 50%; */
          /* transform: translate(195px, -55%); */
        }
        .sec{
          width: 40%;
          transform: translate(-100px, 25%);
      }
      .three{
          width: 30%;
          transform: translate(120px, -25%);
      }

          .heading h1{
              margin-top: 25rem;
              margin-bottom: 4rem;
              text-align: center;
          }
    }

      @media(max-width:1028px){
        .first{
          width: 50%;
          position: absolute;
          top:25px;
          left: 150px;
          
      }
      .sec{
          width: 50%;
          position: absolute;
          top:50px;
          left: 140px;
          
          
      }
      .three{
          width: 55%;
          position: absolute;
          top:200px;
          left: 60px;
      }

      }




    @media (max-width:930px){
        
      .first{
      
        
        top:25px;
        left: 130px;
        
    }
    .sec{
       
        top:50px;
        left: 140px;
        
        
    }
    .three{
       
        top:180px;
        left: 30px;
    }




      
      
    .plan-text{
      width: 100%;
    
    }
    .plan-inner{
      display: block;

      
    }

        .footer-col{
            width: 25%;

        }
    }


    @media (max-width:998px){
        .heading h1{
            margin-top: 25rem;
            margin-bottom: 2rem;
            text-align: center;
        }

    }





@media (max-width:800px){
    .enter-inner-section{
        flex-wrap: wrap;


    }

    #find-btn {

        top: 70%;


    }


    .first{
      
        
      top:25px;
      left: 110px;
      
  }
  .sec{
     
      top:40px;
      left: 125px;
      
      
  }
  .three{
     
      top:160px;
      left: 5px;
  }



}


@media (max-width:720px){
  
.three{
   
    top:150px;
    left: 5px;
}

}



@media (max-width:787px){
    .footer-col{
        width: 50%;

    }



    .footer-wrap .row .footer-col h4{
        text-align: start;
    }

    .first-img{
      position: absolute;
      width: 40%;
      height: 50%;
      top:20px;
      /* transform: translateY(50px); */
    }
    .sec-img{
      position: relative;
      top: 95px;
      left: 55px;
      width: 65%;
  
      /* transform: translate(-120px, 75%); */
    }
    .third-img{
      position: absolute;
      width: 40%;
      top: 55px;
      left: 170px
      /* width: 50%;
      height: 50%; */
      /* transform: translate(195px, -55%); */
    }
}

@media (max-width:656px){

  .rank-text{
width: 100%;
  }
  .ranking-imgs{
    width: 100%;
  }

  .project-text{
    width: 100%;
    padding-top: 2rem;
  }


  .first{
      
       width: 40%; 
    top:25px;
    left: 190px;
    
}
.sec{
  width: 40%; 
    top:40px;
    left: 155px;
    
    
}
.three{
  width: 50%; 
    top:210px;
    left: 55px;
}


  .project-img{
    width: 100%;
    background-color: #fdb7b7;
    margin: 0px 1rem;
    height: 60vh;
    position: relative;
  }
  .first-img{
    position: absolute;
    width: 40%;
    height: 60%;
    top:20px;
    
  }
  .sec-img{
    position: relative;
    top: 105px;
    left: 55px;
    width: 65%;

   
  }
  .third-img{
    position: absolute;
    width: 40%;
    top: 55px;
    left: 240px
    


}
}


@media(max-width:584px){
  .first{
      
    width: 40%; 
 top:25px;
 left: 190px;
 
}
.sec{
width: 40%; 
 top:40px;
 left: 185px;
 
 
}
.three{
width: 50%; 
 top:190px;
 left: 55px;
}
}

@media (max-width:500px){

    #find-btn {

        top: 80%;


    }

    .first{
      
      width: 40%; 
   top:25px;
   left: 190px;
   
  }
  .sec{
  width: 40%; 
   top:40px;
   left: 195px;
   
   
  }
  .three{
  width: 50%; 
   top:170px;
   left: 55px;
  }
}

@media (max-width:442px){
  .third-img{
    position: absolute;
    width: 40%;
    top: 55px;
    left: 180px
    


}
.sec{
  width: 40%; 
   top:40px;
   left: 215px;
   
   
  }
  .three{
  width: 50%; 
   top:150px;
   left: 55px;
  }
}
@media (max-width:390px){
  
  .first{
      
    width: 40%; 
 top:25px;
 left: 120px;
 
}
  
  .sec{
    width: 40%; 
     top:40px;
     left: 155px;
     
     
    }
    .three{
    width: 50%; 
     top:140px;
     left: 10px;
    }
}

@media (max-width:366px){
  .third-img{
    position: absolute;
    width: 40%;
    top: 55px;
    left: 180px
    


}
.first-img{
  position: absolute;
  width: 40%;
  height: 50%;
  top:40px;
  left: 35px;
  
}
.sec-img{
  position: relative;
  top: 115px;
  left: 60px;
  width: 65%;

 
}
.third-img{
  position: absolute;
  width: 40%;
  top: 75px;
  left: 150px
  


}
}
@media (max-width:330px){
  .three{
    left:0px;
    top:115px;

  }
}