/* styles.css */
.jumbotron {
    /* background: url('your-image-path.jpg') no-repeat center center; */
    background-size: cover;
    color: white;
    border-bottom-left-radius: 180px;
    border-bottom-right-radius: 180px;
}
.jumbotron h1, .jumbotron p {
    color: white;
}
section h2 {
    margin-bottom: 30px;
}
.card {
    margin-top: 20px;
}
.footer {
    background-color: #343a40;
    color: white;
}

.gradientprimary {
    background: linear-gradient(to right, #009D64 2%, #023C9F);
    color: white;
}

.cardgroup {
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.active-navbar {
    background-color: rgba(2,60,159,0.5);
    width: 30%;
    height: 30px;
    color: white;
}

/* Shadow */

.boxshadow {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

a { color: inherit; } 

a:hover {
    color: inherit;
}

.nav-link {
    width: 30%;
    height: auto;
}

.hovernavbar:hover {
    width: 30%;
    height: 60px;
    background-color:rgba(2,60,159,0.5);
    color: white;
}

/* Fontsize */

.fs14pxrem {
    font-size: 0.875rem
}
.fs24pxrem {
    font-size: 1.5rem
}

.fs20pxrem {
    font-size: 1.25rem
}

.fs28pxrem {
    font-size: 1.75rem
}

.fs32pxrem {
    font-size: 2rem
}

.fs40pxrem {
    font-size: 2rem
    }
.fs44pxrem {
    font-size: 2.75rem
}
.fs48pxrem {
    font-size: 3rem
}
.fs60pxrem {
    font-size: 3.75rem
}
            
.hrstyle {
    background: linear-gradient(to right, #023C9F, #009D64);
    height: 5px;
}

.fontbold {
    font-weight: bold;
}

.formradius {
    width: 100%;
    /* height: 25px; */
    margin: 0 auto;
    border: none; /* <-- This thing here */
    border:solid 1px #ccc;
    border-radius: 25px;
}

.textgray {
    color : #7E7E7E;
}

.textprimary {
    color: #023C9F;
}
.backgroundprimary {
    background-color: #023C9F;
}

.bgprimarygradient {
    background: linear-gradient(to bottom,  #C4DAFF 5%, #F5F5F5);

}

.gradientprimarypackage {
    background: linear-gradient(to right, #009D64 2%,#023C9F, #010685);
}

.textsecondary {
    color: #424242;
}
.borderradius {
    border-radius: 25px;
}


.boxproyek {
    background-color: #F5F5F5;
    border-radius: 25px;
    padding: 20px;
}

.custom-box {
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    position: relative;
    background: white;
}

.custom-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 10px;
    background-color: #0047AB; /* Change this to your preferred color */
    border-radius: 15px 0 0 15px;
}

.background-section {
    position: relative;
    background: url('../test/images/backgroundsection.png') no-repeat center center;
    background-size: cover;
    /* color: white; Change to desired text color */
    padding: 60px 20px;
    border-radius: 15px; /* Optional for rounded corners */
}
.background-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: rgba(0, 0, 0, 0.5); Optional: Add overlay color */
    border-radius: 15px; /* Match with section's border-radius */
    z-index: 1;
}
.background-section .content {
    position: relative;
    z-index: 2;
}

.background-section-2 {
    position: relative;
    background: url('../test/images/section2.jpeg') no-repeat center center;
    background-size: cover;
    /* background-color: #0047AB; */
    /* color: white; Change to desired text color */
    padding: 60px 20px;
    border-radius: 80px; /* Optional for rounded corners */
}

.background-section-2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(3,63,158,0.8) 100%, rgba(39,177,255,0.7) 100%);
    border-radius: 80px; /* Match with section's border-radius */
    z-index: 1;
}

.background-section-2 .content-2 {
    position: relative;
    z-index: 2;
}


.textwhite {
    color: white;
}

.imgborder {
    border-radius: 40px;
}


/* Box Pricing */
/* Orange */
.pricing-box {
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    position: relative;
    background: white;  
}

.pricing-box::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 20px;
    background-color: #B35900;
    border-radius: 15px 15px 0 0;
}
.pricing-box .header {
    width: 100%;
    /* background-color: #FFA500; */
    color: #CD7F32;
    padding: 10px;
    border-radius: 15px 15px 0 0;
    font-weight: bold;
}
 
.pricing-box .price {
    font-size: 1.75rem;
    font-weight: bold;
    margin: 20px 0;
}

.pricing-box .btn-outline-primary {
    border-color: #FFA500;
    color: #FFA500;
}

.pricing-box .btn-outline-primary:hover {
    background-color: #FFA500;
    color: white;
}

.pricing-box a {
    display: block;
    margin-top: 10px;
    color: #007bff;
}

.pricing-box a:hover {
    text-decoration: underline;
}

/* Silver */
.pricing-box-silver {
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    position: relative;
    background: white;  
}
.pricing-box-silver::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 20px;
    /* background-color: #5A5A5A; */
    /* background: linier-gradient(to right, #C0C0C0, #5A5A5A); */
    background: linear-gradient(to right, #C0C0C0 2%, #5A5A5A);

    border-radius: 15px 15px 0 0;
}
.pricing-box-silver .header {
    width: 100%;
    /* background-color: #FFA500; */
    color: #8B8B8B;
    padding: 10px;
    border-radius: 15px 15px 0 0;
    font-weight: bold;
}

.pricing-box-silver .price {
    font-size: 1.75rem;
    font-weight: bold;
    margin: 20px 0;
}

.pricing-box-silver .btn-outline-primary {
    border-color: #FFA500;
    color: #FFA500;
}

.pricing-box-silver .btn-outline-primary:hover {
    background-color: #FFA500;
    color: white;
}

.pricing-box-silver a {
    display: block;
    margin-top: 10px;
    color: #007bff;
}

.pricing-box-silver a:hover {
    text-decoration: underline;
}

/* GOLD */
.pricing-box-gold {
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    position: relative;
    background: white;  
}
.pricing-box-gold::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 20px;
    /* background-color: #5A5A5A; */
    /* background: linier-gradient(to right, #C0C0C0, #5A5A5A); */
    background: linear-gradient(to right, #E6C200 2%, #C38D00);

    border-radius: 15px 15px 0 0;
}
.pricing-box-gold .header {
    width: 100%;
    /* background-color: #FFA500; */
    color: #E2BF00;
    padding: 10px;
    border-radius: 15px 15px 0 0;
    font-weight: bold;
}

.pricing-box-gold .price {
    font-size: 1.75rem;
    font-weight: bold;
    margin: 20px 0;
}

.pricing-box-gold .btn-outline-primary {
    border-color: #FFA500;
    color: #FFA500;
}

.pricing-box-gold .btn-outline-primary:hover {
    background-color: #FFA500;
    color: white;
}

.pricing-box-gold a {
    display: block;
    margin-top: 10px;
    color: #007bff;
}

.pricing-box-gold a:hover {
    text-decoration: underline;
}

.jumbtron {
    padding: 3rem 0;
    color: white;
    border-bottom-left-radius: 180px;
    border-bottom-right-radius: 180px;
}


/* PLATINUM */
.pricing-box-platinum {
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    position: relative;
    background: white;  
}
.pricing-box-platinum::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 20px;
    /* background-color: #5A5A5A; */
    /* background: linier-gradient(to right, #C0C0C0, #5A5A5A); */
    background: linear-gradient(to right, #E5E4E2 2%, #B1B1B1);

    border-radius: 15px 15px 0 0;
}
.pricing-box-platinum .header {
    width: 100%;
    /* background-color: #FFA500; */
    color: #A6A6A6;
    padding: 10px;
    border-radius: 15px 15px 0 0;
    font-weight: bold;
}

.pricing-box-platinum .price {
    font-size: 1.75rem;
    font-weight: bold;
    margin: 20px 0;
}

.pricing-box-platinum .btn-outline-primary {
    border-color: #FFA500;
    color: #FFA500;
}

.pricing-box-platinum .btn-outline-primary:hover {
    background-color: #FFA500;
    color: white;
}

.pricing-box-platinum a {
    display: block;
    margin-top: 10px;
    color: #007bff;
}

.pricing-box-platinum a:hover {
    text-decoration: underline;
}


/* DIAMOND */
.pricing-box-diamond {
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    position: relative;
    background: white;  
}
.pricing-box-diamond::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 20px;
    /* background-color: #5A5A5A; */
    /* background: linier-gradient(to right, #C0C0C0, #5A5A5A); */
    background: linear-gradient(to right, #C9F5FF 2%, #61D1EA);

    border-radius: 15px 15px 0 0;
}
.pricing-box-diamond .header {
    width: 100%;
    /* background-color: #FFA500; */
    color: #61D1EA;
    padding: 10px;
    border-radius: 15px 15px 0 0;
    font-weight: bold;
}

.pricing-box-diamond .price {
    font-size: 1.75rem;
    font-weight: bold;
    margin: 20px 0;
}

.pricing-box-diamond .btn-outline-primary {
    border-color: #FFA500;
    color: #FFA500;
}

.pricing-box-diamond .btn-outline-primary:hover {
    background-color: #FFA500;
    color: white;
}

.pricing-box-diamond a {
    display: block;
    margin-top: 10px;
    color: #007bff;
}

.pricing-box-diamond a:hover {
    text-decoration: underline;
}


.background-section-pricing {
    position: relative;
    background: url('../test/images/backgroundsectionpricing.png') no-repeat 0 100%;
    /* opacity: 0.5; */
    background-size: cover;
    padding: 60px 20px;
    z-index: 999;
}

.background-section-pricing::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.background-section-pricing .content-pricing {
    position: relative;
    z-index: 2;
}


/* Section 4 */
.background-section-4 {
    position: relative;
    background: url('../test/images/section4.jpeg') no-repeat center center;
    background-size: cover;
    /* color: white; Change to desired text color */
    padding: 60px 20px;
    border-radius: 15px; /* Optional for rounded corners */
}
.background-section-4::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: linear-gradient(to right, rgba(2,60,159,0.9) 50%, rgba(1,153,104,0.9) 100%);
    border-radius: 15px; /* Match with section's border-radius */
    z-index: 1;
}
.background-section-4 .content-4 {
    position: relative;
    z-index: 2;
}



