/*=========================================================
    STAR SAT OFFICIAL
    PAGE
    Part 1
=========================================================*/


/*=========================================================
    PAGE HERO
=========================================================*/

.ss-page-hero{

    position:relative;

    padding:28px 0 18px;

}


/*=========================================================
    CONTAINER
=========================================================*/

.ss-page-hero .ss-container{

    position:relative;

    z-index:2;

}


/*=========================================================
    BREADCRUMB
=========================================================*/

.ss-breadcrumb{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:18px;

    font-size:10px;

    font-weight:400;

    color:#91A3BE;

}

.ss-breadcrumb a{

    color:#69AEFF;

    transition:.25s;

}

.ss-breadcrumb a:hover{

    color:#A7D3FF;

}

.ss-breadcrumb span{

    opacity:.45;

}

.ss-breadcrumb strong{

    font-weight:500;

    color:#FFFFFF;

}


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

.ss-page-header{

    display:flex;

    flex-direction:column;

    gap:18px;

}


/*=========================================================
    HEADING
=========================================================*/

.ss-page-heading{

    display:flex;

    flex-direction:column;

    gap:10px;
    text-align: center;

}

.ss-page-heading h1{

    font-size:15px;

    font-weight:500;

    line-height:1.6;

    color:#FFFFFF;

}

.ss-page-heading p{

    max-width:680px;

    font-size:13px;

    font-weight:400;

    line-height:1.9;

    color:#98ABC5;

}


/*=========================================================
    META
=========================================================*/

.ss-page-meta{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}


/*=========================================================
    META ITEM
=========================================================*/

.ss-meta-item{

    display:flex;

    align-items:center;

    gap:8px;

    min-height:38px;

    padding:0 14px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.05);

    background:rgba(255,255,255,.02);

}

.ss-meta-item svg{

    width:14px;

    height:14px;

    color:#69AEFF;

    flex:0 0 auto;

}

.ss-meta-item span{

    font-size:10px;

    font-weight:400;

    color:#8FA4BF;

}

.ss-meta-item strong{

    font-size:10px;

    font-weight:500;

    color:#FFFFFF;

}


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

.ss-page-content{

    position:relative;

    padding:0 0 70px;

}


/*=========================================================
    LAYOUT
=========================================================*/

.ss-page-layout{

    display:grid;

    grid-template-columns:1fr;

    gap:18px;

}


/*=========================================================
    MAIN
=========================================================*/

.ss-page-main{

    min-width:0;

}


/*=========================================================
    ARTICLE
=========================================================*/

.ss-article{

    position:relative;

    border-radius:20px;

    border:1px solid rgba(255,255,255,.05);

    padding:18px;

}


/*=========================================================
    COVER
=========================================================*/

.ss-page-cover{

    margin:-18px -18px 18px;

    overflow:hidden;

    border-radius:20px 20px 0 0;

}

.ss-page-cover img{

    display:block;

    width:100%;

    height:auto;

}


/*=========================================================
    BODY
=========================================================*/

.ss-page-body{

    font-size:11px;

    line-height:2;

    color:#A8B7CB;

}


/*=========================================================
    PAGE LINKS
=========================================================*/

.ss-page-links{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:20px;

}

.ss-page-links a{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:34px;

    height:34px;

    padding:0 12px;

    border-radius:10px;

    border:1px solid rgba(255,255,255,.05);

    background:rgba(255,255,255,.02);

    font-size:10px;

    color:#69AEFF;

}
/*=========================================================
    SIDEBAR
    Part 2
=========================================================*/


/*=========================================================
    SIDEBAR
=========================================================*/

.ss-page-sidebar{

    display:flex;

    flex-direction:column;

    gap:18px;

}


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

.ss-page-card{

    position:relative;

    padding:18px;

    border-radius:20px;

    border:1px solid rgba(255,255,255,.05);

}


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

.ss-card-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    margin-bottom:16px;

}

.ss-card-header h3{

    font-size:12px;

    font-weight:500;

    color:#FFFFFF;

}


/*=========================================================
    INFO LIST
=========================================================*/

.ss-info-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}


/*=========================================================
    INFO ITEM
=========================================================*/

