@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('bootstrap.min.css');
@import url('swiper-bundle.min.css');

body {
    font-family: "Roboto", sans-serif;
}


a.active,
a:focus,
button:focus,
button.active {
    outline: none;
}

a {
    text-decoration: none;
}

a:focus,
a:hover,
a:active {
    outline: 0;
    box-shadow: none;
}

a:focus,
a:hover {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: "Roboto", sans-serif;
    padding: 0;
}

a {
    text-decoration: none;
    transition: all .5s ease-in-out;
}

a:hover {
    text-decoration: none;
}

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

ul li {
    list-style: none;
}

p {
    margin: 0;
    padding: 0;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
}

img {
    border-style: none;
    display: inline-block;
    max-width: 100%;
    height: auto;
}

/* header start  */
header {
    padding: 26px 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10;
}

.navbar {
    padding: 0;
}

.navbar-brand {
    padding: 0;
    margin: 0;
}

.navbar-nav {
    gap: 55px;
}

.navbar-nav .nav-item {
    position: relative;
}

.navbar-nav .nav-item .nav-link {
    padding: 0;
    color: #0D47A1;
    font-weight: bold;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.navbar-nav .nav-item .nav-link:hover,
.submenu ol li a:hover {
    color: #0B2348;
}

.btn-default {
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #2196F3;
    border-radius: 32px;
    border: 1px solid #2196F3;
    height: 45px;
    padding: 0 21px;
}

.btn-default:hover {
    background-color: transparent;
    color: #2196F3;
}

.navbar-nav .nav-item::after {
    position: absolute;
    content: "";
    left: 0;
    bottom: -27px;
    width: 100%;
    height: 30px;
    background-color: transparent;
}

.submenu {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 1px 0px 10px 0px rgba(0, 0, 0, 0.15);
    padding: 28px 25px;
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translate(-50%, 0);
    min-width: 198px;
    width: 100%;
    display: none;
}

.submenu ol li {
    margin-bottom: 20px;
}

.submenu ol li:last-child {
    margin: 0;
}

.submenu ol li a {
    color: #0D47A1;
    font-weight: 700;
    display: block;
    line-height: 1;
    font-size: 16px;
}


/**** BANNER SEC *****/
.banner-sec {
    background: #E9F6FF;
    padding: 240px 0 0 0;
}

.banner-sec .text-box {
    text-align: center;
    margin-bottom: 30px;
}

.banner-sec .text-box h1 {
    color: #1565C0;
    font-weight: 600;
    font-size: 60px;
    line-height: normal;
    max-width: 551px;
    width: 100%;
    margin: 0 auto;
}

.banner-sec .text-box p {
    color: #0D47A1;
    font-size: 20px;
    line-height: 28px;
    font-weight: normal;
    max-width: 629px;
    width: 100%;
    margin: 26px auto 30px;
}

.banner-sec .text-box .btn-default {
    max-width: 240px;
    width: 100%;
    height: 60px;
}

/****** WE D0 SEC *****/
.we-do-sec {
    background: #E9F6FF;
    margin: -180px 0 0 0;
}

.we-do-box h4 {
    color: #1565C0;
    font-weight: 600;
    font-size: 44px;
    line-height: normal;
    margin-bottom: 40px;
}

.we-do-box p {
    color: #0D47A1;
    font-weight: normal;
    text-align: justify;
    font-size: 16px;
    margin-bottom: 24px;
    line-height: 22px;
    max-width: 358px;
    width: 100%;
}

.we-do-box p:last-child {
    margin: 0;
}

.server-box a {
    border-radius: 20px;
    background: #FFF;
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.10);
    padding: 26px 35px 30px;
    position: relative;
    margin: 15px 0;
    display: block;
    overflow: hidden;
}

.server-icon {
    transition: all 0.5s ease-in-out;
}

.server-box a:hover .server-icon {
    transform: scale(1.15);
    transition: all 0.5s ease-in-out;
}

.gradient {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 193px;
    display: flex;
    align-items: flex-end;
}

.gradient img {
    border-radius: 0 0 20px 20px;
}

.server-box h3 {
    color: #0D47A1;
    font-size: 24px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 16px;
    position: relative;
    z-index: 10;
}

