@import url('./../assets/fonts/lato/fonts.css');
@import url('./button.css');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

.logo-wrap {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Outfit', sans-serif; /* Similar to the clean UI in the image */
  cursor: pointer;
}

/* The Graphic Icon */
.logo-icon {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.petal {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50% 50% 0 50%; /* Leaf/Petal shape */
  opacity: 0.8;
}

.p1 {
  background: #4ecdc4;
  transform: rotate(45deg);
  left: 2px;
  top: 2px;
}
.p2 {
  background: #ff6b6b;
  transform: rotate(135deg);
  right: 2px;
  top: 2px;
}
.p3 {
  background: #ffe66d;
  transform: rotate(-45deg);
  bottom: 2px;
}

/* The Typography */
.logo-text {
  font-size: 24px;
  letter-spacing: -0.5px;
}

.text-big {
  font-weight: 700;
  color: var(--primary-logo-color); /* Deep navy/charcoal from the reference */
}

.text-insight {
  font-weight: 400;
  color: var(--secondary-logo-color); /* Lighter grey for contrast */
}

/* Hover Animation */
.logo-wrap:hover .petal {
  transform: scale(1.1) rotate(20deg);
  transition: all 0.3s ease;
  opacity: 1;
}

:root {
  --primary-logo-color: #214468;
  --secondary-logo-color: #5d6d7e;
  --primary-font-color: #214468;
  --secondary-font-color: #4a6581;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Lato', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.container-fluid {
  /* background-image: url(./../assets/imgs/bg_1.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat; */
  color: var(--primary-font-color) !important;
}

header {
  /* height: 15vh;
  background-image: url(./../assets/imgs/bg_header.png), linear-gradient(to bottom, #cacfff, #cdd1fe);

  background-size:
    100% 100%,
    auto;
  background-position:
    center 20px,
    center; */
  height: 60px;
  background-repeat: no-repeat;
  background: linear-gradient(to bottom, #efeafd, #efeafd);
  background-position: center;

  /* The Fix */
  position: relative;
  z-index: 10;

  /* Your Shadow */
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px !important;
}
section {
  min-height: 600px;
  background-image: url(./../assets/imgs/bg_section.png);
  background-size: 100% auto;
  background-position: top;
  background-repeat: repeat-y;
}

footer {
  height: 40vh;
  background-image: url(./../assets/imgs/bg_footer.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

div.navbar-collapse {
  justify-content: flex-end;
}

nav.navbar {
  background: none !important;
}

.navbar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.navbar-nav li a {
  font-weight: 600 !important;
  color: var(--primary-font-color) !important;
}

.btn-menu {
  color: var(--primary-font-color);
  -webkit-text-stroke: 1px;
  font-size: 20px;
}

section .title-section > h1 {
  font-weight: 800;
}

section .title-section > label {
  padding: 12px 0;
  font-size: 18px;
  color: var(--secondary-font-color);
  word-spacing: 2px;
}

.subscribe-form {
  width: 550px;
  margin-top: 1.5rem;
}

.footer-section h3 {
  font-weight: 600;
}

input {
  font-family: 'Lato', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.footer-section-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

ul.social-icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: var(--primary-font-color);
}

ul.footer-menus {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-weight: 600;
  color: var(--primary-font-color);
}

ul.social-icons a,
ul.footer-menus a {
  text-decoration: none;
  color: var(--primary-font-color);
}

ul.social-icons a:hover,
ul.footer-menus a:hover {
  text-decoration: underline;
  color: var(--secondary-font-color);
}

div.content-section .card {
  width: calc(50% - 20px);
  max-width: 500px;
}

div.content-section .card .card-title {
  font-weight: 600;
  color: var(--primary-font-color);
}

div.content-section .card .card-text {
  color: var(--secondary-font-color);
}