@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wdth,wght@0,75..100,400..700;1,75..100,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

/* color pallete and styles */
:root{

    /* colors */
    --primary-100 : #C6914F;
    --primary-hover-100 : #b38042;
    --primary-5 : #FDFBF4;
    --primary-50 : #FEEAB9;
    --secondary-100 : #70502B;
    --secondary-50 : #E1D9CC;
    --pink-100 : #ED2B70;
    --pink-90 : #ED2B70de;
    --text-primary : #212529;
    --text-primary-75: #212529BF;
    --text-secondary : #585A5C;
    --black-5 : #F7F7F7;
    --bg-color: #FFC1304D;
    --footer-color: #F3FAFF;

    /* font family */
    --font-1 : "Playfair Display", serif;
    --font-2 : "Instrument Sans", sans-serif;

    /* font weights */
    --light-font : 300;
    --regular-font : 400;
    --medium-font : 500;
    --semibold-font : 600;
    --bold-font : 700;

    /* shadow styles */
    --hover-shadow : 2px 2px 10px var(--black-25);
    --hover-shadow-2 : 2px 2px 20px rgba(0, 0, 0, 0.1);
    --hover-shadow-4 : 0px 0px 30px rgba(0, 0, 0, 0.1);
    --diffused-shadow : 0px 0px 20px rgba(0, 0, 0, 0.15);
    --diffused-shadow-light : 0px 5px 5px rgba(0, 0, 0, 0.1);

    /* stroke */
    --primary-stroke : 1.5px solid var(--primary-100);

}

body{
    font-family: var(--font-2);
    top: 0!important;
}

.heading-font{
    font-family: var(--font-1);
}


/* Fill Styling */
.primary-color{
    color: var(--primary-100)!important;
  }
  .secondary-color{
    color: var(--secondary-100)!important;
  }
  .secondary-50-color{
    color: var(--black-50)!important;
  }
  .black-color{
    color: black!important;
  }
  .text-primary-color{
    color: var(--text-primary)!important;
  }
  .text-secondary-color{
    color: var(--text-secondary)!important;
  }


  /* Background Styling */
  .primary-bg{
    background-color: var(--primary-100);
  }
  .primary-50-bg{
    background-color: var(--primary-50);
  }
  .secondary-bg{
    background-color: var(--secondary-100);
  }
  .primary-5-bg{
    background-color: var(--primary-5);
  }
  .black-5-bg{
    background-color: var(--black-5)!important;
  }
  .white-bg{
    background-color: white;
  }
  .black-bg{
    background-color: black;
  }


  /* Border Radius Styling */
.br-0{
    border-radius: 0px;
  }
  .br-5{
    border-radius: 5px;
  }
  .br-10{
    border-radius: 10px;
  }
  .br-100{
    border-radius: 100px;
  }

  
  /* Font Weight Styling */
.font-weight-regular{
    font-weight: 300;
  }
.font-weight-medium{
    font-weight: 400;
  }
  .font-weight-semibold{
    font-weight: 500;
  }
  .font-weight-bold{
    font-weight: 600!important;
  }
  .font-weight-extrabold{
    font-weight: 700;
  }


  /* Font size Styling */
.font-size-xs{
    font-size: 0.8rem;
  }
  .font-size-sm{
    font-size: 0.9rem;
  }
  .font-size-regular{
    font-size: 1rem;
  }
  .font-size-md{
    font-size: 1.1rem;
  }
  .font-size-lg{
    font-size: 1.15rem;
  }
  .font-size-xl{
    font-size: 1.25rem;
  }
  .font-size-xxl{
    font-size: 1.5rem;
  }
  .font-size-xxxl{
    font-size: 2rem;
  }

  /* Font line height Styling */
  .line-height-small{
    line-height: 1rem;
  }
  
  .line-height-regular{
    line-height: 1.35rem;
  }

  .letter-spacing-lg{
    letter-spacing: 0.15rem;
  }

    
  
  /* Image Styling */
  .img-responsive{
    width: 20%;
  }
  
  .img-responsive-medium{
    width: 40%;
  }
  .img-responsive-large{
    width: 60%;
  }
  @media screen and (max-width: 991px){
    .img-responsive{
      width: 90%;
    }
    .img-responsive-medium{
      width: 75%;
    }
    .img-responsive-large{
      width: 75%;
    }
    
  }
  
  
