@import url('excon.css');



*{
    box-sizing: border-box;
}


body{

    margin: 0;
   
}

/*basic elements*/




a{

    text-decoration: none;
    color: black;
    font-size: 18px;

}

h1{

    font-family: 'Excon-Bold';
    font-size: 100px;

}

h2{
    font-family: 'Excon-Bold';
    font-weight:800;
    font-size: 64px;

}

h3{ 
    font-family: 'Excon-Bold';
    font-size: 48px;
    font-weight: lighter;
    text-shadow: #000000;

}

h4{ 
    font-weight:800;
    font-size: 40px;
    color: #ffffff;
    text-shadow:2px 2px #d8d8d8b3;
    margin: 0;
}

h5{

    font-family: 'Excon-Bold';
    font-size: 64px;
}
p{

    font-family: 'Excon-Regular';
    font-size: 18px;
    text-align: justify;
}

img{
    display: block;
    max-width: 100%;
}



/************** Nav bar: Aniamtion **************/


nav{
    
    max-width: 100%;
    text-decoration: none;
    font-size: 24px;
    animation-name: nav-enter;
    animation-duration: 1s;
    animation-delay: 0.s;
    animation-fill-mode: backwards;
}

.icon{
    
    width: 5%; 
    margin-right: 20px;
    padding-top: 2%;
    float: left;
    animation-name: icon-animate;
    animation-duration: 1s;
    
}
.nav_links{

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
   text-align: center;
}


.item{
  
   padding-top: 4%;
   color: black;
   font-family: Restora, ExtraLight;
   text-align: center;
 
} 

.item:hover{

    animation-name: item-hover;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;

}


/*Animation*/



@keyframes item-hover{
from{
    transform: translateY(0px);
   
}
to{

    transform: translateY(-10px);
    
}


}


@keyframes nav-enter {
    
    from {
       
        opacity: 0;
        
       
      }
    
      to {
        opacity: 1;
        
    
      }

}



@keyframes icon-animate  {
    
    from {
        transform: scale(0);
        transform: translateX(100);
       
      }
    
      to {
        transform: scale(1);
        transform: translateX(10);
      
      }

}
                      /*************** Home Page ***************/

/********** header with animation ********/
.start_animation{
   max-width: 100%;
    display: grid;
    grid-template-rows: (3,1fr);
    grid-template-columns: (3,1fr);

}
.greeting{ 

    width: 100%;
    display: inline-block;
    font-family: Restora, ExtraLight;
    padding-left: 10%;
    font-size: 200px;
    letter-spacing: 10px;
    border-right: 5px solid;
    white-space: nowrap;
    overflow: hidden;
     grid-row: 2;
    grid-column: 3/3;
    animation:
        typing 2s ,
        cursor .4s step-end infinite alternate,
         leave  5s, ease-out ;
         transform: scale(0);
       
}

/*blinking cursor*/
 @keyframes cursor{

    50% {border-color: transparent;
         
    }
 }

 /*typing animation*/


 @keyframes typing{

    from { width: 0 ;
        
    }
 }
/*greeting leaves*/

@keyframes leave{

    0%{ transform: translateX(0);
    opacity: 1;}

    100%{ transform: translateX(-300);
        opacity: 0;}
}

.greeting, .logo{
    
    grid-column: 3/3;
   
}

.logo{

    grid-row: 3/-3;
    grid-column: 3/3;
    width: 30%;
    margin-left: 36%;
    padding-top: 5%;
    margin-top: 100px;
    margin-bottom: 100px;
    animation-name: logo_animate;
    animation-duration: 1s;
    animation-delay: 1.4s;
    animation-fill-mode: forwards;
    transform: scale(0);

    
}
/*animtion of logo. The header animation ends here*/

@keyframes logo_animate{
    0%{
        transform: scale(0);

      }
      
      90%{

        transform: scale(1.1);
      }

      100%{
        transform: scale(1);

      }
}
/******/

