@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Italianno&family=Raleway&family=Roboto:wght@300;400;500;700&family=Sansita+Swashed&display=swap');







* {

    margin: 0px;

    padding: 0px;

    box-sizing: border-box;

}



a:hover {

  color: white !important;

}



.btn-outline-primary {

    color: #ffffff !important;

    border-color: #0d6efd;

}



html,

body {

    background-color: white !important;

    font-family: "Roboto", sans-serif;

    margin: 0px;

    padding: 0px;

    height: 100%;

    width: 100%;

    overflow-x: hidden;

     position: relative;

    top: 0 !important;

}



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

    #logo-size {

        font-size: 35px;

    }

}





@keyframes slidein {

    from {

        transform: translate3d(0, 0, 0);

    }



    to {

        transform: translate3d(-100%, 0, 0);

    }

}



@keyframes fade-in {

    0% {

        opacity: 0;

    }



    100% {

        opacity: 1;

    }

}



.btn-dark{

    color: #fff;

    background-color: #7A300B;

    border-color: #7A300B;

}



#logo-size {

    width: fit-content;

    padding: 30px 30px;

    border-radius: 10px;

    margin: 60px;

    border: 2px solid rgb(166, 159, 159);

    align-items: center;

}



.slider {

    animation: slidein 30s linear infinite;

    white-space: nowrap;

    height: 230px;

}



.Ourra {

    font-weight: 600;

}



.logos {

    width: 100%;

    display: inline-block;

    margin: 0px 0;



}



.fab {

    width: calc(100% / 5);

    animation: fade-in 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) forwards;



}



.border-text{

    color: transparent !important;

    -webkit-text-stroke-width: 1px !important;

    -webkit-text-stroke-color: #fff !important;

}



.border-text2{

    color: transparent !important;

    -webkit-text-stroke-width: 1px !important;

    -webkit-text-stroke-color:#FFECE3 !important;

}





.about-type{

    padding: 80px 0px;

    background-color: #FFECE3 !important;

}



.div-bar{

    width: 50px;

    height: 1px;

    background-color: #7A300B;

}



.about-type-heading p{

    color: #CC6633;

    font-size: 13px;

    font-weight: 400;

    text-transform: uppercase;

    letter-spacing: 3px;

    margin-top: -9px;

    margin-left: 5px;

}



.about-type h1{

    color: #7A300B;

    font-size: 40px;

    font-weight: 700;

    line-height: 1.5em;

}



.about-type-text{

    color: #606060;

    line-height: 2em;

}



.about-type ul{

    text-decoration: none;

    list-style: none;

    padding: 0px;

}



.about-type ul li{

    margin-top: 25px;

    position: relative;

}







.about-type-img{

    height: 80%;

    width: 55%;

    position: relative;

    bottom: -80px;

    margin-bottom: 80px;

    border-radius: 4px;

    border: 5px solid #fff;

    -webkit-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);

    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);

}



.abs-img{

    height: 86% !important;

    position: absolute !important;

    z-index: 5;

    top: -70px;

    right: -243px;

    border-radius: 4px;

    -webkit-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);

    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);

    padding: 5px !important;

    background-color: white;

}



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

    .abs-img{

        right: -180px;

    }

}



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

    .abs-img{

        right: -271px;

    top: -93px;

    }



    .navbar-brand img{

        height: 40px ;

    }

}



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

    .abs-img{

        right: -180px;

    }

    .about-type-img{

        height: 75%;

    }

}

 

.about-type-img img{

    height: 100%;

    width: 100%;

}



.nav-dropdown{

    left:-18%;

}



.quote-btn{

    background-color: #7A300B !important;

    border: none !important;

    padding: 8px 25px !important;

    color: white !important;

}



.cprofile-btn{

    background-color: #CC6633 !important;

    border: none !important;

    padding: 8px 25px !important;

    color: white !important;

}



.quote-btn:focus{

    border: none !important;

    box-shadow: none !important;

}



.btn:focus{

    box-shadow: none !important;

}



.slide-img{

    height:100vh !important;

}

.slide-img1{

    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url(../images/mining1.jpg);

    height: 100vh;

    background-size: cover;

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-position: center;

}



