/********************************************************
    Template Name: Buglabs Responsive Creative HTML template
    Created By: TrendyTheme
    Website: http://trendytheme.net
    Version: 1.0
    Support: http://trendytheme.net/support
*********************************************************/



/*
====================================
[ CSS TABLE CONTENT ]
------------------------------------
    1.0 - General
    2.0 - Typography
    3.0 - Helper Classes
    4.0 - Color Presets
    5.0 - Overlay css
    6.0 - Hero css
    7.0 - Background Banner
    8.0 - Bootsnav Customization
    9.0 - Social Wrapper
    10.0 - Featured Item
    11.0 - Team CSS
    12.0 - Blog CSS
    13.0 - News Letter Subscription
    14.0 - Portfolio CSS
    15.0 - Preloader

-------------------------------------
[ END CSS TABLE CONTENT ]
=====================================
*/



/* ================= General ==================== */

body{
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    line-height: 30px;
    font-weight: 400;
    color: #425367;
    /*background-color: #f0f2f5;*/
    background-color: #fff;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased !important;
}

html {
    font-family: 'Ubuntu', sans-serif;
}

html,
body {
    width: 100%;
    height: 100%;
}


/* Link style
/* ------------------------------ */
a,
a > * {
    outline: none;
    cursor: pointer;
    text-decoration: none;
}
a:focus,
a:hover {
    outline: none;
    text-decoration: none;
}
a {
    color: #425367;
}

/* Transition elements
/* ------------------------------ */
a,
.featured-item,
.plus-box .featured-item .desc h2 {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; 
}


/* ================ Typography ================== */

h1, h2, h3, h4, h5, h6{
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    color: #212121;
    margin: 0 0 15px;
}

h1 {
    font-size: 40px;
    line-height: 60px;
}
h2 {
    font-size: 35px;
    line-height: 50px;
}
h3 {
    font-size: 30px;
    line-height: 40px;
}
h4 {
    font-size: 25px;
    line-height: 30px;
}
h5 {
    font-size: 20px;
    line-height: 25px;
}
h6 {
    font-size: 18px;
    line-height: 25px;
}


/*Button Style*/
.btn {
    padding: 12px 25px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 2px;
    box-shadow: 0 4px 5px rgba(34, 34, 34, 0.2);
}
.btn:hover {
    box-shadow: 0 8px 10px rgba(34, 34, 34, 0.2);
}

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:active:focus, 
.btn-primary:active:hover {
    color: #fff;
    background-color: #36454f;
    border-color: #26353f;
}


.btn-sm {
    padding: 8px 20px;
    font-size: 12px;
    font-weight: 400;
}


button:focus{
    outline: none !important;
}


.alert {
    padding: 9px 15px;
    position: relative;
    z-index: 100;
}



address {
	font-size: 16px;
	line-height: 25px;
	color: #666;
	font-family: 'Playfair Display', serif;
}
address a {
	color: #666;
}
address a:hover {
	color: #425367;
}

/*Form Style */

/* Remove Chrome Input Field's Unwanted Yellow Background Color */
input:-webkit-autofill, 
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
.form-group {
    margin-bottom: 30px;
}

.form-control {
    height: 50px;
    padding: 6px 20px;
    border: 1px solid #ebebeb;
    box-shadow: none;
}
.form-control:focus {
    border-color: transparent;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.075), 0 0 20px rgba(0,0,0,.3);
    box-shadow: 0 1px 1px rgba(0,0,0,.075), 0 0 20px rgba(0,0,0,.3);
}

.contact-form .form-group textarea {
    min-height: 210px;
    padding: 15px 20px;
    position: relative;
    z-index: 20;
}



@media screen and (min-width: 992px) {
    .main-wrapper {
      width: 98%;
      margin: 0 auto;
      border-left: 1px solid rgba(0, 0, 0, 0.1);
      border-right: 1px solid rgba(0, 0, 0, 0.1);
    } 
}


/* ================ Helper Classes ================== */
.no-vertical-lines {
  position: relative;
  z-index: 20;
}

