*{

margin:0;
padding:0;
box-sizing:border-box;

}


body{

font-family:Arial, Helvetica, sans-serif;

overflow-x:hidden;

}
/* =========================
   COMMON BREADCRUMB
========================= */

.breadcrumb{

    color:#667085;

    font-size:18px;

    font-weight:600;

    margin-bottom:20px;

}


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


.header{

height:72px;

width:100%;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 6%;

background: #EEF6FF;

position:fixed;

top:0;

left:0;

z-index:1000;

box-shadow:0 4px 16px rgba(2,11,45,.15);

}



.logo-area img{

width:136px;

height:60px;

object-fit:contain;

}





.navbar{

display:flex;

align-items:center;

gap:36px;

}



.navbar a{

color:#020B2D;

text-decoration:none;

font-size:16px;

transition:.3s;

}



.navbar a:hover{

color:#00C8FF;

}




/* DROPDOWN */


.dropdown{

position:relative;

}



.dropdown-menu{

display:none;

position:absolute;

top:100%;

left:0;

width:200px;

background:white;

padding:12px;

border-radius:8px;

box-shadow:0 8px 24px rgba(0,0,0,.2);

}



.dropdown-menu a{

display:block;

color:#020B2D;

padding:8px;

}



.dropdown-menu a:hover{

background:#0057D9;

color:#006BFF;

}


/* HAMBURGER (mobile menu toggle) */

.hamburger{

display:none;

flex-direction:column;

gap:5px;

cursor:pointer;

background:none;

border:none;

z-index:1100;

}

.hamburger span{

width:28px;

height:3px;

background:#020B2D;

border-radius:2px;

transition:.3s;

}

.hamburger.active span:nth-child(1){

transform:translateY(8px) rotate(45deg);

}

.hamburger.active span:nth-child(2){

opacity:0;

}

.hamburger.active span:nth-child(3){

transform:translateY(-8px) rotate(-45deg);

}


@media(max-width:900px){

.hamburger{

display:flex;

}

.navbar{

position:fixed;

top:72px;

left:0;

width:100%;

height:calc(100vh - 72px);

background:#EEF6FF;

flex-direction:column;

align-items:flex-start;

gap:0;

padding:20px 6%;

overflow-y:auto;

transform:translateX(-100%);

transition:transform .3s ease;

}

.navbar.active{

transform:translateX(0);

}

.navbar > a,
.navbar .dropdown{

width:100%;

padding:14px 0;

border-bottom:1px solid rgba(2,11,45,.08);

}

.dropdown:hover .dropdown-menu{

display:none;

}

.dropdown.active .dropdown-menu{

display:block;

}

.dropdown-menu{

position:static;

width:100%;

box-shadow:none;

padding:0 0 0 16px;

}

}



.dropdown:hover .dropdown-menu{

display:block;

}






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



.hero{

height:100vh;

width:100%;

position:relative;

overflow:hidden;

}





#heroMedia{

position:absolute;

width:100%;

height:100%;

left:0;

top:0;

overflow:hidden;

transition:all .8s ease;

}





.hero-media{


width:100%;

height:100%;

object-fit:cover;


animation:zoomEffect 8s ease forwards;


}





/* Slow cinematic zoom */


@keyframes zoomEffect{


from{

transform:scale(1);

}


to{

transform:scale(1.12);

}


}





/* Main transition */


#heroMedia.changing{


animation:changeEffect 1.2s ease;


}





@keyframes changeEffect{


0%{

opacity:0;

filter:blur(9.6px);

transform:scale(1.08);

}



50%{

opacity:.5;

}



100%{

opacity:1;

filter:blur(0);

transform:scale(1);

}



}





.overlay{


position:absolute;

inset:0;


background:

linear-gradient(

90deg,

rgba(2,11,45,.55),

rgba(2,11,45,.12)

);


}





/* HERO TEXT */


.hero-content{


position:absolute;


top:50%;


left:8%;


transform:translateY(-50%);


width:480px;


color:white;

text-shadow:0 2px 10px rgba(0,0,0,.55); /* keeps text readable now that the overlay is lighter */


z-index:5;


}




.hero-content .hero-h1-desktop{


font-size:44px;


line-height:1.2;


margin-bottom:16px;


}


.hero-h1-mobile{
    display:none; /* shown only on mobile, see media query below */
}



.hero-content p{


font-size:16px;


line-height:1.6;


margin-bottom:28px;


}





/* BUTTONS */


