/* Changes and the line numbers 
1. new title class has been added line number 345 media query at 352,
2. new wrap class has been added line numbers 338 and media query line is at 321
3. canvas values can be set at line 360



*/




/* font style.css is added as new font was added as the font in the screenshots was not available please change the fonts name in the font-style.css */
@import url("font-style.css");

@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 900;
  src: local('Varela Round Regular'), local('VarelaRound-Regular'), url(https://fonts.gstatic.com/s/varelaround/v13/w8gdH283Tvk__Lua32TysjIfp8uK.ttf) format('truetype');
}
* {
  box-sizing: border-box;
}
/* Change the values to change the colors
text color change it will reflect in mobile;
*/
:root {
  --bg-color: #45494E;
  --gradient-color: #FBFBFB;
  --text-color:#fff;
}
a:focus {
  outline: none;
  position: relative;
}
a:focus:after {
  width: 50px;
}
a:after {
  content: "";
  background: #FBFBFB;
  /* position: absolute; */
  /* bottom: 5px; */
  left: 15px;
  height: 3px;
  width: 0;
  transition: 0.5s;
  transition-delay: 0.2s;
}
body {
  background: var(--bg-color);
  font-family: "Varela Round", Nunito, Montserrat, sans-serif;
  margin: 0;
  padding: 0;
  text-transform: capitalize;
}

/* menu colors */
.menu {
  margin: 15px;

}
.menu > ol {
  list-style: none;
  margin: 30px 0;
  padding: 0;
}
.menu > ol > li {
  background: #3c3c3c;
  border-left: 5px solid var(--gradient-color);
  margin-bottom: 1px;
  position: relative;
  transition: 0.5s;
}

.menu > ol > li:nth-child(1) {
  --accent-color: #FDA085;
  --gradient-color: #F6D365;
}
.menu > ol > li:nth-child(2) {
  --accent-color: #BFF098;
  --gradient-color: #6FD6FF;
}
.menu > ol > li:nth-child(3) {
  --accent-color: #EA8D8D;
  --gradient-color: #A890FE;
}
.menu > ol > li:nth-child(4) {
  --accent-color: #D8B5FF;
  --gradient-color: #1EAE98;
}
.menu > ol > li:nth-child(5) {
  --accent-color: #C6EA8D;
  --gradient-color: #FE90AF;
}
.menu > ol > li a {
  color: #FBFBFB;
  display: block;
  padding: 15px;
  position: absolute;
  text-decoration: none;
  z-index: 99;
}
.menu > ol > li a:not(:last-child):before {
  content: "\f078";
  font-family: fontAwesome;
  font-size: 0.75em;
  line-height: 50px;
  position: absolute;
  right: 25px;
  top: 0;
  bottom: 0;
  margin: auto;
  transition: 0.5s;
}
.menu > ol > li:focus,
.menu > ol > li:focus-within,
.menu > ol > li:hover {
  z-index: 100;
}
.menu > ol > li:focus:after,
.menu > ol > li:focus-within:after,
.menu > ol > li:hover:after {
  background: linear-gradient(to left, var(--accent-color), var(--gradient-color)) !important ;
  max-width: 800px;
}
.menu > ol > li:focus .sub-menu,
.menu > ol > li:focus-within .sub-menu {
  max-height: 500px;
}
.menu > ol > li:focus a:before,
.menu > ol > li:focus-within a:before {
  transform: rotate(-180deg);
}
.menu > ol > li:after {
  background: #3c3c3c;
  content: "";
  position: absolute !important;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: 0.5s;
  max-width: 0;
  overflow: hidden;
}
.menu > ol .sub-menu {
  border-left: 1px solid #FBFBFB;
  margin-left: 22.5px;
  list-style: none;
  max-height: 0px;
  overflow: hidden;
  padding-left: 7.5px;
  position: absolute !important ;
  transition: 0.5s;
  width:180px !important ;
  background:red;
  /* #71D7FD */
  z-index: 100 !important;
}
.fa {
  padding: 20px;
  font-size: 30px;
  /* width: 20px; */
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}
.menu > ol .sub-menu li {
  font-size: 0.9em;
}
.menu > ol .sub-menu li:hover,
.menu > ol .sub-menu li a:focus {
  background: rgba(60, 60, 60, 0.3);
}
.menu > ol .sub-menu li a:after {
  bottom: 5px;
  height: 1px;
}
.menu > ol .sub-menu li a:hover:after,
.menu > ol .sub-menu li a:focus:after {
  width: 15px;
}
@media (min-width: 600px) {
  a:focus, a:hover {
    position: relative;
  }
  a:focus:after, a:hover:after {
    width: 50px;
  }
  a:after {
    left: 0;
    right: 0;
    margin: auto;
  }
  .menu {
    margin: 0;
    margin-top: 20vh;
  }
  .menu > ol {
    display: block;
    max-width: none;
    text-align: center;
  }
  .menu > ol > li {
    border-top: 5px solid var(--accent-color);
    border-left: 0;
    display: inline-block;
    margin-left: -5px;
    vertical-align: top;
    width: 120px;
  }
  .menu > ol > li:hover:after,
  .menu > ol > li:focus:after,
  .menu > ol > li:focus-within:after {
    background: linear-gradient(to bottom, var(--accent-color), var(--gradient-color));
    border-radius: 3px;
    top: -15px;
    bottom: -15px;
    left: -15px;
    right: -15px;
  }
  .menu > ol > li:hover .sub-menu,
  .menu > ol > li:focus .sub-menu,
  .menu > ol > li:focus-within .sub-menu {
    max-height: 750px;
  }
  .menu > ol > li a:not(:last-child):before {
    right: 12.5px;
  }
  .menu > ol > li:hover a:before {
    transform: rotate(-180deg);
  }
  .menu > ol .sub-menu {
    border-left: 0;
    margin: 15px -15px -15px;
    padding-left: 0;
  }
}

