/*================================================== SKORA - INFLUENCER MARKETING HERO PART - 1 ==================================================*/ .sk-im-hero-section { position: relative; overflow: hidden; padding: 150px 0 90px; background: radial-gradient(circle at top right, rgba(32, 120, 244, .12), transparent 30%), radial-gradient(circle at bottom left, rgba(214, 170, 58, .10), transparent 35%), linear-gradient(180deg, #ffffff, #f8fbff); padding-bottom: 30px; } /*============================== BACKGROUND GLOW ==============================*/ .sk-im-hero-section::before { content: ""; position: absolute; width: 500px; height: 500px; top: -220px; right: -180px; border-radius: 50%; background: rgba(42, 126, 255, .08); filter: blur(80px); } .sk-im-hero-section::after { content: ""; position: absolute; width: 420px; height: 420px; left: -180px; bottom: -150px; border-radius: 50%; background: rgba(212, 175, 55, .12); filter: blur(90px); } /*============================== BREADCRUMB ==============================*/ .sk-im-breadcrumb { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 45px; font-size: 15px; font-weight: 600; } .sk-im-breadcrumb a { color: #6b7280; text-decoration: none; transition: .35s; } .sk-im-breadcrumb a:hover { color: #0b6efd; } .sk-im-breadcrumb span { color: #9ca3af; } /*============================== LEFT CONTENT ==============================*/ .sk-im-content { position: relative; z-index: 5; } .sk-im-tag { display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; background: #ffffff; border-radius: 60px; border: 1px solid rgba(13, 110, 253, .12); box-shadow: 0 18px 45px rgba(13, 110, 253, .08); color: #0b6efd; font-size: 15px; font-weight: 700; margin-bottom: 28px; } .sk-im-title { font-size: 62px; line-height: 1.1; font-weight: 900; color: #0f172a; margin-bottom: 28px; } .sk-im-title span { display: block; margin-top: 6px; background: linear-gradient(90deg, #0d6efd, #3b82f6, #d4af37); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .sk-im-description { font-size: 18px; line-height: 32px; color: #64748b; max-width: 620px; margin-bottom: 40px; } /*============================== BUTTONS ==============================*/ .sk-im-btn-group { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 45px; } .sk-im-btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 17px 34px; border-radius: 60px; background: linear-gradient(135deg, #0d6efd, #2563eb); color: #fff; text-decoration: none; font-weight: 700; transition: .35s; box-shadow: 0 18px 40px rgba(13, 110, 253, .25); } .sk-im-btn-primary:hover { color: #fff; transform: translateY(-5px); box-shadow: 0 25px 50px rgba(13, 110, 253, .35); } .sk-im-btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 17px 34px; border-radius: 60px; background: #fff; border: 1px solid rgba(13, 110, 253, .15); color: #111827; text-decoration: none; font-weight: 700; transition: .35s; } .sk-im-btn-outline:hover { color: #0b6efd; transform: translateY(-5px); border-color: #0b6efd; } /*============================== TRUST BADGES ==============================*/ .sk-im-trust { display: flex; flex-wrap: wrap; gap: 18px; } .sk-im-trust-item { display: flex; align-items: center; gap: 12px; padding: 14px 22px; background: #ffffff; border-radius: 50px; border: 1px solid rgba(13, 110, 253, .10); box-shadow: 0 15px 35px rgba(15, 23, 42, .05); transition: .35s; } .sk-im-trust-item:hover { transform: translateY(-6px); box-shadow: 0 25px 50px rgba(15, 23, 42, .10); } .sk-im-trust-item i { color: #16a34a; font-size: 18px; } .sk-im-trust-item span { color: #334155; font-weight: 600; font-size: 15px; } /*================================================== SKORA - INFLUENCER MARKETING HERO PART - 2 ==================================================*/ /*==================================== RIGHT SIDE ====================================*/ .sk-im-image-wrapper { position: relative; display: flex; align-items: center; justify-content: center; min-height: 650px; z-index: 2; } /*============================== IMAGE CIRCLE ==============================*/ .sk-im-image-wrapper::before { content: ""; position: absolute; width: 540px; height: 540px; border-radius: 50%; background: linear-gradient(135deg, #eaf4ff, #ffffff); box-shadow: 0 30px 80px rgba(13, 110, 253, .08), inset 0 0 40px rgba(255, 255, 255, .9); z-index: -2; } .sk-im-image-wrapper::after { content: ""; position: absolute; width: 430px; height: 430px; border-radius: 50%; border: 2px dashed rgba(13, 110, 253, .12); animation: skImRotate 25s linear infinite; z-index: -1; } /*============================== MAIN IMAGE ==============================*/ .sk-im-main-image { width: 100%; max-width: 520px; position: relative; z-index: 5; animation: skImFloat 5s ease-in-out infinite; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .12)); border-radius: 20% 20%; } /*============================== FLOATING CARD ==============================*/ .sk-im-card { position: absolute; background: rgba(255, 255, 255, .92); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, .6); border-radius: 22px; padding: 18px 22px; min-width: 180px; box-shadow: 0 25px 60px rgba(15, 23, 42, .08); transition: .35s; z-index: 10; } .sk-im-card:hover { transform: translateY(-8px); box-shadow: 0 35px 70px rgba(13, 110, 253, .16); } .sk-im-card h4 { margin: 0; font-size: 28px; font-weight: 800; color: #0d6efd; } .sk-im-card p { margin: 8px 0 0; color: #64748b; font-size: 14px; font-weight: 600; line-height: 22px; } /*============================== CARD POSITIONS ==============================*/ .sk-im-card-one { top: 70px; left: -20px; animation: skImFloatSmall 6s ease-in-out infinite; } .sk-im-card-two { right: -20px; top: 180px; animation: skImFloatSmall 7s ease-in-out infinite; } .sk-im-card-three { bottom: 70px; left: 40px; animation: skImFloatSmall 8s ease-in-out infinite; } /*============================== BOTTOM STATS ==============================*/ .sk-im-stat-box { position: relative; background: #fff; border-radius: 24px; padding: 20px 20px; text-align: center; border: 1px solid rgba(13, 110, 253, .08); box-shadow: 0 18px 45px rgba(15, 23, 42, .05); overflow: hidden; transition: .35s; height: 100%; } .sk-im-stat-box::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #0d6efd, #d4af37); } .sk-im-stat-box:hover { transform: translateY(-10px); box-shadow: 0 35px 70px rgba(13, 110, 253, .12); } .sk-im-stat-box h2 { margin: 0; font-size: 44px; font-weight: 900; color: #0d6efd; } .sk-im-stat-box span { display: block; margin-top: 12px; color: #64748b; font-weight: 600; font-size: 15px; } /*============================== ANIMATIONS ==============================*/ @keyframes skImFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-18px); } 100% { transform: translateY(0); } } @keyframes skImFloatSmall { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } @keyframes skImRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /*========================================== HERO RESPONSIVE CSS PART - 3 ==========================================*/ /*============================= Large Desktop =============================*/ @media (max-width:1400px) { .sk-im-title { font-size: 56px; } .sk-im-main-image { max-width: 480px; } .sk-im-image-wrapper { min-height: 600px; } .sk-im-card-one { left: 10px; } .sk-im-card-two { right: 10px; } } /*============================= Laptop =============================*/ @media (max-width:1200px) { .sk-im-hero-section { padding: 130px 0 80px; } .sk-im-title { font-size: 50px; } .sk-im-description { font-size: 17px; line-height: 30px; } .sk-im-main-image { max-width: 430px; } .sk-im-image-wrapper { min-height: 540px; } .sk-im-card { min-width: 160px; padding: 16px 18px; } .sk-im-card h4 { font-size: 24px; } } /*============================= Tablet Landscape =============================*/ @media (max-width:991px) { .sk-im-hero-section { padding: 120px 0 70px; text-align: center; } .sk-im-content { max-width: 100%; } .sk-im-title { font-size: 46px; } .sk-im-description { margin-left: auto; margin-right: auto; } .sk-im-btn-group { justify-content: center; } .sk-im-trust { justify-content: center; } .sk-im-image-wrapper { margin-top: 70px; min-height: 520px; } .sk-im-main-image { max-width: 430px; } .sk-im-card-one { top: 20px; left: 40px; } .sk-im-card-two { top: 140px; right: 40px; } .sk-im-card-three { left: 60px; bottom: 20px; } } /*============================= Tablet Portrait =============================*/ @media (max-width:768px) { .sk-im-hero-section { padding: 100px 0 60px; } .sk-im-breadcrumb { justify-content: center; } .sk-im-tag { font-size: 14px; } .sk-im-title { font-size: 40px; } .sk-im-description { font-size: 16px; line-height: 28px; } .sk-im-image-wrapper { min-height: 460px; } .sk-im-main-image { max-width: 360px; } .sk-im-image-wrapper::before { height: 400px; } .sk-im-card { min-width: 145px; padding: 14px 18px; border-radius: 18px; } .sk-im-card h4 { font-size: 22px; } .sk-im-card p { font-size: 13px; line-height: 20px; } .sk-im-stat-box { margin-bottom: 25px; } } /*============================= Mobile =============================*/ @media (max-width:576px) { .sk-im-hero-section { padding: 90px 0 50px; } .sk-im-tag { padding: 10px 18px; } .sk-im-title { font-size: 34px; line-height: 1.18; } .sk-im-description { font-size: 15px; line-height: 28px; } .sk-im-btn-group { flex-direction: column; } .sk-im-btn-primary, .sk-im-btn-outline { width: 100%; } .sk-im-trust { flex-direction: column; gap: 15px; } .sk-im-image-wrapper { min-height: 380px; margin-top: 40px; } .sk-im-main-image { width: 50%; max-width: 200px; } .sk-im-card { min-width: 130px; padding: 12px 15px; } .sk-im-card h4 { font-size: 20px; } .sk-im-card-one { left: 0; top: 10px; } .sk-im-card-two { right: 0; top: 95px; } .sk-im-card-three { left: 20px; bottom: 0; } .sk-im-stat-box { padding: 28px 15px; } .sk-im-stat-box h2 { font-size: 36px; } } /*============================= Small Mobile =============================*/ @media (max-width:400px) { .sk-im-title { font-size: 30px; } .sk-im-description { font-size: 14px; } .sk-im-main-image { max-width: 240px; } .sk-im-image-wrapper { min-height: 320px; } .sk-im-card { min-width: 115px; padding: 10px 12px; } .sk-im-card h4 { font-size: 18px; } .sk-im-card p { font-size: 12px; line-height: 18px; } .sk-im-stat-box { border-radius: 18px; } } /*========================================================== SECTION 2 : WHY INFLUENCER MARKETING PART 2A ==========================================================*/ /*========================== SECTION ==========================*/ .sk-im-why-section { position: relative; overflow: hidden; padding: 30px 0; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); z-index: 1; } .sk-im-why-section::before { content: ""; position: absolute; width: 420px; height: 420px; left: -180px; top: -180px; border-radius: 50%; background: rgba(37, 99, 235, .08); filter: blur(80px); } .sk-im-why-section::after { content: ""; position: absolute; width: 450px; height: 450px; right: -180px; bottom: -180px; border-radius: 50%; background: rgba(212, 175, 55, .08); filter: blur(90px); } /*========================== SECTION TAG ==========================*/ .sk-im-section-tag { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; border-radius: 60px; background: #ffffff; border: 1px solid rgba(37, 99, 235, .12); color: #2563eb; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 18px 45px rgba(37, 99, 235, .08); margin-bottom: 25px; } /*========================== TITLE ==========================*/ .sk-im-section-title { font-size: 54px; font-weight: 800; line-height: 1.15; color: #0f172a; margin-bottom: 22px; } .sk-im-section-title span { display: block; background: linear-gradient(90deg, #2563eb, #3b82f6, #d4af37); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /*========================== DESCRIPTION ==========================*/ .sk-im-section-description { max-width: 760px; margin: auto; color: #64748b; font-size: 15px; line-height: 32px; } .category-grid-cards { width: 95%; margin: auto; } /*========================== LEFT IMAGE AREA ==========================*/ .sk-im-why-image-area { position: relative; width: 100%; min-height: 650px; display: flex; align-items: center; justify-content: center; } /* .sk-im-why-image-area::before{ content:""; position:absolute; width:520px; height:520px; border-radius:50%; background:linear-gradient( 135deg, rgba(37,99,235,.10), rgba(212,175,55,.10) ); z-index:0; } */ .sk-im-why-image { position: relative; z-index: 2; max-width: 80%; animation: skImFloat 5s ease-in-out infinite; } .sk-im-why-image-area { position: relative; width: 100%; min-height: 650px; display: flex; align-items: center; justify-content: center; background-image: url(../../images/services/influencerimg12.png); background-repeat: no-repeat; background-size: cover; } /*========================== FLOATING MINI CARDS ==========================*/ .sk-im-mini-card { position: absolute; width: 220px; padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, .88); backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, .4); box-shadow: 0 25px 50px rgba(15, 23, 42, .10); z-index: 3; transition: .4s; } .sk-im-mini-card:hover { transform: translateY(-8px); box-shadow: 0 35px 70px rgba(37, 99, 235, .15); } .sk-im-mini-card h4 { display: flex; align-items: center; gap: 12px; font-size: 28px; font-weight: 800; color: #0f172a; margin-bottom: 8px; } .sk-im-mini-card h4 i { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff; font-size: 18px; } .sk-im-mini-card p { margin: 0; font-size: 15px; color: #64748b; font-weight: 600; } .card-one { top: 40px; left: 0; animation: skImFloatSmall 4s ease-in-out infinite; } .card-two { right: 10px; bottom: 70px; animation: skImFloatSmall 5s ease-in-out infinite; } /*========================== SOCIAL ICONS ==========================*/ .sk-im-social-icon { position: absolute; width: 65px; height: 65px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #ffffff; color: #2563eb; font-size: 24px; box-shadow: 0 20px 45px rgba(15, 23, 42, .10); transition: .4s; z-index: 4; } .sk-im-social-icon:hover { transform: translateY(-10px) scale(1.08); color: #fff; background: linear-gradient(135deg, #2563eb, #3b82f6); } .sk-im-social-icon.insta { top: 70px; right: 60px; animation: skImRotate 8s linear infinite; } .sk-im-social-icon.youtube { left: 40px; bottom: 120px; animation: skImFloatSmall 5s ease-in-out infinite; } .sk-im-social-icon.facebook { top: 240px; right: -10px; animation: skImFloatSmall 6s ease-in-out infinite; } .sk-im-social-icon.linkedin { left: -10px; top: 220px; animation: skImFloatSmall 4.5s ease-in-out infinite; } /*========================== ANIMATIONS ==========================*/ @keyframes skImFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-18px); } 100% { transform: translateY(0); } } @keyframes skImFloatSmall { 0% { transform: translateY(0px); } 50% { transform: translateY(-12px); } 100% { transform: translateY(0px); } } @keyframes skImRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /*========================== TABLET ==========================*/ @media(max-width:991px) { .sk-im-why-section { padding: 90px 0; } .sk-im-section-title { font-size: 42px; } .sk-im-why-image-area { min-height: 520px; margin-bottom: 50px; } .card-one { left: 20px; } .card-two { right: 20px; } } /*========================== MOBILE ==========================*/ @media(max-width:767px) { .sk-im-section-title { font-size: 34px; } .sk-im-section-description { font-size: 16px; line-height: 30px; } .sk-im-why-image-area { min-height: 420px; } .sk-im-mini-card { width: 170px; padding: 15px; } .sk-im-mini-card h4 { font-size: 22px; } .sk-im-social-icon { width: 50px; height: 50px; font-size: 18px; } } /*========================================================== SECTION 2 : WHY INFLUENCER MARKETING PART 2B (FEATURE CARDS + RESPONSIVE + ANIMATIONS) ==========================================================*/ /*============================= FEATURE WRAPPER =============================*/ .sk-im-feature-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; position: relative; z-index: 2; } /*============================= FEATURE CARD =============================*/ .sk-im-feature-card { position: relative; display: flex; align-items: flex-start; gap: 20px; padding: 32px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(37, 99, 235, .10); border-radius: 24px; overflow: hidden; transition: all .45s ease; box-shadow: 0 18px 40px rgba(15, 23, 42, .06); } /* Gradient Border */ .sk-im-feature-card::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: 24px; background: linear-gradient(135deg, rgba(37, 99, 235, .35), rgba(212, 175, 55, .35)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: .45s; } /* Glow */ .sk-im-feature-card::after { content: ""; position: absolute; width: 170px; height: 170px; border-radius: 50%; right: -70px; top: -70px; background: rgba(37, 99, 235, .08); filter: blur(45px); transition: .45s; } /* Hover */ .sk-im-feature-card:hover { transform: translateY(-10px); box-shadow: 0 30px 70px rgba(37, 99, 235, .12), 0 15px 30px rgba(15, 23, 42, .08); } .sk-im-feature-card:hover::before { opacity: 1; } .sk-im-feature-card:hover::after { transform: scale(1.4); } /*============================= FEATURE ICON =============================*/ .sk-im-feature-icon { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 22px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff; font-size: 28px; position: relative; overflow: hidden; transition: .45s; } /* Shine */ .sk-im-feature-icon::before { content: ""; position: absolute; width: 35px; height: 180%; left: -50px; top: -30px; background: rgba(255, 255, 255, .30); transform: rotate(25deg); transition: .55s; } .sk-im-feature-card:hover .sk-im-feature-icon { transform: rotate(-8deg) scale(1.08); background: linear-gradient(135deg, #d4af37, #f4c95d); } .sk-im-feature-card:hover .sk-im-feature-icon::before { left: 90px; } /*============================= TEXT =============================*/ .sk-im-feature-card h4 { margin: 0 0 10px; color: #0f172a; font-size: 22px; font-weight: 700; transition: .35s; } .sk-im-feature-card p { margin: 0; color: #64748b; line-height: 30px; font-size: 15px; } .sk-im-feature-card:hover h4 { color: #2563eb; } /*============================= STAGGER EFFECT =============================*/ .sk-im-feature-card:nth-child(2) { margin-top: 40px; } .sk-im-feature-card:nth-child(4) { margin-top: 40px; } .sk-im-feature-card:nth-child(6) { margin-top: 40px; } /*============================= FLOAT ENTRY =============================*/ .sk-im-feature-card { animation: skImCardUp .8s ease both; } .sk-im-feature-card:nth-child(2) { animation-delay: .12s; } .sk-im-feature-card:nth-child(3) { animation-delay: .22s; } .sk-im-feature-card:nth-child(4) { animation-delay: .32s; } .sk-im-feature-card:nth-child(5) { animation-delay: .42s; } .sk-im-feature-card:nth-child(6) { animation-delay: .52s; } /*============================= KEYFRAMES =============================*/ @keyframes skImCardUp { from { opacity: 0; transform: translateY(45px); } to { opacity: 1; transform: translateY(0); } } /*============================= LARGE TABLET =============================*/ @media(max-width:1199px) { .sk-im-feature-wrapper { gap: 20px; } .sk-im-feature-card { padding: 26px; } } /*============================= TABLET =============================*/ @media(max-width:991px) { .sk-im-feature-wrapper { grid-template-columns: 1fr; } .sk-im-feature-card:nth-child(2), .sk-im-feature-card:nth-child(4), .sk-im-feature-card:nth-child(6) { margin-top: 0; } } /*============================= MOBILE =============================*/ @media(max-width:767px) { .sk-im-feature-card { flex-direction: column; text-align: center; align-items: center; padding: 24px; } .sk-im-feature-icon { width: 65px; height: 65px; flex: 0 0 65px; font-size: 24px; } .sk-im-feature-card h4 { font-size: 20px; } .sk-im-feature-card p { font-size: 14px; line-height: 28px; } } /*============================= SMALL MOBILE =============================*/ @media(max-width:480px) { .sk-im-feature-card { border-radius: 20px; padding: 22px 18px; } .sk-im-feature-icon { width: 58px; height: 58px; border-radius: 18px; font-size: 22px; } .sk-im-feature-card h4 { font-size: 18px; } } /*========================================================== SECTION 3 : OUR SERVICES PART 2A (SECTION + HEADING + SERVICE CARDS) ==========================================================*/ /*============================== SECTION ==============================*/ .sk-im-services-section { position: relative; overflow: hidden; padding: 40px 0; background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%); z-index: 1; } .sk-im-services-section::before { content: ""; position: absolute; width: 450px; height: 450px; left: -180px; top: -180px; border-radius: 50%; background: rgba(37, 99, 235, .08); filter: blur(80px); } .sk-im-services-section::after { content: ""; position: absolute; width: 420px; height: 420px; right: -180px; bottom: -180px; border-radius: 50%; background: rgba(212, 175, 55, .08); filter: blur(90px); } /*============================== SERVICE CARD ==============================*/ .sk-im-service-card { position: relative; height: 100%; padding: 38px 34px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(37, 99, 235, .10); border-radius: 28px; overflow: hidden; transition: all .45s ease; box-shadow: 0 18px 40px rgba(15, 23, 42, .06); } /* Gradient Border */ .sk-im-service-card::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: 28px; background: linear-gradient(135deg, rgba(37, 99, 235, .45), rgba(212, 175, 55, .45)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: .45s; } /* Glow */ .sk-im-service-card::after { content: ""; position: absolute; width: 180px; height: 180px; top: -90px; right: -90px; border-radius: 50%; background: rgba(37, 99, 235, .08); filter: blur(45px); transition: .45s; } /*============================== HOVER ==============================*/ .sk-im-service-card:hover { transform: translateY(-12px); box-shadow: 0 35px 75px rgba(37, 99, 235, .12), 0 20px 40px rgba(15, 23, 42, .08); } .sk-im-service-card:hover::before { opacity: 1; } .sk-im-service-card:hover::after { transform: scale(1.4); } /*============================== SERVICE ICON ==============================*/ .sk-im-service-icon { width: 80px; height: 80px; border-radius: 24px; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff; font-size: 32px; position: relative; overflow: hidden; transition: .45s; } /* Shine Effect */ .sk-im-service-icon::before { content: ""; position: absolute; width: 35px; height: 180%; top: -30px; left: -50px; background: rgba(255, 255, 255, .35); transform: rotate(25deg); transition: .55s; } .sk-im-service-card:hover .sk-im-service-icon { transform: rotate(-8deg) scale(1.08); background: linear-gradient(135deg, #d4af37, #f4c95d); } .sk-im-service-card:hover .sk-im-service-icon::before { left: 95px; } /*============================== SERVICE NUMBER ==============================*/ .sk-im-service-number { position: absolute; top: 28px; right: 30px; font-size: 42px; font-weight: 800; color: rgba(37, 99, 235, .08); line-height: 1; transition: .4s; } .sk-im-service-card:hover .sk-im-service-number { color: rgba(212, 175, 55, .20); } /*============================== TITLE ==============================*/ .sk-im-service-card h4 { font-size: 24px; font-weight: 700; color: #0f172a; margin-bottom: 18px; line-height: 1.35; transition: .35s; } .sk-im-service-card:hover h4 { color: #2563eb; } /*============================== DESCRIPTION ==============================*/ .sk-im-service-card p { font-size: 15px; line-height: 30px; color: #64748b; margin-bottom: 28px; } /*============================== BUTTON ==============================*/ .sk-im-service-btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 15px; font-weight: 700; color: #2563eb; transition: .35s; } .sk-im-service-btn i { transition: .35s; } .sk-im-service-btn:hover { color: #d4af37; } .sk-im-service-btn:hover i { transform: translateX(8px); } /*============================== ENTRANCE ANIMATION ==============================*/ .sk-im-service-card { animation: skImServiceUp .8s ease both; } .sk-im-service-card:nth-child(2) { animation-delay: .12s; } .sk-im-service-card:nth-child(3) { animation-delay: .24s; } .sk-im-service-card:nth-child(4) { animation-delay: .36s; } .sk-im-service-card:nth-child(5) { animation-delay: .48s; } .sk-im-service-card:nth-child(6) { animation-delay: .60s; } @keyframes skImServiceUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } /*============================== TABLET ==============================*/ @media(max-width:991px) { .sk-im-services-section { padding: 90px 0; } .sk-im-service-card { padding: 30px; } } /*============================== MOBILE ==============================*/ @media(max-width:767px) { .sk-im-service-card { padding: 26px; border-radius: 22px; } .sk-im-service-icon { width: 70px; height: 70px; font-size: 28px; } .sk-im-service-number { font-size: 34px; } .sk-im-service-card h4 { font-size: 21px; } .sk-im-service-card p { font-size: 14px; line-height: 28px; } } /*========================================================== SECTION 3 : OUR SERVICES PART 2B (CTA + PREMIUM EFFECTS + RESPONSIVE + ANIMATIONS) ==========================================================*/ /*===================================== BOTTOM CTA =====================================*/ .sk-im-service-cta { position: relative; overflow: hidden; padding: 60px; border-radius: 32px; background: linear-gradient(135deg, #0f172a, #1e3a8a); box-shadow: 0 35px 80px rgba(15, 23, 42, .18); z-index: 2; } /* Glow */ .sk-im-service-cta::before { content: ""; position: absolute; width: 380px; height: 380px; left: -150px; top: -150px; border-radius: 50%; background: rgba(255, 255, 255, .08); filter: blur(70px); } .sk-im-service-cta::after { content: ""; position: absolute; width: 320px; height: 320px; right: -100px; bottom: -100px; border-radius: 50%; background: rgba(212, 175, 55, .18); filter: blur(70px); } /*===================================== TEXT =====================================*/ .sk-im-cta-small { display: inline-block; margin-bottom: 16px; padding: 10px 20px; border-radius: 50px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .15); color: #ffffff; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .sk-im-service-cta h3 { color: #ffffff; font-size: 42px; font-weight: 800; line-height: 1.2; margin-bottom: 20px; } .sk-im-service-cta p { max-width: 620px; color: rgba(255, 255, 255, .82); font-size: 17px; line-height: 32px; margin: 0; } /*===================================== CTA BUTTON =====================================*/ .sk-im-cta-btn { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 18px 34px; border-radius: 60px; text-decoration: none; font-size: 16px; font-weight: 700; color: #0f172a; background: #ffffff; overflow: hidden; transition: .45s; box-shadow: 0 20px 45px rgba(0, 0, 0, .18); } .sk-im-cta-btn::before { content: ""; position: absolute; width: 40px; height: 220%; left: -70px; top: -60px; background: rgba(255, 255, 255, .45); transform: rotate(25deg); transition: .7s; } .sk-im-cta-btn:hover { color: #ffffff; background: linear-gradient(135deg, #2563eb, #3b82f6); transform: translateY(-8px); box-shadow: 0 30px 65px rgba(37, 99, 235, .35); } .sk-im-cta-btn:hover::before { left: 130%; } .sk-im-cta-btn i { transition: .35s; } .sk-im-cta-btn:hover i { transform: translateX(8px); } /*===================================== SERVICE CARD EXTRA EFFECT =====================================*/ .sk-im-service-card { isolation: isolate; } .sk-im-service-card:hover { border-color: rgba(212, 175, 55, .25); } .sk-im-service-card:hover .sk-im-service-btn { color: #d4af37; } .sk-im-service-card:hover .sk-im-service-btn i { transform: translateX(10px); } /* Floating Light */ .sk-im-service-card .sk-im-service-icon { animation: skImIconFloat 5s ease-in-out infinite; } .sk-im-service-card:nth-child(even) .sk-im-service-icon { animation-duration: 6s; } /*===================================== CTA FLOAT =====================================*/ .sk-im-service-cta { animation: skImCtaFloat 6s ease-in-out infinite; } /*===================================== KEYFRAMES =====================================*/ @keyframes skImIconFloat { 0% { transform: translateY(0px); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0px); } } @keyframes skImCtaFloat { 0% { transform: translateY(0px); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0px); } } /*===================================== LARGE TABLET =====================================*/ @media(max-width:1199px) { .sk-im-service-cta { padding: 50px; } .sk-im-service-cta h3 { font-size: 36px; } } /*===================================== TABLET =====================================*/ @media(max-width:991px) { .sk-im-service-cta { text-align: center; padding: 45px 35px; } .sk-im-service-cta p { margin: auto; } .sk-im-cta-btn { margin-top: 20px; } } /*===================================== MOBILE =====================================*/ @media(max-width:767px) { .sk-im-service-cta { padding: 35px 25px; border-radius: 24px; } .sk-im-service-cta h3 { font-size: 28px; line-height: 1.35; } .sk-im-service-cta p { font-size: 15px; line-height: 28px; } .sk-im-cta-btn { width: 100%; justify-content: center; padding: 16px 24px; font-size: 15px; } } /*===================================== SMALL MOBILE =====================================*/ @media(max-width:480px) { .sk-im-service-cta { padding: 30px 20px; } .sk-im-service-cta h3 { font-size: 24px; } .sk-im-cta-small { font-size: 12px; padding: 8px 16px; } } /*========================================================== SECTION 4 : INFLUENCER CATEGORIES PART 2A (SECTION + CARDS + IMAGE + BADGES) ==========================================================*/ /*===================================== SECTION =====================================*/ .sk-im-category-section { position: relative; overflow: hidden; padding: 120px 0; background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%); z-index: 1; } .sk-im-category-section::before { content: ""; position: absolute; width: 420px; height: 420px; left: -180px; top: -180px; border-radius: 50%; background: rgba(37, 99, 235, .08); filter: blur(90px); } .sk-im-category-section::after { content: ""; position: absolute; width: 420px; height: 420px; right: -180px; bottom: -180px; border-radius: 50%; background: rgba(212, 175, 55, .08); filter: blur(90px); } /*===================================== CATEGORY CARD =====================================*/ .sk-im-category-card { position: relative; height: 100%; background: rgba(255, 255, 255, .86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 30px; overflow: hidden; border: 1px solid rgba(37, 99, 235, .10); transition: .45s; box-shadow: 0 18px 40px rgba(15, 23, 42, .06); } /* Gradient Border */ .sk-im-category-card::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: 30px; background: linear-gradient(135deg, rgba(37, 99, 235, .45), rgba(212, 175, 55, .45)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: .45s; } /* Glow */ .sk-im-category-card::after { content: ""; position: absolute; width: 180px; height: 180px; right: -90px; top: -90px; border-radius: 50%; background: rgba(37, 99, 235, .08); filter: blur(45px); transition: .45s; } /* Hover */ .sk-im-category-card:hover { transform: translateY(-12px); box-shadow: 0 35px 70px rgba(37, 99, 235, .12), 0 20px 35px rgba(15, 23, 42, .08); } .sk-im-category-card:hover::before { opacity: 1; } .sk-im-category-card:hover::after { transform: scale(1.5); } /*===================================== TOP IMAGE =====================================*/ .sk-im-category-top { position: relative; height: 250px; overflow: hidden; } .sk-im-category-top img { width: 100%; height: 100%; object-fit: cover; transition: .8s; } .sk-im-category-card:hover .sk-im-category-top img { transform: scale(1.08); } /* Image Overlay */ .sk-im-category-top::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15, 23, 42, .45), rgba(15, 23, 42, 0)); z-index: 1; } /*===================================== CATEGORY BADGE =====================================*/ .sk-im-category-badge { position: absolute; top: 22px; left: 22px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px; border-radius: 50px; background: rgba(255, 255, 255, .92); color: #2563eb; font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; box-shadow: 0 12px 30px rgba(15, 23, 42, .10); } /*===================================== CONTENT =====================================*/ .sk-im-category-content { padding: 35px; } .sk-im-category-content h4 { font-size: 20px; font-weight: 700; color: #0f172a; margin-bottom: 12px; transition: .35s; } .sk-im-category-card:hover h4 { color: #2563eb; } /*===================================== FOLLOWERS =====================================*/ .sk-im-followers { display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; border-radius: 40px; background: rgba(37, 99, 235, .08); color: #2563eb; font-size: 14px; font-weight: 700; margin-bottom: 18px; } /*===================================== DESCRIPTION =====================================*/ .sk-im-category-content p { color: #64748b; font-size: 14px; line-height: 30px; margin-bottom: 25px; } /*===================================== FEATURE LIST =====================================*/ .sk-im-category-list { padding: 0; margin: 0; list-style: none; } .sk-im-category-list li { display: flex; align-items: center; gap: 5px; padding: 5px 0; color: #334155; font-size: 14px; font-weight: 600; } .sk-im-category-list li i { color: #16a34a; font-size: 18px; } /*===================================== ENTRANCE =====================================*/ .sk-im-category-card { animation: skImCategoryUp .8s ease both; } .sk-im-category-card:nth-child(2) { animation-delay: .12s; } .sk-im-category-card:nth-child(3) { animation-delay: .24s; } .sk-im-category-card:nth-child(4) { animation-delay: .36s; } .sk-im-category-card:nth-child(5) { animation-delay: .48s; } .sk-im-category-card:nth-child(6) { animation-delay: .60s; } @keyframes skImCategoryUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } /*===================================== TABLET =====================================*/ @media(max-width:991px) { .sk-im-category-section { padding: 90px 0; } .sk-im-category-top { height: 230px; } .sk-im-category-content { padding: 28px; } } /*===================================== MOBILE =====================================*/ @media(max-width:767px) { .sk-im-category-card { border-radius: 24px; } .sk-im-category-top { height: 220px; } .sk-im-category-content { padding: 24px; } .sk-im-category-content h4 { font-size: 22px; } .sk-im-category-content p { font-size: 14px; line-height: 28px; } .sk-im-followers { font-size: 13px; } } /*========================================================== SECTION 4 : INFLUENCER CATEGORIES PART 2B (PREMIUM EFFECTS + STATS + HOVER + RESPONSIVE) ==========================================================*/ /*======================================== CARD HOVER ENHANCEMENT ========================================*/ .sk-im-category-card { isolation: isolate; } .sk-im-category-card:hover { border-color: rgba(212, 175, 55, .25); } .sk-im-category-card:hover .sk-im-followers { background: linear-gradient(135deg, #2563eb, #3b82f6); color: #ffffff; box-shadow: 0 15px 35px rgba(37, 99, 235, .22); } .sk-im-category-card:hover .sk-im-category-list li i { color: #2563eb; transform: scale(1.15); } /*======================================== BOTTOM BORDER ANIMATION ========================================*/ .sk-im-category-content { position: relative; } .sk-im-category-content::after { content: ""; position: absolute; left: 35px; bottom: 0; width: 0; height: 4px; border-radius: 50px; background: linear-gradient(90deg, #2563eb, #d4af37); transition: .45s; } .sk-im-category-card:hover .sk-im-category-content::after { width: 120px; } /*======================================== FEATURE LIST EFFECT ========================================*/ .sk-im-category-list li { transition: .35s; } .sk-im-category-card:hover .sk-im-category-list li { transform: translateX(6px); } /*======================================== IMAGE SHINE EFFECT ========================================*/ .sk-im-category-top { position: relative; } .sk-im-category-top::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-25deg); transition: .8s; z-index: 3; } .sk-im-category-card:hover .sk-im-category-top::after { left: 140%; } /*======================================== BADGE EFFECT ========================================*/ .sk-im-category-badge { transition: .4s; } .sk-im-category-card:hover .sk-im-category-badge { background: linear-gradient(135deg, #2563eb, #3b82f6); color: #ffffff; } /*======================================== FLOATING IMAGE ========================================*/ .sk-im-category-top img { animation: skImCategoryFloat 6s ease-in-out infinite; } .sk-im-category-card:nth-child(even) .sk-im-category-top img { animation-duration: 7s; } /*======================================== CARD GLOW ========================================*/ .sk-im-category-card:hover { box-shadow: 0 18px 35px rgba(15, 23, 42, .08), 0 40px 80px rgba(37, 99, 235, .16); } /*======================================== KEYFRAMES ========================================*/ @keyframes skImCategoryFloat { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0); } } /*======================================== LARGE TABLET ========================================*/ @media(max-width:1199px) { .sk-im-category-content::after { left: 28px; } } /*======================================== TABLET ========================================*/ @media(max-width:991px) { .sk-im-category-card:hover { transform: translateY(-8px); } .sk-im-category-content::after { left: 28px; } } /*======================================== MOBILE ========================================*/ @media(max-width:767px) { .sk-im-category-content::after { left: 24px; height: 3px; } .sk-im-category-card:hover .sk-im-category-content::after { width: 90px; } .sk-im-category-list li { font-size: 14px; } } /*======================================== SMALL MOBILE ========================================*/ @media(max-width:480px) { .sk-im-category-card { border-radius: 20px; } .sk-im-category-content { padding: 20px; } .sk-im-category-content::after { left: 20px; } .sk-im-followers { padding: 8px 16px; font-size: 12px; } .sk-im-category-list li { gap: 10px; padding: 9px 0; } } /*========================================================== HERO IMAGE OVERRIDE ==========================================================*/ .sk-im-image-wrapper { position: relative !important; height: 650px !important; overflow: hidden !important; border-radius: 35px !important; } .sk-im-main-image { width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; border-radius: 35px !important; }