.buttons a{


display:inline-block;


padding:16px 32px;


background:linear-gradient(135deg,#0057D9,#00C8FF);


color:white;


border-radius:24px;


text-decoration:none;


margin-right:12px;


transition:.3s;


}



.buttons a:hover{


transform:translateY(-2.4px);


background:#00C8FF;


}



.contact{


background:transparent!important;


border:0.8px solid white;


}





/* ARROWS */


.arrow{


position:absolute;


top:50%;


transform:translateY(-50%);


width:44px;


height:44px;


border-radius:50%;


border:none;


background:white;


font-size:20px;


cursor:pointer;


z-index:20;


transition:.3s;


}



.arrow:hover{


transform:translateY(-50%) scale(1.1);


}



.left{

left:24px;

}



.right{

right:24px;

}







/* SOUND BUTTON */


.sound-button{


position:absolute;


right:32px;


bottom:32px;


width:44px;


height:44px;


border-radius:50%;


border:none;


background:white;


font-size:17.6px;


cursor:pointer;


z-index:20;


transition:.3s;


}



.sound-button:hover{


transform:scale(1.1);


}


/* ================================
   HERO - MOBILE FIX
   (text box was a fixed 480px wide
   and arrows sat mid-screen, so on
   phones the headline overflowed and
   collided with the arrow buttons)
================================ */

@media(max-width:768px){

.hero{
    height:100svh; /* avoids mobile browser-bar 100vh overlap into next section */
    background:#020B2D; /* fills the letterbox gaps left by object-fit:contain below */
}

#heroMedia{
    background:#020B2D;
}

.hero-media{
    object-fit:contain; /* show the full image instead of cropping the sides off */
}

.hero-content{
    width:88%;
    max-width:420px;
    left:6%;
    top:84px; /* sits right below the fixed header instead of mid-image */
    transform:none;
}

.hero-h1-desktop{
    display:none; /* swapped for the brand headline below */
}

.hero-h1-mobile{
    display:block;
    font-size:20px;
    line-height:1.3;
    margin-bottom:6px;
}

.hero-content p{
    display:none; /* hidden on mobile so the image/video isn't covered up */
}

.buttons a{
    padding:10px 18px;
    font-size:15px;
}

.arrow{
    top:auto;
    bottom:14px;
    transform:none;
    width:36px;
    height:36px;
    font-size:16px;
}

.arrow:hover{
    transform:scale(1.1);
}

.left{
    left:14px;
}

.right{
    right:14px;
}

.sound-button{
    right:14px;
    bottom:60px;
    width:36px;
    height:36px;
    font-size:14px;
}

.overlay{
    display:none; /* remove the darken/gradient overlay on mobile hero slider */
}

}


@media(max-width:400px){

.hero-content{
    width:90%;
    top:76px;
}

.hero-h1-mobile{
    font-size:20px;
}

}
/* ================================
   ARCHITECTURE SECTION
================================ */


.architecture-section{

    width:100%;

    padding:36px 8%;

    background:white;

    text-align:center;

}



.architecture-section h2{

    font-size:33.6px;

    color:#020B2D;

    font-weight:700;

    margin-bottom:12px;

}



.architecture-section p{

    font-size:13.6px;

    line-height:1.7;

    color:#444;

    max-width:880px;

    margin:auto;

}





@keyframes fadeUp{


from{


    opacity:0;

    transform:translateY(32px);


}



to{


    opacity:1;

    transform:translateY(0);


}


}
/* ===============================
   SLIDER PROGRESS INDICATOR
================================ */


.slider-progress{


width:100%;

display:flex;

justify-content:center;

align-items:center;

gap:8px;

padding:9.6px 0;

background:white;


}




.slider-progress span{


width:9.6px;

height:9.6px;

border-radius:50%;

background:#cfd8e3;

display:block;

transition:.4s ease;


}



.slider-progress span.active{


width:28px;

border-radius:16px;

background:#0057D9;


}

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


.services-section{

    padding:64px 8%;

    background:#ffffff;

}



.services-header{

    text-align:center;

    max-width:720px;

    margin:auto;

    margin-bottom:40px;

}



.services-header h2{

    font-size:33.6px;

    color:#020B2D;

    margin-bottom:16px;

}



.services-header p{

    font-size:14.4px;

    color:#555;

    line-height:1.7;

}




.services-grid{

    display:grid;

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

    gap:24px;

}



.service-card{


    background:white;

    padding:24px;

    border-radius:16px;

    box-shadow:0 8px 28px rgba(0,0,0,.08);

    transition:.4s ease;

    border:0.8px solid #eef3ff;


}




