/*! ------------------------------------------------ * Project Name: Rayo - Digital Agency & Personal Portfolio Next.Js Template * Project Description: Elevate your digital presence with Rayo - dynamic and stylish Next.Js template designed for creative agencies and personal brands. With modern layouts, smooth interactions and a polished aesthetic, Rayo template helps showcase projects, services and expertise with clarity and impact. * Tags: ib-themes, resume, portfolio, personal page, cv, template, one page, responsive, Next.js, css3, creative, clean, agency, studio * Version: 1.0.0 * Build Date: October 2025 * Last Update: November 06 2025 * This product is available exclusively on Themeforest * Author: ib-themes * Author URI: https://themeforest.net/user/ib-themes /*! File name: plugins.css * ------------------------------------------------ * * ------------------------------------------------ * Table of Contents * ------------------------------------------------ * 01. custom css for Nextjs * ------------------------------------------------ * Table of Contents End * ------------------------------------------------ */html{scroll-behavior:smooth}:after,:before,:not([style*=transform]){transition:background-color .4s ease,border-color .4s ease,color .4s ease,box-shadow .4s ease,fill .4s ease,stroke .4s ease}.lenis,.mxd-parallax-bg,.swiper-wrapper,[data-speed]{transition:none!important}.mxd-nav__wrap{display:block;pointer-events:none}.mxd-nav__wrap.active_menu{pointer-events:all}.mxd-menu__wrapper{display:block;pointer-events:none}.mxd-menu__wrapper.active_menu{pointer-events:all}.mxd-menu__wrapper .fade-in-elm{transition:all .6s ease;visibility:hidden;opacity:0}.mxd-menu__wrapper.active_menu .fade-in-elm{visibility:visible;opacity:1}.mxd-menu__wrapper .fade-in-up-elm{transition:all .6s ease;visibility:hidden;opacity:0;transform:translateY(25px)}.mxd-menu__wrapper.active_menu .fade-in-up-elm{visibility:visible;opacity:1;transform:translateY(0)}.submenu{display:block;height:0;padding-top:0}.submenu,.videoModal__bodyOpen{overflow:hidden}.videoModal__overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:grid;place-items:center;overflow:hidden;z-index:111}.videoModal__content{background:transparent;border:none;outline:none;overflow:hidden}.videoModal__playerWrap{max-width:1200px;width:min(90vw,1600px);aspect-ratio:16/9;position:relative}.swiper-navigation-icon{display:none}.hamburger__line{transition:all .3s ease}.nav-open .hamburger__line:first-child{translate:none;rotate:none;scale:none;transform:translateY(5px) rotate(45deg)}.nav-open .hamburger__line:last-child{translate:none;rotate:none;scale:none;transform:translateY(-5px) rotate(-45deg)}.loading__fade,.loading__item{opacity:0}.mxd-header__nav{display:none;align-items:center;gap:2.4rem}.mxd-header__nav-link{font-size:1.4rem;font-weight:500;color:var(--t-medium);text-decoration:none;transition:color .3s ease;letter-spacing:.02em}.mxd-header__nav-link:hover{color:var(--accent)}@media only screen and (min-width:1024px){.mxd-header__nav{display:flex}}.services-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:2rem;gap:2rem}@media only screen and (max-width:1200px){.services-grid{grid-template-columns:repeat(3,1fr)}}@media only screen and (max-width:768px){.services-grid{grid-template-columns:repeat(2,1fr)}}@media only screen and (max-width:480px){.services-grid{grid-template-columns:1fr}}.service-card{background:var(--base-tint);border-radius:2rem;padding:2.8rem 2.4rem;border:1px solid var(--border);transition:transform .3s ease,border-color .3s ease;cursor:default}.service-card:hover{transform:translateY(-4px);border-color:var(--accent)}.service-card__icon{width:4.8rem;height:4.8rem;border-radius:1.2rem;background:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:2rem;font-size:2.2rem;color:var(--base)}.service-card__title{font-size:1.8rem;font-weight:600;margin-bottom:1rem;color:var(--t-bright)}.service-card__desc{font-size:1.4rem;color:var(--t-muted);line-height:1.6;margin-bottom:1.6rem}.service-card__checklist{list-style:none;padding:0;margin:0 0 2rem}.service-card__checklist li{font-size:1.3rem;color:var(--t-medium);padding:.4rem 0;display:flex;align-items:center;gap:.8rem}.service-card__checklist li:before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--accent);flex-shrink:0}.service-card__btn{font-size:1.4rem;font-weight:600;color:var(--accent);background:none;border:none;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:.6rem;transition:gap .3s ease}.service-card__btn:hover{gap:1rem}.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:2rem;gap:2rem}@media only screen and (max-width:1024px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}}@media only screen and (max-width:600px){.portfolio-grid{grid-template-columns:1fr}}.portfolio-card{background:var(--base-tint);border-radius:2rem;overflow:hidden;border:1px solid var(--border);transition:transform .3s ease,border-color .3s ease}.portfolio-card:hover{transform:translateY(-4px);border-color:var(--accent)}.portfolio-card__image{width:100%;aspect-ratio:16/10;background:var(--base-opp-tint);display:flex;align-items:center;justify-content:center;font-size:3rem;color:var(--accent);overflow:hidden}.portfolio-card__body{padding:2rem 2.4rem 2.4rem}.portfolio-card__category{font-size:1.2rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:.8rem}.portfolio-card__title{font-size:1.8rem;font-weight:600;margin-bottom:.8rem;color:var(--t-bright)}.portfolio-card__desc{font-size:1.4rem;color:var(--t-muted);line-height:1.5;margin-bottom:1.6rem}.portfolio-card__btn{font-size:1.4rem;font-weight:600;color:var(--accent);background:none;border:none;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:.6rem;transition:gap .3s ease}.portfolio-card__btn:hover{gap:1rem}@keyframes modalSlideIn{0%{opacity:0;transform:scale(.95) translateY(2rem)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}.detail-modal__overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(40px) saturate(200%) brightness(.6);-webkit-backdrop-filter:blur(40px) saturate(200%) brightness(.6);z-index:9999;display:flex;align-items:center;justify-content:center;padding:2rem;animation:overlayFadeIn .25s ease;touch-action:none;overflow:hidden}.detail-modal__content{background:var(--base);border-radius:2.4rem;max-width:80rem;width:100%;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.1);animation:modalSlideIn .3s ease;position:relative}.detail-modal__header{display:flex;align-items:center;justify-content:space-between;padding:2.8rem 3.2rem 2rem;flex-shrink:0;gap:2rem;border-bottom:1px solid var(--st-muted)}.detail-modal__header-info{flex:1 1;min-width:0}.detail-modal__close{background:var(--base-tint);border:1px solid var(--st-muted);border-radius:1.2rem;width:4.4rem;height:4.4rem;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:2rem;color:var(--t-bright);transition:background .3s ease,transform .2s ease,border-color .3s ease;flex-shrink:0;padding:0}.detail-modal__close:hover{background:var(--accent);color:var(--base);border-color:var(--accent);transform:scale(1.05)}.detail-modal__title{font-size:2.4rem;font-weight:700;color:var(--t-bright);line-height:1.2}.detail-modal__body{overflow-y:auto;flex:1 1;padding:2.4rem 3.2rem 3.2rem;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.detail-modal__section{margin-bottom:2rem;background:var(--base-tint);border-radius:1.6rem;padding:2rem 2.4rem;border:1px solid var(--st-muted)}.detail-modal__section:last-child{margin-bottom:0}.detail-modal__section h4{font-size:1.6rem;font-weight:600;margin-bottom:1.2rem;color:var(--accent)}.detail-modal__section p{font-size:1.4rem;color:var(--t-medium);line-height:1.7}.detail-modal__section ul{list-style:none;padding:0;margin:0}.detail-modal__section ul li{font-size:1.4rem;color:var(--t-medium);padding:.8rem 0;display:flex;align-items:center;gap:1rem;border-bottom:1px solid var(--st-muted)}.detail-modal__section ul li:last-child{border-bottom:none}.detail-modal__section ul li:before{content:"";width:.8rem;height:.8rem;border-radius:50%;background:var(--accent);flex-shrink:0}@media only screen and (max-width:768px){.detail-modal__overlay{padding:1.6rem}.detail-modal__content{max-height:80vh;border-radius:2rem}.detail-modal__header{padding:2rem 2rem 1.6rem}.detail-modal__close{width:4rem;height:4rem}.detail-modal__title{font-size:2rem}.detail-modal__body{padding:1.6rem 2rem 2rem}.detail-modal__section{padding:1.6rem}}@media only screen and (max-width:480px){.detail-modal__overlay{padding:1.2rem}.detail-modal__content{border-radius:1.6rem;max-height:85vh}.detail-modal__header{padding:1.6rem 1.6rem 1.4rem;gap:1.2rem}.detail-modal__close{width:3.6rem;height:3.6rem;font-size:1.6rem;border-radius:1rem}.detail-modal__title{font-size:1.8rem}.detail-modal__body{padding:1.2rem 1.6rem 1.6rem}.detail-modal__section{padding:1.4rem;border-radius:1.2rem}}.kits-palette-strip{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;margin-bottom:3rem}.kits-palette-orb{display:flex;flex-direction:column;align-items:center;gap:1rem;cursor:pointer;background:none;border:none;padding:.8rem;transition:transform .3s ease}.kits-palette-orb:hover{transform:scale(1.12)}.kits-palette-orb__gradient{display:block;width:5.6rem;height:5.6rem;border-radius:50%;border:3px solid var(--border);transition:border-color .3s ease,box-shadow .3s ease,width .3s ease,height .3s ease}.kits-palette-orb--active .kits-palette-orb__gradient{width:6.4rem;height:6.4rem;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent),0 0 24px rgba(var(--accent-rgb),.4)}.kits-palette-orb__label{font-size:1.2rem;font-weight:600;color:var(--t-muted);transition:color .3s ease}.kits-palette-orb--active .kits-palette-orb__label{color:var(--accent)}@media only screen and (max-width:600px){.kits-palette-strip{gap:1.2rem}.kits-palette-orb__gradient{width:4.4rem;height:4.4rem}.kits-palette-orb--active .kits-palette-orb__gradient{width:5rem;height:5rem}.kits-palette-orb__label{font-size:1.1rem}}.kits-showcase{max-width:60rem;margin:0 auto 2rem;background:var(--base-tint);border-radius:2.4rem;overflow:hidden;border:1px solid var(--border)}.kits-showcase__preview{position:relative;height:18rem;overflow:hidden}.kits-showcase__gradient{position:absolute;inset:0;transition:background .6s ease}.kits-showcase__content{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:2.4rem;background:linear-gradient(0deg,rgba(0,0,0,.55) 0,transparent)}.kits-showcase__label{font-size:1.1rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.7);margin-bottom:.4rem}.kits-showcase__name{font-size:2.4rem;font-weight:700;color:#fff;margin-bottom:.4rem}.kits-showcase__desc{font-size:1.4rem;color:rgba(255,255,255,.8)}.kits-showcase__colors{display:flex;gap:1rem;padding:1.6rem 2.4rem}.kits-showcase__color-dot{width:3rem;height:3rem;border-radius:50%;border:2px solid var(--border);transition:background .4s ease}@media only screen and (max-width:600px){.kits-showcase__preview{height:14rem}.kits-showcase__name{font-size:2rem}}.theme-modal__overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(40px) saturate(200%) brightness(.6);-webkit-backdrop-filter:blur(40px) saturate(200%) brightness(.6);z-index:9999;display:flex;align-items:center;justify-content:center;padding:2rem;animation:overlayFadeIn .25s ease}.theme-modal__content{background:var(--base);border-radius:2.4rem;max-width:84rem;width:100%;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.1);animation:modalSlideIn .3s ease}.theme-modal__header{display:flex;align-items:flex-start;justify-content:space-between;padding:3rem 3rem 2rem}.theme-modal__title{font-size:2.6rem;font-weight:700;color:var(--t-bright);margin-bottom:.4rem}.theme-modal__subtitle{font-size:1.4rem;color:var(--t-muted)}.theme-modal__close{background:var(--base-tint);border:1px solid var(--st-muted);border-radius:1.2rem;width:4.4rem;height:4.4rem;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:2rem;color:var(--t-bright);flex-shrink:0;padding:0;transition:background .3s ease,transform .2s ease,border-color .3s ease}.theme-modal__close:hover{background:var(--accent);color:var(--base);border-color:var(--accent);transform:scale(1.05)}.theme-modal__tabs{display:flex;gap:0;padding:0 3rem;border-bottom:1px solid var(--st-muted)}.theme-modal__tab{display:flex;align-items:center;padding:1.4rem 2.4rem;font-size:1.4rem;font-weight:600;color:var(--t-muted);background:none;cursor:pointer;border:none;border-bottom:2px solid transparent;transition:color .3s,border-color .3s}.theme-modal__tab:hover{color:var(--t-bright)}.theme-modal__tab--active{color:var(--accent);border-bottom-color:var(--accent)}.theme-modal__grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:1.6rem;gap:1.6rem;padding:2.4rem 3rem 3rem;overflow-y:auto;flex:1 1}@media only screen and (max-width:900px){.theme-modal__grid{grid-template-columns:repeat(2,1fr)}}@media only screen and (max-width:768px){.theme-modal__overlay{padding:1.6rem}.theme-modal__content{max-height:80vh;border-radius:2rem}.theme-modal__header{padding:2rem 2rem 1.6rem}.theme-modal__close{width:4rem;height:4rem}}@media only screen and (max-width:600px){.theme-modal__grid{grid-template-columns:1fr;padding:1.6rem;gap:1.2rem}.theme-modal__tabs{padding:0 1.6rem}}@media only screen and (max-width:480px){.theme-modal__overlay{padding:1.2rem}.theme-modal__content{border-radius:1.6rem;max-height:85vh}.theme-modal__header{padding:1.6rem 1.6rem 1.4rem}.theme-modal__close{width:3.6rem;height:3.6rem}}.theme-card{position:relative;background:var(--base-tint);border-radius:1.6rem;overflow:hidden;border:2px solid var(--st-muted);cursor:pointer;transition:transform .25s ease,border-color .3s ease,box-shadow .3s ease}.theme-card:hover{transform:translateY(-4px);border-color:var(--accent)}.theme-card--active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.theme-card__gradient-preview{position:relative;height:12rem;overflow:hidden}.theme-card__gradient-bg{position:absolute;inset:0;transition:opacity .3s ease}.theme-card:hover .theme-card__gradient-bg{opacity:.9}.theme-card__active-badge{position:absolute;top:1rem;right:1rem;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;font-size:1.1rem;font-weight:700;padding:.4rem 1rem;border-radius:2rem;display:flex;align-items:center;gap:.4rem;z-index:2}.theme-card__info{padding:1.4rem 1.6rem 1.6rem}.theme-card__color-row{display:flex;gap:.6rem;margin-bottom:1rem;margin-top:-1.6rem;position:relative;z-index:2}.theme-card__dot{width:2.4rem;height:2.4rem;border-radius:50%;border:2px solid var(--base);box-shadow:0 2px 8px rgba(0,0,0,.15)}.theme-card__name{font-size:1.5rem;font-weight:600;color:var(--t-bright);margin-bottom:.3rem}.theme-card__desc{font-size:1.2rem;color:var(--t-muted);line-height:1.4}.font-card__preview{padding:2rem 1.6rem 1rem}.font-card__sample-large{font-size:4rem;font-weight:700;color:var(--accent);line-height:1;margin-bottom:.8rem}.font-card__sample-name{font-size:1.8rem;font-weight:600;color:var(--t-bright);margin-bottom:.4rem}.font-card__sample-text{font-size:1.3rem;color:var(--t-muted);line-height:1.5}.font-card__preview+.theme-card__desc{padding:0 1.6rem 1.6rem}.contact-form{display:flex;flex-direction:column;gap:2rem}.contact-form__row{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:2rem;gap:2rem}@media only screen and (max-width:600px){.contact-form__row{grid-template-columns:1fr}}.contact-form__field{display:flex;flex-direction:column;gap:.6rem}.contact-form__label{font-size:1.3rem;font-weight:500;color:var(--t-medium)}.contact-form__input,.contact-form__textarea{background:var(--base-tint);border:1px solid var(--border);border-radius:1.2rem;padding:1.4rem 1.6rem;font-size:1.5rem;color:var(--t-bright);outline:none;transition:border-color .3s ease;font-family:inherit}.contact-form__input:focus,.contact-form__textarea:focus{border-color:var(--accent)}.contact-form__input::placeholder,.contact-form__textarea::placeholder{color:var(--t-muted)}.contact-form__textarea{resize:vertical;min-height:14rem}.contact-form__submit{align-self:flex-start}