.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-8 .elementor-element.elementor-element-47431dc{--spacer-size:66px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-8 .elementor-element.elementor-element-7044776{text-align:start;}.elementor-8 .elementor-element.elementor-element-7044776 .elementor-heading-title{font-family:"Playfair Display", Sans-serif;font-size:27px;font-weight:bold;line-height:37px;color:#1575E8;}.elementor-8 .elementor-element.elementor-element-9c84c0e{text-align:start;}.elementor-8 .elementor-element.elementor-element-9c84c0e .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:17px;font-weight:500;color:#00141C;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-8 .elementor-element.elementor-element-b5bc993{width:var( --container-widget-width, 101.636% );max-width:101.636%;--container-widget-width:101.636%;--container-widget-flex-grow:0;font-family:"Roboto", Sans-serif;font-size:16px;font-weight:400;color:#070101;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-6eb1ce0 *//*============================= SECTION LABEL ==============================*/ .section-label-wrap{ width:100%; overflow:hidden; display:flex; justify-content:center; margin-bottom:30px; } .section-label-track{ display:flex; gap:40px; width:max-content; animation: scrollLabel 15s linear infinite; } .section-label{ display:flex; align-items:center; gap:14px; padding:14px 36px; border-radius:50px; background:rgba(35,103,255,.06); border:1px solid rgba(35,103,255,.15); backdrop-filter:blur(10px); white-space:nowrap; box-shadow: 0 8px 30px rgba(0,0,0,.05); } .section-label span{ font-size:14px; letter-spacing:3px; text-transform:uppercase; font-weight:700; color:#2367ff; font-family:'Poppins',sans-serif; } .dot{ width:10px; height:10px; border-radius:50%; background:#2367ff; box-shadow: 0 0 12px #2367ff, 0 0 25px #2367ff; } /* Animation */ @keyframes scrollLabel{ from{ transform:translateX(35%); } to{ transform:translateX(-35%); } } /* Hover Pause */ .section-label-track:hover{ animation-play-state:paused; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-58b69cb *//* ============================================================ OUR CORE COURSES — Section Stylesheet Icons : Font Awesome 6 (Free) Fonts : Sora (headings) + Inter (body) — loaded in HTML ============================================================ */ :root { --primary:#081D4D; --green:#00B050; --orange:#FF8A00; --blue:#1E88E5; --purple:#7B1FA2; --pink:#E91E63; --bg:#F8FAFC; --white:#ffffff; --text:#5B657A; --heading:#101828; --radius: 20px; --radius-sm: 14px; --shadow: 0 8px 24px rgba(8, 29, 77, 0.06); --shadow-hover: 0 24px 48px rgba(8, 29, 77, 0.14); --transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1); } *, *::before, *::after { box-sizing: border-box; } /* ---------- Section ---------- */ .courses-section { background: var(--bg); padding: 110px 24px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .container { max-width: 1200px; margin: 0 auto; } /* ---------- Section Title ---------- */ .section-title { text-align: center; max-width: 680px; margin: 0 auto 64px; } .section-title .subtitle { display: inline-block; font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; color: var(--blue); background: rgba(30, 136, 229, 0.08); padding: 8px 18px; border-radius: 999px; margin-bottom: 20px; } .section-title h2 { font-family: 'Sora', sans-serif; font-size: 42px; font-weight: 700; line-height: 1.2; color: var(--heading); margin: 0 0 16px; } .section-title h2 span { color: var(--blue); /* fallback for older browsers */ } @supports (background-clip: text) or (-webkit-background-clip: text) { .section-title h2 span { background: linear-gradient(90deg, var(--blue), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; } } .section-title p { color: var(--text); font-size: 16px; line-height: 1.7; margin: 0; } /* ---------- Grid ---------- */ .courses-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } /* ---------- Card ---------- */ .course-card { position: relative; background: var(--white); border-radius: var(--radius); padding: 34px 28px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); } /* soft colour "spotlight" glow, unique per course */ .course-card::before { content: ""; position: absolute; top: -60px; left: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, var(--accent, var(--blue)) 0%, transparent 70%); opacity: 0.10; transition: opacity var(--transition), transform var(--transition); pointer-events: none; } .course-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); } .course-card:hover::before { opacity: 0.18; transform: scale(1.15); } /* Vertical accent line on the left edge — animates in on hover */ .course-card::after { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--accent, var(--blue)); transform: scaleY(0); transform-origin: center; transition: transform var(--transition); z-index: 2; } .course-card:hover::after { transform: scaleY(1); } /* Accent colour assigned per course */ .course-card.graphic { --accent: var(--pink); --accent-soft: rgba(233, 30, 99, 0.10); } .course-card.web { --accent: var(--primary); --accent-soft: rgba(8, 29, 77, 0.08); } .course-card.shopify { --accent: var(--green); --accent-soft: rgba(0, 176, 80, 0.10); } .course-card.facebook { --accent: var(--blue); --accent-soft: rgba(30, 136, 229, 0.10); } .course-card.fiverr { --accent: var(--orange); --accent-soft: rgba(255, 138, 0, 0.10); } .course-card.automation { --accent: var(--purple); --accent-soft: rgba(123, 31, 162, 0.10); } .course-card.youtube { --accent: var(--pink); --accent-soft: rgba(233, 30, 99, 0.10); } .course-card.ai { --accent: var(--purple); --accent-soft: rgba(123, 31, 162, 0.10); } /* ---------- Icon + Tag row ---------- */ .course-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .course-icon { width: 56px; height: 56px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--accent-soft, rgba(30, 136, 229, 0.1)); color: var(--accent, var(--blue)); transition: transform var(--transition); } .course-card:hover .course-icon { transform: scale(1.08) rotate(-4deg); } .course-tag { font-family: 'Sora', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; color: var(--accent, var(--blue)); background: var(--accent-soft, rgba(30, 136, 229, 0.1)); padding: 6px 12px; border-radius: 999px; white-space: nowrap; } /* ---------- Card text ---------- */ .course-card h3 { position: relative; z-index: 1; font-family: 'Sora', sans-serif; font-size: 19px; font-weight: 600; color: var(--heading); margin: 0 0 10px; } .course-card p { position: relative; z-index: 1; font-size: 14.5px; line-height: 1.65; color: var(--text); margin: 0 0 24px; flex-grow: 1; } /* ---------- Footer link ---------- */ .course-footer { position: relative; z-index: 1; padding-top: 18px; border-top: 1px solid rgba(16, 24, 40, 0.06); } .course-footer a { display: inline-flex; align-items: center; gap: 8px; font-family: 'Sora', sans-serif; font-size: 14px; font-weight: 600; color: var(--accent, var(--blue)); text-decoration: none; transition: gap var(--transition); } .course-footer a i { font-size: 12px; transition: transform var(--transition); } .course-footer a:hover { gap: 12px; } .course-footer a:hover i { transform: translateX(2px); } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { .courses-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .courses-section { padding: 70px 18px; } .courses-grid { grid-template-columns: 1fr; } .section-title h2 { font-size: 30px; } } @media (prefers-reduced-motion: reduce) { .course-card, .course-card::before, .course-icon, .course-footer a, .course-footer a i { transition: none; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-c941d98 *//*========================================================= WHY CHOOSE MDS ACADEMY =========================================================*/ .why-choose{ padding:110px 7%; background:linear-gradient(180deg,#ffffff 0%,#f8fbff 55%,#eef5ff 100%); position:relative; overflow:hidden; } /* Background Shapes */ .why-choose::before{ content:''; position:absolute; width:500px; height:500px; background:#0B5ED7; opacity:.05; filter:blur(150px); border-radius:50%; left:-180px; top:-180px; } .why-choose::after{ content:''; position:absolute; width:450px; height:450px; background:#4DA3FF; opacity:.06; filter:blur(160px); border-radius:50%; right:-150px; bottom:-150px; } .why-choose .container{ max-width:1320px; margin:auto; position:relative; z-index:2; } /*================================== Heading ==================================*/ .section-title{ text-align:center; margin-bottom:70px; } .section-title .sub-title{ display:inline-block; padding:10px 22px; background:#EAF4FF; color:#0B5ED7; border-radius:40px; font-size:14px; font-weight:700; letter-spacing:1px; margin-bottom:20px; } .section-title h2{ font-size:48px; font-weight:800; color:#082542; margin-bottom:18px; line-height:1.2; } .section-title h2 span{ color:#0B5ED7; } .section-title p{ max-width:760px; margin:auto; color:#5B6472; line-height:32px; font-size:18px; } /*================================== Grid ==================================*/ .why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; } /*================================== Cards ==================================*/ .why-card{ background:#ffffff; border:1px solid #DCE8F8; border-radius:22px; padding:45px 30px; text-align:center; transition:.45s ease; position:relative; overflow:hidden; box-shadow:0 12px 35px rgba(8,37,66,.06); } /* Hover Top Line */ .why-card::after{ content:''; position:absolute; left:0; top:0; width:0; height:4px; background:linear-gradient(90deg,#0B5ED7,#4DA3FF); transition:.45s; } .why-card:hover::after{ width:100%; } /* Shine Effect */ .why-card::before{ content:''; position:absolute; width:70px; height:220%; background:rgba(255,255,255,.5); top:-60%; left:-120px; transform:rotate(25deg); transition:.8s; } .why-card:hover::before{ left:140%; } .why-card:hover{ transform:translateY(-12px); box-shadow:0 22px 55px rgba(11,94,215,.12); border-color:#0B5ED7; } /*================================== Icons ==================================*/ .icon{ width:82px; height:82px; margin:auto; margin-bottom:25px; border-radius:50%; display:flex; justify-content:center; align-items:center; background:linear-gradient(135deg,#0B5ED7,#4DA3FF); color:#fff; font-size:32px; transition:.45s; } .why-card:hover .icon{ transform:scale(1.1) rotate(8deg); box-shadow:0 15px 35px rgba(11,94,215,.25); } /*================================== Card Text ==================================*/ .why-card h3{ font-size:24px; color:#082542; margin-bottom:15px; font-weight:700; } .why-card p{ color:#5B6472; font-size:16px; line-height:30px; } /*================================== Floating Animation ==================================*/ @keyframes float{ 0%{ transform:translateY(0px); } 50%{ transform:translateY(-8px); } 100%{ transform:translateY(0px); } } .why-card:nth-child(2){ animation:float 5s infinite ease-in-out; } .why-card:nth-child(5){ animation:float 5s infinite ease-in-out; animation-delay:1.5s; } /*================================== Responsive ==================================*/ @media(max-width:1100px){ .why-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .why-choose{ padding:80px 6%; } .section-title h2{ font-size:34px; } .section-title p{ font-size:16px; line-height:28px; } .why-grid{ grid-template-columns:1fr; } .why-card{ padding:35px 25px; } } @media(max-width:480px){ .section-title h2{ font-size:28px; } .section-title .sub-title{ font-size:12px; } .icon{ width:70px; height:70px; font-size:28px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-055877b *//*======================================== Gallery Heading ========================================*/ .gallery-heading{ display:flex; align-items:flex-start; gap:30px; max-width:900px; margin:0 auto 80px; } /* Vertical Line */ .gallery-line{ width:5px; height:170px; border-radius:30px; background:#d8e8ff; position:relative; overflow:hidden; } .gallery-line::before{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:linear-gradient( 180deg, #0B5ED7, #4DA3FF ); transition:.6s; } .gallery-heading:hover .gallery-line::before{ top:0; } /* Content */ .gallery-content{ flex:1; } /* Small Badge */ .gallery-subtitle{ display:inline-block; padding:10px 22px; background:#EAF4FF; color:#0B5ED7; border-radius:40px; font-size:14px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:20px; } /* Heading */ .gallery-content h2{ font-size:52px; font-weight:800; color:#082542; line-height:1.15; margin-bottom:22px; } .gallery-content h2 span{ color:#0B5ED7; } /* Paragraph */ .gallery-content p{ font-size:18px; color:#5B6472; line-height:32px; max-width:720px; } /* Hover Effect */ .gallery-heading:hover h2 span{ color:#4DA3FF; transition:.4s; } .gallery-heading:hover .gallery-subtitle{ background:#0B5ED7; color:#fff; transition:.4s; } /* Responsive */ @media(max-width:768px){ .gallery-heading{ flex-direction:column; gap:20px; } .gallery-line{ width:120px; height:5px; } .gallery-line::before{ width:0; height:100%; top:0; left:0; } .gallery-heading:hover .gallery-line::before{ width:100%; } .gallery-content h2{ font-size:34px; } .gallery-content p{ font-size:16px; line-height:28px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-dc3c266 *//*========================================= MDS PREMIUM GALLERY =========================================*/ .mds-gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:28px; margin-top:70px; } /*========================================= Gallery Item =========================================*/ .gallery-item{ position:relative; overflow:hidden; border-radius:20px; background:#ffffff; cursor:pointer; border:1px solid #dce8f8; box-shadow:0 15px 35px rgba(8,37,66,.08); transition:.45s ease; } .gallery-item:hover{ transform:translateY(-8px); box-shadow:0 25px 50px rgba(11,94,215,.18); } /*========================================= Image =========================================*/ .gallery-item img{ width:100%; height:320px; display:block; object-fit:cover; transition:transform .6s ease; } .gallery-item:hover img{ transform:scale(1.08); } /*========================================= Overlay =========================================*/ .gallery-overlay{ position:absolute; inset:0; background:linear-gradient( to top, rgba(8,37,66,.92), rgba(8,37,66,.10) ); display:flex; align-items:flex-end; justify-content:center; padding:30px; opacity:0; transition:.4s; } .gallery-item:hover .gallery-overlay{ opacity:1; } /*========================================= Text =========================================*/ .gallery-content{ text-align:center; transform:translateY(25px); transition:.4s; } .gallery-item:hover .gallery-content{ transform:translateY(0); } .gallery-content h4{ color:#ffffff; font-size:24px; margin-bottom:8px; font-weight:700; } .gallery-content p{ color:#d8e7ff; font-size:15px; margin-bottom:18px; } /*========================================= Button =========================================*/ .gallery-content a{ display:inline-block; padding:12px 24px; background:#0B5ED7; color:#fff; text-decoration:none; border-radius:50px; font-size:14px; font-weight:600; transition:.35s; } .gallery-content a:hover{ background:#4DA3FF; } /*========================================= Shine Effect =========================================*/ .gallery-item::before{ content:""; position:absolute; top:-120%; left:-60%; width:45%; height:250%; background:rgba(255,255,255,.25); transform:rotate(25deg); transition:.8s; z-index:2; } .gallery-item:hover::before{ left:140%; } /*========================================= Border Glow =========================================*/ .gallery-item::after{ content:""; position:absolute; inset:0; border-radius:20px; border:2px solid transparent; transition:.35s; } .gallery-item:hover::after{ border-color:#0B5ED7; } /*========================================= Responsive =========================================*/ @media(max-width:1024px){ .mds-gallery{ grid-template-columns:repeat(2,1fr); } } @media(max-width:767px){ .mds-gallery{ grid-template-columns:1fr; gap:20px; } .gallery-item img{ height:260px; } .gallery-content h4{ font-size:20px; } .gallery-content p{ font-size:14px; } } @media(max-width:480px){ .gallery-item img{ height:220px; } .gallery-content{ padding:0; } .gallery-content h4{ font-size:18px; } .gallery-content p{ font-size:13px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-4dbdee6 *//*========================================= PROJECT SECTION =========================================*/ .projects-section{ padding:110px 0; background:#F7FAFF; overflow:hidden; } .projects-section .container{ width:92%; max-width:1400px; margin:auto; } /*========================================= SECTION TITLE =========================================*/ .section-title{ text-align:center; margin-bottom:70px; } .section-subtitle{ display:inline-block; padding:10px 22px; background:#EAF3FF; color:#0B5ED7; border-radius:50px; font-size:15px; font-weight:600; margin-bottom:20px; } .section-title h2{ font-size:46px; color:#082542; margin-bottom:15px; } .section-title p{ max-width:720px; margin:auto; color:#667085; line-height:1.9; } /*========================================= SLIDER =========================================*/ .projects-slider{ display:flex; align-items:center; gap:20px; } .slider-wrapper{ width:100%; overflow:hidden; } .slider-track{ display:flex; gap:30px; transition:.6s ease; } /*========================================= CARD =========================================*/ .project-card{ min-width:380px; background:#fff; border-radius:22px; overflow:hidden; box-shadow:0 15px 40px rgba(0,0,0,.08); border:1px solid #EEF2F7; transition:.35s ease; } .project-card:hover{ transform:translateY(-8px); } /*========================================= BROWSER HEADER =========================================*/ .browser-header{ height:42px; background:#EEF3F9; display:flex; align-items:center; gap:8px; padding:0 18px; } .dot{ width:12px; height:12px; border-radius:50%; } .red{ background:#FF5F57; } .yellow{ background:#FEBC2E; } .green{ background:#28C840; } /*========================================= IMAGE =========================================*/ .project-image{ height:280px; overflow:hidden; background:#fff; position:relative; } .project-image img{ width:100%; height:auto; display:block; object-fit:unset; object-position:top; transition:transform 8s linear; } /* Hover Preview */ .project-card:hover .project-image img{ transform:translateY(calc(-100% + 280px)); } /*========================================= PROJECT CONTENT =========================================*/ .project-content{ padding:25px; } .project-badge{ display:inline-flex; align-items:center; padding:8px 18px; background:#0B5ED7; color:#fff; border-radius:40px; font-size:13px; font-weight:600; margin-bottom:18px; } .project-content h3{ font-size:24px; color:#082542; margin-bottom:14px; transition:.3s; } .project-card:hover h3{ color:#0B5ED7; } .project-content p{ color:#667085; line-height:1.8; margin-bottom:25px; font-size:15px; } /*========================================= BUTTON =========================================*/ .project-btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:50px; background:#082542; color:#fff; text-decoration:none; font-weight:600; transition:.35s; } .project-btn:hover{ background:#0B5ED7; transform:translateY(-3px); box-shadow:0 15px 35px rgba(11,94,215,.25); } .project-btn i{ transition:.35s; } .project-btn:hover i{ transform:translateX(5px); } /*========================================= SLIDER BUTTONS =========================================*/ .slider-btn{ width:60px; height:60px; border:none; border-radius:50%; background:#fff; color:#082542; cursor:pointer; font-size:20px; box-shadow:0 15px 35px rgba(0,0,0,.10); transition:.35s; flex-shrink:0; } .slider-btn:hover{ background:#0B5ED7; color:#fff; transform:scale(1.08); } /*========================================= DOTS =========================================*/ .slider-dots{ display:flex; justify-content:center; gap:10px; margin-top:35px; } .slider-dots .dot{ width:12px; height:12px; border-radius:50%; background:#CCD7E6; cursor:pointer; transition:.35s; } .slider-dots .dot.active{ width:34px; border-radius:30px; background:#0B5ED7; } /*========================================= FOOTER BUTTON =========================================*/ .projects-footer{ text-align:center; margin-top:60px; } .view-all-btn{ display:inline-flex; align-items:center; gap:12px; padding:16px 34px; background:#082542; color:#fff; text-decoration:none; border-radius:50px; font-weight:600; transition:.35s; } .view-all-btn:hover{ background:#0B5ED7; transform:translateY(-4px); } .view-all-btn i{ transition:.35s; } .view-all-btn:hover i{ transform:translateX(6px); } /*========================================= RESPONSIVE =========================================*/ @media(max-width:1200px){ .project-card{ min-width:340px; } .section-title h2{ font-size:40px; } } @media(max-width:992px){ .project-card{ min-width:320px; } .projects-section{ padding:90px 0; } .project-image{ height:240px; } .project-card:hover .project-image img{ transform:translateY(calc(-100% + 240px)); } } @media(max-width:768px){ .projects-slider{ flex-direction:column; } .slider-wrapper{ width:100%; } .slider-track{ gap:20px; } .project-card{ min-width:100%; } .slider-btn{ display:none; } .section-title h2{ font-size:32px; } .project-image{ height:220px; } .project-card:hover .project-image img{ transform:translateY(calc(-100% + 220px)); } } @media(max-width:576px){ .projects-section{ padding:70px 0; } .section-title h2{ font-size:27px; } .section-title p{ font-size:15px; } .project-image{ height:190px; } .project-card:hover .project-image img{ transform:translateY(calc(-100% + 190px)); } .project-content{ padding:20px; } .project-btn{ width:100%; justify-content:center; } } /*========================================= PREMIUM HOVER =========================================*/ .project-card{ position:relative; } .project-card::before{ 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:2; pointer-events:none; } .project-card:hover::before{ left:150%; } .project-card:hover{ box-shadow:0 25px 60px rgba(0,0,0,.12); } /*========================================= SCROLLBAR =========================================*/ ::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-thumb{ background:#0B5ED7; border-radius:20px; } ::-webkit-scrollbar-track{ background:#EEF4FF; }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-ddf6cfe *//*========================================== PREMIUM TESTIMONIAL SECTION ===========================================*/ .mds-testimonials{ padding:100px 0; background:#f7fbff; overflow:hidden; position:relative; } .mds-testimonials .container{ width:90%; max-width:1200px; margin:auto; } .section-title{ text-align:center; margin-bottom:70px; } .section-tag{ display:inline-block; padding:10px 22px; background:#0B5ED7; color:#fff; border-radius:50px; font-size:14px; font-weight:600; letter-spacing:1px; margin-bottom:18px; } .section-title h2{ font-size:42px; color:#082542; font-weight:700; margin-bottom:20px; } .section-title p{ max-width:700px; margin:auto; color:#6b7280; font-size:17px; line-height:1.8; } .testimonial-slider{ overflow:hidden; width:100%; position:relative; } .testimonial-track{ display:flex; gap:30px; width:max-content; } .testimonial-card{ width:380px; min-width:380px; background:rgba(255,255,255,.92); border:1px solid rgba(11,94,215,.12); border-radius:22px; padding:35px; position:relative; overflow:hidden; backdrop-filter:blur(12px); transition:.45s ease; box-shadow: 0 15px 35px rgba(0,0,0,.08); } .testimonial-card::before{ content:""; position:absolute; left:-100%; top:0; width:100%; height:100%; background:linear-gradient( 120deg, transparent, rgba(255,255,255,.65), transparent); transition:.8s; } .testimonial-card:hover::before{ left:120%; } .testimonial-card:hover{ transform:translateY(-12px); box-shadow: 0 20px 45px rgba(11,94,215,.18); border-color:#0B5ED7; } .quote-icon{ width:65px; height:65px; border-radius:50%; background:#0B5ED7; display:flex; align-items:center; justify-content:center; color:#fff; font-size:24px; margin-bottom:25px; box-shadow:0 10px 25px rgba(11,94,215,.35); } .testimonial-text{ font-size:16px; line-height:1.9; color:#555; margin-bottom:35px; } .testimonial-footer{ display:flex; align-items:center; gap:18px; } .testimonial-footer img{ width:70px; height:70px; border-radius:50%; object-fit:cover; border:4px solid #0B5ED7; transition:.4s; } .testimonial-card:hover img{ transform:scale(1.08); } .student-info h4{ font-size:20px; color:#082542; margin-bottom:6px; } .student-info span{ display:block; font-size:14px; color:#777; margin-bottom:10px; } .rating{ display:flex; gap:3px; color:#FFC107; font-size:15px; } /*========================================== AUTO SCROLL ANIMATION ===========================================*/ .testimonial-track{ animation: testimonialScroll 35s linear infinite; will-change: transform; } .mds-testimonials:hover .testimonial-track{ animation-play-state: paused; } @keyframes testimonialScroll{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } } /*========================================== CARD HOVER EFFECT ===========================================*/ .testimonial-card:hover{ transform:translateY(-12px) scale(1.02); box-shadow: 0 25px 50px rgba(11,94,215,.20); } .testimonial-card::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:5px; background:linear-gradient( 90deg, #0B5ED7, #4DA3FF); transform:scaleX(0); transition:.45s; transform-origin:left; } .testimonial-card:hover::after{ transform:scaleX(1); } .quote-icon{ transition:.4s; } .testimonial-card:hover .quote-icon{ transform:rotate(12deg) scale(1.1); background:#082542; } /*========================================== IMAGE EFFECT ===========================================*/ .testimonial-footer img{ transition:.45s; } .testimonial-card:hover img{ transform:scale(1.08); box-shadow: 0 10px 25px rgba(11,94,215,.35); } /*========================================== STAR EFFECT ===========================================*/ .rating i{ transition:.35s; } .testimonial-card:hover .rating i{ transform:scale(1.15); color:#FFD43B; } /*========================================== FLOATING ANIMATION ===========================================*/ .testimonial-card{ animation: floating 5s ease-in-out infinite; } .testimonial-card:nth-child(2){ animation-delay:.4s; } .testimonial-card:nth-child(3){ animation-delay:.8s; } .testimonial-card:nth-child(4){ animation-delay:1.2s; } .testimonial-card:nth-child(5){ animation-delay:1.6s; } .testimonial-card:nth-child(6){ animation-delay:2s; } @keyframes floating{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } 100%{ transform:translateY(0); } } /*========================================== RESPONSIVE ===========================================*/ @media(max-width:1200px){ .testimonial-card{ width:340px; min-width:340px; } } @media(max-width:991px){ .mds-testimonials{ padding:80px 0; } .section-title h2{ font-size:34px; } .testimonial-card{ width:320px; min-width:320px; padding:30px; } } @media(max-width:768px){ .testimonial-card{ width:280px; min-width:280px; padding:25px; } .testimonial-footer img{ width:60px; height:60px; } .student-info h4{ font-size:18px; } .testimonial-text{ font-size:15px; } } @media(max-width:480px){ .section-title h2{ font-size:28px; } .section-title p{ font-size:15px; } .testimonial-card{ width:260px; min-width:260px; padding:22px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-1a183b8 *//*========================================== MDS ACHIEVEMENT SECTION ==========================================*/ .achievement-section{ padding:100px 0; background:linear-gradient(180deg,#ffffff 0%,#f7fbff 50%,#edf6ff 100%); position:relative; overflow:hidden; } .achievement-section .container{ width:90%; max-width:1280px; margin:auto; } /*================ Heading ================*/ .achievement-heading{ text-align:center; margin-bottom:70px; } .achievement-badge{ display:inline-block; padding:10px 25px; background:#eaf4ff; color:#0B5ED7; border-radius:50px; font-size:14px; font-weight:600; letter-spacing:1px; margin-bottom:18px; } .achievement-heading h2{ font-size:46px; color:#082542; font-weight:700; line-height:1.3; margin-bottom:20px; } .achievement-heading h2 span{ color:#0B5ED7; } .achievement-heading p{ width:700px; max-width:100%; margin:auto; color:#667085; line-height:1.9; font-size:17px; } /*================ Cards ================*/ .achievement-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .achievement-card{ background:#ffffff; border-radius:24px; padding:40px 30px; text-align:center; border:1px solid #dbeafe; box-shadow: 0 12px 35px rgba(11,94,215,.08); transition:.45s; position:relative; overflow:hidden; } .achievement-icon{ width:90px; height:90px; margin:auto; border-radius:50%; background:#f3f8ff; display:flex; justify-content:center; align-items:center; margin-bottom:25px; font-size:34px; color:#0B5ED7; transition:.45s; } .achievement-card h3{ font-size:54px; color:#0B5ED7; font-weight:700; margin-bottom:15px; } .achievement-card h4{ font-size:24px; color:#082542; margin-bottom:15px; font-weight:600; } .achievement-card p{ color:#667085; line-height:1.8; font-size:15px; } /*========================================== PREMIUM HOVER EFFECT ==========================================*/ .achievement-card::before{ content:""; position:absolute; top:0; left:-120%; width:70%; height:100%; background:linear-gradient( 120deg, transparent, rgba(255,255,255,.75), transparent ); transition:.8s; } .achievement-card:hover::before{ left:150%; } .achievement-card::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:4px; background:linear-gradient(90deg,#0B5ED7,#4DA3FF); transform:scaleX(0); transition:.4s; transform-origin:left; } .achievement-card:hover::after{ transform:scaleX(1); } .achievement-card:hover{ transform:translateY(-12px); border-color:#0B5ED7; box-shadow: 0 20px 45px rgba(11,94,215,.18); } .achievement-card:hover .achievement-icon{ background:#0B5ED7; color:#fff; transform:rotate(12deg) scale(1.08); } .achievement-card:hover h3{ color:#082542; } .achievement-card:hover h4{ color:#0B5ED7; } /*========================================== ICON FLOAT ==========================================*/ .achievement-icon{ animation:floatIcon 4s ease-in-out infinite; } @keyframes floatIcon{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } 100%{ transform:translateY(0); } } /*========================================== SECTION DECORATION ==========================================*/ .achievement-section::before{ content:""; position:absolute; width:320px; height:320px; border-radius:50%; background:rgba(11,94,215,.05); top:-140px; right:-120px; } .achievement-section::after{ content:""; position:absolute; width:260px; height:260px; border-radius:50%; background:rgba(77,163,255,.06); bottom:-100px; left:-80px; } /*========================================== RESPONSIVE ==========================================*/ @media(max-width:1200px){ .achievement-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:768px){ .achievement-section{ padding:80px 0; } .achievement-heading h2{ font-size:34px; } .achievement-grid{ grid-template-columns:1fr; gap:25px; } .achievement-card{ padding:35px 25px; } .achievement-icon{ width:75px; height:75px; font-size:28px; } .achievement-card h3{ font-size:42px; } .achievement-card h4{ font-size:20px; } } @media(max-width:480px){ .achievement-heading h2{ font-size:28px; } .achievement-heading p{ font-size:15px; } .achievement-card h3{ font-size:36px; } }/* End custom CSS */ /* Start custom CSS for html, class: .elementor-element-4ed0c8a *//*========================================== PREMIUM CTA SECTION ==========================================*/ .mds-cta{ position:relative; padding:100px 0 60px; background:linear-gradient(135deg,#F8FBFF 0%,#EDF6FF 100%); overflow:hidden; } .mds-cta::before{ content:""; position:absolute; width:450px; height:450px; border-radius:50%; background:rgba(11,94,215,.06); top:-180px; right:-120px; } .mds-cta::after{ content:""; position:absolute; width:350px; height:350px; border-radius:50%; background:rgba(77,163,255,.08); bottom:-140px; left:-120px; } .mds-cta .container{ width:90%; max-width:1300px; margin:auto; position:relative; z-index:2; } .mds-cta-wrapper{ display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:60px; margin-bottom:60px; } .cta-badge{ display:inline-block; padding:10px 22px; background:#EAF4FF; color:#0B5ED7; border-radius:50px; font-size:14px; font-weight:600; margin-bottom:20px; } .mds-cta-left h2{ font-size:56px; line-height:1.2; color:#082542; margin-bottom:25px; font-weight:700; } .mds-cta-left h2 span{ color:#0B5ED7; } .mds-cta-left p{ color:#667085; line-height:1.9; font-size:17px; margin-bottom:35px; } .cta-features{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .feature-item{ display:flex; align-items:center; gap:12px; font-size:16px; color:#082542; font-weight:500; } .feature-item i{ color:#0B5ED7; font-size:20px; } .mds-cta-right{ text-align:center; } .mds-cta-right img{ width:100%; max-width:560px; border-radius:25px; box-shadow:0 30px 60px rgba(11,94,215,.18); transition:.45s; } /*========================================== CONTACT BOX ==========================================*/ .cta-contact-box{ display:flex; align-items:center; justify-content:space-between; gap:25px; padding:35px 40px; background:#ffffff; border-radius:25px; box-shadow:0 20px 60px rgba(11,94,215,.10); border:1px solid #dbeafe; position:relative; overflow:hidden; } .cta-contact-box::before{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient( 120deg, transparent, rgba(255,255,255,.7), transparent); transition:.8s; } .cta-contact-box:hover::before{ left:130%; } /*========================================== CONTACT ITEM ==========================================*/ .contact-item{ display:flex; align-items:center; gap:18px; } .contact-icon{ width:70px; height:70px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:30px; color:#fff; transition:.4s; } .whatsapp{ background:#25D366; } .email{ background:#0B5ED7; } .contact-item:hover .contact-icon{ transform:translateY(-6px) rotate(8deg); } .contact-text small{ display:block; color:#667085; font-size:14px; margin-bottom:6px; } .contact-text h4{ font-size:22px; color:#082542; font-weight:700; margin:0; } /*========================================== BUTTON ==========================================*/ .cta-btn{ display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:18px 38px; background:linear-gradient(135deg,#0B5ED7,#2E86FF); color:#fff; text-decoration:none; border-radius:60px; font-size:18px; font-weight:600; transition:.4s; box-shadow:0 15px 35px rgba(11,94,215,.30); } .cta-btn i{ transition:.4s; } .cta-btn:hover{ transform:translateY(-5px); box-shadow:0 20px 45px rgba(11,94,215,.40); } .cta-btn:hover i{ transform:translateX(8px); } /*========================================== IMAGE HOVER ==========================================*/ .mds-cta-right img{ animation:floatImage 5s ease-in-out infinite; } .mds-cta-right img:hover{ transform:scale(1.03); } @keyframes floatImage{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } 100%{ transform:translateY(0); } } /*========================================== RESPONSIVE ==========================================*/ @media(max-width:991px){ .mds-cta-wrapper{ grid-template-columns:1fr; text-align:center; } .cta-features{ grid-template-columns:1fr 1fr; } .cta-contact-box{ flex-direction:column; text-align:center; } } @media(max-width:768px){ .mds-cta{ padding:80px 0; } .mds-cta-left h2{ font-size:38px; } .cta-features{ grid-template-columns:1fr; } .contact-text h4{ font-size:18px; } .cta-btn{ width:100%; } } @media(max-width:480px){ .mds-cta-left h2{ font-size:30px; } .mds-cta-left p{ font-size:15px; } .contact-icon{ width:60px; height:60px; font-size:24px; } .contact-text h4{ font-size:16px; } }/* End custom CSS */