@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.0/css/all.min.css');
@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-thin-rounded/css/uicons-thin-rounded.css');
@import url('https://cdn-uicons.flaticon.com/2.6.0/uicons-regular-rounded/css/uicons-regular-rounded.css');



body{
    font-size: 18px;
    color: #222222;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: .5px;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    background: #fff;
}
.wrapper{
    overflow-y: hidden;
}
.main-header{
    display: inline-block;
    width: 100%;
    background: #0086e7;
    padding: 0;
    position: relative;
    z-index: 999; 
}
h1, h2, h3, h4, h5, h6{
    padding: 0;
    margin: 0;
    font-weight: 600;
}
.main-content{
    position: relative !important;
}
.content-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../image/content-bg.png") no-repeat center;
    background-position: center !important;
    background-size: cover !important;
    z-index: 1;
}
.demo-2 .content-background {
    background: url("../image/content-bg-2.png") no-repeat center;
}
.demo-2 .content-background::before {
    opacity: .3;
}
.content-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    z-index: -1;
}
.section-title span{
    color: #0086e7;
    font-family: "Gloria Hallelujah", cursive;
}
.form-title span{
    color: #0086e7;
    font-family: "Gloria Hallelujah", cursive;
}
.text-btn2 i {
    margin-bottom: 20px !important;
    display: block;
    color: #faa71c;
}
.text-btn2 {
    display: block;
    text-align: center;
}
.text-btn2 span {
    display: block;
    line-height: 1.2;
}

.demo .button-wrap.width50 a {
    height: 175px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
}
.content-wrapper{
    max-width: 680px;
    width: 100%;
    margin: auto;
    padding: 50px 15px 50px;
}
.header-title .logo{
    padding: 10px 0px 5px;
}
.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.logo img {
    width: 160px;
    margin: auto;
}
.cta-wrapper {
    /* background: #fff; */
    border-radius: 30px;
}
.cta-button,
.cta2-button{
    font-size: 24px;
    font-weight: 400;
    padding: 15px;
    text-transform: capitalize;
    background-color: #0086e7;
    border:1px solid #0086e7;
    color: white;
    line-height: 18px;
    text-decoration: none;
    display:block;
    z-index: 1;
    transition: all .5s ease !important;
    border-radius: 24px;
    overflow: hidden;
}
.demo .cta2-button{
    height: 175px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cta-button{
    position: relative;
}
.cta-button .text-btn,
.cta2-button .text-btn{
    display: flex;
    text-decoration: none;
    align-items: center;
    justify-content:center;
    gap: 10px;
    list-style: 36px;
    font-weight: 600;
}
.cta-button .text-btn i {
    padding-top: 4px;
}
.cta-button p,
.cta2-button p{
    margin: 10px 0px 0px;
    font-size: 14px;
    line-height: 24px;
    text-align: center;
}
.cta-button:hover {
    background-color: #faa71c !important;
    color: #fff !important;
}
.cta-button:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    z-index: -1;
    border-radius: 24px;
    width: 100%;
}
.cta-button:after {
    background-color: #faa71c;
}
.cta-button:hover:after, 
.cta-button:active:after, 
.cta-button:focus:after {
    height: 100%;
}
.main-content {
    display: flex;
    align-items: center;
    /* height: calc(100vh - 190px); */
}
.demo-2 .button-wrap{
    margin-bottom: 30px;
}
.footer-icons {
    list-style: none;
    padding: 0;
    margin: 0;
}
.section-title{
    text-align: center;
    margin-bottom: 20px;
    font-size: 26px;
    font-weight: bold;
    line-height: 1.3;
}
.footer-icons li a {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #222222;
    color: #222222;
    text-decoration: none;
    transition: all .3s ease !important;
}
.footer-icons li a:hover, 
.footer-icons li a:focus {
    color: #fff;
}
.footer-icons li a.facebook:hover, 
.footer-icons li a.facebook:focus {
    -webkit-box-shadow: 0 0 15px 30px #4267b2 inset;
    box-shadow: 0 0 15px 30px #4267b2 inset;
}
.footer-icons li a.twitter:hover, 
.footer-icons li a.twitter:focus {
    -webkit-box-shadow: 0 0 15px 30px #1da1f2 inset;
    box-shadow: 0 0 15px 30px #1da1f2 inset;
}
.footer-icons li a.google:hover, 
.footer-icons li a.google:focus {
    -webkit-box-shadow: 0 0 15px 30px #db4437 inset;
    box-shadow: 0 0 15px 30px #db4437 inset;
}
.footer-icons li a.linkedin:hover, 
.footer-icons li a.linkedin:focus {
    -webkit-box-shadow: 0 0 15px 30px #0077b5 inset;
    box-shadow: 0 0 15px 30px #0077b5 inset;
}
.footer-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.main-footer {
    text-align: center;
    /* background:url("https://macraes.com/wp-content/uploads/2022/01/pattern-mob.jpg")center; */
    background: url("../image/content-bg.png")no-repeat center;
    width: 100%;
    padding: 20px 0px;
    background-size: cover;
}
.copywrite-text{
    padding: 0;
    margin:10px 0 0;
}
.contact-form-wrapper {
    padding: 30px 40px;
    background-color: #c4e0f5;
    border-radius: 30px;
}
.fs-24{
    font-size: 24px;
}
.fs-26{
    font-size: 26px;
}
.form-label {
    margin-bottom: 0;
    font-size: 1rem;
}
.form-control,
.form-select {
    width: 100%;
    height: 48px;
    padding: 10px 25px 10px 44px;
    border: none;
    border-radius: 95px;
    background-color: #ffffff;
}
.form-control:focus,
.form-select:focus{
    box-shadow: none !important;
}
.input-wrapper{
    position: relative;
}
.input-wrapper i {
    position: absolute;
    top: 14px;
    left: 15px;
}
.main-btn{
    font-size: 16px;
    font-weight: 400;
    padding: 15px 30px;
    text-transform: capitalize;
    background-color: #0086e7;
    border:1px solid #0086e7;
    color: white;
    line-height: 18px;
    text-decoration: none;
    display:block;
    z-index: 1;
    transition: all .5s ease !important;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
}
.main-btn:hover {
    background-color: #faa71c !important;
    color: #fff !important;
}
.main-btn:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    z-index: -1;
    border-radius: 24px;
    width: 100%;
}
.main-btn:after {
    background-color: #faa71c;
}
.main-btn:hover:after, 
.main-btn:active:after, 
.main-btn:focus:after {
    height: 100%;
}
.cta2-button p{
    text-transform: initial;
}
.video-wrapper video {
    border-radius: 24px;
    overflow: hidden;
    width: 100%;
}
#lightbox .lb-data .lb-close {
    width: 20px;
    height: 20px;
    background-size: contain;
}
#lightbox .lb-data .lb-caption {
    font-size:16px;
    font-weight: 600;
    line-height: 1em;
}

