@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

:root {
    --primary--color: #000;
    --secondary--color: #fff;
    --text--color: #666;
    --accent--color: #007bff;
    --grey-color: #f2f8ff;
    --dark--black-color: #000c18;
    --dark--red-color: #e13429;
    --dark--blue-color: #002955;
    --light--red-color: #f2eeed;
    --light--blue-color: #0e325a;
}

h1 { font-size: 56px; line-height: 66px; font-weight: 700; }
h2 { font-size: 42px; line-height: 48px; font-weight: 700; }
h3 { font-size: 36px; line-height: 42px; font-weight: 700; }
h4 { font-size: 20px; line-height: 28px; font-weight: 700; }
h5 { font-size: 16px; line-height: 18px; }










.padding-top { padding-top: 100px; }
.padding-bottom { padding-bottom: 100px; }

.generic-title { z-index: 1; position: relative; }
.generic-title span { font-size: 20px; font-weight: 700; line-height: 20px; margin-bottom: 27px; color: var(--accent--color); }
.generic-title h2 { margin-bottom: 72px; color: var(--primary--color); }

.generic-title2 span { font-size: 20px; font-weight: 700; line-height: 20px; margin-bottom: 28px; color: var(--accent--color); }
.generic-title2 h2 { margin-bottom: 14px; color: var(--primary--color); }
.generic-title2 p { font-size: 16px; padding: 0 130px; line-height: 28px; margin-bottom: 54px; }

.testimonials-box { z-index: 2; position: relative; }

.hosting-faq-con { background: var(--light--red-color); }
.hosting-support-con figure img { border-radius: 0; }
.hosting-faq-con .faq-item .card-header button { position: relative; background: var(--secondary--color); }

.reseller-plan-con .plan-box { grid-template-columns: 23% 23% 23% 23%; }

.feature-shape { position: relative; }
.feature-shape::before { top: 0; right: 0; content: ""; width: 565px; height: 743px; position: absolute; background: url(../images/domain-rt-shape.png) no-repeat center; }
.feature-shape::after { left: 0; bottom: 0; content: ""; width: 158px; height: 315px; position: absolute; background: url(../images/static-lft-shape.png) no-repeat center; }
.feature-shape .container { z-index: 1; position: relative; }

.contact-banner .sub-banner-title h1 { padding-right: 0; margin-right: -5px; }
.dedicated-banner .sub-banner-title h1 { padding-right: 0; }

.vps-support-con .support-box { display: grid; align-items: center; grid-template-columns: 49% 48.6%; justify-content: space-between; }
.vps-support-con .support-box-title p { padding-right: 24px; }
.vps-support-con .support-box-img figure img { box-shadow: 0 0 60px rgb(0 123 255 / 10%); }
.vps-support-con .support-box-img { gap: 30px; display: flex; }

.help-con { background: var(--grey-color); }
.help-title span { font-size: 20px; font-weight: 700; line-height: 20px; margin-bottom: 28px; color: var(--accent--color); }
.help-title h2 { margin-bottom: 21px; color: var(--primary--color); }
.help-title p { font-size: 16px; padding: 0 80px; line-height: 28px; margin-bottom: 30px; }

.generic-btn a { font-size: 16px; line-height: 16px; border-radius: 10px; text-decoration: none; display: inline-block; text-transform: uppercase; padding: 16px 39px 18px 40px; color: var(--secondary--color); background: var(--accent--color); }
.generic-btn a:hover { color: var(--secondary--color); background: var(--primary--color); }

