/*======================TAG SELECTOR================================================*/

hr{
  border-style: none;
  border-top-style: dotted;
  border-color: white;
  border-width: 5px;
  width: 5%
}

/*======================CLASS SELECTOR================================================*/
/*=--- Note : dot is use to define CLASS : we can use same classname once on single page, , and we can add more than one class  ---=*/
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

/* Main Page Section - Animation */
@keyframes mymove {
  from {top: 0px;}
  to {top: 50px; }
}

/* Introduction */

.section {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.center, .center-align {
    text-align: center;
}

/* Title Section */

#title {
  background-color: #ff4c68;
  color: #fff;
  text-align: left;
}

/* Sections */

.white-section {
  background-color: #dedede;
}

/*  icon */
.icon-bg-color {
	background: #fafafa;
}

/* Footer- RESUME - Message */
h4{
  font-size: 4.2rem;
  line-height: 110%;
  margin: 2.1rem 0 1.68rem 0;
  font-weight: 400;
  text-align: center;
  color: white;
}

.col.s12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
}
 /* Message Area */

 input[type=text], textarea[type=text] ,input[type=email]{
   width: 30%;
   padding: 15px 10px;
   margin: 18px 0;
   box-sizing: border-box;
   border: 1px solid #fff;
   border-bottom-color: #9e9e9e;
   -webkit-transition: 0.5s;
   transition: 0.2s;
   outline: none;
   font-weight: bold;
 }

 input[type=text]:focus {
   border: 2px solid #fff;
   border-bottom-color: #26a69a;
 }
 textarea[type=text]:focus {
   border: 2px solid #fff;
   border-bottom-color: #26a69a;
 }

 input[type=submit] {
   background-color: #4CAF50;
   color: white;
   padding: 12px 20px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   margin: 40px 0;
   font-weight: bold;
 }

 input[type=submit]:hover {
   background-color: #555;
 }

 .container {
   position: relative;
   border-radius: 5px;
   background-color: #fff;
   padding: 20px;
 }
 .center {
     text-align: center;
 }
 .left {
     text-align: left;
 }
  /* Invali input email  */

  input[type=email]:focus {
    border: 2px solid #fff;
    border-bottom-color: #26a69a;
  }

 input[type=email]:invalid {
   width: 30%;
   padding: 15px 10px;
   margin: 8px 0;
   box-sizing: border-box;
   border: 2px solid #fff;
   -webkit-transition: 0.5s;
   transition: 0.5s;
   outline: none;
   font-weight: bold;
   border-bottom: 1px solid #F44336;
   border-bottom-width: 1px;
   border-bottom-style: solid;
   border-bottom-color: rgb(244, 67, 54);
   box-shadow: 0 1px 0 0 #F44336;
 }
/* Message send button */

.btn {
  background-color: #9F9F9F ;
  border: none;
  color: white;
  padding: 10px 30px;
  font-size: 16px;
  cursor: pointer;
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: #C0C0C0;
}


/* Resume Button */
.white{
  background-color: white;
  color: black;
}
.white:hover{
  background-color: 	#e8f4f8;
}


body, html {
  scroll-behavior: smooth;
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

a.ex1:hover, a.ex1:active {color: red;}
a.ex2:hover, a.ex2:active {font-size: 150%;}
a.ex3:hover, a.ex3:active {background: red;}
a.ex4:hover, a.ex4:active {font-family: monospace;}
a.ex5:visited, a.ex5:link {text-decoration: none;}
a.ex5:hover, a.ex5:active {text-decoration: underline;color: #ffcd8d }

/*---------------Profile Picture--------------------------------------------------------------------*/
.z-depth-5 {
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}
.avatar1 {
    border-radius: 100%;
    display: inline-block;
    margin: 0 0 2em 0;
    padding: 0.5em;
    border: solid 1px rgba(255, 255, 255, 0.25);
    background-color: rgba(255, 255, 255, 0.075);
    position: absolute;
    /* top: 50px; */
    right: 525px;
    justify-content: center;
    align-items: center;
}

/*-------------------create social media icon -----------------------------------------------------------------*/

.middle {
  transition: .0s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.hero-image:hover .middle {
  opacity: 0.9;
}

.text {
  opacity: .9;
  color: white;
  font-size: 15px;
  padding: 16px 32px;
}

/* Message - resume - Footer Section */
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

/* removed middle code */

.container:hover .image {
  opacity: 0.9;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  /* background-color: #000000; */
  color: white;
  font-size: 14px;
  padding: 16px 32px;
}

 .hero-text{
  text-align: center;
  position: absolute;
  top: 73%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  margin: auto;
}

/* -----------------------Technical skills-------------------------------------------------- */

#example2 {
  padding: 10px;
  box-shadow: 1px 1px 5px 1px #888888;
}
/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 14%;
  padding: 14px;
  margin: 3px;
  height: 300px; /* Should be removed. Only for demonstration */
}
.white-section {
  background-color: #fff;
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* projects */

#example3 {
  padding: 20px;
  box-shadow: 1px 1px 5px 1px #888888;
}

/* Create four equal columns that floats next to each other */

.center, .center-align {
    text-align: center;
}

.row .col.s6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.row .col.m4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
}

 .card-image{
    max-height: 60%;
    overflow: hidden;
}

