.elementor-11420 .elementor-element.elementor-element-6b233c5:not(.elementor-motion-effects-element-type-background), .elementor-11420 .elementor-element.elementor-element-6b233c5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.honolulumusiclessons.com/wp-content/uploads/2025/01/Guitar-lessons-1.webp");background-repeat:no-repeat;background-size:cover;}.elementor-11420 .elementor-element.elementor-element-6b233c5 > .elementor-background-overlay{background-color:#020101;opacity:0.67;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11420 .elementor-element.elementor-element-6b233c5 > .elementor-container{min-height:400px;}.elementor-11420 .elementor-element.elementor-element-6b233c5{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-11420 .elementor-element.elementor-element-6b233c5 > .elementor-shape-bottom svg{width:calc(100% + 1.3px);height:24px;}.elementor-11420 .elementor-element.elementor-element-2f96cc9 > .elementor-element-populated{padding:0px 0px 110px 0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-11420 .elementor-element.elementor-element-afaade2{text-align:center;}.elementor-11420 .elementor-element.elementor-element-afaade2 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:43px;font-weight:600;line-height:55px;color:#FFFFFF;}.elementor-11420 .elementor-element.elementor-element-a81ca8a > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-11420 .elementor-element.elementor-element-94dbd02 > .elementor-widget-container{margin:100px 0px 0px 0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-11420 .elementor-element.elementor-element-15f080d.elementor-column > .elementor-widget-wrap{justify-content:flex-end;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-11420 .elementor-element.elementor-element-d691b60 .elementor-button{background-color:#FF0000;font-family:"Sarabun", Sans-serif;font-size:15px;font-weight:500;fill:#FFFFFF;color:#FFFFFF;border-radius:50px 50px 50px 50px;padding:8px 16px 10px 16px;}.elementor-11420 .elementor-element.elementor-element-d691b60{width:auto;max-width:auto;}.elementor-11420 .elementor-element.elementor-element-d691b60 > .elementor-widget-container{padding:0px 0px 0px 20px;}.elementor-11420 .elementor-element.elementor-element-d691b60 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-11420 .elementor-element.elementor-element-d691b60 .elementor-button .elementor-button-content-wrapper{gap:6px;}.elementor-11420 .elementor-element.elementor-element-2fd2c62 .elementor-button{background-color:#0069FF;font-family:"Sarabun", Sans-serif;font-size:15px;font-weight:500;fill:#FFFFFF;color:#FFFFFF;border-radius:50px 50px 50px 50px;padding:8px 16px 10px 16px;}.elementor-11420 .elementor-element.elementor-element-2fd2c62{width:auto;max-width:auto;}.elementor-11420 .elementor-element.elementor-element-2fd2c62 > .elementor-widget-container{padding:0px 0px 0px 20px;}.elementor-11420 .elementor-element.elementor-element-2fd2c62 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-11420 .elementor-element.elementor-element-2fd2c62 .elementor-button .elementor-button-content-wrapper{gap:5px;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-11420 .elementor-element.elementor-element-6b233c5 > .elementor-container{min-height:450px;}.elementor-11420 .elementor-element.elementor-element-d691b60 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-11420 .elementor-element.elementor-element-2fd2c62 > .elementor-widget-container{padding:0px 0px 0px 0px;}}@media(max-width:767px){.elementor-11420 .elementor-element.elementor-element-6b233c5 > .elementor-container{min-height:300px;}.elementor-11420 .elementor-element.elementor-element-afaade2 .elementor-heading-title{font-size:25px;line-height:35px;}.elementor-11420 .elementor-element.elementor-element-d691b60{width:100%;max-width:100%;}.elementor-11420 .elementor-element.elementor-element-d691b60 > .elementor-widget-container{padding:11px 0px 0px 0px;}.elementor-11420 .elementor-element.elementor-element-d691b60 .elementor-button{font-size:13px;}.elementor-11420 .elementor-element.elementor-element-2fd2c62{width:100%;max-width:100%;}.elementor-11420 .elementor-element.elementor-element-2fd2c62 > .elementor-widget-container{padding:11px 0px 0px 0px;}.elementor-11420 .elementor-element.elementor-element-2fd2c62 .elementor-button{font-size:13px;}}/* Start custom CSS */:root {
    --ins-primary:           #4F58FF;
    --ins-primary-mid:       #4d53c5;
    --ins-primary-light:  #E1F5EE;
    --ins-primary-soft:   #4d53c5;
    --ins-primary-dark:   #04342C;
    --ins-accent:         #D85A30;
    --ins-accent-soft:    #FAECE7;
    --ins-accent-dark:    #712B13;
    --ins-text:           #1a1a1a;
    --ins-text-muted:     #5a5a5a;
    --ins-bg:             #ffffff;
    --ins-bg-soft:        #f8f8f6;
    --ins-border:         rgba(0, 0, 0, 0.09);
    --ins-border-hover:    #4F58FF;
    --ins-radius:         20px;
    --ins-radius-md:      14px;
    --ins-radius-sm:      10px;
   --ins-font-display:     "Sarabun", Sans-serif;
    --ins-font-body:     "Sarabun", Sans-serif;
    --ins-shadow:         0 2px 20px rgba(0, 0, 0, 0.055);
    --ins-shadow-hover:   0 10px 40px rgba(0, 0, 0, 0.1);
    --ins-transition:     0.22s ease;
}



