:root{
    /* Brand */
    --rq-primary:      #2563eb;
    --rq-primary-dark: #1e40af;
    --rq-primary-light:#60a5fa;
    --rq-accent:       #7dd3fc;

    /* UI */
    --rq-hover:        #1d4ed8;
    --rq-bg:           #f8fafc;
    --rq-border:       #e5e7eb;

    /* Effects */
    --rq-highlight:    rgba(255,255,255,.18);
    --rq-shadow:       rgba(37,99,235,.15);
}

body{
    font-family:'Inter',sans-serif;
    color:#334155;
    line-height:1.4;
}
    



/* HEADER */

/* ================= NAVBAR ================= */


.navbar{
    /*background: transparent !important;*/
    /*background:
        linear-gradient(
            118deg,
            transparent 0%,
            transparent 6%,
            rgba(255,255,255,.18) 14%,
            rgba(255,255,255,.10) 22%,
            transparent 32%
        ),*/
        /*
        linear-gradient(
            135deg,
            #1b75d0 0%,
            #2196f3 30%,
            #1565c0 65%,
            #0b3c91 100%
        ) !important;
        */
        background:linear-gradient(280deg,rgba(2, 0, 36, 1) 20%, rgba(9, 9, 121, 1) 54%, rgba(255, 255, 255, 1) 89%, rgba(9, 9, 121, 1) 98%);
          /*background:linear-gradient(300deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 80%, rgba(255, 255, 255, .5) 100%, rgba(9, 9, 121, .2) %);*/
    box-shadow: 0 1px 10px rgba(0,0,0,.08);
    padding: 0 0 1px 0;
}

.navbar-brand img{
    height:50px;
    width:auto;
}

.navbar .nav-link{
    color:#fff !important;
    font-size:18px;
    font-weight:500;
    padding:10px 15px;
    border-radius:8px;
    transition:.25s;
}

.navbar .nav-link:hover{
    color:#93c5fd !important;
}

.navbar .nav-link.active{
    background:rgba(255,255,255,.18);
    color:#fff !important;
    font-weight:600;
}
/*
.navbar .btn-primary{
    padding:10px 18px;
    border-radius:10px;
    font-weight:600;
}*/
/*
.navbar .nav-link,
.navbar .navbar-brand{
    color:#ffffff !important;
}
.navbar-nav .nav-link{
    font-size:18px;
    padding-left:15px;
    padding-right:15px;
    font-weight:500;
}
.navbar .nav-link:hover{
    color:#93c5fd !important;
}

.navbar-toggler{
    border-color:rgba(255,255,255,.2);
}

.navbar-toggler-icon{
    filter:invert(1);
}
.navbar .btn-primary{
    padding:10px 18px;
    border-radius:10px;
    font-weight:600;
}
*/
/* HERO */

.hero-section {
    background-image:
        linear-gradient(
            rgba(255,255,255,.09) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.09) 1px,
            transparent 1px
        ),
        
        linear-gradient(
            135deg,
            #0f172a 0%,
            #1e3a8a 40%,
            #2563eb 75%,
            #60a5fa 100%
        );
        
        
        background-size:
            40px 40px,
            40px 40px,
            cover;
}

.hero-sectionnull{
    background: transparent;
    background-image:
        linear-gradient(
            rgba(255,255,255,.05) 1px,
            transparent 1px
        ),
        
        linear-gradient(
            90deg,
            rgba(255,255,255,.05) 1px,
            transparent 1px
        );
        
        /*linear-gradient(
            135deg,
            var(--rq-primary-dark) 0%,
            var(--rq-primary) 30%,
            var(--rq-primary-light) 65%,
            var(--rq-accent) 100%
        );*/
        
      /*inear-gradient(306deg,rgba(2, 0, 36, 1) 20%, rgba(9, 9, 121, 1) 54%, rgba(255, 255, 255, 1) 89%, rgba(9, 9, 121, 1) 98%);*/
        /*linear-gradient(306deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 60%, rgba(9, 9, 121, .1) 100%);*/
        /*
        linear-gradient(
            135deg,
            var(--rq-primary) 0%,
            var(--rq-primary-light) 0%,
            var(--rq-primary-dark) 65%,
            var(--rq-accent) 100%
        );
        */
        /*
        linear-gradient(
            135deg,
            #0f172a 0%,
            #1e3a8a 40%,
            #2563eb 75%,
            #60a5fa 100%
        );
        */
        /*
        background-size:
            40px 40px,
            40px 40px,
            cover;
            */
}

