﻿/* Set padding to keep content from hitting the edges */

:root {
    --hr-base-blue: #2A70B3;
    --hr-base-golden: #C7A931;
    --main-color: #3498db;
    --padding: 10px;
}



/*@media (min-width: 1400px) {*/
/* Styles for screens larger than 1399px */
/*.fixat-bottom {
        position: absolute;
        bottom: 0;
    }
}*/

@media (max-width:991px) {
    .sidebar {
        background-color: rgba(0, 0, 0, 0.81);
    }

    .hr-heading {
        font-size: 14px !important
    }

    #offcanvasNavbar li a {
        color: white
    }
}



@media (max-width:768px) {
    .hide-on-md {
        display: none
    }

    .line-image-responsive {
        width: 130px !important;
    }

    #tbl-packages th,
    #tbl-packages td {
        font-size: 1rem !important; /* Adjust font size */
    }

    .wrapper-button-blue {
        font-size: 1rem !important; /* Adjust button font size */
    }

    .wrapper-contactus {
        margin: 0px !important;
    }
}

@media (max-width:480px) {
    .home-h1 {
        font-size: 26px
    }

    .head-white {
        font-size: 26px !important;
    }

    .line-image-responsive {
        width: 80px !important;
    }

    .wrapper-heading-responsive {
        width: 120px !important;
    }

    #tbl-packages th,
    #tbl-packages td {
        font-size: 0.8rem !important; /* Adjust font size */
    }

    .wrapper-button-blue {
        font-size: 0.8rem; /* Adjust button font size */
    }

    .text-heavy-black {
        font-size: 0.9rem !important;
    }

    .package-heading {
        font-size: 16px !important;
    }
}


@media (max-width: 320px) {
    .app-brand-text {
        width: 55vw
    }

    .hr-heading {
        font-size: 11px !important
    }

    .heading-responsive {
        font-size: 13px !important;
    }

    .home-h1 {
        font-size: 20px
    }

    .home-greytext {
        font-size: 13px
    }

    .head-white {
        font-size: 24px !important;
    }

    .line-image-responsive {
        width: 45px !important;
    }

    .about-us-line-resp {
        width: 110px !important;
    }
}





.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 100%;
}

/*
    Bodytext – Avenir Regular 12pts
    Subheading – Avenir Bold 14pts
    Heading – Ubuntu Bold 18pts
    Title – Congenial Black or equivalent – 24pts

*/

