/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

	/* ---------- RESET ---------- */
			/*
=====================================================================
FINAL MERGED STYLESHEET – FULLY CORRECTED
=====================================================================
Includes:
- Your LATEST responsive design (File 1)
- Twenty Twenty-Five base styles
- Contact page styles
- ALL hero/model fixes (620px max, 800px flex)
- NO missing rules
=====================================================================
*/

/* ============================================================= */
/* 1. GLOBAL RESET & TYPOGRAPHY                                  */
/* ============================================================= */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #000;
    color: #fff;
    line-height: 1.5;
    overflow-x: hidden;
  	text-transform: capitalize;
}

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

a {
    text-decoration: none;
    color: inherit;
}

button,
select {
    font-family: inherit;
}

/* Twenty Twenty-Five Enhancements */
a {
    text-decoration-thickness: 1px !important;
    text-underline-offset: .1em;
}

:where(.wp-site-blocks *:focus) {
    outline-width: 2px;
    outline-style: solid;
}

.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
    margin-bottom: 3px;
}

.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
    outline-offset: 4px;
}

.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    outline-offset: 0;
}

h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
    text-wrap: pretty;
}
h2{
  font-size:45px;
}

.more-link {
    display: block;
}

/* ============================================================= */
/* 2. HEADER                                                     */
/* ============================================================= */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 5%;
    background: #000;
}
header nav{
  display: flex;
  gap: 18px;
  align-items: center;
  font-size:17px;
  font-weight:600;
}
header nav a:hover, .current_page_item{
  color:#de3673;
  transition: color 0.8s ease;
}
/* Hide sidebar initially */
.sidebar-menu {
    position: fixed;
    top: 24px;
    right: -300px;
    height: 100vh;
    width: 300px;
    background: #000000a8;
    padding: 30px 20px;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    z-index: 9999;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.sidebar-menu.active {
    right: 0;
}

/* Overlay */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    display: none;
    z-index: 9998;
}

.menu-overlay.active {
    display: block;
}

/* Close Button */
.close-btn {
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    align-self: flex-end;
    margin-bottom: 20px;
  	color:white;
}

/* Hamburger Button */
.mobile-menu-toggle {
    background: none;
    border: none;
    font-size: 32px;
    cursor: pointer;
    display: none;
  	color:white;
}

/* Show hamburger only on mobile */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }

    .menu-items {
        display: none !important;
    }
  .desktop-cta{
     display:none;
    }
}

/* Sidebar menu list */
.sidebar-menu-items li {
    list-style: none;
    margin: 15px 0;
}

.sidebar-menu-items a {
    font-size: 18px;
    color: white;
    text-decoration: none;
}

.logo {
    width: 250px;
}

.get-start-btn a {
    padding: 10px 15px;
    background: #de3673;
    color: #fff;
    border-radius: 5px;
 }
.get-start-btn a:hover{
 background:#fff;
}

@media (max-width: 640px) {
    header {
        flex-direction: row;
        gap: 15px;
        text-align: center;
    }
    .logo {
        width: 240px;
    }
    .get-start-btn a {
        padding: 7px 7px;
        font-size: 12px;
    }
  
  
}

/* ============================================================= */
/* 3. HERO SECTION – FULLY PRESERVED                             */
/* ============================================================= */
.hero {
    padding: 50px 5% 50px;
  position:relative;
}
.overlay{
	background: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.hero .container {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1400px;
    margin: auto;
}

.hero .content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size:45px;
    line-height: 1.1;
    margin-bottom: 12px;
}

.hero .pink {
    color: #ff2a6d;
}

.hero .subtitle {
    font-size: 1.125rem;
    color: #ccc;
    margin-bottom: 40px;
}

.hero .form {
    background: #1a1a1a;
    padding: clamp(20px, 4vw, 32px);
    border-radius: 16px;
    width: 100%;
   /* max-width: 480px; */
    display: flex;
    gap: 20px;
}

.hero .select {
    width: 100%;
    padding: 16px 20px;
    margin-bottom: 16px;
    background: #fff;
    color: #333;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3e%3cpath fill='%23333' d='M2 4l4 4 4-4z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
  	text-transform: capitalize;
}

.hero .select:focus {
    outline: 2px solid #ff2a6d;
    outline-offset: 2px;
}

.hero .cta {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #ff2a6d, #ff5e9e);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: .3s;
}

.hero .cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(255, 42, 109, .3);
}