.section-intro {
    display: block;
    font-size: 12px;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 4px;
}
.section-title {
    font-size: 40px;
    line-height: 60px;
    font-family: 'Playfair Display', serif;
    margin-bottom: 35px;
}
.section-sub {
    margin-bottom: 70px;
}

@media screen and (min-width: 992px) {
   .section-title {
        width: 60%;
        margin: 0 auto 35px;
   }

   .section-sub {
        width: 70%;
        margin: 0 auto 70px;
   } 
}

@media screen and (max-width: 480px) {
    .section-title {
        font-size: 25px;
        line-height: 40px;
    }

}

@media (max-width: 320px) {
    .row {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

img {
  max-width: 100%;
  height: auto;
}


.no-gutter > [class*='col-'] {
    padding-right: 0;
    padding-left: 0;
}


.margin-top-20 {
    margin-top: 20px;
}
.margin-top-25 {
    margin-top: 25px;
}
.margin-top-30 {
    margin-top: 30px;
}
.margin-top-50 {
    margin-top: 50px;
}
.margin-top-80 {
    margin-top: 80px;
}
.margin-top-100 {
    margin-top: 100px;
}


.margin-bottom-20 {
    margin-bottom: 20px
}
.margin-bottom-30 {
    margin-bottom: 30px;
}
.margin-bottom-50 {
    margin-bottom: 50px;
}
.margin-bottom-80 {
    margin-bottom: 80px;
}
.margin-bottom-100 {
    margin-bottom: 100px;
}

@media screen and (min-width: 768px) {
    .margin-left-30 {
        margin-left: 30px;
    } 
}


.top-100 {
    top: 100px;
    position: relative;
}

.offset-bottom-80 {
    margin-bottom: -80px;
}
.offset-bottom-100 {
    margin-bottom: -100px;
}


@media screen and (min-width: 1360px) {
    .offset-top-140 {
        margin-top: -140px;
    }
}

.section-padding {
  padding-top: 100px;
  padding-bottom: 100px;
}
.padding-left-100 {
    padding-left: 100px;
}
.padding-top-50 {
  padding-top: 50px;
}
.padding-top-60 {
  padding-top: 60px;
}
.padding-top-70 {
  padding-top: 70px;
}
.padding-top-80 {
  padding-top: 80px;
}
.padding-top-90 {
  padding-top: 90px;
}
.padding-top-100 {
  padding-top: 100px;
}
.padding-top-140 {
  padding-top: 140px;
}
.padding-bottom-70 {
  padding-bottom: 70px;
}
.padding-bottom-140 {
  padding-bottom: 140px;
}

.full-width-column {
    padding: 50px;
}

@media screen and (min-width: 992px) {

    .full-width-column {
        padding: 100px;
    }

    .img-frame {
        position: relative;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    }
    .img-frame:before {
        content: "";
        height: calc(100% - 20%);
        background-color: rgba(255, 255, 255, 0.5);
        position: absolute;
        /*right: -60px;*/
        top: 10%;
        z-index: -1;
        width: 80px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    }

    .right.img-frame:before {
        right: -60px;
    }
    .left.img-frame:before {
        left: -60px;
    }
}

/*color css*/
.brand-color {
    color: #425367;
}
.white-text {
    color: #fff;
}
.blue-bg {
    background: #425367;
}
.dark-white {
    background: #f4f4f4;
}



.full-height {
  height: 100vh;
  width: 100%;
}

.height-600 {
    height: 600px;
}

.overlay {
  position: relative;
}
.overlay:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.2); /*fallback overlay*/
}

/* dark overlay */
.overlay.dark-0:before {
    background-color: rgba(0,0,0,0);
}
.overlay.dark-1:before {
    background-color: rgba(0,0,0,.1);
}
.overlay.dark-2:before {
    background-color: rgba(0,0,0,.2);
}
.overlay.dark-3:before {
    background-color: rgba(0,0,0,.3);
}
.overlay.dark-4:before {
    background-color: rgba(0,0,0,.4);
}
.overlay.dark-5:before {
    background-color: rgba(0,0,0,.5);
}
.overlay.dark-6:before {
    background-color: rgba(0,0,0,.6);
}
.overlay.dark-7:before {
    background-color: rgba(0,0,0,.7);
}
.overlay.dark-8:before {
    background-color: rgba(0,0,0,.8);
}
.overlay.dark-9:before {
    background-color: rgba(0,0,0,.9);
}
.overlay.dark-10:before {
    background-color: rgba(0,0,0,1);
}



