/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap'); */

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,500;0,700;1,100;1,500;1,700&display=swap');

/* The * tag below applies to the entire webpage. 
This is a reset instruction where the padding, margin and box-sizing settings below remove all spacing from the canvass */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
	/* Data Peak Primary Colour Pallette */
	--dp-dark01: #0e0b0c;
	--dp-dark02: #373337;
	--dp-dark03: #645d64;
	--dp-mid01: #46577f;
	--dp-mid02: #5883a1;
	--dp-mid03: #77b1a6;
	--dp-light01: #92c6a5;
	--dp-light02: #a6ddab;
	--dp-light03: #ffffff;
	/* Data Peak gradients - DARK */
	--gradient-dark-ltor: linear-gradient(to right, var(--dp-dark01), var(--dp-dark03));
	--gradient-dark-rtol: linear-gradient(to right, var(--dp-dark03), var(--dp-dark01));
	--gradient-dark-ttob: linear-gradient(var(--dp-dark01), var(--dp-dark03));
	--gradient-dark-btot: linear-gradient(to right, var(--dp-dark03), var(--dp-dark01));
	/* Data Peak gradients - MID */
	--gradient-mid-ltor: linear-gradient(to right, var(--dp-mid01), var(--dp-mid03));
	--gradient-mid-rtol: linear-gradient(to right, var(--dp-mid03), var(--dp-mid01));
	--gradient-mid-ttob: linear-gradient(var(--dp-mid01), var(--dp-mid03));
	--gradient-mid-btot: linear-gradient(to right, var(--dp-mid03), var(--dp-mid01));
	/* Data Peak gradients - LIGHT */
	--gradient-light-ltor: linear-gradient(to right, var(--dp-light01), var(--dp-light03));
	--gradient-light-rtol: linear-gradient(to right, var(--dp-light03), var(--dp-light01));
	--gradient-light-ttob: linear-gradient(var(--dp-light01), var(--dp-light03));
	--gradient-light-btot: linear-gradient(var(--dp-light03), var(--dp-light01));

	/* Extra colour settings */
	--primary: var(--dp-light03);
	--primary-light: #dff1e6;
	--secondary: #078f30;
	--tertiary: #00dabf;
	--gradient: linear-gradient(to right, #078f30, #00dabf);
	--dynasty: #6f7d8b;
	--trial:  var(--dp-light03);
	--hotrod: #8b785f;
	--bad-status: #f80606d2;
	--warning-status: #f85306ef;
	--good-status: #1dba0fd2;
	--info: #0b4b2c;
	--hairline-color: #272727;
}

    
/******************************/
/*     Back To Top Button     */
/******************************/
#myBtn {
	z-index: 99;
	right: 20px;
	width: 52px;
	height: 52px;
	bottom: 20px;
	border: none;
	outline: none;
	display: none;
	position: fixed;
	cursor: pointer;
	border-radius: 50%;
	background-color: var(--dp-dark02);
}

#myBtn:hover {
  	background-color: var(--dp-dark01);
}

#myBtn img {
	width: 30px;
	margin-left: 0.125rem;
	margin-bottom: 0.25rem;
}


html {  /* the html settings are the default setting to be applied when no underlying tags are found */
    font-size: 10px;
    scroll-behavior: smooth;
    font-family: 'Montserrat', 'Raleway', Arial, Helvetica, sans-serif;
}

a {     /* anchor tag */
    text-decoration: none;      /* the none setting removes the underline from the anchor tag */
}

.container {    /* specifies that all container classes will take on the settings in this section */
    min-height: 90vh;
    width: 95%;
    display: flex;              /* A flex container expands items to fill available free space or shrinks them to prevent overflow. */
    align-items: center;        /* vertical alignment of content within the container */
    justify-content: center;    /* horizontal alignment of content within the container */
}

img{
    /* These settings are applied to all img tags in the document regardless of id or class... unless overridden by a section */
    height: 100%;
    width: 100%;
    object-fit: cover;
}

p{
    font-size: 1.4rem;
    margin-top: 5px;
    line-height: 2.5rem;
    font-weight: 400;       /* set how dark you want the font to appear... larger values strengthen darkness factor. */
    letter-spacing: .05rem;
    color: black;
}

