/* =====================================================
   SARZAMIN DANAYI FOOTER V4
   SECTION ONE
   CONNECTED TO ROOT SYSTEM
===================================================== */


/* =====================================================
   FOOTER ROOT
===================================================== */

.site-footer {

    width:100%;
    direction:rtl;
    position:relative;

    font-family:var(--font-family);

    color:var(--color-text);

    overflow:hidden;

}



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


.footer-container {

    width:100%;

    max-width:var(--content-max-width);

    margin-inline:auto;

    padding-inline:var(--content-padding-x);

}





/* =====================================================
   SECTION ONE
===================================================== */


.footer-section-one {

    position:relative;

    padding-block:var(--space-13);

    background:var(--color-background);

    z-index:var(--z-base);

}





.footer-main-grid {


    display:grid;

    grid-template-columns:30% 70%;

    gap:var(--space-6);

    align-items:stretch;


}







/* =====================================================
   BRAND AREA 30%
===================================================== */


.footer-brand-area {


    background:var(--color-surface);


    border-radius:var(--radius-2xl);


    padding:var(--space-9) var(--space-6);


    box-shadow:var(--shadow-md);


    display:flex;

    flex-direction:column;

    align-items:center;


    border:

    var(--border-width)

    solid

    var(--color-border);


}






/* =====================================================
   LOGO
===================================================== */


.footer-brand-logo {


    display:flex;

    align-items:center;

    gap:var(--space-3);


    color:var(--color-text);


    font-size:var(--font-size-2xl);


    font-weight:var(--font-weight-bold);


}



.footer-brand-logo img {


    width:70px;

    height:70px;

    object-fit:contain;


}







/* =====================================================
   SOCIAL ICONS
===================================================== */


.footer-social {


    display:flex;

    gap:var(--space-3);


    margin-top:var(--space-8);


}



.footer-social a {


    width:46px;

    height:46px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:var(--radius-round);


    background:

    var(--color-background-soft);


    color:

    var(--color-primary);


    border:

    var(--border-width)

    solid

    var(--color-border);


    transition:var(--transition);


}



.footer-social svg {
    width: 22px;
    height: 22px;
    display: block;
    color: currentColor;
    flex-shrink: 0;
}



.footer-social a:hover {


    background:

    var(--color-primary);


    color:

    var(--color-text-light);


    transform:translateY(-5px);


}

/* =====================================================
   PHONE
===================================================== */

.footer-phone {
    display: flex;
    align-items: center;
    margin-top:var(--space-9);
}

.footer-phone a {
    direction: ltr;
    unicode-bidi: plaintext;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-decoration: none;
    line-height: 1.8;
    transition: color var(--transition-fast);
	padding:var(--space-2);
    background: var(--color-surface);
    border-radius:var(--radius-md);
    border:var(--border-width) solid var(--color-border);
}

.footer-phone a:hover {
    color: var(--color-primary);
}




/* =====================================================
   LICENSE
===================================================== */


.footer-licenses {


    width:100%;


    display:flex;

    justify-content:center;


    gap:var(--space-3);


    margin-top:var(--space-9);


}



.footer-licenses img {


    width:75px;

    height:75px;


    object-fit:contain;


    padding:var(--space-2);


    background:

    var(--color-surface);


    border-radius:

    var(--radius-md);


    border:

    var(--border-width)

    solid

    var(--color-border);


    box-shadow:

    var(--shadow-sm);


    transition:

    transform var(--transition);


}



.footer-licenses img:hover {


    transform:translateY(-5px);


}









/* =====================================================
   LEARNING AREA 70%
===================================================== */


.footer-learning-area {


    position:relative;


    min-height:360px;


    border-radius:

    var(--radius-2xl);


    overflow:hidden;


}





/* BACKGROUND */


.footer-learning-bg {


    position:absolute;


    inset:0;


    background:


    linear-gradient(

        90deg,

        rgba(108,92,231,.85),

        rgba(45,197,220,.55)

    ),

    url('/assets/images/footer/footer-learning-bg.webp');


    background-size:cover;


    background-position:center;


}







/* SLIDER */


.footer-learning-slider {


    position:relative;


    min-height:360px;


    height:100%;


    display:flex;


    align-items:center;


    justify-content:center;


    padding:var(--space-10);


}





.footer-slider-track {


    width:100%;

    height:100%;


    position:relative;


}









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


.learning-card {


    position:absolute;


    top:50%;


    right:80px;


    width:440px;



    display:flex;


    align-items:center;


    gap:var(--space-6);



    background:

    var(--color-surface);


    padding:var(--space-8);



    border-radius:

    var(--radius-2xl);



    box-shadow:

    var(--shadow-lg);



    opacity:0;

    visibility:hidden;



    transform:

    translateY(-50%)

    translateX(40px);



    transition:

    opacity var(--transition),

    transform var(--transition);


}





