/* --------------------------------- */
/* Css Styles                        */
/*---------------------------------- */

/**
    Jane Creative One Page Portfolio HTML Template 
    Author : huseyinceliktas
    Copyright 2019


/* Table of Content
==================================================

    1. My FrameWork
    2. Preloader
    3. Header
    4. About Section
    5. Skills Section
    6. Services Section
    7. Resume Section
    8. Hire Me
    9. Portfolio Section
    10.Testimonials Section
    11.Contact Us Section
    12.Footer Section


/*------------------------ 1 Start My FrameWork ------------------------*/   
body {
    font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #272B2F;
    font-size: 16px;
}
::selection {
    background: #93939375;
    color: #fff;
}
*:not(div) {
	margin: 0;
	padding: 0;
	transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
}

:after,
:before {
    transition: all .3s linear;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
}

section {
    padding: 80px 0;
}
ol, ul {
    margin: 0;
    list-style: none;
}
.btn {
	border:none;
}
p {
    line-height: 30px;
    color: #272B2F;
}
hr {
    margin-top: 0px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #09ccd9;
}
.btn {
    padding: 15px 60px;
    width:220px;
    font-size: 18px;
    overflow: hidden;
    margin-top: 30px;
    margin-right: 20px;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: 20px;
    border: 1px solid #09ccd9;
    position: relative;
}
.btn:hover:after {
    width: 500px;
    height: 500px;
    background-color: #09ccd9;
    border-radius: 20px;
}
.btn span {
    z-index: 6;
    color: #272B2F;
}
.btn:hover span {
    color: #fff;
}
.btn:after {
    content: '';
    position: absolute;
    /* Gradient color */
    background-image: linear-gradient(45deg, #0AABF8, #15EFC1); /* Example gradient from blue to green */
    /* Fallback color for old browsers */
    background-color: #09CCD9; /* Example fallback color */
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    height: 0%;
    width: 0%;
    z-index: -1;
}

.btn.b {
    border: 1px solid #fff;
}
.btn.b:hover:after {
    background-color: #fff;
}
.btn.b span {
    color: #fff;
    position: relative;
}
.btn.b:hover span {
    color: #fff;
}
.btn.b:after {
    z-index: 2;
}
.section-title {
    margin-bottom: 80px;
    text-align: center;
}
.section-title h2 {
    position: relative;
    font-size:40px;
    background-color: #272B2F; /* Fallback color */
    -webkit-background-clip: text; /* For webkit browsers */
    -webkit-text-fill-color: transparent; /* For webkit browsers */
    background-clip: text; 
    font-weight:bold;
    margin-bottom:10px;
    line-height: 1.4;
}

.section-title h2 span{
    position: relative;
    font-size:40px;
    color: #09CCD9; /* Fallback color */
    background-image: linear-gradient(45deg, #0AABF8, #15EFC1); /* Example gradient from blue to green */
    -webkit-background-clip: text; /* For webkit browsers */
    -webkit-text-fill-color: transparent; /* For webkit browsers */
    background-clip: text; 
    font-weight:bold;
    margin-bottom:10px;
    line-height: 1.4;
}

.section-title h3 {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: #9ca3af;
    position: relative;
    font-size: 16px;
}

/* End My FrameWork */


/* Start Preloader */
.preloader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #272B2F;
    display: flex; /* Center content horizontally and vertically */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    z-index: 9999999;
}
/* End Preloader */

/* Apply styles to the Lottie animation container */
#lottie-animation {
    width: 150px; /* Set desired width */
    height: 150px; /* Set desired height */
}


