@import url('https://fonts.googleapis.com/css?family=Spectral');

@import url('https://fonts.googleapis.com/css?family=Montserrat');


*{

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

}

body{

    font-family: "CircularStd-Light";
    position: relative;
    max-height: 100vh;


}

.go-top-btn{

    position: fixed;
    bottom: 35px;
    right: 35px;
    outline: 2px solid #000;
    outline-offset: -4px;
    background-color: #fff;
    cursor: pointer;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 60px;
    height: 60px;

}

.go-top-btn svg{

    width: 35px;
    height: 35px;

}



.landing{

    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #616161;
    /* border: 2px solid #73AD21; */
    overflow: hidden;
    /* overflow-x: hidden; 
    overflow-y: hidden; */
    position: relative;

}

.landing .halfcircle1{

    height: 250px;
    width: 250px;
    background-color: #bccccd;
    border-radius: 50%;
    position: absolute;
    left: -125px;
    top: 20%;

}

.landing .halfcircle2{

    height: 150px;
    width: 150px;
    background-color: #255366;
    border-radius: 50%;
    position: absolute;
    left: -75px;
    top: 50%;

}

.landing .rcorners1{

    border-radius: 150px;
    background: #255366;
    width: 400px;
    height: 130px;  
    transform: rotate(-45deg);
    position: absolute;
    top: -10px;
    right: -100px;

}

.landing .rcorners2{

    border-radius: 150px;
    background: #bccccd;
    width: 400px;
    height: 130px;  
    transform: rotate(-45deg);
    position: absolute;
    top: 110px;
    right: -110px;

}

