@tailwind base;
@tailwind components;
@tailwind utilities;

/* base */
@layer base{
    html{
        scroll-behavior: smooth;
    }
    body{
        @apply pt-[60px] lg:pt-0;        
    }
    h1,h2,h3,h4,h5,h6{
        @apply font-bold mb-3
    }
    h1{
        @apply text-2xl
    }
    h2,h3{
        @apply text-xl
    }
    h4,h5,h6{
        @apply text-base
    }
    ul,ol{
        @apply p-3 m-3
    }
    ul{
        @apply list-disc
    }
    ol{
        @apply list-decimal
    }
    p{
        
    }
    ::selection {
        @apply bg-black text-white; 
    }
    ::-moz-selection {
        @apply bg-black text-white;
    }
    @font-face {
        font-family: 'Roboto';
        src: url('assets/fonts/Roboto.ttf');
    }

    @font-face {
        font-family: 'Raleway';
        src: url('assets/fonts/Raleway.ttf');
    }
}


@layer utilities{    
    .text-shadow{
       text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    }
    .font-roboto{
        font-family: 'Roboto';
    }
    .font-raleway{
        font-family: 'Raleway';
    }
   .list-unstyled{
        @apply m-0 p-0 list-none
    }
}

/* public */
@layer components{    
    .swiper-container{
        overflow: hidden;
    }

    .ani{
        @apply transition-all duration-300
    }

    .stretched-link::after{
        @apply absolute inset-0 z-10 pointer-events-auto content-[''];
    }

    .font-icon{font-family: FontAwesome;}
    
    .block-path-wrap{
        @apply py-3 lg:py-5
    }
}

/* banner */
@layer components{
    .banner img.banner-img,
    .banner .banner-video{
        @apply w-full aspect-video lg:aspect-auto overflow-hidden object-cover
    }
    .banner .autoplay-progress {
        position: absolute;
        right: 16px;
        bottom: 16px;
        z-index: 10;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        color: var(--swiper-theme-color);
    }
    .banner .autoplay-progress svg {
        --progress: 0;
        position: absolute;
        left: 0;
        top: 0px;
        z-index: 10;
        width: 100%;
        height: 100%;
        stroke-width: 4px;
        stroke: var(--swiper-theme-color);
        fill: none;
        stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
        stroke-dasharray: 125.6;
        transform: rotate(-90deg);
    }
}

@layer home{
    
/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Custom animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}



/* Stagger delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

/* Initial state for animations */
.opacity-0-initial {
    opacity: 0;
}

/* Certificate badge hover */
.cert-badge {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.cert-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(30, 64, 175, 0.2);
}

/* Metric pulse */
@keyframes metricPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.metric-pulse {
    animation: metricPulse 2s ease-in-out infinite;
}

/* Hero gradient overlay */
.hero-gradient {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.95) 0%, rgba(30, 58, 138, 0.95) 100%);
}

/* Glass effect for cards */
.glass-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

/* Wave decoration */
.wave-decoration {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='%23F0F9FF' fill-opacity='1' d='M0,64L48,58.7C96,53,192,43,288,48C384,53,480,75,576,80C672,85,768,75,864,64C960,53,1056,43,1152,48C1248,53,1344,75,1392,85.3L1440,96L1440,100L1392,100C1344,100,1248,100,1152,100C1056,100,960,100,864,100C768,100,672,100,576,100C480,100,384,100,288,100C192,100,96,100,48,100L0,100Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: cover;
    background-position: center bottom;
}

}