.thankyou-image-wrap img {
    width: 59%;
    margin: 0px auto;
    display: block;
}
/*------------Demo 2 Css-------------*/
.demo-2 .button-wrap,
.demo .button-wrap{
    position: relative;
}
.demo-2 .button-wrap:before,
.demo .button-wrap:before  {
    content: "";
    display: block;
    width: 100%;
    background-color: #faa71c;
    border-radius: 20px;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
}
.demo-2 .button-wrap:before {
    height: 98%;
    transform: rotate(358deg);
}
.demo .button-wrap:before  {
    height: 100%;
    transform: rotate(357deg);
}
.contant-info-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-right: 40px;
}
.address-wrap,
.email-wrap,
.phone-wrap{
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}
.address-wrap i,
.email-wrap i,
.phone-wrap i{
    color: #0086e7;
}
.team-listing {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
.team-listing-items,
.portfolio-wrapper .team-listing-items {
    flex: 0 0 30%;
    width: 30%;
}
.team-listing-items img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}
.portfolio-wrapper .team-listing-items img {
    height: 200px;
    object-position: top; 
}
.member-name {
    font-size: 18px;
}
.member-designation {
    font-size: 13px;
    font-weight: 400;
}
.team-detail {
    text-align: center;
}
.team-listing-items {
    margin-bottom: 10px;
}
.team-image-wrapper{
    position: relative;
}
.team-image-wrapper:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-4.37deg);
    -ms-transform: rotate(-4.37deg);
    transform: rotate(-4.37deg);
    border-radius: 20px;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
}
.team-listing-items:nth-child(odd) .team-image-wrapper:after {
    background-color: #faa71c;
}
.team-listing-items:nth-child(even) .team-image-wrapper:after {
    background-color: #0086e7;
}
.contact-page-wrap > div {
    margin-bottom: 20px;
}
.google-map{
    border-radius: 24px;
    overflow: hidden;
}