.learning-card.active {


    opacity:1;

    visibility:visible;


    transform:

    translateY(-50%)

    translateX(0);


}








/* ICON */


.learning-card-icon {


    flex-shrink:0;


    width:80px;

    height:80px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:

    var(--radius-lg);



    background:

    var(--color-primary);


    color:

    var(--color-text-light);


}





.learning-card-icon svg {

    width: 40px;
    height: 40px;
    display: block;
    color: currentColor;
    flex-shrink: 0;

}








/* CONTENT */


.learning-card-content {


    text-align:right;


}



.learning-card-content h3 {


    margin-bottom:

    var(--space-3);


    font-size:

    var(--font-size-xl);


    color:

    var(--color-text);


}



.learning-card-content p {


    margin-bottom:

    var(--space-5);


    color:

    var(--color-text-secondary);


    line-height:

    var(--line-height-relaxed);


    font-size:

    var(--font-size-sm);


}




.learning-card-content a {


    display:inline-flex;


    align-items:center;


    justify-content:center;


    padding:

    10px 24px;


    border-radius:

    var(--radius-pill);


    background:

    var(--color-primary);


    color:

    var(--color-text-light);


    transition:

    var(--transition);


}



.learning-card-content a:hover {


    background:

    var(--color-primary-dark);


}








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


@media(max-width:1100px){


.footer-main-grid {

    grid-template-columns:1fr;

}



.learning-card {


    right:50%;


    transform:

    translate(50%,-50%)

    translateX(40px);


}



.learning-card.active {


    transform:

    translate(50%,-50%)

    translateX(0);


}


}








/* =====================================================
   900
===================================================== */


@media(max-width:900px){


.footer-section-one {


    padding-block:var(--space-10);


}



.footer-learning-slider {


    padding:var(--space-6);


}



.learning-card {


    width:85%;


}


}








/* =====================================================
   768
===================================================== */


@media(max-width:768px){


.footer-container {


    padding-inline:

    var(--space-5);


}



.learning-card {


    flex-direction:column;

    text-align:center;


}



.learning-card-content {


    text-align:center;


}


}








/* =====================================================
   480
===================================================== */


@media(max-width:480px){


.footer-section-one {


    padding-block:

    var(--space-8);


}



.footer-brand-area {


    padding:

    var(--space-6)

    var(--space-4);


}



.footer-brand-logo {


    font-size:

    var(--font-size-xl);


}



.footer-brand-logo img {


    width:55px;

    height:55px;


}



.learning-card {


    width:95%;


    padding:

    var(--space-5);


}



.learning-card-icon {


    width:65px;

    height:65px;


}


}








/* =====================================================
   360
===================================================== */


@media(max-width:360px){


.footer-container {


    padding-inline:

    var(--space-3);


}



.footer-social {


    gap:var(--space-2);


}



.footer-social a {


    width:40px;

    height:40px;


}



.footer-licenses img {


    width:60px;

    height:60px;


}



.learning-card {


    width:100%;


}


}
/* =====================================================
   SARZAMIN DANAYI FOOTER V4
   SECTION TWO + BOTTOM WAVE
   ROOT CONNECTED VERSION
===================================================== */


/* =====================================================
   SECTION TWO
===================================================== */


.footer-section-two{

    width:100%;

    position:relative;

    background:var(--color-surface);

    padding:
    var(--space-13)
    0
    var(--space-10);

    z-index:5;

}





.footer-columns{


    display:grid;

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

    gap:var(--space-6);


}






/* =====================================================
   COLUMN BOX
===================================================== */


.footer-column-box{


    background:
    var(--color-surface-soft);


    border:

    var(--border-width)

    solid

    var(--color-border-light);



    border-radius:

    var(--radius-xl);



    padding:

    var(--space-8);



    transition:

    transform var(--transition),

    box-shadow var(--transition),

    border-color var(--transition);



}




.footer-column-box:hover{


    transform:

    translateY(-6px);



    box-shadow:

    var(--shadow-md);



    border-color:

    rgba(108,92,231,.18);



}






/* =====================================================
   TITLE
===================================================== */


.footer-column-title{


    display:flex;


    align-items:center;


    gap:

    var(--space-3);


    margin-bottom:

    var(--space-6);



}




.footer-column-title span{


    width:48px;


    height:48px;



    display:flex;


    align-items:center;


    justify-content:center;



    flex-shrink:0;



    border-radius:

    var(--radius-md);



    background:

    var(--color-primary);



    color:

    var(--color-text-light);



    font-size:22px;



}


