/* Fonts */

:root {

--default-font: Poppins, sans-serif;;

--heading-font: Poppins, sans-serif;

--nav-font: Poppins, sans-serif;

}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */

:root {

--background-color: #ffffff; /* Background color for the entire website, including individual sections */

--default-color: #000000; /* Default color used for the majority of the text content across the entire website */

--heading-color: #000000; /* Color for headings, subheadings and title throughout the website */

--accent-color: #501f49; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */

--surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */

--contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */

}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */

:root {

--nav-color: #ffffff; /* The default color of the main navmenu links */

--nav-hover-color: #68a4c4; /* Applied to main navmenu links when they are hovered over or active */

--nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */

--nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */

--nav-dropdown-color: #555555; /* Used for navigation links of the dropdown items in the navigation menu. */

--nav-dropdown-hover-color: #68a4c4; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */

}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {

--background-color: #f4f8fb;

--surface-color: #ffffff;

}

.dark-background {

--background-color: #000000;

/* --background-color: #6f0c4f; */

--default-color: #ffffff;

--heading-color: #ffffff;

--surface-color: #000000;

/* --surface-color: #62285e; */

--contrast-color: #ffffff;

}

/* Smooth scroll */

:root {

scroll-behavior: smooth;

}

.img-fluid.custom {

width: 100%;

height: auto;

}

/*--------------------------------------------------------------

# General Styling & Shared Classes

--------------------------------------------------------------*/

body {

color: var(--default-color);

background-color: var(--background-color);

font-family: var(--default-font);

}

.loveujenna a {

color:#df1529;

}

.red-project {

color: red;

}

.bulk2 {

font-weight: 200;

}

.bulk3 {

font-weight: 300;

}

.bulk {

font-weight: 400;

}

.bulk5 {

font-weight: 500;

}

.bulk6 {

font-weight: 600;

}

.dred-project {

color: #fff;

}

#about > div > div > div.col-lg-6.content.aos-init.aos-animate > h3 {

font-size: 1.5rem;

font-weight: 200;

color: #000;

}

.active-color {

color: #ac42c1;

}

#about > div > div > div.col-lg-6.content.aos-init.aos-animate > p {

padding-bottom: 0x;

font-family: Poppins, sans-serif;

font-size: 1.6rem;

font-weight: 300;

margin-bottom: 6px;

line-height: 1.8;

list-style-type: none;

align-items: center;

color:rgb(12 12 12 / 80%);

}

h2.letter {

margin-bottom: 0;

font-family: Poppins, sans-serif;

font-size: 1.8rem;

font-weight: 200;

line-height: 2;

color: rgb(12 12 12 / 80%);

}

.navmenu.red a {

color: red !important;

font-weight:400;

font-size:1.2rem;

}

a {

color: red;

text-decoration: none;

transition: 0.3s;

}

.partner h3 {

font-size: 1.4rem;

font-weight: 200;

color:#000;

margin-bottom: 1.2rem;

font-family: Poppins, sans-serif;

line-height: 1.5;

}

a:hover {

color: color-mix(in srgb, var(--accent-color), transparent 25%);

text-decoration: none;

}

h1,

h2,

h3,

h4,

h5,

h6 {

color: var(--heading-color);

font-family: Poppins, sans-serif;

font-weight: 300;

line-height: 1.2;

}

.php-email-form .error-message {

display: none;

background: #df1529;

color: #ffffff;

text-align: left;

padding: 15px;

margin-bottom: 24px;

font-weight: 600;

}

.php-email-form .sent-message {

display: none;

color: #ffffff;

background: #059652;

text-align: center;

padding: 15px;

margin-bottom: 24px;

font-weight: 600;

}

.php-email-form .loading {

display: none;

background: var(--surface-color);

text-align: center;

padding: 15px;

margin-bottom: 24px;

}

