@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Forum&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Satisfy&display=swap');

:root {
   --bg-col: #fbf7ea;
   --txt-col1: #0C0908;
   --txt-col2: #3d2e29;
   --txt-col3: #8b2f2d;
   --txt-col4: #174B63;
   --col1: #d93030;
   --col2: #ca8f53;
   --col3: #55e659;
   --col4: #7fd5fd;
   --col5: #f8859f;
   --col6: #fdcf84;
   --col7: #faea5f;
   --heading1: "Forum";
   --heading2: "Josefin Sans";
   --heading3: "Satisfy";
   --def-font: "DM Sans";
   --sm-wd: 475px;
   --md-wd: 648px;
   --lg-wd: 768px;
   --xl-wd: 1024px;
   --2xl-wd: 1200px;
   --3xl-wd: 1536px;
}

* {
   margin: 0;
   padding: 0;
   color: var(--txt-col1);
   text-decoration: none;
   font-family: var(--def-font);
   box-sizing: border-box;
   scroll-behavior: smooth;
}

a {
   color: var(--txt-col1);
}

body {
   background-color: var(--bg-col);
   width: 100vw;
}

::-webkit-scrollbar {
   width: 3px;
   height: 3px;
}

::-webkit-scrollbar-track {
   background: var(--bg-col);
   border-radius: 50px;
}

::-webkit-scrollbar-thumb {
   background: var(--txt-col2);
   border-radius: 50px;
}

::-webkit-scrollbar-thumb:hover {
   background: var(--txt-col3);
}

::selection {
   background-color: var(--col6);
   color: var(--col1);
}

.sec-header {
   width: 100%;
   text-transform: uppercase;
   text-align: center;
   font-size: 2rem;
   color: var(--txt-col3);
   padding: 1.35rem 0 0.8rem 0;
   font-family: var(--heading2);
}

.sec-subheader {
   width: 100%;
   text-align: center;
   font-size: 1.5rem;
   font-weight: 500;
   color: var(--txt-col3);
   padding: 0 0 1.35rem 0;
   font-family: var(--heading3);
}

.prev,
.next {
   position: absolute;
   border: none;
   background: transparent;
   outline: none;
   font-size: 2rem;
   padding: 0.5vw 1.5vw;
   color: #fff;
   transition: all ease 0.5s;
   cursor: pointer;
   display: none;
}

.prev:hover *,
.next:hover * {
   background-color: rgba(0, 0, 0, 0.483);
   color: #fff;
   border-radius: 20px;
}

.next {
   right: 0.5rem;
}

.prev {
   left: 0.5rem;
}

.sliding-div-container {
   height: 100%;
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   overflow: hidden;
}

.sliding-div-container .sliding-div {
   height: 100%;
   width: 100%;
   position: relative;
   transition: 1s;
   text-decoration: none;
   color: var(--txt-col1);
}

/* -------------------- NAVBAR -------------------- */
#navbar i {
   color: var(--txt-col2);
}

.side-menu {
   height: 100%;
   width: 75%;
   background: rgba(253, 207, 132, 0.85);
   border-radius: 16px;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(8.1px);
   -webkit-backdrop-filter: blur(8.1px);
   border: 1px solid rgba(253, 207, 132, 0.72);
   position: fixed;
   z-index: 10;
   display: flex;
   flex-direction: column;
   align-items: start;
   gap: 2.5rem;
   padding: 0.5rem;
   left: -100%;
   top: 0;
   transition: all ease 0.4s;
}

.side-menu a {
   text-decoration: none;
   border-bottom: 1px solid var(--txt-col2);
   width: 100%;
   padding-left: 1.5rem;
   padding-bottom: 0.5rem;
   font-weight: 700;
   color: var(--txt-col2);
   font-family: var(--heading1);
   font-size: 1.5rem;
}

.navsrch {
   display: none;
}

.cls-btn {
   position: absolute;
   top: 2.7rem;
   border: none;
   background-color: transparent;
   transform: translate(100px, -30px);
}