.section-title{
    font-size: 4rem;
    font-weight: 300;
    color: black;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: .2rem;
    text-align: center;
}

.section-title span{
    color:var(--dp-mid02);
}

#company-name{
    color: var(--dp-dark02);
}


/* "cta is an abbreviation for "Call to Action" */
.cta {
    display: inline-block;   /* */
    padding: 10px 30px;
    color: var(--dp-mid02);
    background-color: transparent;
    border: 2px solid var(--dp-mid02);
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: .1rem;
    margin-top: 30px;
    transition: .3s ease;
    transition-property: background-color, color;
}

.cta:hover{     /* when the mouse hovers over the content */
    color: whitesmoke;
    background-color: var(--dp-mid02);
}

.brand h1{          /* Navigation header */
    font-size: 3rem;
    /* text-transform: uppercase; */
    color: var(--dp-light03);
}

.brand h1 span{
    color: var(--dp-dark03);            /* used for the highlight/change of color on 1st letters of Data Peak on the nav-bar  */
}

.brand h5 span{
    color: var(--dp-mid02);            /* used for the highlight/change of color on 1st letters of Data Peak on the nav-bar  */
}

/* Header section */
#header{
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100vw;
    height: auto;
} 

#header .header{
    min-height: 8vh;
    background-color: rgba(31, 30, 30, 0.24);
    transition: .3s ease background-color;
}

#header .nav-bar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    max-width: 1300px;
    padding: 0 10px;
}

#header .nav-list ul{
    list-style: none;
    position: absolute;
    background-color: rgb(31, 30, 30);
    width: 100vw;
    height: 100vh;
    left: 100%;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
    overflow-x: hidden;
    transition: .8s ease left;  /* controls how fast the menu slides into view */
}

#header .nav-list ul.active{
    left: 30%;  /* when the hamburger is clicked the menu will slide into view taking up 80% of the screen display */
}

#header .nav-list ul a{         /* href link of menu items */
    font-size: 2.5rem;
    font-weight: 500;
    letter-spacing: .2rem;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    padding: 20px;
    display: block;
}

#header .nav-list ul a::after{          /* style for the background text of the menu items */
    content: attr(data-after);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: rgba(240, 248, 255, 0.121);
    font-size: 10rem;
    letter-spacing: 50px;
    z-index: -1;
    transition: 1.8s ease letter-spacing;
}

#header .nav-list ul li:hover a::after{
    transform: translate(-50%, -50%) scale(1);
    letter-spacing: initial;
}

#header .nav-list ul li:hover a{
    color: var(--dp-mid03);
}

#header .hamburger{
    height: 60px;
    width: 60px;
    display: inline-block;
    border: 3px solid var(--dp-light01);
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    cursor: pointer;
    transform: scale(.8);
    margin-right: 20px;
}

#header .hamburger::after{
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    border-radius: 50%;
    border: 3px solid var(--dp-light02);
    animation: hamburger_pulse 1s infinite;
}

#header .hamburger .bar{        /* when the hamburger has been activated, showing 1 bar */
    height: 2px;
    width: 30px;
    position: relative;
    background-color: var(--dp-light01);
    z-index: -1;
}

#header .hamburger .bar::after,
#header .hamburger .bar::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    background-color: var(--dp-light01);
    transition: .3s ease;
    transition-property: top, bottom;
}

.test {
    background-color: var(--dp-dark03);
}
#header .hamburger .bar::after{
    top: 8px;
}

#header .hamburger .bar::before{
    bottom: 8px;
}
#header .hamburger.active .bar::after{
    top: 0;
}

#header .hamburger.active .bar::before{
    bottom: 0;
}
/* End Header */

/* Hero */
#hero { /* the # indicates that the settings here will be applied to an ID (i.e. the section id named "#hero" around line 35 in html */
     
    /* display: flex!important; */
    /* background-image: url(/img/dp_peacock1.png); */
    /* background-image: url(/img/dp_peacock_head_blur.jpg); */
    background-size: cover;
    background-position: top left;
    position: relative;
    z-index: 1;        /* orders the layer so that links or buttons can be accessible to the user. This must be linked to a z-index in the #hero::after section below */
    padding-bottom: 100px;
    margin-bottom: 25px;
}