/* Start Header */
header {
    height: 100vh;
    max-height: 1300px;
    background-size: cover;
    background-image: url('../img/header-bg.jpg');
    position: relative;
    overflow: hidden;
    background-position: relative;
}
header .navbar-brog {
    margin: 0;
    border-radius: 0;
    background-color: transparent;
    border: none;
    padding: 10px 0;
}
header .navbar-brog .navbar-brand {
    height: auto;
    font-size: 25px;
    font-weight: bold;
    color: #09CCD9;
    position: relative;
}
header .navbar-brog .navbar-nav li a {
    text-transform: capitalize;
    color: #09CCD9;
}
header .navbar-brog .navbar-nav li a:hover {
    color: #09CCD9; /* Set the hover color to the fallback color */
}

header .nav-sticy {
    padding: 10px 0;
    background-color: #fff;
    box-shadow: 0px 0px 8px #efefef;
}
header .nav-sticy .navbar-nav li a {
    color: #330f33;
    position: relative;
    font-size: 15px;
}
header .nav-sticy .navbar-nav li a:hover,
header .nav-sticy .navbar-nav li a.active {
    color: #aeaeae;
}
header .nav-sticy .navbar-nav li a:after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 15px;
    width: calc(100% - 30px);
    transition: all .3s linear;
    opacity: 0;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    height: 2px;
    /* Gradient color */
    background-image: linear-gradient(45deg, #0AABF8, #15EFC1); /* Example gradient from blue to green */
    background-color: #09CCD9;
}

header .nav-sticy .navbar-nav li a:hover:after,
header .nav-sticy .navbar-nav li a.active:after {
    opacity: 1;
}
header .header-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
header .header-content h1 {
    font-weight: bold;
    text-transform: capitalize;
    font-size: 45px;
    line-height: 1.4;
    margin: 0;
}
header .header-content h1 span {
    /* Gradient color for text */
    color: #09CCD9; /* Fallback color */
    background-image: linear-gradient(45deg, #0AABF8, #15EFC1); /* Example gradient from blue to green */
    -webkit-background-clip: text; /* For webkit browsers */
    -webkit-text-fill-color: transparent; /* For webkit browsers */
    background-clip: text; 
}

header .header-content p {
    font-size: 18px;
    margin-bottom: 0;
    margin-top: 30px;
}
header .header-content p a {
    color: #2f272d;
    border-bottom: 1px dashed #272B2F;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 18px
}
header .header-content p a {
    text-decoration: none;
}
header .header-content .btn:hover {
    border-color: #fff;
}

.scroll-down {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    height: 50px;
    cursor: pointer;
    width: 30px;
    border-width: 2px;
    border-style: solid;
    border-color: #09CCD9;
    border-image: initial;
    border-radius: 50px;
}
.scroll-down::after {
    content: "";
    position: absolute;
    height: 6px;
    width: 6px;
    background-color: #09CCD9;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    border-radius: 50%;
    animation: mouse 2s ease 0s infinite;
}
@-webkit-keyframes mouse {
    from {
        opacity: 1;
        top: 10px;
    }
    to {
        opacity: 0;
        top: 45px;
    }
}

@keyframes mouse {
    from {
        opacity: 1;
        top: 10px;
    }
    to {
        opacity: 0;
        top: 35px;
    }
}
/* --- Navbar brand container --- */
.navbar-brand {
    display: flex;
    align-items: center;
}

/* Base logo: white, for the dark hero area */
.navbar-brand .logo {
    display: inline-block;
    width: 56px;          /* adjust as needed */
    height: 24px;
    background-image: url('../img/rdz_logo_white.png');  /* FIXED PATH */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    transition: background-image 0.25s ease, filter 0.25s ease;
}

/* Text: hidden by default */
.navbar-brand .brand-text {
    display: none;
    margin-left: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
}

/* On hover at the top: swap to coloured logo + show text */
.navbar-brand:hover .logo {
    background-image: url('../img/rdz_logo.png');        /* FIXED PATH */
}

.navbar-brand:hover .brand-text {
    display: inline-block;
}

/* --- Sticky / scrolled navbar state --- */
/* Your header gets .nav-sticy when scrolled, so change logo there */
header .nav-sticy .navbar-brand .logo {
    background-image: url('../img/rdz_logo.png');  /* coloured by default on white strap */
}

/* When nav is sticky, keep the text visible on hover only (same behaviour) */
header .nav-sticy .navbar-brand .brand-text {
    color: #330f33; /* darker text for white bar, tweak as needed */
}


/* End Header Section */


/* Start About Section */
#about {
    /*background-color: rgba(247, 247, 247, 0.12);*/
    padding-bottom: 0;
    padding-top: 0;
    /* background-image: url('../img/overlay.png');
    background-size: cover;*/
}
#about .avatar-image {
    position: relative;
}

