/* =====================
   Planino Main Style
===================== */


/* Font */

@font-face {
    font-family: Lalezar;
    src: url("../../fonts/Lalezar.ttf");
}


@font-face {
    font-family: Vazir;
    src: url("../../fonts/Vazirmatn.ttf");
}



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



body {

    color:#222;

    font-family:Vazir, sans-serif;

    scroll-behavior:smooth;


    background:

    radial-gradient(
        circle at top right,
        #0066ff55,
        transparent 35%
    ),


    radial-gradient(
        circle at bottom left,
        #00c6ff55,
        transparent 35%
    ),


    linear-gradient(
        135deg,
        #ffffff,
        #eaf3ff
    );


    background-attachment:fixed;

}



h1,
h2,
h3 {

    font-family: Lalezar, sans-serif;

}




/* =====================
 Header
===================== */


.header {

    width: 100%;

    position: fixed;

    top: 0;

    z-index: 999;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px 8%;

    background: #dbeafe;

    backdrop-filter: blur(10px);

    border-radius: 0 0 30px 30px;

    margin: 0 20px;

    width: calc(100% - 40px);

    box-shadow: 0 5px 20px rgba(0,102,255,0.12);

}



.logo {

    font-family: Lalezar;

    font-size: 32px;

    color: #0066ff;

}



.menu {

    display: flex;

    gap: 25px;

}



.menu a {


    text-decoration: none;

    color: #222;

    font-size: 16px;

}



.menu a:hover {

    color:#0066ff;

}



#theme-btn {


    border:none;

    background:#0066ff;

    color:white;


    width:40px;

    height:40px;


    border-radius:50%;


    cursor:pointer;

}





/* =====================
 Hero
===================== */


.hero {

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:transparent;

}



.hero-content {

    position:relative;

    z-index:2;

    animation:fade 1.2s ease;

}



.logo-img {

    width:180px;

    margin-bottom:25px;

    filter:
    drop-shadow(0 15px 25px rgba(0,102,255,.25));

    animation:float 4s ease-in-out infinite;

}



.hero h1 {

    font-size:75px;

    color:#0066ff;

    text-shadow:

    0 10px 30px rgba(0,102,255,.25);

}



.hero h2 {

    font-size:40px;

}



.hero p {

    margin:25px 0;

    font-size:22px;

    color:#555;

}




.main-btn {

    display:inline-block;

    padding:14px 45px;

    background:

    linear-gradient(
        135deg,
        #0066ff,
        #00aaff
    );

    color:white;

    border-radius:40px;

    text-decoration:none;

    box-shadow:

    0 15px 30px rgba(0,102,255,.35);

    transition:.3s;

}


.main-btn:hover {

    transform:translateY(-5px);

    box-shadow:

    0 20px 40px rgba(0,102,255,.45);

}




/* =====================
 Fields
===================== */


.fields {


    padding:80px 8%;


}



.fields h2 {


    text-align:center;

    font-size:40px;

    margin-bottom:40px;

}



.slider {

    display:flex;

    gap:25px;

    overflow-x:auto;

    scrollbar-width:none;

    cursor:grab;

    direction:ltr;

}


.slider::-webkit-scrollbar{

    display:none;

}


.card {

    flex:0 0 260px;

    background:white;

    padding:25px;

    border-radius:25px;

    box-shadow:

    0 10px 30px

    rgba(0,0,0,0.08);


    text-align:center;

}

 

.card h3 {

    font-size:28px;

    color:#0066ff;

}



.card a {


    display:inline-block;


    margin-top:15px;


    padding:8px 25px;


    background:#0066ff;


    color:white;


    border-radius:20px;


    text-decoration:none;


}






/* =====================
 Plans
===================== */


.plans {

    padding:80px 8%;

    background:transparent;

}


.plan-container {


    display:flex;


    justify-content:center;

}



.plan-card {


    background:white;


    padding:30px;


    border-radius:25px;


    width:300px;


    text-align:center;


}



.plan-card a {


    display:block;


    margin-top:20px;


    background:#0066ff;


    color:white;


    padding:10px;


    border-radius:20px;


    text-decoration:none;


}






/* =====================
 Footer
===================== */


footer {


    padding:70px 8%;


    text-align:center;


    background:#0066ff;


    color:white;


}



