* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    
}

.body {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    /*background-color:red;*/

}
.nav-link{
  
    transition: all .2s;

}

.carousel-control-next-icon {
    border: 2px solid white;
    border-radius: 50%;
    background: white;
}

.carousel-control-prev-icon {
    border: 2px solid white;
    border-radius: 50%;
    background: white;
}

#next2 {
    border: 2px solid white;
    border-radius: 50%;
    background: white;
    margin-top: 90px;
}

#next3 {
    border: 2px solid white;
    border-radius: 50%;
    background: white;
    margin-top: 180px;
} 

section.header{position: relative;}


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

.navbar {
    /* background: #242745; */
    width: 100%;
    padding: 0px 0px 15px 0px!important;
    position: absolute!important;
    z-index: 1;
    top: 2rem;
}
.navbar .container{border-bottom: 1px solid #ffffff36; padding-bottom: 20px;}

.navbar .navbar-nav .nav-item a {
    color: #fff; 
    font-weight: 300;
}

.navbar .navbar-nav .nav-item a:hover {
    color: #fff;
    font-weight: 600;
}

@keyframes changeLetter {
    0% {
        width: 0%;
    }

    50% {
        width: 100%;
    }
}

.navbar #navbarNav .navbar-nav {
    justify-content: end;
    gap:15px;
}

.navbar-toggler-icon {
    color: #fff;
}

.navbar .navbar-collapse {
    justify-content: end;

}

.navbar .navbar-collapse.show{    background: #242745;
    padding: 2rem 4rem;}

#carouselExampleIndicators {
    background-color: #242745;
    height: 1000px;
    overflow: hidden;
}

#carouselExampleIndicators img {
    width: 100%;
    /* height: 700px; */
    height: auto;
    opacity: 0.5;
}

div.transbox {
    position: absolute;
    color: #fff;
    top: 50%;
    left: 25%;
    transform:translate(-25%, -50%);
    
}

.transbox h1 {
    position: relative;
    color:#fff;
    font-weight: bold;
    font-size: 5rem;
    font-family: "Anonymous Pro", monospace;
    letter-spacing: 7px;
    overflow: hidden;
    /*border-right: 2px solid hsl(0, 0%, 80%);*/
    white-space: nowrap;
    /* animation: typewriter 4s steps(44) 1s 1 normal both, blinkTextCursor 500ms infinite; */
}
.navbar .navbar-brand{
        height: 100%;
        margin: 0;
        font-family: "Anonymous Pro", monospace;
        color: #fff!important;
        font-size: 1.7rem;
        font-weight: 600;
}

@keyframes typewriter {
    from {
        width: 0;
    }

    to {
        width: 710px;
    }
}

@keyframes blinkTextCursor {
    from {
        border-right-color: hsl(0, 0%, 80%);
    }

    to {
        border-right-color: transparent;
    }
}

div.transbox p {
    margin: 0;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 300;
}

/* div.transbox h1 {
    color: #fff;
    font-weight: 700;
    font-size: 72px;
    margin-top: -20px;
    letter-spacing: 10px;
} */

div.transbox button {
    color: #fff;
    font-weight:200;
    font-size: 1.6rem;
    border: none;
    background:none;
}

div.transbox button a {
    text-decoration: none;
    color:#fff;
}

div.transbox button:hover {
    background-color: transparent;
    border: 4px solid #000;

}

div.transbox button .divider {
    content: '';
    display: inline-block;
    background: #fff;
    margin: 0px 4px;
    height: 28px;
    width: 1px;
    vertical-align: top;
    margin-top: 10px;
}

.features-section {
    padding: 60px 0 80px;
}

.features-section .feature-content {
    text-align: center;
}

.feature-content h5 {
    color: #807b7b;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 40px;
}

.feature-content h2 {
    font-size: 42px; font-weight: 300;color: #242745;
}

