.elementor-45172 .elementor-element.elementor-element-ae1c308{--display:flex;}.elementor-45172 .elementor-element.elementor-element-3492f70{--display:flex;--overlay-opacity:1;--padding-top:7rem;--padding-bottom:7rem;--padding-left:7rem;--padding-right:7rem;}.elementor-45172 .elementor-element.elementor-element-3492f70::before, .elementor-45172 .elementor-element.elementor-element-3492f70 > .elementor-background-video-container::before, .elementor-45172 .elementor-element.elementor-element-3492f70 > .e-con-inner > .elementor-background-video-container::before, .elementor-45172 .elementor-element.elementor-element-3492f70 > .elementor-background-slideshow::before, .elementor-45172 .elementor-element.elementor-element-3492f70 > .e-con-inner > .elementor-background-slideshow::before, .elementor-45172 .elementor-element.elementor-element-3492f70 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://www.iccs.ac.th/wp-content/uploads/2026/02/duotone-1.png");--background-overlay:'';background-position:center center;background-size:cover;}.elementor-45172 .elementor-element.elementor-element-5c38b65 .elementor-heading-title{font-family:"Noto Sans Thai", Sans-serif;color:#FFFFFF;}.elementor-45172 .elementor-element.elementor-element-0f1a933{--display:flex;}.elementor-45172 .elementor-element.elementor-element-47b5385{--spacer-size:3rem;}.elementor-45172 .elementor-element.elementor-element-00792ed > .elementor-widget-container{border-style:solid;border-width:0px 0px 0px 2px;}.elementor-45172 .elementor-element.elementor-element-00792ed{font-family:"Noto Sans Thai", Sans-serif;}.elementor-45172 .elementor-element.elementor-element-66e1150{text-align:justify;font-family:"Noto Sans Thai", Sans-serif;color:#000000;}.elementor-45172 .elementor-element.elementor-element-66e1150 .elementor-drop-cap{margin-inline-end:10px;}.elementor-45172 .elementor-element.elementor-element-2aecb09{--display:flex;}.elementor-45172 .elementor-element.elementor-element-741f335 > .elementor-widget-container{border-style:solid;border-width:0px 0px 0px 2px;}.elementor-45172 .elementor-element.elementor-element-741f335{font-family:"Noto Sans Thai", Sans-serif;}.elementor-45172 .elementor-element.elementor-element-a9af66b{text-align:justify;font-family:"Noto Sans Thai", Sans-serif;color:#000000;}.elementor-45172 .elementor-element.elementor-element-a9af66b .elementor-drop-cap{margin-inline-end:10px;}.elementor-45172 .elementor-element.elementor-element-ca813c3{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-45172 .elementor-element.elementor-element-6dc71a3{--display:flex;--padding-top:3rem;--padding-bottom:3rem;--padding-left:3rem;--padding-right:3rem;}.elementor-45172 .elementor-element.elementor-element-66da2d2{text-align:left;font-family:"Noto Sans Thai", Sans-serif;color:#745AA2;}.elementor-45172 .elementor-element.elementor-element-76fafae > .elementor-widget-container{margin:0rem 0rem 0rem 0rem;padding:0rem 0rem 0rem 0rem;border-style:solid;border-width:0px 0px 0px 2px;border-color:#020101;}.elementor-45172 .elementor-element.elementor-element-76fafae{text-align:left;font-family:"Noto Sans Thai", Sans-serif;color:#745AA2;}.elementor-45172 .elementor-element.elementor-element-57d351f{--spacer-size:2rem;}.elementor-45172 .elementor-element.elementor-element-07bf2ef{text-align:justify;font-family:"Noto Sans Thai", Sans-serif;color:#000000;}.elementor-45172 .elementor-element.elementor-element-07bf2ef .elementor-drop-cap{margin-inline-end:10px;}.elementor-45172 .elementor-element.elementor-element-b010322 > .elementor-widget-container{padding:3rem 3rem 3rem 1rem;}.elementor-45172 .elementor-element.elementor-element-b010322 img{width:100%;}.elementor-45172 .elementor-element.elementor-element-5084a74{--display:flex;}.elementor-45172 .elementor-element.elementor-element-5874815 > .elementor-widget-container{padding:3rem 3rem 3rem 3rem;}.elementor-45172 .elementor-element.elementor-element-5874815{text-align:center;}.elementor-45172 .elementor-element.elementor-element-5874815 .elementor-heading-title{font-family:"Noto Sans Thai", Sans-serif;color:#7449C2;}.elementor-45172 .elementor-element.elementor-element-86fb3d7{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-45172 .elementor-element.elementor-element-86fb3d7 .elementor-divider-separator{width:100%;}.elementor-45172 .elementor-element.elementor-element-86fb3d7 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-45172 .elementor-element.elementor-element-1defc35{--display:flex;--justify-content:flex-start;}.elementor-45172 .elementor-element.elementor-element-d9b57ca{--display:flex;}@media(min-width:768px){.elementor-45172 .elementor-element.elementor-element-6dc71a3{--width:70%;}}@media(min-width:1367px){.elementor-45172 .elementor-element.elementor-element-3492f70::before, .elementor-45172 .elementor-element.elementor-element-3492f70 > .elementor-background-video-container::before, .elementor-45172 .elementor-element.elementor-element-3492f70 > .e-con-inner > .elementor-background-video-container::before, .elementor-45172 .elementor-element.elementor-element-3492f70 > .elementor-background-slideshow::before, .elementor-45172 .elementor-element.elementor-element-3492f70 > .e-con-inner > .elementor-background-slideshow::before, .elementor-45172 .elementor-element.elementor-element-3492f70 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-attachment:scroll;}}/* Start custom CSS for html, class: .elementor-element-6750fd7 *//* Remove scroll and fade */
.scroll_time_line {
    height: auto; /* Changed from 70vh to auto */
    overflow-y: visible; /* Allows the full content to show */
    padding: 1rem 0;
    position: relative;
    -webkit-mask-image: none; /* Removes fade */
    mask-image: none; /* Removes fade */
}