.ss-info-item{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    min-height:34px;

    padding-bottom:12px;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.ss-info-item:last-child{

    padding-bottom:0;

    border-bottom:0;

}

.ss-info-item span{

    font-size:10px;

    font-weight:400;

    color:#91A3BE;

}

.ss-info-item strong{

    font-size:10px;

    font-weight:500;

    color:#FFFFFF;

}


/*=========================================================
    PAGE NAVIGATION
=========================================================*/

.ss-page-nav{

    display:flex;

    flex-direction:column;

    gap:6px;

    list-style:none;

    margin:0;

    padding:0;

}

.ss-page-nav li{

    margin:0;

    padding:0;

}


/*=========================================================
    NAV LINK
=========================================================*/

.ss-page-nav a{

    display:flex;

    align-items:center;

    min-height:38px;

    padding:0 14px;

    border-radius:12px;

    text-decoration:none;

    font-size:10px;

    font-weight:400;

    color:#A8B7CB;

    transition:.25s;

}

.ss-page-nav a:hover{

    color:#FFFFFF;

    background:rgba(255,255,255,.03);

}

.ss-page-nav a.active{

    color:#69AEFF;

    background:rgba(59,130,246,.08);

}


/*=========================================================
    SUPPORT
=========================================================*/

.ss-page-card p{

    font-size:12px;

    font-weight:400;

    line-height:1.9;

    color:#97AAC4;

}


/*=========================================================
    BUTTON
=========================================================*/

.ss-page-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    width:100%;

    height:38px;

    margin-top:16px;

    border-radius:12px;

    background:

    linear-gradient(

        180deg,

        #4A91FF,

        #2F70E0

    );

    text-decoration:none;

    font-size:10px;

    font-weight:500;

    color:#FFFFFF;

    transition:.25s;

}

.ss-page-btn:hover{

    transform:translateY(-2px);

}

.ss-page-btn svg{

    width:14px;

    height:14px;

}


/*=========================================================
    STICKY
=========================================================*/

@media(min-width:992px){

.ss-page-sidebar{

    position:sticky;

    top:90px;

    align-self:start;

}

}
/*=========================================================
    TYPOGRAPHY
    Part 3
=========================================================*/


/*=========================================================
    HEADINGS
=========================================================*/

.ss-page-body h1,

.ss-page-body h2,

.ss-page-body h3,

.ss-page-body h4,

.ss-page-body h5,

.ss-page-body h6{

    margin:24px 0 12px;

    line-height:1.7;

    font-weight:500;

    color:#FFFFFF;

}

.ss-page-body h1{

    font-size:13px;

}

.ss-page-body h2{

    font-size:13px;

}

.ss-page-body h3{

    font-size:12px;

}

.ss-page-body h4{

    font-size:11px;

}

.ss-page-body h5,

.ss-page-body h6{

    font-size:10px;

}


/*=========================================================
    PARAGRAPH
=========================================================*/

.ss-page-body p{

    margin:0 0 16px;

    font-size:12px;

    font-weight:400;

    line-height:2;

    color:#A6B8CF;

}


/*=========================================================
    LINKS
=========================================================*/

.ss-page-body a{

    color:#67AFFF;

    font-weight:500;

    text-decoration:none;

    transition:.25s;

}

.ss-page-body a:hover{

    color:#9BD0FF;

}


/*=========================================================
    STRONG
=========================================================*/

.ss-page-body strong{

    font-weight:500;

    color:#FFFFFF;

}


/*=========================================================
    EMPHASIS
=========================================================*/

.ss-page-body em{

    font-style:italic;

    color:#C9D7E8;

}


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

.ss-page-body small{

    font-size:9px;

    color:#8FA3BD;

}


/*=========================================================
    HR
=========================================================*/

.ss-page-body hr{

    height:1px;

    margin:26px 0;

    border:0;

    background:rgba(255,255,255,.06);

}


/*=========================================================
    IMAGE
=========================================================*/

.ss-page-body img{

    display:block;

    max-width:100%;

    height:auto;

    margin:22px auto;

    border-radius:16px;

}


/*=========================================================
    FIGURE
=========================================================*/

.ss-page-body figure{

    margin:24px 0;

}

.ss-page-body figcaption{

    margin-top:10px;

    text-align:center;

    font-size:9px;

    color:#8EA2BC;

}


/*=========================================================
    LIST
=========================================================*/

.ss-page-body ul,

.ss-page-body ol{

    margin:16px 0;

    padding-left:22px;

}

.ss-page-body li{

    margin-bottom:10px;

    font-size:11px;

    font-weight:400;

    line-height:1.9;

    color:#A6B8CF;

}

.ss-page-body li::marker{

    color:#69AEFF;

}


/*=========================================================
    TABLE
=========================================================*/

.ss-page-body table{

    width:100%;

    border-collapse:collapse;

    margin:24px 0;

    font-size:10px;

}