.banner-con.home2-banner { padding: 56px 0; background: #011e7c url(../images/home2-banner.png) no-repeat center; background-size: cover; }
.home2-banner .started-btn { color: var(--primary--color); background: var(--secondary--color); }
.home2-banner .started-btn:hover { color: var(--secondary--color); background: var(--primary--color); }

.home2-feature-con .feature-box-item:hover { background: var(--accent--color); }
.home2-feature-con .feature-box-item:hover figure { background: var(--secondary--color); }
.home2-feature-con .feature-box-item:hover figure img { filter: brightness(0) saturate(100%) invert(44%) sepia(85%) saturate(5304%) hue-rotate(199deg) brightness(101%) contrast(105%); }
.home2-feature-con .feature-box { grid-template-columns: 61.6%; background: #00238a url(../images/dots-img2.png) no-repeat center; background-size: cover; }

.home2-testimonials { background: url(../images/testimonials-bg-img.jpg) no-repeat center; background-size: cover; }
.testimonials-con.home2-testimonials:after { display: none; }
.testimonials-con.home2-testimonials::before { width: 100%; height: 100%; background: rgb(0 35 138 / 90%); }
.home2-testimonials .container { z-index: 1; position: relative; }

.home2-faq-con .faq-box { grid-template-columns: 42.45% 48.65%; }

.banner-price { width: 160px; height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; text-align: center; color: var(--secondary--color); background: var(--accent--color); position: absolute; bottom: 0; right: 0; box-shadow: 30px 30px 20px rgb(0 17 79 / 20%); }
.banner-price > span { font-size: 16px; line-height: 16px; margin-bottom: 2px; }
.banner-price-value { font-size: 56px; font-weight: 700; margin-left: 9px; line-height: 56px; margin-bottom: 3px; }
.month-title { font-size: 16px; line-height: 16px; }
.banner-price-value span, .banner-price-value small { font-size: 30px; line-height: 30px; font-weight: 400; display: inline-block; }
.banner-price-value span { top: -17px; position: relative; padding-right: 6px; }
.banner-price-value small { left: -10px; position: relative; }

.banner-img { position: relative; }

.support-con3 { background: #00238a; overflow: hidden; }
.support-con3 .support-box-title *, .home3-testimonials-con .testimonials-item:hover * { color: var(--secondary--color); }

.home3-testimonials-con { background: transparent; }
.home3-testimonials-con:after, .home3-testimonials-con::before { display: none; }
.home3-testimonials-con .generic-title span { color: var(--accent--color); }
.home3-testimonials-con .generic-title h2 { color: var(--primary--color); }
.home3-testimonials-con .testimonials-item { border: 1px solid rgb(0 123 255 / 20%); }
.home3-testimonials-con .testimonials-item:hover { background: var(--accent--color); border-color: var(--accent--color); }

.home3-testimonials-con .testimonials-box .owl-theme .owl-nav button { border: 2px solid #007bff; }
.home3-testimonials-con .testimonials-box .owl-theme .owl-nav button i { color: #007bff; }
.home3-testimonials-con .owl-carousel .owl-stage-outer { padding-left: 2px; }
.home3-testimonials-con .owl-carousel .owl-stage, .home3-testimonials-con .owl-carousel .owl-item, .home3-testimonials-con .owl-carousel .item { display: flex; }

.home4-testimonials-con .testimonials-item { background: var(--accent--color); border-color: var(--accent--color); }
.home4-testimonials-con .testimonials-item, .home4-testimonials-con .client-info h4 { color: var(--secondary--color); }

.home3-banner-con { padding: 120px 0; background-image: linear-gradient(30deg, var(--dark--red-color) 0%, var(--dark--blue-color) 40%); }
.home3-banner-con .banner-box { grid-template-columns: 44% 49.5%; }

.home3-faq-con { background: var(--light--red-color); }
.home3-faq-con .faq-item .card-header button { background: var(--secondary--color); border: 1px solid rgb(255 221 220 / 100%); }

/* ================== MEDIA QUERIES ================== */

@media (max-width: 992px) {
    h1 { font-size: 36px; line-height: 44px; }
    h2 { font-size: 28px; line-height: 36px; }
    h3 { font-size: 24px; line-height: 30px; }

    .generic-title2 p { padding: 0 20px; }
    .help-title p { padding: 0 20px; }

    .reseller-plan-con .plan-box { grid-template-columns: 1fr 1fr; }
    .vps-support-con .support-box { grid-template-columns: 1fr; }
    .home2-faq-con .faq-box { grid-template-columns: 1fr; }

    .banner-price { width: 120px; height: 120px; }
    .banner-price-value { font-size: 36px; line-height: 36px; margin-left: 5px; }
    .banner-price-value span, .banner-price-value small { font-size: 20px; line-height: 20px; }

    .feature-shape::before { width: 300px; height: 400px; }
    .feature-shape::after { width: 100px; height: 200px; }
}

@media (max-width: 576px) {
    h1 { font-size: 28px; line-height: 34px; }
    h2 { font-size: 22px; line-height: 28px; }
    h3 { font-size: 20px; line-height: 24px; }

    .generic-title2 p, .help-title p { padding: 0 15px; }
    .reseller-plan-con .plan-box { grid-template-columns: 1fr; }
    .vps-support-con .support-box { grid-template-columns: 1fr; }

    .banner-price { width: 100px; height: 100px; }
    .banner-price-value { font-size: 28px; line-height: 28px; margin-left: 0; }
    .banner-price-value span, .banner-price-value small { font-size: 16px; line-height: 16px; }

    .feature-shape::before { width: 200px; height: 250px; }
    .feature-shape::after { width: 80px; height: 150px; }
}