/*
 css file

*/
/************Global*************/
:root {
    --primary-color: #126A75;
    --orange-color: #F08128;
    --orange-dark-color: #AB4917;
    --blue-dark-color: #0D5D8F;
    --green-color: #6AB652;
    --green-dark-color: #098537;
    --purple-color: #5E2B86;
    --black-color: #1D1D1B;
    --red-color: #E62049;
    --red-dark-color: #911633;
    --blue-color: #06A0BC;
    --yellow-color: #e2d217;
    --yellow-dark-color: #BAA80C;
    --grey-color: #7A7A77;
    --pink-color: #DEA6CC;
  }
body{
    margin: 0;
    transition: all .3s ease-in;
    letter-spacing: -0.02px;
    word-wrap: break-word;
    background: url('../img/background.png') no-repeat transparent top center;
    background-size: cover;
    color: var(--primary-color);
    font-size: 15px;
    line-height: 18px;
    font-family:  'Helvetica Neue', sans-serif;
}

h1,
h2{
    
    
    font-weight: 700;
}
p{
    margin-top: 0;
    margin-bottom: 0.75rem;
}

p:last-child {
    margin-bottom: 0 !important;
}
*{
    min-height: 0;
    min-width: 0;
    transition: all .3s ease-in;
    box-sizing: border-box;
}
.container{
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
}
img{
    max-width: 100%;
    display: block;
}
/*******Header******/
.site-header .head-content{
    display: flex;
    padding: 30px 0 50px;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}
.site-header .head-content h1{
    margin: 0;
 }
.site-header .head-lang ul{
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    font-size: 20px;
}
.site-header .head-lang ul li a{
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    color: var(--primary-color);
}
.section .row{
    display: flex;
    gap: 40px;
    justify-content: space-between;
}
.section .row .col{
    flex: 1;
 }
.section .box h2,
.section .title-h2{
    margin: 0 0 30px;
    background-color: #fff;
    padding: 15px 15px 15px 25px;
    position: relative;
    display: inline-flex;
    gap: 40px;
    align-items: center;
    font-size: 18px;
    color: var(--orange-color);
    border-radius: 5px;
    box-shadow: 1px 0 1px 2px rgba(104, 102, 102, 0.05);
    line-height: 20px;
 }
 .section .box h2::before,
 .section .title-h2::before{
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    left: 5px;
    background: url('../img/ruban.png') no-repeat top center transparent;
    height: 58px;
    background-size: contain;
    width: 55px;
 }
.section .box h2 span,
.section .title-h2 span{
    color: #fff;
    position: relative;
    z-index: 2;
}
.section .box{
    margin-bottom: 20px;
}
.section .box p{
    margin-bottom: 0;
    text-align: justify;
    padding-left: 35px;
}
.section .listing-services,
.section .listing-servicesF,
.section  .listing-solutions{
    display: flex;
    gap: 10px;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 20px;
}
.section .listing-servicesF{
    justify-content: center;
}
.section .listing-services .item-service{
    flex: 0 0 calc(50% - 5px);
    text-align: center;
}
.section .listing-servicesF .item-service{
    flex: 0 0 calc(50% - 5px);
}
.section .listing-services .item-service h3{
    margin: 0;
    text-align: center;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    display: flex;
    font-style: italic;
    background-color: var(--blue-dark-color);
    font-size: 14px;
    line-height: 16px;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    font-weight: 500;
    height: 100%;
}
.section .listing-services .item-service:nth-child(2) h3{
    background-color: var(--orange-color);
}
.section .listing-services .item-service:nth-child(3) h3{
    background-color: var(--green-color);
}
.section .listing-services .item-service:nth-child(4) h3{
    background-color: var(--red-color);
}
.section .listing-services .item-service:nth-child(5) h3{
    background-color: var(--purple-color);
}
.section .listing-services .item-service:nth-child(6) h3{
    background-color: var(--primary-color);
}
.section .listing-services .item-service:nth-child(7) h3{
    background-color: var(--black-color);
}
.section .listing-services .item-service:nth-child(5) h3{
    background-color: var(--blue-color);
}