.service-card:hover{


    transform:translateY(-8px);

    box-shadow:0 16px 36px rgba(0,107,255,.18);


}




.service-image{


    height:144px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:20px;


}




.service-image img{


    max-width:128px;

    max-height:128px;

    object-fit:contain;


}




.service-card h3{


    font-size:19.2px;

    color:#020B2D;

    margin-bottom:12px;


}



.service-card p{


    color:#555;

    line-height:1.7;

    margin-bottom:20px;


}




.service-card a{


    color:#0057D9;

    text-decoration:none;

    font-weight:bold;


}





/* Responsive */


@media(max-width:800px){


.services-grid{

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

}


}



@media(max-width:480px){


.services-grid{

    grid-template-columns:1fr;

}
}

/* ===============================
   SMART SOLUTIONS SECTION
================================ */


.solutions-section{

padding:64px 8%;

background:white;

}



.solutions-header{

text-align:center;

max-width:720px;

margin:auto;

margin-bottom:40px;

}



.solutions-header h2{

font-size:33.6px;

color:#020B2D;

margin-bottom:16px;

}



.solutions-header p{

font-size:14.4px;

color:#555;

line-height:1.7;

}



.solutions-grid{

display:grid;

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

gap:24px;

}



.solution-card{


background:white;

padding:24px;

border-radius:16px;

border:0.8px solid #eef3ff;

box-shadow:0 8px 28px rgba(0,0,0,.08);

transition:.4s ease;


}



.solution-card:hover{

transform:translateY(-8px);

box-shadow:0 16px 36px rgba(0,107,255,.18);

}




.solution-image{

height:136px;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:20px;

}



.solution-image img{

max-width:120px;

max-height:120px;

object-fit:contain;

}



.solution-card h3{

font-size:19.2px;

color:#020B2D;

margin-bottom:12px;

}



.solution-card p{

color:#555;

line-height:1.7;

margin-bottom:16px;

}



.solution-card a{

color:#006BFF;

font-weight:bold;

text-decoration:none;

}





@media(max-width:800px){

.solutions-grid{

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

}

}



@media(max-width:480px){

.solutions-grid{

grid-template-columns:1fr;

}

}

/* ===============================
   OUR EXPERTISE SECTION
================================ */


.expertise-section{

padding:56px 8%;

background:white;

overflow:hidden;

}



.expertise-header{

text-align:center;

max-width:720px;

margin:auto;

margin-bottom:32px;

}



.expertise-header h2{

font-size:33.6px;

color:#020B2D;

margin-bottom:12px;

}



.expertise-header p{

font-size:14.4px;

color:#555;

line-height:1.7;

}





.expertise-slider{

overflow:hidden;

width:100%;

}



.expertise-track{

display:flex;

align-items:center;

gap:48px;

width:max-content;

animation:expertiseMove 25s linear infinite;

}



.expertise-slider:hover .expertise-track{

animation-play-state:paused;

}



.expertise-logo{

width:240px;

height:80px;

display:flex;

align-items:center;

justify-content:center;

}



.expertise-logo img{

max-width:200px;

max-height:80px;

object-fit:contain;

}





@keyframes expertiseMove{


from{

transform:translateX(0);

}


to{

transform:translateX(-50%);

}
}
/* ===============================
 INTERNATIONAL COLLABORATION
================================ */


.collaboration-section{

padding:64px 8%;

background:white;

}



.collaboration-header{

text-align:center;

max-width:720px;

margin:auto;

margin-bottom:40px;

}



.collaboration-header h2{

font-size:33.6px;

color:#020B2D;

margin-bottom:12px;

}



.collaboration-header p{

font-size:14.4px;

color:#555;

line-height:1.7;

}




.platform-grid{

display:grid;

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

gap:24px;

}





.platform-card{

background:white;

padding:28px 20px;

text-align:center;

border-radius:16px;

border:0.8px solid #eef3ff;

box-shadow:0 8px 24px rgba(0,0,0,.08);

transition:.4s ease;

}



.platform-card:hover{

transform:translateY(-8px);

box-shadow:0 16px 32px rgba(0,107,255,.18);

}



.platform-card img{

width:112px;

height:80px;

object-fit:contain;

margin-bottom:20px;

}



.platform-card h3{

font-size:19.2px;

color:#020B2D;

margin-bottom:12px;

}



.platform-card p{

color:#555;

line-height:1.6;

}



@media(max-width:800px){

.platform-grid{

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

}

}