/* Test items */
.red-box {
    float: left;
    width: 80px;
    height: 20px;
    margin: 10px 10px 10px 0;
    padding: 10px;
    color: #ffffff;
    background-color: #880000; } 

#hero .values  {
    float: left;
    /* display: inline-block;    */
    padding: 10px 30px;
    color: var(--dp-mid02);
    background-color: transparent;
    border: 2px solid var(--dp-mid02);
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: .1rem;
    margin-top: 30px;
    transition: .3s ease;
    transition-property: background-color, color;
}

#hero .values:hover{     /* when the mouse hovers over the values content */
    color: whitesmoke;
    background-color: var(--dp-mid02);
}

/* overlay details */
#hero::after{       /* */
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: var(--dp-light03);
    opacity: .8;        /* transparency setting for this area. A color setting of black then darkens the image or content */
    z-index: -1;        /* orders the layer so that links or buttons can be accessible to the user. This must be linked to a z-index in the #hero section */
}

#hero .hero{
 /* max-width: 1200px; */
 margin: 0 auto;
 padding: 0 50px;
 justify-content: flex-start;
 
}

#hero h5 {
    display: block;
    width: fit-content;
    font-family: Raleway, sans-serif;
    font-size: 2rem;
    position: relative;
    color: transparent;
    animation: text_reveal .5s ease forwards;
    animation-delay: 1.5s;
}

#hero h1 {
    /* font-family:Arial, Helvetica, sans-serif; */
    color: var(--dp-dark03);
}

#hero h2 {
    font-family:Arial, Helvetica, sans-serif;
    color: var(--dp-mid02);
}

#hero h2 a{
    font-family:Arial, Helvetica, sans-serif;
    color: rgb(216, 174, 133);
}

#hero h5:nth-child(1){
    animation-delay: 1s;
}
#hero h5:nth-child(2){
    animation-delay: 2s;
}
#hero h5:nth-child(3){
    animation: text_reveal_name .5s ease forwards;
    animation-delay: 3s;
    font-size: 2rem;
}

#hero h5 span{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: var(--dp-mid02);
    animation: text_reveal_box 2s ease;     /* Makes reference to the keyframe named text_reveal_box at the bottom of this Css file. around line 667 */
    animation-delay: .5s;
}

#hero h5:nth-child(1) span{
    animation-delay: .5s;
}

#hero h5:nth-child(2) span{
    animation-delay: 1.5s;
}

#hero h5:nth-child(3) span{
    animation-delay: 2.5s;
}

/* end of Hero section */


/* About Section */
#about .about{
    flex-direction: column-reverse;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 20px;
}

#about .col-left{
    width: 350px;
    height: 460px;
}

#about .col-right{
    width: 100%;
}

#about .col-right h2{
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: .2rem;
    margin-bottom: 10px;
}

#about .col-right p{
    margin-bottom: 20px;
}

#about .col-right .cta{
    color: black;
    margin-bottom: 50px;
    padding: 10px 20px;
    font-size: 2rem;
}

#about .col-left .about-img{
    height: 100%;
    width: 100%;
    position: relative;
    border: 10px solid white;
}

#about .col-left .about-img::after{
    content: '';
    position: absolute;
    left: -33px;
    top: 19px;
    height: 98%;
    width: 98%;
    border: 7px solid var(--dp-mid02);
    z-index: -1;
}

/* End of About Section */

/* Services Section */
#services {
    text-align: center;
}
#services .services{
    flex-direction: column;
    text-align: center;
    max-width: 1200px;
    margin: 0 25px;
    padding: 100px 0;
}

#services .service-top{
    max-width: 900px;
    margin: 0 auto;
}
#services .service-bottom{
    display: flex;
    text-align: center;
    /* align-items: center; */
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 50px;
}

#services .service-item{
    flex-basis: 80%;
    display: flex;
    /* align-items: flex-start; */
    justify-content: center;
    flex-direction: column;
    padding: 30px;
    border-radius: 10px;
    background-size: cover;
    margin: 10px 5%;
    position: relative;
    z-index: 1;
    overflow: hidden; /* The overflow hidden tag makes or enforces the border-radius property come through */
}

