body {
    font-family: "Open Sans", sans-serif;
    color: #444;
  }


 .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
 width: 100%;
 padding-right: var(--bs-gutter-x,.75rem);
 padding-left: var(--bs-gutter-x,.75rem);
 margin-right: auto;
 margin-left: auto;
   } 


h1 {
  text-align: center;
}
h2 {
  text-align: center;
}


/*   .container {
  margin: auto;
  background-color: aquamarine;
  text-align: center;
  max-width: 500px;
}  */

.center {
  display: flex;
  flex-direction: row;
  margin: auto;
  margin-top: 5px;
  width: 75%;
  border: 3px solid green;
  padding: 10px;
  text-align: center;
  background-color: blue;
  color: aqua;
}
main
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
   background-color: rgb(3, 93, 184);
}

.bordering {  /* This is on boxes.html */
  background-color: aquamarine;
  border-color: rgb(42, 6, 247);
  padding-left: 5px;
  padding-right: 5px;
  color:rgb(240, 13, 6);
  text-align: end;
}
.bordering-purple {  /* This is on boxes.html */
  background-color: rgb(255, 0, 0);
  border-color: rgb(42, 6, 247);
  padding-left: 5px;
  padding-right: 5px;
  color:rgb(240, 13, 6);
  text-align: end;
}

/* Modify the background color of the navbar*/
.navbar-color {
  /*background-color: #99d7e4  #D1E3ED */
  background-color: #D1E3ED;
}







/* Colours */
.color-pink{
  color: pink;
}
.color-orange{
  color: orange;
}
.color-indigo{
  color: indigo;
}
.color-teal{
  color: #20c997;
}
.color-tealish {
  color: #D1E3ED;
}
.color-purple{
  color: purple;
}
.color-limegreen{
  color: #08FF46;
}
.color-cyan{
  color: #0dcaf0;
  text-align: end; /* This is just for the "colors page */
}


.ml-0 {
  margin-top: 0; /* What the hell is this? */
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  height: 90vh;
  overflow: hidden;
  position: relative;
}

#hero::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 130%;
  height: 95%;
  /* background: linear-gradient(to right, rgba(30, 67, 86, 0.8), rgba(30, 67, 86, 0.6)), url("../img/hero.jpg") center top no-repeat; */
  background: linear-gradient(to right, rgba(30, 67, 86, 0.8), rgba(30, 67, 86, 0.6)), url("../img/hero75.jpg") center top no-repeat;
  z-index: 0;
  border-radius: 0 0 50% 50%;
  transform: translateX(-50%) rotate(0deg);
}




#hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 130%;
  height: 96%;
  background: #68A4C4; /* #68A4C4 */
  opacity: 0.3;
  z-index: 0;
  border-radius: 0 0 50% 50%;
  transform: translateX(-50%) translateY(18px) rotate(2deg);
}

#hero .carousel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

#hero h2 {
  color: #fff;
  margin-bottom: 30px;
  font-size: 48px;
  font-weight: 700;
}

#hero p {
  width: 80%;
  animation-delay: 0.4s;
  margin: 0 auto 30px auto;
  color: #fff;
}

#hero .carousel-control-prev,
#hero .carousel-control-next {
  width: 10%;
}

#hero .carousel-control-next-icon,
#hero .carousel-control-prev-icon {
  background: none;
  font-size: 48px;
  line-height: 1;
  width: auto;
  height: auto;
}

#hero .btn-get-started {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 32px;
  border-radius: 50px;
  transition: 0.5s;
  line-height: 1;
  margin: 10px;
  color: #fff;
  animation-delay: 0.8s;
  border: 2px solid #68A4C4;
}

#hero .btn-get-started:hover {
  background: #68A4C4;
  color: #fff;
  text-decoration: none;
}

@media (min-width: 1024px) {
  #hero p {
    width: 60%;
  }

  #hero .carousel-control-prev,
  #hero .carousel-control-next {
    width: 5%;
  }
}

@media (max-width: 768px) {
  #hero::after {
    width: 180%;
    height: 95%;
    border-radius: 0 0 50% 50%;
    transform: translateX(-50%) rotate(0deg);
  }

  #hero::before {
    top: 0;
    width: 180%;
    height: 94%;
    border-radius: 0 0 50% 50%;
    transform: translateX(-50%) translateY(20px) rotate(4deg);
  }
}

