/* font family */
@import url("https://fonts.googleapis.com/css2?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&display=swap");

/* global css */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Custom Font */
@font-face {
  font-family: "Almarena Neue";
  src: url("../font/AlmarenaNeueDisplay-Regular.otf") format("opentype");
  font-weight: normal;
}

@font-face {
  font-family: "Almarena Neue";
  src: url("../font/AlmarenaNeueDisplay-Medium.otf") format("opentype");
  font-weight: 500;
}

/* Global Variables */
:root {
  /* font */
  --primary-font: "Almarena Neue", sans-serif;

  /* text color */
  --primary-text-color: #ffffff;
  --secndary-text-color-dark: #181514;
  --secndary-text-color-gray: #6a6a6a;
  --action-color: #fdf3ec;

  /* bg color */
  --primary-bg-color: #fdf3ec;
  --secndary-bg-color: #6b0606;
}

/* global set for 1 rem = 10px */
html {
  font-size: 62.5%;
}

/* global bg and overflow */
html,
body {
  width: 100%;
  overflow-x: hidden;
  background: var(--primary-bg-color);
}

/* global a and li */
a,
li {
  text-decoration: none;
  color: inherit;
  list-style: none;
}

/* global wraper */
#wrap {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
}

/* global button style */
button {
  background: none;
  outline: none;
  border: none;
  cursor: pointer;
  user-select: none;
}

/* default button for website */
button.advance {
  background: var(--url) center center / contain no-repeat;
  border-radius: 30px;
  height: 58px;
  font-family: var(--primary-font);
  font-size: 18px;
  padding: 0px 24px;
  position: relative;
  width: var(--width);
  text-align: start;
}

button.advance::after {
  content: "\f061";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 20px;

  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%) rotate(-45deg);
}

/* =============================
-------- header section --------
================================ */
header {
  width: 100%;
  position: fixed;
  padding: 10px 20px;
  z-index: 99;
}

header.active {
  background: #fff;
}

header .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .content .left-site {
  width: 85%;
}

header .content .left-site img {
  width: clamp(125px, 50%, 377px);
  display: none;
}

header .content .left-site video {
  width: clamp(125px, 50%, 250px);
  border-radius: 10px;
}

header.active .content .left-site img {
  width: clamp(80px, 70%, 250px);
}

header .content .left-site img.logo-curant,
header.active .content .left-site img.logo-update {
  display: block;
}

header.active .content .left-site img.logo-curant,
header .content .left-site img.logo-update {
  display: none;
}

header .content .right-site {
  width: 15%;
  display: flex;
  justify-content: end;
}

header .content .right-site img {
  width: clamp(40px, 100%, 83px);
}

header.active .content .right-site img {
  width: clamp(40px, 100%, 60px);
}

/* =============================================
-------- header drop down menu section ---------
================================================ */
header .drop-down-menu.active {
  height: 100vh;
  opacity: 1;
  pointer-events: all;
}

.drop-down-menu {
  width: 100%;
  background: #110d0d86;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  overflow: hidden;
  height: 0px;
  transition: 0.3s;
  pointer-events: none;
  backdrop-filter: blur(10px);
}

.drop-down-menu .top {
  background: var(--secndary-bg-color);
  padding: 20px 20px 40px 20px;
}

.drop-down-menu .top div:nth-child(1) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.drop-down-menu .top .logo {
  width: clamp(125px, 70%, 377px);
}

.drop-down-menu .top .menu-close-icons {
  width: clamp(40px, 10%, 83px);
  cursor: pointer;
}

.drop-down-menu .top ul {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
  gap: 20px;
  flex-wrap: wrap;
}

.drop-down-menu .top ul li {
  flex-grow: 1;
  height: 84px;
  font-size: clamp(20px, 3vw, 38px);
  font-family: var(--primary-font);
  font-weight: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--primary-text-color);
}

.drop-down-menu .top ul li a {
  position: relative;
}

.drop-down-menu .top ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0%;
  height: 2px;
  background: #fd9888;
  transition: 0.3s;
}

.drop-down-menu .top ul li a:hover::after {
  width: 100%;
}

.drop-down-menu .top ul li a.active::after {
  width: 100%;
}

.drop-down-menu .top ul li a.active {
  color: #fd9888;
}

@media screen and (max-width: 600px) {
  .drop-down-menu .top ul {
    flex-direction: column;
  }

  .drop-down-menu .top div:nth-child(2) ul li {
    width: 100%;
  }
}

/* =============================================
-------- footer ---------
================================================ */
footer {
  padding: 60px;
  background: rgba(107, 6, 6, 1);
}

footer .footer-top {
  display: flex;
  justify-content: space-between;
}

footer .footer-top .left {
  width: min(474px, 100%);
  padding-right: 47px;
  border-right: 1px solid rgba(137, 70, 64, 1);
}

footer .footer-top .left img {
  width: min(427px, 100%);
}

footer .footer-top .left p {
  font-size: clamp(14px, 2.2vw, 18px);
  width: min(427px, 100%);
  font-weight: 400;
  font-family: var(--primary-font);
  color: rgba(253, 243, 236, 1);
  line-height: 140%;
}