footer h2,
footer h3 {

    margin-bottom:20px;

}





/* Animation */


@keyframes fade {


from {

opacity:0;

transform:translateY(30px);

}


to {

opacity:1;

transform:translateY(0);

}


}





/* Mobile */


@media(max-width:768px){


.header {

padding:15px 5%;

}



.menu {

gap:10px;

}



.menu a {

font-size:12px;

}



.hero h1 {

font-size:45px;

}



.fields {

padding:50px 5%;

}



}

/* =====================
   Video Pages
===================== */


.video-page {

    padding: 140px 8% 80px;

    min-height: 100vh;

    background: transparent;

}



.video-page > h1 {


    text-align:center;

    font-size:50px;

    color:#0066ff;

    margin-bottom:40px;


}



.video-box {


    max-width:900px;

    margin:auto;

    background:white;

    padding:20px;

    border-radius:25px;


    box-shadow:

    0 10px 35px

    rgba(0,0,0,0.1);


}



.video-box video {


    border-radius:20px;

}




.description {


    max-width:900px;

    margin:40px auto;


    background:white;


    padding:30px;


    border-radius:25px;


    box-shadow:

    0 10px 30px

    rgba(0,0,0,0.08);


}



.description h2 {


    color:#0066ff;

    margin-bottom:15px;


}





.attachments {


    max-width:900px;

    margin:auto;


    background:white;


    padding:30px;


    border-radius:25px;


    text-align:center;


}



.attachments h2 {


    color:#0066ff;

    margin-bottom:20px;


}



.attachments a {


    display:inline-block;


    margin:10px;


    padding:12px 30px;


    background:#0066ff;


    color:white;


    border-radius:25px;


    text-decoration:none;


}



.attachments a:hover {


    background:#004ecc;


}

/* =====================
   Plans Cards
===================== */


.plan-container {

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

}



.plan-card {


    width:300px;


    background:white;


    padding:35px 25px;


    border-radius:30px;


    text-align:center;


    box-shadow:

    0 15px 35px

    rgba(0,0,0,0.1);


    transition:.3s;


}



.plan-card:hover {


    transform:translateY(-10px);


}



.plan-card h3 {


    color:#0066ff;

    font-size:30px;


}



.plan-card ul {


    list-style:none;


    margin:25px 0;


}



.plan-card li {


    margin:12px 0;


}



.plan-card a {


    display:block;


    background:#0066ff;


    color:white;


    padding:12px;


    border-radius:25px;


    text-decoration:none;


}



.featured {

}

/* =====================
   Team Section
===================== */


.team {

    padding:80px 8%;

}



.team h2 {


    text-align:center;

    font-size:40px;

    margin-bottom:50px;


}




.team-box {


    display:flex;


    align-items:center;


    gap:40px;


    background:white;


    padding:30px;


    margin-bottom:30px;


    border-radius:30px;


    box-shadow:

    0 10px 30px

    rgba(0,0,0,.08);


}



.team-box.reverse {


    flex-direction:row-reverse;


}





.admin-image img {


    width:150px;


    height:150px;


    object-fit:cover;


    border-radius:50%;


    border:5px solid #0066ff;


}




.admin-text {


    flex:1;


}



.admin-text h3 {


    color:#0066ff;

    font-size:30px;


}



.admin-text p {


    margin-top:15px;


    line-height:2;


}




@media(max-width:768px){


    .team-box,

    .team-box.reverse {


        flex-direction:column;


        text-align:center;


    }


}

/* =====================
   Footer
===================== */


footer {


    background:

    linear-gradient(

    135deg,

    #0066ff,

    #004ecc

    );


    color:white;


    padding:70px 8% 30px;


}



.footer-content {

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:30px;

}



.contact-box,
.why-planino {

    width:100%;

}



footer h2 {


    font-size:35px;


    margin-bottom:20px;


}



footer p {


    line-height:2;


    font-size:17px;


}



footer a {


    color:white;


    text-decoration:none;


}



footer a:hover {


    text-decoration:underline;


}



.copyright {


    margin-top:50px;


    text-align:center;


    opacity:.8;


}



@media(max-width:768px){


    .footer-content {


        flex-direction:column;


        text-align:center;


    }


}

/* =====================
 Mobile Menu
===================== */


.menu-btn {

    display:none;

    background:#0066ff;

    color:white;

    border:none;

    border-radius:10px;

    padding:10px;

    font-size:22px;

}



