/*Colors Used
    Backgrounds: f5f3f0(off white)
    Primary: Greens: 002f18(dark green) 7c9948 (asparagus green) c9d57c (deco-lighter green)
    Secondary: Browns: b2967d(brown) 645445(darker brown)    
    Accessory: Pinks:  e6beae(rose) e7d8c9(nude) eee4e1(pale blush) f5f3f0*/


/*=================================
         Typography 
=================================*/
*{
  box-sizing: border-box;
}
    body {
        background-color: #000000;
        font-family: "Roboto", sans-serif;
        font-size: 16px; /* Sets the font size to 16px */
        font-weight: 300; /* Sets the font weight to 300 */
        line-height: 1.6; /* Sets the line-height to 1.6 * the font-size */
        color: #E3E4E8;
      }
      
      h1, h2, h3, h4 {
        line-height: 1.4;
      }
      h1 {
        font-size: 2.75em;
        font-weight: 700;
      }
      
      h2 {
        font-size: 2.25em;
        font-weight: 700;
      }
      
      h3 {
        font-size: 1.75em;
        font-weight: 400;
      }
      h4 {
        font-size: 1.35em;
        font-weight: 400;
      }

      img {
        width:100%;
      }

/*=================================
      Hyperlinks and Buttons 
=================================*/
/*
      - a:hover must come after a:visited in the CSS definition in order to be effective! 
      - Likewise, a:active must come after a:hover in the CSS definition in order to work.
*/

    a 
       { color: #002f18;
        text-decoration: none; /* No underlining */  }

    a:hover 
        { color: #e3a5a1;
        text-decoration: underline; /* Underlining when hovering over a link */  }

    a:hover, a:focus 
        { color: #e3a5a1;
        text-decoration: underline;  }
     
    a:visited /* visited link */
        {   color: #f5f3f0; }
      
    a:active /* selected link */
        {    color: #645445; }


/* When styling Buttons, here is everything that must be included
    -Its primary color as the background color;
    -Bold font weight;
    -A white font color;
    -An inner spacing separating the button text from its border;
    -Rounded corners;
    -A border along the bottom.
*/

      .button {
        display: inline-block; /* since the <a> tag is inline by default, we need to change this to inline-block*/
        background-color: #4C6982;
        color: #E3E4E8; /* needed to override the default link color */
        font-weight: 400;
        padding: 10px;
        border-radius: 3px;
        border: 1px solid #5A7D9A;
        border-bottom: 1px solid #5A7D9A; /* width of the border, type, color */
        transition: 0.2s opacity;
        
      }

      .button:hover {
        opacity: 0.9; /* Reduces the opacity of the button to 80% */
        background-color: #000000;
        color: #E3E4E8;
        text-decoration: none;
      }

     .button:active {
      opacity: 0.8; /* Reduces the opacity of the button to 80% */
      color: #F5F5DC;
      text-decoration: none;
    }

    .button.contact {
      background-color: transparent;
      color: #5A7D9A;
      text-transform: uppercase;
      border: 1px solid #5A7D9A;
    }

    .button.contact:hover {
      background-color: #4C6982;
      color: #E3E4E8;
    }

    .button.contact:active {
      background-color: #645445;
      color: #E3E4E8;
      box-shadow: 0 5px #666;
      transform: translateY(4px);
    }
/* Back to Top Button */
    .top-link {
      transition: all .25s ease-in-out;
      position: fixed;
      bottom: 0;
      right: 0;
      display: inline-flex;
      
     cursor: pointer;
     align-items: center;
     justify-content: center;
     margin: 0 3em 3em 0;
     border-radius: 50%;
     padding: .25em;
     width: 80px;
     height: 80px;
     background-color: #4C6982;
    }

    .top-link svg {
      fill: #E3E4E8;
      width: 24px;
      height: 12px;
     }
     
     .top-link:hover {
      background-color: #748ea3;
        svg {
        fill: #E3E4E8;
       }
     }

     /* Text meant only for screen readers.*/
.screen-reader-text {
	position: absolute;
	clip-path: inset(50%);
	margin: -1px;
	border: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	word-wrap: normal !important;
	clip: rect(1px, 1px, 1px, 1px);
	&:focus {
		display: block;
		top: 5px;
		left: 5px;
		z-index: 100000; /* Above WP toolbar*/
		clip-path: none;
		background-color: #eee;
		padding: 15px 23px 14px;
		width: auto;
		height: auto;
		text-decoration: none;
		line-height: normal;
		color: #444;
		font-size: 1em;
		clip: auto !important;
	}
}


/*=================================
          Layout Styling 
=================================*/

    .container{
      padding: 0 15px;
    }
    
    .row{
      margin: 25px 0; /*25px top and bottom, 0 left and right*/
    }

    #work .row{ /* using this ID, you are only styling elements with both the work id and the row class*/
      padding-bottom: 25px;
      border-bottom: 1px solid #5A7D9A;
    }

    #hero h1, h2{
      text-align: center; /*centers text*/
    }
    #hero h1{ color: #5A7D9A}

    #work h2{
      text-align: center;
    }

    #heading1 h1{
      text-align: center;
    }

    .logo{        
      max-width: 150px;
    }


    header {
      background-color: #000000;
      /*text-align: center;*/
      padding: 10px;
      /*margin: 10px 10px 0px 10px;*/
      border-bottom: 1px solid #4a4a4a; 
      position: relative;
      
      /* box shadow*/

     /* width: [object Object]px; 
      height: [object Object]px; 
      /*background: #F8F8F8; 
      border: solid #BDBDBD 1px; */
      box-shadow: 0 5px 20px rgba(85, 84, 84, 0.7)  ; 
      -webkit-box-shadow: 0 5px 20px rgba(85, 84, 84, 0.7)  ; 
      -moz-box-shadow: 0 5px 20px rgba(85, 85, 85, 0.7)  ; 
    }