/* Button Styling */

.btn-primary-fill{
  color: var(--text-primary);
  background-color: var(--primary-100);
  border-radius: 5px;
  border: 1px solid var(--primary-100);
  transition: all 300ms ease-in-out!important;
}

.btn-primary-fill:hover{
  background-color: var(--primary-hover-100);
  border: 1px solid var(--primary-hover-100);
}

.btn-pink-fill{
  color: white;
  background-color: var(--pink-100);
  border-radius: 5px;
  border: 1px solid var(--pink-100);
  transition: all 300ms ease-in-out!important;
}

.btn-pink-fill:hover{
  background-color: #ca255f;
  border: 1px solid #ca255f;
}


.btn-black-fill{
  color: white;
  background-color: black;
  border-radius: 5px;
  border: 1px solid black;
  transition: all 300ms ease-in-out!important;
}

.btn-black-fill:hover{
  border: 1px solid var(--text-primary);
}


.btn-black-outline{
  color: black;
  background: none;
  border-radius: 5px;
  border: 1px solid black;
  transition: all 300ms ease-in-out!important;
}

.btn-black-outline:hover{
  color: white;
  background: black;
  border: 1px solid black;
}



/* Padding and Margin Styling */


.pt-25{
    padding-top: 0.75rem;
  }
  .pb-25{
    padding-bottom: 0.75rem;
  }
  .ps-25{
    padding-left: 0.75rem;
  }
  .pe-25{
    padding-right: 0.75rem;
  }
  
  .p-6{
    padding: 4rem;
  }
  .pt-6{
    padding-top: 4rem;
  }
  .pb-6{
    padding-bottom: 4rem;
  }
  .ps-6{
    padding-left: 4rem;
  }
  .pe-6{
    padding-right: 4rem;
  }
  
  .p-7{
    padding: 5rem;
  }
  .pt-7{
    padding-top: 5rem;
  }
  .pb-7{
    padding-bottom: 5rem;
  }
  .ps-7{
    padding-left: 5rem;
  }
  .pe-7{
    padding-right: 5rem;
  }
  
  .p-8{
    padding: 6rem;
  }
  .pt-8{
    padding-top: 6rem;
  }
  .pb-8{
    padding-bottom: 6rem;
  }
  .ps-8{
    padding-left: 6rem;
  }
  .pe-8{
    padding-right: 6rem;
  }
  
    
  @media (max-width: 768px) {
    .pt-8{
      padding-top: 4rem;
    }
    .pb-8{
      padding-bottom: 4rem;
    }
  }
  
  
  
  .mt-25{
    margin-top: 0.75rem;
  }
  .mb-25{
    margin-bottom: 0.75rem;
  }
  .ms-25{
    margin-left: 0.75rem;
  }
  .me-25{
    margin-right: 0.75rem;
  }
  
  
  .m-45{
    margin: 2rem;
  }
  .mt-45{
    margin-top: 2rem;
  }
  .mb-45{
    margin-bottom: 2rem;
  }
  .ms-45{
    margin-left: 2rem;
  }
  .me-45{
    margin-right: 2rem;
  }
  
  .m-6{
    margin: 4rem;
  }
  .mt-6{
    margin-top: 4rem;
  }
  .mb-6{
    margin-bottom: 4rem;
  }
  .ms-6{
    margin-left: 4rem;
  }
  .me-6{
    margin-right: 4rem;
  }
  
  .m-7{
    margin: 5rem;
  }
  .mt-7{
    margin-top: 5rem;
  }
  .mb-7{
    margin-bottom: 5rem;
  }
  .ms-7{
    margin-left: 5rem;
  }
  .me-7{
    margin-right: 5rem;
  }
  
  .m-8{
    margin: 6rem;
  }
  .mt-8{
    margin-top: 6rem;
  }
  .mb-8{
    margin-bottom: 6rem;
  }
  .ms-8{
    margin-left: 6rem;
  }
  .me-8{
    margin-right: 6rem;
  }
  
  
  .mx--2{
    margin-left: -8px;
    margin-right: -8px;
  }