.features-section .card {
    padding: 15px;
    /* box-shadow: 0px 1px 10px -1.8px rgb(111, 110, 110); */
    border-radius: 5px;
    height: 100%;
    text-align: center;
    border:none!important;
}

.features-section .card .card-title{font-weight: 400; color: #373b62;}

.card1, .card2, .card3{height: 100%;}

.features-section button {
    padding: 5px;
    background-color: #000;
    color: #fff;
    border: none;
}

.features-section a.readbtn {
    font-weight: 600;
    font-size: 16px;
    background: none;
    padding: 8px 30px;
    margin-top: 10px;
    /* color: #242745; */
    color: #373b62;
    align-self: center;
    text-decoration: none;
    /* border: 1px solid #dfdfdf; */
}
.features-section a.readbtn i{padding-left: 5px;}

.features-section .card:hover .readbtn{border-radius: 25px;transition: all 0.3s ease-in; background: #242745; color: #fff;}

.features-section .card:hover button {
    background-color: white;
    color: #000;
}


.features-section .card:hover {
    /*color: white;
    background-color: rgb(69, 67, 67);
    margin-left: 20px;
    z-index: 999; */
    transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    /* box-shadow: 0px 0px 15px rgb(65 68 94 / 17%); */
    /* background: linear-gradient(45deg, #242745, #373b62); */

}

.features-section .card img {
    width: 40px;
    margin-bottom: 20px;
    filter: grayscale(100%);
}


.features-section .cards-sec {
    justify-content: space-around;
    padding: 0rem;
}

.plans-section {
    background-color: #242745;
    padding: 80px 0 80px;
}

.plans-section .card {
    background:none;
    width: 100%;
    height: 100%;
    padding: 30px 0px;
    align-items: center;
    color: #b3b4be;
    font-weight: 300;
    border: 2px solid #373b62;
}

.plans-section .card:hover {
    /* box-shadow: 1px 5px 20px rgb(196, 184, 184); */
    /* -webkit-transition: box-shadow .3s ease-in; */
    border:2px solid #fff;
    transition:border .3s ease-in-out ;
}

.plans-section .card .card-body{display: flex; flex-direction: column; justify-content:space-around ;}

.plans-section .card .card-body a.readbtn {padding: 8px 30px;
       color: #fff; border:1px solid #fff; align-self: center;text-decoration: none;
      }
.plans-section .card:hover a.readbtn{border-radius: 25px;transition:border-radius .3s ease-in-out ;}

.plans-section h6 {
    font-size: 21px;
    font-weight: 300;
    color: #fff;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.plans-section h5 {
    /* color: #bbb9b9; */
    color: #807b7b;
    font-size: 16px;
    font-weight: 600;
}

.plans-section h2 {
    font-size: 42px;
    font-weight: 300;
}

.plans-section .card .users label.btn{color:#b3b4be;padding: 0;}

/* .plans-section h2::after{
    content: '';
    color: #fff;
    height: 4px;
    width: 22%;
    background-color: #fff;
    position: absolute;
    left: 14px;
    top: 2170px;
} */
.plans-section .buy-btn {
    /* border: 1px solid black; */
    width: 100%;
    color:#fff;
    background:#373b62;
}

.plans-section .card:hover .buy-btn {
    background-color: #000;
    color: #fff;
}

.payment-outer{
    margin:0;
}

.plans-section .modules p {
    background: grey;
    padding: 4px;
    text-align: center;
}

.plans-section .modules {
    margin:30px 0px;
}

.plans-section .card-body span {
    font-size: 21px;
    color: #fff;
}

.modules .module-inner .check {
    color: rgb(38, 193, 38);
    width: 50px;
    height: 50px;
}

.modules .module-inner .cross {
    color: #9e1919;
    width: 50px;
    height: 50px;
}

.plans-section .plans-inner {
    padding-left: 300px;
    padding-right: 300px
}

.plans-section .plans-inner .head-section {
    margin-bottom: 2.5rem;
    padding: 0!important;
}


.modules-content {
    display: flex;
    justify-content: center;
}

.modules .module-inner span {
    font-size: 16px;
}


.users input {
    color: #a19797;
}

.card-body {
    text-align: center;
} 
.contat-section {
    /* background: url("../assets/gfgfg-min.jpeg") 0 0 no-repeat; */
    background: url("../assets/construction-contact-01.jpg") 0 0 no-repeat;
    position: relative;
    background-size: cover;
}

.inner-contact-div .address-div {
     position: absolute;
        background-color:#242745;
        color: #fff;
        padding: 58px;
        TOP: 50%;
        RIGHT: 6%;
        TRANSFORM: translate(-6%, -50%);
    }

.address-div img{
    color: white;
    background: white;
    padding: 4px;
    border-radius: 50%;
    display: none;
}
.inner-contact-div .contact-div {
    background-color: #ffffffdb;
    /* margin: 100px; */
    padding: 58px;
    /* border: 1px solid; */
    /* box-shadow: -5px 5px 35px #b79e9e; */
}

.contat-section .contact-heading {
    font-size: 42px;
    font-weight: 300;
    padding-bottom: 2rem;
    color:#242745;
}

.form-group .form-control {
    border: none;
    border-radius: 0;
    border-bottom: 1px solid;
    margin-bottom: 25px;
    width: 80%;
    padding: 1rem;
    background: none!important;
    
}

.contact-div form .submit-btn {
    /* border: 1px solid #242745;
    width: 188px;
    padding: 1rem;
     */margin-top: 2rem;
    padding: 1rem 2.5rem;
    color: #242745;
    border: 1px solid #242745;
align-self: center;
text-decoration: none;
}


.contact-div form .submit-btn:hover {
    background-color:#242745;
    color: #fff;
    border-radius: 25px;
    transition: border-radius .2s ease-in-out;
}



.contat-section .inner-contact-div .row-div {
    position: relative;
    /* justify-content: center; */
    align-items: center;
    min-height: 80vh;
    /* width: 1450px; */
    padding-top:100px;
    padding-bottom:100px;
}

.icons {
    text-align: left;
    gap: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.icons img {
    width: 50px;
    margin-right: 50px;
}

.hr-div {
    color: #989292;
}

.call,
.loact,
.bussiness{
    display: flex;
    gap: 20px;


}
.call h3, .loact h3, .bussinessg3 h3, .Business-Hours h3{font-size:1.2rem; color: #eff0fa;}
.callus p, .location p, .Business-Hours p{font-size:1.5rem; font-weight: 200;}

.callus, .location, .Business-Hours{ padding-bottom: 1rem;}

/* footer starts here */
.footer-inner {
    background-color: #454242;
    border-top: 1px solid #838282;
}

.footer .copyright {
    color: #fff;
}

.footer .copyright a {
    color: #b0b0b0;
    text-decoration: none;
}
.footer .copyright a:hover {
    text-decoration:underline;
}

.social-right img {
    width: 30px;
    height: 30px;
    margin: 20px;
    margin-right: 0;
}

.footer {

    background: #454242;
    color: #b0b0b0;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
    align-items: center;
    text-align: center;
    justify-content: space-around;
    gap: 136px;
}

.footer-upper {
    padding-top: 50px;
    padding-bottom: 10px;
}

.logo-sec p{font-size: .9rem; padding-top: 1rem; color: #b0b0b0;}

.logo-sec img {
    height: 70px;
    width: 70px;
    border-radius: 4px;
}

.footer-section a {
    color: #b0b0b0;
    text-decoration: none;
}

.footeritem h5{font-size:1rem; font-weight: 400; color:#eee;}
.footeritem ul{list-style: none; padding: 0; margin: 0;}
.footeritem ul li{font-weight: 300; color:#b0b0b0; font-size: 1rem;}
.footeritem ul li::before{content: "\F135";font-family: 'bootstrap-icons';}
.footeritem ul li a:hover{color:#fff;font-weight: 400;}
.footer-section li {
    list-style: none;
}

.downlaod-links {
    display: flex;
    align-items: baseline;
    justify-content:center;
    gap: 1rem;
}

.copyright-area {
    background-color: #393737;
    justify-content: center;
    text-align: center;
    margin-top: 2rem;
}

.copyright {
    font-size: 14px;
}
.panel-body{
        background-color: #fff;
    color: #000;
    padding: 50px;
    padding-top: 50px;
    padding-bottom: 50px;
        box-shadow: -5px 5px 35px #b79e9e;
        border-radius:10px;
}
.panel-body .card{
    border:none;
}
.panel-body h4{
    font-weight: lighter;
    font-size: 22px;
}
.panel-body label{

        font-weight: 300;
    font-size: 16px;
}
.panel-body .form-control{
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
}
.panel-body .btn-block{
    color: white;
    background-color: #1e1c1c;
    width: 100%;
    padding: 10px;
    margin-top: 20px;
    font-size:20px;
}
.panel-body .btn-block:hover{
    background-color:transparent;
    color:black;
    border:2px solid black;
}
.wrapper{
    padding: 50px;
    width: 50%;
    margin: auto;
    margin-top: 200px;
    margin-bottom:150px;
    box-shadow: -5px 5px 35px #b79e9e;
}
.pricing-detail-content a{
    color: #5e8dd3;
    text-decoration:none;
}
.cus-info{
    list-style: none;
    padding-top: 20px;
    padding-left:0;
}
.cus-info li{
    color:grey;
    font-size:15px;
    margin-bottom:20px;
}
.panel-body .form-group{
    margin-bottom: 0px !important;
}
/* .transbox .apple-icon:hover{
background: #e0d6d6;
    padding: 7px;
    text-align: center;
    align-items: center;
    border-radius: 50%;
    height: 42px;
    color: black;
    width: 40px;  
    backdrop-filter: blur(2px);
    box-shadow: inset 0 0 2em -0.6em #cddeee;
}
.transbox .play-icon:hover{
background: #e0d6d6;
    padding: 7px;
    text-align: center;
    align-items: center;
    border-radius: 50%;
    height: 42px;
    color: black;
    width: 40px;  
    backdrop-filter: blur(2px);
    box-shadow: inset 0 0 2em -0.6em #cddeee;
} */
div.transbox button:hover{
        background-color: rgba(0,0,0, 0.2);
        border:none;
}

.footer .head-five{
    font-size:20px;
}
.footer .pay-sec{
    font-size:16px;
}

.about-hero{
    background-image:url('../assets/about.jpeg');
    padding-top: 200px;
    padding-bottom: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: grey;
    background-blend-mode: multiply;
    background-attachment: fixed;
    height: 60vh;
}
.about-hero h3{
    text-align: center;
    color: #fff;
    cursor: pointer;
}
/*.about-hero h3::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    background-color: #fff;*/
/*    width: 3%;*/
/*    height: 4px;*/
/*    top: 243px;*/
/*}*/
.about-section .left-section img{
    width: 200px;
    height: 200px;
}
.about-section .right-section{
    background-image: url('../assets/about-b.png');
    background-size: contain;
    background-repeat: no-repeat;
}
.about-section .right-section p{
    font-weight: 400;
    padding-top: 37px;
}
.about-section{
        padding-top: 60px;
}
.section-row {
    /* padding-top: 100px; */
    padding-bottom: 2rem;
}
.section-row h1 {
text-align: center;
    margin-bottom: 20px;
}
.section-row p {
    color:#6f6b7d;
    font-size: 1.1rem;
    font-weight: 300;
}

.sectionbx{width: 100%;}
.sectionbx h2{font-size: 42px; font-weight: 300; color: #242745; padding-bottom: .5rem;}
.sectionbx h5 {color: #807b7b; font-size: 18px;font-weight: 400;margin-bottom: 40px;}
.sectionbx p {color:#6f6b7d;font-size: 1.1rem;font-weight: 300;    }


.embed-responsive {
    text-align: center;
    height: 60vh;
    padding-top: 40px;
    padding-bottom: 40px;
}
.video-section {
    background-color: rgb(69, 67, 67);
    /*padding-top: 10px;*/
    /*padding-bottom: 10px;*/
    padding:50px;
}
.footer-ico {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.downlaod-links h5 {
    text-align: center; font-size: 1rem;
}
.footer-ico #img1 {
    margin-right: 20px;
}

/* media query starts */

@media (max-width:767px) {
    .features-section {
        padding-left: 0% !important;
        padding-right: 0% !important;
    }
    .plans-section .card{
    width:100%;
    }
    .features-section .card:hover{
    box-shadow:none;
    transition: none;
    }
    .wrapper{
        width:80%;
        margin-top: 100px;
    margin-bottom: 100px;
    }

        .transbox {
        text-align: left;
        align-items: left;
        justify-content: left;
        padding-left: 50px;
    }

    /* .social-icons{
        width: 100%;
    } */
    .footer-ico {
        flex-direction: column;
    }
    }

    @media (min-width:768px) and (max-width:1024px) {
    .inner-contact-div .address-div {
        position:inherit;
        transform: none;
        top: 0; right:0;
    }
    .features-section {
        padding-left: 10px;
        /* padding-right: 0; */
    }

    .form-group .form-control {
        width: 100%;
    }

    .contact-div form .submit-btn {
        margin-top: 30px;
    }

    .inner-contact-div .address-div {
        display: flex;
        gap: 70px;
    }
    }


    @media (min-width:1024px) and (max-width:1080px) {


    .plan-sec {
        gap: 71px;
    }

    .plans-section .plans-inner {
        padding-left: 100px;
        padding-right: 100px;
    }
    }

    

    @media (max-width:767px) {
    body{
        overflow-x:hidden;
    }
    #carouselExampleIndicators{height: auto;}
    .inner-contact-div .address-div {
        position:inherit;
        transform: none;
        top: 0; right:0;
    }
    div.transbox p{
        font-size:16px;
    }
    .inner-contact-div .contact-div{
        box-shadow:none;
    }
    .features-section .card{
        box-shadow:none;
    }
    .navbar{
        box-shadow:none;
    }
    .features-section{
        padding-top:50px;
        padding-bottom:50px;
    }
    .plans-section{
        padding-top:50px;
        padding-bottom:50px;
    }
    .card-title{
        text-align:center;
    }
    .card-text{
        text-align:center;
    }
    div.transbox button{
        font-size:20px;
        margin-top:0;
    }
    .social-icons {
        text-align: center;
    }

    .icons {
        text-align: center;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .icons img {
        width: 50px;
    }

    .plans-section .plans-inner {
        padding-left: unset;
        padding-right: unset;
        text-align: center;
    }
 

    div.transbox h1 {
        animation: none;
        font-size:32px;
        border-right:none;
        letter-spacing:4px;

    }


    .features-section .cards-sec {
        /*margin-left: 100px;*/
        text-align:center;
        /*width:350px;*/
    }

    .footer-inner {
        gap: 0;
        display: flex;
    flex-direction: column;
    }

    .footer-upper {
        gap: 20px;
    }

    .text-light {
        padding-top: 0;

    }

    .plans-section .plans-inner .head-section {
        margin-bottom: 50px;
    }
}

@media (min-width:768px) and (max-width:991px) {
    .plans-section .plans-inner {
        padding-left: 100px;
        padding-right: 100px;
    }

    .plans-section .card {
        margin-bottom: 50px;
    }

    .icons {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .logo-sec img {
        height: 50px;
        width: 140px;
    }

    .carousel-control-next {
        bottom: 130px !important;
    }

    .transbox h1 {
        /* animation: none; */
        border-right: none;
        white-space: nowrap;
    }

    div.transbox h1 {
        font-size: 52px;
    }
    
    }

    @media (min-width:401px) and (max-width:599px) {
    .form-group .form-control {
        width: 100%;
    }

    .transbox h1 {
        animation: none;
        letter-spacing: 0 !important;
    }

    .footer-inner {
        display: initial;
    } 

    div.transbox button {
        /*width: 200px;*/
        height: 50px;
        font-size: 18px;
    }

    div.transbox button .divider {
        margin-top: 0;
    }

    .feature-content h2 {
        font-size: 34px;
        height: 50px;
    }

    .feature-content h5 {
        font-size: 22px;
    }

    .head-section h5 {
        font-size: 18px;
    }

    .plans-section h2 {
        font-size: 35px;
    }

    .plans-section .card {
        width: 100%;
    }

    .plan-sec {
        margin-left: 0 !important;
    }

    .contat-section .contact-heading {
        font-size: 35px;
    }

    .contact-div form .submit-btn {
        width: 100%;
        margin-top: 20px;
    }

    .form-control {
        font-size: 15px;
    }

    .inner-contact-div .address-div h3 {
        font-size: 18px;
    }

    .inner-contact-div .address-div p {
        font-size: 15px;
    }

    .icons img {
        width: 40px;
    }


    .footer-upper {
        text-align: center;
    }

    .copyright {
        font-size: 12px;
    }

    .social-right {
        display: none;
    }

    .features-section .cards-sec {
        /*margin-left: 50px;*/
    }

    #carouselExampleIndicators img {
        height: 100%;
        width: 100%;
    }
    }
    @media (max-width:767px){
    #carouselExampleIndicators img{
        height:100%;
    }
    }

    @media (min-width:1300px) and (max-width:1605px) {
    .plans-section .plans-inner {
        padding-left: 0%;
        padding-right: 0%;
    }

    
}

@media (min-width:768px) and (max-width:991px) {
    .features-section .card {
        width: 300px;
    }

    .features-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .plans-section .plans-inner {
        padding-left: 10px;
        padding-right: 0;
    }
}

@media (min-width:992px) and (max-width:1023px) {
    .plan-sec {
        gap: 110px;
    }

    .plans-section .plans-inner {
        padding-left: 100px;
        padding-right: 100px;
    }
    .plans-section .plans-inner {
        margin-right: 72px;
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width:1024px) and (max-width:1080px) {
    div.transbox h1 {
        font-size: 60px;
    }

    .feature-content h2 {
        font-size: 40px;
    }

    .feature-content h5 {
        font-size: 24px;
    }

    .plan-sec {
        gap: 200px;
    }
    .contat-section .inner-contact-div .row-div{
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

@media (min-width:1081px) and (max-width:1163px) {
    .features-section {
        padding-left: 100px;
        padding-right: 300px;
    }

    .plan-sec {
        gap: 97px;
    }

    .plans-section .plans-inner {
        padding-left: 0;
        padding-right: 0;
    }

    .contat-section .inner-contact-div .row-div {
        justify-content: flex-start;
    }

}

@media (min-width:1164px) and (max-width:1299px) {
    .features-section .cards-sec {
        justify-content: space-between;
    }

    .features-section {
        padding-left: 20px;
        padding-right: 200px;
    }
    .plans-inner .plan-sec{
        gap: 90px;
    }
    .plans-section .plans-inner{
        padding-left: 100px;
        padding-right: 0;
    }
    .features-section .card{
        width: 300px;
    }
    .features-section .cards-sec {
    justify-content: space-evenly;
    }
    .features-section {
    padding-right: 20px;
    }
    .contat-section .inner-contact-div .row-div {
    padding-top: 100px;
    padding-bottom: 100px;
    }

}


@media (min-width:1281px) and (max-width:1299px) {
    .contat-section .inner-contact-div .row-div {
        padding-right: 300px;
    }


    .plans-section .plans-inner {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width:1300px) and (max-width:1399px) {

  
    .features-section .cards-sec {
        justify-content: space-between;
    }

}