.elementor-29050 .elementor-element.elementor-element-a621209{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-29050 .elementor-element.elementor-element-4697fe7{width:var( --container-widget-width, 90% );max-width:90%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:90%;--container-widget-flex-grow:0;}.elementor-29050 .elementor-element.elementor-element-4697fe7 .elementor-heading-title{font-size:30px;font-weight:800;}.elementor-29050 .elementor-element.elementor-element-1c206fb{width:var( --container-widget-width, 90% );max-width:90%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:90%;--container-widget-flex-grow:0;font-size:15px;}@media(min-width:769px){.elementor-29050 .elementor-element.elementor-element-a621209{--width:92%;}}/* Start custom CSS for html, class: .elementor-element-dd6fc71 *//*======================================
    RESET
======================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.pt-wrapper{

    width:100%;
    max-width:1400px;
    margin:40px auto;
    padding:0 20px;

    font-family:'Poppins',sans-serif;

}

/*======================================
    HEADER
======================================*/

.pt-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:40px;

    flex-wrap:wrap;

}

.pt-instruction{

    font-size:15px;

    color:#777;

}

/*======================================
    TABS
======================================*/

.pt-tabs{

    display:inline-flex;

    padding:4px;

    border:1px solid #E4E4E4;

    border-radius:50px;

    

}

.pt-tab{

    width:170px;

    height:48px;

    border:none;

    background:transparent;
    
    border-radius:40px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    color:#666;

    transition:.3s;

}

.pt-tab.active{

    background:#00695C !important;

    color:#fff !important;
    
    border-radius: 22px;

}

.pt-tab:not(.active){

    background:transparent !important;

    color:#666 !important;

}

.pt-tab:not(.active):hover{

    background:transparent !important;

    color:#666 !important;

}

/*======================================
    CONTENT
======================================*/

.pt-view{

    display:none;

}

.pt-view.active{

    display:block;

}

/*======================================
    SCROLL
======================================*/

.pt-scroll{

    width:100%;

    overflow-x:auto;

    overflow-y:hidden;

    -webkit-overflow-scrolling:touch;

    padding-bottom:10px;

}

/*======================================
    GRID
======================================*/

.pt-grid{

    display:grid;

    grid-template-columns:repeat(18,70px);

    grid-template-rows:repeat(5,70px);

    gap:10px;

    min-width:1450px;

    justify-content:center;

    padding-top: 12px;
    
    padding-left: 10px;
}

/*======================================
    CARD
======================================*/

.pt-element{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    border-radius:10px;

    text-decoration:none;

    color:#fff;

    transition:.25s;

    overflow:hidden;

}

.pt-element:hover{

    transform:translateY(-6px);

    box-shadow:0 10px 22px rgba(0,0,0,.18);

}

/*======================================
    TEXT
======================================*/

.atomic{

    position:absolute;

    top:6px;

    left:7px;

    font-size:10px;

    font-weight:500;

}

.symbol{

    font-size:22px;

    font-weight:700;

    line-height:1;

}

.name{

    margin-top:6px;

    font-size:9px;

    line-height:1.2;

    text-align:center;

    padding:0 4px;

}

/*======================================
    FAMILY PLACEHOLDER
======================================*/

#families{

    min-height:400px;

}

/*======================================
    TABLET
======================================*/

@media(max-width:1024px){

.pt-wrapper{

padding:0 15px;

}

.pt-header{

flex-direction:column;

align-items:flex-start;

}

}

/*======================================
    MOBILE
======================================*/

@media(max-width:768px){

.pt-tabs{

width:100%;

display:flex;

}

.pt-tab{

flex:1;

width:auto;

font-size:14px;

}

.pt-instruction{

width:100%;

text-align:center;

}

.pt-grid{

min-width:1380px;

}

}

/*======================================
    SMALL MOBILE
======================================*/

@media(max-width:480px){

.pt-wrapper{

padding:0 10px;

}

.pt-tab{

font-size:13px;

height:44px;

}

.symbol{

font-size:18px;

}

.name{

font-size:8px;

}

.atomic{

font-size:9px;

}

}
/*======================================
LEFT SIDE
======================================*/

.li{
    grid-column:1;
    grid-row:1;
    background:#9A8CD2;
}

.mg{
    grid-column:2;
    grid-row:2;
    background:#C7DAB9;
    color:#222;
}
/*======================================
TOP RIGHT
======================================*/

.b{
    grid-column:14;
    grid-row:1;
    background:#0D9794;
}

