@import url('https://fonts.googleapis.com/css?family=Merriweather:300|Source+Sans+Pro:200,400,600');

:root {
  /* 
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;

    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

    --font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
*/
  /* Override Variables */
  --font-family-sans-serif: 'Source Sans Pro', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  --gray-dark: #404040;
  --purple: #533777;

  /* Page Variables */
  --light-blue: #e1f7f5;
  --light-purple: #c290d2;
  --light-white: #fff;
  --light-gray:#e9e9e9;
  --font-family-serif: Merriweather, serif;
  --color-text: var(--gray-dark);
  --font-family-text: var(--font-family-serif);
}

.family-sans {
  font-family: var(--font-family-sans-serif);
}

.icon {
  display: inline-block;
  font-size: inherit;
  overflow: visible;
  vertical-align: -0.125;
  text-rendering: auto;
  fill: gray !important;
  width: 50px;
  height: 50px;
}

.animated {
  visibility: visible !important;
}

body {
  font-family: var(--font-family-text);
  color: var(--color-text);
  font-weight: 200;
}

.site-header {
  background: url(../images/header_background.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.site-header .animated {
  animation-delay: 2s;
  animation-duration: 1s;
}

.layout-text {
  font-size: 1.1em;
}

.site-nav.inbody {
  background: var(--secondary);
}

.text_color {
  color: black;
  font-weight: 300;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
}

.text_color:hover {
  color: #3bcfcb;

}

.header_button {
  background-color: #10c9c3;
  color: white;

}

.site-footer {
  background: #141414;
}

.middle_background6 {
  background: url(../images/middle_background6.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 20vh;
  width: auto;
}

.middle_para_fix {
  cursor: pointer;
  color: #8e8e8e;
}

.bg_middle {
  background: #f5f5f5;
  min-height: 100vh;
}

.page-section3 {
  background: url(../images/bg_bottom.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}


.page-section4 {
  background-color:white ;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.page-section4 {
  background-color:#f5f5f5 ;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}


.form_color {
  color: white;
}




@media screen and (max-width: 768px) {
  .site-header .navbar-collapse {
    background-color: rgba(0, 0, 0, 0.9);
    padding: 10px;
  }
}

.site-header .layout-hero {
  min-height: 100vh;
}

.site-header .page-section-title {
  font-size: 3em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 200;
  color: black;
}

.site-header .page-section-text {
  font-size: 1.1em;
  color: #787878;
}

/* .site-header .nav-link {
  position: relative;
  padding-bottom: 0;
  margin-bottom: 2px;
}

.site-header .nav-link:before {
  content: '';
  position: absolute;
  width: 100%;
  max-width: 100px;
  height: 2px;
  left: 0;
  bottom: 0;
  background-color: var(--yellow);
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-out;
}

.site-header .nav-link:hover:before {
  visibility: visible;
  left: 0;
  transform: scaleX(1);
} */

#page-multicolumn {
  background: var(--light-white);
}

.page-secondhalf {
  background: var(--light-gray);
  height: 103vh;
}

.page-section2 {
  background: url(../images/middle_background.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.layout-multicolumn .layout-image {
  transition: all 0.3s ease-out;
}

.layout-multicolumn .layout-image:hover {
  transform: scale(1.1) translateY(-3px);
}

.page-section-header .page-section-title {
  font-size: 4em;
  font-family: var(--font-family-sans-serif);
  font-weight: 200;
}

.page-section-header .page-section-text {
  font-size: 1.2em;
  font-weight: 200;
}

.layout-media .layout-image {
  max-width: 200px;
}

.layout-media .layout-title {
  color: var(--purple);
  font-family: var(--font-family-sans-serif);
  font-weight: 200;
  font-size: 1.6em;
}

.layout-photogrid .layout-image {
  background: var(--light-blue);
}

#page-carousel {
  background: var(--light-purple);
}

.layout-nested .layout-title {
  color: var(--purple);
  font-family: var(--font-family-sans-serif);
  font-size: 2.2em;
}

#page-floater {
  background: var(--light-blue);
}

.heading_fix {
  color: white;
  font-size: 0.9rem;
}

.paragraph_fix {
  color: white;
  font-size: 0.9rem;
}

.skills_bar {
  width: 500px;
  margin: 60px auto;
  color: black;
  list-style: none;
}

.skills li{
  margin: 20px 0;
}

.bar {
  background: #d8d8d8;
  display: block;
  height: 5px;
  border: 1px solid rgb(0,0,0,0.3);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 10px #ffeb3b;
}

.bar span {
  height: 3px;
  float: left;
  background: #10c9c3;
}

.html {
  width: 75%;
  animation: html 2s;
}

.css {
  width: 90%;
  animation: css 2s;
}

.jquary {
  width: 65%;
  animation: jquary 2s;
}


@keyframes html{
  0%{
    width: 0%;
  } 
  100%{
    width: 75%;
  }
}

@keyframes css{
  0%{
    width: 0%;
  } 
  100%{
    width: 90%;
  }
}

@keyframes jquary{
  0%{
    width: 0%;
  } 
  100%{
    width: 65%;
  }
}












@media screen and (min-width: 768px) {
  #page-floater {
    margin: 150px 0 150px 0;
  }

  .layout-floater .layout-container {
    position: relative;
  }

  .layout-floater .layout-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(15deg)
      scale(1.1);
  }
}

.layout-social .layout-icon {
  font-size: 2em;
}


@media only screen and (max-width: 1440px) {

  
}