/* MODEL IMAGE – FULLY PRESERVED */
.hero .model {
    flex: 1 1 800px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
}

.hero .model img {
    width: 100%;
    max-width: 620px;
    height: auto;
    object-fit: contain;
    padding-top: 30px;
}

/* HERO RESPONSIVE – ALL BREAKPOINTS */
@media (max-width: 1024px) {
  
    .hero .container {
        flex-direction: column;
      	display:block;
        text-align: center;
      	background:#000 url(https://naughtybytestudio.co.uk/wp-content/uploads/2025/11/pwd-success.webp);
   		background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    }
    .hero .model {
        order: -1;
        max-width: 480px;
        margin: 0 auto 30px;
        flex: 1 1 auto;
    }
    .hero .model img {
        max-width: 100%;
      display: none;
    }
    .hero .cta {
        width: 80%;
        padding: 10px;
        font-size: 1rem;
        text-align: center;
    }
  
  .hero .content{
  	width:auto;
    padding:20px 10px;
  }
}

@media (max-width: 640px) {
  	
    .hero h1 {
        font-size: 2.25rem;
    }
    .hero .form {
        padding: 20px;
    }
    .hero .model {
        max-width: 340px;
    }
    .hero .model img {
        padding-top: 20px;
    }
  .hero p{
  	font-size : 1.75rem;
  }
}

/* ============================================================= */
/* 4. YORKSHIRE VALUES                                           */
/* ============================================================= */
.Yorkshire-values {
    text-align: center;
    background: #191717;
    padding: 80px 5%;
}

.Yorkshire-values h2 {
    font-size: 45px;
    margin-bottom: 16px;
}

.Yorkshire-values .subtitle {
    margin-bottom: 50px;
}

.Yorkshire-values .cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    
    margin: auto auto 50px;
}
.Yorkshire-values .card {
    background: #1a1a1a;
    padding: 24px;
    border-radius: 12px;
    width: 100%;
    max-width: 320px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform .4s ease, box-shadow .4s ease;
}

/* hover effect */
.Yorkshire-values .card:hover {
    transform: translateY(-8px) rotateX(4deg) rotateY(3deg);
    box-shadow: 0 20px 40px rgba(255,255,255,0.12);
}

/* Shine Effect */
.Yorkshire-values .card::before {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, .15) 40%,
        transparent 80%
    );
    transform: rotate(25deg);
    transition: all .6s ease;
}

/* shine move on hover */
.Yorkshire-values .card:hover::before {
    top: 100%;
    left: 100%;
}


.Yorkshire-values .icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 20px;
    font-size: 24px;
    color: #ff2a6d;
}

.Yorkshire-values .cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #ff2a6d, #ff5e9e);
    color: #fff;
    border-radius: 12px;
    font-weight: 600;
    transition: .3s;
}

.Yorkshire-values .cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(255, 42, 109, .4);
}

@media (max-width: 1020px) {
  
 .Yorkshire-values .cards {
   	display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    
    margin: auto auto 50px;
    align-items: center;
}
  .Yorkshire-values .card{
  			max-width: 600px;
  } 
  
  .Yorkshire-values .cards .card h3{
  		font-size:30px;
    	padding-bottom:10px;
    	font-weight:600;
  }
  
  .Yorkshire-values .cards .card p{
  		font-size:: 1.15rem;;
  }
  
.features-grid, .process-grid {
    display: grid;
    gap: clamp(20px, 6vw, 52px);
    margin-top: clamp(5px, 2vw, 50px);
}
  
  .features {
    padding: 100px 40px;
    background: #fff;
    position: relative;
    overflow: hidden;
}
 
}

  
    .Yorkshire-values .cta-button {
        padding: 8px 20px;
    }
  


/* ============================================================= */
/* 5. SPECIALISE, FANCY CHAT, FEATURES, SECURITY, PROCESS       */
/* ============================================================= */
/* ============================================================= */
/* 5. SPECIALISE, FANCY CHAT, FEATURES, SECURITY, PROCESS        */
/* ============================================================= */

/* Global Section Padding */
.specialise,
.security,
.process,
.features,
.fancy-chat-section {
    padding: 80px 5%;
}

/* Backgrounds */
.specialise,
.security {
    background: #000;
}

.features,
.process {
    background: #fff;
    color: #222;
}

/* Fancy Chat */
.fancy-chat-section {
    background: #1a1a1a;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
}