@media(max-width:480px){

.platform-grid{

grid-template-columns:1fr;

}

}

/* =====================================
   WHY CHOOSE AN SOFTTECHS
===================================== */


.why-section{

    padding:64px 5%;

    background:#f8fbff;

}



.why-header{

    text-align:center;

    max-width:720px;

    margin:auto;

    margin-bottom:36px;

}



.why-header span{

   color:#00C8FF;

    font-size:11.2px;

    letter-spacing:4px;

    font-weight:bold;

}



.why-header h2{

    margin-top:12px;

    font-size:36px;

    color:#020B2D;

}



.why-header h2 strong{

    color:#0057D9;
}



.why-header p{

    margin-top:12px;

    font-size:14.4px;

    color:#555;

    line-height:1.6;

}





.why-grid{

    display:grid;

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

    gap:16px;

}





.why-card{


    background:white;

    padding:28px 17.6px;

    text-align:center;

    border-radius:16px;

    box-shadow:0 8px 24px rgba(0,0,0,.06);

    transition:.4s ease;

}





.why-card:hover{

    transform:translateY(-9.6px);

    box-shadow:0 16px 32px rgba(0,107,255,.15);

}





.why-icon{


    width:60px;

    height:60px;

    margin:auto;

    margin-bottom:20px;


    display:flex;

    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:#eaf3ff;


    font-size:28px;


}





.why-card h3{


    font-size:16px;

    color:#020B2D;

    margin-bottom:12px;


}




.why-card p{


    color:#555;

    font-size:12px;

    line-height:1.6;


}





.blue-line{


    width:28px;

    height:3.2px;

    background:#00C8FF;

    border-radius:8px;

    margin:20px auto 0;


}




@media(max-width:960px){


.why-grid{

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

}


}



@media(max-width:560px){


.why-grid{

grid-template-columns:1fr;

}
}
/* =====================================================
   CLIENT TESTIMONIALS SECTION
   AN SOFTTECHS
===================================================== */



.reviews-section{

    padding:56px 5%;

   background:#ffffff;

    overflow:hidden;

}



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


.reviews-header{

    text-align:center;

    max-width:720px;

    margin:auto;

    margin-bottom:44px;

}



.reviews-header span{

    color:#006BFF;

    font-size:11.2px;

    font-weight:700;

    letter-spacing:4px;

}



.reviews-header h2{

    font-size:38.4px;

    color:#020B2D;

    margin:12px 0;

    font-weight:700;

}



.reviews-header h2 strong{

    color:#006BFF;

}



.reviews-header p{

    color:#667085;

    font-size:14.4px;

    line-height:1.7;

}






/* ===========================
   CAROUSEL AREA
=========================== */


.reviews-carousel{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:28px;

}



.reviews-box{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;

    min-height:312px;

}







/* ===========================
   REVIEW CARDS
=========================== */


.review-card{


    width:264px;


    min-height:240px;


    background:white;


    padding:28px;


    border-radius:17.6px;


    box-shadow:
    0 12px 28px rgba(0,0,0,0.08);


    opacity:0.45;


    transform:scale(0.90);


    transition:all .5s ease;


}





/* CENTER ACTIVE CARD */


.review-card.active{


    width:344px;


    min-height:304px;


    opacity:1;


    transform:scale(1.05);


    border:1.6px solid #00C8FF;


    box-shadow:
    0 20px 44px rgba(0,107,255,.18);


}






.review-card h3{


    font-size:20.8px;


    color:#020B2D;


    margin-bottom:4.8px;


}



.review-card h4{


    font-size:12.8px;


    color:#7b8794;


    font-weight:400;


    margin-bottom:17.6px;


}




.review-stars{


    color:#FFB400;


    font-size:20px;


    letter-spacing:2.4px;


    margin-bottom:17.6px;


}





.review-card p{


    font-size:13.6px;


    color:#667085;


    line-height:1.8;


}








/* ===========================
   ARROW BUTTONS
=========================== */


.review-btn{


    width:48px;


    height:48px;


    border-radius:50%;


    border:none;


    background:white;


    color:#020B2D;


    font-size:24px;


    cursor:pointer;


    box-shadow:
    0 8px 24px rgba(0,0,0,.12);


    transition:.3s ease;


}




.review-btn:hover{


   background:#0057D9;

    color:white;


}








/* ===========================
   REMOVE DOTS
=========================== */


.review-dots{

    display:none;

}








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


.review-stats{


    margin-top:32px;


    background:white;


    border-radius:20px;


    padding:28px;


    display:grid;


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


    box-shadow:
    0 8px 24px rgba(0,0,0,.08);


}





