*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
section{
    padding: 50px 0;
}
body{
   min-height:100vh;
    background: linear-gradient(
        135deg,
        #FFD08A 0%,
        #4A6FA5 20%,
        #FFB85C 45%,
        #365C8D 70%,
        #FF9E45 100%
    );
}
/* start navbar */
.navbar{
    background: rgba(30, 58, 95, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    text-transform: capitalize;
    font-style: italic;
}
.navbar-brand{
    color: #2c4668;
    font-size: 27px;
    font-weight: 700;
    transition: .3s;
}
.navbar-brand:hover{
    color: #a5561a;
}
.nav-link{
    color: white;
    font-size: 19px;
    font-weight: 500;
    margin-left: 20px;
    position: relative;
    transition: 0.3s;
}
.nav-link:hover,
.nav-link.active{
    color: #FFB350 !important;
}
.nav-link::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background: #FFB350;
    transition: .3s;
}
.nav-link.active::after{
    width: 100%;
}
/* end navbar */

/* start cards */
.card{
    border-radius:20px !important;
    transition:.4s;
}
.card:hover{
    transform:translateY(-8px);
    box-shadow:0 12px 25px rgba(0,0,0,.2);
}
.card-img-top{
    height:220px;
    object-fit:cover;
}
.card-title{
    color:#274C77;
    font-weight:700;
    min-height:55px;
}
.recipe-image{
    width: 100%;
    max-height: 350px;
    object-fit: contain;
    margin-bottom: 30px;
    border-radius: 18px;
    background: #ffefdb;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}
.btn-warning{
    background:#CB691E;
    color:white;
    font-weight:600;
}
.btn-warning:hover{
    background:#274C77;
    color:white;
}
/* end cards */

/* start modal */
.modal-content{
    background: #FFF8EF;
    border-radius: 20px;
}
.modal-body{
    background: #ffefdb;
    padding: 25px;
}
.modal-header{
    background: linear-gradient(
        135deg,
        #FFD08A 0%,
        #274366 20%,
        #FFB85C 45%,
        #274366 70%,
        #FF9E45 100%
    );
    color: white;
    justify-content: center;
    position: relative;
}
.btn-close{
    position: absolute;
    right: 20px;
    filter: invert(1);
}
.modal-body strong,
.modal-body h4{
    color:#274366;
}
.modal-body p{
    color:#5d5d5d;
    font-size:16px;
}
.modal-body ul{
    list-style:none;
    margin-right:25px ;
}
.modal-body li{
    background:#fff;
    margin-bottom:10px;
    padding:10px 15px;
    border-radius:10px;
    border-left:3px solid #CB691E;
    color:#274366;
    font-weight: 500;
}
.modal-body h4{
    color:#274366;
    font-size:26px;
    font-weight:700;
    margin-bottom:18px;
}
.modal-body span{
    color: #171717;
    font-weight: 500;
    font-size: 20px;
}
/* end modal */

/* start loading */
.loader {
  --color-1: white;
  --color-2: #05144ab6;
  --size: 1px;
  display: block;
  position: relative;
  height: calc(12 * var(--size));
  width: 80%;
  border: calc(1 * var(--size)) solid var(--color-1);
  border-radius: calc(10 * var(--size));
  overflow: hidden;
}
.loader::after {
  content: '';
  width: 40%;
  height: 100%;
  background: var(--color-2);
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  animation: animloader 2s linear infinite;
}
@keyframes animloader {
  0% {
    left: 0;
    transform: translateX(-100%);
  }
  100% {
    left: 100%;
    transform: translateX(0%);
  }
}
#loading{
    height: 100vh;
    background-color: rgba(128, 128, 128, 0.425);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
/* end loading */