#services .service-item::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
    /* background-color: black; */
    opacity: .9;
    z-index: -1;
}

#services .service-bottom .icon{
    /* Manages the icon displays in the services sections */
    height: 50px;
    width: 50px;
    margin-bottom: 20px;
}

#services .service-item h2{
    font-size: 2rem;
    color: white;
    margin-bottom: 20px;
}

#services .service-item p{
    color: white;
    text-align: left;
    font-size: medium;
}

#services .service-item li{
    color: white;
    text-align: left;
    font-size: medium;
}
/*  End of Services Section*/

/* Projects section */
#projects {
    display: none;
}

#projects .projects{
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 0;
}


#projects .projects-header{
    max-width: 900px;
    margin: 0 auto;
}

/* #projects .projects-header h1{
    margin-bottom: 50px;
} */

#projects .all-projects{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#projects .project-item{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 80%;
    margin: 20px auto;
    overflow: hidden;
    border-radius: 10px;
}

#projects .project-info{
    padding: 15px;          /* Left & Right Margin values in container... */
    flex-basis: 50%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
    color: white;
}

#projects .project-info h1{
    font-size: 4rem;
    font-weight: 500;
}

#projects .project-info h2{
    font-family: Tahoma, sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    font-style:normal;
    /* text-decoration-line: underline; */
    margin-top: 10px;
}

#projects .project-info h3{
    font-size: 1.8rem;
    font-weight: 500;
    font-style:normal;
    text-decoration-line: underline;
    margin-top: 10px;
}

#projects .project-info p{
    color: var(--dp-light03);
}

#projects .project-img{
    flex-basis: 50%;
    height: 300px;
    overflow: hidden;
}

#projects .project-img::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 10%;
    width: 10%;
    background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
    opacity: .7;
}

#projects .project-img img{
    transition: .5s ease transform;       /* Together with the 'transform' tag below, this creates a zoom-in/out effect */
    
}

#projects .project-item:hover .project-img img{
    transform: scale(2);  /* Together with the 'transition' tag above, this creates a zoom-in/out effect */
}

#projects .project-info ul li{
    margin-left: 10px;
    padding-left: 0.75rem;
    font-size: 1.5rem;
    color: rgb(255, 255, 255);
}

/* End of Projects section */

/* Work section */
#work .work{
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 0;
}


#work .work-header{
    max-width: 900px;
    margin: 0 auto;
}

/* #work .work-header h1{
    margin-bottom: 50px;
} */

#work .all-work{
    /* display: flex; */
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#work .all-work .cta.ticker {
    float:'left'; 
    width:'150%'; 
    margin-left:'12px';
    border: none;
}

#work .work-item{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 80%;
    margin: 20px auto;
    overflow: hidden;
    border-radius: 10px;
    /* background-image: linear-gradient(60deg, var(--dp-light02) 0%, var(--dp-light03) 100%), url("/img/background_bi002.jpg"); */
    z-index: -1;
}

#work .work-info{
    padding: 15px;          /* Left & Right Margin values in container... */
    /* flex-basis: 50%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center; */
    /* flex-direction: column; */
    /* background-image: linear-gradient(60deg, #29323c 0%, #485563 100%), url("/img/background_bi002.jpg"); */
    background-image: linear-gradient(rgba(46, 46, 81, 0.5), rgba(50, 50, 38, 0.5)),    url("/img/background_bi002.jpg");
    color: white;
}

#work .work-info h1{
    font-size: 2.4rem;
    font-weight: 500;
}

#work .work-info h2{
    font-family: Tahoma, sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    font-style:normal;
    /* text-decoration-line: underline; */
    margin-top: 10px;
}

#work .work-info h3{
    font-size: .9rem;
    font-weight: 500;
    font-style:normal;
    text-decoration-line: underline;
    margin-top: 10px;
}

#work .work-info p{
    color: var(--dp-light03);
}

#work .work-img{
    flex-basis: 50%;
    height: 300px;
    overflow: hidden;
}

#work .work-img::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 10%;
    width: 10%;
    /* background-image: linear-gradient(60deg, #29323c 0%, #485563 100%); */
    opacity: .7;
}