.review-stats div{


    text-align:center;


    border-right:0.8px solid #eeeeee;


}





.review-stats div:last-child{


    border:none;


}





.review-stats h2{


   color:#00C8FF;


    font-size:36px;


    margin-bottom:6.4px;


}




.review-stats p{


    color:#667085;


    font-size:13.6px;


}








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


@media(max-width:880px){


.review-card{

    width:240px;

}



.review-card.active{

    width:288px;

}


}




@media(max-width:680px){


.reviews-carousel{

    flex-direction:column;

}



.review-card{

    display:none;

}



.review-card.active{


    display:block;

    width:90%;


}




.review-stats{


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


    gap:20px;


}



.review-stats div{


    border:none;


}


}






@media(max-width:400px){


.review-stats{


    grid-template-columns:1fr;


}



.reviews-header h2{


    font-size:27.2px;
}
}


/* =====================================================
   CTA SECTION
===================================================== */


.cta-section{


    margin:32px 5% 72px;


    padding:32px 56px;


    min-height:224px;


   background:#ffffff;


    border-radius:24px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    overflow:hidden;


}






/* CTA TEXT */


.cta-content{


    max-width:480px;


}



.cta-content h2{


    font-size:38.4px;


    color:#020B2D;


    line-height:1.2;


    margin:0;


}



.cta-content h2 span{


    color:#006BFF;


}



.cta-content p{


    font-size:16px;


    color:#667085;


    margin:20px 0;


    line-height:1.6;


}






/* CTA BUTTON */


.cta-button{


    display:inline-block;


  background:linear-gradient(135deg,#0057D9,#00C8FF);


    color:white;


    padding:12.8px 28px;


    border-radius:24px;


    text-decoration:none;


    font-size:14.4px;


    transition:.3s ease;


}



.cta-button:hover{


   background:#003A8C;


}







/* CTA IMAGE */


.cta-image{

overflow:hidden;

border-radius:16px;

background:transparent;

}





.cta-image img{


    width:448px;


    max-width:100%;


    display:block;


    transition:transform .4s ease;


}





.cta-image img:hover{


    transform:scale(1.08);


}







/* RESPONSIVE */


@media(max-width:720px){


    .cta-section{


        flex-direction:column;


        text-align:center;


        gap:32px;


    }



    .cta-image img{


        width:280px;


    }


}
/* =====================================================
   FOOTER
===================================================== */

.footer{

border-top:none;

}

.footer{



background: #EEF6FF;

color:#020B2D;


margin-top:0;


padding:56px 5% 20px;


}





.footer-container{


display:grid;


grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;


gap:35px;


}



.footer-logo{

    width:300px;

    height:100px;

    object-fit:contain;

    margin-bottom:16px;

}



.footer-column p{


color:#344563;


line-height:1.8;


font-size:16px;


}



.contact-column p{

overflow-wrap:anywhere;

word-break:break-word;

}



.contact-column p:first-of-type{

white-space:nowrap;

font-size:14px;

}



.footer-column h3{


font-size:16px;


margin-bottom:20px;


color:#020B2D;


}



.footer-column a{


display:block;


text-decoration:none;


color:#020B2D;

font-size:16px;

margin-bottom:12px;


transition:.3s;


}



.footer-column a:hover{


color:#00C8FF;


padding-left:4px;


}







/* SOCIAL ICONS */


.social-icons{


display:flex;


gap:16px;


margin-top:36px;


}



.social-icons a{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#006BFF;

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    font-size:22.4px;

}


.social-icons i{

    font-size:22px;

}



.social-icons a:hover{


background:#020B2D;


}







/* BOTTOM BAR */


.footer-bottom{

    max-width:960px;

    margin:auto;

    padding:16px 5%;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.footer-bottom p{


color:#b8c1d1;


}



.footer-bottom a{


color:#b8c1d1;


text-decoration:none;


margin:0 6.4px;


}




.footer-bottom a:hover{


color:#006BFF;


}








/* RESPONSIVE */


@media(max-width:720px){


.footer-container{

    max-width:960px;

    margin:auto;

    padding:48px 5%;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:48px;

    align-items:start;

}



.cta-section{
flex-direction:column;
text-align:center;
}
.cta-image img{
width:320px;
}

                        }

@media(max-width:480px){


.footer-container{


grid-template-columns:1fr;


}



.footer-bottom{


flex-direction:column;


gap:12px;


}



.cta-content h2{


font-size:27.2px;


}



}