.fancy-chat-section .content {
    flex: 1;
    min-width: 300px;
}

.fancy-chat-section h1 {
    font-size: 45px;
    margin-bottom: 16px;
}

.fancy-chat-section .chat-btn a {
    font-size: 1.4rem;
    background: #de3673;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
}

@media (max-width: 1023px) and (min-width: 640px){
  .fancy-chat-section{
  	display: flex;
    flex-wrap:wrap;
    flex-direction:column;
  }

}


/* Features Section Base */
.features {
    padding: 120px 40px;
    background: #fff;
    position: relative;
    overflow: hidden;
}

/* Feature Icon (Desktop Default) */
.features-icon {
    font-size: 50px;
    color: #e91e63;
    margin-bottom: 15px;
    transition: 0.3s ease;
}

/* Hover Effect */
.features-card:hover .features-icon {
    color: #ff4081;
    transform: scale(1.1);
}

/* Feature Titles */
.features-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    margin-bottom: 12px;
}

.features-card p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

@media (max-width: 560px) {
    .fancy-chat-section {
        text-align: center;
        justify-content: center;
    }
}

/* Containers */
.specialise-container,
.security-container,
.process-container {
    max-width: 1400px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.specialise-content,
.security-content,
.specialise-image,
.security-mockup {
    flex: 1;
    min-width: 300px;
}

/* Headings */
.specialise h2,
.security h2,
.process h2 {
    font-size: 45px;
    margin-bottom: 20px;
}

.specialise .pink,
.security .pink,
.process .pink {
    color: #ff2a6d;
}

/* Process Icons */
.process-icon {
    font-size: 50px;
    color: #e91e63;
    margin-bottom: 15px;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s ease;
}

.process-step:hover .process-icon {
    transform: scale(1.1);
}

/* Paragraphs */
.specialise p,
.security p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 16px;
}

/* Images */
.specialise-image,
.security-mockup img {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,.7);
}

.security-mockup img {
    max-height: 55vh;
    object-fit: contain;
}

/* Reverse Sections for Odd Blocks */
.specialise:nth-of-type(odd) .specialise-container,
.security:nth-of-type(odd) .security-container {
    flex-direction: row-reverse;
}

/* Tablet Fix */
@media (max-width: 999px) {
    .specialise-container,
    .security-container {
        display: block;
    }
}

/* Features & Process Grid */
.features-grid,
.process-grid {
    display: grid;
    gap: clamp(20px, 3vw, 40px);
    margin-top: clamp(40px, 5vw, 60px);
}

.features-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.process-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.features-card,
.process-step {
    /* Aapka existing code */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* Unique Liquid Design */
    padding: 30px;
    background: #ffffff; 
    
    /* Bahut bada border-radius, jisse edges soft lagein */
    border-radius: 40px 10px 40px 10px; /* Asymmetrical / Wavy Corners */
    
    /* Multiple subtle shadows for depth and floating effect */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05),
                0 20px 40px rgba(0, 0, 0, 0.08); 
    
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth bouncy transition */
    cursor: pointer;
}

/* Hover Effect: Card ki shape badlegi aur upar uthega */
.features-card:hover,
.process-step:hover {
    /* Corner shape ulta ho jayega, jisse liquid transition dikhe */
    border-radius: 10px 40px 10px 40px; 
    
    /* Thoda upar uthega */
    transform: translateY(-8px); 
    
    /* Shadow aur gehra hoga */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1),
                0 30px 60px rgba(45, 100, 250, 0.2); /* Soft blue/accent glow */
}

/* Content ke beech behtar spacing ke liye: */
.features-card {
    gap: 15px; 
}