#about .avatar-image img {
    z-index: 10;
    position: relative;
    border-radius: 20px;
}
#about .information {
    margin-top: 0px;
}
#about .information h3 {
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 15px;
    color: #09CCD9;
}
#about .information h2 {
     color: #000;
    font-weight: bold;
    font-size: 32px;
    line-height: 1.3;
}
#about .information p {
    font-size: 16px;
    color: #2c2c2c;
    font-weight: 300;
    margin-bottom: 20px;
}
#about .information p span {
    color: #09CCD9;
    font-weight: 600;
}
#about .info li {
    display: inline-block;
    width: 48%;
    margin-bottom: 20px;
}
#about .info li span {
    font-size: 17px;
    font-weight: 400;
    color: #2c2c2c;
}
#about .info {
    margin-bottom: 20px;
}
#about .social-links a {
    margin-right: 15px;
    margin-bottom: 40px;
    width: 40px;
    height: 40px;
    background: #2c2c2c;
    /*background-image: linear-gradient(45deg, #0AABF8, #15EFC1);*/
    color: #fff;
    display: inline-block;
    border: 1px solid transparent;
    text-align: center;
    border-radius: 10px;
}
#about .social-links a:hover {
    background: transparent;
    border: 1px solid #09CCD9;
}
#about .social-links a:hover i {
    color: #09CCD9;
}
#about .social-links a i {
    font-size: 17px;
    line-height: 40px;
}
/* End About Section */


/* Start Services Section */ 
#services {
    margin-bottom: 0px; /* Remove margin */
    padding-bottom:0px;
    background-color:#ffffff;
}

#services .service-box {
    padding: 40px;
    transition: all .4s ease; /* Standard transition */
    -webkit-transition: all .4s ease; /* For WebKit browsers */
    -moz-transition: all .4s ease; /* For Mozilla browsers */
    -o-transition: all .4s ease; /* For Opera browsers */
    box-shadow: 0px 0px 30px rgba(226, 226, 226, 0.5);
    min-height: 200px; 
    margin-bottom:30px;
    border-radius: 20px;
}
#services .service-box:hover {
    border: 1px solid transparent; /* Must have a border for border-image to apply */
    border-color:#09CCD9;
    /*border-image: linear-gradient(to bottom, #0AABF8, #15EFC1) 1;*/
    border-radius: 20px;
    box-shadow: 0px 0px 30px #dadada;
}
#services .service-box img {
    width: 100px;
    height: auto;
    margin-bottom: 20px;
}
#services .service-box h3 {
    margin-bottom: 10px;
    font-weight: 600;
    margin-top: 0;
    font-size: 18px;
}
#services .service-box a {
    text-decoration: none;
    color: #09CCD9;
}
#services .service-box p {
    font-size: 14px;
    line-height: 1.7;
    color: #2c2c2c;
    font-weight: 300;
    margin: 0;
}


/* End Services Section */


/* Start Hire Me */
.hire-me {
    /*background-image: url('../img/hire-me.jpg');*/
    background-color: #ffffff;
}

.hire-me h2 {
    margin: 0;
    font-size: 36px;
    padding: 10px 0;
    font-weight: bold;
    color: #2c2c2c;
}

