@font-face {
    font-family:"AMBROSIA";
    src: url("../fonts/AMBROSIA.ttf");
}
@font-face {
    font-family:"Poppins";
    src: url("../fonts/Poppins-Light.ttf");
}

:root {
    --back1: #070d11; /*light slate blue*/
    --back2: #0d304e;
    --back4: #090917;
    --acccol: #7b9bb7;
    
    --text1: #dbecfb;
    --text2: #7b9bb7;
    --white: white;
}



.fPoppins{
    font-family: "Poppins";
   
}
.fAmbr{
    font-family: "AMBROSIA";
}

.fline{
    line-height: 0.8;
}
html, body {
    height:100%;
    
} 

body {
    background-color: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;  
    
}
.pageContainer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--white);
    overflow: visible;
    font-style: normal;
    font-weight: normal;

}
.container{
    position: relative;
    margin: 0 auto;
    text-align: center;
    display: -webkit-flex; /* Safari */
    display: flex; 
    flex-wrap: wrap; 
    align-items: stretch;
    justify-content: center; 
    align-content: center;
    overflow: hidden;
    
}
.mainHeading, .boxHead, .boxDetail, .banner, .profprofile, .boxHead1, .boxSubHead, .boxHead2, .boxDetail, .skillset, .products, .contactus, .bottom{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    text-align: center;
    background-color: transparent;
    color: var(--white);
    border: 0px;
}
.mainHeading{
    line-height: 1;
    background-color: var(--back2);
    padding: 30px;
    padding-bottom: 0px;
    order: 1;
    font-family: "AMBROSIA";
    color: var(--text1);
}

    .boxHead1{
        order: 1;
        font-size: 2.5rem;
    }
    .boxSubHead{
        order: 2;
        font-size: 1.5rem;
    }
    
    
.banner{
    background-image: linear-gradient( var(--back2),var(--back1));
    order: 2;
}

.banner img{
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
   
}

.profprofile{
    width: 100%;
    order: 3;
    background-color: var(--back1);
    font-size: 0.8rem;
    padding: 25px;
    padding-bottom: 60px;
}

.boxHead2{
        order: 1;
        color: var(--text1);
        font-size: 2.5rem;
        font-family: "AMBROSIA";
        
    }
    .boxDetail{
        order: 2;
        font-size: 1rem;
        font-family: "Poppins";
        color: var(--white);
        
    }
.skillset{
    order: 4;
    padding-top: 30px;
    padding-bottom: 60px;
    background-image: linear-gradient( var(--back1),var(--back2));
}

#skill1{
    position: relative;
    top: 0;
    left: 0;
    order: 1;
    width: 80%;
    height: auto;
    font-size: 0.8rem;
    font-size: 1rem;
    font-family: "Poppins";
    color: var(--white);
}

.leftdiv,.leftdiv2{
    position: relative;
    top: 0;
    right: 0;
    width: 350px;
    order: 1;
    height: auto;
    background-color: transparent;
    text-align: left;
    padding: 10px;
    margin-left: 90px;
   
}
.leftdiv2{
    order: 2;
}

@media screen and (max-width: 930px) {
    #skill1{width:350px;font-size: 14px;}
    .leftdiv,.leftdiv2{width: 100%;
        display: block;
        margin-left: auto;
        margin-right: auto; margin-top: 0;}
    .leftdiv{border-right: 0px;}
    .leftdiv{padding-bottom: 0px;}
    .leftdiv2{padding-top: 0px;}
}
    
.products{
    order: 4;
    color: grey;
    background-color: var(--white);
    border: 1px solid grey;
    padding-top: 30px;

}
    .grid {
        position: relative;
        background-color: transparent;
        text-align: center;
        width: 90%;
        max-width: 1800px;
        margin: 0 auto;
    }

    .grid-item {
       float: left;
       width: 200px;
       text-align: center;
       background-color: white;
       margin: 10px;


    }      

    .prodbox{
        position: relative;
        top: 0;
        left: 0;
        border: 0px solid grey;
        background-color: white;
        color: grey;
        text-align: center;
    }
        .header{
            display: none;
            position: relative;
            width: 100%;
            padding: 15px;
            background-color: #4d96ae;
            background-color: #19192f;
            background-color: white;
            font-size: 20px;
            font-family: "AMBROSIA";
            font-style: normal;
            font-weight: normal;
            letter-spacing: 1px;
            color: #19192f;
        }

        .prodimg{
            position: relative;
            width: 100%;
            overflow: hidden;
            background-color: white;

        }
        .prodimg img{
            width: 100%;
        }


.contactus{
    order: 5;
    padding: 60px;
    background-color: var(--back2);
    background-image: url(../common/back.png);
    background-repeat: repeat;
    background-position: center center;
 
}
.contactus a{
    font-family: "Poppins";
    color: var(--white);
}

.bottom{
    order: 6;
    padding: 10px;
    padding-top: 60px;
    font-size: 0.8rem;
    margin-bottom: 20px;
    font-family: "Arial";
    color: var(--text2);
}
.bottom a{
    color: var(--text2);
    font-family: "Arial";
}
@media screen and (max-width: 457px) {
    .grid-item{width:150px;}
    .products{order: 5;}
    .contactus{order: 4; margin-top: 20px;}
}