/******** About Section *********/

.about_container{


    background-color: #FFD1C6;
   
    font-size: 64px;
}

.logo_oneline{ 

    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
    padding-bottom: 2%;
    padding-top: 2%;
    color: #ffffff;
    text-shadow: 2px 2px #66666661;
    
   

}


.about_content{

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    justify-items: center;
    padding-bottom: 10%;
}

.about_img{

    width: 400px;
    height: 350px;
    margin-bottom: 49px;
}

/******* Categories Section ********/

.Categories_container{ 

    background-color: #9CE0DB;
}
.categories_section{

    max-width: 100%;
    background-color: #9CE0DB;
    display: flex;
    justify-content: center;
}


 .categories_heading{
 display: flex;
 justify-content: center;
 width: 100%;

 color: #ffffff;
 text-shadow: 2px 2px #66666661;


 }
.Funky_logo{

  width: 100%;
   
}
/***** Styling for different letters (funky friend) since they have 
different colours *****/



/***** Category images that serve as buttons *****/
.category_UX{

    width: 100%;
    padding-top:2%;
    padding-bottom:50%;
    height: auto;

}

/****** Footer, email signiature was edited for this *****/
footer{
    max-width: 100%;
    background-color: #FFF4F2;
    height: auto;
    display: flex;
  
}

.FooterContent{ 

    display:flex;
    width: 100%;
    flex-direction: row;
    align-items: center;

}
.FooterText{ 

    width: 33.3%;
    padding-left: 2%;
    
}



.social-links{

    display: flex; 
    width: 10%;

   
}


.social-links-section{

    width: 33.3%;
   display: flex;
   flex-direction: row;
   justify-content: center;
    

}

.footerQoute{ 
    display: flex;
    justify-content: center;
    width: 33.3%;
}
 
                                /*********** 404 Error page ******/
.Error_Text{

    color: #FF7155;
}

.Error_heading{ 
    max-width: 100%;
    padding-right: 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 10%;
}

                             /************* Portfolio Page ****************/

/* page includes animations upon opening*/

.portfolio_heading_text_main{

    max-width: 100%;
    text-align: center;
    padding-bottom: 3%;
    width: 100%;
    animation:nav-enter
    
}

.portfolio_heading{

  width: 100%;
  display:inline-block;

 
}
.portfolio_heading_text{ 
    
    max-width: 100%;
    margin-top: -10%;
    text-align: center;
    padding-bottom: 3%;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    animation:nav-enter
    
    
}
/****** Animation for heading ******/
@keyframes cursor{

    50% {border-color: transparent;
         
    }
 }

@keyframes appear{

    from { width: 0 ;
        
    }
}

/****** Category Card section starts *****/
.card_section{

    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-bottom: 20%;


}
/*** This class is for the gif inside the card ****/
.Card_animation{

    width:100%;

}

/***** styling for the cards, animation included *****/
.card_UX, .card_motion, .card_3D{

    position: relative;
    display: inline-block;
    border-radius: 10%;
    width: 300px;
    height: 350px;
    border-color: #ffffff;
    border-style: solid;
    border-width: 4px;
    display: flex;
    align-content:center;
    flex-wrap: wrap;
    flex-direction:column;
    justify-content: center; 
    animation-name: card-pop-up;
    animation-duration: 1s;

    
}

/* card contnets-logo, heading and text*/
.card_content{ 

    position: absolute;
    margin-top: -85%;
    color: #FFF4F2;
    width: 300px;
    height: 350px;
  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center ;
    visibility: visible;
    border-radius: 10%;
    background-color: #FF7155;
    transition: 800ms ease;
    opacity: 0;
    animation-name: card-pop-up;
    animation-duration: 1s;

}



@keyframes card-pop-up{
    from {
        transform: scale(0);
        transform: translateX(100);
       
      }
    
      to {
        transform: scale(1);
        transform: translateX(10);
      
      }
    
}
 .card_motion:hover .card_content{

    background-color: #FFB03D;
}