.nav-link {
    font-family: 'Avenir' !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

    .nav-link:hover {
        color: darkred !important;
    }

/*
    Bodytext – Avenir Regular 12pts
    Subheading – Avenir Bold 14pts
    Heading – Ubuntu Bold 18pts
    Title – Congenial Black or equivalent – 24pts
    Standard Colors

    Blue colour #2271B6
    Gold colour #C7A930
    Black
    White
*/

@font-face {
    font-family: "Ubuntu";
    src: url("assets/vendor/fonts/Ubuntu/Ubuntu-Bold.ttf") format('truetype');
    font-weight: 800;
}

@font-face {
    font-family: 'Avenir';
    src: url("assets/vendor/fonts/Avenir.ttf") format('truetype');
    font-style: normal;
}


@font-face {
    font-family: 'Avenir';
    font-weight: 600;
    src: url("assets/vendor/fonts/Avenir-Black.ttf") format('truetype');
}

@font-face {
    font-family: 'Avenir';
    font-weight: bold;
    src: url("assets/vendor/fonts/Avenir-Heavy.ttf") format('truetype');
}

@font-face {
    font-family: 'Avenir';
    src: url("assets/vendor/fonts/Avenir-Light.ttf") format('truetype');
    font-weight: 100;
    font-style: normal
}

@font-face {
    font-family: "Avenir";
    src: url("assets/vendor/fonts/Avenir-Book.ttf") format('truetype');
    font-weight: 100;
}

@font-face {
    font-family: "Congenial";
    src: url("assets/vendor/fonts/Congenial/CONGENIAL_REGULAR.OTF") format('opentype');
}

@font-face {
    font-family: "Congenial";
    src: url("assets/vendor/fonts/Congenial/CONGENIAL_BOLD.OTF") format('opentype');
    font-weight: bold;
}

@font-face {
    font-family: "Congenial";
    src: url("assets/vendor/fonts/Congenial/CONGENIAL_BLACK.OTF") format('opentype');
    font-weight: 600;
}

@font-face {
    font-family: "Ubuntu";
    src: url("../../fonts/Ubuntu/Ubuntu-Regular.ttf") format('opentype');
    font-style: normal;
}

@font-face {
    font-family: "Ubuntu";
    src: url("assets/vendor/fonts/Ubuntu/Ubuntu-Bold.ttf") format('truetype');
    font-weight: 800;
}

@font-face {
    font-family: "Ubuntu";
    src: url("assets/vendor/fonts/Ubuntu/Ubuntu-Medium.ttf") format('opentype');
    font-weight: 600;
}

@font-face {
    font-family: "Ubuntu";
    src: url("assets/vendor/fonts/Ubuntu/Ubuntu-Light.ttf") format('truetype');
    font-weight: 100;
}

.hr-title {
    font-family: 'Congenial';
    font-size: 24px;
    font-weight: 600;
    color: var(--hr-base-blue)
}



.hr-title-login {
    font-family: 'Congenial';
    font-size: 40px;
    font-weight: 600;
    color: var(--hr-base-blue)
}

.hr-heading {
    font-family: 'Ubuntu' !important;
    font-size: 18px;
    font-weight: 800;
    color: black
}

.non-small-title {
    font-family: 'Ubuntu' !important;
    font-size: 18px;
    font-weight: 800;
    color: black
}

.hr-subheading {
    font-family: 'Avenir';
    font-size: 14px;
    font-weight: bold;
}

.hr-bodytext {
    font-family: 'Avenir';
    font-size: 12px;
    font-style: normal;
    color: black;
}

.hr-bodylighttext {
    font-family: 'Avenir';
    font-size: 12px;
    font-weight: 100;
    color: black;
}

.hr-inputbox {
    padding: 5px !important;
    border-radius: 0 !important;
    width: 100%;
    font-size: 14px;
    font-family: 'Avenir';
    font-weight: 100;
    color: black;
    appearance: none;
    background-color: transparent;
    border: 1px solid #cfd0d6;
    border-radius: 0.5rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .hr-inputbox:focus {
        padding: 5px !important;
        outline: none;
    }

.hr-bullet-text {
    font-family: 'Avenir';
    font-size: 16px;
    font-weight: bold;
}

.hr-feature-text {
    font-family: 'Avenir';
    font-size: 16px;
    font-weight: 100;
    color: black;
}

.col-form-label {
    padding: 5px !important;
}

.hr-btn {
    /*
    --bs-btn-padding-x:;
    --bs-btn-padding-y:;
    --bs-btn-font-family: Avenir;
    --bs-btn-font-size: 0.9375rem;
    --bs-btn-font-weight: 500;
    --bs-btn-line-height:;
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-width: 1px;
    --bs-btn-border-color: transparent;
    --bs-btn-border-radius: 0.5rem;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-box-shadow: 0 0.125rem 0.375rem 0 rgba(38, 43, 67, 0.14);
    --bs-btn-disabled-opacity: 0.45;
    --bs-btn-focus-box-shadow: 0 0 0 0.05rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
    */
    display: inline-block;
    padding: 5px 10px;
    font-family: 'Avenir';
    font-size: 14px;
    font-style: normal;
    line-height: 1.375;
    color: white;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: none;
    border-radius: 0.5rem;
    background-color: transparent;
    transition: all 0.2s ease-in-out;
}


.hr-btn-primary {
    color: white;
    background-color: var(--hr-base-blue);
}

.hr-btn-save {
    color: white;
    background-color: #046011;
}

.hr-btn-remove {
    color: white;
    background-color: #cb2027;
}

.btn-knowmore {
    height: 145px !important;
    width: auto !important;
    border-radius: 100px !important;
    background-color: var(--hr-base-blue) !important;
    color: white !important;
    font-size: 14px !important;
    padding: 12px 20px 12px 20px;
    border: none;
}


.btn-subscribenow {
    height: 40px !important;
    width: 100% !important;
    border-radius: 100px !important;
    background-color: var(--hr-base-blue) !important;
    color: white !important;
    font-size: 14px !important;
    /*padding: 10px 95px 10px 95px;*/
    padding: 10px 0px 0px 0px;
    border: none;
    white-space: nowrap;
    text-align: center;
    /*margin-bottom:100px !important;*/
}



.btn-sm-subscribenow {
    height: 40px !important;
    width: 100% !important;
    border-radius: 100px !important;
    background-color: var(--hr-base-blue) !important;
    color: white !important;
    font-size: 14px !important;
    /*padding: 10px 95px 10px 95px;*/
    padding: 10px 20px 10px 20px;
    border: none;
    white-space: nowrap;
    text-align: center;
    /*margin-bottom:100px !important;*/
}


textarea {
    width: 100%; /* Make the textarea fill its container */
    max-width: auto; /* Limit the maximum width */
    height: 150px; /* Set a specific height */
    padding: 10px; /* Add padding inside the textarea */
    border: 1px solid #d9d9d9; /* Set border color and width */
    border-radius: 5px; /* Make the corners rounded */
    background-color: #f9f9f9; /* Set a light background color */
    font-family: 'Avenir' !important; /* Change the font */
    font-size: 14px !important; /* Increase the font size */
    font-weight: 100 !important;
    color: #333; /* Set the text color */
    resize: vertical; /* Allow resizing only vertically */
}

    textarea:focus {
        border-color: #2980b9;
        outline: none;
        box-shadow: 0 0 5px rgba(41, 128, 185, 0.5);
    }


td {
    font-family: 'Avenir' !important;
    font-weight: 100 !important;
    font-size: 14px !important;
    color: black
}


#offcanvasNavbar {
    background: rgba(0, 0, 0, 0.85);
}

    #offcanvasNavbar h5 {
        color: white;
    }

    #offcanvasNavbar button {
        color: white;
    }

    #offcanvasNavbar .btn-close {
        filter: invert(2);
    }