.instructors-intro {
    margin-bottom: 2rem;
}

.instructors-eyebrow {
    font-family:    var(--ins-font-body);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--ins-primary);
    display:        block;
    margin-bottom:  0.4rem;
}
.button-video {
    display: flex;
    gap: 10px;
}
.instructors-title {
    font-family:  var(--ins-font-display);
    font-size:    clamp(26px, 4vw, 40px);
    font-weight:  600;
    color:        var(--ins-text);
    line-height:  1.15;
    margin-bottom: 0.5rem;
}

.instructors-subtitle {
    font-family: var(--ins-font-body);
    font-size:   14px;
    color:       var(--ins-text-muted);
}



.instructors-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap:                   16px;
    margin-bottom:         3rem;
}

.instructors-grid .instructor-item a {
    display:         flex;
    flex-direction:  column;
    text-decoration: none;
    color:           inherit;
    border-radius:   var(--ins-radius-md);
    overflow:        hidden;
    background:      var(--ins-bg);
    border:          1px solid var(--ins-border);
    box-shadow:      var(--ins-shadow);
    transition:      transform var(--ins-transition),
                     box-shadow var(--ins-transition),
                     border-color var(--ins-transition);
}

.instructors-grid .instructor-item a:hover {
    transform:    translateY(-5px);
    box-shadow:   var(--ins-shadow-hover);
    border-color: var(--ins-border-hover);
}

.instructors-grid .instructor-image {
    width:           100%;
    aspect-ratio:    1 / 1;
    overflow:        hidden;
    background:      var(--ins-primary-soft);
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.instructors-grid .instructor-image img {
    width:            100%;
    height:           100%;
    object-fit:       cover;
    object-position:  top center;
    display:          block;
    transition:       transform 0.45s ease;
}

.instructors-grid .instructor-item a:hover .instructor-image img {
    transform: scale(1.06);
}

.instructors-grid .placeholder {
    font-family: var(--ins-font-display);
    font-size:   40px;
    font-style:  italic;
    color:       var(--ins-primary-dark);
    opacity:     0.45;
}


.instructors-grid .instructor-image::after {
    content:        'View profile ↓';
    position:       absolute;
    bottom:         12px;
    left:           50%;
    transform:      translateX(-50%) translateY(8px);
    background:     var(--ins-primary);
    color:          #fff;
    font-family:    var(--ins-font-body);
    font-size:      10px;
    font-weight:    600;
    padding:        4px 14px;
    border-radius:  20px;
    white-space:    nowrap;
    opacity:        0;
    pointer-events: none;
    transition:     opacity var(--ins-transition), transform var(--ins-transition);
}

.instructors-grid .instructor-item a:hover .instructor-image::after {
    opacity:   1;
    transform: translateX(-50%) translateY(0);
}


.instructors-grid .instructor-name-wrap {
    padding:    10px 13px 12px;
    text-align: center;
    border-top: 1px solid var(--ins-border);
}

.instructors-grid h3 {
    font-family:   var(--ins-font-body);
    font-size:     13px;
    font-weight:   600;
    color:         var(--ins-text);
    margin:        0 0 3px;
    line-height:   1.3;
}

.instructors-grid .ins-instruments {
    font-size:  11px;
    color:      var(--ins-primary);
    font-weight: 500;
}



.instructors-section-divider {
    display:       flex;
    align-items:   center;
    gap:           14px;
    margin-bottom: 2rem;
}

.instructors-section-divider::before,
.instructors-section-divider::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: var(--ins-border);
}

.instructors-section-divider span {
    font-family:    var(--ins-font-body);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--ins-text-muted);
    white-space:    nowrap;
}



.instructors-details {
    display:        flex;
    flex-direction: column;
    gap:            24px;
}

/* ── Detail card ── */
.instructor-detail {
    background:        var(--ins-bg);
    border:            1px solid var(--ins-border);
    border-radius:     var(--ins-radius);
    box-shadow:        var(--ins-shadow);
    overflow:          hidden;
    scroll-margin-top: 90px;
}

.instructor-detail .ins-detail-header {
    display:       grid;
    grid-template-columns: 72px 1fr auto auto;
    gap:           18px;
    align-items:   center;
    padding:       22px 28px;
    background:    var(--ins-bg-soft);
    border-bottom: 1px solid var(--ins-border);
}

.instructor-detail .ins-avatar {
    width:           72px;
    height:          72px;
    border-radius:   var(--ins-radius-sm);
    overflow:        hidden;
    background:      var(--ins-primary-soft);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.instructor-detail .ins-avatar img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: top;
    display:         block;
}