.server-box p {
    color: #1565C0;
    font-weight: normal;
    font-size: 16px;
    max-width: 237px;
    width: 100%;
    line-height: normal;
    position: relative;
    z-index: 10;
    min-height: 57px;
}

.server-box .media {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 15px 0 0 0;
    position: relative;
    z-index: 10;
    min-height: 98px;
}

.server-box .media .arrow-btn {
    border-radius: 100px;
    background: #FFF;
    box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 3px 5px -1px rgba(0, 0, 0, 0.20);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/***** WHO ARE SEC *****/
.who-are-sec {
    background: #E9F6FF;
    padding: 130px 0 80px;
}

.who-are-sec .we-do-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.who-are-sec .we-do-box p {
    max-width: 100%;
}

.who-are-sec .we-do-box .btn-default {
    background-color: #fff;
    border-color: #fff;
    color: #0D47A1;
    padding: 0 50px;
    height: 50px;
    margin-top: 25px;
}

.who-are-sec .we-do-box .btn-default:hover {
    background-color: #0D47A1;
    border-color: #0D47A1;
    color: #fff;
}

/**** TITLE *****/
.title {
    text-align: center;
}

.title h2 {
    color: #1565C0;
    font-size: 44px;
    font-weight: 600;
    line-height: normal;
}

.title-big h2 {
    font-size: 48px;
}

.title p {
    color: #0D47A1;
    font-size: 16px;
    max-width: 909px;
    width: 100%;
    margin: 40px auto 0;
    font-weight: 400;
    line-height: 22px;
}

/**** OUR DATA *****/
.our-data-sec {
    background: #E9F6FF;
    padding: 80px 0;
}

.our-data-inner .image-holder {
    text-align: center;
    margin: 60px 0 40px 0;
}

.our-data-inner .text-box h4 {
    color: #1565C0;
    font-weight: 600;
    font-size: 32px;
    text-align: center;
}

.our-data-inner .text-box p {
    color: #0D47A1;
    line-height: 22px;
    font-weight: normal;
    font-size: 16px;
    max-width: 761px;
    width: 100%;
    margin: 42px auto 0;
    text-align: center;
}

.our-data-inner .text-box ul {
    display: grid;
    grid-template-columns: auto auto;
    max-width: 590px;
    width: 100%;
    column-gap: 80px;
    margin: 30px auto 0;
}

.our-data-inner .text-box ul li {
    display: flex;
    align-items: center;
    column-rule: #0D47A1;
    font-size: 16px;
    font-weight: normal;
    line-height: 22px;
    gap: 20px;
    padding: 10px 0;
}

/******* PARTNERS SEC ******/
.partners-sec {
    padding: 80px 0 101px;
    background: #E9F6FF;
}

.partners-inner {
    margin: 30px -15px 0 -15px;
    position: relative;
}

.swiper-slide ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    row-gap: 25px;
    column-gap: 30px;
    padding: 15px 15px;
}

.swiper-slide ul li a {
    display: flex;
    align-items: center;
}

.swiper-slide ul li a img {
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.10);
    border-radius: 20px;
    width: 100%;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    display: none;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: -38px;
    left: auto;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: -38px;
    right: auto;
}

.swiper-pagination {
    position: static;
    margin: 9px 0 0 0;
}

.swiper-pagination-bullet {
    background-color: #42A5F5;
    opacity: 1;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin: 0 7px;
    transition: all 0.5s ease-in-out;
}

.swiper-pagination-bullet-active {
    background-color: #0D47A1;
    border-radius: 8px;
    width: 45px;
    transition: all 0.5s ease-in-out;
}

/***** FOOTER ******/
footer {
    background: linear-gradient(180deg, #E9F6FF 0%, #CBE8FF 75.5%);
    padding: 82px 0 0 0;
}

.footer-left a {
    display: flex;
    align-items: center;
}

.footer-left a img {
    height: 46px;
}

.footer-left p {
    color: #0D47A1;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    max-width: 384px;
    width: 100%;
    margin-top: 28px;
    text-align: justify;
}

.footer-link h4 {
    color: #0D47A1;
    font-weight: bold;
    font-size: 20px;
    line-height: 1;
    margin-bottom: 33px;
    text-transform: uppercase;
}

.footer-link ul li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
}

.footer-link ul li a {
    color: #0D47A1;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    display: flex;
    align-items: center;
    flex: 1;
}