.cls-btn i {
   font-size: 2.5rem;
}

.userprof {
   margin-top: 3rem;
   width: 100%;
   display: flex;
   align-items: center;
   flex-direction: column;

   * {
      font-family: var(--heading3);
      font-size: 2.3rem;
   }
}

#header {
   position: fixed;
   width: 100%;
   display: flex;
   align-items: center;
   flex-direction: column;
   z-index: 9;
   top: 0;
   overflow: hidden;
   transition: all ease 0.4s;
}

.top {
   background: rgba(253, 207, 132, 0.85);
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(8.1px);
   -webkit-backdrop-filter: blur(8.1px);
   border: 1px solid rgba(253, 207, 132, 0.72);
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-around;
   padding: 0 0.5rem;
}

.top i {
   font-size: 2.2rem;
   color: var(--txt-col2);
}

.left,
.right {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1.2rem;
}

.middle {
   width: 40%;
}

.middle a {
   display: flex;
   align-items: center;
   justify-content: center;
}

.middle a img {
   height: 5rem;
   filter: drop-shadow(1px 2px 2px #3d2e29ba);
}


.bottom {
   background: rgba(202, 143, 83, 0.86);
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(6.4px);
   -webkit-backdrop-filter: blur(6.4px);
   border: 1px solid rgba(202, 143, 83, 0.97);
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.contacts {
   width: 100%;
   font-size: 1.2rem;
   padding: 0.2rem 0;
   display: flex;
   align-items: center;
   justify-content: space-evenly;
}

.contacts a i {
   padding-right: 0.3rem;
}

.search_items {
   width: 100%;
   height: 4rem;
   background: rgba(253, 207, 132, 0.623);
   border-radius: 16px;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(8.1px);
   -webkit-backdrop-filter: blur(8.1px);
   border: 1px solid rgba(253, 207, 132, 0.876);
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   padding: 0.6rem 1rem;
   position: fixed;
   z-index: 10;
   transition: all ease 0.1s;
   top: -300px;
}

.search_items form {
   width: 80%;
   display: flex;
   justify-content: space-around;
   align-items: center;
}

.search_items input {
   width: 80%;
   padding: 0.3rem 0.8rem;
   outline: none;
   border: none;
   border: 1px solid rgba(0, 0, 0, 0.705);
   border-radius: 20px;
}

.search_items input:focus {
   border-color: lightskyblue;
   box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.605);
}

.srh-btn i,
.cross i {
   font-size: 2rem;
   cursor: pointer;
}

.srh-btn,
.cross,
.menu {
   background: transparent;
   border: none;
   outline: none;
}

.nav-fill {
   height: 7rem;
}

.navs,
.navsrch {
   display: none;
}

/* -------------------- FOOTER -------------------- */
footer {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
   /* padding: 1.25rem 3.125rem 0.6rem 3.125rem; */
   padding: 1.2rem;
   margin-top: 2rem;
   width: 100%;
   z-index: 9;
   background: rgba(253, 207, 132, 0.85);
   border-radius: 5px 5px 0 0;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(8.1px);
   -webkit-backdrop-filter: blur(8.1px);
   border: 1px solid rgba(253, 207, 132, 0.72);
}

footer h4 {
   font-size: 1.3rem;
   font-family: var(--heading2);
   color: var(--txt-col1);
   margin-bottom: 0.5rem;
}

footer i {
   font-size: 1.3rem;
   color: var(--txt-col2);
   margin-right: 0.7rem;
}

footer a {
   font-weight: 600;
   text-decoration: none;
   color: var(--txt-col2);
   margin-bottom: 0.3rem;
   transition: ease 0.3s;
}

footer a:hover {
   color: var(--col2);
}

.foot-child {
   width: 100%;
   margin-bottom: 0.6rem;
}

#foot-logo {
   display: flex;
   justify-content: center;
   align-items: center;
}

.oth {
   width: 60%;
}

#foot-logo img {
   width: 7rem;
}