.card_3D:hover .card_content{

    background-color:#5E499F;
}

.icon_white{ 

    width: 30%;
    padding-bottom: 5%;
  

}

.card_content:hover{

opacity: 1;
transform: scale(1.1);
}

                  /****************Contact Page *****************/

.pulse_container{ 

  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10%;
    width: 80%;
    margin-right: -60px;
}

.contact_container{
    position: relative;
    display: inline-block;
    width:60%;
    height: 500px;
    border-radius: 50px;
    border-color: #ffffff;
    border-style: solid;
    border-width: 7px;
    display: flex;
    align-content:center;
    flex-wrap: wrap;
    flex-direction:column;
    justify-content: center; 
    background-color: #5E499F;
    color: #ffffff;
    box-shadow:  rgb(255, 255, 255);
    transform: scale(1);
    animation: pulse-white 2s infinite;
}



.contact_text {

    width:100%;
    font-weight:20;

    font-size: 64px;
   
    margin-top: 5%;
    margin-bottom:6%;
    padding-left: 18%;
    color: #ffffff;
}


@keyframes pulse-white {
    0% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
    
    100% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
  }

   

.contact_form{
   
    position: absolute;
    margin-top: -15%;
    margin-left: 5%;
   
    width:40%;
    height: 560px;
    background-color: #5E499F;
    
    border-radius: 40px;
    color: #ffffff; 
    transition: 800ms ease;
    opacity: 0;
    animation-name: card-pop-up;
    animation-duration: 1s;
   
}
.contact_form:hover{

    opacity: 1;

}

input[type=text], select, textarea {
    width: 100%;
    padding: 20px; 
    border-radius: 20px; 
    box-shadow:  0 0 0 0 rgb(255, 255, 255);
    margin-top: 6px; 
    margin-bottom: 16px; 
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    
  }

  input[type=submit] {
   background-color: transparent;
    color: white;
    border:#ffffff;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 32px;
  
    
}

  input[type=submit]:hover {
    background-color:#FFD1C6;
    color: black;
    
  }

.submit_btn{

    background-color: #5E499F;
    
}
.subject{

    padding-bottom: 7%;
  
    background: #5E499F;
    
}

                /***********Project page ******/

.back_arrow{

    transform: rotate(-90deg);
    width: 5%;
    margin-top: 10%;
    margin-left: 5%;
 
}

.up_arrow{
    width: 5%;
    float: right;
    margin-right: 50px;
    margin-top: -100px;
    
   

}
.project_card_container{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-bottom: 10%;
}

 .project_card{

    width: 300px;
    height: 350px;
    border-radius: 10%;
    border-color: #ffffff;
    border-style: solid;
    border-width: 4px;
    display: flex;
    align-content:center;
    flex-wrap: wrap;
    flex-direction:column;
    justify-content: center; 
    transition: width 2s, height 4s;
    animation-name: card-pop-up;
    animation-duration: 1s;
 }

.project_card:hover{

    width: 310px;
    height:360px;
    box-shadow: 4px 4px 4px 4px rgb(239, 239, 239) ;
}

.Logo_container{
    display: flex;
    justify-content: center;
    width:100%;

}

.img_project{
    display: flex;
    justify-content: center;
    width:400px;
    height: 200px;
    object-fit:contain;
    padding-bottom: 4%;


}

.Brief{ 

    display:flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding-bottom: 5%;
}
.Brief_Heading{ 
    display: flex;
    width: 25%;
}
.Brief_Content{ 
    display: flex;
    align-items: center;
    width: 75%;
    padding-left: 5%;
}

.Insight{ 

    display:flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding-bottom: 5%;
}
.Insight_Heading{ 
    display: flex;
    width: 25%;
}

.Insight_Content{ 
    display: flex;
    align-items: center;
    width: 75%;
    padding-left: 5%;
}