.package-heading {
    white-space: nowrap; /* Prevents text from wrapping */
}

.big-font-on-resp {
    font-size: 2rem !important;
}

.blog-card-image {
    border-radius: 18px
}

.create-blog-img {
    border: 1px solid #0000ff61;
    border-radius: 18px;
    margin-bottom:5px
}

.create-blog-img:hover {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.hr-title-blog {
    font-family: 'Ubuntu';
    font-size: 22px;
    font-weight: 600;
    color: var(--hr-base-blue)
}


.hr-blog-title {
    font-family: 'Ubuntu';
    font-size: 22px;
    font-weight: 600;
    color: var(--hr-base-blue);
    margin-bottom:20px;
}

.hr-blog-subtitle {
    font-family: 'Ubuntu';
    font-size: 16px;
    font-weight: 800;
    color: black;
}


.hr-blog-body {
    text-align: justify;
}


.gray-button {
    background-color: #DFDFE3 !important;
    color: black !important
}

    .gray-button:hover {
        background-color: #CBCBD1 !important;
    }

.bg-gold {
    background-color: #C7A930;
}

.bg-blue {
    background-color: #2271B6;
}

.hr-blue-btn:hover {
    background-color: #1A5283; /* Slightly darker shade */
    transition: background-color 0.3s ease; /* Smooth transition for background color change */
}
.hr-gold-btn{
    color:black !important,
}

.hr-gold-btn:hover {
    background-color: #978025; /* Slightly darker shade */
    transition: background-color 0.3s ease; /* Smooth transition for background color change */
}

.equal-height {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensures the card takes full height */
}

.card-header {
    flex: 1; /* Allows the content above the button to grow */
}

.set-at-bottom {
    margin-top: auto; /* Pushes the button to the bottom */
}

.equal-height {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distributes space between the content */
    height: 100%;
}

.card-header {
    flex: 1 1 auto; /* Allows content above to grow */
    display: flex;
    flex-direction: column;
}

.set-at-bottom {
    margin-top: auto; /* Pushes button to the bottom */
}

.equal-height {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distributes space between the content */
    height: 100%;
}

.card-header {
    flex: 1 1 auto; /* Allows content above to grow */
    display: flex;
    flex-direction: column;
}

.set-at-bottom {
    margin-top: auto; /* Pushes button to the bottom */
}

.forms-input-style {
    background-color: #F3F6F9;
    border: 1px solid #cfd0d6; /* Consistent border */
    outline: none; /* Removes default outline */
    box-shadow: none; /* Removes any default shadow */
    font-size:1rem
}

    /* Maintain background color and border on focus */
    .forms-input-style:focus {
        background-color: #F3F6F9;
        border: 1px solid #cfd0d6; /* Keep border consistent */
        outline: none; /* Removes the default outline */
        box-shadow: none; /* Ensures no blue outline/shadow */
    }

#signInEyeIcon {
    position: absolute;
    bottom: 9px;
    right: 6px;
}

#ConfirmpassEyeIcon {
    position: absolute;
    bottom: 13px;
    right: 14px;
}

#passEyeIcon {
    position: absolute;
    bottom: 9px;
    right: 14px;
}

.invalid-feedback-eye{
    position:absolute
}

.invalid-feedback {
    height: 30px;
    line-height: 30px; /* Ensures vertical alignment of text within the height */
}

.font-1-rem{
    font-size:1rem;
}

.submit-form-btn{
    height:40px;
    font-size:1.2rem;
}