/* pc导航 */
@layer components{
    .navbar{
        @apply flex justify-center lg:block xl:px-10
    }
    .nav-menu{
        @apply py-3 lg:py-0
        /* lg:bg-primary  */
    }
    .nav-menu .navbar-menu{
        @apply flex justify-center gap-2
        /* divide-x divide-gray-500; */
    }
    .nav-menu .navbar-menu>li{
        @apply relative z-20;
    }
    .nav-menu .navbar-menu>li>a{
        @apply block py-3 text-center lg:min-w-[6rem]
        text-[var(--yxseo-theme-color-4)]
        dark:text-gray-700 
    }
    .nav-menu .navbar-menu>li>a::before{
        @apply content-[''] block absolute inset-0 -z-10 transition-all scale-0 duration-300
        /* bg-blue-100 */
    }
    .nav-menu .navbar-menu>li:hover>a,
    .nav-menu .navbar-menu>li.current-menu-item>a,
    .nav-menu .navbar-menu>li.current-menu-parent>a
    {
        @apply text-accent dark:text-black
    }

    .nav-menu .navbar-menu>li:hover>a::before,
    .nav-menu .navbar-menu .current-menu-item>a::before,
    .nav-menu .navbar-menu .current-menu-parent>a::before
    {
        @apply scale-100
    }
    .nav-menu .navbar-menu>li:hover .sub-menu{
        @apply scale-y-100
    }
    .nav-menu .navbar-menu>li.menu-item-has-children>a::after{
        @apply content-['\f0d7'] absolute font-icon pl-2
    }

    .nav-menu .navbar-menu .sub-menu{
        @apply absolute inset-0 top-full bg-white transition-all scale-y-0 duration-300 min-w-[15rem] m-0 p-0 list-none;
    }
    .nav-menu .navbar-menu .sub-menu>li{
        @apply relative
    }
    .nav-menu .navbar-menu .sub-menu>li:not(:last-child){
        @apply border-b border-b-gray-200;
    }
    .nav-menu .navbar-menu .sub-menu>li>a{
        @apply block p-4 bg-gray-50 text-gray-700 text-sm font-normal;
    }
    .nav-menu .navbar-menu .sub-menu>li>a:hover{
        @apply bg-sky-200 ;
    }
    .nav-menu .navbar-menu .sub-menu>li>a::after{
        @apply content-['\f0da'] absolute font-icon right-5 text-gray-400 transition-all duration-300;
    }
    .nav-menu .navbar-menu .sub-menu>li>a:hover::after{
        @apply translate-x-2 text-white;
    }
}


/* 内页 */
@layer components{
    main.page{
        @apply bg-gray-200 shadow  py-10 lg:py-20
    }  
    .page-path{
        @apply border-b border-b-gray-100
    }

    /* 内页含侧边栏 */
    .page-grid-sidebar{
        @apply flex flex-col lg:grid lg:grid-cols-4 gap-4 lg:gap-10;
    }
    .page-grid-sidebar>.page-content{
        @apply lg:col-span-3  order-1 lg:order-2
    }
    .page-grid-sidebar>aside{
        @apply order-2 lg:order-1
    }
    /* 内页无侧边栏 */
    .page-grid{
        @apply block;
    }

    .layout-inner{
        @apply bg-white p-5 lg:p-10;
    }
    .page-grid .layout-inner{
        @apply mx-auto max-w-[var(--wp--style--global--content-size)]
    }

    .pagelist{
        @apply flex justify-center gap-2 text-sm mt-5 flex-wrap 
    }
    .pagelist .current{
        @apply bg-primary text-white
    }
    .pagelist span{
        @apply p-2 bg-gray-200 rounded-sm text-gray-500 text-center;
        min-width: 2rem;
    }
    .pagelist a{
        @apply p-2 bg-gray-200 rounded-sm text-gray-600 hover:bg-black hover:text-white text-center;    
        min-width: 2rem;
    }

    h1.single-title{
        @apply text-center text-3xl pb-3
    }

    .social-share{
        @apply text-center
    }

    .single-info{
        @apply list-none m-0 p-2 grid grid-cols-2 lg:flex justify-center items-center text-sm mx-auto gap-4 text-gray-500;        
    }
    .single-info span{
        @apply  pr-1
    }
    .single-info a:hover,
    .single-info i:hover{
        @apply text-accent
    }

    .single-contacts{
        @apply flex flex-col lg:flex-row m-0 p-0 list-none gap-4;
    }
    .single-contacts a{
        @apply py-3 px-5
    }
    .single-contacts>li:nth-child(1) a{
        @apply border hover:bg-primary hover:text-white;
    }
    .single-contacts>li:nth-child(2) a{
        @apply bg-primary text-white hover:bg-accent;
    }


    .content-product{}
    .content-product .tab-nav{
        @apply m-0 p-0 list-none flex gap-2
    }
    .content-product .tab-nav li{ 
        @apply bg-gray-100 text-gray-600 py-3 px-6 cursor-pointer
    }
    .content-product .tab-nav li:hover,
    .content-product .tab-nav li.active{
        @apply bg-primary text-white hover:bg-accent
    }

    .content-product .tab-content{
        @apply border-t mt-5
    }
    .content-product .tab-content .tab-item{
        @apply hidden;
    }
    .content-product .tab-content .tab-item.active{
        @apply block
    }

    .entry-content{
        @apply py-5
    }
    /* 产品详情 */
    .content-product .entry-content p{
        @apply mb-10
    }

    .cpcs table{
        @apply w-full mt-5 font-roboto
    }
    .cpcs table td{
        @apply border border-gray-200 p-2
    }

    /* 产品相册 */
    .swiper-big .swiper-slide,
    .swiper-small .swiper-slide {
        width: auto !important;
        max-width: 100% !important;
    }
    .swiper-big .swiper-slide img,
    .swiper-small .swiper-slide img {
        @apply block w-full h-auto object-cover aspect-[4/3];
    }
    .swiper-small .swiper-slide{
        @apply opacity-50
    }
    .swiper-small .swiper-slide-thumb-active{
        @apply opacity-100
    }
    
    .swiper-small .swiper-slide img{
        @apply w-[82px] lg:w-[120px]
    }
    

}