.Solution{ 

    display:flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}

.Solution_Heading{ 
    display: flex;
    width: 25%;
}

.Solution_Content{ 
    display: flex;
    align-items: center;
    width: 75%;
    padding-left: 5%;
}

video{

    width: 70%;
    height: 400px;
}

.video_special{
    width: 60%;
    border-color: #ffffff;
    border-width: 4px;
    border-style: solid;
    border-radius: 3%;
    padding: 5%;
    -webkit-border-radius: 50px;
   
}

.project_container{

    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 2.5%;
  
   
}

.project_content{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding-bottom:5%;
    padding-top: 2%;
    padding: 5%;

    padding-bottom: 4%;

}

.PortfolioHeading{


    width: 100%;
    padding-left: 30%;
    padding-top: 5%;

}

.PortoCategoryHeading{

    padding-left: 5%;
    padding-top: 5%;
    padding-bottom: 5%;
}

.UXUI_section{

    background:#FFD1C6;
    color: #ffffff;
    
}


.threeD_section{

    background:#E4E0EF;
    


}



 /* small to large phones*/
 @media only screen and (max-width: 375px){


 *{

        transition: none;
        transform: none;
     
        
    }

    h1{

        font-size: 20px ;

    }
    
    h2{
    
        font-weight:800;
        font-size: 20px !important;
    
    }
    
    h3{ 
        
        font-size: 20px;
        
    }

    h4{ 
        
        font-size: 24px;
       

    }

    h5{ 
        font-size: 20px !important;
    }

    p{
        text-align: left;
        font-size: 12px;
    }

    .PortfolioHeading{ 

        padding-left: 20%;
    }
    .contact_container{
        position: relative;
        display: inline-block;
        width:100%;
        height: 50px;
        border-radius: 20%;
        border-color: #ffffff;
        border-style: solid;
        border-width: 7px;
        display: flex;
        align-content:center;
        flex-wrap: wrap;
        flex-direction:column;
        justify-content: center; 
        background-color: #5E499F;
        color: #ffffff;
        box-shadow:  rgb(255, 255, 255);
        transform: scale(1);
        animation: pulse-white 2s infinite;
        -webkit-border-radius: 50px;
        opacity: 1;
        animation: none;
    }
    .pulse_container{ 
   
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10%;
          width: 50;
       
      }
      .Brief{ 

       
        display:flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding-bottom: 5%;
    }
    .Brief_Heading{ 
        display: flex;
        width: 25%;
    }
    .Brief_Content{ 
        display: flex;
        align-items: center;
        width: 75%;
        padding-left: 5%;
    }
    
    .Insight{ 
    
        display:flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding-bottom: 5%;
    }
    .Insight_Heading{ 
        display: flex;
        width: 25%;
    }
    
    .Insight_Content{ 
        display: flex;
        align-items: center;
        width: 75%;
        padding-left: 5%;
    }
    
    .Solution{ 
    
        display:flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .Solution_Heading{ 
        display: flex;
        width: 25%;
    }
    
    .Solution_Content{ 
        display: flex;
        align-items: center;
        width: 75%;
        padding-left: 5%;
    }

    .card_UX, .card_motion, .card_3D, .project_card{
       
      
        width: 250px !important;
        height: 300px !important;
        border-radius: 10%;
        border-color: #ffffff;
        border-style: solid;
        border-width: 4px;
        display: flex;
        align-content:center;
        margin-top: 40px;
        flex-direction:column;
        align-items: center; 
        animation: none;
      
    }
 
}

@media only screen and (max-width: 768px) {

    @import url('excon.css');

    *{

        transition: none;
        transform: none;
     
        
    }

    h1{

        font-size: 20px;

    }
    
    h2{
    
        font-weight:800;
        font-size: 64px;
    
    }
    
    h3{ 
        
        font-size: 20px;
        
    }

    h4{ 
        
        font-size: 24px;
       

    }
    h5{

        font-family: 'Excon-Bold';
        font-size: 34px;
    }
    p{
        text-align: left;
        font-size: 12px;
    }

    nav{
        
        animation-delay: 1ms !important;
        display: flex;
        align-items: center;
        justify-content: center;


    }

    .nav_links{
    
        display: flex ;
        flex-direction: column;
        align-items: center ;
        justify-content: flex-end ;
    
    }

    .icon{
    
        width: 20%;
        display: flex;
        align-items: center;
        justify-content: center;
       
    }

    
     .item{
  
            padding-top: 4%;
            padding-right: 8% ;
            margin-left: 5%;
            color: black;
            font-family: Restora, ExtraLight;
            font-size: 25px;
            
          
        } 

        .greeting{ 
            visibility: hidden;
            width: 100%;
            display: inline-block;
            font-family: Restora, ExtraLight;
            font-size: 40px;
            letter-spacing: 10px;
            padding-right: 20%;
            border-right: 5px solid;
            white-space: nowrap;
            animation: none !important;     
       
        }
   
        .logo{
            margin-left: 25%;
           grid-row: 3/-3;
           grid-column: 3/3;
           width: 50%;
           padding-top: 10%;
           padding-bottom: 5% !important;
           animation-delay: 0.1ms !important;
           
     
       }
   
       .item:hover{
       
           
           animation: none;
       
       }
       
      /*********** About Section ********/
   
       .logo_oneline{ 
   
           display: flex;
           width: 100%;
           align-items: center;
           justify-content: center;
          
           padding-top: 5%;
           
   
       }
       
       .about_content{

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-items: center;
        padding-top: 5%;
        padding-left: 5%;
        padding-right: 5%;
        padding-bottom: 0%;
    }
   .about_img{
   
   
       width: 200px;
       height: 300px;
      margin-left: -10%;
      
      
   }
   
   .about_text{
   
     
      padding-right: 10%;
      padding-left: 10%;
     
      
   }
   
   
   /********* Categories section **********/
   
   .categories_section .container .WeLikeTo{
       position:absolute;
       margin-top:-25px;
       padding-left: 5%;
       color:white;
       font-weight: bold;
       font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
       font-size: 32px;
   }
   
   .categories_section .container .Get {
       position:absolute;
       margin-top:20px;
       padding-left: 20%;
       font-weight: bold;
       color:rgb(0, 0, 0);
       font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
       font-size: 32px;
   }

   .categories_section{

    
    background-color: #9CE0DB;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 10%;
}

.categories_heading{
    display: flex;
    justify-content: center;
    width: 100%;
    padding-bottom: 5%;
    color: #ffffff;
    text-shadow: 2px 2px #66666661;
}
   
   
   .category_UX{
   
      
       display: flex;
      
       padding-bottom: 2%;
       height: auto;
   }

   .smallerimg{ 
    width: 30%;
   }
   
   .portfolio_heading{

       max-width: 100%;
      
    
   }
   
   .portfolio_heading_text{ 
       text-align: center;
       padding-bottom: 3%;
       padding-top: 5%;
       max-width: 100%;
       animation: none;
       
       
   }
   
   
   /***** styling for the cards, animation included *****/
   
   .card_section, .project_card_container{
   
       width: 100%;
       display: flex;
       flex-direction: column;
       align-items: center;
       animation: none;
   
   }
   
   .project_card{
   
       width: 300px;
       height: 350px;
       animation:none;
    }
   
   
   
   /* card contnets-logo, heading and text*/
   
   .card_UX, .card_motion, .card_3D, .project_card{
       
      
       width: 305px;
       height: 350px;
       border-radius: 10%;
       border-color: #ffffff;
       border-style: solid;
       border-width: 4px;
       display: flex;
       align-content:center;
       margin-top: 40px;
       flex-direction:column;
       align-items: center; 
       animation: none;
     
   }
   
   .card_content{ 
      
       width: 0px;
       height: 0px;
       visibility: hidden;
   
   }
   
   

   /************** Contact Page ************/
   
   .pulse_container{ 
   
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 10%;
         width: 100%;
      
     }
     
     .contact_container{
         position: relative;
         display: inline-block;
         width:100%;
         height: 500px;
         border-radius: 20%;
         border-color: #ffffff;
         border-style: solid;
         border-width: 7px;
         display: flex;
         align-content:center;
         flex-wrap: wrap;
         flex-direction:column;
         justify-content: center; 
         background-color: #5E499F;
         color: #ffffff;
         box-shadow:  rgb(255, 255, 255);
         transform: scale(1);
         animation: pulse-white 2s infinite;
         -webkit-border-radius: 50px;
         opacity: 1;
         animation: none;
     }
     .contact_container:hover{
   
       animation-play-state: paused;
     
     }
     
     .contact_text {

        width:100%;
        font-weight:20;
        font-family: 'Excon-Bold';
        font-size: 64px;

        margin-top: 5%;
        margin-bottom:6%;
        padding-left: 18%;
        color: #ffffff;
    }
     
     @keyframes pulse-white {
         0% {
           transform: scale(0.95);
           box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
         }
         
         70% {
           transform: scale(1);
           box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
         }
         
         100% {
           transform: scale(0.95);
           box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
         }

   
       }
     
        
     
     .contact_form{
        
        
         margin-top: 1% !important;
         margin-left: 7% !important;
        
      
   
     }
     .contact_form:hover{
     
         opacity: 1;
     }
     input[type=text], select, textarea {
       
         width: 70%;
         padding: 5px; 
         border-radius: 10px; 
         box-shadow:  0 0 0 0 rgb(255, 255, 255);
         margin-top: 6px; 
         margin-bottom: 16px; 
         font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         
       }
     
       input[type=submit] {
        background-color: transparent;
         color: white;
         border:#ffffff;
         padding: 6px 10px;
         border: none;
         border-radius: 5px;
         cursor: pointer;
         font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         font-size: 16px;
         background-color: #5E499F;
       
         
     }
      
     
     .submit_btn{
     
        color: #ffffff;
         
     }
     .subject{
   
         background: #5E499F;
         
     }
   
     /********* Project Pages*************/
   
     .back_arrow{
   
       transform: rotate(-90deg);
       width: 10%;
       margin-top: 10%;
       margin-left: 5%;
    
   }
   
   .up_arrow{
       width: 10%;
  
       margin-right: 5px;
       margin-top: -80px;
       
      
   
   }
   .img_project{

    width:200px;
    height: 250px;
    object-fit:contain;
    padding-bottom: 4%;

}
   .Logo_container{
       display: flex;
       align-items: center;
       max-width:100%;
       flex-direction: column;
       text-align: center;
       padding-bottom: 5%;
   }
   .img_project{
   
       width: 70%;
       padding-bottom: 4%;
   
   }
   video{
   
       width: 80%;
       height: auto;
   }
   .video_special{
   
       width: 90%;
       border-color: #ffffff;
       border-style: solid;
       border-width: 1px;
       border-radius: 3%;
       padding: 5%;
       -webkit-border-radius: 20px;
      
   }
   
   .project_container{
   
       width: 100%;
       display: flex;
       justify-content: center;
       padding-bottom: 10%;

     
      
   }
   
   .project_content{
       width: 90%;
       height: auto;
       display: flex;
       align-items: center;
       flex-direction: column;
       text-align: center;
      padding-bottom:5%;
      padding-top: 5%;
     
      border-style: none;
      border-width: 1px;
       border-radius: 3%;
       -webkit-border-radius: 20px;
       padding-bottom: 4%;
   
   }
   
   /****** Footer, email signiature was edited for this *****/
   
   footer{
       width: 100%;
       background-color: #FFF4F2;
       height: auto;
   
   }
   .email-sig-container{
       max-width: 100%;
       height: auto;
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
       padding-top: 5%;
   
   }
   .contact-details{
   
       width: 50%;
       font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
       font-size: 20px;
       
   
   }
   
   .name-social{
   
       font-family: 'Restora';
       font-style: normal;
       font-weight: 200;
       font-size: 32px;
       
   }
   
   
   
   .social-links{
   
       width: 50%;
       display: inline-block;
       transition: 1s ease;
   }
   
   .logoFooter{
   
       width: 20%;
       transition: 1s ease;
      
       
   }
   
   .contact-details-1{
       font-weight: 600;
       
       
   }
   
   .contact-details-2{
   
       font-weight: 100;
   }
   .contact_section{
   
   
   padding-top: 2%;
   padding-bottom: 2%;
   
   }
   
   .social-links:hover{
   
       -webkit-transform: scale(1.2);
       -ms-transform: scale(1.2);
       transform: scale(1.2);
       transition: 1s ease;
       }
   
    .logo:hover{
   
           -webkit-transform: scale(1.2);
           -ms-transform: scale(1.2);
           transform: scale(1.2);
           transition: 2s ease;
   
           }
   
   .FooterContent{


    justify-content: space-evenly;
   }
   .social_section{
       width: 50%;
       margin: 0;
       padding-left: 10%;
     
   
   }
   
   .imgSTAR{
   
    width: 100%;
    padding-left: 10%;
    padding-top: 4%;
    padding-top: 4%;
   
   }
   .social-links-section{
   
       width: 20%;
       display: flex;
       flex-direction: row;
   
   }

   
         } 


@media only screen and (max-width: 1024px) {

    
     @import url('excon.css');

    .greeting{

        font-size: 100px;
    }

    h1{

        font-weight: lighter;
        font-size: 36px;
    
    }
    
    h2{
        font-weight:800;
        font-size: 32px;
    
    }
    
    h3{ 
        font-size: 18px;
        font-weight: lighter;
        text-shadow: #000000;
    
    }
    
    h4{ 
        font-weight:800;
        font-size: 32px;
        color: #ffffff;
        text-shadow:2px 2px #9a9a9ab3;
    
    
    }
    
    p{
    
        
        font-weight: 200;
        font-size: 16px;
       
    }
    .card_UX, .card_motion, .card_3D{
    
           
        width: 300px;
        height: 350px;
        
    
        
    }
 .logo{

    animation-delay: 1.2s;
    padding-bottom: 5%;
    padding-top: 10%;
 }

   nav{

    animation-delay: 1ms !important;


}
.nav_links{

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
   

}

.icon{

    width: 8%;
    display: flex;
    align-items: center;
   
}


 .item{

        padding-top: 4%;
        padding-right: 10%;
        margin-left: 5%;
        color: black;
        font-family: Restora, ExtraLight;
        font-size: 20px;
      
     }

     .card_UX, .card_motion, .card_3D{

        position: relative;
        display: inline-block;
        border-radius: 10%;
        width: 250px;
        height: 300px;
        border-color: #ffffff;
        border-style: solid;
        border-width: 4px;
        display: flex;
        align-content:center;
        flex-wrap: wrap;
        flex-direction:column;
        justify-content: center; 
        animation-name: card-pop-up;
        animation-duration: 1s;
    
        
    }

    .pulse_container{ 

        display: flex;
        align-items: center;
        justify-content:center;
        
          width: 100%;
          margin-right: 80px;
       margin-bottom: 10%;
      }
      
      .contact_container{
         
          width:80%;
          height: 500px;
        
      }
      
    
      .contact_text {
      
          width:100%;
          font-weight:20;
         
          font-size: 64px;
         
          margin-top: 5%;
          margin-bottom:6%;
          padding-left: 18%;
          color: #ffffff;
      }
      
      
      @keyframes pulse-white {
          0% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
          }
          
          70% {
            transform: scale(1);
            box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
          }
          
          100% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
          }
        }
      
       
        .categories_heading{
            display: flex;
            justify-content: center;
            width: 100%;
            padding-bottom: 5%;
            color: #ffffff;
            text-shadow: 2px 2px #66666661;
        }
           
           
        .categories_section .container .WeLikeTo{
            position:absolute;
            margin-top:-35px;
            padding-left: 5%;
            color:white;
            font-weight: bold;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            font-size: 48px;
        }
        
        .categories_section .container .Get {
            position:absolute;
            margin-top:20px;
            padding-left: 20%;
            font-weight: bold;
            color:rgb(0, 0, 0);
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            font-size: 48px;
        }

      .contact_form{
         
          position: absolute;
          left: 10%;
          margin-top: -15%;
          width:80%;
          height: 560px;
          background-color: #5E499F;
          padding: 20px;
          border-radius: 40px;
          color: #ffffff; 
          transition: 800ms ease;
          opacity: 0;
          animation-name: card-pop-up;
          animation-duration: 1s;
         
      }

      .img_project{

        width:300px;
        height: 350px;
        object-fit:contain;
        padding-bottom: 4%;
    

    }

    .about_content{

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        justify-items: center;
        padding: 5%;
        padding-top:10%;
        padding-bottom: 20%;
    }
    
    .about_img{
    
        
        width: 200px;
        height: 250px;
    
       
    }

    .about_text{

     padding-left: 5%;
    }

    
    
}




