@charset "UTF-8";

/* 
CUSTOM STYLE SHEET FOR FREE-MATRIMONY.COM
@DATE 9 FEB 2024
PUT THIS FILE AT END OF CSS STYLES DECLARATION IN HEADER.PHP
*/

/* ROOT FONT : START */
:root {
  /* WEB FONT ROBOTO FROM GOOGLE FONTS */
  --sp-font-sans-serif: "sp-roboto", system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --sp-body-font-family: var(--sp-font-sans-serif);
  /* WEB FONT ROBOTO FROM GOOGLE FONTS */
}
/* ROOT FONT : END */

/* ROOT COLORS : START */
:root {
  /* LIGHT - 200, BASE - 500 , DARK - 700 */
  --sp-white-rgb: 255, 255, 255;
  --sp-black-rgb: 0, 0, 0;
  --sp-primary: #712cf9;
  --sp-primary-rgb: 113, 44, 249;
  --sp-primary-light: #be9efc;
  --sp-primary-dark: #501dea;
  --sp-primary-complimentary: #91cc00;
  --sp-primary-complimentary-rgb: 145, 204, 0;
  --sp-primary-accent-burning-orange: #f9712c;
  --sp-primary-accent-greenish-cyan: #2cf9d8;
  --sp-primary-accent-purple-pink: #d82cf9;

  --sp-gradient: linear-gradient(
    rgba(var(--sp-primary-rgb), 1),
    rgba(var(--sp-primary-rgb), 0.95)
  );
}

/* ROOT COLORS : END */

/* LIGHT THEME : START */

:root,
[data-bs-theme="light"] {
  --sp-theme-primary-bg: var(--sp-primary);
  --sp-theme-text: var(--sp-black-rgb);
  --sp-theme-light-bg: rgba(var(--sp-primary-rgb), 0.09);
  --sp-theme-body-bg: rgba(var(--sp-primary-rgb), 0.03);
  --sp-theme-footer-bg: rgb(var(--sp-white-rgb));
  --sp-theme-sp-blur-load-bg: var(--sp-theme-body-bg);
}

/* LIGHT THEME : END */

/* DARK THEME : START */

[data-bs-theme="dark"] {
  color-scheme: dark;
  --sp-theme-primary-bg: var(--sp-primary-dark);
  --sp-theme-text: var(--sp-white-rgb);
  --sp-theme-light-bg: rgba(var(--sp-black-rgb), 0.12);
  --sp-theme-body-bg: rgb(40, 41, 42); /* FROM CHROME*/
  --sp-theme-footer-bg: rgb(32, 33, 37); /* FROM CHROME*/
  --sp-theme-sp-blur-load-bg: var(--sp-theme-body-bg);
}

/* DARK THEME : END */

/* OVERRIDING DEFAULT BOOTSTRAP VARIABLE ; START */
.dropdown-item.active,
.dropdown-item:active {
  color: #c6f68d;
  text-decoration: none;
  background-color: var(--sp-theme-primary-bg);
}
/* OVERRIDING DEFAULT BOOTSTRAP VARIABLE ; END */

/* OWN CLASSES : START */

@media (max-width: 299.98px) {
  .sp-max-width-300-d-none {
    display: none !important;
  }
}

.sp-footer-bg {
  background-color: var(--sp-theme-footer-bg) !important;
}
.sp-body-bg {
  background-color: var(--sp-theme-body-bg) !important;
}

/* OWN CLASSES : END */

/* EXTEND BOOTSTRAP CLASS: START */

body {
  font-family: var(--sp-body-font-family);
}

.pagination {
  --bs-pagination-color: var(--sp-primary-accent-purple-pink);
  --bs-pagination-active-bg: var(--sp-theme-primary-bg);
  --bs-pagination-active-border-color: var(--sp-theme-primary-bg);
}

/* EXTEND BOOTSTRAP CLASS: END */

/* CUSTOM CLAASES SP FOR THEME : START */

/* CUSTOM CLAASES SP FOR THEME : END */
/* BOOTSTRAP CLASSES MODIFIED FOR SP: START */
.sp-bg-primary {
  background-color: var(--sp-theme-primary-bg) !important;
}

.sp-bg-gradient {
  background-image: var(--sp-gradient) !important;
}
.sp-text-theme {
  /* CHANGE TEXT COLOR ACCORDING TO LIGHT OR DARK THEME */
  /* HERE WE NEED TO WRITE RGB() - FUNCTION. ELSE WONT WORK. */
  color: rgb(var(--sp-theme-text)) !important;
}