#work .work-img img{
    transition: .3s ease transform;       /* Together with the 'transform' tag below, this creates a zoom-in/out effect */
    
}

#work .work-item:hover .work-img img{
    transform: scale(1.1);  /* Together with the 'transition' tag above, this creates a zoom-in/out effect */
}

#work .work-info ul li{
    margin-left: 10px;
    padding-left: 0.75rem;
    font-size: 1.5rem;
    color: rgb(255, 255, 255);
}

/* End of Work section */

/* Contact Section */
#contact .contact{
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
}

#contact .contact-items{
    width: 400px;
}

#contact .contact-item{
    width: 80%;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    padding: 30px;
    margin: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0px 0px 18px 0 #0000002c;
    transition: .3s ease box-shadow;
}

#contact .contact-item:hover{
    box-shadow: 0px 0px 5px 0 #0000002c;
}
#contact .icon{
    width: 70px;
    margin: 0 auto;
    margin-bottom: 10px;
}

#contact .contact-info h1{
    font-size: 2.5rem;
    font-weight: 500;
    margin: 5px;
}

#contact .contact-info h2{
    font-size: 1.3rem;
    line-height: 2rem;
    font-weight: 500;
    
}

/* End of Contact Section */

/* Footer Section */

#footer .container {    /* specifies that all container classes will take on the settings in this section */
    min-height: 100vh;
    width: 95%;
    /*display: flex;*/              /* A flex container expands items to fill available free space or shrinks them to prevent overflow. */
    /*align-items: center;  */      /* vertical alignment of content within the container */
    justify-content: center;    /* horizontal alignment of content within the container */
}

#footer .location {    /* specifies that all container classes will take on the settings in this section */
    width: 25%;
    /*display: flex;*/              /* A flex container expands items to fill available free space or shrinks them to prevent overflow. */
    /*align-items: center;  */      /* vertical alignment of content within the container */
    justify-content: left;    /* horizontal alignment of content within the container */
}

#footer .legal {    /* specifies that all container classes will take on the settings in this section */
    width: 25%;
    /*display: flex;*/              /* A flex container expands items to fill available free space or shrinks them to prevent overflow. */
    /*align-items: center;  */      /* vertical alignment of content within the container */
    justify-content: left;    /* horizontal alignment of content within the container */
}

#footer .compliance {    /* specifies that all container classes will take on the settings in this section */
    width: 25%;
    /*display: flex;*/              /* A flex container expands items to fill available free space or shrinks them to prevent overflow. */
    /*align-items: center;  */      /* vertical alignment of content within the container */
    justify-content: left;    /* horizontal alignment of content within the container */
}

#footer{
    background-image: linear-gradient(60deg, var(--dp-dark02) 0%, var(--dp-dark01) 100%);
    display: flex;
}

/* #footer div { */
    /* float: left; */
    /* clear: none;  */      /* clear property specifies the flow of an element next to a floated element. */
/* }  */

#footer .footer{
    min-height: 200px;
    flex-direction: column;
    padding: 50px;
    padding: 10px;
}

#footer h2{
    color: white;
    font-weight: 500;
    font-size: 1.8rem;
    letter-spacing: .1rem;
    margin-top: 10px;
    margin-bottom: 10px;
}

#footer h4{
    color: white;
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: .1rem;
    margin-top: 10px;
    margin-bottom: 3px;
    margin-left: 5px;
}

#footer .social-icon{
    display: flex;
    margin-bottom: 30px;
}

#footer .social-item{
    height:  30px;
    width: 30px;
    margin: 0 5px;
}

#footer .social-item img{
    filter: grayscale(1);
    transition: .3s ease filter;
}

#footer .social-item:hover img{
    filter: grayscale(0);
}

#footer p{
    color: white;
    font-size: 1.3rem;
    margin-left: 15px;
}

#footer a{
    color: white;
    font-size: 1.3rem;
    margin: 15px;
}

#footer hr {
    margin-bottom: 8px;
    /* padding: 15px; */
}
/* End of Footer section */

.privacy-div {
    float: left;
    display: none;
}

/* Keyframes */
@keyframes hamburger_pulse{
    0%{
        opacity: 1;
        transform: scale(1);
    }
    100%{
        opacity: 0;
        transform: scale(1.5);
    }
}

