@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css');

:root {
    --primary: #f16423;
    --secondary: #2171f4;
}

body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    overflow-x: hidden;
    background: #f2f2f2;
}

.container {
    max-width: 1630px;
}
.container.xs {
    max-width: 1200px;
}
.container.sm {
    max-width: 1400px;
}

img {
    max-width: 100%;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    transition: all .4s ease;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
    color: var(--primary);
}

.bg-cover {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
    font-weight: 400;
}

p {
    font-size: 16px;
    color: #686868;
    line-height: 1.6;
}

/* .inner-banner .image:before,
.home-banner .image:before {display: none;}
.image {overflow: hidden; position: relative;}
.image:before {
    content: '';
    width: 100%;
    height: 100%;
    background: radial-gradient(transparent, black);
    position: absolute;
    left: 0;
    top: 0;
    transition: all .4s ease;
    opacity: 0;
}
.image:hover:before {opacity: 1;} */


.heading {
    margin-bottom: 35px;
}

.section-title {
    font-size: 32px;
    font-weight: 600;
    color: var(--secondary);
    position: relative;
    padding-bottom: 15px;
    margin: 0 0 24px 0;
    text-align: center;
}
.section-title:after {
    content: '';
    width: 64px;
    height: 5px;
    background: var(--primary);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

h4 {
    font-size: 32px;
    font-weight: 600;
    color: var(--secondary);
    margin: 0 0 20px 0;
}
h4.sm {
    font-size: 22px;
}



/* Buttons */

.btn-primary {
    background: var(--primary);
    color: #fff;
    border-radius: 50px;
    border: 1px solid transparent;
    padding: 13px 23px;
    line-height: 1;
    box-shadow: none;
    min-width: 130px;
    display: inline-block;
}

.btn-white {
    background: #fff;
    color: #000;
}

.btn-border {
    background: transparent;
    border-color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #fff;
    box-shadow: none;
}


/* Header CSS */

.header-wrapper {
    position: absolute;
    left: 0;
    top: 18px;
    width: 100%;
    z-index: 5
}
.contact-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;   
}
.contact-links li {
    position: relative;
}
.contact-links li:not(:last-child) {
    margin-right: 25px;
}
.contact-links li:not(:last-child):after {
    content: '';
    width: 1px;
    height: 25px;
    background: #999999;
    position: absolute;
    right: -14px;
    top: 0;
}
.contact-links a {
    color: #fff;
    display: flex;
    align-items: center;
}
.contact-links a i {
    font-size: 25px;
    margin-right: 8px;
}
.contact-links li a:hover {
    color: var(--primary);
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}
.social-links li:not(:last-child) {
    margin-right: 15px;
}
.social-links li a {
    font-size: 23px;
    color: #fff;
}
.social-links li a:hover {
    color: var(--primary);
}

header {
    background: #fffeff;
    padding: 0 50px;
    margin-top: 15px;
}

header .logo-holder {
    padding: 15px 0;
}

.navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}
.navigation > li:not(:last-child) {
    margin-right: 28px;
}
.navigation > li > a:not(.btn) {
    color: #676767;
    display: block;
    position: relative;
    padding: 42px 0;
}

.navigation > li.active > a:not(.btn):before,
.navigation > li:hover > a:not(.btn):before {
    content: '';
    background: url(../images/caret-up-solid.svg) center bottom -8px no-repeat;
    background-size: 14px;
    width: 100%;
    border-bottom: 4px solid var(--primary);
    position: absolute;
    left: 0;
    bottom: 0;
    height: 15px;
    transition: all .4s ease;
}

.navigation > li > a:not(.btn):hover,
.navigation > li.active > a:not(.btn) {
    color: var(--primary);
}


.has-menu {
    position: relative;
}
.has-menu .sub-menu {display: none}
header .has-menu .sub-menu {
    background: #fff;
    position: absolute;
    left: 0;
    top: 100%;
    box-shadow: 0 15px 18px rgba(0, 0, 0, 0.21);
    width: 240px;
    border-top: 4px solid var(--primary);
    margin-top: -4px;
    z-index: 5;
}
header .has-menu .sub-menu li a {
    color: #676767;
    padding: 17px 16px;
    border-bottom: 1px solid #d6d5d6;
    display: block;
}
header .has-menu .sub-menu li a:hover,
header .has-menu .sub-menu li.active a {
    color: var(--primary);
}
header .has-menu:hover .sub-menu {
    display: block;
}


/* Slick Slider */
.slick-slider,
.slick-slider * {
    outline: none !important;
}
.slick-dots {
    position: absolute;
    left: 0;
    bottom: 35px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    z-index: 5;
}
.slick-dots > li:not(:last-child) {
    margin-right: 10px;
}
.slick-dots button {
    width: 10px;
    height: 10px;
    font-size: 0;
    border: 0;
    border-radius: 50px;
    padding: 0;
    background: rgba(255, 255, 255, 0.47);
    cursor: pointer;
}
.slick-dots .slick-active button {
    background: var(--primary);
}