.footer-column-title svg {

    width: 30px;
    height: 30px;
    display: block;
    color: currentColor;
    flex-shrink: 0;

}

.footer-column-title h3{


    margin:0;


    color:

    var(--color-text);



    font-size:

    var(--font-size-xl);



    font-weight:

    var(--font-weight-bold);



}







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


.footer-column-box ul{


    padding:0;

    margin:0;

    list-style:none;


}




.footer-column-box li{


    margin-bottom:

    var(--space-3);



}




.footer-column-box a{


    display:flex;


    align-items:center;



    position:relative;



    color:

    var(--color-text-secondary);



    font-size:

    var(--font-size-sm);



    transition:

    color var(--transition),

    transform var(--transition);



}




.footer-column-box a::before{


    content:"";



    width:6px;


    height:6px;



    border-radius:

    var(--radius-round);



    background:

    var(--color-secondary);



    margin-left:

    var(--space-3);



    opacity:0;



    transition:

    opacity var(--transition);



}





.footer-column-box a:hover{


    color:

    var(--color-primary);



    transform:

    translateX(-8px);



}



.footer-column-box a:hover::before{


    opacity:1;


}







/* =====================================================
   MESSAGE BOX
===================================================== */


.footer-message{


    display:flex;


    flex-direction:column;



}




.footer-message p{


    color:

    var(--color-text-secondary);



    font-size:

    var(--font-size-md);



    line-height:

    var(--line-height-relaxed);



}







/* =====================================================
   BOTTOM WAVE
===================================================== */


.footer-bottom-wave{


    position:relative;


    width:100%;



    overflow:hidden;



    background:

    var(--color-primary);



    color:

    var(--color-text-light);



    padding-top:

    100px;



}







/* =====================================================
   BOTTOM WAVE FIXED ANIMATION
===================================================== */

.footer-wave-animation{

    position:absolute;

    top:-2px;

    right:0;

    width:100%;

    height:120px;

    overflow:hidden;

}


.footer-wave-animation svg{

    width:4000px;

    height:120px;

    display:block;

    animation:

    footerWaveMove 12s linear infinite;

}



.footer-wave-animation path,rect,circle{

    fill:var(--color-surface);

}



@keyframes footerWaveMove{


    from{

        transform:translateX(100%);

    }


    to{

        transform:translateX(-100%);

    }


}







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


.footer-bottom-container{


    width:min(
    calc(100% - 40px),
    var(--content-max-width)
    );



    margin-inline:auto;



    padding:

    var(--space-8)
    0;



    display:flex;



    justify-content:space-between;



    align-items:center;



    gap:

    var(--space-6);



    position:relative;


    z-index:

    var(--z-base);



}





.footer-bottom-container p{


    margin:0;



    font-size:

    var(--font-size-sm);



}




.footer-bottom-container strong{


    font-weight:

    var(--font-weight-extrabold);



}




.footer-love{


    display:flex;


    align-items:center;


    gap:

    var(--space-1);



    font-size:

    var(--font-size-sm);



}







/* =====================================================
   1100px
===================================================== */


@media(max-width:1100px){


.footer-columns{


    grid-template-columns:

    repeat(2,1fr);



}


}





/* =====================================================
   900px
===================================================== */


@media(max-width:900px){



.footer-column-box{


    padding:

    var(--space-6);



}




.footer-bottom-container{


    flex-direction:column;


    justify-content:center;



    text-align:center;



}



}







/* =====================================================
   768px
===================================================== */


@media(max-width:768px){



.footer-section-two{


    padding-top:

    var(--space-10);



}




.footer-columns{


    grid-template-columns:

    1fr;



}




.footer-column-box{


    border-radius:

    var(--radius-lg);



}




.footer-bottom-wave{


    padding-top: 5px;



}



.footer-wave-animation{


display:none;

}




}





/* =====================================================
   480px
===================================================== */


@media(max-width:480px){



.footer-column-title span{


    width:

    42px;


    height:

    42px;



    border-radius:

    var(--radius-sm);



}




.footer-column-title h3{


    font-size:

    var(--font-size-lg);



}




.footer-column-box a{


    font-size:

    var(--font-size-xs);



}




.footer-bottom-container{


    width:

    calc(100% - 24px);



}




.footer-bottom-container p,
.footer-love{


    font-size:

    var(--font-size-xs);



}




}







/* =====================================================
   360px
===================================================== */


@media(max-width:360px){



.footer-column-box{


    padding:

    var(--space-5);



}




.footer-column-title h3{


    font-size:

    var(--font-size-md);



}




.footer-message p{


    font-size:

    var(--font-size-sm);



}




.footer-bottom-container{


    padding-block:

    var(--space-6);



}



}