/*Verticle Aligne Middle for equel height*/
.valign-wrapper {
    display: table;
    width: 100%;
}
.valign-cell {
    display: table-cell;
    vertical-align: middle;
}

.home-cover-section {
    position: relative;
}


.big-text {
    font-size: 60px;
    line-height: 65px;
}

@media screen and (max-width: 480px) {
    .big-text {
        font-size: 30px;
        line-height: 40px;
    }
}

.hero-sub {
    display: block;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin-bottom: 20px;
}

.hero-intro,
.hero-sub {
    color: #f1f1f1;
}

.bg-cover,
[class*='banner-'] {
    background-size: cover !important;
}

@media (min-width: 992px) {
    .bg-fixed {
        background-attachment: fixed;
    }
}

.banner-1 {
    background-image: url("assets/img/cover-1.jpg");  
}

.banner-2 {
    background-image: url("assets/img/cover-2.jpg");  
}

.banner-3 {
    background-image: url("assets/img/cover-3.jpg");  
}

.banner-4 {
    background-image: url("assets/img/cover-4.jpg");  
}

.banner-5 {
    background-image: url("assets/img/cover-5.jpg");  
}

.banner-partnership-evaluation {
    background-image: url("assets/img/partnership.jpg");
}

.banner-private-overlap {
    background-image: url("assets/img/overlap.jpg");
}

.banner-vendor-data-lift {
    background-image: url("assets/img/growth.jpg");
}

.banner-open-sharing {
    background-image: url("assets/img/cover-1.jpg");  /* placeholder — swap for assets/img/open-sharing.jpg */
}



/*Big Transparent Text Under Banner*/
.bg-text {
    position: relative;
    width: 100%;
    text-align: center;
    z-index: 50;
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 18px;
    text-transform: uppercase;
}
.bg-text::after {
    color: rgba(241, 241, 241, 0.1);
    content: attr(data-bg-text);
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    width: 100%;
}

@media screen and (min-width: 992px) {
    .bg-text {
        font-size: 15rem;
    }
    .bg-text::after {
        bottom: -55px;
    }  
}


/* ================ Bootsnav Customization ================== */

/* When the header is solid by default (not the scroll-reveal transparent nav),
   reserve its height so the first section starts below the fixed bar instead of
   tucking underneath it. Paired with the `solid_nav` page flag. */
body.solid-nav {
    padding-top: 81px;
}
/* `.navbar-fixed` is position:fixed but sets no `top`, so it keeps its static
   position and the padding above would drag it down. Pin it to the viewport top
   so the padding reserves space for the bar and only the content shifts down. */
body.solid-nav .navbar-fixed {
    top: 0;
}

@media (min-width: 1010px) {
    nav.navbar.bootsnav.navbar-fixed {
        width: 97.9%;
    }
}

@media (min-width: 993px) {
    .navbar>.container .navbar-brand, 
    .navbar>.container-fluid .navbar-brand {
        margin-top: 15px;
    }

    nav.navbar.bootsnav ul.nav > li > a {
        padding: 30px 15px;
        font-size: 14px;
        font-weight: 500;
        font-family: 'Ubuntu', sans-serif;
        text-transform: uppercase;
    }
}
@media (max-width: 992px) {
    nav.navbar.bootsnav .navbar-brand {
        float: left !important; 
        margin: 0 !important; 
    }
    nav.navbar.bootsnav .navbar-toggle {
        float: right;
        margin-left: -200px;
        margin-right: auto;
        margin-top: 5px;
    }
}

nav.navbar.bootsnav ul.nav li.dropdown>ul.dropdown-menu {
    border-top-color: #425367
}
nav.navbar.bootsnav ul.nav > li > a:hover,
nav.navbar.bootsnav ul.nav > li.active > a,
nav.navbar.bootsnav ul.nav > li>.dropdown-menu li > a:hover,
nav.navbar.bootsnav ul.nav > li>.dropdown-menu li.active > a {
    color: #425367;
}