.card .card-image {
    position: relative;
}

/* ---------------------------------  End  ---------------------------------*/
.top-container {
  background-color: #E4F9F5;
  position: relative;
  padding-top: 100px;
}

.middle-container {
  background-color: white;
  margin: 100px 0;
}

.bottom-container {
  padding: 10px 0 20px;
  text-align: center;
  background-color: black;
}

/* work experienec */
a {
    color: #039be5;
    text-decoration: none;
}
a:visited {
  color: #039be5;
}
a:hover {
  color: blue;
}

.row .col {
    float: left;
    box-sizing: border-box;
    padding: 0 0.75rem;
    min-height: 1px;
}
.z-depth-3 {
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
}
img {
    border: 0;
}

img[Attributes Style] {
    width: 150px;
}

.caption {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    color: #000;
}

/* Award and certifications */

.cartification-caption {
    position: absolute;
    left: 0;
    top: 25%;
    width: 100%;
    text-align: center;
    color: #000;
}
/* Programming Languages */
.chip:hover {opacity: 0.9}
.chip {
    display: inline-block;
    height: 32px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.6);
    line-height: 32px;
    padding: 0 12px;
    border-radius: 16px;
    background-color: #e4e4e4;
    margin-bottom: 5px;
    margin-right: 5px;
}

/* projects in LTI */
.collection .collection-item {
    background-color: #fff;
    line-height: 1.5rem;
    padding: 10px 20px;
    margin: 0;
    border-bottom: 1px solid #e0e0e0;
}
.collection {
    margin: 0.5rem 0 1rem 0;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.left {
    float: left !important;
}


/*======================Pre load Screen ================================================*/

.preload {
	width: 100%;
	height: 100%;
	background: white;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}

.loader-frame{
	/* width: 70px;
	height: 70px; */
	width: 130px;
	height: 130px;
	margin: auto;
	position: relative;
}

.loader1, .loader2 {
	position: absolute;
	border: 5px solid transparent;
	border-radius: 50%;
}

.loader1 {
	/* width: 70px;
	height: 70px; */
	width: 130px;
	height: 130px;
	border-top: 5px solid #24a4d8;
	border-bottom: 5px solid #24a4d8;
	animation: clockwisespin 2s linear 3;

}

.loader2
{
	/* width: 60px;
	height: 60px; */
	width: 120px;
	height: 120px;
	border-left:  5px solid #a9dcf1;
	border-right: 5px solid #a9dcf1;
	top: 5px; left: 5px;
	animation: anticlockwisespin 2s linear 3;
}

@keyframes clockwisespin {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}


@keyframes anticlockwisespin {
	from {transform: rotate(0deg);}
	to {transform: rotate(-360deg);}
}

@keyframes fadeout{
	from {opacity: 1;}
	to {opacity: 0;}
}



/* ================= Side navigation Bar=================== */

/* transition settings */
div#contentarea {
  position: relative;
  width: 100%;
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -moz-transition: -moz-transform 0.5s;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

/* checkbox used to toggle menu state */
input[type="checkbox"]#togglebox {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}

label#navtoggler {
  /* Main label icon to toggle menu state */
  z-index: 9;
  display: block;
  position: relative;
  font-size: 8px;
  /* change font size to change label dimensions. Leave width/height below alone */
  width: 4em;
  height: 2.5em;
  top: 0;
  left: 0;
  text-indent: -1000px;
  border: 0.6em solid black;
  /* border color */
  border-width: 0.6em 0;
  cursor: pointer;
}

  /* inner strip inside label */
    /* stripes background color. Change to match border color of parent label above */
label#navtoggler::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 0.6em;
  top: 50%;
  margin-top: -0.3em;
  left: 0;
  background: black;
}

nav#offcanvas-menu {
  /* Full screen nav menu */
  position: relative;
  width: 300px;
  top: 0;
  left: 0;
  z-index: 100;
  visibility: hidden; /* this is for browsers that don't support CSS3 translate3d */
  -moz-transform: translate3d(-300px, 0, 0);
  -webkit-transform: translate3d(-300px, 0, 0);
  transform: translate3d(-300px, 0, 0);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #C1F2BC;   /* sidebar color */
  display: block;
  position: fixed;
  text-align: left;
  overflow: auto;
}

nav#offcanvas-menu label#closex{ /* Large x close button inside nav -> Not used*/
  width: 25px;
  height: 25px;
  overflow: hidden;
  display: block;
  position: fixed;
  cursor: pointer;
  text-indent: -1000px;
  z-index: 10;
  top: 0;
  right: 0;
}