.foot-child:nth-child(1) {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-direction: row-reverse;
}

.foot-child:nth-child(3) {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

#follow-us {
   margin-top: 0.7rem;
}

.foot-link-contnr {
   display: flex;
   flex-direction: column;
}

.foot-add-contnr iframe {
   width: 100%;
   height: 10rem;
   border-radius: 5px;
   margin-bottom: 0.5rem;
}

.we-accept {
   display: flex;
   justify-content: start;
   align-items: flex-start;
   flex-wrap: wrap;

   h4 {
      width: 100%;
   }
}

.pay-card {
   width: 5rem;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   margin-bottom: 0.4rem;

   p {
      padding-top: 0.2rem;
      font-size: 0.4rem;
      font-weight: 400;
      text-align: center;
      text-wrap: wrap;
   }
}

#contacts {
   span {
      font-weight: 700;
   }
}

.oth-info {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

#copy-right {
   display: block;
   text-align: center;
   padding: 0;
   margin: 1rem 0 0 0;
   font-weight: 700;
   color: var(--txt-col2);

   * {
      color: var(--txt-col2);
   }
}

#credit {
   font-weight: 500;
   transition: 0.3s;

   a {
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--txt-col3);
      font-family: var(--heading2);
   }
}


/* --------------------- BACK TO TOP --------------------- */
.Btn {
   width: 45px;
   height: 45px;
   background: linear-gradient(var(--col3), var(--col4));
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   cursor: pointer;
   position: fixed;
   bottom: 2rem;
   right: 2rem;
   /* border: 0.1px solid var(--txt-col3); */
   border: none;
}

.arrow path {
   fill: white;
}

.text {
   font-size: 0.7em;
   width: 100px;
   position: absolute;
   color: var(--txt-col2);
   display: flex;
   align-items: center;
   justify-content: center;
   bottom: -18px;
   opacity: 0;
   transition-duration: .7s;
}

.Btn:hover .text {
   opacity: 1;
   transition-duration: .7s;
}

.Btn:hover .arrow {
   animation: slide-in-bottom .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes slideIn {
   from {
      right: -350px;
      /* Start off the screen */
      opacity: 0;
   }

   to {
      right: 1.5rem;
      /* End position */
      opacity: 1;
   }
}

@keyframes slideOut {
   from {
      right: 1.5rem;
      /* Start from the set position */
      opacity: 1;
   }

   to {
      right: -350px;
      /* End off the screen */
      opacity: 0;
   }
}

.msg-display {
   position: fixed;
   top: 9rem;
   right: 1.5rem;
   z-index: 100;
   width: 320px;
   padding: 12px;
   display: none;
   align-items: center;
   justify-content: start;
   background: #509AF8;
   border-radius: 8px;
   box-shadow: 0px 0px 5px -3px #111;
   opacity: 0;
}

.msg-display.slide-in {
   display: flex;
   animation: slideIn 0.5s forwards;
}

.msg-display.slide-out {
   animation: slideOut 0.5s forwards;
}

.msg-display__icon {
   width: 20px;
   height: 20px;
   transform: translateY(-2px);
   margin-right: 8px;
}

.msg-display__icon path {
   fill: #fff;
}

.msg-display__title {
   font-weight: 500;
   font-size: 14px;
   color: #fff;
}

.msg-display__close {
   width: 20px;
   height: 20px;
   cursor: pointer;
   margin-left: auto;
}

.msg-display__close path {
   fill: #fff;
}

/* Confirm Card */
.confirm-card {
   width: 300px;
   height: fit-content;
   background: rgb(255, 255, 255);
   border-radius: 20px;
   display: none;
   /* display: flex; */
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 20px;
   padding: 1.2rem;
   box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.068);
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
}

