@font-face{
    font-family: 'CeraPro';
    src: url(font/CeraPro/CeraPro-Bold.ttf);
    font-style: normal;
    font-weight: 600;
}

@font-face{
    font-family: 'CeraPro';
    src: url(font/CeraPro/CeraPro-Thin.ttf);
    font-style: normal;
    font-weight: 100;
}

@font-face{
    font-family: 'CeraPro';
    src: url(font/CeraPro/CeraPro-Italic.ttf);
    font-style: italic;
    font-weight: 400;
}

@font-face{
    font-family: 'CeraPro';
    src: url(font/CeraPro/CeraPro-LightItalic.ttf);
    font-style: italic;
    font-weight: 200;
}

@font-face{
    font-family: 'CeraPro';
    src: url(font/CeraPro/CeraPro-Light.ttf);
    font-style: normal;
    font-weight: 200;
}

@font-face{
    font-family: 'CeraPro';
    src: url(font/CeraPro/CeraPro-Regular.ttf);
    font-style: normal;
    font-weight: 300;
}
@font-face{
    font-family: 'CeraPro';
    src: url(font/CeraPro/CeraPro-Medium.ttf);
    font-style: normal;
    font-weight: 400;
}

@font-face{
    font-family: 'caudex';
    src: url(font/Caudex/Caudex-Bold.ttf);
    font-style: normal;
    font-weight: 600;
}
@font-face{
    font-family: 'caudex';
    src: url(font/Caudex/Caudex-Regular.ttf);
    font-style: normal;
    font-weight: 400;
}

@font-face{
    font-family: 'helvetica';
    src: url(font/Helvetica_Ultra_Compressed/Helvetica\ Ultra\ Compressed.ttf);
    font-style: normal;
    font-weight: 800;
}




