* {
    margin: 0;
    box-sizing: border-box;
    padding: 0;

}

html,
body {
    height: 100%;
    width: 100%;

}

::-webkit-scrollbar {
    color: #0065F4;

}

::-webkit-scrollbar-track {
    border-radius: 10px;

}

::-webkit-scrollbar-thumb {
    background-color: #03246c;
}

@font-face {
    font-family: Amsterdam;
    src: url(amsterdam_4/Amsterdam.ttf);
}



.main {
    height: 100vh;
    width: 100vw;
    position: relative;

    /* cursor: default; */
    /* background-color:#03256C; */

}

#lol {
    position: absolute;
    z-index: 5;
    height: 20px;
    width: 20px;
    /* transform: translate(-50%,-50%); */
    background-color: transparent;
    border: 2.5px solid rgb(255, 255, 255);
    border-radius: 50px;

}

.heropage {
    /* background-color: #03246c; */
    background-image: url(1111111.svg);

    background-size: cover;
    height: 100vh;
    width: 100vw;
    /* background-size: cover; */
    /* background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); */
}



.maintextalin {
    font-family: Montserrat;
    padding: 4rem 0rem 2.5rem 0rem;
    text-align: center;
    width: 99vw;
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    flex-direction: column;
    align-items: center;
}

.maintextalin h1 {
    color: #F4F7F5;
    font-size: 2.4rem;
    font-weight: 450;
    font-family: Amsterdam;
}

.maintextalin h2 {
    color: #F4F7F5;
    font-family: Montserrat;
    font-size: 2rem;
    font-weight: 500;

}

.maintextalin h5 {
    color: #F4F7F5;
    padding-top: 10px;
    font-size: 1.2rem;
    font-family: Montserrat;
    font-weight: 400;

}

.socialmedia {
    /* padding: 0rem 15rem; */
    font-family: Montserrat;

    /* justify-content: center; */

}

.move {
    display: inline-block;

}

.colour {
    color: #070707;
    font-size: 2rem;
    padding: 0.5rem;
    font-size: 3rem;
    text-decoration: none;
}

.colour2 {
    color: #000000;
    font-size: 2.2rem;
    padding: 0.5rem;
    font-size: 3.2rem;
    text-decoration: none;
}

.link {
    color: #F4F7F5;
    background-color: #1768AC;
    padding: 1.2vh 1.5vw;
    border-radius: 10px;
    border: none;
    font-family: Montserrat;
    font-size: 1.5rem;
    font-weight: 600;
    margin-left: 2vw;


}

.text {
    text-decoration: none;
    color: #F4F7F5;
}

.text1 {
    text-decoration: none;
    color: #F4F7F5;
}

.buttons {

    padding: 2rem 0rem 0rem 0rem;
    display: flex;
    align-items: cente
}

.photo {
    background-image: url(aditya\ reja.png);
    align-items: center;
    flex-direction: column;
    height: 8rem;
    width: 8rem;
    border-radius: 100%;

    background-size: cover;

}

.hero2 {
    height: 100vh;
    width: 100vw;

    /* background-color: blanchedalmond; */
    font-family: Montserrat;
    background-color: #03246c;
    /* background-image:url(11111125.svg);
    background-size: cover; */
    color: #F4F7F5;

}

.hero2 h1 {
    /* background-color: #000000; */
    padding-top: 2rem;
    font-size: 2rem;
    padding-left: 1.8rem;
    color: #F4F7F5;
    padding-bottom: 2.8rem;
}

.hero2 h3 {
    font-size: 1.2rem;
    color: #F4F7F5;
    padding-left: 7.8rem;



}

.ulli {
    font-size: 1.2rem;
    font-weight: 500;
    font-family: Montserrat;
    padding-right: 45px;
    padding-left: 20px;

}

.box {

    height: 22vh;
    width: 85vw;
    margin: auto;
    /* background-color: gray; */
    display: flex;
    align-items: center;

}

.ps {
    padding-top: 15px;
    padding-left: 10px;
    height: 5rem;
    width: 5rem;
}

.hero3 {
    height: 100vh;
    width: 100vw;
    /* background-color: blanchedalmond; */
    font-family: gilroy;

}

#do {
    color: rgb(255, 80, 80);
}