.php-email-form .loading:before {

content: "";

display: inline-block;

border-radius: 50%;

width: 24px;

height: 24px;

margin: 0 10px -6px 0;

border: 3px solid var(--accent-color);

border-top-color: var(--surface-color);

animation: php-email-form-loading 1s linear infinite;

}

@keyframes php-email-form-loading {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

}

/* Pulsating Play Button

------------------------------*/

.pulsating-play-btn {

width: 94px;

height: 94px;

background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);

border-radius: 50%;

display: block;

position: relative;

overflow: hidden;

}

.pulsating-play-btn:before {

content: "";

position: absolute;

width: 120px;

height: 120px;

animation-delay: 0s;

animation: pulsate-play-btn 2s;

animation-direction: forwards;

animation-iteration-count: infinite;

animation-timing-function: steps;

opacity: 1;

border-radius: 50%;

border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);

top: -15%;

left: -15%;

background: rgba(198, 16, 0, 0);

}

.our h3 {

font-size: 1.5rem;

font-weight: 200;

color:#000;

margin-bottom: 1.2rem;

font-family: Poppins, sans-serif;

line-height: 1.5;

}

#about > div > div > div.col-lg-6.content.aos-init.aos-animate > p {

font-size: 1.5rem;

font-weight: 200;

color:#000;

margin-bottom: 1.2rem;

font-family: Poppins, sans-serif;

line-height: 1.5;

}

.pulsating-play-btn:after {

content: "";

position: absolute;

left: 50%;

top: 50%;

transform: translateX(-40%) translateY(-50%);

width: 0;

height: 0;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

border-left: 15px solid #fff;

z-index: 100;

transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);

}

.pulsating-play-btn:hover:before {

content: "";

position: absolute;

left: 50%;

top: 50%;

transform: translateX(-40%) translateY(-50%);

width: 0;

height: 0;

border: none;

border-top: 10px solid transparent;

border-bottom: 10px solid transparent;

border-left: 15px solid #fff;

z-index: 200;

animation: none;

border-radius: 0;

}

.pulsating-play-btn:hover:after {

border-left: 15px solid var(--accent-color);

transform: scale(20);

}

@keyframes pulsate-play-btn {

0% {

transform: scale(0.6, 0.6);

opacity: 1;

}

100% {

transform: scale(1, 1);

opacity: 0;

}

}

/*--------------------------------------------------------------

# Global Header

--------------------------------------------------------------*/

.header {

--background-color: rgba(255, 255, 255, 0);

--default-color: #ffffff;

--heading-color: #ffffff;

color: var(--default-color);

background-color: var(--background-color);

padding: 15px 0;

transition: all 0.5s;

z-index: 997;

}

.bbulk {

font-weight: 700 !important;

}

.header .logo {

line-height: 1;

}

.header .logo img {

max-height: 49px;

margin-right: 8px;

}

.header .logo h1 {

margin: 0;

color: var(--heading-color);

letter-spacing: -2.08px;

text-transform: capitalize;

/* margin-bottom: 1.75rem; */

font-family: Poppins, sans-serif;

font-size: 31px;

font-weight: 300;

line-height: 1.3;

}

/* Global Header on Scroll

------------------------------*/

.scrolled .header {

--background-color: #000000;

}

/*--------------------------------------------------------------

# Navigation Menu

--------------------------------------------------------------*/

/* Navmenu - Desktop */

@media (min-width: 1200px) {

.navmenu {

padding: 0;

}

.navmenu ul {

margin: 0;

padding: 0;

display: flex;

list-style: none;

align-items: center;

}

.navmenu li {

position: relative;

}

.navmenu a,

.navmenu a:focus {

color: var(--nav-color);

padding: 18px 15px;

font-size: 1rem;

font-family: poppins, sans-serif;

font-weight: 300;

display: flex;

align-items: center;

justify-content: space-between;

white-space: nowrap;

transition: 0.3s;

}

.navmenu a i,

.navmenu a:focus i {

font-size: 13px;

line-height: 0;

margin-left: 5px;

transition: 0.3s;

}

.navmenu li:last-child a {

padding-right: 0;

}

.navmenu li:hover>a,

.navmenu .active,

.navmenu .active:focus {

color: #ac42c1;

}

.navmenu .dropdown ul {

margin: 0;

padding: 10px 0;

background:#000;

display: block;

position: absolute;

visibility: hidden;

left: 14px;

top: 130%;

opacity: 0;

transition: 0.3s;

border-radius: 4px;

z-index: 99;

box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);

}