nav#offcanvas-menu label#closex::before, nav label#closex::after{ /* render large cross inside close button */
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  background: black;
  top: 50%;
  margin-top: -3px;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

nav#offcanvas-menu label#closex::after{ /* render large cross inside close button */
  -ms-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

nav#offcanvas-menu a{
  text-decoration: none;
  color: black;
}

nav#offcanvas-menu ul{
  list-style: none;
  margin-top: 200px;
  opacity: 0;
  padding: 0;
  position: relative;
  font: bold 1.5em 'Bitter', sans-serif;
}

div.overlay {
  /* overlay that covers entire page when menu is open */
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  background: black;
  z-index: 99;
  visibility: hidden;
  transition: opacity 0.5s; /* transition settings */
}

div.overlay label {
  /* label of overlay that closes menu when clicked on */
  width: 100%;
  height: 100%;
  position: absolute;
}

input[type="checkbox"]#togglebox:checked ~ nav#offcanvas-menu {
  /* nav state when corresponding checkbox is checked */
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  visibility: visible; /* this is for browsers that don't support CSS3 translate3d in showing the menu */
  -moz-transition-delay: 0s; /* No delay for applying "visibility:visible" property when menu is going from "closed" to "open" */
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

input[type="checkbox"]#togglebox:checked ~ nav#offcanvas-menu ul{ /* nav state when corresponding checkbox is checked */
  margin-top: 0px;
  opacity: 1;
}


input[type="checkbox"]#togglebox:checked ~ div.overlay{ /* overlay state when corresponding checkbox is checked */
  opacity: 0.6;
  visibility: visible;
}

/* ********************************************************** */

  ul:not(.browser-default) {
      padding-left: 0;
      list-style-type: none;
  }

  .side-nav {
      position: fixed;
      width: 300px;
      left: 0;
      top: 0;
      margin: 0;
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
      height: 100%;
      height: calc(100% + 60px);
      height: -moz-calc(100%);
      padding-bottom: 60px;
      background-color: #fff;
      z-index: 999;
      overflow-y: auto;
      will-change: transform;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transform: translateX(-105%);
      transform: translateX(-105%);
  }

  .ul {
      display: block;
      list-style-type: disc;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      padding-inline-start: 40px;
  }
  .side-nav .userView {
    padding: 16px 16px 0;
  }

  .side-nav .userView {
      position: relative;
      padding: 32px 32px 0;
      margin-bottom: 8px;
  }
  .side-nav .userView .background {
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
  }

  .side-nav li {
      float: none;
      line-height: 48px;
  }

  .li {
      text-align: -webkit-match-parent;
  }


  .ul {
      list-style-type: disc;
  }

  .waves-effects {
      position: relative;
      cursor: pointer;
      display: inline-block;
      overflow: hidden;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      vertical-align: middle;
      z-index: 1;
      transition: .3s ease-out;
      transition-property: all;
      transition-duration: 0.3s;
      transition-timing-function: ease-out;
      transition-delay: 0s;
  }
  .fa-laptop:before {
      content: "\F109";
  }

  .side-nav li > a > i, .side-nav li > a > [class^="mdi-"], .side-nav li > a li > a > [class*="mdi-"], .side-nav li > a > i.material-icons {
      float: left;
      height: 48px;
      line-height: 48px;
      margin: 0 32px 0 0;
      width: 24px;
      color: rgba(0, 0, 0, 0.54);
  }
  .side-nav li > a:hover {
      background-color: rgba(0, 0, 0, 0.05);
  }
  .material-icons {
      text-rendering: optimizeLegibility;
      -webkit-font-feature-settings: 'liga';
      font-feature-settings: 'liga';
  }
  .material-icons {
      font-family: 'Material Icons';
      font-weight: normal;
      font-style: normal;
      font-size: 24px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-feature-settings: 'liga';
      -webkit-font-smoothing: antialiased;
  }

  .i {
      line-height: inherit;
  }


  .i {
      font-style: italic;
  }

.side-nav .userView .circle {
    height: 74px;
    width: 74px;
}
.side-nav .userView .circle, .side-nav .userView .name, .side-nav .userView .email {
    display: block;
}

.circle {
    border-radius: 50%;
}

.img {
    border: 0;
}
.side-nav li > a {
    color: rgba(0, 0, 0, 0.87);
    font-family: "Roboto", sans-serif;
    display: block;
    font-size: 14px;
    font-weight: 500;
    height: 48px;
    line-height: 48px;
    padding: 0 32px;
    padding-top: 0px;
    padding-right: 32px;
    padding-bottom: 0px;
    padding-left: 32px;
}

.side-nav {
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 20%);
}

/*======================ID SELECTOR================================================*/
/*=--- Note : # is use to define ID : we can use only change the sinle element TD, , and we cant have more than one ID ---=*/