body {
    display: block;
    margin: 0px;
    margin-top:0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

.homescreen{
    background-color: #27428B;
    height: 100vh;
}










/*html, body {
    max-width: 100%;
    overflow-x: hidden;
}*/






.navbar{
    text-align: center;
    background: #084FC3;
    position: fixed;
    z-index:+50;
    width: 100%;
}


.menu{
    margin-left: 10vw;
    padding-inline-start: 0px;
    display: flex;
    justify-content: space-between;
   
    justify-content: center;
    align-items: center;
    font-family: 'CeraPro';
   
    font-style: normal;
    height: 8.72vh;
    font-weight: 200;
    margin-top: 0;
    margin-bottom: 0;
    text-decoration: none;

}
li{
    text-decoration: none;
}
a{
    text-decoration: none;
}
.menuitems{
    font-size: 1.1vw;
    margin: 1vw 2vw;
    color: white;
    text-decoration: none;
}

.containeinitial{
    
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo{
    margin-right: 40vw;
    width: 6vw;
    
}
.logosvg{
    width: 6vw;
    
}
.menu a:hover {
    color: white;
    font-family: 'CeraPro';
   
    font-style: normal;
   
    font-weight: 600;
    transition: color .5s ease-in-out;
  }
.home{
    color: #FFB011;
    font-family: 'CeraPro';
   
    font-style: normal;
   
    font-weight: 600;
}

svg{
    width: 6vw;
    
    fill: #E6E8D7;  
}
svg:hover{
    width: 6vw;
    
    fill: #FFB011;  
}





















body{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 
}

nav{
    height: 8.72vh;
    /*background: #084FC3;*/
    margin-top: 0;
}

.nav-links {
    display: flex;
    list-style: none;
    width: 30%;
    
    /*height: 100%;*/
    justify-content: space-around;
    align-items: center;
    margin-left: auto;
    font-family: 'CeraPro';
    margin-right: 6vw;
    font-style: normal;
    font-weight: 200;
    
}

.navbartext{
    font-size: 1vw;
}




.nav-links li a{
    color: white;
    text-decoration: none;
    font-size: 16px;

}

@media screen and (max-width: 768px){
    .line{
        width: 30px;
        height: 3px;
        background: white;
        margin: 5px;
        
    }
    nav {
        position: relative;
    }
    .hamburger{
        position: absolute;
        cursor: pointer;
        right: 5%;
        top: 50%;
        transform: translate(-5%, -50%);
        z-index: 2;
    }
   
    .nav-links{
        position: fixed;
        background: #5b78c7;
        height: 100vh;
        width: 100%;
        flex-direction: column;
        clip-path: circle(0px at 90% 0%);
        -webkit-clip-path:circle(0px at 90% 0%);
        transition: all 0.5s ease-out; 
    }
    .nav-links.open{
        clip-path: circle(1000px at 90% 20%);
        -webkit-clip-path:  circle(1000px at 90% 20%);
    }
}












.homepagecontent{
    margin: 0 auto;
    display: flex;
    
    justify-content: space-between;
        
      width:  71.43%; /*  100-(100/7)*2  */
      /*height: 100vh;*/
    margin-top: 24vh;
    position: absolute;
    top: 0;
    margin-left: 14.28vw;
    
    z-index: +3;
 }

 .hiiam{
    font-family: 'caudex';
    
    font-style: normal;
    font-weight: 600;
    font-size: 3.4vw;
    color: rgb(255, 255, 255);
    margin-top: 1.5vw;
 }
 .namespan{
     color: #FFB011;
 }

.homepagepara{
    font-size: 1.04vw;
 /*  font-size: 1.18vw; for 16px in mylaptop*/
 font-family: 'CeraPro';
 font-style: normal;
 font-weight: 100;
    font-size: 1.7vw;
    line-height: 1.4em;
    color: rgb(255, 255, 255);
}

.homepageparaspan{
    font-family: 'CeraPro';
    font-style: normal;
    font-weight: 200;
}

.insidehomepagpng{
    width: 28.57vw;    
}

.downloadresume{
     display: inline-block;
     background: #E1301C;
     font-family: 'CeraPro';
    font-style: normal;
    font-weight: 100;
     color: white;
     font-size: 1.4vw;
     padding: 0.9em 1.7em; 
     margin-top: 3vw;  
}


.hompagelinegroup{
    display: flex;
    margin: 0 auto;
    width:  71.43%; /*  100-(100/7)*2  */
    
    justify-content: space-between;
    z-index: +2;
}
.hompageline{
    height: 100vh;
    background-color: #1D2F5E;
    width: 1px;
 
}

.hompagelinegroupdown{
    display: flex;
    margin: 0 auto;
    width:  71.43%; /*  100-(100/7)*2  */
    position: absolute;
    top: 0;
    margin-left: 14.1vw;
    justify-content: space-between;
    z-index: -1;
    margin-top: 100vh;
}
.hompagelinedown{
    height: 92.8vw;
    background-color: #F1F1F1;
    width: 1px;
 
}







.backgroundimage{

    position: absolute;
    top: 0;
    margin-top: 22vh;
    /* margin-top: -13vh; */
    margin-left: 14.28vw;
    z-index: +1;
   /* font-family: 'helvetica';
    font-style: normal;
    font-weight: 800;
    

    color: #28438C;

    text-shadow: 1px 1px 18px rgba(35, 56, 114, 0.49);
    font-size: 25vw;*/

}
.backgroundimagedesign{
    margin-top: 0;
    margin-bottom: 0;
    font-family: 'helvetica';
    font-style: normal;
    font-weight: 800;
    text-shadow: 1px 1px 18px rgba(35, 56, 114, 0.49);
    font-size: 26vw;

    color: #28438C;


}













h2{
    font-size: 3.125rem;
}


.work{
    font-family: 'caudex';
    
    font-style: normal;
    font-weight: 600;
    width: 100%;
    
    background-color: #E6E8D7;
}
.workclass{
    font-size: 3vw;
    margin-left: 14.28%;
    padding-bottom:1em;
    padding-top: 1em;
    font-family: 'caudex';
    
    font-style: normal;
    font-weight: 600;
   
    margin-top: 0px;
    margin-bottom: 0px;
    color: #27428B  ;
}






.topicheading{
    font-size: 2.12vw;
    font-family: 'caudex';
    
    font-style: normal;
    font-weight: 400;
   
    
   
   margin-top: -.5vw;
    margin-bottom: 1vw;


}
.topicno{
    font-size: 2vw;
    font-family: 'caudex';
    
    font-style: normal;
    font-weight: 600;
    color:white; 
    width: 2vw;
    padding-top: 2.3vw;
    padding-bottom: 2.3vw;
    /*border: 1px solid #000000;*/
    
    /*
    -webkit-text-stroke-width: 0.09vw; 
    -webkit-text-stroke-color: black; */
   
    
}
/*.topicnostrock{
    
    z: 1;
}*/

.para1{
    width: 86%;
    font-size: 1.04vw;
 /*  font-size: 1.18vw; for 16px in mylaptop*/
 font-family: 'CeraPro';
 font-style: normal;
 font-weight: 300;
    line-height: 1.4em;
    margin-top: 0.1vw;
    margin-bottom: 0;
color: #3d3d3d;
    /*letter-spacing: 0.06em;*/
}
.belowpara1{
    width: 86%;
    font-size: 1.04vw;
    /*  font-size: 1.18vw; for 16px in mylaptop*/
    font-family: 'CeraPro';
    font-style: normal;
    font-weight: 400;

    line-height: 1.4em;
    color: #E1301C;
    margin-top: 1vw;
    /*letter-spacing: 0.06em;*/
}
    /*.belowpara2{
    width: 86%;
    font-size: 16px;
    font-family: Cera Pro;
    font-weight: 300;
    font-style: normal;
    line-height: 1.4em;
    color: #27428B;
    /*letter-spacing: 0.06em;*/







.container{
   margin: 0 auto;
     width:  71.43%; /*  100-(100/7)*2  */

}
.column1{
    display: flex;
  
    justify-content: space-between;
    width: 100%;
    /*background-color: rgb(116, 116, 116);*/
    height: 23.5vw;
}

.column2{
    display: flex;
  
    justify-content: space-between;
    width: 100%;
    /*background-color: rgb(116, 116, 116);*/
    height: 23.5vw;
}

.column3{
    display: flex;
  
    justify-content: space-between;
    width: 100%;
    /*background-color: rgb(116, 116, 116);*/
    height: 23.5vw;
}



.column1_1{
    width: 40%;
   
}

.column1_2{
    width: 40%;
    
      
}

.project1png{
   height: 100%
    /*max-width: 100%;*/
   
}







.viewfull1{
    display: flex;
    background-color: black;
    justify-content: space-between;
    width: 100%;
    height: 3.1vw;
    margin-top: 1.8vw;
}

.viewfull{
    
    font-size: 0.832vw;
    font-family: 'CeraPro';
    font-style: normal;
    font-weight: 200;
    
    line-height: 1.5em;
    color: rgb(255, 255, 255);
    margin-left: 1.4em; 
    margin-top: 0.9vw;
    
  
   
    /*letter-spacing: 0.06em;*/
}
.arrowicon{
    
    font-size: 0.832vw;
    font-family: 'CeraPro';
    font-style: normal;
    font-weight: 200;
    line-height: 1.4em;
    color: rgb(255, 255, 255);
    margin-right: 1.4em; 
    position: relative;
    vertical-align: middle;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5vw;
    /*letter-spacing: 0.06em;*/
}



.line{
    margin: 0 auto;
    width: 90%;
    height: 1px;
    background-color: rgb(126, 126, 126);
    margin-left: 5vw;
    /* marginleft=(71.43(width-100)/200*/
}
.rectangle{
    
    width: 100%;
    height: 6vw;
    background-color: #F1F1F1;
    /*  margin-left: -10.71vw;*/
    /* marginleft=(71.43(width-100)/200*/
}

.seeall{
    background: #E6E8D7;
    width: 100%;
    height: 11.9vw;
    
    display: flex;
    display: flex;
  justify-content: center;
  align-items: center;
}


.seeallbotton{
display: inline-block;
background: #E1311F;
font-family: 'CeraPro';
font-style: normal;
font-weight: 100;
color: white;
font-size: 1.4vw;
padding: 0.9em 1.7em; 
margin-top: 3vw
}
.casestudies{
    background: #E1311F;
    padding: 1.3vw 3vw;
    width: 17vw;
    
}


.bottomsection{
    width: 100%;
    height: 30vw;
    background-color: #27428B;
    position: relative;
}

.bottomlinegroup{
    position:  absolute;
        display: flex;
            margin: 0 auto;
            width:  71.43vw; /*  100-(100/7)*2  */
            margin-left: 14.285vw;
            justify-content: space-between;
           /* z-index: +2;*/
}


.bottomline{
    height: 30vw;
    background-color: #1D2F5E;
    width: 1px;
 
}

.flexbottomsec{
    position: absolute;
    display: flex;
    margin: 0 auto;
     /*  100-(100/7)*2  */
    
    justify-content: space-between;
}

.bottomcontent{
    position: absolute;
    top: 0;
    left: 14.28vw;
}
.letsconnect{
    font-size: 3vw;
    
    padding-bottom: 0.5em;
    padding-top: 1.5em;
    font-family: 'caudex';
    font-style: normal;
    font-weight: 600;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #E6E8D7;
}
.Feelfreetocontact{

    font-size: 1.2vw;
    font-family: 'CeraPro';
    font-style: normal;
    font-weight: 100;
    line-height: 1.5em;
    margin-top: 0.1vw;
    margin-bottom: 2vw;
    color: white;
}
.socialicon{
    margin-top: 1vw;
    margin-right: 2vw;
    width: 3.5vw;
}
.mailid{
    font-family: 'CeraPro';
    font-style: normal;
    font-weight: 400;
    color: #FFB011;

}
.letsconnectimage{
    padding-top: 4vw;
    margin-left: 57.16vw;
    width: 28.56vw;
}




.aboutmelinegroupdown{
    display: flex;
    margin: 0 auto;
    width:  71.43vw; /*  100-(100/7)*2  */
    position: absolute;
    top: 0;
    margin-left: 14.285vw;
    justify-content: space-between;
    z-index: -1;
    
}
.aboutmelinedown{
    height: 54vw;
    background-color: #E0E0E0;
    width: 1px;
 
}

.myimage{
    margin-left: 14.285vw;
    width: 71.43vw;
}
.aboutmeconent{
    margin-left: 14.285vw;
    width: 71.43vw;
}
.insidemyimage{
    width: 71.43vw;
}


.somethingtogether{
    color: #FF9690;
    font-family: 'CeraPro';
font-style: normal;
font-weight: 400;
}









.downloadresume:hover{
    font-family: 'CeraPro';
    font-style: normal;
    font-weight: 200;
    background-color: #FFB011;
    color: black;
}
.casestudies:hover{
    background-color: #000000;
}
.socialicon:hover{
    box-shadow: 0px 3px 8px #3d3d3d;
}



#navbar {
    
    transition: top 0.8s;
}


.rectangle1{
    width: 100%;
    height: 4vw;
    background-color: #F1F1F1;
}


  
.viewfull1:hover{
    background-color: #094FC3;
}






.Humanizing{
    font-family: 'CeraPro';
    
    font-style: italic;
    font-weight: 200;
    color:#FFB011;
}


























.selftought{
    font-family: 'CeraPro';
    
    font-style: normal;
    font-weight: 200;
}


.aboutmeconent{
    width: 56vw;
    font-family: 'CeraPro';
    
    font-size: 1.39vw;    
    font-style: normal;
    font-weight: 300;   
}
.aboutmeconentp{
    padding-left:14.28vw;
}
.Constantly{
    font-family: 'CeraPro';
    
    font-style: italic;
    font-weight: 400;
}
.selftoughtlink{
    color: white;
}
a{
    color: white;
   
}




.socialmediaiconsize{
     width: 1vw;
    height: 1vw;
}










.hompagelinegroupdownwork{
    display: flex;
    margin: 0 auto;
    width:  71.43%; /*  100-(100/7)*2  */
    position: absolute;
    top: 0;
    margin-left: 14.1vw;
    justify-content: space-between;
    z-index: -1;
    margin-top: 10vh;
}
.hompagelinedownwork{
    height: 300vw;
    background-color: #F1F1F1;
    width: 1px;
 
}


.cognidashboard{
    margin-top: 4vw;
    margin-left: 12vw;
    align-content: center;
    width: 75vw;
     height: 100vh;
}


.speechtotextimages{
    width: 100vw;
     margin-left: 0vw;
}
.speechtotextimages1{
    margin-top: 4vw;
}


.cognidashboardbody{
    align-content: center;
}

@media (max-width:500px){
    .speechtotextimages{
        width: 100vw; 
        margin-left: 0vw;
    }
}