.navmenu .dropdown ul li {

min-width: 200px;

}

.navmenu .dropdown ul a {

padding: 10px 20px;

font-size: 20px;

text-transform: none;

color:#fff;

/* color: var(--nav-dropdown-color); */

}

.navmenu .dropdown ul a i {

font-size: 20px;

}

.navmenu .dropdown ul a:hover,

.navmenu .dropdown ul .active:hover,

.navmenu .dropdown ul li:hover>a {

color: var(--nav-dropdown-hover-color);

}

.navmenu .dropdown:hover>ul {

opacity: 1;

top: 100%;

visibility: visible;

}

.navmenu .dropdown .dropdown ul {

top: 0;

left: -90%;

visibility: hidden;

}

.navmenu .dropdown .dropdown:hover>ul {

opacity: 1;

top: 0;

left: -100%;

visibility: visible;

}

}

/* Navmenu - Mobile */

@media (max-width: 1199px) {

.mobile-nav-toggle {

color: var(--nav-color);

font-size: 28px;

line-height: 0;

margin-right: 10px;

cursor: pointer;

transition: color 0.3s;

}

.navmenu {

padding: 0;

z-index: 9997;

}

.navmenu ul {

display: none;

list-style: none;

position: absolute;

inset: 60px 20px 20px 20px;

padding: 10px 0;

margin: 0;

border-radius: 6px;

background-color: #000;

overflow-y: auto;

transition: 0.3s;

z-index: 9998;

box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);

}

.navmenu a,

.navmenu a:focus {

color: #fff;

padding: 10px 20px;

font-family: var(--nav-font);

font-size: 20px;

font-weight: 500;

display: flex;

align-items: center;

justify-content: space-between;

white-space: nowrap;

transition: 0.3s;

}

.navmenu a i,

.navmenu a:focus i {

font-size: 20px;

line-height: 0;

margin-left: 5px;

width: 30px;

height: 30px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

transition: 0.3s;

background-color: color-mix(in srgb, var(--accent-color), transparent 90%);

}

.navmenu a i:hover,

.navmenu a:focus i:hover {

background-color: var(--accent-color);

color: var(--contrast-color);

}

.navmenu a:hover,

.navmenu .active,

.navmenu .active:focus {

color: var(--nav-dropdown-hover-color);

}

.navmenu .active i,

.navmenu .active:focus i {

background-color: var(--accent-color);

color: var(--contrast-color);

transform: rotate(180deg);

}

.navmenu .dropdown ul {

position: static;

display: none;

z-index: 99;

padding: 10px 0;

margin: 10px 20px;

background-color: var(--nav-dropdown-background-color);

border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

box-shadow: none;

transition: all 0.5s ease-in-out;

}

.navmenu .dropdown ul ul {

color: rgb(32 34 36 / 80%);

}

.navmenu .dropdown>.dropdown-active {

display: block;

background-color: rgba(33, 37, 41, 0.03);

}

.mobile-nav-active {

overflow: hidden;

}

.mobile-nav-active .mobile-nav-toggle {

color: #fff;

position: absolute;

font-size: 32px;

top: 15px;

right: 15px;

margin-right: 0;

z-index: 9999;

}

.mobile-nav-active .navmenu {

position: fixed;

overflow: hidden;

inset: 0;

background: rgba(33, 37, 41, 0.8);

transition: 0.3s;

}

