*{
    margin: 0;
    padding: 0;
}

body{
    background-color: #f3f3f3;
    font-family: 'jost', sans-serif;
    overflow-x: hidden;
}

nav{
    position: fixed;
    top: 0px;
    width: 100%;
    height: 86px;
    z-index: 1;
    background-color: #f3f3f3;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.logo{
  position: fixed;
  top: 9px;

}
nav ul{
    display: flex;
    list-style: none;
    justify-content: right;
    font-family: 'jost', sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    color: #333333;
    margin: 5px 11px;
    transition: all 0.5s ease-in-out;

}
nav ul li{
    padding: 24px 24px;
}

nav ul li a{
    text-decoration: none;
    color: #333333;
  
}
nav ul li a:hover{
    color: #2F80ED;
}
#contact{
    position: relative;
    padding: 0px 22px;
    top: 4px;
    height: 67px;
    border-radius: 9px;
    font-size: medium;
    font-weight: 700;
    border: none;
    cursor: pointer;
    background-color: #2F80ED;
    transition: all 0.5s ease-in-out;
}
#contact a{
    text-decoration: none;
    color: #f3f3f3;
}
#contact:hover{
    background-color: #002E6C;
}
.fa-bars{
    visibility: hidden;

}
.contact{
    background-image: url('img/Group\ 70.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 400px;
}

.contact h1{
    padding-top: 293px;
    padding-left: 19px;
    font-size: 30px;
    font-weight: 700;
    color: #f3f3f3;
    font-family: 'jost', sans-serif;
}

.input-container {
   
    margin: 10px 60px;
  }
  
  label {
    display: block;
    margin-bottom: 5px;
    color: #333;
  }
  
  .input[type="email"] {
    padding: 20px 20px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    background-color: #ffffff;
    color: #333;
    width: 400px;
    outline: none;
  }
  
  .underline {
    
    width: 0;
    height: 2px;
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    transition: width 0.3s;
  }
  .input[type="email"]:focus + .underline {
    width: 430px;
  }
  
  
  
  @keyframes floating-label {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
  
    100% {
      transform: translateY(-25px);
      opacity: 0;
    }
  }
  
  .input[type="email"]:placeholder-shown + label {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 14px;
    color: #777;
    pointer-events: none;
    transition: transform 0.3s, font-size 0.3s, color 0.3s;
  }
  
  .input[type="email"]:focus:not(:placeholder-shown) + label {
    transform: translateY(-25px);
    font-size: 12px;
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    animation: floating-label 0.3s forwards;
  }

  .all{
 
    display: grid;
    grid-template-rows: repeat(auto-fit, 1fr);
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 50px;
  
  }

  
  label {
    display: block;
    margin-bottom: 5px;
    color: #333;
  }
  
  .input[type="text"] {
    padding: 20px 20px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    background-color: #ffffff;
    color: #333;
    width: 400px;
    outline: none;
  }
  
  .underline {
  
    width: 0;
    height: 2px;
    background-color: #333333;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    transition: width 0.3s;
  }
  
  .input[type="text"]:focus + .underline {
    width: 430px;
  }


  
  
  @keyframes floating-label {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
  
    100% {
      transform: translateY(-25px);
      opacity: 0;
    }
  }
  
  .input[type="text"]:placeholder-shown + label {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 14px;
    color: #777;
    pointer-events: none;
    transition: transform 0.3s, font-size 0.3s, color 0.3s;
  }
  
  .input[type="text"]:focus:not(:placeholder-shown) + label {
    transform: translateY(-25px);
    font-size: 12px;
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    animation: floating-label 0.3s forwards;
  }

  label {
    display: block;
    margin-bottom: 5px;
    color: #333;
  }
  
  .input[type="number"] {
    padding: 20px 20px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    background-color: #ffffff;
    color: #333;
    width: 400px;
    outline: none;
  }
  
  .underline {
  
    width: 0;
    height: 2px;
    background-color: #333333;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    transition: width 0.3s;
  }
  
  .input[type="number"]:focus + .underline {
    width: 430px;
  }


  
  
  @keyframes floating-label {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
  
    100% {
      transform: translateY(-25px);
      opacity: 0;
    }
  }
  
  .input[type="number"]:placeholder-shown + label {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 14px;
    color: #777;
    pointer-events: none;
    transition: transform 0.3s, font-size 0.3s, color 0.3s;
  }
  
  .input[type="number"]:focus:not(:placeholder-shown) + label {
    transform: translateY(-25px);
    font-size: 12px;
    background-color: #4158D0;
    background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
    animation: floating-label 0.3s forwards;
  }

  .conv-btn{
    --width: 350px;
    --timing: 2s;
    border: 0;
    width: var(--width);
    padding-block: 1em;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
    background: #2F80ED;
    transition: all 0.2s;
    border-radius: 3px;
    cursor: pointer;
    padding: 28px;
    margin-top: 50px;
    margin-left: 58px;

}
.conv-btn:hover {
    background-image: linear-gradient(
      to right,
      rgb(250, 82, 82),
      rgb(250, 82, 82) 16.65%,
      rgb(190, 75, 219) 16.65%,
      rgb(190, 75, 219) 33.3%,
      rgb(76, 110, 245) 33.3%,
      rgb(76, 110, 245) 49.95%,
      rgb(64, 192, 87) 49.95%,
      rgb(64, 192, 87) 66.6%,
      rgb(250, 176, 5) 66.6%,
      rgb(250, 176, 5) 83.25%,
      rgb(253, 126, 20) 83.25%,
      rgb(253, 126, 20) 100%,
      rgb(250, 82, 82) 100%
    );
    animation: var(--timing) linear dance6123 infinite;
    transform: scale(1.1) translateY(-1px);
  }
  
  @keyframes dance6123 {
    to {
      background-position: var(--width);
    }



    
  }

  .social{
    margin: 50px 0px;
 }
 #fontchg h1{
    margin-top: 15px;
    color: #ffffff;
 }
 #fontchg p{
    margin-top: 9px;
    font-size: 34px;
    padding: 10px 130px;
    text-align: center;
 }
 #colors{
    color: #ffffff;
 }
 .iconsocial{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 53px;
 }
 .iconsocial a{
    text-decoration: none;
    color: #333333;
 }
 .iconsocial a:hover{
    color: #ffffff
 }
 .address{
    margin: 21px 22px;
    font-size: 30px;
 }

 .foot{
    display: flex;
    justify-content: space-around;
 }
 .designed{
    margin: 30px;
    text-align: center;
    color: #333333;
    font-size: 25px;
    font-weight: 700;
 }
 .designed a{
    text-decoration: none;
    color: #333333;
 }
 .designed a:hover{
    color: #2F80ED
 }

 .securess{
    background-image: url("img/Desktop_bg-4dbf2c5439a471e08f0e7ef245a79664f033431b914125ba80217eb060675d91.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 400px;
    width: 89%;
    margin-left: 66px;
    margin-right: 22px;
    border-radius: 13px;
    margin-bottom: 10px;
    display: grid;
    place-content: center;
    gap: 22px;
}
.securess h2{
   text-align: center;
   padding-top: 40px;
   font-size: 48px;
   font-weight: 400;
   color: #f3f3f3;
}
.securess h1{
   text-align: center;
   padding-top: 0px;
   font-size: 48px;
   font-weight: 700;
   color: #002E6C;
}
  
  


@media screen and (max-width: 1100px) {
    .logo img{
        height: 58px;
        margin-top: 6px;
        
    }
    nav ul li{
        padding: 24px 16px;
    }

    .input[type="email"]{
        width: 329px;
    }
    
    .input[type="email"]:focus + .underline {
        width: 360px;
      }

      .input[type="text"]{
        width: 329px;
    }
    
    .input[type="text"]:focus + .underline {
        width: 360px;
      }

      .input[type="number"]{
        width: 329px;
    }
    
    .input[type="number"]:focus + .underline {
        width: 360px;
      }

      
    #fontchg h1{
        margin-top: -60px;
     }
     #fontchg p{
        margin-top: -14px;
        font-size: 27px;
     }
     .phone img{
        height: 50px;
    margin-top: 31px;
    margin-right: 31px;
     }

     .securess{
        width: 85%;
    }


    

}