.section .listing-services .item-service h3::before{
    content: '';
    display: block;
    height: 31px;
    background-color: #fff;
    border-radius: 5px;
    flex: 0 0 31px ;
}
.section .listing-services .item-service h3 span{
    flex: 0 0 calc(100% - 36px);
}
.section .listing-servicesF .item-service{
    background: linear-gradient(to right, var(--blue-dark-color), rgba(13, 93, 143, 0.5) 30%, rgba(135, 135, 135, 0.1) 60% );
    border-radius: 25px;
    padding: 2px;
}
.section .listing-servicesF .item-service:nth-child(2){
    background: linear-gradient(to right, var(--orange-color), rgba(240, 129, 40, 0.5) 30%, rgba(135, 135, 135, 0.2) 60% );
}
.section .listing-servicesF .item-service:nth-child(3){
    background: linear-gradient(to right, var(--green-color), rgba(106, 182, 82, 0.5) 30%, rgba(135, 135, 135, 0.2) 60% );
}
.section .listing-servicesF .item-service:nth-child(4){
    background: linear-gradient(to right, var(--red-color), rgba(230, 32, 73, 0.5) 30%, rgba(135, 135, 135, 0.2) 65% );

}
.section .listing-servicesF .item-service:nth-child(5){
    background: linear-gradient(to right, var(--purple-color), rgba(94, 43, 134,0.5) 30%, rgba(135, 135, 135, 0.2) 60% );

}
.section .listing-servicesF .item-service:nth-child(7){
    background: linear-gradient(to right, var(--blue-color), rgba(6, 160, 188, 0.5) 30%, rgba(135, 135, 135, 0.2) 65% );
    flex: 0 0 auto;
}
.section .listing-servicesF .item-service:nth-child(6){
    background: linear-gradient(to right, #126A75, rgba(18, 106, 117, 0.5) 30%, rgba(18, 106, 117, 0.2) 60% );

}
.section .listing-servicesF .item-service h3{
    margin: 0;
    font-weight: 400;
    font-size: 15px;
    line-height: 17px;
    background-color: #ffffff;
    padding: 10px 15px;
    border-radius: 25px;
    
} 
.section .listing-solutions{
    gap: 20px;
}
.section .listing-solutions .item-solution{
    flex: 0 0 calc(25% - 15px);
    position: relative;
    border: 1px solid var(--orange-color);
    border-radius: 5px;
}
.section .listing-solutions .item-solution::before{
    content: '';
    display: block;
    height: 5px;
    width: 70px;
    background-color: var(--orange-color);
    position: relative;
    top: -5px;
    margin: 0 auto;
}
.section .listing-solutions .item-solution h3{
   color: var(--orange-color)
}
.section .listing-solutions .item-solution:nth-child(2){
   border-color: var(--blue-color);
}
.section .listing-solutions .item-solution:nth-child(2):before{
    background-color: var(--blue-color);
}
.section .listing-solutions .item-solution:nth-child(2) h3{
   color: var(--blue-color);
}
.section .listing-solutions .item-solution:nth-child(3){
   border-color: var(--red-color);
}
.section .listing-solutions .item-solution:nth-child(3):before{
    background-color: var(--red-color);
}
.section .listing-solutions .item-solution:nth-child(3) h3{
   color: var(--red-color);
}
.section .listing-solutions .item-solution:nth-child(4){
   border-color: var(--green-color);
}
.section .listing-solutions .item-solution:nth-child(4):before{
    background-color: var(--green-color);
}
.section .listing-solutions .item-solution:nth-child(4) h3{
   color: var(--green-color);
}
.section .listing-solutions .item-solution:nth-child(5){
   border-color: var(--purple-color);
}
.section .listing-solutions .item-solution:nth-child(5):before{
    background-color: var(--purple-color);
}
.section .listing-solutions .item-solution:nth-child(5) h3{
   color: var(--purple-color);
}
.section .listing-solutions .item-solution:nth-child(6){
   border-color: var(--blue-dark-color);
}
.section .listing-solutions .item-solution:nth-child(6):before{
    background-color: var(--blue-dark-color);
}
.section .listing-solutions .item-solution:nth-child(6) h3{
   color: var(--blue-dark-color);
}
.section .listing-solutions .item-solution:nth-child(7){
   border-color: var(--yellow-color);
}
.section .listing-solutions .item-solution:nth-child(7):before{
    background-color: var(--yellow-color);
}
.section .listing-solutions .item-solution:nth-child(7) h3{
   color: var(--yellow-color);
}
.section .listing-solutions .item-solution:nth-child(8){
   border-color: var(--black-color);
}
.section .listing-solutions .item-solution:nth-child(8):before{
    background-color: var(--black-color);
}
.section .listing-solutions .item-solution:nth-child(8) h3{
   color: var(--black-color);
}
.section .listing-solutions .item-solution:nth-child(9){
   border-color: var(--green-dark-color);
}
.section .listing-solutions .item-solution:nth-child(9):before{
    background-color: var(--green-dark-color);
}
.section .listing-solutions .item-solution:nth-child(9) h3{
   color: var(--green-dark-color);
}
.section .listing-solutions .item-solution:nth-child(10){
   border-color: var(--grey-color);
}
.section .listing-solutions .item-solution:nth-child(10):before{
    background-color: var(--grey-color);
}
.section .listing-solutions .item-solution:nth-child(10) h3{
   color: var(--grey-color);
}
.section .listing-solutions .item-solution:nth-child(11){
   border-color: var(--orange-dark-color);
}
.section .listing-solutions .item-solution:nth-child(11):before{
    background-color: var(--orange-dark-color);
}
.section .listing-solutions .item-solution:nth-child(11) h3{
   color: var(--orange-dark-color);
}
.section .listing-solutions .item-solution:nth-child(12){
   border-color: var(--pink-color);
}
.section .listing-solutions .item-solution:nth-child(12):before{
    background-color: var(--pink-color);
}
.section .listing-solutions .item-solution:nth-child(12) h3{
   color: var(--pink-color);
}
.section .listing-solutions .item-solution .item-solution-content{
    padding: 5px 5px;
    text-align: center;
    background-color: #fff;
    border-radius: 5px;
}
.section  .listing-solutions .item-solution .item-solution-content h3{
    font-size: 12px;
    margin-bottom: 10px;
    margin-top: 0;
}
.section  .listing-solutions .item-solution .item-solution-content p{
    text-align: center;
    padding: 0;
    margin: 0;
    font-size: 12px;
    line-height: 14px;
}
.section{
    position: relative;
    margin-bottom: 30px;
}
.section-one::before{
    height: calc(100% - 50px);
    width: 1px;
    content: '';
    display: block;
    position: absolute;
    left: calc(50% - 1px);
    background-color: var(--blue-dark-color);
    top: 10px;
}
.section .boxes{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}
.section .box-project{
    max-width: 430px;
}
.section .box-project ul{
    display: flex;
    list-style: none;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    margin: 0;
}
.section .box-project h3{
    font-weight: 700;
    padding-left: 80px;
}
.section .box-project h3 span{
    display: inline-block;
    background-color: var(--blue-dark-color);
    color: #fff;
    text-transform: uppercase;
    font-size: 17px;
    line-height: 20px;
    border-radius: 5px;
    padding: 5px 10px;
}
.section .box-project ul li{
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 12px;
    position: relative;
}
.section .box-project ul li h4{
    margin: 0;
    flex: 0 0 110px;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    text-align: right;
}
.section .box-project ul li p{
    line-height: 14px;
    margin-bottom: 5px;
    
}
.section .box-project ul li p:last-child{
    margin: 0;
}
.section .box-project ul li.blue{
    color: #0D71B9;
}
.section .box-project ul li::before{
    content: '';
    display: block;
    width: 1px;
    position: absolute;
    left: 120px;
    top: 0;
    height: 100%;
    background-color: #0D71B9;
}
.section .box-project ul li.dark-orange{
    color: var(--orange-dark-color);
}
.section .box-project ul li.dark-orange::before{
    background-color: var(--orange-dark-color);
}
.section .box-project ul li.primary{
    color: var(--primary-color);
}
.section .box-project ul li.primary::before{
    background-color: var(--primary-color);
}
.section .box-project ul li.orange{
    color: var(--orange-color);
}
.section .box-project ul li.orange::before{
    background-color: var(--orange-color);
}
.section .box-project ul li.yellow-dark{
    color: var(--yellow-dark-color);
}
.section .box-project ul li.yellow-dark::before{
    background-color: var(--yellow-dark-color);
}
.section .box-project ul li.green{
    color: var(--green-color);
}
.section .box-project ul li.green::before{
    background-color: var(--green-color);
}
.section .box-project ul li.dark-red{
    color: var(--red-dark-color);
}
.section .box-project ul li.dark-red::before{
    background-color: var(--red-dark-color);
}
.section .box-project ul li.dark{
    color: #000;
}
.section .box-project ul li.dark::before{
    background-color: #000;
}
.section .box-project ul li.purple{
    color: var(--purple-color);
}
.section .box-project ul li.purple::before{
    background-color: var(--purple-color);
}
.section .box-project ul li.dark-green{
    color: var(--green-dark-color);
}
.section .box-project ul li.dark-green::before{
    background-color: var(--green-dark-color);
}
.section .box-project h3.small-title span{
    font-size: 8px;
    line-height: 10px;
    text-align: center;
}
.section .box-project-thumb{
    max-width: 800px;
    position: relative;
    left: -120px;
    top: -50px;
}
.section .box-projectRigt{
    position: relative;
    top: -77px;
    position: absolute;
    right: 0;
}
.site-footer .infos-contact{
    border-top: 1px solid #ebebeb;
    padding: 15px 0;
    text-align: center;
    color: #000;
}
.site-footer .infos-contact ul{
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    gap: 10px;
    color: #000;
    justify-content: center;
    flex-wrap: wrap;
}
.site-footer .infos-contact ul li{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
}
.site-footer .infos-contact  i{
    color: var(--blue-color);
}
.site-footer .infos-contact a{
    color: #000;
    text-decoration: none;
}
.site-footer .infos-contact a:hover{
    color: var(--blue-color);
}
.site-footer .infos-contact p{
    margin-bottom: 5px;
    font-size: 12px;
}
.site-footer .infos-contact .text-orange{
    color: var(--orange-color);
    text-transform: uppercase;
}
@media (max-width: 1400px) {
	.section .box-project-thumb {
        left: -80px; 
        max-width: 800px;
    }
}
@media (max-width: 1300px) {
    .section .listing-servicesF .item-service h3{
        font-size: 12px;
        padding: 8px 12px;
        line-height: 14px;
    }
    .section .listing-services .item-service h3{
        font-size: 13px;
    }
    .section .box-project-thumb {
        max-width: 715px;
    }
}
@media (max-width: 1250px) {
	.container {
		padding: 0 15px;
	}
    .section .box-project-thumb {
        left: -152px;
        max-width: 600px;
    }
}
@media (max-width: 1200px) {
    .section .box-project {
        max-width: 300px;
    }
    .section .box-project ul li p br{
        display: none;
    }
    .section .box-project-thumb {
        max-width: 500px;
    }
}
@media (max-width: 991px) {
    .section .row{
        flex-direction: column;
        gap: 30px;
    }
    .section-one::before{
        display: none;
    }
    .section .box p{
        padding: 0;
    }
    .section .box-projectRigt{
        position: relative;
        top: 0;
        right: auto;
    }
    .section .box-project-thumb{
        left: auto;
        top: 0;
        max-width: 400px;
    }
    .section {
        margin-bottom: 20px;
    }
}
@media (max-width: 767px) {
    .section .listing-solutions .item-solution {
        flex: 0 0 calc(33% - 15px);
    }
    .section .row {
        gap: 10px;
    }     
    .section .box-project {
        max-width: 100%;
    }
    .section .box-project-thumb{
        margin: 0 auto;
    }
}
@media (max-width: 450px) {
    .section .listing-services .item-service,
    .section .listing-servicesF .item-service:nth-child(7),
    .section .listing-servicesF .item-service{
        flex: 0 0 100%;
    }
    .section .listing-solutions .item-solution {
        flex: 0 0 calc(50% - 15px);
    }
}