.mobile-nav-active .navmenu>ul {

display: block;

}

}

/*--------------------------------------------------------------

# Global Footer

--------------------------------------------------------------*/

.footer {

color: var(--default-color);

background-color: var(--background-color);

font-size: 1rem;

font-weight:200;

position: relative;

}

.footer .footer-newsletter {

background-color: color-mix(in srgb, var(--default-color), transparent 97%);

padding: 50px 0;

}

.footer .footer-newsletter h4 {

font-size: 24px;

}

.footer .footer-newsletter .newsletter-form {

margin-top: 30px;

margin-bottom: 15px;

padding: 6px 8px;

position: relative;

border-radius: 4px;

background-color: var(--surface-color);

border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);

display: flex;

transition: 0.3s;

border-radius: 50px;

}

.footer .footer-newsletter .newsletter-form:focus-within {

border-color: var(--accent-color);

}

.footer .footer-newsletter .newsletter-form input[type=email] {

border: 0;

padding: 4px;

width: 100%;

background-color: var(--surface-color);

color: var(--default-color);

}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {

outline: none;

}

.footer .footer-newsletter .newsletter-form input[type=submit] {

border: 0;

font-size: 16px;

padding: 0 20px;

margin: -7px -8px -7px 0;

background: #c10606;

color: var(--contrast-color);

transition: 0.3s;

border-radius: 50px;

}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {

background: color-mix(in srgb, var(--accent-color), transparent 20%);

}

.footer .footer-top {

padding-top: 50px;

}

.footer .social-links a {

display: flex;

align-items: center;

justify-content: center;

width: 40px;

height: 40px;

border-radius: 50%;

border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);

font-size: 16px;

color: color-mix(in srgb, var(--default-color), transparent 20%);

margin-right: 10px;

transition: 0.3s;

}

.footer .social-links a:hover {

color: var(--accent-color);

border-color: var(--accent-color);

}

.footer h4 {

font-family: Poppins, sans-serif;

font-size: 1rem;

font-weight: 300;

line-height: 2;

position: relative;

padding-bottom: 12px;

}

.footer .footer-links {

margin-bottom: 30px;

}

.footer .footer-links ul {

list-style: none;

padding: 0;

margin: 0;

}

.footer .footer-links ul i {

margin-right: 3px;

font-size: 14px;

line-height: 0;

color: var(--accent-color);

}

.footer .footer-links ul li {

font-family: Poppins, sans-serif;

font-size: .85rem;

font-weight: 400;

line-height: 2;

padding: 10px 0;

display: flex;

align-items: center;

}

.footer .footer-links ul li:first-child {

padding-top: 0;

}

.footer .footer-links ul a {

display: inline-block;

font-weight:250;

color: color-mix(in srgb, var(--default-color), transparent 20%);

line-height: 1;

}

.footer .footer-links ul a:hover {

color: var(--accent-color);

}

.footer .footer-about a {

color: var(--heading-color);

font-size: 24px;

font-weight: 300;

font-family: var(--heading-font);

}

.footer .footer-contact p {

margin-bottom: 5px;

}

.footer .copyright {

padding: 25px 0;

border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

}

.footer .copyright p {

margin-bottom: 0;

}

.footer .credits {

margin-top: 6px;

font-size: 13px;

}

/*--------------------------------------------------------------

# Preloader

--------------------------------------------------------------*/

#preloader {

position: fixed;

inset: 0;

z-index: 999999;

overflow: hidden;

background: var(--background-color);

transition: all 0.6s ease-out;

}

#preloader:before {

content: "";

position: fixed;

top: calc(50% - 30px);

left: calc(50% - 30px);

border: 6px solid #ffffff;

border-color: var(--accent-color) transparent var(--accent-color) transparent;

border-radius: 50%;

width: 60px;

height: 60px;

animation: animate-preloader 1.5s linear infinite;

}

