@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600;700;900&family=Titillium+Web:wght@400;600;700;900&display=swap');

/* Author Custom Styles */

body {
    line-height: 30px;
    font-size: 20px;
    background: #fff;
    color: #000000;
    font-weight: 400;
    font-family: 'Roboto Slab', serif;
    overflow-x: hidden;
}

h1{
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
  
}

h1 span{
    font-family: 'Roboto Slab', serif;
}

h2, h3, h4, h5{
    font-family: 'Roboto Slab', serif;
    font-weight: 600;
}

h2 span, h3 span, h4 span, h5 span{
    font-family: 'Roboto Slab', serif;
    font-weight: 600;
}

p, ul{
    margin: 0px;
    margin-bottom: 20px;
}

a, a:hover, a:visited, a:active, a:focus{
  color: inherit;
  text-decoration: none;
}

.btn{
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    background: linear-gradient(93deg, #344FA2 0%, rgba(52, 79, 162, 0.51) 50.15%, #344FA2 102.44%);
    color: #fff;
    font-size: 20px;
    text-transform: uppercase;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    padding: 11.2px 30px;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}

a.btn{
    color: #fff;
}

.btn:hover{
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    color: #fff !important;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.5);
}

.btn:focus{
    outline: none;
    box-shadow: none !important;
}



/* * Section */
.section {
    padding-top: 100px;
    text-align: left;
}
.section h2{
    font-family: 'Roboto Slab', serif;
    font-weight: 600;
    margin-bottom: 20px;
    color: inherit;
    font-size: 48px;
}

.section h2 span{
    font-size: 18px;
    font-weight: 600;
    font-family: 'Roboto Slab', serif;
}
.section h2:first-child{
    margin-top: 0px;
    margin-bottom: 20px;
    color: inherit;
}

.section p:last-child, .section ul:last-child{
    margin-bottom: 0px;
}

.section-padding{
    padding: 0px 100px;
}
.no-padding{
    padding: 0px 0px;
}
.no-margin{
    margin: 0px;
}



/* header */


header{
    width: 100%;
    position: fixed;
    z-index: 10;
    opacity: 1;
    top: 0;
    transition: 0.3s ease-in-out;
    background-color: transparent;
}

header .navbar{
    background: linear-gradient(90deg, #5A76CB 0%, #213779 100%);
    position: relative;
}

header .header-padding{
    padding-left: 100px;
    padding-right: 0px;
}


header .navbar-brand {
    margin-right: 0px !important;
    background: #fff;
    padding: 30px 10px;
    position: absolute;
    top: 0px;
    box-shadow: 0px 2px 30px rgba(0 0 0 /40%);
}

header .navbar-brand img.mobile{
    display: none;
}

header .navbar-brand img{
    width: 200px;
}

.navbar-nav{
    margin-bottom: 0px;
    border-radius: 0px;
    min-height: 30px;
    border: none;
    padding: 0px 0px;
    position: relative;
    transition: ease 0.5s;
}

.navbar-nav>li {
    padding: 15px 44px;
    font-size: 20px;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 600 !important;
    transition: 0.3s ease;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -o-transition: 0.3s ease;
}


/* .navbar-nav>li.phone {
    background: #fff;
    color: #344FA2 !important;
    display: block;
    padding: 10px 20px;
    text-align: center;
    font-size: 23px;
    font-weight: 700 !important;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border: 1px solid #fff;
    margin-right: 30px;
}

.navbar-nav>li.phone a{
    color: #344FA2;
}

.navbar-nav>li.phone:hover{
    background: transparent;
    color: #fff;
}

.navbar-nav>li.phone:hover a{
    color: #fff;
}

.navbar-nav>li.phone a::before{
    font-family: 'fontAwesome';
    content: '\f095';
    margin-right: 10px;
} */


.navbar-nav>li>a {
    color: #fff;
    padding: 6px 0px !important;
    transition: ease 0.3s;
    border-color: transparent;
}

.navbar-nav .nav-item .nav-link{
    color: #fff;
}


.navbar-nav>.active>a, .navbar-nav>.active>a:hover, .navbar-nav>.active>a:focus {
    color: #fff;
    background-color: transparent;
}
.navbar-nav>li>a:hover, .navbar-nav>li>a:focus {
    color: #fff;
    background-color: transparent;
}

header .navbar ul{
    list-style-type: none;
    padding-right: 0px;
}

header .navbar ul.contact-info li.quote a::before{

    content: '\f075';

}

/* dropdown */

.dropdown:hover .dropdown-menu{
    display: block;
    background: #fff;
    color: #000;
}



.navbar-expand-xl .navbar-nav .dropdown-menu {
    padding: 0;
    top: 75px;

}
header .navbar .dropdown .dropdown-menu li{
    margin-top: 0;
}

header .navbar .dropdown .dropdown-menu li a.dropdown-item{
    background: #fff;
    background-color: #fff;
    color: #000;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}

header .navbar .dropdown .dropdown-menu li a.dropdown-item:hover{
    background: linear-gradient(93deg, #344FA2 0%, rgba(52, 79, 162, 0.51) 50.15%, #344FA2 102.44%) !important;
    color: #fff;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}


.navbar-expand-xl .navbar-nav .dropdown-menu .dropdown-item:hover{
    background: linear-gradient(93deg, #344FA2 0%, rgba(52, 79, 162, 0.51) 50.15%, #344FA2 102.44%) !important;
    color: #fff !important;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}

.navbar-toggle {
    border-color: #000;
    margin: 25px 15px;
    background-color: #fff;
}


.navbar-toggle {
    border-color: #000;
    margin: 25px 15px;
    background-color: #fff;
}

.navbar-toggle:hover,
.navbar-toggle:focus {
    background-color: #fff;
}

.navbar-toggle .icon-bar {
    background-color: #131313;
}

.navbar-toggler {
    background-color: #fff;
    border: 2px solid #131313;
    border-radius: 5px;
    font-size: 0.8rem;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler-icon {
    display: GRID;
    width: 1.5em;
    height: 3px;
    background-size: 100%;
    background: #000;
    height: 2px;
    margin: 5px 1px;
}

.hvr-underline-from-center {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow: hidden;
}
.hvr-underline-from-center:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 51%;
    right: 51%;
    bottom: 0;
    background: #fff;
    height: 4px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
    left: 0;
    right: 0;
}


/** Sticky */

header.sticky{
    position: fixed;
}

header.sticky-mobile{
    background: rgba(0, 0, 0, 0.8);
}

header.sticky .header-padding{
    padding-top: 0px !important;
}

header.sticky .navbar{
    box-shadow: 0 5px 20px  rgba(0,0,0,.3);
}

header.sticky .navbar-brand img{
    width: 150px;
    transition: 0.3s ease;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    -ms-transition: 0.3s ease;
    -o-transition: 0.3s ease;
}

/* heading background text */

.background-text {
    position: relative;
}
.background-text::before { 
    content: "Company"; 
    position: absolute;
    text-transform: uppercase;
    top: -25px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; 
    font-size: 150px; 
    font-family: 'Titillium Web', sans-serif;
    color: #000;
    background: linear-gradient(180deg, #344FA2 0%, rgba(52, 79, 162, 0.04) 100%); 
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    opacity: 0.1; 
    padding: 40px 0px;
}

.background-text.home-services::before{
    content: "What We Do";
}

.background-text.home-process::before{
    content: "Process";
}

.background-text.home-blogs::before{
    content: "Blogs";
}

.background-text.inner-service-choose-us::before{
    content: "Why Choose Us";
}

.background-text.projects-text::before{
    content: "Projects";
}

.background-text.about-intro-text::before{
    content: "Who We Are";
}

.background-text.contact-info-text::before{
    content: "Contact Us";
}

.background-text.item-one-text::before {
    content: "01";
    padding: 80px 0px;
    left: 123px;
    top: -100px;
    font-size: 95px;
    color: rgba(0, 0, 0, 0.05);
}

.background-text.item-one-text.two::before{
    content: "02";
}

.background-text.item-one-text.three::before{
    content: "03";
}

.background-text.item-one-text.four::before{
    content: "04";
}


/* title-area */

.title-area{
    background: url('../img/single-project-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 160px;
}

.title-area .content-area{
    padding: 54px 0px;
    color: #fff;
}

.title-area .content-area h1{
    font-size: 60px;
    text-transform: uppercase;
    text-shadow: 0px 15px 20px rgba(0 0 0 / 70%);
}

.title-area .content-area span{
    margin: 0px 5px;
}

.title-area .content-area a:hover{
    text-decoration: underline;
}



/* home-banner */

.home-banner{
    background: url('../img/home/ottawa-banner.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 160px;
}

.home-banner .content-area .content p.sub-heading {
    font-size: 43px;
    font-weight: 700;
    letter-spacing: 5px;
    text-align: center;
    line-height: 1.5;
    padding-right: 125px;
    text-shadow: 10px 4px 19px rgba(0, 0, 0, 0.99);
}

.home-banner .content-area {
    padding: 100px 45px;
}

.home-banner .content{
    padding: 50px 75px;
    color: #fff;
}

.home-banner .content h1 {
    text-transform: uppercase;
    font-size: 124px;
    line-height: 95px;
    font-weight: 700;
    text-shadow: 0px 4px 19px rgba(0, 0, 0, 0.99);
    letter-spacing: 5px;
}

.home-banner .content h1 span{
    font-size: 20px;
}

.home-banner .content h1 span.heading-one{
    font-size: 43px;
    font-weight: 500;
}
.home-banner .content h1 span.heading-two{
    font-size: 73px;
    font-weight: 500;
}

.home-banner .form-area, .form-area-mobile {
    background: linear-gradient(93deg, #344FA2 -0.85%, #607CD2 52.73%, #142968 100%);
    padding: 30px 30px 5px 30px;
    border-radius: 10px;
}
.home-banner .form-area .form .form-group .form-control, .form-area-mobile .form-area .form .form-group .form-control {
    height: 60px;
    background-color: #fff !important;
    width: 100%;
    border: 1px solid #4662B6;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    margin-top: 15px;
    padding: 15px 25px 15px 245px;
}

.home-banner .form-area .form .form-group .form-control.msg, .form-area-mobile .form-area .form .form-group .form-control.msg{
    
   
    padding: 15px 25px;
}

.home-banner .form-area .form .form-group .form-control.name, .form-area-mobile .form-area .form .form-group .form-control.name {
    background: url(../img/user.png);
    background-repeat: no-repeat;
    padding: 25px 25px;
    background-size: auto;
    background-position: 95% 45%;
}
.home-banner .form-area .form .form-group .form-control.email, .form-area-mobile .form-area .form .form-group .form-control.email {
    background: url(../img/email.png);
    background-repeat: no-repeat;
    padding: 25px 25px;
    background-size: auto;
    background-position: 95% 45%;
}
.home-banner .form-area .form .form-group .form-control.phone, .form-area-mobile .form-area .form .form-group .form-control.phone {
    background: url(../img/phone.png);
    background-repeat: no-repeat;
    padding: 25px 25px;
    background-size: auto;
    background-position: 96% 45%;
}
.home-banner .form-area .input-group .btn, .form-area-mobile .form-area .input-group .btn {
    position: relative;
    z-index: 2;
    padding: 8px 12px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    top: -35px;
    left: 5px;
}
.home-banner .form-area .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback), .form-area-mobile .form-area .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){
    
    margin-bottom: -20px;
}
.home-banner .form-area h2, .form-area-mobile .form-area h2{
    color: #fff;
    text-align: center;
}

.home-banner .form-area .button-area, .form-area-mobile .form-area .button-area{
    text-align: center;
}
.home-banner .form-area .button-area .btn-submit, .form-area-mobile .form-area .button-area .btn-submit {
    width: unset;
    background: #fff;
    color: #000;
  
}

.home-banner .form-area .button-area .btn-submit:hover, .form-area-mobile .form-area .button-area .btn-submit:hover{
    color:#000 !important;
}

.home-banner .form-area .wpcf7-not-valid-tip, .form-area-mobile .form-area .wpcf7-not-valid-tip{
    color: #fff;
    
}
.home-banner .content p{
    font-size: 32px;
    text-shadow: 0px 15px 20px rgba(0 0 0 / 70%);
}

.home-banner .content .btn-more{
    background: linear-gradient(93deg, #344FA2 0%, rgba(52, 79, 162, 1) 50.15%, #344FA2 102.44%);
}



/* home-about */

.home-about .content-area{
    padding-left: 30px;
}

.home-about .content-area ul.nav-tabs{
    margin-top: 50px;
    border: none;
}

.home-about .content-area .nav-tabs .nav-item.show .nav-link, .home-about .content-area .nav-tabs .nav-link.active{
    color: #fff;
    border: none;
}

.home-about .content-area .nav-tabs .nav-link:focus, .home-about .content-area .nav-tabs .nav-link:hover{
    border-color: none;
}

.home-about .content-area .nav-tabs .nav-link.active {
    border: none;
    background: #344FA2;
    color: #fff;
    padding: 10px;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
}

.home-about .content-area .nav-tabs .nav-link{
    border: none;
    background: #F2F2F2;
    color: #000;
    padding: 10px;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    margin-right: 20px;
    margin-bottom: 30px;
    width: 150px;
}

.home-about .content-area .btn-more{
    background: #344FA2;
}

.home-about .content-area .btn-more:hover{
    background: linear-gradient(93deg, #344FA2 0%, rgba(52, 79, 162, 0.51) 50.15%, #344FA2 102.44%);
}

.home-about .content-area .home-tab-content ul{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0px;
}

.home-about .content-area .home-tab-content ul li{
    width: 50%;
    margin-bottom: 15px;
}

.home-about .content-area .home-tab-content ul li.last{
    width: 100%;
}

.home-about .content-area .home-tab-content ul li::marker{
    color: #344FA2;
}



.home-about .image-area img{
    opacity: 0.5;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}

.home-about .image-area img:hover{
    opacity: 1;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}

/* home-renovation */

.home-renovation .content-area{
    padding: 100px;
    background: linear-gradient(79deg, #344FA2 -1.43%, #344FA2 99.05%);
    color: #fff;
    margin-right: -50px;
}

.home-renovation .content-area .button-area{
    display: flex;
    gap: 20px;
}

.home-renovation .content-area .button-area .btn-call{
    color: #000;
    background: #fff;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
}

.home-renovation .content-area .button-area .btn-more img{
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}

.home-renovation .content-area .button-area .btn-more:hover img{
    transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.5);
}

.home-renovation .content-area .button-area .btn-call:hover, .home-renovation .content-area .button-area .btn-more:hover{
    color: #000 !important;
}

.home-renovation .content-area .button-area .btn-call::before{
    font-family: 'fontAwesome';
    content: '\f095';
    margin-right: 10px;
}

/* home-services */

.home-services .content-area{
    margin-bottom: 50px;
}


 .home-services .item{
    position: relative;
    align-items: center;
    margin-bottom: 30px;
    box-shadow: -2px 6px 25px 0px rgba(0, 0, 0, 0.15);
}  

.home-services .item .image-area img{
    /* width: 100%; */
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.home-services .item .content {
    background: rgb(52 79 162 / 70%);
    color: #fff;
    display: none;
    position: absolute;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.home-services .item:hover .content {
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.home-services .item .content h3{
    font-size: 24px;
}

.home-services .item .content p{
    font-size: 16px;
    margin-bottom: 9px;
}

.home-services .item .content .btn-more{
    font-size: 16px;
}

.home-services .item .content .btn-more::after{
    font-family: 'fontAwesome';
    content: '\f061';
    margin-left: 15px;
}

/* home-faqs */

.home-faqs{
    background: #F2F2F2;
    padding: 100px 0px;
    margin-top: 100px;
    margin-bottom: -100px;
}

.home-faqs .content-area{
    margin-bottom: 50px;
}

.home-faqs .accordion-button:not(.collapsed){
    color: #000;
    background-color: transparent;
    box-shadow: unset;
}

.home-faqs .accordion-button:not(.collapsed)::after{
    background-image: none;
    font-family: 'fontAwesome';
    content: '\f068';
}

.home-faqs .accordion-button::after{
    background-image: none;
    font-family: 'fontAwesome';
    content: '\2b';
}

.home-faqs .accordion-button{
    font-size: 20px;
    font-weight: 600;
    background: transparent;
}

.home-faqs h2.accordion-header{
    margin-bottom: 0px;
}

.home-faqs .accordion-item{
    background: transparent;
    border: none;
    border-bottom: 1px solid #D9D9D9;
}

.home-faqs .accordion-body p{
    font-size: 16px;
    color: #6E777D;
    padding-top: 0px;
}

/* home-redesign */

.home-redesign .content-area{
    background: #344FA2;
    color: #fff;
    margin-top: -200px;
    position: relative;
    padding: 30px;
}

.home-redesign .content-area h2{
    margin-bottom: 0px;
}

.home-redesign img{
    width: 100%;
}

/* home-our-projects */

.home-our-projects{
    background: url('../img/home/projects-bg.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 100px 0px;
}

.home-our-projects .counter-item{
    border-bottom: 1px solid #fff;
    padding-bottom: 100px;
}

.home-our-projects .item{
    color: #fff;
}

.home-our-projects .item .counter{
    display: flex;
    align-items: center;
}

.home-our-projects .item .counter{
    margin-bottom: 20px;
}

.home-our-projects .item .counter img{
    background: #fff;
    padding: 5px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    margin-right: 20px;
}

.home-our-projects .item .counter h2{
    margin-bottom: 0px;
}


/* projects-gallery */

.home-our-projects .projects-gallery{
    position: relative;
}

.home-our-projects .projects-gallery .content-area{
    margin-bottom: 50px;
    color: #fff;
}

.home-our-projects .projects-gallery .home-gallery .item{
    margin: 0px 15px;
}

.home-our-projects .projects-gallery .home-gallery .item .content{
    background: #000;
    padding: 10px 30px;
    margin-top: -100px;
    position: relative;
    opacity:0;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}

.home-our-projects .projects-gallery .home-gallery .item:hover .content{
    opacity: 1;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}

.home-our-projects .projects-gallery .owl-carousel .owl-dots{
    display: none;
}

.home-our-projects .projects-gallery .owl-carousel .owl-nav.disabled{
    display: block;
    position: absolute;
    top: -88px;
    right: 100px;
}

.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev {
    border: 1px solid #fff;
    width: 40px;
    height: 40px;
    margin: 0px 10px;
    color: #fff;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}

.owl-carousel .owl-nav button.owl-next:hover, .owl-carousel .owl-nav button.owl-prev:hover{
    background: #fff;
    color: #344FA2;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}

/* home-process */

.home-process .content-area{
    margin-bottom: 50px;
}

.home-process .process-items{
    border-top: 2px solid #344FA2;
}

.home-process .item{
    margin-top: 30px;
}

.home-process .item img{
    margin-bottom: 20px;
}

.home-process .item p{
    font-size: 16px;
    color: #6E777D;
}

.home-process .item h3{
    font-size: 24px;
}

/* home-testimonials */

.home-testimonials {
    background: #F2F2F2;
    padding: 100px 0 180px; /* Increased bottom padding even more */
    margin-bottom: 50px; /* Increased margin to create more separation */
    position: relative; /* Added position relative for better containment */
    z-index: 1; /* Ensure proper stacking context */
}

.home-testimonials .content-area {
    margin-bottom: 70px;
}

.home-testimonials .testimonial-slider {
    position: relative;
    padding: 0 15px; /* Added padding to ensure content stays within bounds */
}

.home-testimonials .testimonial-carousel {
    margin: 0 auto;
    overflow: visible; /* Allow items to be visible outside the carousel */
}

.home-testimonials .testimonial-item {
    padding: 15px;
}

.home-testimonials .testimonial-content {
    background: #FFF;
    padding: 40px 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    min-height: 280px; /* Increased minimum height to accommodate more content */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.home-testimonials .testimonial-content p {
    font-style: italic;
    margin-bottom: 25px;
    font-size: 18px;
    line-height: 1.6;
}

.home-testimonials .testimonial-content h4 {
    font-weight: 700;
    margin-bottom: 5px;
    font-size: 20px;
}

.home-testimonials .testimonial-content .rating {
    color: #344FA2;
    font-size: 18px;
}

.home-testimonials .owl-carousel .owl-dots {
    text-align: center;
    margin-top: 40px; /* Increased space for dots navigation */
    position: relative;
    z-index: 5;
}

.home-testimonials .owl-carousel .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
}

.home-testimonials .owl-carousel .owl-nav button.owl-prev {
    position: absolute;
    left: -30px;
}

.home-testimonials .owl-carousel .owl-nav button.owl-next {
    position: absolute;
    right: -30px;
}

/* Ensure the section after testimonials doesn't overlap */
.home-testimonials + .section {
    margin-top: 30px;
    position: relative;
    z-index: 0;
}

@media only screen and (max-width: 992px) {
    .home-testimonials {
        padding: 70px 0 150px; /* Adjusted for medium screens */
    }
    
    .home-testimonials .testimonial-content {
        min-height: 300px; /* Increased height for smaller screens */
    }
}

@media only screen and (max-width: 768px) {
    .home-testimonials {
        padding: 60px 0 200px; /* Significant increase for mobile to ensure visibility */
    }
    
    .home-testimonials .testimonial-content {
        min-height: 350px; /* Further increased height for mobile */
    }
    
    .home-testimonials .owl-carousel .owl-dots {
        margin-top: 50px; /* More space on mobile */
    }
}/* home-blogs */

.home-blogs .content-area{
    margin-bottom: 30px;
}


.home-blogs .item{
    margin-bottom: 30px;
}

.home-blogs .item .excerpt p.date{
    font-size: 16px;
    color: #6E777D;
    font-weight: 600;
    margin-top: 20px;
}

.home-blogs .item .excerpt p.date::before{
    font-family: 'fontAwesome';
    content: '\f073';
    margin-right: 10px;
}

.home-blogs .item .excerpt h3 {
    font-size: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 62px;
}

.home-blogs .item .excerpt .btn-more{
    background: #000;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    font-size: 16px;
    margin-top: 20px;
}

/* cta */

.cta .content-area h2{
    color: #344FA2;
    margin-bottom: 50px;
    font-size: 72px;
}

.cta{
    background: url('../img/home/cta-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0px;
    margin-top: 100px;
}

.cta .form-area .form-control{
    height: 52px;
    margin-top: 20px;
    border: none;
    border: 1px solid #4A64B3;
}

.cta .form-area textarea.form-control{
    height: 90px;
}

.cta .input-form{
    margin-bottom: 30px;
    border: 1px dashed #4A64B3;
    padding: 30px 0px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    background: #fff;
}


/* footer */

footer{
    background: linear-gradient(93deg, #344FA2 -0.85%, #607CD2 52.73%, #142968 100%);
    color: #fff;
}

footer .main-footer{
    padding-bottom: 50px;
}

footer .main-footer ul{
    padding-left: 20px;
}

footer .main-footer ul.contact li{
    word-break: break-all;
}

footer .main-footer .logo-area img{
    margin-bottom: 20px;
    width: 200px;
}

footer .main-footer .logo-area p{
    font-size: 18px;
}

footer .main-footer h3{
    border-bottom: 2px solid #fff;
    margin-bottom: 30px;
    width: fit-content;
}

footer .main-footer ul li{
    margin-bottom: 15px;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}

footer .main-footer ul li a{
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}

footer .main-footer ul li a:hover{
    text-decoration: underline;
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}

footer .main-footer ul.services{
    display: flex;
    flex-wrap: wrap;
}

footer .main-footer ul.services li{
    width: 50%;
}

footer .main-footer .contact-info ul.social{
    display: flex;
    list-style-type: none;
    padding: 0;
}

footer .main-footer .contact-info ul.social li{
    background: #fff;
    color: #344FA2;
    padding: 5px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    text-align: center;
}


/* copyright area */

footer .copyright{
    background: #000;
}


footer .copyright .content {
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
  
footer .copyright .content span {
    font-size: 16px;
    color: #fff;
    font-weight: 400;
}
  
footer .copyright .reach-logo {
    width: 150px;
}

/* inner-service-page */

.inner-service-intro p{
    color: #6E777D;
}

.inner-service-intro .image-area{
    margin-bottom: 30px;
}

.inner-service-intro .active-services .btn-services{
    background: #F9F8FB;
    padding: 10px 20px;
    width: 100%;
    margin-bottom: 20px;
    color: #191717;
    font-size: 24px;
    text-align: left;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    text-transform: capitalize;
}


.inner-service-intro .active-services .btn-services.active{
    background: #344FA2;
    color: #fff;
}

.inner-service-intro .active-services .btn-services:hover{
    background: #344FA2;
}

/* inner-service-cta */

.inner-service-cta{
    background: url('../img/home-renovation/get-started-bg.png');
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding: 45px 0px;
    margin-top: 100px;
}

.inner-service-cta.contact{
    background: url('../img/contact-us/cta-bg.png');
}

.inner-service-cta .content-area{
    color: #fff;
}

.inner-service-cta .content-area .btn-contact{
    background: #fff;
    color: #000;
}

.inner-service-cta .content-area .btn-contact:hover{
    color: #000 !important;
}

/* inner service choose us */

.inner-services-choose-us .card-item{
    display: flex;
}

.inner-services-choose-us .cards-area{
    margin-top: 50px;
}

.inner-services-choose-us .cards-area .item{
    background: #fff;
    padding: 30px;
    box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

.inner-services-choose-us .cards-area .item img{
    margin-bottom: 20px;
}

.inner-services-choose-us .cards-area .item p{
    color: #6E6E6E;
}

/* inner-services-bottom-content */

.inner-services-bottom-content .content-area p{
    color: #6E777D;
}

.inner-services-bottom-content .content-area ul li{
    margin-bottom: 15px;
}

/* projects page */

.projects-info .content-area{
    margin-bottom: 50px;
}

.projects-info .item{
    margin-bottom: 30px;
}

.projects-info .item .content{
    border-top: 5px solid #000;
    background: #344FA2;
    box-shadow: -2px 6px 25px 0px rgba(0, 0, 0, 0.15);
    padding: 10px;
    width: 100%;
    color: #fff;
}

/* who we are page */

.about-intro .about-intro-detail{
    margin-top: 50px;
}

.about-intro .about-intro-detail .image-area img{
    border: 5px solid #344FA2;
}

.about-intro .about-intro-detail .content-area ul.services{
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.about-intro .about-intro-detail .content-area ul.services li{
    width: 50%;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.about-intro .about-intro-detail .content-area ul.services li img{
    margin-right: 10px;
}

.about-intro .about-intro-detail .content-area .counter-area .item h3{
    font-size: 45px;
    font-weight: 900;
    text-transform: uppercase;
    color: #344FA2;
}

.about-intro .about-intro-detail .content-area .counter-area .item p{
    text-transform: uppercase;
}

/* about-quote */

.about-quote .item{
    background: url('../img/who-we-are/qoute-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 0px 50px 20px;
    position: relative;
}

.about-quote .item .image-area img{
    margin-top: -50px;
}


.about-quote .item .content-area a{
    font-size: 43px;
    font-weight: 900;
}

.about-quote .item .content-area a span{
    font-size: 25px;
    text-transform: uppercase;
}

.about-quote .item .content-area{
    color: #fff;
}


/* about-0certificaton */
.about-certifications .owl-carousel .owl-dots{
    text-align: center;
}
.about-certifications .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
    border-radius: 50%;
    background: #607CD2;
    color: #607CD2 ;
    border: 1px solid;
    padding: 7px !important;
    font-size: 16px;
    margin: 0px 5px;
}

.about-certifications .owl-carousel button.owl-dot.active{
    background: #344FA2;
}


/* about-design */

.about-design .content-area ul.services{
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.about-design .content-area ul.services li{
    width: 50%;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.about-design .content-area ul.services li img{
    margin-right: 10px;
}

/* contact us page */

.contact-info .content-area{
    margin-bottom: 50px;
}

.contact-info .contact-cards{
    display: flex;
}
.contact-info a{
    width: 100%;
}

.contact-info .item{
    background: #344FA2;
    padding: 30px;
    color: #fff;
    width: 100%;
}

.contact-info .item img{
    margin-bottom: 10px;
    width: 70px;
}

.contact-info .item img.image-bottom{
    width: unset;
}

.contact-info a{
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}

.contact-info a:hover .item{
    background: linear-gradient(93deg, #344FA2 0%, rgba(52, 79, 162, 0.51) 50.15%, #344FA2 102.44%);
    box-shadow: 0px 5px 40px rgba(0, 0, 0, 0.7);
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}

/* form-area */

.form-area .form .form-group .form-control{
    height: 60px;
    border: 1px solid #4662B6;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    margin-top: 20px;
}

.form-area .form .form-group textarea.form-control{
    height: 120px;
}

.form-area .form .form-box{
    border: 1px dashed #4662B6;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    padding: 20px 0px;
    margin-bottom: 20px;
}

.form-area .form .button-area .btn-submit{
    width: 100%;
}

.codedropz-upload-handler {
    border: 1px dashed #4A64B3 !important;
    margin-bottom: 30px !important;
    background: #fff !important;
}

.wpcf7-spinner {
    display: grid !important;
}

/* single blog */

.title-area.blog-title .content-area h1 {
    font-size: 40px;
    text-transform: uppercase;
}

.blog-post .content-area img{
    max-width: 100%;
    height: auto;
    margin-bottom: 30px;
}

.blog-post .content-area a{
    color:#344FA2;
    font-weight: 600;
}

.blog-post .content-area a:hover{
    text-decoration: underline;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #fff;
    opacity: 1;
    height: 60px;
    border: 1px dashed #4662B6;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    margin-bottom: 20px;
}
.input-group .btn {
    position: relative;
    z-index: 2;
    padding: 14px 30px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    top: 20px;
}

.cta .input-group .btn{
    top: unset;
}

.cta .input-group{
    margin-top: 20px !important;
}

.input-group .btn:hover{
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    box-shadow: none !important;
    background: linear-gradient(93deg, #344FA2 0%, rgba(52, 79, 162, 0.51) 50.15%, #344FA2 102.44%);
}

.input-group .btn::before {
    content: '\f0ee';
    font-family: 'fontAwesome';
    margin-right: 15px;
}

.input-group .btn span {
    display: none;
}
.input-group .btn::after {
    content: 'Choose A File';
}

footer .phone-fixed-icon {
    position: fixed;
    bottom: 15px;
    right: 15px;
    display: none;
    transition: ease .3s;
    z-index: 10000;
    max-width: 70px;
    font-size: 50px;
    color: #fff;
}

footer .phone-fixed-icon i {
    background: linear-gradient(93deg, #344FA2 0%, rgba(52, 79, 162, 0.51) 50.15%, #344FA2 102.44%);
    padding: 5px 7px;
    border-radius: 5px;
}

footer .phone-fixed-icon {
    display: none;
}


 /* Flip Container Base Styling */
.flip-container {
    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    background: transparent;
    width: 100%;
    height: 400px; /* Increased height for better visibility */
    margin-bottom: 30px;
    position: relative;
}

/* Flipper element - handles the rotation */
.flipper {
    transition: transform 1.5s;
    -webkit-transition: -webkit-transform 1.5s;
    -moz-transition: -moz-transform 1.5s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    position: relative;
    width: 100%;
    height: 100%;
}

/* Hide back of elements during flip */
.front, .back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* Front is initially visible */
.front {
    z-index: 2;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}

/* Back is initially hidden with 180deg rotation */
.back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

/* Rotate the flipper when JavaScript applies transform */
.flipper.flipped {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
}

/* Ensure images fill their containers properly */
.front img, .back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Media query for mobile responsiveness */
@media (max-width: 768px) {
    .flip-container {
        height: 300px;
    }
}

/*  image-comparison-slider */


.cd-image-container {
    position: relative;
    margin: 0em auto;
}
.cd-image-container img {
    display: block;
    width: 100%;
}

.cd-image-label {
    position: absolute;
    font-weight: 500;
    letter-spacing: 1px;
    top: 0;
    right: 16px;
    color: #ffffff;
    padding: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    opacity: 0;
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s;
    -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s;
    transition: transform 0.3s 0.7s, opacity 0.3s 0.7s;
}
.cd-image-label.is-hidden {
    visibility: hidden;
}
.is-visible .cd-image-label {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.cd-resize-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    overflow: hidden;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.cd-resize-img img {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    height: 100%;
    width: auto;
    max-width: none;
}
.cd-resize-img .cd-image-label {
    right: auto;
    left: 0;
}
.is-visible .cd-resize-img {
    width: 50%;
    /* bounce in animation of the modified image */
    -webkit-animation: cd-bounce-in 0.7s;
    -moz-animation: cd-bounce-in 0.7s;
    animation: cd-bounce-in 0.7s;
}

@-webkit-keyframes cd-bounce-in {
    0% {
        width: 0;
    }
    60% {
        width: 55%;
    }
    100% {
        width: 50%;
    }
    }
    @-moz-keyframes cd-bounce-in {
    0% {
        width: 0;
    }
    60% {
        width: 55%;
    }
    100% {
        width: 50%;
    }
    }
    @keyframes cd-bounce-in {
    0% {
        width: 0;
    }
    60% {
        width: 55%;
    }
    100% {
        width: 50%;
    }
}
.cd-handle {
    position: absolute;
    height: 44px;
    width: 44px;
    /* center the element */
    left: 50%;
    top: 50%;
    margin-left: -22px;
    margin-top: -22px;
    border-radius: 50%;
    background: #213779 url("https://images.clickfunnels.com/09/a714400d3211e7a0bd7d7140585054/cd-arrows.svg") no-repeat center center;
    cursor: move;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0) scale(0);
    -moz-transform: translate3d(0, 0, 0) scale(0);
    -ms-transform: translate3d(0, 0, 0) scale(0);
    -o-transform: translate3d(0, 0, 0) scale(0);
    transform: translate3d(0, 0, 0) scale(0);
}
.cd-handle.draggable {
    /* change background color when element is active */
    background-color: #445b7c;
    }
    .is-visible .cd-handle {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0) scale(1);
    -moz-transform: translate3d(0, 0, 0) scale(1);
    -ms-transform: translate3d(0, 0, 0) scale(1);
    -o-transform: translate3d(0, 0, 0) scale(1);
    transform: translate3d(0, 0, 0) scale(1);
    -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s;
    -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s;
    transition: transform 0.3s 0.7s, opacity 0s 0.7s;
}
  

.home-blogs .prev-next-posts{
    margin-top: 30px !important;
}
.prev-posts-link.pagination-link a, .next-posts-link.pagination-link a {
    background: linear-gradient(93deg, #344FA2 0%, rgba(52, 79, 162, 0.51) 50.15%, #344FA2 102.44%);

   margin-top: 50px;

    transition: 0.3s ease-in-out;

    -webkit-transition: 0.3s ease-in-out;

    -moz-transition: 0.3s ease-in-out;

    -ms-transition: 0.3s ease-in-out;

    -o-transition: 0.3s ease-in-out;

    padding: 16px 50px;

    color: #fff;
}

.prev-posts-link.pagination-link a:hover, .next-posts-link.pagination-link a:hover {
    background: #344FA2 !important;
    box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.5);
    transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;

    color: #ffffff;
 

    
}