.slide-img2{

    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url(../images/mining2.png);

    height: 100vh;

    background-size: cover;

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-position: center;

}



.slide-img3{

    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url(../images/mining3.jpg);

    height: 100vh;

    background-size: cover;

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-position: center;

}



.bg-cover {

    background-position: center !important;

    background-size: cover !important;

}



/* HEADER */





.header img {

    height: 100px !important;

}



.logo-img {

    padding: 10px 0px;

}



.title {

    padding: 20px 10px;

}



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

    .header {

        justify-content: center !important;

    }



    .title {

        text-align: center;

        flex-direction: column;

    }

}



.title h2 {

    width: auto;

    margin-top: 8px;

    margin-bottom: 0px;

    font-size: 26px;

    text-transform: uppercase;

    text-shadow: 3px 3px rgba(0, 0, 0, 0.199);

}



.title h2 strong {

    font-size: 40px;

}



.title .p1 {

    font-size: 15px;

    padding: 0px 10px;

    color: rgb(126, 124, 124);

    border-right: 2px solid rgb(126, 124, 124);

}



.title i {

    margin-top: 3px;

    padding: 0px 5px;

    color: green !important;

    display: inline-block;

}



.title .p2 {

    font-size: 15px;

    padding: 0px 5px;

    color: rgb(126, 124, 124);

}



/* NAVBAR */

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

    .dropdown:hover .dropdown-menu{

        display: block !important;

        top: 100%;

        left: -37px;

        margin-top: 0;

    }    

}







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

    .navbar .fa-bars{

        margin-top: 10px !important;

    }

    

    .navbar p {

        margin-top: 10px !important;

    }



    .navbar .row{

        flex-direction: column !important;

    }

}





.navbar i{

    color: white !important;

    font-size: 20px !important;

}



.navbar p {

    color: white !important;

    margin: 0px !important;

    margin-left: 8px !important;

    transition: 0.5s ease all;

}



.navbar p:hover{

    font-weight: 700 !important;

}



.navbar {

    background-color: #00000059;

    padding: 0px !important;

    margin-top: 0px !important;

    transition: 0.5s ease all;

}



.scrolled{

    background-color: black !important;

}



.nav-link {

    color: white !important;

    font-size: 16px;

    padding: 18px 22px 17px !important;

    text-transform: uppercase !important;

    font-weight: 400 !important;

    cursor: pointer !important;

}



.nav-link:hover {

    color: #D6D5D5 !important;

}



.navbar-nav {

    margin-left: 10px;

}



.navbar-brand{

    padding: 10px 0px;

}



.navbar-toggler {

    color: white !important;

    background-color: white !important;

    padding-top: 0px !important;

    margin: 5px 0px !important;

}



.navbar-toggler span i{

    color: black !important;

}



.slider {

    margin-left: 10%;

    margin-right: 10%;



}



.nav-item {

    padding: 0px !important;

    margin: 0px !important;

}



.dropdown-menu{

    padding: 0px !important;

}



.dropdown-item{

    padding-left: calc( 15px + 20px );

    padding-right: 12px;

    padding-top: 10px;

    padding-bottom: 10px;

    color: #CC6633 !important;

    background-color: #FFECE3!important;

    font-weight: 400;

    border-bottom: 0.5px solid #bbb7b7;

}



.dropdown-item:hover{

    color: #a3a3a3 !important;

}



.btn-success{

    background-color: transparent !important;

    border: none !important;

}



.tapu{

    position: relative;

}



.tapu-beta {

    position: absolute;

    top: 21px;

    left: 172px;

    padding-right: 3.5625rem;

    padding-left: 3.5625rem;

    color: white !important;

}



.sticky-top{

    top:-1px !important;

}



/* SLIDER */



.slide1 {

    background: linear-gradient(rgba(9, 32, 50, 0.4), rgba(9, 32, 50, 0.4)), url(../images/slider1.jpg);

}



.slide2 {

    background: linear-gradient(rgba(9, 32, 50, 0.4), rgba(9, 32, 50, 0.4)), url(../images/slider2.jpg);

}



/* CATEGORISES */



.categories{

    margin-top: 40px !important;

    margin-left:15px;

    margin-right:15px;

}