/* Desktop 3 Columns */
@media (min-width: 1024px) {
    .features-grid,
    .process-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet 1 Column */
@media (max-width: 1023px) and (min-width: 640px) {
    .features-grid,
    .process-grid {
        grid-template-columns: 1fr;
    }
}

/* ========== MOBILE FIX (FINAL WORKING FIX) ========== */
@media (max-width: 639px) {
    .features-grid,
    .process-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .features-card,
    .process-step {
        max-width: 340px;
        margin: 0 auto;
    }
  
 .specialise h2,
.security h2,
.process h2 {
    font-size: 40px;
    margin-bottom: 30px;
}


  .process-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
    /* BIGGER ICONS ON MOBILE */
    .features-icon,
    .process-icon {
        width: 110px;
        height: 110px;
        font-size: 65px;
       margin: 0 auto !important;
    }

    /* Bigger images inside icons */
    .features-icon img,
    .process-icon img {
        width: 65px;
        height: 65px;
    }
  
  .features-card h3{
  	font-size:30px;
  }

    /* Make feature text larger */
    .features-card h3 {
        font-size: 35px;
    }

    .features-card p {
        font-size: 1.15rem;
      
    }
}

/* ============================================================= */
/* 6. FOOTER                                                     */
/* ============================================================= */
footer {
    background: #000;
    padding: 60px 5% 40px;
    color: #fff;
}

.footer {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: space-between;
    max-width: 1400px;
    margin: auto auto 50px;
}

.footer > div {
    flex: 1;
    min-width: 220px;
}

.footer ul li {
    padding: 4px 0;
}

.footer ul li.disable {
    opacity: .7;
    font-weight: 600;
    margin-bottom: 8px;
}

.footer-btn,
.footer-contact-btn {
    background: #de3673;
    color: #fff;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    margin-top: 12px;
    cursor: pointer;
}

.social-media {
    text-align: center;
    margin: 60px 0 40px;
    position: relative;
}

.social-media::before,
.social-media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #353535;
}

.social-media::before { top: -40px; }
.social-media::after { bottom: -40px; }

.social-media .icons i {
    font-size: 34px;
    margin: 0 12px;
}

.footer-end-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    max-width: 1400px;
    margin: auto;
    border-top: 1px solid #353535;
    padding-top: 20px;
    font-size: 15px;
}

.footer-end-content .right{
  flex: 1;
    min-width: 200px;
}
.footer-end-content .left {
    flex: 1;
    min-width: 200px;
  text-align:end
}

/* ============================================================= */
/* 7. CONTACT PAGE – FULLY PRESERVED                             */
/* ============================================================= */
.contact-hero {
    text-align: center;
    padding: 80px 40px 60px;
    background: #fff;
}

.contact-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #222;
}

.contact-hero p {
    color: #666;
    font-size: 1.1rem;
    margin-top: 10px;
}

.contact-wrapper {
    padding: 80px 20px;
    background: #fafafa;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}

.contact-left h2 {
    font-size: 1.8rem;
    color: #222;
    margin-bottom: 10px;
}

.contact-left .desc {
    color: #666;
    margin-bottom: 25px;
    line-height: 1.6;
}

.contact-details .detail {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 1rem;
    color: #333;
}

.contact-details .detail i {
    color: #ff007f;
    font-size: 1.2rem;
    margin-right: 10px;
}

.contact-details a {
    color: #333;
    text-decoration: none;
}

.contact-details a:hover {
    color: #ff007f;
}

.contact-right {
    background: #fff;
    padding: 40px 30px;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.contact-right h3 {
    font-size: 1.4rem;
    color: #222;
    margin-bottom: 5px;
}

.contact-right p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 20px;
}

.wpforms-form input,
.wpforms-form textarea,
.wpforms-form select {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 12px 15px;
    font-size: 1rem;
    margin-bottom: 15px;
    transition: border 0.3s;
}

.wpforms-form input:focus,
.wpforms-form textarea:focus,
.wpforms-form select:focus {
    border-color: #ff007f;
    outline: none;
}

.wpforms-submit {
    background: #ff007f !important;
    color: #fff !important;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.3s ease;
}
.herosection{
   width:46%;
}
.wpforms-submit:hover {
    background: #d7006d !important;
}

@media (max-width: 768px) {
    .contact-right, .contact-left { text-align: center; }
    .contact-details { justify-content: center; }
    .contact-right { padding: 30px 20px; }
    .fancy-chat-section .chat-btn a { font-size: 0.8rem; }
    .hero .cta {font-size: 0.6rem !important;}
    .herosection{ width:100%;padding: 60px 0px; }
}
.contact-left{
	margin-bottom:50px;
}
.contact-grid{
	display:block;
}

/* ============================================================= */
/* 8. FINAL RESPONSIVE TWEAKS                                    */
/* ============================================================= */
@media (max-width: 480px) {
    .hero .form select { font-size: 0.95rem; }
    .Yorkshire-values .cards { gap: 20px; }
    .specialise-container { gap: 30px; }
    .fancy-chat-section .chat-btn a { font-size: 0.8rem; }
}


/* SERVICES PAGE STYLING */

.services-hero {
    padding: 120px 0 60px;
    text-align: center;
}

.services-hero h1 {
    font-size: 48px;
    line-height: 1.2;
    font-weight: 700;
}

.services-hero .pink {
    color: #ff007f;
}

.services-hero .subtitle {
    margin-top: 15px;
    font-size: 18px;
    opacity: 0.85;
}

/* MAIN SECTION */

.services-section {
    padding: 80px 0;
}

.services-title {
    font-size: 38px;
    text-align: center;
    margin-bottom: 50px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 90%;
    margin: 0 auto;
}


./* ============================================================= */
/* 1. KEYFRAMES: Glowing Pulse Animation 
/* ============================================================= */
@keyframes glowing-pulse {
    0% {
        box-shadow: 0px 0px 10px rgba(222, 54, 115, 0.3), 0px 0px 20px rgba(222, 54, 115, 0.1);
    }
    50% {
        box-shadow: 0px 0px 15px #ff2a6d, 0px 0px 35px rgba(255, 42, 109, 0.5);
    }
    100% {
        box-shadow: 0px 0px 10px rgba(222, 54, 115, 0.3), 0px 0px 20px rgba(222, 54, 115, 0.1);
    }
}

/* ============================================================= */
/* 2. COMPLIANCE CARD: Base Styles (::after setup) */
/* ============================================================= */
.service-card {
    background: linear-gradient(145deg, #1a1a1a, #141414);
    padding: 25px;
    border-radius: 12px;
    transition: 
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;
    border: 1px solid #2a2a2a;
    position: relative;
    overflow: hidden; 
}

/* ============================================================= */
/* 3. SHINE EFFECT (::before) - 
/* ============================================================= */
.service-card::before{
    content:"";
    position:absolute;
    top:-120%;
    left:-120%;
    width:200%;
    height:200%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.18) 45%,
        transparent 80%
    );
    transform: rotate(25deg);
    transition: 0.65s ease;
    pointer-events: none;
    z-index: 1; 
}