/* col-gaps */
@media screen and (min-width: 1700px){
    .col-gap-180 {
        margin: 0 -90px;
    }
    .col-gap-180 [class^="col-"] {
        padding: 0 80px;
    }

    .col-gap-40 {
        margin: 0 -20px;
    }
    .col-gap-40 [class^="col-"] {
        padding: 0 20px;
    }

    .col-gap-60 {
        margin: 0 -30px;
    }
    .col-gap-60 [class^="col-"] {
        padding: 0 30px;
    }

    .col-gap-80 {
        margin: 0 -80px;
    }
    .col-gap-80 [class^="col-"] {
        padding: 0 80px;
    }

    .col-gap-10 {
        margin: 0 -8px;
    }
    .col-gap-10 [class^="col-"] {
        padding: 0 8px;
    }

}

/* Home Banner */
.home-banner .image {
    padding-bottom: 51%;
    background-color: #000;
    position: relative;
}
/* .home-banner .image:before {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
} */

.home-banner .caption {
    /* background: rgb(33,113,244);
    background: linear-gradient(94deg, rgba(33,113,244,0.44) 26%, rgba(0,49,160,0.44) 100%); */
    background: url(../images/caption-background.png) left top no-repeat;
    background-size: cover;
    max-width: 565px;
    color: #fff;
    padding: 25px 28px 33px 28px;
    position: absolute;
    left: calc((100% - 1600px) / 2);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.inner-banner .image {
    padding-bottom: 26%;
    background-color: #000;
    position: relative;
    min-height: 460px;
    margin: 0 !important;
}

.inner-banner .caption {
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%);
    z-index: 2;
    color: #fff;
}
.inner-banner .caption h2 {
    text-align: center;
    margin: 0;
    font-size: 34px;
}

