*{
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
    font-weight: 600;
    overflow-x: hidden;
    
}


body {
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
  
}
.hero{
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
    background-image: url(beautiful-shot-rocky-mountains-covered-with-white-snow.jpg);
    background-size: cover;
    background-position: center;
}

.circle{
    width: 11%;
    height: 5rem;
    border: 2px solid blue;
    border-radius: 100%;
    margin-left: 20px;
    
}
nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 45px;
    padding-left: 8%;
    padding-right: 8%;
    text-shadow: 0 0 5px #00f, 0 0 10px #00f, 0 0 15px #00f, 0 0 20px #00f, 0 0 25px #00f, 0 0 30px #00f;
   
}

.hero h2{
    color: white;
    cursor: pointer;
    margin-top: 25px;
    margin-left: .4rem;
    text-shadow: 0 0 5px #00f, 0 0 5px #00f, 0 0 10px #00f, 0 0 10px #00f, 0 0 10px #00f, 0 0 10px #00f;
}
span{
    color: white;
}


nav ul li{
    list-style-type: none;
    display: inline-block;
    padding: 10px 25px;
}
nav ul li a{
    color: white;
    text-decoration: none;
    font-weight: bold;
    text-transform: capitalize;
}

nav ul li a:hover{
    color:blue;
	border-bottom: .1rem solid;
	padding-bottom: .5rem;
    transition: .5s ease;
}
.about-text .btn{
    background: blue;
    height: 50px;
    border-radius: 15px;
    color: white;
    text-decoration: none;
    padding: 10px;
    width: 40%;
    text-align: center;
    justify-content: center;
    margin-left: 18px;
}
.about-text .button:hover{
    transition: all 0.5s ease;
    background: #007bff;
}

.btn{
    background-color: red;
    color: black;
    text-decoration: none;
    border: 2px solid transparent;
    font-weight: bold;
    padding: 10px 25px;
    border-radius: 30px;
    transition: transform .4s;
    transition: box-shadow 1s ease-in-out;
    color: #fff;
    background-color: #007bff;
    border: none;
    box-shadow: 0 0 10px #007bff;
    
}
.btn2{
    background-color: red;
    color: black;
    text-decoration: none;
    border: 2px solid transparent;
    font-weight: bold;
    padding: 10px 25px;
    border-radius: 30px;
    transition: transform .4s;
    transition: box-shadow 1s ease-in-out;
    color: #fff;
    background-color: #007bff;
    border: none;
    box-shadow: 0 0 10px #007bff;
    
    
}
.btn2:hover{
    transition: all 0.5s ease;
    background: red;
}



.btn:hover{
    transform: scale(1.2);
    background: radial-gradient(red);
    transition: all 0.5s ease;
}

.content{
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
    color: white;
    text-align: center;
    margin-top: 20vh;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    
}

#name{
    font-size: 1.5rem;
    margin-left: -.1rem;
    padding: 15px;
    color: white;
    text-shadow: 1px 1px 2px;
    
    
}

#intro{
    font-size: 1.5rem;
    color: white;
    font-weight: bolder;
    margin-left: -.1rem;
    padding: 15px;
    text-shadow: 0 0 5px #00f, 0 0 10px #00f, 0 0 15px #00f, 0 0 20px #00f, 0 0 25px #00f, 0 0 30px #00f;
    
}

h1{
    color: white;
    margin: 20px 0px 20px;
    font-size: 75px;
    text-shadow: 0 0 5px #00f, 0 0 5px #00f, 0 0 10px #00f, 0 0 10px #00f, 0 0 10px #00f, 0 0 15px #00f;
}
h3{
    color: white;
    font-size: 25px;
    margin-bottom: 50px;
}
h4{
    color: red;
    letter-spacing: 2px;
    font-size: 20px;
}
.newsletter form{
    width: 330px;
    max-width: 100%;
    position: relative;

}