.service-card:hover::before{
    top:120%;
    left:120%;
}

/* ============================================================= */
/* 4. NEW: RISING PINK GLOW BORDER (::after) */
/* ============================================================= */
.service-card::after {
    content: "";
    position: absolute;
   
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    
    
    box-shadow: 0 0 10px #ff2a6d;
    background: linear-gradient(to top, #ff2a6d 0%, transparent 100%);
    
   
    transform: scaleY(0); 
    transform-origin: bottom; 
    opacity: 0;
    
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    pointer-events: none;
    z-index: 2; 
}

.service-card:hover::after {
    
    transform: scaleY(1);
    opacity: 0.2;
}

/* ============================================================= */
/* 5. HOVER EFFECT: Lift + Border + Glowing Pulse Shadow */
/* ============================================================= */
.service-card:hover {
    transform: translateY(-7px) scale(1.015);
    border-color: #de3673;
    
   
    box-shadow: 0px 0px 25px rgba(222, 54, 115, .25);
    animation: glowing-pulse 2s infinite alternate ease-in-out;
}

.service-card h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.service-card p {
  	font-size:16px;
    opacity: 0.85;
    margin-bottom: 15px;
}

.service-card ul {
    font-size:16px;
    margin: 0;
    padding-left: 18px;
}

.service-card ul li {
    margin-bottom: 8px;
    opacity: 0.9;
}

/* CTA */

.services-cta {
    padding: 80px 0;
    text-align: center;
    background: #575757;
}

.services-cta h2 {
    font-size: 36px;
    margin-bottom: 10px;
}

.services-cta p {
    opacity: 0.8;
    margin-bottom: 25px;
}

.cta-button {
    display: inline-block;
    background: #ff007f;
    color: white;
    padding: 14px 34px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    transition: 0.3s ease;
}

.cta-button:hover {
    background: #db006e;
}

/* RESPONSIVE */

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

/* ===== HERO SECTION ===== */
.blog-hero {
    padding: 120px 0 80px;
    background: #0a0a0a;
    color: #fff;
}
.blog-hero .container {
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}
.blog-hero h1 {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.2;
}
.blog-hero p {
    font-size: 18px;
    margin-top: 10px;
    color: #d4d4d4;
}

/* ===== BLOG LIST ===== */
.blog-list {
    padding: 60px 0;
}
.blog-container {
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 35px;
}

/* BLOG CARD */
.blog-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: .3s;
}
.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.15);
}