.button-center{

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



.categories h2{

    text-align: center;

    font-weight: 700;

    margin-bottom: 16px;

}



.img-div{

    position: relative;

    margin: 0px 3px;

    margin-left: 0px !important;

    transition: 0.2s ease all;

}



.img-div img{

    width: 100%;

    object-fit: cover;

    height: 30vh;

    transition: 0.2s ease all;

}



.img-name{

    width: 100%;

    position: absolute;

    top: 50%;

    transition: 0.2s ease all;

}



.img-name h2{

    color: white !important;

    font-weight: 700;

    width: 100%;

}



.cat-col{

    padding: 0px !important;

}



.img-overlay{

    background-color: black;

    opacity: 0.5;

    position: absolute;

    left: 0px;

    top: 0px;

    width: 100% !important;

    height: 30vh;

    transition: 0.2s ease all;

}



.img-div:hover .img-overlay{

    opacity: 0.3;

}



.arrow-btn{

    width: 50px;

    height: 50px;

    border-radius: 50%;

    border: 2px solid rgb(255, 255, 255);

    position: relative;

    display: flex;

    justify-content: center;

}



.arrow-icon{

    font-size: 23px !important;

    text-align: center;

}



.arrow-icon-l{

    margin-right: 25px;

}



.arrow-icon-r{

    margin-left: 25px;

}





/* WHY US */

.us {

    padding: 0px 60px !important;

}



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

    .us{

        padding: 50px 0px !important;

    }

    

}



.us h3 {

    color: rgb(126, 124, 124);

    text-align: center;

    text-transform: uppercase;

    font-weight: 700;

    font-size: 30px;

    margin-bottom: 15px;

}



.us li {

    font-size: 15px;

    color: rgb(102, 101, 101);

    font-weight: 500;

    margin-top: 8px;

}



.us img {

    height: 35vh;

    width: 100%;

    margin-left: 20px;

    border-radius: 5px;

}



.us button {

    margin-top: 10px;

    background-color: #7A300B !important;

    border: none;

    transition: 0.2s all ease;

    text-align: center;

}



.us button:hover {

    box-shadow: 2px 2px 20px rgb(88, 88, 88) !important;

    background-color: white !important;

    color: black !important;

}



.carde {

    display: flex;

    flex-direction: column;

    align-items: center;

    background-color: rgb(231, 179, 35);

    padding: 40px 20px !important;

    border-radius: 5px;

}



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

    .carde {

        width: 100%;

    }

}







/* INFRASTRUCTURE */

.infrastructure {

    background: linear-gradient(rgba(4, 6, 11, 0.7) 0%, rgb(1, 3, 8) 100%), url('/frontend/images/banner2.jpg');

    background-position: center;

    background-size: cover;

    background-attachment: fixed;

}



.infrastructure .container {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}









.infrastructure button {

    margin-top: 10px;

    background-color: black !important;

    border: none;

    transition: 0.2s all ease;

    text-align: center;

    margin: 8px;

}



.infrastructure button:hover {

    box-shadow: 2px 2px 20px rgb(88, 88, 88) !important;

    background-color: white !important;

    color: black !important;

}



.carousel{



    margin-top: -3px;

}



.carousel-review {

    padding: 120px 80px !important;

    flex-direction: column;

}



.main-content{

    margin-top: 120px;

    margin-bottom: 75px;

}



.main-content h1{

    color: white;

    font-weight: 700;

    text-transform: uppercase;

}



.main-content h1 strong{

    font-size: 46px;

    font-weight: 700;

}

.main-content p{

    font-size: 17px;

    text-align: left;

    color: white;

}



.main-content input{

    width: 75% !important;

    margin-top: 20px;

    border: 1px solid rgba(194, 194, 194, 0.781) !important;

    border-radius: 3px;

    box-shadow: none;

    height: 40px;

    padding:0px 10px !important;

}



.main-content button{

    background-color: #7A300B !important;

    color: white !important;

    border: none;

    padding: 9px 45px;

    text-align: center;

}



.img-brand img{

    height: 200px !important;

    width: 100% !important;

}



.find h1{

    color: white;

    font-weight: 400;

    text-transform: uppercase;

}







.find h3{

    color: white;

    font-weight: 600 !important;

}



