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

html {scroll-behavior: smooth;
scroll-padding: 5rem;}
    
    body{width: 100%;
    }
    
    @keyframes transition{
      from{top:-100px;}
        to{top: 100px;}
    }
    
    @keyframes sideways{
    from {left:-100px;}
    to{left:100px;}
    }
    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:260px;
    font-size: 30px;
    position: absolute;
    top:20px;
    left:30px;
    font-weight: bolder;
    text-transform: uppercase;}


    .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: 50px;
                left: 205px;
                flex-direction: column;
                justify-content: space-between;
                gap: 10px;
                width: 150px;
                background-color:white;
                border-radius: 3px;
            }
    
    
            .nav_img > .lang_dropdown> div {
                cursor: pointer;
                display: flex;
                align-items: center;
                gap: 15px;
                justify-content: space-between;
                padding:2px 15px;
    
    
            }
            .nav_img > .lang_dropdown> div > img {
                width: 30%
            
            }
    
            .nav_img > .lang_dropdown> div > p{
                color: black;
                font-size: 15px;
            
            }


            .lang_dropdown.nav_show {
                visibility:visible;
                opacity: 1;
              }
      
    
    .navicon a{color:white}
    
    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: 14px;
    text-transform: uppercase;
    color: white;
    font-weight: 500;
    padding:1px 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;}

 .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(0px);
opacity: 1;}
    
    .showcase{background-image: linear-gradient(to top,black,rgb(0, 129, 255));
    padding: 100px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
width: 100%;}
    
    .showcasetext{color: white;
    font-size:20px;
    }
    
    .showhead{font-size: 40px;
    margin-bottom: 15px;}
    
    .trust{color: gold;}
    
    .showtext{margin-bottom: 10px;
    font-size: 30px;}
    .showcasetext>p{margin-bottom: 30px;
    line-height: 25px;}
    
    .showcasemail{
    font-size: 20px;}
    
    .showcasecont{font-weight:900;}
    
    
    
    .showcasetext>p>i{color:rgb(0, 149, 255);
    margin-right: 10px;
    display: none;}
    
    .showcasebtn{padding: 10px 30px;
    background-color:gold;
    border-radius: 6px 12px;
    margin-top: 40px;
    border-color: transparent;
font-size: 20px;}
    
    
    .showcasebtn1{color: white;
    text-decoration: none;
    border-color: transparent;
    }
    
    .newsletter{ background-color: rgb(0, 149, 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%;
    align-self: center;}
    
    .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{
       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:10px 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: 20px 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;
    margin-top: 50px;
    border-color: transparent;}
        
        .discoverbtn1{color: white;
        text-decoration: none;
        }
        
    
    .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: 50%;
    padding: 25px 10px;
    height: 20px;
    outline: none;
    border-color:transparent;
    font-size: 16px;}

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

        textarea:focus{font-size:16px}
        
        .contactbtn{width: 20%;
        background-color: gold;
        text-align: center;
        height: 50px;
        padding: 10px 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));
    text-align: center;
    color:white;
     font-size:23px;
    padding:50px 10px;
    min-height:100vh;}

    .thanks>i{color: white;}

    .thanks>a{background-color: gold;
    color:white;
    position: relative;
    border-radius: 6px 10px;
    top:20px;
    padding:6px 12px;}

.thanks>p{padding:8px 0}

    .mail{font-weight: 900;
    color: white}

    .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: 10px;}
            
        
        .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;}
    
    }
    
    
    /*  MOBILES */
    @media only screen and (max-width:600px){
          body{width: 100%;}

          .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: 60px;
            text-align: center;
            transition: all .5s;
            display: none;
        }
    
      .navlist.anim-con{display: block;}

      .nav_img > .lang_dropdown{
        position: absolute;
        display: flex;
        visibility: hidden;
        top: 35px;
        left: 150px;
        flex-direction: column;
        justify-content: space-between;
        gap: 10px;
        width: 150px;
        background-color:white;
        border-radius: 3px;
    }


    .lang_dropdown.nav_show {
        visibility:visible;
        opacity: 1;
      }

        

        .thanks{background-image: linear-gradient(to top,black,rgb(0, 129, 255));
            text-align: center;
             font-size:20px;
            padding:50px 10px;}


        .navicon{color:white;
            width: 200px;
            font-size: 20px;
            position: absolute;
            top:30px;
            left:30px;
            font-weight: bolder;
            text-transform: uppercase;}
    
        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);}


        .servicetext>h2{font-size: 25px;
            margin-bottom: 15px;}
    
        .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;}

    .reviewhead{font-size: 25px;}
    
        .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: 25px;}
    input{width:100%;}
    textarea{width:100%;}


    
    .contactbtn{width:70%;}
    
    form>h1 {margin-bottom: 15px;
    font-size: 25px;}


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

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

    nav ul li{display: block;
    margin: 20px 0;
line-height: 30px;}

nav ul li a {font-size:20px;}

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

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

    .showcaseimg{display: none;}
        
    .ourservices{ display: grid;
        grid-template-columns: repeat(2,1fr);}
    
        .showcasetext{text-align: center;
        font-size: 20px;} 
        .discover{display: flex;
            flex-direction: column;
        justify-content: space-between;}
       .discoverimg{width:100%;
    align-items: center;} 
    
       .peoplereview{flex-direction: column;}
       .review1{margin-bottom: 20px;}

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


       .contactbtn{width:40%;}  
    
    }