/* 侧边栏 */
@layer components{
    .nav-products ul{
        @apply list-unstyled divide-y h-full flex flex-col bg-white
    }

    .nav-products>ul>li>a{
        @apply block hover:bg-blue-600 hover:text-white px-5 transition-all py-4 hover:pl-6 duration-300 text-sm
    }

    .nav-products>ul>li>a::before{
        @apply content-['\f105'] font-icon pr-2
    }

    .nav-products .sub-menu{
        @apply bg-gray-100
    }
    .nav-products .sub-menu>li>a{
        @apply block hover:bg-blue-200 hover:text-blue-700 px-5 py-3 text-gray-600 transition-all hover:pl-8 duration-300
    }
    .nav-products .sub-menu>li>a::before{
        @apply content-['\f101'] font-icon pr-2 text-gray-500
    }

    .catlist-select select{
        @apply block w-full p-3 rounded-lg border-2
    }
    .catlist-select option{
        @apply text-gray-600
    }

    .nav-left ul{
        @apply list-unstyled
    }
    .nav-left ul li{
        @apply mt-3
    }
    .nav-left ul li a{
        @apply block bg-sky-600 p-5 font-bold hover:bg-blue-800 text-white
    }
    .nav-left ul li a::before{
        @apply content-['\f105'] font-icon pr-2
    }

    .sidebar{
        @apply m-0 p-0 list-none flex flex-col gap-4
    }

    .sidebar>section{
        @apply bg-white
    }

    .sidebar .title{
        @apply p-4 bg-primary text-white text-lg
    }
    .sidebar>section .menu{
        @apply list-none m-0 p-0 font-roboto
    }
    .sidebar>section .menu>li{

    }
    .sidebar>section .menu>li>a{
        @apply relative block p-3 pl-10 border-b hover:bg-gray-50 hover:text-primary;
    }
    .sidebar>section .menu>li>a::before{
        /* →:f0da ↓:f0d7 */
        @apply content-['\f0da'] absolute font-icon left-5 text-gray-300
    }
    .sidebar>section .menu>li.menu-item-has-children>a::before{
        @apply content-['\f0d7'] text-gray-300
    }
    .sidebar>section .menu>li .sub-menu{
        @apply p-3 m-0 list-none text-sm font-thin bg-gray-50
    }
    .sidebar>section .menu>li .sub-menu li{
        @apply relative
    }
    .sidebar>section .menu>li .sub-menu a{
        @apply block p-3 pl-5 hover:text-primary;
    }
    .sidebar>section .menu>li .sub-menu a::before{
        @apply content-['\f105'] absolute font-icon left-2 text-gray-500
    }
}

