@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Red+Rose:wght@300..700&display=swap');



/* ######################################################## Page CSS ##################################################### */



body{
    font-family: 'poppins', sans-serif, Arial, Helvetica;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Red Rose', cursive;
}
::selection {
    background-color: #C84228;
    color: #ffffff;  
}


/* ######################################################### Utility CSS ################################################## */

/* Background */
.primary-bg{
    background: #fff;
}
.secondary-bg{
    background: #C84228;
}
.tertiary-bg{
    background: #000000;
}
.fourth-bg{
    background: #F4F4F4;
}
.transparent-bg {
    background-color: transparent 
}
.footer-bg{
    background: #3D1212;
}


/* Buttons */

/* 1st Button (Home Page) */
.btn-primary-btn{
    background:#000000;
    color: #ffffff;
    border: #000000 1px solid;
}
.btn-primary-btn:hover{
    color:#000000;
    background:#ffffff;
    border: #000000 1px solid;
}

/* 2nd button */
.btn-secondary-btn{
    background:#C84228;
    color: #fff;
    border: #C84228 1px solid;
}
.btn-secondary-btn:hover{
    color:#C84228;
    background: transparent;
    border: #C84228 1px solid;
}

/* 2nd button Outline */
.btn-secondary-btn-outline{
    background:#fff;
    color: #C84228;
    border: #C84228 1px solid;
}
.btn-secondary-btn-outline:hover{
    color:#fff;
    background: #C84228;
    border: #C84228 1px solid;
}

/* 3rd button (Service Page) */
.btn-tertiary-btn{
    background:#ffffff;
    color: #000000;
    border: #ffffff 1px solid;
}
.btn-tertiary-btn:hover{
    color:#fff;
    background: transparent;
    border: #ffffff 1px solid;
}


/* text */
.primary-txt{
    color: black;
}
.secondary-txt{
    color: #C84228;
}
.tertiary-txt{
    color: #ffffff;
}
.fourth-txt{
    color: #3D3D3D;
}
.fifth-txt{
    color: #535353;
}


/* border */
.primary-border{
    border: 1px solid #000000;
}
.secondary-border{
    border: 1px solid #ffffff;
}
.tertiary-border{
    border: 1px solid #C84228;
}


/* Form Focus Ring */
.form-control:focus {
    outline: none;
    box-shadow: 0 0 0 3px #fec4b9; 
    border-color: #C84228;
}
.focus-ring:focus{
    outline: none;
    box-shadow: 0 0 0 3px #c9897d; 
    border-color: #C84228;
}

select.form-select:focus,
textarea.form-control:focus {
    outline: none;
    box-shadow: 0 0 0 3px #fec4b9;
    border-color: #C84228;
}
/* Apply brand-colored focus ring to <select> elements */
select.form-select:focus {
  outline: none;
  box-shadow: 0 0 0 3px #fec4b9;
  border-color: #C84228;
}



select.form-select option[value=""] {
  color: #888;
}


/* input field */
/* input.form-control {
    border-color: black;
} */

.custom-radio .form-check-input:checked {
    background-color: #C84228;
    border-color: #C84228;
}

.custom-radio .form-check-input:focus {
    box-shadow: 0 0 0 3px #fec4b9;
    border-color: #C84228;
}
.btn-close:focus {
  outline: none;
  box-shadow: 0 0 0 3px #fec4b9;
  border-radius: 50%; /* optional: make it feel softer */
}




/* Scroll bar  */

/* Scrollbar Track */
::-webkit-scrollbar {
    width: 6px; /* thinner scrollbar */
    height: 6px; /* for horizontal scrollbar */
}

/* Scrollbar Thumb (the draggable part) */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #C84228, #a7321d);
    border-radius: 10px;
}

/* Scrollbar Track Background */
::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 10px;
}

/* Scrollbar Corner (optional) */
::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox support */
* {
    scrollbar-width: thin; /* Options: auto | thin | none */
    scrollbar-color: #C84228 #f0f0f0;
}

/* Hide scrollbar in Firefox */
* {
  scrollbar-width: none; /* disables scrollbar */
  -ms-overflow-style: none; /* for IE and Edge */
}

/* Hide scrollbar for WebKit browsers */
::-webkit-scrollbar {
  display: none;
}









/*  */



@media (min-width: 768px) and (max-width: 820px) {
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  section, div, header, footer, main, aside {
    max-width: 100%;
    overflow-x: hidden;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  /* Fix for buttons or cards causing overflow */
  .btn, .card, .container, .wrapper {
    max-width: 100%;
    flex-wrap: wrap;
  }
}