@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

*{padding: 0;
    margin: 0;
    box-sizing: border-box;
text-decoration: none;
max-width:2000px;
font-family: 'Poppins', sans-serif;}

html{scroll-behavior: smooth;
scroll-padding: 5rem;}
    
 
    
    nav{height:80px;
    background-image: linear-gradient(to bottom,black,rgb(0, 129, 255));
    position: sticky;
    top: 0;
    z-index: 1;}
    
    .navicon{color:white;
        display: flex;
        justify-content: space-between;
    width:300px;
    font-size: 30px;
    position: absolute;
    top:20px;
    left:30px;
    font-weight: bolder;
    text-transform: uppercase;}
    
    .navicon a{color:white}


    .nav_img{display: flex;
        background-color: white;
        width: 50px;
        height: 30px;
        align-self: center;
        padding: 6px;
        border-radius: 2px;
    }
    
            .nav_img > .img_container{
                display: flex;
                align-items: center;
                align-self: center;
                justify-content: space-between;
                width: 100%;
                border-radius: 3px;
            }
    
    
            .nav_img > .img_container > img {
                width: 70%
            
            }
            
            
            .nav_img > .img_container > i {
                
            align-self: center;
            font-size: 15px;
            color: black;
            }
            
    
    
            .nav_img > .lang_dropdown{
                position: absolute;
                display: flex;
                visibility: hidden;
                top: 40px;
                left: 250px;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 10px;
                width: 150px;
                background-color:white;
                padding:3px 6px;
                border-radius: 3px;
            }
    


            .nav_img > .lang_dropdown> div {
                display: flex;
                gap: 15px;
                color: black;
                font-size: 14px;
            }
    
            .nav_img > .lang_dropdown> div > img {
                width: 20%
            
            }

            .nav_img > .lang_dropdown> div > p {
               align-self: center;
            
            }
    
            .lang_dropdown.nav_show {
              visibility:visible;
              opacity: 1;
            }



    
    nav ul{float: right;
    margin-right: 50px;}
    
    nav ul li{display: inline-block;
    line-height: 80px;
    margin: 0 8px;}
    
    nav ul li a{position: relative;
    font-size: 17px;
    text-transform: uppercase;
    color: white;
    font-weight: 900;
    padding:5px 0;}
    
    nav ul li a:before{
        position: absolute;
        left: 0;
        bottom: 0;
        content:'';
        height: 3px;
        width: 100%;
        background: white;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform .4s linear;}
    
    nav ul li a:hover:before{
        transform: scaleX(1);
        transform-origin:left;}

    
   .hamburger{display: none;}
        
    .showcase{background-image: linear-gradient(to top,black,rgb(0, 129, 255));
        width: 100%;
    padding: 150px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;}
    
    .showcasetext{color: white;
        align-self: center;
    text-align: left;}

    .anim{opacity:0;
        transform: translateY(10px);
        animation: moveup 1.5s linear forwards;}
        
        @keyframes moveup{100%{opacity: 1;
            transform: translateY(0px);
        }}

        .section{ position: relative;
            transform: translateY(10px);
            opacity: 0;
            transition: all 1.5s ease-in-out;
        }

        .section.active{transform: translateY(0);
        opacity: 1;}
    
    .showhead{font-size: 40px;
    margin-bottom: 15px;}
    
    .trust{color: gold;}
    
    .showtext{margin-bottom: 10px;
    font-size: 30px;}

    .showcasetext>p{margin-bottom: 30px;
    font-size: 20px;}
    
    .showcasemail{
    font-size: 20px;}
    
    .showcasecont{font-weight:900;}
    
    
    
    .showcasetext>p>i{color:rgb(0,125, 255);
    margin-right: 10px;
    display: none;}
    
    .showcasebtn{padding: 10px 30px;
    background-color:gold;
    border-radius: 6px 12px;
    font-size: 18px;
border-color: transparent;}
    
    .showcasebtn1{color: white;
    text-decoration: none;
    border-color: transparent;
    }
    
    .newsletter{ background-color: rgb(0, 125, 255);
        padding: 5px 30px;
        display: flex;
    justify-content: space-between;
    animation-name: expand;
    animation-timing-function: ease-in-out;
    animation-duration: 1.5s;
    }
    .newsletter>form>input{
        width: 350px;
        height: 50px;
        padding-left: 15px;
        margin-right:-5px;
    }
    .submitbtn{width:100px;
    padding:16px;
    background-color: rgb(6, 11, 11);
    color: white;
    font-size: 15px;}
    
    .showcaseimg{width:100%;}
    
    .whychoose{padding: 20px 30px;}
    
    .choosehead{text-align: center;
    margin-bottom: 20px;
    font-size: 30px;}
    
    .reasons{display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:10px;
    animation-name: expand;
    animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
    animation-duration: 1.5s;
    }
    
    
    .reason1{
    color:black;
    text-align: center;
    padding: 30px 20px;
    border-radius:14px;}
    
    .reason1>i{margin-bottom: 20px;
    color: black;}
    
    .services{
    padding: 20px 30px;}
    
    .servicetext{text-align: center;
    margin-bottom: 20px;}
    
    .ourservices{width: 100%;
        display: grid;
    grid-template-columns: repeat(4,1fr);
    gap:15px;}
    
    .service{background-color: transparent;
       width: 100%;
    text-align: center;
    padding: 20px 20px;
    color:black;
    border-radius: 15px;
    cursor: pointer;
    
    }
    
    .service>h3{font-size: 15px;
    font-weight: 2000;}
    
    .servicebtn{ border-radius: 10%;}
    
    .service>i{margin-bottom: 20px;
    color: rgb(6, 11, 11);}
    .servicetext>h2{font-size: 35px;
    margin-bottom: 15px;}
    
    .servicetext>p{font-size: 20px;}
    
    .cheating{background-image: linear-gradient(to bottom,black,rgb(0, 129, 255));
    padding:50px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    }
    
    .cheating>h2{color:white;
    text-align: center;
    font-size: 35px;
    margin-bottom: 15px;}
    
    .cheating>p{color: white;
    text-align: center;
    margin-bottom: 50px;}
    
    .cheating>img{
    width:50%;}
    
    .reviews{background-color: rgb(6, 11, 11);
        padding:5px 50px;
        color: black;
    }
    .reviewhead{text-align:center;
        margin-bottom: 20px;
        font-size: 30px;
        font-weight:900;
        color: white;
    }
    
    .peoplereview{display: flex;}
    
    .review1{background-color: white;
    text-align: center;
    margin-right: 15px;
    padding: 10px 20px;
    border-radius: 3%;
    }
    .review1>i{border-radius:100%;
        background-image: linear-gradient(to right,black,rgb(0, 129, 255));
        color: white;
    padding:15px;
    margin-bottom: 10px;}
    
    .reviewname{font-size: 25px;}
    
    .discover{padding: 30px 30px;
    background-color: rgb(6, 11, 11);
    display: flex;
    justify-content: space-between;}
    
    .discovertext{margin-top:100px;
    color: white;
    font-size: 18px;}
    
    .discovertext>h1{margin-bottom: 15px;}
    .discoverbtn{padding: 10px 30px;
       background-image:linear-gradient(to right,black,rgb(0, 129, 255));
        border-radius: 6px 12px;
    margin-top: 50px;
border-color: transparent;}
        
        .discoverbtn1{color: white;
        text-decoration: none;
        border-color: transparent;
        }
        
    
    .contactform{background-image: linear-gradient(to top,black,rgb(0, 129, 255));
    padding:20px 30px;
text-align: center;
color: white;}
    
    form{display: flex;
    flex-direction: column;
    align-items: center;}
    
    input{margin-bottom: 20px;
    width: 70%;
    padding: 20px 10px;
    height: 30px;
    outline: none;
    border-color:transparent;
    font-size: 16px;}

    input:focus{font-size:16px}
    
    textarea{margin-bottom: 20px;
        width: 70%;
        height: 150px;
        padding: 10px 10px;
        outline: none;
        border-color:transparent;
        font-size: 16px;}
         

         textarea:focus{font-size: 16px;}
        
        .contactbtn{width: 20%;
        background-color: gold;
        padding: 0 10px;
    border-radius: 6px 12px;}
    
    form>h1 {margin-bottom: 15px;}
    
    form>p{margin-bottom: 15px;
    }
    
    .disclaim{font-weight: bolder;}
    
    footer{padding: 20px 30px;
    font-size: 12px;
margin-bottom: 80px;}
    footer>p {margin-bottom: 15px;}

    .thanks{background-image: linear-gradient(to top,black,rgb(0, 129, 255));
        font-size: 30px;
        height: 100vh;
        padding: 50px 10px;
        color:white;
    text-align: center;} 
    
    .thanks>i{color: white;}
    
    .thanks>a{background-color:gold;
    color:white;
    position: relative;
    top:20px;
    padding:6px 12px;
  border-radius: 8px;}