@media screen and (max-width: 975px) {
    nav ul{
        flex-direction: column;
        justify-content: left;
        margin-left: 0px;
        background-color: #f3f3f3;
        height: 74vh;
        width: 100%;
        margin-top: -1289px;
        transition: 0.5s ease-in-out;
        

    }

    .fa-bars {
        color: #241C2D;
        float: right;
        font-weight: 900;
        font-size: 30px;
        position: fixed;
        top: 30px;
        right: 5px;
        width: 40px;
        cursor: pointer;
        visibility: visible;
    
   }
   #contact{
       background: none;
       color: #333333;
       display: flex;
    justify-content: flex-start;
    margin-left: -21px;
   }
   #contact a{
       color: #333333;
   }
   #contact:hover{
       background: none;
   }
   .active{
    margin-top: 63px;
   }

   .input-container {
    margin: 11px 31px;
}

.input[type="email"]{
    width: 279px;
}

.input[type="email"]:focus + .underline {
    width: 320px;
  }

  .input[type="text"]{
    width: 279px;
}

.input[type="text"]:focus + .underline {
    width: 320px;
  }

  .input[type="number"]{
    width: 279px;
}

.input[type="number"]:focus + .underline {
    width: 320px;
  }
  .conv-btn{
    margin-left: 25px;
  }
  #fontchg p{
    font-size: 21px;
}
#fontchg h1{
    font-size: 31px;
}
.iconsocial{
    font-size: 38px;
}
.foot{
    flex-direction: column;
}
#margin1{
    margin-left: 50px;
}
.securess h1{
    font-size: 40px;
}

  


}