@media (max-width: 575px) {
  #hero h2 {
    font-size: 30px;
  }

  #hero::after {
    left: 40%;
    top: 0;
    width: 200%;
    height: 95%;
    border-radius: 0 0 50% 50%;
    transform: translateX(-50%) rotate(0deg);
  }

  #hero::before {
    left: 50%;
    top: 0;
    width: 200%;
    height: 94%;
    border-radius: 0 0 50% 50%;
    transform: translateX(-50%) translateY(20px) rotate(4deg);
  }
}







/*--------------------------------------------------------------
# Animation Section
--------------------------------------------------------------*/

#crest {
  animation: rotation 2s linear; /* add "infinite" to keep it going around in a circle */
  animation-fill-mode: forwards; /* This keeps the coat of arms from disappearing when animation done This is the one that goes around in big circle*/
}

/*  @keyframes crest {
  from {
    margin-left: 100%;
    width: 100%;
  } 

  to {
    margin-left: 100%;
    width: 100%;
  }
}  */








#span-rotate {
 transform: rotate(45deg) translateX(0px) translateY(0px) ;  /* Equal to rotateZ(45deg) */ 
  background-color: rgb(192, 225, 255);
  width: 150px;
  /* animation-fill-mode: forwards; */
}

/* THIS CAUSES THE CHEVRONS ON HOME PAGE TO BOUNCE. DON'T WANT THIS */
/* span {                       
  animation-duration: 5s;
  animation-name: bounce;
} 
*/
        /*This applies the font size only to p tags within a span tag. CSS element element selector. Added "bounce" - works but doesn't look good*/
span p {
  animation-duration: 5s;
  animation-name: slide, bounce;
  font-size: 16px;
}
/* This keyframe is for the span p code above and is required */
@keyframes slide {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

/* This works but prevents above span p code from working (above keyframe code) */
 /*  div span p {
  font-size: 50px;
  animation-duration: 5s;
    animation-name: bounce;
  }  */

 /* Below kept for reference only */ 
/* @keyframes bounce {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
} */



/* All this goes together... */
/*  This is to rotate the coat of arms around itself at bottom of Animation to-do page*/
#rotation {
  width: 100px;
  animation: rotation 2s infinite linear; /*  Remove "infinite" to have it rotate only once or put a numerical value in*/
}/* This keyframe is reqd for above #rotation */
  @keyframes rotation {     
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}  
/* ...to here */



#contact {
  margin: auto;
  margin-top: 5px;
  width: 50%;
  /* border: 3px solid green; */
  padding: 5px;
  text-align: center;
/*  animation: rotation 2s linear;  add "infinite" to keep it going around in a circle */
 }
/*
@keyframes sliding {
  from {
    margin-left: 100%;
    width: 300%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
} */

/* @keyframes bounce {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
} */











/* For carousel2.html */
div#carousel { 
  perspective: 1200px; 
  background: #585656; 
  padding-top: 10%; 
  font-size:0; 
  margin-bottom: 3rem; 
  overflow: hidden; 
}
figure#spinner { 
  transform-style: preserve-3d; 
  height: 300px; 
  transform-origin: 50% 50% -500px; 
  transition: 1s; 
} 
figure#spinner img { 
  width: 40%; max-width: 425px; 
  position: absolute; left: 30%;
  transform-origin: 50% 50% -500px;
  outline:1px solid transparent; 
}
figure#spinner img:nth-child(1) { transform:rotateY(0deg); 
}
figure#spinner img:nth-child(2) { transform: rotateY(-45deg); }
figure#spinner img:nth-child(3) { transform: rotateY(-90deg); }
figure#spinner img:nth-child(4) { transform: rotateY(-135deg); }
figure#spinner img:nth-child(5){ transform: rotateY(-180deg); }
figure#spinner img:nth-child(6){ transform: rotateY(-225deg); }
figure#spinner img:nth-child(7){ transform: rotateY(-270deg); }
figure#spinner img:nth-child(8){ transform: rotateY(-315deg); }
div#carousel ~ span { 
  color: #fff; 
  margin: 5%; 
  display: inline-block; 
  text-decoration: none; 
  font-size: 2rem; 
  transition: 0.6s color; 
  position: relative; 
  margin-top: -6rem; 
  border-bottom: none; 
  line-height: 0; }
div#carousel ~ span:hover { color: #888; cursor: pointer; }
/* End carousel2.html */