/* ================ Social Wrapper CSS ================== */
/*parent wrapper need to position relative*/
.social-wrapper {
    width: auto;
    height: 40px;
    text-align: center;
    font-size: 14px;
    line-height: 40px;
    position: absolute;
    bottom: 10%;
    right: 0;
    left: 0;
}

@media screen and (min-width: 992px) {
    .social-wrapper {
        position: absolute;
        top: 50%;
        right: 30px;
        left: auto;
        transform: rotate(90deg) translate(50%);
        transform-origin: right top;
    }
}

.social-wrapper .follow-us-note {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 7px;
    color: #fff;
}
.social-wrapper i.divider {
    display: inline-block;
    width: 80px;
    height: 10px;
    margin: 0 15px;
    position: relative;
}
.social-wrapper i.divider::after {
    content: '';
    width: 80px;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 0;
    background: #fff;
}
.social-wrapper>ul {
    display: inline-block;
    margin-bottom: 0;
}
.social-wrapper>ul li+li {
    margin-left: 5px;
}
.social-wrapper>ul li a {
    display: block;
    color: #fff;
    width: 20px;
}

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

    .social-wrapper .follow-us-note {
        display: block;
    }
    .social-wrapper i.divider {
        display: none;
    }
}


/*Quick Contact*/
.quick-contact .mailing-address a {
    font-size: 25px;
    font-weight: 700;
    color: #212121;
    display: inline-block;
    margin-bottom: 20px;
}

.quick-contact li {
    margin: 0 15px;
    position: relative;
}

.quick-contact li:before {
    content: "-";
    position: absolute;
    right: -16px;
    top: 0;
    color: #999;
}
.quick-contact li:last-child:before {
    content: "";
}
.quick-contact li a {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 4px;
}

.quick-contact li a:hover,
.quick-contact .mailing-address a:hover {
    color: #425367;
}

/*map section*/
.map-section {
    height: 500px;
}


.quote-carousel .content {
    font-size: 35px;
    line-height: 45px;
    font-weight: 700;
    color: #fff;
}
@media screen and (max-width: 480px) {
    .quote-carousel .content {
        font-size: 24px;
        line-height: 35px;
    }
}

/*--------------------------------------
owl carousel customization
----------------------------------------*/
.owl-theme .owl-dots .owl-dot.active span {
    width: 50px;
}
.owl-theme .owl-controls {
    margin-top: 40px;
}

.owl-theme .owl-dots .owl-dot span {
    width: 15px;
    height: 8px;
    margin: 5px 5px;
    opacity: 0.5;
}
.owl-theme .owl-dots .owl-dot.active span, 
.owl-theme .owl-dots .owl-dot:hover span {
    opacity: 1;
}
.owl-theme .owl-dots .owl-dot span,
.owl-theme .owl-dots .owl-dot.active span, 
.owl-theme .owl-dots .owl-dot:hover span {
    background: #006cff;
}

.blue-bg .owl-theme .owl-dots .owl-dot span,
.blue-bg .owl-theme .owl-dots .owl-dot.active span, 
.blue-bg .owl-theme .owl-dots .owl-dot:hover span {
    background: #fff;
}


.project-carousel .carousel-item {
    min-height: 200px;
}




.clients-logo a img {
    display: inline-block;
    margin: 15px 10px;
}

.equal-height-row .equal-height-column>img{
    width: 100%;
}

.equel-height-content-wrapper {
    padding: 30px;
}

@media screen and (min-width: 992px){
    .equal-height-row .section-title {
        width: 85%;
        margin: inherit;
    }
    .equel-height-content-wrapper {
        padding: 100px;
    }  
}
@media screen and (max-width: 991px){
    .equal-height-column {
        height: auto !important;
    }
}