@media(max-width:768px){


.menu-btn{

    display:block;

}



.menu{


    position:absolute;

    top:70px;

    right:5%;


    background:white;


    flex-direction:column;


    padding:20px;


    border-radius:20px;


    display:none;


}



.menu.active{


    display:flex;


}


}

.hidden {

    opacity:0;

    transform:translateY(40px);

    transition:1s;

}



.show {

    opacity:1;

    transform:translateY(0);

}

body.dark {


    background:#111;


    color:white;


}



body.dark .header {
    background: #1d1d1d;
}



body.dark .card,

body.dark .plan-card,

body.dark .team-box,

body.dark .description,

body.dark .attachments {


    background:#1d1d1d;


    color:white;


}



/* دسکتاپ */
body.dark .menu {

    background:#1d1d1d;

}

body.dark .menu a {

    color:white;

}

/* Rounded Header & Footer */

.header {
    border-radius: 0 0 30px 30px;
    margin: 0 20px;
    width: calc(100% - 40px);
}


footer {
    border-radius: 30px 30px 0 0;
    margin: 0 20px;
    width: calc(100% - 40px);
}

.fields {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
    display: block !important;
}

@keyframes float {

    0%,100% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-15px);

    }

}


#backTop {

    position:fixed;

    bottom:25px;

    right:25px;

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:#0066ff;

    color:white;

    font-size:25px;

    cursor:pointer;

    display:none;

    z-index:9999;

    box-shadow:
    0 10px 25px rgba(0,102,255,.35);

}


#backTop:hover {

    transform:translateY(-5px);

}

@media(max-width:768px){

    body.dark .menu {

        background:white;

    }


    body.dark .menu a {

        color:#222;

    }

}

.video-actions{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-top:20px;

}

.action-btn{

    background:none;

    border:none;

    cursor:pointer;

    font-size:28px;

    color:#666;

    display:flex;

    align-items:center;

    gap:8px;

    transition:0.3s;

}

.action-btn:hover{

    color:#007bff;

}

.action-btn.liked{

    color:red;

}

#likeCount{

    font-size:18px;

}

.social-icons{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin:30px auto;

}


.social-icons a{
    font-size:40px;
    text-decoration:none;
}


.fa-telegram{
    color:#0088cc;
}


.fa-instagram{
    color:#e1306c;
}

.resume-btn{

    display:inline-block;

    margin-top:20px;

    padding:10px 30px;

    background:#0066ff;

    color:white;

    border-radius:25px;

    text-decoration:none;

    transition:.3s;

}


.resume-btn:hover{

    background:#004ecc;

    transform:translateY(-3px);

}

.box{
    text-align:left;
}

body.dark .video-page{
    background: transparent;
}

body.dark .video-box{
    background:#1d1d1d;
    color:white;
}

body.dark .description{
    background:#1d1d1d;
    color:white;
}

body.dark .attachments{
    background:#1d1d1d;
    color:white;
}

body.dark .attachments a{
    background:#0066ff;
    color:white;
}

body.dark .video-page h1,
body.dark .video-page h2,
body.dark .video-page p{
    color:white;
}

.plan-icon {

    width:80px;
    height:80px;

    margin:0 auto 25px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    font-size:36px;

    color:white;

    transition:.3s;

}


/* پکیج اقتصادی */

.plan-icon.economic {

    background:

    linear-gradient(
        135deg,
        #22c55e,
        #15803d
    );

    box-shadow:
    0 10px 25px rgba(34,197,94,.35);

}


/* پکیج حرفه‌ای */

.plan-icon.pro {

    background:

    linear-gradient(
        135deg,
        #0066ff,
        #00b7ff
    );

    box-shadow:
    0 10px 25px rgba(0,102,255,.35);

}



.plan-card:hover .plan-icon {

    transform:
    translateY(-6px)
    rotate(5deg);

}

.plan-card {
    transition: .3s;
}


.plan-card:active,
.plan-card:focus-within {

    border: 2px solid #0066ff;

    box-shadow:
    0 15px 35px rgba(0,102,255,.25);

}

.plan-card.active {

    border:3px solid #0066ff;

    box-shadow:
    0 15px 40px rgba(0,102,255,.35);

    transform:scale(1.05);

}