.ss-page-body th{

    padding:12px;

    text-align:left;

    font-weight:500;

    color:#FFFFFF;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.05);

}

.ss-page-body td{

    padding:12px;

    color:#A8B7CB;

    border:1px solid rgba(255,255,255,.05);

}

.ss-page-body tr:nth-child(even){

    background:rgba(255,255,255,.015);

}


/*=========================================================
    WORDPRESS ALIGNMENT
=========================================================*/

.alignleft{

    float:left;

    margin:0 20px 20px 0;

}

.alignright{

    float:right;

    margin:0 0 20px 20px;

}

.aligncenter{

    display:block;

    margin:20px auto;

}
/*=========================================================
    BLOCKQUOTE
=========================================================*/

.ss-page-body blockquote{

    position:relative;

    margin:24px 0;

    padding:18px 20px;

    border-left:3px solid #4A91FF;

    background:rgba(255,255,255,.025);

    border-radius:14px;

}

.ss-page-body blockquote p{

    margin:0;

    font-size:12px;

    font-weight:400;

    line-height:2;

    color:#D5E4F5;

}

.ss-page-body blockquote cite{

    display:block;

    margin-top:10px;

    font-size:9px;

    font-style:normal;

    color:#8EA3BD;

}


/*=========================================================
    CODE
=========================================================*/

.ss-page-body code{

    padding:2px 6px;

    border-radius:6px;

    background:#111827;

    color:#8FC6FF;

    font-size:10px;

    font-family:Consolas,Monaco,monospace;

}

.ss-page-body pre{

    overflow:auto;

    margin:24px 0;

    padding:18px;

    border-radius:16px;

    background:#0E1728;

    border:1px solid rgba(255,255,255,.05);

}

.ss-page-body pre code{

    padding:0;

    background:none;

    color:#D7E9FF;

    font-size:10px;

    line-height:1.8;

}


/*=========================================================
    GUTENBERG CODE
=========================================================*/

.wp-block-code{

    margin:24px 0;

    padding:18px;

    border-radius:16px;

    background:#0E1728;

    border:1px solid rgba(255,255,255,.05);

}

.wp-block-code code{

    background:none;

    padding:0;

}


/*=========================================================
    GALLERY
=========================================================*/

.gallery{

    display:grid;

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

    gap:14px;

    margin:24px 0;

}

.gallery img{

    width:100%;

    border-radius:14px;

}


/*=========================================================
    EMBED
=========================================================*/

.ss-page-body iframe{

    width:100%;

    min-height:420px;

    border:0;

    border-radius:16px;

}


/*=========================================================
    VIDEO
=========================================================*/

.ss-page-body video{

    width:100%;

    border-radius:16px;

}


/*=========================================================
    AUDIO
=========================================================*/

.ss-page-body audio{

    width:100%;

    margin:20px 0;

}


/*=========================================================
    FILE DOWNLOAD
=========================================================*/

.ss-page-body .wp-block-file{

    margin:20px 0;

}

.ss-page-body .wp-block-file a{

    display:inline-flex;

    align-items:center;

    gap:8px;

}


/*=========================================================
    COMMENTS
=========================================================*/

.comments-area{

    margin-top:30px;

    padding:22px;

    border-radius:20px;

    border:1px solid rgba(255,255,255,.05);

    background:rgba(255,255,255,.02);

}

.comments-title{

    margin-bottom:18px;

    font-size:12px;

    font-weight:500;

    color:#FFFFFF;

}

.comment-list{

    margin:0;

    padding:0;

    list-style:none;

}