footer .footer-top form {
  margin-top: 47px;
  height: 54px;
  display: flex;
}

footer .footer-top form input {
  width: min(276px, 100%);
  height: 100%;
  background: rgba(114, 15, 15, 1);
  padding: 14px 20px;
  font-size: clamp(12px, 2vw, 16px);
  line-height: 120%;
  font-weight: 400;
  margin: 0;
  border-radius: 30px;
  margin-right: 10px;
  border: none;
  outline: none;
}

footer .footer-top form button {
  width: min(141px, 100%);
  height: 100%;
  padding: 14px 35px;
  font-size: clamp(14px, 2.2vw, 18px);
  border-radius: 30px;
  font-family: var(--primary-font);
  line-height: 120%;
  background: rgba(253, 243, 236, 1);
}

footer .footer-top .right {
  width: min(846px, 100%);
  padding-left: 47px;
}

footer .footer-top .right .right-top .footer-socialmedia {
  display: flex;
  align-items: start;
  flex-direction: column;
}

footer .footer-top .right .right-top p {
  font-size: clamp(14px, 2.4vw, 20px);
  font-family: var(--primary-font);
  color: rgba(253, 243, 236, 1);
  font-weight: 500;
  line-height: 140%;
}

footer .footer-top .right .right-top {
  display: flex;
  justify-content: center;
  align-items: center;
}

footer .footer-top .right .right-top .icons {
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 12px;
}

footer .footer-top .right .right-top .icons img {
  width: min(56px, 100%);
  width: calc(40px, 5vw, 56px);
  margin-top: 20px;
}

footer .footer-top .right .right-top button {
  padding: 0px 55px;
}

footer .footer-top .right .right-top button.advance::after {
  right: 15px;
}

footer .footer-top .right .right-menu {
  background: rgba(114, 15, 15, 1);
  padding: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 94px;
  border-radius: 20px;
}

footer .footer-top .right .right-menu .menu-1,
footer .footer-top .right .right-menu .menu-2 {
  width: min(142px, 100%);
}

footer .footer-top .right .right-menu .menu-3 {
  width: min(253px, 100%);
}

footer .footer-top .right .right-menu .menu-3 ul li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

footer .footer-top .right .right-menu h4 {
  font-size: clamp(20px, 2.4vw, 20px);
  font-family: var(--primary-font);
  color: rgba(253, 243, 236, 1);
  font-weight: 500;
  line-height: 140%;
}

footer .footer-top .right .right-menu hr {
  border: none;
  height: 1px;
  background-color: rgba(137, 70, 64, 1);
  margin: 10px 0px;
}

footer .footer-top .right .right-menu ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 10px;
}

footer .footer-top .right .right-menu ul li {
  font-size: clamp(14px, 2.2vw, 16px);
  font-family: var(--primary-font);
  color: rgba(253, 243, 236, 1);
  font-weight: 400;
  line-height: 140%;
}

footer .hr {
  margin: 40px 0px;
  height: 1px;
  background: rgba(137, 70, 64, 1);
  width: 100%;
}

footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 60px;
}

footer .footer-bottom p,
footer .footer-bottom ul li {
  font-size: clamp(14px, 2.2vw, 16px);
  font-family: var(--primary-font);
  color: rgba(253, 243, 236, 1);
  font-weight: 400;
  line-height: 120%;
}

footer .footer-bottom ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 23px;
}

@media screen and (max-width: 1260px) {
  footer .footer-top .right .right-menu {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  footer .footer-top .right .right-menu .menu-1,
  footer .footer-top .right .right-menu .menu-2 {
    width: min(100%, 100%);
  }

  footer .footer-top .right .right-menu .menu-3 {
    grid-column: 1 / 3;
    width: min(100%, 100%);
  }
}

@media screen and (max-width: 800px) {
  footer .footer-top {
    flex-direction: column;
  }

  footer .footer-top .left {
    width: min(100%, 100%);
    border-right: none;
    border-bottom: 1px solid rgba(137, 70, 64, 1);
    padding: 40px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  footer .footer-top .left p {
    text-align: center;
  }

  footer .footer-top .right {
    width: min(100%, 100%);
    padding: 40px 0px;
  }

  footer {
    padding: 30px;
  }
}

@media screen and (max-width: 1260px) {
  footer .footer-top .right .right-top {
    flex-direction: column;
    align-items: start;
    gap: 20px;
  }
}

@media screen and (max-width: 600px) {
  footer {
    padding: 20px;
  }

  footer .footer-top .right .right-menu {
    grid-template-columns: repeat(1, 1fr);
  }

  footer .footer-top .right .right-menu .menu-3 {
    grid-column: unset;
  }

  footer .footer-top .right .right-top {
    flex-direction: column;
    align-items: start;
    gap: 20px;
  }

  footer .footer-bottom p {
    text-align: center;
  }

  footer .footer-bottom {
    gap: 20px;
    flex-direction: column;
  }
}