.sp-bg-light {
  /* THIS IS USED FOR BG INSIDE BORDERS, LIKE REGISTER FORM AND ALL */
  background-color: var(--sp-theme-light-bg) !important;
}

.sp-btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sp-primary);
  --bs-btn-border-color: var(--sp-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5911e8;
  --bs-btn-hover-border-color: #5510e0;
  --bs-btn-focus-shadow-rgb: 134, 77, 249;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #5510e0;
  --bs-btn-active-border-color: #5010d1;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--sp-primary);
  --bs-btn-disabled-border-color: var(--sp-primary);
}

.sp-btn-primary-complimentary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sp-primary-complimentary);
  --bs-btn-border-color: var(--sp-primary-complimentary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #aaea2a;
  --bs-btn-hover-border-color: #a6ea1f;
  --bs-btn-focus-shadow-rgb: 199, 246, 106;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #a6ea1f;
  --bs-btn-active-border-color: #9fe316;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--sp-primary-complimentary);
  --bs-btn-disabled-border-color: var(--sp-primary-complimentary);
}

.sp-btn-outline-primary {
  --bs-btn-color: var(--sp-primary);
  --bs-btn-border-color: var(--sp-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sp-primary);
  --bs-btn-hover-border-color: var(--sp-primary);
  --bs-btn-focus-shadow-rgb: var(--sp-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sp-primary);
  --bs-btn-active-border-color: var(--sp-primary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--sp-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--sp-primary);
  --bs-gradient: none;
}

.sp-btn-outline-primary-complimentary {
  --bs-btn-color: var(--sp-primary-complimentary);
  --bs-btn-border-color: var(--sp-primary-complimentary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sp-primary-complimentary);
  --bs-btn-hover-border-color: var(--sp-primary-complimentary);
  --bs-btn-focus-shadow-rgb: var(--sp-primary-complimentary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sp-primary-complimentary);
  --bs-btn-active-border-color: var(--sp-primary-complimentary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--sp-primary-complimentary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--sp-primary-complimentary);
  --bs-gradient: none;
}
/* BOOTSTRAP CLASSES MODIFIED FOR SP : END */

/* I HAVE TO ADJUST THE TOP OF MY HEADER TO 56PX ( I WILL DO 60PX ) 
BECAUSE OF STICKY NAVIGATION MENU
*/
.sp-margin-top-70px {
  margin-top: 56px !important;
}

/* SA CSS */
/* SP CSS FOR BLOG 
SP-* IS BOOTSTRAP CLASS MODIFIED CLASS
SPO-* IS SP'S OWN CLASS
*/

.spo-max-width-1024 {
  max-width: 1024px !important;
}
.spo-max-width-800 {
  max-width: 800px !important;
}
.spo-max-height-450 {
  max-height: 450px !important;
}

/* .floating-whatsapp-icon {
  position: fixed;
  bottom: 40px;
  right: 40px;
  text-align: center;
  z-index: 100;
} */

/* 1 rem == 16px, for 40px, i will use 40px */
.floating-whatsapp-icon {
  position: fixed;
  bottom: 2.5rem;
  right: 2.5rem;
  text-align: center;
  z-index: 100;
}

.sp-img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}

/* floating icons */

.floating-icons {
  position: fixed;
  bottom: 2.5rem;
  right: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 1000;
}

.floating-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25d36500; /* WhatsApp green, change as needed */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
}

.floating-icons a:hover {
  transform: scale(1.1);
}

.floating-icons img {
  width: 70px;
  height: 70px;
}

/* floating icons */

/* Ribbon */

.spo-ribbon-sold {
  position: absolute;
  top: 20px;
  left: -50px;
  width: 200px;
  text-align: center;
  background-color: red;
  color: white;
  font-weight: bold;
  font-family: sans-serif;
  padding: 10px 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.spo-ribbon-views {
  position: absolute;
  top: 20px;
  left: -50px;
  width: 200px;
  text-align: center;
  background-color: rgb(18, 40, 3);
  color: white;
  font-weight: bold;
  font-family: sans-serif;
  padding: 10px 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

/* Usage: <div class="ribbon">FOR SALE</div> */
/* Ribbon */

/* Zoom ImG */
/* You Have to Make the Parent Element to "overflow-hidden" */
.spo-zoom-img-hover {
  transition: transform 0.3s ease;
}

.spo-zoom-img-hover:hover {
  transform: scale(1.1);
}

/* Zoom ImG */