body { margin: 0; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* -- NAV BAR START -- */
header { width: 100%; position: fixed; z-index: 99; }
.bg-light { background-color: transparent!important; }
.nav-link { color: #fff!important; font-size: 15px; font-family: 'Montserrat', sans-serif; font-weight: 600; margin: 0 10px; }
.navbar-light .navbar-toggler { border: none; }
.navbar-light .navbar-toggler-icon { color: #fff!important; }
.navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
/* -- NAV HOVER UNDER LINE FROM CENTER -- */
.hvr-underline-from-center { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; overflow: hidden; }
.hvr-underline-from-center:before { content: ""; position: absolute; z-index: -1; left: 51%; right: 51%; bottom: 0; background: #fff; height: 2px; -webkit-transition-property: left, right; transition-property: left, right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.hvr-underline-from-center:active:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:hover:before { left: 0; right: 0; }
/* --STICKY-- */
header { width: 100%; min-height: 60px; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 999; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; transition: height 0.3s; transition-duration: 1.0s; }
header #logo img { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; transition-duration: 1.0s; }
header.smaller { background-color: #fff; box-shadow: #000 10px 0 10px 0; }
header.smaller .navbar { padding: 2px 0!important; margin-right: 15px; color: #000!important; }
header.smaller img { max-height: 75px; }
.navbar-brand img { height: 90px!important; }
header.smaller a { color: #000!important; }
header.smaller .active > a { color: #28a9e0!important; }
header.smaller .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml; charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }
.nav-pills .nav-link.active { color: #28a9e0!important; font-weight: 500!important; background-color: transparent!important; }
/* -- BANNER START -- */
.banner { background-image: url(images/banner.jpg); width: 100%; height: 100vh; position: relative; background-size: cover; background-repeat: no-repeat; padding-top: 250px; }
.banner h6 { color: #fff; font-family: 'Montserrat', sans-serif; font-size: 35px; font-weight: 900; margin-bottom: 10px; }
.banner #typed3 { color: #fff; font-weight: bold; font-family: 'Montserrat', sans-serif; font-size: 45px; }
.banner p { color: #fff; font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 400; margin-top: 40px; padding: 0px 198px 0px 198px; }
.banner #typed3 span { color: #28a9e0; }
/*--TEXT EFFECT--*/

/*-- SCROLL-BUTTON --*/
.scroll-downs { position: absolute; right: 0; left: 0; margin: auto; z-index: 10; width: 34px; height: 55px; bottom: 30px; }
.scroller { display: block; height: 100px; width: 100px; color: #fff; font-size: 30px; animation-name: scroll; animation-duration: 2.2s; animation-timing-function: cubic-bezier(.15, .41, .69, .94); animation-iteration-count: infinite; }
@keyframes scroll { 0% {
opacity:0;
}
10% {
transform:translateY(0);
opacity:1;
}
100% {
transform:translateY(15px);
opacity:0;
}
}
.scroller:active, .scroller:focus, .scroller:hover { color: #fff; }
/* -- ABOUT ME -- */
.about { padding-bottom: 70px; }
.about h6 { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 25px; color: #000; padding: 110px 0 60px 0; }
.about img { border-radius: 5px; }
.about .col-lg-8 { padding: 0 40px 0 60px; }
.about .col-lg-8 p { font-size: 15px; font-family: 'roboto', sans-serif; text-align: left; line-height: 30px; color: #3c3c3c; font-weight: 300; }
/* -- SKILLS BAR -- */
.wrap p { font-family: 'Montserrat', sans-serif!important; font-size: 15px!important; font-size: 10px!important; font-weight: 700!important; color: #000!important; letter-spacing: 0.15em!important; margin-bottom: -1px; line-height: 40px!important; }
.bar_group { margin-bottom: -25px!important; }
/* -- BUTTON -- */
.btn-outline-primary { color: #fff!important; background-color: #000!important; border: 2px solid #000; padding: 10px 30px!important; border-radius: 0 !important; font-size: 15px; }
.btn-outline-primary i { margin-right: 7px; }
.btn-outline-secondary { border: 2px solid #000!important; background-color: #000; color: #fff; padding: 10px 35px; border-radius: 0 !important; font-size: 15px; }
a:hover { text-decoration: none!important; }
.btn-outline-primary:hover { color: #000 !important; background-color: #fff !important; border-color: #000 !important; }
.btn-outline-secondary:hover { color: #000 !important; background-color: #fff !important; border-color: #000 !important; }
.btn:focus, .btn:active { box-shadow: none!important; outline: 0; }
/* --MY SERVICE -- */
.service-bg { background-color: #f2f2f2; padding-bottom: 60px; }
.service-bg h6 { text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 25px; color: #000; padding: 110px 0 60px 0; }
.services .item { background-color: #fff; margin-bottom: 30px; height: 320px; padding: 30px 32px 0 32px; margin: 20px 10px 30px 10px; box-shadow: 0px 3px 15px rgba(0,0,0,0.2); transition: .50s; }
.services .item h6 { font-size: 20px; text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 600; padding-top: 10px; }
.services .item p { text-align: center; font-size: 15px; font-family: 'roboto', sans-serif; font-weight: 300; line-height: 2; margin-top: -25px; }
.item:hover { box-shadow: 0px 20px 40px rgba(0,0,0,0.4); transform: scale(1.0.90, 1.0.90); }
/* -- MY EXPERIENCE -- */
.experience { background-image: url(images/experiance.jpg); background-size: cover; width: 100%; height: 100vh; background-position: center; background-repeat: no-repeat; padding: 180px 50px 50px 0; }
.experience h2 { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #000; letter-spacing: 3px; font-size: 30px; }
.experience h3 { font-size: 30px; color: #000; font-family: 'roboto', sans-serif; font-weight: 700; letter-spacing: 1px; padding-top: 50px; }
.experience h4 { font-size: 23px; color: #000; font-family: 'roboto', sans-serif; font-weight: 700; letter-spacing: 1px; padding-top: 10px; }
.experience p { color: #000; font-size: 25px; font-family: 'roboto', sans-serif; font-weight: 400; padding-top: 10px; }
.experience span { display: block; }
/* -- MY PORTFOLIO -- */
.portfolio h6 { text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 25px; color: #000; padding: 110px 0 60px 0; }
.portfolio .row { padding: 15px 0; }
.box { margin-bottom: 60px; }

/* --POETFOLIO HOVER-- */
.hovereffect { width: 100%; height: 100%; float: left; overflow: hidden; position: relative; text-align: center; cursor: default; }
.hovereffect .overlay { width: 100%; height: 100%; position: absolute; overflow: hidden; top: 0; left: 0; opacity: 0; background-color: rgba(0,0,0,0.5); -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
.hovereffect img { width: 100%; display: block; position: relative; -webkit-transition: all .4s linear; transition: all .4s linear; }
.hovereffect h2 { color: #fff; text-align: center; position: relative; font-size: 20px; background: rgba(0,0,0,0.6); -webkit-transform: translatey(-100px); -ms-transform: translatey(-100px); transform: translatey(-100px); -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; padding: 20px; margin-top: 115px; font-weight: normal; font-family: 'Poppins', sans-serif; }
.hovereffect:hover img { -ms-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); }
.hovereffect:hover .overlay { opacity: 1; }
.hovereffect:hover a.info, .hovereffect:hover h2 { opacity: 1; -ms-transform: translatey(0); -webkit-transform: translatey(0); transform: translatey(0); }
.hovereffect:hover a.info { -webkit-transition-delay: .2s; transition-delay: .2s; }
/* -- GET IN TOUCH -- */
.contact { background-color: #f2f2f2; }
.contact h6 { text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 25px; color: #000; padding: 110px 0 60px 0; }
/* -- FORM -- */
.message { background-color: #fff; height: auto; padding: 0 40px; margin-bottom: 80px; font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: normal; font-size: 13px; box-shadow: 0 0 40px rgba(0, 0, 0, 0.08); }
[type=email], input[type=text] {
width:100%;
border-bottom:1px solid #000;
border-top:#fff;
border-left:#fff;
border-right:#fff;
margin:30px 0;
height:40px;
}
textarea { width: 100%; border-left: #fff; border-right: #fff; border-top: #fff; border-bottom: 1px solid #000; margin-top: 30px; max-height: 225px; }
input[type=submit] { border-radius: 30px; background-color: #fff; border: #000 1px solid; padding: 10px 30px; margin-top: 40px; font-size: 15px; margin-bottom: 40px; }
input[type=submit]:focus, input[type=submit]:hover { background-color: #000; color: #fff; }
/* -- DETAILS -- */
.contact-details { margin-top: 30px; }
.contact-details li { margin-top: 20px; list-style-type: none; }
.contact-details li:first-child { margin-top: 0; }
.contact-details li i { float: left; font-size: 14px; border-radius: 50px; background: #000; text-align: center; width: 43px; height: 43px; text-align: center; line-height: 44px; color: #fff; }
.contact-details li span { display: block; margin-left: 60px; margin-top: 20px; }
.contact-details li span { font-size: 15px; color: #333; padding-top: 11px; letter-spacing: 1px; }
/* -- FOOTER -- */
.footer { background-color: #000; padding: 20px 0 20px 0; }
.footer img { margin-left: auto; margin-right: auto; display: block; height: 60px; }
.footer h6 { font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: bold; font-size: 11px; line-height: 2; text-align: center; letter-spacing: 0.05em; padding-top: 10px; color: #fff; }
/* --SCROLL TO TOP BUTTON-- */
#myBtn {display:none; position:fixed; bottom:20px; right:20px; z-index:99; font-size:25px; border:none; outline:none; cursor:pointer; background-color:#28a9e0; color:#fff; border-radius:60px; width:50px; height:50px;}
#myBtn i {font-size: 20px; }
/* ------------------- RESPONSIVE ------------------- */
@media (max-width:299px) {
* { display: none; }
}
@media ( min-width:300px) and ( max-width: 767px ) {
/* -- NAVBAR START -- */
.navbar-brand img { max-height: 60px; }
.nav-link { margin-bottom: 10px; display: block; text-align: left; font-size: 12px; padding-left: 20px !important; padding-right: 20px !important; }
.navbar-nav { background-color: #000; padding: 20px 0; }
/* -- STICKY START -- */
header.smaller a { color: #fff!important; }
header.smaller { padding-left: 18px; box-shadow: none; }
/* -- BANNER START -- */
.banner h6 { font-size: 22px; margin-bottom: 10px; }
.banner #typed3 { font-size: 30px; }
.banner p { font-size: 13px; font-weight: 400; margin-top: 40px; padding: 0px 0px 0px 0px; }
.banner { background-position: center; }
.banner p span { display: inline-block; }
/* -- ABOUT ME -- */
.about h6 { font-size: 20px; padding: 100px 0 60px 0; }
.about .col-lg-8 { padding: 25px 15px 0 20px; }
.about .col-lg-8 p { font-size: 14px; line-height: 30px; }
.btn-outline-primary { padding: 10px 10px!important; font-size: 12px; }
.btn-outline-secondary { padding: 10px 10px; font-size: 12px; }
/* --MY SERVICE -- */
.service-bg h6 { font-size: 20px; padding: 100px 0 60px 0; }
.service-bg { padding-bottom: 20px; }
.services .item { margin-bottom: 30px; padding-top: 20px; padding-left: 15px; padding-right: 15px; margin: 20px 30px 30px 30px; height: 250px; }
.services .item h6 { font-size: 16px; padding-top: 15px; padding-bottom: 10px; }
.services .item p { font-size: 13px; line-height: 2; margin-top: 10px; }
/* -- MY EXPERIENCE -- */
.experience { padding: 220px 20px 0px 10px; }
.experience h2 { font-size: 22px; }
.experience h3 { font-size: 19px; padding-top: 20px; }
.experience h4 { font-size: 17px; padding-top: 20px; }
.experience span { display: block!important; }
.experience p { font-size: 16px; padding-top: 20px; }
/* -- MY PORTFOLIO -- */
.portfolio h6 { font-size: 20px; padding: 100px 0 60px 0; }
.work { padding-bottom: 25px; }
.box { margin-bottom: 60px; }
.portfolio .row { padding: 0; }

/* -- GET IN TOUCH -- */
.contact h6 { font-size: 20px; padding: 100px 0 60px 0; }
/* -- FORM -- */
.message { margin: 0px 12px 0 12px; }
[type=email], input[type=text] {
font-size: 12px;
}
textarea { font-size: 12px; }
input[type=submit] { font-size: 12px; }
/* -- DETAILS -- */
.contact-details { margin-top: 30px; }
.contact-details li { margin-top: 20px; list-style-type: none; }
.contact-details li:first-child { margin-top: 0; }
.contact-details li i { font-size: 12px; width: 35px; height: 35px; line-height: 34px; }
.contact-details li span { display: block; margin-left: 60px; margin-top: 20px; }
.contact-details li span { font-size: 13px; padding-top: 7px; letter-spacing: 1px; }
.adress { margin-left: -30px; margin-bottom: 50px; }
/* -- FOOTER -- */
.footer { padding: 10px 0 10px 0; }
.footer img { max-height: 40px; }
.footer h6 { font-size: 9px; line-height: 18px; padding-top: 10px; }
/* --SCROLL TO TOP BUTTON-- */
#myBtn {display:none; position:fixed; bottom:20px; right:20px; z-index:99; border:none; outline:none; cursor:pointer; background-color:#28a9e0; color:#fff; border-radius:60px; width:40px; height:40px; }
}
@media ( min-width:500px) and ( max-width: 767px ) {
.nav-link { font-size: 14px; }
.services .item { margin-bottom: 30px; padding-top: 32px; padding-left: 30px; padding-right: 30px; margin: 20px 30px 30px 30px; height: 250px; }
.services .item h6 { font-size: 18px; padding-top: 15px; padding-bottom: 10px; }
.services .item p { font-size: 15px; line-height: 2; }
}
@media ( min-width:768px) and ( max-width: 991px ) {
/* -- NAVBAR START -- */
.navbar-brand img { max-height: 75px; }
.nav-link { margin-bottom: 10px; display: block; text-align: left; padding-left: 20px !important; padding-right: 20px !important; }
.navbar-nav { background-color: #000; padding: 20px 0; }
/* -- STICKY START -- */
header.smaller a { color: #fff!important; }
header.smaller { padding-left: 18px; box-shadow: none; }
/* -- BANNER START -- */
.banner h6 { font-size: 30px; margin-bottom: 10px; }
.banner #typed3 { font-size: 40px; }
.banner p { font-size: 20px; font-weight: 400; margin-top: 40px; padding: 0px 0px 0px 0px; }
.banner p span { display: inline-block; }
/* -- ABOUT ME -- */
.about h6 { font-size: 23px; }
.about .col-lg-8 { padding: 25px 32px 0 20px; }
.btn-outline-primary { padding: 10px 20px!important; font-size: 14px; }
.btn-outline-secondary { padding: 10px 20px; font-size: 14px; }
/* -- MY EXPERIENCE -- */
.experience { padding: 220px 20px 0px 10px; }
.experience h2 { font-size: 25px; }
.experience h3 { font-size: 22px; padding-top: 20px; }
.experience h4 { font-size: 20px; padding-top: 20px; }
.experience p { font-size: 18px; padding-top: 20px; }
/* --MY SERVICE -- */
.service-bg h6 { font-size: 23px; }
/* -- MY PORTFOLIO -- */
.portfolio h6 { font-size: 23px; }
/* -- GET IN TOUCH -- */
.contact h6 { font-size: 23px; }
/* -- DETAILS -- */
.contact-details li i { font-size: 14px; width: 40px; height: 40px; line-height: 40px; }
.contact-details li span { font-size: 15px; padding-top: 7px; letter-spacing: 1px; }
}
@media ( min-width:992px) and ( max-width: 1024px ) {
.navbar-brand img { max-height: 78px; }
.nav-link { font-size: 13px; margin: 0 10px; }
/* -- BANNER START -- */
.banner h6 { font-size: 30px; }
.banner #typed3 { font-size: 40px; }
.banner p { font-size: 17px; }
/* -- ABOUT ME -- */
.about h6 { font-size: 24px; }
.btn-outline-primary { padding: 10px 20px; font-size: 15px; }
.btn-outline-secondary { padding: 10px 20px; font-size: 15px; }
/* --MY SERVICE -- */
.service-bg h6 { font-size: 24px; }
.services .item p { font-size: 14px; }
/* -- MY EXPERIENCE -- */
.experience { padding: 220px 20px 0px 30px; }
.experience h2 { font-size: 25px; }
.experience h3 { font-size: 25px; padding-top: 20px; }
.experience h4 { font-size: 21px; padding-top: 20px; }
.experience p { font-size: 20px; padding-top: 20px; }
/* -- MY PORTFOLIO -- */
.portfolio h6 { font-size: 24px; }
/* -- GET IN TOUCH -- */
.contact h6 { font-size: 24px; }
/* -- DETAILS -- */
.contact-details li i { font-size: 15px; width: 40px; height: 40px; line-height: 40px; }
.contact-details li span { font-size: 14px; padding-top: 7px; letter-spacing: 1px; }
.vanillatop i { line-height: -3; }
}