/******For progress bar********/
.animated-progress {
  width: 600px;
  height: 30px;
  border-radius: 5px;
  margin: 20px 10px;
  border: 2px solid rgb(189, 113, 113);
  overflow: hidden;
  position: relative;
}

.animated-progress span {
  height: 100%;
  display: block;
  width: 0;
  color: rgb(255, 251, 251);
  line-height: 30px;
  position: absolute;
  text-align: end;
  padding-right: 5px;
}

.progress-blue span {
  background-color: blue;
}
.progress-green span {
  background-color: green;
}
.progress-purple span {
  background-color: indigo;
}
.progress-red span {
  background-color: red;
}
.progress-limegreen span {
  background-color: rgb(21, 226, 100);
}
/****** /For progress bar********/







/*  For skills counter */
.skill5
{   padding-top: 50px;
    padding-bottom: 50px;
    background-color: #fff;
    text-align: center;
}
.skill5 .counter-count 
{    -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
    -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1);
    font-size: 40px;
    background-color: #1583c9;
    border-radius: 50%;
    position: relative;
    color: #ffffff;
    text-align: center;
    line-height: 172px;
    width: 192px;
    height: 192px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    display: inline-block;
    text-shadow: rgb(13, 115, 188) 1px 1px, rgb(13, 115, 188) 2px 2px, rgb(13, 115, 188) 3px 3px, rgb(13, 115, 188) 4px 4px, rgb(13, 115, 188) 5px 5px, rgb(13, 115, 188) 6px 6px, rgb(13, 115, 188) 7px 7px, rgb(13, 115, 188) 8px 8px, rgb(13, 115, 188) 9px 9px, rgb(13, 115, 188) 10px 10px, rgb(13, 115, 188) 11px 11px, rgb(13, 115, 188) 12px 12px, rgb(13, 116, 189) 13px 13px, rgb(13, 116, 189) 14px 14px, rgb(13, 116, 189) 15px 15px, rgb(13, 116, 189) 16px 16px, rgb(13, 117, 191) 17px 17px, rgb(13, 117, 191) 18px 18px, rgb(13, 117, 191) 19px 19px, rgb(13, 118, 192) 20px 20px, rgb(13, 118, 192) 21px 21px, rgb(14, 119, 194) 21px 21px, rgb(14, 120, 196) 22px 22px, rgb(14, 121, 197) 23px 23px, rgb(14, 122, 199) 24px 24px, rgb(14, 123, 201) 25px 25px, rgb(14, 124, 203) 26px 26px, rgb(14, 125, 204) 27px 27px, rgb(14, 126, 206) 28px 28px, rgb(15, 127, 208) 29px 29px, rgb(15, 128, 209) 30px 30px;
}
.skill5 .counter-count .counter-percent
{	
	font-size: 40px;
    color: #ffffff;
    margin-left: 1px;
    text-shadow: rgb(13, 115, 188) 1px 1px, rgb(13, 115, 188) 2px 2px, rgb(13, 115, 188) 3px 3px, rgb(13, 115, 188) 4px 4px, rgb(13, 115, 188) 5px 5px, rgb(13, 115, 188) 6px 6px, rgb(13, 115, 188) 7px 7px, rgb(13, 115, 188) 8px 8px, rgb(13, 115, 188) 9px 9px, rgb(13, 115, 188) 10px 10px, rgb(13, 115, 188) 11px 11px, rgb(13, 115, 188) 12px 12px, rgb(13, 116, 189) 13px 13px, rgb(13, 116, 189) 14px 14px, rgb(13, 116, 189) 15px 15px, rgb(13, 116, 189) 16px 16px, rgb(13, 117, 191) 17px 17px, rgb(13, 117, 191) 18px 18px, rgb(13, 117, 191) 19px 19px, rgb(13, 118, 192) 20px 20px, rgb(13, 118, 192) 21px 21px, rgb(14, 119, 194) 21px 21px, rgb(14, 120, 196) 22px 22px, rgb(14, 121, 197) 23px 23px, rgb(14, 122, 199) 24px 24px, rgb(14, 123, 201) 25px 25px, rgb(14, 124, 203) 26px 26px, rgb(14, 125, 204) 27px 27px, rgb(14, 126, 206) 28px 28px, rgb(15, 127, 208) 29px 29px, rgb(15, 128, 209) 30px 30px;
    
}
.skill5 .counter-bottom
{
    font-size: 24px;
    font-weight: 400;
    color: #000000;
    line-height: 34px;
}
/*  /For skills counter */