/*=================================
          Navigation Styling 
=================================*/

    .navtoggle li:not(:last-child) { /*This will hide (display: none;) all list elements (<li>) except for the last one (:last-child) Meaning all menu items but the hamburger are hidden*/
      display: none;
    }     

    .navtoggle, .navtoggle.responsive {
    position: relative; /* Ensure it's the positioning reference */
    display: flex;      /* Aligns children horizontally */
    align-items: center; /* Vertically centers children like the logo and icon */
    justify-content: space-between; /* Distributes space between logo and menu */
    }

    .navtoggle li .icon {
      position: absolute;
      /*padding-right: 0;*/
      top: 50%; /* Center vertically */
      transform: translateY(-50%); /* Adjust to perfectly center */
      right: 15px;
      font-size: 20px;
    }

    .navtoggle.responsive nav {
      padding: 12px 0 0;
    }
    .navtoggle.responsive li  {
      display: block;
      padding: 10px 0;
      border-top: 1px solid #5A7D9A;
    }
    
    .navtoggle.responsive li:last-child  {
      padding: 60px 0 10px;
    }

    nav > ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      width: 100%
    }

    nav > ul > li{
      position: relative;
    }

    nav > ul > li > a {
      padding: 0 15px;
      text-transform: uppercase;
      font-weight: 700;
      color: #E3E4E8;
      
    }

    nav > ul > li > a:visited {
      color: #E3E4E8;
      text-decoration: underline;
    }

    nav > ul > li > a:hover {
      color: #5A7D9A;
      text-decoration: none;
    }

    nav > ul > li > a:active {

      color: #C0A77D;
    }

/*===============================
      Animation for Navigation 
================================= */

nav > ul > li > a:before, nav > ul > li > a:after
{
    position: absolute;
    left: 0px;
    width: 100%;
    height: 2px;
    background: #5A7D9A;
    content: "";
    opacity: 0;
    transition: all 0.3s;
}

nav > ul > li > a:before
{
    top: 0px;
    transform: translateY(10px);
}

nav > ul > li > a:after
{
    bottom: 0px;
    transform: translateY(-10px);
}

nav > ul > li > a:hover:before, nav > ul > li > a:hover:after
{
    opacity: 1;
    transform: translateY(0px);
} 
    

/*=========================================
          Home Page Hero Section
==========================================*/
#hero {
  background-color: #000000;
  color: #E3E4E8;
  padding: 20px 0;
  display: inline-block;
  width: 100%;
  
}

/* #hero {
  background-color: #000000;
  color: #E3E4E8;
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
.hero-container {
  display: flex;
  flex-wrap: wrap; /* Ensures it wraps on smaller screens 
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
} 

.hero-text {
  flex: 1; /* Takes up available space 
  padding: 20px;
  text-align: left; 
} */

.hero-image {
  flex: 1; /* Takes up available space */
  display: none; /* Default: hidden */
}

.hero-image img {
  transform: scaleX(-1);
  max-width: 100%;
  height: auto;
}

.heroButton {
  text-align: center;
}


/*=============================== 
          Footer Styling 
=================================*/
footer{
  background-color: #000000;
  color: #E3E4E8;
  padding: 10px;
  margin: 25px 0px 0px 0px;
  text-align: center;
  border-top: solid #4a4a4a 1px; 

/* Box Shadow */

 /* width: [object Object]px; 
	height: [object Object]px; */
	
	box-shadow: 0 5px 21px rgba(85, 84, 84, 0.7) inset; 
	-webkit-box-shadow: 0 5px 21px rgba(85, 84, 84, 0.4) inset; 
	-moz-box-shadow: 0 5px 21px rgba(85, 85, 85, 0.7) inset; 
}


.icon{
  max-width: 32px
}


