*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: "Gotham", Arial, Helvetica, sans-serif;

}

section{
    overflow: hidden;
}

.s1{
width:1200px;
    max-width:95%;
    margin:40px auto;
    padding-top: 10vh;
    overflow: visible;
}

.s1-container{
    display:flex;
    gap:70px;
    align-items:flex-start;
}

.s1 .ab1{
    width: 300px;
    top:10px;
    transform: translate(200px);
    rotate: 180deg;
    z-index: -10;
}
.s1 .ab2{
    width: 160px;
    bottom:-20px;
    left:20px;
    z-index:-10;
    
}

.left{
    flex:1;
}

.breadcrumb{
    display:inline-block;
    background:linear-gradient(to right, rgb(79, 192, 207) , rgb(8, 235, 8) );
    color:#fff;
    padding:8px 14px;
    font-size:18px;
    line-height: 20px;
    margin-bottom:20px;
    font-weight: 400;
}


h1{
    color:#005d86;
    font-size:48px !important;
    margin-bottom:18px;
    font-weight: 800;
    line-height: 57px;

}

h2{
    color:#015c83;
    font-size:40px !important;
    line-height:48px;
    margin-bottom:28px;
    font-weight: 900;

}

p{
    font-size:18px;
    line-height:32px;
    font-weight: 400;
    color:rgb(0, 88, 135);
    margin-bottom:22px;
}

h3{
    color:#005d86;
    font-size:38px;
    margin-top:45px;
    margin-bottom:25px;
    font-weight: 800;

}

.features{
    list-style:none;
    padding:0;
}

.features li{
    position:relative;
    padding-left:60px;
    margin-bottom:20px;
    color: rgb(55, 65, 81);
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
}

/* default icon */
.features li::before{
    content:"";
    position:absolute;
    left:0;
    top: 50%; 
     transform: translateY(-50%);
    width:40px;
    aspect-ratio: 1/1;
    background-size:contain;
    background-repeat:no-repeat;
}

/* different image for each item */
.features li:nth-child(1)::before{
    background-image:url('https://tasc.orangestager.com/assets/s1-1.svg');
}

.features li:nth-child(2)::before{
    background-image:url('https://tasc.orangestager.com/assets/s1-2.svg');
}

.features li:nth-child(3)::before{
    background-image:url('https://tasc.orangestager.com/assets/s1-3.svg');
}

.features li:nth-child(4)::before{
    background-image:url('https://tasc.orangestager.com/assets/s1-4.svg');
}

.features li:nth-child(5)::before{
    background-image:url('https://tasc.orangestager.com/assets/s1-5.svg');
}

.right{
    width:420px;
    height: 100%;
    background:#fff;
    border-top:4px solid;
    border-image: linear-gradient(to right, rgb(79, 192, 207), rgb(8, 235, 8)) 1;
    border-bottom:4px solid ;
    border-image: linear-gradient(to right, rgb(79, 192, 207), rgb(8, 235, 8)) 1;
    padding:120px 20px;
    box-shadow:0 6px 20px rgba(0,0,0,.08);
}

form{
    display:flex;
    flex-direction:column;
    gap:14px;
}

form div input{
    box-shadow: inset;
}
form input {
    box-shadow:#333;
}

.row{
    display:flex;
    gap:12px;
}

input,
textarea{
    width:100%;
    padding:12px;
    border:1px solid #ddd;
    font-size:14px;
    outline:none;
}

textarea{
    resize:vertical;
    min-height:90px;
}

input:focus,
textarea:focus{
    border-color:#00bcd4;
}

button{
    width:120px;
    background:linear-gradient(to right,#00c6ff,#2ecc71);
    color:#fff;
    border:none;
    padding:13px;
    border-radius:25px;
    cursor:pointer;
    font-size:16px;
    transition:.3s;
}

button:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}





/* seciton 2  */

/* SECTION 2 */
.s2 {
    background-color: #e8f8fa;
    padding:60px 20px;
    text-align:center;
    overflow: hidden;
}

/* container */
.s2-container{
    margin:auto;
}

/* text */
.s2-text{
    max-width:700px;
    margin:20px auto;
    font-weight: 400;
    line-height: 27px;
}

/* button */
.linkbtn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    transition:  0.3s ease;
    color:#005d86;
    font-weight:800;
    font-size:20px;
}

/* image */
.linkbtn img{
    width:20px;

    rotate:90deg;
}

/* hover effect */
.linkbtn:hover{
    gap:20px /* slide right */
}

/* IMAGE GRID */
.s2img {
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:40px;
    flex-wrap:wrap;
}

/* CARD */
.s2-container .card{
    position:relative;
    width:29vw;
    aspect-ratio: 1/1;
    overflow:hidden;
}