/*Gradient Background Color*/
.pink-violet-bg {
    background: #ff00a8; /* For browsers that do not support gradients */    
    background: -webkit-linear-gradient(left, #ff00a8 , #6000ff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #ff00a8 , #6000ff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #ff00a8 , #6000ff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #ff00a8 , #6000ff); /* Standard syntax (must be last) */
}

.pink-yellow-bg {
    background: -webkit-linear-gradient(left, #ef0b00 , #ff7e00); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #ef0b00 , #ff7e00); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #ef0b00 , #ff7e00); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #ef0b00 , #ff7e00); /* Standard syntax (must be last) */
}

.blue-violet-bg {
    background: #ae00ff; /* For browsers that do not support gradients */    
    background: -webkit-linear-gradient(left, #00ffd8 , #ae00ff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #00ffd8 , #ae00ff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #00ffd8 , #ae00ff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #00ffd8 , #ae00ff); /* Standard syntax (must be last) */
}




/* ================ Featured Item ================== */

[class^="flaticon-"]:before, 
[class*=" flaticon-"]:before, 
[class^="flaticon-"]:after, 
[class*=" flaticon-"]:after {
    margin-left: 0px;
}


.featured-item {
    padding: 40px 30px;
    background: #fff;
    overflow: hidden;
}
.featured-item:hover {
    z-index: 20;
    background: #fff;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
}

.featured-item .icon {
    margin-bottom: 10px;
}
.featured-item .icon i::before {
    font-size: 40px;
    line-height: 40px;
}
.featured-item .desc h2 {
    font-size: 25px;
}


/*Feature Item Left Icon*/
.featured-item.iconleft .icon,
.featured-item.iconright .icon {
    margin-top: 15px;
    margin-bottom: 0;
}
.featured-item.iconleft .desc,
.featured-item.iconright .desc {
    overflow: hidden;
}
.featured-item.iconleft .icon {
    float: left;
    margin-right: 15px;
}
.featured-item.iconright .icon {
    float: right;
    margin-left: 15px;
}
.featured-item.iconright .desc {
    text-align: right;
}



/*Featured Item Plus Box*/
.plus-box  > [class*='col-'] {
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

@media screen and (min-width: 992px) {
    .plus-box  > [class*='col-']:nth-child(3),
    .plus-box  > [class*='col-']:nth-child(6) {
        border-right: 1px solid transparent;
    }
    .plus-box  > [class*='col-']:nth-child(4),
    .plus-box  > [class*='col-']:nth-child(5),
    .plus-box  > [class*='col-']:nth-child(6) {
        border-bottom: 1px solid transparent;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    .plus-box  > [class*='col-']:nth-child(2),
    .plus-box  > [class*='col-']:nth-child(4),
    .plus-box  > [class*='col-']:nth-child(6) {
        border-right: 1px solid transparent;
    }
    .plus-box  > [class*='col-']:nth-child(5),
    .plus-box  > [class*='col-']:nth-child(6) {
        border-bottom: 1px solid transparent;
    }
}

@media screen and (max-width: 767px) {
    .plus-box  > [class*='col-'] {
        border-right: 1px solid transparent;
    }
}

.plus-box .featured-item {
    background: rgba(0, 0, 0, 0.1);
}
.plus-box .featured-item:hover {
    background: #fff;
    color: #4a5968;
}
.plus-box .featured-item,
.plus-box .featured-item .desc h2 {
    color: #fff;
}
.plus-box .featured-item:hover .desc h2 {
    color: #212121;
}


/* ================ Team CSS ================== */

.team-wrapper {
    position: relative;
    overflow: hidden;
}
.member-intro {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 30px 0;
    background: #425367;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -ms-transition: opacity .2s;
    transition: opacity .2s;
}

.team-wrapper:hover .member-intro {
    opacity: 1;
    visibility: visible;
}

.member-intro h3 {
    font-size: 35px;
    margin-bottom: 0;
}
.member-intro h3 a,
.member-designation {
    color: #fff;
}

.member-designation {
    display: block;
}

.member-thumb img {
    width: 100%;
}

@media screen and (min-width: 992px){
    .team-wrapper + .team-wrapper,
    .featured-separotor .featured-item + .featured-item {
        border-left: 1px solid rgba(0, 0, 0, 0.1);
    }
}



/* ================ Blog CSS ================== */
.post-wrapper {
    margin-bottom: 50px;
}
.post-wrapper .thumb-wrapper img {
    width: 100%;
}
.post-wrapper .thumb-wrapper {
    position: relative;
    overflow: hidden;
}
.post-wrapper .thumb-wrapper a.readmore {
    position: absolute;
    left: 0;
    bottom: -50%;
    width: 100%;
    display: block;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 7px;
    text-align: center;
    color: #fff;
    background: rgba(0, 132, 255, 0.9);
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
}

.post-wrapper:hover .thumb-wrapper a.readmore {
    bottom: 0;    
    opacity: 1;
    visibility: visible;
}
.post-wrapper .entry-header {
    padding: 15px 20px;
}
.post-wrapper .entry-header .entry-meta{
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #212121;
}

.post-wrapper .entry-header .entry-title {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 0;
}
.post-wrapper .entry-header .entry-title a {
    color: #212121;
}
.post-wrapper .entry-header .entry-title a:hover {
    color: #425367;
}


/*Single Post*/
.posts-content.single-post {
    padding-left: 30px;
    padding-right: 30px;
}

.blog-full-width-img {
    margin-left: -30px;
    margin-right: -30px;
}

@media screen and (min-width: 768px) {
    .posts-content.single-post {
        padding-left: 100px;
        padding-right: 100px;
    }
    .blog-full-width-img {
        margin-left: -100px;
        margin-right: -100px;
    }
}



/*Post share style
----------------------------------*/
.post-share ul li a{
    color: #fff;
    padding: 7px 0;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 45px;
    font-size: 15px;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    -webkit-transition: all 400ms;
    -moz-transition: all 400ms;
    -ms-transition: all 400ms;
    transition: all 400ms;
}

.post-share ul li a i{
    width: 45px;
    margin: 0 auto;
}
.post-share ul li{
    padding: 0px 2px;
}
.post-share ul li:first-child{
    padding-left: 0;
}
.post-share ul li:last-child{
    padding-right: 0;
}
.post-share ul li a span {
    margin-left: 0;
    padding-right: 20px;
}
.post-share ul li a:hover{
    width: 90px;
}
.facebook{
    background-color: #3b5998;
}
.twitter{
    background-color: #1da1f2;
}
.google-plus{
    background-color: #ea4335;
}
.linkedin{
    background-color: #0077b5;
}
.youtube{
    background-color: #cd201f;
}
.vimeo{
    background-color: #3b5998;
}
.pinterest{
    background-color: #bd081c;
}
.reddit-alien{
    background-color: #ff4500;
}
.envelope{
    background-color: #a2a2a2;
}



/*Comment CSS*/
.comment-list .media {
    margin-top: 30px;
}
.comment-list .media-left {
    padding-right: 25px;
}
.comment-list .media-left a{
    display: block;
    width: 70px;
    height: 70px;
}

.comment-info {
    position: relative;
}
.comment-info h4{
    font-size: 18px;
}
.comment-meta {
    position: absolute;
    top: 7px;
    right: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
}

.comment-meta a {
    display: inline-block;
    color: #425367;
}
.comment-meta a:hover {
    color: #202020;
}
.comment-meta a:last-of-type{
    margin-left: 20px;
    padding-left: 20px;
    position: relative;
}
.comment-meta a:last-of-type::before {
    content: "";
    background-color: #425367;
    height: 12px;
    width: 1px;
    position: absolute;
    left: 0;
    top: 2px;
}

.comment-list .media-body p{
    border-bottom: 1px solid #eee;
    padding-bottom: 30px;
}


@media (max-width: 550px){
    .comment-list .media-left {
        display: block;
        padding: 0;
        margin-bottom: 10px;
    }
    .comment-meta {
        position: relative;
        margin-bottom: 20px;
        top: -5px;
    }

    .comment-meta a:last-of-type {
        margin-left: 5px;
        padding-left: 10px;
    }
}


/* ================ News Letter Subscription ================== */

.subscription-section {
    background-image: url("assets/img/subscribe-bg.jpg"); 
}
.subscription-section .container {
    position: relative;
    z-index: 10;
}
.subscription-section::before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: ""; 
    z-index: 10;  
    background: -webkit-linear-gradient(left, rgba(239, 11, 0, 0.8) , rgba(255, 126, 0, 0.8)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(239, 11, 0, 0.8) , rgba(255, 126, 0, 0.8)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(239, 11, 0, 0.8) , rgba(255, 126, 0, 0.8)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(239, 11, 0, 0.8) , rgba(255, 126, 0, 0.8)); /* Standard syntax (must be last) */
}

.subscribe-form .input-wrapper input[type=email] {
    background: rgba(0, 0, 0, 0.15);
    border: transparent;
    height: 60px;
    border-radius: 30px;
    padding-left: 30px;
    color: #fff;
}
.subscribe-form .input-wrapper input[type=email]:focus {
   box-shadow: none;
}
.subscribe-form .input-wrapper {
	position: relative;
}
.subscribe-form .input-wrapper button {
	position: absolute;
    top: 4px;
    right: 4px;
    height: 52px;
    border-radius: 30px;
    box-shadow: none;
}
.subscription-success {
    color: #fff;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 0;
}

@media screen and (max-width: 480px) {
	.subscribe-form .input-wrapper button {
		padding: 12px 12px;
	}
}

.subscribe-form .input-wrapper input[type=email]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}
.subscribe-form .input-wrapper input[type=email]::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
.subscribe-form .input-wrapper input[type=email]:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
.subscribe-form .input-wrapper input[type=email]:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}



/* ================ Portfolio CSS ================== */

.portfolio-item {
    margin-bottom: 30px; 
}
.portfolio-wrapper .thumb {
    position: relative;
    overflow: hidden;
}
.portfolio-wrapper .thumb:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 96, 0, 0.95);
	opacity: 0;
	visibility: hidden;
}

