/* import font family is == Poppins ==*/
@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');

/* 
Theme Name:     Finteezy
Theme URI:      
Author:         
Author URI:     
Description:    
Version:        1.0
License:        
License URI:

 [Table of Content]
 01. Reset
 02. Global Style 
	  01. Index Page Style
        section Index Page
            1.1. Header section
            1.2. Hero section
            1.3. Partners section
            1.4. Services section
            1.5. Registration section
            1.6. Download section
            1.7. Benefits section
            1.8. Testimonials section
            1.9. Pricing section
            1.10. Blog section
            1.11. FAQs section
            1.12. Footer section
   
    02. About Page Style
        section About Page
            2.1. Subpage_Hero section
            2.2. Mission section
			2.3. Online section
			2.4. Team section

    03. Services Page Style
        section Services Page
            3.1. Features section

    04. Pricing Page Style
        
    05. Testimonial Page Style

    06. Team Page Style

    07. Blog Page Style
          
    08. BlogDetails_Hero Page Style
		section BlogDetails_Hero Page
			   8.1. BlogDetails_Hero section
			   8.2. Details section
			   8.3. Comment section

    09. Contact Page Style
		section Contact Page
				9.1. Contact_Details section
				9.2. Contact section

    10. Error Page Style
		section Error Page
				10.1. Error_404 section	

    11. ComingSoon Page Style
		section ComingSoon Page
				11.1. ComingSoon section	
    
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

body {
  overflow-x: hidden;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
blockquote,
pre,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
}

/* HTML5 display-role reset for older browsers */
/* =====  01. Reset  ====== */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

body {
	font-family: "Poppins", sans-serif;
	line-height: 1;
	background: #fcfdfc;
	scroll-behavior: smooth;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
}

input:focus,
button:focus {
	outline: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

select {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	background-color: #ffffff;
	-webkit-text-fill-color: #ffffff;
	-webkit-box-shadow: 0 0 0px 1000px transparent inset;
	transition: background-color 5000s ease-in-out 0s;
}

select::-ms-expand {
	display: none;
}

label {
	font-weight: normal;
}

iframe {
	width: 100%;
}

/* =====  End of 01. Reset  ====== */
/* ===== 02. Global Style ===== */

h1 {
	font-size: 4rem;
	line-height: 70px;
	font-weight: 700;
	font-family: "Poppins", sans-serif;
}

h2 {
	font-size: 4rem;
	font-weight: 700;
	font-family: "Poppins", sans-serif;
}

h3 {
	font-size: 38px;
	line-height: 50px;
	font-weight: 700;
	font-family: "Poppins", sans-serif;
}

h4 {
	font-size: 30px;
	line-height: 40px;
	font-weight: 700;
	font-family: "Poppins", sans-serif;
}

h5 {
	font-size: 20px;
	line-height: 30px;
	font-weight: 600;
	font-family: "Poppins", sans-serif;
}

h6 {
	font-size: 18px;
	line-height: 24px;
	font-weight: 600;
	font-family: "Poppins", sans-serif;
}

p {
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	font-family: "Poppins", sans-serif;
}

a {
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	text-decoration: none;
	font-family: "Poppins", sans-serif;
		text-decoration: none !important;

}

button {
	font-size: 18px;
	line-height: 24px;
	font-weight: 500;
	padding: 14px 22px;
	font-family: "Poppins", sans-serif;
	border: none;
	outline: none;
}

.hover1 {
	display: inline-block;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	transition: 0.5s ease;
	font-weight: 500;
	color: #FFFFFF;
	z-index: 1;
	padding: 17px 50px;
	border-radius: 40px;
	border: none;
	line-height: 27px;
	transition: ease all 0.3s;
	border: 1px solid transparent;
	text-align: center;
}

.hover1::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(100.57deg, #19518d 12.93%, #b3cce0 121.02%);
	position: absolute;
	border-radius: 40px;
	z-index: -1;
	background-color: #3d48e3;
	transition: 0.4s ease;
	top: 0px;
	left: 0px;
}

.hover1:hover::before {
	animation: moveRight 0.4s forwards;
}

.hover1:hover {
	color: #ffffff;
	border: 1px solid #122762;
}

.hover1:active {
	filter: brightness(0.8);
}

@keyframes moveRight {
	from {
		left: 0;
	}

	to {
		left: 100%;
	}
}

@keyframes moveLeft {
	from {
		left: 100%;
	}

	to {
		left: 0;
	}
}

.hover1::before {
	animation: moveLeft 0.4s forwards;
}

.hover2 {
	display: inline-block;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	transition: 0.5s ease;
	font-weight: 500;
	color: #000000;
	z-index: 1;
	padding: 17px 50px;
	border-radius: 40px;
	border: none;
	line-height: 27px;
	transition: ease all 0.3s;
	border: 1px solid #163968;
	text-align: center;
}

.hover2::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(100.57deg, #0648a4 12.93%, #7baeff 121.02%);
	position: absolute;
	border-radius: 40px;
	z-index: -1;
	background-color: #E33D5C;
	transition: 0.4s ease;
	top: 0px;
	left: 100%;
}

.hover2:hover::before {
	animation: moveLeft 0.4s forwards;
}

.hover2:hover {
	color: #ffffff;
	border: 1px solid transparent;
}

.hover2:active {
	filter: brightness(0.8);
}

.hover2::before {
	animation: moveRight 0.4s forwards;
}

@keyframes moveLeft {
	from {
		left: 100%;
	}

	to {
		left: 0;
	}
}

@keyframes moveRight {
	from {
		left: 0;
	}

	to {
		left: 100%;
	}
}

/* form validation modal */

.modal-content {
	padding: 40px;
	background: rgba(23, 22, 38, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.modal-content img {
	margin: auto;
	width: 100px;
}

.modal-content div {
	padding: 40px 0px;
	width: 350px;
	margin: auto;
}

.modal-content h4,
.modal-content h6 {
	margin: auto;
	color: #000000;
	text-align: center;
}

.modal-content h6 {
	margin: 15px auto;
}

.modal .hover1 {
	width: 100px;
	padding: 12px 24px;
}

/* Scroll To Top Button */

.scrollToTop {
	display: none;
	height: 60px;
	width: 60px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	background-color: #e9eff6;
	border-radius: 50%;
	overflow: hidden;
	cursor: pointer;
	z-index: 999;
	transition: 0.5s ease all;
}

.scrollToTop:hover {
	transform: translateY(-15%);
}

.scrollToTop .arrowUp {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFF;
	font-size: 24px;
}

.scrollToTop .water {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	transform: translateY(100%);
	background-color: #35568fe0;

	transition: all 0.3s;
}

.scrollToTop .water_wave {
	width: 200%;
	position: absolute;
	bottom: 100%;
}

.scrollToTop .water_wave_back {
	right: 0;
	fill: #10345e;
	animation: wave-back 1.4s infinite linear;
}

.scrollToTop i {font-size: 20px}

.scrollToTop .water_wave_front {
	left: 0;
	fill: #25599ee0;
	margin-bottom: -1px;
	animation: wave-front 0.7s infinite linear;
}

@keyframes wave-front {
	100% {
		transform: translateX(-50%);
	}
}

@keyframes wave-back {
	100% {
		transform: translateX(50%);
	}
}


/* pre_lodaer */

.site-wrapper {
	visibility: hidden;
	overflow: hidden;
	opacity: 0;
	transition: all 0.5s ease;
	display: none;
}

body.preloader-active {
	overflow: hidden;
	transition: all 0.5s ease;
}

.preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #07265b;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}

.preloader-logo {
	position: relative;
	width: 200px;
	height: 200px;
	background-image: url('../images/logo.png');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}



@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}


/* ===== End of 02. Global Style ===== */
/* ========= 1.1. Header section ======== */

.nav-logo img {
	width: 250px;
}

.navbar-brand img {
	width: 140px;
}

header .flex-row-reverse {
	width: 100%;
}

.navbar-collapse {
	justify-content: center;
}

.right-sidbar {
	width: 300px;
	position: fixed;
	height: 100vh;
	top: 0;
	left: -355px;
	overflow-x: hidden;
	transition: 0.5s;
	padding: 20px 10px 20px 5px;
	background: #183270;
	z-index: 999999;
}

.open-aside {
	max-height: 50px;
	display: none;
	z-index: 2;
}

aside .fa-xmark {
	padding: 10px 15px;
	background: none;
	color: #ffffff;
	border: none;
	border-radius: 10px;
	font-size: 22px;
}

aside .fa-caret-down {
	color: #ffffff;
	font-size: 18px;
}

.right-sidbar a:focus,
aside a {
	color: #ffffff;
}

aside a:hover {
	color: #2ca4ff;
}

#slid-drop {
	display: none;
}

aside li {
	padding: 12px;
}

#slid-drop li {
	padding: 12px 0px;
}

.aside-dropdwon {
	display: block !important;
}