@media screen and (max-width: 600px) {
    .logo{
        margin-left: 0px;
        margin-top: 10px;
    }
    .logo img{
        height: 40px;
        margin-top: inherit;
    }

    .input[type="email"] {
        width: 400px;
    }
    .input-container{
        margin: 22px 14px;
    }

    .input[type="email"]:focus + .underline {
        width: 440px;
      }

      

      .all{
        display: grid;
        grid-template-rows: repeat(auto-fit, 1fr);
        grid-template-columns: 1fr;
        gap: 0px;
        margin-top: 10px;
      }

      .input[type="text"]{
        width: 400px;
    }
    
    .input[type="text"]:focus + .underline {
        width: 440px;
      }

      .input[type="number"]{
        width: 400px;
    }
    
    .input[type="number"]:focus + .underline {
        width: 440px;
      }
      .conv-btn{
        width: 300px;
        font-size: 15px;
    }

    #fontchg p{
        font-size: 19px;
        padding: 10px 20px;
    }
    .iconsocial{
        font-size: 35px;
    }
    #margin{
        margin: 10px ;
        
    }
    #fontchg h1{
        margin-top: -18px;
    }
    .address{
        font-size: 20px;
        
    }
   
    .phone img{
        height: 45px;
    }
    .phone{
        margin: 6px 15px;
    }
    #margin1{
        margin-left: 10px;
    }

    .securess h2{
        font-size: 35px;

    }
    .securess h1{
        font-size: 40px;
    }
    .securess{
        margin-left: 25px;
        width: 89%;
        display: grid;
        place-items: center;
    }
      
      

}


@media screen and (max-width: 435px){
    .input[type="email"] {
        width: 342px;
    }
    .input-container{
        margin: 22px 14px;
    }
    .input[type="email"]:focus + .underline {
        width: 370px;
      }

      .input[type="text"]{
        width: 342px;
    }
    
    .input[type="text"]:focus + .underline {
        width: 370px;
      }

      .input[type="number"]{
        width: 342px;
    }
    
    .input[type="number"]:focus + .underline {
        width: 370px;
      }
      .conv-btn{
        font-size: 14px;
    }


}

@media screen and (max-width: 395px) {

    .input[type="email"] {
        width: 300px;
    }

    .input[type="email"]:focus + .underline {
        width: 330px;
      }

      .input[type="text"] {
        width: 300px;
    }

    .input[type="text"]:focus + .underline {
        width: 330px;
      }

      .input[type="number"] {
        width: 300px;
    }

    .input[type="number"]:focus + .underline {
        width: 330px;
      }
}


@media screen and (max-width: 325px) {

    .input[type="email"] {
        width: 250px;
    }

    .input[type="email"]:focus + .underline {
        width: 277px;
      }

      .input[type="text"] {
        width: 250px;
    }

    .input[type="text"]:focus + .underline {
        width: 277px;
      }

      .input[type="number"] {
        width: 250px;
    }

    .input[type="number"]:focus + .underline {
        width: 277px;
      }
      .conv-btn{
        font-size: 12px;
        width: 269px;
    }
    .iconsocial{
        font-size: 30px;
    }
    #fontchg h1 {
        font-size: 27px;
    } 
}