.footer-link ul li a:hover {
    color: #0B2348;
}

.footer-link ul li span {
    max-width: 25px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-link ul li p {
    flex: 1;
    color: #0D47A1;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
}

.copyright {
    border-top: 1px solid #7A97C5;
    padding: 30px 0 50px;
    margin-top: 42px;
}

.copyright p {
    font-size: 14px;
    line-height: normal;
    font-weight: 500;
    color: #0D47A1;
    text-align: center;
}

/****** ABOUT SEC *******/
.hero-sec {
    background: url(../images/about-banner-bg.jpg) no-repeat;
    background-position: center bottom;
    background-size: cover;
    padding: 206px 0;
    min-height: 670px;
}

.hero-sec .text-box {
    text-align: left;
}

.hero-sec .text-box h2 {
    color: #1565C0;
    font-weight: bold;
    font-size: 40px;
    line-height: 1;
    margin-bottom: 10px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
}

.breadcrumb li,
.breadcrumb li a {
    color: #1565C0;
    font-weight: normal;
    font-size: 16px;
    line-height: 1;
}

/***** NETWORK SEC *****/
.network-sec {
    background: #E9F6FF;
    padding: 2px 0 68px 0;
}

.network-top {
    margin-top: -80px;
}

.network-box h4 {
    color: #1565C0;
    font-weight: 600;
    font-size: 48px;
    line-height: normal;
    margin-bottom: 40px;
}

.network-box p {
    color: #0D47A1;
    font-size: 16px;
    line-height: 22px;
    font-weight: normal;
    text-align: justify;
    margin-bottom: 32px;
    max-width: 630px;
    width: 100%;
}

.network-box p:last-child {
    margin-bottom: 0;
}

/***** CHOOSE SEC *****/
.choose-sec {
    background: #E9F6FF;
    padding: 68px 0;
}

.choose-inner {
    margin: 40px 0 0 0;
}

.choose-inner ul {
    display: flex;
    row-gap: 30px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.choose-inner ul li {
    width: 25%;
    padding: 0 15px;
}

.choose-box {
    overflow: hidden;
    background-color: #fff;
    border-radius: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 20px;
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.10);
    padding: 34px 0 28px 0;
}

.choose-gradiant {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.choose-gradiant::after {
    position: absolute;
    content: "";
    left: 25px;
    bottom: 29px;
    width: 150px;
    height: 43px;
    background-color: #EFDAFB;
    filter: blur(90px);
}

.choose-gradiant-inner {
    position: relative;
    height: 100%;
}

.choose-gradiant-inner::after {
    position: absolute;
    content: "";
    left: -54px;
    bottom: -28px;
    width: 192px;
    height: 114px;
    background-color: #DEEAFE;
    filter: blur(45px);
}

.choose-gradiant-inner::before {
    position: absolute;
    content: "";
    right: -130px;
    bottom: -113px;
    width: 331px;
    height: 197px;
    background-color: #C9EDFF;
    filter: blur(80px);
}

.choose-box span {
    min-height: 65px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;
}

.choose-box p {
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    color: #1565C0;
    text-align: center;
    position: relative;
    z-index: 10;
    margin-top: 24px;
}

.choose-box p br {
    display: none;
}

.choose-box .btn-default-line {
    margin-top: 20px;
}

.choose-gradiant2::after {
    background-color: #EFDAFB;
}

.choose-gradiant2 .choose-gradiant-inner::after {
    background-color: #FBF2F7;
}

.choose-gradiant2 .choose-gradiant-inner::before {
    background-color: #E3FBFE;
}

.choose-gradiant3::after {
    background-color: #EFDAFB;
}

.choose-gradiant3 .choose-gradiant-inner::after {
    background-color: #F3FAF4;
}

.choose-gradiant3 .choose-gradiant-inner::before {
    background-color: #E0EAFD;
}

.choose-gradiant4::after {
    background-color: #EFDAFB;
}

.choose-gradiant4 .choose-gradiant-inner::after {
    background-color: #F8F5F3;
}

.choose-gradiant4 .choose-gradiant-inner::before {
    background-color: #E0FFFE;
}

.choose-gradiant5::after {
    background-color: #EFDAFB;
}

.choose-gradiant5 .choose-gradiant-inner::after {
    background-color: #D0EFFF;
}

.choose-gradiant5 .choose-gradiant-inner::before {
    background-color: #EDEDFE;
}

.choose-gradiant6::after {
    background-color: #EFDAFB;
}

.choose-gradiant6 .choose-gradiant-inner::after {
    background-color: #F3FAF5;
}

.choose-gradiant6 .choose-gradiant-inner::before {
    background-color: #F0EDF9;
}

.choose-gradiant7::after {
    background-color: #EFDAFB;
}

.choose-gradiant7 .choose-gradiant-inner::after {
    background-color: #E0FFFE;
}

.choose-gradiant7 .choose-gradiant-inner::before {
    background-color: #F1F9F4;
}

/****** PROTECT SERVER SEC ******/
.protect-server-sec {
    padding: 50px 0 108px;
    background: #E9F6FF;
}

.protect-server-inner {
    background: url(../images/protect-server-bg.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    padding-bottom: 65px;
    padding-top: 60px;
    border-radius: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.protect-server-inner .text-box h4 {
    color: #fff;
    font-weight: 600;
    font-size: 24px;
    line-height: normal;
}

.protect-server-inner .text-box p {
    color: #FFFFFF;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    margin: 16px 0 30px;
    max-width: 595px;
    width: 100%;
}

.protect-server-inner .text-box a {
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 32px;
    height: 50px;
    max-width: 190px;
    color: #fff;
    width: 100%;
}

.protect-server-inner .text-box a:hover {
    background-color: #fff;
    color: #1565C0;
}

/****** DEDICATED SERVER SEC ******/
.dedicated-server-sec {
    padding: 0 0 70px 0;
    background: #E9F6FF;
}

.dedicated-server-top {
    margin-top: -92px;
}

.dedicated-server-inner {
    margin: 40px 0 0 0;
}

.nav-pills {
    background-color: #BFD9F2;
    border-radius: 51px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-pills .nav-item .nav-link {
    color: #0D47A1;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    border-radius: 26.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 31px;
    height: 50px;
}

.nav-pills .nav-item .nav-link.active {
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10);
    color: #0B2348;
}

.price-plane-main {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 21px;
    width: 100%;
    margin: 45px 0 0 0;
}

.price-plane {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.10);
    padding: 51px 28px 60px;
    position: relative;
    overflow: hidden;
    max-width: 274px;
    width: 100%;
}

.price-plane::after {
    position: absolute;
    content: "";
    left: -310px;
    bottom: -37px;
    width: 519px;
    height: 256px;
    border-radius: 519px;
    background: #DEEAFE;
    filter: blur(90px);
    z-index: 10;
}

.price-plane::before {
    position: absolute;
    content: "";
    left: -53px;
    bottom: -106px;
    width: 777px;
    height: 380px;
    border-radius: 519px;
    background: #C9EDFF;
    filter: blur(80px);
}

.price-gradiant {
    background-color: #EFDAFB;
    filter: blur(90px);
    width: 405px;
    height: 96px;
    border-radius: 405.055px;
    left: -241px;
    bottom: 220px;
    position: absolute;
}

.price-head {
    min-height: 200px;
    margin-bottom: 18px;
}

.price-plane h3 {
    color: #0D47A1;
    font-weight: 600;
    font-size: 60px;
    line-height: 1;
    margin-bottom: 22px;
    position: relative;
    z-index: 100;
}

.price-plane h3 span {
    color: #1565C0;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    display: block;
    margin: 11px 0 0 0;
}

.price-plane h4 {
    color: #1565C0;
    font-size: 25px;
    font-weight: 500;
    position: relative;
    z-index: 100;
    line-height: normal;
}

.price-body {
    min-height: 200px;
    margin-bottom: 58px;
}

.price-plane ol {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 30px;
}

.price-plane ol li {
    display: flex;
    align-items: center;
}

.price-plane ul {
    position: relative;
    z-index: 100;
}

.price-plane ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.price-plane ul li:last-child {
    margin: 0;
}

.price-plane ul li strong {
    display: flex;
    align-items: center;
    max-width: 20px;
    width: 100%;
}

.price-plane ul li:first-child p {
    max-width: 140px;
    width: 100%;
    line-height: 22px;
}

.price-plane ul li p {
    color: #0D47A1;
    font-size: 14px;
    line-height: normal;
    font-weight: normal;
}

.price-plane ul li p span {
    color: #1565C0;
    display: block;
}

.btn-default-line {
    color: #1565C0;
    font-weight: bold;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #1565C0;
    border-radius: 22px;
    height: 45px;
    max-width: 160px;
    width: 100%;
    position: relative;
    z-index: 100;
}

.btn-default-line:hover {
    background-color: #1565C0;
    color: #fff;
}

.price-plane.plane2::after {
    background-color: #F1F9F8;
}

.price-plane.plane2::before {
    background-color: #E0EAFD;
}

.price-plane.plane2 .price-gradiant {
    background-color: #FDFAEA;
}

/***** IP TRANSIT SEC *******/
.ip-transit-sec {
    padding-top: 0;

}

.ip-transit-top {
    margin-top: -90px;
}

.mb-5 {
    margin-bottom: 145px !important;
}

.transit-box {
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.10);
    border-radius: 20px;
    background-color: #fff;
    position: relative;
    padding: 25px 20px 36px;
    overflow: hidden;
}

.transit-box span {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
    margin-bottom: 16px;
}

.transit-box h4 {
    color: #1565C0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    z-index: 10;
    margin-bottom: 14px;
}

.transit-box p {
    color: #0D47A1;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    position: relative;
    z-index: 10;
}

.ip-transit-sec .choose-inner ul {
    justify-content: flex-start;
    margin: 0 -15px;
}

.transit-gradiant {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.transit-gradiant::after {
    position: absolute;
    content: "";
    left: 29px;
    bottom: 36px;
    background-color: #EFDAFB;
    filter: blur(45px);
    width: 145px;
    height: 61px;
}

.transit-gradiant-inner {
    position: relative;
    height: 100%;
}

.transit-gradiant-inner::after {
    position: absolute;
    content: "";
    left: -55px;
    bottom: -40px;
    background-color: #DEEAFE;
    filter: blur(45px);
    width: 192px;
    height: 161px;
}

.transit-gradiant-inner::before {
    position: absolute;
    content: "";
    right: -131px;
    bottom: -160px;
    background-color: #C9EDFF;
    filter: blur(45px);
    width: 331px;
    height: 277px;
}

.transit-gradiant2 .transit-gradiant-inner::after {
    background-color: #FBF2F7;
}

.transit-gradiant2 .transit-gradiant-inner::before {
    background-color: #E3FBFE;
}

.transit-gradiant3 .transit-gradiant-inner::after {
    background-color: #F3FAF4;
}

.transit-gradiant3 .transit-gradiant-inner::before {
    background-color: #E0EAFD;
}

.transit-gradiant4 .transit-gradiant-inner::after {
    background-color: #F8F5F3;
}

.transit-gradiant4 .transit-gradiant-inner::before {
    background-color: #E0FFFE;
}


.ssl-http-sec .price-body {
    margin-bottom: 40px;
    min-height: 355px;
}

.ssl-plane1:after {
    background-color: #DEEAFE;
}

.ssl-plane1::before {
    background-color: #C9EDFF;
}

.ssl-plane2 .price-gradiant {
    background-color: #FDFAEA;
}

.ssl-plane2:after {
    background-color: #F1F9F8;
}

.ssl-plane2::before {
    background-color: #E0EAFD;
}

.ssl-plane3 .price-gradiant {
    background-color: #E4FBFE;
}

.ssl-plane3:after {
    background-color: #FBE8F0;
}

.ssl-plane3::before {
    background-color: #EEEFFA;
}

.ssl-plane4 .price-gradiant {
    background-color: #F5F4F6;
}

.ssl-plane4:after {
    background-color: #DEEAFE;
}

.ssl-plane4::before {
    background-color: #E2FFFE;
}

/***** CONTACT ******/
.contact-sec {
    background: #E9F6FF;
    padding-bottom: 100px;
}

.contact-info {
    margin-top: -90px;
}

.contact-info h3 {
    color: #0D47A1;
    text-align: center;
    font-weight: 600;
    font-size: 44px;
    line-height: normal;
}

.contact-info .media {
    display: grid;
    grid-template-columns: 4fr 4fr 4fr;
    margin: 46px 0 0 0;
    gap: 30px;
}

.info-box {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.10);
    gap: 16px;
    display: flex;
    align-items: flex-start;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.info-box::after {
    position: absolute;
    content: "";
    left: -75px;
    bottom: -22px;
    border-radius: 260.974px;
    background: #F3FAF4;
    filter: blur(45px);
    width: 261px;
    height: 88px;
}

.info-box::before {
    position: absolute;
    content: "";
    border-radius: 451.93px;
    background: #E0EAFD;
    filter: blur(40px);
    width: 452px;
    height: 151px;
    right: -178px;
    bottom: -87px;
}

.info-gradient {
    position: absolute;
    background-color: #EFDAFB;
    filter: blur(45px);
    width: 204px;
    height: 33px;
    left: 40px;
    bottom: 20px;
}

.info-box span {
    max-width: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 100;
}

.info-box .text-box {
    flex: 1;
    width: 100%;
    position: relative;
    z-index: 100;
}

.info-box .text-box h4 {
    color: #1565C0;
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 12px;
}

.info-box .text-box a {
    color: #0D47A1;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    display: block;
    line-height: 1;
}

.info-box .text-box p {
    color: #0D47A1;
    font-size: 16px;
    font-weight: 500;
    line-height: normal;
    display: block;
    line-height: normal;
    max-width: 248px;
    width: 100%;
}

.contact-work {
    padding: 100px 0 0;
}

.contact-work .text-box h4 {
    color: #0D47A1;
    font-size: 44px;
    font-weight: 600;
    line-height: normal;
}

.contact-work .text-box p {
    color: #0D47A1;
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
    max-width: 404px;
    width: 100%;
    margin-top: 40px;
}

form .form-group {
    margin-bottom: 20px;
}

form .form-group .form-control {
    font-weight: normal;
    font-size: 16px;
    line-height: 1;
    color: #1565C0;
    background-color: #fff;
    border: none;
    height: 60px;
    padding-left: 30px;
    box-shadow: none;
    border-radius: 5px;
    border: 2px solid transparent;
}

form .form-group .form-control.active {
    border-color: #1565C0;
}

form .form-group .form-control::placeholder {
    color: #C4C4C4;
}

form .form-group textarea.form-control {
    height: 230px;
    padding-top: 25px;
}

form .form-group .btn-default {
    background-color: #1565C0;
    border-color: #1565C0;
    height: 60px;
    max-width: 100%;
    width: 100%;
    font-weight: normal;
    font-size: 16px;
    border-radius: 5px;
    margin-top: 20px;
}

form .form-group .btn-default:hover {
    background-color: transparent;
    color: #1565C0;
}

/**** MODAL *****/
.modal-dialog {
    max-width: 550px;
    width: 100%;
}

.modal-content {
    background-color: #FFFFFF;
    border: none;
    border-radius: 10px;
}

.modal-body {
    padding: 50px 20px;
    text-align: center;
}

.modal-body h4 {
    color: #0D47A1;
    font-weight: 600;
    font-size: 20px;
    line-height: normal;
    text-align: center;
    margin-top: 40px;
}

.modal-body p {
    color: #0D47A1;
    font-weight: normal;
    font-size: 16px;
    line-height: normal;
    max-width: 340px;
    width: 100%;
    margin: 20px auto 30px;
}

.modal-body a {
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    display: flex;
    align-items: center;
    background-color: #1565C0;
    border: 1px solid #1565C0;
    border-radius: 5px;
    height: 40px;
    width: 120px;
    margin: 0 auto;
    justify-content: center;
}

.modal-body a:hover {
    background-color: transparent;
    color: #1565C0;
}

.back-top {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.30);
    width: 70px;
    height: 70px;
    background-color: #1565C0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 95px;
    z-index: 100;
    bottom: 70px;
}

.view-all {
    text-align: center;
    position: relative;
    padding-bottom: 36px;
    height: 240px;
    display: none;
    align-items: flex-end;
    justify-content: center;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 10;
}

.view-all::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, rgba(233, 246, 255, 0.00) 0%, #E9F6FF 53%);

}

.view-all a {
    background-color: #008CFF;
    border-color: #008CFF;
    border-radius: 10px;
    height: 40px;
    max-width: 140px;
    margin: 0 auto;
    position: relative;
    z-index: 100;
}

.overly {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.50);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
}

.overly.active {
    opacity: 1;
    visibility: visible;
    transition: all 0.5s ease-in-out;
}

.wrapper {
    overflow: hidden;
}