/*
=====================================================
 RETRO-TECH SOLUTIONS
 WEBSITE SECTION STYLES
=====================================================
*/


/* ==========================
   ABOUT SECTION
========================== */


.about-section {

    padding:100px 0;

    background:#ffffff;

}



.section-header {

    max-width:800px;

    margin:auto;

}



.section-tag {


    display:inline-block;

    background:
    rgba(30,99,255,.1);

    color:#1E63FF;

    padding:8px 20px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:15px;

}

.section-tag1 {


    display:inline-block;

    background:
    #FFD54A;

    color:#082E8B;

    padding:8px 20px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:15px;

}

.section-tag2 {


    display:inline-block;

    background:
    rgba(19, 166, 253);

    color:#ffffff;

    padding:8px 20px;

    border-radius:30px;

    font-size:10px;

    font-weight:300;

    letter-spacing:1px;

    margin-bottom:15px;

}



.section-header h2 {


    color:#082E8B;

    font-size:42px;

    font-weight:700;

    margin-bottom:20px;

}



.section-header p {


    color:#666;

    font-size:17px;

}





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


.about-image-box {


    position:relative;

    padding:20px;

}



.about-image {


    border-radius:25px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.12);

}



.experience-badge {


    position:absolute;

    bottom:0;

    right:20px;


    background:

    linear-gradient(
        135deg,
        #1E63FF,
        #29A7FF
    );


    color:white;

    padding:25px;

    border-radius:20px;

    text-align:center;


    box-shadow:

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


}



.experience-badge h3 {


    font-size:40px;

    font-weight:800;

    margin:0;

}



.experience-badge p {


    color:white;

    font-size:14px;

    margin:0;

}





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


.about-title {


    color:#082E8B;

    font-size:32px;

    font-weight:700;

    margin-bottom:25px;

}





/* ==========================
   MISSION / VISION CARDS
========================== */


.about-card {


    background:white;

    padding:35px;

    border-radius:20px;


    box-shadow:

    0 15px 40px rgba(0,0,0,.07);


    height:100%;


    transition:.35s ease;


    border:1px solid #eef3ff;


}



.about-card:hover {


    transform:translateY(-10px);


    box-shadow:

    0 25px 50px rgba(30,99,255,.15);


}



.about-icon {


    width:65px;

    height:65px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:

    linear-gradient(
        135deg,
        #1E63FF,
        #29A7FF
    );


    color:white;


    font-size:28px;


    margin-bottom:20px;


}



.about-card h4 {


    color:#082E8B;

    font-weight:700;

}



.about-card p {


    color:#666;

}





/* ==========================
   CORE VALUES
========================== */


.core-values h3 {


    color:#082E8B;

    font-weight:700;

}



.value-card {


    text-align:center;


    padding:35px 25px;


    background:#F7FAFD;


    border-radius:20px;


    transition:.35s ease;


}



.value-card:hover {


    background:white;


    transform:translateY(-8px);


    box-shadow:

    0 20px 40px rgba(0,0,0,.08);


}



.value-card i {


    font-size:40px;


    color:#1E63FF;


    margin-bottom:20px;


}



.value-card h5 {


    color:#082E8B;

    font-size:20px;

    font-weight:700;

}





/* ==========================
   STATISTICS
========================== */


.statistics-row {


    background:

    linear-gradient(
        135deg,
        #082E8B,
        #1E63FF
    );


    border-radius:25px;


    padding:40px 20px;


}



.stat-box {


    text-align:center;

    color:white;


}



.stat-box h3 {


    font-size:42px;

    font-weight:800;

    color:white;


}



.stat-box p {


    color:white;

    margin:0;

}

/* ==========================
   WHY CHOOSE US SECTION
========================== */


.why-section {

    padding:100px 0;

    background:#F7FAFD;

}





.why-card {


    background:white;


    padding:40px 30px;


    border-radius:22px;


    height:100%;


    border:1px solid #edf2ff;


    transition:.35s ease;


    box-shadow:

    0 10px 30px rgba(0,0,0,.04);


}





.why-card:hover {


    transform:translateY(-12px);


    box-shadow:

    0 25px 50px rgba(30,99,255,.15);


}





.why-icon {


    width:75px;


    height:75px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:20px;


    background:

    linear-gradient(
        135deg,
        #1E63FF,
        #29A7FF
    );


    color:white;


    font-size:32px;


    margin-bottom:25px;


}





.why-card h4 {


    color:#082E8B;


    font-size:22px;


    font-weight:700;


    margin-bottom:15px;


}





.why-card p {


    color:#666;


    line-height:1.8;


}

/* ==========================
   SERVICES SECTION
========================== */


.services-section {

    padding:100px 0;

    background:#ffffff;

}





.service-card {


    background:#ffffff;


    padding:35px 25px;


    border-radius:22px;


    height:100%;


    border:1px solid #edf2ff;


    transition:.35s ease;


    position:relative;


    overflow:hidden;


    box-shadow:

    0 10px 30px rgba(0,0,0,.05);

}