/* ==============================
      CSS For the Animation 1
================================= 
@keyframes color-change {
  0% {fill: #fcffad;}
  50% {fill: #edc655;}
  75% {fill: #fa8f56;}
  100% {fill: #f76414;}
}


.sun { /*this can be combine into one line ex: animation: 4s color-change infinite alternate linear *
  animation-duration: 4s;
  animation-name: color-change;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes cloud-move {
  from {transform: translate(0,50px);}
  to {transform: translate(200px,50px);}
}

.cloud-front {
  animation: 30s cloud-move, infinite alternate linear;
}


@keyframes cloud-move-reverse {
  from {transform: translate(446px,48px);}
  to {transform: translate(100px, 48px);}
}

.cloud-back {
  animation: 34s cloud-move-reverse infinite alternate linear;
}
*/

/* ==============================
      CSS For the Animation 2
================================= */

#XMLID_1057_{ /*sun*/
 animation-duration: 4s;
  animation-name: color-change;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes clouds-moving{
  from {transform: translate(-50px, 1px);}
  to {transform: translate(100px, 1px);}
}

#XMLID_59_ { /*cloud 1*/
  animation: 6s clouds-moving infinite alternate linear;
}

#XMLID_64_ { /*cloud 2*/ 
  animation: 6s clouds-moving infinite alternate linear;
}

@keyframes road-move{
  from {transform: translate(-1000px, 1px);}
  to {transform: translate(1000px, 1px);}
}

#XMLID_129_
{ 
  animation: 3s road-move infinite linear;
}

#XMLID_187_
{ 
  animation: 3s road-move infinite linear;
}

#XMLID_325_
{ 
  animation: 3s road-move infinite linear;
}

#XMLID_3_
{ 
  animation: 3s road-move infinite linear;
}

#XMLID_324_
{ 
  animation: 3s road-move infinite linear;
}

#XMLID_190_
{ 
  animation: 3s road-move infinite linear;
}

#XMLID_5_
{ 
  animation: 3s road-move infinite linear;
}


/* Media Quieries */

/* ===========================================================================================
                            Medium devices (640px and larger)
============================================================================================== */

  @media only screen and (min-width: 640px) {
    
  /*when you floated the columns, you removed them from the normal flow of the page, 
    and other elements that were below them moved up to take their place, which can cause overlapping
    To prevent this, you need to “clear” the flow with the code below.*/

    .row::after {
      content: "";
      clear: both;
      display: table;
    }

    [class*="col-"] { /* When "*' is placed together with col-, it ensures that every class with at least col- in it will be affected.*/
      float: left;
      padding: 15px 15px 15px 15px ;
    }
    
    body
    {font-size: 18px;}

    header {
      text-align: unset;
      padding: 20px 0 13px;
    }
  
    nav 
    {
      width: auto;
      float: right;
      margin-top: 4px;
    }

    nav > ul {
      margin: 1em 0;
    }
    
/*the next two codes help ensure that the menu labels are listed and the hamburger icon is gone when coverting to larger screens*/
    .navtoggle li:not(:last-child) {
      display: inline-block;
    }
    .navtoggle li:last-child {
      display: none;
    }

    nav > ul > li{
      display: inline-block;
    }

    #hero span { display: block; }
/*========================================================
    For Hero
=========================================================*/
#hero {
  display: flex;
  justify-content: center;
  align-items: center;
}    

/*.hero-co;ntainer {
      flex-direction: row; /* Side-by-side layout 
    }
  
    
 /* .hero-text {
    flex: 1;
    text-align: center;
}*/

  .hero-image {
      display: block; /* Show the image */
      flex: 1;
      height: auto;
  }

    .col-md-6 {
      width: 50%;
    } /*This means that each column will take up 50% of the original 100%, or, 
    in terms of the 12-column grid, 6 grid columns. */

    .col-md-5 {
      width: 100%;
      
    } 
    .aboutPic{
      padding-top: 200px;
    }


    ul.skillsTools {
      list-style-type: none;
      text-align: center;
      padding: 0;
      margin: 0;
         }
  
    #about h3 { margin-top: 0; text-align: center;}
    #about h1, h2 {text-align: center;}

   
    .container {
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
    }

/*.aboutPic {
  display: flex;
  justify-content: center;
  align-items: center;

}*/
    #about .col-md-6 .aboutPic {  /*To make about picture responsive*/
    padding: 150px 0px 0px 0px;
    
    }

    .logo{   /*To bring logo back to orginal size*/      
      max-width: 250px;
    }
  }


/* ==============================
Large devices (1024px or larger)
================================= */
@media only screen and (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .col-lg-5 {
      width: 41.66%;}

      .col-lg-7 {
        width: 58.33%;
        float: left;
        padding-bottom: 40px;
      }
      .col-lg-8 {
        width: 40%;
        float: right;
      }
        
       #about-page .col-md-6 {
         width: 100%;
      }
  .aboutPic{
        padding-top: 0px;
      }

}

/* ==============================
X-large devices (1440px or larger)
================================= */
@media only screen and (min-width: 1440px) {
}