.portfolio-wrapper:hover .thumb:before {
	opacity: 1;
	visibility: visible;
}

.portfolio-wrapper .thumb img {
    width: 100%;
}
.portfolio-intro {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding-top: 70px;
    padding-left: 70px;
}

@media screen and (max-width: 479px)  {
    .portfolio-intro {
        padding-top: 15px;
        padding-left: 15px;
    }
    .portfolio-intro h2 {
        font-size: 26px;
        line-height: 30px;
    }
}
.portfolio-intro a {
    color: #fff;
}
.portfolio-category {
    display: block;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 7px;
}

.portfolio-category,
.portfolio-title,
.member-title,
.member-designation {
    -webkit-transform: translate(-100%,0);
    -moz-transform: translate(-100%,0);
    -ms-transform: translate(-100%,0);
    transform: translate(-100%,0);
    -webkit-transform-style: preserve-3d!important;
    opacity: 0;
    visibility: hidden;
}

.portfolio-wrapper:hover .portfolio-title,
.portfolio-wrapper:hover .portfolio-category,
.team-wrapper:hover .member-title,
.team-wrapper:hover .member-designation {
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
    opacity: 1;
    visibility: visible;
}

.portfolio-category,
.member-designation {
    -webkit-transition: all .6s cubic-bezier(.3,.1,.58,1);
    -moz-transition: all .6s cubic-bezier(.3,.1,.58,1);
    -ms-transition: all .6s cubic-bezier(.3,.1,.58,1);
    transition: all .6s cubic-bezier(.3,.1,.58,1);
}
.portfolio-title,
.member-title,
.portfolio-wrapper .thumb:before {
    -webkit-transition: all .3s cubic-bezier(.3,.1,.58,1);
    -moz-transition: all .3s cubic-bezier(.3,.1,.58,1);
    -ms-transition: all .3s cubic-bezier(.3,.1,.58,1);
    transition: all .3s cubic-bezier(.3,.1,.58,1);
}