.find p{

    margin-top: 8px;

    color: white;

    font-size: 26px;

    font-weight: 300;

}



.social-content{

    margin: 25px 22px;

}



.social-content .infra-icon{

    color: #e87e00 !important;

    margin-top: 5px;

    margin-right: 5px;

}



.social-content p{

    font-size: 24px;

    font-weight: 600;

    color: #e87e00;

   margin-top: 0px !important;

   padding: 0px 10px;

   transition: 05.s ease all;

}



.social-content p:hover{

    color: white !important;

}



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

.find{

    margin-top: 37px;

}



    .find h1{

        font-size: 20px;

    }

    

    

    

    .find h3{

        font-size: 18px;

    }

    

    .find p{

        font-size: 18px;

    }

    

    .social-content{

        margin: 25px 22px;

    }

    

    .social-content .infra-icon{

        font-size: 18px;

    }

    

    .social-content p{

        font-size: 18px;

    }

    

}



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

    .social{

        flex-direction: column;

    }



    .social-content{

        margin-top: 10px !important;

        margin: 0px;

    }



    .social-content2{

        margin-top: 0px !important;

    }

}

/* REVIEW */





.reviews {

    display: grid;

    place-items: center;

    margin-bottom: 0px !important;

}



.section-header {

    position: relative;

    padding-bottom: 10px;

    text-align: center;

    font-weight: 900;

    padding-bottom: 25px;

    color: rgb(0, 0, 0);

}



.section-header:after {

    content: '';

    height: 3px;

    width: 200px;

    position: absolute;

    bottom: 0;

    left: calc(50% - 100px);

    background: rgb(0, 0, 0);

}



.section-header span {

    display: block;

    font-size: 15px;

    font-weight: 300;

}



.testimonials {



    padding: 0 15px 50px;

    margin: 0 auto 0px auto;

}



.single-item {

    background: #fff;

    color: #111;

    padding: 15px;

    margin: 50px 15px;

    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 15%);

    border-radius: 7px;

}



.profile {

    margin-bottom: 30px;

    text-align: center;

}



.img-area {

    margin: 0 15px 15px 15px;

}



.img-area img {

    height: 200px;

    width: 200px;

    border-radius: 50%;

    border: 7px solid #004652;

}



.content {

    font-size: 18px;

}



.content p {

    text-align: justify;

}



.content p span {

    font-size: 48px;

    margin-right: 20px;

    color: #004652;

}



.socials i {

    margin-right: 25px;

}



.bio {

    margin-right: 50px;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

}







.carousel-control-next-icon,

.carousel-control-prev-icon {

    background-color: #004652;

}



/* CLIENTS */

.clients-img {

    border: 1px solid #efefef;

    margin: 0px 100px !important;

}



.client h1 {

    margin-bottom: 60px;

    font-weight: 600;



}



/* FOOTER */

footer {

    padding: 40px 0px;

    background-color: #f4f4f4;

}



.footer-row {

    border-collapse: collapse !important;

}







.brand-img img {

    height: 200px !important;

    width: 200px !important;

}



.contact h6 {

    color: #111;

    margin-left: 31px;

    font-weight: 600;

    font-size: 18px;

}



.contact li {

    list-style: none;

    margin-top: 10px;

}



.contact p {

    font-size: 15px;

    color: #111;

    font-weight: 400;

    line-height: -2px;

}



.contact li{

    font-size: 15px;

    color: #111;

}



.contact a {

    font-size: 15px;

    color: #111;

    font-weight: 400;

    transition: 0.5s ease all;

}



.contact a:hover{

    color: #004652 !important;

    font-weight: 700 !important;

}





.use-links h6 {

    color: #111;

    margin-left: 31px;

    font-weight: 600;

    font-size: 18px;

}



.use-links li {

    list-style: none;

    margin-top: 10px;

}



.use-links a {

    font-size: 16px;

    color: #111;

    font-weight: 400;

    line-height: -2px;

    transition: 0.1s ease all;

}



.use-links a:hover {

    color: black !important;

}



.buyer h6 {

    color: #111;

    font-weight: 600;

    font-size: 18px;

}



.buyer p{

    font-size: 15px;

    color:#111;

    font-weight: 400;

}