@keyframes animate-preloader {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

}

/*--------------------------------------------------------------

# Scroll Top Button

--------------------------------------------------------------*/

.scroll-top {

position: fixed;

visibility: hidden;

opacity: 0;

right: 15px;

bottom: 15px;

z-index: 99999;

background-color:red;

width: 40px;

height: 40px;

border-radius: 4px;

transition: all 0.4s;

}

.scroll-top i {

font-size: 24px;

color: var(--contrast-color);

line-height: 0;

}

.scroll-top:hover {

background-color: color-mix(in srgb, var(--accent-color), transparent 20%);

color: var(--contrast-color);

}

.scroll-top.active {

visibility: visible;

opacity: 1;

}

/*--------------------------------------------------------------

# Disable aos animation delay on mobile devices

--------------------------------------------------------------*/

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

[data-aos-delay] {

transition-delay: 0 !important;

}

.section-title h2 {

font-size: 1.5rem;

}

.page-title h1 {

font-size: 2.5rem;

}

}

/*------------------- -------------------------------------------

# Global Page Titles &Breadcrumbs

--------------------------------------------------------------*/

.page-title {

color: var(--default-color);

background-color: var(--background-color);

padding: 160px 0 80px 0;

text-align: center;

position: relative;

}

.page-title:before {

content: "";

background-color: color-mix(in srgb, var(--background-color), transparent 50%);

position: absolute;

inset: 0;

}

.page-title h1 {

font-size: 41px;

font-weight: 350;

margin-bottom: 14px;

font-family: Poppins, sans-serif;

}

/* .bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {

font-size:1rem !important

} */

.page-title .breadcrumbs ol {

display: flex;

flex-wrap: wrap;

list-style: none;

justify-content: center;

padding: 0;

margin: 0;

font-size: 20px;

font-weight: 400;

}

.page-title .breadcrumbs ol li+li {

padding-left: 10px;

}

.page-title .breadcrumbs ol li+li::before {

content: "/";

display: inline-block;

padding-right: 10px;

color: color-mix(in srgb, var(--default-color), transparent 50%);

}

/*--------------------------------------------------------------

# Global Sections

--------------------------------------------------------------*/

section,

.section {

color: var(--default-color);

background-color: var(--background-color);

padding: 60px 0;

scroll-margin-top: 90px;

overflow: clip;

}

@media (max-width: 1199px) {

section,

.section {

scroll-margin-top: 66px;

}

}

/*--------------------------------------------------------------

# Global Section Titles

--------------------------------------------------------------*/

.section-title {

text-align: center;

padding-bottom: 60px;

position: relative;

}

.section-title h2 {

padding-bottom: 25px;

position: relative;

letter-spacing: -2.08px;

text-transform: capitalize;

margin-bottom: 2rem;

color:red;

margin-top: 3rem;

font-family: Poppins, sans-serif;

font-size: 3.2rem;

font-weight: 300;

line-height: 1.3;

}

.section-title h2:before {

content: "";

position: absolute;

display: block;

width: 160px;

height: 1px;

background: color-mix(in srgb, var(--default-color), transparent 60%);

left: 0;

right: 0;

bottom: 1px;

margin: auto;

}

.section-title h2::after {

content: "";

position: absolute;

display: block;

width: 60px;

height: 3px;

background: var(--accent-color);

left: 0;

right: 0;

bottom: 0;

margin: auto;

}

.section-title p {

font-family: Poppins, sans-serif;

font-size: 1.9rem;

margin-bottom: 3rem;

color:rgb(12 12 12 / 80%);

font-weight: 200;

}

/*--------------------------------------------------------------

# Hero Section

--------------------------------------------------------------*/

.hero {

width: 100%;

min-height: 100vh;

overflow: hidden;

display: flex;

align-items: center;

position: relative;

/* background-color: transparent; */

background-color: #000000;

}

.hero::after {

content: "";

position: absolute;

left: 50%;