.landing .circle{

    height: 60%;
    width: 30%;
    background-color: #255366;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}


.circle img{

    height: 70%;   

}  


.landing .smallcircle{

    height: 8%;
    width: 4.5%;
    outline: 2px solid #616161;
    outline-offset: -5px;
    position: absolute;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    right: 10%;
    bottom: 10%

  }
 
.smallcircle img{

    height: 80%;   

} 

/* About 3C section */

.aboutme{

    overflow: hidden;
}


.grid-container{

    padding-top: 100px;
    padding-left: 75px;
    padding-bottom: 70px;
    display: grid;
    column-gap: 300px;
    grid-template-columns: 35% 50%;
    background-color: #000;

}

.grid-container .oval{

    height: 500px;
    width: 350px;
    background-color: #255366;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;

}

.grid-container .oval img{

    height: 40%; 

}

.grid-container .text{

    color: #fff;
    padding-left: 50px;

}

.grid-container .text h2{

    font-family: 'Spectral', serif;
    font-weight: lighter;
    font-size: 80px;
    padding-bottom: 40px;

}

.grid-container .text p{

    font-family: 'Montserrat Light', sans-serif;
    font-size: 22.5px;
    padding-bottom: 75px;
    

}

.grid-container .text hr{

    
    width: 400px;
    border: 1px solid #E71D36;
    

}


/* Description */

.description{

    background-color: #000;
    position: relative;
    overflow: hidden;

}

.description h1{

    padding-top: 65px;
    padding-bottom: 100px;
    color: #fff;
    font-family: 'Spectral', serif;
    font-weight: lighter;
    font-size: 75px;
    text-align: center;

}

.grid-description{

    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 100px;
    display: grid;
    column-gap: 125px;
    grid-template-columns: auto auto auto;
    background-color: #000;

}

.grid-description div{

    background-color: #255366;
    text-align: center;
    border-radius: 10%;
    height: 325px;
    color: #FFFFFF;

}

.grid-description div h3{

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 17.5px;
    padding: 20px 20px 20px 20px;

}

.grid-description div p{

    font-family: 'Montserrat Light', sans-serif;
    font-size: 13px;
    padding: 0px 25px 0px 25px;

}


.description .qrtcircle1{

    height: 200px;
    width: 200px;
    background-color: #bccccd;
    border-radius: 50%;
    position: absolute;
    right: -100px;
    bottom: -80px;

}

.description .qrtcircle2{

    height: 100px;
    width: 100px;
    background-color: #255366;
    border-radius: 50%;
    position: absolute;
    right: 50px;
    bottom: -50px;

}

.description .smallcircle{

    height: 8%;
    width: 4.5%;
    outline: 2px solid #000;
    outline-offset: -4px;
    position: absolute;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    left: 5%;
    top: 10%

  }
 
.smallcircle img{

    height: 60%;   

}

/* Description part 2 */

.descriptionPt2{

    background-color: #000;
    position: relative;
    overflow: hidden;

}


.descriptionPt2 .grid-description{

    padding-top: 150px;
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 100px;
    display: grid;
    column-gap: 125px;
    grid-template-columns: auto auto auto;
    background-color: #000;

}

.descriptionPt2 .grid-description div{

    background-color: #255366;
    text-align: center;
    border-radius: 10%;
    height: 375px;
    color: #FFFFFF;

}

.descriptionPt2 .grid-description div h3{

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 17.5px;
    padding: 20px 20px 20px 20px;

}

.descriptionPt2 .grid-description div p{

    font-family: 'Montserrat Light', sans-serif;
    font-size: 13px;
    padding: 0px 25px 0px 25px;

}


.descriptionPt2 .qrtcircle1{

    height: 200px;
    width: 200px;
    background-color: #bccccd;
    border-radius: 50%;
    position: absolute;
    left: -80px;
    top: -70px;

}

.descriptionPt2 .qrtcircle2{

    height: 100px;
    width: 100px;
    background-color: #255366;
    border-radius: 50%;
    position: absolute;
    left: -50px;
    top: 80px;

}

.descriptionPt2 .smallcircle{

    height: 8%;
    width: 4%;
    outline: 1px solid #000;
    outline-offset: -3px;
    position: absolute;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    right: 8%;
    bottom: 5%

}
 
.smallcircle img{

    height: 60%;   

}



/* About me TJ */

.aboutTJ{

overflow: hidden;
position: relative;

}

.aboutTJ .grid-container{

    padding-top: 50px;
    padding-left: 100px;
    padding-bottom: 70px;
    display: grid;
    column-gap: 150px;
    grid-template-columns: 500px 600px;
    background-color: #616161;
      
}

.aboutTJ .grid-container .text{

    padding-top: 150px;
    padding-left: 50px;

}

.aboutTJ .grid-container .text h2{

    font-family: 'Spectral', serif;
    font-style: italic;
    font-size: 45px;
    padding-left: 10px;
    padding-bottom: 40px;
    color: #E71D36;

}

.aboutTJ .grid-container .text p{

    font-family: 'Montserrat Light', sans-serif;
    font-size: 14.75px;
    /* padding-bottom: 75px; */
    
}

.aboutTJ .grid-container .picture img{

    border-radius: 175px 175px 0px 0px; /*TL TR BR BL*/
    width: 375px;
    height: 575px;


}

.aboutTJ .qrtcircle1{

    height: 200px;
    width: 200px;
    background-color: #bccccd;
    border-radius: 50%;
    position: absolute;
    left: -100px;
    bottom: -80px;

}

.aboutTJ .qrtcircle2{

    height: 80px;
    width: 80px;
    background-color: #255366;
    border-radius: 50%;
    position: absolute;
    left: 45px;
    bottom: -40px;

}


.aboutTJ .smallcircle{

    height: 8%;
    width: 4.5%;
    outline: 2px solid #616161;
    outline-offset: -4px;
    position: absolute;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    left: 5%;
    top: 10%

}




/* background section */

.background{

    background-color: #616161;
    position: relative;
    overflow: hidden;

}

.background h2{

    color: #fff;
    text-align: center;
    font-family: 'Spectral';
    font-weight: lighter;
    font-size: 60px;
    padding-top: 50px;
    padding-bottom: 50px;

}

.background .grid-container{

    padding-left: 50px;
    padding-right: 50px;
    /* padding-bottom: 70px; */
    display: grid;
    column-gap: 50px;
    grid-template-columns: auto auto auto;
    background-color: #616161;
    height: auto;
}

.background .grid-container div{


   color: #fff;



}

.background .grid-container .smallcircle{

    height: 5rem;
    width: 5rem;
    outline: 2px solid #616161;
    outline-offset: -4px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin: auto;

}

.background .grid-container .smallcircle img{

  height: 3rem;

}

.background .grid-container div h3{

    font-family: 'Spectral', serif;
    font-weight: lighter;
    font-size: 22px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 5px;

}

.background .grid-container div hr{

    width: 250px;
    border: 1px solid #05B2DC;
    margin: auto;

}

.background .grid-container div h4{

    font-family: 'Montserrat Meduim', sans-serif;
    padding-top: 15px;
    font-size: 16px;
    text-align: center;

}

.background .grid-container div p{

    font-family: 'Montserrat Light', sans-serif;
    padding-top: 5px;
    font-size: 12px;
    text-align: center;

}

.background .bgqrtcircle1{

    height: 300px;
    width: 300px;
    background-color: #bccccd;
    border-radius: 50%;
    position: absolute;
    right: -100px;
    top: -100px;

}

.background .bgqrtcircle2{

    height: 200px;
    width: 200px;
    background-color: #255366;
    border-radius: 50%;
    position: absolute;
    right: -80px;
    top: 80px;

}

.background .qrtcircle1{

    height: 200px;
    width: 200px;
    background-color: #bccccd;
    border-radius: 50%;
    position: absolute;
    left: -100px;
    bottom: -80px;

}

.background .qrtcircle2{

    height: 80px;
    width: 80px;
    background-color: #255366;
    border-radius: 50%;
    position: absolute;
    left: 45px;
    bottom: -40px;

}



/* Design focuses */

.designfocus{

    box-align: center;
    overflow: hidden;
    position: relative;
    background-color: #616161;

}

.designfocus h2{

    color: #05B2DC;
    text-align: center;
    font-family: 'Spectral';
    font-weight: lighter;
    font-size: 60px;
    padding-top: 50px;

}

.designfocus .grid-container{

    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 100px;
    display: grid;
    column-gap: 125px;
    grid-template-columns: auto auto auto;
    background-color: #616161;
    
}

/* .designfocus .grid-container .focuses{

    margin: auto;
    padding-left: 30px;

} */

.designfocus .grid-container div{

    margin: auto;
    /* padding-left: 30px; */

}

.designfocus .grid-container .focuses img{

    border-radius: 175px 175px 0px 0px; /*TL TR BR BL*/
    width: 300px;
    height: 300px;

}

#canva{

    border-radius: 175px 175px 0px 0px; /*TL TR BR BL*/
    margin: auto; 

}


