:root{
 --cr: 'Crete Round', serif;
 --ms: 'Montserrat', sans-serif;  
 --po: 'Potta One', cursive;
}
.cr {font-family: var(--cr); }
.ms {font-family: var(--ms) }
.po {font-family: var(--po) }
/* Header */
header {box-shadow: 0px 3px 7px #dedcdc; background: #fff; z-index: 99; position: sticky; top: 0;}
.header-socialicon {margin:0; padding:0; display: flex; flex-wrap: wrap;}
.header-socialicon li { list-style: none; }
.header-socialicon li a { font-size: 12px; padding: 6px 10px; color:#000; }
.bg-dark { background: #000 !important; }
.navigation li a {font-family: var(--ms); color:#333333; font-size:14px; font-weight: 300; padding:0 20px; text-decoration: none; }
.mobbtn { text-align: right; margin-top:5px;  }
.mobbtn > span { width: 25px; height: 2px; background:#000; display: table; margin:5px auto 0px; transition: all .3s ease-in-out; }
.mobbtn.is-active span:nth-child(2){opacity:0}
.mobbtn.is-active span:nth-child(1){-webkit-transform:translateY(0) rotate(45deg);-ms-transform:translateY(0) rotate(45deg);-o-transform:translateY(0) rotate(45deg);transform:translateY(0) rotate(45deg)}
.mobbtn.is-active span:nth-child(3){-webkit-transform:translateY(-14px) rotate(-45deg);-ms-transform:translateY(-14px) rotate(-45deg);-o-transform:translateY(-14px) rotate(-45deg);transform:translateY(-14px) rotate(-45deg)}
.hdr-cnt-btn {font-size: 12px; color:#dcdcdc; border-radius: 4px; background: #000; padding: 6px 15px; text-decoration: none;}
.hdr-cnt-btn:hover { background: #333; color:#fff; text-decoration: none; }

@media only screen and (max-width: 767px) {
	.hdr-cnt-btn {font-size: 12px; padding: 4px 10px;}	
	.navigation { width: 100%; margin-top:10px; display: none;  background: #000; padding:10px 20px; }
	.navigation > li { border-bottom: 1px solid #dcdcdc; }
	.navigation > li:last-child { border-bottom: none; }
	.navigation > li > a {padding: 10px 20px 10px 0; display: block; color:#fff;}
}

/* Intro */

.intro-mybg {position: absolute;top:0; right:0; z-index: -1;}
.intro-leftbg { position: absolute; top:220px; left:0; z-index: -1; }
.name-watermark { font-size:90px; line-height: 90px; color:#f2f2f2; padding-top:40px; }
.intro-hding { color:#000; font-size: 42px; text-transform: capitalize; margin-top:-45px; }
.intro-subhding {color:#fdc442; font-size: 38px;}
.pl-100 { padding-left: 100px; }
.yellow-btn { border-radius: 4px; background: #fdc33e; color:#000; padding:8px 15px; font-size: 12px; text-decoration: none; }
.black-btn {border-radius: 4px; background: #000; color:#fff; padding:8px 15px;  font-size: 12px; text-decoration: none;}
a.yellow-btn:hover {text-decoration: none; color:#000;}
a.black-btn:hover {text-decoration: none; color:#fff;}

@media only screen and (max-width: 370px) {
	.intro-leftbg {width: 25% !important;}
	.name-watermark  {padding-top: 80px !important;}
}
@media only screen and (max-width: 439px) {
	.pl-100 { padding-left: 80px; }
	.name-watermark  {padding-top: 105px;}
	.intro-leftbg {top:250px; width: 20%;}
}
@media only screen and (min-width: 440px) and (max-width: 446px) {
	.name-watermark  {padding-top: 110px;}
	.intro-leftbg {top:250px; width: 22%;}
}	
@media only screen and (min-width: 447px) and (max-width: 490px) {
	.name-watermark  {padding-top: 120px; font-size: 62px !important; line-height: 62px !important;}
	.intro-leftbg {top:290px; width: 22%;}
}	
@media only screen and (min-width: 491px) and (max-width: 512px) {
	.name-watermark  {padding-top: 120px; font-size: 65px !important; line-height: 65px !important;}
	.intro-leftbg {top:290px; width: 22%;}
}
@media only screen and (min-width: 513px) and (max-width: 549px) {
	.name-watermark  {padding-top: 140px; font-size: 70px !important; line-height: 70px !important;}
	.intro-leftbg {top:320px; width: 20%;}
}
@media only screen and (min-width: 550px) and (max-width: 575px) {
	.name-watermark  {padding-top: 150px; font-size: 75px !important; line-height: 75px !important;}
	.intro-leftbg {top:340px; width: 18%;}
}	
@media only screen and (max-width: 480px) {
	.intro-hding  {  margin-top:-20px; }
}
@media only screen and (min-width: 481px) and (max-width: 575px) {
	.intro-hding  {  margin-top:-30px; }
}
@media only screen and (min-width: 576px) and (max-width: 640px) {
	.intro-mybg {width: 45% !important;}
	.name-watermark  {padding-top: 30px; padding-left: 0px !important; font-size: 52px !important; line-height: 52px !important;}
	.intro-hding  {  margin-top:-30px; }
	.intro-leftbg {top:540px; width: 18%; display: none;}
	.pl-100 { padding-left: 5px; }
}

@media only screen and (min-width: 641px) and (max-width: 720px) {
	.intro-leftbg {top:480px !important; width: 18%;}
}
@media only screen and (min-width: 641px) and (max-width: 767px) {
	.intro-mybg {width: 45% !important;}
	.name-watermark  {padding-top: 30px; padding-left: 0px !important; font-size: 58px !important; line-height: 58px !important;}
	.intro-hding  {  margin-top:-30px; }
	.intro-leftbg {top:440px; width: 18%;}
	.pl-100 { padding-left: 5px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.intro-mybg {width: 45% !important;}
	.name-watermark  {padding-top: 30px; padding-left: 0px !important; font-size: 62px !important; line-height: 62px !important;}
	.intro-hding  {  margin-top:-30px; }
	.intro-leftbg {top:440px; width: 18%;}
	.pl-100 { padding-left: 5px; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.intro-mybg {width: 45% !important;}
	.name-watermark  {padding-top: 110px; padding-left: 0px !important; font-size: 62px !important; line-height: 62px !important;}
	.intro-hding  {  margin-top:-30px; }
	.intro-leftbg {top:440px; width: 18%;}
	.pl-100 { padding-left: 5px; }
}
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
	.intro-mybg {width: 50% !important;}
	.intro-leftbg {top: 400px; width: 18%;}
}
@media only screen and (max-width: 991px) {
	.intro-mybg {width: 55%;}
	.name-watermark {font-size: 56px; line-height: 50px; padding-left: 10px;}
	.intro-hding  { font-size: 28px; }
	.intro-subhding {font-size: 22px;}
}	

/* About us */
.about-hdmt { margin-top: 120px; }
.about-cntrimg { margin:50px auto 0; padding-left: 110px; display: block; }
.about-sociallist { margin:20px 0 0; padding: 0px; display: flex; flex-wrap: wrap; }
.about-sociallist li { list-style: none; margin-right: 25px;  }
.about-sociallist li > a {font-family: var(--ms); font-size: 14px; font-weight: 300; color: #000; text-decoration: none; display: flex; align-items: center;}
.about-sociallist li > a > i { font-size: 35px; padding-right: 15px; }
.about-sociallist li.facebook > a > i { color:#4267b2; }
.about-sociallist li.linkedin > a > i { color:#0077b7; }
.abotu-row-mtm {margin-top:-80px;}
.about-ritebg { position: absolute; right:0; top:300px; }

@media only screen and (max-width: 767px) {
	.about-hdmt { margin-top:35px; }
}	
@media only screen and (min-width: 768px) and (max-width: 840px) {
	.about-ritebg {width: 70px;}
}	

/* My skills */
.skill-bg { background: url('../images/skill-left-design.png') no-repeat bottom left; }
.skill-bg2 { background: url('../images/skill-left-design2.png') no-repeat bottom left; }
.skills-row { display: flex; flex-wrap: wrap;  margin-bottom: 60px; margin-top: 40px;}
.skills-row-lp {padding-left: 27px;}
.skills-column { display: flex; flex-direction: column; justify-content: center;  }
.skills-area { width: 150px; height: 150px; padding: 16px; background-color: #fff;  box-shadow: 0 2px 4px 0 rgba(5,47,95,.04), 0 12px 16px 0 rgba(52,105,203,.12);  border-radius: 10px;    margin: 0 12px 24px; display: flex;  justify-content: center;  align-items: center; }
.skills-area img { max-width: 100%; height: auto;}
.skills-area .circle {width: 55px; height: 55px; background: #000; border-radius: 50%; display: flex; justify-content: center; align-items: center;}
.skills-area .circle > svg { width: 30px; fill:#fff; }
.skills-area .skill-title {font-family: var(--cr); font-size: 16px; font-weight: 400; color:#000; text-align: center; display: block; padding-top: 10px; margin:0;}
.skill-uiux { display: flex; background: #fff; box-shadow: 0 2px 4px 0 rgb(5 47 95 / 4%), 0 12px 16px 0 rgb(52 105 203 / 12%); padding: 20px 20px; color:#333; margin-top:30px; }
.skill-uiux > .icon {width: 32px; height: 32px; margin-right: 15px; font-size: 12px; border-radius: 50%; color:#fff; background: #000; display: inline-flex; justify-content: center; align-items: center;}
.skill-uiux > .icon.yellowbg { background: #000; }
.skill-uiux > .uix-txt {font-size:16px; font-weight: 500; font-family: var(--ms); margin: 0;}
.skill-uiux > .uix-txt > span {font-size:12px; font-weight: 400; color:#999999; display: block;}
.skill-uiux > .iconbg { background: #fbb03b; }


@media only screen and (max-width: 575px) {
	.skills-row-lp {padding-left: 0px;}
}	
@media only screen and (max-width: 767px) {
	/*.main-title { position: inherit; top:0; transform: rotate(0deg); padding-left: 45px; }*/
	.main-title {margin-left: -15px;}
	.wrap-hding, .wrap-prgh, .sub-hding {padding-left: 25px}
	.about-sociallist {margin-left: 25px;}
	.main-title:before {left:45px;}
	.skills-area {width: 100px; height: 100px; margin: 0 5px 15px;}
	.skills-area .circle {width: 45px; height: 45px;}
	.skills-area .circle > svg {width: 22px;}
	
}

/* Wrapper */
.wrap-hding { font-family: var(--cr); font-size: 24px; line-height: 34px; color: #000; }
.sub-hding { font-family: var(--cr); font-size: 18px; color:#000;}
.wrap-prgh {font-family: var(--ms); font-size: 14px; font-weight: 300; color: #333333; line-height: 1.7; }
.wrap-prgh > span { font-weight: 600; display: block; }
.posrel { position: relative; }
.main-title { position: absolute; left:0; top:30px; transform: rotate(-90deg); font-size: 12px; font-weight: 400; color:#999999; margin-bottom: 0; }
.main-title:before { content: ''; width: 35px; height: 1px; background: #999; position: absolute; left:0; top:9px; margin-left: -45px;  }

/* Portfolio */
.portfolio-bg { background: url('../images/project-right-design.png') no-repeat; background-position: top right; padding-bottom: 100px; }
.portfolio-bg2 {background: url('../images/project-right-design2.png') no-repeat !important;}
.view-project { font-family: var(--ms); font-size: 13px; color: #d8330a; font-weight: 400; text-decoration: none; display: block; padding-bottom: 25px;}
.view-project:hover {text-decoration: none; color: #fbb03b;}
.arrow-icon {width: 40px; height: 40px; fill: #d8330a;}
.view-project:hover .arrow-icon {fill:#fbb03b;} 

.projects { width: 100%; height: 300px;  background: #fff;  margin-bottom: 40px; box-shadow: 0 2px 4px 0 rgb(5 47 95 / 4%), 0 12px 16px 0 rgb(52 105 203 / 12%); position: relative; }
.projects:before {content: ''; position: absolute; top: 4%; left: 0; right: 0;  width: 92%; height: 300px; border: 1px solid #ddd; background: #fff; margin: auto; z-index: -1;}
.projects:after {content: ''; position: absolute; top: 8%; left: 0; right: 0;  width: 84%; height: 300px; border: 1px solid #ddd; background: #f5f5f5; margin: auto; z-index: -2; box-shadow: 0 2px 4px 0 rgb(5 47 95 / 4%), 0 12px 16px 0 rgb(52 105 203 / 12%);}
.project-imgarea {overflow: hidden; height: 300px;} 
.project-img { width: 100%; height: 100%;}
.project-img img {transition: 7s all ease-in-out;}
.project-img:hover img {margin-top: 300px; transition: 7s all ease-in-out; transform: translate(0, -100%); }
.projects-center .project-img:hover img {margin-top: 340px !important; transition: 7s all ease-in-out; transform: translate(0, -100%); }
.projects-center {height: 340px; margin-top: -40px}
.projects-center:before, .projects-center:after { height: 340px; }
.projects-center > .project-imgarea {height: 340px;}

@media only screen and (max-width: 767px){
	.portfolio-bg {background-position: bottom right !important; }
	.projects-center {margin-top: 0;}
}
/* Footer */
footer {background: #1d1e20 url("../images/footer-bg.png"); padding: 60px 0 40px;}
.footer-hding {font-size: 48px; color: #fff; text-transform: uppercase; text-align: center; display: block; margin: 0; }
.footer-socialicon {margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center;}
.footer-socialicon li {list-style: none; margin-right: 10px;}
.footer-socialicon li a {width: 50px; height: 50px; font-size: 22px; color: #fff; text-decoration: none; text-align: center; border: 1px solid #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center;}
.footer-link {display: block; text-align: center; color: #fff; padding-top: 30px; font-weight: 14px; font-weight: 300;}
.footer-link > a {color: #fff; text-decoration: none;}

@media only screen and (max-width: 575px) {
	.footer-hding {font-size: 36px;}
	.footer-mobnum {display: block;}
}

/* On OFF toggle */
.switch {position: relative; display: inline-block; width: 40px; height: 20px; }
.switch-mt {top:-10px; margin-left:15px;}
.switch input {   opacity: 0; width: 0; height: 0; }
.slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; border-radius: 34px; }
.slider:before {position: absolute; content: ""; background: url('../images/sunny.png'); background-size: contain; height: 16px; width: 16px; border-radius: 50%; left: 3px; bottom: 2px; background-color: white; -webkit-transition: .4s; transition: .4s; }
input:checked + .slider {background-color: #00a65a; }
input:focus + .slider {box-shadow: 0 0 1px #2196F3; }
input:checked + .slider:before {background: #fff url('../images/night.png'); background-size: contain; padding: 3px; -webkit-transform: translateX(18px); -ms-transform: translateX(18px); transform: translateX(18sspx); }
/*.slider.round {border-radius: 34px; }
.slider.round:before {border-radius: 50%; }*/


/* Theme Dark */
.theme-dark body {background: #000;}
.theme-dark  header {background: #000 !important; box-shadow: 0px 3px 7px #3f3e3e !important;}
.theme-dark  .mobbtn > span {background:#fff !important;}
.theme-dark .hdr-cnt-btn {color:#000 !important; background: #fff !important;}
.theme-dark  .black-btn {background: #fff !important; color:#000 !important;}
.theme-dark .name-watermark {opacity: 0.2;}
.theme-dark .intro-hding, .theme-dark  .wrap-prgh, .theme-dark  .wrap-hding, .theme-dark  .sub-hding {color: #fff !important;}
.theme-dark .navigation li a, .theme-dark .header-socialicon li a {color: #fff !important;}
.theme-dark .about-sociallist li > a { color: #fff !important;}
.theme-dark .about-sociallist li.facebook > a > i { color:#fff !important; }
.theme-dark .about-sociallist li.linkedin > a > i { color:#fff !important; }
.theme-dark .skill-uiux, .theme-dark .skills-area {box-shadow:0 2px 4px 0 rgb(241 241 241 / 50%), 0 12px 16px 0 rgb(255 255 255 / 40%) !important;}