.blog-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.blog-content {
    padding: 20px;
}
.blog-content h3 {
    font-size: 22px;
    margin-bottom: 10px;
    color: #111;
}
.blog-content p {
    font-size: 16px;
    color: #555;
}
.blog-meta {
    font-size: 14px;
    color: #de3673;
    margin-bottom: 10px;
}

.read-more {
    display: inline-block;
    margin-top: 12px;
    color: #de3673;
    text-decoration: none;
    font-weight: 600;
    transition: .3s;
}
.read-more:hover {
    margin-left: 6px;
}

/* PAGINATION */
.pagination {
    text-align: center;
    margin-top: 40px;
}
.pagination a,
.pagination span {
    padding: 10px 18px;
    margin: 0 5px;
    background: #fff;
    border-radius: 8px;
    color: #111;
    text-decoration: none;
    font-size: 16px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.pagination .current {
    background: #de3673;
    color: #fff !important;
}
/* ------------------------------
   SINGLE BLOG PAGE – PREMIUM STYLE
--------------------------------*/

.single-blog-page {
    max-width: 820px;
    margin: 80px auto;
    padding: 0 20px;
    font-family: "Inter", sans-serif;
    color: #fff;
}

/* Breadcrumb */
.breadcrumb {
    font-size: 14px;
    margin-bottom: 25px;
}
.breadcrumb a {
    color: #de3673;
}
.breadcrumb span {
    color: #aaa;
}

/* Blog Title */
.single-blog-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
    color: #fff;
}

/* Meta Section */
.single-blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #bbb;
    font-size: 15px;
    margin-bottom: 35px;
}

/* Featured Image */
.single-blog-featured-img img {
    width: 100%;
    border-radius: 16px;
    margin-bottom: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

/* Content Styling */
.single-blog-content {
    font-size: 18px;
    line-height: 1.9;
    color: #e0e0e0;
}

.single-blog-content h2,
.single-blog-content h3,
.single-blog-content h4 {
    color: #fff;
    margin-top: 40px;
    margin-bottom: 15px;
    font-weight: 700;
}

.single-blog-content p {
    margin-bottom: 22px;
}

.single-blog-content ul,
.single-blog-content ol {
    margin-bottom: 30px;
}

/* Tags */
.single-blog-tags {
    margin-top: 40px;
    font-size: 16px;
}
.single-blog-tags a {
    background: #de3673;
    padding: 6px 12px;
    border-radius: 20px;
    color: white;
    margin-right: 8px;
    display: inline-block;
}

/* Share Buttons */
.blog-share {
    margin-top: 50px;
    display: flex;
    align-items: center;
    gap: 15px;
}
.blog-share span {
    font-size: 16px;
    color: #eee;
}
.blog-share a {
    color: white;
    padding: 8px 15px;
    background: #de3673;
    border-radius: 25px;
    transition: 0.3s;
    font-size: 14px;
}
.blog-share a:hover {
    background: #b91e5a;
}

/* Post Navigation */
.post-navigation {
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
}
.post-navigation a {
    color: #de3673;
    font-weight: 600;
}
.post-navigation a:hover {
    text-decoration: underline;
}
.security-compliance {
    padding: 80px 0;
    background: #0d0d0d;
}

.security-compliance h2 {
    text-align: center;
    font-size: 42px;
    margin-bottom: 10px;
    color: #fff;
}

.security-compliance .subtitle {
    text-align: center;
    color: #aaa;
    font-size: 18px;
    max-width: 700px;
    margin: 0 auto 40px;
}

.compliance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

./* ============================================================= */
/* 1. KEYFRAMES: Glowing Pulse Animation 
/* ============================================================= */
@keyframes glowing-pulse {
    0% {
        box-shadow: 0px 0px 10px rgba(222, 54, 115, 0.3), 0px 0px 20px rgba(222, 54, 115, 0.1);
    }
    50% {
        box-shadow: 0px 0px 15px #ff2a6d, 0px 0px 35px rgba(255, 42, 109, 0.5);
    }
    100% {
        box-shadow: 0px 0px 10px rgba(222, 54, 115, 0.3), 0px 0px 20px rgba(222, 54, 115, 0.1);
    }
}

/* ============================================================= */
/* 2. COMPLIANCE CARD: Base Styles (::after setup) */
/* ============================================================= */
.compliance-card {
    background: linear-gradient(145deg, #1a1a1a, #141414);
    padding: 25px;
    border-radius: 12px;
    transition: 
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;
    border: 1px solid #2a2a2a;
    position: relative;
    overflow: hidden; 
}

/* ============================================================= */
/* 3. SHINE EFFECT (::before) - 
/* ============================================================= */
.compliance-card::before{
    content:"";
    position:absolute;
    top:-120%;
    left:-120%;
    width:200%;
    height:200%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0.18) 45%,
        transparent 80%
    );
    transform: rotate(25deg);
    transition: 0.65s ease;
    pointer-events: none;
    z-index: 1; 
}