/* IMAGE */
.s2-container .card img{
    width:100%;
    height:100%;
    object-fit:cover;
}



/*section 3*/

.s3{
    background-color: #005c85;
    padding:60px;
    overflow: hidden;
}

.s3 h2{
    color : white;
}

.compcard{
    width: 16vw;
    aspect-ratio: 1/1;
    background-color: white;
    overflow: hidden;
    border-radius: 2vw;
    position: relative;
    display: flex;
    gap:30px;
    display: grid;
    place-content: center;
    place-items: center;
}
.compcard h4{
    color: #005c85;
    font-size: 22px;
    font-weight: 500;
    z-index: 20;
    position:absolute;
    bottom:10%;
    left:50%;
    transform: translateX(-50%);
}

.compcard img{
    object-fit:contain;
    z-index: 20;
}

.slider{
    position: absolute;
    top:-100%;
    width:100%;
    aspect-ratio: 1/1;
    background:linear-gradient(to right , rgb(15, 191, 197) , rgb(111, 211, 18));
    transition: top 0.4s ease;
    
}


.s3card1 img{
   height: 80%;
}
.s3card2 img{
    height: 40%;
}
.s3card3 img{
    height: 40%;
}
.s3card4 img{
    height: 80%;
}
.s3card5 img{
    height: 80%;
}

.compcard:hover .slider {
    top: 0;
}


/* section 4 */

