:root {
    --spacing: 10px;
    --border-width: 1px;

    --main-bg-color: white;
    --color-text-dark: white;
    --border-color: rgba(115, 115, 115, 0.22);
    --muted-color: #737373;
    --title-color: #3E3E3E;
    --brand-color: #6AA090;
    --brand-color-rgb: 106, 160, 144;

    --brand-color-hard: rgba(19, 124, 93, 0.33);
    --light-background: #F4FCFA;


    --logo-info-width: 25%;    
    --content-width: 1350px;
    --hight-tile-height: 652px;
    --client-item-size: 176px;

    --small-font-size: 16px;
    --big-font-size: 25px;
    --title-font-size: 45px;
    --jumbo-font-size: 82px;

    --secondary-font-family: Raleway;
    
    --invis-border: {
        border: var(--border-width) solid transparent;
    }

    
  }


* {
    padding: 0;
    margin: 0;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    
}

html {
    background-color: var(--main-bg-color);
    height: 100%;
    width: 100%;

    min-width: var(--content-width);
}

body {
    width: var(--content-width);
    margin: 0 auto;
}


header {
    height: 650px;
    width: 100%;
    display: flex;
    flex-direction: row;

}

table, tbody {
    width: 100%;
    border-collapse: collapse
}

.gm-text-center {
    text-align: center;
}

.gm-flex-row {
    display: flex;
    flex-direction: row;
}

.gm-col-4 {
    width: 25% !important;   
}

.gm-tile {
    padding: calc(2* var( --spacing)) calc(4* var( --spacing));
}

.gm-title {
    font-size: var(--title-font-size);
    font-weight: 300;
    color: var(--title-color);
}

.gm-jumbo-font {
    font-size: var(--jumbo-font-size) !important;
    font-weight: 100;
}

.gm-border-none {
    border: none !important;
}

.gm-right-negative-shift {
    margin-right:  calc(-1 * var(--border-width));
}
.gm-botttom-negative-shift {
    margin-bottom:  calc(-1 * var(--border-width));
}

.gm-border-left {
    border-left-color: var(--border-color) !important;
}
.gm-border-right {
    border-right-color: var(--border-color) !important;
}

.gm-border-bottom {
    border-bottom-color: var(--border-color) !important;
}

.gm-border-top {
    border-top-color: var(--border-color) !important;
}


.gm-light-brnad-background {
    background-color: var(--light-background) ;
}

