:root {
    --primary-color: #156c94;
    --secondary-color: #c7533e;
    --third-color: #7d9daa;
}

body {
    margin: 0 auto;
    font-family:'Nunito', sans-serif;
    line-height: 1.5em;
    font-size: 1rem;
    box-sizing: border-box;
}

.container {
    width: 80%;
    padding: 0;
    margin: 0 auto;
    
}
.row {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-column-gap: 3rem;
   
}
.col-lg-2 {
    padding: 0;
    margin: 0;
}
header {
    border-bottom: solid 1px var(--primary-color) ;
    position: fixed;
    z-index: 2;
    top: 0;
    width: 100%;
    background-color: #fff;
}
header h1 {
    display: block;
    margin: 0;
    padding-top: .8rem;
}
#logo{
    padding-top: .3rem;
    width: 130px;
}
.col-lg-10 {
    margin: 0;
    padding: 0;
}
.current {
    border-bottom: solid 2px var(--primary-color) ;
    color: var(--third-color);
}
nav a:hover {
    color: var(--third-color);
}
nav ul{
    list-style: none;
    text-align: right;
    font-size: 1rem;
    padding: 0;
    margin: 0;
} 
li {
    display: inline-block;
    padding: 1rem;
}
nav a {
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    color: #555;
}
a {
    color: var(--primary-color);
    text-transform: capitalize;
    text-decoration: none;
}
nav a:hover {
    color: var(--third-color);
    text-decoration: none;
}
a:hover {
    color: var(--third-color);
    text-decoration: underline;
}

/* SHOWCASE */
#showcase {
    background: linear-gradient(
        #10466650,
        rgba(26, 80, 131, 0.13)),
        url(img/board-chart-data.jpg) no-repeat center;
    background-size: cover;
    background-size: cover ;
    height: 70vh;
    border-bottom: solid 1px var(--primary-color) ;
}
#main-title {
    border-radius: 10px;
    /*background-color: rgba(24, 78, 100, 0.521);*/
    background-color:#7d9daa86 ;
    color: #fff;
    width: 50%;
    margin: 15% auto 3rem auto;
}
#main-title h1 {
    font-size: 2.5rem;
    line-height: 1;
    padding: 1rem 0 .8rem 0;
    margin: 0;
    text-shadow: 1px 1px 1px var(--third-color);
}
#main-title p {
    margin: 0;
    padding: 0 .5rem 1rem .5rem;
    font-size: 1.2rem;
    line-height: 1;
    text-shadow: 1px 1px 1px var(--third-color);
}
.row2 button {
    width: 200px;
    padding: 1rem;
    font-size: 1.3rem;
    margin: 0 auto;
    transition: all 1s ease;
}
button {
    font-family: 'Nunito' ;
    font-weight: bold;
    letter-spacing: 1px;
}
.row2 button:hover {
    transform: translateY(-2px);
    background: var(--third-color);
} 
.primary-text {
    color: var(--primary-color);
}
.row2 {
    display: grid;
    text-align: center;
    grid-template-columns: 12fr;
}

/* Features */
#features {
    padding: 3rem 0; 
}
.feat-head {
    padding-bottom: 1rem;
}
.feat-head p {
    color: #555;
}
.row3 {
    display: grid;
    grid-template-columns: repeat(3, 4fr);
    grid-gap: 1rem;
}
.row2 .primary-text {
    font-size: 3rem;
}
.row3 h4 {
    font-size: 1.4rem;
}
.row3 .fa, .fab, .far, .fas {
    font-size: 3rem;
    color: var(--primary-color);
}
.row3 p {
    line-height: 1.6;
    font-size: 1rem;
    color: #555;
}

/* INFO SECTION */
#info {
    margin-top: 2rem;
    background: linear-gradient(
        rgba(16, 70, 102, 0.438),
        rgba(26, 80, 131, 0.13)),
        url(img/people-graphs-and-rates.jpg) no-repeat center;
    background-size: cover;
    height: 65vh;
}
#info .row4 h2 {
    color: #fff;
    letter-spacing: 1px;
}
#info .row4 {
    padding: 2.3rem;
}
#info .list-item i {
    color:var(--primary-color);
}
.big-phone {
    margin-top: 2rem;
    width: 60%;
    display: block;
}
.row4 {
    display: grid;
    grid-template-columns: 6fr 6fr;
    text-align: center;
}
img {
    width: 70%;
}
.list-item {
    margin:0 ;
    padding: 0 ;
    display: grid;
    font-weight: bold;
    letter-spacing: 1px;
    grid-template-rows: 1fr;
    background-color: rgba(16, 80, 105, 0.103);
    color: #fff;
    text-shadow: 1px 1px 1px rgb(53, 53, 53);
}

/* COMPANY  */
#company {
    border-top: solid 1px var(--third-color);
    background-color: #f4f4f4;
    padding-bottom: 1rem;
}
#company .row3 h4  {
    font-size: 1.1rem;
}
#company .row3 p  {
    font-size: .9rem;
}
#list-contact li {
    margin: 0;
    padding: 0;
    font-size: .8rem;
    display: block;
    color: #555;
}
#list-contact .fa {
    font-size: 1rem;
}
button {
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    background-color: var(--primary-color);
    color: #fff;
}
#company .row3 form input , button {
    padding: .5rem;
    border-radius: 5px;
}