.buyer input {

    width: 100%;

    display: block;

    height: 40px;

    margin-bottom: 10px;

    padding:0px 10px !important;

}





.buyer button:hover {

    transition: 0.2s ease all;

    background-color: white !important;

    color: black !important;

}

.down-prof{

    margin-top: 25px;

    margin-bottom:5%;

    background-color: #7A300B !important;

    color: white !important;

    border: 1px solid #7A300B !important;

    /*width:20%;*/

}



.down-prof:hover{

    transition: 0.2s ease all;

    background-color: white !important;

    color: black !important;

}



.down-prof2{

    margin-top: 25px;

    background-color: black !important;

    color: white !important;

    border: 1px solid black !important;

}



.down-prof2:hover{

    transition: 0.2s ease all;

    background-color: white !important;

    color: black !important;

}







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

    .buyer h6 {

        margin-left: 31px;

    }

    

    .buyer p{

        margin-left: 31px;

    }

    

    .buyer input {

        margin-left: 31px;

    }

    

    .buyer button{

        margin-left: 31px;

    }

}



.yana {

    background-color: #CC6633 !important;

    color: white;

}



/* CONTACT PAGE */

.contact-page {

    padding: 80px 0;

}



.contact-page .container{

    margin-top: -80px !important;

}



.contact-img {

    width: 100% !important;

    height: 500px !important;

}



.contact-page .col-12 {

    padding: 0px !important;

    margin: 0px !important;

}





.address i {

    font-size: 40px;

    color: #004652;

}



.address a{

    display: flex;

    width: 100%;

}



.address-text {

    margin-left: 18px;

    width: 100%;

}



.address-text {

    font-weight: 600;

}



.address-text h5{

    color: #111;

}



.address-text p {

    font-size: 15px;

    color: rgb(160, 157, 157);

}



.links-contact {

    margin-top: 103px !important;

}



.contact-details {

    padding: 40px 0px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

}







.message {

    background-color: transparent;

}



.message h2 {

    font-size: 40px;

    font-weight: 700;

}



.input-area {

    width: 100% !important;

    margin-bottom: 25px !important;

    border: 1px solid #D6D5D5 !important;

    border-radius: 3px;

    box-shadow: none;

    height: 40px;

    padding:25px !important;

    background-color: transparent !important;

}



.form-label{

    margin-top: 20px !important;

}



::placeholder {

    color: #858382;

    text-align: left !important;

    padding: 50px 20px !important;

    background-color: transparent !important;

    font-size: 14px !important;

}



.select {

    display: flex;

    margin-top: 20px;

}



.form-select {

    margin: 0px 5px;

    margin-bottom: 5px !important;

}



.select1 {

    margin: 0px !important;

}



.por{

    margin-right: 8px !important;

}



.comment-text {

    border: 1px solid #D6D5D5 !important;

    padding: 11px 17px !important;

}



.por-text{

    border: 1px solid #D6D5D5 !important;

    background: transparent;

}



.por-text{

    padding: 0px 20px !important;

}



.check{

    margin-top: 20px !important;

}

.form-check{

    margin-top: 8px !important;

}



.form-check-label{

    color: #858382;

}



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

    .message{

        padding: 30px 30px !important;

    }



     .message h2{

        font-size: 25px !important;

    }



    /*.message .form-label{*/

    /*    font-size: 12px !important;*/

    /*}*/



    /*.message input::placeholder{*/

    /*    font-size: 12px !important;*/

    /*}*/



    /*.message .input-area{*/

    /*    height: 30px;*/

    /*}*/



    /*.form-check-label{*/

    /*    font-size: 12px;*/

    /*}*/



    /*.por{*/

    /*    margin-top: 2px;*/

    /*}*/



    /*.form-check {*/

    /*    margin-top: -5px !important;*/

    /*}*/



    /*.form-label {*/

    /*    margin-top: 10px !important;*/

    /*}*/



    /*textarea::placeholder {*/

    /*    font-size: 12px;*/

    /*} */

}



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

    textarea {

        width: 100%;

    }

}



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

    textarea {

        width: 100%;

    }

}



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

    textarea {

        width: 100%;

    }

}



textarea::placeholder {

    padding: 10px 20px !important;

}