.breadcrumb {
    background: transparent;
    color: #fff;
    justify-content: center;
}
.breadcrumb-item a {color: #fff; font-size: 16px;}
.breadcrumb-item.active {
    color: var(--primary);
}
.breadcrumb-item+.breadcrumb-item::before {
    color: #fff;
}

/* Our Info */

.bg-gray {
    background: #f2f2f2;
}
.our-info {
    padding: 60px 0;
}
.our-info .images {
    text-align: right;
}
.our-info .images img {
    vertical-align: top;
    position: relative;
    z-index: 1;
    max-width: 330px;
}
.our-info .images img + img {
    margin: 100px 0 0 -70px;
    z-index: 0;
}

/* Our Services */
.our-services {
    padding: 64px 0 75px 0;
}
.our-services .item .icon {
    margin-bottom: 25px;
    min-height: 112px;
}
.our-services .item h6 {
    font-size: 22px;
    font-weight: 500;
    color: #000;
    margin: 0 0 20px 0;
}
.our-services .item p {
    max-width: 370px;
    margin: auto;
}
.our-services .item .button-row {
    margin-top: 46px;
}


/* Counter */
.home-counter {
    background: #fb761b url(../images/counter-bg.jpg) center top no-repeat;
    background-size: cover;
    padding: 54px 0;
    color: #fff;
    text-align: center;
}
.home-counter i {
    font-size: 63px;
}
.home-counter h3 {
    font-size: 38px;
    line-height: 1;
    margin: 15px 0 10px 0;
}
.home-counter p {
    font-size: 20px;
    color: #fff;
    margin: 0;
}

/* Detail Section */
.detail-row {
    padding: 70px 0;
}
.detail-row .d-grid {
    display: grid;
    grid-template-columns: 580px auto;
    grid-gap: 100px;
    align-items: center
}

.detail-row .d-grid .image img {width: 100%;}

.detail-row.reverse .d-grid {
    grid-template-columns: auto 580px;
}

/* Our Solution */
.our-solutions {
    background: url(../images/solution-bg.png) right top no-repeat;
    padding: 50px 0;
}
.our-solutions p {
    max-width: 950px;
}
.our-solutions .heading {
    margin-bottom: 80px;
}

.solution-card {
    background: #fff;
    height: 100%;
    box-shadow: 0 0 9px rgba(0,0,0,.06);
}
.solution-card .image {
    padding-bottom: 88%;
    background-color: #686868;
}
.solution-card .desc {
    text-align: center;
    padding: 30px 22px 24px 22px;
}
.solution-card h4 {
    font-size: 22px;
    margin: 0 0 18px 0;
}
.solution-card .view-more {
    font-size: 16px;
    font-weight: 500;
    color: var(--primary);
    border-top: 1px solid var(--primary);
    display: block;
    padding-top: 20px;
}
.solution-card .view-more:hover {
    color: var(--secondary);
}

button {
    outline: none !important;
    cursor: pointer;
}

/* footer */
/* .footer-wrapper {
    margin-top: 50px;
} */
footer {
    background: #262737;
    padding: 60px 0 50px 0;
    color: #fff;
}
footer h3 {
    font-weight: 600;
    font-size: 20px;
    margin: 0 0 15px 0;
}
footer p {
    color: #fff;
    max-width: 295px;
}

footer a {
    color: #fff;
    line-height: 1.5;
    display: inline-block;
    position: relative;
}
footer .contacts-links a {
    padding-left: 40px;
}
footer a i {
    position: absolute;
    font-size: 32px;
    position: absolute;
    left: 0;
    top: -4px;
}

footer .links li:not(:last-child) {
    margin-bottom: 7px;
}

footer .contacts-links li:not(:last-child) {
    margin-bottom: 15px;
}

footer .has-menu > a:after {
    content: "\f107";
    font-family: 'Line Awesome Free';
    font-weight: 900;
    margin-left: 10px;
}
footer  .menu-active > a:after {
    content: "\f106"
}

footer .sub-menu {
    padding: 10px 10px 0 10px;
}

.copyright {
    background: #1d202b;
    padding: 26px 0;
}
.copyright p {
    font-size: 14px;
}



/* a_proprs */
.propos {
    margin: 0 0 65px;
}

.propos .our-info {
    padding: 90px 0 75px 0;
}
.propos .our-info p {
    margin: 0 0 25px 0;
}

.propos-detail {
    padding: 52px 0;
} 

.desc-box {
    background: #fff;
    padding: 50px 44px;
    height: 100%;
}
.desc-box h4 {font-size: 22px;}
.desc-box li {
    position: relative;
    padding-left: 9px;
    line-height: 24px;
    font-size: 16px;
    color: #686868;
}
.desc-box li:before {
    content: '';
    display: block;
    width: 3px;
    height: 3px;
    background: #686868;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.desc-box p {
    margin: 0;
}

/* list-type */
.list-type li {
    position: relative;
    padding-left: 9px;
    line-height: 24px;
    font-size: 16px;
    color: #686868;
}

.list-type li:before {
    content: '';
    display: block;
    width: 3px;
    height: 3px;
    background: #686868;
    border-radius: 100%;
    position: absolute;
    top: 10px;
    left: 0;
}

.detail-row.reverse .d-grid {
    grid-gap: 140px;
}
.detail-row.reverse .d-grid .desc {
    margin-left: -50px;
}

.propos .our-services .icon {
    width: 80px;
    height: 80px;
    min-height: auto !important;
    padding: 16px;
    border-radius: 100%;
    overflow: hidden;
    background: #f2f2f2;
    margin: auto !important;
}

.propos .our-services .item h6 {
    font-size: 20px;
    margin: 10px 0 20px 0;
}

.propos .our-services .item p {
    margin-bottom: 43px;
    max-width: 350px;
}

/* access_internet */
.access_internet .our-solutions {
    background: transparent;
}

.access_internet .our-solutions h4.sm {font-size: 20px;}
.access_internet .detail-row.reverse .d-grid .desc {margin-left: 0;}
.access_internet .our-info {padding: 50px 0;}

.inner_internet-services .image.large {margin-right: 100px;}
.inner_internet-services .image img {width: 100%;}
.inner_internet-services b {color: var(--primary);}

.access_internet .our-services {padding-bottom: 10px;}
.access_internet .our-services .icon {
    width: 80px;
    height: 80px;
    min-height: auto !important;
    padding: 16px;
    border-radius: 100%;
    overflow: hidden;
    background: #f2f2f2;
    margin: auto !important;
    margin-bottom: 15px !important;
}

.access_internet .our-services [class^="col-"] {
    margin-bottom: 64px;
}


/* voice-interconnect */
.voice-interconnect {
    padding: 71px 0 66px 0;
}
.voice-interconnect .images {text-align: right; padding-top: 80px;}
.voice-interconnect .images > img {
    vertical-align: top;
    position: relative;
    z-index: 1;
    max-width: 330px;
}
.voice-interconnect .images img + img {
    margin: -100px 0 0 15px;
    z-index: 0;
}
.carrier_mplc,
.carrier_iplc {
    padding: 50px 0;
}
.carrier_mplc b {color: var(--primary);}
.detail-row .reverse {grid-template-columns: 690px auto;}

/* cloud */
/* .cloud_computing {
    padding: 0 0 75px 0;
} */
.vipnet_cloud {padding: 60px 0;}


/* .collocations */
.collocations .detail-row .d-grid {
    grid-template-columns: 680px auto;
}

.our-solution {
    padding: 50px 0 65px 0;
}

.our-solution .img {
    position: relative;
}

.text-box {
    background: var(--primary);
    min-width: 235px;
    min-height: 160px;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    position: absolute;
    right: 0; bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 24px;
}

.solution-detail .desc {
    margin-left: -20px;
}
.solution-detail h4 {
    color: #000; 
    font-size: 22px; 
    margin-bottom: 10px;
}
.solution-detail .desc p {
    margin-bottom: 20px;
} 

/* vip_connect */
.vip_connect {
    padding: 60px 0 85px 0;
}

.avantages {
    padding: 50px 0 85px 0;
}

.mr_2  {margin-left: -15px;}

.connect-detail {
    padding: 55px 0 55px 0;
}
.liaisons {
    padding: 55px 0 65px 0;
}


/* data-center */
.data-center {padding: 50px 0  60px 0;}
.data-center .mb-95 {margin-bottom: 95px;}
.data-center .img img {width: 96%;}
.data-center h5 {font-size: 20px; color: var(--primary); line-height: 34px; margin: 0 0 2px;}
.data-center .col-gap-80 [class^="col-"] {
    padding: 0px 50px;
}
.data-center .content {margin-top: 65px;}

.enterprises {padding-bottom: 60px;}
.enterprises .supervision {padding: 45px 0 50px;}
.enterprises .our-services {padding-bottom: 45px;}

/* residentiels */
.telecom,
.residentiels {padding-bottom: 55px;}

.wireless_dsl {padding: 55px 0 45px;}
.wireless_dsl .content-wrapper {display: flex; align-items: center; justify-content: center; margin-bottom: 38px;}
.wireless_dsl .content-wrapper li {background: #fff; padding: 44px 46px; box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08); text-align: center; font-size: 24px; color: var(--secondary); font-weight: 500;}
.wireless_dsl .content-wrapper li span {display: block; font-size: 32px; font-weight: bold; color: var(--primary); line-height: 43px; margin: 0 0 18px;}
.wireless_dsl .content-wrapper li:not(:last-child){margin-right: 45px;}

/* web-hosting */
.web-hosting .desc-box b {color: var(--primary);}
.web-hosting .font-bold {color: var(--primary); font-weight: bold;}
.web-hosting .font-bold:hover {color: var(--secondary);}
.web-hosting .our-services {padding-bottom: 55px;}

/* contact-detail */
.contact-detail {padding: 88px 0 99px;}
.contact-detail .d-flex {justify-content: center;}
.contact-detail li {text-align: center; width: 25%; margin: auto;}
.contact-detail li i {font-size: 75px; color: var(--primary); margin-bottom: 14px;}
.contact-detail li h4 {font-size: 18px;}

.contact-from {padding: 55px 0;}
.contact-from .section-title {font-weight: bold;}
.contact-from form {max-width: 800px; margin: auto;}
.form-group {margin: 0 0 11px;}
.form-control {border: 1px solid #dddddd; background: #f8f8f8; color: 909090; padding: 20px; border-radius: 0; outline-color: #000 !important; box-shadow: none !important;}
.contact-from textarea.form-control {height: 190px;}
.map iframe {height: 500px; width: 100%; margin-bottom: 10px; border: 0;}

/* home */
.contact-bg {background: url('../images/contact-banner.jpg') no-repeat; background-size: cover;}
.contact_location {margin-bottom: 80px;}
.contact_location .section-title {color: #fff; text-align: left; margin: 0 0 35px 0;}
.contact_location .section-title:after {background: #fff; margin-left: 0; width: 45px;}
.contact_location form {max-width: 780px; margin: auto; padding: 54px 0px 20px 68px;}
.contact_location .form-control {height: 54px;}
.contact_location textarea.form-control {height: 190px;}
.home-map iframe {height: 600px; width: 100%; border: 0;}

/* ==PME== */

.meters {
    display: flex; 
    justify-content: center;
    margin: 41px 0 42px;
}
.meter-box:not(:last-child){margin-right: 47px;}

.meter-box {
    background-color: #fff;
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.06);
    border-radius: 33px 33px 0px 0px;
    padding: 27px 34px 37px;
    width: 541px;
}

.meter-box .icon {width: 124px; height: 124px; margin: auto auto 30px;}
.meter-box h4 {color: var(--primary); font-size: 32px; font-weight: bold; text-align: center; margin: 0 0 12px;}
.meter-box p {font-size: 24px; font-weight: 500; color: var(--secondary); text-align: center; line-height: 1;}
.meter-box .detail {display: flex;  border-top: 1px solid #dadada; padding: 31px 0 0; margin: 33px 0 0;}
.meter-box .detail ul:nth-child(2){padding-left: 25px;}
.meter-box .detail ul:nth-child(2) li {font-weight: 500; color: #000;}
.meter-box li {font-size: 16px; line-height: 32px; color: #686868;}
.meter-box li i {font-style: normal; color: var(--primary);}

.pme-meter {padding: 65px 0 45px;}
.pme-meter .descr h5 {font-size: 20px; color: #000; font-weight: 500; margin: 0 0 21px;}
.pme-meter .descr h6 {font-size: 16px; color: #686868; list-style: 1.5; font-weight: 400;}
.pme-meter .descr h6 span {display: block; font-weight: 600; width: 100%; margin-bottom: 8px;}

.pem-history {background: url(../images/metter-bg.png) right top no-repeat; padding: 65px 0 55px;}
.pem-history .heading p,
.pem-history .section-title {color: #fff;}

.pem-history .box {
    background-color: #fff;
    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.06);
    border-radius: 33px 33px 0px 0px;
    overflow: hidden;
}
.pem-history .row {padding: 0px 30px;}
.pem-history .detail {display: flex; justify-content: space-between; padding: 26px 22px 36px;}
.pem-history .detail ul:nth-child(2) li {font-weight: 500; color: #000;}
.pem-history li {font-size: 16px; line-height: 32px; color: #686868;}
.pem-history li i {font-style: normal; color: var(--primary);}
.pem-history .head {padding: 28px 0 24px; text-align: center;}
.pem-history .one .head {background: var(--primary);}
.pem-history .two .head {background: #bd7dc0;}
.pem-history .three .head {background: #1b8e9d}
.pem-history .head {font-size: 22px; color: #fff;}
.pem-history .head span {display: block; width: 100%; font-weight: bold; font-size: 32px; margin-bottom: 13px;}

.pme-table {background: #fff; padding: 69px 0 89px;}
.pme-table .table {width: 680px; margin: auto; text-align: center;}
.pme-table thead th {padding: 18px 7px 16px; font-size: 15px; line-height: 1.3; min-width: 166px; font-weight: 500; background: #f2f2f2; color: #000; vertical-align: middle;}
.pme-table tbody td:first-child {font-weight: 500; color: var(--primary);}
.pme-table tbody td {font-weight: 400; font-size: 14px; padding: 14px; color: #686868;}
.table-bordered td, .table-bordered th {border-color: #cdcdcd;}
.table-bordered thead th {border-bottom-width: 1px;}

.our-info.pme .container.sm {max-width: 1100px;}
.our-info.pme .list-type li {line-height: 32px;}
.our-info.pme .images img {max-width: 260px;}

.align-links {display: flex; align-items: center; justify-content: flex-end;}
.lang-link {display: flex; align-items: center;}
.lang-link li{position: relative; margin-right: 15px; padding-right: 15px;}
.lang-link li a {color: #fff; opacity: .8; font-size: 14px;}
.lang-link li a:hover{color: var(--primary)}
.lang-link li::after {content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 15px; background: #fff;}

/* responsive */

@media screen and (max-width: 1700px){
    .contact_location form {
        padding: 50px 60px 10px;
        max-width: 100%;
    }  
}
@media screen and (max-width: 1600px){
    .home-banner .caption {
        left: 15px;
    }  

    .solution-detail .desc {
        margin-left: 0;
    }
    
    .data-center .col-gap-80 [class^="col-"] {
        padding: 0px 15px;
    }
}
@media screen and (max-width: 1500px){
    body,
    p {
        font-size: 14px;
    }

    h4 {font-size: 26px;}

    .section-title {font-size: 28px;}

    .propos .our-info {
        padding: 60px 0 40px 0;
    } 
    
    .detail-row.reverse .d-grid .desc {
        margin-left: 0;
    }

    .inner_internet-services .image.large {
        margin-right: 0;
    }

    .contact_location form {
        padding: 50px 20px;
    }
}

@media screen and (max-width: 1440px){
    .desc-box {padding: 35px 30px;}
    .detail-row .d-grid {grid-template-columns: 530px auto; grid-gap: 30px;}    
    .detail-row.reverse .d-grid {grid-gap: 30px; grid-template-columns: auto 530px;}

    .contact-detail {
        padding: 45px;
    }
    .contact-detail li {width: 30%;}
    .contact-detail li i {
        font-size: 60px;
    }
    .contact-detail li p {font-size: 14px;}

    .text-box {bottom: 70px;}

}

@media screen and (max-width: 1300px){
    header {
        padding: 0 15px;
    }

    p > br {display: none;}
    .enterprises p > br {display: block;}

    .home-banner .image {padding-bottom: 60%;}

    .access_internet .our-solutions h4.sm {
        font-size: 16px;
    }

    .contact_location .row > .col-lg-6 ,
    .our-info [class^="col-"] {max-width: 100%; flex: none;}
    .our-info .images {margin-top: 30px; text-align: center;}
    .our-info .images img {max-width: 250px;}

    .web-hosting .our-info [class^="col-"] {max-width: 50%; flex: none;}

    .enterprises .our-services {padding: 40px 0 !important;}

    .web-hosting .our-services {padding: 40px 0 25px;}
}

@media screen and (max-width: 1250px){
    .solution-detail [class^="col-"],
    .voice-interconnect [class^="col-"] {max-width: 100%; flex: none;}
    .voice-interconnect .images {
        text-align: center;
        padding-top: 140px;
    }

    .pme-table {
        padding: 30px 0 50px;
    }

    .pem-history .row {justify-content: center; padding: 0;}
    .pem-history [class^="col-"] {max-width: 50%; flex: none; margin-bottom: 25px;}
    .pem-history {padding: 35px 0 25px;}

    .meter-box:not(:last-child) {
        margin-right: 20px;
    }
    .pme-meter {
        padding: 35px 0 25px;
    }
    .meter-box h4 {font-size: 22px;}
    .meter-box p {font-size: 18px;}
    
    .solution-detail .d-flex {justify-content: center;}
    .solution-detail .desc {margin-top: 40px;}

    .collocations .detail-row .d-grid {
        grid-template-columns: 540px auto;
    }
    
    .data-center h5 {font-size: 17px; line-height: 1.4; margin: 0 0 15px;}
    .data-center h5 > br {display: none;}

}

@media screen and (max-width: 1100px){
    .navigation > li:not(:last-child) {
        margin-right: 18px;
    }

    .logo-holder img {max-width: 120px;}
    .navigation > li > a:not(.btn) {padding: 32px 0;}

    .home-banner .caption h2 {font-size: 26px;}

    h4.sm,
    .desc-box h4 {font-size: 18px;}
    
    .list-type li {font-size: 14px;}

    .propos-detail {padding: 30px 0 40px;}

    .detail-row {padding: 50px 0;}
    .detail-row .d-grid {grid-template-columns: 450px auto;}
    .detail-row.reverse .d-grid {grid-template-columns: auto 450px;}

    .our-services {
        padding: 44px 0 25px 0;
    }
    .propos .our-services .item p {font-size: 14px;}

    .our-solutions {padding: 40px 0 10px;}

    .voice-interconnect {
        padding: 20px 0 36px 0;
    }

    .home-map iframe {height: 400px;}

    .contact_location {
        margin-bottom: 40px;
    }

    .home-counter {padding: 25px 0;}
    .home-counter h3 {font-size: 26px;}

    .our-info [class^="col-"] {max-width: 100%; flex: none;}
    .our-info .images {text-align: center; margin-top: 20px;}
}

@media screen and (max-width: 1024px){
    .propos .our-info {padding: 40px 0;}
    .propos .our-info [class^="col-"] {max-width: 100%; flex: none;} 
    .our-info .text-right {text-align: center !important;}

    .propos-detail [class^="col-"] {margin-bottom: 15px;}

    .our-solutions [class^="col-"] {max-width: 50%; flex: none; margin-bottom: 20px;}
    
    .inner_internet-services .large {margin-bottom: 30px;}

    .white-box [class^="col-"] {margin-bottom: 15px;}   

    .our-services .item h6 {font-size: 16px;}

    .our-services {
        padding: 50px 0 30px 0;
    }

    .solution-detail h4 {font-size: 17px;}

    .wireless_dsl .content-wrapper li {font-size: 18px; padding: 30px 25px;}
    .wireless_dsl .content-wrapper li span {font-size: 24px;}
    
}

@media screen and (min-width: 991px) {
    .menu-toggler,
    .mobile-menu {
        display: none;
    }
}
@media screen and (max-width: 991px){
    .mobile-menu {
        display: block;
    }
    .header-wrapper {
        top: 0;
    }
    header {
        margin: 0;
    }
    header .navigation,
    .top-bar {
        display: none;
    }

    .menu-toggler {
        font-size: 33px;
        color: #686868;
        display: table;
        margin: auto 0 auto auto;
    }
    
    .mobile-menu {
        position: fixed;
        left: 0;
        top: -110%;
        width: 100%;
        height: 100%;
        overflow: auto;
        padding: 80px 50px;
        z-index: 99;
        background: var(--secondary);
        transition: all .3s ease;
    }
    
    .mobile-menu.active {
        top: 0;
    }
    
    .mobile-menu .close-menu {
        font-size: 25px;
        color: #fff;
        position: absolute;
        right: 30px;
        top: 30px;
    }
    .mobile-menu .navigation {
        display: block;
    }
    .mobile-menu .navigation > li > a:not(.btn) {
        color: #fff;
        padding: 15px 0;
        display: inline-block;
    }
    .mobile-menu .navigation > li > a:not(.btn):hover,
    .mobile-menu .navigation > li.active > a:not(.btn) {
        color: var(--primary);
    }
    .mobile-menu .contact-links,
    .mobile-menu .social-links {
        justify-content: center;
        margin: 20px 0;
    }
    .mobile-menu .btn-primary {
        margin-top: 15px;
    }
    .mobile-menu .has-menu > a:after {
        content: "\f107";
        font-family: 'Line Awesome Free';
        font-weight: 900;
        margin-left: 10px;
    }
    .mobile-menu .menu-active > a:after {
        content: "\f106";
    } 
    .mobile-menu .sub-menu {
        background: transparent;
        position: relative;
        width: 100%;
        box-shadow: none;
        border: 0;
        margin: 0;
        padding: 0 20px; 
    }
    .mobile-menu .has-menu .sub-menu a {
        display: inline-block;
        border: 0;
        padding: 18px 0;
        color: #fff;
    }
    .mobile-menu .has-menu .sub-menu .active a {
        color: var(--primary);
    }
    .mobile-menu .navigation > li.active > a:not(.btn):before, 
    .mobile-menu .navigation > li:hover > a:not(.btn):before {
        display: none;
    }

    .lang-link {justify-content: center;}
    .lang-link li:last-child {padding: 0; margin: 0;}
    .lang-link li:last-child:after {display: none;}

    .inner-banner .caption {top: 50%; width: 100%;}
    .inner-banner .caption h2 {font-size: 26px;}

    .home-services .row {justify-content: center;}

    h4 {font-size: 24px;}
    .section-title {
        font-size: 24px;
        margin-bottom: 35px !important;
    }

    .detail-row.reverse .d-grid,
    .detail-row .d-grid {
        grid-template-columns: auto;
    }

    .detail-row .d-grid .image {order: 2;}
    .detail-row .d-grid .desc {order: 1;}

    .telecom .detail-row .image {margin-top: 30px;}

    .detail-row .image {text-align: center !important;}

    .home-counter [class^="col-"] {margin-bottom: 20px;}

    .our-services  [class^="col-"] {max-width: 50%; flex: none;}
    
    .interconnexion .our-services  [class^="col-"] {max-width: 100%; flex: none;}
    .interconnexion .section-title > br {display: none;}

    .avantages [class^="col-"],
    .interconnexion .our-solution [class^="col-"] {margin-bottom: 15px;}

    .vip_connect {padding: 30px 0 50px;}
    .vip_connect .img {text-align: center !important; margin-top: 30px;}

    .avantages {padding: 30px 0 40px 0;}
    .avantages .image {text-align: center; margin-top: 30px;}

    .reverse-on-991 {flex-direction: column-reverse;}

    .wrap-on-812 [class^="col-"] {max-width: 100%; flex: none;}

    .collocations .detail-row .d-grid {
        grid-template-columns: auto;
    }

    .map iframe {height: 300px;}

    .our-services .item .button-row {
        margin-top: 15px;
    }

    .mr_2 {
        margin-left: 0;
    }

    .connect-detail .img {text-align: center !important; margin-bottom: 30px;}
    .liaisons .text-right {text-align: center !important;}
    .data-center .mb-95 {
        margin-bottom: 40px;
    }
    .list-type.mb-5 {margin-bottom: 25px !important;}
    .data-center .content {
        margin-top: 25px !important;
    }
    .data-center h5 {margin: 0 0 8px;}
    .data-center p {margin: 0 0 25px;}  
    .data-center .imgs {text-align: center;}

    .data-center,
    .liaisons {
        padding: 40px 0;
    } 

    .wireless_dsl {
        padding: 35px 0 25px;
    }
    .telecom, .residentiels {
        padding-bottom: 30px;
    }
    .web-hosting .our-info {padding: 40px 0 30px;}
    .web-hosting .our-info .row {flex-direction: column-reverse;}
    .web-hosting .our-info [class^="col-"],
    .web-hosting .our-services [class^="col-"] {
        max-width: 100%;
        flex: none;
    }

    .web-hosting .image {text-align: center !important; margin-top: 20px;}

    footer {padding: 50px 0 35px 0;}
    footer .links {margin-bottom: 15px;}
    footer a i {font-size: 26px;}
    footer .logo-holder {margin-top: 20px; text-align: center !important;}
}

@media screen and (max-width: 812px){
    .meters {flex-wrap: wrap;}
    .meter-box .detail {justify-content: space-between;}
    .meter-box {width: 100%;}
    .meter-box:not(:last-child) {margin-right: 0; margin-bottom: 25px;}
}
@media screen and (max-width: 767px) {
    .copyright p {text-align: center;}
    .copyright .social-links {
        justify-content: center;
        margin-top: 15px;
    }
}
@media screen and (max-width: 700px){
    .contact-detail .d-flex {flex-wrap: wrap;}
    .contact-detail .d-flex li {width: 50%;}

    .home-banner .caption h2 {
        font-size: 20px;
        line-height: 1.4;
        margin: 0 0 12px !important;
    }

    .home-banner .image {
        padding-bottom: 80%;
    }

    .connect-detail {
        padding: 40px 0 20px !important;
    }

    .home-banner .caption {width: 70%;}

    .pem-history [class^="col-"] {
        max-width: 100%;
        flex: none;
    }
    .pem-history .head span {font-size: 22px;}
    .pem-history .head {font-size: 17px;}

    .pme-table .table {width: 100%;}
    .pme-table thead th {font-size: 14px;}
    .pme-table thead th {padding: 16px 4px 12px;}
}

@media screen and (max-width: 600px){
    .our-solutions [class^="col-"] {
        max-width: 100%;
    }
    .solution-card .image {padding-bottom: 70%;}


    .voice-interconnect .images > img ,
    .our-info .images img {max-width: 180px;}

    .p-5 {padding: 30px 0 10px !important;}

    .home-banner .caption {
        width: 100%;
        left: 0;
        height: 100%;
        max-width: 100%;
        top: 50%;
        padding: 160px 20px 10px;
    }

    .our-info {
        padding: 30px 0 50px;
    }

    .home-services [class^="col-"] {
        max-width: 100%;
        flex: none;
        margin-bottom: 40px;
    }

    .interconnexion .solution-detail .d-flex {flex-wrap: wrap;}
    .interconnexion .our-solution .img {margin: auto auto 15px !important; width: 100%; margin-bottom: 20px;}
    .interconnexion .our-solution .img img {width: 100%;}
    .interconnexion .our-solution {padding: 40px 0 20px;}
    .interconnexion .pt-5 {padding-top: 0 !important;}
    .text-box {
        bottom: 0;
        min-height: 90px;
        font-size: 17px;
    }

    .wireless_dsl .content-wrapper {flex-wrap: wrap;}
    .wireless_dsl .content-wrapper li {width: 100%;}
    .wireless_dsl .content-wrapper li:not(:last-child) {
        margin-right: 0px;
        margin-bottom: 15px;
    }
    .wireless_dsl .content-wrapper li {font-size: 16px; line-height: 1;}
    .wireless_dsl .content-wrapper li span {font-size: 18px; line-height: 1;}

    .meter-box .icon {width: 100px; height: 100px;}
    .pem-history .detail,
    .meter-box {padding: 25px 15px;}
    .pem-history .detail li,
    .meter-box li {font-size: 14px; line-height: 26px;}
}

@media screen and (max-width: 500px){
    h4 {font-size: 16px;}
    .section-title {
        font-size: 20px;
        margin-bottom: 30px !important;
    }
    .heading {
        margin-bottom: 25px;
    }

    h4.sm  {font-size: 18px;}
    .desc-box h4 {font-size: 15px; line-height: 1.4;}

    p {font-size: 14px; line-height: 1.5; margin: 0 0 18px;}

    .desc-box {
        padding: 30px 20px;
    }

    .home-counter h3 {
        font-size: 20px;
    }
    .home-counter p {font-size: 15px;}

    .detail-row {
        padding: 30px 0;
    }

    .form-control {font-size: 14px; padding: 15px;}

    .propos .our-services .item h6 {font-size: 18px;}

    .our-services [class^="col-"] {
        max-width: 100%;
        flex: none;
    }

    .propos {
        margin: 0 0 45px;
    }

    /* .cloud_computing {
        padding: 0 0 35px 0;
    } */

    .contact-detail .d-flex li {width: 100%;}

    .home-banner .image {
        padding-bottom: 100%;
        background-position: right center;
        min-height: 460px;
    }

    .inner-banner .image {
        min-height: 360px;
    }

    .enterprises p > br {
        display: none;
    }

    .our-info.pme .images img {
        max-width: 180px;
    }

    .meter-box .detail {padding: 20px 0 0; margin: 20px 0 0;}
    .meter-box .icon {margin-bottom: 15px;}
    .meter-box h4 {font-size: 20px;}

}


@media screen and (max-width: 400px){

    .inner-banner .caption {padding: 0 15px;}
    .inner-banner .caption h2 {font-size: 22px;}

    .voice-interconnect .images {padding: 20px 0 0;}
    .voice-interconnect .images > img  {width: 100%; max-width: 100%;}
    .voice-interconnect .images img + img {margin: 5px 0;}

    .our-info .images img {max-width: 170px;}

    .contact-from .form-control {padding: 15px;}

}