.hero-section-sub {
    background-image:
        linear-gradient(
            rgba(255,255,255,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            135deg,
            #0f172a 0%,
            #1e3a8a 40%,
            #2563eb 75%,
            #60a5fa 100%
        );

    background-size:
        40px 40px,
        40px 40px,
        cover;
}

.hero-section{
    padding-bottom:140px;
}

.hero-section-sub{
    padding:20px;
}
.hero-section::after{
    content:'';
    position:absolute;

    width:350px;
    height:350px;

    bottom:-150px;
    left:-100px;

    background:rgba(96,165,250,.18);
    border-radius:50%;

    filter:blur(80px);
}
.hero-section{
    padding:40px 0 80px 0;
}
.hero-section .container{
    position:relative;
    z-index:2;
}
.hero-title{
    font-size:3rem;
    font-weight:800;
    margin-bottom:20px;
}

.hero-text{
    font-size:1.1rem;
    opacity:.95;
    margin-bottom:30px;
    color:rgba(255,255,255,.88);
}

.hero-buttons .btn{
    margin-right:10px;
    font-weight: 600;
}
.hero-title
{
    color:#fff;
}
.hero-title{
    text-shadow:
        0 3px 15px rgba(0,0,0,.30);
}
.hero-text{
    opacity:.95;
}
/* DOMAIN SEARCH */

.domain-search{
    margin-top:-40px;
    position:relative;
    z-index:10;
    /*box-shadow:0 20px 50px rgba(37,99,235,.12);*/
}

.domain-box{
     background:rgba(96,165,250,1);
    padding:40px;
    border-radius:20px;

    box-shadow:0 20px 50px rgba(15,23,42,.12);
    box-shadow:0 20px 50px rgba(37,99,235,.12);

    border:1px solid rgba(255,255,255,.6);
    background-image: url('/assets/img/domain-trans.png');
    background-position: right;
    background-repeat: no-repeat;
   
   
}

.domain-box h2{
    color: #ffff;
    font-weight:600;
    text-align:left;
    margin-bottom:25px;
}

/* SECTION */

.section-title h2{
    font-weight:700;
    color:var(--rq-dark);
}

.section-title p{
    color:#64748b;
}
.cta-section{
    text-align:center;
    padding:80px 20px;

    background:
        linear-gradient(
            135deg,
            #1e3a8a,
            #2563eb
        );

    color:#fff;
}

/* FEATURE CARD */

.feature-card{
    background:#fff;
    border-radius:16px;
    padding:25px;
    height:100%;
    transition:.3s;
    border:1px solid var(--rq-border);
}

.feature-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 30px rgba(0,0,0,.08);
}

/* PRICING */

.pricing-card{
    background:#fff;
    border-radius:20px;
    padding:35px;
    text-align:center;
    border:1px solid rgba(59,130,246,.2);
    height:100%;
    position:relative;
    transition:.3s;

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
.pricing-card:hover{
    transform:translateY(-8px);

    box-shadow:
        0 25px 50px rgba(37,99,235,.15);

    border-color:#2563eb;
}

.pricing-card h3{
    font-weight:700;
}

.price{
    font-size:2.5rem;
    font-weight:800;
    color:var(--rq-primary);
    margin:20px 0;
}

.price span{
    font-size:1rem;
    color:#64748b;
}

.pricing-card ul{
    list-style:none;
    padding:0;
    margin:25px 0;
}

.pricing-card ul li{
    padding:8px 0;
}

.featured{
    border:2px solid var(--rq-primary);
}

.popular-badge{
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    background:var(--rq-primary);
    color:#fff;
    padding:6px 18px;
    border-radius:50px;
    font-size:.8rem;
    font-weight:600;
}

/* MP LIGHT */

.mp-light-box{
    background:#fff;
    border-radius:20px;
    padding:50px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.examples{
    color:var(--rq-primary);
    font-weight:600;
}

/* SITEJET */

.sitejet-list{
    list-style:none;
    padding-left:0;
}

.sitejet-list li{
    padding:10px 0;
    font-size:1.05rem;
}

/* EMAIL */

.email-demo{
    background:#fff;
    border-left:4px solid var(--rq-primary);
    padding:20px;
    margin-top:20px;
    border-radius:8px;
    font-family:monospace;
    font-size:1rem;
}

/* FAQ */

/* =====================================================
   FAQ / Accordion - RQNET Theme
===================================================== */

.accordion {
    --bs-accordion-border-color: transparent;
    --bs-accordion-border-radius: var(--radius-md);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-bg: transparent;
}

/* Item */

.accordion-item{
    border:0;
    margin-bottom:12px;
    border-radius:var(--radius-md);
    overflow:hidden;

    box-shadow:var(--shadow-sm);
}

/* Button */

.accordion-button{
    background:#dbeafe;
    color:var(--rq-primary-dark);

    font-weight:600;
    font-size:15px;

    padding:16px 20px;

    transition:all .25s ease;
}

/* Hover */

.accordion-button:hover{
    background:#c8e0ff;
    color:var(--rq-primary-dark);
}

/* Active */

.accordion-button:not(.collapsed){

    color:#fff;

    background:
        linear-gradient(
            135deg,
            var(--rq-primary-dark),
            var(--rq-primary),
            var(--rq-primary-light)
        );

    box-shadow:none;
}

/* Panah Putih Saat Active */

.accordion-button:not(.collapsed)::after{

    filter:brightness(0) invert(1);

}

/* Saat Collapse Lagi */

.accordion-button.collapsed{

    background:#dbeafe;
    color:var(--rq-primary-dark);

}

/* Hilangkan Shadow Bootstrap */

.accordion-button:focus{

    box-shadow:none;

}

/* Body */

.accordion-body{

    background:#fff;

    color:#475569;

    line-height:1.8;

    font-size:15px;

    border-top:1px solid rgba(37,99,235,.08);

    padding:22px;

}

/* Smooth Animation */

.accordion-collapse{

    transition:all .30s ease;

}
.accordion-button:not(.collapsed){

    color:#fff;

    background:
        linear-gradient(
            118deg,
            rgba(255,255,255,.12) 0%,
            rgba(255,255,255,.05) 18%,
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--rq-primary-dark),
            var(--rq-primary),
            var(--rq-primary-light)
        );

}
.accordion-button:not(.collapsed){

    position:relative;

}

.accordion-button:not(.collapsed)::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:5px;
    height:100%;

    background:#fff;

}