@media only screen and (min-width: 1920px) {
@import url('excon.css');
    h1{

        font-size: 78px;
    
    }
    
    h2{
        
        font-weight:800;
        font-size: 78px;
    
    }
    
    h3{ 
       
        font-size: 68px;
        font-weight: lighter;
        text-shadow: #000000;
    
    }

    h4{ 
        font-weight:800;
        font-size: 36px;
        color: #ffffff;
        text-shadow:2px 2px #9a9a9ab3;
    
    }

    p{
    
        font-weight: 200;
        font-size: 24px;
       

    }

    a{
        font-size: 24px;
    }

    img{
        display: block;
        max-width: 100%;
    }

    nav{
    
        max-width: 100%;
        padding-top: 2%;
    }

    .start_animation{
        max-width: 100%;
         display: grid;
         padding: 10%;
    
     
     }
     .greeting{ 
         width: 100%;
         display: inline-block;
         font-family: Restora, ExtraLight;
         padding-left: 10%;
         font-size: 200px;
         letter-spacing: 10px;
         border-right: 5px solid;
         white-space: nowrap;
         overflow: hidden;
          grid-row: 2;
         grid-column: 3/3;
         animation:
             typing 2s ,
             cursor .4s step-end infinite alternate,
              leave  5s, ease-out ;
              transform: scale(0);
            
     }
   
    .about_content{

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        justify-items: center;
        padding: 5%;
        padding-bottom: 10%;
    }
    
    .about_img{
    
        width: 500px;
        height: 400px;
        padding-left: 5%;
        padding-top: 5%;
        margin-bottom: 10%;
     
       
    }

    .categories_section .container .WeLikeTo{
        position:absolute;
        margin-top:-60px;
        padding-left: 5%;
        color:white;
        font-weight: bold;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 78px;
    }
    
    .categories_section .container .Get {
        position:absolute;
        margin-top:40px;
        padding-left: 20%;
        font-weight: bold;
        color:rgb(0, 0, 0);
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 78px;
    }
    
    .portfolio_heading_text_main{

        padding-top: 5%;
        padding-bottom: 5%;
        margin-left: 30px;
 
    }

      .card_UX, .card_motion, .card_3D{

       
        width: 400px;
        height: 450px;
        
    
        
    }
    .category_UX{ 
        padding-top: 50%;
    }
    
    

}