.designfocus .grid-container div h3{

    font-family: 'Spectral', serif;
    font-weight: lighter;
    font-size: 22px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 5px;

}

.designfocus .grid-container div hr{

    width: 200px;
    border: 1px solid #05B2DC;
    margin: auto;

}


.designfocus .grid-container div p{

    font-family: 'Montserrat Light', sans-serif;
    padding-top: 5px;
    font-size: 12px;
    text-align: center;

}

.designfocus .smallcircle{

    height: 8%;
    width: 4.5%;
    outline: 2px solid #616161;
    outline-offset: -4px;
    position: absolute;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    left: 5%;
    top: 10%

}


/* UX Design */

.uxdesign{

    position: relative;
    overflow: hidden;

}

.uxdesign .grid-container{

    padding-top: 50px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
    display: grid;
    column-gap: 50px;
    grid-template-columns: 3fr 2fr 2fr;
    background-color: #255366;
}

.boxe{

    padding-right: 50px;
    color: #fff;
    text-align: center;
    font-family: 'Spectral';
    font-weight: lighter;
    font-size: 30px;
    margin: auto;
    padding-top: 50px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;

}

.nestedbox{

    display: grid;
    grid-template-rows: 300px 300px;

}

.nestedbox img{

    width: 400px;

}

.uxdesign .smallcircle{

    height: 8%;
    width: 4.5%;
    outline: 2px solid #255366;
    outline-offset: -4px;
    position: absolute;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    left: 5%;
    top: 10%

}


/* Ux Design pt 2 */


.uxdesignPt2{

    position: relative;
    overflow: hidden;
    /* height: 100vh; */
    background-color: #255366; 

}

.uxdesignPt2 .grid-container{

    padding-top: 175px;
    padding-left: 75px;
    padding-right: 75px;
    column-gap: 50px;
    grid-template-columns: auto auto auto;
    background-color: #255366;    

}

.uxdesignPt2 .grid-container div img{

    height: 250px;
    border-radius: 65px;

}