/* FOOTER */
.row-footer{
    border-top: solid 1px var(--third-color);
    padding: 2rem;
    background: var(--primary-color);
    text-align: center;
    color: #adadad;
}
.row-footer i.fa {
    font-size: .8rem;
}
.row-footer a {
    color: #adadad;
}
.row-footer a:hover {
    color: var(--third-color); 
}


/* SERVICES PAGE */
#service-main{
    padding: 2.5rem 0;
 
}
#service-main .primary-text {
    font-size: 2rem;
}
#service-main .row3 {
    padding: 2rem 0;
}

.row-service-img {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0;
    text-align: center;
}
.row3 .i-service {
    font-size: 4rem;
}
.img-service {
    width: 100%;
    height: 100%;
    padding: 1rem;
    font-size: 3.5rem;
    color: var(--primary-color);
    margin: auto;
}

.service2 {
    padding: 2rem 0 2rem 0;
}
.service2 p {
    color: #555; 
}
.service2 .primary-text {
    font-size: 2rem;
}
.service2 a {
    color: var(--primary-color);
    text-transform: capitalize;
}
.service2 a:hover {
    color: var(--third-color);
    text-decoration: underline;
}
.sec-div ul {
    padding: 1rem 0 0 0;
    margin: 0;
}
.sec-div li {
    margin: 0;
}
.service2 .row2 {
    padding-top: 5;
    margin: 5rem 0;
}


/* ABOUT PAGE */
/* services & about & contact bar at TOP*/
#row {
    height: 15vh;
    text-align: start;
}
#row .title-page h1 {
    padding-top: 4rem;
    padding-bottom: .5rem;
    padding-left: .5rem;
    background-color:var(--primary-color);
    color: #fff;
    border-radius: 5px;
}
/* service & about & contact */

#about-main {
    padding: 1rem 0 3rem 0;

}
#about-main .primary-text {
    font-size: 2rem;
}
#contact-main .primary-text {
    font-size: 2rem;
}

#about-main p {
    color: #555;
}
.row-about1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-column-gap: 4rem;
    padding: 3rem 0;
}
.row-about1 h2 {
    margin: 0;
    padding: 0;
}
.row-about-img img{
    display: block;
    width: 100%;
    box-shadow: 2px 2px 5px #424242;
    cursor: pointer;
    transition: all .5s;
}
.row-about-img img:hover {
    opacity: 0.9;
}
.row-about-img .img-about-bottom {
    width: 50%;
}

/* CONTACT PAGE */

#form {
    width: 50%;
    margin: 0 auto;
    padding: 2rem 0;
    border-radius: 5px;
    /*background: #f5f4f4;*/
    box-shadow: 1px 1px 5px #979797;
}
.form-group input , textarea , button[type="submit"] {
    border: 0;
    border-bottom: solid 2px var(--third-color);
    width: 50%;
    padding: .6rem .2rem;
    outline: none;
    margin: 0 auto 1.5rem auto;
}
.form-group button {
    border-bottom: none;
}
.form-group label {
    display: inline-block;
    font-weight: bold;
    letter-spacing: 1px;
    width: 50%;
    padding: 0;
    margin: 0 auto;
    text-align: left;
}
.form-group textarea {
    padding: 2.5rem .2rem;
    border: solid 1px;
    border-radius: 5px;
}

.contact-btm {
    margin: 2rem 0;
    padding: 3rem 0;
}
.contact-btm p {
    color: #555;
}

/**   MEDIA QUERY  **/

@media(max-width: 1000px){

    #main-header .row {
        display: grid;
        grid-template-columns: 1fr;
        margin: 0 auto;
        padding: 0;
        text-align: center;
       
    }
    .row ul {
        text-align: center;
        padding: 0;
        margin: 0;
    }
    .row li {
        padding: 1.2rem .8rem 1rem 0;
        margin: 0;
    }
    /* SHOWCASE */
    #main-title {
        width: 50%;
        padding: 0;
        margin: 12rem auto 3rem auto;
    }
    #main-title h1 {
        font-size: 2rem;
    }
    #main-title p {
        font-size: 1rem;
    }
    #main-title .primary-text {
        font-size: inherit;
        font-weight: bold;
    }
    .big-phone {
        margin: 5rem 0;
        width: 60%;
    }

    /* SERVICE PAGE */
    #row .title-page h1 {
        padding-top: 6rem;
        padding-bottom: .5rem;
        padding-left: .5rem;
    }
    #service-main{
        padding: 3rem 0;
    }
    #contact-main {
        margin-top: 3rem;
    }
    #form {
        width: 70%;
    }

}

/** MEDIA QUERY 760PX **/

@media(max-width: 760px){

    #main-title {
        width: 70%;
        padding: 0 .5rem;
        margin: 12rem auto 3rem auto;
    }
    .row3 {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 1rem;
        text-align: center;
    }
    .row3 ul {
        text-align: left;
        width: 40% ;
        margin: 0 auto;
    }
    .row4 {
        display: grid;
        grid-template-columns: 1fr;
    }
    .big-phone {
        margin: 0;
        padding: 0;
        display: none;
    }
    .row-about1 {
        grid-template-columns: 1fr;
        grid-column-gap: 4rem;
        padding: 3rem 0;
        text-align: center;
    }
    .row-about-img  .img-about-bottom {
        width: 100%;
    }
    #info {
        height: 65vh;
    }
    .row4 {
        margin: 0;
        padding: 0;
    
    }
    .row-about-img {
        margin-top: 1rem;
    }
    #contact-main {
        margin-top: 3rem;
    }
    #form {
        width: 100%;
    }
}