.comingsoon-note {
	display: block;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 7px;
    color: #666;
}



/* ================ Footer Section ================== */
.footer-section {
    padding: 60px 0;
}
.copyright-text {
    color: #929090;
}


/* Vertical lines */
body.no-lines .l1, 
body.no-lines .l2 {
  display: none;
}

.l1:before, 
.l1:after, 
.l2:before, 
.l2:after {
  content: '';
  top: 0;
  position: fixed;
  z-index: 10;
  height: 100%;
  width: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.3);
  opacity: .15;
  left: 50%;
}

.l1:before {
  margin-left: 195px;
}
.l1:after {
  margin-left: 585px;
}

.l2:before {
  margin-left: -586px;
}
.l2:after {
  margin-left: -196px;
}

@media screen and (max-width: 1200px) {
    .l1:before {
        margin-left: 162px;
    }
    .l1:after {
        margin-left: 486px;
    }
    .l2:before {
        margin-left: -486px;
    }
    .l2:after {
        margin-left: -162px;
    }
}

@media screen and (max-width: 992px) {
    .l1:before,
    .l1:after {
        display: none;
    }
    .l2:before {
        margin-left: -376px;
    }
    .l2:after {
        margin-left: 376px;
    }
}

@media screen and (max-width: 768px) {
    .l2:before,
    .l2:after {
        display: none;
    }
}


