/*------------------------------BODY------------------------------*/

.h2, h2 {
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
    /*A very general specification of h2 elements to have a certain font-size,font weight and color*/
}

.h3, h3 {
    font-size: 1.3rem;
    color: #fff;
    /*A very general specification of h3 elements to have a certain font-size,font weight and color*/
}

/*------------------------------JUMBROTRON------------------------------*/

.height50p {
    height: 50vh !important;
}

.banner {
    position: relative;
    top: 0;
    width: 100%;
    /*Ensures whatever content is inside of it, uses 100% of it*/
    height: 100vh;
    /*uses 100vh of the user screen*/
    background: url(../Pictures/0.Common-Folder/ThematicFiller-Mountains.jpg);
    /*Inset here to change the pictures in the future*/
    background-size: cover;
    margin-bottom: 0;
}

/*------------------------------SECTION------------------------------*/

.sec1 {
    padding: 0px 0 100px 0;
    /* padding: 100px 0; */
    background: #000;
    /*can be used to create iamges inside here*/
}

.btnD1 {
    border: 2px solid #000000;
    /*A border of black, 2px thick of solid lines*/
    color: #000;
    /*Text being of black color*/
    background: #fff;
    /*background color of being white*/
    border-radius: 50px;
    /*Gives the edges a more less rough and edgy look so its more comforting*/
    font-size: 1.15rem;
    /*Gives the font-size of the text inside the button a bigger size*/
    outline: none;
    /*Makes the button have no outline*/
    padding: 15px;
    font-weight: 500;
    /*For dramatical effect - gives it a strong field*/
    margin-top: 20px;
    /*Sets the margin to 20px above the previous line of text, so as to create more breathing space*/
}

.sec2 h2 {
    font-weight: 800;
    /*For dramatical purposes*/
    color: #fff;
    /*To white the entire text*/
    text-transform: uppercase;
    font-size: 4.5rem;
    /*gives the Testimonials alittle more punch, more dramatic feel*/
}

.contentBox h1 {
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    font-size: 4.5rem;
}

/*------------------------------TESTIMONIALS------------------------------*/

.Testimonials-align {
    vertical-align: middle;
}

.mb-4, .my-4 {
    margin-bottom: 2.5rem!important;
}

/*------------------------------ADDITIONAL FEATURES(SECTION)------------------------------*/

.placeBox2 {
    position: relative;
    max-width: 300px;
    height: 400px;
    /*Gives the box a height of 300px and a height of 400px!*/
    margin: 0 auto;
    background: #000;
    /*So as to have a seemless transition from the Testimonial to the Additional features to the footer!*/
    margin-top: 30px;
    /*Gives the infomation inside, alittle more breathing room from the Additional features so users dont get stressed*/
}

.placeBox2 .imgBx2 {
    width: 100%;
    height: 100%;
    /*To ensure the images and the text make use of 100% of the width and height*/
}

.placeBox2 .content {
    position: absolute;
    /*Positon absolute so as to make the content stick with the placeBox*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*To ensure the images and the text make use of 100% of the width and height*/
    display: flex;
    align-items: flex-end;
}

.placeBox2 .content h3 {
    position: relative;
    margin: 0;
    padding-left: 10px;
    background: rgba(0, 0, 0, .95);
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    width: 100%;
    /*The font weight and size is adjusted for dramatical purposes, such as the font-size, font-weight to make it alittle bigger
    then the content so as to catch the reader eye*/
    text-align: center;
    /*This feature is bascially just to give the Based In Singapore,Kill switch and Strong encryption alittle bit more "flare"
    and makes it alittle bigger so as to not obstruct or draw too much attention away from the user*/
}

.placeBox2 .content h3 span {
    font-size: 16px;
    font-weight: 500;
}

/*------------------------------RESPONSIVITY------------------------------*/

@media (min-width: 576px) {
    .jumbotron {
        padding: 4rem 2rem;
    }
}

@media (max-width: 992px) {
    .banner {
        min-height: 100vh;
        padding: 100px 0;
    }
    .card-body {
        padding: 10px 0;
    }
    .contentBox h1 {
        font-size: 2rem;
        margin-top: 5rem;
    }
    .sec2 h2 {
        font-weight: 800;
        color: #fff;
        text-transform: uppercase;
        font-size: 3.0rem;
        /*Ensure that the testimonial scales as well when on different viewports such as on phone or etc*/
    }
    .contentBox p {
        color: #fff;
        font-size: 1.5rem;
        /*this ensures that the The core of our bundle... scales accordingly to different breakpoints*/
        /*this ensures that the Pay for what you want scales accordingly to different breakpoints*/
    }
}

@media (min-width:1024px) {
    .contentBox h1 {
        font-size: 2rem;
        margin-top: -5rem;
        /*this ensures that the Pay for what you want scales accordingly to different breakpoints*/
    }
}

@media (min-width:1500px) {
    .contentBox h1 {
        font-size: 5rem;
        margin-top: 0;
        /*this ensures that the Pay for what you want scales accordingly to different breakpoints*/
    }
}