/* .blue{
    background: #03246c;
    color: #F4F7F5;
} */
.blue3 {
    background: #03246c;
    color: #F4F7F5;
    padding-top: 9vh;
    font-size: 2.5rem;
    padding-left: 2.8vh;
    padding-bottom: 5.8vh;
}

.hero3 h2 {
    color: #000000;

}

.hero3 .sub {
    background: #03246c;
    color: #F4F7F5;
    font-size: 1.5rem;
    padding-left: 1.8rem;

}

.blue1 {

    color: #06BEE1;
}

#changeweb {
    width: 98.9vw;
    /* background-color: #75a1ff; */
    margin: auto;
}

.butt button {
    padding: 15px;
    margin-right: 5px;
    background-color: #1768AC;
    font-family: Montserrat;
    font-weight: 600;
    font-size: 15px;
    border: none;
    border-radius: 10px;
    color: aliceblue;
    


}

.butt button:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(-73deg, #60efff 9%, #0061ff 100% );
    transform: translate3d(3px, 10px, 2) scale(1);
    filter: blur(8px);
    opacity: var(0.54);
    transition: opacity 0.3s;
    border-radius: inherit;
}

/* 
* Prevents issues when the parent creates a 
* stacking context. (For example, using the transform
* property )
*/
.butt button::after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit;
    border-radius: inherit;
}
        

.butt {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    width: 50vw;
    margin: auto;
    display: flex;
    justify-content: center;
}

.box1 {

    height: 63vh;
    width: 100vw;
    padding: 5vh 1.5rem;
    width: inherit;
    /* background-color: rgb(43, 226, 171); */
    display: flex;
    justify-content: space-between;
    /* background-image: url(Artboard\ cer.jpg);
    background-size: cover; */

}

.box1 img {
    height: inherit;
}

.imgclass {
    height: 30vh;
    width: 40vw;
    padding-bottom: 4vh;
}

.box2 {

    height: 30rem;
    padding: 1.5rem 1.5rem;
    width: inherit;
    /* background-color: rgb(43, 226, 171); */
    display: flex;
    justify-content: space-between;
    /* background-image: url(Artboard\ cer.jpg);
    background-size: cover; */

}

.bb {
    height: 20rem;
    width: 98.9rem;
    padding-left: 4vw;
    /* background-color: aqua; */
}

.mainhad {
    padding-top: 5vh;
    font-size: 35px;
    padding-bottom: 20px;
    font-family: Montserrat;
}

.mainsubhad {
    font-size: 18px;
    font-weight: 368;
    padding-bottom: 25px;
    font-family: Montserrat;
}

.veaw {
    font-size: 25px;
    font-weight: 550;
    color: #052d82;
    font-family: Montserrat;
    text-decoration: none;


}

.mainhad1 {
    padding-top: 30px;
    font-size: 35px;
    padding-bottom: 20px;
    padding-left: 30px;
    font-family: Montserrat;
}

.mainsubhad1 {
    font-size: 20px;
    font-weight: 368;
    padding-bottom: 25px;
    padding-left: 40px;
    font-family: Montserrat;
}

.veaw1 {
    font-size: 25px;
    font-weight: 550;
    color: #052d82;
    padding-left: 40px;
    font-family: Montserrat;


}

.landinpage1 {
    font-size: 2.1rem;
    font-weight: 700;
    padding-left: 13.2vw;
    padding-bottom: 10px;
    font-family: Montserrat;


}

.landingpageimg {
    width: 25vw;
    height: 40vh;

}

.mlandinpage {
    font-size: 32px;
    font-weight: 700;
    padding-left: 45rem;
    padding-bottom: 10px;
    font-family: Montserrat;
    justify-content: center;
    display: flex;
}

.Prototyping {
    font-size: 32px;
    font-weight: 700;
    padding-left: 39rem;
    padding-bottom: 10px;
    font-family: Montserrat;
    text-decoration: none;
}

.landigpage {
    display: flex;
    justify-content: center;

}

.te {
    text-decoration: none;
}



#Web {
    background-color: #0065F4;
}

#Web:hover {
    cursor: pointer;
}

#Graphic:hover {
    cursor: pointer;
}

#js:hover {
    cursor: pointer;
}

#showreel:hover {
    cursor: pointer;
}