.hire-me h2 span{
    margin: 0;
    font-size: 36px;
    padding: 10px 0;
    font-weight: bold;
    background: linear-gradient(45deg, #0AABF8, #15EFC1);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hire-me p {
    color: #2c2c2c; /* Set the text color to white */
    font-size:15px;
}


.hire-me .embed-responsive {
    max-width: 100%; /* Ensure the video doesn't exceed the container width */
    justify-content: center;
    height: auto; /* Allow the height to adjust according to the aspect ratio */
    border-radius: 20px;
    box-shadow: 0px 0px 30px rgba(35, 35, 35, 0.621);
}
/* End Hire Me */


/* Start Portfolio Section */
#portfolio {
    text-align: center;
    background-color:#ffffff;
}

.portfolio-filter {
    padding: 15px 40px;
    border-radius: 40px;
    margin-bottom: 40px;
    display: inline-block;
    /*background-image: linear-gradient(45deg, #0AABF8, #15EFC1);*/
    background-color: #2c2c2c;
}

.portfolio-filter .filter {
    color: #ffffff;
    font-size: 18px;
    text-transform:uppercase;
    margin-right: 20px;
    cursor: pointer;
    font-weight: 500;
    display: inline-block;
}


li.filter.active {
    color: #09CCD9;
    
}

/* Hover state (not active) */
.portfolio-filter .filter:hover {
    color: #09CCD9;
}


.portfolio-filter .filter:last-of-type {
    margin-right: 0;
}
.grid {
    max-width: 1200px; /* Adjust the maximum width of the grid container */
    margin: 0 auto; /* Center the grid horizontally */
}

.grid .col-lg-4 {
    padding: 0;
    margin-bottom: 0px; /* Added margin between portfolio items */
}


.img-box {
    position: relative;
    overflow: hidden;
    max-height: 350px;
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; 
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.img-box img {
    display: block;
    width: 100%;
    height: 100%; /* Adjust height to 100% */
    object-fit: contain; /* Crop the image to cover the entire box */
    object-position: center; /* Center the image within the box */
    transition: transform 0.6s ease, filter 0.6s ease;
    will-change: transform, filter;
}

.img-box:before,
.img-box:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* background-image: linear-gradient(45deg, rgba(10, 173, 248, 0.7), rgba(21, 239, 193, 0.7)); */
    background-color: rgba(0, 0, 0, 0.6);
    transition: width 0.3s ease-in-out;
    z-index: -1;
}

.img-box:before {
    width: 0;
    z-index: 1;
}

.img-box:hover:before,
.img-box:hover:after {
    width: 100%;
}

.img-box:hover img {
    transform: scale(1.2); /* Scale up the image on hover */
    filter: blur(2px);
}

.portfolio-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.img-box:hover .portfolio-text {
    opacity: 1;
}

.portfolio-text h2 {
    color: #fff;
    font-weight: 800;
    font-size: 30px;           /* slightly smaller for better balance */
    margin-bottom: 6px;        /* adds subtle separation from tagline */
    line-height: 1.0;          /* tighter, more premium look */
    /*max-width: 70%;*/            /* prevents overly wide text on large items */
    margin-left: auto;
    margin-right: auto;
}

.portfolio-text p {
    color: #f5f5f5;
    text-transform: uppercase;
    font-size: 16px;           /* slightly smaller than title */
    font-weight: 500;          /* lighter, elegant look */
    line-height: 1.2;          /* tighter lines */
    margin: 0 auto;
    /*max-width: 70%; */         /* keeps text visually compact */
}

.portfolio-item {
    position: relative; /* Ensure the button is positioned relative to the portfolio item */
}

.portfolio-item .img-box a {
    display: block;
}

.portfolio-item .img-box a:hover {
    text-decoration: none; /* Remove default link underline on hover */
}
/* End Portfolio Section */

/* CSS for Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 99;
    overflow: auto; /* Enable scrolling if modal content exceeds viewport */
}