.slick-dots {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 15px 0px 0px;
    justify-content: center;
}
.slick-dots li{
    list-style: none;
}
.slick-dots li button {
    border: none !important;
    font-size: 0px !important;
    background: #0086e7;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    display: inline-block;
}
.slick-dots .slick-active button{
    background: #faa71c;
}
#lightbox  .lb-dataContainer {
    position: absolute;
    top: -35px;
    left: 0;
    right: 0;
}
/*.thankyou-image-wrap img {
    width: 100%;
}*/
.thankyou-heading {
    text-align: center;
    padding: 29px 0px;
    font-size: 22px;
}
.content-wrapper.thankyou-wrapper {
    height: calc(100vh - 190px);
    display: flex;
    align-items: center;
}
.slick-arrow {
    top: 40%;
    position: absolute;
    transform: translate(0px, -50%);
    background: none;
    border: none;
    z-index: 99;
    font-size: 36px;
    padding-top: 5px;
}

.slick-next {
    right: -25px;
}
.slick-prev {
    left: -25px;
}
@media (min-width:768px){
    .portfolio-slider .team-listing-items {
        padding: 0px 15px;
    }
    #lightbox {
        top: 10% !important;
    }
    #lightbox .lb-image {
        height: auto !important;
        width: 100% !important;
    }
    #lightbox  .lb-outerContainer {
        width: 70% !important;
        overflow: scroll;
        height: 80vh !important;
    }
    #lightbox  .lb-dataContainer {
        width: 70% !important;
    }
    .video-wrapper  video {
        height: 340px;
        object-fit: cover;
    }
}
@media (max-width:768px) {
    
    .box-grid-wrap .col-sm-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .main-content {
        height: auto !important;
    }
    .cta-button,
    .cta2-button{
        font-size: 18px;
    }
    .cta-button, .cta-button:after {
        border-radius: 15px;
    }
    .copywrite-text {
        padding: 0 10px;
        margin: 10px 0 0;
    }
    .content-wrapper {
        padding: 15px 15px 15px;
    }
    .demo-2 .button-wrap{
        margin-bottom: 25px;
    }
    .text-btn2 i {
        margin-bottom: 10px !important;
        display: block;
        font-size: 24px;
    }
}

@media (max-width:560px) {
    .demo .button-wrap.width50 a {
        height: 125px;
        margin-bottom: 25px;
    }
    .contact-form-wrapper {
        padding: 30px 20px;
        border-radius: 15px;
    }
    .video-wrapper video{
        border-radius: 15px;
    }
    .contant-info-wrapper {
        margin-right: 0px;
        font-size: 16px;
        display: block;
    }
    .contant-info-wrapper .info-seprator{
        display: none;
    }
    .contact-page-wrap {
        font-size: 16px;
    }
    .cta-button, 
    .cta2-button {
        font-size: 16px;
    }
    .member-name {
        font-size: 14px;
    }
    .team-listing {
        gap: 15px;
    }
    .portfolio-slider .team-listing {
        gap: 8px;
    }
    .demo-2 .button-wrap:before, 
    .demo .button-wrap:before {
        transform: rotate(355deg);
    }
    
    .main-btn {
        width: 100%;
    }

    .fs-26,
    .form-title {
        font-size: 24px;
    }
    .team-image-wrapper:after {
        transform: rotate(354deg);
    }

    .portfolio-btn {
        width: 100%;
        padding: 4px;
        font-size: 10px;
    }
    
    .section-title {
        font-size: 24px;
    }
    .video-wrapper  video {
        height: 200px;
        object-fit: inherit;
    }
    .portfolio-wrapper .team-listing-items img {
        height: 110px;
        object-position: top; 
    }
    .portfolio-slider .team-listing-items {
        padding: 0px 6px;
    }
    #lightbox .lb-image {
        height: auto !important;
        width: 100% !important;
    }
    .address-wrap, .email-wrap, .phone-wrap {
        justify-content: center;
    }
    #lightbox {
        top: 50px !important;
    }
    #lightbox .lb-outerContainer,
    #lightbox .lb-dataContainer {
        width: 80% !important;
    }
    #lightbox .lb-data .lb-caption {
        font-weight: 500;
    }
}