.page-btn {
	padding: 0px 0px 10px;
	color: #ffffff;
	font-weight: 400;
	background-color: transparent;
	border: none;
	font-size: 16px;
}

.navbar ul li a:focus,
.navbar ul li a {
	color: #ffffff;
	padding: 15px;
	font-weight: 400;
	font-size: 16px;
}

.dropdown ul .active {
	background: none;
}


/* Desktop – ALT skal være sort */
.right-sidbar a,
.right-sidbar a:active,
.right-sidbar a:focus,
.right-sidbar a:hover,
.right-sidbar .nav-item a,
.right-sidbar .active a,
.navbar ul li a,
.navbar ul li a:hover,
.navbar ul .active {
	color: #0f244d !important;
}

/* Mobil – ALT skal være hvidt */
@media (max-width: 768px) {
	.right-sidbar a,
	.right-sidbar a:active,
	.right-sidbar a:focus,
	.right-sidbar a:hover,
	.right-sidbar .nav-item a,
	.right-sidbar .active a,
	.navbar ul li a,
	.navbar ul li a:hover,
	.navbar ul .active {
		color: #fff !important;
	}
}



.dropdown ul {
	width: 200px;
}

.dropdown-menu {
	padding: 15px 10px;
	background: #08153c;
	display: block;
	overflow: hidden;
	transition: all 0.3s ease-in;
	visibility: hidden;
	border-radius: 10px;
}

.dropdown ul li a:focus,
.dropdown ul li a:active {
	background: transparent;
}

.dropdown ul li a {
	color: #ffffff;
	border-radius: 10px;
	background: transparent;
}

.dropdown ul li a:hover {
	background-color: transparent;
}

.open-aside {
	padding: 12px 15px;
	background: none;
	border: none;
	border-radius: 10px;
	font-size: 25px;
	color: #000000;
}

aside .fa-xmark:hover,
.open-aside:hover {
	background: none;

	color: #000000;
}

header .search i {
	font-size: 30px;
	color: #FFF;
}

header .SearchModal button {
	border: none;
	background: none;
	padding: 0px;
}

header .modal {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	backdrop-filter: blur(7px);
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

header .modal.show {
	opacity: 1;
}

header .searchModal .close-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	background: none;
	color: #FFFFFF;
	border: none;
	font-size: 50px;
}

header .searchModal .close-btn:hover {
	color: #0f296b;
}

header .searchModal .modal-content div {
	width: 100%;
}

header .searchModal .position-relative {
	display: flex;
	align-items: center;
	width: 80%;
	position: relative;
	transform: translateY(-400%);
	transition: transform 0.7s ease-in-out;
}

header .modal.show .position-relative {
	transform: translateY(0);
}

header .searchModal input {
	width: 100% !important;
	padding: 20px 30px;
	outline: none;
	background: #150C2380;
	color: #ffffff;
	border: 1px solid #0d1757;
	border-radius: 10px;
}

header .search-btn {
	border: none;
	background: none;
	padding: 0px;
	position: absolute;
	right: 20px;
}

header .searchModal img[alt="search"] {
	width: 20px !important;
}

body.modal-open {
	overflow: hidden;
}

header .pt-lg-4 .p-0 {
	font-size: 24px;
	font-family: "Forum", serif;
	color: #212529;
	transition: all 0.3s ease;
}

header .pt-lg-4 .p-0:hover {
	color: #0f155b;
}

header .pt-lg-4 {
	position: relative;
}

/* ========= End of 1.1. Header section ======== */
/* ========= 1.2. Hero section ======== */

.Hero {
	padding: 100px 0px;
}

.Hero h2,
.Hero h1,
.Hero p {
	color: #000000;
}

.Hero h1 span {
	background-image: linear-gradient(115deg, #1e439c 35%, #82a1cd 100%);
	color: transparent;
	display: inline-block;
	width: max-content;
	background-clip: text;
}

.Hero p {
	padding: 26px 177px 30px 0px;
}

.Hero .mt-1 h5 {
	color: #ffffff;
	padding: 60px 0px 15px;
	font-weight: 500;
}

.Hero .mt-1 img {
	width: 71px;
	border-radius: 50%;
	border: 3px solid #253f9e;
}

.Hero .mt-1 figure:nth-child(2) {
	left: -4%;
	position: relative;
}

.Hero .mt-1 figure:nth-child(3) {
	position: relative;
	left: -8%;
}

.Hero .rounded-circle {
	border: 3px solid #000000;
	background-color: #ffffff;
	width: 71px;
	height: 71px;
	left: -12%;
}

.Hero .rounded-circle h5 {
	color: #000000;
}

.Hero .position-absolute::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: blur(100px);
	z-index: -1;
}

.Hero .position-absolute video {
	width: 100%;
	animation: floatHero 4s ease-in-out infinite;
	border-radius: 20px; /* optional */
}

.Hero .position-absolute {
	top: -8%;
	z-index: -1;
}

.Hero .position-absolute img {
	width: 100%;
}
.Hero .position-absolute img {
	animation: floatHero 4s ease-in-out infinite;
}

/* Selve animationen */
@keyframes floatHero {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-25px); }
	100% { transform: translateY(0px); }
}

.Hero .align-items-end {
	gap: 35px;
}

.Hero .align-items-end p {
	padding: 5px 0px 0px;
}

/* ========= End of 1.2. Hero section ======== */
/* ======== 1.3. Partners section ======== */

.Partners h5 {
	color: #FFFFFF;
}