/* Style for modal content */
.modal-content {
    position: absolute;
    top: 100px;                /* was 60px – pushes the card below the menu */
    left: 50%;
    transform: translateX(-50%);

    width: 65%;                /* same feel as before */
    max-width: 1100px;         /* don't let it get too wide on big screens */

    background-color: transparent;
    padding: 0;
    border: none;
    margin: 0;
    max-height: calc(100% - 140px);
    overflow-y: auto;
    box-sizing: border-box;
}


.modal-header {
    border:none;
    padding:0px;
    margin:0px;
}

.modal-header h2 {
    color:#fff;
    font-weight: bold;
    font-size: 40px;
    padding-top:40px;
    padding-bottom:0px;
    text-align: center;
}

.modal-header p {
    padding:0px;
    text-align: center;
}

.modal-body p {
    color: #fff;
    background-color:#272B2F;
    padding-top:60px;
    padding-bottom:60px;
    padding-left:80px;
    padding-right: 80px;
    text-align: center;
}

.close {
    position: absolute;
    color: #09CCD9 !important;
    text-shadow: none;
    opacity: 1;
    width: 20px;
    height: 20px;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 9990;
}


/* Style for modal body */
.modal-body {
    margin: 0; /* Remove margin */
    padding: 0; /* Remove padding */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    background-color: #272B2F;
    border:none;
}

.modal-body img {
    max-width: 100%;
    height: auto;
    margin: 0px;
    border: none; /* Remove any border */
    padding: 0; /* Remove any padding */
}


.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio (height = width * 9/16) */
}

.video-container iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the iframe */
    width: 90%;
    height: 90%;
    border:none;
}



/* Start Contact Us Section */
#contact {
    padding: 40px 0;
    background-color: #ffffff;
    text-align: center;
}
#contact .row {
    padding: 0px 0;
    border-radius: 20px;
    margin: 0 auto;
    max-width: 1000px;    /* Prevents full width stretch */
    text-align: left;    /* So fields and text stay aligned */
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* Ensure form elements stay centered */
form {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.in {
    max-height: 400px;
    position: relative;
    overflow: hidden;
}
input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    max-width: 850px;
    margin-bottom: 40px;
    font-size: 15px;
    padding: 8px ;
    outline: none;
    border: 0px solid #2c2c2c;
    border-radius: 15px;
    color: #000;  /* Ensures text is visible */
    background-color: #fff; /* White background */
    box-shadow: 0px 0px 10px rgba(35, 35, 35, 0.221);
    display: block;
}
textarea {
    resize: none;
    min-height: 200px;
}
input[type="submit"] {
    /*background: transparent;*/
    background-color: #2c2c2c;
    border: 1px solid #2c2c2c;
    color: #ffffff;
    border-radius: 15px;
    padding: 8px 60px;
    display:block;
}
input[type="submit"]:hover {
    background-image: linear-gradient(45deg, #0AABF8, #15EFC1); /* Example gradient from blue to green */
    /* Fallback color for old browsers */
    background-color: #09CCD9; /* Example fallback color */
    border-radius: 15px;
    color:#fff;
    transition: scale 0.3s ease; 
}

/* Start Contact Me Section */
.contact-me {
    /*background-image: url('../img/hire-me.jpg');*/ /* Background image */
    background-color: #ffffff;
    padding: 80px 0; /* Padding */
}

.contact-me h2 {
    margin: 0;
    font-size: 36px;
    padding: 10px 0;
    font-weight: bold;
    color: #2c2c2c;
}

.contact-me h2 span {
    margin: 0;
    font-size: 36px;
    padding: 10px 0;
    font-weight: bold;
    background: linear-gradient(45deg, #0AABF8, #15EFC1); /* Gradient text */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.contact-me p {
    font-size: 20px;
    margin-bottom: 20px;
    color:#fff
}

.contact-me img {
    max-width: 70%;
    height: auto;
    display: block; /* Ensures the image behaves as a block element */
    padding-top:100px;
    margin: 0;

}

/* End Contact Us Section */


/* Start Footer */
footer {
    text-align: center;
    padding: 30px;
}
footer h3 {
    margin: 0;
    font-size: 16px;
    color: #2c2c2c;
    display: inline-block;
    margin-right: 20px;
    font-weight: 300;
}
footer .social-links a {
    font-size: 18px;
    margin-right: 15px;
    color: #2c2c2c;
}

footer .social-links a:hover {
    color: #09ccd9;
}
/* End Footer */

/* ===========================
   MODAL OVERLAY + CARD WRAPPER
   =========================== */

/* Full-screen dark overlay */
.modal {
    display: none;
    position: fixed;
    top: 0;                       /* cover from very top */
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    overflow: auto;
}

/* Centered card wrapper; the actual "page" is .rd-case inside */
.modal-content {
    position: absolute;
    top: 40px;                    /* push card below navbar */
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    max-width: 1100px;
    background-color: transparent;
    padding: 0;
    border: none;
    margin: 0;
    max-height: calc(100% - 80px); /* room below card for scroll shadow */
    overflow-y: auto;
    box-sizing: border-box;
}

/* Where we inject the layout HTML */
#modal-body {
    padding: 0;
    background: transparent;
}

/* ===========================
   CASE STUDY BASE (ALL LAYOUTS)
   =========================== */

/* Default variables (magazine light baseline) */
#modal-body .rd-case {
    --rd-bg:        #f9fafb;
    --rd-card-bg:   #f9fafb;
    --rd-text:      #111827;
    --rd-muted:     #4b5563;
    --rd-accent:    #09CCD9;
    --rd-meta-bg:   #0f172a;
    --rd-meta-text: #e5e7eb;
    --rd-divider:   #e5e7eb;

    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--rd-text);
    background: var(--rd-card-bg);
    padding: 0 32px 40px;    /* no top padding: hero sits flush */
    max-width: 100%;
    margin: 0 auto;          /* card position handled by .modal-content top */
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.55);
    box-sizing: border-box;
}