.comment{

    margin-bottom:18px;

    padding-bottom:18px;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.comment-author{

    font-size:10px;

    font-weight:500;

    color:#FFFFFF;

}

.comment-meta{

    margin-top:4px;

    font-size:9px;

    color:#8EA3BD;

}

.comment-content{

    margin-top:12px;

}

.comment-content p{

    margin-bottom:12px;

}


/*=========================================================
    COMMENT FORM
=========================================================*/

.comment-form{

    display:grid;

    gap:14px;

    margin-top:24px;

}

.comment-form label{

    display:block;

    margin-bottom:8px;

    font-size:10px;

    color:#A5B7CC;

}

.comment-form input,

.comment-form textarea{

    width:100%;

    padding:12px 14px;

    border:1px solid rgba(255,255,255,.06);

    border-radius:12px;

    background:#1A2234;

    color:#FFFFFF;

    font-size:10px;

    font-weight:400;

}

.comment-form textarea{

    min-height:140px;

    resize:vertical;

}

.comment-form input:focus,

.comment-form textarea:focus{

    outline:none;

    border-color:#4A91FF;

}

.comment-form .submit{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:160px;

    height:38px;

    padding:0 20px;

    border:0;

    border-radius:12px;

    background:

    linear-gradient(

        180deg,

        #4A91FF,

        #2F70E0

    );

    color:#FFFFFF;

    font-size:10px;

    font-weight:500;

    cursor:pointer;

}
/*=========================================================
    RESPONSIVE
    Part 5
=========================================================*/


/*=========================================================
    LARGE DESKTOP
=========================================================*/

@media (min-width:1200px){

.ss-page-layout{

    grid-template-columns:minmax(0,1fr) 300px;

    align-items:start;

    gap:24px;

}

}


/*=========================================================
    DESKTOP
=========================================================*/

@media (min-width:992px) and (max-width:1199px){

.ss-page-layout{

    grid-template-columns:minmax(0,1fr) 280px;

    gap:20px;

}

}


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

@media (max-width:991px){

.ss-page-layout{

    grid-template-columns:1fr;

}

.ss-page-sidebar{

    position:static;

    order:2;

}

.ss-page-main{

    order:1;

}

}


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

@media (max-width:768px){

.ss-page-hero{

    padding:22px 0 14px;

}

.ss-page-header{

    gap:14px;

}

.ss-page-meta{

    gap:10px;

}

.ss-meta-item{

    flex:1;

    min-width:140px;

}

.ss-article{

    padding:16px;

}

.ss-page-cover{

    margin:-16px -16px 16px;

}

.ss-page-card{

    padding:16px;

}

}


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

@media (max-width:576px){

.ss-page-heading h1{

    font-size:13px;

}

.ss-page-heading p{

    font-size:12px;

}

.ss-breadcrumb{

    gap:6px;

    font-size:9px;

}

.ss-meta-item{

    width:100%;

    min-width:100%;

    justify-content:flex-start;

}

.ss-article{

    padding:14px;

    border-radius:16px;

}

.ss-page-cover{

    margin:-14px -14px 14px;

    border-radius:16px 16px 0 0;

}

.ss-page-card{

    padding:14px;

    border-radius:16px;

}

.ss-page-btn{

    width:100%;

}

.gallery{

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

}

}


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

@media (max-width:420px){

.ss-page-content{

    padding-bottom:40px;

}

.ss-page-meta{

    flex-direction:column;

}

.ss-meta-item{

    min-height:36px;

}

.ss-page-body{

    font-size:10px;

}

.ss-page-body h1,

.ss-page-body h2{

    font-size:12px;

}

.ss-page-body h3{

    font-size:11px;

}

.ss-page-body table{

    font-size:9px;

}

.ss-page-body th,

.ss-page-body td{

    padding:10px;

}

}


/*=========================================================
    EXTRA SMALL
=========================================================*/

@media (max-width:360px){

.ss-page-body{

    font-size:10px;

}

.ss-page-card{

    padding:12px;

}

.ss-page-btn{

    height:36px;

}

}


/*=========================================================
    WORDPRESS
=========================================================*/

.ss-page-body>.wp-block-group,

.ss-page-body>.wp-block-columns,

.ss-page-body>.wp-block-cover,

.ss-page-body>.wp-block-media-text{

    margin:24px 0;

}

.ss-page-body .wp-block-image{

    margin:24px 0;

}

.ss-page-body .wp-caption{

    max-width:100%;

}

.ss-page-body .wp-caption img{

    margin-bottom:8px;

}

.ss-page-body .wp-caption-text{

    text-align:center;

    font-size:9px;

    color:#8FA3BE;

}

.ss-page-body .wp-block-table{

    overflow-x:auto;

}

.ss-page-body table{

    min-width:600px;

}

.ss-page-body .wp-block-table table{

    min-width:600px;

}

.ss-page-body .wp-block-embed{

    margin:24px 0;

}

.ss-page-body .wp-block-video{

    margin:24px 0;

}


/*=========================================================
    UTILITIES
=========================================================*/

.ss-page-body::after{

    content:"";

    display:block;

    clear:both;

}

.ss-page-body *{

    max-width:100%;

    word-wrap:break-word;

}

.ss-page-body pre{

    overflow-x:auto;

}

.ss-page-body iframe{

    max-width:100%;

}


/*=========================================================
    PRINT
=========================================================*/

@media print{

.ss-page-sidebar,

.ss-header,

.ss-footer,

.comments-area{

    display:none;

}

.ss-page-layout{

    display:block;

}

.ss-page-body{

    color:#000;

}

}