/* ================ Preloader ================== */
#preloader {
    background: #FFF;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
}

#status,
.status-mes {
    background-image: url(assets/img/preloder.gif);
    background-position: center;
    background-repeat: no-repeat;
    height: 200px;
    left: 50%;
    margin: -100px 0 0 -100px;
    position: absolute;
    top: 50%;
    width: 200px;
}

/* ================ Waitlist form (Formspree fs-*) ================== */
.fs-form {
    max-width: 680px;
    margin: 0 auto;
    background: #fff;
    border-radius: 14px;
    padding: 38px 38px 32px;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.18);
    text-align: left;
}
.fs-form fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;            /* let grid items shrink instead of overflowing */
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 22px;
    row-gap: 20px;
    align-items: end;        /* line inputs up even if a label wraps */
}
.fs-fieldset-title {
    display: none;          /* heading is already shown above the form */
}
.fs-field {
    min-width: 0;           /* key fix: stops long values from widening a column */
    display: flex;
    flex-direction: column;
}
.col-span-full {
    grid-column: 1 / -1;
}
.fs-label {
    color: #2b2b2b;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 7px;
    letter-spacing: .2px;
}
.fs-input {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 0 15px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    background: #fafafa;
    color: #2b2b2b;
    font-size: 15px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.fs-input::placeholder {
    color: #9a9a9a;
}
.fs-input:focus {
    outline: none;
    background: #fff;
    border-color: #ff5a00;
    box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.12);
}
.fs-checkbox-list {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    margin-top: 7px important!;
}
.fs-label:has(+ .fs-checkbox-list) {
    margin-bottom: 0;
}
.fs-checkbox-field {
    display: flex;
    align-items: flex-start;
    column-gap: 11px;
}
.fs-checkbox-wrapper {
    display: flex;
    align-items: flex-start;
}
.fs-checkbox {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 7px !important;        /* drop the box past the label's half-leading so its top meets the text cap-top */
    border: 1px solid #cfcfcf;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.fs-checkbox:checked {
    background-color: #ff5a00;
    border-color: #ff5a00;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.fs-checkbox:focus-visible {
    outline: 3px solid rgba(255, 90, 0, 0.35);
    outline-offset: 0;
}
.fs-checkbox-field .fs-label {
    margin-bottom: 2px;
    cursor: pointer;
}
.fs-description {
    color: #777;
    font-size: 13px;
    margin: 0;
    line-height: 1.45;
}
.fs-button-group {
    margin-top: 26px;
    text-align: center;
}
.fs-button {
    background: linear-gradient(to right, #ef0b00, #ff7e00);
    color: #fff;
    border: 0;
    border-radius: 30px;
    height: 54px;
    padding: 0 50px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .3px;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.fs-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(239, 11, 0, 0.3);
}
@media screen and (max-width: 600px) {
    .fs-form {
        padding: 28px 22px;
    }
    .fs-form fieldset {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}


/* ================ Preloader (status message) ================== */
.status-mes {
    background: none;
    left: 0;
    margin: 0;
    text-align: center;
    top: 65%;
}


/* ================ Check list (feature / output bullets) ================== */
.check-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.check-list li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 14px;
    line-height: 1.6;
}
.check-list li:before {
    content: "\f00c"; /* font-awesome check */
    font-family: "FontAwesome";
    position: absolute;
    left: 0;
    top: 1px;
    color: #6c4cf1;
}
.check-list.check-list-light li,
.check-list.check-list-light li:before {
    color: #fff;
}