.uxdesignPt2 .qrtcircle2{

    height: 80px;
    width: 80px;
    background-color: #bccccd;
    border-radius: 50%;
    position: absolute;
    left: -30px;
    bottom: -20px;

}
.uxdesignPt2 .bgqrtcircle1{

    height: 200px;
    width: 200px;
    background-color: #bccccd;
    border-radius: 50%;
    position: absolute;
    right: -60px;
    top: -80px;

}

.uxdesignPt2 .smallcircle{

    height: 12%;
    width: 4.5%;
    outline: 2px solid #255366;
    outline-offset: -4px;
    position: absolute;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    left: 5%;
    top: 10%

}


/* web design */

.webdes{

    overflow: hidden;
    position: relative;
    background-color: #255366;

}

.webdes .smallcircle{

    height: 8%;
    width: 4.5%;
    outline: 2px solid #255366;
    outline-offset: -4px;
    position: absolute;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    left: 5%;
    top: 10%

}

.webdes h2{

    color: #fff;
    text-align: center;
    font-family: 'Spectral';
    font-weight: lighter;
    font-size: 60px;
    padding-top: 50px;

}

.webdes .grid-container{

    padding-top: 75px;
    padding-left: 75px;
    padding-right: 75px;
    column-gap: 20px;
    grid-template-columns: auto auto auto;
    background-color: #255366;
    padding-bottom: 50px;

}

.webdes .grid-container .mockupCP{

    display: flex;
    justify-content: center;
    align-items: center;

}

.webdes .grid-container .mockupCP img{

    height: 320px;

}

.webdes .grid-container .mockup img{

    width: 350px;

}

.favicon{

    background-color: #fff;
    width: 200px;
    align-items: center;
    border-radius: 0px 60px 0px 60px; /*TL TR BR BL*/


}

.favicon img{

    height: 175px;
    /* margin: auto; */
    align-items: center;
    padding-left: 15px;
    padding-top: 10px;
    border-radius: 0px 55px 0px 0px; /*TL TR BR BL*/

}

.favicon h4{

    font-family: 'Montserrat Meduim', sans-serif;
    font-size: 17px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;

}

.favicon h6{

    font-family: 'Montserrat Meduim', sans-serif;
    font-size: 15px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;

}

.favicon p{

    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    text-align: center;
    text-align: justify;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;

}



/* web design Processing 5*/

.containerP5{

    display: grid;
    padding-right: 75px;
    column-gap: 50px;
    padding-left: 75px;
    grid-template-columns: auto auto;
    padding-bottom: 50px;
    

}

.containerP5 div {


    width: 100px;
    height: 75px;
    margin: auto;


}

.containerP5 .one{

    width: 100px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}



.containerP5 .one h5{

    color: rgb(225, 202, 1);
    font-size: 20px;
    text-align: center;

}

.one:hover{

    background-color: rgb(225, 202, 1);

  }

.one h5:hover {

    color: #fff;

}