/* Raise hero/card margins on small screens */
@media (max-width: 900px) {
    #modal-body .rd-case {
        padding: 0 18px 24px;
        margin: 0 auto;
    }
}

/* Images stay sharp – no rounding inside case */
#modal-body .rd-case img {
    border-radius: 0;
}

/* Sections inside the case study should NOT use global 100px padding */
#modal-body .rd-case section {
    padding: 0 0 18px !important; /* small bottom padding only */
}

/* Spacing between blocks */
#modal-body .rd-case-block {
    margin-bottom: 18px;
}

/* Paragraphs */
#modal-body .rd-case p {
    background: transparent;
    padding: 0;
    margin: 0 0 0.8rem;
    text-align: left;
    color: var(--rd-muted);
}

/* ===========================
   LAYOUT VARIANTS (BY CLASS)
   =========================== */

/* MAGAZINE (light) – current default look */
#modal-body .rd-case--magazine {
    --rd-bg:        #f9fafb;
    --rd-card-bg:   #f9fafb;
    --rd-text:      #111827;
    --rd-muted:     #4b5563;
    --rd-accent:    #09CCD9;
    --rd-meta-bg:   #0f172a;
    --rd-meta-text: #e5e7eb;
    --rd-divider:   #e5e7eb;
}

/* DARK – same layout, inverted colours */
#modal-body .rd-case--dark {
    --rd-bg:        #020617;
    --rd-card-bg:   #020617;
    --rd-text:      #f9fafb;
    --rd-muted:     #e5e7eb;
    --rd-accent:    #09CCD9;
    --rd-meta-bg:   #020617;
    --rd-meta-text: #e5e7eb;
    --rd-divider:   #1f2937;
}

/* (later you can add .rd-case--classic here) */

/* ===========================
   HERO
   =========================== */

