﻿.best-content-section{width:100%; padding:90px 30px; background:#ffffff; box-sizing:border-box; position:relative; overflow:hidden} .best-content-section::before{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(circle at 10% 20%,rgba(216,19,36,0.03) 0%,transparent 50%),radial-gradient(circle at 90% 80%,rgba(216,19,36,0.03) 0%,transparent 50%); z-index:0} .content-container{max-width:1200px; margin:0 auto; position:relative; z-index:1} .content-wrapper{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center} .content-info{position:relative} .content-top-badges{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px} .content-badge{display:inline-flex; align-items:center; padding:6px 16px; font-size:12px; font-weight:700; letter-spacing:0.5px; border-radius:50px; text-transform:uppercase; font-family:'Ubuntu',sans-serif} .badge-primary{background:rgba(216,19,36,0.1); color:#d81324} .badge-success{background:rgba(40,167,69,0.1); color:#28a745} .content-heading{font-size:42px; font-weight:800; color:#1a1a2e; line-height:1.25; margin-bottom:20px; font-family:'Ubuntu',sans-serif} .heading-highlight{position:relative; color:#d81324; display:inline-block} .heading-highlight::after{content:""; position:absolute; bottom:2px; left:0; width:100%; height:8px; background:rgba(216,19,36,0.15); border-radius:4px; z-index:-1} .content-description{font-size:16px; color:#6c757d; line-height:1.8; margin-bottom:30px} .content-features{display:flex; flex-direction:column; gap:18px; margin-bottom:35px} .feature-card{display:flex; align-items:flex-start; gap:18px; padding:20px; background:#ffffff; border-radius:14px; border:1px solid rgba(0,0,0,0.06); box-shadow:0 3px 15px rgba(0,0,0,0.04); transition:all 0.3s ease} .feature-card:hover{transform:translateX(8px); box-shadow:0 8px 30px rgba(216,19,36,0.1); border-color:rgba(216,19,36,0.15)} .feature-icon-box{width:50px; height:50px; min-width:50px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#d81324,#ff4757); color:#ffffff; border-radius:12px; font-size:20px; box-shadow:0 5px 15px rgba(216,19,36,0.3); transition:transform 0.3s ease} .feature-card:hover .feature-icon-box{transform:scale(1.1) rotate(5deg)} .feature-text h4{font-size:17px; font-weight:700; color:#1a1a2e; margin:0 0 5px; font-family:'Ubuntu',sans-serif} .feature-text p{font-size:14px; color:#6c757d; margin:0; line-height:1.6} .content-stats{display:flex; align-items:center; gap:30px; padding:25px 30px; background:linear-gradient(135deg,#fdf2f3,#fff5f6); border-radius:16px; margin-bottom:30px; border:1px solid rgba(216,19,36,0.08)} .stat-item{text-align:center; flex:1} .stat-number{font-size:28px; font-weight:800; color:#d81324; font-family:'Ubuntu',sans-serif; line-height:1; margin-bottom:4px} .stat-label{font-size:13px; color:#6c757d; font-weight:500} .stat-divider{width:1px; height:40px; background:rgba(216,19,36,0.15)} .content-cta{display:flex; gap:15px; flex-wrap:wrap} .content-btn-primary{padding:14px 32px; background:linear-gradient(135deg,#d81324,#b8101e) !important; color:#ffffff !important; border:none !important; border-radius:50px; font-weight:600; font-size:15px; font-family:'Ubuntu',sans-serif; box-shadow:0 8px 25px rgba(216,19,36,0.35); transition:all 0.3s ease} .content-btn-primary:hover{transform:translateY(-3px); box-shadow:0 12px 35px rgba(216,19,36,0.45); background:linear-gradient(135deg,#c01020,#a00e1a) !important} .content-btn-outline{padding:14px 32px; background:transparent !important; color:#d81324 !important; border:2px solid #d81324 !important; border-radius:50px; font-weight:600; font-size:15px; font-family:'Ubuntu',sans-serif; transition:all 0.3s ease} .content-btn-outline:hover{background:#d81324 !important; color:#ffffff !important; transform:translateY(-3px); box-shadow:0 8px 25px rgba(216,19,36,0.3)} .content-image-wrapper{position:relative; display:flex; justify-content:center; align-items:center} .content-image-main{position:relative; width:100%; max-width:500px; z-index:2} .main-image{width:100%; height:550px; object-fit:cover; border-radius:24px; box-shadow:0 20px 60px rgba(0,0,0,0.12); border:4px solid #ffffff} .floating-badge{position:absolute; display:flex; align-items:center; gap:12px; background:#ffffff; padding:14px 20px; border-radius:14px; box-shadow:0 10px 35px rgba(0,0,0,0.12); z-index:3; animation:floatBadge 3s ease-in-out infinite} .badge-float-top{top:25px; left:-40px; animation-delay:0s} .badge-float-bottom{bottom:60px; left:-50px; animation-delay:1s} .badge-float-right{top:50%; right:-35px; transform:translateY(-50%); flex-direction:column; text-align:center; gap:6px; animation-delay:2s} @keyframes floatBadge{0%,100%{transform:translateY(0px)} 50%{transform:translateY(-10px)}} .badge-float-right{animation:floatBadgeRight 3s ease-in-out infinite; animation-delay:2s} @keyframes floatBadgeRight{0%,100%{transform:translateY(-50%)} 50%{transform:translateY(calc(-50% - 10px))}} .float-icon{width:42px; height:42px; min-width:42px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#d81324,#ff4757); color:#ffffff; border-radius:10px; font-size:18px} .float-icon.icon-green{background:linear-gradient(135deg,#28a745,#51cf66)} .float-text{display:flex; flex-direction:column} .float-number{font-size:20px; font-weight:800; color:#1a1a2e; font-family:'Ubuntu',sans-serif; line-height:1} .float-label{font-size:12px; color:#6c757d; font-weight:500} .float-stars{display:flex; gap:3px; color:#ffc107; font-size:14px} .float-rating{font-size:13px; font-weight:700; color:#1a1a2e; font-family:'Ubuntu',sans-serif} .image-decoration{position:absolute; z-index:1} .dec-circle{width:200px; height:200px; border:3px dashed rgba(216,19,36,0.15); border-radius:50%; bottom:-30px; right:-30px; animation:spinSlow 20s linear infinite} @keyframes spinSlow{from{transform:rotate(0deg)} to{transform:rotate(360deg)}} .dec-dots{width:80px; height:80px; top:-20px; right:20px; background-image:radial-gradient(circle,rgba(216,19,36,0.2) 2px,transparent 2px); background-size:15px 15px} @media (max-width:991px){.content-wrapper{grid-template-columns:1fr; gap:50px} .content-image-wrapper{order:-1} .content-heading{font-size:34px} .content-image-main{max-width:450px} .main-image{height:420px} .badge-float-top{left:-10px} .badge-float-bottom{left:-10px} .badge-float-right{right:-10px}} @media (max-width:768px){.best-content-section{padding:60px 20px} .content-heading{font-size:28px} .content-description{font-size:15px} .main-image{height:350px; border-radius:18px} .content-stats{flex-wrap:wrap; gap:15px; padding:20px} .stat-divider{display:none} .stat-item{min-width:80px} .stat-number{font-size:24px} .floating-badge{padding:10px 14px; border-radius:10px} .float-number{font-size:17px} .float-icon{width:36px; height:36px; min-width:36px; font-size:15px}} @media (max-width:576px){.best-content-section{padding:50px 15px} .content-heading{font-size:24px} .feature-card{padding:15px} .feature-icon-box{width:42px; height:42px; min-width:42px; font-size:17px} .feature-text h4{font-size:15px} .feature-text p{font-size:13px} .content-btn-primary,.content-btn-outline{padding:12px 24px; font-size:14px; width:100%; text-align:center; justify-content:center} .badge-float-top,.badge-float-bottom{left:5px} .badge-float-right{right:5px} .main-image{height:300px} .dec-circle{width:120px; height:120px}}