/* 手机导航 */
@layer components{
    .silder-nav{        
        @apply bg-primary flex justify-center items-center h-[60px] py-0 px-5 text-white fixed w-[100vw] left-0 top-0;
        z-index: 9900;    
    }
    .silder-nav a{    
        @apply text-white flex-1    
    }
    .silder-nav .logo{
        flex: 1;
    }
    .menu-icon-close{
        text-align: right;
    }

    .silder-menu{
        position: fixed;
        top: 0;
        right: 0;
        color:#fff;
        width:70%;
        height: 100vh;
        padding:10px;
        transform: translateX(100%);
        z-index: 9920;
        transition: all ease .3s;
        @apply bg-accent
    }
    .silder-menu ul{
        list-style-type: none;
    }
    .silder-menu>ul{
        margin: 0;
        padding: 0;        
    }

    .overlay{
        width: 100vw;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        cursor:pointer;
        z-index: 9910;
        scale: 0;
    }

    .body-wrap,.silder-nav{
        transition: all ease .3s;
    }
    body.open {
        /* 锁定滚动条 */
        overflow: hidden; 
        height: 100%;
    }
    body.open .body-wrap,
    body.open .silder-nav{
        transform: translateX(-70%);
    }
    body.open .silder-menu{
        transform: translateX(0);
    }
    body.open .overlay{
        background-color: rgba(0, 0, 0, .3);
        scale: 100%;
    }

    .silder-menu .nav-menu {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .silder-menu .nav-menu a{
        @apply block p-3
    }
    .silder-menu .nav-menu>li>a{
        @apply  border-b border-gray-200/50 text-lg
    }

    .silder-menu .sub-menu {
        list-style: none;
        padding: 0 10px;
        margin: 0;
        display: none;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: opacity 0.3s ease, max-height 0.3s ease;
        background-color: rgba(0, 0, 0, .1);
    }

    .silder-menu .submenu-visible {
        display: block;
        opacity: 1;
        max-height: 500px; /* 足够大的值以容纳所有子菜单 */
    }

    .nav-search{
        @apply absolute left-0 top-full bg-black/80 w-full ani scale-y-0 origin-top
    }
    body.search-open .nav-search{
        @apply scale-y-100;
    }
    .nav-search .has-error{
        @apply bg-orange-200 text-white
    }

    .silder-menu .menu-item-has-children > a::after {
        content: "\f078";
        font-family: "FontAwesome";
        float: right;
        transition: transform 0.3s;
    }

    .silder-menu .menu-item-has-children.open > a::after {
        transform: rotate(180deg);
    }
}


/* footer */
.footer_container{

}
.footer-nav ul{
    @apply m-0 p-0 list-none
}
.footer-nav>ul{
    @apply grid grid-cols-3 lg:flex gap-4
}
.footer-nav>ul>li{
    @apply lg:flex-1
}
.footer-nav>ul>li>a{
    @apply font-bold text-lg
}
.footer-nav .sub-menu{
    @apply pt-3 lg:pt-5
}
.footer-nav .sub-menu li{
    @apply py-1
}
.footer-nav .sub-menu li a{
    @apply block ani opacity-70 line-clamp-1
}
.footer-nav .sub-menu li:hover a{
    @apply translate-x-1 opacity-100
}

/*
其他
*/

.is-style-i2rem{ 
    text-indent:2rem;
}
.about-col .wp-block-column{
    @apply ani cursor-pointer;
}
.about-col .wp-block-column:hover{
    @apply -translate-y-2
}

.wp-block-media-text__content{
    @apply p-0  lg:px-10 !important
}
.wp-block-image.aligncenter{
    @apply mx-auto
}
.entry-content{
    @apply max-w-full
}
.entry-content blockquote{
    @apply border-l-4 border-gray-200 pl-5
}
.wp-content>p{
    @apply mb-5 mt-0
}
.wp-block-table{
    @apply overflow-x-auto max-w-full
}
.wp-block-table>table{
    @apply min-w-[600px]
}
.tab-content table{
    @apply w-full border-collapse mt-3
}
.tab-content table td,
.tab-content table tr{
    @apply p-2 border break-keep
}
.tab-content .tab-item{
    @apply overflow-x-auto max-w-full
}


/* 评论表单 */
.yxseo-comment-form{
    @apply text-sm
}
.yxseo-comment-form .comment-input{
    @apply w-full p-3 bg-gray-100 rounded border border-gray-100
}
.yxseo-comment-form .comment-input:focus{
    @apply outline-blue-400
}
.yxseo-comment-form .comment-input.error{
    @apply border-red-600
}
.yxseo-comment-form .comment-submit{
    @apply bg-primary text-white py-3 px-6 hover:bg-accent rounded
}
.yxseo-comment-form .comment-form-cookies-consent{
    @apply text-sm font-roboto text-gray-500
}


/* 侧边栏 */
.sidebar-left .product-nav ul{
    @apply m-0 p-3 list-none;
}

.sidebar-left .product-nav ul>li>a{
    @apply block p-3 hover:bg-accent hover:text-white
}
.sidebar-left .product-nav ul>li>a::before{
    @apply content-['\f105'] pr-1 font-icon
}

/* 经典编辑器 */
/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}


