:root {
    --primary: #fcc210;
    --primary-bold: #977204;
    --primary-semibold: #fcc210;
    --primary-medium: #fdd55d;
    --primary-light: #feeaae;
    --primary-xlight: #fffaeb;
    --danger: #c84040;
    --success: #3ca455;
    --orange: #e67337;
    --blue: #4078d9;
    --secondary: #110f24;
    --secondary-medium: #4d4d4d;
    --secondary-medium-2: #999999;
    --secondary-light: #ccced0;
    --secondary-xlight: #ececee;
    --secondary-xxlight: #f6f6f9;
    --white: #ffffff;
}

@font-face {
    font-family: "Lato-Light";
    src: url("../fonts/Lato/Lato-Light.ttf");
}

@font-face {
    font-family: "Lato-Regular";
    src: url("../fonts/Lato/Lato-Regular.ttf");
}

@font-face {
    font-family: "Lato-Thin";
    src: url("../fonts/Lato/Lato-Thin.ttf");
}
@font-face {
    font-family: "Lato-Bold";
    src: url("../fonts/Lato/Lato-Bold.ttf");
}

@font-face {
    font-family: "Lato-Black";
    src: url("../fonts/Lato/Lato-Black.ttf");
}

html,
body {
    font-size: 16px;
    line-height: 24px;
    font-family: "Lato-Regular", serif;
    color: var(--secondary);
}

/* headings */
.h0{
    font-size: 74px;
    line-height: 80px;
    font-family: Lato-Black;
}
h1, .h1 {
    font-size: 57px;
    line-height: 64px;
    font-family: Lato-Black;
}

h2, .h2 {
    font-size: 45px;
    line-height: 52px;
    font-family: Lato-Black;
}

h3, .h3 {
    font-size: 36px;
    line-height: 44px;
    font-family: Lato-Black;
}

h4, .h4 {
    font-size: 32px;
    line-height: 40px;
    font-family: Lato-Black;
}

h5, .h5 {
    font-size: 28px;
    line-height: 36px;
    font-family: Lato-Black;
}

h6, .h6 {
    font-size: 24px;
    line-height: 32px;
    font-family: Lato-Black;
}
.h7 {
    font-size: 22px;
    line-height: 28px;
    font-family: Lato-Black;
}
.h8 {
    font-size: 20px;
    line-height: 25px;
    font-family: Lato-Black;
}

p,
.p {
    font-size: 16px;
    line-height: 24px;
    font-family: "Lato-Regular", serif;
    margin: 0;
}

small,
.small {
    font-size: 11px;
    line-height: 16px;
    font-family: "Lato-Regular", serif;
}

/* text color */
.text-primary {
    color: var(--primary) !important;
}

.text-primary-bold {
    color: var(--primary-bold) !important;
}

.text-primary-semibold {
    color: var(--primary-semibold) !important;
}

.text-primary-bold {
    color: var(--primary-bold) !important;
}

.text-primary-light {
    color: var(--primary-light) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}

.text-secondary-medium {
    color: var(--secondary-medium) !important;
}

.text-secondary-medium-2 {
    color: var(--secondary-medium-2) !important;
}

.text-secondary-light {
    color: var(--secondary-light) !important;
}

.text-secondary-xlight {
    color: var(--secondary-xlight) !important;
}