.gm-top-left-triangle {
    background-image: linear-gradient(315deg, transparent 90%, #E4FFF7)
    /* background-image: linear-gradient(192.45deg,  90%, transparent ); */
}

.gm-top-right-triangle-gray {
    background-image: linear-gradient(315deg, transparent 90%, #E4FFF7)
    /* background-image: linear-gradient(192.45deg,  90%, transparent ); */
}

.gm-bottom-left-triangle {
    background-image: linear-gradient(225deg, transparent 90%, #E4FFF7)
    /* background-image: linear-gradient(192.45deg,  90%, transparent ); */
}

.gm-bottom-left-triangle-gray {
    background-image: linear-gradient(225deg, transparent 90%, #F5F5F5)
    /* background-image: linear-gradient(192.45deg,  90%, transparent ); */
}

.gm-table-cell-left {
    background-image: linear-gradient(121.57deg, rgba(142, 211, 191, 0.162) -18.42%, rgba(142, 211, 191, 0) 96.42%);
}

.gm-table-cell-left-b {
    background-image:  linear-gradient(121.57deg, rgba(142, 199, 211, 0.138) -18.42%, rgba(142, 211, 191, 0) 96.42%);
}

.gm-table-cell-left-c {
    background-image:linear-gradient(121.57deg, rgba(142, 199, 211, 0.138) -18.42%, rgba(142, 211, 191, 0) 96.42%);
}

.gm-table-cell-right {
    background-image: linear-gradient(245.32deg, rgba(142, 199, 211, 0.204) -30.32%, rgba(142, 211, 191, 0) 85.91%);
}

.gm-table-cell-top {
    background-image: linear-gradient(178.2deg, rgba(142, 211, 191, 0.174) -51.1%, rgba(142, 211, 191, 0) 93.03%);
}

.gm-table-cell-top-right {
    background-image: linear-gradient(232.51deg, rgba(142, 211, 191, 0.264) 4.87%, rgba(142, 211, 191, 0) 66.27%);
}

.gm-table-cell-top-right-b {
    background-image: linear-gradient(219.62deg, rgba(142, 191, 211, 0.156) 19.12%, rgba(255, 255, 255, 0) 105.23%);
}

.gm-table-cell-top-left {
    background-image: linear-gradient(121.57deg, rgba(142, 199, 211, 0.138) -18.42%, rgba(142, 211, 191, 0) 96.42%);
}

.gm-table-cell-top-left-b {
    background-image: linear-gradient(158.63deg, rgba(142, 191, 211, 0.154) 2.82%, rgba(255, 255, 255, 0) 103.43%);
}

.gm-table-cell-top-left-c {
    background-image:  linear-gradient(138.63deg, rgba(142, 191, 211, 0.08) 2.82%, rgba(255, 255, 255, 0) 103.43%);
}

.gm-table-cell-top-left-d {
    background-image:  linear-gradient(10.57deg, rgba(142, 199, 211, 0.138) -18.42%, rgba(142, 211, 191, 0) 96.42%);
}

.gm-table-cell-bottom-left {
    background-image: linear-gradient(59.63deg, rgba(142, 191, 211, 0.086) -8.92%, rgba(255, 255, 255, 0) 111.25%);
}

.gm-table-cell-bottom-left-b {
    background-image: linear-gradient(121.57deg, rgba(142, 211, 191, 0.162) -18.42%, rgba(142, 211, 191, 0) 96.42%);
}


.gm-absolut-stack {
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

 /* small text tiles  */

 .gm-small-text-tile-number {
    color : #4242426E;
    font-size: var(--small-font-size);
    letter-spacing:.08em ;
 }

 .gm-small-text-tile-text {
    padding-top: calc(0.5 * var(--spacing));
    width: 70%;
    font-size: var(--small-font-size);
}

.gm-small-text-tile-end {
    padding-top: var(--spacing);
    display: block;
    width: 30%;
    border-bottom: 3px solid var(--brand-color-hard);
}

/*---------------------*/

/* nav */
.gm-logo-container {
    align-items: center;
}

.gm-nav{
    margin-left: 40px;
    width: 60px;
    height:60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}

.gm-nav > .gm-green {
    height: 5px ;
    background-color: #0CB683;
    margin-bottom: calc(0.5*var(--spacing));
}

.gm-nav > .gm-gray {
    height: 5px ;
    background-color: #737373;
}

/* header */

.gm-logo-info {
    width: var(--logo-info-width);
    display: flex;
    flex-direction: column;
}

.gm-logo-info-text {
    position: relative;
    left: calc(3*var(--spacing));
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 70%;
    color: var(--muted-color);
    font-weight: 500;
    font-size: 18px;
}

.gm-nav-menu {
    transition: 1s;
    position: absolute;
    overflow: hidden;
    top:0;
    height: 0;
    width: 100%;
}

.gm-nav-menu.active {
    padding-top: 50px;
    height: 500px;
    /* background: rgba(var(--brand-color-rgb),0.5); */
    background: white;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gm-nav-menu li {
    list-style: none;
    height: 100px;
    text-align: center;
}

.gm-nav-menu li a {
    color:inherit;
    text-decoration: none;
}

.gm-hero {
    background: url("./hero-banner.webp") border-box no-repeat;
    background-size: cover;
    color: var(--color-text-dark);
    width: 75%;
    
}

.gm-hero-top-list {
    padding: 2.5em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.gm-hero-top-list a {
    text-decoration: none;
    color: inherit;
}

.gm-hero-title {
    box-sizing: content-box;
    padding: 0 150px;
}

.gm-hero-title h1 {
    width: 70%;
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 54px;
    line-height: 63px;
    letter-spacing: 0.02em;
}

.gm-hero-title-number {
    color: rgba(255, 255, 255, 0.32);
    font-family: 'Roboto Slab'; 
    font-size: 30px;
    margin: -60px
}


/* first line tiles */

.gm-intro-line > div{
    height: 195px;
    box-sizing: border-box;
    border: var(--border-width) solid transparent;
}

.gm-main-intro-line-image {
    background: url('./first-line-banner.webp') content-box no-repeat;
}

/* Intermediate title */

.gm-inter-title-container {
    height: 0;
}

.gm-inter-title {
    position: relative;
    top: 150px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}   

.gm-inter-title-no-shift{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gm-inter-title h3{

    margin-bottom: var(--spacing);
}


.gm-inter-title-end {
    position: relative;
    height: 0;
    display: block;
    width: 200px;
    border-bottom: 5px solid rgba(19, 124, 93, 0.33);
}

/* hight tiles */

.gm-services-line > div {
    height: var(--hight-tile-height);
    box-sizing: border-box;
    border: var(--border-width) solid transparent;
}

.gm-services-line p {
    position: relative;
    top:50%;
    
    font-size: var(--big-font-size);
    color: var(--muted-color);
    text-align: center;

    height: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gm-pc-glyph {
    background: url('./pc-glyph.svg') content-box center no-repeat;
}

.gm-server-glyph {
    background: url('./server-glyph.svg') content-box center no-repeat;
}

.gm-cctv-glyph {
    background: url('./cctv-glyph.svg') content-box center no-repeat;
}

.gm-doc-back-glyph {
    background: url('./doc-back-glyph.svg') content-box center no-repeat;
}

.gm-download-glyph {
    background: url('./download-btn.svg') content-box center no-repeat;
    height: 51px;
    width: 51px;;
    margin-bottom: 10px;
}

/* services description */

.gm-services-description-line > div {
    height: 373px;
    padding: calc(3*var(--spacing));
    border: var(--border-width) solid transparent;
}

.gm-services-description-line p {
    position: relative;
    top:25%;
    font-size: var(--big-font-size);
    font-weight: 400;
    color: var(--muted-color);
}


.gm-box-shadow-container {
    position: relative;

}

.gm-box-shadow-white-background {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--main-bg-color);
}

.gm-box-shadow {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 0px;
    width: 0px;
    border-radius: 10px;

    box-shadow: 0 0 200px 180px rgba(var(--brand-color-rgb),0.7) ;
}

/* clients section */

.gm-clients-line{
    position: relative;
}

.gm-clients-line  > div {
    height: 800px;
    border: var(--border-width) solid transparent;
}

.gm-clients-block > h2 {
    padding: calc(8*var(--spacing)) 0 calc(3*var(--spacing)) 0;
    background-color: var(--main-bg-color);
    font-size: var(--title-font-size);
    font-weight: 300;
    color: var(--title-color);
}

.gm-clients-list {
    margin-top: calc(8*var(--spacing));
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.gm-client-item {
    width: var(--client-item-size);
    height: var(--client-item-size);
    border-radius: var(--client-item-size);
    box-shadow: inset 0 0 5px 0px var(--brand-color-hard);
    z-index: 1;
    background-color: var(--main-bg-color);

    display: flex;
    justify-content: center;
    align-items: center;
}

.gm-client-item.active {
    box-shadow: 0 0 80px 80px rgba(var(--brand-color-rgb),0.2);
    width: calc(1.3 * var(--client-item-size));
    height: calc(1.3 * var(--client-item-size));
}

.gm-client-arrows {
    padding-top: calc(5*var(--spacing));
    display: flex;
    flex-direction: row;
    width: 30%;
    justify-content: space-evenly;

    color: var(--muted-color);
    font-size: var(--title-font-size);


}

.gm-arrow-left {
    cursor: pointer;
}

.gm-arrow-right {
    cursor: pointer;
}

.gm-client-feedback {
    margin: calc(3*var(--spacing));
    text-align: center;
}

.gm-client-feedback > h3 {
    margin-bottom: var(--spacing);
}

.gm-client-feedback > p {
    width: 50%;
    display: inline-block;
}

/* --------------- */



/* About company  */

.gm-about-company-line{
    position: relative;
}

.gm-about-company-line > div {
    height: 800px;
    border: var(--border-width) solid transparent;
}

.gm-company-block > h2{
    width: 100%;
    text-align: center;
}

.gm-company-block-description {
    position:absolute;
    top: 100px;
    height: 550px;
    left: 40%;
    right: 0;
    background-image: linear-gradient(to right,rgba(142, 211, 191, 0.4), transparent);;
}

.gm-company-block-description > p {
    position: absolute;
    width: 60%;
    top:25%;
    left:40%;
    font-size: var(--big-font-size);
    font-weight: 300;
}

.gm-company-team-img {
    position: absolute;
    left: 0;
    top:160px;
}

/* Services table */
.gm-services  .gm-col-4 {
    padding: calc(4 *var(--spacing)) calc(2 *var(--spacing));
    color: var(--title-color);
    text-align: center;
    font-size: var(--big-font-size);
    font-family: var(--secondary-font-family);

    display: flex;
    align-items: center;
    justify-content: center;
}

.gm-services-title {
    position: relative;
    top: calc(7 * var(--spacing));
    margin-top:  calc(-12 * var(--spacing));
    
}

.gm-services-title .gm-col-4 {
    font-size: var(--jumbo-font-size);
    color: rgba(62, 62, 62, 0.33);
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 100;

    padding-top: calc(7 * var(--spacing));
    border-top: 1px solid transparent;
   
}

.gm-services-info p {
    margin: calc(2* var(--spacing));
    font-family:  var(--secondary-font-family);
    font-size:  var(--big-font-size);

}


/* End line */

.gm-end-line {

}

.gm-end-line > div {
    height: 400px;
    border: var(--border-width) solid transparent;
}

.gm-download {
    background-image: linear-gradient(165.57deg, rgba(142, 211, 191, 0.162) 20%, rgba(142, 211, 191, 0) 65%);
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

}

.gm-download-link {
    display: flex;
    border-radius: 9px;
    border:6px solid #dcebe7;
    text-decoration: none;
    color: var(--muted-color);

    margin: 25px;
    height: 104px;
    width:  104px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/*  Footer */

footer {
    position: relative;
    height: 300px;
    /* background-image: linear-gradient(180deg, rgba(19, 124, 93, 0.15) 7.43%, rgba(19, 124, 93, 0) 54.81%); */
}

footer > img {
    position: absolute;
    width: 135px;
    left: calc(2*  var(--spacing));;
    bottom: calc(2*  var(--spacing));
}