/* 客服条 */
.kf-wrap{
    @apply fixed right-0 top-1/3 translate-x-full;
    z-index: 999;
}
.kf-list{
    @apply m-0 p-0 list-none relative text-white;
}
.kf-list .icon{
    @apply w-12 h-12 p-2 fill-white
}
.kf-list li{
    @apply flex items-center bg-accent cursor-pointer mt-1 -translate-x-12 ani rounded
}
.kf-list li:hover{
    @apply -translate-x-full bg-primary
}
.kf-list li .item{
    @apply pr-3
}
.kf-list li.qrcode{
    @apply relative -translate-x-full w-12 h-12
}
.kf-list li.qrcode .qrcode-img{ 
    @apply absolute right-0 top-full w-[120px] h-[120px] bg-white p-2 flex justify-center items-center border translate-x-full ani
}
.kf-list li.qrcode:hover .qrcode-img{
    @apply translate-x-0
}


/* Partners Section */
.partners-logo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 640px) {
    .partners-logo-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 768px) {
    .partners-logo-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1024px) {
    .partners-logo-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.25rem;
    }
}

.partner-logo-card {
    --gradient: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
    position: relative;
    background: white;
    border-radius: 1rem;
    padding: 1.25rem 1rem;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: translateY(40px) scale(0.9);
}

.partner-logo-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: var(--delay, 0s);
}

.partner-logo-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.partner-logo-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.partner-logo-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 50px -15px rgba(30, 64, 175, 0.25);
    border-color: transparent;
}

.partner-logo-card:hover::before {
    transform: scaleX(1);
}

.partner-logo-card:hover::after {
    opacity: 1;
}

.partner-logo-card:hover .partner-num {
    color: white;
    background: rgba(255, 255, 255, 0.2);
}

.partner-logo-card:hover .partner-name {
    color: white;
}

.partner-logo-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.partner-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 800;
    color: #1E40AF;
    background: rgba(30, 64, 175, 0.08);
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem;
    transition: all 0.4s ease;
}

.partner-logo {
    width: 80px;
    height: 50px;
    object-fit: contain;
    filter: grayscale(20%);
    opacity: 0.85;
    transition: all 0.4s ease;
}

.partner-logo-card:hover .partner-logo {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

.partner-logo-card .partner-name {
    position: relative;
    z-index: 1;
    font-weight: 600;
    color: #1E293B;
    text-align: center;
    font-size: 0.8rem;
    margin-top: 0.5rem;
    transition: color 0.4s ease;
}

#partnerModal.hidden {
    display: none;
}

#partnerModal .fixed {
    z-index: 50;
}

#partnerModal .absolute {
    position: absolute;
    inset: 0;
}

#partnerModal .bg-black\/60 {
    background-color: rgba(0, 0, 0, 0.6);
}

#partnerModal .backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

#partnerModal .bg-white {
    background-color: white;
}

#partnerModal .rounded-2xl {
    border-radius: 1rem;
}

#partnerModal .shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

#partnerModal .max-w-lg {
    max-width: 32rem;
}

#partnerModal .w-full {
    width: 100%;
}

#partnerModal .p-8 {
    padding: 2rem;
}

#partnerModal .transform {
    transition-property: transform, opacity;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

#partnerModal .scale-95 {
    transform: scale(0.95);
}

#partnerModal .scale-100 {
    transform: scale(1);
}

#partnerModal .opacity-0 {
    opacity: 0;
}

#partnerModal .opacity-100 {
    opacity: 1;
}

#partnerModal .min-h-screen {
    min-height: 100vh;
}

#partnerModal .flex {
    display: flex;
}

#partnerModal .items-center {
    align-items: center;
}

#partnerModal .justify-center {
    justify-content: center;
}

#partnerModal .absolute {
    position: absolute;
}

#partnerModal .top-4 {
    top: 1rem;
}

#partnerModal .right-4 {
    right: 1rem;
}

#partnerModal .w-10 {
    width: 2.5rem;
}

#partnerModal .h-10 {
    height: 2.5rem;
}

#partnerModal .rounded-full {
    border-radius: 9999px;
}

#partnerModal .bg-gray-100 {
    background-color: #f3f4f6;
}

#partnerModal .hover\:bg-gray-200:hover {
    background-color: #e5e7eb;
}

#partnerModal .transition-colors {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: 200ms;
}

#partnerModal .text-gray-500 {
    color: #6b7280;
}

#partnerModal .mb-6 {
    margin-bottom: 1.5rem;
}

#partnerModal .mb-4 {
    margin-bottom: 1rem;
}

#partnerModal .text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}

#partnerModal .text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

#partnerModal .font-bold {
    font-weight: 700;
}

#partnerModal .text-text {
    color: #1E293B;
}

#partnerModal .text-text-muted {
    color: #64748B;
}

#partnerModal .leading-relaxed {
    line-height: 1.625;
}

.partner-modal-number {
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.875rem;
    font-weight: 700;
    color: white;
}