.text-secondary-bold {
    color: var(--secondary-bold) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.text-blue {
    color: var(--blue) !important;
}

.text-orange {
    color: var(--orange) !important;
}

.text-success {
    color: var(--success) !important;
}

.font-normal {
    font-family: Lato-Regular;
}

.font-bold {
    font-family: Lato-Bold;
}

.font-extrabold {
    font-family: Lato-Black;
}

.text-18 {
    font-size: 18px;
}

.text-17 {
    font-size: 17px;
}

.text-15 {
    font-size: 15px;
}
.text-14 {
    font-size: 14px;
}
.text-13 {
    font-size: 13px;
}
.text-12 {
    font-size: 12px;
}
.text-11 {
    font-size: 11px;
}

.text-10 {
    font-size: 10px;
}

.text-9 {
    font-size: 9px;
}
/* background colors */
.bg-primary {
    background-color: var(--primary) !important;
}

.bg-primary-bold {
    background-color: var(--primary-bold) !important;
}

.bg-primary-semibold {
    background-color: var(--primary-semibold) !important;
}

.bg-primary-medium {
    background-color: var(--primary-medium) !important;
}

.bg-primary-light {
    background-color: var(--primary-light) !important;
}

.bg-primary-xlight {
    background-color: var(--primary-xlight) !important;
}

.bg-secondary {
    background-color: var(--secondary) !important;
}


.bg-primary-medium {
    background-color: var(--primary-medium) !important;
}

.bg-primary-bold {
    background-color: var(--primary-bold) !important;
}

.bg-primary-semibold {
    background-color: var(--primary-semibold) !important;
}

.bg-white {
    background-color: var(--white) !important;
}

.bg-secondary{
    background-color: #110f24 !important;
}

.bg-secondary-light {
    background-color: var(--secondary-light);
}
.bg-secondary-light2 {
    background: var(--secondary-light);
    border-radius: 70px ;
}

.bg-primary-xlight {
    background-color: var(--primary-xlight) !important;
    border-radius: 70px ;
    
}

.bg-primary-xlight-2 {
    background-color: var(--primary-xlight) !important;
}

.bg-secondary-xlight {
    background-color: var(--secondary-xlight);
}

.bg-secondary-xxlight {
    background: var(--secondary-xxlight);
    border-radius: 70px ;
}

.bg-secondary-xxlight-2 {
    background: var(--secondary-xxlight) !important;
}

.bg-secondary-xxlight {
    background: var(--secondary-xxlight);
    border-radius: 70px ;
}

.bg-secondary-xxlight-2 {
    background: var(--secondary-xxlight) !important;
}

.bg-danger {
    background-color: var(--danger) !important;
}

.bg-success {
    background-color: var(--success) !important;
}

.bg-orange {
    background-color: var(--orange) !important;
}

.bg-secondary-grad {
    background-image: linear-gradient(
        to bottom,
        var(--secondary-xxlight),
        var(--secondary-light)
    );
}

/* border  */ 
.border-secondary-medium-2 {
    border-color: var(--secondary-medium-2) !important;
}

.border-secondary-light {
    border-color: var(--secondary-light) !important;
}

.border-secondary-xlight {
    border-color: var(--secondary-xlight) !important;
}

.border-secondary-xxlight {
    border-color: var(--secondary-xxlight) !important;
}

.border-primary-semibold {
    border-color: var(--primary-semibold) !important;
}


/* links and btn */
a {
    color: var(--primary);
}

a:hover {
    color: var(--primary-medium);
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--secondary-light);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

input[type="checkbox"]:checked {
    background-color: var(--secondary) !important;
    background-image: url('/admin_assets/icons/check.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 2px solid var(--secondary);
}

input[type="checkbox"]:checked::before {
    content: '\2713';
    font-size: 16px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn {
    padding: 13px 15px;
    text-decoration: none;
    width: fit-content;
    height: fit-content;
    text-align: center;
    letter-spacing: 0.7px;
    font-family: Lato-Bold;
    white-space: nowrap;
    border-radius: 6.5px;
    line-height: 21px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    color: var(--secondary);
    background-color: var(--primary);
    border-color: var(--primary);
    box-shadow: none;
    transition: all 0.5s;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary.active {
    color: var(--secondary) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: 1px 1px 20px var(--primary-medium) !important;
}

.btn-primary:disabled, .btn-primary:disabled:hover {
    color: var(--secondary-medium-2) !important;
    background-color: var(--primary-light) !important;
    border-color: var(--primary-light) !important;
    box-shadow: none;
    cursor: progress !important;
}

.btn-secondary {
    color: var(--white);
    background-color: var(--secondary);
    border-color: var(--secondary);
    box-shadow: none;
    transition: all 0.5s;
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary.active {
    color: var(--white) !important;
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    opacity: 0.7 !important;
}

.btn-danger {
    color: var(--white);
    background-color: var(--danger);
    border-color: var(--danger);
    box-shadow: none;
    transition: all 0.5s;
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger.active {
    color: var(--white) !important;
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    opacity: 0.7 !important;
}

.btn-outlined {
    color: var(--white);
    background-color: transparent;
    border: 1px solid var(--primary);
    box-shadow: none;
    transition: all 0.5s;
}

.btn-outlined:hover,
.btn-outlined:active,
.btn-outlined.active {
    color: var(--white) !important;
    background-color: transparent !important;
    border-color: var(--primary) !important;
}

.btn-outlined-secondary {
    color: var(--secondary);
    background-color: transparent;
    border: 1px solid var(--secondary);
    box-shadow: none;
    transition: all 0.5s;
}

.btn-outlined-secondary:hover,
.btn-outlined-secondary:active,
.btn-outlined-secondary.active {
    color: var(--primary);
    background-color: transparent;
    border-color: var(--secondary);
}

.btn-secondary-grad {
    background-image: linear-gradient(
        to bottom,
        var(--secondary-xxlight),
        var(--secondary-light)
    );
    border: 1px solid var(--secondary-light);
    color: var(--secondary-medium);
    font-family: Lato-Bold;
}

.btn-secondary-grad:hover,
.btn-secondary-grad:active,
.btn-secondary-grad.active {
    box-shadow: 1px 1px 20px var(--secondary-light);
} 


/* header styles  */
.header {
    background-color: var(--primary-medium);
}
.header .nav-link {
    color: var(--secondary) !important;
    font-family: Lato-Bold;
    white-space: nowrap;
}

.header .navbar-toggler {
    color: var(--secondary) !important;
    border: 0;
}

.header .navbar-toggler:hover,
.header .navbar-toggler:active,
.header .navbar-toggler:focus {
    color: var(--secondary) !important;
    border: 0;
    box-shadow: none;
}

.footer {
    background-color: var(--secondary);
    color: white;
    padding: 50px;
}

.footer .nav-link {
    color: var(--secondary-medium);
    margin: 10px 0;
}

.border-secondary{
    border-color: #110f24 !important;
}

.z-1{
    z-index: 1 !important;
}

.z-2{
    z-index: 2 !important;
}

.rounded-all-3{
    border-radius: 30px  !important;
}
.hr{
    color: var(--primary) !important;
    height: 2px !important;
    opacity: 1;
}
.text-mute{
    color: #747980 !important;
}

/* #Hdb{

} */

/* dropdown */

/* .dropdown {
    display: inline-block !important;
    position: relative;
  }
  
  .button1{
    border:none !important;
    border-radius:5px;
    padding:15px 30px;
    font-size:18px;
    background-color: transparent;
    cursor:pointer;
  }
  
  .button1:hover{
    background-color:#ddd !important;
  }
  
  .dropdown-options {
    display: none !important;
    position: absolute;
    overflow: auto;
    background-color:#fff;
    border-radius:5px;
    box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.4);
  }
  
  .dropdown:hover .dropdown-options {
    display: block !important;
  }
  
  .dropdown-options a {
    display: block !important;
    color: #000000;
    padding: 5px;
    text-decoration: none;
    padding:10px 20px;
  }
  
  .dropdown-options a:hover {
    color: #0a0a23 !important;
    background-color: var(--primary);
    border-radius:5px;
  } */