.s4{
    padding:40px;
    padding-left:8vw;
    padding-right:8vw;
    background-image: url(https://tasc.orangestager.com/assets/s4-bg.png);
    background-size: cover;       
    background-position: center;   
    background-repeat: no-repeat;  
    overflow: hidden;

}
.s4 p{
  color :rgb(0, 88, 135);
    font-weight: 400;
    font-size:16px;
    line-height: 27px;
}


.s4cardcont{
    justify-content: space-around;
    margin-top: 40px;
    margin-bottom: 40px;
}

.s4cardcont div img{
height:80px;
width: 80px;
}
.s4cardcont div{
 width : 17vw ;
}

.s4cardcont div p{
    text-align: center;
    color :rgb(0, 92, 133);
    font-weight: 600;
    font-size:19px;
    line-height: 24px;
}


/* section 5 */


.s5{
    padding:10px 50px;
    overflow:hidden;
    padding-left: 8vw;
    padding-right: 8vw;
}

.s5 img{
    margin:auto;
    width: 65vw;
}


.s5cardcont{
    justify-content: space-around;
    margin-top: 40px 0;
    align-items: start;
}

.s5cardcont div img{
width: 200px;
margin-bottom: 20px;
}



/* section 6 */

.s6{
    background:linear-gradient(to right, rgb(79, 192, 207) , rgb(8, 235, 8) );
    padding:60px;
    overflow: hidden;
}

.s6 h2{
    color:white
}
.s6{
    color:white;
    position: relative;
}

.s6 li{
margin-top: 14px;
font-size: 18px;
font-weight: 600;
line-height: 24px;
}
.s6 img{
    position: absolute;
    bottom: 0;
    right: 20px;
    width:  30vw;
}


/* SECTION 7 */

.s7 {
    background:#edf6fb;
    padding:60px 20px;
    overflow: hidden;
}

.s7-desc {
    max-width:900px;
}

.s7-sub {
    margin-top:10px;
    font-weight:600;
}

/* GRID */
.s7-grid {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:25px;
    margin:40px 10px;
    width:100%;

}

/* CARD */
.s7-card {
    background:#fff;
    padding:25px;
    border-radius:12px;
    box-shadow:0 4px 12px rgba(0,0,0,0.06);
    position:relative;
    transition:0.3s;
}

.readmorebtn{
    font-size:18px;
    font-weight: 700;
}

.s7-card:hover {
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(0,0,0,0.1);
}


.s7-card h4 {
    color:#005d86;
    font-size:19px;
    margin-bottom:10px;
    font-weight: 700;
}

.s7-card p {
    font-size:16px;
    line-height:28px;
    font-weight: 300;
    color: rgb(0, 88, 135);
}

.s7-card .logo{
    position: absolute;
    top: 12px;
    right: 12px;
    height: 15px;
}

.extra-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

/* when active */
.s7-card.active .extra-content {
  max-height: 200px; /* adjust if needed */
}


/* BUTTON */
.s7-btn {
    margin-top:40px;
    font-weight:700;
    color:#005d86;
    font-size:18px;
}


/* SECTION 8 */

.s8 {
    background:#005c85;
    padding:70px 60px;
    overflow: hidden;
}


/* ROW */
.s8-row {
    margin-top:40px;
    width: 100%;
    gap:40px
}


/* IMAGE */


/* TEXT */
.s8 h3 {
    color:#fff;
    font-size:18px;
    font-weight: 600;
}

.s8 p {
    color:#f5fdff;
    font-size:16px;
    padding: 0;
    margin: 0 0 15px; /* gap kam */
    line-height: 1.6; /* line ke beech ka gap */

}

.s8-row .imgcont{
    height: 60vh;
}




/* SECTION 9 */

.s9 {
    background:#ffff;
    padding:100px 20px;
    overflow: hidden;
}

.s9-desc {
    max-width:1200px;
    margin-bottom:40px;
}

/* ROW */
.s9-row {
    margin-top:40px;
    width: 80vw;
}
.s9-row div h4{
    font-weight: 800;
}

/* LIST */
.s9-list  {
    margin-top:18px;
    padding-left:20px;

}

.s9-list li {
    margin-bottom:12px;
    font-size:18px;
    color:rgb(0, 92, 133);
}

/* IMAGE */
.s9-img {
    width:80%;
    max-width:320px;
}

/* HEADINGS */
.s9 h4 {
    color:#005d86;
    font-size:20px;
    margin-bottom:10px;
}



/* SECTION 10 */
.s10 {
    background: #ecf5fa;
    padding: 80px;
    overflow: hidden;
}

.s10-container .textcont {
    max-width: 700px;
    margin: auto;
    text-align: center;
}



/* DESCRIPTION */
.s10-desc {
    max-width: 700px;
    margin: 20px auto;
}

.s10-sub {
    margin-top: 10px;
}

/* ROW */
.s10-row {
    display: flex;
    align-items: center;
    justify-content: space-beteen;
    gap: 70px;
    margin-top: 40px;
    text-align: left;
}


.s10-list li {
    position: relative;
    padding-left: 10px;
    margin-bottom: 15px;
    font-size: 18px;
    color: rgb(0, 92, 133);
}


/* IMAGE */
.s10-image {
    flex: 1;
    display: flex;
    justify-content: center;

}

.s10-image img {
    width: 45vw;
}


/*divider*/
.divider{
        background:linear-gradient(to right, #05c1f1 , #43da37 );
        padding:50px;
        font-size: 18px;
}

/*section 11*/


.s11{
    padding: 80px 290px;
      background:#f4f7f9;
}

.s11 p{
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
}


.s11imgcont{
    background-color: white;
    padding : 16px;
    border-radius: 10px;
    overflow:hidden;
    width: 56vw;
}
.s11imgcont img{
    border-radius:20px;
    object-fit: contain;
    width:100%
}

/* SECTION 12 */

.s12 {
    padding:60px 220px;
}

.s12-heading {
    max-width:700px;
    font-size:18px;
    color:#2c6c85;
    margin-bottom:30px;
}

/* FORM */
.s12-form {
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* ROW */
.row {
    display:flex;
    gap:20px;
}

/* INPUTS */
.s12-form input,
.s12-form textarea {
    width:100%;
    padding:14px;
    border:1px solid #dcdcdc;
    font-size:14px;
    border-radius:6px;
    outline:none;
    transition:0.2s;
}

.s12-form input:focus,
.s12-form textarea:focus {
    border-color:#00bcd4;
}

/* BUTTON */
.btn-primary {
    width:140px;
    background:linear-gradient(to right,#00c6ff,#2ecc71);
    color:#fff;
    border:none;
    padding:12px;
    border-radius:25px;
    cursor:pointer;
    font-size:16px;
    transition:0.3s;
}

.btn-primary:hover {
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}


/* SECTION 13 */

.s13 {
    padding:60px 220px;
}

/* FAQ CONTAINER */
.faq {
    margin-top:40px;
}

/* ITEM */
.faq-item {
    border-bottom:1px solid #f8f8f8;
    margin-bottom:30px;
}

/* QUESTION */
.faq-question {
    display:flex;
    align-items:center;
    gap:15px;
    background:#f8f9fb;
    padding:18px;
    cursor:pointer;
    transition:0.3s;
}


.faq-question span {
    font-weight:bold;
    color:#005d86;
}

.faq-question p {
    margin:0;
    font-weight:600;
    color:#005d86;
}

/* ANSWER */
.faq-answer {
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease;
    background:#f3f8fc;
    padding:0 18px;
} 
.faq-answer p{
    color: rgb(0, 92, 133);
    font-size : 16px;
    line-height: 28px;
    font-weight: 300px;
}

.faq-answer ul{
    margin-top:10px;
    padding-left:20px;
}

.faq-answer ul li{
    margin-bottom:6px;
    line-height:1.5;
    color: #698f9d;
}

/* ACTIVE STATE */
.faq-item.active .faq-answer {
    max-height:200px;
    padding:18px;
    border:1px solid #b6e3c1;

}


@media (max-width:1024px){

.s1-container{
    flex-direction:column;
    gap:40px;
}

/* reduce big paddings */
.s11{
    padding:60px 80px;
}

.s12{
    padding:50px 80px;
}

.s13{
    padding:50px 80px;
}

.s5{
    padding-left:10vw;
    padding-right:10vw;
}

/* grids */
.s7-grid{
    grid-template-columns:repeat(2,1fr);
}

/* images */
.s6 img{
    width:50vw;
    opacity:0.3;
}

.s8{
        padding:40px 60px;
        overflow: hidden;
}

}



/*Tablets*/
@media (max-width:768px){

h1{ font-size:32px; }
h2{ font-size:24px; }
h3{ font-size:26px; }

.s1-container{
    margin:20px auto;
}
.right{
    width: 95vw;
}

.s2img{
    gap:15px;
}

.card{
    width:45%;
    height:220px;
}

/* REMOVE huge paddings */
.s11,
.s12,
.s13{
    padding:40px 20px;
}

/* section 4 fix */
.s4{
    padding:40px 20px;
}

/* section 5 fix */
.s5{
    padding:40px 20px;
}
.s5 img{
    width: 90vw;
}

/* section 6 image */
.s6 img{
    display:none;
}

/* cards stack */
.s7-grid{
    grid-template-columns:1fr;
}

/* section 8 */

.s8{
        padding:30px 40px;
}

.s8-row{
    flex-direction:column;
}

.s8b2{
    flex-direction:column-reverse;
}
/* section 9 */
.s9-row{
    flex-direction:column;
    width:100%;
    margin-bottom: 70px;
}
.s9b2{
    flex-direction: column-reverse;
}

/* section 10 */
.s10-row{
    flex-direction:column;
}

/* form rows */
.row{
    flex-direction:column;
}

/* FAQ */
.faq-question{
    flex-direction:row;
    align-items:flex-start;
}

.faq-question p{
    font-size:14px;
}

}

@media (max-width:480px){

h1{ font-size:26px; }
h2{ font-size:20px; }

.breadcrumb{
    font-size:14px;
    padding:6px 10px;
}

.features li::before{
    width: 30px;
}

.right{
    width: 95vw;
}
form input,
form textarea{
    font-size:14px;
    padding:10px;
}

button{
    width:100%;
    padding:12px;
}


.compcont{
    flex-direction: column;
}
.compcard{
    width: 45vw;
}

.card{
    width:100%;
    height:220px;
}

.s2img{
    flex-direction: column;
    align-items: center;
}
.s2img .card{
    width: 80vw;
    height: 80vw;
}

.s2-text{
    padding:0 10px;
}

.s3 h2{
    text-align: center;
}
.s4cardcont{
    flex-direction: column;
}
.s4cardcont div{
    width: 90vw;
}


 .s8-row .imgcont{
    height: 30vh;
}

.s10{
padding: 20px;
}
.s10-image img{
    width: 90vw;
}
.s10-row{
    padding:10px 20px
}
.s11imgcont{
    width: 80vw;
}

.s8{
        padding:10px 14px;
}

/* buttons full width */
button,
.btn-primary{
    width:100%;
}

/* tighter spacing */
p{
    font-size:14px;
}

/* FAQ spacing */
.faq-question{
    padding:14px;
}

.faq-answer{
    font-size:14px;
}

}




/* utility  */
.flex{
    display:flex 
}
.flex-col{
    display:flex;
    flex-direction: column;
}
.items-center{
    align-items: center;
}
.justify-center{
    justify-content: center;
}

.gap-small{
    gap:30px
}
.flex-wrap { flex-wrap:wrap; }
.flex-1 { flex:2; }
.justify-start {justify-content: start;}
.flex-between { justify-content:space-between; }
.flex-around { justify-content:space-around; }
.flex-end { justify-content:flex-end; }
.items-start { align-items:flex-start; }
.items-end { align-items:flex-end; }

.w-full { width:100%; }
.h-full { height:100%; }
.max-w { max-width:1200px; margin:auto; }
.overflow-hidden { overflow:hidden; }
.relative { position:relative; }
.absolute { position:absolute; }

.p-1 { padding:10px; }
.p-2 { padding:20px; }
.p-3 { padding:40px; }

.pt-1 { padding-top:10px; }
.pb-1 { padding-bottom:10px; }

.m-1 { margin:10px; }
.m-2 { margin:20px; }
.mt-2 { margin-top:20px; }
.mb-2 { margin-bottom:20px; }
.mx-auto { margin-left:auto; margin-right:auto; }

.text-center { text-align:center; }
.text-left { text-align:left; }
.text-right { text-align:right; }

.text-white { color:#fff; }
.text-primary { color:#005d86; }

.font-bold { font-weight:700; }
.font-light { font-weight:300; }

.shadow { box-shadow:0 6px 20px rgba(0,0,0,.08); }