.confirm-card-content {
   width: 100%;
   height: fit-content;
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.confirm-card-heading {
   font-size: 20px;
   font-weight: 700;
   color: rgb(27, 27, 27);
}

.confirm-card-description {
   font-weight: 200;
   font-size: 0.9rem;
   color: rgb(59, 59, 59);
}

.confirm-card-button-wrapper {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
}

.confirm-card-button {
   width: 50%;
   height: 35px;
   border-radius: 10px;
   border: none;
   cursor: pointer;
   font-weight: 600;
}

.primary {
   background-color: rgb(255, 114, 109);
   color: white;
}

.primary:hover {
   background-color: rgb(255, 73, 66);
}

.secondary {
   background-color: #ddd;
}

.secondary:hover {
   background-color: rgb(197, 197, 197);
}

.exit-button {
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   background-color: transparent;
   position: absolute;
   top: 20px;
   right: 20px;
   cursor: pointer;
}


@keyframes slide-in-bottom {
   0% {
      transform: translateY(10px);
      opacity: 0;
   }

   100% {
      transform: translateY(0);
      opacity: 1;
   }
}

@media screen and (min-width: 768px) {

   /* FOR TABLET*/
   footer {
      padding: 1.6rem 1.6rem 0.5rem 1.6rem;
   }

   .foot-add-contnr {
      display: flex;
      justify-content: space-between;
      align-items: center;

      iframe {
         width: 48%;
      }
   }

   .oth {
      width: 70%;
      display: flex;
      justify-content: center;
      align-items: center;
   }

   #foot-logo {
      width: 30%;
      display: flex;
      justify-content: center;
      align-items: center;
   }
}

@media screen and (min-width: 1200px) {

   /* FOR NORMAL LAPTOP*/
   .left {
      display: none;
   }

   .side-menu {
      display: none;
   }

   #header {
      margin: 0.5rem;
      width: 98.8%;
      border-radius: 8px;
   }

   .top {
      justify-content: space-between;
      padding: 0 1.3rem;

      i {
         font-size: 1.7rem;
      }
   }

   .middle {
      width: auto;
   }

   .navs {
      width: 40%;
      display: flex;
      align-items: center;
      justify-content: space-between;
   }

   .navs a {
      font-size: 1.3rem;
      transition: all ease 0.2s;
      font-family: var(--heading1);
      font-weight: 600;
      color: var(--txt-col2);
   }

   .navs a:hover {
      letter-spacing: 0.07rem;
      transform: translateY(-2px);
   }

   .navsrch {
      display: flex;
      align-items: center;
      justify-content: center;
   }

   .navsrch button {
      outline: none;
      border: none;
      background-color: transparent;
   }

   .navsrch input::placeholder {
      color: var(--col2);
      font-size: .9rem;
   }

   .navsrch input {
      outline: none;
      padding: 0.1rem 0.3rem;
      border: 0;
      width: 10rem;
      margin-right: 1rem;
      background-color: transparent;
      border-bottom: 1px solid var(--txt-col2);
      transition: 0.3s;
   }

   .navsrch input:focus {
      width: 11rem;
   }

   .navsrch i {
      font-size: 1.3rem;
   }

   .nav-fill {
      height: 8rem;
   }

   footer {
      padding: 1.25rem 2.125rem 0.6rem 2.125rem;
      flex-direction: row;
   }

   .foot-child {
      width: 33%;
   }

   .foot-child:nth-child(1) {
      flex-direction: column;
      align-items: flex-start;
   }

   .oth {
      width: 100%;
      align-items: flex-start;
      flex-direction: column;
   }

   #foot-logo {
      img {
         width: 5rem;
      }
   }

   .foot-add-contnr {
      align-items: start;
      flex-direction: column;

      iframe {
         width: 85%;
      }
   }

   .foot-child:nth-child(3) {
      display: flex;
      align-content: flex-start;
      flex-direction: column;
   }

   .we-accept {
      margin-bottom: 0.5rem;
   }

   .pay-card {
      width: 4rem;
      margin: 0.1rem;
   }

   #credit a:hover {
      color: var(--txt-col4);
   }
}

@media screen and (min-width: 1536px) {
   /* FOR EXTRA LARGE LAPTOP*/
}