@keyframes text_reveal_box {    /* used for animation on the I am Malcolm text. See the #hero:span above */
    50% {
        width: 100%;
        left: 0;
    }
    100% {
        width: 0;
        left: 100%;
    }
}
@keyframes text_reveal {
    100% {
        color: var(--dp-dark02);           /* the main name on the hero section */
    }
}
@keyframes text_reveal_name {
    100% {
        color: cornflowerblue; 
        font-weight: 500;
    }
}

/* End Keyframes */

/* Media query for tablet */
/* This section drives the display of classes, html items and styles for a tablet display, overriding any default styles that have been specified above..*/
@media only screen and (min-width:768px){       /* adopt the settings below if the screen size is above 768px */
    .cta{
        font-size: 2.5rem;
        padding: 20px 60px;
    }
    h1 .section-title{
        font-size: 6rem;
    }
    /* Hero */
    #hero h1{
        font-size: 7rem;
    }
    /* End of Hero */

    /* Service */
    #services .service-bottom .service-item{
        flex-basis: 45%;
        margin: 2.5%;
    }
    /* End of Service */

    /* @ Media Project */
    #projects .project-item{
        flex-direction: row;
    }

    #projects .project-item:nth-child(even){
        flex-direction: row-reverse;
    }

    #projects .project-item{
        height: 280px;
        margin: 0;
        width: 100%;
        border-radius: 0;
    }

    #projects .all-projects .project-info {
        height: 100%;
    }

    #projects .all-projects .project-img {
        height: 100%;
    }
    /* @ Media  End of Project */

    /* @ Media Work */
        #work .work-item{
            flex-direction: row;
        }
    
        #work .work-item:nth-child(even){
            flex-direction: row-reverse;
        }
    
        #work .work-item{
            height: 280px;
            margin: 0;
            width: 100%;
            border-radius: 0;
        }
    
        #work .all-work .work-info {
            height: 100%;
            width: 100%;
        }
    
        #work .all-work .work-img {
            height: 100%;
        }
    /* @ Media End of Work */

    /* @ Media About */
    #about .about{
        flex-direction: row;
    }

    #about .col-left{
        width: 600px;
        height: 400px;
        padding-left: 60px;
    }

    #about .about .col-left .about-img::after{
        left: -45px;
        top: 34px;
        height: 98%;
        width: 98%;
        border: 10px solid var(--dp-mid02);

    }

    #about .col-right{
        text-align: left;
        padding: 30px;
    }

    #about .col-right h1{
        text-align: left;
    }
    /* @ Media End About */

    /* @ Media Contact */
    #contact .contact{
        flex-direction: column;
        padding: 100px 0;
        align-items: center;
        justify-content: center;
        min-width: 20vh;
    }

    #contact .contact-items{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        padding: 30px;
        margin: 0;
    }

    #contact .contact-item {
        width: 30%;
        /* margin: 20px; */
        flex-direction: row;
    }

    #contact .contact-items .icon{
        height: 80px;
        width: 80px;
    }

    #contact .contact-items .icon img{
        object-fit: contain;    /* this will make an image fit (shrink) into the element */
    }

    #contact .contact-items .icon .contact-info{
        width: 100%;
        text-align: left;
        padding-left: 20px
    }
    /* End Contact */
}
/* End of Media query for tablet */

/* Media query for desktop */
/* @media only screen and (min-width:768px){ */
@media only screen and (min-width:1768px){
    /* This section drives the display of classes, html items and styles for a screen size less than 1768 pixels.*/
    /* header */
    #header .hamburger{
        display: none; /* this line removes the hamburger display when a screen size is more than 768px view is being shown*/
    }

    #header .nav-list ul{
        position: initial;
        display: block;
        height: auto;
        width: fit-content;
        background-color: transparent;
    }

    #header .nav-list ul li{
        display: inline-block;  /* this makes the list items appear on 1 line */
    }

    #header .nav-list ul li a{
        font-size: 1.8rem;
    }
    #header .nav-list ul a:after{
        display: none;
    }
    /* End of header */
    #services .service-bottom .service-item{
        flex-basis: 22%;
        margin: 1.5%;
    }
}
/* End of Media query for desktop */