.service-card:before {


    content:"";


    position:absolute;


    width:120px;


    height:120px;


    background:

    rgba(30,99,255,.08);


    border-radius:50%;


    top:-60px;


    right:-60px;


    transition:.35s ease;


}





.service-card:hover {


    transform:translateY(-12px);


    box-shadow:

    0 25px 50px rgba(30,99,255,.15);


}





.service-card:hover:before {


    width:180px;


    height:180px;


}





.service-icon {


    width:70px;


    height:70px;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:20px;


    background:

    linear-gradient(
        135deg,
        #1E63FF,
        #29A7FF
    );


    color:white;


    font-size:30px;


    margin-bottom:25px;


    position:relative;


    z-index:2;


}





.service-card h4 {


    color:#082E8B;


    font-size:21px;


    font-weight:700;


    margin-bottom:15px;


    position:relative;


    z-index:2;


}





.service-card p {


    color:#666;


    line-height:1.8;


    position:relative;


    z-index:2;


}

/* ==========================
   DEVELOPMENT PROCESS SECTION
========================== */


.process-section {

    padding:100px 0;

    background:#F7FAFD;

}




.process-timeline {

    position:relative;

    max-width:900px;

    margin:auto;

}



.process-timeline:before {


    content:"";

    position:absolute;

    width:4px;

    height:100%;

    background:

    linear-gradient(
        #1E63FF,
        #29A7FF
    );


    left:50%;

    transform:translateX(-50%);


}






.process-item {


    width:50%;


    padding:20px 40px;


    position:relative;


}



.process-item:nth-child(odd){

    left:0;

    text-align:right;

}



.process-item:nth-child(even){

    left:50%;

}





.process-number {


    position:absolute;


    top:35px;


    width:55px;


    height:55px;


    background:white;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    color:#1E63FF;


    font-weight:800;


    box-shadow:

    0 10px 25px rgba(0,0,0,.12);


    z-index:2;


}



.process-item:nth-child(odd)
.process-number {


    right:-27px;


}



.process-item:nth-child(even)
.process-number {


    left:-27px;


}





.process-content {


    background:white;


    padding:35px;


    border-radius:22px;


    box-shadow:


    0 10px 30px rgba(0,0,0,.06);


    transition:.35s ease;


}




.process-content:hover {


    transform:translateY(-10px);


    box-shadow:


    0 25px 50px rgba(30,99,255,.15);


}





.process-icon {


    width:65px;


    height:65px;


    border-radius:18px;


    background:


    linear-gradient(
        135deg,
        #1E63FF,
        #29A7FF
    );


    color:white;


    display:flex;


    justify-content:center;


    align-items:center;


    font-size:28px;


    margin-bottom:20px;


}



.process-item:nth-child(odd)
.process-icon {


    margin-left:auto;


}



.process-content h4 {


    color:#082E8B;


    font-weight:700;


    margin-bottom:15px;


}



.process-content p {


    color:#666;


    margin:0;


}

/* ==========================
   TECHNOLOGY SECTION
========================== */


.technology-section {


    padding:100px 0;

    background:white;


}




.technology-wrapper {


    max-width:1100px;

    margin:auto;


}




.technology-group h3 {


    text-align:center;


    color:#082E8B;


    font-size:26px;


    font-weight:700;


    margin-bottom:35px;


}



.technology-group h3 i {


    color:#1E63FF;

    margin-right:10px;


}





.technology-grid {


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(150px,1fr));


    gap:25px;


}





.technology-card {


    background:#F7FAFD;


    border-radius:20px;


    padding:30px 20px;


    display:flex;


    flex-direction:column;


    align-items:center;


    justify-content:center;


    gap:15px;


    transition:.35s ease;


    border:1px solid #edf2ff;


}





.technology-card:hover {


    background:white;


    transform:translateY(-10px);


    box-shadow:


    0 20px 40px rgba(30,99,255,.15);


}





.technology-card i {


    font-size:45px;


    color:#1E63FF;


}





.technology-card span {


    color:#082E8B;


    font-weight:600;


    font-size:16px;


}




@media(max-width:768px){


    .technology-grid{


        grid-template-columns:

        repeat(2,1fr);


    }



}



@media(max-width:480px){


    .technology-grid{


        grid-template-columns:1fr;
    }
}

/*==============================
 AFFILIATE PROGRAM
===============================*/