.c{
    grid-column:15;
    grid-row:1;
    background:#2E3339;
}

.al{
    grid-column:14;
    grid-row:2;
    background:#BDC4CA;
    color:#222;
}

.si{
    grid-column:15;
    grid-row:2;
    background:#708497;
}
/*======================================
TRANSITION METALS
======================================*/

.v{
    grid-column:6;
    grid-row:3;
    background:#687540;
}

.cr{
    grid-column:7;
    grid-row:3;
    background:#91A3B0;
}

.mn{
    grid-column:8;
    grid-row:3;
    background:#8679A7;
}

.fe{
    grid-column:9;
    grid-row:3;
    background:#89644E;
}

.co{
    grid-column:10;
    grid-row:3;
    background:#3F61BE;
}

.ni{
    grid-column:11;
    grid-row:3;
    background:#B8BEC4;
    color:#222;
}

.cu{
    grid-column:12;
    grid-row:3;
    background:#C2813D;
}

.zn{
    grid-column:13;
    grid-row:3;
    background:#98A8B6;
}

.ga{
    grid-column:14;
    grid-row:3;
    background:#5672C9;
}

.ge{
    grid-column:15;
    grid-row:3;
    background:#988CC3;
}

.se{
    grid-column:17;
    grid-row:3;
    background:#A76A58;
}
/*======================================
FOURTH ROW
======================================*/

.mo{
    grid-column:7;
    grid-row:4;
    background:#B8C1CB;
    color:#222;
}

.rh{
    grid-column:10;
    grid-row:4;
    background:#D8DCE1;
    color:#222;
}

.pd{
    grid-column:11;
    grid-row:4;
    background:#C7CCD2;
    color:#222;
}

.ag{
    grid-column:12;
    grid-row:4;
    background:#B8BEC5;
    color:#222;
}

.in{
    grid-column:14;
    grid-row:4;
    background:#6987A9;
}

.sn{
    grid-column:15;
    grid-row:4;
    background:#D8DDE3;
    color:#222;
}
/*======================================
FIFTH ROW
======================================*/

.ta{
    grid-column:6;
    grid-row:5;
    background:#343A42;
}

.re{
    grid-column:8;
    grid-row:5;
    background:#4A4F56;
}

.ir{
    grid-column:10;
    grid-row:5;
    background:#373C44;
}

.pt{
    grid-column:11;
    grid-row:5;
    background:#BCC4CD;
    color:#222;
}

.au{
    grid-column:12;
    grid-row:5;
    background:#CDA83D;
}

.bi{
    grid-column:16;
    grid-row:5;
    background:#B786A1;
}
/*======================================
HOVER
======================================*/

.pt-element{

    cursor:pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.pt-element:hover{

    transform:translateY(-6px);

    box-shadow:0 12px 25px rgba(0,0,0,.18);

}

.pt-element:active{

    transform:scale(.96);

}
/*======================================
FAMILY SECTION
======================================*/

.family-section{

    margin-bottom:60px;

}

.family-title{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:25px;

    padding-bottom:12px;

    border-bottom:1px solid #ECECEC;

}

.family-title h2{

    font-size:26px;

    font-weight:700;

    color:#111;

    letter-spacing:2px;

}

.family-title span{

    color:#888;

    font-size:16px;
    
    padding-bottom: 18px;

}

.family-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));

    gap:18px;

}

.family-card{

    background:#fff;

    border:1px solid #E6E6E6;

    border-radius:14px;

    padding:18px;

    text-decoration:none;

    text-align:center;

    transition:.3s;

}

.family-card:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.family-icon{

    width:52px;

    height:52px;

    margin:auto;

    margin-bottom:15px;

    border-radius:12px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    font-weight:700;

    color:#fff;

}

.family-card h3{

    font-size:17px;

    color:#222;

    margin-bottom:8px;

}

.family-card p{

    font-size:14px;

    color:#8A8A8A;

}

/*======================================
RESPONSIVE
======================================*/

@media(max-width:768px){

.family-grid{

grid-template-columns:repeat(2,1fr);

}

.family-title{

flex-direction:column;

align-items:flex-start;

}

.family-title h2{

font-size:22px;

}

.family-title span{

font-size:14px;

}

}

@media(max-width:480px){

.family-grid{

grid-template-columns:1fr;

}

.family-card{

padding:16px;

}

}
/* Mobile */
@media (max-width: 768px) {

    .pt-grid {
        margin-left:20px;    }

}/* End custom CSS */