/* Common Bookmark Styles */
.bookmark-base {
    position: fixed;
    right: 0;
    z-index: 9999;
    transition: all 0.4s ease-in-out;
    font-family: 'Poppins', sans-serif;
}

.bookmark-body {
    display: flex;
    position: relative;
    right: -280px; /* Hide the content part initially */
    transition: right 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bookmark-base.active .bookmark-body {
    right: 0; /* Show everything when active */
}

/* True bookmark shape with CSS */
.bookmark-shape {
    display: flex;
    position: relative;
}

.bookmark-tab {
    background-color: #dd8e33;
    color: white;
    padding: 20px 12px;
    cursor: pointer;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    height: 160px;
    position: relative;
    box-shadow: -3px 3px 10px rgba(0,0,0,0.15);
}

/* Create the bookmark triangle cutout at the bottom */
.bookmark-tab:before {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background-color: #dd8e33;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}

.bookmark-tab-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.bookmark-tab i {
    font-size: 24px;
    margin-bottom: 12px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.bookmark-tab span {
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 14px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.bookmark-content {
    background-color: white;
    padding: 25px;
    box-shadow: -5px 5px 15px rgba(0,0,0,0.1);
    border-left: 5px solid #dd8e33;
    width: 280px;
    z-index: 1;
    position: relative;
}

/* Create bookmark fold effect at the top */
.bookmark-content:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, transparent 50%, #f0f0f0 50%);
    z-index: 3;
}

.bookmark-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(221, 142, 51, 0.2);
}

.bookmark-header h4 {
    margin: 0;
    color: #333;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
}

.bookmark-header h4 i {
    color: #dd8e33;
    margin-right: 10px;
    font-size: 20px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: transform 0.2s ease;
}

.contact-item:hover {
    transform: translateX(5px);
}

.contact-item i {
    color: #dd8e33;
    font-size: 18px;
    margin-top: 3px;
    width: 20px;
    text-align: center;
}

.contact-item span {
    color: #555;
    font-size: 14px;
    line-height: 1.5;
}

.contact-divider {
    height: 1px;
    background: linear-gradient(to right, rgba(221, 142, 51, 0.1), rgba(221, 142, 51, 0.5), rgba(221, 142, 51, 0.1));
    margin: 5px 0;
}

.social-icons {
    display: flex;
    gap: 15px;
    margin-top: 5px;
    justify-content: center;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #f8f8f8;
    border-radius: 50%;
    color: #dd8e33;
    transition: all 0.3s ease;
    box-shadow: 0 3px 5px rgba(0,0,0,0.05);
}

.social-icon:hover {
    background-color: #dd8e33;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(221, 142, 51, 0.3);
}

/* Add a shadow to create depth */
.bookmark-shape:after {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 5px;
    width: 10px;
    background: rgba(0,0,0,0.1);
    border-radius: 50%;
    filter: blur(5px);
    z-index: 0;
}

/* Animation for the bookmark tab */
@keyframes pulse {
    0% { transform: rotate(180deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.05); }
    100% { transform: rotate(180deg) scale(1); }
}

.bookmark-base:not(.active) .bookmark-tab:hover {
    animation: pulse 1s infinite;
}

/* Add a page-like texture to the bookmark */
.bookmark-content {
    background-image: linear-gradient(45deg, rgba(255,255,255,0.8) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 75%, transparent 75%, transparent);
    background-size: 4px 4px;
    background-color: white;
}

/* Specific positioning for each bookmark */
.contact-bookmark {
    top: 30%;
}

.inquiry-bookmark {
    top: 50%;
}

/* Inquiry bookmark specific styles */
.inquiry-bookmark .bookmark-tab {
    background-color: #2c3e50;
}

.inquiry-bookmark .bookmark-tab:before {
    background-color: #2c3e50;
}

.inquiry-bookmark .bookmark-content {
    border-left-color: #2c3e50;
}

.inquiry-bookmark .bookmark-header h4 i,
.inquiry-bookmark .contact-item i {
    color: #2c3e50;
}

.inquiry-bookmark .contact-divider {
    background: linear-gradient(to right, rgba(44, 62, 80, 0.1), rgba(44, 62, 80, 0.5), rgba(44, 62, 80, 0.1));
}

.inquiry-bookmark .social-icon {
    color: #2c3e50;
}

.inquiry-bookmark .social-icon:hover {
    background-color: #2c3e50;
    box-shadow: 0 5px 10px rgba(44, 62, 80, 0.3);
}

/* Form styles for inquiry bookmark */
.inquiry-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-group label {
    font-size: 13px;
    color: #555;
    font-weight: 500;
}

.form-control {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.form-control:focus {
    border-color: #2c3e50;
    box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
    outline: none;
}

.btn-submit {
    background-color: #2c3e50;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-submit:hover {
    background-color: #1a2530;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(44, 62, 80, 0.2);
}
/* Add a shadow to create depth */
.bookmark-shape:after {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 5px;
    width: 10px;
    background: rgba(0,0,0,0.1);
    border-radius: 50%;
    filter: blur(5px);
    z-index: 0;
}

.fact-content {
display: flex;
align-items: center; /* Vertically align icon and number */
justify-content: center; /* Horizontally center icon and number */
gap: 10px; /* Add spacing between icon and number */
}

.fact-box {
background-color: transparent; /* Remove background color */
border: none; /* Remove border */
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-radius: 0; /* Remove rounded corners */
min-height: 180px;
display: flex;
flex-direction: column;
justify-content: center;
}

.fact-box:hover {
transform: translateY(-5px);
box-shadow: none; /* Remove shadow on hover */
}

.fact-box i {
font-size: 44px !important;
color: #dd8e33 !important;
margin-bottom: 10px;
}

.fact-number {
font-size: 36px !important;
font-weight: 700 !important;
color: #222 !important;
margin-bottom: 5px;
}

.fact-label {
font-size: 14px;
font-weight: 500;
color: #555;
}

/* Photo box styling */
.photo-box {
border-radius: 0; /* Remove rounded corners */
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: none; /* Remove border */
}

.photo-box img {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.photo-box:hover img {
transform: scale(1.05);
box-shadow: none; /* Remove shadow on hover */
}
/* Responsive font sizes */
@media (max-width: 992px) {
#the-facts-section .sppb-animated-number,
#the-facts-section .number_addtext {
 font-size: 30px !important;
}

#the-facts-section .sppb-feature-box-title {
 font-size: 14px;
}
}

@media (max-width: 768px) {
#the-facts-section .col-6 {
 flex: 0 0 100%;
 max-width: 100%;
}

#the-facts-section .sppb-animated-number,
#the-facts-section .number_addtext {
 font-size: 24px !important;
}

#the-facts-section .sppb-feature-box-title {
 font-size: 12px;
}