@media screen and (max-width: 768px) {
    .price {
        font-size: 1.5rem;
    }
    .fs24pxrem {
        font-size: 1.25rem
    }
    
    .fs20pxrem {
        font-size: 1rem
    }
    
    .fs32pxrem {
        font-size: 1.75rem
    }
    
    .fs40pxrem {
        font-size: 2.25rem
        }
    .fs44pxrem {
        font-size: 2rem
    }
    .fs48pxrem {
        font-size: 2.75rem
    }
    .fs60pxrem {
        font-size: 3.5rem
    }
}

@media screen and (max-width: 1200px) {
    .price {
        font-size: 1.5rem;
    }
    
}

@media screen and (max-width: 992px) {
    .price {
        font-size: 1rem;
    }
    
}
@media screen and (max-width: 800px) {
    .price {
        font-size: 1rem;
    }
    
}

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

    .price {
        font-size: 1rem;
    }
    .mobile {
        display: none;
    }
    .jumbtron {
        padding: 3rem 0;
        color: white;
        border-bottom-left-radius: 80px;
        border-bottom-right-radius: 80px;
    }

    .jumbotron {
        background-size: cover;
        color: white;
        border-bottom-left-radius: 80px;
        border-bottom-right-radius: 80px;
    }
    
    .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        line-height: 1.5;
        height: 2rem;
        /* border-radius: 0.2rem; */
    }
    
    .fs24pxrem {
        font-size: 1.25rem
    }
    
    .fs20pxrem {
        font-size: 0.8rem
    }
    
    .fs32pxrem {
        font-size: 1.75rem
    }
    
    .fs40pxrem {
        font-size: 2.25rem
        }
    .fs44pxrem {
        font-size: 2rem
    }
    .fs48pxrem {
        font-size: 2.75rem
    }
    .fs60pxrem {
        font-size: 3rem
    }
    .img-fluid {
        max-width: 100%;
        height: auto;
    }

    .formradius {
        width: 100%;
        /* height: 25px; */
        margin: 0 auto;
        border: none; /* <-- This thing here */
        border:solid 1px #ccc;
        border-radius: 25px;
    }
}