styles.css

*{
    padding: 0;
    margin: 0;
    }
@font-face {
font-family: 'Roboto', sans-serif;
    src:url('assets/Roboto-Medium.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
}
body * {
font-family: 'Roboto', sans-serif!important;
}
.page1{
    height:825px;
}
    
.white{
    background-color: white;
    flex-basis: 70%;
}
.black{
    background-color: #F5F5DC ;
    width: 30%;
    display: flex;
    margin-left: 70%;
    height: 825px;
}
.title{
    position:absolute;
    margin-left:200px;
    margin-top:30px;
}
.menu{
    position: absolute;
    margin-left: 210px;
    margin-top: 28px;
}

.imageslider{
    position: absolute;
    width:800px;
    height: 500px;
    margin-left:40px;
    margin-right:40px;

}

.info{
    animation-name: info;
    animation-duration: 1s;
    animation-iteration-count: 1;
}
@keyframes info{
    0%{
        transform: translateX(100px);
    }
    100%{
        transform: translateX(0px);
    }
}

.imageslider .slide{
    z-index: 1;
    position: absolute;
    width: 100%;
}

.imageslider .slide .image{
    position:absolute;
    z-index: 1;
    padding-left: 750px;
    padding-top:143px;
    animation-name: image;
    animation-iteration-count: 1;
    animation-duration:1s ;
    border-radius: 10px;
}

@keyframes image{
    0%{
        transform:translateY(200px);
    }
    100%{
        transform:translateY(0px);
    }
}

.imageslider .slide .number{
    color: rgb(149, 240, 240);
    font-weight: bolder;
    font-size: 200px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    margin-left: 150px;
    margin-top:100px;
    position: absolute;
}

.imageslider .slide .heading{
    color: black;
    font-weight: bold;
    font-size: 45px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    margin-left: 158px;
    margin-top:200px;
    position: absolute;
}

.imageslider .slide .paragraph{
    color: black;
    font-weight:100;
    font-size: 20px;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    margin-left: 160px;
    margin-top:330px;
    position: absolute;
    width: 70%;
}

.imageslider .slide .readmore{
    color: black;
    font-weight:bold;
    font-size: 15px;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    margin-left: 160px;
    margin-top:400px;
    position: absolute;

}

.readmore a{
    color:black;
    border-bottom: 3px solid transparent;
}

.readmore a:hover{
    border-bottom: 3px solid aqua;
}

.imageslider .slide .socialmedia{
    color: black;
    font-weight:bolder;
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-left: 160px;
    margin-top:480px;
    position: absolute;
}

.imageslider .slide .socialmedia a {
    text-decoration: none;
    color: black;
    border-bottom: 3px solid transparent;
}

.imageslider .slide .socialmedia a:hover{
    border-bottom: 3px solid aqua ;
}


.page2{
    background-color:rgba(37, 252, 220, 0.978);
    width: 100%;
    height: 600px;
}
.h1{
    position: absolute;
    margin-top:200px;
    margin-left: 170px;
    font-size:50px;
    width:50%;
    font-weight: bolder;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.h2{
    position: absolute;
    margin-top: 290px;
    margin-left: 170px;
    width:37%;
    align-content:stretch;
    font-size:18px;
    font-weight:bold;
    font-family:Georgia, 'Times New Roman', Times, serif;
}

.designimage{
    margin-left: 800px;
    position:absolute;
    margin-top: 50px;
}

.h3{
    position: absolute;
    margin-top: 380px;
    margin-left: 800px;
    font-size:16px;
    font-weight:lighter;
    width:39%;
    font-family:Verdana, Geneva, Tahoma, sans-serif;

}.box{
animation-name:box;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in;
}

@keyframes box{
    0%{
        transform: translateY(200px);
    }
    100%{
        transform: translateY(-10px);
    }
}

.page3{
    width: 100%;
    height:500px;
    background-color:white;
}

.ourservices{
    color: black;
    margin-left: 170px;
    margin-top: 50px;
    position: absolute;
    font-weight: bolder;
    font-size: 55px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.strategy{
    color: black;
    margin-left: 170px;
    margin-top: 150px;
    position: absolute;
    font-weight: bolder;
    font-size: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-decoration-line:underline ;
    text-decoration-style: wavy;
    text-decoration-color: rgba(37, 252, 220, 0.978);
}

.col1{
    color: black;
    margin-left: 170px;
    margin-top: 200px;
    position: absolute;
    font-weight: bold;
    font-size: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding-bottom: 10px;
    border-bottom-style: solid;
    border-bottom-width: 0.5px;
    border-bottom-color:rgba(37, 252, 220, 0.978) ;
}
.col2{
    color: black;
    margin-left: 170px;
    margin-top: 240px;
    position: absolute;
    font-weight: bold;
    font-size: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding-bottom: 10px;
    border-bottom-style: solid;
    border-bottom-width: 0.5px;
    border-bottom-color:rgba(37, 252, 220, 0.978) ;
}
.col3{
    color: black;
    margin-left: 170px;
    margin-top: 280px;
    position: absolute;
    font-weight: bold;
    font-size: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding-bottom: 10px;
    border-bottom-style: solid;
    border-bottom-width: 0.5px;
    border-bottom-color:rgba(37, 252, 220, 0.978) ;
}
.col4{
    color: black;
    margin-left: 170px;
    margin-top: 320px;
    position: absolute;
    font-weight: bold;
    font-size: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding-bottom: 10px;
    border-bottom-style: solid;
    border-bottom-width: 0.5px;
    border-bottom-color:rgba(37, 252, 220, 0.978) ;
}
.col5{
    color: black;
    margin-left: 170px;
    margin-top: 360px;
    position: absolute;
    font-weight: bold;
    font-size: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.design{
    color: black;
    margin-left: 500px;
    margin-top: 150px;
    position: absolute;
    font-weight: bolder;
    font-size: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-decoration-line:underline ;
    text-decoration-style: wavy;
    text-decoration-color: rgba(37, 252, 220, 0.978);
}

.col6{
    color: black;
    margin-left: 500px;
    margin-top: 200px;
    position: absolute;
    font-weight: bold;
    font-size: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding-bottom: 10px;
    border-bottom-style: solid;
    border-bottom-width: 0.5px;
    border-bottom-color:rgba(37, 252, 220, 0.978) ;
}

.col7{
    color: black;
    margin-left: 500px;
    margin-top: 240px;
    position: absolute;
    font-weight: bold;
    font-size: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding-bottom: 10px;
    border-bottom-style: solid;
    border-bottom-width: 0.5px;
    border-bottom-color:rgba(37, 252, 220, 0.978) ;
}

.col8{
    color: black;
    margin-left: 500px;
    margin-top: 280px;
    position: absolute;
    font-weight: bold;
    font-size: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding-bottom: 10px;
    border-bottom-style: solid;
    border-bottom-width: 0.5px;
    border-bottom-color:rgba(37, 252, 220, 0.978) ;
}
.col9{
    color: black;
    margin-left: 500px;
    margin-top: 320px;
    position: absolute;
    font-weight: bold;
    font-size: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding-bottom: 10px;
    border-bottom-style: solid;
    border-bottom-width: 0.5px;
    border-bottom-color:rgba(37, 252, 220, 0.978) ;
}
.col10{
    color: black;
    margin-left: 500px;
    margin-top: 360px;
    position: absolute;
    font-weight: bold;
    font-size: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.dev{
    color: black;
    margin-left: 830px;
    margin-top: 150px;
    position: absolute;
    font-weight: bolder;
    font-size: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-decoration-line:underline ;
    text-decoration-style: wavy;
    text-decoration-color: rgba(37, 252, 220, 0.978);
}
.col11{
    color: black;
    margin-left: 830px;
    margin-top: 200px;
    position: absolute;
    font-weight: bold;
    font-size: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding-bottom: 10px;
    border-bottom-style: solid;
    border-bottom-width: 0.5px;
    border-bottom-color:rgba(37, 252, 220, 0.978) ;
}
.col12{
    color: black;
    margin-left: 830px;
    margin-top: 240px;
    position: absolute;
    font-weight: bold;
    font-size: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding-bottom: 10px;
    border-bottom-style: solid;
    border-bottom-width: 0.5px;
    border-bottom-color:rgba(37, 252, 220, 0.978) ;
}
.col13{
    color: black;
    margin-left: 830px;
    margin-top: 280px;
    position: absolute;
    font-weight: bold;
    font-size: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding-bottom: 10px;
    border-bottom-style: solid;
    border-bottom-width: 0.5px;
    border-bottom-color:rgba(37, 252, 220, 0.978) ;
}
.col14{
    color: black;
    margin-left: 830px;
    margin-top: 320px;
    position: absolute;
    font-weight: bold;
    font-size: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding-bottom: 10px;
    border-bottom-style: solid;
    border-bottom-width: 0.5px;
    border-bottom-color:rgba(37, 252, 220, 0.978) ;
}
.col15{
    color: black;
    margin-left: 830px;
    margin-top: 360px;
    position: absolute;
    font-weight: bold;
    font-size: 15px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.section{
animation-name:section;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in;
}

@keyframes section{
    0%{
        transform: translateY(200px);
    }
    100%{
        transform: translateY(-10px);
    }
}

.zigzag{
    margin-left: 1100px;
    margin-top: 50px;
}

.page4{
    width:100%;
    height:1100px;
    background-color:rgb(236, 230, 230);
}

.img1{
margin-left: 200px;
margin-top:80px;
    width: 100px;
    height: 80px;
    
animation-name:img1;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in;
}

@keyframes img1{
    0%{
        transform: translateY(200px);
    }
    100%{
        transform: translateY(-10px);
    }
}

.txt1{
margin-left: 200px;
margin-top:370px;
position:absolute;
font-size: 18px;
font-weight: bold;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: rgba(78, 235, 212, 0.978);
}

.txt2{
    margin-left: 200px;
    margin-top:395px;
    position:absolute;
    font-size: 18px;
    font-weight: normal;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: black;
    }

.img2{
margin-left: 600px;
margin-top:150px;
position:absolute;
animation-name:img2;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in;
}

@keyframes img2{
    0%{
        transform: translateY(200px);
    }
    100%{
        transform: translateY(-10px);
    }
}

.txt3{
margin-left: 600px;
margin-top:510px;
position:absolute;
font-size: 18px;
font-weight: bold;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: rgba(78, 235, 212, 0.978);
}

.txt4{
margin-left: 600px;
margin-top:535px;
position:absolute;
font-size: 18px;
font-weight: normal;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
color: black;
}

.img3{
margin-left: 200px;
margin-top:450px;
        width: 100px;
    height: 80px;

animation-name:img3;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in;
}

@keyframes img3{
    0%{
        transform: translateY(200px);
    }
    100%{
        transform: translateY(-10px);
    }
}

.txt5{
margin-left: 200px;
margin-top:730px;
position:absolute;
font-size: 18px;
font-weight: bold;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: rgba(78, 235, 212, 0.978);
}

.txt6{
margin-left: 200px;
margin-top:755px;
position:absolute;
font-size: 18px;
font-weight: normal;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
color: black;
}

.img4{
    margin-left: 600px;
    margin-top:600px;
    position:absolute;
    animation-name:img4;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    }
    
    @keyframes img4{
        0%{
            transform: translateY(200px);
        }
        100%{
            transform: translateY(-10px);
        }
    }

.txt7{
margin-left: 200px;
margin-top:995px;
position:absolute;
font-size: 15px;
font-weight: bold;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: black;
}


.team1{
background-color: black;
width: 100%;
height:600px;
}

.meet{
margin-left: 200px;
margin-top:115px;
position:absolute;
font-size: 45px;
font-weight: bold;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: white;
animation-name:meet;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in;
}

@keyframes meet{
    0%{
        transform: translateY(200px);
    }
    100%{
        transform: translateY(-10px);
    }
}


.writing{
margin-left: 200px;
margin-top:280px;
position:absolute;
font-size: 17px;
font-weight:100;
width: 22%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
animation-name:writing;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in;
}

@keyframes writing{
    0%{
        transform: translateY(200px);
    }
    100%{
        transform: translateY(-10px);
    }
}


.pic1{
    margin-left:700px;
    margin-top:110px;
    position:absolute;
    animation-name: pic1;
    animation-duration: 1s;
    animation-iteration-count: 1;
}
@keyframes pic1{
    0%{
        transform: translateX(100px);
    }
    100%{
        transform: translateX(0px);
    }
}


.pic2{
    margin-left:1030px;
    margin-top:110px;
    position:absolute;
    animation-name: pic2;
    animation-duration: 1s;
    animation-iteration-count: 1;

}
@keyframes pic2{
    0%{
        transform: translateX(100px);
    }
    100%{
        transform: translateX(0px);
    }
}


.name1{
margin-left: 850px;
margin-top:455px;
position:absolute;
font-size: 16px;
font-weight:100;
width: 22%;
height:50px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
width: 10%;
color: white;
background-color: black;
}

.name2{
margin-left: 1170px;
margin-top:455px;
position:absolute;
font-size: 16px;
font-weight:bold;
width: 25%;
height:50px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
width: 11%;
color: white;
background-color:aqua;
}

.page6{
    background-color: rgba(78, 235, 212, 0.978);
    width:100%;
    height:300px;
}

.career{
margin-left: 200px;
margin-top:60px;
position:absolute;
font-size: 45px;
font-weight:bolder;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: black;
animation-name: career;
animation-duration: 1s;
animation-iteration-count: 1;

}
@keyframes career{
0%{
    transform: translateX(-100px);
}
100%{
    transform: translateX(0px);
}
}


.para1{
margin-left: 750px;
margin-top:70px;
position:absolute;
width:30%;
font-size: 20px;
font-weight:400;
font-family: Georgia, 'Times New Roman', Times, serif;
animation-name: para1;
animation-duration: 1s;
animation-iteration-count: 1;

}
@keyframes para1{
0%{
    transform: translateX(100px);
}
100%{
    transform: translateX(0px);
}
}

.video{
      text-align:center;
      border-radius:5px;
      color:gold;
      margin-left:25%;
}