@font-face {
    font-family: "Graphie";
    src: url("https://use.typekit.net/rss6utj.css") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
}


body{
    font-family: Graphie, sans-serif;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    width: 100vw;
    overflow-x: hidden;
}

.navbar-tes{
font-family: Graphie, sans-serif;
font-style: normal;
font-weight: 100;
display: block;
}

.jumbotron{
    background-image: url(img/header.png);
    height: 100vh;
    background-size: cover;
    display: flex;  
    align-items: center;
}

.header-img{
    width: 1009px;
    height: 283px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
}

.header-mid{
    width: 260px;
    height: 39px;
    background: linear-gradient(90deg, #FFFFFF 30%, #00FD00 30%);
    opacity: 1;
    margin: auto;
    padding-top: 10px;
    margin-top: 100px;
}

.header-mid-text{
    text-align: center;
    font: normal normal bold 20px/24px Kiro;
    letter-spacing: 2px;
    color: #000000;
    opacity: 1;
}


.description{
    padding-bottom: 50px;
}

.description-text{
    text-align: center;
    font: normal normal normal 40px/53px Graphie;
    letter-spacing: 0px;
    color: #131314;
    opacity: 1;
    padding-left: 30px;
}

.description-bigText{
    text-align: left;
    font: normal normal bold 65px/69px Graphie;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
}

.description-smallText{
    text-align: left;
    font: normal normal 300 24px Graphie;
    letter-spacing: 0px;
    color: #131314;
    opacity: 1;
    margin-top: 50px;
}

.description-colTitleText{
    text-align: left;
    font: normal normal bold 50px Graphie;
    letter-spacing: 0px;
    color: #131314;
    opacity: 1;
}

.damage-decription{
    text-align: left;
    font: normal normal bold 30px Graphie;
    letter-spacing: 0px;
    color: #131314;
    opacity: 1;
}

.damage-image{
    width: 72px;
    height: 96px;
    /* UI Properties */
    opacity: 1;
    display: inline-block;
}

.damage-average{
    width: 86px;
    height: 96px;
    display: inline;
}

/* =============About Us Page========== */

.about-us-section{
    background-color: #2D2B40;
    position: relative;
    overflow-y: hidden;
}

.about-us-image{
    right: 0;
    top: 0;
    position: absolute;
    width: 1245px;
    height: 726px;
    object-fit: cover;
    object-position: 60px;
}

.about-us-title{
    text-align: left;
    font: normal normal bold 65px/76px Graphie;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}

.about-us-sub-title{
    text-align: left;
    font: normal normal normal 30px Graphie;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}

.about-us-description-header{
    text-align: left;
    font: normal normal normal 34px Graphie;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}

.about-us-description{
    text-align: left;
    font: normal normal 300 24px Graphie;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}

/* sub description */
.second-description{
    background-image: url(img/description.png);
    height: 500px;
    background-size: cover;
    object-fit: cover;
    object-position: 60px;
}

.second-description-text{
    text-align: center;
    font: normal normal bold 65px/69px Graphie;
    letter-spacing: 0px;
    color: #131314;
    opacity: 1;
}






/* ? */

.our-solution{
    padding-top: 100px;
    padding-bottom: 50px;
    background-color: #2D2B40;
    height: auto;
}

.our-solution-title{
    text-align: left;
    font: normal normal bold 65px/76px Graphie;
    letter-spacing: 0px;
    color: #00FD40;
    opacity: 1;
}

.our-solution-box{
    padding-right: 5px;
}

.our-solution-description{
    text-align: left;
    font: normal normal 300 24px/28px Graphie;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
    margin-top: 10px;
}


.fuse-ai-image{
    width: 300px;
    height: 100px;
    object-fit: contain;
}

.patronum-image{
    width: 300px;
    height: 100px;
}

.csShield-image{
    width: 100px;
    height: 100px;
}

.finaxcel-image {
    width: 300px;
    height: 100px;
}


/* out team */

.our-team{
    background-color: #FFFFFF;
    height: 900px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.our-team-title{
    text-align: left;
    font: normal normal bold 65px/76px Graphie;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
}


.our-team-head{
    text-align: left;
    font: normal normal normal 40px/48px Graphie;
    letter-spacing: 0px;
    color: #131314;
    opacity: 1;
}


.our-team-text{
    text-align: left;
    font: normal normal 300 24px/31px Graphie;
    letter-spacing: 0px;
    color: #131314;
    opacity: 1;
}

.our-team-image{
    height: 655px;
    background-size: cover;
    object-fit: cover;
}



/* background server */
.background-server{
    background-image: url(img/datacenter.jpg);
    height: 603px;
    width: auto;
    background-size: cover;
    display: block;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
}



.get-in-touch{
    background-color: #2D2B40;
    padding-top: 50px;
    padding-bottom: 50px;
}

.image-legiment{
    width: 535px;
    height: 93px;
    display: block;
    object-fit: contain;
    margin-left: -110px;
}

.get-in-touch-title{
    text-align: left;
    font: normal normal normal 40px/48px Graphie;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}

.get-in-touch-desc{
    text-align: left;
    font: normal normal 300 24px/31px Graphie;
    letter-spacing: 0px;
    color: #FFFFFF;
    margin-top: 50px;
}

.get-in-touch-footer{
    text-align: left;
    font: normal normal 600 24px/31px Graphie;
    letter-spacing: 0px;
    color: #FFFFFF;
    margin-top: 50px;
}

.get-in-touch-row{
    margin-top: 100px;
}



.get-in-touch-box{
    background-color: #FFFFFF;
    width: 600px;
    height: 1000px;
    display: block;
    position: relative;
    margin-top: -200px;
    padding: 50px;
    color: #000000;
}

.git-title{
    font: normal normal bold 50px Graphie;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
}

.git-desc{
    font: normal normal 300 19px Graphie;
    letter-spacing: 0px;
    color: #000000;
}

.git-form{
    margin-top: 50px;
}

.select-form{
    padding-left: 10px;
    padding-right: 10px;
    width: 500px; 
    height: 50px;
    outline: 0;
    border-width: 0 0 2px;
}

.input-form{
    padding-left: 10px;
    padding-right: 10px;
    width: 500px; 
    height: 50px;
    outline: 0;
    border-width: 0 0 2px;
}

.input-text{
    font: normal normal 300 20px/27px Graphie;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
}

.input-checkbox{
    width: 39px;
    height: 39px;
}


.button-submit{
    width: 260px;
    height: 39px;
    background: #00FD40 0% 0% no-repeat padding-box;
    opacity: 1;
    font-weight: bold;
    text-align: left;
    padding-left: 50px;
    padding-right: 10px;
    border: none;
    
}



.footer{
    background-color: #2D2B40;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: left;
    font: normal normal 300 20px/31px Graphie;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;
}