/* ---------------------------------- Template Name: Learna - Education HTML Template Author: validtheme Description: Version: 1.0 Main Font : Outfit Main Color : #1cb098 ------------------------------------- [Typography] Body copy: 15px 'Outfit', sans-serif Header: 36px 'Outfit', sans-serif Input, textarea: 15px 'Outfit', sans-serif Sidebar heading: 20px 'Outfit', sans-serif >>> TABLE OF CONTENTS: ======================= 01. Template default css - Animations - General - Section Title - Video Button - Typography - Tables - Forms - Buttons - Pagination - Colors - Accordion - Tabs 02. Preloader 03. Topbar 04 Navbar - Navbar Default - Navbar Transparent - Navbar Sticky - Navbar Box 05. Banner - Banner Style One - Banner Style Two - Banner Style Three - Banner Style Four - Banner Style Five - Banner Style Six - Banner Style Seven - Banner Style Eight 06. About Us - Version One - Version Two - Version Three - Version Four 07. Category - Version One - Version Two - Version Three 08. Courses - Version One - Version Two - Version Three - Version Four - Version Five - Version Six - Course Single 09. Gallery 10. Advisor - Version One - Version Two - Advisor Details 11. Event - Version One - Version Two - Version Three - Version Four - Event Details 12. Zoom Meeting - Version One - Zoom Meeting Details 13. Testimonials - Version One - Version Two - Version Three 14. Why Choose Us 15. Privacy Policy 16. Fun Factor 17. FAQ 18. Login 19. Register 20. Blog - Standard - Left Sidebar - Right Sidebar - Single 21. Error 404 22. Footer 23. PHP Contact Form 24. Others */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&family=Noto+Sans+Lao:wght@500;700;800;900&display=swap'); @font-face { font-family: 'BoonHome'; src: url('assets/fonts/boonbaan/BoonBaan-Regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; } @font-face { font-family: 'BoonHome'; src: url('assets/fonts/boonbaan/BoonBaan-Bold.woff2') format('woff2'); font-style: normal; font-weight: 700 900; font-display: swap; } html[lang="lo"] body { font-family: 'BoonHome', sans-serif; font-feature-settings: "locl"; } html[lang="lo"] { --font-default: 'BoonHome', sans-serif; --font-heading: 'BoonHome', sans-serif; } html[lang="lo"] :is(h1, h2, h3, h4, h5, h6, p, a, button, input, textarea, select, label, span, li) { font-family: 'BoonHome', sans-serif; } html[lang="lo"] .ljp-hero__title, html[lang="lo"] .ljp-hero__title span, html[lang="lo"] .ljp-hero__title strong { font-family: 'Outfit', sans-serif; } html[lang="lo"] .ljp-hero__japanese { font-family: 'Noto Sans JP', sans-serif; } /* Varialbes */ :root { --font-default: 'Outfit', sans-serif; --font-heading: 'Outfit', sans-serif; --fontawesome: "Font Awesome 5 Pro"; --black: #221D1E; --dark: #221D1E; --dark-secondary: #AB090A; --dark-optional: #221D1E; --white: #FEFDFD; --color-primary: #DF0708; --color-secondary: #AB090A; --color-style-two: #DF0708; --color-style-three: #E79F9F; --color-style-four: #E79F9F; --color-style-five: #AB090A; --color-style-six: #FEFDFD; --color-style-seven: #AB090A; --color-style-eight: #E79F9F; --color-heading: #221D1E; --color-paragraph: #5f5759; --bg-gray: #f3eeee; --bg-gray-secondary: #FEFDFD; --bg-gradient: linear-gradient(90deg, var(--color-primary) 50%, var(--color-secondary) 100%); --bg-gradient-secondary: linear-gradient(90deg, var(--color-style-two) 50%, var(--color-style-three) 100%); --bg-gradient-orange: linear-gradient(90deg, var(--color-style-seven) 20%, var(--color-style-eight) 100%); --bg-gray-gradient: linear-gradient(90deg, var(--bg-gray-secondary) 30%, var(--bg-gray) 100%); --bg-gray-gradient-secondary: linear-gradient(to left, #FEFDFD 0%, rgba(231, 159, 159, .20) 55%, #FEFDFD 100%); } /* Laos–Japan homepage hero (scoped to avoid affecting later sections) */ .ljp-template-nav{display:none!important}.ljp-main-nav>li>a{padding-left:15px!important;padding-right:15px!important;font-size:15.5px!important;font-weight:700!important;white-space:nowrap}.ljp-main-nav>li>a[href="#home"]{color:#DF0708!important}.ljp-about-menu>.dropdown-menu{min-width:350px;padding:12px!important;border:1px solid rgba(34,29,30,.08)!important;border-radius:18px!important;box-shadow:0 20px 45px rgba(34,29,30,.14)!important}.ljp-about-menu>.dropdown-menu>li>a{display:flex!important;align-items:center;gap:13px;padding:11px 13px!important;border-radius:11px;color:#526575!important;font-family:'BoonHome',sans-serif!important;font-size:14.5px!important;font-weight:700!important;letter-spacing:.01em;transition:.2s}.ljp-about-menu>.dropdown-menu>li>a i{display:grid;width:36px;height:36px;flex:none;place-items:center;border-radius:10px;color:#DF0708;background:#fbebeb;font-size:14px;transition:.2s}.ljp-about-menu>.dropdown-menu>li>a:hover{padding-left:17px!important;color:#DF0708!important;background:#fbefef!important}.ljp-about-menu>.dropdown-menu>li>a:hover i{color:#fff;background:#DF0708}html{scroll-behavior:smooth}#home,#about-ljp,#learning,#seasonal-programs,#summer-package,#journey,#testimonials,#who-is-it-for,#why-ljp,#contact,#brand-pingu,#brand-ceo,#brand-sorotouch,#brand-algorithmics,#brand-izumi,#brand-sangfanh,#brand-lba{scroll-margin-top:100px} @media(max-width:1199px){.ljp-main-nav>li>a{padding-left:10px!important;padding-right:10px!important;font-size:14px!important}} .ljp-navbar{min-height:82px!important;border:0!important;border-bottom:1px solid rgba(34,29,30,.075)!important;background:rgba(255,255,255,.96)!important;box-shadow:0 10px 35px rgba(34,29,30,.075)!important;backdrop-filter:blur(14px)}.ljp-navbar>.container{min-height:82px;max-width:1380px;padding-right:30px;padding-left:30px}.ljp-navbar .navbar-header{display:flex;align-items:center;min-height:82px}.ljp-navbar .navbar-collapse{justify-content:flex-end!important}.ljp-navbar .ljp-main-nav{align-items:center;gap:5px}.ljp-navbar .ljp-main-nav>li>a{position:relative;padding:11px 14px!important;border-radius:11px;color:#302a2b!important;font-size:14.5px!important;transition:color .22s,background .22s}.ljp-navbar .ljp-main-nav>li>a::after{content:"";position:absolute;right:14px;bottom:5px;left:14px;height:2px;border-radius:2px;background:#DF0708;transform:scaleX(0);transition:transform .22s}.ljp-navbar .ljp-main-nav>li>a:hover{color:#DF0708!important;background:#fff3f3!important}.ljp-navbar .ljp-main-nav>li>a:hover::after,.ljp-navbar .ljp-main-nav>li>a[href="#home"]::after{transform:scaleX(1)}.ljp-navbar .ljp-main-nav>li:last-child>a{padding:11px 20px!important;color:#fff!important;background:#DF0708!important;box-shadow:0 9px 22px rgba(223,7,8,.2)}.ljp-navbar .ljp-main-nav>li:last-child>a::after{display:none}.ljp-navbar .ljp-main-nav>li:last-child>a:hover{color:#fff!important;background:#AB090A!important}.ljp-navbar .ljp-brand img.logo{width:50px!important;height:50px!important}.ljp-navbar .ljp-brand>span{font-size:15px} @media(max-width:1199px){.ljp-navbar .ljp-main-nav{gap:1px}.ljp-navbar .ljp-main-nav>li>a{padding:10px 9px!important;font-size:13.5px!important}.ljp-navbar .ljp-main-nav>li:last-child>a{padding:10px 15px!important}} @media(max-width:991px){.ljp-navbar,.ljp-navbar>.container,.ljp-navbar .navbar-header{min-height:72px!important}.ljp-navbar>.container{padding-right:18px;padding-left:18px}.ljp-navbar .navbar-toggle{display:grid!important;width:44px;height:44px;padding:0!important;place-items:center;border:0!important;border-radius:13px;color:#fff!important;background:#DF0708!important;box-shadow:0 8px 18px rgba(223,7,8,.2)}.ljp-navbar .navbar-collapse{justify-content:flex-start!important}.ljp-navbar .ljp-main-nav{align-items:stretch;gap:0}.ljp-navbar .ljp-main-nav>li>a,.ljp-navbar .ljp-main-nav>li:last-child>a{padding:13px 18px!important;border-radius:10px;color:#302a2b!important;background:transparent!important;box-shadow:none}.ljp-navbar .ljp-main-nav>li>a::after{display:none}} .ljp-navbar .navbar-collapse{justify-content:flex-end!important;margin-right:0;margin-left:auto}.ljp-navbar .ljp-main-nav{gap:2px}.ljp-navbar .ljp-main-nav>li>a{padding-right:12px!important;padding-left:12px!important} .ljp-navbar .ljp-main-nav>.ljp-home-link>a,.ljp-main-nav>.ljp-home-link>a[href="#home"]{display:flex!important;align-items:center;gap:8px;color:#302a2b!important;background:#f5f2f2!important}.ljp-navbar .ljp-main-nav>.ljp-home-link>a::after{display:none!important}.ljp-navbar .ljp-main-nav>.ljp-home-link>a i{color:#302a2b;font-size:13px;transition:.22s}.ljp-navbar .ljp-main-nav>.ljp-home-link>a:hover{color:#DF0708!important;background:#fff0f0!important}.ljp-navbar .ljp-main-nav>.ljp-home-link>a:hover i{color:#DF0708} .ljp-home-menu__arrow{margin-left:1px!important;font-size:9px!important}.ljp-home-menu.open>a .ljp-home-menu__arrow,.ljp-home-menu.show>a .ljp-home-menu__arrow{transform:rotate(180deg)}.ljp-navbar .ljp-home-brands{left:0!important;width:350px;max-height:min(72vh,680px);padding:14px!important;overflow-x:hidden;overflow-y:auto;border:1px solid rgba(34,29,30,.1)!important;border-radius:18px!important;background:#fff!important;box-shadow:0 22px 55px rgba(34,29,30,.17)!important}.ljp-home-brands>li+li{margin-top:10px}.ljp-home-brands>li>a{display:flex!important;height:92px;align-items:center;justify-content:center;padding:10px 14px!important;overflow:hidden;border:1px solid #dce5ef!important;border-radius:16px!important;background:#fff!important;transition:border-color .2s,background .2s,transform .2s}.ljp-home-brands>li>a:hover{border-color:#efb5b5!important;background:#fff7f7!important;transform:translateX(2px)}.ljp-home-brands>li>a>img{width:190px!important;height:68px!important;max-width:72%!important;object-fit:contain!important}.ljp-home-brands>li>a>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.ljp-home-brands>li:nth-child(4)>a>img{transform:scale(2.1) translateY(-1%)}.ljp-home-brands>li:nth-child(5)>a>img{transform:scale(2.7) translateY(-29%)}.ljp-home-brands__ceo{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important;color:#12377e;font-family:Arial,sans-serif!important;font-size:46px;font-style:italic;font-weight:800;letter-spacing:-5px}.ljp-home-brands::-webkit-scrollbar{width:8px}.ljp-home-brands::-webkit-scrollbar-thumb{border-radius:8px;background:#aaa}.ljp-home-brands::-webkit-scrollbar-track{background:#f4f4f4} .ljp-navbar .ljp-main-nav>li:last-child>a{padding:11px 12px!important;color:#302a2b!important;background:transparent!important;box-shadow:none!important}.ljp-navbar .ljp-main-nav>li:last-child>a::after{display:block}.ljp-navbar .ljp-main-nav>li:last-child>a:hover{color:#DF0708!important;background:#fff3f3!important} .ljp-navbar .ljp-main-nav>li>a::after{display:none!important}.ljp-navbar .ljp-main-nav>li>a:hover,.ljp-navbar .ljp-main-nav>li:last-child>a:hover,.ljp-navbar .ljp-main-nav>.ljp-home-link>a:hover{color:#302a2b!important;background:#f1eeee!important}.ljp-navbar .ljp-main-nav>.ljp-home-link>a:hover i{color:#302a2b!important}.ljp-navbar .ljp-main-nav>.ljp-about-menu>a::after{color:#302a2b!important} .ljp-dropdown-arrow{margin-left:6px;color:#302a2b!important;font-size:10px;transition:transform .22s}.ljp-about-menu:hover>.dropdown-toggle .ljp-dropdown-arrow{transform:rotate(180deg)} @media(max-width:991px){.ljp-navbar .navbar-collapse{margin-left:0}.ljp-dropdown-arrow{display:none!important}.ljp-navbar .ljp-home-brands{width:calc(100% - 30px);max-height:55vh;margin:8px 15px!important}.ljp-home-brands>li>a{height:82px}.ljp-home-menu__arrow{display:block!important}} .ljp-home-brands>li:nth-child(3)>a>img{transform:scale(2.1) translateY(-1%)}.ljp-home-brands>li:nth-child(4)>a>img{transform:scale(2.7) translateY(-29%)}.ljp-home-brands>li:nth-child(5)>a>img{transform:none} .ljp-navbar .ljp-main-nav>.ljp-home-menu{position:relative}.ljp-navbar .ljp-home-menu>.ljp-home-brands{position:absolute!important;z-index:9999;top:calc(100% + 10px)!important;right:auto!important;left:0!important;width:340px!important;min-width:340px!important;margin:0!important;box-sizing:border-box}.ljp-home-brands>li{display:block!important;width:100%!important}.ljp-home-brands>li>a{display:flex!important;width:100%!important;height:90px!important;box-sizing:border-box;cursor:default}.ljp-home-brands>li>a>img{display:block!important;width:230px!important;height:70px!important;max-width:88%!important;max-height:70px!important;margin:auto!important;object-fit:contain!important;opacity:1!important;visibility:visible!important}.ljp-home-brands>.brand-algorithmics>a>img{transform:scale(2.05) translateY(-1%)}.ljp-home-brands>.brand-izumi>a>img{transform:scale(2.55) translateY(-29%)}.ljp-home-brands>.brand-sangfanh>a>img,.ljp-home-brands>.brand-lba>a>img,.ljp-home-brands>.brand-sorotouch>a>img{transform:none}.ljp-home-brands>.brand-pingu>a>img{transform:scale(1.05)} @media(max-width:991px){.ljp-navbar .ljp-home-menu>.ljp-home-brands{position:relative!important;top:auto!important;left:auto!important;width:calc(100% - 30px)!important;min-width:0!important;margin:8px 15px!important}.ljp-home-brands>li>a{height:84px!important}} .ljp-home-brands>.brand-ceo>a>img,.ljp-home-brands>.brand-izumi>a>img{width:235px!important;height:72px!important;max-width:90%!important;object-fit:contain!important;transform:none!important} .ljp-brand{display:flex!important;align-items:center;gap:10px;padding-top:4px!important;padding-bottom:4px!important;text-decoration:none}.ljp-brand img.logo{width:54px!important;height:54px!important;max-height:none!important;border-radius:50%;object-fit:cover;box-shadow:0 6px 16px rgba(34,29,30,.14)}.ljp-brand>span{color:#221D1E;font-family:'BoonHome',sans-serif!important;font-size:16px;font-weight:700;line-height:1;white-space:nowrap}.ljp-brand>span strong{display:inline;color:#DF0708;font-weight:700}.ljp-mobile-brand{display:none;text-decoration:none}.ljp-mobile-brand:hover,.ljp-mobile-brand:focus{text-decoration:none}.ljp-mobile-brand img{width:50px!important;height:50px!important;border-radius:50%;object-fit:cover}.ljp-mobile-brand span{color:#221D1E;font-family:'BoonHome',sans-serif!important;font-size:15px;font-weight:700;line-height:1}.ljp-mobile-brand strong{display:inline;color:#DF0708}.side .widget .logo img[src$="ljp-logo.png"]{width:100px;height:100px;border-radius:50%;object-fit:cover}.footer-logo img[src$="ljp-logo.png"]{width:100px!important;height:100px!important;border-radius:50%;object-fit:cover} @media(max-width:1199px){.ljp-brand>span{display:none}} @media(max-width:991px){.ljp-mobile-brand{display:flex;align-items:center;gap:9px;margin:18px 20px}} @media(max-width:767px){.ljp-brand img.logo{width:46px!important;height:46px!important}} .ljp-brands{position:relative;padding:82px 0 88px;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#fff8f8 100%)}.ljp-brands::before{position:absolute;top:-110px;right:-90px;width:280px;height:280px;border-radius:50%;background:rgba(223,7,8,.055);content:""}.ljp-brands__intro{position:relative;max-width:760px;margin:0 auto 42px;text-align:center}.ljp-brands__intro>span{display:inline-block;margin-bottom:11px;color:#DF0708;font-size:13px;font-weight:800;letter-spacing:.18em}.ljp-brands__intro h2{margin:0 0 12px;color:#221D1E;font-family:'BoonHome',sans-serif!important;font-size:clamp(32px,4vw,50px);font-weight:700;line-height:1.08}.ljp-brands__intro h2 strong{color:#DF0708}.ljp-brands__intro p{max-width:630px;margin:0 auto;color:#66737e;font-family:'BoonHome',sans-serif!important;font-size:17px}.ljp-brands__grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.ljp-brand-card{min-width:0;padding:22px 18px 17px;border:1px solid rgba(34,29,30,.08);border-radius:20px;background:#fff;box-shadow:0 12px 35px rgba(34,29,30,.07);text-align:center;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.ljp-brand-card:hover{border-color:rgba(223,7,8,.22);box-shadow:0 18px 42px rgba(34,29,30,.12);transform:translateY(-6px)}.ljp-brand-card__logo{display:flex;height:132px;align-items:center;justify-content:center;overflow:hidden}.ljp-brand-card__logo img{display:block;width:100%;height:100%;object-fit:contain}.ljp-brand-card h3{margin:12px 0 0;color:#302a2b;font-family:'BoonHome',sans-serif!important;font-size:16px;font-weight:700}.ljp-brand-card--pingu .ljp-brand-card__logo img{transform:scale(1.05)}.ljp-brand-card--algorithmics .ljp-brand-card__logo img{transform:scale(1.6) translateY(-1%)}.ljp-brand-card--izumi .ljp-brand-card__logo img{transform:scale(2.1) translateY(-30%)}.ljp-brand-card--lba{grid-column:span 2}.ljp-brand-card--lba .ljp-brand-card__logo img{transform:scale(1.03)}.ljp-ceo-mark{position:relative;display:flex;width:170px;height:105px;align-items:center;justify-content:center}.ljp-ceo-mark b{position:relative;color:#12377e;font-family:Arial,sans-serif;font-size:58px;font-style:italic;font-weight:800;letter-spacing:-6px;text-shadow:-2px 0 #fff,0 2px #fff,2px 0 #fff,0 -2px #fff}.ljp-ceo-mark i,.ljp-ceo-mark i::after{position:absolute;width:142px;height:36px;border-radius:50%;border-top:10px solid #ed1b24;content:"";transform:rotate(12deg)}.ljp-ceo-mark i::after{top:-17px;left:7px;width:130px;border-top-color:#12377e;transform:rotate(-5deg)} @media(max-width:991px){.ljp-brands{padding:68px 0 72px}.ljp-brands__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ljp-brand-card--lba{grid-column:span 1}} @media(max-width:575px){.ljp-brands{padding:56px 0 60px}.ljp-brands__intro{margin-bottom:30px}.ljp-brands__grid{grid-template-columns:1fr;gap:14px}.ljp-brand-card{padding:16px}.ljp-brand-card__logo{height:118px}} .ljp-hero{--ljp-navy:#221D1E;--ljp-pink:#DF0708;position:relative;isolation:isolate;min-height:760px;overflow:hidden;color:var(--ljp-navy);background:#d7edff url("assets/img/ljp-hero-fuji-sakura-hd.png") center/cover no-repeat} .ljp-hero__shade{position:absolute;z-index:-1;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.91) 27%,rgba(255,255,255,.45) 48%,rgba(255,255,255,.02) 69%),linear-gradient(0deg,rgba(255,255,255,.3),transparent 42%)} .ljp-hero__content{width:min(820px,calc(100% - 64px));padding:130px 0 64px;margin-left:clamp(32px,6.4vw,118px)} .ljp-hero__badge{display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;padding:9px 20px;border:1px solid rgba(34,29,30,.16);border-radius:999px;background:rgba(255,255,255,.78);backdrop-filter:blur(8px);color:var(--ljp-navy);font-size:13px;font-weight:700;letter-spacing:.03em;box-shadow:0 10px 24px rgba(34,29,30,.1)} .ljp-hero__badge i{color:var(--ljp-pink);font-size:13px} .ljp-hero__title{display:flex;align-items:baseline;flex-wrap:wrap;gap:.18em;margin:0;color:var(--ljp-navy);font-family:Outfit,sans-serif;font-size:clamp(48px,4.6vw,84px);font-weight:800;line-height:.98;letter-spacing:-.05em} .ljp-hero__title strong{color:var(--ljp-pink);font-weight:700} .ljp-hero__subtitle{max-width:720px;margin:18px 0 30px;color:var(--ljp-navy);font-size:clamp(24px,2vw,38px);font-weight:900;line-height:1.25;letter-spacing:-.035em;word-break:break-all} .ljp-hero__features{width:max-content;max-width:100%;margin:0 0 34px;padding:12px 20px;border:1px solid rgba(34,29,30,.08);border-radius:999px;background:rgba(255,255,255,.85);box-shadow:0 10px 26px rgba(34,29,30,.09);backdrop-filter:blur(8px);color:var(--ljp-navy);font-size:clamp(12px,1vw,16px);font-weight:800;line-height:1.25;white-space:nowrap} .ljp-hero__features b{margin:0 5px;color:var(--ljp-pink)} .ljp-hero__actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap} .ljp-hero__cta{display:flex;align-items:center;justify-content:space-between;width:fit-content;min-width:233px;padding:14px 17px 14px 29px;border-radius:999px;color:#fff;background:var(--ljp-pink);box-shadow:0 18px 30px rgba(223,7,8,.26);text-decoration:none;font-size:17px;font-weight:800;transition:.25s} .ljp-hero__cta:hover{transform:translateY(-3px);color:#fff;background:#AB090A} .ljp-hero__arrow{display:grid;width:38px;height:38px;margin-left:19px;place-items:center;border-radius:50%;color:var(--ljp-pink);background:#fff;font:21px Arial} .ljp-hero__secondary{display:inline-flex;align-items:center;gap:9px;color:var(--ljp-navy);text-decoration:none;font-size:15.5px;font-weight:800;padding-bottom:3px;border-bottom:2px solid rgba(34,29,30,.25);transition:.25s} .ljp-hero__secondary i{font-size:13px;transition:transform .25s} .ljp-hero__secondary:hover{color:var(--ljp-pink);border-color:var(--ljp-pink)} .ljp-hero__secondary:hover i{transform:translateX(4px)} .ljp-hero__japanese{position:absolute;z-index:2;right:clamp(48px,8vw,145px);bottom:64px;max-width:520px;padding:0;color:#092a47;text-align:left;text-shadow:0 1px 2px rgba(255,255,255,.75),0 3px 12px rgba(255,255,255,.45);transform:rotate(6deg);transform-origin:center} .ljp-hero__japanese::before,.ljp-hero__japanese::after{display:none} .ljp-hero__japanese p{margin:0;font-family:"Noto Sans JP",sans-serif;font-size:clamp(25px,2.15vw,40px);font-weight:900;line-height:1.4;letter-spacing:.06em;-webkit-text-stroke:1px rgba(255,255,255,.95);paint-order:stroke fill;text-shadow:0 2px 5px rgba(255,255,255,.95),0 4px 14px rgba(22,57,88,.22)} .ljp-hero__japanese span{display:block;margin-top:7px;font-family:'BoonHome',sans-serif;font-size:clamp(15px,1.15vw,20px);font-weight:900;line-height:1.45;letter-spacing:.01em;-webkit-text-stroke:.7px rgba(255,255,255,.95);paint-order:stroke fill;text-shadow:0 2px 4px rgba(255,255,255,.95),0 3px 10px rgba(22,57,88,.2)} @media(max-width:991px){ .ljp-hero__content{padding-top:40px} } @media(max-width:900px){ .ljp-hero{min-height:780px;background-position:64% center} .ljp-hero__shade{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.92) 40%,rgba(255,255,255,.22) 78%)} .ljp-hero__content{width:calc(100% - 48px);margin:0 24px;padding-bottom:42px} .ljp-hero__title{font-size:clamp(42px,10vw,64px)} .ljp-hero__japanese{top:auto;right:18px;bottom:20px;max-width:calc(100% - 36px);padding:0;text-align:right;transform:rotate(10deg);transform-origin:right bottom} .ljp-hero__japanese p{font-size:19px;line-height:1.35} .ljp-hero__japanese span{margin-top:7px;padding-top:7px;font-size:13px} } @media(max-width:560px){ .ljp-hero{min-height:760px;background-position:68% center} .ljp-hero__content{width:calc(100% - 36px);margin:0 18px;padding-bottom:30px} .ljp-hero__badge{font-size:11.5px;padding:8px 16px} .ljp-hero__title{display:block;font-size:clamp(40px,13vw,56px);line-height:.96} .ljp-hero__title strong{display:block;margin-top:6px} .ljp-hero__subtitle{margin:16px 0 24px;font-size:clamp(21px,6.5vw,28px)} .ljp-hero__features{display:block;width:calc(100vw - 18px);max-width:none;margin-bottom:26px;padding:10px 16px;overflow-x:auto;scrollbar-width:none;font-size:12px} .ljp-hero__features::-webkit-scrollbar{display:none} .ljp-hero__actions{gap:16px} .ljp-hero__cta{padding:11px 13px 11px 22px;font-size:15px;min-width:0} .ljp-hero__arrow{width:34px;height:34px} .ljp-hero__secondary{font-size:14px} } /* LJP student growth path */ .ljp-growth-path{position:relative;overflow:hidden;padding:48px 0 52px;color:#fff;background:#221d1e} .ljp-growth-path::before{content:"未来";position:absolute;right:-20px;top:-55px;color:rgba(255,255,255,.025);font:900 250px/1 "Noto Sans JP",sans-serif;pointer-events:none} .ljp-growth-path .container{position:relative;z-index:1} .ljp-growth-path__intro{display:grid;grid-template-columns:minmax(340px,.85fr) 1.15fr;grid-template-areas:"tag copy" "title copy";align-items:end;column-gap:55px;margin-bottom:30px} .ljp-growth-path__intro>span{grid-area:tag;align-self:start;color:#ff4b4c;font:800 12px/1.2 Outfit,sans-serif;letter-spacing:.2em} .ljp-growth-path__intro>span::before{content:"";display:inline-block;width:35px;height:1px;margin:0 12px 4px 0;background:#df0708} .ljp-growth-path__intro h2{grid-area:title;margin:10px 0 0;color:#fff;font-family:'BoonHome',sans-serif;font-size:clamp(30px,3.2vw,46px);font-weight:700;line-height:1.1} .ljp-growth-path__intro h2 strong{color:#ff3334;font-weight:700} .ljp-growth-path__intro>p{grid-area:copy;max-width:620px;margin:0 0 3px;padding-left:25px;border-left:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.65);font-family:'BoonHome',sans-serif;font-size:15px;line-height:1.65} .ljp-growth-path__steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)} .ljp-growth-path__steps article{position:relative;min-height:150px;padding:23px 20px 20px;border-right:1px solid rgba(255,255,255,.12);transition:.3s ease} .ljp-growth-path__steps article:last-child{border-right:0} .ljp-growth-path__steps article:hover{background:#df0708;transform:translateY(-8px);box-shadow:0 22px 40px rgba(0,0,0,.24)} .ljp-growth-path__steps article>span{position:absolute;right:18px;top:16px;color:rgba(255,255,255,.22);font:700 12px Outfit,sans-serif;letter-spacing:.12em} .ljp-growth-path__steps i{display:grid;width:42px;height:42px;margin-bottom:18px;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:50%;color:#ff3334;font-size:16px;transition:.3s} .ljp-growth-path__steps article:hover i{color:#df0708;border-color:#fff;background:#fff} .ljp-growth-path__steps h3{margin:0 0 5px;color:#fff;font:800 15px/1.2 Outfit,sans-serif;letter-spacing:.06em} .ljp-growth-path__steps p{margin:0;color:rgba(255,255,255,.58);font-family:'BoonHome',sans-serif;font-size:15px;line-height:1.5;transition:.3s} .ljp-growth-path__steps article:hover p{color:rgba(255,255,255,.9)} @media(max-width:991px){.ljp-growth-path{padding:46px 0}.ljp-growth-path__intro{grid-template-columns:1fr;grid-template-areas:"tag" "title" "copy";gap:0}.ljp-growth-path__intro>p{margin-top:18px;padding-left:0;border:0}.ljp-growth-path__steps{grid-template-columns:repeat(3,1fr)}.ljp-growth-path__steps article:nth-child(3){border-right:0}.ljp-growth-path__steps article:nth-child(-n+3){border-bottom:1px solid rgba(255,255,255,.12)}} @media(max-width:600px){.ljp-growth-path{padding:38px 0}.ljp-growth-path__intro{margin-bottom:26px}.ljp-growth-path__intro h2{font-size:31px}.ljp-growth-path__steps{grid-template-columns:1fr 1fr}.ljp-growth-path__steps article{min-height:145px;padding:22px 16px}.ljp-growth-path__steps article:nth-child(odd){border-right:1px solid rgba(255,255,255,.12)}.ljp-growth-path__steps article:nth-child(even){border-right:0}.ljp-growth-path__steps article:not(:last-child){border-bottom:1px solid rgba(255,255,255,.12)}.ljp-growth-path__steps article:last-child{grid-column:1/-1}.ljp-growth-path__steps i{margin-bottom:16px}} /* Laos–Japan learning outcomes section */ .ljp-learn-area{position:relative;overflow:hidden;background:linear-gradient(180deg,#FEFDFD 0%,#fff 44%,rgba(231,159,159,.12) 100%)} .ljp-learn-area::before{content:"";position:absolute;width:420px;height:420px;top:-180px;right:-160px;border-radius:50%;background:radial-gradient(circle,rgba(223,7,8,.1),transparent 68%);pointer-events:none} .ljp-lessons__intro{position:relative;z-index:1;max-width:900px;margin:0 auto 54px;text-align:center}.ljp-lessons__intro .ljp-learn__eyebrow{display:inline-flex;align-items:center;gap:12px}.ljp-lessons__intro .ljp-learn__eyebrow::before,.ljp-lessons__intro .ljp-learn__eyebrow::after{content:"";width:28px;height:1px;background:#DF0708}.ljp-lessons__intro h2{margin:0;color:#221D1E;font-size:clamp(36px,4.4vw,62px);font-weight:700;line-height:1.15;letter-spacing:-.035em}.ljp-lessons__intro h2 strong{color:#DF0708;font-weight:700}.ljp-lessons__intro>p{max-width:760px;margin:24px auto 0;color:#596b79;font-size:16px;line-height:1.9} .ljp-lessons{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.ljp-lessons::before{content:"06";position:absolute;z-index:-1;right:-35px;top:-90px;color:rgba(223,7,8,.035);font-family:Outfit,sans-serif!important;font-size:250px;font-weight:900;line-height:1} .ljp-lesson{position:relative;min-height:300px;padding:32px 30px 30px;border:1px solid rgba(34,29,30,.08);border-radius:25px;overflow:hidden;background:rgba(255,255,255,.92);box-shadow:0 15px 42px rgba(34,29,30,.065);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}.ljp-lesson::after{content:"";position:absolute;right:0;bottom:0;width:74px;height:5px;border-radius:5px 0 0 0;background:#DF0708;transform:scaleX(.45);transform-origin:right;transition:transform .3s ease}.ljp-lesson:hover{transform:translateY(-7px);border-color:rgba(223,7,8,.2);box-shadow:0 25px 55px rgba(34,29,30,.12)}.ljp-lesson:hover::after{transform:scaleX(1)} .ljp-lesson__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.ljp-lesson__top span{color:#DF0708;font-family:Outfit,sans-serif!important;font-size:25px;font-weight:800;letter-spacing:.06em}.ljp-lesson__top i{display:grid;width:52px;height:52px;place-items:center;border-radius:16px;color:#DF0708;background:rgba(231,159,159,.2);font-size:19px;transition:.3s}.ljp-lesson:hover .ljp-lesson__top i{color:#fff;background:#DF0708;transform:rotate(-5deg)}.ljp-lesson h3{margin:0 0 13px;color:#221D1E;font-size:21px;font-weight:700;line-height:1.45}.ljp-lesson p{margin:0;color:#60717e;font-size:14.5px;line-height:1.8} @media(max-width:991px){.ljp-lessons{grid-template-columns:repeat(2,1fr)}.ljp-lesson{min-height:280px}} @media(max-width:600px){.ljp-lessons__intro{margin-bottom:36px;text-align:left}.ljp-lessons__intro .ljp-learn__eyebrow::after{display:none}.ljp-lessons__intro h2{font-size:34px}.ljp-lessons__intro h2 br{display:none}.ljp-lessons__intro>p{font-size:14.5px;line-height:1.8}.ljp-lessons{grid-template-columns:1fr;gap:14px}.ljp-lesson{min-height:0;padding:26px 23px;border-radius:21px}.ljp-lesson__top{margin-bottom:20px}.ljp-lesson__top i{width:46px;height:46px;border-radius:14px}.ljp-lesson h3{font-size:19px}.ljp-lesson p{font-size:14px}} .ljp-learn__heading{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-bottom:52px} .ljp-learn__heading>div{flex:1}.ljp-learn__eyebrow,.ljp-learn__banner-label{display:block;margin-bottom:13px;color:#DF0708;font-family:Outfit,sans-serif!important;font-size:12px;font-weight:800;letter-spacing:.16em}.ljp-learn__heading h2{margin:0;color:#221D1E;font-size:clamp(34px,4vw,58px);font-weight:700;line-height:1.1;letter-spacing:-.025em}.ljp-learn__heading>p{max-width:470px;margin:0 0 6px;padding-left:28px;border-left:2px solid #DF0708;color:#526779;font-size:16px;line-height:1.9} .ljp-learn__bento{display:grid;grid-template-columns:repeat(12,1fr);gap:22px}.ljp-learn__feature{position:relative;grid-column:span 8;min-height:420px;border-radius:30px;overflow:hidden;box-shadow:0 24px 60px rgba(34,29,30,.16)}.ljp-learn__feature img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease}.ljp-learn__feature:hover img{transform:scale(1.035)}.ljp-learn__feature-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,25,48,.94),rgba(4,25,48,.16) 70%)}.ljp-learn__feature-tag{position:absolute;z-index:2;top:25px;left:25px;padding:8px 14px;border:1px solid rgba(255,255,255,.35);border-radius:999px;color:#fff;background:rgba(34,29,30,.28);backdrop-filter:blur(10px);font-family:Outfit,sans-serif!important;font-size:11px;letter-spacing:.13em}.ljp-learn__feature-body{position:relative;z-index:1;display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:38px;color:#fff}.ljp-learn__feature-body h4{margin:0 0 9px;color:#fff;font-size:26px;font-weight:700}.ljp-learn__feature-body p{margin:0;max-width:560px;color:rgba(255,255,255,.82);font-size:15px;line-height:1.8} .ljp-learn__card{position:relative;grid-column:span 4;min-height:199px;padding:30px 30px 28px;border:1px solid rgba(34,29,30,.07);border-radius:26px;background:rgba(255,255,255,.92);box-shadow:0 16px 42px rgba(34,29,30,.07);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}.ljp-learn__card:hover{transform:translateY(-7px);border-color:rgba(223,7,8,.18);box-shadow:0 25px 55px rgba(34,29,30,.13)}.ljp-learn__number{position:absolute;top:25px;right:27px;color:rgba(34,29,30,.18);font-family:Outfit,sans-serif!important;font-size:28px;font-weight:800}.ljp-learn__card h4{margin:0 0 9px;color:#221D1E;font-size:20px;font-weight:700;line-height:1.3}.ljp-learn__card p{margin:0;color:#60707e;font-size:14.5px;line-height:1.75}.ljp-learn__banner{grid-column:span 12;display:flex;align-items:center;gap:30px;padding:34px 38px;border:1px solid rgba(223,7,8,.1);border-radius:26px;background:linear-gradient(120deg,#fff 0%,rgba(231,159,159,.16) 57%,#FEFDFD 100%)}.ljp-learn__banner h4{margin:0 0 7px;color:#221D1E;font-size:21px;font-weight:700}.ljp-learn__banner p{margin:0;max-width:850px;color:#5a6874;font-size:14.5px;line-height:1.75}.ljp-learn__banner-label{margin-bottom:6px;font-size:10px} .ljp-learn__icon{display:grid;place-items:center;width:52px;height:52px;flex:none;margin-bottom:17px;border-radius:16px;font-size:20px}.ljp-learn__icon--navy{background:rgba(231,159,159,.18);color:#221D1E}.ljp-learn__icon--pink{background:rgba(231,159,159,.22);color:#DF0708}.ljp-learn__icon--gold{background:rgba(231,159,159,.25);color:#AB090A}.ljp-learn__icon--light{background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(8px)}.ljp-learn__icon--lg{width:64px;height:64px;margin-bottom:0;border-radius:20px;font-size:25px} .ljp-learn__mission{position:relative;margin-top:26px;padding:62px 70px;border-radius:30px;overflow:hidden;background:linear-gradient(125deg,#221D1E 0%,#221D1E 55%,#AB090A 140%);text-align:center;color:#fff;box-shadow:0 24px 60px rgba(34,29,30,.16)}.ljp-learn__mission::after{content:"";position:absolute;width:260px;height:260px;right:-80px;bottom:-130px;border:1px solid rgba(255,255,255,.12);border-radius:50%;box-shadow:0 0 0 35px rgba(255,255,255,.035),0 0 0 70px rgba(255,255,255,.025)}.ljp-learn__mission-mark{display:block;height:48px;color:#E79F9F;font-family:Georgia,serif!important;font-size:72px;line-height:1}.ljp-learn__mission h3{position:relative;z-index:1;margin:0 0 20px;color:#fff;font-size:clamp(26px,2.7vw,38px);font-weight:700}.ljp-learn__mission p{position:relative;z-index:1;max-width:900px;margin:0 auto 14px;color:rgba(255,255,255,.82);font-size:16px;line-height:1.95}.ljp-learn__mission p:last-child{margin-bottom:0} @media(max-width:991px){.ljp-learn__heading{align-items:flex-start;flex-direction:column;gap:24px}.ljp-learn__heading h2 br{display:none}.ljp-learn__feature{grid-column:span 12}.ljp-learn__card{grid-column:span 6}.ljp-learn__mission{padding:52px 40px}} @media(max-width:600px){.ljp-learn__heading{margin-bottom:34px}.ljp-learn__heading>p{padding-left:18px;font-size:14.5px}.ljp-learn__bento{gap:16px}.ljp-learn__feature,.ljp-learn__card,.ljp-learn__banner{grid-column:span 12}.ljp-learn__feature{min-height:340px;border-radius:22px}.ljp-learn__feature-body{padding:26px}.ljp-learn__feature-body h4{font-size:22px}.ljp-learn__card{min-height:auto;padding:27px 24px;border-radius:21px}.ljp-learn__banner{align-items:flex-start;flex-direction:column;padding:28px 24px}.ljp-learn__icon--lg{margin-bottom:3px}.ljp-learn__mission{margin-top:20px;padding:42px 22px;border-radius:22px}.ljp-learn__mission p{font-size:14.5px;line-height:1.85}} /* Laos–Japan about section */ .ljp-about-area{position:relative;overflow:hidden;background:linear-gradient(135deg,#FEFDFD 0%,#fff 48%,rgba(231,159,159,.18) 145%)!important}.ljp-about-area::before{content:"LJP";position:absolute;right:-25px;bottom:-95px;color:rgba(34,29,30,.025);font-family:Outfit,sans-serif!important;font-size:310px;font-weight:900;line-height:1;pointer-events:none}.ljp-about-area .row{position:relative;z-index:1}.ljp-about__media{position:relative;min-height:620px;border-radius:34px;overflow:hidden;background:#E79F9F;box-shadow:0 30px 70px rgba(34,29,30,.18)}.ljp-about__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(3,28,52,.68) 100%);pointer-events:none}.ljp-about__media img{display:block;width:100%;height:620px;object-fit:cover;object-position:64% center;transition:transform .8s ease}.ljp-about__media:hover img{transform:scale(1.035)}.ljp-about__badge{position:absolute;z-index:2;left:30px;bottom:30px;display:flex;flex-direction:column;min-width:155px;padding:19px 26px;border:1px solid rgba(255,255,255,.2);border-radius:20px;background:rgba(34,29,30,.76);box-shadow:0 18px 40px rgba(4,31,56,.28);backdrop-filter:blur(12px)}.ljp-about__badge-number{color:#fff;font-family:Outfit,sans-serif!important;font-size:37px;font-weight:800;line-height:1}.ljp-about__badge-label{margin-top:7px;color:rgba(255,255,255,.8);font-size:12px;font-weight:700}.ljp-about__stamp{position:absolute;z-index:2;top:27px;right:27px;display:flex;align-items:center;gap:11px;padding:12px 15px;border-radius:15px;color:#221D1E;background:rgba(255,255,255,.9);box-shadow:0 12px 32px rgba(34,29,30,.15);backdrop-filter:blur(9px);font-family:Outfit,sans-serif!important;font-size:11px;font-weight:800;line-height:1.15;letter-spacing:.09em}.ljp-about__stamp i{color:#DF0708;font-size:19px}.ljp-about__stamp span,.ljp-about__stamp small{font-family:Outfit,sans-serif!important}.ljp-about__stamp small{font-size:7px;letter-spacing:.13em;color:#71808b}.ljp-about-area .about-style-one-info{padding:20px 0}.ljp-about__eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;color:#DF0708;font-family:Outfit,sans-serif!important;font-size:12px;font-weight:800;letter-spacing:.16em}.ljp-about__eyebrow::before{content:"";width:32px;height:2px;background:#DF0708}.ljp-about-area .about-style-one-info h2{margin:0 0 26px;color:#221D1E;font-family:Outfit,sans-serif!important;font-size:clamp(44px,4.2vw,65px);font-weight:700;letter-spacing:-.045em}.ljp-about-area .about-style-one-info h2 strong{color:#DF0708;font-family:Outfit,sans-serif!important}.ljp-about-area .about-style-one-info p{margin-bottom:16px;color:#586b79;font-size:15.5px;line-height:1.95}.ljp-about__copy{position:relative;padding-bottom:30px}.ljp-about__copy::after{content:"";display:block;width:96px;height:4px;margin-top:28px;border-radius:99px;background:linear-gradient(90deg,#DF0708 0 58%,rgba(223,7,8,.18) 58% 100%)}.ljp-about__copy p:last-child{margin-bottom:0}.ljp-about-area .button-double{margin-top:28px!important}.ljp-about-area .btn-style-two{box-shadow:0 15px 35px rgba(223,7,8,.2)} .ljp-about__slideshow{position:absolute;inset:0}.ljp-about__slideshow img{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 1s ease,transform .8s ease}.ljp-about__slideshow img.is-active{opacity:1;visibility:visible}.ljp-about__media:hover .ljp-about__slideshow img.is-active{transform:scale(1.035)} @media(max-width:1199px){.ljp-about__media,.ljp-about__media img{height:560px;min-height:560px}.ljp-about-area .pl-80{padding-left:45px}} @media(max-width:991px){.ljp-about__media{margin-bottom:50px}.ljp-about-area .pl-80{padding-left:15px}.ljp-about-area .about-style-one-info{max-width:720px}.ljp-about-area::before{font-size:220px}} .ljp-about__highlights{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:28px 0 4px}.ljp-about__highlights>div{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid rgba(34,29,30,.07);border-radius:17px;background:#fff;box-shadow:0 12px 32px rgba(34,29,30,.06)}.ljp-about__highlights strong{color:#DF0708;font-family:Outfit,sans-serif!important;font-size:25px;font-weight:800}.ljp-about__highlights span{color:#221D1E;font-size:12.5px;font-weight:700;line-height:1.35} @media(max-width:560px){.ljp-about__media,.ljp-about__media img{height:440px;min-height:440px;border-radius:24px}.ljp-about__badge{left:16px;bottom:16px;min-width:130px;padding:13px 17px;border-radius:15px}.ljp-about__badge-number{font-size:27px}.ljp-about__badge-label{font-size:10px}.ljp-about__stamp{top:15px;right:15px;padding:9px 11px}.ljp-about-area .about-style-one-info h2{font-size:42px}.ljp-about__highlights{grid-template-columns:1fr}.ljp-about-area .about-style-one-info p{font-size:14.5px}} /* Refined About LJP layout */ .ljp-about-area{background:linear-gradient(125deg,#f9f4f4 0%,#fff 46%,#f8eded 100%)!important}.ljp-about-area::after{content:"";position:absolute;top:12%;right:-90px;width:270px;height:270px;border:1px solid rgba(223,7,8,.1);border-radius:50%;box-shadow:0 0 0 38px rgba(223,7,8,.025),0 0 0 76px rgba(223,7,8,.018);pointer-events:none}.ljp-about__layout{min-height:650px}.ljp-about__visual-column{position:relative}.ljp-about__visual-column::before{content:"";position:absolute;top:-24px;left:-24px;width:145px;height:145px;border-top:4px solid #DF0708;border-left:4px solid #DF0708;border-radius:30px 0 0;opacity:.85}.ljp-about__media{min-height:610px;border:8px solid rgba(255,255,255,.9);border-radius:36px;box-shadow:0 35px 80px rgba(34,29,30,.19)}.ljp-about__media img{height:610px}.ljp-about__media::after{background:linear-gradient(180deg,rgba(34,29,30,.04) 35%,rgba(34,29,30,.72) 100%)}.ljp-about__caption{position:absolute;z-index:2;right:25px;bottom:25px;display:flex;align-items:center;gap:12px;padding:14px 18px;border:1px solid rgba(255,255,255,.22);border-radius:17px;color:#fff;background:rgba(34,29,30,.76);backdrop-filter:blur(12px)}.ljp-about__caption span{color:#fff;font-family:Outfit,sans-serif!important;font-size:29px;font-weight:800;line-height:1}.ljp-about__caption small{color:rgba(255,255,255,.72);font-family:Outfit,sans-serif!important;font-size:8px;font-weight:700;line-height:1.35;letter-spacing:.13em} .ljp-about-area .ljp-about__panel{position:relative;padding:54px 48px!important;border:1px solid rgba(34,29,30,.07);border-radius:30px;background:rgba(255,255,255,.88);box-shadow:0 24px 65px rgba(34,29,30,.09);backdrop-filter:blur(8px)}.ljp-about__panel::before{content:"";position:absolute;top:54px;bottom:54px;left:0;width:4px;border-radius:0 5px 5px 0;background:#DF0708}.ljp-about-area .ljp-about__panel h2{font-size:clamp(43px,4vw,62px)}.ljp-about__journey{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:30px;padding-top:24px;border-top:1px solid rgba(34,29,30,.09)}.ljp-about__journey span{display:flex;align-items:center;gap:9px;color:#221D1E}.ljp-about__journey i{display:grid;width:34px;height:34px;place-items:center;border-radius:11px;color:#DF0708;background:rgba(231,159,159,.2);font-size:13px}.ljp-about__journey b{font-size:12px;font-weight:800;white-space:nowrap}.ljp-about__journey em{color:#DF0708;font-family:Arial,sans-serif;font-size:18px;font-style:normal} @media(max-width:1199px){.ljp-about-area .ljp-about__panel{padding:42px 34px!important}.ljp-about__journey{gap:6px}.ljp-about__journey b{font-size:10.5px}} @media(max-width:991px){.ljp-about__layout{min-height:0}.ljp-about__visual-column::before{display:none}.ljp-about-area .ljp-about__panel{max-width:none;margin-top:10px;padding:42px!important}.ljp-about__panel::before{top:42px;bottom:42px}} @media(max-width:560px){.ljp-about__caption{right:15px;bottom:15px;padding:11px 13px}.ljp-about__caption span{font-size:23px}.ljp-about-area .ljp-about__panel{padding:34px 24px!important;border-radius:23px}.ljp-about__panel::before{top:34px;bottom:34px}.ljp-about__journey{align-items:stretch;flex-direction:column;gap:9px}.ljp-about__journey span{padding:9px 11px;border-radius:12px;background:#faf6f6}.ljp-about__journey em{display:none}} /* Laos–Japan journey atmosphere section */ .ljp-camps-area{position:relative;overflow:hidden;background:#221D1E}.ljp-camps-area::before{content:"SEASONS";position:absolute;right:-20px;top:-35px;color:rgba(255,255,255,.025);font-family:Outfit,sans-serif!important;font-size:170px;font-weight:900;line-height:1;pointer-events:none}.ljp-camps__heading{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-bottom:36px}.ljp-camps__heading>div>span{display:block;margin-bottom:12px;color:#E79F9F;font-family:Outfit,sans-serif!important;font-size:11px;font-weight:800;letter-spacing:.18em}.ljp-camps__heading h2{margin:0;color:#fff;font-size:clamp(40px,4.4vw,62px);font-weight:700;letter-spacing:-.035em}.ljp-camps__heading h2 strong{color:#DF0708}.ljp-camps__heading>p{max-width:480px;margin:0 0 7px;padding-left:25px;border-left:2px solid #DF0708;color:rgba(255,255,255,.62);font-size:15px;line-height:1.85} .ljp-camps__switch{position:relative;z-index:2;display:flex;width:fit-content;margin:0 auto -25px;padding:6px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:#fff;box-shadow:0 16px 35px rgba(0,0,0,.22)}.ljp-camps__switch button{display:flex;align-items:center;gap:9px;min-width:190px;padding:14px 24px;border:0;border-radius:999px;color:#5a6874;background:transparent;font-family:Outfit,sans-serif!important;font-size:14px;font-weight:800;justify-content:center;transition:.3s}.ljp-camps__switch button i{font-size:15px}.ljp-camps__switch button.is-active{color:#fff;background:#DF0708;box-shadow:0 10px 22px rgba(223,7,8,.25)} .ljp-camps__viewport{overflow:hidden;border-radius:32px;background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.28)}.ljp-camps__track{display:flex;width:200%;transform:translateX(0);transition:transform .65s cubic-bezier(.77,0,.18,1)}.ljp-camps__viewport.is-summer .ljp-camps__track{transform:translateX(-50%)}.ljp-camp{display:grid;grid-template-columns:1.06fr .94fr;width:50%;min-height:580px;background:#fff}.ljp-camp__image{position:relative;min-width:0;overflow:hidden}.ljp-camp__image::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(34,29,30,.68))}.ljp-camp__image img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}.ljp-camp:hover .ljp-camp__image img{transform:scale(1.035)}.ljp-camp__image>span{position:absolute;z-index:1;left:28px;bottom:27px;display:flex;align-items:center;gap:9px;padding:10px 15px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#fff;background:rgba(34,29,30,.42);backdrop-filter:blur(10px);font-family:Outfit,sans-serif!important;font-size:10px;font-weight:800;letter-spacing:.13em}.ljp-camp__content{display:flex;flex-direction:column;justify-content:center;padding:55px 52px}.ljp-camp__season{margin-bottom:12px;color:#DF0708;font-family:Outfit,sans-serif!important;font-size:10px;font-weight:800;letter-spacing:.16em}.ljp-camp__content h3{margin:0 0 19px;color:#221D1E;font-family:Outfit,sans-serif!important;font-size:clamp(31px,3vw,45px);font-weight:800;line-height:1.08;letter-spacing:-.035em}.ljp-camp__content h3 strong{display:block;color:#DF0708}.ljp-camp__content>p{margin:0 0 22px;color:#5e6e7b;font-size:14.5px;line-height:1.85}.ljp-camp__content ul{margin:0 0 27px;padding:0;list-style:none}.ljp-camp__content li{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;color:#344552;font-size:13px;font-weight:700;line-height:1.5}.ljp-camp__content li i{display:grid;width:21px;height:21px;flex:none;place-items:center;border-radius:50%;color:#DF0708;background:rgba(231,159,159,.22);font-size:8px}.ljp-camp__cta{display:flex;align-items:center;justify-content:space-between;width:fit-content;min-width:215px;padding:10px 11px 10px 21px;border-radius:999px;color:#fff;background:#221D1E;font-size:13px;font-weight:800;text-decoration:none;transition:.3s}.ljp-camp__cta span{display:grid;width:34px;height:34px;margin-left:18px;place-items:center;border-radius:50%;color:#DF0708;background:#fff;font-size:17px}.ljp-camp__cta:hover{color:#fff;background:#DF0708;transform:translateY(-2px)}.ljp-camp--summer .ljp-camp__season,.ljp-camp--summer .ljp-camp__content h3 strong{color:#AB090A} .ljp-camp--winter{grid-template-columns:.72fr 1.28fr;min-height:790px}.ljp-camp--winter .ljp-camp__content{padding:48px 46px}.ljp-camp--winter .ljp-camp__content h3{font-size:clamp(31px,2.7vw,42px)}.ljp-camp__lead{margin-bottom:18px!important}.ljp-camp__facts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.ljp-camp__facts span{display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:10px;color:#3f505d;background:#f7f2f2;font-size:10.5px}.ljp-camp__facts i{color:#DF0708}.ljp-camp__facts b{font-weight:800}.ljp-camp__route{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:17px}.ljp-camp__route>div{position:relative;padding:17px 16px 16px;border:1px solid rgba(34,29,30,.08);border-radius:15px;background:#fff;box-shadow:0 8px 22px rgba(34,29,30,.045)}.ljp-camp__route span{position:absolute;top:14px;right:15px;color:rgba(223,7,8,.28);font-family:Outfit,sans-serif!important;font-size:18px;font-weight:900}.ljp-camp__route h4{margin:0 0 7px;color:#221D1E;font-size:16px;font-weight:800}.ljp-camp__route p{margin:0;color:#667682;font-size:11.5px;line-height:1.65}.ljp-camp__offer{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;padding:18px;border-radius:17px;background:linear-gradient(120deg,#221D1E,#3a292b)}.ljp-camp__price small{display:block;margin-bottom:7px;color:rgba(255,255,255,.55);font-size:8px;font-weight:700;letter-spacing:.08em}.ljp-camp__price>div{display:flex;align-items:center;gap:10px}.ljp-camp__price strong{color:#fff;font-family:Outfit,sans-serif!important;font-size:27px;font-weight:800;line-height:1}.ljp-camp__price span{padding:5px 7px;border-radius:6px;color:#fff;background:#DF0708;font-family:Outfit,sans-serif!important;font-size:7px;font-weight:800;letter-spacing:.1em}.ljp-camp__price p{margin:7px 0 0;color:rgba(255,255,255,.68);font-size:9.5px}.ljp-camp__price p b{color:#fff}.ljp-camp__offer .ljp-camp__cta{flex:none;min-width:190px;background:#DF0708;font-size:11px}.ljp-camp__note{display:flex;gap:7px;margin:13px 0 0!important;color:#7a858d!important;font-size:9.5px!important;line-height:1.55!important}.ljp-camp__note i{margin-top:3px;color:#DF0708} .ljp-camp--summer{grid-template-columns:.72fr 1.28fr;min-height:790px}.ljp-camp--summer .ljp-camp__content{padding:48px 46px}.ljp-camp--summer .ljp-camp__content h3{font-size:clamp(29px,2.45vw,39px)}.ljp-camp__reference{display:flex;gap:9px;margin:0 0 19px!important;padding:12px 14px;border-left:3px solid #DF0708;border-radius:0 11px 11px 0;color:#657580!important;background:#faf4f4;font-size:10.5px!important;line-height:1.65!important}.ljp-camp__reference i{margin-top:3px;color:#DF0708}.ljp-camp__activities{margin-bottom:24px;padding:22px 20px 13px;border:1px solid rgba(34,29,30,.08);border-radius:18px;background:linear-gradient(145deg,#fff,#faf7f7)}.ljp-camp__activities-label{display:block;margin-bottom:7px;color:#DF0708;font-family:Outfit,sans-serif!important;font-size:8px;font-weight:800;letter-spacing:.14em}.ljp-camp__activities h4{margin:0 0 16px;color:#221D1E;font-size:17px;font-weight:800;line-height:1.4}.ljp-camp__activities ul{display:grid;grid-template-columns:repeat(2,1fr);gap:9px 15px;margin-bottom:0}.ljp-camp__activities li{margin:0;font-size:10.5px;line-height:1.55}.ljp-camp--summer .ljp-camp__cta{background:#DF0708} @media(max-width:991px){.ljp-camps__heading{align-items:flex-start;flex-direction:column;gap:20px}.ljp-camp,.ljp-camp--winter,.ljp-camp--summer{grid-template-columns:1fr;min-height:0}.ljp-camp__image{height:430px}.ljp-camp__content,.ljp-camp--winter .ljp-camp__content,.ljp-camp--summer .ljp-camp__content{padding:44px 40px}.ljp-camps__track{align-items:flex-start}.ljp-camp__offer{align-items:flex-start;flex-direction:column}.ljp-camp__offer .ljp-camp__cta{width:100%}} @media(max-width:600px){.ljp-camps__heading{margin-bottom:28px}.ljp-camps__heading>p{padding-left:18px;font-size:14px}.ljp-camps__switch{width:100%;margin-bottom:-21px}.ljp-camps__switch button{min-width:0;flex:1;padding:12px 9px;font-size:11.5px}.ljp-camps__viewport{border-radius:23px}.ljp-camp__image{height:300px}.ljp-camp__image>span{left:18px;bottom:17px}.ljp-camp__content,.ljp-camp--winter .ljp-camp__content,.ljp-camp--summer .ljp-camp__content{padding:37px 23px 30px}.ljp-camp__content h3{font-size:31px}.ljp-camp__route,.ljp-camp__activities ul{grid-template-columns:1fr}.ljp-camp__facts{flex-direction:column}.ljp-camp__facts span{width:100%}.ljp-camp__price strong{font-size:24px}.ljp-camp__cta{width:100%}} /* Seasonal camps — editorial travel-card redesign */ .ljp-camps-area{background:linear-gradient(145deg,#f6f1f1 0%,#fff 50%,#f8eded 100%)}.ljp-camps-area::before{top:16px;right:-10px;color:rgba(34,29,30,.025);font-size:145px}.ljp-camps__heading{align-items:center;margin-bottom:30px}.ljp-camps__heading>div>span{color:#DF0708}.ljp-camps__heading h2{color:#221D1E}.ljp-camps__heading>p{color:#60717e}.ljp-camps__switch{margin:0 auto 25px;border-color:rgba(34,29,30,.08);box-shadow:0 14px 34px rgba(34,29,30,.12)}.ljp-camps__viewport{border:1px solid rgba(34,29,30,.08);border-radius:34px;background:#fff;box-shadow:0 30px 80px rgba(34,29,30,.13)}.ljp-camps__track{align-items:stretch}.ljp-camp,.ljp-camp--winter,.ljp-camp--summer{grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr);min-height:720px;background:linear-gradient(135deg,#fff 0%,#fdfafa 100%)}.ljp-camp__image{height:auto;margin:14px;border-radius:25px}.ljp-camp__image::after{background:linear-gradient(180deg,rgba(34,29,30,.02) 35%,rgba(34,29,30,.78) 100%)}.ljp-camp__image>span{left:20px;bottom:20px}.ljp-camp__content,.ljp-camp--winter .ljp-camp__content,.ljp-camp--summer .ljp-camp__content{justify-content:flex-start;padding:46px 44px 38px}.ljp-camp__content h3,.ljp-camp--winter .ljp-camp__content h3,.ljp-camp--summer .ljp-camp__content h3{margin-bottom:15px;font-size:clamp(29px,2.5vw,40px)}.ljp-camp__content>p{font-size:13.5px;line-height:1.75}.ljp-camp__facts{gap:7px;margin-bottom:16px}.ljp-camp__facts span{flex:1;min-width:145px;justify-content:center;padding:9px 8px;background:#f6eeee}.ljp-camp__route{gap:12px;margin-bottom:15px}.ljp-camp__route>div{padding:17px;border-color:rgba(223,7,8,.1);background:#fff}.ljp-camp__offer{padding:17px 18px;border-radius:16px;box-shadow:0 14px 28px rgba(34,29,30,.14)}.ljp-camp__note{margin-top:11px!important}.ljp-camp__reference{margin-bottom:15px!important}.ljp-camp__activities{margin-bottom:18px;padding:19px 19px 13px}.ljp-camp__activities h4{margin-bottom:13px}.ljp-camp__activities ul{gap:8px 13px} @media(max-width:1199px){.ljp-camp,.ljp-camp--winter,.ljp-camp--summer{grid-template-columns:minmax(290px,.7fr) minmax(0,1.3fr)}.ljp-camp__content,.ljp-camp--winter .ljp-camp__content,.ljp-camp--summer .ljp-camp__content{padding:40px 32px 34px}.ljp-camp__offer{align-items:flex-start;flex-direction:column}.ljp-camp__offer .ljp-camp__cta{width:100%}} @media(max-width:991px){.ljp-camps__heading{align-items:flex-start}.ljp-camp,.ljp-camp--winter,.ljp-camp--summer{grid-template-columns:1fr}.ljp-camp__image{height:400px;margin:12px}.ljp-camps__track{align-items:flex-start}.ljp-camp__content,.ljp-camp--winter .ljp-camp__content,.ljp-camp--summer .ljp-camp__content{padding:38px 34px}} @media(max-width:600px){.ljp-camps__switch{margin-bottom:18px}.ljp-camps__viewport{border-radius:24px}.ljp-camp__image{height:275px;margin:8px;border-radius:18px}.ljp-camp__content,.ljp-camp--winter .ljp-camp__content,.ljp-camp--summer .ljp-camp__content{padding:30px 20px 27px}.ljp-camp__content h3,.ljp-camp--winter .ljp-camp__content h3,.ljp-camp--summer .ljp-camp__content h3{font-size:28px}.ljp-camp__facts span{justify-content:flex-start}.ljp-camp__route,.ljp-camp__activities ul{grid-template-columns:1fr}.ljp-camp__offer{padding:16px}.ljp-camp__price>div{align-items:flex-start;flex-direction:column;gap:7px}} /* Seasonal camps — premium brochure redesign v2 */ .ljp-camps-area{padding-top:110px;padding-bottom:110px;background:#1c1718!important}.ljp-camps-area::before{content:"JAPAN";top:-45px;right:2%;color:rgba(255,255,255,.025);font-size:220px;letter-spacing:.04em}.ljp-camps-area::after{content:"";position:absolute;left:-130px;bottom:-130px;width:340px;height:340px;border:1px solid rgba(223,7,8,.16);border-radius:50%;box-shadow:0 0 0 45px rgba(223,7,8,.025),0 0 0 90px rgba(223,7,8,.018);pointer-events:none}.ljp-camps__heading{position:relative;z-index:1;align-items:flex-end;max-width:1180px;margin:0 auto 42px}.ljp-camps__heading>div>span{color:#e9a5a5}.ljp-camps__heading h2{color:#fff;font-size:clamp(44px,5vw,70px)}.ljp-camps__heading h2 strong{display:block;color:#DF0708}.ljp-camps__heading>p{max-width:430px;color:rgba(255,255,255,.62);border-left-color:#DF0708} .ljp-camps__switch{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:min(620px,100%);margin:0 auto 24px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.ljp-camps__switch button{position:relative;min-width:0;padding:19px 26px;border:1px solid rgba(255,255,255,.14);border-radius:16px;color:rgba(255,255,255,.62);background:rgba(255,255,255,.055);backdrop-filter:blur(8px);font-size:15px}.ljp-camps__switch button::after{content:"VIEW PROGRAM";display:block;margin-left:8px;color:rgba(255,255,255,.34);font-size:7px;letter-spacing:.13em}.ljp-camps__switch button.is-active{color:#fff;border-color:#DF0708;background:#DF0708;box-shadow:0 14px 32px rgba(223,7,8,.28)}.ljp-camps__switch button.is-active::after{color:rgba(255,255,255,.7)} .ljp-camps__viewport{position:relative;z-index:1;max-width:1320px;margin:auto;border:1px solid rgba(255,255,255,.09);border-radius:30px;background:#f8f5f5;box-shadow:0 42px 90px rgba(0,0,0,.36)}.ljp-camp,.ljp-camp--winter,.ljp-camp--summer{grid-template-columns:minmax(350px,42%) minmax(0,58%);min-height:760px;background:#f8f5f5}.ljp-camp__image{height:auto;margin:0;border-radius:0}.ljp-camp__image::after{background:linear-gradient(180deg,rgba(15,11,12,.05) 25%,rgba(15,11,12,.82) 100%)}.ljp-camp__image>span{left:30px;bottom:28px;padding:11px 16px;border-radius:10px}.ljp-camp__content,.ljp-camp--winter .ljp-camp__content,.ljp-camp--summer .ljp-camp__content{position:relative;justify-content:center;padding:45px 46px}.ljp-camp__content::before{content:"";position:absolute;top:45px;right:0;width:60px;height:4px;border-radius:4px 0 0 4px;background:#DF0708}.ljp-camp__season{margin-bottom:10px}.ljp-camp__content h3,.ljp-camp--winter .ljp-camp__content h3,.ljp-camp--summer .ljp-camp__content h3{font-size:clamp(30px,2.7vw,44px)}.ljp-camp__content h3 strong{margin-top:3px}.ljp-camp__facts span{justify-content:flex-start;border:1px solid rgba(34,29,30,.055);background:#fff}.ljp-camp__route>div,.ljp-camp__activities{border:0;border-radius:16px;background:#fff;box-shadow:0 10px 26px rgba(34,29,30,.055)}.ljp-camp__route>div{border-top:3px solid rgba(223,7,8,.7)}.ljp-camp__offer{background:#221D1E}.ljp-camp__reference{background:#fff}.ljp-camp--summer .ljp-camp__cta{background:#221D1E}.ljp-camp--summer .ljp-camp__cta:hover{background:#DF0708} @media(max-width:1199px){.ljp-camp,.ljp-camp--winter,.ljp-camp--summer{grid-template-columns:minmax(310px,38%) minmax(0,62%)}.ljp-camp__content,.ljp-camp--winter .ljp-camp__content,.ljp-camp--summer .ljp-camp__content{padding:40px 32px}} @media(max-width:991px){.ljp-camps-area{padding-top:90px;padding-bottom:90px}.ljp-camps__heading{align-items:flex-start}.ljp-camps__heading h2 strong{display:inline}.ljp-camp,.ljp-camp--winter,.ljp-camp--summer{grid-template-columns:1fr}.ljp-camp__image{height:430px}.ljp-camp__content,.ljp-camp--winter .ljp-camp__content,.ljp-camp--summer .ljp-camp__content{padding:44px 38px}.ljp-camp__content::before{top:44px}} @media(max-width:600px){.ljp-camps-area{padding-top:70px;padding-bottom:70px}.ljp-camps__heading h2{font-size:42px}.ljp-camps__heading h2 strong{display:block}.ljp-camps__switch{gap:7px}.ljp-camps__switch button{flex-direction:column;gap:5px;padding:14px 8px;font-size:12px}.ljp-camps__switch button::after{margin:0;font-size:6px}.ljp-camps__viewport{border-radius:22px}.ljp-camp__image{height:290px}.ljp-camp__content,.ljp-camp--winter .ljp-camp__content,.ljp-camp--summer .ljp-camp__content{padding:34px 20px 28px}.ljp-camp__content::before{top:34px;width:38px}.ljp-camp__offer{border-radius:14px}} /* Seasonal camps — LJP visual system v3 */ .ljp-camps-area,.ljp-camps-area *:not(i){font-family:'BoonHome',sans-serif!important} .ljp-camps-area{padding-top:100px;padding-bottom:100px;background:linear-gradient(180deg,#fff 0%,#fdf8f8 52%,rgba(231,159,159,.14) 100%)!important}.ljp-camps-area::before{content:"LJP";top:20px;right:-15px;color:rgba(34,29,30,.025);font-size:250px}.ljp-camps-area::after{display:none}.ljp-camps__heading{align-items:flex-end;max-width:none;margin-bottom:38px}.ljp-camps__heading>div>span{color:#DF0708}.ljp-camps__heading h2{color:#221D1E;font-size:clamp(42px,4.6vw,64px)}.ljp-camps__heading h2 strong{display:inline;color:#DF0708}.ljp-camps__heading>p{max-width:490px;color:#60717e} .ljp-camps__switch{display:flex;width:min(520px,100%);gap:6px;margin:0 auto 28px;padding:6px;border:1px solid rgba(34,29,30,.08);border-radius:999px;background:#fff;box-shadow:0 14px 34px rgba(34,29,30,.1)}.ljp-camps__switch button{flex:1;flex-direction:row;min-height:52px;padding:13px 18px;border:0;border-radius:999px;color:#526575;background:transparent;font-size:14px}.ljp-camps__switch button::after{display:none}.ljp-camps__switch button.is-active{color:#fff;border:0;background:#DF0708;box-shadow:0 10px 24px rgba(223,7,8,.24)} .ljp-camps__viewport{max-width:none;border:1px solid rgba(34,29,30,.08);border-radius:30px;background:#fff;box-shadow:0 25px 65px rgba(34,29,30,.11)}.ljp-camp,.ljp-camp--winter,.ljp-camp--summer{display:block;min-height:0;background:#fff}.ljp-camp__image{height:340px;margin:0;border-radius:0}.ljp-camp__image img{object-position:center 52%}.ljp-camp__image::after{background:linear-gradient(180deg,rgba(34,29,30,.02) 38%,rgba(34,29,30,.7) 100%)}.ljp-camp__image>span{left:32px;bottom:27px;border-radius:999px;background:rgba(34,29,30,.52)} .ljp-camp__content,.ljp-camp--winter .ljp-camp__content,.ljp-camp--summer .ljp-camp__content{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:0 34px;padding:40px 44px 42px}.ljp-camp__content::before{top:44px;width:54px}.ljp-camp__season,.ljp-camp__content>h3,.ljp-camp__content>.ljp-camp__lead,.ljp-camp__content>.ljp-camp__reference{grid-column:1}.ljp-camp__content h3,.ljp-camp--winter .ljp-camp__content h3,.ljp-camp--summer .ljp-camp__content h3{margin-bottom:14px;font-size:clamp(29px,2.6vw,41px)}.ljp-camp__content>h3 strong{display:inline;margin-left:.12em}.ljp-camp__lead{margin-bottom:20px!important}.ljp-camp__facts{grid-column:1;gap:8px;margin:0}.ljp-camp__facts span{flex:0 1 auto;min-width:0;justify-content:flex-start;padding:9px 12px}.ljp-camp__route{grid-column:2;grid-row:1/span 4;align-self:start;margin:0;padding:18px;border-radius:20px;background:#f9f4f4}.ljp-camp__route>div{padding:15px;border-top:0;border-left:3px solid #DF0708;box-shadow:none}.ljp-camp__route>div+div{margin-top:10px}.ljp-camp__offer{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;align-items:center;margin-top:24px;padding:19px 21px}.ljp-camp__note{grid-column:1/-1}.ljp-camp__reference{margin-bottom:17px!important}.ljp-camp__activities{grid-column:2;grid-row:1/span 5;align-self:start;margin:0;padding:22px;background:#f9f4f4;box-shadow:none}.ljp-camp__activities ul{grid-template-columns:1fr}.ljp-camp__summer-price{grid-column:1;align-self:start;width:100%;margin:4px 0 16px;padding:18px 20px;border-left:4px solid #DF0708;border-radius:0 16px 16px 0;background:#221D1E;box-shadow:0 14px 30px rgba(34,29,30,.14)}.ljp-camp__summer-price>span{display:block;margin-bottom:5px;color:#E79F9F;font-size:8px;font-weight:800;letter-spacing:.13em}.ljp-camp__summer-price strong{color:#fff;font-size:30px;font-weight:800;line-height:1}.ljp-camp__summer-price small{font-size:12px}.ljp-camp--summer>.ljp-camp__content>.ljp-camp__cta{grid-column:1;align-self:start;width:fit-content;margin-top:0} @media(max-width:991px){.ljp-camps-area{padding-top:85px;padding-bottom:85px}.ljp-camps__heading{align-items:flex-start}.ljp-camps__heading h2 strong{display:inline}.ljp-camp__image{height:330px}.ljp-camp__content,.ljp-camp--winter .ljp-camp__content,.ljp-camp--summer .ljp-camp__content{display:block;padding:38px 34px}.ljp-camp__content::before{top:40px}.ljp-camp__route,.ljp-camp__activities{margin-top:22px}.ljp-camp__offer{display:flex}.ljp-camp--summer>.ljp-camp__content>.ljp-camp__cta{width:fit-content;margin-top:20px}} @media(max-width:600px){.ljp-camps-area{padding-top:65px;padding-bottom:65px}.ljp-camps__heading h2{font-size:39px}.ljp-camps__heading h2 strong{display:block}.ljp-camps__switch{gap:4px;padding:5px}.ljp-camps__switch button{flex-direction:row;min-height:46px;padding:10px 8px;font-size:11.5px}.ljp-camps__viewport{border-radius:22px}.ljp-camp__image{height:250px}.ljp-camp__image>span{left:17px;bottom:16px}.ljp-camp__content,.ljp-camp--winter .ljp-camp__content,.ljp-camp--summer .ljp-camp__content{padding:31px 19px 27px}.ljp-camp__content::before{top:32px;width:34px}.ljp-camp__content>h3 strong{display:block;margin-left:0}.ljp-camp__route,.ljp-camp__activities{padding:14px;border-radius:16px}.ljp-camp__offer{align-items:stretch;display:flex;flex-direction:column}.ljp-camp__offer .ljp-camp__cta,.ljp-camp--summer>.ljp-camp__content>.ljp-camp__cta{width:100%}} /* Summer Camp package inclusions */ .ljp-included-area,.ljp-included-area *:not(i){font-family:'BoonHome',sans-serif!important}.ljp-included-area{position:relative;overflow:hidden;background:#221D1E}.ljp-included-area::before{content:"INCLUDED";position:absolute;right:-20px;top:-45px;color:rgba(255,255,255,.025);font-family:Outfit,sans-serif!important;font-size:180px;font-weight:900;line-height:1;pointer-events:none}.ljp-included__heading{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:55px;margin-bottom:48px}.ljp-included__heading>div>span{display:block;margin-bottom:12px;color:#E79F9F;font-size:11px;font-weight:800;letter-spacing:.16em}.ljp-included__heading h2{margin:0;color:#fff;font-size:clamp(39px,4.2vw,60px);font-weight:700;line-height:1.12}.ljp-included__heading h2 strong{display:block;color:#DF0708}.ljp-included__heading>p{max-width:460px;margin:0 0 5px;padding-left:24px;border-left:2px solid #DF0708;color:rgba(255,255,255,.6);font-size:15px;line-height:1.85} .ljp-included__grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.ljp-included__card{position:relative;min-height:390px;padding:30px 28px;border:1px solid rgba(255,255,255,.09);border-radius:24px;background:rgba(255,255,255,.055);box-shadow:0 20px 48px rgba(0,0,0,.16);transition:.3s}.ljp-included__card:hover{transform:translateY(-6px);border-color:rgba(223,7,8,.45);background:rgba(255,255,255,.075)}.ljp-included__card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.ljp-included__card-head span{color:rgba(255,255,255,.2);font-size:26px;font-weight:800}.ljp-included__card-head i{display:grid;width:52px;height:52px;place-items:center;border-radius:16px;color:#fff;background:#DF0708;font-size:18px;box-shadow:0 10px 24px rgba(223,7,8,.24)}.ljp-included__card h3{margin:0 0 22px;color:#fff;font-size:22px;font-weight:700;line-height:1.4}.ljp-included__card ul{margin:0;padding:0;list-style:none}.ljp-included__card li{display:flex;align-items:flex-start;gap:11px;margin-bottom:14px;color:rgba(255,255,255,.7);font-size:14px;line-height:1.65}.ljp-included__card li i{display:grid;width:20px;height:20px;flex:none;margin-top:2px;place-items:center;border-radius:50%;color:#DF0708;background:rgba(231,159,159,.16);font-size:8px} .ljp-included__booking{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:30px;margin-top:20px;padding:25px 28px;border-radius:22px;background:#fff;box-shadow:0 22px 50px rgba(0,0,0,.22)}.ljp-included__booking-price{min-width:150px;padding-right:27px;border-right:1px solid rgba(34,29,30,.1)}.ljp-included__booking-price>span{display:block;margin-bottom:5px;color:#DF0708;font-size:8px;font-weight:800;letter-spacing:.13em}.ljp-included__booking-price strong{color:#221D1E;font-size:34px;font-weight:800;line-height:1}.ljp-included__booking-price small{font-size:13px}.ljp-included__booking>p{margin:0;color:#667681;font-size:13px;line-height:1.7}.ljp-included__booking>p b{color:#221D1E}.ljp-included__booking>a{display:flex;align-items:center;gap:12px;padding:13px 18px;border-radius:999px;color:#fff;background:#DF0708;font-size:12px;font-weight:800;white-space:nowrap;text-decoration:none;transition:.3s}.ljp-included__booking>a:hover{color:#fff;background:#AB090A;transform:translateY(-2px)} @media(max-width:991px){.ljp-included__heading{align-items:flex-start;flex-direction:column;gap:22px}.ljp-included__grid{grid-template-columns:1fr}.ljp-included__card{min-height:0}.ljp-included__booking{grid-template-columns:auto 1fr}.ljp-included__booking>a{grid-column:1/-1;justify-content:center}} @media(max-width:600px){.ljp-included__heading{margin-bottom:34px}.ljp-included__heading>p{padding-left:17px;font-size:14px}.ljp-included__heading h2{font-size:36px}.ljp-included__card{padding:25px 22px;border-radius:20px}.ljp-included__booking{grid-template-columns:1fr;gap:17px;padding:23px 20px}.ljp-included__booking-price{padding:0 0 17px;border-right:0;border-bottom:1px solid rgba(34,29,30,.1)}.ljp-included__booking>a{grid-column:auto}} /* Program inclusions — light LJP redesign */ .ljp-included-area{background:linear-gradient(145deg,#fff 0%,#fbf6f6 52%,#f5e8e8 100%)}.ljp-included-area::before{content:"03";top:20px;right:2%;color:rgba(223,7,8,.035);font-size:240px}.ljp-included__heading{align-items:center;flex-direction:column;gap:18px;max-width:820px;margin:0 auto 52px;text-align:center}.ljp-included__heading>div>span{display:inline-flex;align-items:center;gap:10px;color:#DF0708}.ljp-included__heading>div>span::before,.ljp-included__heading>div>span::after{content:"";width:28px;height:1px;background:#DF0708}.ljp-included__heading h2{color:#221D1E}.ljp-included__heading h2 strong{display:inline;margin-left:.18em;color:#DF0708}.ljp-included__heading>p{max-width:620px;margin:0;padding:0;border:0;color:#657581} .ljp-included__grid{gap:22px}.ljp-included__card{min-height:410px;padding:0 28px 30px;border:1px solid rgba(34,29,30,.075);border-radius:26px;background:#fff;box-shadow:0 18px 48px rgba(34,29,30,.075)}.ljp-included__card::before{content:"";display:block;height:6px;margin:0 -28px 25px;border-radius:26px 26px 0 0;background:linear-gradient(90deg,#DF0708,#E79F9F)}.ljp-included__card:hover{border-color:rgba(223,7,8,.2);background:#fff;box-shadow:0 28px 62px rgba(34,29,30,.13)}.ljp-included__card-head{margin-bottom:20px}.ljp-included__card-head span{color:rgba(34,29,30,.13);font-size:32px}.ljp-included__card-head i{width:56px;height:56px;border-radius:18px;color:#DF0708;background:#faeaea;box-shadow:none;font-size:20px}.ljp-included__card h3{min-height:62px;margin-bottom:18px;color:#221D1E;font-size:22px}.ljp-included__card li{margin-bottom:13px;color:#60717e;font-size:13.5px}.ljp-included__card li i{color:#fff;background:#DF0708} .ljp-included__booking{grid-template-columns:auto 1fr auto;gap:28px;margin-top:26px;padding:27px 30px;border:0;border-radius:24px;color:#fff;background:linear-gradient(120deg,#221D1E 0%,#352426 62%,#5b171a 100%);box-shadow:0 25px 55px rgba(34,29,30,.2)}.ljp-included__booking::before{content:"";position:absolute;right:18%;top:0;width:150px;height:100%;background:radial-gradient(circle,rgba(223,7,8,.2),transparent 68%);pointer-events:none}.ljp-included__booking-price{position:relative;z-index:1;border-right-color:rgba(255,255,255,.15)}.ljp-included__booking-price>span{color:#E79F9F}.ljp-included__booking-price strong{color:#fff}.ljp-included__booking>p{position:relative;z-index:1;color:rgba(255,255,255,.68)}.ljp-included__booking>p b{color:#fff}.ljp-included__booking>a{position:relative;z-index:1;box-shadow:0 12px 26px rgba(223,7,8,.22)} @media(max-width:991px){.ljp-included__grid{grid-template-columns:repeat(2,1fr)}.ljp-included__card:last-child{grid-column:1/-1}.ljp-included__booking{grid-template-columns:auto 1fr}.ljp-included__booking>a{grid-column:1/-1}} @media(max-width:680px){.ljp-included__heading{align-items:flex-start;text-align:left}.ljp-included__heading>div>span::after{display:none}.ljp-included__heading h2 strong{display:block;margin-left:0}.ljp-included__grid{grid-template-columns:1fr}.ljp-included__card:last-child{grid-column:auto}.ljp-included__card{min-height:0}.ljp-included__booking{grid-template-columns:1fr}.ljp-included__booking-price{border-right:0;border-bottom:1px solid rgba(255,255,255,.15)}.ljp-included__booking>a{grid-column:auto}} .ljp-journey-area{position:relative;overflow:hidden;background:#fff}.ljp-journey-area::before{content:"旅";position:absolute;right:-25px;top:-75px;color:rgba(34,29,30,.03);font-family:"Noto Sans JP",sans-serif!important;font-size:270px;font-weight:800;line-height:1;pointer-events:none}.ljp-journey__heading{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:60px;margin-bottom:48px}.ljp-journey__eyebrow{display:block;margin-bottom:14px;color:#DF0708;font-family:Outfit,sans-serif!important;font-size:11px;font-weight:800;letter-spacing:.17em}.ljp-journey__heading h2{margin:0;color:#221D1E;font-size:clamp(40px,4.2vw,60px);font-weight:700;line-height:1.08;letter-spacing:-.03em}.ljp-journey__heading h2 strong{color:#DF0708}.ljp-journey__heading>p{max-width:500px;margin:0 0 5px;padding-left:25px;border-left:2px solid #DF0708;color:#5d707f;font-size:15px;line-height:1.9}.ljp-journey__showcase{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(330px,.8fr);gap:18px}.ljp-journey__photo{position:relative;min-height:640px;margin:0;border-radius:30px;overflow:hidden;background:#E79F9F;box-shadow:0 28px 65px rgba(34,29,30,.16)}.ljp-journey__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,29,51,.82),transparent 50%);pointer-events:none}.ljp-journey__photo img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}.ljp-journey__photo:hover img{transform:scale(1.035)}.ljp-journey__photo figcaption{position:absolute;z-index:1;right:38px;bottom:34px;left:38px;display:flex;align-items:flex-end;justify-content:space-between;gap:25px;color:#fff}.ljp-journey__photo figcaption span{flex:none;font-family:Outfit,sans-serif!important;font-size:10px;font-weight:800;letter-spacing:.16em}.ljp-journey__photo figcaption strong{max-width:480px;color:#fff;font-size:24px;font-weight:700;line-height:1.35;text-align:right}.ljp-journey__moments{display:grid;grid-template-rows:repeat(3,1fr);gap:14px}.ljp-journey__moments article{position:relative;display:flex;align-items:flex-start;flex-direction:column;justify-content:center;min-height:0;padding:28px 28px;border:1px solid rgba(34,29,30,.08);border-radius:24px;background:linear-gradient(145deg,#fff,#FEFDFD);box-shadow:0 14px 36px rgba(34,29,30,.065);transition:.3s}.ljp-journey__moments article:hover{transform:translateX(-6px);border-color:rgba(223,7,8,.2);box-shadow:0 20px 45px rgba(34,29,30,.11)}.ljp-journey__moments article>span{position:absolute;top:21px;right:23px;color:rgba(34,29,30,.15);font-family:Outfit,sans-serif!important;font-size:19px;font-weight:800}.ljp-journey__moments i{display:grid;width:42px;height:42px;margin-bottom:15px;place-items:center;border-radius:13px;color:#DF0708;background:rgba(231,159,159,.22);font-size:16px}.ljp-journey__moments h3{margin:0 0 6px;color:#221D1E;font-size:19px;font-weight:700}.ljp-journey__moments p{margin:0;color:#647583;font-size:13.5px;line-height:1.65} @media(max-width:991px){.ljp-journey__heading{align-items:flex-start;flex-direction:column;gap:23px}.ljp-journey__heading h2 br{display:none}.ljp-journey__showcase{grid-template-columns:1fr}.ljp-journey__photo{min-height:560px}.ljp-journey__moments{grid-template-columns:repeat(3,1fr);grid-template-rows:none}.ljp-journey__moments article{min-height:230px}.ljp-journey__moments article:hover{transform:translateY(-5px)}} @media(max-width:680px){.ljp-journey__heading{margin-bottom:34px}.ljp-journey__heading>p{padding-left:18px;font-size:14px}.ljp-journey__photo{min-height:450px;border-radius:23px}.ljp-journey__photo figcaption{right:24px;bottom:23px;left:24px;align-items:flex-start;flex-direction:column}.ljp-journey__photo figcaption strong{font-size:20px;text-align:left}.ljp-journey__moments{grid-template-columns:1fr;gap:11px}.ljp-journey__moments article{min-height:190px;padding:25px 23px}} .ljp-journey__gallery{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:220px;gap:16px}.ljp-journey__slot{position:relative;display:block;margin:0;border:0;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#d7d7d9 0%,#c5c3c7 55%,#514b58 100%);cursor:pointer;transition:transform .3s,box-shadow .3s}.ljp-journey__slot:nth-child(1){grid-column:span 6;grid-row:span 2}.ljp-journey__slot:nth-child(2){grid-column:span 3;grid-row:span 2}.ljp-journey__slot:nth-child(3),.ljp-journey__slot:nth-child(4){grid-column:span 3}.ljp-journey__slot:nth-child(5),.ljp-journey__slot:nth-child(6){grid-column:span 6}.ljp-journey__slot:hover{transform:translateY(-5px);box-shadow:0 22px 45px rgba(34,29,30,.16)}.ljp-journey__slot::after{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(0deg,rgba(27,20,33,.9),transparent);pointer-events:none}.ljp-journey__slot input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.ljp-journey__slot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:transform .5s,opacity .3s}.ljp-journey__slot:hover>img{transform:scale(1.035)}.ljp-journey__slot-ui{position:absolute;z-index:1;inset:0;display:flex;align-items:flex-start;justify-content:flex-end;flex-direction:column;padding:27px;color:#fff;text-align:left}.ljp-journey__slot-ui i{position:absolute;top:22px;right:22px;display:grid;width:40px;height:40px;place-items:center;border:1px solid rgba(255,255,255,.32);border-radius:50%;color:#fff;background:rgba(34,29,30,.2);backdrop-filter:blur(8px);font-size:13px;transition:.25s}.ljp-journey__slot:hover .ljp-journey__slot-ui i{color:#DF0708;background:#fff}.ljp-journey__slot-ui small{order:1;margin:0 0 8px;color:#E79F9F;font-family:Outfit,sans-serif!important;font-size:9px;font-weight:800;letter-spacing:.17em}.ljp-journey__slot-ui b{order:2;color:#fff;font-size:18px;font-weight:700;line-height:1.3}.ljp-journey__slot:nth-child(1) .ljp-journey__slot-ui b{font-size:27px}.ljp-journey__slot.has-image>img{opacity:1}.ljp-journey__slot.has-image .ljp-journey__slot-ui{opacity:1}.ljp-journey__slot.has-image:hover .ljp-journey__slot-ui{background:transparent} @media(max-width:900px){.ljp-journey__gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:260px}.ljp-journey__slot:nth-child(n){grid-column:span 1;grid-row:span 1}.ljp-journey__slot:nth-child(1),.ljp-journey__slot:nth-child(2){grid-row:span 2}} @media(max-width:560px){.ljp-journey__gallery{grid-template-columns:1fr;grid-auto-rows:260px;gap:13px}.ljp-journey__slot:nth-child(n){grid-column:span 1;grid-row:span 1;border-radius:20px}.ljp-journey__slot:nth-child(1){grid-row:span 2}.ljp-journey__slot-ui{padding:22px}.ljp-journey__slot:nth-child(1) .ljp-journey__slot-ui b{font-size:22px}} .ljp-journey__slot{cursor:default} /* Laos–Japan "who is this for" section */ .ljp-fit-area{position:relative;overflow:hidden;background:#fff}.ljp-fit-area::before{content:"";position:absolute;left:-180px;top:90px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(34,29,30,.07),transparent 68%)}.ljp-fit__heading{display:grid;grid-template-columns:150px minmax(360px,1fr) minmax(300px,430px);align-items:end;gap:34px;margin-bottom:48px}.ljp-fit__heading>span{align-self:start;margin-top:9px;color:#DF0708;font-family:Outfit,sans-serif!important;font-size:11px;font-weight:800;letter-spacing:.16em}.ljp-fit__heading h2{margin:0;color:#221D1E;font-size:clamp(37px,3.8vw,56px);font-weight:700;line-height:1.12;letter-spacing:-.025em}.ljp-fit__heading p{margin:0 0 5px;padding-left:24px;border-left:2px solid #DF0708;color:#60717e;font-size:15px;line-height:1.85}.ljp-fit__panel{position:relative;display:grid;grid-template-columns:310px 1fr;min-height:520px;border:1px solid rgba(34,29,30,.07);border-radius:32px;overflow:hidden;background:#fff;box-shadow:0 28px 70px rgba(34,29,30,.11)}.ljp-fit__aside{position:relative;display:flex;align-items:flex-start;flex-direction:column;padding:55px 42px;overflow:hidden;color:#fff;background:linear-gradient(145deg,#221D1E 0%,#221D1E 62%,#AB090A 145%)}.ljp-fit__aside::before{content:"";position:absolute;width:220px;height:220px;right:-115px;bottom:-70px;border:1px solid rgba(255,255,255,.14);border-radius:50%;box-shadow:0 0 0 34px rgba(255,255,255,.035),0 0 0 68px rgba(255,255,255,.025)}.ljp-fit__mini{color:#E79F9F;font-family:Outfit,sans-serif!important;font-size:10px;font-weight:800;letter-spacing:.18em}.ljp-fit__age{display:flex;align-items:center;margin:34px 0 18px;color:#fff;font-family:Outfit,sans-serif!important;font-size:76px;font-weight:800;line-height:.85;letter-spacing:-.065em}.ljp-fit__age span{margin:0 4px;color:#E79F9F;font-family:Outfit,sans-serif!important;font-size:42px}.ljp-fit__aside p{position:relative;z-index:1;margin:0;color:rgba(255,255,255,.78);font-size:16px;line-height:1.75}.ljp-fit__plane{display:grid;width:50px;height:50px;margin-top:auto;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:50%;color:#fff;background:rgba(255,255,255,.08);font-size:17px}.ljp-fit__content{padding:46px 48px 42px}.ljp-fit__lead{margin:0 0 26px;color:#221D1E;font-size:20px;font-weight:700}.ljp-fit__list{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin:0;padding:0;list-style:none}.ljp-fit__list li{display:flex;align-items:center;gap:13px;min-height:78px;padding:15px 17px;border:1px solid rgba(34,29,30,.07);border-radius:17px;color:#221D1E;background:#FEFDFD;font-size:14px;font-weight:700;line-height:1.45;transition:.25s}.ljp-fit__list li:hover{transform:translateY(-3px);border-color:rgba(223,7,8,.2);background:#fff;box-shadow:0 13px 30px rgba(34,29,30,.08)}.ljp-fit__icon{display:grid;width:39px;height:39px;flex:none;place-items:center;border-radius:12px;color:#DF0708;background:rgba(231,159,159,.22);font-size:14px}.ljp-fit__cta{display:inline-flex;align-items:center;gap:10px;margin-top:27px;padding-bottom:4px;border-bottom:2px solid rgba(34,29,30,.2);color:#221D1E;font-size:15px;font-weight:700;text-decoration:none;transition:.25s}.ljp-fit__cta:hover{gap:15px;color:#DF0708;border-color:#DF0708} @media(max-width:991px){.ljp-fit__heading{grid-template-columns:1fr;gap:18px}.ljp-fit__heading>span{margin:0}.ljp-fit__heading h2 br{display:none}.ljp-fit__heading p{max-width:650px}.ljp-fit__panel{grid-template-columns:1fr}.ljp-fit__aside{min-height:320px}.ljp-fit__plane{margin-top:40px}} @media(max-width:680px){.ljp-fit__heading{margin-bottom:32px}.ljp-fit__heading p{padding-left:17px;font-size:14px}.ljp-fit__panel{border-radius:23px}.ljp-fit__aside{min-height:285px;padding:38px 28px}.ljp-fit__age{margin:25px 0 15px;font-size:62px}.ljp-fit__content{padding:32px 22px}.ljp-fit__lead{font-size:18px}.ljp-fit__list{grid-template-columns:1fr;gap:10px}.ljp-fit__list li{min-height:68px;padding:12px 14px;font-size:13.5px}} /* Laos–Japan "why LJP" section */ .ljp-why-area{position:relative;overflow:hidden;background:linear-gradient(145deg,#221D1E 0%,#AB090A 58%,#221D1E 100%)!important}.ljp-why-area::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 8% 12%,rgba(73,155,220,.15),transparent 28%),radial-gradient(circle at 90% 80%,rgba(223,7,8,.18),transparent 30%);pointer-events:none}.ljp-why-area::after{content:"日本";position:absolute;right:-20px;top:-55px;color:rgba(255,255,255,.025);font-family:"Noto Sans JP",sans-serif!important;font-size:250px;font-weight:800;line-height:1;pointer-events:none}.ljp-why-area .container{position:relative;z-index:1}.ljp-why__heading{display:grid;grid-template-columns:150px minmax(350px,1fr) minmax(300px,430px);align-items:end;gap:34px;margin-bottom:50px}.ljp-why__eyebrow{align-self:start;margin-top:8px;color:#E79F9F;font-family:Outfit,sans-serif!important;font-size:11px;font-weight:800;letter-spacing:.16em}.ljp-why__heading h2{margin:0;color:#fff;font-size:clamp(40px,4.1vw,60px);font-weight:700;line-height:1.08;letter-spacing:-.03em}.ljp-why__heading h2 strong{color:#E79F9F;font-family:Outfit,sans-serif!important}.ljp-why__heading>p{margin:0 0 4px;padding-left:24px;border-left:2px solid #DF0708;color:rgba(255,255,255,.67);font-size:15px;line-height:1.85}.ljp-why__statement{position:relative;display:flex;align-items:center;min-height:250px;padding:44px 150px 44px 64px;border:1px solid rgba(255,255,255,.1);border-radius:30px;overflow:hidden;background:linear-gradient(110deg,rgba(255,255,255,.1),rgba(255,255,255,.035));box-shadow:0 24px 65px rgba(0,0,0,.2);backdrop-filter:blur(8px)}.ljp-why__quote-icon{position:absolute;top:8px;left:38px;color:rgba(255,255,255,.09);font-family:Georgia,serif!important;font-size:145px;line-height:1}.ljp-why__statement p{position:relative;z-index:1;margin:0;color:#fff;font-size:clamp(23px,2.3vw,34px);font-weight:700;line-height:1.55}.ljp-why__statement del{color:rgba(255,255,255,.4);text-decoration-color:#E79F9F;text-decoration-thickness:3px}.ljp-why__statement p span{color:#E79F9F}.ljp-why__seal{position:absolute;right:45px;display:grid;width:88px;height:88px;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:50%;color:#fff;text-align:center}.ljp-why__seal::before{content:"";position:absolute;inset:7px;border:1px dashed rgba(255,255,255,.22);border-radius:50%}.ljp-why__seal i{margin-bottom:-28px;color:#E79F9F;font-size:17px}.ljp-why__seal small{font-family:Outfit,sans-serif!important;font-size:7px;font-weight:700;line-height:1.35;letter-spacing:.12em}.ljp-why__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:18px}.ljp-why__grid article{position:relative;min-height:250px;padding:30px 23px 25px;border:1px solid rgba(255,255,255,.08);border-radius:22px;background:rgba(255,255,255,.055);transition:.3s}.ljp-why__grid article:hover{transform:translateY(-6px);border-color:rgba(255,102,143,.35);background:rgba(255,255,255,.09)}.ljp-why__grid article>span{position:absolute;top:20px;right:20px;color:rgba(255,255,255,.16);font-family:Outfit,sans-serif!important;font-size:18px;font-weight:800}.ljp-why__grid article>i{display:grid;width:49px;height:49px;margin:28px 0 30px;place-items:center;border-radius:15px;color:#E79F9F;background:rgba(255,102,143,.12);font-size:18px}.ljp-why__grid h3{margin:0 0 9px;color:#fff;font-size:18px;font-weight:700}.ljp-why__grid p{margin:0;color:rgba(255,255,255,.58);font-size:13px;line-height:1.7} @media(max-width:1100px){.ljp-why__grid{grid-template-columns:repeat(3,1fr)}.ljp-why__grid article{min-height:225px}.ljp-why__heading{grid-template-columns:120px 1fr 340px}} @media(max-width:850px){.ljp-why__heading{grid-template-columns:1fr;gap:18px}.ljp-why__heading h2 br{display:none}.ljp-why__heading>p{max-width:650px}.ljp-why__statement{padding:40px 120px 40px 38px}.ljp-why__seal{right:25px}.ljp-why__grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.ljp-why__heading{margin-bottom:34px}.ljp-why__heading>p{padding-left:17px;font-size:14px}.ljp-why__statement{min-height:280px;padding:38px 24px 105px;border-radius:22px}.ljp-why__quote-icon{left:17px;font-size:110px}.ljp-why__seal{right:auto;left:24px;bottom:20px;width:68px;height:68px}.ljp-why__seal i{margin-bottom:-22px;font-size:13px}.ljp-why__seal small{font-size:5.5px}.ljp-why__grid{grid-template-columns:1fr;gap:10px}.ljp-why__grid article{min-height:auto;padding:24px 22px}.ljp-why__grid article>i{margin:18px 0 23px}.ljp-why-area::after{font-size:150px}} /* Laos–Japan contact section */ .ljp-contact-area{position:relative;padding-top:75px;padding-bottom:75px;overflow:hidden;background:linear-gradient(180deg,#f7f3f3 0%,#fefdfd 100%)} .ljp-contact-area::before{content:"";position:absolute;right:-120px;bottom:-80px;width:420px;height:420px;border:1px solid rgba(223,7,8,.08);border-radius:50%;box-shadow:0 0 0 38px rgba(223,7,8,.025),0 0 0 78px rgba(223,7,8,.015)} .ljp-contact__shell{position:relative;display:grid;grid-template-columns:0.95fr 1.05fr;max-width:1340px;min-height:620px;margin:0 auto;border:1px solid rgba(34,29,30,.10);border-radius:44px;overflow:hidden;background:#f6f1f1;box-shadow:0 25px 70px rgba(41,20,17,.12)} .ljp-contact__intro{position:relative;display:flex;flex-direction:column;justify-content:center;padding:62px 58px;background:linear-gradient(145deg,#1f1818 0%,#2a1d1b 42%,#3a1b1b 64%,#4d0b0c 100%)} .ljp-contact__intro::before{content:"LJP";position:absolute;right:32px;bottom:-26px;color:rgba(255,255,255,.05);font-family:'Outfit',sans-serif!important;font-size:160px;font-weight:900;line-height:1} .ljp-contact__intro::after{content:"";position:absolute;right:-120px;bottom:-110px;width:300px;height:300px;border:1px solid rgba(255,255,255,.12);border-radius:50%;box-shadow:0 0 0 34px rgba(255,255,255,.028),0 0 0 72px rgba(255,255,255,.014)} .ljp-contact__eyebrow{position:relative;z-index:1;display:block;margin-bottom:24px;color:#f0c2be;font-family:'Outfit',sans-serif!important;font-size:11px;font-weight:800;letter-spacing:.18em} .ljp-contact__intro h2{position:relative;z-index:1;margin:0 0 18px;color:#fefdfd;font-size:clamp(42px,4vw,66px);line-height:1.02;letter-spacing:-.035em} .ljp-contact__line{display:block;font-weight:800} .ljp-contact__intro>p{position:relative;z-index:1;max-width:420px;margin:0;color:rgba(255,255,255,.72);font-size:15px;line-height:1.9} .ljp-contact__call{position:relative;display:flex;align-items:center;justify-content:center;padding:54px 38px;background:#f9f7f6} .ljp-contact__call::before{content:"";position:absolute;top:-115px;right:-120px;width:300px;height:300px;border:1px solid rgba(223,7,8,.08);border-radius:50%;box-shadow:0 0 0 36px rgba(223,7,8,.02),0 0 0 72px rgba(223,7,8,.009)} .ljp-contact__call-box{position:relative;z-index:1;width:min(100%,560px)} .ljp-contact__jp{position:absolute;top:28px;right:32px;color:rgba(223,7,8,.18);font-family:'Noto Sans JP',sans-serif!important;font-size:28px;font-weight:700;letter-spacing:.04em} .ljp-contact__call-label{display:block;margin-bottom:18px;color:#d72d30;font-size:14px;font-weight:700;letter-spacing:.04em} .ljp-contact__number-wrap{display:flex;align-items:center;gap:8px;margin-bottom:30px;flex-wrap:wrap} .ljp-contact__country{color:#221d1e;font-size:clamp(34px,3vw,52px);font-weight:700;line-height:1;letter-spacing:-.04em} .ljp-contact__number{display:block;color:#211d1d;text-decoration:none} .ljp-contact__number strong{display:block;font-size:clamp(34px,3vw,52px);line-height:1;letter-spacing:-.05em} .ljp-contact__button{display:flex;align-items:center;gap:16px;min-height:96px;padding:10px 18px 10px 14px;border-radius:24px;color:#fff;background:linear-gradient(90deg,#eb1a1a 0%,#d81212 30%,#cf0a0a 100%);box-shadow:0 20px 38px rgba(223,7,8,.26);text-decoration:none;transition:transform .25s ease,box-shadow .25s ease} .ljp-contact__button:hover{transform:translateY(-2px);box-shadow:0 24px 45px rgba(223,7,8,.30)} .ljp-contact__button-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;color:#d41d1d;background:#fff;box-shadow:inset 0 0 0 1px rgba(212,29,29,.08)} .ljp-contact__button-icon i{font-size:28px} .ljp-contact__button-text{display:flex;flex:1;flex-direction:column;justify-content:center;min-width:0} .ljp-contact__button-text small{display:block;color:rgba(255,255,255,.74);font-size:11px;letter-spacing:.04em} .ljp-contact__button-text strong{display:block;color:#fff;font-size:clamp(18px,2vw,26px);line-height:1.2;letter-spacing:-.03em} .ljp-contact__button>.fa-arrow-right{font-size:26px;opacity:.95} .ljp-contact__note{display:flex;align-items:center;gap:10px;margin:26px 0 0;color:#4b5b66;font-size:13px;font-weight:600} .ljp-contact__note i{display:grid;place-items:center;width:18px;height:18px;color:#4a5d69;font-size:12px} @media(max-width:991px){.ljp-contact-area{padding-top:60px;padding-bottom:60px}.ljp-contact__shell{grid-template-columns:1fr;max-width:760px;min-height:0}.ljp-contact__intro,.ljp-contact__call{padding:46px 40px}.ljp-contact__intro{min-height:340px}.ljp-contact__call{min-height:360px}.ljp-contact__jp{top:20px;right:26px;font-size:22px}.ljp-contact__country{font-size:clamp(26px,7vw,40px)}.ljp-contact__number strong{font-size:clamp(26px,7vw,40px)}.ljp-contact__button{min-height:82px}.ljp-contact__button-text strong{font-size:20px}} @media(max-width:680px){.ljp-contact-area{padding-top:48px;padding-bottom:48px}.ljp-contact__shell{border-radius:25px}.ljp-contact__intro,.ljp-contact__call{padding:30px 22px}.ljp-contact__intro{min-height:260px}.ljp-contact__intro h2{font-size:42px}.ljp-contact__call{min-height:330px}.ljp-contact__number-wrap{display:flex;align-items:center;gap:6px}.ljp-contact__country{display:inline-block;margin-bottom:0;font-size:clamp(22px,7vw,30px)}.ljp-contact__button{gap:12px;padding:8px 12px 8px 10px;border-radius:18px}.ljp-contact__button-icon{width:48px;height:48px;border-radius:14px}.ljp-contact__button-icon i{font-size:24px}.ljp-contact__button-text strong{font-size:18px}.ljp-contact__button>.fa-arrow-right{font-size:18px}.ljp-contact__note{font-size:11.5px}} .ljp-contact__details>div span{transition:color .25s ease}.ljp-contact__details>div:hover span{color:#DF0708} /* Phone-only contact redesign */ .ljp-contact-area{padding-top:75px;padding-bottom:75px;background:linear-gradient(180deg,#fff 0%,#fbf6f6 100%)} .ljp-contact-area::before{left:auto;right:-25px;bottom:-28px;color:rgba(171,9,10,.035);font-size:clamp(110px,15vw,220px)} .ljp-contact__eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:22px} .ljp-contact__eyebrow::before{content:"";width:34px;height:2px;background:#df0708} .ljp-contact__button{position:relative;z-index:2;display:flex;align-items:center;gap:14px;width:100%;max-width:390px;padding:11px 17px 11px 11px;border-radius:15px;color:#fff;background:#df0708;box-shadow:0 15px 32px rgba(223,7,8,.22);text-decoration:none;transition:transform .25s ease,background .25s ease,box-shadow .25s ease} .ljp-contact__button:hover{transform:translateY(-3px);color:#fff;background:#ab090a;box-shadow:0 22px 44px rgba(171,9,10,.29)} .ljp-contact__button-icon{display:grid;width:43px;height:43px;flex:none;place-items:center;border-radius:11px;color:#df0708;background:#fff;font-size:15px} .ljp-contact__button>span:nth-child(2){flex:1;font-size:14px;font-weight:700;line-height:1.25} .ljp-contact__button small{display:block;margin-bottom:3px;color:rgba(255,255,255,.65);font-family:Outfit,sans-serif!important;font-size:9px;font-weight:700;letter-spacing:.12em} .ljp-contact__button>i{font-size:14px;transition:transform .25s ease} .ljp-contact__button:hover>i{transform:translateX(4px)} .ljp-contact__note{position:relative;z-index:2;margin:15px 0 0;color:#817275;font-size:12px} .ljp-contact__note i{margin-right:7px;color:#df0708} .ljp-contact__socials{position:relative;z-index:2;margin-top:30px;padding-top:23px;border-top:1px solid rgba(34,29,30,.1)} .ljp-contact__social-title{display:block;margin-bottom:12px;color:#817275;font-size:12px;font-weight:700;letter-spacing:.04em} .ljp-contact__social-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .ljp-contact__social{display:flex;align-items:center;gap:11px;min-width:0;padding:12px 13px;border:1px solid rgba(34,29,30,.09);border-radius:15px;color:#221d1e;background:#fff;box-shadow:0 9px 25px rgba(34,29,30,.07);text-decoration:none;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease} .ljp-contact__social:hover{transform:translateY(-3px);color:#221d1e;border-color:rgba(223,7,8,.24);box-shadow:0 15px 30px rgba(34,29,30,.12)} .ljp-contact__social-icon{display:grid;width:43px;height:43px;flex:none;place-items:center;border-radius:12px;color:#fff} .ljp-contact__social-icon svg{width:22px;height:22px;fill:currentColor} .ljp-contact__social--facebook .ljp-contact__social-icon{background:#1877f2} .ljp-contact__social--tiktok .ljp-contact__social-icon{background:#111} .ljp-contact__social>span:nth-child(2){display:flex;min-width:0;flex:1;flex-direction:column} .ljp-contact__social small{color:#a19092;font-family:Outfit,sans-serif!important;font-size:8px;font-weight:800;letter-spacing:.12em} .ljp-contact__social strong{color:#221d1e;font-family:Outfit,sans-serif!important;font-size:15px;line-height:1.25} .ljp-contact__social>i{color:#b4a6a8;font-size:10px;transform:rotate(45deg);transition:color .25s ease,transform .25s ease} .ljp-contact__social:hover>i{color:#df0708;transform:translate(2px,-2px) rotate(45deg)} @media(max-width:680px){.ljp-contact__socials{margin-top:24px;padding-top:19px}.ljp-contact__social-grid{grid-template-columns:1fr}.ljp-contact__social{padding:11px 12px}.ljp-contact__social-icon{width:40px;height:40px}} /* ============================================================== # Reset Browsers =================================================================== */ * { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } body, html { height: 100%; } html { margin: 0; padding: 0; width: 100%; height: 100%; scroll-behavior: smooth; } html, body, div, span, img, a, p, h1, h2, h3, h4, h5, h6, option, legend, label, th, td, tr, article, aside, caption, figure, footer, header, hgroup, mark, nav, section, time, audio, video { margin: 0; padding: 0; border: 0; outline: 0; } .wrapper { height: 100%; } img { border: none; outline: none; max-width: 100%; } label { display: inline-block; font-weight: normal; margin-bottom: 5px; max-width: 100%; } a { outline: none; text-decoration: none; color: var(--color-heading); } a img { border: none; } a:active { outline: none; text-decoration: none; color: var(--color-heading); opacity: 1; } a:focus { outline: none; text-decoration: none; color: var(--color-heading); } a:hover { outline: none; text-decoration: none; color: var(--color-primary); opacity: 1; } .color-secondary a:hover { color: var(--color-style-two); } .theme-skyblue a:hover { color: var(--color-style-three); } .theme-style-three a:hover { color: var(--color-style-five); } button { outline: medium none; } iframe { border: none; } hr { margin-top: 0; margin-bottom: 0; border: 0; border-top: 1px solid #eeeeee; } pre { display: block; margin: 0 0 30px; padding: 9.5px; word-wrap: break-word; word-break: break-all; color: #333333; border: 1px solid #ededed; border-radius: inherit; background-color: #f9f9f9; font-size: 13px; line-height: 1.42857143; } input { border: 1px solid #e7e7e7; border-radius: inherit; -webkit-box-shadow: inherit; box-shadow: inherit; min-height: 50px; } input:focus { outline: none; -webkit-box-shadow: inherit; box-shadow: inherit; } textarea:focus { outline: none; -webkit-box-shadow: inherit; box-shadow: inherit; } select:focus { outline: none; -webkit-box-shadow: inherit; box-shadow: inherit; } b { font-weight: 600; } strong { font-weight: 600; } .row { --bs-gutter-x: 30px; } i::before { line-height: inherit !important; } /* ============================================================== # Template Default Styles =================================================================== */ body { font-family: var(--font-default); font-size: 17px; font-weight: 400; line-height: 1.8; overflow-x: hidden; background-color: var(--white); color: var(--color-paragraph); } h1, h2, h3, h4, h5, h6 { color: var(--color-heading); font-weight: normal; line-height: 1.2; font-family: var(--font-heading); letter-spacing: 0; margin: 0; margin-bottom: 15px; font-weight: 600; } h1 { font-size: 40px; margin-bottom: 25px; } h2 { font-size: 36px; margin-bottom: 25px; } h3 { font-size: 28px; } h4 { font-size: 22px; } h5 { font-size: 18px; } h6 { font-size: 16px; } a, .btn, button { -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; outline: medium none; text-decoration: none; font-weight: 600; line-height: 26px; } p { color: var(--color-paragraph); margin: 0 0 25px; text-transform: none; font-weight: 400; font-family: var(--font-default); } /* ============================================================== # Helper CSS =================================================================== */ .container-full { padding: 0 15px; margin: auto; max-width: 1400px; } @media (min-width: 576px) { .container-full { max-width: 540px; width: 100%; } } @media (min-width: 768px) { .container-full { max-width: 720px; width: 100%; } } @media (min-width: 992px) { .container-full { max-width: 960px; width: 100%; } } @media (min-width: 1200px) { .container-full { max-width: 90%; width: 100%; } } .container-fill { padding: 0 15px; margin: auto; max-width: 100%; } @media (min-width: 576px) { .container-fill { max-width: 540px; width: 100%; } } @media (min-width: 768px) { .container-fill { max-width: 720px; width: 100%; } } @media (min-width: 992px) { .container-fill { max-width: 960px; width: 100%; } } @media (min-width: 1200px) { .container-fill { width: 100%; max-width: 100%; } } @media (max-width: 1199px) { .container-fill { padding: 0 25px; width: 100%; } } @media only screen and (min-width: 1400px) { .container-stage { margin-left: calc((100% - 1320px)/ 2); width: auto; min-width: auto; max-width: inherit; padding-right: 0; } } @media only screen and (max-width: 767px) { .row { --bs-gutter-x: 1.5rem; } } .bg-cover { background-position: center center !important; background-size: cover !important; } .bg-contain { background-size: contain !important; background-repeat: no-repeat !important; background-position: left top !important; } .bg-fixed { background-attachment: fixed !important; background-position: center center !important; background-size: cover !important; } .bg-fit { background-size: 100% 100% !important; background-position: center !important; } .bg-gray { background: var(--bg-gray); } .bg-gray-secondary { background: var(--bg-gray-secondary); } .bg-gray-gradient { background: var(--bg-gray-gradient); } .bg-light { background-color: var(--white); } .bg-dark { background-color: var(--dark) !important; } .dark-secondary { background: var(--dark-secondary); } .dark-optional { background: var(--dark-optional); } .bg-theme { background-color: var(--color-primary); } .color-secondary .bg-theme { background-color: var(--color-style-two); } .color-style-two { background-color: var(--color-style-two); } .color-style-six { background-color: var(--color-style-six); } .bg-theme-secodnary { background-color: var(--color-secondary); } .theme-style-three .bg-theme { background: var(--color-style-five); } .bg-skyblue { background-color: var(--color-style-three); } .bg-gradient { background-color: var(--color-primary); background: var(--bg-gradient) !important; } .bg-gradient-secondary { background-color: var(--color-secondary); background: var(--bg-gradient-secondary) !important; } .gradient-bg { background-color: var(--color-primary); background: var(--gradient-bg) !important; } .text-light { color: var(--white); } .text-light h1, .text-light h2, .text-light h3, .text-light h4, .text-light h5, .text-light h6, .text-light p, .text-light span, .text-light a { color: var(--white); } .bg-dark p { color: #d2e3f9; } .shadow { -webkit-box-shadow: inherit !important; box-shadow: inherit !important; } .shadow.dark { position: relative; z-index: 1; } .shadow.dark:after { background: var(--dark); content: ""; height: 100%; left: 0; opacity: 0.5; position: absolute; top: 0; width: 100%; z-index: -1; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .shadow.dark-hard { position: relative; z-index: 1; } .shadow.dark-hard:after { background: var(--black); content: ""; height: 100%; left: 0; opacity: 0.45; position: absolute; top: 0; width: 100%; z-index: -1; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .shadow.theme { position: relative; z-index: 1; } .shadow.theme:after { background: var(--color-primary) none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.7; position: absolute; top: 0; width: 100%; z-index: -1; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .shadow.light { position: relative; z-index: 1; } .shadow.light:after { background: var(--white) none repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.6; position: absolute; top: 0; width: 100%; z-index: -1; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .default-padding, .default-padding-top, .default-padding-bottom, .default-padding-mx { position: relative; } .default-padding { padding-top: 120px; padding-bottom: 120px; } @media only screen and (max-width: 767px) { .default-padding { padding-top: 70px; padding-bottom: 70px; } } .default-padding-big { padding: 250px 0; } @media only screen and (max-width: 767px) { .default-padding-big { padding: 70px 0; } } .default-padding-top { padding-top: 120px; } @media only screen and (max-width: 767px) { .default-padding-top { padding-top: 70px; } } .default-padding-bottom { padding-bottom: 120px; } @media only screen and (max-width: 767px) { .default-padding-bottom { padding-bottom: 70px; } } .default-padding.bottom-less { padding-top: 120px; padding-bottom: 90px; } @media only screen and (max-width: 767px) { .default-padding.bottom-less { padding-top: 70px; padding-bottom: 40px; } } .default-padding-bottom.bottom-less { margin-bottom: -30px; } @media only screen and (max-width: 767px) { .default-padding-bottom.bottom-less { margin-bottom: 0; } } .default-padding-top.bottom-less { margin-bottom: -30px; } @media only screen and (max-width: 767px) { .default-padding-top.bottom-less { margin-bottom: -30px; } } @media only screen and (min-width: 1200px) { .align-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .relative { position: relative; } .overflow-hidden { overflow: hidden; } .heading { font-weight: 600; margin-bottom: 35px; margin-top: -5px; font-size: 42px; line-height: 1.3; } .heading span { font-weight: 400; } .site-heading { margin-bottom: 60px; } .title { font-weight: 600; font-size: 50px; } @media (max-width: 767px) { .title { font-size: 36px; margin-top: 0; } } .site-heading .title { margin-bottom: 0; } .sub-title { text-transform: uppercase; color: var(--color-primary); font-weight: 500; display: inline-block; position: relative; z-index: 1; font-size: 20px; border-radius: 4px; border: 1px solid #b9e5de; padding: 7px 19px; } .color-secondary .sub-title { color: var(--color-style-two); border-color: #bdc5ff; } .theme-style-three .sub-title { color: var(--color-style-five); border-color: #e4cfd3; } .theme-style-three .bg-theme .sub-title { color: var(--white); border-color: #b7596c; } .text-light .sub-title::after { filter: brightness(0) invert(1); } .theme-skyblue .sub-title { color: var(--color-style-three); border-color: #bae8fd; } .color-style-two .bg-gray .sub-title { background: #ffdedb; color: var(--color-heading); } .bg-gray-secondary .sub-title { background: rgba(255, 255, 255, 0.5); } .bg-dark .sub-title, .dark-optional .sub-title { border-color: rgba(255, 255, 255, 0.3); } .site-heading p { margin-bottom: 0; margin-top: 25px; } .text-center .site-heading p, .text-center.site-heading p { padding: 0 10%; } @media (max-width: 767px) { .site-heading p { padding: 0; } } @media only screen and (max-width: 767px) { .site-heading { margin-bottom: 45px; } } .heading-left { position: relative; z-index: 1; margin-bottom: 60px; } .heading-left .heading { font-weight: 600; margin-bottom: 0; } .heading-left .right-content { border-left: 1px solid #e7e7e7; padding-left: 50px; } .heading-left .title { margin: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .heading-left .heading { margin-bottom: 30px; } } @media only screen and (max-width: 767px) { .heading-left .heading { margin-bottom: 15px; } } .heading-left p { margin-bottom: 0; } .heading-left .btn { margin-top: 30px; } @media only screen and (max-width: 767px) { .heading-left { margin-bottom: 40px; } } .bg-dark .heading-left p { opacity: 0.8; } .sub-heading { color: var(--color-primary); background: #eff5ff; padding: 5px 12px; border: 1px solid; display: inline-block; border-radius: 5px; text-transform: uppercase; font-size: 20px; } .theme-style-three .sub-heading { color: var(--color-style-five); } .color-secondary .sub-heading { color: var(--color-style-two); background: #e2f5ec; } .theme-skyblue .sub-heading { color: var(--color-style-three); background: #e9fcff; } .theme-skyblue .dark-optional .sub-heading { background: transparent; border-color: #3b585c; } /* ============================================================== # Video Play Button =================================================================== */ .video-play-button { display: inline-block; position: relative; height: 120px; width: 120px; line-height: 120px; background: var(--color-primary); border-radius: 50%; font-size: 30px; font-weight: 100; color: var(--white); text-align: center; } .color-style-two .video-play-button { background: var(--color-style-two); } .color-style-three .video-play-button { background: var(--color-style-three); } .color-style-four .video-play-button { background: var(--color-style-four); } .video-play-button i { font-weight: 100; color: var(--white); } .video-play-button::after { position: absolute; left: 50%; top: 50%; content: ""; height: 105%; width: 105%; border: 1px solid rgba(255, 255, 255, 0.8); animation: pulse-border 3s linear infinite; border-radius: 50%; } @-webkit-keyframes pulse-border { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } @keyframes pulse-border { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } /* ============================================================== # Template Animation =================================================================== */ /* Video Paly */ @-webkit-keyframes video-play { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } @keyframes video-play { 0% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1); opacity: 1; } 100% { -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5); opacity: 0; } } /*Zoom Animation */ .zoom-animation { -webkit-animation: zoom 2000ms ease-out infinite; animation: zoom 2000ms ease-out infinite; } /* Slider Zoom Effect */ @-webkit-keyframes zoom { from { -webkit-transform: scale(1, 1); } to { -webkit-transform: scale(1.2, 1.2); } } @keyframes zoom { from { -webkit-transform: scale(1, 1); transform: scale(1, 1); } to { -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); } } /* Spiner Animation */ .spiner-animation { -webkit-animation: spinner 20s infinite linear; animation: spinner 20s infinite linear; } /*Preloader Spiner Animation */ @-webkit-keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } /* Spiner Animation */ .spiner-reverse-animation { -webkit-animation: spinnerReverse 20s infinite linear; animation: spinnerReverse 20s infinite linear; } /*Preloader Spiner Animation */ @-webkit-keyframes spinnerReverse { to { -webkit-transform: rotateZ(-360deg); transform: rotateZ(-360deg); } } @keyframes spinnerReverse { to { -webkit-transform: rotateZ(-360deg); transform: rotateZ(-360deg); } } /* Infinite Up Down Animation */ @keyframes UpDown { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(-25px); transform: translateY(-25px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } /* Animation UpDown */ .updown-animation { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92); animation-timing-function: cubic-bezier(0.54, 0.085, 0.5, 0.92); -webkit-animation-name: UpDown; animation-name: UpDown; -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes UpDown { 0% { -webkit-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(-25px); transform: translateY(-25px); } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); } } /* Animation Left Right */ .leftRight-animation { -webkit-animation: fadeLeftRight 10s ease-out infinite; animation: fadeLeftRight 10s ease-out infinite; } /* Fade Left Right */ @keyframes fadeLeftRight { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(50px); transform: translateX(50px); } } @-webkit-keyframes fadeLeftRight { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(50px); transform: translateX(50px); } } /* Animation Right Left */ .rightLeft-animation { -webkit-animation: fadeRightLeft 10s ease-out infinite; animation: fadeRightLeft 10s ease-out infinite; } @keyframes fadeRightLeft { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(-50px); transform: translateX(-50px); } } @-webkit-keyframes fadeRightLeft { 0%, 100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(-50px); transform: translateX(-50px); } } /* Animation Zoom Up Down */ .zoomUpDown-animation { -webkit-animation: zoomUpDown 10s ease-out infinite; animation: zoomUpDown 10s ease-out infinite; } /* Zoom Up Down */ @keyframes zoomUpDown { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.8); transform: scale(0.8); } } @-webkit-keyframes zoomUpDown { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.8); transform: scale(0.8); } } /* Animation Moving */ .moving-animation { -webkit-animation: moving 10s ease-out infinite; animation: moving 10s ease-out infinite; } /* Mooving Animation */ @-webkit-keyframes moving { 0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 20% { -webkit-transform: translate(0px, -30px); transform: translate(0px, -30px); } 50% { -webkit-transform: translate(-100px, -30px); transform: translate(-100px, -30px); } 70% { -webkit-transform: translate(-100px, 0px); transform: translate(-100px, 0px); } 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } @keyframes moving { 0% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } 20% { -webkit-transform: translate(0px, -30px); transform: translate(0px, -30px); } 50% { -webkit-transform: translate(-100px, -30px); transform: translate(-100px, -30px); } 70% { -webkit-transform: translate(-100px, 0px); transform: translate(-100px, 0px); } 100% { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); } } /* Animation Rotation */ @keyframes infinite-rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes infinite-rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* Button Border Animation */ @-webkit-keyframes open { 0% { width: 0; height: 0; } 50% { width: 100px; height: 0; } 100% { width: 100px; height: 55px; } } @keyframes open { 0% { width: 0; height: 0; } 50% { width: 100px; height: 0; } 100% { width: 100px; height: 55px; } } @-webkit-keyframes openB { 0% { width: 0px; } 100% { width: 100px; } } @keyframes openB { 0% { width: 0px; } 100% { width: 100px; } } /* Animation Shine (A shine color will move inside the text) */ @-webkit-keyframes shine { 0% { margin-right: 0; } 100% { margin-right: -100px; } } @keyframes shine { 0% { margin-right: 0; } 100% { margin-right: -100px; } } @-webkit-keyframes infiniteMove { 0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } } @keyframes infiniteMove { 0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } } @-webkit-keyframes infiniteMove2 { 0% { border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%; } 50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; } 100% { border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%; } } @keyframes infiniteMove2 { 0% { border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%; } 50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; } 100% { border-radius: 60% 30% 70% 40% / 60% 40% 30% 70%; } } /* ============================================================== # Button Styles =================================================================== */ .btn { display: inline-block; font-weight: 500; text-transform: capitalize; transition: all 0.35s ease-in-out; overflow: hidden; border-radius: 7px; border: 2px solid transparent; -webkit-box-shadow: inherit; box-shadow: inherit; font-size: 16px; letter-spacing: 0; padding: 13px 30px; background: #E7EDF8; position: relative; z-index: 1; } .btn:focus, .btn.active { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; -webkit-box-shadow: inherit; box-shadow: inherit; border: 2px solid transparent; } .btn:hover { background-color: var(--color-primary); color: var(--white); } .btn.radius { border-radius: 6px; } .btn.btn-border { border: 2px solid var(--color-heading); background: transparent; } .btn.btn-border.btn-md { padding: 14px 52px; } .btn.btn-border:hover { background: var(--color-primary); border-color: var(--color-primary); } .btn.btn-border.animation::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 0; z-index: -1; background: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .btn.btn-border.animation:hover { border-color: var(--dark); color: var(--white); } .btn.btn-border.animation:hover::after { width: 100%; } .btn.btn-border-dark { border: 2px solid var(--dark); background: transparent; } .btn.btn-border-dark:hover { background: var(--dark); border-color: var(--dark); } .btn.btn-border-dark.animation::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 0; z-index: -1; background: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .btn.btn-border-dark.animation:hover { border-color: var(--dark); color: var(--white); } .btn.btn-border-dark.animation:hover::after { width: 100%; } .btn.btn-border-theme { border: 2px solid var(--color-primary); background: transparent; } .btn.btn-border-theme:hover { background: var(--color-primary); border-color: var(--color-primary); } .btn.btn-border-theme.animation::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 0; z-index: -1; background: var(--color-primary); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .btn.btn-border-theme.animation:hover { border-color: var(--color-primary); color: var(--white); } .btn.btn-border-theme.animation:hover::after { width: 100%; } .btn.btn-border-light { border: 2px solid var(--white); background: transparent; color: var(--white); } .btn.btn-border-light:hover { background: var(--white); border-color: var(--white); color: var(--dark); } .btn.btn-border-light.animation::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 0; z-index: -1; background: var(--white); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .btn.btn-border-light.animation:hover { border-color: var(--white); color: var(--dark); } .btn.btn-border-light.animation:hover::after { width: 100%; } .btn.btn-gradient { border: none; color: var(--white); } .theme-style-three .btn.btn-gradient:hover, .color-secondary .btn.btn-gradient:hover, .theme-skyblue .btn.btn-gradient:hover { color: var(--white); } .btn.btn-gradient::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 100%; z-index: -1; background-image: linear-gradient(to right, var(--color-primary), var(--color-secondary), var(--color-primary) ); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; background-size: 220%; } .color-secondary .btn.btn-gradient::after { background-image: linear-gradient(to right, var(--color-style-two), var(--color-style-three), var(--color-style-two) ); } .theme-skyblue .btn.btn-gradient::after { background-image: linear-gradient(to right, var(--color-style-three), var(--color-style-two), var(--color-style-three) ); } .theme-style-three .btn.btn-gradient::after { background-image: linear-gradient(to right, var(--color-style-five), #ca0000, var(--color-style-five)); transition: all 0.25s ease-in-out; background-size: 220%; } .btn.btn-gradient:hover::after { background-position: -70% 0; } .btn.btn-gradient.active { background-position: -70% 0; } .btn.btn-theme { color: var(--white); border: none; background: var(--color-primary); } .color-style-two .btn.btn-theme { color: var(--white); border: none; background: var(--color-style-two); } .color-secondary .btn.btn-theme { background: var(--color-style-two); } .color-secondary .btn.btn-theme:hover { color: var(--white); } .btn.btn-theme::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); } .text-light .btn.btn-theme::after { background-color: var(--white); } .text-light .btn.btn-theme:hover { color: var(--color-heading); } .btn.btn-theme:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); } .btn.btn-theme.secondary { color: var(--color-heading); border: none; background: var(--color-secondary); } .btn.btn-theme.secondary::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); } .text-light .btn.btn-theme.secondary::after { background-color: var(--white); } .text-light .btn.btn-theme.secondary:hover { color: var(--color-heading); } .btn.btn-theme.secondary:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); } .btn.btn-theme.hover-light::after { background-color: var(--white); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .btn.btn-theme.hover-light:hover { color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .btn.btn-theme.hover-light:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); } .btn.btn-light { color: var(--color-heading); border: none; background: var(--white); } .btn.btn-light.btn-md { padding: 13px 52px; } .btn.btn-light:hover { color: var(--white); background: var(--dark); } .btn.btn-dark { color: var(--white); background: var(--dark); border: none; } .btn.btn-dark::after { position: absolute; top: 0; right: inherit; bottom: inherit; left: 0; content: ""; height: 100%; width: 0; z-index: -1; background-color: var(--color-primary); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .shadow .btn.btn-dark::after { background-color: var(--white); } .shadow .btn.btn-dark:hover { color: var(--color-heading) !important; } .btn.btn-dark:hover::after { width: 100%; } .btn.btn-dark.secondary { color: var(--white); border: none; background: var(--dark-optional); } .btn.btn-dark.secondary::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--white); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); } .btn.btn-dark.secondary:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); } .btn.btn-dark.secondary:hover { color: var(--color-heading); } .btn i { position: relative; margin-left: 5px; font-weight: 100; font-size: 20px; transform: rotate(-45deg); top: 2px; } .btn.text-slide { min-width: 150px; height: 55px; line-height: 55px; } .btn.text-slide span { position: absolute; height: 100%; width: 100%; top: 0; left: 0; text-align: center; } .btn.animate-border { overflow: inherit; z-index: inherit; width: 200px; height: 55px; line-height: 55px; padding: 0; } .btn.animate-border:hover { background: transparent; color: var(--dark); } .btn.animate-border:hover .hover-border::after, .btn.animate-border:hover .hover-border::before { opacity: 1; -webkit-animation: open 0.4s; /* Chrome, Safari, Opera */ animation: open 0.4s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); -webkit-animation-direction: normal; animation-direction: normal; } .btn.animate-border:hover .hover-border-bottom::after, .btn.animate-border:hover .hover-border-bottom::before { opacity: 1; -webkit-animation: openB 0.4s; /* Chrome, Safari, Opera */ animation: openB 0.4s; -webkit-animation-delay: 0.4s; animation-delay: 0.4s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1); -webkit-animation-direction: normal; animation-direction: normal; } .btn.animate-border .hover-border { position: absolute; left: 0; top: -1px; height: 100%; width: 100%; } .btn.animate-border .hover-border::before { position: absolute; content: ""; height: 0; width: 0; display: block; opacity: 0; border-top: solid 2px var(--color-primary); border-left: solid 2px var(--color-primary); right: 98px; top: -1px; } .btn.animate-border .hover-border::after { position: absolute; content: ""; height: 0; width: 0; display: block; opacity: 0; border-top: solid 2px var(--color-primary); border-right: solid 2px var(--color-primary); left: 98px; top: -1px; } .btn.animate-border .hover-border-bottom { position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 1; } .btn.animate-border .hover-border-bottom::before { position: absolute; content: ""; width: 0; display: block; opacity: 0; height: 55px; border-bottom: solid 2px var(--color-primary); right: -1px; bottom: -2px; } .btn.animate-border .hover-border-bottom::after { position: absolute; content: ""; width: 0; display: block; opacity: 0; height: 100%; border-bottom: solid 2px var(--color-primary); left: 0; bottom: -2px; } .btn.animated-arrow { border: none; background: transparent; min-width: 14rem; height: auto; padding: 0; } .btn.animated-arrow .circle { -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: relative; display: block; margin: 0; width: 3.5rem; height: 3.5rem; background: var(--color-primary); border-radius: 2rem; } .btn.animated-arrow .circle .icon { -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); left: 15px; width: 1.125rem; height: 0.125rem; background: none; position: absolute; top: 0; bottom: 0; margin: auto; } .btn.animated-arrow .circle .icon::before { position: absolute; content: ""; top: -0.25rem; right: 0.0625rem; width: 0.625rem; height: 0.625rem; border-top: 0.125rem solid var(--white); border-right: 0.125rem solid var(--white); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .btn.animated-arrow .button-text { -webkit-transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 15px 0; margin: 0 0 0 70px; color: var(--dark); line-height: 2; text-align: left; width: 100%; font-size: 14px; } .btn.animated-arrow:hover { color: var(--white); } .btn.animated-arrow:hover .circle { width: 100%; } .btn.animated-arrow:hover .circle .icon.arrow { background: var(--white); -webkit-transform: translate(1.5rem, 0); transform: translate(1.5rem, 0); } .btn.animated-arrow:hover .button-text { color: var(--white); } .btn.circle { border-radius: 30px !important; } .btn-simple { line-height: 1; text-transform: uppercase; display: inline-block; color: var(--color-paragraph); } .btn-simple i { transform: rotate(-45deg); display: inline-block; margin-left: 2px; } .btn-simple:hover { color: var(--color-primary); } .video-btn i { display: inline-block; height: 55px; width: 55px; text-align: center; line-height: 55px; background: var(--color-primary); border-radius: 50%; position: relative; margin-right: 20px; color: var(--white); } .text-light .video-btn i { background: var(--white); color: var(--color-primary); } .video-btn i::after { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); display: block; width: 60px; height: 60px; background: var(--color-primary) repeat scroll 0 0; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-animation: pulse-border 1500ms ease-out infinite; animation: pulse-border 1500ms ease-out infinite; z-index: -1; } .text-light .video-btn i::after { background: var(--white) repeat scroll 0 0; } .text-shine { background: linear-gradient(to right, var(--dark) 0, var(--white) 10%, var(--color-primary) 20%); background-position: 0; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: shine 3s infinite linear; animation: shine 3s infinite linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-text-size-adjust: none; font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; padding: 12px 48px; } .animate-inout { background: -webkit-gradient(linear, left top, right top, from(#8A6552), to(#472d20)); background: linear-gradient(90deg, #8A6552 0%, #472d20 100%); color: var(--white); font-size: 12px; text-transform: capitalize; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; overflow: hidden; border: solid 2px var(--color-primary); cursor: pointer; } .btn-icon { position: relative; padding-left: 20px; } .btn-icon:hover { color: var(--color-primary); } .btn-icon::after { position: absolute; right: 10px; top: 50%; content: ""; height: 2px; left: 0; background: var(--color-heading); transform: translateY(-50%); margin-top: -1px; transition: all 0.35s ease-in-out; } .btn-icon:hover::after { background: var(--color-primary); } .btn-icon i { font-weight: 500; } .btn-icon:hover { padding-left: 40px; } .animate-inout span { z-index: 1; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; line-height: 20px; } .animate-inout::before, .animate-inout::after { width: 0%; height: 0%; position: absolute; content: ""; border-radius: 100%; } .animate-inout:after { -webkit-transition: all 0.5s ease; transition: all 0.5s ease; background-color: var(--white); } .animate-inout:before { -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; background: var(--color-primary); } .animate-inout.animate-inout-borde { background: transparent; color: var(--dark); } .animate-inout.animate-inout-borde::after { background: -webkit-gradient(linear, left top, right top, from(#8A6552), to(#472d20)); background: linear-gradient(90deg, #8A6552 0%, #472d20 100%); } .animate-inout.animate-inout-borde:hover { color: var(--white); } .animate-inout.animate-inout-borde:hover::before { -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .animate-inout.animate-inout-borde:hover::after { -webkit-transition: all 0.7s ease-in; transition: all 0.7s ease-in; } .animate-inout:hover { color: var(--dark); } .animate-inout:hover::before, .animate-inout:hover::after { width: 200px; height: 200px; border-radius: 4px; } .animate-inout:hover::before { -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .animate-inout:hover::after { -webkit-transition: all 0.7s ease-in; transition: all 0.7s ease-in; } .btn-md { padding: 16px 52px; font-size: 17px; } .btn-sm { padding: 13px 45px; font-size: 16px; } .btn-sm.btn-border-theme { padding: 12px 45px; } .gutter-xl { --bs-gutter-x: 150px; } .text-gradient { background: var(--bg-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } /* Button Style Two */ .btn-style-two { display: inline-flex !important; align-items: center; gap: 0; color: var(--white) !important; border: none; background: transparent; box-shadow: none; } .btn-style-two.solid { gap: 2px; } .btn-style-two.theme:hover, .btn-style-two.dark:hover { color: var(--white); } .btn-style-two .icon:first-child { position: absolute; transform: translateX(50px) scale(0.7); } .btn-style-two:hover .icon:first-child { transform: translateX(0px); } .btn-style-two.solid:hover .icon:first-child { transform: translateX(-2px); } .btn-style-two:hover span { transform: translateX(50px) scale(1); } .btn-style-two:hover .icon:last-child { transform: translateX(-50px) scale(0); } .navbar .attr-right .attr-nav li .btn-style-two { color: var(--white); } .navbar .attr-right .attr-nav li .btn-style-two.border-dark, .navbar .attr-right .attr-nav li .btn-style-two.border-theme, .navbar .attr-right .attr-nav li .btn-style-two.white { color: var(--color-heading); } .btn-style-two span { background: var(--color-primary); height: 50px; display: inline-block; line-height: 50px; padding: 0 30px; border-radius: 40px; overflow: hidden; transition: all 0.35s ease-in-out; z-index: 9; } .theme-skyblue .btn-style-two span { background: var(--color-style-three); } .btn-style-two.solid span { border-radius: 0; } .color-secondary .btn-style-two span { background: var(--color-style-two); } .btn-style-two.dark span { background: var(--dark); } .btn-style-two.border-dark span { background: transparent; border: 2px solid var(--dark); line-height: 48px; } .btn-style-two.border-white span { background: transparent; border: 2px solid var(--white); line-height: 48px; } .bg-dark .btn-style-two.border-white span { background: var(--dark); } .bg-theme .btn-style-two.border-white span { background: var(--color-primary); } .btn-style-two.border-theme span { background: transparent; border: 2px solid var(--color-primary); line-height: 48px; } .color-secondary .btn-style-two.border-theme span { border: 2px solid var(--color-secondary); } .btn-style-two.white span { background: var(--white); color: var(--color-heading); } .btn-style-two .icon { height: 50px; width: 50px; min-width: 50px; text-align: center; background: var(--color-primary); padding: 15px; border-radius: 50%; overflow: hidden; transition: all 0.35s ease-in-out; display: flex; flex-direction: column; justify-content: center; } .theme-skyblue .btn-style-two .icon { background: var(--color-style-three); } .btn-style-two.solid .icon { border-radius: 0; background: var(--dark); } .bg-dark .btn-style-two.solid .icon { background: var(--white); } .bg-dark .btn-style-two.solid .icon svg path { stroke: var(--color-heading); } .color-secondary .btn-style-two .icon { background: var(--color-style-two); } .color-secondary .btn-style-two.solid .icon { background: var(--dark); } .btn-style-two.dark .icon { background: var(--dark); } .btn-style-two.border-dark .icon { background: transparent; border: 2px solid var(--dark); } .btn-style-two.border-white .icon { background: transparent; border: 2px solid var(--white); } .btn-style-two.border-theme .icon { background: transparent; border: 2px solid var(--color-primary); } .color-secondary .btn-style-two.border-theme .icon { border: 2px solid var(--color-secondary); } .btn-style-two.white .icon { background: var(--dark); } .text-light .btn-style-two.white .icon { background: var(--white); } .btn-style-two.white { color: var(--color-heading); } button { padding: 13px 40px; display: inline-block; font-weight: 500; text-transform: capitalize; transition: all 0.35s ease-in-out; overflow: hidden; border-radius: 7px; border: none; box-shadow: inherit; font-size: 16px; letter-spacing: 0; padding: 13px 30px; background: #E7EDF8; position: relative; z-index: 1; background: var(--color-primary); color: var(--white); } .color-secondary button { background: var(--color-style-two); } .theme-skyblue button { background: var(--color-style-three); } .theme-style-three button { background: var(--color-style-five); } .contact-form button i { margin-left: 5px; } .contact-form button::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); } .contact-form button:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); } /* ============================================================== # Nice Select Styles =================================================================== */ .nice-select { -webkit-tap-highlight-color: transparent; background-color: var(--white); border: solid 1px #e8e8e8; -webkit-box-sizing: border-box; box-sizing: border-box; clear: both; cursor: pointer; display: block; float: left; font-family: inherit; font-size: 16px; font-weight: normal; height: 50px; line-height: 50px; outline: none; padding-left: 18px; padding-right: 30px; position: relative; text-align: left !important; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; width: 100%; margin-bottom: 15px; } .nice-select:hover { border-color: #dbdbdb; } .nice-select:active, .nice-select.open, .nice-select:focus { border-color: #999999; } .nice-select::after { border-bottom: 2px solid #999999; border-right: 2px solid #999999; content: ''; display: block; height: 5px; margin-top: -6px; pointer-events: none; position: absolute; right: 12px; top: 50%; -webkit-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; width: 5px; } .nice-select.open .list { opacity: 1; pointer-events: auto; -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); overflow-y: auto !important; height: auto; } .nice-select.open ::after { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .nice-select.disabled { border-color: #ededed; color: #999999; pointer-events: none; } .nice-select.disabled::after { border-color: #96aac1; } .nice-select.wide { width: 100%; } .nice-select.wide .list { left: 0 !important; right: 0 !important; } .nice-select.right { float: right; } .nice-select.right .list { left: auto; right: 0; } .nice-select.small { font-size: 12px; height: 36px; line-height: 34px; } .nice-select.small::after { height: 4px; width: 4px; } .nice-select.small .option { line-height: 34px; min-height: 34px; } .nice-select .list { background-color: var(--white); border-radius: 5px; -webkit-box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11); box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11); -webkit-box-sizing: border-box; box-sizing: border-box; margin-top: 4px; opacity: 0; overflow: hidden; padding: 0; pointer-events: none; position: absolute; top: 100%; left: 0; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(0.75) translateY(-21px); transform: scale(0.75) translateY(-21px); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; z-index: 9; width: 100%; } .nice-select .list:hover .option:not(:hover) { background-color: transparent !important; } .nice-select .option { cursor: pointer; font-weight: 400; line-height: 40px; list-style: none; min-height: 40px; outline: none; padding-left: 18px; padding-right: 29px; text-align: left; -webkit-transition: all 0.2s; transition: all 0.2s; } .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background-color: #f6f6f6; } .nice-select .option.selected { font-weight: 600; } .nice-select .option.disabled { background-color: transparent; color: #999999; cursor: default; } .no-csspointerevents .nice-select .list { display: none; } .no-csspointerevents .nice-select.open .list { display: block; } .split-text { overflow: hidden; position: relative; } .split-text .line { overflow: hidden; display: none; } .text-animation { overflow: hidden; position: relative; } .text-animation .char { overflow: hidden; display: none; } /* ============================================================== # Topbar Styles =================================================================== */ .top-bar-area ul { margin: 0; padding: 0; list-style: none; } .item-flex { align-items: center; display: flex; } .item-flex li { margin-left: 30px; } .item-flex li:first-child { margin: 0; } .item-flex li i { margin-right: 10px; font-weight: 100; font-size: 24px; } .bg-theme .item-flex li i { color: var(--white); } .top-bar-area li { display: flex; align-items: center; font-weight: 400; } .top-bar-area li a { display: flex; align-items: center; } .top-bar-area li a { font-weight: 400; } .top-bar-area .social li { display: inline-block; margin-right: 30px; } .top-bar-area .social li:first-child { margin-right: 0; } .top-bar-area .text-end .social li { margin-right: 0; margin-left: 20px; } .top-bar-area .text-end .social li:first-child { margin-left: 0; } .top-bar-area { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; } @media (min-width: 1024px) { .top-bar-area.transparent { background: transparent; position: absolute; left: 0; right: 0; top: 0; z-index: 9; } } .top-bar-area.top-bar-style-one.bg-dark { border-bottom: 1px solid rgba(255, 255, 255, 0.4); } .top-bar-area li img { height: 18px; margin-right: 10px; } .text-end .item-flex { justify-content: right; } .text-end .item-flex i { font-size: 18px; margin-right: 0; } .text-end .item-flex .dropdown button { background: transparent; padding: 0 !important; font-weight: 500; display: flex; align-items: center; } .text-end .item-flex .dropdown button img { height: 27px; border: 1px solid; border-radius: 50%; margin-right: 5px; filter: none; } .text-end .item-flex .dropdown button::after { display: none; } .text-end .item-flex .dropdown ul.dropdown-menu { padding: 20px 15px; min-width: 200px; top: 5px !important; border: none; box-shadow: 0 5px 50px 0 rgba(0, 0, 0, 0.15); z-index: 9; } .text-end .item-flex .dropdown ul.dropdown-menu a.dropdown-item { color: var(--color-heading); background: transparent; } .text-end .item-flex .dropdown ul.dropdown-menu li { margin: 0; } .text-end .item-flex .dropdown button i { font-size: 26px; margin-left: 7px; top: 1px; transform: none; } .topbar-two-items { display: flex; align-items: center; justify-content: space-between; } .topbar-two-items img { height: 60px; } .topbar-two-items .topbar-info { display: flex; align-items: center; } .topbar-two-items .topbar-info i { display: inline-block; height: 60px; width: 60px; line-height: 60px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; margin-right: 15px; font-size: 25px; } .topbar-two-items .topbar-info h5 { margin-bottom: 3px; font-family: var(--font-default); font-size: 18px; } .topbar-two-items .topbar-info p { margin: 0; } .topbar-two-items .topbar-info a, .topbar-two-items .topbar-info p { color: var(--font-heading); font-weight: 600; } .topbar-two-items .logo a { border-left: 1px solid rgba(255, 255, 255, 0.3); border-right: 1px solid rgba(255, 255, 255, 0.3); display: block; padding: 20px 50px; } .top-bar-style-two { padding-bottom: 30px; } .top-bar-area p { margin: 0; display: flex; align-items: center; justify-content: right; color: var(--color-heading); } .text-light.top-bar-area p { color: var(--white); } .top-bar-area p img { height: 20px; margin-right: 7px; } .top-bar-area .text-end .item-flex p i { font-weight: 100; font-size: 20px; margin-right: 10px; } .top-bar-area .item-flex a { font-weight: 400; display: inline-flex; align-items: center; } .top-bar-area .item-flex a img { height: 18px; margin-right: 10px; } .text-end .item-flex > div { margin-left: 20px; position: relative; padding-left: 20px; } .text-end .item-flex > div::after { position: absolute; left: 0; top: 50%; content: ""; height: 20px; width: 2px; border-left: 1px solid; transform: translateY(-50%); } .bg-dark .text-end .item-flex > div::after, .bg-theme .text-end .item-flex > div::after { border-color: rgba(255, 255, 255, 0.4); } .text-end .item-flex > div:first-child { margin: 0; padding: 0; } .text-end .item-flex > div:first-child::after { display: none; } .top-bar-area.text-light img, .top-bar-area .text-light img { filter: brightness(0) invert(1); } @media (min-width: 1024px) { .top-bar-area.top-bar-style-one.bg-transparent { position: absolute; left: 0; top: 0; z-index: 8; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.3); } .bg-transparent .item-flex li i { color: var(--white); } .bg-transparent .text-end .item-flex .dropdown { border-color: rgba(255, 255, 255, 0.4); } } /* ============================================================== # Banner Styles =================================================================== */ .banner-area { width: 100%; position: relative; } .banner-area .align-center { align-items: center; } @media (max-width: 1023px) { .banner-area { height: auto; } } .banner-area div, .banner-area { height: 100vh; } .banner-area div.swiper-slide .row div { height: auto; } .banner-area .content { position: relative; z-index: 9; -webkit-transition: all 500ms ease; transition: all 500ms ease; } @media (max-width: 1023px) { .banner-area .content { padding: 120px 0; } } @media only screen and (max-width: 767px) { .banner-area .content { padding: 60px 0; } } .banner-area h4 { -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translate3d(-15%, 0, 0); transform: translate3d(-15%, 0, 0); opacity: 0; visibility: hidden; } .banner-area h2 { -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 0; visibility: hidden; } .banner-area p, .banner-area ul { -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateY(50%); transform: translateY(50%); opacity: 0; padding-right: 25%; margin: 0; visibility: hidden; } @media (max-width: 1023px) { .banner-area p { padding-right: 0; } } .banner-area.text-center p { padding-left: 13%; padding-right: 13%; } @media (max-width: 1023px) { .banner-area.text-center p { padding: 0; } } .banner-area .thumb { -webkit-transition: all 500ms ease; transition: all 500ms ease; opacity: 0; visibility: hidden; } .banner-area .button { -webkit-transition: all 500ms ease; transition: all 500ms ease; -webkit-transform: translateY(50%); transform: translateY(50%); opacity: 0; visibility: hidden; margin-top: 30px; } .banner-area .banner-slide h4 { -webkit-transform: translateY(50%); transform: translateY(50%); } .banner-area .banner-slide h2 { -webkit-transform: translateY(50%); transform: translateY(50%); } .banner-area .banner-slide p, .banner-area .banner-slide ul { -webkit-transform: translateY(50%); transform: translateY(50%); } .banner-area .banner-slide .button { -webkit-transform: translateY(50%); transform: translateY(50%); } .banner-area .banner-slide .swiper-slide.swiper-slide-active h4 { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1200ms; transition-delay: 1200ms; } .banner-area .banner-slide .swiper-slide.swiper-slide-active h2 { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1400ms; transition-delay: 1400ms; } .banner-area .banner-slide .swiper-slide.swiper-slide-active p, .banner-area .banner-slide .swiper-slide.swiper-slide-active ul { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1600ms; transition-delay: 1600ms; } .banner-area .banner-slide .swiper-slide.swiper-slide-active .button { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 1800ms; transition-delay: 1800ms; } .banner-area.double-items .thumb { -webkit-transform: translateY(50%); transform: translateY(50%); } .banner-area.double-items .swiper-slide.swiper-slide-active .thumb { -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition-delay: 500ms; transition-delay: 500ms; visibility: visible; opacity: 1; } .banner-area.double-items.bottom-thumb .content { padding: 0; } .banner-area.double-items.bottom-thumb .content .thumb { margin-top: 120px; } @media only screen and (max-width: 767px) { .banner-area.double-items.bottom-thumb .content { padding: 50px 0; } .banner-area.double-items.bottom-thumb .content .thumb { margin-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner-area.double-items.bottom-thumb .content { padding: 120px 0; } .banner-area.double-items.bottom-thumb .content .thumb { margin-top: 50px; } } .banner-area.zoom-effect .banner-thumb { -webkit-transition: 10s ease-out; transition: 10s ease-out; transform: scale(1); position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; } .banner-area.zoom-effect .swiper-slide.swiper-slide-active .banner-thumb { transform: scale(1.05); } .banner-area .swiper-notification { display: none; } .banner-area .swiper-slide.swiper-slide-active h4 { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; visibility: visible; -webkit-transition-delay: 800ms; transition-delay: 800ms; } .banner-area .swiper-slide.swiper-slide-active h2 { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; -webkit-transition-delay: 1600ms; transition-delay: 1600ms; } .banner-area .swiper-slide.swiper-slide-active p, .banner-area .swiper-slide.swiper-slide-active ul { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; -webkit-transition-delay: 2400ms; transition-delay: 2400ms; } .banner-area .swiper-slide.swiper-slide-active .button { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; -webkit-transition-delay: 3200ms; transition-delay: 3200ms; } .banner-area.banner-style-two .swiper-slide.swiper-slide-active .button { -webkit-transition-delay: 2400ms; transition-delay: 2400ms; } .banner-area .banner-items { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box; -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .banner-area:hover .swiper-button-prev, .banner-area:hover .swiper-button-next { opacity: 1; } .banner-area:hover .swiper-button-prev { left: 30px; right: auto; } .banner-area:hover .swiper-button-next { right: 30px; left: auto; } .banner-area .swiper-button-prev, .banner-area .swiper-button-next { height: auto; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; opacity: 0; } .banner-area .swiper-button-prev::after, .banner-area .swiper-button-next::after { font-size: 28px; color: var(--color-heading); } .banner-area.navigation-circle .swiper-button-prev, .banner-area.navigation-circle .swiper-button-next { height: 60px; width: 60px; line-height: 60px; background: rgba(0, 0, 0, 0.2); border-radius: 50%; border: 2px solid var(--white); } .banner-area.navigation-circle .swiper-button-prev::after, .banner-area.navigation-circle .swiper-button-next::after { font-size: 16px; color: var(--white); } .banner-area.navigation-right-bottom .swiper-button-prev, .banner-area.navigation-right-bottom .swiper-button-next { left: auto; right: 30px; opacity: 1; top: auto; -webkit-transform: inherit; transform: inherit; bottom: 50px; border-radius: inherit; } .banner-area.navigation-right-bottom .swiper-button-prev { right: 92px; } .banner-area.navigation-between-bottom .content { padding-bottom: 105px; } @media only screen and (min-width: 829px) and (max-width: 1023px) { .banner-area.navigation-between-bottom .content { padding-bottom: 220px; } } .banner-area.navigation-between-bottom .swiper-button-prev, .banner-area.navigation-between-bottom .swiper-button-next { left: auto; right: 30px; opacity: 1; top: auto; -webkit-transform: inherit; transform: inherit; bottom: 30px; border-radius: inherit; } .banner-area.navigation-between-bottom .swiper-button-prev { left: 30px; right: auto; } @media only screen and (max-width: 830px) { .banner-area .swiper-button-prev, .banner-area .swiper-button-next { display: none; } } .banner-area.navigation-custom .swiper-button-prev::after { font-family: 'ElegantIcons'; content: "\23"; font-size: 22px; } .banner-area.navigation-custom .swiper-button-next::after { font-family: 'ElegantIcons'; content: "\24"; font-size: 22px; } .banner-area.navigation-text .swiper-button-prev, .banner-area.navigation-text .swiper-button-next { opacity: 1; top: auto; -webkit-transform: inherit; transform: inherit; left: auto; right: 0; bottom: 0; display: inline-block; width: 150px; background: rgba(0, 0, 0, 0.2); text-align: center; height: 100px; line-height: 100px; } @media only screen and (max-width: 830px) { .banner-area.navigation-text .swiper-button-prev, .banner-area.navigation-text .swiper-button-next { display: none; } } .banner-area.navigation-text .swiper-button-prev { right: 151px; } .banner-area.navigation-text .swiper-button-prev::after { font-family: var(--font-heading); content: "Prev"; text-transform: uppercase !important; font-size: 16px; font-weight: 600; letter-spacing: 0.6px; } .banner-area.navigation-text .swiper-button-next::after { font-family: var(--font-heading); content: "Next"; text-transform: uppercase !important; font-size: 16px; font-weight: 600; letter-spacing: 0.6px; } .banner-area.navigation-icon-solid .swiper-button-prev::after, .banner-area.navigation-icon-solid .swiper-button-next::after { font-size: 30px; } .banner-area.navigation-custom-large .swiper-button-prev, .banner-area.navigation-custom-large .swiper-button-next { min-width: 65px; height: 30px; margin: 0; } .banner-area.navigation-custom-large .swiper-button-prev::after { font-family: "Font Awesome 5 Pro"; content: "\f104"; font-weight: 100; font-size: 30px; position: absolute; left: 8px; } .banner-area.navigation-custom-large .swiper-button-prev::before { position: absolute; top: 50%; right: inherit; bottom: inherit; left: 12px; content: ""; height: 2px; width: 50px; z-index: -1; background-color: var(--white); margin-top: -1px; } .banner-area.navigation-custom-large .swiper-button-next::after { font-family: "Font Awesome 5 Pro"; content: "\f105"; font-weight: 100; font-size: 30px; position: absolute; right: 8px; } .banner-area.navigation-custom-large .swiper-button-next::before { position: absolute; top: 50%; right: 12px; bottom: inherit; left: inherit; content: ""; height: 2px; width: 50px; z-index: -1; background-color: var(--white); margin-top: -1px; } .banner-area.navigation-right-botom .swiper-button-prev, .banner-area.navigation-right-botom .swiper-button-next { position: absolute; left: auto; right: 30px; top: auto; bottom: 40px; opacity: 1; -webkit-transform: inherit; transform: inherit; } .banner-area.navigation-right-botom .swiper-button-prev { right: 60px; } .banner-area.navigation-right-botom.navigation-custom-large .swiper-button-prev, .banner-area.navigation-right-botom.navigation-custom-large .swiper-button-next { bottom: 30px; } .banner-area.navigation-right-botom.navigation-custom-large .swiper-button-prev { right: 100px; } .banner-area .swiper-pagination { height: auto; bottom: 35px; } .banner-area .swiper-pagination span.swiper-pagination-bullet { height: 4px; width: 50px; background: rgba(255, 255, 255, 0.5); opacity: 1; border-radius: inherit; -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .banner-area .swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active { background: white; height: 7px; } @media only screen and (max-width: 767px) { .banner-area.include-pagination .content { padding-bottom: 100px; } } .banner-area .swiper-pagination-fraction span { -webkit-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; } .banner-area .swiper-pagination-fraction span.swiper-pagination-current { font-size: 30px; font-family: var(--font-heading); font-weight: 600; } /* ============================================================== # Banner Custom Style =================================================================== */ /* Banner Style One */ .banner-style-one-area { padding-top: 160px; padding-bottom: 120px; position: relative; z-index: 1; } .banner-style-one-top h2 { font-size: 76px; margin: 0; line-height: 1.1; } .banner-style-one-top h2:nth-child(2) { text-align: left; } .banner-style-one-top h2:nth-child(3) { text-align: right; } .banner-style-one-top h2 strong { color: var(--color-style-four); } .banner-style-one-top { max-width: 70%; margin: auto auto 90px; } .card-style-one { background: var(--white); padding: 50px; border-radius: 10px; display: grid; grid-template-columns: 1fr 2.2fr; gap: 50px; align-items: center; box-shadow: 0px 15px 60px -10px rgb(109 117 143 / 33%); position: relative; z-index: 1; } .card-style-one > img { position: absolute; left: 100%; bottom: 100%; height: 100px; z-index: -1; } .card-style-one .right { border-left: 1px solid #cee7e3; padding-left: 50px; } .card-style-one .left h6 { font-size: 45px; line-height: 1; margin-bottom: 10px; } .card-style-one .left p { margin: 0; text-transform: uppercase; } .card-style-one .left img { margin-bottom: 20px; height: 60px; } .banner-style-one-thumb { height: 100%; position: relative; z-index: 1; text-align: center; margin-bottom: -120px; margin-right: 30px; } .banner-style-one-thumb > img { position: absolute; bottom: 0; object-fit: contain; object-position: bottom; height: 185%; margin-bottom: -120px; left: 50%; transform: translateX(-50%); } .banner-style-one-thumb::after { position: absolute; left: 50%; top: 50%; content: ""; height: 400px; width: 400px; transform: translate(-50%, -50%); background: var(--color-style-four); z-index: -1; border-radius: 50%; filter: blur(150px); opacity: 0.5; } .banner-style-one-thumb::before { position: absolute; left: 50%; top: 50%; content: ""; height: 400px; width: 400px; transform: translate(-50%, -50%); border: 50px solid var(--white); border-radius: 50%; opacity: 0.4; } .banner-style-one-thumb > img:nth-child(2) { margin: 0; transform: none; z-index: -1; left: 50px; height: 80px; } .card-style-two { background: var(--white); z-index: 1; position: relative; text-align: left; display: inline-block; padding: 30px; border-radius: 10px; } .card-style-two::after { position: absolute; right: -25px; top: -25px; content: ""; height: 35px; width: 35px; background: url(../img/shape/9.png); background-size: contain; background-repeat: no-repeat; background-position: right top; } .theme-style-three .card-style-two::after { background: url(../img/shape/9-dark.png); background-size: contain; background-repeat: no-repeat; background-position: right top; } .card-style-two img { height: 50px; width: 50px; max-width: 50px; border-radius: 50%; border: 2px solid var(--white); margin-left: -20px; } .card-style-two i { display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 46px; background: var(--dark); color: var(--white); border-radius: 50%; font-weight: 100; margin-left: -20px; border: 2px solid; } .card-style-two h6 { font-size: 20px; } .card-style-two .thumb { margin-left: 18px; } .banner-style-one-thumb .card-style-two { position: absolute; right: 30px; bottom: 0; background: rgba(255, 255, 255, .9); box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, .1); } .banner-style-one-shape img { position: absolute; left: 0; bottom: 0; z-index: -1; max-width: 35%; } .banner-style-one-shape img:nth-child(2) { position: absolute; right: 13%; top: 40%; left: auto; width: 100px; } /* Banner Style Two */ .banner-style-two-area { padding-top: 300px; position: relative; z-index: 1; } .banner-style-two-area .banner-shape img { position: absolute; left: 10%; top: 20%; height: 100px; z-index: -1; } .banner-style-two-info { padding-bottom: 150px; } .banner-style-two-info h2 { font-size: 65px; margin: 0; } .banner-style-two-bottom-info { padding: 250px 0; position: relative; z-index: 1; } .banner-style-two-bottom-info .video-play-button { background: var(--color-style-four); z-index: 1; } .color-secondary .banner-style-two-bottom-info .video-play-button { background: var(--color-style-four); } .banner-style-two-bottom-info .video-play-button i { color: var(--color-heading); } .fixed-video { position: relative; } .fixed-video h2 { position: absolute; left: 50%; transform: translate(-50%, -50%); text-transform: uppercase; font-size: 200px; top: 50%; opacity: 0.4; font-weight: 700; color: var(--white); } .category-search form { background: var(--white); display: grid; grid-template-columns: 1fr 1.5fr; border-radius: 10px; position: relative; z-index: 1; font-size: 15px; } .category-search form .form-group { position: relative; display: flex; align-items: center; font-size: 20px; } .category-search { border-radius: 10px; max-width: 580px; position: relative; z-index: 1; } .category-search form .form-group button { position: absolute; right: 7px; top: 7px; border: none; height: 50px; background: var(--color-primary); padding: 0 30px; border-radius: 7px; font-size: 18px; font-weight: 500; color: var(--white); } .color-secondary .category-search form .form-group button { background: var(--color-style-two); } .category-search form .form-group button:hover { background: var(--dark); } .category-search form .form-group .nice-select { margin: 0; border: none; margin-right: 20px; min-width: 180px; } .category-search form .form-group i { color: var(--color-primary); padding-left: 30px; font-weight: 100; font-size: 16px; } .category-search form .form-group input { background: transparent; border: none; height: 64px; border-left: 1px solid #c5d7d4; border-radius: 0; padding: 0 25px; font-size: 16px; box-shadow: none; } .banner-style-two-bottom-info .category-search { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--color-primary); padding: 10px; border-radius: 0 0 40px 40px; } .color-secondary .banner-style-two-bottom-info .category-search { background: var(--color-style-two); } .banner-style-two-bottom-info .category-search::after { position: absolute; right: -27px; top: 3px; content: ""; height: 33px; width: 20px; border-bottom-left-radius: 17px; box-shadow: 0 20px 0 0 var(--color-primary); transform: rotate(90deg); } .color-secondary .banner-style-two-bottom-info .category-search::after { box-shadow: 0 20px 0 0 var(--color-style-two); } .banner-style-two-bottom-info .category-search::before { position: absolute; left: -29px; top: 6px; content: ""; height: 32px; width: 24px; border-bottom-right-radius: 16px; box-shadow: 0 20px 0 0 var(--color-primary); transform: rotate(-99deg); } .color-secondary .banner-style-two-bottom-info .category-search::before { box-shadow: 0 20px 0 0 var(--color-style-two); } .category-search form ul.list { z-index: 9; min-width: 200px; } .category-search form .form-group .nice-select::after { border-bottom: 2px solid; border-right: 2px solid; height: 10px; width: 10px; } .category-search form .form-group .nice-select span.current { font-size: 16px; } .category-search form .form-group img { height: 20px; margin-left: 20px; } .banner-style-two-bottom-info .category-search form { border-radius: 40px; } .banner-style-two-bottom-info .category-search form button { border-radius: 30px; } .banner-style-two-info { display: flex; justify-content: space-between; align-items: center; gap: 50px; position: relative; z-index: 1; } .banner-style-two-info .shape img { position: absolute; left: 100%; bottom: -10px; z-index: -1; opacity: 0.6; } .banner-style-two-info .shape img:nth-child(2) { right: 100%; left: auto; bottom: auto; top: -30px; height: 80px; opacity: 1; animation: zoomUpDown 5s linear infinite; } .banner-style-two-info h2 img { height: 70px; } ul.list-style-one { margin-bottom: 0; padding: 0; list-style: none; border-radius: 10px; position: relative; z-index: 1; } ul.list-style-one li { position: relative; z-index: 1; padding-left: 30px; font-weight: 500; margin-top: 10px; line-height: 1.6; } ul.list-style-one li::after { position: absolute; left: 0; top: 0; content: "\f058"; font-family: "Font Awesome 5 Pro"; font-weight: 600; color: var(--color-primary); } .color-secondary ul.list-style-one li::after { color: var(--color-style-two); } ul.list-style-one::after { position: absolute; left: 7px; top: 0; content: ""; height: 100%; width: 1px; background: linear-gradient(to top, rgba(255, 255, 255, 0), var(--white), rgba(255, 255, 255, 0)); } ul.list-style-one li:first-child { margin-top: 0; } .card-style-three { padding: 30px; display: flex; align-items: center; gap: 50px; background: transparent; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.3); } .card-style-three .thumb img { border-radius: 50%; height: 50px; width: 50px; border: 2px solid; margin-left: -20px; } .card-style-three .thumb { margin-left: 20px; display: flex; align-items: center; } .card-style-three h6 { margin: 0; margin-top: 15px; font-size: 20px; } .card-style-three a { height: 80px; width: 80px; line-height: 80px; text-align: center; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.3); } .card-style-three a i { font-size: 40px; font-weight: 100; transform: rotate(-45deg); transition: all 0.35s ease-in-out; } .card-style-three:hover a i { transform: rotate(0); color: var(--white); } .card-style-three a:hover { color: var(--white); } .card-style-three .thumb i { display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 48px; background: var(--dark); border-radius: 50%; border: 2px solid var(--white); font-weight: 300; margin-left: -20px; } .banner-style-two-info h2 strong { position: relative; z-index: 1; display: inline-block; } .banner-style-two-info h2 strong::after { position: absolute; right: 0; bottom: -13px; content: ""; height: 100%; width: 100%; background: url(../img/shape/20.png); background-size: 85%; background-repeat: no-repeat; background-position: center bottom; z-index: -1; } .banner-two-top-items { position: relative; z-index: 1; } .banner-two-top-items .shape-top img { position: absolute; left: 0; bottom: 0; z-index: -1; } .banner-two-top-items .shape-top img:nth-child(2) { position: absolute; left: auto; right: 0; bottom: 0; z-index: -1; } /* Banner Three */ .banner-style-three-area { position: relative; z-index: 1; padding-top: 120px; } .banner-style-three-area::after { position: absolute; right: 0; top: 0; content: ""; height: 400px; width: 400px; background: #c3f88b; z-index: -1; border-radius: 50%; filter: blur(150px); opacity: 0.3; } .banner-style-thee-items .banner-thumb { position: absolute; left: 0; top: 0; z-index: -1; width: 40%; height: 100%; } .banner-style-thee-items .banner-thumb::after { position: absolute; right: 0; top: 350px; content: ""; height: 40px; width: 20px; border-bottom-left-radius: 20px; box-shadow: 0 20px 0 0 var(--white); transform: rotate(-170deg); } .banner-style-thee-items .banner-thumb::before { position: absolute; right: 0; top: 80px; content: ""; height: 40px; width: 20px; border-bottom-right-radius: 20px; box-shadow: 0 20px 0 0 var(--white); } .banner-style-thee-items .banner-thumb img { height: 100%; width: 100%; object-fit: cover; object-position: center; border-top-right-radius: 20px; } .banner-style-three-layout { padding: 120px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .banner-style-thee-items { position: relative; } .banner-style-three-layout .left-info h2 { font-size: 70px; margin-left: -200px; background: var(--white); padding: 30px; border-radius: 20px; margin-bottom: 0; position: relative; z-index: 1; } .card-style-four { padding: 30px; display: flex; background-repeat: no-repeat; background-position: center; background-size: 100%; justify-content: center; align-items: center; padding-top: 25px; } .card-style-four h2 { font-size: 60px; margin-right: 20px; color: var(--color-primary); margin-bottom: 0; line-height: 1; } .card-style-four h4 { font-size: 20px; margin-bottom: 0; margin-top: 5px; } .card-style-four i { color: #fbc51a; } .banner-style-three-layout .right-info img { border-radius: 10px; margin-top: 30px; } /* Banner Four */ .banner-style-four-area { position: relative; z-index: 1; } .banner-shape-style-four img:nth-child(3) { position: absolute; right: 0; bottom: 0; z-index: -1; } .banner-shape-style-four img:nth-child(2) { position: absolute; left: 0; bottom: 0; z-index: -1; width: 150px; } .banner-shape-style-four img:first-child { position: absolute; left: 5%; top: 180px; height: 70px; z-index: -1; animation: zoomUpDown 5s linear infinite; } .banner-style-four-area h2 { margin: 0; font-size: 70px; line-height: 1.1; } .banner-style-four-info .d-flex { align-items: center; } .banner-style-four-info .d-flex h4 { margin: 0; border: 2px solid var(--color-primary); padding: 7px 20px; border-radius: 10px; font-size: 20px; margin-right: 20px; } .color-secondary .banner-style-four-info .d-flex h4 { border: 2px solid var(--color-style-two); } .banner-style-four-area p { font-size: 22px; padding-right: 25%; margin: 30px 0; } .banner-style-four-area, .banner-style-four-area div { height: 100vh; } .banner-style-four-area .row div { height: auto; padding-top: 20px; } .banner-style-four-area .row .banner-style-four-info div { padding: 0; } .banner-shape-style-four { position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: -1; } form.search-style-two { position: relative; z-index: 1; max-width: 600px; } form.search-style-two input, form.search-style-two input:focus { background: #012661; border: none; box-shadow: none !important; height: 65px; border-radius: 10px; padding: 0 30px; } .text-light form.search-style-two input { color: var(--text-light); } .text-light form.search-style-two input::-webkit-input-placeholder { /* Chrome */ color: var(--white); } .text-light form.search-style-two input:-ms-input-placeholder { /* IE 10+ */ color: var(--white); } .text-light form.search-style-two input::-moz-placeholder { /* Firefox 19+ */ color: var(--white); opacity: 1; } .text-light form.search-style-two input:-moz-placeholder { /* Firefox 4 - 18 */ color: var(--white); opacity: 1; } form.search-style-two button { position: absolute; right: 5px; top: 5px; bottom: 5px; border-radius: 10px; padding: 0 30px; background: var(--color-primary); color: var(--white); border: none; } .color-secondary form.search-style-two button { background: var(--color-style-two); } .text-light form.search-style-two { border: 2px solid rgba(255, 255, 255, 0.15); border-radius: 10px; } form.search-style-two button:hover { background: var(--white); color: var(--color-heading); } form.search-style-two button::after { background: var(--white); } .banner-style-four-info p.form-notice { font-size: 16px; } .banner-style-four-info p.form-notice strong { color: var(--color-primary); margin-right: 5px; } .color-secondary .banner-style-four-info p.form-notice strong { color: var(--color-style-two); } .text-light .banner-style-four-info p.form-notice { color: var(--white); } .banner-style-four-info p.form-notice { margin-bottom: 0; font-weight: 500; } .thumb-style-one img { border-radius: 50%; } .thumb-style-one img:nth-child(2) { position: absolute; left: 0; bottom: 20px; border-radius: 0; height: 50px; animation: fadeLeftRight 10s linear infinite; } .thumb-style-one { position: relative; z-index: 1; } .thumb-style-one::after { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: var(--color-style-two); z-index: -1; content: ""; border-radius: 50%; filter: blur(150px); opacity: 0.5; } /* Banner Style Five */ .banner-style-five-area, .banner-style-five-area div { height: 100vh; } .banner-style-five-area .row div { height: auto; } .banner-style-five-info .d-flex { align-items: center; margin-top: 30px; gap: 30px; } .banner-style-five-info .d-flex .thumb { position: relative; z-index: 1; margin-right: 50px; } .banner-style-five-info .d-flex .thumb img { border-radius: 50%; min-width: 200px; border: 5px solid rgba(255, 255, 255, 0.7); } .banner-style-five-info .d-flex .thumb a { display: inline-block; position: absolute; left: 0; top: 0; height: 50px; width: 50px; background: var(--color-style-three); text-align: center; color: var(--white); line-height: 50px; border-radius: 50%; } .banner-style-five-info .d-flex .thumb a::after { position: absolute; left: -5px; top: -5px; content: ""; right: -5px; bottom: -5px; background: var(--white); z-index: -1; border-radius: 50%; opacity: 0.8; } .banner-style-five-info h2 { font-size: 65px; margin: 0; line-height: 1.1; } .banner-style-five-info h2 strong { color: var(--color-primary); } .card-style-five { display: flex; align-items: center; background: rgba(255, 255, 255, 0.5); padding: 21px; border-radius: 10px; } .card-style-five p { margin: 0; } .card-style-five img { height: 60px; margin-right: 15px; } .card-style-five h4 { margin: 0; font-size: 30px; } ul.list-style-two { margin: 0; padding: 0; list-style: none; } ul.list-style-two li { position: relative; z-index: 1; padding-left: 25px; font-weight: 500; margin-top: 8px; } ul.list-style-two li::after { position: absolute; left: 0; top: 2px; content: "\10f336"; font-family: "Font Awesome 5 Duotone"; font-size: 14px; color: var(--color-primary); } .theme-skyblue ul.list-style-two li::after { color: var(--color-style-three); } ul.list-style-two li:first-child { margin-top: 0; } .banner-style-five-info > p { font-size: 20px; padding-right: 15%; margin-top: 20px; } .thumb-two-one { position: relative; z-index: 1; } .thumb-two-one .dotted-shape img:first-child { position: absolute; left: 0; bottom: 30%; z-index: -1; width: 60px; } .thumb-two-one .dotted-shape img:nth-child(2) { position: absolute; right: 0; top: 37%; z-index: -1; width: 60px; } .banner-style-five-area { padding-top: 50px; } .banner-style-five-area .illustration-sub img { position: absolute; z-index: -1; } .banner-style-five-area .illustration-sub img:first-child { right: 25%; top: 10%; } .banner-style-five-area .illustration-sub img:nth-child(2) { right: 15%; top: 10%; } .banner-style-five-area .illustration-sub img:nth-child(3) { left: 0; bottom: 54px; } .banner-style-five-items { position: relative; } .banner-style-five-area .banner-style-five-items .thumb-two-one { position: absolute; height: 100%; right: 0; bottom: 0; z-index: 1; } .banner-style-five-area .thumb-two-one img { height: 90%; margin-top: 100px; } /* Banner Style Six */ .banner-style-six-area { position: relative; z-index: 1; } .banner-style-six-info .category-search { border: 1px solid #c5d7d4; } .banner-style-six-area .shape img { position: absolute; z-index: -1; } .banner-style-six-area .shape img:first-child { left: 6%; top: 140px; animation: zoomUpDown 5s linear infinite; } .banner-style-six-area .shape img:nth-child(2) { right: 0; top: 90px; } .banner-style-six-thumb { position: relative; z-index: 1; } .banner-style-six-thumb .card-style-two { position: absolute; left: -50px; bottom: 100px; } .card-style-six { display: inline-flex; align-items: center; background: var(--white); box-shadow: 0px 15px 60px -10px rgb(109 117 143 / 33%); padding: 30px; border-radius: 10px; } .card-style-six img { height: 60px; margin-right: 20px; } .card-style-six h4 { margin: 0; font-size: 30px; font-weight: 600; } .card-style-six p { margin: 0; } .banner-style-six-thumb .card-style-six { position: absolute; right: -80px; top: 35%; } .banner-style-six-thumb > img:nth-child(2) { position: absolute; left: 0; top: 20%; } .banner-style-six-area { padding-top: 180px; } .banner-style-six-info { margin-top: -120px; } .banner-style-six-info h2 { font-size: 70px; line-height: 1.1; } .banner-style-six-info h2 strong { color: var(--color-primary); display: inline-block; position: relative; } .banner-style-six-info p { font-size: 20px; padding-right: 15%; } .banner-style-six-area::after { position: absolute; right: 0; top: 0; content: ""; height: 100%; width: 50%; background: #dee9f0; z-index: -1; } /* Banner Style Seven */ .banner-style-seven-area { background: var(--color-primary); padding: 15px; } .banner-style-seven { overflow: hidden; border-radius: 10px; margin-bottom: 30px; height: auto !important; } .banner-style-seven-area::after { position: absolute; right: 0; top: 0; content: ""; left: 27%; height: 100px; background: var(--color-primary); z-index: 1; border-radius: 10px; } .theme-style-three .banner-style-seven-area::after { background: var(--color-style-five); } .banner-round-shape { position: absolute; left: 27%; right: 15px; top: 0; height: 100px !important; } .banner-round-shape::after { position: absolute; left: -36px; top: 10px; content: ""; height: 40px; width: 30px; border-bottom-right-radius: 20px; box-shadow: 0 20px 0 0 var(--color-primary); z-index: 2; transform: rotate(-93deg); } .theme-style-three .banner-round-shape::after { box-shadow: 0 20px 0 0 var(--color-style-five); } .banner-round-shape::before { position: absolute; right: 5px; top: 95px; content: ""; height: 40px; width: 30px; border-bottom-right-radius: 20px; box-shadow: 0 20px 0 0 var(--color-primary); z-index: 2; transform: rotate(-93deg); } .theme-style-three .banner-round-shape::before { box-shadow: 0 20px 0 0 var(--color-style-five); } .banner-style-seven h2 { font-size: 70px; } .banner-style-seven h2 strong { color: var(--color-primary); } .theme-style-three .banner-style-seven h2 strong { color: var(--color-style-five); } .banner-style-seven p { font-size: 20px; } .banner-area.banner-style-seven-area .swiper-slide.swiper-slide-active h2 { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; -webkit-transition-delay: 300ms; transition-delay: 300ms; } .banner-area.banner-style-seven-area .swiper-slide.swiper-slide-active p { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; -webkit-transition-delay: 600ms; transition-delay: 600ms; } .banner-area.banner-style-seven-area .swiper-slide.swiper-slide-active .button { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; -webkit-transition-delay: 900ms; transition-delay: 900ms; } .banner-area.banner-style-seven-area ul, .banner-area.banner-style-seven-area ul p { transform: none; visibility: visible; opacity: 1; } .banner-area.banner-style-seven-area .right-info { -webkit-transition: all 300ms ease; transition: all 300ms ease; transform: translateY(50px); opacity: 0; padding-right: 25%; margin: 0; visibility: hidden; margin-top: 160px; } .banner-area.banner-style-seven-area .swiper-slide.swiper-slide-active .right-info { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; -webkit-transition-delay: 1200ms; transition-delay: 1200ms; } .banner-style-seven .right-info { position: relative; z-index: 1; background: rgb(9 24 77 / 40%); padding: 50px !important; backdrop-filter: blur(10px); border-radius: 10px; } .banner-style-seven .right-info ul { margin: 0; padding: 0; list-style: none; } .banner-style-seven .right-info ul h5 { font-size: 20px; } .banner-style-seven .right-info ul p { font-size: 17px; margin: 0; padding: 0; } .banner-style-seven .right-info ul li { border-top: 1px solid rgba(255, 255, 255, 0.4); margin-top: 30px; padding-top: 30px; } .banner-style-seven .right-info ul li:first-child { margin-top: 0; padding-top: 0; border: none; } .banner-style-seven-info { position: relative; } .banner-style-seven-info .fixed-thumb { position: absolute; right: 14%; bottom: 0; z-index: 1; display: flex; flex-direction: column; justify-content: end; } .banner-style-seven-info .fixed-thumb img { object-fit: cover; object-position: bottom center; margin-top: 120px; height: 88%; } .theme-style-three .banner-style-seven-area { background: var(--color-style-five); } .banner-style-seven .right-info img { height: 80px; position: absolute; right: -40px; top: -40px; } /* Banner Eight */ .banner-style-eight-area { background-size: contain; background-repeat: no-repeat; background-position: bottom center; position: relative; z-index: 1; } .banner-style-eight-area .shape-top img { position: absolute; width: 100%; object-fit: cover; object-position: center; margin-top: -15px; top: 0; } .banner-style-eight-area .shape img { position: absolute; z-index: -1; } .banner-style-eight-area .shape img:first-child { left: 8%; top: 120px; animation: UpDown 6s linear infinite; } .banner-style-eight-area .shape img:nth-child(2) { bottom: 20%; left: 45%; animation: fadeLeftRight 6s linear infinite; } .banner-style-eight-area .shape img:nth-child(3) { left: 40%; bottom: 120px; } .thumb-style-three { height: 100%; display: flex; flex-direction: column; justify-content: end; position: relative; z-index: 1; } .thumb-style-three > img { object-fit: cover; object-position: center; position: relative; max-width: 115%; margin-left: -15%; } .thumb-style-three .illustration-sub img { position: absolute; } .banner-style-eight-area .shape-bottom img { position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; object-fit: cover; object-position: center; } .banner-style-eight-info h2 { font-size: 70px; } .banner-style-eight-info h2 strong { display: inline-block; background: var(--color-style-four); color: var(--color-heading); font-weight: 600; padding: 0 20px; border-radius: 10px; padding-bottom: 13px; font-size: 65px; line-height: 1; } .banner-style-eight-info h3 { display: inline-block; background: var(--color-style-four); color: var(--color-heading); font-size: 60px; font-weight: 400; padding: 10px 20px; border-radius: 10px; line-height: 1; margin-bottom: 30px; } .banner-style-eight-info p { font-size: 18px; margin: 0; padding-right: 10%; } .thumb-style-three .illustration-sub img:first-child { top: 100px; height: 100px; } .thumb-style-three .illustration-sub img:nth-child(2) { right: -120px; bottom: 250px; } .banner-style-eight-info { padding-top: 160px; padding-bottom: 260px; } .thumb-style-three::after { position: absolute; left: 50%; bottom: -25%; content: ""; height: 600px; width: 600px; background: var(--white); z-index: -1; transform: translateX(-50%); opacity: 0.2; border-radius: 50%; } /* Banner Style Nine */ .banner-style-nine-area { overflow: hidden; position: relative; z-index: 1; } .banner-style-nine-area::after { position: absolute; right: 0; bottom: 0; content: ""; height: 350px; width: 350px; background: var(--color-primary); z-index: -1; border-radius: 50%; filter: blur(150px); opacity: 0.6; } .banner-style-nine-items .thumb { position: absolute; height: 100%; right: 0; bottom: 0; z-index: 1; } .banner-style-nine-items .thumb::after { position: absolute; left: 50%; bottom: 10%; content: ""; transform: translateX(-50%); height: 480px; width: 480px; background: var(--color-primary); z-index: -1; border-radius: 50%; } .banner-style-nine-items .thumb::before { position: absolute; left: 50%; bottom: 3%; content: ""; transform: translateX(-50%); height: 600px; width: 600px; background: var(--color-primary); z-index: -1; border-radius: 50%; opacity: 0.1; } .banner-style-nine-items .thumb img { height: 90%; margin-top: 100px; } .banner-style-nine-items { position: relative; padding: 200px 0; padding-top: 240px; } .banner-style-nine-items h2 { font-size: 70px; } .banner-style-nine-items h2 strong { position: relative; z-index: 1; display: inline-block; } .banner-style-nine-items h2 strong::after { position: absolute; right: 0; bottom: -13px; content: ""; height: 100%; width: 100%; background: url(../img/shape/90.png); background-size: 85%; background-repeat: no-repeat; background-position: center bottom; z-index: -1; } .banner-style-nine-items h4 img { height: 30px; margin-right: 3px; } .banner-style-nine-items p { font-size: 20px; } @media (min-width: 1200px) { .banner-style-nine-items p { padding-right: 20%; } } .banner-style-nine-items .thumb .card-style-seven { position: absolute; left: -100px; bottom: 24%; } .banner-style-nine-items .thumb .card-style-seven h2 { margin: 0; color: var(--color-primary); } .banner-style-nine-items .thumb .card-style-seven h4 { margin: 0; font-size: 20px; margin-top: 3px; } .card-style-seven { display: flex; align-items: center; gap: 15px; border-radius: 10px; background: rgba(255, 255, 255, 0.7); padding: 20px; backdrop-filter: blur(50px); } .card-style-seven i { color: #ff9124; font-size: 15px; } .banner-style-nine-items .thumb img:nth-child(2) { height: auto; position: absolute; right: -5%; top: 10%; max-width: 150px; } /* ============================================================== # Brand One =================================================================== */ .brand-style-one-area { text-align: center; } /* ============================================================== # Crouse Style One =================================================================== */ .course-style-one-item { background: var(--white); box-shadow: 0px -4px 50px -14px rgb(109 117 143 / 53%); padding: 30px; border-radius: 10px; position: relative; z-index: 1; } .course-style-one-item .price { display: flex; gap: 10px; align-items: center; font-size: 24px; margin: 0; } .course-style-one-item .price del { color: #bbbcc2; font-size: 20px; } .course-style-one-item .d-flex { justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px; grid-gap: 10px; column-gap: 20px; } .course-style-one-item .thumb { overflow: hidden; border-radius: 10px 10px 0 0; } .course-style-one-item.list-layout .thumb { border-radius: 10px; } .course-style-one-item.hover-less .thumb img { transition: all 0.35s ease-in-out; } .course-style-one-item.hover-less:hover .thumb > img { transform: scale(1.1); } .course-style-one-item.hover-less { transition: all 0.35s ease-in-out; border: 2px solid transparent; } .course-style-one-item.hover-less:hover { border: 2px solid var(--color-primary); } .course-style-one-item .bottom-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; flex-wrap: wrap; gap: 20px; } .course-style-one-item .top-meta { display: flex; align-items: center; justify-content: space-between; column-gap: 30px; row-gap: 10px; border: 1px solid #e7e7e7; border-radius: 0 0 10px 10px; padding: 15px; font-weight: 500; border-top: none; position: relative; flex-wrap: wrap; } .course-style-one-item .top-meta .price { margin: 0; font-size: 30px; } .course-style-one-item .top-meta ul { margin: 0; padding: 0; list-style: none; display: inline-flex; grid-gap: 15px; column-gap: 30px; } .course-style-one-item .top-meta ul li { display: inline-block; font-weight: 500; } .course-style-one-item .top-meta ul li img { height: 20px; margin-right: 2px; position: relative; top: -1px; } .course-style-one-item .top-meta ul li i.fa-clock { font-weight: 100; } .course-style-one-item .top-meta ul li i { margin-right: 2px; } .course-style-one-item .top-meta ul li i.fa-star, .course-style-one-item .top-meta ul li i.fa-star-half-alt { color: #ffa41c; font-weight: 600; font-size: 13px; position: relative; } .course-style-one-item .author { display: flex; align-items: center; gap: 5px; margin-bottom: 20px; font-size: 18px; } .course-style-one-item .author a { font-weight: 600; line-height: 1.5; font-size: 20px; } .course-style-one-item .top-meta .author a { font-size: 17px; font-weight: 500; } .course-style-one-item .author span { display: block; font-weight: 400; color: var(--color-primary); font-size: 15px; } .course-style-one-item .author img { height: 45px; width: 45px; border-radius: 50%; margin-right: 8px; } .course-style-one-item .top-meta .author { margin: 0; } .course-style-one-item .top-meta .author img { height: 35px; width: 35px; } .course-rating-two i { color: #ffa41c; display: inline-block; height: 32px; width: 32px; text-align: center; line-height: 31px; border: 1px solid #dddddd; border-radius: 50%; font-size: 13px; margin-right: 8px; } .level i.fa-check-circle { color: var(--color-primary); margin-right: 2px; font-weight: 600; font-size: 15px; } .color-secondary .level i.fa-check-circle { color: var(--color-style-two); } .theme-skyblue .level i.fa-check-circle { color: var(--color-style-three); } .course-style-one-item .bottom-meta .price { margin: 0; font-size: 24px; display: flex; align-items: center; line-height: 1; gap: 10px; } .course-style-one-item .bottom-meta .price del { color: #bbbcc2; font-weight: 500; position: relative; z-index: 1; font-size: 20px; } .course-style-one-item .bottom-meta a i { transform: rotate(-45deg); font-weight: 100; } .course-style-one-item .bottom-meta a { display: inline-block; border: 1px solid #bddcd5; padding: 8px 20px; border-radius: 10px; } .color-secondary .course-style-one-item .bottom-meta a { border-color: #ced1ed; } .course-style-one-item .bottom-meta a:hover { background: var(--color-primary); border-color: transparent; color: var(--white); } .color-secondary .course-style-one-item .bottom-meta a:hover { background: var(--color-style-two); } .theme-skyblue .course-style-one-item .bottom-meta a:hover { background: var(--color-style-three); } .course-style-one-item .top-meta ul li i.fa-book-open { font-weight: 100; position: relative; } .course-style-one-item .top-meta ul li i { font-weight: 100; } .course-style-one-item .course-rating i { color: #ffa41c; font-size: 14px; position: relative; margin-right: 1px; } .course-style-one-item .course-rating { display: flex; align-items: center; } .course-style-one-item .course-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 15px; column-gap: 30px; } .course-style-one-item .course-meta .price { margin: 0; font-size: 30px; display: flex; align-items: center; gap: 6px; font-weight: 600; order: 6; } .course-style-one-item .course-meta .price del { color: #b3b4bb; font-weight: 400; } .course-style-one-item .course-meta .course-rating i { color: #ffa41c; font-size: 14px; position: relative; top: -1px; font-weight: 600; } .course-style-one-item .course-meta .course-rating { display: flex; align-items: center; } .course-style-one-item .course-meta span { margin-left: 5px; } .course-style-one-item a.btn { box-shadow: none; display: block; background: var(--color-primary); color: var(--white); position: absolute; left: 30px; right: 30px; bottom: 0; opacity: 0; visibility: hidden; } .color-secondary .course-style-one-item a.btn { background: var(--color-style-two); } .theme-skyblue .course-style-one-item a.btn { background: var(--color-style-three); } .course-style-one-item a.btn:hover, .color-secondary .course-style-one-item a.btn:hover, .theme-skyblue .course-style-one-item a.btn:hover { background: var(--color-style-four); color: var(--color-heading); } .course-style-one-item:hover a.btn { bottom: 30px; opacity: 1; visibility: visible; transition-delay: 30ms; } .course-style-one-item .info { transition: all 0.35s ease-in-out; padding-top: 30px; background: var(--white); } .course-style-one-item:hover .info { transform: translateY(-80px); } .course-style-one-item.hover-less:hover .info { transform: none; } .course-style-one-item .info h4 { line-height: 1.3; } .course-style-one-item .course-meta ul { margin: 0; padding: 0; list-style: none; display: inline-flex; font-size: 17px; flex-wrap: wrap; column-gap: 20px; row-gap: 3px; } .course-style-one-item .course-meta ul i { margin-right: 3px; font-weight: 100; } .course-style-one-item .info .course-tags h2 { margin: 0; } /* ============================================================== # Course Filter =================================================================== */ .course-listing-contentes .content { display: flex; align-items: center; gap: 30px; } .course-listing-contentes .content .nav.nav-tabs { margin: 0; padding: 0; border: none; display: flex; gap: 10px; } .course-listing-contentes .content .nav.nav-tabs::before, .course-listing-contentes .content .nav.nav-tabs::after { display: none; } .course-listing-contentes .content .nav.nav-tabs button::after { display: none; } .course-listing-contentes .content .nav.nav-tabs button { border-radius: 5px; border: 1px solid #a7d4f2; padding: 10px 15px; font-weight: 400; color: var(--color-heading); } .course-listing-contentes .content .nav.nav-tabs button i { margin-right: 5px; font-weight: 100; } .course-listing-contentes .content .nav.nav-tabs button.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--white); } .course-listing-contentes .content p { margin: 0; } course-listing-contentes .right { display: flex; align-items: center; } .course-listing-contentes .right { display: flex; align-items: center; justify-content: flex-end; gap: 30px; } .course-listing-contentes { margin-bottom: 50px; } .course-listing-contentes .right a { display: inline-block; padding: 12px 30px; background: var(--bg-gradient); color: var(--white); border-radius: 10px; } .course-listing-contentes .right a i { font-weight: 400; margin-left: 5px; } form.course-search-form { position: relative; z-index: 1; border: 1px solid #dddddd; overflow: hidden; border-radius: 40px; } form.course-search-form input { border: none; padding: 10px 26px; box-shadow: none; } form.course-search-form button { padding: 0; background: transparent; box-shadow: none; color: var(--color-heading); height: 50px; width: 60px; text-align: center; } form.course-search-form button::after { display: none; } form.course-search-form button i { font-weight: 400; } .course-style-one-item.list-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; border: 1px solid #dddddd; box-shadow: none; } .course-style-one-item.list-layout:hover { border: 1px solid var(--color-primary); background: var(--white); } .color-secondary .course-style-one-item.list-layout:hover { border: 1px solid var(--color-style-two); } .theme-skyblue .course-style-one-item.list-layout:hover { border: 1px solid var(--color-style-three); } .course-style-one-item.list-layout .info { padding: 0; } .course-style-one-item.list-layout .top-meta { border: none; padding: 0; border-radius: 0; margin-bottom: 15px; } .course-style-one-item.list-layout .thumb img { height: 100%; object-fit: cover; object-position: left; } .course-style-one-item.list-layout .author { margin-bottom: 20px; } .course-style-one-item.list-layout .course-meta li { font-size: 16px; } .course-style-one-item.list-layout .course-meta .course-rating i { font-size: 12px; top: 0; } .course-style-one-item.list-layout .course-meta span { margin-left: 3px; } .course-style-one-item.list-layout .course-meta { margin-top: 20px; border-top: 1px solid #dddddd; padding-top: 20px; } .course-style-one-item .info .course-tags { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 20px; } .course-style-one-item .info .course-tags > a { background: #e3f2ef; display: inline-block; padding: 4px 15px; border-radius: 7px; color: var(--color-primary); font-size: 14px; font-weight: 500; } .course-style-one-item .info .course-tags .bookmark a { display: inline-block; height: 35px; width: 35px; line-height: 35px; background: #dce0e2; text-align: center; border-radius: 50%; } .course-style-one-item .info .course-tags .bookmark a i { font-weight: 100; } .course-style-one-item .info .course-tags .bookmark a:hover { background: var(--color-primary); color: var(--white); } #list-tab .course-style-one-item .bottom-meta { margin-top: 30px; } #list-tab .course-style-one-item .info { padding-top: 0; display: flex; flex-direction: column; justify-content: center; height: 100%; } #list-tab .course-style-one-item { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 50px; } #list-tab .course-style-one-item .top-meta { border: none; border-radius: 0; margin-bottom: 30px; padding: 0; } #list-tab .course-style-one-item .top-meta .course-tags { margin: 0; } #list-tab .course-style-one-item .course-meta { justify-content: left; gap: 21px; } #list-tab .course-style-one-item .author { margin-bottom: 15px; } #list-tab .course-style-one-item .thumb { border-radius: 10px; } #list-tab .course-style-one-item .thumb img { height: 100%; width: 100%; object-fit: cover; object-position: left; } #list-tab .course-style-one-item h4 { font-size: 24px; } /* Course Sidebar */ .course-filter-sidebar { border: 1px solid #dbe8f0; border-radius: 10px; } .course-filter-sidebar-item { padding: 40px; border-bottom: 1px solid #dbe8f0; } .course-filter-sidebar-item:last-child { margin: 0; border: none; } .course-filter-sidebar-item .widget-title { margin-bottom: 20px; font-size: 20px; position: relative; z-index: 1; } form.course-search-form { position: relative; z-index: 1; border: 1px solid #dddddd; overflow: hidden; border-radius: 40px; } form.course-search-form input { border: none; padding: 10px 26px; box-shadow: none !important; background: transparent; } form.course-search-form button { padding: 0; background: transparent; box-shadow: none; color: var(--color-heading); height: 50px; width: 60px; text-align: center; } form.course-search-form button::after { display: none; } form.course-search-form button i { font-weight: 400; } ul.check-box-list { margin: 0; padding: 0; list-style: none; } ul.check-box-list li { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; } ul.check-box-list li input { min-height: auto; margin-right: 5px; } ul.check-box-list li label { margin: 0; font-weight: 500; } /* Pagination */ .woocommerce-pagination ul.page-numbers { display: inline-block; list-style: none; margin: 0 !important; padding: 0 !important; } nav.woocommerce-pagination { clear: both; text-align: center; overflow: hidden; float: left; width: 100%; } .woocommerce-pagination ul.page-numbers li { display: inline-block; } .woocommerce-pagination ul.page-numbers li .page-numbers { display: inline-block; height: 45px; width: 45px; line-height: 45px; background: #FEFDFD; margin: 0 1px; border: 1px solid #dddddd; font-weight: 500; border-radius: 50%; color: var(--color-heading); } .woocommerce-pagination ul.page-numbers li .page-numbers.current, .woocommerce-pagination ul.page-numbers li a:hover { background: var(--color-primary); border-color: var(--color-primary); color: #FEFDFD; } /* ============================================================== # Course Carousel =================================================================== */ .course-style-two-carousel-area { overflow: hidden; } .course-style-two-carousel .swiper-slide { padding: 15px; } .course-style-two-carousel { margin: -15px; } .course-style-two-carousel .swiper-slide .course-style-one-item { box-shadow: 0 0 16px 0px rgb(109 117 143 / 18%); } .course-bullet-item { display: flex; padding: 20px 30px; background: var(--white); position: relative; z-index: 1; align-items: center; border-radius: 20px; border: 1px solid #e7e7e7; } .course-style-one-bullet { margin-bottom: 50px; overflow: hidden; } .swiper-slide.swiper-slide-active .course-bullet-item { background: var(--bg-gradient); } .swiper-slide.swiper-slide-active .course-bullet-item i { color: var(--white); } .swiper-slide.swiper-slide-active .course-bullet-item h4 { color: var(--white); } .swiper-slide.swiper-slide-active .course-bullet-item span { color: var(--white); } .course-bullet-item i { display: inline-block; font-size: 30px; color: var(--color-heading); } .course-bullet-item h4 { margin-bottom: 5px; font-size: 19px; } .course-bullet-item .icon { height: 70px; width: 70px; min-width: 70px; text-align: center; display: flex; flex-direction: column; justify-content: center; background: #d9ebe8; border-radius: 50%; margin-right: 20px; } .course-bullet-item .icon img { height: 35px; max-width: max-content; margin: auto; } .swiper-slide.swiper-slide-active .course-bullet-item .icon { background: rgba(0, 0, 0, 0.2); } .swiper-slide.swiper-slide-active .course-bullet-item .icon img { filter: brightness(0) invert(1); } .course-style-one-carousel .swiper-slide { padding: 15px; } .course-style-one-carousel .swiper-slide .course-style-one-item { box-shadow: 0 0 16px 0px rgb(109 117 143 / 18%); } .course-style-one-carousel { margin: -15px; } .style-two.course-style-one-item .course-meta { margin-bottom: 15px; } .course-style-one-item .top-meta .bookmark i { font-weight: 100; } .course-style-one-item .top-meta .bookmark a { display: inline-block; height: 35px; width: 35px; line-height: 35px; text-align: center; background: #dcedea; border-radius: 50%; } .style-two.course-style-one-item .top-meta { padding: 10px 15px; } .course-style-one-item .top-meta .bookmark a:hover { background: var(--color-primary); color: var(--white); } .course-bottom-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; border-top: 1px solid #e7e7e7; padding-top: 20px; grid-gap: 15px; flex-wrap: wrap; column-gap: 30px; } .course-bottom-meta h2 { margin: 0; font-size: 28px; display: flex; align-items: center; gap: 8px; } .course-bottom-meta h2 del { font-size: 24px; color: #bbbcc2; font-weight: 500; } .course-bottom-meta a i { font-weight: 100; margin-right: 3px; } /* ============================================================== # Course Tabs =================================================================== */ .nav.nav-tabs.category-tabs { background: var(--white); padding: 50px; border-radius: 10px; margin: 0; border: 2px solid; display: grid; gap: 20px; } .nav.nav-tabs.category-tabs .nav-item { display: block; } .nav.nav-tabs.category-tabs .nav-item .nav-link { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; border: 1px solid #e7e7e7; border-radius: 10px; padding: 15px 20px; color: var(--color-heading); font-size: 18px; } .nav.nav-tabs.category-tabs .nav-item .nav-link::after { display: none; } .nav.nav-tabs.category-tabs .nav-item .nav-link.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--white); } .color-secondary .nav.nav-tabs.category-tabs .nav-item .nav-link.active { background: var(--color-style-two); border-color: var(--color-style-two); } .nav.nav-tabs.category-tabs .nav-item .nav-link.active img { filter: brightness(0) invert(1); } .nav.nav-tabs.category-tabs .nav-item .nav-link img { height: 40px; } .nav.nav-tabs.category-tabs::before, .nav.nav-tabs.category-tabs::after { display: none; } .course-tab-style-one { position: relative; } .course-tab-style-one .nav.nav-tabs.category-tabs { position: sticky; top: 100px; } .tab-content.category-tab-content .course-style-one-item { margin-bottom: 30px; } .tab-content.category-tab-content .course-style-one-item:last-child { margin-bottom: 0; } /* ============================================================== # Course Carousel =================================================================== */ .course-two-swiper-nav { position: relative; right: 0; top: 20px; display: flex; width: 200px; justify-content: space-between; align-items: center; text-align: center; float: right; height: 100%; } .course-style-two-carousel .course-two-swiper-nav { float: none; margin: auto; top: 0; margin-top: 50px; left: auto; transform: none; } .course-two-swiper-nav > div { height: 40px; width: 40px; background: var(--color-primary); z-index: 9; position: relative; border-radius: 50%; text-align: center; } .course-two-swiper-nav > div::after { position: absolute; top: 7px; content: ""; height: 100%; width: 100%; font-family: "Font Awesome 5 Pro"; text-align: center; color: var(--white); left: 0; } .course-two-swiper-nav .course-two-button-next::after { content: "\f105"; } .course-two-swiper-nav .course-two-button-prev::after { content: "\f104"; } .theme-skyblue .course-two-swiper-nav > div { background: var(--color-style-three); } .color-secondary .course-two-swiper-nav > div { background: var(--color-style-two); } .course-two-swiper-nav .course-two-pagination { background: transparent !important; position: absolute; line-height: 40px; font-size: 24px; width: auto; font-weight: 600; left: 50%; transform: translate(-50%, -50%); top: 50%; } .course-style-one-item.hover-less.button-full .bottom-meta a { width: 100%; text-align: center; padding: 15px; border: none; background: var(--color-primary); color: var(--white); } .course-style-one-item.hover-less.button-full .bottom-meta a:hover { background: var(--color-style-four); color: var(--color-heading); } .course-style-one-item.hover-less.button-full .top-meta .course-meta ul { column-gap: 16px; } .course-style-one-item.hover-less.button-full .info { padding: 0; } .course-style-one-item.hover-less.button-full .thumb { border-radius: 10px; margin-bottom: 25px; } a.btn-regular { display: inline-block; border: 2px solid; padding: 15px 40px; border-radius: 40px; font-size: 18px; } a.btn-regular i { margin-left: 10px; animation: spinner 10s infinite linear; } a.btn-regular:hover { background: var(--dark); color: var(--white); border-color: transparent; } /* ============================================================== # Course Filter =================================================================== */ ul.vt-products { padding: 0; list-style: none; display: flex; flex-wrap: wrap; margin: 0 -15px; margin-bottom: -30px; } .vt-products .product { padding-left: 15px; padding-right: 15px; float: left; margin-bottom: 30px; } .vt-products.columns-1 .product { width: 100%; } .tinv-wishlist table th { background: var(--bg-gray); } .vt-products.columns-2 .product { width: 50%; } .vt-products.columns-3 .product { width: 33.3333%; } .vt-products.columns-4 .product { width: 25%; } .vt-products.columns-5 .product { width: 20%; } .vt-products.columns-6 .product { width: 16.6666%; } .vt-products.columns-7 .product { width: 14.2857%; } .vt-products.columns-8 .product { width: 12.5%; } .vt-products.columns-9 .product { width: 11.1111%; } .vt-products.columns-10 .product { width: 10%; } @media only screen and (min-width: 768px) and (max-width: 1199px) { .vt-products.columns-3 .product, .vt-products.columns-4 .product, .vt-products.columns-5 .product { width: 50%; } } @media only screen and (max-width: 767px) { .vt-products.columns-2 .product, .vt-products.columns-3 .product, .vt-products.columns-4 .product, .vt-products.columns-5 .product { width: 100%; } } /* ============================================================== # Course Details =================================================================== */ .course-preview-info .thumb { position: relative; } .course-preview-info .thumb .video-play-button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 90px; width: 90px; line-height: 90px; background: var(--color-style-four); } .course-preview-info .thumb .video-play-button i.fa.fa-play { position: relative; left: 4px; color: var(--color-heading); } .coruse-details-thumb img { width: 100%; border-radius: 10px; margin-bottom: 50px; } .nav.nav-tabs.course-details-navs { margin: 0; background: var(--white); padding: 0; border-radius: 10px; margin-bottom: 40px; border: 1px solid #d2dbff; display: inline-flex; overflow: hidden; } .nav.nav-tabs.course-details-navs::before, .nav.nav-tabs.course-details-navs::after { display: none; } .nav.nav-tabs.course-details-navs .nav-item .nav-link { margin: 0; padding: 13px 30px; border: none; border-radius: 0; color: var(--color-heading); display: block; width: 100%; font-size: 18px; font-weight: 600; border-right: 1px solid #d2dbff; } .nav.nav-tabs.course-details-navs .nav-item .nav-link.active { background: var(--color-primary); color: var(--white); } .nav.nav-tabs.course-details-navs .nav-item .nav-link::after { display: none; } .nav.nav-tabs.course-details-navs .nav-item:last-child .nav-link { border: none; } .course-details-left-info ul.list-style-one { margin-bottom: 25px; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 50px; grid-row-gap: 12px; } .course-details-left-info ul li { margin: 0; } .course-details-left-info h2 { margin-bottom: 20px; } .curriculum-accordion .faq-style-one button.accordion-button:not(.collapsed) { background: var(--bg-gradient); color: var(--white); } .curriculum-accordion .faq-style-one button.accordion-button { padding: 20px 30px !important; padding-right: 60px !important; border: none; } .curriculum-accordion .faq-style-one button.accordion-button::before { top: 20px; content: "\f107"; font-size: 30px; } .curriculum-accordion .faq-style-one button.accordion-button:not(.collapsed)::before { content: "\f106"; } ul.curriculum-list { margin: 0; padding: 0; list-style: none; overflow: hidden; border-radius: 10px; } ul.curriculum-list li { display: flex; align-items: center; justify-content: space-between; column-gap: 30px; background: var(--bg-gray-gradient); padding: 15px 30px; border-bottom: 1px solid #c3e2eb; flex-wrap: wrap; row-gap: 20px; } ul.curriculum-list li .left-content { display: flex; align-items: center; gap: 30px; } ul.curriculum-list li .right-content { display: flex; align-items: center; gap: 30px; min-width: 130px; text-align: right; justify-content: space-between; } ul.curriculum-list li:last-child { border: none; } ul.curriculum-list li h5 { margin: 0; } .faq-style-one-items.curriculum-accordion .faq-style-one.accordion-item { border: none; box-shadow: 0px 9px 41px -11px rgb(109 117 143 / 43%); } .faq-style-one-items.curriculum-accordion .faq-style-one .accordion-body { border: none; } ul.curriculum-list li .left-content span { background: var(--dark); display: inline-block; color: var(--white); width: 30px; text-align: center; border-radius: 5px; font-weight: 600; font-size: 15px; height: 30px; line-height: 30px; min-width: 30px; } ul.curriculum-list li .right-content a { background: var(--color-primary); color: var(--white); padding: 2px 20px; font-weight: 400; display: inline-block; border-radius: 30px; } ul.curriculum-list li h5 i { font-weight: 100; color: var(--color-primary); position: relative; top: 5px; } ul.curriculum-list li h5 a { display: flex; gap: 10px; } ul.curriculum-list li .right-content span { font-weight: 500; display: flex; align-items: center; gap: 8px; } ul.curriculum-list li .right-content i { font-weight: 400; } .curriculum-advisor { display: grid; grid-template-columns: 1fr 1.5fr; gap: 50px; overflow: hidden; position: relative; z-index: 1; border-radius: 10px; background: var(--white); box-shadow: 0px 15px 60px -10px rgb(109 117 143 / 33%); margin-bottom: 30px; } .curriculum-advisor:last-child { margin-bottom: 0; } .curriculum-advisor .thumb { height: 100%; } .curriculum-advisor .thumb img { height: 100%; object-fit: cover; object-position: center; } .curriculum-advisor .info { padding: 50px; padding-left: 0; } .curriculum-advisor .info h4 { margin-bottom: 10px; } .curriculum-advisor .info > span { text-transform: uppercase; font-size: 15px; font-weight: 500; color: var(--color-primary); } .curriculum-advisor .info .reviews i { font-size: 14px; color: #ffa41c; } .curriculum-advisor .info .reviews span { font-weight: 500; margin-left: 5px; } .curriculum-advisor .info .reviews { margin-top: 15px; } .curriculum-advisor .info ul { margin: 0; padding: 0; list-style: none; display: flex; column-gap: 30px; border-top: 1px solid #dddddd; margin-top: 20px; padding-top: 20px; row-gap: 5px; flex-wrap: wrap; } .curriculum-advisor .info ul i { font-weight: 100; margin-right: 5px; } .curriculum-advisor .info p { margin: 0; margin-top: 15px; } .curriculum-advisor .social { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; position: absolute; right: 50px; top: 50px; } .curriculum-advisor .social li a { display: flex; height: 40px; width: 40px; line-height: 40px; background: var(--color-primary); border-radius: 50%; color: var(--white); align-items: center; justify-content: center; text-align: center; } .curriculum-advisor .social li a img { height: 15px; } .curriculum-advisor .social li.facebook a { background: #1877F2; } .curriculum-advisor .social li.twitter a { background: #14171A; } .curriculum-advisor .info .top { padding-right: 60px; } .curriculum-review-item { display: grid; grid-template-columns: 1fr 1.7fr; gap: 50px; align-items: center; } .curriculum-review-item .total-review { background: var(--color-primary); color: var(--white); padding: 35px; text-align: center; border-radius: 10px; } .curriculum-review-item .total-review h2 { color: var(--white); font-size: 60px; line-height: 1; } .curriculum-review-item .total-review h4 { color: var(--white); display: inline-block; border: 1px solid rgba(255, 255, 255, 0.3); font-size: 18px; padding: 5px 20px; border-radius: 30px; } .curriculum-review-item .total-review span { font-size: 18px; margin-top: 5px; display: block; } .review-count-item { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .review-count-item:last-child { margin-bottom: 0; } .progress-bar { height: 18px; border: 1px solid #dddddd; width: 100%; position: relative; z-index: 1; border-radius: 30px; background: transparent; } .review-count-item .ratings { min-width: 130px; } .review-count-item span { min-width: 60px; text-align: right; font-weight: 600; font-size: 18px; } .progress-bar::after { position: absolute; left: 4px; top: 4px; content: ""; bottom: 4px; background: var(--bg-gradient); border-radius: 30px; } .progress-bar.width-100::after { width: 100%; } .progress-bar.width-95::after { width: 95%; } .progress-bar.width-90::after { width: 90%; } .progress-bar.width-80::after { width: 80%; } .progress-bar.width-70::after { width: 70%; } .progress-bar.width-65::after { width: 65%; } .progress-bar.width-60::after { width: 60%; } .progress-bar.width-55::after { width: 55%; } .progress-bar.width-50::after { width: 50%; } .progress-bar.width-45::after { width: 45%; } .progress-bar.width-40::after { width: 40%; } .progress-bar.width-40::after { width: 40%; } .progress-bar.width-35::after { width: 35%; } .progress-bar.width-30::after { width: 30%; } .progress-bar.width-25::after { width: 25%; } .progress-bar.width-20::after { width: 20%; } .progress-bar.width-15::after { width: 15%; } .progress-bar.width-10::after { width: 10%; } .progress-bar.width-5::after { width: 5%; } .review-count-item .ratings i { color: #ffa41c; } .ratings.five-out-of-five i { font-weight: 600; } .ratings.five-out-of-four i:nth-child(5) { color: #d2e3f9; } .ratings.five-out-of-three i:nth-child(5), .ratings.five-out-of-three i:nth-child(4) { color: #d2e3f9; } .ratings.five-out-of-two i:nth-child(5), .ratings.five-out-of-two i:nth-child(4), .ratings.five-out-of-two i:nth-child(3) { color: #d2e3f9; } .ratings.five-out-of-one i:nth-child(5), .ratings.five-out-of-one i:nth-child(4), .ratings.five-out-of-one i:nth-child(3), .ratings.five-out-of-one i:nth-child(2) { color: #d2e3f9; } .course-review-item-one { display: flex; margin-top: 50px; } .course-review-item-one:first-child { margin-top: 0; } .course-review-item-one .thumb img { width: 150px; min-width: 150px; height: 150px; border-radius: 50%; margin-right: 30px; } .course-review-item-one .info .top { display: flex; gap: 15px; margin-bottom: 15px; } .course-review-item-one .info .top h4 { margin: 0; position: relative; z-index: 1; margin-right: 10px; padding-right: 10px; } .course-review-item-one .info .top h4::after { position: absolute; right: -9px; top: 5px; content: ""; height: 18px; width: 2px; border-right: 1px solid var(--color-paragraph); } .course-review-item-one .info .ratings i { color: #ffa41c; font-size: 14px; } .course-review-item-one .info .ratings { display: block; margin-bottom: 15px; } .course-review-item-one .info .bottom { border-top: 1px dashed #d2e3f9; padding-top: 25px; } .course-review-item-one .info .bottom ul { margin: 0; padding: 0; list-style: none; } .course-review-item-one .info .bottom ul li { display: inline-block; margin-right: 15px; padding-right: 15px; position: relative; z-index: 1; } .course-review-item-one .info .bottom ul li::after { position: absolute; right: -3px; top: 50%; transform: translateY(-50%); content: ""; height: 5px; width: 5px; background: var(--dark); border-radius: 50%; } .course-review-item-one .info .bottom ul li:last-child::after { display: none; } .course-review-item-one .info .bottom ul li i { font-weight: 100; margin-right: 7px; } /* Course Details Category */ .course-preview-info .content .top { display: flex; align-items: center; justify-content: space-between; background: var(--bg-gray-gradient); padding: 15px 30px; } .course-preview-info .content .top h2 { margin: 0; } .course-preview-info .content .top .btn { padding: 10px 35px; } .course-preview-info .content .course-includes .info { padding: 30px; } .course-preview-info .content .course-includes .info p { color: var(--color-heading); border: 1px solid #dddddd; padding: 5px; border-radius: 5px; text-align: center; } .course-preview-info .content .course-includes ul { margin: 0; padding: 0; list-style: none; } .course-preview-info .content .course-includes ul li i { width: 30px; } .course-preview-info .content .course-includes ul li { font-weight: 500; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e7e7e7; } .course-preview-info .content .course-includes ul li:first-child { margin-top: 0; padding-top: 0; border: none; } .course-preview-info .content .course-includes ul li span { float: right; } .course-single-meta .item { position: relative; z-index: 1; margin-right: 30px; padding-right: 40px; float: left; } .course-single-meta .item.author { align-items: center; display: inline-flex; } .course-single-meta .item.author .thumb img { height: 60px; width: 60px; min-width: 60px; border-radius: 50%; margin-right: 15px; } .course-single-meta .item.author .thumb a { display: block; } .course-single-meta .item::after { position: absolute; right: 0; top: 5px; bottom: 5px; width: 2px; border-left: 1px solid #dddddd; content: ""; } .course-single-meta .item:last-child { margin-right: 0; } .course-single-meta .item:last-child::after { display: none; } .course-single-meta h4 { margin-bottom: 7px; } .course-single-meta a { text-transform: uppercase; font-size: 15px; } .course-single-meta i { font-size: 14px; color: #ffa41c; } .course-single-meta span { margin-left: 5px; font-weight: 600; } .course-single-meta { display: block; float: left; width: 100%; padding-bottom: 50px; position: relative; z-index: 1; margin-bottom: 50px; } .course-detils-area { position: relative; z-index: 1; } .course-detils-area::after { position: absolute; left: 0; top: 0; content: ""; height: 230px; right: 0; background: var(--white); z-index: -1; box-shadow: 0 8px 10px -2px rgba(0, 0, 0, 0.08); } .course-cat-single { position: relative; z-index: 1; background: var(--white); box-shadow: 0px 15px 60px -10px rgb(109 117 143 / 33%); overflow: hidden; border-radius: 10px; margin-top: 30px; } .course-cat-single:first-child { margin-top: 0; } @media (min-width: 1024px) { .course-details-category { position: sticky; top: 140px; } } .top-instructor-widget { padding: 30px; } .course-cat-single .widget-title { margin-bottom: 30px; } .top-instructor-single { display: flex; margin-top: 30px; } .top-instructor-single .thumb img { height: 60px; width: 60px; min-width: 60px; border-radius: 50%; margin-right: 20px; } .top-instructor-single .info h5 { margin-bottom: 4px; } .top-instructor-single .info span { text-transform: uppercase; font-size: 14px; } .top-instructor-single .info .ratings { display: block; } .top-instructor-single .info .ratings i { color: #ffa41c; font-size: 13px; } .top-instructor-single .info .ratings span { margin-left: 5px; font-weight: 600; } .top-instructor-single ul { margin: 0; padding: 0; list-style: none; display: flex; column-gap: 15px; flex-wrap: wrap; row-gap: 5px; border-top: 1px dashed #d2e3f9; margin-top: 15px; padding-top: 15px; } .top-instructor-single ul i { font-weight: 100; color: var(--color-primary); margin-right: 3px; } /* ============================================================== # Course Details Two =================================================================== */ .course-details-two::after { display: none; } .course-details-two { position: relative; z-index: 1; } .course-details-two::before { position: absolute; left: 0; top: 0; content: ""; height: 10%; width: 100%; background: var(--bg-gray-gradient-secondary); z-index: -1; } .course-single-meta-box { position: relative; z-index: 1; margin-bottom: 60px; } .course-single-meta-box .course-single-meta { margin: 0; } .course-single-meta-box::after { position: absolute; left: 0; bottom: 0; content: ""; height: 100%; right: 0; background: var(--white); z-index: -1; box-shadow: 0 8px 10px -2px rgba(0, 0, 0, 0.08); } .course-details-two .course-details-category { position: relative; top: -170px; z-index: 1; margin-bottom: -170px; } .course-preview-info.style-two .content .top { display: block; background: transparent; padding: 30px; padding-bottom: 10px; } .course-preview-info.style-two .content .top a.btn { width: 100%; padding: 15px 35px; margin-top: 12px; } .course-preview-info.style-two .content .top a.btn.btn-border { padding: 13px 35px; border: 1px solid #b9b0b0; } .course-preview-info.style-two .content .top .pricce { margin-bottom: 15px; } .course-preview-info.style-two .content .top .pricce del { color: #c5c4cf; margin-right: 5px; font-weight: 500; font-size: 30px; } /* ============================================================== # Related Course Carousel =================================================================== */ .related-course-carousel { margin: -15px; } .related-course-carousel .swiper-slide { padding: 15px; } .related-course-carousel .swiper-slide .course-style-one-item { box-shadow: 0 0 16px 0px rgb(109 117 143 / 18%); } /* ============================================================== # Course Category =================================================================== */ .category-style-one-area { overflow: hidden; } .category-style-one-item { background: var(--white); box-shadow: 0 0 16px 0px rgb(109 117 143 / 18%); padding: 30px; border-radius: 10px; } .category-style-one-carousel .swiper-wrapper .swiper-slide { padding: 15px; } .category-style-one-carousel { margin: -15px; overflow: hidden; position: relative; } .category-style-one-item img { height: 70px; margin-bottom: 30px; } .category-style-one-item span { display: inline-block; border: 1px solid #b1dcd4; padding: 0 15px; border-radius: 5px; color: var(--color-heading); } .category-style-one-item.color_1 span { border-color: #1EC1D9; } .category-style-one-item.color_2 span { border-color: #D94DA6; } .category-style-one-item.color_3 span { border-color: #FF922E; } /* ============================================================== # Category Style Two =================================================================== */ .category-style-two-item a { border: 1px solid #dddddd; overflow: hidden; border-radius: 20px; padding: 15px; position: relative; z-index: 1; display: block; background: var(--white); } .category-style-two-item .thumb img { border-radius: 15px; } .category-style-two-item .info { padding: 15px; padding-bottom: 30px; } .category-style-two-item .info h4 strong { display: block; } .category-style-two-item a i { display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; background: var(--white); color: var(--color-heading); border-radius: 50%; font-weight: 300; font-size: 20px; transform: rotate(-45deg); position: absolute; right: 30px; top: 30px; border: 1px solid #e7e7e7; } .category-style-two-carousel .swiper-slide:nth-child(2n) a { display: flex; flex-direction: column-reverse; } .category-style-two-carousel .swiper-slide:nth-child(2n) .info { padding: 15px; padding-top: 30px; } .category-style-two-carousel .swiper-slide:nth-child(2n) i { top: auto; bottom: 30px; } .category-style-two-item i, .category-style-two-item h4, .category-style-two-item span { transition: all 0.35s ease-in-out; } .category-style-two-item .info span { font-size: 14px; font-weight: 500; color: var(--white); display: inline-block; text-transform: uppercase; background: var(--color-primary); padding: 2px 15px; border-radius: 5px; } .category-style-two-item a:hover i { color: var(--white); border-color: transparent; transform: rotate(0); background: var(--color-primary); } .category-style-two-item .thumb { overflow: hidden; border-radius: 10px; } .category-style-two-item .thumb img { transition: all 0.35s ease-in-out; } .category-style-two-item:hover .thumb img { transform: scale(1.07); } /* ============================================================== # Category Style Three =================================================================== */ .category-style-three-area { position: relative; z-index: 1; overflow: hidden; } .category-style-three-area .shape img { position: absolute; left: 0; bottom: 0; z-index: -1; } .row.gutter-sm { --bs-gutter-x: 10px; } .category-style-three-item a { display: block; background: rgba(255, 255, 255, 0.7); padding: 50px; border-radius: 30px; position: relative; z-index: 1; overflow: hidden; backdrop-filter: blur(30px); } .category-style-three-item a .icon img { height: 50px; position: absolute; right: 50px; } .category-style-three-item a .icon h6 { margin: 0; font-size: 17px; } .category-style-three-item a .right .thumb { display: flex; align-items: center; margin-left: 15px; margin-right: 10px; } .category-style-three-item a .right .thumb img { height: 41px; width: 41px; border-radius: 50%; margin-left: -15px; border: 2px solid var(--white); } .category-style-three-item a .right .thumb i { display: inline-block; height: 40px; width: 40px; line-height: 36px; background: var(--dark); text-align: center; border-radius: 50%; font-weight: 300; margin-left: -15px; color: var(--white); border: 2px solid var(--white); } .category-style-three-item a .bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 25px; } .category-style-three-item a .bottom .right { display: flex; align-items: center; } .category-style-three-item a span { display: inline-block; padding: 3px 15px; border-radius: 30px; margin-bottom: 20px; border: 1px solid #1cb098; background: rgba(255, 255, 255, 0.8); } .category-style-three-item a:after { position: absolute; left: 0; bottom: 0; content: ""; height: 40%; width: 100%; background: var(--color-primary); z-index: -1; transition: all 0.35s ease-in-out; opacity: 0; visibility: hidden; } .category-style-three-item a:hover:after, .active .category-style-three-item a:after { height: 100%; opacity: 1; visibility: visible; } .category-style-three-item a:hover .icon img, .active .category-style-three-item a .icon img { filter: brightness(0) invert(1); } .category-style-three-item a:hover, .active .category-style-three-item a { color: var(--color-heading); } .category-style-three-item a:hover span, .active .category-style-three-item a span { border-color: #e2f5ec; } .category-style-three-item a .icon img, .category-style-three-item a h4, .category-style-three-item a .right, .category-style-three-item a i { transition: all 0.35s ease-in-out; } .category-style-three-item a:hover h4, .category-style-three-item a:hover .right, .active .category-style-three-item a h4, .active .category-style-three-item a .right { color: var(--white); } .category-style-three-item a:hover .right .thumb i, .active .category-style-three-item a .right .thumb i { background: var(--white); color: var(--color-heading); } /* ============================================================== # Brand =================================================================== */ .brand-items { position: relative; display: flex; align-items: center; } .brand-style-two-area .brand-items { padding-top: 100px; padding-bottom: 100px; margin-top: -20px; } .brand-conetnt { display: flex; align-items: center; justify-content: center; animation: slide-left 50s linear infinite; } .brand-conetnt h2 { margin: 0; font-size: 120px; margin: 0 100px; font-weight: 600; line-height: 1; text-decoration: underline; text-transform: capitalize; } .bg-dark .brand-conetnt h2 { color: var(--white); } .brand-conetnt .item:nth-child(2n) h2 { border: none; text-decoration: none; color: transparent; -webkit-text-stroke: 1px var(--white); } .brand-conetnt .item { position: relative; } .brand-conetnt .item::after { position: absolute; right: -50px; top: 50%; content: ""; height: 100px; width: 100px; background: url(../img/icon/11.png); background-repeat: no-repeat; background-position: right center; background-size: contain; transform: translateY(-50%); margin-top: 10px; } .color-secondary .brand-conetnt .item::after { background: url(../img/icon/52.png); background-repeat: no-repeat; background-position: right center; background-size: contain; } @-webkit-keyframes slide-left { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slide-left { 0% { -webkit-transform: translateX(0%); transform: translateX(0%); } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } /* ============================================================== # About =================================================================== */ .thumb-style-two { display: grid; grid-template-columns: 1fr 1fr; position: relative; z-index: 1; } .thumb-style-two img:first-child { border-radius: 200px 200px 30px 30px; margin-top: 80px; max-width: 130%; border: 2px solid var(--white); } .thumb-style-two img:nth-child(2) { border-radius: 30px 30px 200px 200px; margin-left: -5%; max-width: 105%; } .thumb-style-two .shape img:first-child { border-radius: 0; position: absolute; left: 0; top: -80px; z-index: -1; opacity: 0.3; border: navajowhite; } .thumb-style-two .shape img:nth-child(2) { border: none; border-radius: 0; position: absolute; right: 60px; bottom: 50px; width: 100px; } .thumb-style-two .video-play-button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .thumb-style-two .video-play-button::after { border-color: var(--white); } .mini-card-style-one { display: inline-flex; background: rgba(255, 255, 255, 0.6); padding: 30px; border: 1px solid #e7e7e7; border-radius: 10px; } .bg-gray-gradient-secondary .mini-card-style-one { background: rgba(255, 255, 255, 0.6); border: 2px solid var(--white); } .mini-card-style-one .icon img { margin-right: 15px; width: 50px; min-width: 50px; } .mini-card-style-one h4 { margin-bottom: 10px; } .mini-card-style-one p { margin: 0; } .about-style-one-info .list-style-two { margin-top: 30px; } .button-double { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; } .category-swiper-nav { right: 0; bottom: 0; display: flex; left: 0; align-items: center; position: relative; gap: 80px; justify-content: center; border: 1px solid #E7E7E8; padding: 10px; border-radius: 10px; height: 100%; margin-right: 20px; } .category-swiper-nav > div { height: 40px; width: 40px; background: var(--color-primary); z-index: 9; position: relative; border-radius: 50%; } .category-swiper-nav > div::after { position: absolute; top: 7px; content: ""; height: 100%; width: 100%; font-family: "Font Awesome 5 Pro"; text-align: center; color: var(--white); } .category-swiper-nav .category-button-next::after { content: "\f105"; } .category-swiper-nav .category-button-prev::after { content: "\f104"; } .category-swiper-nav .category-pagination { background: transparent; position: absolute; line-height: 40px; font-size: 24px; width: auto; font-weight: 600; left: 50%; top: 50%; transform: translate(-50%, -50%); } .bg-gray-gradient-secondary .category-swiper-nav { background: var(--color-primary); color: var(--white); } .bg-gray-gradient-secondary .category-swiper-nav > div { background: var(--white); } .bg-gray-gradient-secondary .category-swiper-nav > div::after { color: var(--color-heading); } .bg-gray-gradient-secondary .category-swiper-nav > div.category-pagination { background: transparent; } .bg-gray-gradient-secondary .category-style-one-item { box-shadow: none; background: rgba(255, 255, 255, 0.5); border: 2px solid var(--white); } .bg-gray-gradient-secondary .category-style-one-item .icon img { height: 60px; margin-bottom: 30px; } /* About Style Two */ .about-style-two-bottom-info .d-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px; } .about-style-two-bottom-info .d-grid .thumb img { height: 100%; object-fit: cover; object-position: center; border-radius: 10px 10px 0 0; width: 100%; position: absolute; } .about-style-two-bottom-info .d-grid .thumb img:nth-child(2) { width: auto; position: absolute; right: 7%; top: -50px; height: 100px; } .tab-style-one .nav.nav-tabs { margin: 0; padding: 0; list-style: none; border: none; display: inline-block; max-width: max-content; overflow: hidden; border-radius: 10px; margin-bottom: 30px; } .about-style-two-bottom-info ul.list-style-one { margin-top: 10px; } .tab-style-one .nav.nav-tabs::before, .tab-style-one .nav.nav-tabs::after { display: none; } .tab-style-one .nav.nav-tabs li.nav-item { float: left; margin: 0; padding: 0; } .tab-style-one { display: flex; flex-direction: column; padding-bottom: 120px; } .tab-style-one .nav.nav-tabs li.nav-item img { height: 30px; margin-right: 10px; } .tab-style-one .nav.nav-tabs li.nav-item button { margin: 0; padding: 0; border: none; display: inline-block; background: var(--dark); border-radius: 0; padding: 15px 20px; color: var(--white); } .tab-style-one .nav.nav-tabs li.nav-item button.active { background: var(--color-primary); } .color-secondary .tab-style-one .nav.nav-tabs li.nav-item button.active { background: var(--color-style-two); } .about-style-two-thumb { height: 100%; display: flex; flex-direction: column; justify-content: end; margin-left: -30%; position: relative; z-index: 1; } .about-style-two-thumb img:nth-child(2) { position: absolute; left: 30px; top: 100px; z-index: -1; height: 65px; animation: UpDown 10s linear infinite; } .about-style-two-thumb img { margin-bottom: -15px; } .about-style-two-top-info { display: flex; gap: 50px; } .about-style-two-top-info p { margin: 0; } .experience-card-one { height: 200px; width: 200px; background: var(--bg-gray-gradient-secondary); text-align: center; position: relative; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; } .experience-card-one::after { position: absolute; left: -2px; top: -2px; right: -2px; bottom: -2px; content: ""; background: var(--bg-gradient); z-index: -1; border-radius: 12px; } .color-secondary .experience-card-one::after { background: var(--bg-gradient-secondary); } .counter { display: flex; align-items: center; } .experience-card-one .counter { justify-content: center; font-size: 60px; line-height: 1; font-weight: 600; color: var(--color-primary); margin-bottom: 12px; } .color-secondary .experience-card-one .counter { color: var(--color-style-two); } .experience-card-one h4 { margin: 0; padding: 0 15px; } .about-style-two-bottom-info .thumb { width: 200%; position: relative; } /* ============================================================== # About Style Three =================================================================== */ .about-style-three-thumb { height: 100%; position: relative; z-index: 1; } .about-style-three-thumb img { height: 100%; object-fit: cover; object-position: center; } .about-style-three-thumb img:nth-child(2) { position: absolute; height: auto; width: auto; right: -55px; bottom: -40px; } .about-style-three-info .fact-style-two { display: inline-flex; align-items: center; position: relative; z-index: 2; } .about-style-three-info .fact-style-two .fun-fact { background: var(--white); padding-right: 50px; border-right: 1px solid #dddddd; margin-right: 50px; margin-bottom: 40px; } .about-style-three-info .fact-style-two .fun-fact h4 { margin-bottom: 0; } .about-style-three-info .fact-style-two .fun-fact .counter { font-size: 60px; font-weight: 600; line-height: 1; margin-bottom: 10px; color: var(--color-primary); } .about-style-three-info .fact-style-two .fun-fact:last-child { border-right: none; margin-right: 0; padding-right: 0; } .about-style-three-info .content { padding: 50px; padding-right: 0; padding-bottom: 0; } ul.list-style-four { padding: 0; margin-bottom: 0; list-style: none; display: flex; gap: 30px; flex-wrap: wrap; } ul.list-style-four img { width: 70px; min-width: 70px; margin-right: 20px; } ul.list-style-four li { display: flex; } ul.list-style-four li h5 { margin-bottom: 5px; } ul.list-style-four li p { margin: 0; } /* ============================================================== # Profile =================================================================== */ .instructor-profile-cover { background: var(--dark); border-radius: 10px; padding: 60px; margin-bottom: 90px; padding-bottom: 30px; padding-top: 250px; position: relative; } .instructor-profile-cover-items { display: grid; grid-template-columns: 1fr 4fr; align-items: end; gap: 50px; } .instructor-profile-cover-items .thumb img { border-radius: 50%; border: 10px solid var(--white); } .instructor-profile-cover-items .thumb { position: relative; z-index: 1; } .instructor-profile-cover-items .thumb .author { position: absolute; left: 0; bottom: -130px; } .instructor-profile-cover-items .thumb .author::before { position: absolute; content: ""; bottom: 100px; left: -18px; height: 37px; width: 19px; border-bottom-right-radius: 20px; box-shadow: 0 20px 0 0 var(--white); } .instructor-profile-cover-items .thumb .author::after { position: absolute; content: ""; bottom: 100px; right: -18px; height: 37px; width: 19px; border-bottom-left-radius: 20px; box-shadow: 0 20px 0 0 var(--white); } .instructor-profile-cover-items .info { display: flex; justify-content: space-between; align-items: end; } .instructor-profile-cover-items .info ul { margin: 0; padding: 0; list-style: none; } .instructor-profile-cover-items .info ul li { display: inline-block; margin-right: 30px; position: relative; z-index: 1; } .instructor-profile-cover-items .info ul li i { margin-right: 3px; height: 36px; width: 36px; text-align: center; line-height: 34px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; font-size: 14px; } .instructor-profile-cover-items .left h4 { margin-bottom: 5px; } .instructor-profile-cover-items .left span { text-transform: uppercase; font-size: 15px; } .instructor-profile-cover-items .right .reviews { font-weight: 600; margin-bottom: 5px; } .instructor-profile-cover-items .right .reviews i { font-size: 14px; color: #ffa41c; } .instructor-profile-cover-items .right .reviews span { margin-left: 5px; } .instructor-profile-cover-items .right { display: inline-block; } .advisor-profile-info { display: flex; gap: 50px; background: var(--bg-gray-gradient); padding: 50px; border-radius: 10px; box-shadow: 0px 1px 1px rgba(3, 11, 30, .14), 0px 1px 2px rgba(3, 11, 30, .06); } .advisor-profile-info p:last-child { margin-bottom: 0; } .advisor-profile-info ul.social { margin: 0; padding: 0; list-style: none; display: flex; gap: 10px; } .advisor-profile-info ul.social li a { display: inline-block; } .advisor-profile-info ul.social li a i { display: inline-block; height: 45px; width: 45px; line-height: 45px; background: var(--color-primary); text-align: center; color: var(--white); border-radius: 50%; } .advisor-profile-info ul.social li a i.fa-facebook-f { background: #1877F2; } .advisor-profile-info ul.social li a i.fa-pinterest { background: #dd0e1a; } .advisor-profile-info ul.social li a i.fa-linkedin-in { background: #0077B5; } .advisor-profile-info ul.social li a i.fa-dribbble { background: #ea4c89; } .advisor-profile-info ul.social li a i.fa-youtube { background: #FF0000; } .heading i { background: var(--color-primary); margin-right: 5px; font-size: 26px; display: inline-block; height: 45px; width: 45px; text-align: center; line-height: 47px; color: var(--white); border-radius: 50%; } /* ============================================================== # About =================================================================== */ .about-style-four-info .bottom-info { display: grid; grid-template-columns: 1fr 1.4fr; gap: 50px; margin-left: -35%; margin-top: 50px; position: relative; } .about-style-four-info .bottom-info .left img { height: 100%; object-fit: cover; object-position: center; } .about-style-four-thumb { position: relative; } .about-style-four-info .bottom-info .right .btn { max-width: max-content; } .about-style-four-info .bottom-info .left { border: 5px solid var(--white); } .about-style-four-info .title { border-bottom: 2px solid; padding-bottom: 30px; } .about-style-four-area { position: relative; z-index: 1; } .about-style-four-area .shape img { position: absolute; right: 7%; top: 150px; width: 8%; z-index: -1; animation: UpDown 5s linear infinite; } /* ============================================================== # About Style Five =================================================================== */ .about-style-five-area { position: relative; z-index: 1; } .about-style-five-area::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 50%; background: var(--color-primary); z-index: -1; } .about-style-five-area::before { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 50%; background: url(../img/shape/55.png); background-size: cover; background-position: center; } .about-style-five-thumb { position: relative; } .about-style-five-thumb .d-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; margin-top: 30px; } .about-style-five-thumb img { border-radius: 10px; } .about-style-five-thumb .d-grid img { height: 100%; object-fit: cover; object-position: center; } a.round-text { display: inline-block; height: 150px; width: 150px; background: var(--white); position: absolute; right: -70px; top: 50px; padding: 15px; border-radius: 50%; border: 1px solid #e7e7e7; } a.round-text i { display: inline-block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); font-size: 40px; font-weight: 900; color: transparent; -webkit-text-stroke: 1px var(--color-heading); } a.round-text img { animation: spinner 20s infinite linear; } /* ============================================================== # About Style Five =================================================================== */ .about-style-six-thumb { position: absolute; left: 0; width: 40%; bottom: 0; top: 120px; } .about-style-six-thumb img { height: 100%; width: 100%; object-fit: cover; object-position: center; border-top-right-radius: 10px; } .about-style-six-info .top-info { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; } .about-style-six-info .top-info img { border-radius: 10px; } .about-style-six-info .top-info h2 { font-size: 100px; line-height: 1; border-bottom: 2px solid; padding-bottom: 25px; margin-top: -15px; text-transform: capitalize; } .about-style-six-info .top-info h2 strong { display: block; } .about-style-six-info p { margin: 0; } /* ============================================================== # About Style Seven =================================================================== */ .about-style-seven-items { background: var(--white); padding: 80px; box-shadow: 0px 15px 60px -10px rgb(109 117 143 / 33%); border-radius: 15px; margin-right: -5%; margin-left: -5%; position: relative; } .about-style-seven-thumb { position: relative; top: -80px; margin-bottom: -80px; } .about-style-seven-items .shape { position: absolute; right: -80px; top: 115px; width: 150px; } .about-style-seven-thumb img { border-radius: 0 0 400px 400px; } .about-style-seven-info p { margin-bottom: 0; } .about-style-seven-info .d-flex { justify-content: space-between; gap: 50px; align-items: center; } .about-style-seven-info .d-flex img { height: 130px; width: 130px; border-radius: 50%; min-width: 130px; border: 3px solid var(--color-style-three); } .about-style-seven-info .d-flex .fun-facts { display: flex; gap: 60px; background: var(--color-style-three); padding: 30px; border-radius: 10px 100px 100px 10px; padding-right: 50px; } .about-style-seven-info .d-flex .fun-facts h4 { color: var(--white); margin: 0; font-size: 17px; } .about-style-seven-info .d-flex .fun-facts .counter { font-size: 36px; line-height: 1; margin-bottom: 10px; color: var(--white); font-weight: 600; } .about-style-seven-info .info { position: relative; margin-top: 40px; } .about-style-seven-info .info img { position: absolute; right: 100%; margin-right: 30px; height: 100px; bottom: 0; } .about-style-seven-info .title { padding-right: 20%; } .about-style-seven-thumb a.round-text { top: 100px; } .about-style-seven-thumb > img:nth-child(2) { position: absolute; left: 0; bottom: 40px; } .about-style-seven-area { position: relative; z-index: 1; } .about-style-seven-area::after { position: absolute; left: 0; top: 0; content: ""; height: 150px; width: 100%; background: var(--white); z-index: -1; } .activities-area .shape { position: absolute; right: 0; top: 25%; animation: fadeLeftRight 15s linear infinite; } /* ============================================================== # Child Program =================================================================== */ .child-program-area .shape-bottom { position: absolute; left: 0; bottom: -1px; z-index: -1; } .child-program-area .shape { position: absolute; left: 0; max-width: 15%; z-index: -1; animation: fadeLeftRight 10s linear infinite; } .child-program-area { position: relative; z-index: 1; overflow: hidden; padding-bottom: 150px; } .child-program-style-one-item { border-radius: 30px; background: var(--white); text-align: center; position: relative; z-index: 1; } .child-program-style-one-item::before { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; border: 1px solid var(--color-style-three); z-index: -1; border-radius: 30px; } .child-program-style-one-item.color-style-one::before { border-color: #eb3ea9; } .child-program-style-one-item.color-style-two::before { border-color: #ff922e; } .child-program-style-one-item.color-style-three::before { border-color: #307ad5; } .child-program-style-one-item .info { padding: 30px 45px; padding-top: 20px; } .child-program-style-one-item h4 { font-size: 20px; } .child-program-style-one-item span { display: inline-block; background: url(../img/shape/68.png); background-size: contain; background-repeat: no-repeat; background-position: center; color: var(--white); padding: 25px; margin-top: -20px; margin-bottom: -5px; font-weight: 600; } .child-program-style-one-item.color-style-one span { background: url(../img/shape/70.png); background-size: contain; background-repeat: no-repeat; background-position: center; } .child-program-style-one-item.color-style-two span { background: url(../img/shape/71.png); background-size: contain; background-repeat: no-repeat; background-position: center; } .child-program-style-one-item.color-style-three span { background: url(../img/shape/72.png); background-size: contain; background-repeat: no-repeat; background-position: center; } .child-program-style-one-item .info > a { display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 47px; background: var(--color-style-three); color: var(--white); border-radius: 50%; position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); border: 2px solid var(--white); } .child-program-style-one-item.color-style-one .info > a { background: #D94DA6; } .child-program-style-one-item.color-style-two .info > a { background: #FF922E; } .child-program-style-one-item.color-style-three .info > a { background: #307AD5; } .child-program-carousel .swiper-wrapper { padding-bottom: 25px; } .child-program-style-one-item .info > a i { transform: rotate(-45deg); font-weight: 500; } .child-program-style-one-item .thumb { overflow: hidden; border-radius: 30px 30px 0 0; position: relative; } .child-program-style-one-item .thumb::after { position: absolute; left: 1px; bottom: -2px; content: ""; height: 40px; right: 1px; background: url(../img/shape/69.png); background-size: cover; background-repeat: no-repeat; background-position: bottom center; } .child-program-carousel .swiper-slide:nth-child(2n) { margin-top: 80px; } /* ============================================================== # Session Time =================================================================== */ .session-time-items { background-size: contain; background-repeat: no-repeat; background-position: center; padding: 30%; display: flex; flex-direction: column; justify-content: center; padding-top: 25%; padding-bottom: 12%; } .session-time-items ul { margin: 0; padding: 0; list-style: none; } .session-time-items ul li { display: flex; justify-content: space-between; align-items: center; background: var(--color-style-three); color: var(--white); padding: 10px 30px; margin-top: 10px; border-radius: 50px; font-weight: 600; gap: 50px; position: relative; z-index: 1; } .session-time-items ul li::after { position: absolute; left: 50%; transform: translateX(-50%); height: 50px; width: 1px; content: ""; border-right: 10px solid var(--white); } .session-time-items ul li:first-child { margin-top: 0; } .session-time-items .site-heading { margin-bottom: 40px; } /* ============================================================== # Our Advantages =================================================================== */ .fun-fact-style-three-items { display: grid; grid-template-columns: 1fr 1fr 1fr; margin-right: 160px; border: 1px dashed rgba(255, 255, 255, 0.2); overflow: hidden; border-radius: 10px; } .fun-fact-style-three-items .funfact-style-one-item { border-right: 1px dashed rgba(255, 255, 255, 0.2); padding: 30px; } .fun-fact-style-three-items .funfact-style-one-item:last-child { border: none; } .fun-fact-style-three-items .funfact-style-one-item .icon::after { background: var(--white); opacity: 0.08; } .advantages-info { height: 100%; position: relative; z-index: 1; padding: 0 50px; margin-left: -120px; } .advantages-info h2 { position: relative; top: -20px; margin-bottom: 10px; } .advantages-info::after { position: absolute; left: 0; top: -500px; bottom: -500px; width: 100%; background: var(--color-primary); content: ""; z-index: -1; } .theme-skyblue .advantages-info::after { background: var(--color-style-three); } /* ============================================================== # Why Choose Us =================================================================== */ .grid-style-one-items { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .grid-style-one { padding: 40px 50px; background: var(--color-style-three); border-radius: 10px; margin-top: 30px; } .grid-style-one:first-child { margin-top: 0; background: #FF922E; } .grdi-style-one-item:nth-child(2) .grid-style-one { background: var(--color-primary); height: 100%; display: flex; flex-direction: column; justify-content: center; } .grid-style-one img { margin-bottom: 25px; max-height: 75px; } .grid-style-one p { margin: 0; } .progress-style-one-items .progress { height: 5px; overflow: inherit; border-radius: 50px; position: relative; z-index: 1; background: rgba(255, 255, 255, 0.2); } .progress-style-one-items .progress .progress-bar { overflow: inherit; position: relative; border-radius: 50px; background: var(--white); height: auto; width: inherit; } .progress-style-one-items .progress .progress-bar span { position: absolute; right: 0; top: -45px; font-size: 16px; line-height: 1; padding: 4px 10px; padding-bottom: 4px; border-radius: 30px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.4); } .progress-style-one-items .progress-box { margin-bottom: 35px; } .progress-style-one-items .progress::after { position: absolute; left: 0; top: -5px; content: ""; height: 15px; width: 15px; border-radius: 50%; } .progress-style-one-items .progress-box h5 { margin-bottom: 20px; } .grid-style-one .card-style-three { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.5); margin-top: 10px; } .grid-style-one .card-style-three img { margin-bottom: 0; } .choose-us-style-one-info .thumbs { height: 100%; position: relative; z-index: 1; } .choose-us-style-one-info .thumbs img { height: 100%; object-fit: cover; object-position: center; border-radius: 10px 0 0 10px; } .fact-style-one-item { display: inline-block; border-right: 1px solid #c5d1d6; margin-right: 40px; padding-right: 40px; } .fact-style-one-item:last-child { border: none; margin-right: 0; padding-right: 0; } .fact-style-one-item h5 { text-transform: uppercase; font-weight: 400; font-size: 16px; } .fact-style-one-item h2 { margin-bottom: 15px; font-size: 42px; } .fact-style-one-item h6 { margin-bottom: 0; text-transform: capitalize; font-size: 20px; font-weight: 400; } .fact-style-one { display: flex; } .fact-style-one p { margin: 0; padding: 0; } .choose-us-style-one-info .thumbs img:nth-child(2) { height: 110px; position: absolute; left: -45px; bottom: -15px; } /* ============================================================== # Choose Us Style Two =================================================================== */ .nav.nav-tabs.tab-style-two-nav { margin: 0; border: none; background: var(--white); display: flex; flex-direction: column; gap: 15px; padding: 50px; border-radius: 10px; border: 2px solid; } .nav.nav-tabs.tab-style-two-nav::before, .nav.nav-tabs.tab-style-two-nav::after { display: none; } .nav.nav-tabs.tab-style-two-nav li.nav-item { display: block; } .nav.nav-tabs.tab-style-two-nav li.nav-item .nav-link { display: flex; width: 100%; justify-content: space-between; margin: 0; border: 1px solid #e7e7e7; padding: 15px 30px; border-radius: 10px; align-items: center; font-size: 20px; transition: all 0.35s ease-in-out; font-weight: 500; color: var(--color-heading); position: relative; z-index: 1; overflow: hidden; } .nav.nav-tabs.tab-style-two-nav li.nav-item .nav-link::after { position: absolute; left: 50%; top: -60px; content: ""; height: 100px; width: 100px; background: var(--white); z-index: -1; transform: translateX(-50%); border-radius: 50%; opacity: 0.15; } .nav.nav-tabs.tab-style-two-nav li.nav-item .nav-link::before { position: absolute; left: 50%; bottom: -60px; content: ""; height: 100px; width: 100px; background: var(--white); z-index: -1; transform: translateX(-50%); border-radius: 50%; opacity: 0.15; } .nav.nav-tabs.tab-style-two-nav li.nav-item .nav-link img { height: 40px; } .nav.nav-tabs.tab-style-two-nav li.nav-item .nav-link.active { background: var(--dark); border-color: transparent; color: var(--white); } .nav.nav-tabs.tab-style-two-nav li.nav-item .nav-link.active img { filter: brightness(0) invert(1); } .choose-us-style-two-content { display: grid; height: 100%; grid-template-columns: 1.3fr 1fr; border-radius: 10px 0 0 10px; gap: 15px; } .choose-us-style-two-content .info { padding: 50px; display: flex; flex-direction: column; justify-content: center; background: var(--bg-gradient); border-radius: 10px; position: relative; z-index: 1; } .color-secondary .choose-us-style-two-content .info { background: var(--bg-gradient-secondary); } .choose-us-style-two-content .info::after { position: absolute; right: 0; bottom: 0; content: ""; height: 100%; width: 100%; background: url(../img/shape/41.png) repeat center / auto; z-index: -1; } .choose-us-style-two-content .thumb img { height: 100%; object-fit: cover; object-position: left; border-radius: 10px 0 0 10px; } .tab-content.tab-style-two-content, .tab-content.tab-style-two-content div { height: 100%; } .choose-us-style-two-content .info ul.list-style-two li::after { color: var(--white); font-weight: 900; } /* ============================================================== # Choose Us Style Three =================================================================== */ .choose-us-style-three-area .shape { position: absolute; left: 5%; top: 80px; z-index: -1; } .choose-us-style-three-area { position: relative; z-index: 1; } .choose-us-style-three-area .thumb { position: absolute; right: 0; top: 0; width: 45%; height: 100%; } .choose-us-style-three-area .thumb img { height: 100%; width: 100%; object-fit: cover; object-position: center; } .choose-us-style-three-info .feature-style-one-item { padding: 0; border: none; } .choose-us-style-three-info .d-grid { grid-template-columns: 1fr 1fr; gap: 58px; } .choose-us-style-three-info .feature-style-one-item .icon { border-color: rgba(255, 255, 255, 0.4); } .choose-us-style-three-info p { opacity: 0.9; } .choose-us-style-three-info .feature-style-one-item p { margin: 0; } .choose-us-style-three-area .thumb .video-play-button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: linear-gradient(90deg, var(--color-primary) 30%, var(--color-secondary) 100%); } /* ============================================================== # Feature Style Two =================================================================== */ .experience-card-two .counter { font-size: 90px; line-height: 1; font-weight: 600; color: var(--color-primary); margin-bottom: 50px; } .experience-card-two h3 { margin: 0; border-top: 2px solid var(--dark); display: inline-block; padding-right: 60px; padding-top: 15px; font-size: 32px; } .theme-style-three .experience-card-two .counter { color: var(--color-style-five); } .feature-style-two-item { background: rgba(255, 255, 255, 0.35); padding: 50px; border-radius: 10px; transition: all 0.35s ease-in-out; border: 2px solid var(--white); } .feature-style-two-item:hover { background: var(--white); } .feature-style-two-item .icon img { height: 70px; margin-bottom: 30px; } .feature-style-two-item .bottom { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e7e7e7; padding-top: 25px; } .feature-style-two-item .bottom span { font-size: 50px; font-weight: 700; opacity: 0.16; line-height: 1; } .feature-style-two-item .bottom a { display: inline-block; background: var(--color-primary); color: var(--white); height: 50px; width: 50px; text-align: center; line-height: 50px; font-size: 20px; border-radius: 50%; transform: rotate(-45deg); } .feature-style-two-item:hover .bottom a { transform: rotate(0); } .theme-style-three .feature-style-two-item .bottom a { background: var(--color-style-five); } .feature-style-two-item .bottom a i { font-weight: 100; } .feature-style-two-item:hover { border: 2px solid var(--color-primary); } .theme-style-three .feature-style-two-item:hover { border: 2px solid var(--color-style-five); } .theme-style-three .bg-gray-gradient-secondary { background: linear-gradient(to left, #fff1f1 0%, #e8f3fb 30%, #fff7f4 100%); } .feature-style-two-area { position: relative; z-index: 1; } .feature-style-two-area .shape { position: absolute; right: 0; bottom: -70px; z-index: -1; max-width: 25%; } /* ============================================================== # Certificate =================================================================== */ .certificate-area { overflow: hidden; position: relative; z-index: 1; } .certificate-thumb { position: relative; height: 100%; margin-top: 60px; } .cartifita-style-one-items { position: relative; z-index: 1; } .cartifita-style-one-items::after { position: absolute; left: 0; bottom: 0; content: ""; height: 50%; width: 100%; background: url(../img/shape/46.png); background-size: contain; background-repeat: no-repeat; z-index: 1; max-width: 150px; } .certificate-thumb img { height: 100%; object-fit: contain; position: absolute; bottom: 0; right: 0; } .certificate-info { padding-bottom: 120px; } .certificate-area .shape img { position: absolute; z-index: -1; } .certificate-area .shape img:first-child { bottom: 120px; left: 40%; height: 30px; } .certificate-thumb img:nth-child(2) { height: 100px; bottom: auto; top: 120px; right: 0; } .certificate-items { display: inline-flex; align-items: center; gap: 30px; border: 1px solid #d3e2e0; padding: 50px; border-radius: 30px; background: var(--bg-gray); } .certificate-items .thumb img { border-radius: 14px; } .certificate-items .info span { display: block; } .certificate-items .info h4 { margin-bottom: 10px; } .certificate-items .info .btn { padding: 10px 24px; margin-top: 15px; } /* ============================================================== # Live Course =================================================================== */ .live-course-area { background-size: 50%; background-repeat: no-repeat; background-position: left bottom; } .live-course-items { display: grid; grid-template-columns: 2.5fr 1fr; gap: 0; position: relative; z-index: 1; align-items: flex-start; } .live-course-items .live-instructor { background: var(--white); position: relative; border-radius: 10px; height: auto; box-shadow: 0px 15px 60px -10px rgb(109 117 143 / 33%); top: -80px; } .live-course-items > img { background: #49c0ad; padding: 20px; border-radius: 30px; margin-top: 50px; max-width: 120%; } .live-course-items .live-instructor .thumb { margin-left: 15px; display: inline-flex; align-items: center; } .live-course-items .live-instructor .thumb img { height: 35px; width: 35px; border-radius: 50%; margin-left: -15px; border: 2px solid var(--white); } .live-course-items .live-instructor .thumb i { display: inline-block; height: 35px; width: 35px; text-align: center; line-height: 35px; background: var(--dark); color: var(--white); font-weight: 100; border-radius: 50%; border: 2px solid var(--white); margin-left: -15px; } .live-course-items .live-instructor h6 { margin-bottom: 10px; font-size: 16px; } .live-course-items .live-instructor .info { padding: 30px; } .live-instructor ul { padding: 0; margin-bottom: 0; list-style: none; } .live-instructor ul li { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; } .live-instructor ul li strong { color: var(--color-heading); font-weight: 400; } .live-instructor ul li i { color: #ffa41c; font-size: 13px; margin-right: 3px; } .live-instructor ul li span { display: flex; align-items: center; } .live-course-items .live-instructor::after { position: absolute; right: -50px; bottom: -50px; height: 80%; width: 100%; border: 2px dashed var(--white); content: ""; z-index: -1; border-radius: 10px; opacity: 0.4; } .live-course-items .live-instructor img { border-radius: 10px 10px 0 0; } .step-style-one-items { display: inline-flex; align-items: center; gap: 100px; position: relative; z-index: 1; } .step-style-one-items::after { position: absolute; left: 0; top: 26px; content: ""; height: 2px; width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.3); z-index: -1; } .step-style-one-item span { height: 50px; width: 50px; text-align: center; line-height: 50px; background: var(--color-primary); display: inline-block; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); color: var(--white); font-weight: 700; margin-bottom: 30px; } .step-style-one-item h4 { margin: 0; } .bg-theme .step-style-one-item span { color: var(--white); border-color: rgba(255, 255, 255, 0.5); } .bg-theme .step-style-one-items::after { border-color: rgba(255, 255, 255, 0.3); } .bg-theme .step-style-one-item h4 { color: var(--white); } /* ============================================================== # Advisor =================================================================== */ .advisor-style-one-area { overflow: hidden; } .advisor-style-one-item .info { text-align: center; } .advisor-style-one-item .thumb { position: relative; overflow: hidden; border-radius: 20px; margin-bottom: 25px; } .advisor-style-one-item h4 { margin-bottom: 7px; font-size: 24px; } .advisor-style-one-item span { text-transform: uppercase; display: inline-block; background: var(--bg-gradient); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 600; font-size: 15px; } .social-overlay .icon .inner { padding: 0 40px; border-radius: 10px 10px 0 0; position: relative; z-index: 1; } .social-overlay ul { margin: 0; padding: 0; list-style: none; position: relative; bottom: 20px; } .social-overlay .icon .inner::after { position: absolute; left: 0; bottom: 0; content: ""; height: 100%; width: 100%; background: var(--white); z-index: -1; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%); border-radius: 10px; } .bg-gray-gradient .social-overlay .icon .inner::after { background: #eff3f8; } .bg-gray-gradient-secondary .social-overlay .icon .inner::after { background: #e5f1fc; } .bg-gray .social-overlay .icon .inner::after { background: var(--bg-gray); } .social-overlay .icon { position: relative; z-index: 1; } .social-overlay .icon::before { position: absolute; left: -9px; bottom: 10px; content: ""; height: 35px; width: 22px; border-bottom-right-radius: 20px; box-shadow: 0 20px 0 0 var(--white); } .social-overlay .icon::after { position: absolute; right: -9px; bottom: 10px; content: ""; height: 35px; width: 24px; border-bottom-left-radius: 20px; box-shadow: 0 20px 0 0 var(--white); } .social-overlay { position: absolute; left: 50%; bottom: -10px; z-index: 1; transform: translateX(-50%); } .social-overlay .icon i { display: inline-block; height: 45px; width: 45px; line-height: 40px; text-align: center; background: var(--dark); color: var(--white); border-radius: 50%; cursor: pointer; font-weight: 400; position: relative; bottom: 20px; border: 2px solid; } .team-style-one-item h4 { margin: 0; } .color-style-two .social-overlay .icon i { background: var(--color-style-two); } .color-style-three .social-overlay .icon i { background: var(--color-style-three); } .social-overlay ul li { display: block; text-align: center; margin-bottom: 10px; } .social-overlay ul li a { display: inline-block; } .social-overlay ul li a i { display: inline-block; height: 45px; width: 45px; line-height: 45px; background: var(--color-primary); color: var(--white); border-radius: 50%; opacity: 0; visibility: hidden; transform: translateY(40px); transition: all 0.35s ease-in-out; } .color-style-two .social-overlay ul li a i { background: var(--color-style-two); } .color-style-three .social-overlay ul li a i { background: var(--color-style-three); } .social-overlay ul li:first-child a i { transition-delay: 0.60ms; } .social-overlay ul li:nth-child(2) a i { transition-delay: 0.45ms; } .social-overlay ul li:nth-child(3) a i { transition-delay: 0.30ms; } .social-overlay ul li:nth-child(4) a i { transition-delay: 0.15ms; } .advisor-style-one-item:hover .thumb .social-overlay ul li a i { opacity: 1; visibility: visible; transform: translateY(0); } .social-overlay ul li a i.fa-facebook-f { background: #3B5998; } .social-overlay ul li a i.fa-dribbble { background: #ea4c89; } .social-overlay ul li a i.fa-linkedin-in { background: #0077B5; } .join-as-advisor { position: relative; border-radius: 30px; background: var(--white); padding: 50px; } .join-as-advisor ul { margin: 0; padding: 0; list-style: none; } .join-as-advisor::after { position: absolute; left: -2px; top: -2px; content: ""; bottom: -2px; right: -2px; background: var(--bg-gradient); z-index: -1; border-radius: 32px; } .join-as-advisor > img { position: absolute; left: 100%; top: -40px; margin-left: -105px; width: 150px; } /* ============================================================== # Advisor Style Two =================================================================== */ .advisor-style-two-item { overflow: hidden; border-radius: 15px; padding: 10px; border: 1px solid #e7e7e7; } .advisor-style-two-item .info { padding: 15px; padding-top: 30px; } .advisor-style-two-item .thumb { position: relative; } .advisor-style-two-item .thumb img { border-radius: 10px; } .advisor-style-two-item .info span { color: var(--color-paragraph); font-weight: 500; } .advisor-style-two-item .info h4 { font-size: 20px; margin-bottom: 5px; } .advisor-style-two-item .social-overlay { transform: none; left: auto; right: 40px; bottom: -40px; } .advisor-style-two-item .social-overlay .icon::before { bottom: 40px; left: -17px; height: 40px; width: 20px; } .advisor-style-two-item .social-overlay .icon::after { position: absolute; right: -15px; bottom: 40px; content: ""; height: 40px; width: 16px; border-bottom-left-radius: 20px; box-shadow: 0 20px 0 0 var(--white); } .advisor-style-two-item .social-overlay .icon i { height: 50px; width: 50px; line-height: 38px; border: 6px solid; } .advisor-style-two-item:hover .thumb .social-overlay ul li a i { opacity: 1; visibility: visible; transform: translateY(0); } .advisor-style-two-item .social-overlay ul li a i { height: 40px; width: 40px; line-height: 42px; } .advisor-style-two-area .shape img { position: absolute; z-index: 1; right: 0; bottom: -50px; width: 25%; } /* ============================================================== # Advisor Style Three =================================================================== */ .advisor-style-three-area { position: relative; z-index: 1; } .advisor-style-three-area .shape { position: absolute; right: 0; top: 0; z-index: -1; } .advisor-style-three-area .shape-bottom { position: absolute; left: 0; bottom: 0; z-index: -1; width: 100%; display: flex; justify-content: flex-end; } .advisor-style-three-area .shape-bottom img { width: 100%; } .advisor-style-three { overflow: hidden; border-radius: 30px; background: var(--white); } .advisor-style-three .info { padding: 50px 30px; position: relative; z-index: 1; padding-bottom: 25px; border: 1px solid var(--color-style-three); border-bottom: none; border-radius: 30px 30px 0 0; } .advisor-style-three .info h4 { margin-bottom: 10px; } .advisor-style-three .info span { display: inline-block; border-radius: 5px; text-transform: uppercase; font-size: 15px; } .advisor-style-three .info > a { display: inline-block; padding: 5px 20px; border-radius: 30px; background: var(--color-style-four); } .advisor-style-three .info > a i { margin-right: 3px; } .advisor-style-three .thumb { position: relative; z-index: 1; overflow: hidden; } .advisor-style-three .thumb img { transition: all 0.35s ease-in-out; } .advisor-style-three:hover .thumb img { transform: scale(1.1); } .advisor-style-three .thumb::after { position: absolute; left: 1px; top: 0; content: ""; height: 50px; right: 1px; background: url(../img/shape/76.png); background-size: 100%; background-repeat: repeat-x; background-position: center top; } .advisor-style-three ul { margin: 0; padding: 0; list-style: none; margin-top: 18px; } .advisor-style-three ul li { display: inline-block; margin: 0 3px; } .advisor-style-three ul li a { display: inline-block; height: 45px; width: 45px; text-align: center; line-height: 45px; background: var(--color-style-three); border-radius: 50%; color: var(--white); } .advisor-style-three ul li a:hover { background: var(--dark); color: var(--white); } /* ============================================================== # Event =================================================================== */ .event-style-one-item { position: relative; z-index: 1; padding: 50px 0; margin-bottom: 50px; } .event-style-one-item:last-child { margin-bottom: 0; } .event-meta ul { margin: 0; padding: 0; list-style: none; display: flex; margin-bottom: 15px; flex-wrap: wrap; column-gap: 30px; row-gap: 5px; } .event-meta ul i { display: inline-block; font-weight: 100; min-width: 23px; } .event-style-one-info { display: grid; grid-template-columns: 1.8fr 1fr; padding: 0 50px; gap: 50px; height: 100%; } .event-style-one-item::after { position: absolute; top: 0; right: 0; content: ""; height: 100%; width: 90%; background: rgba(255, 255, 255, 0.5); z-index: -1; border: 2px solid var(--white); border-radius: 30px; transition: all 0.35s ease-in-out; box-shadow: 0px -4px 50px -14px rgb(109 117 143 / 53%); } .bg-gray-gradient-secondary .event-style-one-item::after { box-shadow: none; } @media (max-width: 991px) { .event-style-one-info { box-shadow: 0px -4px 50px -14px rgb(109 117 143 / 53%); border-radius: 0 0 10px 10px; } .event-style-one-item .event-thumb img { border-radius: 10px 10px 0 0; } } .event-style-one-item:hover::after { background: var(--white); } .event-style-one-item .event-thumb { overflow: hidden; border-radius: 30px; height: 100%; } .event-date { display: block; width: 100%; text-align: center; background: url(../img/shape/39.png); border-radius: 10px; padding: 40px; background-size: contain; background-repeat: no-repeat; background-position: center; } .event-date h2 { color: var(--white); font-size: 52px; margin-bottom: 5px; } .event-date h6 { color: var(--white); text-transform: uppercase; font-size: 18px; font-weight: 500; } .event-style-one-info .right-info { display: flex; flex-direction: column; justify-content: center; gap: 30px; text-align: center; align-items: center; border-left: 1px solid #b9d3de; padding-left: 50px; order: 6; } .event-style-one-info .btn-style-two { margin-top: 25px; } .event-style-one-info p { margin: 0; } .event-style-one-item .event-thumb img { height: 100%; object-fit: cover; object-position: center; } .event-style-one-info .right-info .btn { max-width: max-content; text-align: center; } .event-style-one-info .left-info { display: flex; flex-direction: column; justify-content: center; } .event-meta ul li { font-size: 18px; } .event-style-one-info .left-info .btn { max-width: max-content; margin-top: 25px; } .event-style-one-info .left-info h2 { margin-bottom: 20px; } /* ============================================================== # Event =================================================================== */ .event-style-two-items { position: relative; z-index: 1; } .event-style-two-items .thumb { position: absolute; width: 38%; height: 100%; overflow: hidden; } .event-style-two-items .thumb h2 { margin: 0; position: absolute; left: 50%; transform: translateX(-50%); bottom: -30px; text-transform: uppercase; font-size: 9vw; line-height: 1; color: var(--white); opacity: 0.5; } .event-style-two-items .thumb img { height: 100%; width: 100%; object-fit: cover; object-position: center; border-radius: 0 10px 10px 0; } .event-style-two-item { display: grid; grid-template-columns: 0.6fr 1.5fr 1.2fr; gap: 35px; border-top: 1px solid #e7e7e7; margin-top: 30px; padding-top: 30px; } .event-style-two-item:first-child { margin-top: 0; padding-top: 0; border: none; } .event-style-two-item .date { background: #cddfea; display: flex; flex-direction: column; justify-content: center; text-align: center; color: var(--color-heading); border-radius: 10px; position: relative; z-index: 1; } .color-secondary .event-style-two-item .date { background: #e4e7ff; } .event-style-two-item .date::after { position: absolute; left: 50%; top: -4px; content: ""; height: 12px; width: 100%; background: url(../img/shape/44.png); background-repeat: no-repeat; background-size: contain; transform: translateX(-50%); background-position: center top; } @media (min-width: 768px) { .event-style-two-item .button { text-align: right; } .event-style-three-item .event-style-two-item .button { text-align: left; } } .event-style-two-item .date strong { display: block; font-size: 50px; line-height: 1; } .event-style-two-item .event-meta ul { flex-direction: column; gap: 5px; } .event-style-two-item .event-meta ul i { width: 20px; text-align: center; margin-right: 5px; } .event-style-two-item .info h3 { margin: 0; } /* ============================================================== # Event Style Three =================================================================== */ .event-style-three-area { position: relative; z-index: 1; } .event-style-three-area::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 55%; background: var(--white); z-index: -1; } .event-style-three-item { margin-bottom: 30px; } .event-style-three-item .event-style-two-item { display: block; padding: 65px; background: var(--white); border-radius: 10px; box-shadow: 0px 11px 60px -14px rgb(109 117 143 / 33%); } .event-style-three-item .event-style-two-item .d-grid { grid-template-columns: 1fr 3fr; gap: 50px; } .event-style-three-item .event-style-two-item .d-grid .date { width: 100%; height: 130px; background: var(--white); border: 2px solid var(--color-primary); } .event-style-three-item .event-style-two-item .d-grid .date::after { top: -7px; } .event-style-three-item .thumb { position: relative; height: 100%; } .event-style-three-item .thumb img { position: absolute; height: 100%; width: 100%; object-fit: cover; object-position: center; border-radius: 10px; } .event-style-three-item .event-style-two-item .event-meta ul { flex-direction: inherit; flex-wrap: wrap; column-gap: 25px; row-gap: 5px; } /* ============================================================== # Event Style Four =================================================================== */ .event-style-four-item { background-size: cover; position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 3fr 1.6fr 1.3fr; padding: 50px; gap: 50px; margin-bottom: 30px; align-items: center; border-top: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7; overflow: hidden; transition: all 0.35s ease-in-out; background-position: center; } .event-style-four-item:last-child { margin: 0; } .event-style-four-item .event-meta ul { flex-direction: column; row-gap: 10px; column-gap: 30px; margin: 0; } .event-style-four-item .button { text-align: right; } .event-style-four-item h2 { margin: 0; } .event-style-four-item .date { border-right: 1px solid #e7e7e7; padding-right: 30px; } .event-style-four-item .date h2 { font-size: 60px; line-height: 1.1; } .event-style-four-item::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; background: var(--white); z-index: -1; transition: all 0.35s ease-in-out; } .event-style-four-item.active::after { background: var(--color-primary); border-color: transparent; mix-blend-mode: multiply; } .theme-style-three .event-style-four-item.active::after { background: var(--color-style-five); } .event-style-four-item:hover::after { background: var(--dark-secondary); border-color: transparent; opacity: 0.8; } .event-style-four-item.active, .event-style-four-item:hover { border-radius: 10px; } .event-style-four-item h2, .event-style-four-item p, .event-style-four-item li, .event-style-four-item span { transition: all 0.35s ease-in-out; } .event-style-four-item.active h2, .event-style-four-item:hover h2, .event-style-four-item.active a, .event-style-four-item:hover a, .event-style-four-item.active p, .event-style-four-item:hover p, .event-style-four-item.active li, .event-style-four-item:hover li, .event-style-four-item.active span, .event-style-four-item:hover span { color: var(--white); } .event-style-four-item.active .date, .event-style-four-item:hover .date { border-color: rgba(255, 255, 255, 0.4); } .event-style-four-item.active .button .btn::after, .event-style-four-item:hover .button .btn::after { background: var(--white); } .event-style-four-item.active .button .btn, .event-style-four-item:hover .button .btn { color: var(--color-heading); } .event-style-four-item.active .button .btn:hover, .event-style-four-item:hover .button .btn:hover { color: var(--white); } .event-style-four-item.active .button .btn:hover::after, .event-style-four-item:hover .button .btn:hover::after { background: var(--color-primary); } .theme-style-three .event-style-four-item.active .button .btn:hover::after, .theme-style-three .event-style-four-item:hover .button .btn:hover::after { background: var(--color-style-five); } /* ============================================================== # Event Single =================================================================== */ .event-details-info .nav.nav-tabs.course-details-navs { border-radius: 50px; } .event-details-items .course-preview-info .content .course-includes ul li i { height: 40px; width: 40px; text-align: center; line-height: 40px; background: #ebeffe; color: var(--color-primary); border-radius: 50%; font-weight: 100; margin-right: 8px; font-size: 17px; } .event-details-items .course-preview-info .content .course-includes ul li strong { float: right; font-size: 30px; color: var(--color-primary); line-height: 1; } .event-details-items .course-preview-info .content .course-includes ul li { display: flex; align-items: center; justify-content: space-between; } .event-details-items .course-preview-info .content .course-includes .info .btn { width: 100%; margin-top: 30px; } .event-detils-area { position: relative; z-index: 1; } .event-detils-area::after { position: absolute; left: 0; top: 0; content: ""; height: 10%; width: 100%; background: var(--bg-gray-gradient-secondary); z-index: -1; } .event-details-thumb { position: relative; z-index: 1; padding-bottom: 80px; text-align: center; } .event-details-thumb img { border-radius: 10px; } .event-details-thumb .counter-class { background: var(--dark-optional); padding: 15px; border-radius: 150px; border: 15px solid var(--white); display: inline-block; position: relative; z-index: 1; } .event-details-thumb .counter-class::before { position: absolute; content: ""; bottom: 65px; left: -33px; height: 40px; width: 20px; border-bottom-right-radius: 20px; box-shadow: 0 20px 0 0 var(--white); } .event-details-thumb .counter-class::after { position: absolute; bottom: 65px; right: -33px; content: ""; height: 40px; width: 20px; border-bottom-left-radius: 20px; box-shadow: 0 20px 0 0 var(--white); } .event-details-thumb .counter-class .counter-item { display: inline-block; margin: 0 10px; padding: 0 10px; position: relative; z-index: 1; } .event-details-thumb .counter-class .counter-item .item span { display: block; font-size: 30px; font-weight: 600; margin-bottom: 2px; } .event-details-thumb .counter-class .counter-item .item { height: 100px; width: 100px; line-height: 100px; text-align: center; background: var(--color-style-three); display: flex; flex-direction: column; justify-content: center; color: var(--white); border-radius: 50%; } .event-details-thumb .counter-class .counter-item .item h5 { margin: 0; color: var(--white); font-weight: 400; font-size: 16px; } .event-details-thumb .counter-class .counter-item::after { position: absolute; right: -36px; top: 50%; transform: translateY(-50%); content: ":"; width: 50px; color: var(--white); font-size: 39px; z-index: -1; font-weight: 400; } .event-time-loop { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; } .event-details-thumb .counter-class .counter-item:last-child::after { display: none; } .event-details-thumb .counter-class .counter-item:first-child { margin-left: 0; padding-left: 0; } .event-details-thumb .counter-class .counter-item:last-child { margin-right: 0; padding-right: 0; } .event-details-thumb .counter-class .counter-item:first-child .item { background: #FF922E; } .event-details-thumb .counter-class .counter-item:nth-child(3) .item { background: #D94DA6; } .event-details-thumb .counter-class .counter-item:last-child .item { background: #307AD5; } .event-location-map iframe { width: 100%; min-height: 400px; margin-bottom: -10px; } .event-location-map { overflow: hidden; position: relative; z-index: 1; border: 3px solid var(--white); box-shadow: 0px 15px 60px -10px rgb(109 117 143 / 33%); border-radius: 10px; } ul.event-location { margin: 0; padding: 0; list-style: none; overflow: hidden; background: #e8eff0; } ul.event-location li { float: left; width: 50%; padding: 20px 30px; display: flex; align-items: center; gap: 10px; border-right: 5px solid var(--white); border-top: 5px solid var(--white); } ul.event-location li strong { font-weight: 600; color: var(--color-heading); } ul.event-location li a { font-weight: 400; color: var(--color-paragraph); } ul.event-location li a:hover { color: var(--color-primary); } /* ============================================================== # Testimonil =================================================================== */ .testimonial-style-one-area{ position:relative; overflow:hidden; padding-bottom:120px; background:linear-gradient(180deg,#fff 0%,#fff8f8 100%); } .testimonial-style-one-area::before{ content:"学生の声"; position:absolute; top:70px; right:-25px; color:rgba(223,7,8,.035); font:900 clamp(90px,15vw,230px)/1 "Noto Sans JP",sans-serif; white-space:nowrap; pointer-events:none; } .testimonial-style-one-area .site-heading{ position:relative; z-index:1; margin-bottom:55px; } .testimonial-style-one-area .site-heading .sub-title{ display:inline-flex; align-items:center; gap:12px; margin-bottom:18px; color:#df0708; font-size:13px; font-weight:800; letter-spacing:.2em; } .testimonial-style-one-area .site-heading .sub-title::before, .testimonial-style-one-area .site-heading .sub-title::after{ content:""; width:34px; height:1px; background:#df0708; } .testimonial-style-one-area .site-heading .title{ margin:0; color:#221d1e; font-size:clamp(42px,5vw,72px); font-weight:800; line-height:1.02; letter-spacing:-.045em; } .testimonial-style-one-area .site-heading .title strong{ color:#df0708; font-weight:800; } .ljp-testimonials__lead{ max-width:650px; margin:24px auto 0; color:#686164; font-size:17px; line-height:1.7; } .testimonial-style-one-area .testimonial-style-one-items{ position:relative; padding:clamp(42px,6vw,82px); gap:70px; border:1px solid rgba(34,29,30,.08); border-radius:34px; background:#221d1e!important; box-shadow:0 30px 80px rgba(50,29,31,.16); } .testimonial-style-one-area .testimonial-style-one-items::before{ content:"LJP"; position:absolute; right:35px; top:8px; color:rgba(255,255,255,.035); font:900 clamp(100px,17vw,245px)/1 Outfit,sans-serif; pointer-events:none; } .testimonial-style-one-area .testimonial-style-one-carousel{ z-index:2; min-width:0; } .testimonial-style-one-area .testimonial-style-one .top-info{ align-items:flex-start; margin-bottom:28px; } .testimonial-style-one-area .testimonial-style-one .top-info .icon{ width:58px; height:58px; min-width:58px; padding:16px; border-radius:18px; background:#df0708; box-shadow:0 12px 28px rgba(223,7,8,.32); } .testimonial-style-one-area .testimonial-style-one .top-info h3{ font-family:'BoonHome',sans-serif; font-size:clamp(25px,2.3vw,36px); font-weight:700; line-height:1.25; } .testimonial-style-one-area .testimonial-style-one p{ max-width:720px; color:rgba(255,255,255,.78); font-family:'BoonHome',sans-serif; font-size:18px; line-height:1.85; } .testimonial-style-one-area .testimonial-style-one .bottom-info{ margin-top:34px; padding-top:25px; border-color:rgba(255,255,255,.13); } .testimonial-style-one-area .testimonial-style-one .bottom-info h4{ font-size:18px; font-weight:700; } .testimonial-style-one-area .testimonial-style-one .bottom-info span{ color:rgba(255,255,255,.56); } .testimonial-style-one-area .testimonial-style-one-items .testimonial-bullet{ position:relative; z-index:2; min-width:36%; max-width:36%; padding:0 28px; } .testimonial-style-one-area .testimonial-bullet .swiper-bullet-item img{ width:100%; aspect-ratio:4/5; object-fit:cover; border:0; border-radius:24px; filter:saturate(.9); box-shadow:0 20px 45px rgba(0,0,0,.3); } .testimonial-style-one-area .testimonial-style-one-nav{ gap:10px; } .testimonial-style-one-area .testimonial-style-one-nav .swiper-button-prev, .testimonial-style-one-area .testimonial-style-one-nav .swiper-button-next{ width:48px; height:48px; border-radius:50%; color:#221d1e; background:#fff; transition:.25s; } .testimonial-style-one-area .testimonial-style-one-nav .swiper-button-prev:hover, .testimonial-style-one-area .testimonial-style-one-nav .swiper-button-next:hover{ color:#fff; background:#df0708; } @media(max-width:991px){ .testimonial-style-one-area{padding-bottom:80px} .testimonial-style-one-area .testimonial-style-one-items{padding:44px 32px;gap:35px} .testimonial-style-one-area .testimonial-style-one-items .testimonial-bullet{min-width:34%;max-width:34%;padding:0} } @media(max-width:767px){ .testimonial-style-one-area .site-heading{margin-bottom:36px} .testimonial-style-one-area .site-heading .title{font-size:38px} .testimonial-style-one-area .testimonial-style-one-items{display:flex;flex-direction:column-reverse;align-items:stretch;padding:28px 22px 82px;border-radius:24px} .testimonial-style-one-area .testimonial-style-one-items .testimonial-bullet{width:100%;min-width:100%;max-width:100%;padding:0 44px} .testimonial-style-one-area .testimonial-bullet .swiper-bullet-item img{aspect-ratio:16/10;border-radius:18px} .testimonial-style-one-area .testimonial-style-one .top-info .icon{width:48px;height:48px;min-width:48px;padding:13px;border-radius:14px} .testimonial-style-one-area .testimonial-style-one .top-info h3{font-size:24px} .testimonial-style-one-area .testimonial-style-one p{font-size:16px;line-height:1.75} .testimonial-style-one-area .testimonial-style-one-nav{right:auto;left:0;bottom:-58px} } .testimonial-style-one-items { padding: 80px; display: flex; gap: 50px; align-items: center; border-radius: 30px; } .testimonial-bullet .swiper-bullet-item img { border-radius: 10px; border: 2px solid var(--white); } .testimonial-bullet .swiper-slide-shadow { display: none; } .testimonial-style-one-items .testimonial-bullet { min-width: 40%; max-width: 40%; text-align: center; padding: 0 50px; } .testimonial-style-one-items .testimonial-bullet .swiper-slide-active img { border: 2px solid var(--white); } .testimonial-style-one .top-info { display: flex; align-items: center; margin-bottom: 20px; } .testimonial-style-one .top-info h3 { margin: 0; } .testimonial-style-one .top-info .icon { background: var(--color-secondary); height: 55px; width: 55px; min-width: 55px; text-align: center; padding: 15px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; margin-right: 20px; } .testimonial-style-one .bottom-info .top { display: flex; margin-bottom: 5px; } .testimonial-style-one .bottom-info .top h4 { margin: 0; margin-right: 15px; } .testimonial-style-one .bottom-info { border-top: 1px solid rgba(255, 255, 255, 0.3); padding-top: 25px; } .testimonial-style-one p { font-size: 20px; } .testimonial-style-one .bottom-info .top i { color: #ffce35; } /* Navigation */ .testimonial-style-one-carousel { position: relative; } .testimonial-style-one-nav { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 15px; height: 45px; top: auto; } .testimonial-style-one-nav .swiper-button-prev, .testimonial-style-one-nav .swiper-button-next { top: inherit; right: inherit; left: inherit; bottom: inherit; position: relative; padding: 0; height: 45px; width: 45px; background: var(--white); line-height: 45px; text-align: center; border-radius: 10px; } .testimonial-style-one-nav .swiper-button-prev::after, .testimonial-style-one-nav .swiper-button-next:after { display: none; } .testimonial-style-one-nav .swiper-button-prev::before { position: absolute; left: 0; top: 0; content: "\f104"; font-family: "Font Awesome 5 Pro"; height: 45px; width: 45px; text-align: center; font-size: 20px; color: var(--color-primary); } .testimonial-style-one-nav .swiper-button-next::before { position: absolute; right: 0; top: 0; content: "\f105"; font-family: "Font Awesome 5 Pro"; width: 45px; height: 45px; font-size: 20px; color: var(--color-primary); } /* ============================================================== # Testimonial Style Two =================================================================== */ .testimonial-style-two-area { overflow: hidden; } .container-fluid { padding: 0; } .testimonial-style-two { border-radius: 10px; background: var(--white); border: 1px solid #e7e7e7; } .testimonial-style-two-carousel .swiper-slide:nth-child(2n) .testimonial-style-two { background: var(--bg-gray); } .bg-gray-gradient-secondary .testimonial-style-two-carousel .swiper-slide:nth-child(2n) .testimonial-style-two { background: var(--white); } .testimonial-style-two .icon { display: inline-flex; background: var(--color-primary); height: 50px; width: 50px; padding: 15px; border-radius: 50%; flex-direction: column; justify-content: center; margin-right: 20px; } .color-secondary .testimonial-style-two .icon { background: var(--color-style-two); } .testimonial-style-two .icon img { max-width: max-content; } .testimonial-style-two .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; } .testimonial-style-two h4 { margin-bottom: 5px; } .testimonial-style-two .top-info { display: flex; align-items: center; border-bottom: 1px solid #e7e7e7; padding: 15px 30px; } .testimonial-style-two .top-info h5 { margin: 0; } .testimonial-style-two .bottom-info { display: flex; align-items: center; justify-content: space-between; } .testimonial-style-two .provider { display: flex; align-items: center; } .testimonial-style-two .provider img { height: 50px; width: 50px; border-radius: 50%; margin-right: 15px; } .testimonial-style-two .provider h4 { font-size: 18px; margin: 0; } .testimonial-style-two .provider span { font-size: 14px; } .testimonial-style-two .bottom-info i { color: #ffa41c; } .testimonial-style-two .content { padding: 30px; } .testimonial-style-two-carousel { position: relative; z-index: 1; } .testimonial-style-two-carousel .swiper-wrapper { transition-timing-function: linear; } .testimonial-style-two-carousel::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 10%; background: rgba(0, 0, 0, 0) linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgb(255 255 255) 100%) repeat scroll 0 0; z-index: 2; } .testimonial-style-two-carousel::before { position: absolute; right: 0; top: 0; content: ""; height: 100%; width: 10%; background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(255 255 255) 100%) repeat scroll 0 0; z-index: 2; } /* ============================================================== # Testimonial Style Three =================================================================== */ .testimonial-style-three-area { overflow: hidden; } .testimonial-style-three-info { padding: 50px; border-radius: 10px; display: flex; flex-direction: column; justify-content: space-between; gap: 50px; height: 100%; position: relative; background: rgba(255, 255, 255, 0.1); box-shadow: 0px 20px 40px 0px rgba(0, 0, 0, .1); } .testimonial-style-three-info.dark-optional { box-shadow: none; background: var(--dark-optional); } .testimonial-style-three-info .title { font-size: 36px; } .review-cards .top { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; } .review-cards .top h5 { margin: 0; } .review-cards .top i { font-size: 14px; color: #ffa41c; } .review-cards .review-provider { margin-top: 15px; display: flex; align-items: center; gap: 15px; flex-wrap: wrap; } .review-cards .review-provider img { height: 25px; } .testimonial-style-three-info .review-cards { border-top: 2px solid; padding-top: 30px; } .testimonial-style-three { background: var(--white); border-radius: 10px; padding: 50px 40px; box-shadow: 0 0 16px 0px rgb(109 117 143 / 18%); } .bg-gray-gradient-secondary .testimonial-style-three, .bg-gray .testimonial-style-three { box-shadow: none; } .testimonial-style-three-carousel { margin: -15px; } .testimonial-style-three-carousel .swiper-slide { padding: 15px; } .testimonial-style-three .d-flex { justify-content: space-between; margin-bottom: 30px; } .testimonial-style-three .d-flex img { height: 50px; } .testimonial-style-three .d-flex h4 { font-size: 20px; margin-bottom: 10px; } .testimonial-style-three .d-flex i { font-size: 13px; color: #ffa41c; } .testimonial-style-three .provider { display: flex; align-items: center; border-top: 1px dashed #d2e3f9; padding-top: 25px; } .testimonial-style-three .provider img { height: 50px; width: 50px; min-width: 50px; border-radius: 50%; margin-right: 20px; } .testimonial-style-three .provider h4 { margin-bottom: 2px; font-size: 18px; } .testimonial-style-three p { font-size: 20px; } .testimonial-style-three-info .shape { position: absolute; right: 100%; bottom: -30px; width: 75px; margin-right: -25px; } /* ============================================================== # Testimonial Style Four =================================================================== */ .thumb-style-five { text-align: center; display: flex; flex-direction: column; justify-content: flex-end; position: relative; z-index: 1; bottom: -120px; margin-top: -120px; } .thumb-style-five img { position: absolute; height: 100%; bottom: 0; left: 50%; transform: translateX(-50%); } .thumb-style-five img:nth-child(2) { z-index: -1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: auto; } .testimonial-style-four-item .provider { display: flex; align-items: center; gap: 20px; border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 30px; } .testimonial-style-four-item .provider .thumb img { height: 60px; width: 60px; min-width: 60px; border-radius: 50%; } .testimonial-style-four-item .provider h4 { margin-bottom: 3px; } .testimonial-style-four-item .top-info { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; } .testimonial-style-four-item .top-info h4 { margin: 0; } .testimonial-style-four-item .top-info i { color: #ffa41c; } .testimonial-style-four-item p { font-size: 22px; } .thumb-style-five::after { position: absolute; left: 50%; top: 50%; content: ""; height: 400px; width: 400px; transform: translate(-50%, -50%); background: var(--bg-gradient); z-index: -1; border-radius: 50%; filter: blur(150px); } .testimonial-style-four-nav { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; z-index: 1; gap: 5px; } .testimonial-style-four-nav > div { height: 55px; width: 55px; background: var(--color-primary); border-radius: 5px; } .testimonial-four-button-prev::after { position: absolute; left: 0; top: 0; content: "\f104"; font-family: "Font Awesome 5 Pro"; height: 55px; width: 55px; text-align: center; line-height: 55px; font-size: 20px; } .testimonial-four-button-next::after { position: absolute; right: 0; top: 0; content: "\f105"; font-family: "Font Awesome 5 Pro"; height: 55px; width: 55px; text-align: center; line-height: 55px; font-size: 20px; } /* ============================================================== # Testimonial Style Five =================================================================== */ .testimonial-style-five-items { position: relative; padding: 90px; } .testimonial-style-five-items .shape { position: absolute; left: 0; top: 0; text-align: center; width: 100%; height: 100%; } .testimonial-style-five-items .shape img { height: 100%; width: 100%; object-fit: contain; object-position: center; } .testimonial-style-five-item > img { height: 50px; margin-bottom: 30px; } .testimonial-style-five-item p { font-size: 28px; } .testimonial-style-five-item { padding: 50px; } .testimonial-style-five-item .provider { display: flex; justify-content: center; align-items: center; margin-top: 30px; text-align: left; } .testimonial-style-five-item .provider img { height: 60px; width: 60px; min-width: 60px; border-radius: 50%; margin-right: 20px; } .testimonial-style-five-item .provider h4 { margin-bottom: 5px; } .testimonial-style-five-item .provider span { text-transform: uppercase; font-size: 15px; } /* ============================================================== # Newsletter =================================================================== */ .newsletter-style-one-items { padding: 80px; border-radius: 10px; position: relative; z-index: 1; padding-bottom: 100px; } .newsletter-style-one-items .shape img { position: absolute; left: -50px; bottom: -60px; } .newsletter-style-one-items form { position: relative; z-index: 1; max-width: 600px; margin: 40px auto auto; } .newsletter-style-one-items form input, .newsletter-style-one-items form input:focus { min-height: 65px; border: 2px solid #f6fffd; border-radius: 10px; color: var(--color-heading); padding-left: 25px; padding-right: 160px; box-shadow: none; background: rgba(255, 255, 255, 0.4); } .newsletter-style-one-items form button { position: absolute; right: 8px; top: 8px; bottom: 8px; padding: 0 40px; border: none; border-radius: 6px; background: var(--color-primary); color: var(--white); } .newsletter-style-one-items form button:hover { background-color: var(--color-heading); color: var(--white); } ul.list-check { margin: 0; padding: 0; list-style: none; display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin-top: 25px; } ul.list-check li { display: inline-block; position: relative; z-index: 1; padding-left: 26px; color: var(--color-heading); } ul.list-check li::after { position: absolute; left: 0; top: 0; content: "\f058"; font-family: "Font Awesome 5 Pro"; font-weight: 600; color: var(--color-primary); } .newsletter-style-one-items .shape img:nth-child(2) { left: auto; right: 5%; bottom: auto; top: 60px; z-index: -1; opacity: 0.45; } /* ============================================================== # Feature =================================================================== */ .feature-style-one-items { border-top: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7; } .feature-style-one-item .icon { height: 80px; width: 80px; text-align: center; border: 1px solid #d2e3f9; padding: 15px; border-radius: 10px; margin-bottom: 25px; } .feature-style-one-item p { margin: 0; } .feature-style-one-item { padding: 50px; border-right: 1px solid #e7e7e7; display: flex; flex-direction: column; justify-content: center; } .feature-style-one-item:last-child { border: none; } .feature-style-one-items .row { margin: 0 -40px; } ul.list-style-three { margin: 0; padding: 0; list-style: none; } ul.list-style-three li { margin-bottom: 25px; position: relative; z-index: 1; padding-left: 40px; } ul.list-style-three li p { margin: 0; } .feature-style-one-item h6 { font-size: 18px; font-weight: 400; } .feature-style-one-item h6 a { display: inline-block; color: var(--color-primary); text-decoration: underline; margin-left: 2px; } .color-secondary .feature-style-one-item h6 a { color: var(--color-style-two); } ul.list-style-three li::after { position: absolute; left: 0; top: 2px; content: ""; height: 25px; width: 25px; background: var(--bg-gradient); border-radius: 50%; } .color-secondary ul.list-style-three li::after { background: var(--bg-gradient-secondary); } ul.list-style-three li::before { position: absolute; left: 9px; top: 11px; content: ""; height: 7px; width: 7px; background: var(--white); border-radius: 50%; z-index: 1; } /* ============================================================== # Fun Fact =================================================================== */ .fun-fact-style-one-area.bg-contain { background-position: right bottom !important; } .text-center .funfact-style-one-item .counter { justify-content: center; } .funfact-style-one-item .counter { font-size: 55px; line-height: 1; font-weight: 500; margin-top: 10px; } .funfact-style-one-item .medium { font-size: 18px; font-weight: 400; } .funfact-style-one-item .icon img { height: 60px; } .funfact-style-one-item .icon { position: relative; z-index: 1; display: inline-block; margin-bottom: 30px; } .funfact-style-one-item .icon::after { position: absolute; right: -25px; bottom: -10px; content: ""; height: 55px; width: 55px; background: var(--color-primary); z-index: -1; border-radius: 50%; opacity: 0.2; } .color-secondary .funfact-style-one-item .icon::after { background: var(--color-style-two); } /* ============================================================== # Join With Us =================================================================== */ .join-us-style-one-item { display: grid; grid-template-columns: 1.5fr 1fr; background: var(--bg-gray-gradient-secondary); border: 3px solid var(--white); border-radius: 30px; padding: 50px; padding-bottom: 0; height: 100%; gap: 50px; position: relative; z-index: 1; overflow: hidden; background-size: cover !important; } .bg-gray-gradient-secondary .join-us-style-one-item, .bg-gray-gradient .join-us-style-one-item { background: rgba(255, 255, 255, 0.7); } .join-us-style-one-item .shape { position: absolute; right: 0; bottom: 0; z-index: -1; height: 70%; } .join-us-style-one-item .shape img { height: 100%; } .join-us-style-one-item .info { display: flex; flex-direction: column; justify-content: center; padding-bottom: 50px; } .join-us-style-one-item .info .btn { max-width: max-content; } .join-us-style-one-item .info .btn.btn-light:hover { background: var(--color-primary); } .join-us-style-one-item.bg-gradient .info .btn.btn-light:hover { background: var(--dark); } .color-secondary .join-us-style-one-item .info .btn.btn-light:hover { background: var(--color-primary); } .color-secondary .join-us-style-one-item .info .btn.btn-light:hover { background: var(--color-style-two); } .join-us-style-one-item .thumb { display: flex; flex-direction: column; justify-content: flex-end; } .join-us-style-one-item.active { background: var(--dark); } .join-us-style-one-item.active h4, .join-us-style-one-item.active p { color: var(--white); } .join-us-style-one-item span { display: inline-block; max-width: max-content; margin-bottom: 5px; border-radius: 10px; color: var(--color-heading); text-transform: uppercase; font-weight: 600; } .text-light .join-us-style-one-item span, .join-us-style-one-item.bg-gradient span { color: var(--white); } .join-us-style-one-item.active span { background: var(--bg-gradient); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .join-us-style-one-item .info h2 { margin-bottom: 15px; } .join-us-style-one-item.active .info h2 { color: var(--white); } .color-secondary .join-us-style-one-item span { background: var(--bg-gradient-secondary); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ============================================================== # Join Us Style Two =================================================================== */ .thumb-style-four { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .thumb-style-four .fun-fact { background: rgba(255, 255, 255, 0.6); color: var(--color-heading); padding: 30px; display: flex; border: 2px solid var(--white); border-radius: 10px; } .thumb-style-four .fun-fact .counter { font-size: 60px; line-height: 1; margin-bottom: 5px; font-weight: 600; } .thumb-style-four .fun-fact span { font-size: 20px; } .thumb-style-four .right { display: flex; flex-direction: column; gap: 30px; } .thumb-style-four .left img { object-fit: cover; object-position: center; } .thumb-style-four .right .thumb { margin-left: -30%; } .thumb-style-four .right .thumb { position: relative; z-index: 1; } .thumb-style-four .right .thumb .video-play-button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .color-secondary .video-play-button { background: var(--color-style-two); } .thumb-style-four .fun-fact img { height: 80px; margin-right: 30px; } .thumb-style-four img { border-radius: 10px; } ul.list-style-five { list-style: none; margin: 0; padding: 0; } ul.list-style-five li { font-weight: 500; color: var(--color-heading); margin-top: 30px; display: flex; } .info-style-one ul.list-style-five { border-top: 1px dashed #d2e3f9; margin-top: 30px; } .bg-gray-gradient-secondary .info-style-one ul.list-style-five { border-color: #b2cfca; } ul.list-style-five li .icon i { display: inline-block; height: 60px; width: 60px; text-align: center; line-height: 60px; background: #d9e9e6; border-radius: 50%; margin-right: 25px; font-size: 25px; font-weight: 100; color: var(--color-heading); } .bg-gray-gradient-secondary ul.list-style-five li .icon i { background: #c6dcd8; } .color-secondary ul.list-style-five li .icon i { background: #ecfffb; } ul.list-style-five li p { margin: 0; } ul.list-style-six { margin: 0; padding: 0; list-style: none; } ul.list-style-six li { position: relative; z-index: 1; padding-left: 25px; font-weight: 500; margin-top: 8px; font-size: 18px; } ul.list-style-six li::after { position: absolute; left: 0; top: 6px; content: ""; height: 18px; width: 18px; background: url(../img/icon/check.png); background-repeat: no-repeat; background-position: left center; background-size: contain; } /* ============================================================== # Pricing =================================================================== */ .pricing-style-one-item { display: grid; align-items: center; justify-content: space-between; padding: 30px; margin-bottom: 30px; border-radius: 10px; border: 2px solid #e8f3ed; gap: 30px; grid-template-columns: 2fr 0.7fr 1.2fr; } .pricing-style-one-item:last-child { margin: 0; } .pricing-style-one-item .info { display: flex; align-items: center; } .pricing-style-one-item .info .icon { width: 70px; margin-right: 30px; background: #dbefec; border-radius: 50%; line-height: 70px; max-width: 100px; text-align: center; min-width: 70px; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 70px; } .pricing-style-one-item .info .icon img { max-width: max-content; height: 35px; } .pricing-style-one-item .info h4 { margin-bottom: 6px; } .pricing-style-one-item .info p { margin: 0; } .pricing-style-one-item .price h2 { margin-bottom: 0; font-size: 40px; font-weight: 500; } .pricing-style-one-item .price h2 strong { display: block; font-size: 16px; font-weight: 300; margin-top: 4px; } .pricing-style-one-item.active { border-color: var(--color-primary); } .color-secondary .pricing-style-one-item.active { border-color: var(--color-style-two); } .pricing-style-one-item.active .icon { background: var(--color-primary); } .color-secondary .pricing-style-one-item .info .icon { background: #c3f3dc; } .color-secondary .pricing-style-one-item.active .icon { background: var(--color-style-two); } .color-secondary .pricing-style-one-item { background: transparent; } .pricing-style-one-items { position: relative; z-index: 1; } .nav-tabs.pricing-tab-navs { background: var(--dark-secondary); height: 100%; border-radius: 10px; padding: 50px; margin: 0; } .pricing-style-one-items ul.pricing-list { position: absolute; left: 50px; top: 140px; margin: 0; padding: 0; list-style: none; width: 24%; } .pricing-style-one-items ul.pricing-list li { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 10px; color: #e8e5e5; } .pricing-style-one-items ul.pricing-list li:first-child { margin-top: 0; padding-top: 0; border: none; } .pricing-style-one-items ul.pricing-list li i { font-size: 14px; color: var(--white); } .color-secondary .pricing-style-one-items ul.pricing-list li i { color: var(--color-style-two); } .color-secondary .pricing-style-one-items ul.pricing-list li i.fa-times-circle { color: #d84444; } .nav-tabs.pricing-tab-navs .nav-link { margin: 0; padding: 10px 30px; border: 1px solid rgba(255, 255, 255, 0.3); display: inline-block; border-radius: 30px; color: var(--white); } .nav-tabs.pricing-tab-navs .nav-link::after { display: none; } .nav-tabs.pricing-tab-navs li:first-child .nav-link { border-radius: 30px 0 0 30px; } .nav-tabs.pricing-tab-navs li:last-child .nav-link { border-radius: 0 30px 30px 0; } .nav-tabs.pricing-tab-navs li.nav-item { float: left; } .nav-tabs.pricing-tab-navs li .nav-link.active { background: var(--color-primary); color: var(--white); border-color: var(--color-primary); } .color-secondary .nav-tabs.pricing-tab-navs li .nav-link.active { background: var(--color-style-two); border-color: var(--color-style-two); } .pricing-style-one-item .button { text-align: right; } .pricing-style-one-item .button .btn:hover { color: var(--white); } .color-secondary .pricing-style-one-item .button .btn::after { background: var(--color-style-two); } .pricing-style-one-item.active .button .btn { background: var(--color-primary); } .color-secondary .pricing-style-one-item.active .button .btn { background: var(--color-style-two); } .pricing-style-one-item.active .button .btn::after { background: var(--dark); } .pricing-style-one-item .button .btn { padding: 12px 35px; } /* ============================================================== # Gallery =================================================================== */ .mfp-container button { background: transparent !important; } button.mfp-arrow.mfp-prevent-close::after { display: none; } .mfp-container button::after { display: none; } .mfp-container button.mfp-arrow-left:before { border-right-color: var(--white); } .mfp-container button.mfp-arrow-right:before { border-left-color: var(--white); } .gallery-style-one-item { position: relative; overflow: hidden; border-radius: 10px; z-index: 1; height: 100%; } .gallery-style-one-item img { width: 100%; } .gallery-style-one-item a { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--color-primary); display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50%; color: var(--white); z-index: 1; margin-top: -50px; opacity: 0; visibility: hidden; } .theme-skyblue .gallery-style-one-item a { background: var(--color-style-three); } .gallery-style-one-item a:hover { color: var(--white); } .gallery-style-one-item::after { position: absolute; left: 0; top: 0; content: ""; height: 100%; width: 100%; background: var(--dark); opacity: 0; transition: all 0.35s ease-in-out; transform: scale(0.4); border-radius: 10px; visibility: hidden; } .gallery-style-one-item:hover::after { transform: scale(1); opacity: 0.6; visibility: visible; } .gallery-style-one-item img { transition: all 0.35s ease-in-out; } .gallery-style-one-item:hover img { transform: scale(1.2); } .gallery-style-one-item:hover a { margin: 0; opacity: 1; visibility: visible; } .gallery-style-one-carousel .swiper-slide:nth-child(2n) { height: 280px; } .gallery-style-one-carousel .swiper-slide img { height: 100%; width: 100%; object-fit: cover; object-position: center; } .gallery-style-one-carousel .swiper-wrapper { align-items: center; } .gallery-style-one-item a i { font-weight: 100; } .gallery-style-one-area { position: relative; z-index: 1; } .gallery-style-one-area .shape { position: absolute; top: 45%; z-index: 1; } .gallery-style-one-area::after { position: absolute; left: 0; bottom: 0; content: ""; height: 50%; width: 100%; background: url(../img/shape/81.png); background-size: cover; } /* ============================================================== # Faq =================================================================== */ .faq-style-one-area { background-size: 10%; background-repeat: no-repeat; background-position: left bottom; } .question-card { border-top: 1px solid; padding-top: 30px; } .faq-style-one button.accordion-button { color: var(--color-heading); font-size: 20px; font-weight: 600; padding: 25px !important; background: transparent; padding-right: 60px !important; position: relative; box-shadow: inherit; border-bottom: 1px solid transparent !important; text-transform: none; } .faq-style-one button.accordion-button::after { display: none; } .faq-style-one button.accordion-button::before { background: transparent; content: "\f067"; font-family: "Font Awesome 5 Pro"; font-weight: 1; font-size: 20px; position: absolute; top: 25px; right: 25px; } .faq-style-one button.accordion-button:not(.collapsed)::before { transform: none; content: "\f068"; } .faq-style-one button.accordion-button:focus { background: transparent; color: var(--color-heading); border: none; -webkit-box-shadow: inherit; box-shadow: inherit; padding-left: 0; font-weight: 600; } .faq-style-one .accordion-item:first-child { margin-top: 0; } .faq-style-one.accordion-item h2 { margin: 0; border: none; } .faq-style-one .accordion-body { padding: 30px; position: relative; z-index: 1; border-top: 1px solid #e7e7e7; } .faq-style-one .accordion-body p { margin: 0; } .faq-style-one button.accordion-button strong { display: inline-block; height: 35px; width: 35px; line-height: 34px; text-align: center; border-radius: 50%; margin-right: 12px; border: 1px solid #e7e7e7; } .faq-style-one.accordion-item { background: rgba(255, 255, 255, 0.4); border: none; margin-top: 15px; border: 1px solid #e7e7e7; border-radius: 10px; overflow: hidden; } .faq-style-one .accordion-item:first-child { margin-top: 0; } .bg-gray-gradient-secondary .faq-style-one.accordion-item { border: 2px solid var(--white); } .bg-gray-gradient-secondary .faq-style-one.accordion-item .accordion-body { border-top: 2px solid var(--white); } /* ============================================================== # Campuse Life =================================================================== */ .accordion-item.faq-style-two { border: none; background: transparent; border-radius: 0; margin-top: 25px; } .accordion-item.faq-style-two button.accordion-button { background: transparent; border: none; box-shadow: none; color: var(--color-heading); position: relative; padding: 0; padding-left: 35px; font-size: 20px; } .accordion-item.faq-style-two button.accordion-button::after { display: none; } .accordion-item.faq-style-two button.accordion-button::before { background: transparent; content: "\f107"; font-family: "Font Awesome 5 Pro"; font-size: 25px; position: absolute; top: 2px; left: 0; font-weight: 400; } .accordion-item.faq-style-two button.accordion-button:not(.collapsed)::before { transform: none; content: "\f106"; } .accordion-item.faq-style-two:first-child { margin-top: 0; } .accordion-item.faq-style-two .accordion-body { padding: 0; padding-top: 15px; padding-left: 35px; } .choose-us-style-four-info .fun-fact { background: var(--color-style-five); text-align: center; color: var(--white); border-radius: 10px; padding: 30px; display: flex; flex-direction: column; justify-content: center; } .choose-us-style-four-info .fun-fact .counter { justify-content: center; font-size: 60px; font-weight: 600; line-height: 1; margin-bottom: 10px; } .choose-us-style-four-info .fun-fact .icon img { height: 80px; margin-bottom: 25px; } .choose-us-style-four-info .d-grid { grid-template-columns: 1fr 1fr; gap: 58px; align-items: flex-start; } .thumb-style-six img { border-radius: 10px; } /* ============================================================== # Faculty =================================================================== */ .faculty-style-one-item { border-radius: 10px; padding: 15px; border: 1px solid #dddddd; background: #f5f2f2; } .faculty-style-one-item img { border-radius: 6px; } .faculty-style-one-item .info { padding: 30px; } .faculty-style-one-item .btn { width: 100%; margin-top: 30px; } ul.faculty-list { margin: 0; padding: 0; } ul.faculty-list li { display: inline-block; background: var(--white); border: 1px solid #c98c8d; padding: 0 15px; border-radius: 30px; margin-bottom: 5px; color: var(--color-heading); font-size: 15px; } .faculty-style-one-item ul.faculty-list { border-top: 1px dashed #bbbbbb; padding-top: 30px; } .faculty-style-one-item h4 { font-size: 24px; } /* ============================================================== # Tutiona Fee =================================================================== */ .tution-fees-items { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; align-items: flex-start; } .nav.nav-tabs.nav-tabs-style-three { margin: 0; padding: 0; list-style: none; background: rgba(255, 255, 255, 0.4); border: 2px solid var(--white); border-radius: 10px; display: flex; justify-content: center; overflow: hidden; height: auto; } .nav.nav-tabs.nav-tabs-style-three::before, .nav.nav-tabs.nav-tabs-style-three::after { display: none; } .nav.nav-tabs.nav-tabs-style-three li { display: block; margin: 0; padding: 0; border: none; width: 100%; border-top: 2px solid var(--white); } .nav.nav-tabs.nav-tabs-style-three li button { width: 100%; margin: 0; border: none; text-align: left; height: 100%; padding: 41px 30px; border-radius: 0; color: var(--color-heading); font-size: 20px; font-weight: 500; position: relative; z-index: 1; padding-left: 65px; } .nav.nav-tabs.nav-tabs-style-three li:first-child { border: none; } .nav.nav-tabs.nav-tabs-style-three li button.active { background: var(--color-style-five); color: var(--white); } .nav.nav-tabs.nav-tabs-style-three li button::after { position: absolute; left: 30px; top: 50%; content: ""; height: 22px; width: 22px; border: 2px solid; border-radius: 50%; transform: translateY(-50%); background: transparent; } .nav.nav-tabs.nav-tabs-style-three li button::before { position: absolute; left: 36px; top: 50%; transform: translateY(-50%); content: ""; height: 10px; width: 10px; border: 2px solid; border-radius: 50%; visibility: hidden; opacity: 0; } .nav.nav-tabs.nav-tabs-style-three li button.active::before { opacity: 1; visibility: visible; } .tuition-fee-info { background: var(--dark-optional); overflow: hidden; border-radius: 10px; } .tuition-fee-info .top { padding: 20px 40px; background: #1d3466; } .tuition-fee-info .top p { margin: 0; margin-top: 10px; font-size: 18px; } .tuition-fee-info .top h4 { margin-bottom: 0; } .tuition-fee-info .bottom { padding: 40px; } .tuition-fee-info ul { margin: 0; padding: 0; list-style: none; } .tuition-fee-info li { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 8px; margin-top: 8px; color: #c9d6e0; position: relative; z-index: 1; padding-left: 15px; } .tuition-fee-info li:first-child { margin-top: 0; padding-top: 0; border: none; } .tuition-fee-info .bottom ul { margin-bottom: 30px; } .tuition-fee-info .bottom ul:last-child { margin: 0; } .tuition-fee-info li::after { position: absolute; left: 0; content: ""; height: 8px; width: 8px; background: #ed4164; border-radius: 50%; } /* ============================================================== # Admission Form =================================================================== */ .admission-form-style-one { padding: 80px; border: 1px solid #e7e7e7; background: var(--white); border-radius: 10px 0 0 10px; } .admission-form-items { border-radius: 10px 0 0 10px; position: relative; z-index: 1; } .admission-form-style-one-area .shape img { position: absolute; left: 2%; top: 0; } .admission-form-style-one .form-group { margin-bottom: 15px; } .admission-form-style-one label { color: var(--color-heading); font-weight: 500; font-size: 18px; } .admission-form-style-one input { height: 50px; padding: 20px; } .admission-form-style-one .nice-select { height: 50px; border-radius: 4px; border: 1px solid #ced4da; } .admission-form-style-one .nice-select::after { margin-top: -3px; } .admission-form-style-one button i { margin-right: 5px; } .admission-form-style-one button { display: inline-block; font-weight: 600; text-transform: capitalize; transition: all 0.35s ease-in-out; overflow: hidden; border-radius: 6px; -webkit-box-shadow: inherit; box-shadow: inherit; font-size: 17px; letter-spacing: 0; position: relative; z-index: 1; color: var(--white); border: none; background: var(--color-primary); padding: 13px 40px; margin-top: 10px; } .theme-style-three .admission-form-style-one button { background: var(--color-style-five); } .admission-form-style-one button::after { position: absolute; top: inherit; right: inherit; bottom: inherit; left: -5%; content: ""; height: 150px; width: 115%; z-index: -1; background-color: var(--dark); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translateY(-45%) skew(25deg) scale(0); transform: translateY(-45%) skew(25deg) scale(0); } .admission-form-style-one button:hover::after { -webkit-transform: translateY(-45%) skew(25deg) scale(1.2); transform: translateY(-45%) skew(25deg) scale(1.2); } .admission-form-style-one p { margin-bottom: 30px; } /* ============================================================== # Contact =================================================================== */ .contact-form-style-one { padding: 80px; background: var(--white); box-shadow: 0px 15px 60px -10px rgb(109 117 143 / 33%); border-radius: 10px; position: relative; } .contact-form-style-one img { position: absolute; right: 100%; bottom: -50px; margin-right: -41px; z-index: -1; width: 150px; } .contact-style-one-area { position: relative; z-index: 1; } .contact-style-one-area::after { position: absolute; left: 0; top: 0; content: ""; height: 120px; width: 100%; background: var(--bg-gray-gradient-secondary); z-index: -1; } .contact-form-style-one input, .contact-form-style-one textarea { background: transparent; border: none; border-radius: 0; border-bottom: 1px solid #d2e3f9; padding: 0; box-shadow: none !important; } .contact-form-style-one .form-group { margin-bottom: 20px; } .contact-form-style-one textarea { height: 200px; margin-top: 15px; } .contact-form-style-one h2 { margin-bottom: 15px; } .contact-style-one-info .contact-info-items { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; } .contact-style-one-info .contact-info-items .item-single { border: 1px solid #a7d4f2; border-radius: 10px; padding: 50px 40px; } .contact-style-one-info .contact-info-items .item-single p { margin-bottom: 0; } .contact-style-one-info .contact-info-items .item-single .icon img { height: 60px; margin-bottom: 30px; } .contact-style-one-info .contact-info-items .item-single .icon i { font-weight: 100; font-size: 40px; margin-bottom: 30px; color: var(--color-primary); } .contact-info-items ul { margin: 0; padding: 0; list-style: none; } .contact-info-items ul li a { font-weight: 400; color: var(--color-paragraph); } .contact-info-items ul li a:hover { color: var(--color-primary); } .google-maps { overflow: hidden; border-radius: 20px; } .google-maps iframe { margin-bottom: -10px; height: 450px; width: 100%; } /* ============================================================== # Home Blog =================================================================== */ .home-blog-style-one-item { display: grid; grid-template-columns: 1fr 1fr; align-items: center; } .home-blog-thumb { position: relative; z-index: 1; height: 100%; overflow: hidden; border-radius: 10px; } .home-blog-thumb a { position: absolute; display: inline-block; right: 0; top: 0; padding: 10px 30px; background: var(--color-style-three); color: var(--white); border-top: none; border-right: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%, 0 60%); } .home-blog-meta ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 15px; } .home-blog-meta ul li a { color: var(--color-paragraph); display: inline-block; font-weight: 500; } .home-blog-meta ul li { font-weight: 500; display: inline-block; } .home-blog-meta ul li i { font-weight: 100; margin-right: 5px; } .home-blog-meta ul li a:hover { color: var(--color-primary); } .home-blog-thumb img { height: 100%; object-fit: cover; object-position: center; } .home-blog-style-one-item .content { padding: 50px; padding-right: 0; } /* ============================================================== # Activiries =================================================================== */ .activities-style-one { background: var(--color-style-three); padding: 60px 40px; position: relative; z-index: 1; } .activities-style-one a { color: var(--white); } .activities-style-one a:hover { color: var(--white); } .activities-style-one p { color: var(--white); margin: 0; } .activities-style-one .icon { display: inline-block; height: 60px; width: 60px; margin: 25px 0; position: relative; z-index: 1; } .activities-style-one .icon::after { position: absolute; right: -18px; top: 50%; transform: translateY(-50%); content: ""; height: 45px; width: 45px; background: #FF922E; z-index: -1; border-radius: 50%; } .activities-style-one::after { position: absolute; left: 0; top: -5px; content: ""; height: 50px; width: 100%; background: url(../img/shape/64.png); background-size: 78%; background-repeat: repeat-x; background-position: center top; } .activities-style-one::before { position: absolute; left: 0; bottom: -5px; content: ""; height: 50px; width: 100%; background: url(../img/shape/63.png); background-size: 78%; background-repeat: repeat-x; background-position: center bottom; } .activities-style-one.color-one { background: #D94DA6; } .activities-style-one.color-two { background: #FF922E; } .activities-style-one.color-style-three { background: #307AD5; } .activities-style-one.color-one .icon::after { background: var(--color-style-three); } .activities-style-one.color-two .icon::after { background: #307AD5; } .activities-style-one.color-style-three .icon::after { background: #2ECA7F; } /* ============================================================== # Zoom Meeting =================================================================== */ .meeting-style-one-item { overflow: hidden; border-radius: 10px; border: 1px solid #d2e3f9; padding: 10px; } .meeting-style-one-item .thumb { position: relative; overflow: hidden; border-radius: 10px; } .meeting-style-one-item .thumb img { transition: all 0.35s ease-in-out; } .meeting-style-one-item:hover > .thumb img { transform: scale(1.1); } .meeting-style-one-item .thumb span { position: absolute; left: 30px; bottom: 30px; color: var(--white); background: var(--bg-gradient); padding: 0 12px; border-radius: 8px; display: flex; align-items: center; } .meeting-style-one-item .thumb span i { font-weight: 100; margin-right: 5px; } .meeting-style-one-item .info { padding: 30px; } .meeting-style-one-item .info ul { margin: 0; padding: 0; list-style: none; margin-bottom: 15px; } .meeting-style-one-item .info ul li { display: inline-block; margin-right: 20px; position: relative; z-index: 1; } .meeting-style-one-item .info ul li::after { position: absolute; right: -15px; top: 50%; content: ""; transform: translateY(-50%); height: 5px; width: 5px; background: var(--color-heading); border-radius: 50%; } .meeting-style-one-item .info ul li:last-child::after { display: none; } .meeting-style-one-item .info h4 { line-height: 1.3; } .meeting-style-one-item .info h5 { margin: 0; border-top: 1px solid #d2e3f9; padding-top: 15px; display: flex; align-items: center; justify-content: space-between; margin-top: 30px; color: var(--color-paragraph); } .meeting-style-one-item .info h5 strong { color: var(--color-primary); } .meeting-author { display: flex; align-items: center; margin-top: 25px; } .meeting-author .thumb img { height: 45px; width: 45px; border-radius: 50%; margin-right: 15px; } .meeting-author .content h6 { margin: 0; font-size: 18px; } .event-details-items .course-preview-info .content .top { background: var(--dark); position: relative; } .event-details-items .course-preview-info .content .top .badge { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); background: var(--color-style-four); padding: 10px; font-weight: 500; color: var(--color-heading); } .event-details-items .course-preview-info .content .top h2 { color: var(--white); display: flex; align-items: flex-end; gap: 10px; } .event-details-items .course-preview-info .content .top h2 del { font-size: 24px; font-weight: 400; position: relative; bottom: 3px; } /* ============================================================== # Form Style Two =================================================================== */ .form-style-two-items { background-size: contain; background-repeat: no-repeat; background-position: center; padding: 250px 100px; position: relative; z-index: 1; } .form-style-two-items .shape { position: absolute; left: 0; bottom: -120px; z-index: -1; } .form-style-two-items .site-heading { margin-bottom: 40px; } form.form-style-two label { font-weight: 600; color: var(--color-heading); } form.form-style-two .form-group { margin-bottom: 15px; } form.form-style-two input { border: none; min-height: 45px; } form.form-style-two .nice-select { border: none; border-radius: 4px; } form.form-style-two .nice-select::after { margin-top: -2px; } /* ============================================================== # Home Blog Two =================================================================== */ .home-blog-style-two-item .info { position: relative; z-index: 1; overflow: hidden; margin-top: 25px; padding: 30px; padding-top: 0; } ul.blog-meta { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; } ul.blog-meta li { display: inline-block; transition: all 0.35s ease-in-out; font-size: 16px; } ul.blog-meta li i { font-weight: 100; margin-right: 5px; } ul.blog-meta li a { display: inline-block; color: var(--color-paragraph); font-weight: 400; } ul.blog-meta li a:hover { color: var(--color-primary); } .color-secondary ul.blog-meta li a:hover { color: var(--color-style-two); } .theme-style-three ul.blog-meta li a:hover { color: var(--color-style-five); } .theme-skyblue ul.blog-meta li a:hover { color: var(--color-style-three); } .home-blog-style-two-item .blog-title { line-height: 1.3; } .home-blog-style-two-item .thumb { position: relative; overflow: hidden; } .home-blog-style-two-item .thumb ul.blog-meta { position: absolute; left: 0; bottom: 0; background: var(--white); margin: 0; padding: 20px 30px; border-top-right-radius: 10px; padding-bottom: 2px; } .home-blog-style-two-item { overflow: hidden; border-radius: 10px; background: var(--white); box-shadow: 0px 15px 20px -10px rgb(109 117 143 / 33%); } .home-blog-style-two-item .thumb ul.blog-meta::after { position: absolute; right: -15px; bottom: 0px; content: ""; height: 35px; width: 15px; border-bottom-left-radius: 20px; box-shadow: 0 20px 0 0 var(--white); } .home-blog-style-two-item .thumb img { transition: all 0.35s ease-in-out; } .home-blog-style-two-item:hover .thumb img { transform: scale(1.1); } .home-blog-style-two-item .thumb ul.blog-meta li a { display: inline-block; border-radius: 30px; padding: 0px 11px; font-size: 14px; border: 1px solid var(--color-primary); } .color-secondary .home-blog-style-two-item .thumb ul.blog-meta li a { border: 1px solid var(--color-style-two); } .theme-style-three .home-blog-style-two-item .thumb ul.blog-meta li a { border: 1px solid var(--color-style-five); } .theme-skyblue .home-blog-style-two-item .thumb ul.blog-meta li a { border: 1px solid var(--color-style-three); } a.btn-read-more { text-transform: uppercase; color: var(--color-paragraph); } a.btn-read-more i { display: inline-block; font-weight: 100; transform: rotate(-45deg); font-size: 20px; position: relative; top: 2px; } a.btn-read-more:hover { color: var(--color-primary); } .color-secondary a.btn-read-more:hover { color: var(--color-style-two); } .theme-skyblue a.btn-read-more:hover { color: var(--color-style-three); } .color-secondary a.btn-read-more:hover { color: var(--color-style-two); } .theme-style-three a.btn-read-more:hover { color: var(--color-style-five); } /* Blgo Styel Three */ .color-style-six .shape img { position: absolute; left: 0; bottom: -60px; z-index: -1; } .color-style-six .shape img:nth-child(2) { background-size: contain; z-index: 1; width: 100%; } .home-blog-style-three-item .info { background: var(--white); padding: 40px; position: relative; z-index: 1; clip-path: polygon(100% 0, 100% 85%, 87% 100%, 0 100%, 0 0); border-bottom-left-radius: 10px; padding-top: 50px; } .home-blog-style-three-item .thumb .meta a { position: absolute; left: 40px; bottom: -21px; background: var(--color-primary); color: var(--white); display: inline-block; padding: 7px 20px; font-size: 15px; font-weight: 500; border-radius: 40px; z-index: 2; border: 4px solid var(--white); } .home-blog-style-three-item .thumb .meta a::after { position: absolute; bottom: 17px; right: -17px; content: ""; height: 35px; width: 15px; border-bottom-left-radius: 20px; box-shadow: 0 20px 0 0 var(--white); } .home-blog-style-three-item .thumb .meta a::before { position: absolute; content: ""; bottom: 17px; left: -17px; height: 35px; width: 15px; border-bottom-right-radius: 20px; box-shadow: 0 15px 0 0 var(--white); } .color-secondary .home-blog-style-three-item .thumb .meta a { background: var(--color-style-two); } .theme-skyblue .home-blog-style-three-item .thumb .meta a { background: var(--color-style-three); } .theme-style-three .home-blog-style-three-item .thumb .meta a { background: var(--color-style-five); } .home-blog-style-three-item .thumb .meta { margin: 0; } .home-blog-style-three-item { position: relative; z-index: 1; } .home-blog-style-three-item a.btn-circle { position: absolute; right: 0; bottom: 0; background: var(--color-primary); display: inline-block; z-index: 1; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50%; border: 2px solid #e7e7e7; } .color-secondary .home-blog-style-three-item a.btn-circle { background: var(--color-style-two); } .theme-skyblue .home-blog-style-three-item a.btn-circle { background: var(--color-style-three); } .theme-style-three .home-blog-style-three-item a.btn-circle { background: var(--color-style-five); } .home-blog-style-three-item a.btn-circle img { height: 20px; } .home-blog-style-three-item .blog-meta ul { margin: 0; padding: 0; list-style: none; display: flex; gap: 20px; } .home-blog-style-three-item .blog-meta ul li { position: relative; z-index: 1; } .home-blog-style-three-item .blog-meta ul li::after { position: absolute; right: -13px; top: 14px; content: ""; height: 5px; width: 5px; background: var(--color-paragraph); border-radius: 50%; } .home-blog-style-three-item .blog-meta ul li:last-child::after { display: none; } .home-blog-style-three-item .blog-meta ul li a { font-weight: 400; color: var(--color-paragraph); } .home-blog-style-three-item.color-style-one .thumb .meta a { background: #D94DA6; } .home-blog-style-three-item.color-style-one a.btn-circle { background: #D94DA6; } .home-blog-style-three-item.color-style-one .info .blog-title a:hover { color: #D94DA6; } .home-blog-style-three-item.color-style-three .thumb .meta a { background: #FF922E; } .home-blog-style-three-item.color-style-three a.btn-circle { background: #FF922E; } .home-blog-style-three-item.color-style-three .info .blog-title a:hover { color: #FF922E; } /* ============================================================== # Login Register =================================================================== */ .login-register-area, .login-register-area div { height: 100%; } .login-register-area .row div { height: auto; } .login-register-area { overflow: hidden; position: relative; z-index: 1; padding: 30px; } @media (min-width: 1500px) { .login-register-area { padding: 80px; } } .login-register-area .shape { position: absolute; left: 0; top: 0; height: 100%; width: 50%; z-index: -1; } .login-register-area .shape img { height: 100%; width: 100%; object-fit: cover; object-position: right; } .login-register-area .thumb { position: absolute; right: 0; top: 50%; width: 50%; transform: translateY(-50%); padding: 100px; text-align: center; } .login-register-area .thumb img { height: 100%; object-fit: contain; object-position: center; } .login-style-one-items { position: relative; background-color: var(--white); z-index: 1; overflow: hidden; border-radius: 10px; border: 1px solid #d2ecf7; } .login-register-items h2 { margin-bottom: 10px; } .login-register-area .form-group { margin-bottom: 25px; } .login-register-area .form-group input { border-radius: 50px; padding: 0 26px; min-height: 55px; border: none; background: rgba(0, 0, 0, 0.2); color: var(--white); } .login-register-area.register .form-group input { border-radius: 10px; } .login-register-area .form-group input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: var(--white); opacity: 1; /* Firefox */ ; } .login-register-area .form-group input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--white); } .login-register-area .form-group input::-ms-input-placeholder { /* Microsoft Edge */ color: var(--white); } .remember-pass { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; } .remember-pass input { min-height: 0; margin-right: 5px; } .login-register-items button { margin-top: 20px; padding: 13px 45px !important; border-radius: 50px; background: var(--bg-gradient); } .login-register-items button:hover { color: var(--white); } .register .login-register-items button { border-radius: 10px; } .login-register-items button::after { background: var(--white); } /* ============================================================== # 404 page =================================================================== */ .error-page-area { position: relative; z-index: 1; } .error-page-area .shape-left { position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 100%; width: 20%; background-position: left !important; background-repeat: no-repeat !important; z-index: -1; opacity: 0.3; background-size: contain !important; } .error-page-area .shape-right { position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 100%; width: 20%; background-position: right !important; background-repeat: no-repeat !important; z-index: -1; opacity: 0.3; background-size: contain !important; } .error-box h1 { font-size: 150px; line-height: 110px; font-weight: 700; margin-bottom: 40px; text-shadow: 3px 3px #c0c0c0; } .error-box h2 { font-weight: 700; margin-bottom: 20px; } .error-box p { padding: 0 10%; } @media (min-width: 1024px) { .error-page-area { padding-top: 200px; } } /* ============================================================== # Footer =================================================================== */ @media (min-width: 1200px) { footer.footer-default { max-width: 95%; margin: auto; border-radius: 50px 50px 0 0; } } footer { position: relative; overflow: hidden; z-index: 1; } .footer-bottom.style-one::after { position: absolute; left: 0; bottom: 0; content: ""; height: 200px; width: 200px; background: var(--color-primary); z-index: -1; border-radius: 50%; filter: blur(120px); } .footer-shape-style-one img:first-child { position: absolute; right: 5%; top: 100px; z-index: -1; max-width: 200px; } footer .footer-logo img { height: 60px; margin-bottom: 25px; } footer .widget-title { margin-bottom: 30px; } footer ul { margin: 0; padding: 0; list-style: none; } ul.app-store li { display: inline-block; margin-right: 3px; } ul.app-store li a { display: inline-block; height: 55px; width: 55px; line-height: 55px; text-align: center; background: var(--dark); border-radius: 7px; } .bg-dark ul.app-store li a { background: #104262; } ul.app-store li a img { height: 25px; } footer .link li { margin-top: 10px; } footer .link li a { font-weight: 400; } footer.dark-optional .link li a { color: #d2e3f9; } footer.dark-optional .link li a:hover { color: var(--white); } footer.dark-optional p { color: #d2e3f9; } ul.contact-address { margin: 0; padding: 0; list-style: none; } ul.contact-address h4 { margin: 0; } footer ul.app-store { margin-top: 25px; } ul.contact-address p { margin-bottom: 10px; font-size: 18px; line-height: 1; text-transform: capitalize; } .footer-style-one ul.contact-address li { margin-top: 30px; } ul.contact-address li { display: flex; } ul.contact-address li i { display: inline-block; height: 50px; width: 50px; text-align: center; line-height: 48px; border: 1px solid #e7e7e7; color: var(--color-primary); border-radius: 50%; margin-right: 15px; font-size: 20px; } .bg-dark ul.contact-address li i { border-color: rgba(255, 255, 255, 0.3); } ul.contact-address li .icon img { height: 50px; margin-right: 15px; } footer .about { position: relative; z-index: 1; margin-right: 50px; padding-right: 40px; } footer.footer-style-one .about::after { position: absolute; right: 0; top: -200px; bottom: -200px; content: ""; width: 2px; border-right: 1px solid #e7e7e7; z-index: -1; } footer.bg-dark.footer-style-one .about::after { border-color: rgba(255, 255, 255, 0.2); } footer form { position: relative; z-index: 1; } footer form input.form-control { background: var(--white); border-radius: 10px; height: 60px; padding: 0 20px; padding-right: 115px; } footer form input { border: none; } footer form button { position: absolute; right: 5px; top: 5px; border: none; background: var(--color-primary); color: var(--white); height: 50px; padding: 0 20px; border-radius: 10px; font-weight: 500; } .color-secondary footer form button { background: var(--color-style-two); } .theme-style-three footer form button { background: var(--color-style-five); } footer form button:hover { background: var(--dark); } footer fieldset { display: flex; align-items: center; margin-top: 15px; } footer fieldset input { min-height: inherit; margin-right: 10px; position: relative; top: -3px; } /* Footer Style Two */ footer.footer-style-two .about { border-right: none; margin-right: 0; } .footer-style-two .subscribe-form { margin-top: 35px; } footer.footer-style-two .f-items { border-top: 1px solid #ccd6fa; border-bottom: 1px solid #ccd6fa; padding: 60px 0; } .footer-bottom.style-two { padding: 20px 0; } .bg-dark .footer-bottom.style-two { padding-top: 0; margin-top: -10px; } .footer-top h2 { margin: 0; font-size: 50px; background: var(--bg-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } .color-secondary .footer-top h2 { background: var(--bg-gradient-secondary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .footer-top { padding: 50px 0; } ul.facilities-list { margin: 0; padding: 0; list-style: none; text-align: right; margin-right: 25px; } ul.facilities-list li { display: inline-block; margin-right: -25px; } ul.facilities-list li a { display: flex; flex-direction: column; text-align: center; justify-content: center; border-radius: 50%; height: 180px; width: 180px; border: 1px solid #e7e7e7; font-size: 18px; background: rgba(255, 255, 255, 0.4); } ul.facilities-list li a i { font-size: 40px; font-weight: 100; margin-bottom: 10px; color: var(--color-primary); } ul.facilities-list li:nth-child(2n) a { background: var(--white); } ul.facilities-list li a img { height: 40px; margin-bottom: 10px; } footer.footer-style-two form button { background: var(--color-primary); } footer.footer-style-two form button:hover { background: var(--dark); } .color-secondary footer.footer-style-two form button { background: var(--color-style-two); } .color-secondary footer.footer-style-two form button:hover { background: var(--dark); } .bg-dark ul.facilities-list li a { background: transparent; border-color: rgba(255, 255, 255, 0.15); } footer.bg-dark.footer-style-two .f-items { border-color: rgba(255, 255, 255, 0.15); } .bg-dark ul.facilities-list li:nth-child(2n) a { background: rgba(255, 255, 255, 0.05); } .footer-shape-style-two { position: absolute; left: 0; bottom: 0; z-index: -1; } .footer-shape-style-two img { height: 100%; width: 100%; object-fit: contain; object-position: top center; } /* Footer Style Three */ .bg-gray-gradient-secondary { background: var(--bg-gray-gradient-secondary); } .footer-bottom.style-three { padding: 20px 0; border-top: 1px solid #dedede; } .footer-shape-style-three img:first-child { position: absolute; left: 0; bottom: 0; z-index: -1; max-width: 8%; animation: fadeLeftRight 15s linear infinite; } .footer-shape-style-three img:nth-child(2) { position: absolute; right: 5%; top: 5%; z-index: -1; max-width: 6%; } ul.contact-widget { margin: 0; padding: 0; list-style: none; } ul.contact-widget li { display: flex; margin-top: 20px; } ul.contact-widget .icon i { display: inline-block; height: 40px; width: 40px; text-align: center; line-height: 37px; background: var(--white); border-radius: 50%; margin-right: 15px; color: var(--color-heading); border: 2px solid var(--white); color: var(--color-style-three); } ul.contact-widget li p { margin: 0; text-decoration: underline; font-size: 18px; color: var(--color-heading); } ul.contact-widget li a { font-size: 20px; line-height: 2; } ul.footer-social li { display: inline-block; margin-right: 5px; } ul.footer-social { margin: 0; padding: 0; list-style: none; margin-top: 20px; } ul.footer-social li a { display: inline-flex; height: 42px; width: 42px; background: var(--dark); text-align: center; color: var(--white); border-radius: 50%; text-align: center; justify-content: center; flex-direction: column; } ul.footer-social li a:hover { background: var(--color-primary); color: var(--white); } .color-secondary ul.footer-social li a:hover { background: var(--color-style-two); } .bg-dark ul.footer-social li a { background: #104262; } .bg-dark ul.footer-social li a:hover { background: var(--color-primary); } .theme-style-three .bg-dark ul.footer-social li a:hover { background: var(--color-style-five); color: var(--white); } .theme-skyblue .bg-dark ul.footer-social li a:hover { background: var(--color-style-three); color: var(--white); } footer.bg-dark .link li a { color: #d2e3f9; } footer.bg-dark .link li a:hover { color: var(--white); } footer.bg-dark .about { border-color: rgba(255, 255, 255, 0.2); } ul.footer-social li a img { height: 16px; max-width: max-content; margin: auto; } .bg-dark ul.footer-social li a img { filter: brightness(0) invert(1); } footer.footer-style-four { background-size: 30%; background-repeat: no-repeat; background-position: right bottom; } ul.contact-list-two { margin-bottom: 0; padding: 0; list-style: none; } ul.contact-list-two li { display: flex; align-items: center; gap: 15px; margin-top: 15px; } ul.contact-list-two li:first-child { margin-top: 0; } ul.contact-list-two li h5 { margin: 0; color: var(--white-secondary); } ul.contact-list-two li i { display: inline-block; background: rgba(255, 255, 255, 0.06); height: 40px; width: 40px; text-align: center; line-height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); } ul.contact-list-two li a { font-weight: 500; color: var(--white-secondary); } ul.contact-list-two li a:hover { color: var(--white); } ul.contact-list-two li h5 { font-weight: 500; font-size: 20px; } footer ul.contact-list-two { margin-bottom: 30px; } /* Footer Bottom */ ul.link-list { margin: 0; padding: 0; list-style: none; } ul.link-list li { display: inline-block; } ul.link-list li a { font-weight: 400; } .text-end ul.link-list li { margin-left: 21px; } .footer-bottom p { margin: 0; } .footer-bottom.style-one { padding: 20px 0; position: relative; z-index: 1; border-top: 1px solid #e7e7e7; background: var(--white); } .bg-dark .footer-bottom.style-one { border-color: rgba(255, 255, 255, 0.2); background: var(--dark); } footer.dark-optional .footer-bottom p { color: var(--white); } /* Pages */ .privacy-pages ul { padding-left: 30px; } .privacy-pages { padding: 60px; border: 1px solid #e7e7e7; border-radius: 10px; font-size: 18px; line-height: 1.8; } /* ============================================================== # Responsive CSS =================================================================== */ @media screen and (max-width: 1399px) { .about-style-seven-thumb { height: 100%; } .about-style-seven-thumb img:first-child { height: 100%; object-fit: cover; object-position: center; } .about-style-seven-info .title { padding: 0; margin-bottom: 35px; } .about-style-seven-items .shape { right: -35px; top: -35px; } .about-style-seven-info .d-flex .thumbs { display: none; } .about-style-seven-items { margin: 0; padding: 80px 45px; } .about-style-seven-info .d-flex .fun-facts { gap: 40px; } .choose-us-style-two-content .thumb img { border-radius: 10px; } /* Session */ .session-time-items { padding: 80px 60px; background-image: none !important; border: 2px solid var(--color-style-three); border-radius: 10px; } /* Zoom Meeting */ .meeting-style-one-item .info { padding: 30px 15px; } .meeting-style-one-item .info h4 { font-size: 20px; } .meeting-author .content h6 { font-size: 18px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .banner-style-two-area .col-xl-10.offset-xl-1.col-lg-12 { margin: 0; width: 100%; } .banner-style-two-info { justify-content: flex-start; } .banner-style-eight-info h2 { font-size: 65px; } .banner-style-eight-info p { font-size: 16px; } .banner-style-nine-items h2 { font-size: 60px; } .banner-style-four-area h2 { font-size: 60px; } .banner-style-four-area p { font-size: 17px; } /* Why Choose Us */ .choose-us-style-two-area .pr-60 { padding-right: 10px; } .nav.nav-tabs.tab-style-two-nav { padding: 50px 30px; } .choose-us-style-one-info .pr-80 { padding-right: 15px; } .grid-style-one { padding: 30px; } .card-style-three h6 { font-size: 18px; } /* Footer */ ul.facilities-list li a { height: 160px; width: 160px; } } @media screen and (max-width: 1199px) { /* Testimonial */ .testimonial-style-five-items { padding: 60px; background: var(--bg-gray-gradient); border-radius: 10px; } .testimonial-style-five-items .shape { display: none; } .testimonial-style-five-item { padding: 0; } .form-style-two-items { background: var(--bg-gray-gradient) !important; border-radius: 30px; padding: 120px 80px; } .form-style-two-items .shape { display: none; } .color-style-six .shape img { bottom: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .heading-left .title { font-size: 42px; } .site-heading .title { font-size: 42px; } .title { font-size: 42px; } /* Navbar */ form.search-form { max-width: 200px; } /* Banner One */ .card-style-one { display: block; } .card-style-one > img { display: none; } .card-style-one .right { border: none; padding: 0; margin-top: 15px; } .banner-style-one-top h2 { font-size: 68px; } /* Banner Style Two */ .banner-style-two-info { display: block; padding-bottom: 60px; } .banner-style-two-area { padding-top: 250px; } .banner-style-two-info h2 { font-size: 75px; } .card-style-three { justify-content: space-between; max-width: 90%; margin: auto; padding: 30px 50px; } .banner-style-two-info .info { text-align: center; margin-bottom: 50px; } .banner-style-two-bottom-info .category-search { min-width: 550px; } /* Banner */ .banner-style-three-layout .left-info h2 { font-size: 50px; } .banner-style-thee-items .banner-thumb::after { top: 300px; } .card-style-four h2 { font-size: 40px; } .card-style-four i { font-size: 14px; } .card-style-four h4 { font-size: 15px; } .banner-style-three-layout { gap: 30px; } .banner-style-three-area::after { display: none; } /* Banner Four */ .banner-style-four-area h2 { font-size: 55px; } .banner-shape-style-four img:first-child { display: none; } .banner-style-four-area p { padding-right: 0; } /* Banner Five */ .banner-style-five-info h2 { font-size: 50px; } .banner-style-five-info > p { padding: 0; font-size: 16px; } /* Banner Six */ .banner-style-six-info h2 { font-size: 50px; } .banner-style-six-area .shape img { display: none; } .banner-style-six-info p { padding: 0; font-size: 17px; } .banner-style-six-thumb .card-style-six { right: -30px; top: auto; bottom: 50px; display: none; } .banner-style-six-thumb .card-style-two { left: auto; bottom: 100px; right: 0; } .banner-style-six-info .category-search { max-width: 600px; width: 120%; } /* Banner Seven */ .banner-style-seven h2 { font-size: 50px; } .banner-style-seven p { padding: 0; font-size: 17px; } .banner-style-seven .right-info img { display: none; } /* Banner Eight */ .banner-style-eight-info { padding-top: 130px; padding-bottom: 160px; } .banner-style-eight-info h2 { font-size: 55px; } .banner-style-eight-info h2 strong { font-size: 48px; padding-bottom: 10px; } .banner-style-eight-info h3 { display: none; } .banner-style-eight-info p { font-size: 15px; } .info-style-one .title { font-size: 40px; } /* Banner Style Nine */ .banner-style-nine-items h2 { font-size: 50px; } .banner-style-nine-items .thumb .card-style-seven { left: -24px; bottom: 20%; } .banner-style-nine-items .thumb::after { height: 420px; width: 420px; } .banner-style-nine-items .thumb::before { height: 500px; width: 500px; bottom: 5%; } /* Thumb Style Four */ .thumb-style-four .fun-fact { display: block; } .thumb-style-four .fun-fact img { margin: 0; margin-bottom: 15px; } .thumb-style-four .right .thumb { margin-top: 30px; } /* About */ .about-style-one-info h2 { font-size: 36px; } .about-style-two-thumb { display: none; } .about-style-four-area .shape img { right: 30px; top: 80px; } /* Why Choose Us */ .choose-us-style-two-area .pr-60 { padding-right: 10px; } .nav.nav-tabs.tab-style-two-nav { margin-bottom: 50px; } .choose-us-style-two-content .thumb img { border-radius: 10px; } .nav.nav-tabs.tab-style-two-nav { display: grid; grid-template-columns: 1fr 1fr; } /* Course */ .course-style-one-item.list-layout { grid-template-columns: 1fr; } .course-filter-area .pr-60 { padding-right: 10px; } .course-filter-sidebar { margin-top: 60px; } form.course-search-form { max-width: 280px; } /* Certificate */ .certificate-thumb img { object-position: bottom; } /* Category */ .category-style-three-item a .icon img { position: inherit; margin-bottom: 30px; } /* Testimonial */ .testimonial-style-three p { font-size: 16px; } .testimonial-style-three-info .title { font-size: 30px; } .testimonial-style-three-info { height: auto; } /* Event */ .event-style-two-items .thumb { width: 25%; } /* Pricing */ .nav-tabs.pricing-tab-navs { padding: 0; text-align: center; background: transparent; margin-bottom: 50px; } .nav-tabs.pricing-tab-navs li.nav-item { float: none; display: inline-block; margin: 0 -2px; } .pricing-style-one-items ul.pricing-list { position: relative; background: var(--dark); width: 100%; margin: 0; left: 0; top: 0; padding: 120px; border-radius: 10px; margin-bottom: 50px; } .nav-tabs.pricing-tab-navs::before, .nav-tabs.pricing-tab-navs::after { display: none; } .nav-tabs.pricing-tab-navs .nav-link { border-color: #9fdad0; color: var(--color-heading); } .pricing-style-one-items .pl-50 { padding-left: 10px; } /* Fun Factor */ .fun-fact-style-three-items { margin-right: 70px; } .advantages-info { padding: 0 30px; margin-left: -70px; } .advantages-info h2 { font-size: 28px; top: 0; margin-bottom: 30px; } /* Advisor */ .advisor-style-one-items > .row > .col-xl-4:nth-child(3) { width: 100%; padding-left: 10px; } .advisor-style-one-items .team-grid .col-xl-4 { width: 33.33333%; } /* Child Activities */ .activities-area .shape { display: none; } .activities-style-one { padding: 80px; } /* Fun Fact */ .fact-style-one-item h2 { font-size: 36px; } .fact-style-one-item h6 { font-size: 16px; } /* Why Choose Us */ .choose-us-style-one-info .pr-80 { padding-right: 10px; } .choose-us-style-one-info .thumbs { margin-top: 30px; height: auto; } .choose-us-style-one-info .thumbs img { width: 100%; border-radius: 10px; } .choose-us-style-one-info .thumbs img:nth-child(2) { width: auto; left: 30px; } /* Event */ .event-style-four-item { padding: 50px 30px; grid-template-columns: 1fr 2fr 1.6fr 1.4fr; gap: 30px; } .event-style-four-item h2 { font-size: 28px; } .nav.nav-tabs.course-details-navs, .event-details-info .nav.nav-tabs.course-details-navs { border: none; border-radius: 0; } .nav.nav-tabs.course-details-navs .nav-item .nav-link, .nav.nav-tabs.course-details-navs .nav-item:last-child .nav-link { border: 1px solid #d2dbff; border-radius: 6px; padding: 13px 28px; } .nav.nav-tabs.course-details-navs .nav-item { margin-right: 10px; margin-bottom: 10px; } .admission-form-style-one { padding: 80px 40px; } ul.event-location li { width: 100%; } .event-style-three-item .event-style-two-item { padding: 50px 30px; } .event-style-three-item .event-style-two-item .d-grid { gap: 30px; } /* Zoom Meeting Details */ .course-details-left-info ul.list-style-one { grid-column-gap: 20px; } /* Login Register */ .login-register-area, .login-register-area div { height: auto; min-height: 100%; } .login-register-area { display: flex; flex-direction: column; justify-content: center; } .login-register-area .thumb { padding: 30px; display: flex; flex-direction: column; justify-content: center; } .login-register-items { padding: 80px 50px; } /* Profile */ .instructor-profile-cover-items { grid-template-columns: 1fr 2.5fr; } /* Footer */ ul.facilities-list li a { height: 145px; width: 145px; } .footer-top h2 { font-size: 34px; } ul.footer-social li a { width: 40px; height: 40px; } footer .about { margin-right: 30px; } ul.contact-list-two li h5 { font-size: 17px; } } /* Screen Mobile To Tablet */ @media screen and (max-width: 1023px) { form.search-form { display: none; } .navbar .attr-right .attr-nav li.button a { padding: 10px 20px !important; } .top-bar-area .item-flex { flex-wrap: wrap; justify-content: center; column-gap: 25px; row-gap: 10px; } .top-bar-area .item-flex li { margin: 0; } .top-bar-area .text-end .item-flex { gap: 0; margin-top: 12px; } .top-bar-area.transparent { background: var(--dark-secondary); } .top-bar-area.transparent li, .top-bar-area.transparent a, .top-bar-area.transparent p, .top-bar-area.transparent li i { color: var(--white); } .top-bar-area.transparent img { filter: brightness(0) invert(1); } .top-bar-area.transparent .item-flex > div::after { border-color: var(--white); } } @media screen and (max-width: 991px) { .heading-left p { margin-top: 20px; } /* Banner Style One */ .banner-style-one-top { margin: 0; max-width: 100%; margin-bottom: 50px; } .banner-style-one-area { padding-top: 100px; padding-bottom: 0; } .banner-style-one-thumb::before { display: none; } .banner-style-one-thumb > img { position: inherit; margin: 0; height: auto; left: auto; transform: none; } .banner-style-one-thumb { margin: 0; margin-top: 60px; } .banner-style-one-thumb .card-style-two { bottom: auto; top: 35%; background: var(--white); right: 50px; } .banner-style-one-top h2 { font-size: 65px; text-align: center; } .banner-style-one-top h2:nth-child(3) { text-align: center; } .banner-style-one-top h2:nth-child(2) { text-align: center; } .banner-style-one-shape img:nth-child(2) { display: none; } .card-style-one > img { display: none; } /* Banner Style Two */ .banner-style-two-info { display: block; padding-bottom: 60px; } .banner-style-two-area { padding-top: 100px; } .card-style-three { justify-content: space-between; max-width: 90%; margin: auto; padding: 30px 50px; } .banner-style-two-info .info { text-align: center; margin-bottom: 50px; } /* Banner Style Three */ .banner-style-thee-items .banner-thumb { display: none; } .banner-style-three-area { padding-top: 100px; padding-bottom: 120px; } .banner-style-three-layout { grid-template-columns: 1fr; padding: 0; } .banner-style-three-layout .left-info h2 { margin: 0; padding: 0; background: transparent; margin-bottom: 30px; } .banner-style-three-layout .left-info h2::before, .banner-style-three-layout .left-info h2::after { display: none; } .card-style-four { background-image: none !important; border: 1px solid var(--color-primary); border-radius: 10px; } .banner-style-three-layout .right-info img { margin-top: 50px; } /* Banner Style Four */ .banner-style-four-area, .banner-style-four-area div { height: auto; } .banner-style-four-area p { padding: 0; font-size: 18px; } .banner-style-four-area { padding: 120px 0; } .banner-style-four-area .row div { padding-top: 0; } .banner-shape-style-four img:first-child { top: 30px; right: 50px; left: auto; } .banner-style-four-area .thumb-style-one { margin-top: 60px; display: none; } /* Banner Five */ .banner-style-five-area, .banner-style-five-area div { height: auto; } .banner-style-five-area .thumb-two-one { display: none; } .banner-style-five-area { padding-top: 100px; padding-bottom: 60px; } /* Banner Six */ .banner-style-six-area::after { display: none; } .banner-style-six-area .shape img { display: none; } .banner-style-six-info { margin: 0; } .banner-style-six-area { padding-top: 100px; } .banner-style-six-thumb { margin-top: 30px; padding: 0 50px; } .banner-style-six-thumb .card-style-six { right: 0; top: 40%; } .banner-style-six-thumb .card-style-two { left: 0; } /* Banner Seven */ .banner-style-seven-area { padding: 0; } .banner-style-seven-area::after { display: none; } .banner-round-shape { display: none; } .banner-area div, .banner-area { height: auto; } .banner-style-seven h2 { font-size: 60px; } .banner-style-seven { margin: 0; border-radius: 0; } .banner-style-seven-info .fixed-thumb { right: auto; left: 50%; transform: translateX(-50%); display: none; } .banner-style-seven-info .content { padding-bottom: 0; padding-top: 100px; } .banner-style-seven-info { padding-bottom: 120px; } .banner-area.banner-style-seven-area .right-info { margin-top: 50px; } /* Banner Eight */ .banner-style-eight-info { padding-top: 100px; padding-bottom: 0; text-align: center; } .banner-style-eight-info h2 { margin-bottom: 30px; line-height: 1.2; font-size: 70px; } .banner-style-eight-info h3 { margin-bottom: 30px; display: none; } .thumb-style-three > img { margin: 0; max-width: 80%; } .banner-style-eight-area .shape img:first-child { top: 80px; } /* About */ .about-style-six-info .top-info { grid-template-columns: 1fr; gap: 15px; } .about-style-six-thumb { display: none; } .about-style-six-info .top-info h2 { font-size: 60px; display: none; } .about-style-six-info .top-info img { width: 100%; } .about-style-seven-items { padding: 0; margin: 0; box-shadow: none; background: transparent; text-align: center; } .about-style-seven-info .d-flex { flex-direction: column; } .about-style-seven-thumb { top: 0; margin: 0; margin-bottom: 100px; height: auto; } .about-style-seven-items .shape { display: none; } .about-style-seven-thumb a.round-text { right: auto; top: auto; bottom: -60px; left: 50%; transform: translateX(-50%); } .about-style-seven-info .title { padding: 0; } .about-style-seven-area { background: var(--white); } .about-style-seven-info .d-flex .fun-facts { background: transparent; border-radius: 0; padding: 0; display: grid; gap: 30px; width: 100%; margin-top: 10px; } .about-style-seven-info .d-flex .fun-facts .single { background: var(--color-style-three); padding: 40px; width: 100%; border-radius: 10px; } .about-style-seven-info .d-flex .fun-facts .counter { justify-content: center; } .about-style-seven-info .d-flex .thumbs { display: none; } .about-style-four-thumb { margin-bottom: 50px; } .about-style-four-info .bottom-info { margin: 0; grid-template-columns: 1fr; gap: 15px; } .about-style-four-info .bottom-info .left { display: none; } .about-style-four-info .title { border: none; margin: 0; } /* Choose Us Style Two */ .nav.nav-tabs.tab-style-two-nav { padding: 50px 30px; margin-bottom: 50px; } .choose-us-style-two-content { grid-template-columns: 1fr; gap: 30px; } .choose-us-style-two-content .thumb img { height: auto; width: 100%; border-radius: 10px; } .activities-area .shape { display: none; } /* Category */ .category-style-three-item a .icon img { position: inherit; margin-bottom: 30px; } .category-swiper-nav { margin-right: 0; display: none; } /* Course */ .course-tab-style-one .nav.nav-tabs.category-tabs { position: inherit; top: 0; margin-bottom: 40px; } .course-style-one-item .course-meta .price { order: 0; } .course-two-swiper-nav { bottom: 0; right: auto; left: 50%; float: left; margin-top: 10px; margin-bottom: 20px; top: auto; align-items: center; transform: translateX(-50%); } .course-style-two-carousel-area .heading-left { text-align: center; } .course-style-two-carousel-area .heading-left .text-end { text-align: center !important; } .course-details-category { margin-top: 30px; } .course-details-two .course-details-category { top: 0; margin-bottom: 0; } #list-tab .course-style-one-item { grid-template-columns: 1fr; gap: 30px; padding: 30px; } .course-style-one-item .author img { display: none; } #list-tab .course-style-one-item .top-meta { margin-bottom: 20px; } /* Advisor */ .advisor-style-one-item .thumb img { width: 100%; } /* Pricing */ .nav-tabs.pricing-tab-navs { padding: 0; text-align: center; background: transparent; margin-bottom: 50px; } .nav-tabs.pricing-tab-navs li.nav-item { float: none; display: inline-block; margin: 0 -2px; } .pricing-style-one-items ul.pricing-list { position: relative; background: var(--dark); width: 100%; margin: 0; left: 0; top: 0; padding: 30px; border-radius: 10px; margin-bottom: 30px; } .nav-tabs.pricing-tab-navs::before, .nav-tabs.pricing-tab-navs::after { display: none; } .nav-tabs.pricing-tab-navs .nav-link { border-color: #b7d4d0; color: var(--color-heading); } /* Testimonial */ .testimonial-style-three-info { margin-bottom: 80px; gap: 0; height: auto; } /* Testimonial */ .testimonial-style-two-carousel::after, .testimonial-style-two-carousel::before { display: none; } .testimonial-style-two p { font-size: 15px; } .testimonial-style-three-info .shape { display: none; } .testimonial-style-three-carousel { margin-top: 0; } .testimonial-style-three-info { margin-bottom: 30px; } .testimonial-style-one-items { padding: 50px 30px; display: block; } .testimonial-style-one-items .testimonial-bullet { max-width: 100%; padding: 0; padding-left: 30px; padding-right: 15px; margin-top: 50px; display: none; } .testimonial-style-one-nav { position: relative; margin-top: 50px; } .testimonial-style-one .top-info h3 { font-size: 20px; } .testimonial-style-one p { font-size: 16px; } .testimonial-style-four-area .thumb-style-five { display: none; } /* Event */ .event-style-three-item .thumb img { position: inherit; } .event-style-three-item { background: var(--white); border-radius: 10px; } .event-style-three-item .event-style-two-item { border: none !important; box-shadow: none; } .event-style-three-item .thumb img { border-radius: 10px 10px 0 0; } .event-style-three-item .event-style-two-item .button { text-align: left; } .event-style-three-area::after { display: none; } .event-style-three-item .event-style-two-item { box-shadow: 0px 11px 60px -14px rgb(109 117 143 / 33%); } /* Event Four */ .event-style-four-item { grid-template-columns: 1fr; padding: 60px; gap: 30px; border: 1px solid #e7e7e7; border-radius: 10px; text-align: center; } .event-style-four-item .date { border: none; display: inline-block; background: var(--bg-gray-secondary); max-width: max-content; padding: 10px 30px; border-radius: 10px; margin: auto; } .theme-style-three .event-style-four-item .date { background: #ece1e3; } .theme-style-three .event-style-four-item .date h2 { color: var(--color-style-five); } .event-style-four-item .button { text-align: center; } .event-style-four-item .date h2 { color: var(--color-heading); } .event-style-four-item .date span { color: var(--color-paragraph); } /* Join Us */ .join-us-style-one-area { padding-bottom: 90px; } .join-us-style-one-item { margin-bottom: 30px; height: auto; } /* Fun Fact */ .funfact-style-one-item .item { text-align: center; background: rgba(255, 255, 255, 0.15); border-radius: 10px; padding: 50px; } .funfact-style-one-item { margin-top: 30px; } .funfact-style-one-item .counter { justify-content: center; } .fun-fact-style-one-items { margin-top: -30px; } /* Brand */ .brand-style-one-carousel .swiper-slide { text-align: center; } .brand-style-one-carousel .swiper-slide img { max-height: 40px; margin: auto; } /* Blog */ .testimonial-style-one-area.default-padding-top { overflow: hidden; } .home-blog-style-one-item { grid-template-columns: 1fr; } .home-blog-style-one-item .content { padding: 0; margin-top: 30px; } .blog-area h2 { font-size: 28px; line-height: 1.4; margin-bottom: 15px; } /* Login Register */ .login-register-area { padding: 30px; text-align: center; display: flex; flex-direction: column; justify-content: center; } .login-register-area, .login-register-area div { height: auto; min-height: 100%; } .login-register-area .shape { width: 100%; } .login-style-one-items { padding: 30px; } .login-register-area .thumb { display: none; } .login-register-area .form-group input { text-align: center; } /* Contact */ .contact-style-one-info .contact-info-items { grid-template-columns: 1fr 1fr; } .contact-form-style-one img { display: none; } /* Footer */ .footer-top h2 { font-size: 60px; margin-bottom: 50px; } ul.facilities-list { text-align: left; } footer .f-items { padding-bottom: 70px; } footer .footer-item { margin-bottom: 50px; } footer .about { border: none; margin-right: 0; padding-right: 0; } .footer-shape-style-one img:first-child { display: none; } .bg-dark .footer-bottom.style-two { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 30px; margin-top: 0; } .footer-bottom { text-align: center; } .footer-bottom .text-end { text-align: center !important; margin-top: 10px; } .footer-bottom .text-end .link-list li { margin: 0 10px; } } /* Tablet Layout: 768px.*/ @media only screen and (min-width: 768px) and (max-width: 991px) { /* Banner Style Nine */ .banner-style-nine-items .thumb { position: inherit; height: auto; text-align: center; display: none; } .banner-style-nine-items { padding-top: 120px; padding-bottom: 120px; } .banner-style-nine-items .thumb .card-style-seven { left: 0; } .banner-style-nine-items .thumb img:nth-child(2) { display: none; } .banner-style-nine-items .thumb::after { bottom: 7%; } .banner-style-six-thumb { margin-top: 50px; } /* Banner Style Two */ .banner-style-two-bottom-info .category-search { min-width: 560px; } /* About */ .about-style-three-info .fact-style-two::after { display: none; } .about-style-three-info .fact-style-two::before { width: 100%; left: 0; } .about-style-three-info .fact-style-two { display: flex; } .about-style-three-info .content { padding: 0; padding-top: 50px; } .about-style-three-info .fact-style-two .fun-fact:first-child { padding-left: 0; } .thumb-style-two { margin-bottom: 50px; } .about-style-three-thumb { margin-bottom: 50px; height: auto; } .about-style-three-thumb img:nth-child(2) { right: -30px; bottom: -30px; } /* About Two */ .about-style-two-thumb { display: none; } .about-style-two-top-info .left .title { font-size: 36px; } .about-style-two-bottom-info .thumb { width: 100%; height: 100%; } .about-style-two-bottom-info .d-grid { align-items: flex-start; } .about-style-two-bottom-info .d-grid .thumb img { position: relative; border-radius: 10px; } .about-style-two-bottom-info .tab-style-one { padding-bottom: 0; } .about-style-one-area { padding-bottom: 120px; } .about-style-five-area::before { display: none; } .about-style-five-area::after { display: none; } .about-style-five-thumb .d-grid { margin-bottom: 50px; } .about-style-seven-info .d-flex .fun-facts { grid-template-columns: 1fr 1fr; } /* Feature */ .feature-style-one-item:nth-child(2) { border: none; } .feature-style-one-item:last-child { border-top: 1px solid #e7e7e7; } .experience-card-two .counter { margin-bottom: 30px; } .experience-card-two h3 { padding: 0; font-size: 60px; padding-top: 20px; margin-bottom: 20px; } .feature-style-two-area .card-style-two { width: 100%; text-align: center; padding: 60px; } /* Pricing */ .pricing-style-one-items ul.pricing-list { padding: 50px; } /* Pricing */ .tution-fees-items { margin-top: 50px; gap: 30px; } /* Why Choose Us */ .choose-us-style-one-area .fact-style-one { margin-top: 40px; } .grid-style-one { padding: 60px; margin: 0; } .grid-style-one .card-style-three { max-width: 100%; padding: 30px; } .grid-style-one-items { margin-bottom: 30px; grid-template-columns: 1fr; } .choose-us-style-one-info .thumbs img { height: auto; } .choose-us-style-one-info .thumbs img:nth-child(2) { left: 30px; } .grid-style-one-items .grdi-style-one-item { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .grid-style-one-items .grdi-style-one-item:nth-child(2) { display: block; } .nav.nav-tabs.tab-style-two-nav { display: grid; grid-template-columns: 1fr 1fr; } .choose-us-style-three-area .shape { top: 50px; } .choose-us-style-three-area .thumb { position: relative; top: 0; width: 100%; margin-bottom: 50px; } .choose-us-style-three-area { padding-top: 0; } .choose-us-style-three-info .feature-style-one-item:last-child { border: none; } .thumb-style-six { margin-bottom: 30px; } .choose-us-style-four-info .d-grid { grid-template-columns: 1.2fr 1fr; gap: 30px; } /* Certificate */ .certificate-thumb img { position: relative; height: auto; } .certificate-thumb { text-align: center; margin: 0; display: none; } .certificate-thumb img:nth-child(2) { position: absolute; } /* Live Course */ .live-course-items > img { max-width: 150%; } .live-course-items { grid-template-columns: 1.2fr 1fr; margin-top: 50px; } .live-course-items .live-instructor { top: 0; } .live-course-items .live-instructor::after { display: none; } .thumb-style-four { margin-bottom: 50px; } .color-secondary ul.list-style-five li .icon i { background: var(--white); } /* Course */ .course-style-one-item .top-meta { border: none; border-radius: 0; padding: 0; margin-top: 30px; border-bottom: 1px solid #e7e7e7; padding-bottom: 15px; column-gap: 15px; font-size: 15px; font-weight: 400; } .course-style-one-item .top-meta ul li { font-weight: 400; } .course-style-one-item .info { padding-top: 20px; } .course-style-one-item .thumb { border-radius: 10px; } .swiper .style-two.course-style-one-item .top-meta { border: 1px solid #e7e7e7; border-top: none; border-radius: 0 0 10px 10px; margin-top: 0; } .swiper .style-two.course-style-one-item .thumb { border-radius: 10px 10px 0 0; } .swiper .style-two.course-style-one-item .author img { display: none; } .course-listing-contentes.style-two .content { justify-content: center; margin-bottom: 30px; } .course-listing-contentes.style-two .text-end { text-align: center !important; } .course-listing-contentes.style-two .right { justify-content: center; } /* Child Program */ .child-program-area { padding: 120px 0; } .child-program-carousel .swiper-slide:nth-child(2n) { margin: 0; } /* Advisor */ .advisor-style-one-items > .row > .col-xl-4:nth-child(3) { width: 100%; padding-left: 10px; } /* Event */ .event-style-one-item { padding: 0; background: rgba(255, 255, 255, 0.5); border-radius: 10px; } .event-style-one-item::after { display: none; } .event-style-one-info { padding: 50px; } .event-style-one-item .event-thumb { border-radius: 0; } .event-meta ul li { font-size: 17px; } .event-style-one-info .left-info h2 { font-size: 30px; } .event-style-two-items .thumb { width: 100%; position: relative; max-width: 720px; margin: auto auto 50px; padding: 0 15px; } .event-style-two-items .thumb img { border-radius: 10px; } .event-style-two-items .thumb h2 { font-size: 20vw; bottom: -40px; } .nav.nav-tabs.course-details-navs .nav-item .nav-link { padding: 13px 25px; } /* Newsletter */ .newsletter-style-one-items .title { font-size: 40px; } .newsletter-style-one-items .shape img:nth-child(2) { top: 0; right: 0; } .newsletter-style-one-items .shape img { left: -35px; width: 125px; } /* Gallery */ .gallery-style-one-carousel .swiper-slide:nth-child(2n) { height: 100%; } .color-style-six .shape img { bottom: 0; } /* Faq */ .faq-style-one-info { margin-bottom: 50px; } /* Fun Factor */ .advantages-info::after { display: none; } .advantages-info { height: auto; margin: 0; padding: 0; margin-top: 40px; display: none; } .advantages-info h2 { top: 0; margin-bottom: 25px; font-size: 60px; } .funfact-style-one-item .counter { justify-content: left; } .fun-fact-style-three-items { margin-right: 0; } /* Testimonial */ .testimonial-style-one-items { padding: 60px; } .testimonial-style-one .top-info h3 { font-size: 26px; } .admission-form-style-one-area .shape img { display: none; } /* Zoom Meeting */ .meeting-style-one-item .info { padding: 30px 15px; } .meeting-style-one-item .info h4 { font-size: 20px; } .meeting-author .content h6 { font-size: 16px; } /* Profile */ .instructor-profile-cover-items { grid-template-columns: 1fr 2fr; } .instructor-profile-cover-items .thumb .author::after { bottom: 80px; } .instructor-profile-cover-items .thumb .author::before { bottom: 80px; } .instructor-profile-cover-items .thumb .author { bottom: -110px; } .instructor-profile-cover-items .info { display: block; } .instructor-profile-cover-items .right { text-align: left; margin-top: 15px; } .instructor-profile-cover-items .info ul { margin-left: -30px; margin-top: 10px; } .instructor-profile-cover { padding-top: 100px; } /* Login Register */ .login-register-area { padding: 120px; } .login-style-one-items { padding: 60px; } .login-register-area { text-align: left; } .login-register-area .form-group input { text-align: left; } /* Blog */ .blog-area h2 { font-size: 36px; line-height: 1.2; } .home-blog-style-two-item h2 { font-size: 24px; } /* Footer */ footer.footer-style-one .about::after { display: none; } } /* Mobile Layout: 320px. */ @media only screen and (max-width: 767px) { .blog-area .site-heading h2 { font-size: 36px; } /* Topbar */ .top-bar-area { display: none; } /* Banner One */ .banner-style-one-area { padding-top: 70px; padding-bottom: 70px; } .card-style-one .right { border: none; padding: 0; } .card-style-one { grid-template-columns: 1fr; gap: 15px; text-align: center; } .card-style-one > img { display: none; } .banner-style-one-thumb { display: none; } .banner-style-one-top h2 { font-size: 34px; line-height: 1.2; } .banner-style-one-top h2:nth-child(3), .banner-style-one-top h2:nth-child(2) { text-align: center; } /* Banner Two */ .banner-style-two-info h2 { font-size: 32px; line-height: 1.4; } .banner-style-two-info { display: block; padding-bottom: 50px; text-align: center; } .banner-style-two-area { padding-top: 70px; } .category-search { width: 90%; max-width: 500px; } .card-style-three .right { display: none; } .banner-style-two-info .card-style-three { justify-content: center; max-width: 90%; margin: 30px auto auto; } .banner-style-two-info h2 img { height: 40px; } .banner-style-two-info .shape { display: none; } .banner-style-two-bottom-info { padding: 150px 0; padding-top: 350px; } .fixed-video h2 { font-size: 30vw; } .category-search form .form-group button { padding: 0 25px; position: inherit; width: 100%; right: 0; height: 55px; } .category-search form { grid-template-columns: 1fr; border-radius: 30px 30px 40px 40px; padding: 20px; } .category-search form .form-group input { width: 100%; background: #f1f1f1; height: 55px; border: none; border-radius: 30px; text-align: center; } .category-search form .form-group:nth-child(2) { display: block; } .category-search form .form-group:first-child { background: #f1f1f1; border-radius: 30px; margin-bottom: 10px; } .category-search form .form-group .nice-select { background: transparent; text-align: center !important; padding-left: 0; height: 55px; } .category-search form .form-group .nice-select span.current { line-height: 55px; } .banner-style-six-info .category-search { width: 100%; max-width: 100%; } .banner-style-six-info .category-search form .form-group input { border-radius: 7px; } .banner-style-six-info .category-search form .form-group:first-child { border-radius: 7px; } .banner-style-six-info .category-search form { background: rgba(255, 255, 255, 0.8); border-radius: 10px; } /* Banner Style Three */ .banner-style-three-layout .left-info h2 { font-size: 10vw; } .banner-style-three-area { padding-top: 60px; padding-bottom: 70px; } /* Banner Four */ .banner-style-four-area { padding: 90px 0; } .banner-style-four-area h2 { font-size: 36px; line-height: 1.2; } .banner-shape-style-four img:first-child { right: 20px; } .banner-style-four-area .thumb-style-one { margin-top: 40px; display: inline-block; } /* Banner Five */ .banner-style-five-area { padding-top: 60px; padding-bottom: 60px; } .banner-style-five-info h2 { font-size: 9vw; line-height: 1.2; } .banner-style-five-info > p { font-size: 18px; padding: 0; } .banner-style-five-info .d-flex { display: block !important; } .banner-style-five-info .card-style-five { margin-bottom: 30px; } /* Banner Six */ .banner-style-six-area { padding-top: 50px; padding-bottom: 70px; } .banner-style-six-info h2 { font-size: 10vw; } .banner-style-six-info p { padding: 0; font-size: 17px; } .banner-style-six-thumb { display: none; } /* Banner Seven */ .banner-style-seven-info .content { padding-top: 60px; } .banner-style-seven h2 { font-size: 35px; } .banner-style-seven p { font-size: 16px; padding-right: 0; } .banner-style-seven .right-info img { display: none; } .banner-style-seven-info { padding-bottom: 70px; } /* Banner Eight */ .banner-style-eight-info h2 { font-size: 35px; } .banner-style-eight-info h2 strong { font-size: 9vw; padding-bottom: 10px; } .banner-style-eight-info { padding-top: 60px; } .banner-style-eight-area .shape img:first-child { top: 30px; left: 5%; } .banner-style-eight-info p { font-size: 17px; padding: 0; } /* Banner Style Nine */ .banner-style-nine-items { text-align: center; } .banner-style-nine-items .thumb { position: inherit; height: auto; max-width: 80%; margin: auto; } .banner-style-nine-items .thumb img { height: auto; margin: 0; margin-top: 50px; } .banner-style-nine-items .thumb::before { display: none; } .banner-style-nine-items .thumb::after { display: none; } .banner-style-nine-items { padding-bottom: 0; padding-top: 70px; } .banner-style-nine-items .thumb img:nth-child(2) { display: none; } .banner-style-nine-items .thumb .card-style-seven { left: 50%; transform: translateX(-50%); bottom: 50px; min-width: 320px; display: none; } .banner-style-nine-items h2 { font-size: 40px; } .banner-style-nine-items h4 { font-size: 20px; } .banner-style-nine-items h4 img { display: none; } .banner-style-nine-items h2 strong::after { bottom: -5px; } /* About */ .about-style-three-info .fact-style-two { flex-wrap: wrap; gap: 30px; margin-bottom: 35px; } .about-style-three-info .fact-style-two::before, .about-style-three-info .fact-style-two::after { display: none; } .about-style-three-info .fact-style-two .fun-fact { border: 1px solid #e7e7e7 !important; width: 100%; display: block; padding: 30px; margin: 0; } .about-style-three-thumb { height: auto; margin-bottom: 30px; } .about-style-three-thumb img:nth-child(2) { right: 0; display: none; } .about-style-three-info .content { padding: 0; } .thumb-style-two { grid-template-columns: 1fr; margin-bottom: 40px; } .thumb-style-two img:first-child { max-width: 100%; border-radius: 10px; margin: 0; } .thumb-style-two .shape img:first-child { display: none; } .thumb-style-two .shape img:nth-child(2) { right: 0; left: 0; } .thumb-style-two img:nth-child(2) { margin: 0; border-radius: 10px; display: none; } .about-style-two-top-info { display: block; margin-bottom: 50px; } .about-style-two-thumb { display: none; } .experience-card-one { width: 100%; margin-bottom: 30px; } .about-style-two-bottom-info .d-grid { grid-template-columns: 1fr; gap: 0; } .tab-style-one { padding-bottom: 60px; } .tab-style-one .nav.nav-tabs li.nav-item button { padding: 15px; display: flex; align-items: center; } .about-style-four-thumb { margin-bottom: 40px; } .about-style-five-area::after { display: none; } .about-style-five-thumb .d-grid { grid-template-columns: 1fr; } .about-style-five-thumb .d-grid img { display: none; } .about-style-five-thumb .d-grid { margin-bottom: 20px; } /* Feature */ .feature-style-one-items .row { margin: 0; --bs-gutter-x: 1.5rem; } .feature-style-one-item { border-bottom: 1px solid #e7e7e7; padding: 50px 10px; border-right: none; } .feature-style-one-items { border: none; } .feature-style-one-item:first-child { border-top: 1px solid #e7e7e7; } .feature-style-one-item:last-child { padding-bottom: 0; } .experience-card-two h3 { padding-right: 0; } .experience-card-two .counter { margin-bottom: 20px; } .feature-style-two-item { margin-top: 30px; } .feature-style-two-area .card-style-two { width: 100%; text-align: center; } .feature-style-two-area .card-style-two::after { display: none; } /* Why Choose Us */ .choose-us-style-three-area .thumb { position: relative; width: inherit; left: 0; right: 0; margin-bottom: 30px; } .choose-us-style-three-area .shape { display: none; } .choose-us-style-three-area { padding-top: 0; } .choose-us-style-three-info .d-grid { grid-template-columns: 1fr; gap: 30px; } .choose-us-style-three-info .feature-style-one-item:first-child { border: none; } .choose-us-style-three-info { text-align: center; } .choose-us-style-three-info .feature-style-one-item .icon { margin: auto auto 30px; } .thumb-style-six { margin-bottom: 30px; } .choose-us-style-four-info .d-grid { grid-template-columns: 1fr; gap: 30px; } /* Child Program */ .child-program-area { padding: 70px 0; } .child-program-area .shape { display: none; } .child-program-carousel .swiper-slide:nth-child(2n) { margin: 0; } /* Course */ .course-style-one-item.list-layout { grid-template-columns: 1fr; } /* Live Course */ .step-style-one-items { display: grid; gap: 30px; } .step-style-one-item { display: flex; align-items: center; } .step-style-one-item span { margin: 0; margin-right: 15px; } .step-style-one-items::after { border: none; border-left: 1px solid #e7e7e7; height: 100%; width: 2px; top: 0; left: 25px; } .bg-gradient .step-style-one-items::after { border-left: 1px solid rgba(255, 255, 255, 0.3); } .live-course-items { grid-template-columns: 1fr; gap: 30px; } .live-course-items > img { max-width: 100%; } .live-course-items .live-instructor { top: 0; } .live-course-items .live-instructor::after { display: none; } /* Course */ .course-bullet-item { justify-content: center; } /* Course Details */ .course-single-meta { text-align: center; background: var(--white); display: flex; flex-direction: column; justify-content: center; border: 1px solid #e7e7e7; padding: 0; overflow: hidden; border-radius: 10px; } .course-single-meta .item { float: none; margin: 0; padding: 0; border: none; } .course-single-meta .item.author { text-align: left; display: flex; justify-content: center; } .course-single-meta .item::after { display: none; } .course-detils-area::after { display: none; } .course-single-meta .item { border-bottom: 1px solid #e7e7e7; display: inline-block; padding: 15px; } .course-single-meta .item:last-child { border: none; } .nav.nav-tabs.course-details-navs, .event-details-info .nav.nav-tabs.course-details-navs { border: none; border-radius: 0; margin-bottom: 20px; } .nav.nav-tabs.course-details-navs .nav-item .nav-link, .nav.nav-tabs.course-details-navs .nav-item:last-child .nav-link { border: 1px solid #d2dbff; border-radius: 6px; padding: 10px 25px; } .nav.nav-tabs.course-details-navs .nav-item { margin-right: 10px; margin-bottom: 10px; } ul.curriculum-list li .left-content span { display: none; } ul.curriculum-list li { gap: 15px; padding: 20px; } ul.curriculum-list li .right-content { min-width: auto; gap: 20px; } .curriculum-advisor { grid-template-columns: 1fr; gap: 0; } .curriculum-advisor .thumb img { height: auto; } .curriculum-advisor .thumb { height: auto; } .curriculum-advisor .info { padding: 30px; padding-bottom: 90px; } .curriculum-advisor .social { top: auto; bottom: 0; flex-direction: inherit; right: auto; left: 30px; bottom: 30px; } .curriculum-review-item { grid-template-columns: 1fr; } .course-review-section .course-review-item-one { display: block; border: 1px solid #e7e7e7; border-radius: 10px; padding: 30px; margin-top: 30px; } .course-review-item-one .thumb img { margin: 0; margin-bottom: 30px; } .course-review-section .course-review-item-one { text-align: center; } .course-review-item-one .info .top h4 { margin: 0; padding: 0; border: none; margin-bottom: 10px; } .course-review-item-one .info .top h4::after { display: none; } .course-review-item-one .info .top { display: block; margin-bottom: 5px; } .course-review-section .course-review-item-one:first-child { margin-top: 0; } .course-review-item-one .info .top { flex-wrap: wrap; align-items: center; } .course-review-item-one .info .top h4 { font-size: 20px; } .review-count-item .ratings { min-width: 120px; } .course-single-meta-box::after { display: none; } .course-style-one-bullet { margin-bottom: 30px; } /* Course Filter */ .course-listing-contentes .content { display: block; text-align: center; } .course-listing-contentes .content .nav.nav-tabs { justify-content: center; margin-bottom: 20px; } .course-listing-contentes .right { justify-content: center; margin-top: 20px; display: none; } /* Session Time */ .session-time-items ul li { font-size: 15px; } /* Category */ .category-style-one-item { text-align: center; } /* Certificate */ .certificate-info { padding-bottom: 70px; } .certificate-items { display: grid; text-align: center; padding: 60px 50px; } .cartifita-style-one-items { overflow: hidden; } .certificate-thumb img { position: relative; height: auto; } .certificate-thumb { text-align: center; margin: 0; display: none; } .certificate-thumb img:nth-child(2) { position: absolute; } /* Subscribe */ .newsletter-style-one-items .shape img { left: 0; width: 18%; display: none; } .newsletter-style-one-items { padding: 50px; } /* Join Us */ .join-us-style-one-item { height: auto; padding: 50px 30px; grid-template-columns: 1fr; } .join-us-style-one-item .thumb { display: none; } .join-us-style-one-item .shape { height: 35%; } .join-us-style-one-item .info { padding: 0; } .join-as-advisor > img { left: auto; right: 0; width: 100px; } /* Join Us Two */ .join-us-style-one-area { padding-bottom: 30px; } .thumb-style-four { grid-template-columns: 1fr; } .thumb-style-four .fun-fact { display: block; text-align: center; } .thumb-style-four .fun-fact .counter { align-items: center; justify-content: center; } .thumb-style-four .fun-fact img { margin: 0; margin-bottom: 20px; } .thumb-style-four .right .thumb { margin: 0; margin-bottom: 50px; } .color-secondary ul.list-style-five li .icon i { background: var(--white); } /* Advisor */ .advisor-style-two-area .shape img { display: none; } .advisor-style-three-area .shape { display: none; } /* Pricing */ .pricing-style-one-item .button { text-align: center; } .pricing-style-one-item .info { display: block; text-align: center; } .pricing-style-one-item .info .icon { margin: auto auto 30px; } .pricing-style-one-item { grid-template-columns: 1fr; text-align: center; } .tution-fees-items { margin-top: 50px; grid-template-columns: 1fr; gap: 30px; } /* Faq */ .faq-style-one-info { margin-bottom: 30px; } /* Brand */ .brand-conetnt h2 { font-size: 60px; margin: 0 60px; } .brand-conetnt .item::after { height: 60px; width: 60px; right: -25px; } /* Why Choose Us */ .grid-style-one-items { grid-template-columns: 1fr; } .choose-us-style-one-info .thumbs img:nth-child(2) { left: 30px; display: none; } .choose-us-style-one-info .thumbs { margin-top: 30px; } .choose-us-style-one-info .thumbs img { height: auto; } .fact-style-one { display: flex; gap: 15px; margin-top: 30px; flex-wrap: wrap; } .fact-style-one-item { text-align: center; } .fact-style-one-item, .fact-style-one-item:last-child { border: 1px solid #c5d1d6; margin: 0; padding: 30px; width: 100%; } .grid-style-one .card-style-three { max-width: 100%; padding: 30px; } /* Event */ .event-style-one-item::after { display: none; } .event-style-one-item { background: var(--white); border-radius: 10px; padding: 0; } .event-style-one-item .event-thumb { border-radius: 0; } .event-style-one-info { grid-template-columns: 1fr; padding: 30px; gap: 15px; } .event-style-one-info .right-info { border: none; padding: 0; order: 0; } .event-date { background-image: none; display: flex; align-items: center; gap: 5px; padding: 0; border-bottom: 1px solid #e7e7e7; border-radius: 0; padding-bottom: 15px; } .event-date h2, .event-date h6 { color: var(--color-primary); margin: 0; font-size: 17px; font-weight: 500; } .event-style-one-info .left-info h2 { font-size: 30px; } /* Event Two */ .event-style-two-items .thumb { position: relative; width: 100%; padding: 0 10px; overflow: hidden; border-radius: 10px; margin-bottom: 40px; } .event-style-two-items .thumb img { height: auto; width: 100%; border-radius: 10px; } .event-style-two-item { grid-template-columns: 1fr; gap: 15px; border: 1px solid #e7e7e7 !important; padding: 30px; border-radius: 10px; text-align: center; } .event-style-two-item .date strong { color: var(--color-primary); } .color-secondary .event-style-two-item .date strong { color: var(--color-style-two); } .theme-skyblue .event-style-two-item .date strong { color: var(--color-style-three); } .event-style-two-item .date { padding: 30px 40px; display: inline-flex; max-width: max-content; margin: auto; } .event-style-two-item .button a { margin-top: 15px; } .event-style-two-items .thumb h2 { bottom: -13px; font-size: 20vw; } .event-style-two-item:first-child { padding: 30px; } .event-style-three-item .event-style-two-item .d-grid { grid-template-columns: 1fr; gap: 30px; } .event-style-four-item { padding: 50px 30px; } .event-style-four-item h2 { font-size: 30px; } .event-style-three-item .event-style-two-item .event-meta ul { justify-content: center; } .event-style-three-item .event-style-two-item .button { text-align: center; } /* Testimonial */ .testimonial-style-five-items { padding: 0; border: 1px solid var(--color-style-three); border-radius: 10px; } .testimonial-style-five-items .shape { display: none; } .testimonial-style-five-item p { font-size: 20px; } .testimonial-style-five-item { padding: 50px 30px; } /* Fun Factor */ .advantages-info::after { display: none; } .advantages-info { margin: 0; height: auto; padding: 0; } .fun-fact-style-three-items { grid-template-columns: 1fr; gap: 30px; margin-right: 0; margin-bottom: 30px; border: none; } .fun-fact-style-three-items .funfact-style-one-item, .fun-fact-style-three-items .funfact-style-one-item:last-child { margin: 0; text-align: center; border: 1px solid rgba(255, 255, 255, 0.2); padding: 50px 30px; border-radius: 10px; } .fun-fact-style-two-area { text-align: center; } .advantages-info h2 { top: 0; } .advantages-info .btn { margin-top: 20px; } .session-time-items { padding: 60px 30px; } /* Testimonial */ .testimonial-style-four-item p { font-size: 17px; } /* Admission Form */ .admission-form-style-one { padding: 50px; } .admission-form-style-one-area .shape img { display: none; } .form-style-two-items { padding: 50px; } .form-style-two-items .shape { display: none; } /* Gallery */ .gallery-style-one-area .shape { top: 0; } .gallery-style-one-area::after { height: 100%; } .gallery-style-one-area { padding-top: 100px; margin-top: -20px; } .gallery-style-one-carousel .swiper-slide:nth-child(2n) { height: 100%; } /* Zoom Details */ .course-details-left-info ul.list-style-one { grid-template-columns: 1fr; gap: 10px; } /* Blog */ .color-style-six .shape img { bottom: 0; } /* Login Register */ .remember-pass { display: block; } /* Profile */ .instructor-profile-cover-items { grid-template-columns: 1fr; text-align: center; } .instructor-profile-cover { padding: 50px; margin-bottom: 30px; } .instructor-profile-cover-items .info { display: block; text-align: center; } .instructor-profile-cover-items .thumb .author { position: inherit; bottom: 0; } .instructor-profile-cover-items .thumb .author::after, .instructor-profile-cover-items .thumb .author::before { display: none; } .instructor-profile-cover-items .right { text-align: center; margin-top: 10px; } .instructor-profile-cover-items .info ul li { margin: 0; } .instructor-profile-cover-items .info ul { margin: 0; padding: 0; list-style: none; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 15px; } .instructor-profile-cover-items .right .reviews { margin-bottom: 10px; } .advisor-profile-info { margin: 0; display: block; } .instructor-profile-cover-items .thumb img { border-color: rgba(255, 255, 255, 0.2); } .heading i { display: none; } .instructor-profile-cover-items .info ul li::after { left: -10px; } /* Event Details */ .event-details-thumb { padding: 0; } .event-time-loop { position: inherit; border-radius: 10px; } .event-details-thumb .counter-class { border-radius: 10px; border: none; padding: 30px 15px; display: block; text-align: center; } .event-details-thumb img { margin-bottom: 30px; } .event-details-thumb .counter-class .counter-item:nth-child(2)::after { display: none; } .event-details-thumb .counter-class .counter-item { margin: 10px !important; padding: 0 10px !important; text-align: center; display: flex; justify-content: center; } .event-details-thumb .counter-class::before { display: none; } .event-time-loop .item-list { display: grid; grid-template-columns: 1fr 1fr; width: 100%; text-align: center; justify-content: center; align-items: center; } .event-details-info .nav.nav-tabs.course-details-navs .nav-item { display: block; width: 100%; margin-right: 0; } .event-details-info .nav.nav-tabs.course-details-navs { border-radius: 10px; overflow: inherit; } ul.event-location li { width: 100%; } /* Contact */ .contact-form-style-one { padding: 50px; } .contact-style-one-info .contact-info-items { grid-template-columns: 1fr; text-align: center; } /* Footer */ footer .f-items { padding-bottom: 10px; } .footer-shape-style-one img:nth-child(2) { max-width: 100px; top: 50px; } .footer-top h2 { font-size: 30px; margin-bottom: 30px; text-align: center; } ul.facilities-list li { margin: 0; text-align: center; } ul.facilities-list { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } ul.facilities-list li a { height: 150px; width: 150px; margin: auto; } footer.footer-style-two .f-items { border: none; padding-bottom: 0; } .footer-top { display: none; } .footer-bottom.style-one { background: transparent; border-radius: 0; border-top: 1px solid #d2e3f9; } .dark-optional .footer-bottom.style-one { background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.2); } footer.footer-style-one .about::after { display: none; } } @media only screen and (max-width: 450px) { .course-style-one-carousel .course-style-one-item .author img { display: none; } .course-style-one-item.style-two .author img { display: none; } .session-time-items ul li::after { display: none; } .session-time-items ul li { flex-wrap: wrap; column-gap: 30px; row-gap: 10px; font-size: 14px; } } @media only screen and (max-width: 400px) { .course-style-one-item .top-meta { border: none; padding: 0; margin-top: 15px; border-bottom: 1px solid #e7e7e7; border-radius: 0; padding-bottom: 15px; } .course-style-one-item .thumb img { border-radius: 7px; } .style-two.course-style-one-item .top-meta { padding: 0; border: none; margin-bottom: -15px; } .newsletter-style-one-items { padding: 50px 30px; } .newsletter-style-one-items form button { padding: 0 30px; } .newsletter-style-one-items form input { padding-right: 150px; } .button-double .btn { padding: 13px 35px; } .grid-style-one { padding: 40px 30px; } /* Why Choose Us */ .nav.nav-tabs.tab-style-two-nav li.nav-item .nav-link { font-size: 18px; padding: 15px 20px; } .choose-us-style-two-content .info { padding: 50px 30px; } .choose-us-style-two-content .info h2 { font-size: 30px; } .testimonial-style-three-info { padding: 50px 30px; } /* Event */ .event-style-two-item h2 { font-size: 30px; } .event-style-four-item { padding: 50px 30px; } .session-time-items { padding: 50px 15px; } .instructor-profile-cover { padding: 50px 30px; } .privacy-pages { padding: 30px; } } @media only screen and (max-width: 380px) { form.search-style-two button { padding: 0 20px; } form.search-style-two input, form.search-style-two input:focus { padding-left: 20px; } .course-tab-style-one .nav.nav-tabs.category-tabs { padding: 50px 30px; } .admission-form-style-one { padding: 50px 30px; } .form-style-two-items { padding: 50px 30px; } .join-as-advisor { padding: 50px 30px; } /* Zoom Meeting */ .meeting-style-one-item .info { padding: 30px 15px; } .meeting-style-one-item .info h4 { font-size: 20px; } .meeting-style-one-item .info ul li { font-size: 15px; } .course-preview-info .content .course-includes .info { padding: 30px 15px; } /* Login Regsiter */ .login-style-one-items { padding: 30px 15px; } } /* ============================================================== # Multi Color CSS =================================================================== */ .color-style-four .bg-gradient { background: var(--bg-gradient-orange); } .color-style-four .banner-style-six-info h2 strong { color: var(--color-style-seven); } .color-style-four .navbar .attr-right .attr-nav li.button a::before { background: var(--bg-gradient-orange); } .color-style-four nav.navbar.validnavs.navbar-fixed.no-background.nav-border { border-bottom: 1px solid #fcd1bc; } .color-style-four .category-search form .form-group button { background: var(--dark); } .color-style-four .category-search form .form-group button:hover { background: var(--color-style-seven); } .color-style-four .card-style-two::after { background: url(../img/shape/9-orange.png); } .color-style-four .about-style-five-area::after { background-color: #004e64; } .color-style-four .bg-gray, .color-style-four .bg-gray-gradient-secondary { background: #fff5f0; } .color-style-four .banner-style-six-area::after { background: #ffece2; } .color-style-four .navbar.no-background.dark .attr-right .attr-nav li.search a { border-color: #fcd1bc; } .color-style-four .banner-style-six-info .category-search { border: 1px solid #fcd1bc; } .color-style-four .category-search form .form-group input { border-color: #fcd1bc; } .color-style-four .experience-card-one .counter { color: var(--color-style-seven); } .color-style-four .experience-card-one { background: #fff6f2; } .color-style-four .experience-card-one::after { display: none; } .color-style-four .sub-title { border-color: #fcd1bc; color: var(--color-style-seven); } .color-style-four .btn-style-two span, .color-style-four .btn-style-two .icon { background: var(--color-style-seven); } .color-style-four ul.list-style-five li .icon i { background: #ffece2; color: var(--color-style-seven); font-weight: 600; } .color-style-four .bg-gray-gradient-secondary .category-swiper-nav { background: var(--color-style-seven); } .color-style-four .info-style-one ul.list-style-five { border-top: 1px dashed #e1cbc0; } .color-style-four .category-style-one-item span { border: 1px solid #ffe5d9; } .color-style-four .bg-gray-gradient-secondary .category-style-one-item { background: rgba(255, 255, 255, 0.3); padding: 40px 30px; } .color-style-four .category-style-one-item p { margin-bottom: 0; } .color-style-four a:hover { color: var(--color-style-seven); } .color-style-four .course-style-one-item .author span { color: var(--color-style-seven); } .color-style-four .course-style-one-item.hover-less { border: none } .color-style-four .course-style-one-item.hover-less.button-full .bottom-meta a { background: var(--dark-secondary); } .color-style-four .course-style-one-item.hover-less.button-full .bottom-meta a:hover { background: var(--color-style-seven); color: var(--white); } .course-style-one-area a.btn-regular { border-color: var(--color-style-seven); } .course-style-one-area a.btn-regular:hover { background: var(--color-style-seven); color: var(--white); } .course-style-one-item.hover-less.button-full .bottom-meta a { padding: 14px; } .color-style-four .bg-theme { background: #004e64; } .color-style-four .choose-us-style-three-area .thumb .video-play-button { background: var(--color-style-seven); } .color-style-four .event-style-three-item .event-style-two-item .d-grid .date { border-color: var(--color-style-seven); } .color-style-four .text-light .sub-title { border-color: #814324; } .color-style-four .thumb-style-five::after { background: var(--bg-gradient-orange); opacity: 0.7; } .color-style-four .testimonial-style-four-nav > div { background: var(--color-style-seven); } .color-style-four .footer-top h2 { background: var(--bg-gradient-orange); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; } .color-style-four footer.footer-style-two form button { background: var(--color-style-seven); } .color-style-four footer.footer-style-two form button:hover { background: var(--dark); } .color-style-four ul.footer-social li a:hover { background: var(--color-style-seven); } .color-style-four .home-blog-style-two-item .thumb ul.blog-meta li a { border-color: #fcd1bc; color: var(--color-style-seven); } .color-style-four .home-blog-style-two-item .thumb ul.blog-meta li a:hover { color: var(--color-style-seven); } .color-style-four ul.blog-meta li i { color: var(--color-style-seven); } @media only screen and (max-width: 767px) { .color-style-four .event-style-two-item .date strong { color: var(--color-style-seven); } } /* ============================================================== # Preloader =================================================================== */ .edufix-preloader { -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: default; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; z-index: 9000; } .edufix-preloader .animation-preloader { z-index: 1000; position: relative; } .edufix-preloader .animation-preloader::after { position: absolute; left: 50%; top: 30px; content: ""; height: 50px; width: 50px; background: url(../img/logo-icon.png); transform: translateX(-50%); background-repeat: no-repeat; background-position: center; background-size: contain; } .color-secondary .edufix-preloader .animation-preloader::after { background: url(../img/logo-icon-2.png); transform: translateX(-50%); background-repeat: no-repeat; background-position: center; background-size: contain; } .theme-style-three .edufix-preloader .animation-preloader::after { background: url(../img/logo-icon-4.png); transform: translateX(-50%); background-repeat: no-repeat; background-position: center; background-size: contain; } .theme-skyblue .edufix-preloader .animation-preloader::after { background: url(../img/logo-icon-3.png); transform: translateX(-50%); background-repeat: no-repeat; background-position: center; background-size: contain; } .color-style-four .edufix-preloader .animation-preloader::after { background: url(../img/logo-icon-5.png); transform: translateX(-50%); background-repeat: no-repeat; background-position: center; background-size: contain; } .edufix-preloader .animation-preloader .spinner { -webkit-animation: spinner 1s infinite linear; animation: spinner 1s infinite linear; border-radius: 50%; border: 3px solid rgba(2, 109, 255, 0.2); border-top-color: var(--color-primary); height: 110px; margin: 0 auto 30px auto; width: 110px; } .color-secondary .edufix-preloader .animation-preloader .spinner { border-top-color: var(--color-style-two); } .color-style-four .edufix-preloader .animation-preloader .spinner { border: 3px solid rgb(255 233 223); border-top-color: var(--color-style-seven); } .theme-style-three .edufix-preloader .animation-preloader .spinner { border-top-color: var(--color-style-five); } .theme-skyblue .edufix-preloader .animation-preloader .spinner { border-top-color: var(--color-style-three); } .edufix-preloader.secondary .animation-preloader .spinner { border-top-color: var(--color-secondary); } .edufix-preloader .animation-preloader .txt-loading { font: bold 4em 'Outfit', sans-serif; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .edufix-preloader .animation-preloader .txt-loading .letters-loading { color: rgba(0, 0, 0, 0.2); position: relative; } .edufix-preloader .animation-preloader .txt-loading .letters-loading:before { -webkit-animation: letters-loading 4s infinite; animation: letters-loading 4s infinite; color: #221D1E; content: attr(data-text-preloader); left: 0; opacity: 0; font-family: 'Outfit', sans-serif; position: absolute; top: -3px; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } .edufix-preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .edufix-preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .edufix-preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .edufix-preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .edufix-preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before { -webkit-animation-delay: 1s; animation-delay: 1s; } .edufix-preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .edufix-preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } .edufix-preloader.dark .animation-preloader .spinner { border-color: rgba(255, 255, 255, 0.2); border-top-color: #fff; } .edufix-preloader.dark .animation-preloader .txt-loading .letters-loading { color: rgba(255, 255, 255, 0.2); } .edufix-preloader.dark .animation-preloader .txt-loading .letters-loading:before { color: #fff; } .edufix-preloader p { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 8px; color: #3b3b3b; } .edufix-preloader .loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; font-size: 0; z-index: 1; pointer-events: none; } .edufix-preloader .loader .row { height: 100%; } .edufix-preloader .loader .loader-section { padding: 0px; } .edufix-preloader .loader .loader-section .bg { background-color: #FEFDFD; height: 100%; left: 0; width: 100%; -webkit-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1); } .edufix-preloader .loader.dark_bg .loader-section .bg { background: #111339; } .edufix-preloader.loaded .animation-preloader { opacity: 0; -webkit-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .edufix-preloader.loaded .loader-section .bg { width: 0; -webkit-transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1); -o-transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1); transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1); } @-webkit-keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @keyframes spinner { to { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); } } @-webkit-keyframes letters-loading { 0%, 75%, 100% { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } 25%, 50% { opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes letters-loading { 0%, 75%, 100% { opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } 25%, 50% { opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } } /* Refined 7 Brands navigation panel */ .ljp-home-menu { position: relative; } .ljp-home-menu__arrow { margin-left: 6px; font-size: 10px; transition: transform .22s ease; } .ljp-home-menu:hover > a .ljp-home-menu__arrow, .ljp-home-menu.open > a .ljp-home-menu__arrow, .ljp-home-menu.show > a .ljp-home-menu__arrow { transform: rotate(180deg); } .ljp-navbar .ljp-home-menu > .ljp-home-brands { position: absolute !important; top: calc(100% + 10px) !important; left: 0 !important; width: 290px !important; min-width: 290px !important; max-height: calc(100vh - 120px); margin: 0 !important; padding: 11px !important; overflow-x: hidden; overflow-y: auto; border: 0 !important; border-top: 4px solid #ed1c24 !important; border-radius: 0 0 15px 15px !important; background: rgba(255, 255, 255, .985) !important; box-shadow: 0 22px 55px rgba(13, 55, 108, .16) !important; } .ljp-home-brands > .ljp-home-brands__heading { display: flex !important; align-items: baseline; gap: 9px; margin: 0 2px 9px !important; padding-bottom: 8px; border-bottom: 1px solid #dce4ef; } .ljp-home-brands__heading span { color: #ed1c24; font-size: 9px; font-weight: 800; letter-spacing: .22em; } .ljp-home-brands__heading strong { color: #113c73; font-size: 19px; font-weight: 800; letter-spacing: -.04em; } .ljp-home-brands > li + li { margin-top: 6px; } .ljp-home-brands > li:not(.ljp-home-brands__heading) > a { display: grid !important; grid-template-columns: 108px minmax(0, 1fr); gap: 8px; width: 100% !important; height: 59px !important; align-items: center; justify-content: initial; padding: 5px 9px !important; overflow: hidden; border: 1px solid #d6e0ed !important; border-radius: 10px !important; background: #f5f8fc !important; box-sizing: border-box; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; } .ljp-home-brands > li:not(.ljp-home-brands__heading) > a:hover { border-color: #ff8b90 !important; background: #fffafa !important; box-shadow: 0 8px 20px rgba(17, 60, 115, .08); transform: translateX(3px); } .ljp-home-brands .ljp-brand-logo { display: flex; height: 44px; align-items: center; justify-content: center; overflow: hidden; } .ljp-home-brands .ljp-brand-logo img { display: block !important; width: 100px !important; height: 42px !important; max-width: 100% !important; max-height: 100% !important; margin: 0 !important; object-fit: contain !important; transform: none !important; } .ljp-home-brands > li > a > span:last-child { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; color: #123e74; font-size: 8px; font-weight: 800; line-height: 1.25; letter-spacing: .06em; white-space: normal !important; } .ljp-home-brands .brand-ljp .ljp-brand-logo img { width: 41px !important; height: 41px !important; border-radius: 50%; } .ljp-home-brands .brand-sangfanh .ljp-brand-logo img { width: 100px !important; height: 42px !important; transform: scale(1.35) !important; } .ljp-home-brands .brand-izumi .ljp-brand-logo img { transform: none !important; } .ljp-home-brands .brand-algorithmics .ljp-brand-logo img { transform: scale(2.15) translateY(-1%) !important; } @media (max-width: 991px) { .ljp-navbar .ljp-home-menu > .ljp-home-brands { position: relative !important; top: auto !important; left: auto !important; width: min(290px, calc(100% - 30px)) !important; min-width: 0 !important; max-height: 62vh; margin: 8px 15px 14px !important; padding: 10px !important; border-top-width: 4px !important; border-radius: 0 0 18px 18px !important; } .ljp-home-brands > li:not(.ljp-home-brands__heading) > a { grid-template-columns: minmax(96px, 42%) minmax(0, 1fr); height: 59px !important; } } @media (max-width: 420px) { .ljp-home-brands__heading strong { font-size: 18px; } .ljp-home-brands > li:not(.ljp-home-brands__heading) > a { grid-template-columns: 48% minmax(0, 1fr); padding-right: 10px !important; padding-left: 10px !important; } .ljp-home-brands > li > a > span:last-child { font-size: 8px; } }