.fact-number {
 font-size: 28px !important;
}

.fact-label {
 font-size: 13px;
}

.fact-box {
 padding: 20px;
}
}
/* Base styles for photo boxes */
.photo-box {
height: 180px;
transition: all 0.3s ease;
z-index: 1;
}

.photo-box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}

.photo-box:hover img {
transform: scale(1.05);
}

/* Creative Overlay with SVG shapes */
.creative-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
pointer-events: none;
}

.geometric-shapes {
width: 100%;
height: 100%;
}

.brand-corner {
position: absolute;
bottom: 0;
right: 0;
width: 30px;
height: 30px;
background: linear-gradient(135deg, transparent 50%, #dd8e33 50%);
z-index: 2;
}

/* Hexagonal mask effect */
.hex-mask-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
overflow: hidden;
}

.hex-mask {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 120%;
background: radial-gradient(circle at center, transparent 50%, rgba(221, 142, 51, 0.3) 70%);
}

.dots-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
pointer-events: none;
}

.dot {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.7);
}

.dot1 {
top: 20%;
left: 15%;
animation: pulse 3s infinite;
}

.dot2 {
top: 70%;
left: 80%;
animation: pulse 3s infinite 0.5s;
}

.dot3 {
top: 40%;
left: 60%;
animation: pulse 3s infinite 1s;
}

@keyframes pulse {
0% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.5); opacity: 0.3; }
100% { transform: scale(1); opacity: 0.7; }
}

/* Diagonal stripes */
.diagonal-stripes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
   45deg,
   rgba(221, 142, 51, 0.1),
   rgba(221, 142, 51, 0.1) 10px,
   transparent 10px,
   transparent 20px
);
z-index: 2;
}

.floating-badge {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
background-color: #dd8e33;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
z-index: 3;
box-shadow: 0 3px 6px rgba(0,0,0,0.1);
animation: float 3s ease-in-out infinite;
}

@keyframes float {
0% { transform: translateY(0); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0); }
}

/* Split overlay */
.split-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}

.split-left {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: rgba(221, 142, 51, 0.2);
clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}

.split-right {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-color: rgba(221, 142, 51, 0.1);
clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}

.corner-accent {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
background-color: #dd8e33;
clip-path: polygon(0 0, 100% 0, 0 100%);
z-index: 3;
}

/* Circular cutout effect */
.circle-cutout {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, transparent 40%, rgba(221, 142, 51, 0.3) 60%);
z-index: 2;
}

.pulsing-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
border: 2px solid rgba(221, 142, 51, 0.7);
border-radius: 50%;
z-index: 3;
animation: pulsing 2s infinite;
}
.shape-box {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}

/* Different shape variations for the boxes themselves */
.box-shape-1 {
clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%);
}

.box-shape-2 {
clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
}

.box-shape-3 {
clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%, 0 85%);
}

.box-shape-4 {
clip-path: polygon(5% 0, 95% 0, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0 95%, 0 5%);
}

.box-shape-5 {
clip-path: polygon(0 10%, 10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%);
}

.box-shape-6 {
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
transform: scale(0.85);
}

/* Ensure content is visible */
.shape-box .fact-content,
.shape-box img {
position: relative;
z-index: 2;
}

/* Add some decorative elements */
.shape-decoration {
position: absolute;
background-color: #dd8e33;
opacity: 0.2;
z-index: 1;
}

.decoration-1 {
width: 50px;
height: 50px;
border-radius: 50%;
top: -15px;
right: -15px;
}

.decoration-2 {
width: 40px;
height: 40px;
bottom: -10px;
left: -10px;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.decoration-3 {
width: 60px;
height: 60px;
top: 50%;
left: -30px;
transform: translateY(-50%);
border-radius: 50%;
}

/* Ensure hover effects still work */
.fact-box.shape-box:hover {
transform: translateY(-5px);
}

.photo-box.shape-box:hover img {
transform: scale(1.05);
}
@keyframes pulsing {
0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
70% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}