/*-----------------------------------------------------------
* Template Name    : Kamal - Personal Portfolio Template
* Version          : 1.0
* File Description : This File Includes all Style CSS
*------------------------------------------------------------*/

/*======================================================================
 Table of Content:
 
 01. Google Fonts
 02. Basic Styles
 03. Typography
 04. Buttons
 05. Pre Loader
 06. Header Section
 07. Navigation Menu
 08. Banner Section
 09. About Section
 10. Service Section
 11. Portfolio Section
 12. Blog Section
 13. Contact Section
 14. Inner Pages
    01. Not Found Page
    02. Coming Soon Page
 15. Styles Switcher CSS
 16. Responsive CSS
 ========================================================================*/

/*-----------------------------------------
* 01. Google Fonts
* -----------------------------------------*/    
/*-- Montserrat font --*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/*-- Roboto font --*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
/*-- Oswald--*/
@import url('https://fonts.googleapis.com/css2?family=Oswald&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/*-----------------------------------------
* 02. Basic Styles
* -----------------------------------------*/   
body { font-family:'Roboto', sans-serif; background-color:#2e3135; color:#b6b6b6; font-size:15px; font-weight:400; line-height:30px; max-width: 100vw;overflow-x: hidden;}
a { text-decoration:none; color:#b6b6b6; }
a:hover { color:#000000; text-decoration:none; }
a:focus { outline:0 none; }
a:active, a:hover { outline:0; }
a:hover img { opacity:0.88; }
a, a i.fa, a img, .button, .btn { -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; }
ol, ul { list-style:none; padding:0; margin:0; }
.gray-bg,.bg-light { background-color:#2a2e33 !important;/*background-color:#26282b !important;*/ }
::selection { color:#ffffff; }
.row-items { margin-top:-30px; }
.row-items .row-item { margin-top:30px; }

/*-----------------------------------------
* 03. Typography
* -----------------------------------------*/
h1,h2,h3,h4,h5,h6 { font-family:'Montserrat', sans-serif; color:#fafafa; margin:0 0 10px; text-transform:uppercase; overflow-wrap: break-word; word-wrap: break-word; }
p { margin:0 0 15px; }
p:last-child { margin-bottom:0; }
h5 {font-size: .7em;}   
#testimonials h5 {font-size: 1.2em;}  
.contact-form-block h5 {font-size: 1.3em;}    
/*-----------------------------------------
* 04. Buttons
* -----------------------------------------*/
.btn{ font-family:'Montserrat', sans-serif; position:relative; font-size:12px; font-weight:500; letter-spacing:0.5px; padding:12px 34px; text-transform:uppercase; border:none; overflow:hidden; border-radius:26px; box-shadow:none; }
.btn:focus,button:focus { box-shadow:none; outline:none !important; }
.btn:before { position:absolute; top:0; height:102%; left:-25%; width:0%; -webkit-transform:skew(-22deg); transform:skew(-22deg); -webkit-transition-duration:0.6s; transition-duration:0.6s; z-index:1; }
.btn:hover:before { width:180%; }
.btn span { position:relative; z-index:2; }

/* Button Small */
.btn-small{ font-size:12px; padding:6px 15px; } 

/* Button Primary */
.btn-primary,.btn-primary:focus, 
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled):active { background-color:#333333; color:#ffffff; }
.btn-primary.disabled,.btn-primary:disabled { color:#ffffff; background-color:#666666; }
.btn-primary:hover { color:#ffffff; background-color:#333333; }
.btn-primary:before { content:""; background-color:#000000; }

/* Button Secondary */
.btn-secondary,.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled):active { background-color:#2d959a; color:#ffffff; }
.btn-secondary:hover { background-color:#2d959a; color:#ffffff; }
.btn-secondary.disabled,.btn-secondary:disabled { background-color:#2d959a; color:#ffffff; }
/*.btn-secondary:before { content:""; background-color:#444444; }*/

/* Button Link */
.btn-link { color:#333333; font-weight:500; text-transform:uppercase; }
.btn-link:hover { color:#000000; text-decoration:none; }

/* Form Control */
.form-control { font-family:'Montserrat', sans-serif; background-color:#fff; color:#000; height:50px; font-size:1.2em;font-weight: 600; padding:10px 22px; box-shadow:none; outline:none; border:1px solid #424242; border-radius:30px; }
.form-control:focus { color:#000; background:#fff; box-shadow:none; outline:none; }
.form-control.is-invalid,.was-validated .form-control:invalid { background:none; box-shadow:none !important; }
.section-spacing { padding:40px 0; }
.content-block { margin-bottom:50px; }
.content-block:last-child { margin-bottom:0; }
.top1 {padding-top: 1px;}

/*-----------------------------------------
* 05. Pre Loader
* -----------------------------------------*/
.preloader { display:none; background-color:#2e3135; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100vh; margin:0 auto; text-align:center; z-index:99999; }
.preloader.active { display:block; }
.preloader-inner { position:absolute; top:50%; left:0; right:0; margin:0 auto; border:4px solid hsla(0,0%,0%,0.2); border-top-color:#333333; border-radius:50%; -webkit-border-radius:50%; width:50px; height:50px; animation:spin 1s linear infinite; }
@keyframes spin { to { -ms-transform:rotate(360deg); -webkit-transform:rotate(360deg); transform:rotate(360deg); } }

/*-----------------------------------------
* 06. Header Section
* -----------------------------------------*/
.site-header { font-family:'Montserrat', sans-serif; -webkit-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; }
.site-header .logo .text-logo { position:relative; color:#fafafa !important; text-transform:uppercase; font-size:26px; font-weight:600; line-height:normal; letter-spacing:1px; }
.site-header.sticky-header { background-color:#26282b; box-shadow:0 1px 2px rgba(255,255,255,0.1); }
.site-header.sticky-header .logo .text-logo { color:#fafafa !important; }
.site-header.sticky-header .navigation .navbar-nav .nav-item .nav-link { color:#fafafa; }
.site-header .logo {width: 250px}
/*-----------------------------------------
* 07. Navigation Menu
* -----------------------------------------*/
.navigation .navbar-nav .nav-item { position:relative; padding:0 0 0 10px; }
.navigation .navbar-nav .nav-item .nav-link { color:#fafafa; text-transform:uppercase; font-size:14px; font-weight:500; padding:20px 10px; letter-spacing:1px; position:relative; display:block; background:transparent; }
.navigation .navbar-nav .nav-item .nav-link i { margin-right:10px; position:relative; }

/*-----------------------------------------
* 08. Banner Section
* -----------------------------------------*/
.banner-section{ position:relative; background-color:#060606; min-height:100vh; padding:0; }
.banner-section .banner-inner { position:relative; z-index:999; }
.banner-section .banner-text h2 { color:#ffffff; font-size:18px; letter-spacing:0.9px; font-weight:400; text-transform:uppercase; margin:0 0 10px; }
.banner-section .banner-text h3 { font-family:'Oswald', sans-serif; color:#ffffff; font-size:2.5em; font-weight:400; letter-spacing:1px; margin:0 0 15px; }
.banner-section .banner-text p { color:#ffffff; max-width:510px; letter-spacing:0.2px; margin:0 0 15px; }
.banner-section .social-links a { color:#ffffff; font-size:20px; margin:0 20px 20px 0; }

/* Background Image */
.banner-section.header-bg-img{ background-image:url('../images/banners/home-banner1.png'); background-size:cover; background-repeat:no-repeat; background-position:center center; }
/* Background overlay opacity */
.banner-section.header-bg-img:after { content:""; background-color:rgba(0,0,0,0.8); position:absolute; top:0; bottom:0; left:0; right:0; }
.banner-section .banner-inner .center-picture { border-radius:50%; max-width:300px; /*border:10px solid rgba(255,255,255,0.1); */}

/* Cd Type Word Wrapper */
.cd-words-wrapper { display:inline-block; position:relative; text-align:left; }
.cd-words-wrapper b { display:inline-block; position:absolute; white-space:nowrap; left:0; top:0; }
.cd-words-wrapper b.is-visible { position:relative; }
.cd-headline.clip .cd-words-wrapper { overflow:hidden; vertical-align:top; border-right:2px solid #dddddd; padding-right:4px; }
.cd-headline.clip b { opacity:0; }
.cd-headline.clip b.is-visible { opacity:1; }
.down-block { position:absolute;bottom: 13vh;z-index: 1000;}
.down-block p {line-height: 1;}
/* Bottom Scroll Arrow */
.scroll-down-arrow { position:absolute; bottom:5vh; left:0; right:0; margin:0 auto; z-index:999; display:block; cursor:pointer; width:30px; height:60px; border:2px solid #ffffff; border-radius:50px; -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4); box-shadow:0 1px 2px rgba(0,0,0,0.4); -webkit-animation:bounce 2s infinite; animation:bounce 2s infinite; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; }
.scroll-down-arrow:before { content:""; position:absolute; top:10px; left:50%; width:8px; height:8px; margin-left:-3px; background-color:#fafafa; border-radius:50%; -webkit-animation:scroll_down 2s infinite; animation:scroll_down 2s infinite; }
@-webkit-keyframes scroll_down { 0% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity:0; } 40% { opacity:1; } 80% { -webkit-transform:translate(0,20px); transform:translate(0,20px);  opacity:0; } 100% { opacity:0; } }
@keyframes scroll_down { 0% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity:0; } 40% { opacity:1; } 80% { -webkit-transform:translate(0, 20px); transform:translate(0,20px); opacity:0; } 100% { opacity:0; } }
@-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform:translateY(0); } 40% { transform:translateY(-30px);} 60% { transform:translateY(-15px);} } 
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform:translateY(0); } 40% { transform:translateY(-30px);}  60% { transform:translateY(-15px);} } 

/* Section Title */
.section-title { position:relative; }
.section-title h1 { font-size:3em; font-family:'Oswald', sans-serif; font-weight:bold; text-transform:uppercase; margin:0 0 60px; text-align:center; }
.section-subtitle h3 { margin-bottom:48px; text-align:center; }

/* Separator */
.separator { position:absolute; bottom:-10px; left:0; right:0; background:#fafafa; width:150px; height:5px; margin:0 auto; border-radius:50px; overflow:hidden; }
.separator:after { content:""; display:block; width:10px; height:5px; position:relative; background-color:#222222; animation:separator 2s linear infinite; overflow:hidden; border-radius:2px; -webkit-transition:all .5s; transition:all .5s; }
@keyframes separator { 0% { top:0; left:0; } 25% { left:25px; width:25%; } 50% { left:50px; width:45%; } 75% { left:75px; width:65%; } 100% { left:150px; width:80%; } }

/*-----------------------------------------
* 09. About Section
* -----------------------------------------*/
.about-details ul li span:first-child,.about-details ul li span:first-child { opacity:0.7; }
/* Eeducation & Experience */
.about .card-icon { font-size:40px; margin-bottom:0px; }
.about .card-title {margin-bottom: 0}
.about .element {color: #fff}
.education,.experince { border-left:2px solid #424242; }
.education-box,.experince-box { position:relative; box-shadow:2px 0px 0px 1px #424242; border-radius:4px; padding:0; border-left:3px solid; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; }
.education-box:before,.experince-box:before { content:""; left:-37px; display:block; position:absolute; background:#2e3135; border:2px solid; width:17px; height:17px; border-radius:50%; }
.education-box:after,.experince-box:after { content:""; background-color:#666666; display:block; position:absolute; width:33px; height:2px; top:23px; left:-34px; z-index:-1; }
.education-box:hover:before,.experince-box:hover:before { background-color:#666666; }
.education-box:hover,.experince-box:hover { box-shadow:0 0 10px rgba(255,255,255,0.2); }
.education-box span,.experince-box span,.meta-action { font-size: 13px; font-weight:400; }
.education .education-box .card,.experince .experince-box .card {background-color: transparent;}
.education .education-box .card a .img-fluid,.experince .experince-box .card a .img-fluid{width: 100%}
/* Skills */
.skills .progressbar { width:100%; position:relative; background-color:#26282b !important; box-shadow:inset 0 1px 1px rgba(0,0,0,.1); }
.skills .proggress { height:8px; width:10px; }
.skills .percentCount { float:right; clear:both; font-weight:600; margin-top:-45px; }
.skills .skill-name { margin:0 0 12px 0; line-height:normal; opacity:1; font-weight:600; font-size:14px; }

/* Counter */
.counter-box { border:1px solid #424242; padding:28px; border-radius:50%; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; text-align: center}
/*.counter-box:hover { -webkit-transform:translateY(-5px); transform:translateY(-5px); box-shadow:0 0 10px rgba(255,255,255,0.4); }*/
.counter-box h3 { border-bottom:2px solid rgba(102,102,102,0.4); font-size:6.0em; display:block; }
.counter-number .row-item {padding: 1em}
#contact .counter-number .element {background: transparent;padding: 9%;}
.counter-number .element h5 {font-size: 1.1rem;}
.element h4 {margin-bottom: 70px}
.element .card-title .btn {padding: 0.5em;}
.standing h5 {font-size: 1.2em;} 
.standing .element img {
         width: 70%;
         margin: 5px auto;
      } 
/*-----------------------------------------
* 10. Service Section
* -----------------------------------------*/
.service .card-body { padding:30px; border-radius:5px; -webkit-transition:cubic-bezier(0.57, 0.11, 0.27, 0.9) .3s; transition:cubic-bezier(0.57, 0.11, 0.27, 0.9) .3s; border:1px solid #424242; }
.service .card-body:hover { background-color:#2e3135; -webkit-transform:translateY(-8px); transform:translateY(-8px); box-shadow:0 0 10px rgba(33,33,33,0.2); }
.service .card-icon { font-size:50px; margin-bottom:15px; }
.service .card-title h4 { font-size:22px; font-weight:600; }


/* Customers Testimonial --*/
.customers-testimonial .item { text-align:center; margin-bottom:5px; padding:20px 20px; opacity:0; visibility:hidden; display:block; border:3px solid #424242; box-shadow:0 0 5px rgba(0,0,0,0.2); -webkit-transform:scale3d(0.8,0.8,1); transform:scale3d(0.8,0.8,1); -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out; }
.customers-testimonial .item.active { opacity:1; visibility:visible; -webkit-transform:scale3d(1.0,1.0,1); transform:scale3d(1.0,1.0,1); }
.customers-testimonial p { font-size:15px; line-height:1.5; margin:0 0 17px 0; font-style:italic; }
.customers-testimonial .name { margin:17px auto 0;display:table; width:auto; padding:6px 30px; border-radius:12px; text-align:center; box-shadow:0 0 3px rgba(0,0,0,0.2); }
.customers-testimonial .item:hover .name { background-color:#ffffff; color:#2e3135; }
.customers-testimonial .item img { max-width:100%; margin:0;  }

/* Carousel Slider */
.carousel .carousel-control-next,.carousel .carousel-control-next:focus,
.carousel .carousel-control-prev,.carousel .carousel-control-prev:focus { position:absolute; width:40px; height:40px; line-height:40px; font-size:26px; text-align:center; color:#333333; background-color:#ffffff; top:calc(50% - 50px); border-radius:50%; box-shadow:0 2px 5px 0 rgba(0,0,0,.15); opacity:0; -webkit-transition:all .3s ease; transition:all .3s ease; }
.carousel .carousel-control-prev { left:-10px; }
.carousel .carousel-control-next { right:-10px; }
/* Carousel Arrow */
.carousel .carousel-control-next:hover,.carousel .carousel-control-prev:hover{ opacity:0; color:#ffffff; background-color:#333333; }
.carousel:hover .carousel-control-next,.carousel:hover .carousel-control-prev { opacity:1; -webkit-transition:all .3s ease; transition:all .3s ease; }
/* Carousel Dots */
.carousel .carousel-indicators { position: relative; margin:30px auto 0 }
.carousel .carousel-indicators li.active,.carousel .carousel-indicators li:hover { -webkit-transform:translate3d(0px,-50%,0px) scale(0.7); transform:translate3d(0px,-50%,0px) scale(0.7); }
.carousel .carousel-indicators li { display:inline-block; height:25px; width:25px; margin:0 2px 0; border:none; -webkit-transform:translate3d(0px,-50%,0px) scale(0.5); transform:translate3d(0px,-50%,0px) scale(0.5); -webkit-transition:all 250ms ease-out 0s; transition:all 250ms ease-out 0s; border-radius:50%; }

/*-----------------------------------------
* 11. Portfolio Section
* -----------------------------------------*/
.portfolio #portfolio-flters li { cursor:pointer; text-transform:uppercase; background-color:#26282b; color:#ffffff; padding:10px 28px; margin:0 5px 10px 5px; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out; }
.portfolio #portfolio-flters li.filter-active,.portfolio #portfolio-flters li:hover { background-color:#000000; }

/* Portfolio Card Info */
.portfolio .portfolio-wrap { position:relative; overflow:hidden; border-radius:5px; }
.portfolio .portfolio-wrap:before { content:""; background:rgba(0,0,0,0.6); position:absolute; left:30px; right:30px; top:30px; bottom:30px; -webkit-transition:all ease-in-out .3s; transition:all ease-in-out .3s; z-index:9; opacity:0; }
.portfolio .portfolio-wrap .portfolio-info { opacity:0; position:absolute; top:0; left:0; right:0; bottom:0; text-align:center; z-index:99; -webkit-transition:all ease-in-out .3s; transition:all ease-in-out .3s; }
.portfolio .portfolio-wrap .portfolio-info:before { content:""; display:block; position:absolute; top:35px; left:35px; border-top:1px dashed #ffffff; border-left:1px dashed #ffffff; -webkit-transition:all .5s ease 0s; transition:all .5s ease 0s; z-index:9994; }
.portfolio .portfolio-wrap .portfolio-info:after { content:""; display:block; position:absolute; bottom:35px; right:35px; border-bottom:1px dashed #ffffff; border-right:1px dashed #ffffff; -webkit-transition:all .5s ease 0s; transition:all .5s ease 0s; z-index:9994; }
.portfolio .portfolio-wrap .portfolio-info h4 { font-size:14px; color:#ffffff; font-weight:600; }
.portfolio .portfolio-wrap .portfolio-info p { color:#ffffff; margin:0 0 15px; }
.portfolio .portfolio-wrap .portfolio-info .portfolio-inner-info { position:relative; z-index:9999; }
.portfolio .portfolio-wrap .portfolio-links a { background-color:#26282b; margin:0 5px; border-radius:50%; width:35px; height:35px; line-height:35px; font-size:15px; }
.portfolio .portfolio-wrap .portfolio-links a:hover { background-color:#000000; color:#ffffff !important; }
.portfolio .portfolio-wrap:hover:before { top:0; left:0; right:0; bottom:0; opacity:1; }
.portfolio .portfolio-wrap:hover .portfolio-info { opacity:1; }
.portfolio .portfolio-wrap:hover .portfolio-info:before { top:15px; left:15px; right:15px; bottom:15px; }
.portfolio .portfolio-wrap:hover .portfolio-info:after { bottom:15px; right:15px; top:15px; left:15px; }

/* Profolio Detail Popup */
.portfolio-details,.blog-details { position:relative; width:95%; background:#26282b; margin:40px auto; padding:30px; border-radius:5px; z-index:999; }
.popup-detail-title { font-size:28px; font-weight:600; text-transform:uppercase; text-align:center; border-bottom:1px solid #424242; margin-bottom:25px; padding-bottom:25px; line-height:1; }
.portfolio-details .mfp-close,.blog-details .mfp-close { color:#fafafa; }   
.mfp-close-btn-in .mfp-close { font-size:40px; }
.mfp-arrow { position:fixed; }
.mfp-fade.mfp-bg { height:100% !important; position:fixed !important; }
.mfp-fade.mfp-wrap { height:100% !important; position:fixed !important; overflow:hidden auto; top:0 !important; }
.portfolio-details h4 {text-transform: none;}

/*-----------------------------------------
* 12. Blog Section
* -----------------------------------------*/
.blog .card { background-color:#2e3135; border:1px solid #2e3135; overflow:hidden; border-radius:5px; }
.blog .card:hover .blog-card-img img { -webkit-transform:scale(1.1); transform:scale(1.1); }
.blog .card .blog-card-img { position:relative; overflow:hidden; border-bottom:5px solid; }

/* Blog Detail Popup */
.post-tags-social { border-top: 1px dotted #424242; border-bottom:1px dotted #424242; padding:10px 0; }
.social-media ul li a { font-size:16px; margin:0 12px 0 0; }
.social-media ul li:last-child a { margin:0; }

/*-----------------------------------------
* 13. Contact Section
* -----------------------------------------*/
.contact .card-body { padding:20px; width:100%; border-radius:5px; border:1px solid #424242; -webkit-transition:ease-in-out .3s; transition:ease-in-out .3s; }
.contact .card-body .card-icon i { font-size:18px; background-color:#26282b; border-radius:50%; padding:10px; width:40px; height:40px; -webkit-transition:ease-in-out .3s; transition:ease-in-out .3s; -ms-flex-align:center; align-items:center; -ms-flex-pack:center; justify-content:center; -ms-flex-wrap:wrap; flex-wrap:wrap; display:-ms-flexbox; display:flex; }
.contact .card-body:hover { box-shadow:0 0 10px 0 rgba(255,255,255,0.4); }
.contact .card-body:hover .card-icon i { color:#ffffff !important; }
.contact .card-body h3 { font-size:18px; font-weight:600; margin:0 0 10px; }
.contact .card-body .social-links a { font-size:18px; margin-right:15px; }
.contact .responsive-map { overflow:hidden; padding-bottom:50%; position:relative; height:auto; }
.contact .responsive-map iframe { position:absolute; left:0; top:0; height:100%; width:100%; border:none; }
.contact .contact-form .btn-primary:hover { background-color:#000000; }

.mailsendbtn { display: inline-block; position: relative; display: flex; justify-content: center;}
.mailsendbtn .loading { display: none; position: absolute; right: -35px; top: 15px; font-size: 12px; }
.error_msg { margin: 0px; display: block; font-size: 14px; color: #ff4141; }

/* Back To Top Scroll Arrow */
.back-to-top { display:none; background-color:#26282b; border:none; color:#ffffff; cursor:pointer; font-size:18px; line-height:40px; height:40px; width:40px; border-radius:50%; position:fixed; bottom:30px; right:30px; text-align:center; box-shadow:0 0 2px #fafafa; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; z-index:999; }
.back-to-top:hover { background-color:#000000; color:#ffffff; }

/*-----------------------------------------
* 14. Inner Pages
* -----------------------------------------*/
.pages .main-wrapper { padding-top:70px; margin:0 auto; }
.pages .site-header { background-color:#2e3135; }
.pages .site-header.sticky-header { background-color:#26282b; }
.pages .portfolio-details,.pages .blog-details { background:#2e3135; }

/* Breadcrumb */
.breadcrumb { position:relative; background-color:#26282b; margin:0; padding:30px 0; border-radius:0; }
.breadcrumb .bread-list { display:inline-block; padding:5px 15px; border-radius:2px; background-color:#2e3135; }

/* 01. Not Found Page */
.not-found-page h1 { font-size:150px; font-weight:300; letter-spacing:4px; line-height:1; margin-bottom:30px; text-shadow:-5px -5px 4px rgba(0,0,0,0.68); }
.not-found-page .search-btn { font-size:20px; padding:10px 20px; }
.not-found-page .animate-ziro { position:relative; top:15px; -webkit-animation:movetext 1s infinite; animation:movetext 1s infinite; }
@keyframes movetext { 50% { bottom:10px; top:0px; } }

/* 02. Coming Soon Page */
.coming-soon-page .main-wrapper { background-image:url('../images/banners/home-banner.jpg'); background-repeat:no-repeat; background-position:50% 50%; background-size:cover; }
.coming-soon-page .main-wrapper:before { content:""; position:absolute; top:0; bottom:0; left:0; right:0; background-color:rgba(0,0,0,0.8); }
.coming-soon { background-color:rgba(0,0,0,0.3); color:#ffffff; padding:30px 20px; }
.coming-soon .text-logo { position:relative; color:#ffffff; text-transform:uppercase; font-size:50px; font-weight:bold; line-height:1; letter-spacing:1px; margin:0 0 25px; display:inline-block; }
.coming-soon h2 { color:#ffffff; font-size:40px; line-height:1; margin-bottom:15px; }
.coming-soon .sub-title { font-size:18px; }
.coming-soon .newsletter-form .input-group { max-width:600px; margin:0 auto; }
.coming-soon .newsletter-form .input-group .form-control { border-color:#ffffff; }
.coming-soon .countdown li { background-color:rgba(0,0,0,0.5); width:80px; height:80px; margin:0 2px 5px; padding:5px; }
.coming-soon .countdown .digit { color:#ffffff; font-size:28px; line-height:28px; font-weight:400; display:block; }
.coming-soon .countdown .smalltext { margin:7px 0 0; line-height:14px; font-size:14px; color:#dddddd; display:block; text-transform:uppercase; }
.coming-soon .social-icon li a { font-size:20px; color:#ffffff; margin:0 10px; }


/*-----------------------------------------
* 15. Styles Switcher CSS
* -----------------------------------------*/
.switcher-wrapper { position:fixed; top:150px; left:-202px; z-index:1024; width:202px; background-color:#2e3135; box-shadow:0 3px 20px 0 rgba(0,0,0,0.1); border-radius:0 8px 8px 0; -webkit-transition:ease .5s; transition:ease .5s; }
.switcher-wrapper.open { left:0; }
.switcher-wrapper .switcher-trigger { position:absolute; background-color:#444444; color:#ffffff; width:40px; height:40px; left:202px; top:10px; border-radius:0 6px 6px 0;border:0; font-size:20px; text-align:center; }
.switcher-wrapper .switcher-inner h6 { text-align:center; font-weight:500; font-size:15px; padding:15px 0; margin:0; border-bottom:1px solid #424242; }
.switcher-wrapper .switcher-inner .color-list { margin:0 0 -10px -10px; }
.switcher-wrapper .switcher-inner .color-list li { position:relative; padding:0 0 10px 10px; display:inline-block }
.switcher-wrapper .switcher-inner .color-list li button { position:relative; width:35px; height:35px; border:none; border-radius:10px; -webkit-transition:.3s; transition:.3s; font-size:0px; color:#ffffff; }
.switcher-wrapper .switcher-inner .color-list li button:before { position:absolute; left:0; right:0; top:10px; }
.switcher-wrapper .switcher-inner .green button { background:#79d70f; }
.switcher-wrapper .switcher-inner .pink button { background:#ff1e56; }
.switcher-wrapper .switcher-inner .blue button { background:#40bad5; }
.switcher-wrapper .switcher-inner .orange button { background:#ff7315; }
.switcher-wrapper .switcher-inner .purple button { background:#9818d6; }
.switcher-wrapper .switcher-inner .yellow button { background:#ffd31d; }
.switcher-wrapper .switcher-inner .magenta button { background:#ff00ff; }
.switcher-wrapper .switcher-inner .red button { background:#ff5d56; }


/*-----------------------------------------
* 16. Responsive CSS
* -----------------------------------------*/
/* Medium devices (tablets, less than 992px) */
@media only screen and (max-width:1024px){
    .section-spacing { padding:60px 0; }
    /* Header Section */
    .site-header { padding:8px 0; }
    .site-header.sticky-header .menu-toggle-line span { background:#ffffff; }
    .banner-section .banner-inner { -ms-flex-direction:column; flex-direction:column; text-align:center; }
    .banner-section .banner-inner .center-picture { max-width:200px; }
    .banner-section .social-links { -ms-flex-pack:center; justify-content:center; }

    /* Navigation */
    .navigation .navigation-menu { position:fixed; max-width:280px; height:100%; left:0; top:0; z-index:1024; opacity:1; visibility:visible; overflow:auto; display:block; -webkit-overflow-scrolling:touch; -webkit-transition:all .15s ease-in; transition:all .15s ease-in; background-color:#2e3135; text-align:left; width:100%; box-shadow:0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); }
    .navigation .navigation-menu.mobile-menu-hide { left:-100%; opacity:0; visibility:hidden; }
    .navigation .navbar-nav .nav-item { padding:0; width:100%; }
    .navigation .navbar-nav .nav-item .nav-link { color:#fafafa !important; padding:8px 30px 8px 15px; border-top:1px solid #424242; }
    .navigation .closeNav-btn { font-size:14px; font-weight:500; text-transform:uppercase; display:block; width:100%; text-align:right; float:right; padding:10px 15px; }
    .navigation .closeNav-btn i { font-size:16px; }

    /* Menu Toggle */
    .navigation .navbar { float:right; text-align:right; }
    .menu-toggle-line { width:40px; border:none; padding:7px 0 0; background:none; z-index:99; }
    .menu-toggle-line.open:after { content:""; background:rgba(0,0,0,0.5); position:fixed; left:0; right:0; top:0; bottom:0; -webkit-transition:all .15s ease-in; transition:all .15s ease-in; }
    .menu-toggle-line span { height:2px; width:32px; background:#ffffff; display:block; margin:0 auto 8px; transform-origin:10px 0; transition:transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; }
    .menu-toggle-line.open span:nth-child(1) { -webkit-transform:rotate(45deg) translate(6px,1px); transform:rotate(45deg) translate(6px,1px); }
    .menu-toggle-line.open span:nth-child(2) { opacity:0; }
    .menu-toggle-line.open span:nth-child(3) { -webkit-transform:rotate(-45deg) translate(6px,-3px); transform:rotate(-45deg) translate(6px,-3px); }
    .back-to-top { bottom:15px; right:15px; }
    .pages .main-wrapper { padding-top:55px; }
    h5 {font-size: .7rem}
}

/* Small devices (landscape phones, less than 768px */
@media only screen and (max-width:767px){
    body { font-size:14px; line-height:26px; }
    .btn { font-size:20px; padding:12px 24px; }
    .section-spacing { padding:50px 0; }
    .content-block { margin-bottom:40px; }
    .section-title h1 { font-size:36px; margin:0 0 45px; }
    .banner-section .banner-text h3 { font-size:35px; }
    .counter-box,.service .card-body,.portfolio-details,.blog-details{ padding:20px; }
    .portfolio-details h5,.blog-details h5,.blog .card h5 { font-size:18px; }
    .popup-detail-title { font-size:22px; margin-bottom:20px; padding-bottom:20px; }
    .section-title h4,.portfolio-content h4 { font-size:20px; }

    .pages .main-wrapper { padding-top:55px; margin:0 auto 40px; }
    .coming-soon .text-logo { font-size:40px; margin:0 0 20px; }
    .coming-soon h2 { font-size:30px; }
    .coming-soon .sub-title { font-size:15px; }
    .coming-soon .countdown li { width:55px; height:55px; }
    .coming-soon .countdown .digit { font-size:20px; line-height:20px; }
    .coming-soon .countdown .smalltext { font-size:11px; line-height:11px; }
}

/* Extra small devices (portrait phones, less than 576px) */
@media only screen and (max-width:575px){
    .section-title h1 { font-size:32px; padding-bottom:4px; }
    .section-subtitle { font-size:23px; margin-bottom:30px !important; }
    .banner-section .banner-inner .info-button .btn { width:75%; margin-bottom:15px; }
    .banner-section .banner-inner .center-picture { max-width:150px; }
    .banner-section .banner-text h3 { font-family:'Oswald', sans-serif; color:#ffffff; font-size:1.6em; font-weight:400; letter-spacing:1px; margin:0 0 15px; }
    .about-details ul { float:none !important; width:100% !important; padding:0 !important; }
    .portfolio #portfolio-flters li { width:45%; }
    .mfp-arrow-left { left:-20px; }
    .mfp-arrow-right { right:-20px; }

    .coming-soon .newsletter-form .input-group { display:inline-block; }
    .coming-soon .input-group .form-control { border-radius:30px; width:100%; margin:0 0 15px; }
    .coming-soon .input-group .input-group-append .btn { border-radius:30px; margin:0 auto; }
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 9;
}
.gtukopes-amiktun {
  background:#2d959a;
  border:2px solid #fa3a3a;
  border-radius:50%;
  box-shadow:0 8px 10px rgba(245, 58, 58, 0.37);
  cursor:pointer;
  height:68px;
  text-align:center;
  width:68px;
  position: fixed;
  right: 6%;
  bottom: 12%;
  z-index:1001;
  transition:.3s;
  -webkit-animation:hoverWave linear 1s infinite;
  animation:hoverWave linear 1s infinite;
}

.gtukopes-amiktun .telifonas {
  border-radius: 100%;
  position: relative;
  overflow: hidden;
}

.gtukopes-amiktun i {
  color: #e8e6e6;
  font-size: 36px;
  transition: .4s;
  line-height: 53.7px;
  transition: .5s ease-in-out;
}

.lakub_derza_timan {
    background-color: #24ce02;
    -webkit-border-radius: 7px;
    border-radius: 43px;
    border: none;
    color: #fff;
    padding: .7em;
    cursor: pointer;
    -webkit-animation-name: 'play_down';
    -moz-animation-name: 'play_down';
    animation-duration: 1s;
    animation-iteration-count: infinite;
    box-shadow: 0 0 0 3px rgb(36 206 2);
}
            @keyframes play_down {
                0% {
                    -webkit-box-shadow: 0 0 rgba(36, 206, 2,.6);
                    -moz-box-shadow: 0 0 rgba(36, 206, 2,.6);
                    box-shadow: 0 0 rgba(36, 206, 2,.6);
                }

                to {
                    -webkit-box-shadow: 0 0 0 20px rgba(36, 206, 2,0);
                    -moz-box-shadow: 0 0 0 20px rgba(36, 206, 2,0);
                    box-shadow: 0 0 0 20px rgba(36, 206, 2,0);
                }
            }
.card-body {
    display: inline-block;
    position: relative;
    width: 100%;
}
.dummy {
    margin-top: 100%;
}
.element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: -webkit-linear-gradient(45deg, rgb(234, 35, 240), rgb(45, 149, 154));
    background: -moz-linear-gradient(45deg, rgb(234, 35, 240), rgb(45, 149, 154));
    background: linear-gradient(45deg, rgb(234, 35, 240), rgb(45, 149, 154));
    border-radius: 50%;
    padding-top: 5%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.start .element {justify-content: space-evenly;}
.start.stand .element {justify-content: flex-start;}
.start .card-title {padding: 0 .6em}
.imagepr {
    background: url('../images/banners/home-banner.jpg') no-repeat fixed;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 550px;
        display: flex;
    align-items: center;
    max-width: 100%;
}
.imagepr h3 {color: #fff}
.contact-form-block {
   display: flex;    
   align-items: center;
   flex-direction: column;}

.tshadow {text-shadow:-5px -5px 4px black, 0 0 1em rgba(0,0,0,0.68);}

 .mw50 {max-width: 51vw;}
 #price {color: #ea23f0}
 .element .card-title h5 {font-size: 1rem;}
 @media only screen and (max-width: 990px){

    .portfolio .portfolio-wrap .portfolio-info {opacity: 1;}
    .portfolio .portfolio-wrap .portfolio-info h4 {text-shadow: 1px 1px 2px black, 0 0 1em #26282b;font-size: 1.3em}    
       .imagepr {
          background: url('../images/banners/home-banner-m.jpg') no-repeat fixed;
          background-position: center center;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          min-height: 50vh;
              display: flex;
          align-items: center;
          max-width: 100%;
      }  
      .element .card-title h5 {font-size: 1.5rem;}
      .standing h5 {font-size: 2em;} 
      .standing .element img {
         width: 70%;
         margin: 5px auto;
      }       
 }
 @media only screen and (max-width: 767px){

    .down-block { position:absolute;bottom: 20vh;;padding: 0 15px}
    .top-block { position:absolute;top: 12vh;padding: 0 15px} 
    #blog .container, .container.standing {max-width: 90vw;}
    .element .card-title h5 {font-size: 1.8rem;}
    .standing .element .card-title h5 {font-size: 2.1rem;}
    .portfolio .portfolio-wrap .portfolio-info {opacity: 1;}
    .portfolio .portfolio-wrap .portfolio-info h4 {text-shadow: 1px 1px 2px black, 0 0 1em #26282b;font-size: 1.3em}    
       .imagepr {
          background: url('../images/banners/home-banner-m.jpg') no-repeat fixed;
          background-position: center center;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          min-height: 21vh;
              display: flex;
          align-items: center;
          max-width: 100%;
      }  
      .mw50 {max-width: 64vw;padding: 0;margin-top: 0;}
      .standing h5 {font-size: 2em;}  
      .banner-section .banner-inner .center-picture { max-width:400px; }
      .banner-section .banner-text h2 {font-size: 2em;}
      .element img {
         width: 70%;
         margin: 5px auto;
      }      
      /*.sd-mb03 {    margin-top: -22em;margin-bottom: 5em;}*/
 }
  @media only screen and (max-width: 640px){
   .element .card-title h5 {font-size: 1.2rem;}
      .imagepr {min-height: 48vh;}
   .banner-section .banner-inner .center-picture { max-width:200px; }   
   .sd-mb03 {    margin-top: -6em;margin-bottom: 0em;}   
   .down-block { position:absolute;bottom: 12vh;}
   .standing h5 {font-size: 1em;} 
  }
 @media only screen and (max-width: 480px){

    .banner-section .banner-text h2 {font-size: 18px;}
    .banner-section .banner-inner .center-picture { max-width:200px; }
    .btn { font-size:12px; padding:12px 24px; }
    .counter-box h3 { border-bottom:2px solid rgba(102,102,102,0.4); font-size:4.0em; display:block; }
    .element .card-title h5 {font-size: .8rem;}
    .portfolio .portfolio-wrap .portfolio-info {opacity: 1;}
    .portfolio .portfolio-wrap .portfolio-info h4 {text-shadow: 1px 1px 2px black, 0 0 1em #26282b;font-size: 1.3em}
      .imagepr {
          background: url('../images/banners/home-banner-m.jpg') no-repeat fixed;
          background-position: center center;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          min-height: 62vh;
              display: flex;
          align-items: center;
          max-width: 100%;
      }     
   .mw50 {max-width: 61vw;padding: 0em;margin-top: 0em;}
   .standing h5 {font-size: 1em;} 
   /*.sd-mb03 {    margin-top: -6em;margin-bottom: 0em;}  */
   .top-block { position:absolute;top: 15vh;padding: 0 15px} 
   .down-block { position:absolute;bottom: 12%;}
 }
 .mt-01 {margin-top: 1em}
 .mt-02 {margin-top: 2em}
 .mt-03 {margin-top: 3em}
 .mt-04 {margin-top: 70px}
 .mb-01 {margin-bottom: 1em}
 .p-01 {padding:  1em}
 dt, dd {
 display: inline;
}
dd:after {
 content:"\a";
 white-space: pre;
}
  dt {color: #2d959a}
  dd {margin-left: 1em}
.carousel-item .row {justify-content: center;}
ul.navbar-nav li img {margin-right: .5em}
.modal-content {background-color: #2e3135;}
.close {color: #fff;}
.btn-link {cursor: pointer;}
.freemodal {cursor: pointer;}
.freemodal i {font-size: 1.5em;color: #fff;}
span.canvas-end {float: right}
.copyright {padding-left: 8em;}
ul.list-marked {list-style-image: url(../images/star.svg);padding-left:15px;}
ul.list-marked li strong, ul.list-marked li b {color: #9cc2e5}
.grecaptcha-badge {
    visibility: hidden;
}
.seo-info-block p {    
    margin: 2em 0 1em;
    line-height: 1.4;
}