#chnagegh {
    /* position: absolute; */
    /* top: 1850px; */
    /* z-index: 2; */
    margin-left: 30px;
    width: 95vw;
    background-color: #ffff;
    display: none;
    /* background-size: cover; */
    /* background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(255, 0, 255, 0.8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); */
}

.coffee {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 10px;
    margin: auto;
    margin-bottom: 20px;
    margin-top: 20px;
    height: 51vh;
    width: 29vw;
}

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

.dds {
    display: flex;
    justify-content: space-around;
    width: 90vw;
    margin: auto;
}

#chnagejs {
    width: 100vw;
    padding: 10px;
    background-color: #ffff;
    /* position: absolute;
    top: 1890px; */
    /* z-index: 2; */
    display: none;


}

.dis {
    display: flex;
    justify-content: space-around;

}

#chnagect {
    width: 95vw;
    padding: 10px;
    background-color: #ffff;
    /* position: absolute; */
    /* top: 1950px;
    z-index: 2; */
    display: none;

}

#c1 {
    padding-left: 20px;
    font-size: 30px;
    padding-bottom: 20px;
    font-family: Montserrat;
    text-decoration: none;
    color: #0065F4;

}

.cc1 {
    height: 170px;
    width: 238px;
}

.cc2 {
    height: 170px;
    width: 223px;
}

#c2 {
    padding-left: 20px;
    padding-bottom: 20px;
    font-size: 30px;
    font-family: Montserrat;
    text-decoration: none;
    color: #0065F4;

}




/* .align{
    position: relative;
   display: flex;
   top: -20px;
   left:120px;
   align-items: center;
   
   
    
}
.align h2{
    margin-right: 10px;
} */

.mob {

    border: 1px solid rgba(0, 0, 0, 0.1);
    width: 50vw;
    height: 65vh;
}

.mobileui {
    width: 98.9vw;
    display: flex;
    justify-content: center;
}

.thanks {
    height: 5rem;
    width: 98.9vw;
    /* background: #03246c; */
    color: #000000;
    font-size: 1.5rem;
    font-family: Dancing Script;
    /* margin-left: 24rem; */
    text-align: center;
    text-align: center;
    justify-content: center;
    flex-wrap: wrap;



}

.red {
    height: 40vh;
    width: 50vw;
}


@media (max-width :1000px) {
    .heropage {
       
        background-image:url(bg.jpg);
        background-size: cover;
        height: 100vh;
    }

    .box {
        display: flex;
        flex-wrap: wrap;
        height: 25vh
    }

    .mainhad {
        padding-top: 0vh;
        font-size: 1.3rem;
    }

    .imgclass {
        height: 27vh;
    }

    .mainsubhad {
        font-size: 15px;
        font-weight: 368;
        padding-bottom: 0px;
    }

    .box1 {
        height: 28vh;
    }

    .landingpageimg {
        width: 25vw;
        height: 18vh;
    }

    .landinpage1 {
        padding-left: 32.2vw;

    }

    .coffee {
        height: 19vh;
    }
}
@media (max-width :420px) {
    .heropage {
        /* background-color: #03246c; */
       
        background-image:url(bg.jpg);
        background-size: cover;
        height: 140vh;
        width: 100vw;
    }

    .box {
        flex-wrap: wrap;
        height: 22vh;
        width: 91vw;
    }

    .ps {
        height: 9vh;
        width: 16vw;
    }

    .ulli {
        font-size: 0.8rem;
    }

    .hero2 {
        height: 110vh;
    }

    .hero2 h3 {
        padding-left: 7.8vw;
    }

    .box1 {
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;
        justify-content: space-around;
        height: 95vh
    }

    .imgclass {
        height: 32vh;
        width: 81vw;
    }



    .butt {
        padding-bottom: 14.5vh;
    }

    .mainhad {
        padding-top: 0vh;
        font-size: 1.4rem;
        padding-bottom: 20px;
        font-family: Montserrat;
    }

    .mainsubhad {
        font-size: 1rem;
    }

    .landinpage1 {
        font-size: 2.1rem;
        padding-left: 13.2vw;
    }

    .landigpage {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .landingpageimg {
        width: 99vw;
        height: 34vh;
    }

    .display {
        display: flex;
        flex-direction: column;
    }

    .coffee {
        height: 45vh;
        width: 90vw;
    }

    #chnagegh {
        margin-left: 1.4vw;

    }

    .dds {
        flex-direction: column;
        align-items: center;
    }
}