.thanks>p{
    padding:10px 0
}
    
    .mail{font-weight: 900;
    color:linear-gradient(to right,black,rgb(0, 129, 255))}

    
 .mymail{background-image: linear-gradient(to right,black,rgb(0, 129, 255));
    color: white;
    border-radius: 16px;
    padding: 3px 6px;
    display: flex;
    gap: 5px;
    position: fixed;
        bottom: 20px;
        right: 15px;}
        
    
    .mymail>a{color: white;
    font-size: 35px;
    align-self: center;}
    
    .mymail>.linker{align-self: center;
    }

    
    /*small phone */
    
    @media only screen and (max-width:300px){
        .ourservices{ display: grid;
            grid-template-columns: repeat(1,1fr);}
    
                .cheating>h2{font-size: 20px;}

                input{width: 100%;}
                textarea{width:100%;}
    
    }
    
    
    /*  MOBILES */
    @media only screen and (max-width:600px){
          body{width: 100%;}

          .navicon{color:white;
            width:200px;
            font-size: 20px;
            position: absolute;
            top:30px;
            left:30px;
            font-weight: bolder;
            text-transform: uppercase;}


            .nav_img > .lang_dropdown{
                position: absolute;
                display: flex;
                visibility: hidden;
                top: 35px;
                left: 150px;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 10px;
                width: 150px;
                background-color:white;
                padding:3px 6px;
                border-radius: 3px;
            }
        
            .lang_dropdown.nav_show {
                visibility:visible;
                opacity: 1;
              }
     
    

          .thanks{background-color: whitesmoke;
            font-size: 21px;
        text-align: center;
        padding: 50px 10px;} 

        .hamburger{display:block}

.hamburger>i{font-size:30px;
        position: absolute;
        right:30px;
        top:25px;}

.navlist{position:fixed;
        width: 100%;
        height: 300px;
        background-image: linear-gradient(to right,black,rgb(0, 129, 255));
        top: 70px;
        text-align: center;
        transition: all .5s;
        display: none;
    }

  .navlist.anim-con{display: block;}

    
    
        nav ul li{display: block;
        margin: 20px 0;
    line-height: 30px;}
    
    nav ul li a {font-size:15px;}
    
    
   
        .showhead{font-size: 25px;}
        .showcaseimg{display: none;}
        .showcasetext{text-align: center;
        margin-bottom: 30px;
    font-size: 18px;}
        .showcasetext>p {margin-bottom: 20px;}
        .showcasemail{font-size: 17px;}
        .ourservices{ display: grid;
        grid-template-columns: repeat(1,1fr);}
    
        .service>h3{font-size: 20px;}
    
        
    
        .servicetext>p{font-size: 15px;
        margin-bottom: 20px;}
    
        .peoplereview{display: grid;
        grid-template-columns: repeat(1,1fr);
        gap:15px;
    font-size: 12px;}
    .review1{width:100%}
    
        .discover{flex-direction: column;
        text-align: center;}
    
        .discovertext{margin-bottom: 30px;}
    
        .discovertext>h1 {font-size: 20px;}
        .reasons{display:grid;
            grid-template-columns: repeat(1,1fr);
            gap:10px;}
            
            .cheating>img{text-align: center;
                margin:0px 10px;
            width: 100%;}
    
            .cheating>h2{font-size: 30px;}

            input{width:100%;}
    textarea{width: 100%;}

    .contactbtn{width:30%;}
        
    }
    
    @media screen and (max-width:1000px) and (min-width:480px){
    
        .hamburger{display:block}

        .hamburger>i{font-size:30px;
                position: absolute;
                right:30px;
                top:25px;}
        
        .navlist{position:fixed;
                width: 100%;
                height: 300px;
                background-image:linear-gradient(to right,black,rgb(0, 129, 255));
                top: 70px;
                text-align: center;
                transition: all .5s;
                display: none;
            }
        
          .navlist.anim-con{display: block;}

  
  
      nav ul li{display: block;
      margin: 20px 0;
  line-height: 30px;}
  
  nav ul li a {font-size:20px;}
  
    
    .showcaseimg{display: none;}
        
    .ourservices{ display: grid;
        grid-template-columns: repeat(2,1fr);}
    
        .showcasetext{text-align: center;
        font-size: 15px;} 
        .discover{display: flex;
            flex-direction: column;
        justify-content: space-between;}
       .discoverimg{width:80%;
    align-items: center;} 
    
       .peoplereview{flex-direction: column;}
       .review1{margin-bottom: 20px;}
    
    }