.containerP5 .Process{

    width: 100px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.containerP5 .Process h5{

    color: #C61C4D;
    font-size: 17px;
    text-align: center;

}

.Process:hover{

    background-color: #C61C4D;

}

.Process h5:hover {

    color: #fff;

}

 /* Processing 5 */

.processing{

    overflow: hidden;
    position: relative;
    background-color: #255366;

}

.processing h1{

    color: #fff;
    text-align: center;
    font-family: 'Spectral';
    font-weight: lighter;
    font-size: 60px;
    padding-top: 50px;

}

.processing .grid-container{

    padding-left: 75px;
    padding-right: 75px;
    display: grid;
    column-gap: 75px;
    grid-template-columns: auto auto auto;
    background-color: #255366;

}

.processing .smallcircle{

    height: 9%;
    width: 5%;
    outline: 2px solid #616161;
    outline-offset: -4px;
    position: absolute;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    left: 5%;
    top: 10%

}



    /* Motion Graphic */

    .motiongraphic{

        overflow: hidden;
        position: relative;
        background-color: #255366;
    
    }
    
    .motiongraphic .smallcircle{
    
        height: 50%;
        width: 32%;
        position: absolute;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0px 50px 50% 50%; /*TL TR BR BL*/
        left: -5%;
        top: -10%
    
    }

    .motiongraphic .smallcircle img{

        height: 66%;
        margin: auto;

    }

    .motiongraphic .grid-container{

        display: grid;
        padding-right: 50px;
        padding-left: 400px;
        padding-bottom: 100px;
        column-gap: 50px;
        row-gap: 50px;
        grid-template-columns: auto auto;
        background-color: #255366;

    }

    .motiongraphic h2{

        color: #fff;
        text-align: center;
        padding-left: 300px;
        font-family: 'Spectral';
        font-weight: lighter;
        font-size: 60px;
        padding-top: 50px;
    
    }



    /* footer */

    .footer{

        background-color: #000;
        position: relative;
        overflow: hidden;

    }

    .footer .wrap-box{

        padding-top: 75px;
        inline-size: 650px;
        overflow-wrap: break-word;
        margin: auto;

    }    

    .footer .wrap-box h2{

        font-size: 65px;
        color: #E71D36;
        font-family: 'Spectral';
        font-weight: light;
        padding-bottom: 10px;
    } 

    .footer .wrap-box hr{

        border: 1px solid #05B2DC; 
        width: 635px;
        margin: auto;

    }

    .footer .wrap-box h5{

        color: #fff;
        font-size: 18px;
        font-family: 'Montserrat Light', sans-serif;
        font-weight: lighter;
        padding-top: 20px;
        letter-spacing: 3px;

    }

    .footer .wrap-box .media{

        padding-top: 10px;
        list-style-type: none;

    }
    
    .footer li{

        display: inline-block;

    }

    .footer li a {

        display: block;
        text-decoration: none;
        padding: 8px;
       
    }
    
    .footer ul .socials path{

        fill: rgb(255, 255, 255);
    
    }

    .footer .media .socials{

        width: 25px;
    
    }

    .footer .smallcircle{

        height: 8%;
        width: 5%;
        outline: 2px solid #000;
        outline-offset: -4px;
        position: absolute;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        left: 5%;
        top: 10%
    
    }


    .footer .grid-container{
        
        padding-right: 100px;
        float: right;
        grid-template-columns: auto;
        row-gap: 30px;

    }

    .footer .grid-container .icons{

        
        height: 60px;
        width: 60px;
        outline: 2px solid #000;
        outline-offset: -4px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
    
    }

    .icons svg{

        width: 25px;

    }

    .icons svg path{

        fill: #9B4819;

    }  


    
    
    .footer .grid-container .contact{

        display: flex;
        justify-content: center;
        font-family: 'Montserrat Light', sans-serif;
        font-weight: lighter;
        letter-spacing: 3px;

    }

    .textbox{

        padding-left: 20px;

    }

    .textbox h5{

        color: #fff;
        font-family: 'Montserrat Light', sans-serif;
        font-weight: lighter;
        font-size: 20px;


    }

    .textbox p{

        color: #fff;
        /* font-family: 'Montserrat Light', sans-serif;
        font-weight: lighter; */
        padding-top: 10px;
        font-size: 18px;


    }

    .footer .qrtcircle1{

        height: 275px;
        width: 275px;
        background-color: #bccccd;
        border-radius: 50%;
        position: absolute;
        left: -100px;
        bottom: -100px;
    
    }
    
    .footer .qrtcircle2{
    
        height: 100px;
        width: 100px;
        background-color: #255366;
        border-radius: 50%;
        position: absolute;
        left: 100px;
        bottom: -40px;
    
    }


























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


    /*home*/
    .landing .circle{

        height: 30%;
        width: 50%;
        border-radius: 50%;
    }
    
    
    .circle img{
    
        height: 60%;   
    
    }
    

    .landing .halfcircle1{

        height: 150px;
        width: 150px;
        left: -75px;
        top: 30%;
    
    }

    .landing .halfcircle2{

        height: 90px;
        width: 90px;
        left: -45px;
        top: 50%;
    
    }

    .landing .rcorners1{

        width: 200px;
        height: 100px;  
        top: -10px;
        right: -100px;
    
    }

    .landing .rcorners2{

        width: 200px;
        height: 100px;  
        top: 90px;
        right: -110px;
    
    }
    
    .landing .smallcircle{

        height: 8%;
        width: 14%;
        outline: 2px solid #616161;
        outline-offset: -5px;
        border-radius: 50%;
        right: 10%;
        bottom: 10%
    
    }

    .smallcircle img{

        height: 60%;   
    
    }


    /* About 3C section */

    .grid-container{

        padding-top: 70px;
        padding-bottom: 70px;
        padding-right: 50px;
        display: grid;
        row-gap: 75px;
        grid-template-columns: auto;

    }
    
    .grid-container .text{

        color: #fff;
    
    }
    
    .grid-container .text h2{
    
        font-size: 40px;
        padding-bottom: 40px;
    
    }
    
    .grid-container .text p{
    
        font-size: 15px;
        padding-bottom: 75px;
        
    
    }
    
    .grid-container .text hr{
    
        
        width: 200px;
        border: 1px solid #E71D36;
        
    
    }
    
    .grid-container .oval{

        height: 250px;
        width: 175px;
        margin: auto;
    
    }
    
    .grid-container .oval img{
    
        height: 40%; 
    
    }


    /* Description */

    .description h1{

        padding-top: 40px;
        padding-bottom: 40px;
        font-size: 50px;
    
    }
   
    .grid-description{

        padding-left: 100px;
        padding-right: 100px;
        padding-bottom: 100px;
        display: grid;
        row-gap: 75px;
        grid-template-columns: auto;

    
    }

    .grid-description div{

        width: 200px;
    
    }

    .grid-description div h3{

        font-size: 15px;
        padding: 20px 20px 20px 20px;
    
    }

    .grid-description div p{

        font-size: 10px;
        padding: 0px 25px 0px 25px;
    
    }

    .description .qrtcircle1{

        height: 150px;
        width: 150px;
        right: -75px;
        bottom: -50px;
    
    }

    .description .qrtcircle2{

        height: 75px;
        width: 75px;
        right: 37.5px;
        bottom: -37.5px;
    
    }

    .description .smallcircle{

        height: 4%;
        width: 15%;
        outline: 2px solid #000;
        outline-offset: -4px;
        left: 5%;
        top: 8%
    
      }

      /* Description part 2 */

      .descriptionPt2 .grid-description{

        padding-left: 100px;
        padding-right: 100px;
        padding-bottom: 100px;
        display: grid;
        row-gap: 75px;
        grid-template-columns: auto;

    }

    .descriptionPt2 .grid-description div h3{

        font-size: 15px;
        padding: 20px 20px 20px 20px;
    
    }

    .descriptionPt2 .grid-description div p{

        font-size: 10px;
        padding: 0px 25px 0px 25px;

    }

    .descriptionPt2 .qrtcircle1{

        height: 150px;
        width: 150px;
        left: -60px;
        top: -55px;
    
    }

    .descriptionPt2 .qrtcircle2{

        height: 75px;
        width: 75px;
        right: 37.5px;
        bottom: -37.5px;
        left: -37.5px;
        top: 55px;
    
    }

    .descriptionPt2 .smallcircle{

        height: 4%;
        width: 14%;
        outline: 1px solid #000;
        outline-offset: -3px;
        border-radius: 50%;
        right: 8%;
        bottom: 2%
    
    }

    /* About me TJ */

    .aboutTJ .grid-container{

        padding-left: 50px;
        padding-bottom: 100px;
        display: grid;
        row-gap: 75px;
        grid-template-columns: 100%;
        margin: auto;

          
    }

    .aboutTJ .grid-container .text{

        padding-top: 50px;
        margin: auto;
        padding-left: 0;
    
    }
    
    .aboutTJ .grid-container .text h2{
    
        font-size: 30px;
        padding-bottom: 40px;
    
    }

    .aboutTJ .grid-container .text p{

        font-size: 12px;
        padding-bottom: 0;
    }
    
    .aboutTJ .grid-container .picture{

        margin: auto;

    }

    .aboutTJ .grid-container .picture img{

        width: 275px;
        height: 422px;
    
    
    }

    .aboutTJ .qrtcircle1{

        height: 150px;
        width: 150px;
        left: -75px;
        bottom: -50px;
    
    }

    .aboutTJ .qrtcircle2{

        height: 75px;
        width: 75px;
        left: 37.5px;
        bottom: -37.5px;
    
    }
    
    .aboutTJ .smallcircle{

        height: 5%;
        width: 14%;
        outline: 2px solid #616161;
        outline-offset: -4px;
        border-radius: 50%;
        left: 5%;
        top: 4%
    
    }

    /* background section */

    .background h2{

        font-size: 40px;
        padding-top: 50px;
        padding-bottom: 50px;
    
    }
    
    .background .grid-container{

        padding-top: 50px;
        padding-left: 50px;
        padding-right: 50px;
        display: grid;
        row-gap: 50px;
        grid-template-columns: auto;
          
    }

    .background .grid-container div{

        box-align: center;
     
    }

    .background .grid-container .smallcircle{

        height: 30%;
        width: 22%;
        outline: 2px solid #616161;
        outline-offset: -4px;
        border-radius: 50%;
        margin: auto;
    
    }

    .background .grid-container div h3{

        font-size: 18px;
        padding-top: 20px;
        padding-bottom: 5px;
    
    }

    .background .grid-container div hr{

        width: 175px;
        border: 1px solid #05B2DC;
    
    }

    .background .grid-container div h4{

        padding-top: 15px;
        font-size: 14px;

    }

    .background .grid-container div p{

        padding-top: 5px;
        font-size: 10px;
 
    }

    .background .bgqrtcircle1{

        height: 150px;
        width: 150px;
        right: -65px;
        top: -50px;
    
    }
    
    .background .bgqrtcircle2{
    
        height: 100px;
        width: 100px;
        right: -50px;
        top: 50px;
    
    }

    .background .qrtcircle1{

        height: 150px;
        width: 150px;
        left: -75px;
        bottom: -50px;
    
    }
    
    .background .qrtcircle2{
    
        height: 75px;
        width: 75px;
        left: 37.5px;
        bottom: -37.5px;
    
    }

    /* Design focuses */

    .designfocus h2{

        font-size: 40px;
        padding-top: 50px;
    
    }

    .designfocus .grid-container{

        padding-left: 0;
        padding-right: 0;
        padding-bottom: 50px;
        display: grid;
        row-gap: 100px;
        grid-template-columns: auto;
        
    }

    .designfocus .grid-container div{

        padding-left: 25px;
    
    }

    .designfocus .grid-container .focuses img{

        width: 200px;
        height: 200px;
        margin: auto;
    
    }

    .designfocus .grid-container .focuses #canva{

        padding-right: 50px;

    }

    .designfocus .grid-container div h3{

        font-size: 18px;
        padding-top: 20px;
        padding-bottom: 5px;
    
    }

    .designfocus .grid-container div hr{

        width: 150px;
        border: 1px solid #05B2DC;
    
    }

    .designfocus .grid-container div p{


        padding-top: 5px;
        font-size: 11px;
        text-align: center;
    
    }

    .designfocus .smallcircle{

        height: 4.5%;
        width: 14%;
        outline: 2px solid #616161;
        outline-offset: -4px;
        left: 5%;
        top: 10%
    
    }


    /* UX Design */

    .uxdesign .grid-container{

        display: grid;
        grid-template-columns: auto;
        row-gap: 0;
        padding-left: 15px;
        padding-top: 20px;
        
    }

    .nestedbox{

        padding-left: 0px;
        display: grid;
        grid-template-columns: 200px 200px;
        grid-template-rows: 175px;
        column-gap: 0;
    
    }

    .nestedbox img{

        width: 150px;
    
    }

    .boxe{

        padding-right: 50px;
        font-size: 25px;
        margin: auto;
        height: 200px;
    
    }

    .uxdesign .smallcircle{

        height: 8%;
        width: 14%;
        outline: 2px solid #255366;
        outline-offset: -4px;
        left: 5%;
        top: 10%
    
    }

    /* UX Design Pt2 */

    .uxdesignPt2 .grid-container{

        padding-top: 175px;
        padding-left: 75px;
        padding-right: 75px;
        row-gap: 50px;
        grid-template-columns: auto ;  
    
    }

    .uxdesignPt2 .grid-container div img{

        height: 175px;

    }

    .uxdesignPt2 .qrtcircle2{

        height: 70px;
        width: 70px;
        left: -15px;
        bottom: -10px;
    
    }

    .uxdesignPt2 .bgqrtcircle1{
    
        height: 150px;
        width: 150px;
        right: -40px;
        top: -60px;
    
    }

    .uxdesignPt2 .smallcircle{

        height: 6.5%;
        width: 16%;
        outline: 2px solid #255366;
        outline-offset: -4px;
        left: 5%;
        top: 10%
    
    }

    /* Web design */

    .webdes h2{

        font-size: 40px;
        padding-top: 50px;
    
    }

    .webdes .grid-container{

        padding-top: 75px;
        padding-left: 75px;
        padding-right: 75px;
        column-gap: 20px;
        grid-template-columns: auto;
        padding-bottom: 50px;
    
    }

    .webdes .grid-container .mockupCP img{

        height: 220px;
    
    }

    .webdes .grid-container .mockup img{

        width: 250px;
    
    }

    .favicon{

        width: 175px;
        height: 320px;
   
    }
    
    .favicon img{
    
        height: 150px;
    
    }
    
    .favicon h4{
    
        font-size: 15px;
        padding-top: 10px;
        padding-bottom: 5px;
    
    }
    
    .favicon h6{
    
        font-size: 12.5px;
        padding-top: 5px;
        padding-bottom: 5px;
    
    }
    
    .favicon p{
    
        font-size: 11px;
        padding-bottom: 10px;
        padding-left: 10px;
        padding-right: 10px;
    
    }

    /* web design Processing */

    .containerP5 div {

        width: 100px;
        height: 75px;
        margin: auto;
      
    }

    .containerP5 .one{

        width: 100px;
        height: 50px;
        background-color: rgb(255, 202, 1);

    }

    .containerP5 .one h5{

        color: rgb(255, 255, 255);
        font-size: 20px;
    
    }

    .containerP5 .Process{

        width: 100px;
        height: 50px;
        background-color: #C61C4D;
    
    }

    .containerP5 .Process h5{

        color: #fff;
        font-size: 17px;
    
    }

    /* Processing */

    .processing h1{

        color: #fff;
        font-size: 40px;
        padding-top: 50px;
    
    }

    .processing .grid-container{

        padding-left: 75px;
        padding-right: 75px;
        display: grid;
        column-gap: 75px;
        grid-template-columns: auto;
    
    }

    .processing .smallcircle{

        height: 4.5%;
        width: 13%;
        outline: 2px solid #616161;
        outline-offset: -4px;
        left: 5%;
        top: 10%
    
    }

    /* Motion Graphic */

    .motiongraphic .smallcircle{
    
        height: 12%;
        width: 35%;
        position: absolute;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0px 50px 50% 50%; /*TL TR BR BL*/
        left: -5%;
        top: -2%
    
    }

    .motiongraphic .grid-container{

        display: grid;
        padding-bottom: 100px;
        padding-left: 50px;
        column-gap: 50px;
        row-gap: 50px;
        grid-template-columns: auto;


    }

    .motiongraphic .grid-container video{

        width: 300px;

    }

    .motiongraphic h2{

        color: #fff;
        text-align: center;
        padding-left: 50px;
        font-size: 40px;
        padding-top: 100px;
    
    }

    /* footer */

    .footer .wrap-box{

        padding-top: 75px;
        inline-size: 350px;
        overflow-wrap: break-word;
        margin: auto;

    } 

    .footer .wrap-box h2{

        font-size: 35px;
        color: #E71D36;
        font-family: 'Spectral';
        font-weight: light;
        padding-bottom: 10px;
    } 

    .footer .wrap-box hr{

        border: 1px solid #05B2DC; 
        width: 350px;
        margin: auto;

    }

    .footer .wrap-box h5{

        font-size: 15px;
        padding-top: 20px;
        letter-spacing: 3px;

    }

    .footer .media .socials{

        width: 20px;
    
    }

    .footer .smallcircle{

        height: 7%;
        width: 12%;
        outline: 2px solid #000;
        outline-offset: -4px;
        left: 5%;
        top: 3%
    
    }

    .footer .grid-container{
        
        padding-right: 30px;
        float: right;
        grid-template-columns: auto;
        row-gap: 30px;

    }

    .footer .grid-container .icons{

        
        height: 50px;
        width: 50px;
        outline: 2px solid #000;
        outline-offset: -4px;

    }

    .textbox h5{

        font-size: 15px;

    }

    .textbox p{

        font-size: 12px;

    }

    .footer .qrtcircle1{

        height: 175px;
        width: 175px;
        left: -75px;
        bottom: -75px;
    
    }
    
    .footer .qrtcircle2{
    
        height: 75px;
        width: 75px;
        left: 75px;
        bottom: -40px;
    
    }
}