/*=========================================================
  Technical Expertise & Technologies Section
=========================================================*/


/* Main Section */

.tech-expertise-section {

    background: #ffffff;
    padding: 100px 20px;
    overflow: hidden;

}


.tech-container {

    max-width: 1200px;
    margin: 0 auto;

}


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


.tech-header {

    text-align: center;
    max-width: 800px;
    margin: 0 auto;

}


.tech-label {

    display: inline-flex;
    align-items: center;
    padding: 8px 20px;

    background: #eef6ff;
    color: #0066ff;

    border-radius: 50px;

    font-size: 14px;
    font-weight: 600;

    letter-spacing: .5px;

    margin-bottom: 20px;

}


.tech-header h2 {

    font-size: 48px;
    line-height: 1.2;

    font-weight: 700;

    color: #111827;

    margin: 0 0 20px;

}


.tech-header p {

    font-size: 18px;

    line-height: 1.8;

    color: #64748b;

    margin: 0 auto;

}


/*=========================================================
  Technology Grid
=========================================================*/


.tech-grid {

    display: grid;

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

    gap: 30px;

    margin-top: 70px;

}


/*=========================================================
  Technology Card
=========================================================*/


.tech-card {

    position: relative;

    background: #ffffff;

    padding: 35px;

    border-radius: 24px;

    border: 1px solid #e5edf7;

    overflow: hidden;

    transition: all .4s ease;

    opacity: 0;

    transform: translateY(40px);

}



/* Animation Active State */

.tech-card.show {

    opacity: 1;

    transform: translateY(0);

}



/* Decorative Circle */


.tech-card::before {

    content: "";

    position: absolute;

    width: 170px;

    height: 170px;

    top: -90px;

    right: -90px;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #0066ff,
        transparent
    );

    opacity: .12;

    transition: .4s ease;

}



.tech-card:hover::before {

    transform: scale(1.4);

}



/* Hover */


.tech-card:hover {

    transform: translateY(-12px);

    border-color: #0066ff;

    box-shadow:

    0 25px 60px rgba(0,102,255,.12);

}



/*=========================================================
  Icon Area
=========================================================*/


.tech-icon {

    width: 65px;

    height: 65px;

    display:flex;

    align-items:center;

    justify-content:center;


    background:

    linear-gradient(
        135deg,
        #0066ff,
        #4da3ff
    );


    border-radius: 18px;


    margin-bottom: 25px;


    color:#ffffff;


    font-size:28px;


    transition:.4s ease;

}


.tech-card:hover .tech-icon {

    transform:

    rotate(8deg)

    scale(1.1);

}



/*=========================================================
  Card Content
=========================================================*/


.tech-card h3 {


    font-size:24px;


    line-height:1.3;


    color:#111827;


    margin:0 0 15px;


}



.tech-card p {


    font-size:16px;


    line-height:1.8;


    color:#64748b;


    margin-bottom:25px;


}



/*=========================================================
  Technology Tags
=========================================================*/


.tech-tags {


    display:flex;


    flex-wrap:wrap;


    gap:10px;


}



.tech-tags span {


    padding:7px 15px;


    background:#f1f5f9;


    color:#475569;


    border-radius:30px;


    font-size:13px;


    font-weight:500;


    transition:.3s ease;


}



.tech-tags span:hover {


    background:#0066ff;


    color:#ffffff;


    transform:translateY(-3px);


}



/*=========================================================
  Responsive Design
=========================================================*/


/* Large Tablet */

@media(max-width:1024px){


.tech-expertise-section {

    padding:80px 25px;

}



.tech-header h2 {

    font-size:40px;

}



.tech-grid {

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

}



.tech-card {

    padding:30px;

}


}



/* Tablet */

@media(max-width:768px){


.tech-expertise-section {

    padding:70px 20px;

}



.tech-header h2 {

    font-size:34px;

}



.tech-header p {

    font-size:16px;

}



.tech-grid {

    grid-template-columns:1fr;

    gap:25px;

}



.tech-card {

    padding:28px;

}



.tech-card h3 {

    font-size:22px;

}



}



/* Mobile */

@media(max-width:480px){


.tech-expertise-section {

    padding:60px 15px;

}



.tech-label {

    font-size:13px;

    padding:7px 16px;

}



.tech-header h2 {

    font-size:28px;

}



.tech-header p {

    font-size:15px;

    line-height:1.7;

}



.tech-grid {

    margin-top:45px;

}



.tech-card {

    border-radius:20px;

    padding:25px;

}



.tech-icon {

    width:58px;

    height:58px;

    font-size:24px;

}



.tech-card h3 {

    font-size:20px;

}



.tech-card p {

    font-size:15px;

}



.tech-tags span {

    font-size:12px;

    padding:6px 12px;

}


}



/*=========================================================
  Reduced Motion Support
=========================================================*/


@media(prefers-reduced-motion:reduce){


.tech-card,
.tech-icon,
.tech-tags span {

    transition:none;

}


}