/* Full-width hero on top, flush with card edge */
#modal-body .rd-case-hero {
    margin: 0 -32px 18px;  /* extend to card edges */
}

#modal-body .rd-case-hero img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 900px) {
    #modal-body .rd-case-hero {
        margin: 0 -18px 16px;
    }
}

/* ===========================
   INTRO ROW (TITLE + META)
   =========================== */

#modal-body .rd-case-intro {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 32px;
    align-items: flex-start;
}

#modal-body .rd-case-intro-left h1 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--rd-text);
}

#modal-body .rd-case-tagline {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--rd-accent);
    margin-bottom: 10px;
}

#modal-body .rd-case-summary {
    font-size: 15px;
    line-height: 1.6;
    color: var(--rd-muted);
}

/* Right-side details (Client / Role / Year / Category) */
#modal-body .rd-case-intro-right {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
}

#modal-body .rd-case-meta-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--rd-divider);
    padding: 4px 0;
}

#modal-body .rd-case-meta-label {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 10px;
    color: #9ca3af;
}

#modal-body .rd-case-meta-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--rd-text);
}

/* Better alignment when meta value wraps to multiple lines */
#modal-body .rd-case-meta-row {
    align-items: flex-start;        /* top-align label and value */
}

#modal-body .rd-case-meta-label {
    flex: 0 0 80px;                 /* fixed label column */
}

#modal-body .rd-case-meta-value {
    flex: 1 1 auto;
    text-align: right;              /* or left if you prefer */
    /* text-align: left; */
}

@media (max-width: 900px) {
    #modal-body .rd-case-intro {
        grid-template-columns: 1fr;
    }
}

/* ===========================
   VIDEO BLOCK
   =========================== */

#modal-body .rd-case-video .rd-video-wrapper {
    position: relative;
    padding-top: 56.25%; /* 16:9 */
    overflow: hidden;
    border-radius: 0;
}

#modal-body .rd-case-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ===========================
   TEXT + INLINE IMAGE SECTIONS
   =========================== */

#modal-body .rd-case-section h2 {
    font-size: 18px;
    margin-bottom: 8px;
    color: var(--rd-text);
}

#modal-body .rd-case-section p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--rd-muted);
}

/* Two-column layout: one text, one inline image */
#modal-body .rd-case-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: flex-start;
}

#modal-body .rd-case-col-media .rd-case-shot--inline img {
    width: 100%;
    display: block;
    border-radius: 0;
}

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

/* ===========================
   GALLERY (EXTRA STILLS)
   =========================== */

#modal-body .rd-case-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#modal-body .rd-case-gallery-grid .rd-case-shot img {
    width: 100%;
    display: block;
    border-radius: 0;
}

#modal-body .rd-case-kicker {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 11px;
    margin-bottom: 12px;
    color: #9ca3af;
}

@media (max-width: 900px) {
    #modal-body .rd-case-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    #modal-body .rd-case-gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================
   ABOUT SECTION – CASE STYLE
   ============================ */

#about .information.rd-about {
    padding-left: 40px;
}

@media (max-width: 991px) {
    #about .information.rd-about {
        padding-left: 0;
        margin-top: 40px;
    }
}

/* Intro block (title + tagline + body) */

#about .rd-about-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #111827;
}

#about .rd-about-tagline {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #09CCD9;
    margin-bottom: 16px;
}

#about .rd-about-intro p {
    font-size: 15px;
    line-height: 1.7;
    color: #4b5563;
    margin-bottom: 0.9rem;
    max-width: 550px;
}

/* Meta block (Name / Role / etc) – mimic modal detail table */

#about .rd-about-meta {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
    max-width: 550px;
}

#about .rd-about-meta-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
}

#about .rd-about-meta-label {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 11px;
    color: #9ca3af;
    margin-right: 12px;
    white-space: nowrap;
}