/*.message button {*/

/*    background-color: #004652 !important;*/

/*    color: white !important;*/

/*    margin-top: 20px !important;*/

/*    border: none;*/

/*}*/



/*.message button:hover {*/

/*    background-color: #0046528a !important;*/

/*}*/





/* ABOUT US PAGE */

.about-us{

    padding:  80px 0px !important;

}



.about-us h2{

    font-weight: 700 !important;

    color: #004652 !important;

}



.about-us h3{

    font-weight: 700 !important;

    color: #004652 !important;

}



.about-us p{

    font-size: 15px !important;

}



.gif{

    height: 500px;

    width: 100%;

}



.why-thar{

    padding:  80px 0px !important;

    background: linear-gradient(180deg, #004652 0%, #23342d 100%);

    background-position: center !important;

}



.why-thar h2{

    font-weight: 700 !important;

    color: white !important;

}



.why-thar p{

    font-weight: 400 !important;

    color: white !important;

}



.why-thar i{

    font-size: 50px;

    color: white !important;

    padding: 20px;

    background-color: #004652 !important;

}



.why-thar h4{

    color: white !important;

    font-weight: 600 !important;

}



.certificate{

    padding:  80px 0px !important;

    background: url(../images/world-map.png);

    background-repeat: no-repeat;

    background-attachment: fixed;



}



.certificate img{

    cursor: pointer !important;

}



.certificate h1{

    font-weight: 400 !important;

    color: #7A300B !important;

}



#gallery-modal .modal-img{

    width: 100% !important;

}



.our-business{

    padding: 80px 0px !important;

    margin: 0px !important;

}



.our-business h1{

    font-weight: 700 !important;

    color: #004652 !important;

}



.our-business p{

    color: #636161 !important;

    font-size: 16px !important;

}





.timeline-box{

    padding:10px 50px !important ;

    width: 50%;

    position: relative;

}



.text-box{

padding: 20px 30px !important;

border-radius: 6px !important;

position: relative;

background-color: #004652 !important;

font-size: 20px !important;

color: white !important;

}

.left-box{

    left: 0;

}



.right-box{

    left: 50%;

}



.timeline-box i{

    font-size: 20px;

    position: absolute;

    width: 40px !important;

    right: -25px !important;

    top: 44px;

    z-index: 10;

    color: rgb(245, 189, 4);

}



.right-box i{

    left: -15px;

}



.timeline-container{

    position: relative;

}



.timeline-container::after{

    content: "";

    position: absolute;

    width: 6px;

    height: 100%;

    background-color: #004652 !important;

    top: 0;

    left: 50%;

    margin-left: -8px;

    z-index: 1;

    animation: moveline 6s linear forwards;

}



@keyframes moveline{

    0%{

        height: 0;

    }



    100%{

        height: 100%;

    }

}



.left-box-arrow{

    height: 0;

    width: 0;

    position: absolute;

    top: 28px;

    z-index: 1;

    border-top: 15px solid transparent;

    border-bottom: 15px solid transparent;

    border-left :15px solid  #004652 ;

     right: -15px ;



}



.right-box-arrow{

    height: 0;

    width: 0;

    position: absolute;

    top: 28px;

    z-index: 1;

    border-top: 15px solid transparent;

    border-bottom: 15px solid transparent;

    border-right :15px solid  #004652 ;

     left: -15px ;



}





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

    .timeline-box{

        margin: 50px auto;

        width: 100%;

    }

    .timeline-container::after{

        left: 50px;

    }



    .timeline-container{

        width: 100% !important;

        padding-left: 49px;

        padding-right: 0px;

    }



    .text-box{

        font-size: 13px;

    }



    .right-box{

        left: 0;

    }



    .timeline-box i{

        left: -14px;

    }



    .left-box-arrow{

        border-right: 15px solid #004652;

        border-left: 0;

        border-right: -15px;

        left: -15px;

    }

}



#timeline h1{

    color: #004652 !important;

    font-weight: 700;

    margin-bottom: 80px !important;

}





/* Chrome, Safari, Edge, Opera */

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

  -webkit-appearance: none;

  margin: 0;

}



/* Firefox */

input[type=number] {

  -moz-appearance: textfield;

}