@media (min-width: 775px) {
  .menu > ol > li {
    width: 150px;
  }
  .menu > ol > li a:not(:last-child):before {
    right: 25px;
  }
}
/* this is changed it was first in footer.php file but now it is placed in style.css please do not provide width to it just change the padding value.*/
.fa {
  padding: 20px;
  font-size: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}
.fa-youtube {
  background: #bb0000;
  color: white;
}
.fa-instagram {
  background: #125688;
  color: white;
}
.fa-pinterest {
  background: #cb2027;
  color: white;
}
.fa-skype {
  background: #00aff0;
  color: white;
}


.fa-tumblr {
  background: #2c4762;
  color: white;
}

.fa-flickr {
  background: #f40083;
  color: white;
}
/* this code make sures that your social media images are always come in single line in mobile 
if you need to change the setting just change the padding value; */

@media only screen and (max-width:360px){
    .fa {
    padding: 8px;
    font-size: 15px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    }
    footer{
      font-size:10px;
    }
    .wrap{
      font-size:12px;
      background:rgba(255,255,255,0.4) !important;
      color:var(--text-color);
         }
      canvas{
         top:20px !important;
      }   
}
/* footer codes lies here */
footer{
  text-align:center;
  color:#660099;
 
  bottom: 0 !important;
  width: 100%;
}

 
/* New wrapper class has been added in the code so if you want to change the text background color just change here. */
.wrap{
  /* background:white; */
  padding-top:20px;
  margin-top:100px;
  background: rgba(255, 255, 255, 0.4);
  color:white;
}

/* title it is if you want to change the title text color and size you need to change this code */
.title{
  font-family:'dotlineregular',sans-serif;
  color:white;
  text-align:center;
  font-size:80px;
}
/* it is the font size of title in the mobile. */
@media only screen and (max-width:360px){
  .title{
    font-size:36px;
  }
}

/* this is canvas field you can change position and margin from top this value is set as the canvas is based on sign values
if you change the animation you may have to change the top value. if the animation is covering whole page than make the top value 0 */
canvas{
  position:fixed;
  top:0px;
  left:0;
  z-index:-1;
}
.wrap-image{
width:100%;
}
         .wrap {
         /* background: white; */
         border-radius: 25px;
         padding-top: 20px;
         padding-bottom: 20px;
         padding-left: 30px;
         padding-right: 20px;		 
         margin-top: 100px;
         background: rgb(115,247,108);
         background: rgb(115,247,108);
         background: rgb(115,247,108);
         background: rgb(115,247,108);
         background: linear-gradient(180deg, rgba(115,247,108,0.7875350823923319) 9%, rgba(8,234,244,0.8043418050814075) 20%, rgba(0,228,255,0.633473457742472) 25%, rgba(0,229,255,0.63) 31%, rgba(230,241,150,0.6866947462578781) 45%, rgba(252,238,167,0.4429972672662815) 55%, rgba(239,94,248,0.5018207966780462) 72%, rgba(252,174,203,0.510224158022584) 100%); 
         color: #3300ff;
         opacity:0.95;
         border-style: dotted;
         font-size: 200%;
		 font-family: Codystar;
		 font-weight: bold;
		 text-transform: capitalize:
         }