#about .rd-about-meta-value {
    font-weight: 500;
    color: #111827;
    text-align: right;
}

/* Social links spacing (re-use your existing button styles) */

#about .social-links {
    margin-top: 24px;
}

/* Center + size the showreel video */
#showreel .video-wrapper {
    max-width: 1100px;        /* how wide the player card can get */
    margin: 30px auto 0;     /* center horizontally, add some top space */
}

/* Responsive 16:9 frame with no white bands */
#showreel .embed-responsive {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;  /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;

    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    background: #000;        /* ensure no white strap from background */
}

/* Make the Vimeo iframe fill the frame */
#showreel .embed-responsive iframe,
#showreel .embed-responsive .embed-responsive-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.blog-card { margin-bottom: 30px; border-radius: 24px; background:#ffffff; box-shadow:0 18px 50px rgba(0,0,0,.12); }
.blog-card-inner { display:flex; text-decoration:none; color:#111827; }
.blog-card-image {
    flex-shrink: 0;
    width: 320px;              /* controls horizontal width */
    height: 160px;             /* keeps proportions visually balanced */
    border-radius: 18px 18px 18px 18px;  /* curve only left side */
    overflow: hidden;
    margin: 30px;
}
.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* ensures proper crop, no stretching */
    display: block;
}
.blog-card-content { padding:20px 26px; flex:1; }
.blog-card-tagline {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: #9aa2b8;
    margin-bottom: 8px;
}
.blog-card-meta { font-size:12px; color:#6b7280; margin-bottom:10px; }
.blog-card-excerpt { font-size:14px; line-height:1.6; margin-bottom:10px; }
.blog-card-link { font-size:13px; color:#0AABF8; }
.blog-card-title {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}

/* Blog Post Wrapper */
.blog-post-card {
    max-width: 850px;
    margin: 60px auto;
    background: white;
    border-radius: 28px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.08);
    overflow: hidden; /* Important: keeps hero image aligned */
}
/* Hero image wrapper */
.post-hero {
    width: 100%;
    height: 380px; /* Adjustable */
    overflow: hidden;
}

/* Image styling */
.post-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Blog content area */
#blog-post-content {
    padding: 40px 55px;
}

/* Title formatting */
.blog-post-card h1 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Tagline under title */
.blog-post-card .tagline {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 12px;
    color: #8890a4;
    margin-bottom: 20px;
}

/* Meta row similar to your original look */
.blog-post-meta {
    font-size: 13px;
    color: #9aa2b8;
    margin-bottom: 35px;
}

/* Paragraph formatting */
.blog-post-card p {
    font-size: 17px;
    line-height: 1.85;
    color: #3b4252;
    margin-bottom: 22px;
    max-width: 740px;
}

/* Keep the featured image full width, rounded */
.blog-post-card img.feature-image {
    width: 100%;
    border-radius: 18px;
    margin-bottom: 35px;
}

.blog-post-card p,
.blog-card-excerpt {
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.75;
    color: #374151;
    margin-top: 6px;
}
#blog-post .blog-post-body p {
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.9;
}
/* Remove default link styles inside blog cards */
.blog-card,
.blog-card a {
    text-decoration: none !important;
    color: inherit !important;
}

/* Ensure hover effects only apply to the card, not change text colors */
.blog-card:hover a {
    color: inherit !important;
}

/* Title styling */
.blog-card-title {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    margin: 6px 0 10px;
}

/* Tagline */
.blog-card-tagline {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11px;
    font-weight: 500;
    color: #9aa2b8;
    margin-bottom: 12px;
}

/* Excerpt */
.blog-card-excerpt {
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.75;
    color: #374151;
    margin-top: 4px;
}

/* "Read more" link styled as intended */
.blog-card-readmore {
    margin-top: auto;
    font-size: 14px;
    font-weight: 600;
    color: #0AABF8 !important;
}

.blog-card-readmore:hover {
    text-decoration: underline !important;
}