.instructor-detail .ins-avatar .ini {
    font-family: var(--ins-font-display);
    font-size:   28px;
    font-style:  italic;
    color:       var(--ins-primary-dark);
}

.instructor-detail .ins-header-info h2 {
    font-family:   var(--ins-font-display);
    font-size:     26px;
    font-weight:   600;
    color:         var(--ins-text);
    margin-bottom: 6px;
    line-height:   1.1;
}

.instructor-detail .ins-tag-row {
    display:   flex;
    gap:       6px;
    flex-wrap: wrap;
    
}









.ins-tag {
       font-family: var(--ins-font-body);
    font-size: 16px;
    font-weight: 400;
    border-radius: 20px;
    color: #000;
}



.ins-tag.accent {
    background: var(--ins-accent-soft);
    color:      var(--ins-accent-dark);
}

.ins-demo-btn {
    display:         flex;
    align-items:     center;
    gap:             6px;
    font-family:     var(--ins-font-body);
    font-size:       12px;
    font-weight:     600;
    color:           var(--ins-primary);
    text-decoration: none;
    padding:         9px 16px;
    border:          1.5px solid var(--ins-primary-mid);
    border-radius:   20px;
    white-space:     nowrap;
    transition:      background var(--ins-transition);
}

.ins-demo-btn:hover {
    background: var(--ins-primary-soft);
    color: #fff !important;
}


.instructor-detail .ins-body {
    padding: 26px 28px;
}

.ins-sec-head {
    display:       flex;
    align-items:   center;
    gap:           12px;
    margin-bottom: 18px;
}

.ins-sec-bar {
    width:        3px;
    height:       22px;
    background:   var(--ins-primary);
    border-radius: 0;
    flex-shrink:  0;
}

.ins-sec-head h3 {
    font-family: var(--ins-font-display);
    font-size:   25px;
    font-weight: 600;
    color:       var(--ins-text);
    margin:      0;
    white-space: nowrap;
}

.ins-sec-line {
    flex:       1;
    height:     1px;
    background: var(--ins-border);
}

/* ── Section inner divider ── */
.ins-inner-divider {
    height:     1px;
    background: var(--ins-border);
    margin:     0 0 26px;
}




.ins-content-wrap.has-image {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   26px;
    align-items:           start;
    margin-bottom:         26px;
}

/* No image: full width */
.ins-content-wrap.no-image {
    margin-bottom: 26px;
}

/* Image box */
.ins-content-img {
    border-radius: var(--ins-radius-sm);
    overflow:      hidden;
    background:    var(--ins-primary-soft);
}

.ins-content-img img {
    width:            100%;
    aspect-ratio:     4 / 3;
    object-fit:       cover;
    object-position:  top center;
    display:          block;
    border-radius:    var(--ins-radius-sm);
}

/* Text */
.ins-content-text {
    font-family: var(--ins-font-body);
      font-size: 17px;
    color: #66666a;
    line-height: 30px;
}

.ins-content-text p {
    margin-bottom: 0.8em;
}

.ins-content-text p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   DEMO VIDEO GALLERY
   ============================================================ */
.demo-video-gallery {
    scroll-margin-top: 90px;
}

.youtube-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}

.youtube-item {
    position:      relative;
    aspect-ratio:  16 / 9;
    border-radius: var(--ins-radius-sm);
    overflow:      hidden;
    background:    var(--ins-bg-soft);
    border:        1px solid var(--ins-border);
}

.youtube-item iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   none;
    display:  block;
}


/* ============================================================
   METADATA BAR
   ============================================================ */
.instructor-meta {
    display:    flex;
    flex-wrap:  wrap;
    gap:        6px;
    padding:    12px 28px;
    background: var(--ins-bg-soft);
    border-top: 1px solid var(--ins-border);
}

.ins-chip {
    font-family:   var(--ins-font-body);
    font-size:     11px;
    font-weight:   500;
    padding:       3px 10px;
    border-radius: 20px;
    background:    var(--ins-primary-soft);
    color:         var(--ins-primary-dark);
}

.ins-chip.active {
    background: #EAF3DE;
    color:      #27500A;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .instructor-detail .ins-detail-header {
        grid-template-columns: 60px 1fr;
        grid-template-rows:    auto auto;
    }
    .ins-demo-btn {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 768px) {
    .instructors-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 12px;
    }
    .ins-content-wrap.has-image {
        grid-template-columns: 1fr;
    }
    .ins-body {
        padding: 20px 18px !important;
    }
    .instructor-detail .ins-detail-header {
        padding: 18px;
    }
    .youtube-gallery {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

@media (max-width: 480px) {
    .instructors-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .instructor-detail .ins-detail-header {
        grid-template-columns: 52px 1fr;
    }
    .instructor-detail .ins-avatar {
        width:  52px;
        height: 52px;
    }
    .instructor-detail .ins-header-info h2 {
        font-size: 20px;
    }
    .youtube-gallery {
        grid-template-columns: 1fr;
    }
}/* End custom CSS */