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

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 30px;

}


a{
    text-decoration: none;
}

/* utility classes */
.btn {
     background: #6495ed;
     padding: 22px 25px;
     border-radius: 10px;
     color: #fff;
     text-transform: capitalize;
     transition: .4s;
}

.btn:hover {
    background:  rgb(105, 131, 179);
}

.container {
    max-width: 1500px;
    margin: auto;
    padding: 1rem;
}

i{
    font-size: 2rem;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 1rem;
}

/* this is navbar */
#navbar {
    margin-bottom: 3rem;
}
#navbar .main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#navbar ul{
    list-style: none;
    display: flex;
    justify-content: space-between;
    margin-right: 10px;
}

#navbar ul li a {
    color: #000;
    padding: 1rem;
    text-transform: uppercase;
}

#navbar ul li a:hover {
    color: #777;
}

#navbar .side a {
    background: #6495ed;
    color: #fff;
    padding: 20px 12px;
    border-radius: 6px;
    text-transform: uppercase;
    transition: .3s;
}

#navbar .side a:hover {
   background: rgb(105, 131, 179);
}


/* this is showcase */
#showcase .showcase-content .top {
    margin-bottom: 10px;
}

#showcase .showcase-content p {
    margin-bottom: 2rem;
}

#showcase .side p {
    margin-bottom: 0;

}

#showcase .side h6 {
    font-size: 1rem;
    font-weight: bold;
}

#showcase .showcase-content h1 {
    font-size: 3rem;
    line-height: 3.5rem;
    margin-bottom: 2rem;
}

#showcase .side {
    margin-top: 2.5rem;
    display: flex;
    align-items: center;
}

#showcase .side i {
    margin-top: 1rem;
    font-size: 1rem;
}

#showcase .showcase-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

#showcase .main-section {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    align-self: center;
    align-items: center;
    text-align: center;
}

 #showcase .main-section div {
    margin-bottom: 2rem;
}

#showcase .main-section .i-1 > i{
    color: #31D1F3;
    background: #cfeaf5;
}

#showcase .main-section .i-2 > i {
color: #f76279;
background: #f7e8ea;
}

#showcase .main-section .i-3 > i {
    color:#ffd7b3;
    background: #f7eadf;
}

#showcase .main-section .i-4 > i {
    color: #909cff;
    background: #cfd2e7;
}

#showcase .main-section .i-5 > i {
    color: #60b5c2;
    background: #d9f6fa;
}

#showcase .main-section .i-6 > i {
    color: #909cff;
    background: #ccd0f3;
}

#showcase .main-section .i-7 > i {
    color: #f76279;
    background: #f1cdd2;
}

#showcase .main-section .i-8 > i {
    color: #ffd7b3;
    background: #e7e0d9;
}

#showcase .main-header {
    margin-top: 6rem;
    margin-bottom: 5rem;
}

#showcase .main-header h1 {
    font-size: 2rem;
    padding: 1rem;
    text-align: center;
    margin-bottom: 5rem;
    line-height: 2.5rem;
}

#showcase .main-header img {
    width: 50px;
}
 
/* technolgy */
#technology {
    margin-bottom: 7rem;
}

#technology .info-container {
    margin-bottom: 10rem;
}

#technology .text-center {
    text-align: center;
    margin-top: 2rem;
}

#technology .text-center h5{
    font-size: 1rem;
    text-transform: capitalize;
    margin-bottom: 1rem;
}

#technology .text-center h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
    text-transform: capitalize;
    line-height: 2.2rem;
}


#technology .text-center p{
    font-size: 1rem;
    text-transform: capitalize;
    margin-bottom: 1rem
}


#technology .info-icon {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1rem;
    align-self: center;
}

#technology .info-icon div {
    padding: 1rem;
}

#technology .info-icon .i-1,
#technology .info-icon .i-2,
#technology .info-icon .i-3{
    padding: 2rem;
    transition: 1s;
} 

#technology .info-icon .i-1:hover,
#technology .info-icon .i-2:hover,
#technology .info-icon .i-3:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
}

#technology .info-icon .i-1 > i {
    color: #31D1F3;
    background: #cfeaf5;
} 

#technology .info-icon .i-2 > i {
    color: #f76279;
    background: #f7e8ea;
} 

#technology .info-icon .i-3 > i {
    color:#ffd7b3;
    background: #f7eadf;   
}

#technology .info-icon h1 {
    text-transform: capitalize;

}

#technology .info-icon div {
    text-align: center;
}

#technology .info-icon div h1 {
    margin-bottom: 1rem;
}

#technology .logo {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin-top: 4rem;
    align-self: center;
}

#technology .logo {
    text-align: center;
}


/* customers */
#customers .section-a, .section-b, .section-c {
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 3rem;
    margin-bottom: 9rem;
}

#customers div h6 {
    text-transform: uppercase;
    font-size: 1rem;
    margin-bottom: 8px;
}

#customers div h1 {
    margin-bottom: 1.5rem;
    line-height: 2.2rem;
}

#customers div  {
    margin-top: 3rem;
}

/* pricing */

#pricincg .box {
    background: url(../img/company.jpg) no-repeat center center/cover;
    height: 350px;
    margin-bottom: 4.5rem;
}

#pricincg .text {
    text-align: center;
    padding-top: 5rem;
}

#pricincg .text h1 {
    color: #ffffff;
    margin-bottom: 3.5rem;
    text-transform: capitalize;
}

/* coumpany */
#company .info-company {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

#company .info-company h1 {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

#company .info-company li {
    list-style: none;
    margin-bottom: .50rem;
}

#company .info-company li a {
    color: #888;
}

#company .info-company li a:hover {
    border-bottom: 1px solid #000;
}

#company .info-company .bold {
    text-transform: capitalize;
    font-weight: bold;
}


/* footer */
#footer .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #f4f4f4;
}

#footer .footer-content .social i {
    font-size: 2rem;
    transition: .3s;
    text-align: center;
}

#footer .footer-content .social i:hover {
    transform: scale(1.3);
}


#footer .footer-content h1 {
    color: #888;
    font-size: 1.5rem;
    text-transform: capitalize;
    margin-bottom: 1.5rem;
}

#footer .footer-content p span {
    font-weight: bold;
}