.Partners hr {
	margin: 0;
	opacity: 1;
	border-top: 1px solid;
	border-image: linear-gradient(102.05deg, #836DD6 40.6%, #FFA37B 91.37%) 1;
}

.PartnersSlider {
	padding: 50px 50px 0px;
}

.PartnersSlider img {
	height: 34px;
	object-fit: contain;
}

.PartnersSlider .slick-slide {
	padding: 0px 24px;
}

/* ======== End of 1.3. Partners section ======== */
/* ======== 1.4. Services section ======== */

.Services {
	padding-top: 200px; padding-bottom: 200px;
}

.Services h2 {
	color: #000000;
}

.Services h5 {
	color: #000000; font-size: 25px;
}

.Services p {
	color: #000000;
}

.Services h2 span {
	background: linear-gradient(102.05deg, #0d285a 40.6%, #7ba5ff 91.37%);
	color: transparent;
	background-clip: text;
}

.Services img {
	width: 40px;
}

.Services .flex-wrap {
	gap: 30px 24px;
}

.Services .flex-wrap .gap-3 {
	width: 40%;
	flex-grow: 1;
	padding: 40px 24px;
	border-radius: 30px;
}

.Services .flex-wrap .gap-3 p {
	font-size: 14px;
	line-height: 20px;
}





.Services .h-100 {
	padding-left: 24px;
}

.Services .h-100::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 40%;
	width: 100%;
	height: 70%;
	background: #b0c9ede0;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: blur(150px);
	z-index: -1;
}

.Services .m-0::before {
	display: none;
}

.Services .h-100 p {
	padding-right: 40px;
}
.navbar i {
	font-size: 30px;
}
i {font-size: 50px; color: #0b336b;}
footer i {font-size: 20px;color: #fff !important;}
/* ---------- Ikoner ---------- */
.Services i,
.Services .icon {
	width: 65px;
	height: 65px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: linear-gradient(135deg, #3567c4, #a9bdea);
	color: #ffffff;
	font-size: 30px;
	font-weight: 600;
	position: relative;
	z-index: 2;
	transition: all 0.25s ease;
}

/* Hover: lidt fintech micro-animation */
.Services .gap-3:hover .icon {
	transform: scale(1.07);
	box-shadow: 0 10px 24px rgba(13, 40, 90, 0.45);
}


/* ======== End of 1.4. Services section ======== */
/* ========= 1.5. Registration section ======== */



.Registration h2,
.Registration h5,
.Registration p {
	color: #000000;
}

.Registration h2 span {
	background-image: linear-gradient(115deg, #133b6c 35%, #7bc1ff 100%);
	color: transparent;
	display: inline-block;
	width: max-content;
	background-clip: text;
}

.Registration h2 {
	width: 82%;
	font-size: 3.5rem;
}

.Registration .col-lg-6:nth-child(1) p {
	padding: 10px 10px 10px 0px;
}

.Registration ul li {
	position: relative;
	padding: 0px 0px 0px 45px;
}

.Registration ul li h6 {
	color: #000000;
	font-weight: 500;
}

.Registration ul {
	gap: 45px;
}

.Registration ul li {
    position: relative;
    padding-left: 30px; /* giver plads til ikonet */
}

/* 1: Create account */
.Registration ul li:nth-child(1)::before {
    content: "\f007"; /* user */
}

/* 2: Verify identity */
.Registration ul li:nth-child(2)::before {
    content: "\f2f1"; /* id-card icon fx */
}

/* 3: Start transaction */
.Registration ul li:nth-child(3)::before {
    content: "\f09d"; /* credit-card icon */
}

/* Fælles styling */
.Registration ul li::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 20px;
    color: #000;
    position: absolute;
    left: 0;
    top: 0;
}


.Registration .gap-md-4 {
	margin: 50px 0px 0px;
}

.Registration .position-relative {
	width: fit-content;
}

.Registration .position-relative::before {
	content: "";
	position: absolute;
	top: 38%;
	left: 63%;
	background: linear-gradient(45deg, #8cafd7 40.6%, #437ebd 91.37%);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
	width: 550px;
	height: 550px;
}

.Registration .position-relative::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 140%;
	height: 80%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: blur(100px);
	z-index: -2;
}

.Registration .gap-lg-3 {
	padding: 20px 70px 14px 16px;
	background-color: #e1e8f0;
	border-radius: 16px;
	width: fit-content;
}

.Registration .gap-lg-3 figure {
	width: 26px;
	height: 26px;
	background-color: #FFFFFF;
	border-radius: 8px;
}

.Registration .gap-lg-3 .p-0 {
	color: #868894;
	font-size: 12px;
}

.Registration img[alt="monthly_Graph"] {
	position: relative;
	left: -13%;
}

/* ========= End of 1.5. Registration section ======== */
/* ======== 1.6. Download section ======== */

.Download {
	margin-top: 10vh;
	margin-bottom: 20vh;
	border-image-source: linear-gradient(102.05deg, #6d93d6 40.6%, #7bccff 91.37%);
	border-image-slice: 1;
}

.Download h6,
.Download h5,
.Download p,
.Download h2 {
	color: #000000;
}

.Download h2 span {
	background-image: linear-gradient(115deg, #254f86 35%, #7bb4ff 100%);
	color: transparent;
	display: inline-block;
	width: max-content;
	background-clip: text;
}

.Download p {
	padding: 25px 0px 45px;
}

.Download h6,
.Download h5 {
	font-weight: 600;
}

.Download .gap-lg-3 p {
	padding: 0px;
	font-size: 12px;
	line-height: 14px;
}

.Download figure.h-100 {
	width: fit-content;
}

.Download img[alt="download_Img"] {
	width: 100%;
	position: relative;
}

.Download figure.h-100::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 150%;
	height: 100%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: blur(80px);
	z-index: -1;
}

.Download .gap-lg-3 a {
	background: linear-gradient(100.57deg, rgba(6, 93, 164, 0.2) 12.93%, rgba(123, 163, 255, 0.2) 121.02%);
	border-radius: 10px;
	padding: 20px 22px;
	transition: 0.3 ease all;
}

.Download .gap-lg-3 a:hover {
	background: transparent;
}

.Download .justify-content-end {
	padding: 90px 0px 80px;
	position: relative;
	z-index: 1;
}

/* ======== End of 1.6. Download section ======== */
/* ======== 1.7. Benefits section ======== */

.Benefits h2 {
	color: #000000;
	padding-right: 100px;
}

.Benefits p {
	color: #000000;
	font-weight: 700;
}

.Benefits h5 {
	color: #000000;
}

.Benefits h2 span {
	background: linear-gradient(102.05deg, #214b78 40.6%, #7bb4ff 91.37%);
	color: transparent;
	background-clip: text;
}

.Benefits .gap-4 figure {
	width: 60px;
}

.Benefits .align-items-center figure {
	width: 45px;
}

.Benefits .position-absolute {
	background: linear-gradient(110.78deg, #21438b 3.23%, #7bd1ff 107.68%);
	border-radius: 10px;
	top: 50%;
	right: -30%;
	transform: translateY(-50%);
	width: 53%;
}

.Benefits .position-absolute p {
	color: #ffffff;
	font-weight: 400;
}

.Benefits .position-absolute figure {
	width: 40px;
	background: linear-gradient(160.27deg, #204274 9.09%, #9ab8d1 151.6%) no-repeat;
	height: 40px;
	border-radius: 50%;
	color: #000000;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.Benefits .gap-4 figure:nth-child(2) {
	background: linear-gradient(137.28deg, #36588b 1.84%, #759ac2 98.16%) no-repeat;
	border-radius: 50%;
	height: 60px;
	margin: 35px 0px;
	transform: translateX(-120%);
}

.Benefits .py-4 {
	padding-left: 70px;
}

.Benefits figure:nth-child(2) img {
	width: 30px;
	border-radius: 0;
}

.Benefits .gap-4 img {
	width: 60px;
	border-radius: 50%;
}

.Benefits .gap-3 img {
	width: 45px;
}

.Benefits .col-lg-7 .position-relative {
	background: #ffffff;
	width: 75%;
	border-radius: 5px;
	padding: 40px 40px;
}

.Benefits .position-relative .gap-5 {
	width: 60%;
}

.Benefits .flex-column.gap-3 .gap-4 {
	background: #ffffff;
	padding: 18px 35px;
	border-radius: 5px;
	border: 1px solid #234478;
}

.Benefits .col-lg-5 figure::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 40%;
	width: 100%;
	height: 70%;
	background: #25539e81;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: blur(100px);
	z-index: -1;
}

/* ======== End of 1.7. Benefits section ======== */
/* ======== 1.8. Testimonials section ======== */

.Testimonials {
	padding: 100px 0px;
}

.Testimonials h3 {
	color: #FFF;
}

.Testimonials h2 {
	color: #FFF;
	padding-right: 50px;
}

.Testimonials p {
	color: #FFF;
}

.Testimonials h6 {
	color: #FFF;
}

.Testimonials .ps-lg-5 {
	gap: 40px;
}

.Testimonials .flex-row {
	gap: 80px;
}

.Testimonials .flex-column .position-relative {
	width: 85%;
	padding: 30px 45px;
	border-radius: 10px;
	background: linear-gradient(160.27deg, #962EFF 9.09%, #2F06B1 151.6%);
}

.Testimonials .flex-column .position-relative:nth-child(6),
.Testimonials .flex-column .position-relative:nth-child(2) {
	background: linear-gradient(104.27deg, #1D123A 35.79%, #FFA37B 136.37%);
	align-self: flex-end;
}

.Testimonials .flex-column .position-relative:nth-child(3) {
	background: linear-gradient(100.57deg, #3006A4 12.93%, #FFA37B 121.02%);
}

.Testimonials .position-absolute {
	top: -7px;
	right: 40px;
}

.Testimonials .py-md-1 p {
	font-weight: 500;
}

.Testimonials p.p-0 {
	font-size: 14px;
	line-height: 20px;
}

.Testimonials i {
	color: #C69E0C;
	font-size: 12px;
}

.Testimonials img {
	width: 80px;
	border-radius: 50%;
}

.Testimonials .position-absolute img {
	width: 30px;
	border-radius: 0;
}

.Testimonials .col-md-6:nth-child(1) .h-100::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 40%;
	width: 100%;
	height: 70%;
	background: #7a259e81;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: blur(100px);
	z-index: -1;
}

.Testimonials .col-md-6:nth-child(1) .m-0::before {
	display: none;
}

.Testimonials.m-0 h2 {
	padding: 0px 24px;
}

.Testimonials.m-0 p.py-0 {
	padding: 0px 230px;
}

.Testimonials.m-0 .pt-5 {
	gap: 40px;
}

.Testimonials .flex-wrap .position-relative:nth-child(1),
.Testimonials .flex-wrap .position-relative:nth-child(5) {
	background: linear-gradient(102.05deg, #836DD6 40.6%, #FFA37B 91.37%);

}

.Testimonials .flex-wrap .position-relative {
	width: 40% !important;
	flex-grow: 1;
}

.Testimonials.m-0 {
	position: relative;
}

.Testimonials.m-0::before {
	content: '';
	position: absolute;
	top: 50%;
	right: 0%;
	width: 30%;
	height: 30%;
	background: #7a259e81;
	border-radius: 50%;
	filter: blur(100px);
	z-index: -1;
}

.Testimonials.m-0 .flex-column .position-relative:nth-child(6),
.Testimonials.m-0 .flex-column .position-relative:nth-child(2) {
	align-self: unset;
}

/* ======== End of 1.8. Testimonials section ======== */
/* ======== 1.9. Pricing section ======== */

.Pricing {
	padding: 100px 0px;
	border-left: none;
	border-right: none;
	border-image: linear-gradient(102.05deg, #6da3d6 40.6%, #a0bed6 91.37%) 1;
}

.Pricing .row {
	row-gap: 40px;
}

.Pricing h4 {
	color: #000000;
}

.Pricing h2 {
	color: #000000;
	font-weight: 600;
}

.Pricing h2 span {
	background: linear-gradient(102.05deg, #204b91 40.6%, #7bc4ff 91.37%);
	background-clip: text;
	color: transparent;
}

.Pricing p {
	color: #000000;
	margin: 10px;
}

.Pricing figure::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: blur(100px);
	z-index: -1;
}

.Pricing img {
	width: 85%;
}

.Pricing .h-100.gap-4 {
	border: 2px solid #1d4e72;
	border-radius: 20px;
	padding: 50px 80px 45px;
}

.Pricing .h-100.gap-4:hover {
	border: 1px solid #062bb1;
}

.Pricing .gap-4 h2 {
	background: linear-gradient(102.05deg, #19416e 40.6%, #7bb6ff 91.37%);
	color: transparent;
	background-clip: text;
	font-size: 60px;
	line-height: 90px;
}

.Pricing .align-items-center p {
	padding-right: 100px;
	font-weight: 500;
}

.Pricing.mx-0 {
	margin: 100px 0px;
}

.Pricing.mx-0 .row {
	row-gap: 35px;
}

.pricing-tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.tab-btn {
  padding: 12px 30px;
  border-radius: 30px;
  background: transparent;
  cursor: pointer;
  font-weight: 500;
}

.tab-btn.active {
		background: linear-gradient(100.57deg, #19458d 12.93%, #b3cce0 121.02%);

  color: #fff;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.pricing-card {
  padding: 35px;
  border-radius: 16px;
  border: 1px solid #eee;
  background: #fff;
}

.pricing-card.featured {
  border: 2px solid #142770;
}

/* ======== End of 1.9. Pricing section ======== */
/* ======== 1.10. Blog section ======== */

.Blog {
	padding: 100px 0px;
	position: relative;
}

.Blog::before {
	content: '';
	position: absolute;
	top: 60%;
	left: 10%;
	width: 30%;
	height: 50%;
	background: #1655a7b7;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: blur(150px);
	z-index: -2;
}

.Blog h2,
.Blog p,
.Blog h4 {
	color: #ffffff;
}

.Blog h4 {
	font-weight: 600;
}

.Blog .mx-auto p {
	padding: 12px 300px 70px;
}

.Blog figure {
	width: 100%;
}

.Blog img[alt="blog_img1"] {
	width: -webkit-fill-available;
}

.Blog img {
	width: 100%;
	border-radius: 10px;
	height: 100%;
	object-fit: cover;
}

.Blog .border-1 {
	border: 1px solid #711FE3;
	border-radius: 10px;
}

.Blog .border-1:hover {
	border: 1px solid #2F06B1;
}

.Blog .col-lg-9 .border-1 .flex-column {
	padding: 65px 22px;
}

.Blog .col-lg-9 .border-1.flex-column {
	padding: 65px 20px;
	width: 59%;
}

.Blog .col-lg-9 .border-1 p {
	padding: 20px 0px 30px;
}

.Blog .col-lg-3 .border-1 .flex-column {
	padding: 35px 10px 20px 15px;
}

.Blog .col-lg-3 .border-1 .flex-column p {
	padding: 20px 2px 30px 0px;
}

.Blog a {
	color: #ffffff;
	transition: 0.3s ease all;
}

.Blog a:hover {
	background: linear-gradient(102.05deg, #836DD6 40.6%, #FFA37B 91.37%);
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* ======== End of 1.10. Blog section ======== */
/* ======== 1.11. FAQs section ======== */

.FAQs h2 {
	color: #000000;
}

.FAQs p {
	color: #000000;
	padding: 24px 20px 40px 0px;
}

.FAQs h2 span {
	background: linear-gradient(102.05deg, #1f5174 40.6%, #abcee8 91.37%);
	color: transparent;
	background-clip: text;
}

.FAQs .col-lg-7 {
	padding-right: 130px;
}

.FAQs .accordion {
	gap: 40px;
}

.FAQs .accordion-item {
	color: #FFF;
	border-radius: 10px;
	background-color: transparent;
	overflow: hidden;
}

.FAQs .accordion-item:last-child {
	border-bottom: 1px solid #25479e;
}

.FAQs .accordion-button {
	color: #000000;
	font-size: 16px;
	font-weight: 600;
	padding: 22px 30px;
}

.FAQs .accordion-button::after {
	background: none !important;
	font-size: 24px;
	content: "\f067";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
}

.FAQs .accordion-button:focus {
	box-shadow: none;
}

.FAQs .accordion-button:not(.collapsed)::after {
	content: "\f068";
}

.FAQs .accordion-button:not(.collapsed) {
	border-bottom: 1px solid #7A259E;
}

.FAQs .accordion-body {
	padding: 35px 24px;
}

.FAQs .accordion-body p {
	padding: 0;
}

.FAQs img {
	width: 100%;
	border-radius: 20px;
}

.FAQs figure::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 40%;
	width: 100%;
	height: 70%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: blur(100px);
	z-index: -1;
}

/* ======== End of 1.11. FAQs section ======== */
/* ======== 1.12. Footer section ======== */

footer {
	padding: 50px 0px 0px;
	margin-top: 20vh;
	position: relative;
	background: #192c61; /* Cobalt blå */
	color: #ffffff;
}

/* Baggrunds-glow justeret til blå toner */
footer::before {
	content: '';
	position: absolute;
	top: 70%;
	left: 50%;
	width: 50%;
	height: 60%;
	background: #2f4eaab7;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: blur(180px);
	z-index: -2;
}

/* Alt tekst → hvid */
footer input::placeholder,
footer p,
footer h6,
footer h5,
footer h2 {
	color: #ffffff;
}

footer h5 {
	font-weight: 600;
}

/* FORM */
footer form {
	margin: 0px 0px 70px;
}

footer form input {
	padding: 25px 45px;
	background-color: transparent;
	border: 2px solid #ffffff;
	border-radius: 10px;
	color: #ffffff;
	width: 25%;
	font-size: 16px;
}

/* BUTTON */
footer .hover1 {
	padding: 25px 35px;
	color: #ffffff;
	font-size: 18px;
	border-radius: 10px;
	background-color: transparent;
}

footer .hover1::before {
	border-radius: 10px;
}

/* Lister */
footer ul li,
footer ul li a {
	font-size: 14px;
	color: #ffffff;
	font-weight: 200;
}

footer ul li a:hover {
	color: #2e558a;
}

/* Ikoner */
footer .gap-lg-4 figure {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1px solid white;
}

footer .gap-lg-4 figure:hover {
	border: 1px solid #ffffff;
	background: none;
}

footer .gap-lg-4 figure i {
	color: #ffffff;
	font-size: 20px;
}

/* Gradient-tekst for "span"-links */
footer li a span {
	font-size: 14px;
	font-weight: 200;
	padding: 10px 0px 0px;
	background: linear-gradient(102.05deg, #8cbcff 40.6%, #ffffff 91.37%);
	background-clip: text;
	-webkit-text-fill-color: transparent;
	transition: 0.4s ease all;
}

footer li a span:hover {
	background: linear-gradient(160.27deg, #ffffff 9.09%, #7bb1ff 151.6%);
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Dividers */
footer .justify-content-between {
	padding: 70px 0px;
}

/* CTA boks */
footer .p-0 .gap-lg-3 a {
	background: rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 20px 22px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	transition: 0.3s ease all;
	color: #ffffff;
}

footer .p-0 .gap-lg-3 a:hover {
	background: transparent;
	border-color: #ffffff;
}

/* Logo */
footer img[alt="logo"] {
	width: 237px;
	filter: brightness(10); /* gør logo hvidt hvis det er mørkt */
}

footer a{font-size: 14px;font-weight: 400;}

/* ======== End of 1.12. Footer section ======== */
/* ======== 2.1. subpage_hero section ======== */

.Subpage_Hero {
	position: relative;
}

.Subpage_Hero::before {
	content: '';
	position: absolute;
	top: 30%;
	left: 50%;
	width: 70%;
	height: 100%;
	background: #18167a;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: blur(200px);
	z-index: -1;
}

.Subpage_Hero .text-center {
	background: linear-gradient(104.27deg, #1D123A 35.79%, #FFA37B 136.37%);
	border-radius: 20px;
	padding: 60px 0px;
}

.Subpage_Hero .text-center h2,
.Subpage_Hero .text-center p {
	color: #ffffff;
}

.Subpage_Hero .text-center h2 {
	font-weight: 600;
}

.Subpage_Hero .text-center p {
	padding: 30px 270px 0px;
}

/* ======== End of 2.1. subpage_hero section ======== */
/* ======== 2.2. Mission section ======== */

.Mission h5 {
	background-image: linear-gradient(115deg, #836DD6 35%, #FFA37B 100%);
	color: transparent;
	display: inline-block;
	width: max-content;
	background-clip: text;
	padding: 0px 0px 10px;
}

.Mission .position-relative::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 30%;
	width: 130%;
	height: 100%;
	background: #5C167A;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: blur(240px);
	z-index: -1;
}

.Mission h2,
.Mission p {
	color: #ffffff;
}

.Mission p {
	padding: 20px 0px 40px;
}



/* ======== End of 2.2. Mission section ======== */
/* ======== 2.3. Online section ======== */

.Online {
	margin: 100px 0px;
	background: #150C23;
	border-top: 1px solid;
	border-bottom: 1px solid;
	border-image-source: linear-gradient(102.05deg, #836DD6 40.6%, #FFA37B 91.37%);
	border-image-slice: 1;
}

.Online h6,
.Online h5,
.Online p,
.Online h2 {
	color: #FFFFFF;
}

.Online h2 span {
	background-image: linear-gradient(115deg, #836DD6 35%, #FFA37B 100%);
	color: transparent;
	display: inline-block;
	width: max-content;
	background-clip: text;
}

.Online .text-md-start {
	padding: 130px 0px;
}

.Online .text-md-start p {
	padding: 30px 0px 40px;
	width: 85%;
}

.Online figure {
	width: 100%;
	transform: scale(1.1);
	bottom: 5%;
	right: 10%;
	height: 100%;
}

.Online figure::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 70%;
	background: #5C167A;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: blur(200px);
	z-index: -1;
}

.Online .h-100 {
	gap: 30px;
}

.Online .col-xl-2 .text-center {
	padding: 40px 25px;
	border: 1px solid #711FE3;
	border-radius: 10px;
}

/* ======== End of 2.3. Online section ======== */
/* ======== 2.4. Team section ======== */

.Team {
	padding: 100px 0px;
}

.Team img {
	object-fit: cover;
	border-radius: 10px;
}

.Team .position-absolute {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(102.05deg, rgba(131, 109, 214, 0.7) 40.6%, rgba(255, 163, 123, 0.7) 91.37%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity 0.3s ease;
	border-radius: 10px;
}

.Team .position-relative:hover .position-absolute {
	opacity: 1;
}

.Team h2,
.Team h4,
.Team p,
.Team .position-absolute .d-flex {
	color: #ffffff;
}

.Team .position-absolute p {
	padding: 20px 0px;
}

.Team .position-absolute .d-flex a {
	color: #ffffff;
	font-size: 16px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(137.28deg, #9E38F0 1.84%, #C27587 98.16%);
	box-shadow: 3.98px 3.98px 3.19px 0px #00000040 inset;
}

.Team .position-absolute .d-flex a:hover {
	background: linear-gradient(102.05deg, #836DD6 40.6%, #FFA37B 91.37%);
}

.Team .text-md-start p {
	padding: 30px 0px 50px;
}

.Team .text-md-start {
	position: relative;
}

.Team .text-md-start::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 60%;
	width: 100%;
	height: 100%;
	background: #5C167A;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: blur(180px);
	z-index: -1;
}

/* ======== End of 2.4. Team section ======== */
/* ======== 3.1. Features section ======== */

.Features h2 {
	color: #FFF;
	padding: 0px 100px 0px 0px;
}

.Features h2 span {
	background: linear-gradient(102.05deg, #836DD6 40.6%, #FFA37B 91.37%);
	color: transparent;
	background-clip: text;
}

.Features .position-relative figure::before {
	content: '';
	position: absolute;
	top: 70%;
	left: 50%;
	width: 50%;
	height: 60%;
	background: #5C167A;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: blur(180px);
	z-index: -2;
}

.Features .position-relative img {
	border-radius: 10px;
}

.Features .position-absolute {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.Features .position-absolute i {
	color: #FFF;
	font-size: 50px;
	width: 120px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(102.05deg, #836DD6 40.6%, #FFA37B 91.37%);
	border-radius: 50%;
	animation: pulse 2s infinite;
	transition: 0.3s ease all;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.7);
	}

	70% {
		box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
	}

	100% {
		box-shadow: 0 0 0 25px rgba(255, 255, 255, 0);
	}
}

.Features .modal-dialog {
	max-width: unset;
	width: 80%;
}

.Features .modal-content {
	background-color: transparent;
	backdrop-filter: none;
}

.Features .modal-content button {
	opacity: 1;
	visibility: hidden;
	position: absolute;
	right: 10px;
	top: 0px;
	z-index: 1;
}

.Features .modal-content i {
	color: #FFF;
	visibility: visible;
	font-size: 28px;
	transition: color 0.3s ease;
}

.Features .modal-content button:hover i {
	color: #777777;
}

.Features .modal-body {
	width: 700px;
}

.Features iframe {
	border: none;
	width: 100%;
	border-radius: 18px;
	width: 100%;
	height: 400px;
}

.Features h5 {
	color: #FFF;
}

.Features p {
	color: #FFF;
}

.Features .flex-lg-column {
	gap: 30px;
}

.Features .gap-3 {
	padding: 30px 60px;
	border-radius: 20px;
}

.Features .gap-3 img {
	width: 60px;
}

.Features .gap-3:nth-child(5),
.Features .gap-3:nth-child(6),
.Features .gap-3:nth-child(1) {
	background: linear-gradient(110.78deg, #962EFF 3.23%, #FFA37B 107.68%);
}

.Features .gap-3:nth-child(2) {
	background: linear-gradient(102.05deg, #836DD6 40.6%, #FFA37B 91.37%);
}

.Features .gap-3:nth-child(3) {
	background: linear-gradient(100.57deg, #3006A4 12.93%, #FFA37B 121.02%);
}

.Features .gap-3:nth-child(4) {
	background: linear-gradient(160.27deg, #962EFF 9.09%, #2F06B1 151.6%);
}

.Features .gap-3:nth-child(5) {
	background: linear-gradient(110.78deg, #962EFF 3.23%, #FFA37B 107.68%);
}

.Features .gap-3:nth-child(6) {
	background: linear-gradient(110.78deg, #962EFF 3.23%, #FFA37B 107.68%);
}

/* ======== End of 3.1. Features section ======== */
/* ======== 8.1. BlogDetails_Hero section ======== */

.BlogDetails_Hero {
	position: relative;
}

.BlogDetails_Hero::before {
	content: '';
	position: absolute;
	top: 25%;
	left: 50%;
	width: 50%;
	height: 60%;
	background: #5C167A;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: blur(180px);
	z-index: -2;
}

.BlogDetails_Hero h2 {
	color: #FFF;
	text-align: center;
}

.BlogDetails_Hero p {
	color: #FFF;
}

.BlogDetails_Hero .position-relative {
	padding: 80px 95px 45px;
}

.BlogDetails_Hero img {
	border-radius: 20px;
}

.BlogDetails_Hero .position-relative::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 40%;
	background: linear-gradient(104.27deg, #1D123A 35.79%, #FFA37B 136.37%);
	border-radius: 20px;
}

.BlogDetails_Hero iframe {
	height: 550px;
	border-radius: 20px;
}

/* ======== End of 8.1. BlogDetails_Hero section ======== */
/* ======== 8.2. Details section ======== */

.Details p {
	color: #FFF;
}

.Details h4 {
	color: #FFF;
}

.Details .gap-md-5 {
	padding: 0px 95px;
}

.Details img {
	border-radius: 20px;
}

.Details ul {
	list-style: disc inside;
}

.Details li {
	color: #FFF;
}

.Details figure {
	width: 40%;
}

.Details figure::before {
	content: '';
	position: absolute;
	top: 65%;
	left: 20%;
	width: 100%;
	height: 100%;
	background: #5C167A;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: blur(150px);
	z-index: -1;
}

.Details .py-4 {
	padding-right: 230px;
}

.Details .justify-content-center {
	width: 60%;
}

.Details hr {
	border: 1px solid;
	border-image: linear-gradient(102.05deg, #836DD6 40.6%, #FFA37B 91.37%) 1;
	margin: 0;
}

/* ======== End of 8.2. Details section ======== */
/* ======== 8.3. Comment section ======== */

.Comment .pt-md-5 {
	padding: 0px 95px;
}

.Comment h6 {
	color: #FFF;
}

.Comment form {
	width: 80%;
}

.Comment textarea,
.Comment input {
	background: linear-gradient(102.05deg, rgba(131, 109, 214, 0.1) 40.6%, rgba(255, 163, 123, 0.1) 91.37%);
	border: none;
	color: #FFF;
	padding: 24px 24px;
}

.Comment textarea:focus {
	outline: none;
}

.Comment button {
	background-color: transparent;
}

/* ======== End of 8.3. Comment section ======== */
/* ======== 9.1. Contact_Details section ======== */

.Contact_Details {
	padding: 100px 0px;
	position: relative;
}

.Contact_Details::before {
	content: '';
	position: absolute;
	top: 70%;
	left: 75%;
	width: 50%;
	height: 70%;
	background: #5C167A;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: blur(210px);
	z-index: -1;
}

.Contact_Details h2,
.Contact_Details h4,
.Contact_Details p {
	color: #ffffff;
}

.Contact_Details h2 {
	padding: 0px 0px 50px;
}

.Contact_Details figure {
	width: 58px;
	height: 58px;
	background: linear-gradient(102.05deg, #836DD6 40.6%, #FFA37B 91.37%);
	border-radius: 50%;
	padding: 18px;
}

.Contact_Details figure i {
	font-size: 28px;
	color: #ffffff;
}

.Contact_Details a {
	width: 30%;
	display: inline-block;
}

.Contact_Details .text-start {
	gap: 20px;
	background: linear-gradient(100.57deg, #3006A4 12.93%, #FFA37B 121.02%);
	padding: 35px;
	border-radius: 20px;
}

.Contact_Details .text-start:hover {
	background: linear-gradient(102.05deg, #836DD6 40.6%, #FFA37B 91.37%);
}

.Contact_Details h4 {
	font-weight: 500;
}

.Contact_Details .text-start p {
	padding: 8px 0px 0px;
	flex-grow: 1;
}

/* ======== End of 9.1. Contact_Details section ======== */
/* ======== 9.2. Contact section ======== */

.Contact h2 {
	color: #ffffff;
	padding: 0px 0px 50px;
}

.Contact form {
	width: 80%;
	gap: 40px;
	background: linear-gradient(102.05deg, rgba(131, 109, 214, 0.1) 40.6%, rgba(255, 163, 123, 0.1) 91.37%);
	border-radius: 20px;
	padding: 85px;
}

.Contact form .d-flex {
	gap: 40px;
}

.Contact input,
.Contact textarea {
	width: 100%;
	padding: 14px 20px;
	background: linear-gradient(102.05deg, rgba(131, 109, 214, 0.1) 40.6%, rgba(255, 163, 123, 0.1) 91.37%);
	border-radius: 3px;
	border: 1px solid #112263;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 500;
	outline: none;
}

.Contact input[type="number"]::-webkit-outer-spin-button,
.Contact input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.Contact input::placeholder,
.Contact textarea::placeholder {
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 500;
}

.Contact .hover2 {
	background-color: transparent;
	border: 1px solid #1c176a;
	width: fit-content;
}

.Contact .hover2:hover {
	border: 1px solid transparent;
}

/* ======== End of 9.2. Contact section ======== */
/* ======== 10.1. Error_404 section ======== */

.Error_404 {
	padding: 100px 0px;
}

.Error_404 h2,
.Error_404 p {
	color: #ffffff;
}

.Error_404 h2 span {
	background-image: linear-gradient(115deg, #836DD6 35%, #FFA37B 100%);
	color: transparent;
	display: inline-block;
	width: max-content;
	background-clip: text;
}

.Error_404 p {
	padding: 35px 0px 40px;
	width: 67%;
}

.Error_404 .position-relative::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	background: #5C167A;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: blur(200px);
	z-index: -1;
}

/* ======== End of 10.1. Error_404 section ======== */
/* ======== 11.1. ComingSoon section ======== */

.ComingSoon {
	padding: 100px 0px;
}

.ComingSoon h1 {
	background-image: linear-gradient(115deg, #836DD6 35%, #FFA37B 100%);
	color: transparent;
	display: inline-block;
	background-clip: text;
	width: 95%;
}

.ComingSoon h1 span {
	width: max-content;
}

.ComingSoon p {
	color: #ffffff;
	padding: 20px 0px 60px;
}

.ComingSoon .position-relative::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	background: #5C167A;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: blur(210px);
	z-index: -1;
}


.container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

/* HERO */
.otc-hero {
  padding: 220px 0;
  background-image: url(/assets/images/im-79617874.avif);
  background-size: cover;
  background-position: center;
  color: #ffffff;
}

.otc-hero h1 {
  font-size: 60px;
  margin-bottom: 20px;
}


.otc-hero h1 span 
{
	background: linear-gradient(102.05deg, #0d285a 40.6%, #7ba5ff 91.37%);
	color: transparent;
	background-clip: text;
}
.otc-hero p {
  max-width: 600px;
  line-height: 1.6;
}

.hero-actions {
  margin-top: 30px;
  display: flex;
  gap: 20px;
}




/* WHY */
.otc-why {
  padding: 100px 0;
}



.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  margin-top: 50px;
}

.feature {
  padding: 30px;
  border-radius: 14px;
  background: #ffffff;
}

.feature i {
  font-size: 22px;
  color: #142770;
  margin-bottom: 12px;
}

/* STEPS SECTION */
.otc-steps {
  padding: 120px 0;
  background: linear-gradient(180deg, #e9edf4 0%, #f6f8fc 100%);
  position: relative;
  overflow: hidden;
}

/* subtle background graphic */
.otc-steps::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(20,39,112,0.08), transparent 70%);
}

/* GRID */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  margin-top: 50px;
  position: relative;
  z-index: 1;
}

/* STEP CARD */
.step {
  position: relative;
  padding: 36px 30px 32px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f8faff);
  box-shadow:
    0 10px 30px rgba(20, 39, 112, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.6);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}



/* hover lift */
.step:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 45px rgba(20, 39, 112, 0.15),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

/* STEP NUMBER */
.step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 700;
  color: #142770;
  background: linear-gradient(135deg, #e6ebff, #ffffff);
  box-shadow: 0 8px 20px rgba(20, 39, 112, 0.15);
  margin-bottom: 18px;
}

/* STEP TEXT */
.step p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #2b3348;
}

.step strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  color: #0f1f5c;
}

/* optional: icon inside number */
.step span i {
  font-size: 18px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .otc-steps {
    padding: 90px 0;
  }
}


/* ASSETS */
.otc-assets {
  padding: 80px 0;
  text-align: center;
}

.asset-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
  justify-content: center;
  color: white;

}

.asset-list span {
  padding: 10px 18px;
  border-radius: 999px;
  background: #0b3663;
  font-weight: 600;

}

/* CTA */
.otc-cta {
  padding: 100px 0;
  background: #082756;
  color: #fff;
  text-align: center;
}

.otc-cta span {

	background: linear-gradient(102.05deg, #717fb3 40.6%, #7ba5ff 91.37%);
	color: transparent;
	background-clip: text;

}

.otc-cta p {
  max-width: 600px;
  margin: 20px auto 30px;
}


/* FAQ SECTION */
.faq {
  max-width: 900px;
  margin-top: 50px !important;
  margin: auto;
}

/* FAQ ITEM */
.faq details {
  position: relative;
  padding: 22px 24px;
  margin-bottom: 14px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow:
    0 10px 30px rgba(20, 39, 112, 0.08);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* hover lift */
.faq details:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 40px rgba(20, 39, 112, 0.12);
}

/* OPEN STATE */
.faq details[open] {
  background: linear-gradient(180deg, #ffffff, #f4f7ff);
}

/* SUMMARY */
.faq summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  color: #0f1f5c;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* remove default marker */
.faq summary::-webkit-details-marker {
  display: none;
}

/* PLUS ICON */
.faq summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 400;
  color: #142770;
  transition: transform 0.3s ease;
}

/* rotate on open */
.faq details[open] summary::after {
  transform: rotate(45deg);
}

/* ANSWER */
.faq p {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: #2b3348;
}

.faq .section-title {
  text-align: center; margin-bottom:50px;
}



/* responsive */
@media (max-width: 768px) {
  .faq details {
    padding: 20px;
  }
}


@media (max-width: 900px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

/* WHO WE SERVE */
.who-we-serve {
  padding: 120px 20px;
  background: #ffffff;
  text-align: center;
}

.who-we-serve h2 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #000000;
  margin-bottom: 15px;
}



.container {
  max-width: 1200px;
  margin: 0 auto;
}

.serve-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 60px;
}

.serve-card {
  padding: 10px;
}

.serve-card .icon {
  width: 90px;
  height: 90px;
  margin: 0 auto 30px;
  border-radius: 50%;
  border: 2px solid #1f2f6a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.serve-card i {
  font-size: 36px;
  color: #1f2f6a;
}

.serve-card h4 {
  font-size: 20px;
  font-weight: 600;
  color: #000;
  margin-bottom: 14px;
}

.serve-card p {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
  max-width: 260px;
  margin: 0 auto;
}

/* Hover – subtil fintech feel */
.serve-card:hover .icon {
  background: #1f2f6a;
}

.serve-card:hover i {
  color: #ffffff;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .who-we-serve h2 {
    font-size: 32px;
  }

  .serve-grid {
    gap: 40px;
  }
}



    /* CONTACT SECTION */
    .contact-section {
      padding: 90px 0;
      position: relative;
      overflow: hidden;
    }


    .contact-wrapper {
      position: relative;
      z-index: 1;
    }

    .contact-visual {
      border-radius: 24px;
      padding: 40px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .contact-visual video,
    .contact-visual img {
      max-width: 100%;
      border-radius: 18px;
    }

    .contact-content h2 {
      font-size: 42px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .contact-content h2 span {
	background-image: linear-gradient(115deg, #1e439c 35%, #82a1cd 100%);
	color: transparent;
	display: inline-block;
	width: max-content;
	background-clip: text;
    }

    .contact-content p {
      color: #000000;
      max-width: 520px;
    }

    .contact-card {
      margin-top: 40px;
      border-radius: 20px;
      padding: 40px;
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.104);
    }

    .contact-card label {
      font-size: 14px;
      color: #000000;
      margin-bottom: 6px;
    }

    .contact-card input,
    .contact-card textarea,
    .contact-card select {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 12px;
      padding: 14px 16px;
      color: #000000;
      width: 100%;
    }

    .contact-card input:focus,
    .contact-card textarea:focus,
    .contact-card select:focus {
      outline: none;
      border-color: #000000;
    }

    .contact-card textarea {
      resize: none;
      min-height: 120px;
    }

   


    .contact-info {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 24px;
      margin-top: 60px;
    }

    .info-box {
      background: rgba(255,255,255,0.04);
      border-radius: 18px;
      padding: 28px;
	        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.111);

    }

    .info-box h5 {
      font-size: 16px;
      margin-bottom: 8px;
      color: #000000;
    }

    .info-box p {
      margin: 0;
      font-size: 14px;
      color: #000000;
    }

    @media (max-width: 991px) {
      .contact-content h2 {
        font-size: 34px;
      }
    }


	  




/* ---------------- CONTAINER ---------------- */
.wrapper {
  max-width: 1200px;
  margin: auto;
  padding: 80px 20px;
}

/* ---------------- HEADER ---------------- */
.page-title {
  text-align: center;
  margin-bottom: 40px;
}

.page-title h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
}

.page-title span {
  background: linear-gradient(90deg,#0f3156,#3091d2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------------- TABS ---------------- */
.tabs {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.tab-btn {
  padding: 14px 28px;
  border-radius: 50px;
  background: #ffffff;
  color: #000000;
  border: 1px solid #2a2f45;
  cursor: pointer;
  font-weight: 600;
  transition: 0.25s ease;
}

.tab-btn:hover {
  background: #ffffff;
}

.tab-btn.active {
  background: linear-gradient(90deg,#0f3156,#3091d2);

  color: #ffffff;
  border-color: transparent;
}

/* ---------------- CONTENT ---------------- */
.tab-content {
  display: none;
  animation: fadeIn 0.4s ease forwards;
}

.tab-content.active {
  display: block;
}

.content-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 50px;
  align-items: center;
}

@media(max-width:900px) {
  .content-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* ---------------- TEXT ---------------- */
.tag {
  display: inline-block;
  padding: 8px 16px;
    background: white;

  color: #000000;
  border-radius: 50px;
  font-size: 1rem;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
  border: solid 1px #2a2f45;
}

h2 {
  font-size: clamp(1.8rem,3vw,2.5rem);
  margin-bottom: 20px;
}

p {
  opacity: 0.85;
  line-height: 1.7;
  margin-bottom: 25px;
}

ul.features {
  list-style: none;
  display: grid;
  gap: 12px;
}

ul.features li {
  display: flex;
  gap: 10px;
  align-items: center;
}

ul.features li::before {
  content: "✔";
  color: #163958;
}

/* ---------------- CTA ---------------- */
.cta {
  margin-top: 30px;
}

.cta a {
  display: inline-block;
  padding: 14px 34px;
  border-radius: 40px;
    background: linear-gradient(90deg,#0f3156,#3091d2);

  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease;
}

.cta a:hover {
  transform: translateY(-2px);
}

/* ---------------- MOCK IMAGE ---------------- */
.mock-image {
  position: relative;
  border-radius: 28px;
  padding: 10px;
 
;  overflow: hidden;
}

.mock-image img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 22px;
  display: block;
}


/* ---------------- ANIMATION ---------------- */
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(15px);}
  to {opacity: 1; transform: translateY(0);}
}

/* ---------------- BENEFIT GRID ---------------- */

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 80px;
}

@media (max-width: 900px) {
  .benefit-grid {
    grid-template-columns: 1fr;
  }
}

.benefit-card {
  border-radius: 28px;
  padding: 42px 36px;
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: default;
}

.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 60px rgba(0,0,0,0.08);
}

.benefit-card h3 {
  font-size: 1.4rem;
  margin-bottom: 12px;
  font-weight: 700;
  color: #0d1b2a;
}

.benefit-card p {
  font-size: 1rem;
  line-height: 1.6;
  color: #4a5568;
}

/* ICON */
.benefit-card .icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 22px;
}

/* COLORS */
.benefit-card.pink {
  background: #deecfb;
}


.benefit-card.blue {
  background: #deecfb;
}


.benefit-card.green {
  background: #deecfb;
}


.benefit-card.purple {
  background: #deecfb;
}


/* IMPORTANT: Allow sticky to work */
.wrapper,
.tab-content,
.site-wrapper {
  overflow: visible !important;
}

/* ---------------- DEVICE SECTION ---------------- */

.device-section {
  max-width: 1200px;
  margin: 120px auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 140px;
  position: relative;
  z-index: 2;
  background: #fff;
}



.device-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}

/* Reverse layout */
.device-row.reverse {
  grid-template-columns: 1fr 1fr;
}

.device-row.reverse .device-text {
  grid-column: 2;
}

.device-row.reverse .device-visual {
  grid-column: 1;
}

/* TEXT */
.device-text {
  max-width: 520px;
}

.device-text h2 {
  font-size: clamp(2.2rem, 4vw, 3rem);
  margin: 18px 0;
  font-weight: 800;
}

.device-text p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #4a5568;
}

/* PILL */
.pill {
  display: inline-block;
  background: #e9f8ef;
  color: #1c7c54;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

/* VISUAL CARD */
.device-visual {
  border-radius: 60px;
  padding: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.device-visual img {
  max-width: 150px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.25));
}

/* COLOR VARIANTS */
.device-visual.purple {
  background: #2d6a94;
}

.device-visual.blue {
  background: #2d6a94;
}




/* STACK WRAPPER */
.stack-wrapper {
  height: auto;   /* justér evt 240–300vh */
  position: relative;
}



/* CARD */
.stack-card {
  position: sticky;
  top: calc(120px + (var(--i) * 8px));
  margin: 0 auto;
  max-width: 1100px;
  height: 600px;
  padding: 60px;
  border-radius: 48px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.12);
  background: #fff;

  /* overlap */
  margin-top: 20px;

  /* layering */
  z-index: calc(10 + var(--i));
}

/* COLORS */
.stack-card.purple {   background: linear-gradient(135deg, #dbeafe, #bfdbfe);
 }
.stack-card.pink   { background: #c9dff1; }
.stack-card.blue   { background: #b4d4f2; }
.stack-card.green  { background: #9ec7e6; }

/* MOBILE */
@media (max-width: 900px) {
  .stack-wrapper {
    height: auto;
  }

  .stack-card {
    position: relative;
    margin: 40px auto;
    height: auto;
  }
}
/* ---------------- FEATURE CARD CONTENT ---------------- */

.feature-card {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

.feature-text h3 {
  font-size: clamp(2rem, 3vw, 2.6rem);
  margin: 18px 0 12px;
  font-weight: 800;
  color: #102a43;
}

.feature-text p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #4a647a;
  max-width: 420px;
}

/* pill */
.feature-pill {
  display: inline-block;
  background: #ffffff;
  color: #1a365d;
  padding: 8px 22px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* visual */
.feature-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-visual img {
  max-width: 260px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.18));
  border-radius: 20px;
}

/* Responsive */
@media (max-width: 900px) {
  .feature-card {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }

  .feature-text p {
    margin: auto;
  }
}

/* ---------------- PAYMENT TYPES ---------------- */

/* ---------------- PAYMENT TYPES ---------------- */

.payment-types {
  max-width: 1200px;
  margin: 120px auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* CARD */
.payment-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 140px;

  padding: 60px;
  border-radius: 40px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(20px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.08);

  transition: 0.3s ease;
}

.payment-row:hover {
  transform: translateY(-5px);
  box-shadow: 0 40px 100px rgba(0,0,0,0.12);
}

/* Reverse layout */
.payment-row.reverse .payment-text {
  grid-column: 2;
}
.payment-row.reverse .payment-visual {
  grid-column: 1;
}

/* TEXT */
.payment-text {
  max-width: 520px;
}

.payment-text h2 {
  font-size: clamp(2.4rem, 4vw, 3rem);
  margin: 18px 0;
  font-weight: 800;
}

.payment-text p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #4a5568;
}

/* PILL */
.pill {
  display: inline-block;
  background: #e9f8ef;
  color: #1c7c54;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* VISUAL */
.payment-visual {
  border-radius: 50px;
  padding: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* glow effect */
.payment-visual::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,0.4);
  filter: blur(90px);
  border-radius: 50%;
}

/* logo */
.payment-visual img {
  max-width: 120px;
  width: auto;
  height: auto;
  z-index: 2;
}

/* COLORS */
.payment-visual.purple {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
}

.payment-visual.green {
	  background: linear-gradient(135deg, #dbeafe, #bfdbfe);

}

/* MOBILE */
@media (max-width: 900px) {

  .payment-row,
  .payment-row.reverse {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 30px;
    border-radius: 30px;
  }

  /* reset grid */
  .payment-row.reverse .payment-text,
  .payment-row.reverse .payment-visual {
    grid-column: auto;
  }

  .payment-text {
    text-align: center;
    margin: auto;
  }

  .payment-visual {
    padding: 30px;
  }

  .payment-visual img {
    max-width: 80px;
  }

}
/* ---------------- LINK PAYMENT SECTION ---------------- */

.link-payment {
  position: relative;
  padding: 140px 20px;
  overflow: hidden;
}

.link-grid {
  max-width: 1250px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  align-items: start;
}

/* LEFT */
.link-left h1 {
  font-size: 2rem;
  line-height: 1.05;
  font-weight: 800;
  margin-bottom: 28px;
  color: #0d1b2a;
}

.link-left .lead {
  font-size: 1rem;
  line-height: 1.75;
  max-width: 520px;
  color: #13314b;
  margin-bottom: 20px;
}

/* IMAGE CARD */
.image-card {
  position: relative;
  width: 420px;
  max-width: 100%;
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,0.18);
}

.image-card img {
  width: 100%;
  display: block;
}

/* PAYMENT BUBBLE */
.payment-bubble {
  position: absolute;
  top: 28px;
  left: 28px;
  background: #deebf4;
  padding: 14px 18px;
  border-radius: 16px;
  font-size: 0.8rem;
  line-height: 1.3;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.payment-bubble strong {
  display: block;
  font-weight: 700;
  color: #0f2951;
}

.payment-bubble span {
  font-size: 0.7rem;
  color: #153c55;
}

/* RIGHT */
.link-right h3 {
  font-size: 1.8rem;
  margin-bottom: 36px;
  font-weight: 700;
  color: #0d1b2a;
}

.payment-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.payment-list li {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.payment-list strong {
  font-size: 1.2rem;
  color: #0d1b2a;
}

.payment-list p {
  font-size: 0.95rem;
  color: #4a647a;
  margin-top: 4px;
}

/* CHECK ICON */
.check {
  width: 34px;
  height: 34px;
  background: #cfefff;
  note: #8ac4db;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}


/* RESPONSIVE */

@media (max-width: 900px) {

  .link-payment {
    padding: 80px 20px;
  }

  .link-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .link-left h1 {
    font-size: 2rem;
    line-height: 1.2;
    word-break: break-word;
	text-align: center;
  }

  .link-left .lead {
    font-size: 0.95rem;
		text-align: center;

  }

  .image-card {
    width: 100%;
    max-width: 100%;
  }

}




/* ---------------- SUPPORTED SECTION ---------------- */

.supported {
  padding: 150px 20px;
  background: #fff;
}

/* HEADER */
.supported-header {
  text-align: center;
  max-width: 820px;
  margin: auto;
}

.supported-header h2 {
  font-size: 2.6rem;
  font-weight: 800;
  margin-bottom: 22px;
  line-height: 1;
}

.supported-header p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #4a647a;
}

/* LOGOS */
.supported-logos {
  margin: 90px auto 160px;
  max-width:
	200px;}

	/* LOGO GRID */
.supported-logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px;
  max-width: 900px;
  margin: 80px auto 160px;
}

.logo-card {
  background: #ffffff;
  border-radius: 18px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.logo-card i {
  font-size: 4.4rem;
  color: #0d1b2a;
  opacity: 0.85;
}

/* Hover effect */
.logo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.12);
}

/* Responsive */
@media (max-width: 900px) {
  .supported-logos {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------------- SUPPORTED ROWS ---------------- */

.supported-row {
  max-width: 1200px;
  margin: 0 auto 180px;
  padding: 0 20px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 120px;
}

/* Reverse layout */
.supported-row.reverse .supported-text {
  grid-column: 2;
}

.supported-row.reverse .supported-image {
  grid-column: 1;
}

/* TEXT */
.supported-text h3 {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
  color: #0d1b2a;
}

.supported-text p {
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 520px;
  color: #4a647a;
}

/* IMAGE */
.supported-image {
  border-radius: 36px;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0,0,0,0.15);
}

.supported-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* MOBILE */
@media (max-width: 900px) {
  .supported-row,
  .supported-row.reverse {
    grid-template-columns: 1fr;
    gap: 60px;
    margin-bottom: 50px;
  }

  .supported-text {
    text-align: center;
  }

  .supported-text p {
    margin: auto;
  }
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin: 70px auto;
  max-width: 1200px;
  padding: 0 20px;
}

@media (max-width: 900px) {
  .benefit-grid {
    grid-template-columns: 1fr;
  }
}

.benefit-card {
  background: #eaf3ff;
  border-radius: 42px;
  padding: 48px 52px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 60px rgba(0,0,0,0.08);
}

.benefit-card h3 {
  font-size: 1.6rem;
  margin-bottom: 14px;
  font-weight: 700;
  color: #0d1b2a;
}

.benefit-card p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: #4a5568;
  max-width: 520px;
}

/* ICON */
.benefit-card .icon {
  margin-bottom: 22px;
}

.benefit-card .icon i {
  font-size: 42px;
  color: #0b2d5c;
}

.checkout-section {
  padding: 120px 20px;
  background: #ffffff;
}

.checkout-grid {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 100px;
  align-items: center;
}

/* TEXT */

.checkout-text h1 {
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
  color: #0d1b2a;
}

.checkout-text .lead {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #4a5568;
  max-width: 520px;
  margin-bottom: 50px;
}

/* CHECKLIST */

.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 26px;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 1.05rem;
  color: #1f2933;
}

.checklist i {
  color: #235997;
  font-size: 1.4rem;
  margin-top: 3px;
}

/* VISUAL */

.checkout-visual {
  border-radius: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 40px 80px rgba(0,0,0,0.18);
}

.checkout-visual img {
  width: 100%;
  filter: drop-shadow(0 25px 40px rgba(0,0,0,0.25));
    border-radius: 48px;

}

/* MOBILE */

@media (max-width: 900px) {
  .checkout-grid {
    grid-template-columns: 1fr;
    gap: 70px;
  }

  .checkout-text {
    text-align: center;
  }

  .checkout-text .lead {
    margin-left: auto;
    margin-right: auto;
  }

  .checkout-visual {
    padding: 50px;
  }
}

@media (max-width: 768px) {
  .Hero {
    padding: 60px 0;
    text-align: center;
  }

  .Hero h1 {
    font-size: 50px;
    line-height: 50px;
  }

  .Hero p {
    padding: 20px 0;
    font-size: 14px;
	
  }

  .Hero .row {
    flex-direction: column;
  }

  .Hero .col-lg-6 {
    width: 100%;
  }

  .Hero figure {
    position: relative !important;
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .Services .flex-wrap {
    flex-direction: column;
    gap: 20px;
  }

  .Services .gap-3 {
    width: 100% !important;
  }

  .Services h2 {
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  .Registration .row {
    flex-direction: column;
  }

  .Registration h2 {
    font-size: 28px;
  }

  .Registration img {
    max-width: 280px;
    margin: auto;
  }
}

video {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

@media (max-width: 768px) {

  footer {
    padding: 40px 0;
    margin-top: 80px;
    text-align: center;
  }

  /* Glow mindre på mobil */
  footer::before {
    width: 80%;
    height: 50%;
    filter: blur(120px);
  }

  /* Logo mindre */
  footer img[alt="logo"] {
    width: 140px;
    margin: 0 auto 20px;
  }

  /* Grid stacking */
  footer .row {
    text-align: center;
  }

  footer .col-lg-3 {
    margin-bottom: 30px;
  }

  /* Social icons centrer */
  footer .d-flex.gap-2 {
    justify-content: center;
  }

  /* Lister */
  footer ul {
    padding: 0;
  }

  footer ul li {
    margin-bottom: 8px;
  }

  /* FORM FIX (meget vigtigt) */
  footer form input {
    width: 100%;
    padding: 16px 20px;
    font-size: 14px;
  }

  footer form {
    margin-bottom: 40px;
  }

  /* BUTTON */
  footer .hover1 {
    width: 100%;
    padding: 14px;
    font-size: 16px;
  }

  /* APP DOWNLOAD */
  footer .gap-2 {
    justify-content: center;
  }

  /* TEXT */
  footer p {
    font-size: 13px;
    line-height: 1.6;
  }

  /* Bottom tekst */
  footer .container.py-4 p {
    font-size: 12px;
  }
}

@media (max-width: 900px) {

  .payment-row,
  .payment-row.reverse {
    grid-template-columns: 1fr;
  }

  /* RESET positioning */
  .payment-row.reverse .payment-text,
  .payment-row.reverse .payment-visual {
    grid-column: auto;
  }

}

.btn-login {
  display: block;
  text-align: center;
  color: #ffffff !important;
  padding: 12px;
  border-radius: 50px;
  border: 2px solid white;
  margin: 15px;
  text-decoration: none;
  font-weight: 500;
  
}

.btn-login:hover {
  background: #ffffff;
}