/*-----------------------------------------------------------
* 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
* -----------------------------------------*/    
/*-- Poppins font --*/
@import url('https://fonts.googleapis.com/css2?family=Poppins: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');

/*-----------------------------------------
* 02. Basic Styles
* -----------------------------------------*/   
body { font-family:'Roboto', sans-serif; background-color:#2e3135; color:#b6b6b6; font-size:15px; font-weight:400; line-height:30px; }
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:#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:'Poppins', 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; }

/*-----------------------------------------
* 04. Buttons
* -----------------------------------------*/
.btn{ font-family:'Poppins', sans-serif; position:relative; font-size:15px; 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:#666666; color:#ffffff; }
.btn-secondary:hover { background-color:#666666; color:#ffffff; }
.btn-secondary.disabled,.btn-secondary:disabled { background-color:#666666; 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:'Poppins', sans-serif; background-color:#26282b; color:#fafafa; height:50px; font-size:14px; padding:10px 22px; box-shadow:none; outline:none; border:1px solid #424242; border-radius:30px; }
.form-control:focus { color:#fafafa; background:transparent; box-shadow:none; outline:none; }
.form-control.is-invalid,.was-validated .form-control:invalid { background:none; box-shadow:none !important; }
.section-spacing { padding:80px 0; }
.content-block { margin-bottom:50px; margin-top:50px; }
.content-block:last-child { margin-bottom:0; }

/*-----------------------------------------
* 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:'Poppins', 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; }

/*-----------------------------------------
* 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:0.5px; 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:#d7d7d7; min-height:100vh; padding:60px 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 15px; }
.banner-section .banner-text h3 { color:#ffffff; font-size:45px; font-weight:400; letter-spacing:1px; margin:0 0 15px; }
.banner-section .banner-text p { color:#ffffff;  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('/Image/portfolio/AD/banners/Profile-background.jpg'); 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; }

/* 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:50px; 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 */
.education,.experince { border-left:2px solid #424242; }
.education-box,.experince-box { position:relative; box-shadow:2px 0px 0px 1px #424242; border-radius:4px; padding:15px 25px; 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; }

/* 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:10px; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; }
.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:52px; display:block; text-align:right; }

/*-----------------------------------------
* 10. Service Section
* -----------------------------------------*/
.service,.accomplishment  .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,.accomplishment  .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,.accomplishment  .card-icon { font-size:50px; margin-bottom:15px; }
.service,.accomplishment  .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:90px; margin:0 auto 17px; border-radius:40%; }

/* 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,.about #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,.about #portfolio-flters li.filter-active,.portfolio,.about #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:18px; 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; }

/*-----------------------------------------
* 12. Blog Section
* -----------------------------------------*/
.blog,.participation .card { background-color:#2e3135; border:1px solid #2e3135; overflow:hidden; border-radius:5px; }
.blog,.participation .card:hover .blog-card-img img { -webkit-transform:scale(1.1); transform:scale(1.1); }
.blog,.participation .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; }
.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('/Image/portfolio/AD/banners/Profile-background.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:991px){
    .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; }
}

/* Small devices (landscape phones, less than 768px */
@media only screen and (max-width:767px){
    body { font-size:14px; line-height:26px; }
    .btn { font-size:14px; 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:40px; }
    .counter-box,.service,.accomplishment  .card-body,.portfolio-details,.blog-details{ padding:20px; }
    .portfolio-details h5,.blog-details h5,.blog,.participation .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; }
    .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; }
}



/*New Items*/
/* competencies */
.competencies .progressbar { width:100%; position:relative; background-color:#dddddd; box-shadow:inset 0 1px 1px rgba(0,0,0,.1); }
.competencies .proggress { height:8px; width:10px; }
.competencies .percentCount { float:right; clear:both; font-weight:600; margin-top:-45px; }
.competencies .skill-name { margin:0 0 12px 0; line-height:normal; opacity:1; font-weight:600; font-size:14px; }



/* Counter */

.tbl-language {
    display: inline-table;
}
.tbl-language th{
    font-family: 'Poppins', sans-serif;
    color: #666666;
    margin: 0 0 10px;
    text-transform: uppercase;
    overflow-wrap: break-word;
    word-wrap: break-word;
    font-size:1.5rem;
}
.tbl-language td:nth-child(n) {  
  font-size: 1.5rem;   
  color:#64bd00 ;
}
.lan-check{
    color:#64bd00 ;
    font-size: 1rem !important;   
}
.lan-uncheck{
    color:red;
    font-size: 1rem !important;   
}
/* box fixed hight*/
.blog-card-text h5
{
    height: 50px;
    display: table;
}
.blog-card-text p
{
    height: 60px;
    display: table;
}
.experince-box .box-description{
   height: 70px;
    display: table;
}
.education-box .box-description{
   height: 70px;
    display: table;
}
.competencies{

}
/*Video channel*/
.video-items{

}
.channel-items{
}
.mediapresence-box 
{
    position:relative; box-shadow:2px 0 0 1px #dddddd; border-radius:4px; padding:15px 25px; border-left:3px solid; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; 
}
.mediapresence-box .box-description
{
     height: 70px;
    display: table;
}
.more-participation{
    text-align: center;
    margin: 20px;
}
.a-btn-more{
    text-align: center;
    font-weight: 500;
    font-size: 20px;
    text-transform: uppercase;
    cursor:pointer;
}
.testimonial-design{
    text-transform: capitalize;
}
.testimonial-org{

}

.modal-body{
    background-color:#2e3135 !important;
}
.modal-footer{
    background-color:#2e3135 !important;
}
.modal-footer .btn{
    background-color:white !important;
}
.col-bg-4 {
    background: #2e3135 !important;
}
@media only screen and (max-width:575px) {
    .tbl-language {
        display: block !important;
    }

    .popup-extradata {
        padding: 0px !important;
        display: flow-root !important;
    }

    .box-flex-skpopup {
        display: flow-root !important;
    }
}
.orgsocialmedias ul.social-network {
    list-style: none;
    display: inline;
    margin-left: 0 !important;
    padding: 0;
}
.orgsocialmedias ul.social-network li {
    display: inline;
    margin: 0 5px;
}
.banner-bg-img{
    width:100% !important;
}