.newsletter form input:first-child{
    display: inline-block;
    width: 100%;
    padding: 14px 130px 14px 15px;
    border: 2px solid blue;
    outline: none;
    border-radius: 30px;
}
.newsletter form input:last-child{
    position: absolute;
    display: inline-block;
    outline: none;
    border: none;
    padding: 10px 30px;
    border-radius: 30px;
    background-color: blue;
    color: white;
    box-shadow: 0px 0px 5px #000, 0px 0px 15px grey;
    top: 6px;
    right: 6px;
}

.about{
    width: 100%;
    padding: 100px 0px;
    background-image: url(hand-painted-watercolor-background-with-sky-clouds-shape.jpg);
    
}
.about img{
    height: auto;
    width: 430px;
}
.about-text{
    width: 550px;
}
.main{
    width: 1130px;
    max-width: 95%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.about-text h2{
    color: black;
    font-size: 75px;
    text-transform: capitalize;
    margin-bottom: 20px;
    text-shadow: 0 0 2px #00f, 0 0 3px #00f, 0 0 2px #00f, 0 0 10px #00f, 0 0 2px #00f, 0 0 5px #00f;
}
.about-text h5{
    color: black;
    letter-spacing: 2px;
    font-size: 22px;
    margin-bottom: 25px;
    text-transform: capitalize;
}
.about-text p{
    color: black;
    letter-spacing: 1px;
    line-height: 28px;
    font-size: 18px;
    margin-bottom: 45px;
    font-weight: 600;
    font-family: 'Roboto', sans-serif;
}
button{
    background-color: red;
    color: black;
    text-decoration: none;
    border: 2px solid transparent;
    font-weight: bold;
    padding: 13px 30px;
    border-radius: 30px;
    transition: box-shadow 1s ease-in-out;
    color: #fff;
    background-color: #007bff;
    border: none;
    box-shadow: 0 0 50px #007bff;  
}

.content .newsletter .submit{

    color: black;

}
.content .newsletter .button{
    color: white;
    background: blue;
    padding: 10px;
    border-radius: 25px;
    
}
.content .newsletter .button:hover{
    transition: all 0.5s ease;
    background: lightblue;
}

.content .newsletter .submit:hover{
    background: white;
    color: black;
    transition: 0.1s ease-in-out;
    font-weight: 900;
}

button:hover{
    background-color: transparent;
    border: 2px solid red;
    cursor: pointer;
    color: black;
    transition: all 0.5s ease;
}
.move:hover{
        background-color: transparent;
        border: 2px solid red;
        cursor: pointer;
        color: black;
        transition: all 0.5s ease;
    }


.service{
    background-image: url(beautiful-shot-rocky-mountains-covered-with-white-snow.jpg);
    width: 100%;
    padding: 35px 0px;
    height: 45rem;
}

.title h2{
    color: white;
    font-size: 65px;
    width: 1130px;
    margin: 30px auto;
    text-align: center;
    text-shadow: 0 0 5px #00f, 0 0 10px #00f, 0 0 15px #00f, 0 0 20px #00f, 0 0 25px #00f, 0 0 30px #00f;
}

.box{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.card{
    height: 365px;
    width: 335px;
    padding: 20px 35px;
    background: grey;
    border-radius: 20px;
    margin: 15px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.card i{
    font-size: 50px;
    display: block;
    text-align: center;
    margin: 25px 0px;
    color: red;
}

h5{
    color: white;
    margin-top: -1.5rem;
    font-size: 17px;
    margin-bottom: 18px;
    text-shadow: 0 0 5px #00f, 0 0 5px #00f, 0 0 5px #00f, 0 0 5px #00f, 0 0 5px #00f, 0 0 10px #00f;
}
.pra p{
    color: black;
    font-size: 16px;
    line-height: 27px;
    margin-bottom: 25px;
    font-family: 'Roboto', sans-serif;
}
.card .button{
    background-color: red;
    color: black;
    text-decoration: none;
    border: 2px solid transparent;
    font-weight: bold;
    padding: 9px 22px;
    border-radius: 30px;
    transition: box-shadow 1s ease-in-out;
    color: #fff;
    background-color: #007bff;
    border: none;
    box-shadow: 0 0 50px #007bff;
}
.move{
    background-color: red;
    color: black;
    text-decoration: none;
    border: 2px solid transparent;
    font-weight: bold;
    padding: 1px 15px;
    border-radius: 30px;
    transition: box-shadow 1s ease-in-out;
    color: #fff;
    background-color: #007bff;
    border: none;
    box-shadow: 0 0 50px #007bff; 
    position: absolute;
    margin-left: -3.5rem;
    margin-top: -1.5rem;
    
}



.card .button:hover{
    background-color: transparent;
    border: 2px solid red;
    cursor: pointer;
    transition: all 0.5s ease;
}
.hover-image{
    position: relative;
    display: flex;
    width: 300px;
    height: 250px;
    overflow: hidden;
    cursor: pointer;
    margin-top: 190px;
    margin-left: 1rem;
}
.hover-image img{width: 100%; height: 100%; transition: transform 0.5s;}
.hover-image:hover img{transform: scale(1.1);}
.hover-text a{
    position: absolute;
    top: 45%;
    left: 55%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.5em;
    opacity: 0;
    transition: opacity 0.5s;
    text-decoration: none;
}
.hover-image:hover .hover-text a{opacity: 1;}

.skillset{
    display: flex;
    position: absolute;
    padding: 15px 10px;
    border: 5rem;
    justify-content: center;
    
    
}

.skillset img{
    width: 6%;
    height: 2%;
    justify-content: center;
    align-items: center;
    justify-content: center;
    margin: 15px;
    
}
.skillset img:hover{
    transition: all .5s ease;
    transform: scale(1.1)
}

.portfolio h1{
    color: white;
    font-size: 4rem;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    text-align: center;
    right: 20px; 
    left: 25px; 
      
}

.portfolio img{
    display: flex;
    border-radius: 30px; 
    width: 120%;
    height: 85%;
    align-items: center;
    justify-content: center;
    margin: 25px;
   
    
}

.portfolio .hover-image img{
    display: flex;
    
    
}

.portfolio{
    background-image: url(hand-painted-watercolor-background-with-sky-clouds-shape.jpg);
    padding: 40px 5px;
    height: 45rem;
    display: flex; 
}
.contact{
    background: url("beautiful-shot-rocky-mountains-covered-with-white-snow.jpg") no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 40rem;
    
  
}

.contact form{
    background: transparent;
    box-shadow: var(--box-shadow);
    border-radius: 1.5rem;
    margin: 10rem auto;
    max-width: 35rem;
    padding: .5rem;
    max-height: 39rem;
    margin-top: -1rem;
    margin-bottom: -5rem;
    color: black;
    backdrop-filter: blur(12px);
}

.contact form h1{
    columns: var(--black);
    text-align: center;
    padding-bottom: 1.5rem;
    font-size: 3.5rem;
    text-transform: capitalize;
    margin-top: 3rem;
    color: black;
}

.contact form .inputBox{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    color: black;
    
    
    
}

.contact form .inputBox input,
.contact form textarea{
    width:100%;
    background: white;
    padding: .8rem;
    margin: .7rem 0;
    border-radius: .5rem;
    color: var(--black);
    font-size: .8rem;
}

.contact form .inputBox input{
    width: 49%;
    color: black;
    
}
.btn{
    align-items: center;
    display: flex;
    position: relative;
    margin-left: 12.5rem;
    padding: 15px 15px;
    margin-top: 8px;
    margin-bottom: 5rem;
    transition: box-shadow 1s ease-in-out;
    color: #fff;
    background-color: #007bff;
    border: none;
    box-shadow: 0 0 10px #007bff;
 
}
.inputBox .btn{
    background: red;
}

.credit{
    background: black;
    width: 100%;
    padding: 1.5rem;
    text-align: center;
    justify-content: center;
    color: white;
    
}

.footer .credit{
    padding: 2rem;
    padding-top: 5rem;
    margin-top: 2rem;
    text-align: center;
    font-size: 2rem;
    color: green;
    border-top: .1rem solid black;
    
    
}

.footer .credit span{
    color:black;
}

.scroll{
    position: fixed;
    bottom: 2.2rem;
    border-top: 2rem;
    right: 3.2rem;
    background: blue;
    border-radius: 15px;
    height: 30px;
}

.scroll i{
    font-size: 22px;
    color: var(--text-color);
    background: red;
    padding: 10px;
    border-radius: 2rem;
}
.menu-toggle{
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;;
}



@media (max-width: 1060px){
    html, body{
        padding: 0;
        margin: 0;
        width: 100%;
        font-family: 'Poppins', sans-serif;
        box-sizing: border-box;
        font-weight: 600;
        overflow-x: hidden;
        position: relative;

    }

    .hero{
        margin: 0 auto;
        width: 50%;
        overflow-x: hidden;
        max-width: 100%;
        box-sizing: border-box;
        
       
    }
    .hover-text a{
        margin-top: 25px;
        color: white;
    }
   
    
    .main .about-text h2{
        width: 100%;
        font-size: 3rem;
        position: absolute;
        display: flex;
        margin-left: -130px;
        margin-top: -85px;
    }
    .main .about-text h5{
        position: absolute;
        justify-content: center;
        margin-top: -40px;
        padding: 15px;
        margin-left: -75px;
        font-size: 12px;
        
    }
    .about-text .btn{
        margin-left: 5rem;
    }
    .about-text .button:hover{
        transition: all 0.5s ease;
        background: #007bff;
    }
    .move{
        height: 30px;
        width: 33%;
        text-decoration: none;
        border: 2px solid transparent;
        border-radius: 30px;
        transition: box-shadow 1s ease-in-out;
        color: #fff;
        background-color: rgb(5, 5, 223);
        box-shadow: 0 0 50px #007bff;
        font-size: 10px;
        margin-top: -20px;
        overflow: visible;
        white-space: nowrap;
        align-items: center;
        justify-content: center;
        
        
    }
    .move:hover{
        
            background-color: transparent;
            border: 2px solid red;
            cursor: pointer;
            color: white;
            transition: all 0.5s ease;
        }
    
    .main .about-text p{
        font-size: .5rem;
        font-weight: 600;
        font-family: 'Roboto', sans-serif;
        
    }
    .main .about-text button{
        align-items: center;
        justify-content: center;
        margin-left: -120px;

    }
    .service .title h2{
        font-size: 3rem;
        margin-left: -370px;
        padding: 10px;
        margin-bottom: 50px;
        margin-top: 18px;
    }
    .box .card{
        flex-direction: column;
        align-items: center;
        display: flex;
        height: 280px;
        width: 300px;
    }
    .box .card h5{
        font-size: .8rem;
        margin-top: -45px;
    }
    .box .card p{
        font-size: .6rem;
        font-family: 'Roboto', sans-serif;
        
    }
    .service .button { 
        background:  blue; 
        
    }
    .service .full{
        background: blue;
        margin-top: 50rem;
    }
    
   

    .skillset{
        background: rgb(224, 214, 214);
        border-radius: 25px 25px;
        width: 22rem;
        max-width: 100%;
        height: 4rem;
        box-shadow: 0 0 5px #00f, 0 0 10px #00f, 0 0 15px #00f, 0 0 20px #00f, 0 0 25px #00f, 0 0 30px #00f;
        margin-top: 2rem;
        margin-left: 1.3rem;
        overflow-x: hidden;
        

    }
    .skillset img{
        height: 25px;
        width: 350px;
        margin-top: .5rem;

    }
    
        
    .service{
        height: 75rem;

    }
    
    .box {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        margin-top: -50px;
      }

    .portfolio h1{
        font-size: 3.5rem;
      }

    .portfolio{
        height: 110rem;
        display: flex;
        flex-direction: column;
       
        
        
    }
    .portfolio .hover-image{
        width: 80%;
        height: 30vh;
        display: flex;
        margin-left: 35px;  
        
    }
    .portfolio .hover-image img{
        width: 100%;
        margin-bottom: 10px;
        padding: 0;
        margin: 0 auto;
        height: auto;
        display: block;
        transform: scale(1.05);
 
    }
    
    .contact .btn{
        background-color: blue;
        margin-left: 120px;
        margin-top: 2px;
    }
    .contact .btn:active{
        background: black;
    }
    .racks{
        color: white;
        text-shadow: 0 0 5px #00f, 0 0 10px #00f, 0 0 15px #00f, 0 0 20px #00f, 0 0 25px #00f, 0 0 30px #00f;
        background: none;
    }
    
    
     
}

@media (max-width: 768px){
    .nav{
        padding: 5px 0;
        display: block;
        

    }
    
   
    .newsletter{
        margin-left: -1px;
        width: 90%;
        margin-bottom: 265rem;
        overflow-x: hidden;
        
    }
    .hero{
        width: 100%;
        
        overflow-x: hidden;
    }
    .menu-toggle{
        display: block;
        margin-right: -22rem;
        margin-top: -2rem;
       
    }
    .navmenu{
        display: none;
        flex-direction: column;
        background: #444;
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        text-align: center;
        padding: 10px 0;
    }
    .navmenu.active{
        display: flex;
    }
    .content #name{
        color: white;
        font-size: 2.2rem;
        margin-left: -60px;
        align-items: center;
        overflow-x: hidden;
        
      
        
    }
    .content #intro{
        color: white;
        font-size: 1rem;
        margin-left: -60px;
       
        
        
    }
    
    .hero ul li a{
        font-size: .5rem;
        display: flex;
    }
    .circle{
        color: blue;
        width:10vh;
        margin-top: -40px;
        margin-left: -7px;
    
    }
    .circle h2{
        font-size: 1rem;
        margin-top: 30px;
        margin-left: 10px;
       
    }
    .hero{
        padding: .5rem 0 !important;
    }
    .main{
        margin-top: 3rem !important;
    }
    .about-text h2{
        min-height: 38px;
        padding-left: 4rem;
        
    }
     h5 {
        font-size: 1rem;
        padding-left: 15px;
    }
    .about-text p{
        font-size: 1rem;
        font-family: 'Roboto', sans-serif;
        display: flex;
        flex-wrap: wrap;
        position: inherit;
        margin-left: .5rem;
    }
    .main img{
        height: auto;
        margin-left: -2rem;

    }
    .about{
        flex-direction: column;
    }
    .about .contentBx{
        min-width: 100%;
        width: 100%;
        text-align: center;
        padding-right: 0px;
    }
    .about .contentBx,
    .about .imgBx{
        min-width: 100%;
        width: 100%;
        padding-right: 0px;
        text-align: center;
    }

    .about .imgBx{
        min-height: 250px;
    }

    .hero .btn2{
        display: none;
        
        margin-bottom: 30px;
        
    }
    .hero .btn2:hover{
        transition: all 0.5s ease;
        background: #007bff;
    }

    .post-header{
        height: 435px;
    }
    .post-header{
        margin-top: 9rem !important;
    }
    
    
}


@media (max-width:570px){

    .nav{
        height: 590px;
    }
    .header-title{
        width: 100%;
    }
    
    
    
    
}
.header-img{
    height: 340px;
}

@media (max-width: 396px){
    .hero{
        font-size: 2rem;
        overflow-x: hidden;
    }
    

    .nav{
        font-size: .9rem;
    }
    .section{
        min-height: 300px;
    }
   
    .post-box{
        padding: 10px;
    }
    .header-title{
        font-size: 1.4rem;
    }

    .header-img{
        height: 240px;
    }

    .post-header{
        height: 335px;
    }
    .header-img{
        height: 340px;
    }
    
}



@media (max-width: 991px){
    .credit {
            padding: 30px;
            font-size: 10px;
            margin-top: -2rem;
        }
        .credit .footer-container{
            flex-direction: column;
        }
        footer .footer-container .sec{
            margin-right: 0;
            margin-bottom: 40px;
        }
        footer .footer-container .sec.aboutus{
            width: 100% !important;
        }
        footer .footer-container .quicklinks{
            width: 100%;
        }
        footer .footer-container .contactBx{
            width: 100%;
           
        }
        

   
}