.timeline-progress-container {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 4px;
    z-index: 1;
}

.timeline-line-bg {
    height: 100%;
    width: 100%;
    background: #e0e0e0;
}

/* Content layout */
.timeline-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Base structure for the node container */
.time-node {
    width: 100%;
    display: flex;
    position: relative;
    margin-bottom: 80px;
    align-items: center; /* Vertical alignment */
}

/* Ensures dots are visible on the line */
.time-node::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 20px;
    width: 15px;
    height: 15px;
    background: #8e44ad;
    border-radius: 50%;
    border: 3px solid #fff;
}

/* Default/Optional: Force box to the Left */
.time-node.time-node-left {
    justify-content: flex-start;
}

/* Default/Optional: Force box to the Right */
.time-node.time-node-right {
    justify-content: flex-end;
}

.node-box {
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #451A92;
    width: 42%;
    box-shadow: 2px 4px 10px rgba(0,0,0,0.05);
    font-family: noto sans thai;
}

.node-year {
    font-weight: 700;
    font-size: 20px;
    color: #7449c2;
    border-bottom: 3px solid #ac8445;
    margin-bottom: 1rem;
}

.node-content {
    color: #000;
}

/* Alternating logic */
/*.time-node:nth-child(odd) .node-box { margin-right: 50%; }*/
/*.time-node:nth-child(even) .node-box { margin-left: 50%; }*/

.timeline-wrapper {
    position: relative;
    width: 100%;
    padding: 2rem 0; /* Give some space at top/bottom */
}

.timeline-line-bg {
    background: #e0e0e0;
    height: 100%;
    width: 100%;
}


.timeline-line-fill {
    background: #8e44ad;
    width: 4px; /* Ensure this matches your bg line width */
    position: absolute;
    top: 0; /* Keep at top of container */
    left: 50%;
    transform: translateX(-50%);
    /* Remove any height or bottom properties here; the JS handles it */
}

/* The base dot */
.time-node::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scale(1);
    top: 70px;
    width: 15px;
    height: 15px;
    background: #e0e0e0; /* Gray when inactive */
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 3;
}

/* The "Active" state when the line hits it */
.time-node.active::after {
    background: #8e44ad; /* Purple when active */
    transform: translateX(-50%) scale(1.8); /* Grows 1.8x larger */
    box-shadow: 0 0 10px #8e44ad;
}

/* Responsive: On mobile, make everything full width */
@media (max-width: 768px) {
    .node-box {
        width: 80%;
        margin-left: auto !important;
        margin-right: 0 !important;
    }
    .time-node.time-node-left, 
    .time-node.time-node-right {
        justify-content: flex-end; /* All boxes to the right of the line on mobile */
    }
}/* End custom CSS */