.affiliate-section{

    padding:100px 0;

    background:linear-gradient(135deg,#082E8B,#1E63FF);

    color:white;

}

.affiliate-section h2{

    font-size:46px;

    font-weight:800;

    margin:20px 0;

}

.highlight{

    color:#FFD54A;

}

.affiliate-intro{

    font-size:18px;

    line-height:1.9;

    margin-bottom:35px;

}

.affiliate-benefits{

    margin-top:30px;

}

.benefit-item{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

    font-size:17px;

}

.benefit-item i{

    color:#FFD54A;

    font-size:20px;

}

.affiliate-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.affiliate-buttons .btn{

    padding:14px 28px;

    border-radius:50px;

    font-weight:600;

}

.affiliate-card{

    background:#fff;

    color:#333;

    border-radius:25px;

    padding:40px;

    box-shadow:0 20px 50px rgba(0,0,0,.20);

}

.affiliate-card h3{

    color:#082E8B;

    font-weight:700;

    margin-bottom:35px;

    text-align:center;

}

.step{

    display:flex;

    align-items:flex-start;

    gap:20px;

    margin-bottom:30px;

}

.step-number{

    width:55px;

    height:55px;

    border-radius:50%;

    background:linear-gradient(135deg,#1E63FF,#29A7FF);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:22px;

    flex-shrink:0;

}

.step h5{

    color:#082E8B;

    margin-bottom:8px;

    font-weight:700;

}

.step p{

    margin:0;

    color:#666;

    line-height:1.7;

}

@media(max-width:991px){

    .affiliate-section{

        text-align:center;

    }

    .benefit-item{

        justify-content:center;

    }

    .affiliate-buttons{
        justify-content:center;
        margin-bottom:50px;
    }
}

@media(max-width:768px){
    .affiliate-section h2{
        font-size:34px;
    }

    .affiliate-card{
        padding:30px;
    }
}

/*==================================
 AFFILIATE COMMISSION CALCULATOR
===================================*/

.commission-calculator{

    margin-top:50px;

}

.commission-calculator h4{

    color:#FFD54A;

    font-weight:700;

    margin-bottom:15px;

}

.calculator-box{

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

    border-radius:20px;

    padding:30px;

    backdrop-filter:blur(10px);

}

.calculator-box label{

    color:white;

    font-weight:600;

    margin-bottom:10px;

}

.calculator-box input{

    height:58px;

    border:none;

    border-radius:12px;

    font-size:18px;

}

.commission-summary{

    margin-top:30px;

    background:white;

    border-radius:15px;

    padding:20px;

}

.summary-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 0;

    border-bottom:1px solid #EEEEEE;

}

.summary-row:last-child{

    border-bottom:none;

}

.summary-row span{

    color:#555;

    font-weight:600;

}

.summary-row strong{

    color:#1E63FF;

    font-size:20px;

    font-weight:700;

}

.total-row{

    margin-top:10px;

    padding-top:20px;

}

.total-row strong{

    color:#16A34A;

    font-size:22px;

}

@media(max-width:768px){

    .summary-row{

        flex-direction:column;

        gap:8px;

        text-align:center;

    }

}

/*==================================
 FEATURED PROMOTION CAROUSEL
===================================*/

.promo-carousel{

padding:80px 0;

background:#f8fbff;

}

.promo-carousel .carousel{

border-radius:25px;

overflow:hidden;

box-shadow:0 20px 60px rgba(0,0,0,.15);

}

.promo-carousel img{

height:450px;

object-fit:cover;

}

.carousel-caption{

background:rgba(0,0,0,.55);

padding:30px;

border-radius:15px;

bottom:40px;

}

.carousel-caption h2{

font-size:38px;

font-weight:700;

}

.carousel-caption p{

font-size:18px;

margin:15px 0;

}

.carousel-caption .btn{

padding:12px 30px;

border-radius:30px;

}

/*==================================
 CONTACT SECTION
===================================*/


.contact-section{

    padding:100px 0;

    background:#f8fbff;

}



.contact-section h2{

    font-size:45px;

    font-weight:800;

    color:#082E8B;

    margin:20px 0;

}



.contact-intro{

    color:#666;

    line-height:1.9;

    font-size:17px;

}




.contact-details{

    margin-top:35px;

}




.contact-item{

    display:flex;

    gap:20px;

    align-items:center;

    margin-bottom:25px;

}



.contact-item i{

    width:55px;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#082E8B;

    color:white;

    border-radius:50%;

    font-size:22px;

}



.contact-item h5{

    margin:0;

    color:#082E8B;

    font-weight:700;

}



.contact-item p{

    margin:5px 0 0;

    color:#666;

}





.contact-social{

    display:flex;

    gap:15px;

    margin-top:30px;

}



.contact-social a{

    width:45px;

    height:45px;

    border-radius:50%;

    background:#1E63FF;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    transition:.3s;

}



.contact-social a:hover{

    transform:translateY(-5px);

}





.contact-card{

    background:white;

    padding:45px;

    border-radius:25px;

    box-shadow:

    0 20px 50px rgba(0,0,0,.12);

}




.contact-card h3{

    color:#082E8B;

    font-size:30px;

    font-weight:700;

    margin-bottom:30px;

}




.contact-card .form-control{

    height:55px;

    border-radius:12px;

    border:1px solid #ddd;

    padding:15px;

}



.contact-card textarea{

    height:auto!important;

}



.contact-btn{

    background:#082E8B;

    color:white;

    padding:15px 40px;

    border-radius:40px;

    font-weight:600;

}



.contact-btn:hover{

    background:#1E63FF;

    color:white;

}





@media(max-width:768px){


.contact-section{

    text-align:center;

}


.contact-item{

    justify-content:center;

}


.contact-social{

    justify-content:center;

}


.contact-card{

    padding:30px;

}


.contact-section h2{

    font-size:34px;

}


}