/* FOOTER */

.footer{
    background:linear-gradient(
        135deg,
        #0f172a 0%,
        #1e3a8a 100%
    );

    color:#fff;
    padding:60px 0 30px;
}
.footer {
    background-image:
        linear-gradient(
            rgba(255,255,255,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            135deg,
            #0f172a 0%,
            #1e3a8a 40%,
            #2563eb 75%,
            #60a5fa 100%
        );

    
    padding:10px 0 5px 0;
    line-height: 1;
}

.footer h5{
    margin-bottom:20px;
}

.footer-links{
    list-style:none;
    padding:0;
}

.footer-links li{
    margin-bottom:10px;
}

.footer-links a{
    color:#cbd5e1;
    text-decoration:none;
}

.footer-links a:hover{
    color:#fff;
}

/* BUTTON */

.btn-primary{
    background:var(--rq-primary);
    border-color:var(--rq-primary);
}

.btn-primary:hover{
    background:#2563eb;
    border-color:#2563eb;
}

/* MOBILE */


.navbar{
    box-shadow:
        0 1px 0 rgba(255,255,255,.08),
        0 4px 20px rgba(30,58,138,.25);
}

.footer{
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08);
        
}
.hero-tech-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.tech-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:15px;
    margin-top:20px;
}
.tech-card{
    height:105px;
    background:rgba(255,255,255,.7);
    border-radius:12px;
    padding:20px;
    text-align:center;
    box-shadow:0 4px 15px rgba(0,0,0,.1);
}
.tech-grid i{
    color:#2563eb;
    margin-right:8px;
    font-size:1.1rem;
}
.tech-card img{
    width:200px;
    max-width:100%;
    height:auto;
}

.tech-card span{
    display:block;
    font-size:14px;
    font-weight:600;
    color:#374151;
}

.page-header{
    padding:70px 0 50px;
    background:linear-gradient(135deg,#0f172a,#2563eb);
    color:#fff;
    text-align:center;
}

.content-section{
    padding:60px 0;
}

.content-section .container{
    max-width:1000px;
}

.content-section h2{
    margin-top:40px;
    margin-bottom:15px;
    color:#1e3a8a;
}

.content-section p,
.content-section li{
    line-height:1.8;
    color:#555;
}
.about-logo{
    margin-bottom:25px;
    max-width:180px;
}
.alert-status{
    padding:20px;
    border-radius:12px;
}
/* TEST */
.navbar .nav-link{
    color:#F0FFFF !important;
    font-size:18px;
    font-weight:500;
    padding:10px 15px;
    border-radius:8px;
    transition:.25s;
    display:flex;
    align-items:center;
    height:44px; /* semua menu sama tinggi */
}

.navbar .nav-link.active{
    /*background:#1e40af;*/
    background-color: transparent;
    /*border: 1px solid white;*/
    color:#fff !important;
    font-weight:600;
    border-radius:5px;
    padding:0px 0px;
    /*box-shadow:0 2px 6px rgba(255,255,255,.3);*/
    border-bottom: 2px solid white;
}
.navbar .btn-primary{
    padding:8px 14px;
    border-radius:8px;
    font-weight:600;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}
.badge-last-update{
    background:#334155;
    color:#fff;
    border-radius:8px;
    padding:.45rem .75rem;
    font-size:.82rem;
}
.table td,
.table th{
    padding:.85rem;
    vertical-align:middle;
}

@media(max-width:768px){
    .navbar-collapse {
        background:linear-gradient(
            135deg,
            #0f172a 0%,
            #1e3a8a 40%,
            #2563eb 75%,
            #60a5fa 100%
        );
        padding: 5px;
    }
    .hero{
        padding:50px 20px;
    }
    .hero-tech-grid{
     margin-top:20px;
    }
    .hero-section{
        text-align:center;
        padding:70px 0;
    }

    .hero-title{
        font-size:2rem;
    }

    .domain-box{
        padding:5px;
        /*margin-top:-30px;*/
    }

    .pricing-card{
        margin-bottom:20px;
    }

    .mp-light-box{
        padding:30px;
    }
    

}
@media(min-width:992px){
    .featured{
        transform:scale(1.04);
    }
}