.compliance-card:hover::before{
    top:120%;
    left:120%;
}

/* ============================================================= */
/* 4. NEW: RISING PINK GLOW BORDER (::after) */
/* ============================================================= */
.compliance-card::after {
    content: "";
    position: absolute;
   
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    
    
    box-shadow: 0 0 10px #ff2a6d;
    background: linear-gradient(to top, #ff2a6d 0%, transparent 100%);
    
   
    transform: scaleY(0); 
    transform-origin: bottom; 
    opacity: 0;
    
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    pointer-events: none;
    z-index: 2; 
}

.compliance-card:hover::after {
    
    transform: scaleY(1);
    opacity: 0.2;
}

/* ============================================================= */
/* 5. HOVER EFFECT: Lift + Border + Glowing Pulse Shadow */
/* ============================================================= */
.compliance-card:hover {
    transform: translateY(-7px) scale(1.015);
    border-color: #de3673;
    
   
    box-shadow: 0px 0px 25px rgba(222, 54, 115, .25);
    animation: glowing-pulse 2s infinite alternate ease-in-out;
}
.compliance-card h3 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 20px;
}

.compliance-card p {
    color: #ccc;
    font-size: 15px;
}

@media (max-width: 1023px) and (min-width: 640px){
   .Yorkshire-values .card{
  	
  }
  

    .Yorkshire-values .card::before{
        animation: shineLoop 3s infinite;
    }

    @keyframes shineLoop {
        0%{
            top:-120%;
            left:-120%;
        }
        40%{
            top:120%;
            left:120%;
        }
        100%{
            top:120%;
            left:120%;
        }
    }

  
  .hero h1 {
    font-size: 50px;
    line-height: 1.1;
    margin-bottom: 12px;
 }
  .hero .subtitle {
    font-size: 30px;
    color: #ccc;
    margin-bottom: 40px;
}
  .compliance-card h3 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 35px;
    font-weight: 500;
}
  .compliance-card p{
  		font-size:30px;
  }
  
  .features-card p , .process-step p{
  	font-size:30px;
  }
   
  .features-card h3 , .process-step h3{
  	font-size:35px;
    font-weight:500;
  }
  
  .specialise-content p ,.security-content p{
  font-size:30px;
  
  }
  
  .specialise p, .security p {
    font-size: 25px;
    line-height: 1.7;
    margin-bottom: 16px;
}
  .compliance-card p{
  		font-size:1.15rem;
  }
  
  
  
  .Yorkshire-values .subtitle {
    font-size:25px;
    margin-bottom: 50px;
   }
 .Yorkshire-values .cards .card h3 {
        font-size: 35px;
        font-weight: 500;
   		padding-bottom: 8px;
    }
  
  .Yorkshire-values .cards .card p {
        font-size: 30px;
       
    }
  
  .right p{
  		font-size:25px;
			margin-top:7px;
  }
  
  .Yorkshire-values {
    text-align: center;
    /* background: #191717; */
    padding: 20px 5% !important;
}
  
 .features {
    padding: 30px 30px;
    background: #fff;
    position: relative;
    overflow: hidden;
}
  
}
.menu-items{
    list-style: none;
    display: flex;
    gap: 22px;
}


  @media (max-width: 1024px) {
    .hero .cta {
        width: 80%;
        padding: 10px;
        font-size: 1.5rem;
        text-align: center;
    }
}

/* Only mobile auto-shine */
@media (max-width:768px){
  .Yorkshire-values .card{
  	border: 1px solid #2a2a2a;
  }
  

    .Yorkshire-values .card::before{
        animation: shineLoop 3s infinite;
    }

    @keyframes shineLoop {
        0%{
            top:-120%;
            left:-120%;
        }
        40%{
            top:120%;
            left:120%;
        }
        100%{
            top:120%;
            left:120%;
        }
    }
  .Yorkshire-values .card:hover{
  		border: 1px solid #de3673
  }

}