/* @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;1,100;1,300;1,400;1,500&display=swap');

*{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-transform: capitalize;
    transition: all .2s linear;
    text-decoration: none;
}

html{
    font-size: 62.5%;
}

body{
    overflow-x: hidden;
}

.heading, .clients .section-header h2, .section-head h1, .testimonials .section-header h2, .section-head-1 h4{
    margin: 2rem;
    padding-top: 6rem;
    display: inline-block;
    font-size: 3.5rem;
    color: #002e5f;
    position: relative;
    letter-spacing: .2rem;
}

.heading::before, .heading::after, .clients .section-header h2::before, .clients .section-header h2::after, .section-head h1::before, .section-head h1::after, .testimonials .section-header h2::before, .testimonials .section-header h2::after, .section-head-1 h4::before, .section-head-1 h4::after{
    content: '';
    position: absolute;
    height: 2.5rem;
    width: 2.5rem;
    border-top: .4rem solid #002e5f;
    border-left: .4rem solid #002e5f;
}

.faq .heading::before, .faq .heading::after{
    border-top: .4rem solid #00bfff;
    border-left: .4rem solid #00bfff;
}

.heading::before, .clients .section-header h2::before, .section-head h1::before, .testimonials .section-header h2::before, .section-head-1 h4::before{
    top: 5.8rem;
    left: -2rem;
}

.heading::after, .clients .section-header h2::after, .section-head h1::after, .testimonials .section-header h2::after, .section-head-1 h4::after{
    bottom: -.5rem;
    right: -2rem;
    transform: rotate(180deg);
}

.row .btn{
    outline: none;
    border: none;
    border-radius: 5rem;
    background: white;
    border-style: groove;
    border-color: #002e5f;
    font-size: 1.5rem;
    cursor: pointer;
    height: 3.5rem;
    width: 15rem;
    box-shadow: 0 .2rem .5rem rgba(0,0,0,.3);
}

.communicate .btn{
    outline: none;
    border: none;
    border-radius: 5rem;
    background: white;
    border-style: groove;
    border-color: #002e5f;
    font-size: 1.5rem;
    cursor: pointer;
    height: 3.5rem;
    width: 15rem;
    box-shadow: 0 .2rem .5rem rgba(0,0,0,.3);
}

.row .btn:hover{
    letter-spacing: .1rem;
    opacity: .9;
    color: white;
    background: #002e5f;
}

.communicate .btn:hover{
    letter-spacing: .1rem;
    opacity: .9;
    color: white;
    background: #00bfff;
}

.header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 2rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    position: fixed;
}

.header .logo img{
    width: 130%;
    height: 3rem;
    top: 0;
    left: 0;
}

.header .navbar ul{
    list-style-type: none;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.header .navbar ul li{
    margin: 0 1.5rem;
}

.header .navbar ul li a{
    font-size: 2rem;
    color: #fff;
}

.header .navbar ul li a:hover{
    color: #00bfff;
    text-decoration: underline;
}

.header .logo i{
    padding: 0.5rem;
}

.header .fa-bars{
    color: #fff;
    cursor: pointer;
    font-size: 3rem;
    display: none;
}

.home{
    min-height: 100vh;
    width: 100vw;
    background-image: url(../images/img1.jpg);
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    text-align: center;
    padding: 0 1rem;
    position: relative;
    overflow: hidden !important;
}

.home h1{
    color: #fff;
    font-size: 5.5rem;
}

.home h2{
    color: #fff;
    font-size: 3rem;
}

.home .wave{
    position: absolute;
    bottom: -.5rem;
    left: 0;
    height: 11rem;
    width: 100%;
    background: url(../images/wave.png);
    background-size: 100rem 11rem;
    animation: waves 8s linear infinite;
    background-repeat: repeat-x;
}

.home .wave2{
    animation-direction: reverse;
    animation-duration: 6s;
    opacity: .3;
}

.home .wave3{
    animation-duration: 4s;
    opacity: .5;
}

@keyframes waves{
    0%{
        background-position-x: 0;
    }
    100%{
        background-position-x: 100rem;
    }
}

.about{
    min-height: 55vh;
    width: 100vw;
    top: -3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    line-height: 10rem;
}

.about .row{
    line-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 4rem;
}

.about .row .content{
    text-align: center;
}

.about .row .content h3{
    font-size: 3rem;
    color: black;
}

.about .row .content p{
    font-size: 2rem;
    color: #333;
    padding: 1rem 0;
}
.pt-5 .container .row .section-head p{
    font-size: 2rem;
    color: #333;
    padding: 1rem 0;
}
  .section-head{
    margin-bottom: 60px;
    text-align: center;
    margin-top: -8rem;
  }
  .section-head p{
    font-size: 20px;
    line-height: 28px;
    text-align: center;
  }
  .item{
    background:#fff;
    text-align: center;
    padding:30px 25px;
    box-shadow: 0 0 25px rgba(0,0,0,0.07);
    border-radius: 20px;
    margin-bottom: 30px;
    margin-top: -2rem;
    border:5px solid rgba(0,0,0,0.07);
    -webkit-transition:all 0.5s ease 0s;
    transition:all 0.5s ease 0s;
  }
  .item:hover{
    background:#c8d8e4;
    box-shadow: 0 8px 20px 0 rgba(0,0,0,0.2);
    -webkit-transition:all 0.5s ease 0s;
    transition:all 0.5s ease 0s;
  }
  .item:hover .item,
  .item:hover span.icon{
    background:#fff;
    border-radius: 10px;
    -webkit-transition:all 0.5s ease 0s;
    transition:all 0.5s ease 0s;
  }
  .item h6{
      font-size: 2rem;
  }
  .item:hover h6,
  .item:hover p{
    color:#2b6777;
    -webkit-transition:all 0.5s ease 0s;
    transition:all 0.5s ease 0s;
  }
  .item .icon{
    font-size:40px;
    margin-bottom: 25px;
    color:yellow;
    width:90px;
    height:90px;
    line-height: 96px;
    border-radius: 50px;
  }
  .item .feature_box_col_one{
    background:rgba(247,198,5,0.2);
    color:#52ab98;
  }
  .item .feature_box_col_two{
    background: rgba(255, 77, 28, 0.15);
    color:#52ab98;
  }
  .item .feature_box_col_three{
    background:rgba(0,147,38,0.15);
    color:#52ab98;
  }
  .item .feature_box_col_four{
    background:rgba(0,108,255,0.15);
    color:#52ab98;
  }
  .item .feature_box_col_five{
    background:rgba(146,39,255,0.15);
    color:#52ab98;
  }
  .item .feature_box_col_six{
    background:rgba(23,39,246,0.15);
    color:#52ab98;
  }
  .item p{
    font-size: 15px;
    line-height: 26px;
  }
  .item h6{
    margin-bottom: 20px;
    color:#2f2f2f;
  }   

.counters {
	background-image: url(../images/img2.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
	color: #fff;
	padding: 40px 20px;
}

.counters .container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 30px;
	text-align: center;
}

.counters i {
	color: #fff;
	margin-bottom: 5px;
}

.counters .counter {
	font-size: 45px;
	margin: 10px 0;
}

@media (max-width: 700px) {
	.counters .container {
		grid-template-columns: repeat(2, 1fr);
	}

	.counters .container > div:nth-of-type(1),
	.counters .container > div:nth-of-type(2) {
		border-bottom: 1px lightskyblue solid;
		padding-bottom: 20px;
	}
}

.section-head-1{
    margin-bottom: 60px;
    background-size: 200%;
    background-position: left;

  }
  .section-head-1 p{
    color:#333;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
  }
  .item{
    background:#fff;
    text-align: center;
    padding:30px 25px;
    box-shadow: 0 0 25px rgba(0,0,0,0.07);
    border-radius: 20px;
    margin-bottom: 30px;
    border: 1px solid rgba(0,0,0,0.07);
    -webkit-transition:all 0.7s ease 0s;
    transition:all 0.7 ease 0s;
    
  }
  .item:hover{
    background-image: linear-gradient(to bottom right, #66ffcc 0%, #ffccff 100%);
    background-position: right;
    transition: background-position 3s;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
    -webkit-transition:all 0.5s ease 0s;
    transition:all 0.7s ease 0s;
  }
  .item:hover .item,
  .item:hover span.icon{
    background:#fff;
    border-radius: 10px;
    -webkit-transition:all 0.5s ease 0s;
    transition:all 0.5s ease 0s;
  }
  .item:hover h6,
  .item:hover p{
    color:#2b6777;
    -webkit-transition:all 0.5s ease 0s;
    transition:all 0.5s ease 0s;
  }
  .item .icon{
    font-size:40px;
    margin-bottom: 25px;
    color:yellow;
    width:90px;
    height:90px;
    line-height: 96px;
    border-radius: 50px;
  }
  .item .feature_box_col_one{
    background:rgba(247,198,5,0.2);
    color:#52ab98;
  }
  .item .feature_box_col_two{
    background: rgba(255, 77, 28, 0.15);
    color:#52ab98;
    
  }
  .item .feature_box_col_three{
    background:rgba(0,147,38,0.15);
    color:#52ab98;
  }
  .item .feature_box_col_four{
    background:rgba(0,108,255,0.15);
    color:#52ab98;
    
  }
  .item .feature_box_col_five{
    background:rgba(146,39,255,0.15);
    color:#52ab98;
  }
  .item .feature_box_col_six{
    background:rgba(23,39,246,0.15);
    color:#52ab98;
  }
  .item p{
    font-size: 15px;
    font-family: "Varela Round",Arial,"Helvetica Neue",Helvetica,sans-serif;
    line-height: 26px;
  }
  .item h6{
    margin-bottom: 20px;
    font-family: "Varela Round",Arial,"Helvetica Neue",Helvetica,sans-serif;
    color:#2f2f2f;
  }

.communicate{
    text-align: center;
    align-items: center;
    background-image: url(../images/img3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
    min-height: 35vh;
    padding: 40px 20px;
}  

.communicate h3{
    margin-top: 3rem;
    font-size: 3rem;
}

.communicate p{
    font-size: 2rem;
}

.testimonials {
    position: relative;
    padding: 90px 0 60px 0;
    background: #f2f2f2;
}

.testimonials .testimonial-item {
    position: relative;
    margin: 0 15px 30px 15px;
    background: #ffffff;
}

.testimonials .testimonial-img {
    position: relative;
    background: #000000;
    overflow: hidden;
}

.testimonials .testimonial-text {
    position: relative;
    width: 100%;
    padding: 30px 15px;
    text-align: center;
    background: #ffffff;
}

.testimonials .testimonial-text h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.testimonials .testimonial-text h4 {
    font-size: 12px;
    font-weight: 300;
    text-transform: uppercase;
}

.testimonials .testimonial-text p {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
}

.testimonials .owl-nav,
.testimonials .owl-dots {
    margin-top: 5px;
    text-align: center;
}

.testimonials .owl-dot {
    display: inline-block;
    margin: 0 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #dddddd;
}

.testimonials .owl-dot.active {
    background-color: #4F84C4;
}

@media (max-width: 575px) {
    .testimonials .testimonial-text {
        padding: 25px;
    }
}

.clients {
    position: relative;
    padding: 90px 0;
    text-align: center;
    margin-top: -10rem;
    margin-bottom: -10rem;
}

.clients .section-header p {
    padding-bottom: 10px;
    margin-top: 2.5rem;
    text-align: center;
    font-size: 2rem;
    color: #333;
    padding: 1rem 0;
}

.clients img {
    max-width: 100%;
    opacity: 1;
    transition: 0.3s;
    padding: 15px 0;
}

.clients img:hover {
    opacity: .5;
}

.clients .owl-nav,
.clients .owl-dots {
    margin-top: 5px;
    text-align: center;
}

.clients .owl-dot {
    display: inline-block;
    margin: 0 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ddd;
}

.clients .owl-dot.active {
    background-color: #4F84C4;
}    

.team{
    min-width: 100vw;
    min-height: 95vh;
    text-align: center;
    background-color: #222;
}

.team .heading{
    color: #00bfff;
}

.team .heading::before, .team .heading::after{
    border-color: #00bfff;
}

.team .row{
    display: inline-block;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.team .row .card{
    height: 35rem;
    width: 25rem;
    background-color: #fff;
    text-align: center;
    margin: 5rem 5rem;
    position: relative;
    overflow: hidden;
    -webkit-box-reflect: below 5px linear-gradient(transparent 70%, #0004);
    transition: 0.5s;
}

.team .row .card:hover{
    transform: translateY(-10px);
    cursor: pointer;
}


.team .row .card .image{
    margin: 1rem 0;
    padding-top: 4rem;
}

.team .row .card .image img{
    height: 13rem;
    width: 13rem;
    border-radius: 50%;
    border: .5rem solid #fff;
    box-shadow: 0 0 .5rem rgba(0,0,0,.3);
    object-fit: cover;
}

.team .row .card .info h3{
    font-size: 2rem;
    color: #333;
}

.team .row .card .info span{
    font-size: 1.8rem;
    color: #00bfff;
}

.team .row .card .info .icons a{
    margin-top: 4rem;
    padding-top: 0 1rem;
    font-size: 2rem;
    color: #333;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.team .row .card .info .icons .fa-facebook-f:hover, .footer .icons .fa-facebook-f:hover{
    color: #4267B2;
    text-decoration: none;
}

.team .row .card .info .icons .fa-twitter:hover, .footer .icons .fa-twitter:hover{
    color: #1DA1F2;
    text-decoration: none;
}

.team .row .card .info .icons .fa-instagram:hover, .footer .icons .fa-instagram:hover{
    color: #C13584;
    text-decoration: none;
}

.team .row .card .info .icons .fa-linkedin:hover, .footer .icons .fa-linkedin:hover{
    color: #2867B2;
    text-decoration: none;
}

.team .row .card::before, .team .row .card::after{
    content: '';
    position: absolute;
    border-radius: 50%;
    height: 13.5rem;
    width: 13.5rem;
    z-index: -1;
}

.team .row .card::before{
    background: #00bfff;
    top: -3rem;
    right: -4rem;
}

.team .row .card::after{
    background: #ccc;
    bottom: -3rem;
    left: -4rem;
}

.contact{
    text-align: center;
    align-items: center;
}

.contact .heading{
    margin-bottom: 5rem;
}

.contact-in
		{
			width: 80%;
			height: auto;
			margin: auto auto 5rem auto;
			display: flex;
			flex-wrap: wrap;
			padding: 10px;
			border-radius: 10px;
			background: #fff;
			box-shadow: 0px 0px 10px 0px #666;
		}

		.contact-map
		{
			width: 100%;
			height: auto;
			flex: 50%;
		}
		.contact-map iframe
		{
			width: 100%;
			height: 100%;
		}
		.contact-form
		{
			width: 100%;
			height: auto;
			flex: 50%;
			text-align: left;
		}
		.contact-form-txt
		{
            margin-left: 2rem;
			width: 95%;
			height: 40px;
			color: #000;
			border: 1px solid #bcbcbc;
			border-radius: 50px;
			outline: none;
			margin-bottom: 20px;
			padding: 15px;
		}
        .contact-form-email
		{
            margin-left: 2rem;
			width: 95%;
			height: 40px;
			color: #000;
			border: 1px solid #bcbcbc;
			border-radius: 50px;
			outline: none;
			margin-bottom: 20px;
			padding: 15px;
		}
		.contact-form-txt::placeholder
		{
			color: #aaa;
            font-size: 1.5rem;
		}
        .contact-form-email::placeholder
		{
			color: #aaa;
            font-size: 1.5rem;
		}
		.contact-form-txtarea
		{
            margin-left: 2rem;
			width: 95%;
			height: 130px;
			color: #000;
			border: 1px solid #bcbcbc;
			border-radius: 10px;
			outline: none;
			margin-bottom: 20px;
			padding: 15px;
			font-family: 'Poppins', sans-serif;
		}
		.contact-form-txtarea::placeholder
		{
			color: #aaa;
            font-size: 1.5rem;
		}

		.contact-form-btn
		{
            margin-left: 2rem;
            outline: none;
            border: none;
            border-radius: 5rem;
            background: white;
            border-style: groove;
            border-color: #002e5f;
            font-size: 1.5rem;
            cursor: pointer;
            height: 3.5rem;
            width: 15rem;
            box-shadow: 0 .2rem .5rem rgba(0,0,0,.3);
		}
        .contact-form-btn:hover{
            letter-spacing: .1rem;
            opacity: .9;
            color: white;
            background: #002e5f;
        }
		.contact-form-phone
		{
            margin-left: 2rem;
			width: 95%;
			height: 40px;
			color: #000;
			border: 1px solid #bcbcbc;
			border-radius: 50px;
			outline: none;
			margin-bottom: 20px;
			padding: 15px;
		}
		.contact-form-phone::placeholder
		{
			color: #aaa;
            font-size: 1.5rem;
		}

        .footer {
            position: relative;
            padding: 0 0 30px 0;
            background: #333;
        }
        
        .footer .footer-top {
            background: #002e5f;
            padding: 60px 0 30px 0;
        }
        
        .footer .footer-top .footer-info,
        .footer .footer-top .footer-links,
        .footer .footer-top .footer-contact,
        .footer .footer-top .footer-newsletter {
            margin-bottom: 30px;
        }
        
        .footer .footer-top .social-links a {
            font-size: 18px;
            display: inline-block;
            background: #ffffff;
            color: #00bfff;
            line-height: 1;
            padding: 9px 0;
            margin-right: 4px;
            text-align: center;
            width: 36px;
            height: 36px;
            transition: 0.3s;
        }
        
        .footer .footer-top .social-links a:hover {
            background: #00bfff;
            color: #ffffff;
        }
        
        .footer .footer-top h4 {
            font-size: 16px;
            font-weight: 700;
            color: #ffffff;
            text-transform: uppercase;
            position: relative;
            padding-bottom: 12px;
            margin-bottom: 20px;
            letter-spacing: 1px;
        }
        
        .footer .footer-top h4::before {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            height: 0;
            width: 50px;
            border-bottom: 2px solid #ffffff;
        }
        
        .footer .footer-top .footer-links ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .footer .footer-top .footer-links ul i {
            padding-right: 8px;
            color: #ffffff;
            font-size: 16px;
        }
        
        .footer .footer-top .footer-links ul li {
            border-bottom: 1px solid #ffffff;
            padding: 7px 0;
        }
        
        .footer .footer-top .footer-links ul li:first-child {
            padding-top: 0;
        }
        
        .footer .footer-top .footer-links ul a {
            font-size: 14px;
            color: #ffffff;
        }
        
        .footer .footer-top .footer-links ul a:hover {
            color: #00bfff;
        }
        
        .footer .footer-top .footer-contact p {
            color: #ffffff;
            line-height: 26px;
        }
        
        .footer .footer-top .footer-newsletter input[type="email"] {
            padding: 6px 8px;
            width: 60%;
            border: 1px solid #ffffff;
            background: transparent;
            color: #ffffff;
        }
        
        .footer .footer-top .footer-newsletter input[type="submit"] {
            border: 0;
            width: 40%;
            padding: 6px 0;
            text-align: center;
            color: black;
            border: 1px solid #ffffff;
            background: #ffffff;
            transition: 0.3s;
            cursor: pointer;
        }
        
        .footer .footer-top .footer-newsletter input[type="submit"]:hover {
            color: #ffffff;
            background: #00bfff;
            border: 1px solid #00bfff;
            letter-spacing: .2rem;
        }
        
        .footer .footer-top .footer-newsletter p {
            color: #ffffff;
            font-size: 14px;
        }
        
        .footer .credit,
        .footer .copyright {
            text-align: center;
            padding-top: 30px;
        }
        
        @media (min-width: 768px) {
            .footer .credit {
                text-align: right;
            }
            
            .footer .copyright {
                text-align: left;
            }
        }

        .back-to-top {
            position: fixed;
            display: none;
            background-color: #00bfff;
            color: #ffffff;
            width: 45px;
            height: 45px;
            text-align: center;
            line-height: 1;
            font-size: 44px;
            right: 15px;
            bottom: 15px;
            transition: background 0.3s;
            z-index: 9;
        }
        
        .back-to-top i {
            color: #ffffff;
        }

        .back-to-top i:hover {
            color: black;
        }

        .faq{
            min-height: 70vh;
            width: 100vw;
            text-align: center;
            padding: 0 2rem;
            background: url(../images/faq.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }
        
        .faq .row{
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 2rem;
        }
        
        .faq .row .accordion-container{
            width: 50%;
            text-align: left;
        }

        .faq .row .accordion{
            margin-left: 1rem;
            margin-right: 2rem;
        }
        
        .faq .row .accordion-container .accordion .accordion-header{
            background-color: #00bfff;
            margin: 1rem 0;
            box-shadow: .1rem .1rem .3rem rgba(0,0,0,.3);
            cursor: pointer;
            margin-left: 1rem;
            margin-right: 2rem;
        }
        
        .faq .row .accordion-container .accordion .accordion-header span{
            display: inline-block;
            text-align: center;
            height: 4rem;
            width: 5rem;
            line-height: 4rem;
            font-size: 2rem;
            background: #333;
            color: #fff;
            clip-path: polygon(0% 0%,75% 0%,100% 50%,75% 100%,0% 100%); 
        }
        
        .faq .row .accordion-container .accordion .accordion-header h3{
            display: inline;
            color: #333;
            font-weight: 400;
            padding-left: .5rem;
            font-size: 1.5rem;
        }
        
        .faq .row .accordion-container .accordion .accordion-body{
            padding: 1rem;
            color: #444;
            box-shadow: .1rem .1rem .3rem rgba(0,0,0,.3);
            background-color: #fff;
            font-size: 1.3rem;
            display: none;
            margin-left: 1rem;
            margin-right: 2rem;
        }
        
@media (max-width: 1200px){
    .faq{
        min-height: 70vh;
    }
}        

@media (max-width: 1000px){
    html{
        font-size: 50%;
    }

    .header .logo img{
        width: 20%;
        height: 3rem;
        top: 0;
        left: 0;
        background-size: cover;
    }

    .header .fa-bars{
        display: block;
        color: 	white;
        margin-right: 1rem;
    }

    .header .fa-bars:hover{
        color: #00bfff;
    }

    .header .navbar{
        position: fixed;
        top: -120%;
        left: 0;
        height: auto;
        width: 100%;
        background-color: white;
        z-index: 1000;
        border-top: .1rem solid rgba(0,0,0,.3);
    }

    .header .navbar ul{
        height: 100%;
        width: 100%;
        flex-flow: column;
    }

    .header .navbar ul li{
        margin: 1rem 0;
    }

    .header .navbar ul li a{
        color: grey;
        font-size: 2.4rem;
    }

    .header .fa-times{
        transform: rotate(90deg);
    }

    .header .nav-toggle{
        top: 5.8rem;
    }

    .home h1{
        color: #fff;
        font-size: 4rem;
    }
    
    .home h2{
        color: #fff;
        font-size: 2rem;
    }

    .about{
        min-height: 38vh;
        width: 100vw;
        margin-top: -3rem;
        margin-bottom: -2rem;
        top: -2rem;
        text-align: center;
        position: relative;
        overflow: hidden;
        line-height: 6rem;
    }
    
    .about .row{
        line-height: 2rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 0 4rem;
    }
    
    .about .row .content{
        text-align: center;
    }
    
    .about .row .content h3{
        font-size: 2rem;
        color: var(--color);
    }
    
    .about .row .content p{
        font-size: 1.3rem;
        color: #333;
        padding: 1rem 0;
    } 

    .clients {
        position: relative;
        padding: 90px 0;
        text-align: center;
        margin-top: -15rem;
        margin-bottom: -8rem;
    }

    .clients .section-header p {
        padding-bottom: 10px;
        margin-top: 2.5rem;
        text-align: center;
        font-size: 2rem;
    }

    .team{
        min-height: auto;
    }

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

    .contact{
        text-align: center;
        align-items: center;
    }
    
    .contact .heading{
        margin-bottom: 3rem;
        margin-top: -2rem;
    }

    .contact-in
		{
			width: 80%;
			height: auto;
			margin: auto auto 5rem auto;
			display: flex;
			flex-wrap: wrap;
			padding: 10px;
			border-radius: 10px;
			background: #fff;
			box-shadow: 0px 0px 10px 0px #666;
		}

		.contact-map
		{
			width: 100%;
			height: auto;
			flex: 50%;
		}
		.contact-map iframe
		{
			width: 100%;
			height: 100%;
		}
		.contact-form
		{
			width: 100%;
			height: auto;
			flex: 50%;
			text-align: left;
		}
		.contact-form-txt
		{
			width: 90%;
			height: 20px;
			color: #000;
			border: 1px solid #bcbcbc;
			border-radius: 50px;
			outline: none;
			margin-bottom: 20px;
			padding: 15px;
		}
        .contact-form-email
		{
            margin-left: 2rem;
			width: 90%;
			height: 20px;
			color: #000;
			border: 1px solid #bcbcbc;
			border-radius: 50px;
			outline: none;
			margin-bottom: 20px;
			padding: 15px;
		}
		.contact-form-txt::placeholder
		{
			color: #aaa;
            font-size: 1.5rem;
		}
        .contact-form-email::placeholder
		{
			color: #aaa;
            font-size: 1.5rem;
		}
		.contact-form-txtarea
		{
            margin-left: 2rem;
			width: 90%;
			height: 110px;
			color: #000;
			border: 1px solid #bcbcbc;
			border-radius: 10px;
			outline: none;
			margin-bottom: 20px;
			padding: 15px;
			font-family: 'Poppins', sans-serif;
		}
		.contact-form-txtarea::placeholder
		{
			color: #aaa;
            font-size: 1.5rem;
		}

		.contact-form-btn
		{
            margin-left: 2rem;
            outline: none;
            border: none;
            border-radius: 5rem;
            background: white;
            border-style: groove;
            border-color: #002e5f;
            font-size: 1.5rem;
            cursor: pointer;
            height: 3.5rem;
            width: 12rem;
            box-shadow: 0 .2rem .5rem rgba(0,0,0,.3);
		}
        .contact-form-btn:hover{
            letter-spacing: .1rem;
            opacity: .9;
            color: white;
            background: #002e5f;
        }
		.contact-form-phone
		{
            margin-left: 2rem;
			width: 90%;
			height: 20px;
			color: #000;
			border: 1px solid #bcbcbc;
			border-radius: 50px;
			outline: none;
			margin-bottom: 20px;
			padding: 15px;
		}
		.contact-form-phone::placeholder
		{
			color: #aaa;
            font-size: 1.5rem;
		}

        .back-to-top {
            width: 30px;
            height: 30px;
            font-size: 30px;
        }

        .faq{
            padding: 0;
            min-height: 60vh;
        }
    
        .faq .row{
            padding: 0 1.5rem;
            flex-flow: column;
        }
    
        .faq .row .accordion-container{
            width: 100%;
        }
} */

/* =========================================================
   CODESPHERE INFO
   PREMIUM IT COMPANY WEBSITE
========================================================= */

:root {

    --primary: #2463ff;
    --primary-dark: #1748c9;
    --accent: #7c5cff;
    --cyan: #21d4fd;

    --dark: #07111f;
    --dark-2: #0b1728;
    --dark-3: #101f34;

    --text: #172033;
    --text-light: #64748b;
    --white: #ffffff;

    --light: #f7f9fc;
    --light-2: #eef3f9;

    --border: #e4e9f1;

    --shadow: 0 20px 60px rgba(15, 31, 54, 0.10);

    --container: 1240px;

    --radius: 20px;

    --transition: 0.35s ease;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
    font-size: 62.5%;
}


body {
    font-family: "DM Sans", sans-serif;
    color: var(--text);
    background: var(--white);
    font-size: 1.6rem;
    line-height: 1.7;
    overflow-x: hidden;
}


body.menu-open {
    overflow: hidden;
}


a {
    text-decoration: none;
    color: inherit;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    cursor: pointer;
}


img {
    max-width: 100%;
    display: block;
}


.container {
    width: min(92%, var(--container));
    margin: 0 auto;
}


.section-padding {
    padding: 12rem 0;
}


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

.site-header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;

    transition: var(--transition);

    border-bottom: 1px solid transparent;
}


.site-header.page-header-fixed {
    background: rgba(7, 17, 31, 0.92);
    backdrop-filter: blur(18px);
    border-bottom-color: rgba(255,255,255,0.08);
}

.site-header.scrolled {
    background: rgba(7, 17, 31, 0.92);
    backdrop-filter: blur(18px);
    border-bottom-color: rgba(255,255,255,0.08);
}


.nav-wrapper {
    height: 86px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 3rem;
}


.brand {
    display: flex;
    align-items: center;

    width: 165px;
    flex-shrink: 0;
}


.brand img {
    width: 100%;
    max-height: 52px;
    object-fit: contain;
}


.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 2.7rem;

    margin-left: auto;
}


.nav-link {
    position: relative;

    color: rgba(255,255,255,0.76);

    font-size: 1.42rem;
    font-weight: 600;

    padding: 3.1rem 0;

    transition: var(--transition);
}


.nav-link:hover,
.nav-link.active {
    color: var(--white);
}


.nav-link.active::after {
    content: "";

    position: absolute;
    bottom: 2.1rem;
    left: 0;

    width: 22px;
    height: 2px;

    background: var(--cyan);
}


.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}


.dropdown-toggle i {
    font-size: 0.9rem;
}


.nav-dropdown {
    position: relative;
}


.dropdown-menu {
    position: absolute;

    top: 75px;
    left: -20px;

    width: 330px;

    padding: 1rem;

    background: #101c2d;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 16px;

    box-shadow: 0 25px 60px rgba(0,0,0,0.3);

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition: var(--transition);
}


.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 1.2rem;

    padding: 1.2rem;

    color: var(--white);

    border-radius: 12px;

    transition: var(--transition);
}


.dropdown-menu a:hover {
    background: rgba(255,255,255,0.06);
}


.dropdown-menu strong {
    display: block;

    font-size: 1.35rem;
}


.dropdown-menu small {
    display: block;

    color: #8290a5;

    font-size: 1.1rem;
}


.dropdown-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: rgba(36,99,255,0.15);

    color: #5d91ff;
}


.nav-cta {
    display: flex;
    align-items: center;
    gap: 1rem;

    color: var(--white);

    background: var(--primary);

    padding: 1.2rem 1.8rem;

    border-radius: 10px;

    font-size: 1.35rem;
    font-weight: 700;

    transition: var(--transition);
}


.nav-cta:hover {
    background: var(--white);
    color: var(--dark);
    transform: translateY(-2px);
}


.nav-cta i {
    font-size: 1.1rem;
}


.mobile-menu-btn {
    display: none;

    width: 44px;
    height: 44px;

    border: 1px solid rgba(255,255,255,0.15);

    background: transparent;

    border-radius: 10px;
}


.mobile-menu-btn span {
    display: block;

    width: 20px;
    height: 2px;

    margin: 4px auto;

    background: var(--white);

    transition: var(--transition);
}


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

.hero {
    position: relative;

    min-height: 820px;

    padding-top: 86px;

    display: flex;
    align-items: center;

    color: var(--white);

    background:
        radial-gradient(circle at 75% 25%, rgba(36,99,255,0.18), transparent 35%),
        radial-gradient(circle at 90% 80%, rgba(124,92,255,0.13), transparent 35%),
        var(--dark);

    overflow: hidden;
}


.hero-grid,
.cta-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);

    background-size: 65px 65px;

    mask-image: linear-gradient(to bottom, black, transparent);
}


.hero-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(80px);

    pointer-events: none;
}


.hero-glow-one {
    width: 300px;
    height: 300px;

    background: rgba(36,99,255,0.17);

    right: 10%;
    top: 20%;
}


.hero-glow-two {
    width: 230px;
    height: 230px;

    background: rgba(124,92,255,0.12);

    left: 10%;
    bottom: 5%;
}


.hero-container {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1fr 0.95fr;

    align-items: center;

    gap: 7rem;

    padding: 8rem 0 12rem;
}


.eyebrow,
.section-label {
    display: flex;
    align-items: center;
    gap: 1rem;

    font-size: 1.1rem;
    font-weight: 800;

    letter-spacing: 0.16em;

    color: #6f9dff;
}


.eyebrow-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--cyan);

    box-shadow: 0 0 15px var(--cyan);
}


.eyebrow-line {
    width: 32px;
    height: 1px;

    background: rgba(255,255,255,0.25);
}


.hero-title {
    max-width: 760px;

    margin: 2.2rem 0;

    font-family: "Manrope", sans-serif;

    font-size: clamp(4.5rem, 6vw, 7.5rem);

    line-height: 1.05;

    letter-spacing: -0.055em;

    font-weight: 800;
}


.hero-title span {
    display: block;

    background: linear-gradient(
        90deg,
        #fff,
        #74a5ff,
        #9d8aff
    );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.hero-description {
    max-width: 650px;

    color: #9caabd;

    font-size: 1.8rem;

    line-height: 1.8;
}


.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 1.3rem;

    margin-top: 3.5rem;
}


.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 1.2rem;

    min-height: 54px;

    padding: 0 2.2rem;

    border-radius: 9px;

    font-size: 1.4rem;
    font-weight: 700;

    transition: var(--transition);

    border: 1px solid transparent;
}


.btn-primary {
    color: var(--white);

    background: var(--primary);

    box-shadow: 0 15px 35px rgba(36,99,255,0.25);
}


.btn-primary:hover {
    background: #3974ff;
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(36,99,255,0.35);
}


.btn-outline {
    color: var(--white);

    border-color: rgba(255,255,255,0.16);

    background: rgba(255,255,255,0.025);
}


.btn-outline:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.3);
}


.hero-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 1.5rem;

    margin-top: 4.5rem;

    color: #718096;

    font-size: 1.25rem;
}


.hero-trust div {
    display: flex;
    gap: 1.8rem;
}


.hero-trust div span {
    color: #c5cfdd;
}

/* =========================================================
   TRUSTED BY
========================================================= */

.trust-section {
    position: relative;
    padding: 70px 0;
    background: #ffffff;
    overflow: hidden;
}

.trust-heading {
    text-align: center;
    margin-bottom: 45px;
}

.trust-heading .section-label {
    justify-content: center;
    margin-bottom: 15px;
}

.trust-title {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0.2px;
}


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

.logo-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;

    /*
       Fade effect on left/right
    */

    mask-image: linear-gradient(
        to right,
        transparent,
        black 8%,
        black 92%,
        transparent
    );

    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black 8%,
        black 92%,
        transparent
    );
}


.logo-track {
    display: flex;
    align-items: center;
    width: max-content;

    animation: clientLogoScroll 28s linear infinite;

    will-change: transform;
}


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

.client-logo {
    width: 180px;
    height: 85px;

    margin-right: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px 25px;

    background: #ffffff;

    border: 1px solid #edf0f5;

    border-radius: 14px;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.client-logo img {
    width: 100%;
    height: 100%;

    max-width: 125px;
    max-height: 48px;

    object-fit: contain;

    filter: grayscale(100%);
    opacity: 0.65;

    transition:
        filter 0.3s ease,
        opacity 0.3s ease,
        transform 0.3s ease;
}


/* =========================================================
   HOVER
========================================================= */

.client-logo:hover {
    transform: translateY(-4px);

    border-color: #dce3ee;

    box-shadow: 0 12px 30px rgba(20, 35, 60, 0.08);
}


.client-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;

    transform: scale(1.04);
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes clientLogoScroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* =========================================================
   PAUSE ON HOVER
========================================================= */

.logo-marquee:hover .logo-track {
    animation-play-state: paused;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .trust-section {
        padding: 60px 0;
    }

    .client-logo {
        width: 160px;
        height: 78px;

        margin-right: 22px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    .trust-section {
        padding: 50px 0;
    }

    .trust-heading {
        margin-bottom: 30px;
    }

    .trust-title {
        font-size: 14px;
    }

    .client-logo {
        width: 145px;
        height: 70px;

        margin-right: 16px;

        padding: 15px 20px;

        border-radius: 12px;
    }

    .client-logo img {
        max-width: 105px;
        max-height: 40px;
    }

    .logo-track {
        animation-duration: 22s;
    }

}


.hero-visual {
    position: relative;

    min-height: 560px;

    display: grid;
    place-items: center;
}


.dashboard-card {
    position: relative;
    z-index: 2;

    width: min(100%, 500px);

    padding: 2rem;

    background:
        linear-gradient(
            145deg,
            rgba(24,42,68,0.95),
            rgba(11,25,43,0.92)
        );

    border: 1px solid rgba(255,255,255,0.12);

    border-radius: 22px;

    box-shadow:
        0 40px 100px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.05);

    transform: perspective(1000px) rotateY(-7deg) rotateX(3deg);

    animation: dashboardFloat 6s ease-in-out infinite;
}


@keyframes dashboardFloat {

    0%,
    100% {
        transform:
            perspective(1000px)
            rotateY(-7deg)
            rotateX(3deg)
            translateY(0);
    }

    50% {
        transform:
            perspective(1000px)
            rotateY(-7deg)
            rotateX(3deg)
            translateY(-12px);
    }
}


.dashboard-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-bottom: 2rem;

    border-bottom: 1px solid rgba(255,255,255,0.07);
}


.dashboard-brand {
    display: flex;
    align-items: center;
    gap: 1rem;

    color: #dce6f5;

    font-weight: 700;
}


.mini-logo {
    width: 22px;
    height: 22px;

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--accent)
        );
}


.dashboard-dots {
    display: flex;
    gap: 5px;
}


.dashboard-dots span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #607086;
}


.dashboard-title {
    padding: 2.8rem 0 1rem;
}


.dashboard-title small,
.dashboard-bottom small {
    display: block;

    color: #71839b;

    font-size: 0.95rem;

    letter-spacing: 0.12em;
}


.dashboard-title strong {
    display: block;

    margin-top: 0.5rem;

    font-family: "Manrope", sans-serif;

    font-size: 2.4rem;
}


.chart-area {
    position: relative;

    height: 210px;

    margin-top: 1rem;

    overflow: hidden;

    border-radius: 15px;

    background: rgba(255,255,255,0.025);
}


.chart-bars {
    position: absolute;

    inset: 20px 15px 15px;

    display: flex;
    align-items: end;
    justify-content: space-around;

    gap: 2rem;
}


.chart-bars span {
    width: 9%;

    background:
        linear-gradient(
            to top,
            rgba(36,99,255,0.1),
            rgba(36,99,255,0.5)
        );

    border-radius: 6px 6px 2px 2px;
}


.chart-line {
    position: absolute;
    inset: 0;

    color: #5d91ff;
}


.chart-line svg {
    width: 100%;
    height: 100%;
}


.dashboard-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 1rem;

    margin-top: 2rem;
}


.dashboard-bottom > div {
    padding: 1.4rem;

    background: rgba(255,255,255,0.035);

    border-radius: 12px;
}


.dashboard-bottom strong {
    display: block;

    margin-top: 0.3rem;

    color: #dce6f5;
}


.floating-card {
    position: absolute;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 1.2rem;

    padding: 1.3rem;

    border: 1px solid rgba(255,255,255,0.12);

    background: rgba(12,28,48,0.88);

    backdrop-filter: blur(16px);

    border-radius: 14px;

    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
}


.floating-card small {
    display: block;

    color: #73849a;

    font-size: 0.8rem;
}


.floating-card strong {
    display: block;

    color: #e6edf7;

    font-size: 1.15rem;
}


.floating-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius: 11px;
}


.floating-icon.purple {
    color: #a18dff;
    background: rgba(124,92,255,0.14);
}


.floating-icon.blue {
    color: #65a5ff;
    background: rgba(36,99,255,0.14);
}


.floating-ai {
    left: 0;
    top: 19%;

    animation: floatSmall 5s ease-in-out infinite;
}


.floating-cloud {
    right: -1%;
    bottom: 22%;

    animation: floatSmall 5s 1s ease-in-out infinite;
}


@keyframes floatSmall {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}


.floating-badge {
    position: absolute;

    right: 3%;
    top: 7%;

    display: flex;
    align-items: center;
    gap: 1rem;

    padding: 1rem 1.2rem;

    background: var(--white);

    border-radius: 13px;

    color: var(--dark);

    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}


.badge-check {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: var(--white);

    background: #18b981;

    font-size: 1rem;
}


.floating-badge strong {
    display: block;
    font-size: 1.15rem;
}


.floating-badge small {
    color: #78869a;
    font-size: 0.85rem;
}


.visual-orbit {
    position: absolute;

    border: 1px solid rgba(94,144,255,0.14);

    border-radius: 50%;
}


.orbit-one {
    width: 550px;
    height: 550px;

    transform: rotate(25deg);
}


.orbit-two {
    width: 420px;
    height: 420px;

    transform: rotate(-35deg);
}


.hero-bottom {
    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;

    z-index: 3;
}


.hero-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 2rem 0;

    color: #718096;

    font-size: 1.2rem;

    border-top: 1px solid rgba(255,255,255,0.08);
}


.scroll-indicator {
    display: flex;
    align-items: center;
    gap: 1rem;
}


.scroll-indicator span {
    width: 25px;
    height: 1px;

    background: #6d7c90;
}


/* =========================================================
   TRUST
========================================================= */

.trust-section {
    padding: 4rem 0;

    background: #fff;

    border-bottom: 1px solid var(--border);
}


.trust-title {
    text-align: center;

    color: #8a96a7;

    font-size: 1.15rem;

    margin-bottom: 2.5rem;
}


.client-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);

    align-items: center;

    gap: 2rem;
}


.client-placeholder {
    text-align: center;

    color: #aab3c0;

    font-family: "Manrope", sans-serif;

    font-size: 1.25rem;
    font-weight: 800;

    letter-spacing: 0.1em;

    transition: var(--transition);
}


.client-placeholder:hover {
    color: #4c5d74;
}


/* =========================================================
   COMMON SECTIONS
========================================================= */

.section-heading {
    max-width: 800px;

    margin-bottom: 6rem;
}


.section-heading.centered {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}


.section-heading.centered .section-label {
    justify-content: center;
}


.section-title {
    margin-top: 1.8rem;

    font-family: "Manrope", sans-serif;

    font-size: clamp(3.5rem, 4.5vw, 5.5rem);

    line-height: 1.12;

    letter-spacing: -0.045em;

    color: var(--dark);
}


.section-title span {
    color: var(--primary);
}


.section-heading > p {
    max-width: 680px;

    margin-top: 2rem;

    color: var(--text-light);

    font-size: 1.65rem;
}


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

.section-grid {
    display: grid;

    grid-template-columns: 0.9fr 1fr;

    gap: 9rem;

    align-items: center;
}


.about-image-box {
    position: relative;

    min-height: 520px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            #eaf1ff,
            #f4efff
        );

    border-radius: 30px;

    overflow: hidden;
}


.about-pattern {
    position: absolute;

    inset: 0;

    opacity: 0.5;

    background-image:
        linear-gradient(#dce6f8 1px, transparent 1px),
        linear-gradient(90deg, #dce6f8 1px, transparent 1px);

    background-size: 45px 45px;
}


.about-main-card {
    position: relative;
    z-index: 2;

    width: 70%;

    padding: 4rem;

    background: var(--dark);

    color: var(--white);

    border-radius: 22px;

    box-shadow: 0 30px 70px rgba(7,17,31,0.25);

    transform: rotate(-4deg);
}


.card-label {
    color: #6d9bff;

    font-size: 1rem;
    font-weight: 800;

    letter-spacing: 0.12em;
}


.about-main-card strong {
    display: block;

    margin: 2rem 0;

    font-family: "Manrope", sans-serif;

    font-size: 3.5rem;

    line-height: 1.2;
}


.about-main-card strong span {
    color: #668fff;
}


.about-card-line {
    width: 70px;
    height: 3px;

    margin-bottom: 1.5rem;

    background: var(--cyan);
}


.about-main-card p {
    color: #8292a8;

    font-size: 1.2rem;
}


.experience-badge {
    position: absolute;

    z-index: 4;

    right: 7%;
    bottom: 7%;

    padding: 2rem;

    display: flex;
    align-items: center;
    gap: 1.5rem;

    background: var(--white);

    border-radius: 16px;

    box-shadow: 0 20px 50px rgba(30,50,80,0.15);
}


.experience-badge strong {
    color: var(--primary);

    font-family: "Manrope", sans-serif;

    font-size: 3.2rem;
}


.experience-badge span {
    color: #6b7789;

    font-size: 1.15rem;
}


.about-content > p {
    margin-top: 2rem;

    color: var(--text-light);

    font-size: 1.65rem;
}


.about-points {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 1.3rem;

    margin: 3rem 0;
}


.about-points div {
    display: flex;
    align-items: center;
    gap: 1rem;

    font-size: 1.35rem;
    font-weight: 600;
}


.about-points i {
    color: var(--primary);
}


.text-link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;

    color: var(--primary);

    font-size: 1.4rem;
    font-weight: 700;

    transition: var(--transition);
}


.text-link:hover {
    gap: 1.5rem;
}


/* =========================================================
   STATS
========================================================= */

.stats-section {
    padding: 6rem 0;

    color: var(--white);

    background: var(--dark);
}


.stats-grid {
    display: grid;

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


.stat-item {
    text-align: center;

    padding: 2rem;

    border-right: 1px solid rgba(255,255,255,0.09);
}


.stat-item:last-child {
    border-right: none;
}


.stat-item strong {
    display: block;

    font-family: "Manrope", sans-serif;

    font-size: 4.5rem;

    color: var(--white);
}


.stat-item span:last-child {
    color: #8190a5;

    font-size: 1.25rem;
}


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

.services-section {
    background: var(--light);
}


.services-grid {
    display: grid;

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

    gap: 2rem;
}


.service-card {
    position: relative;

    min-height: 360px;

    padding: 3.5rem;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    overflow: hidden;

    transition: var(--transition);
}


.service-card:hover {
    transform: translateY(-8px);

    border-color: rgba(36,99,255,0.3);

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


.service-featured {
    grid-row: span 2;

    min-height: 740px;

    color: var(--white);

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(75,130,255,0.25),
            transparent 35%
        ),
        var(--dark);
}


.service-featured p {
    color: #8292a8 !important;
}


.service-featured h3 {
    font-size: 3.2rem !important;
}


.service-number {
    position: absolute;

    right: 2.5rem;
    top: 2.5rem;

    color: #aeb8c7;

    font-family: "Manrope", sans-serif;

    font-size: 1.2rem;
    font-weight: 800;
}


.service-featured .service-number {
    color: #5773a3;
}


.service-icon {
    width: 55px;
    height: 55px;

    display: grid;
    place-items: center;

    margin-bottom: 4rem;

    border-radius: 15px;

    color: var(--primary);

    background: #edf3ff;

    font-size: 2rem;
}


.service-featured .service-icon {
    color: var(--white);
    background: rgba(255,255,255,0.08);
}


.service-card h3 {
    max-width: 320px;

    margin-bottom: 1.5rem;

    font-family: "Manrope", sans-serif;

    font-size: 2.2rem;

    line-height: 1.25;
}


.service-card p {
    color: var(--text-light);

    font-size: 1.4rem;
}


.service-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 0.7rem;

    margin-top: 4rem;
}


.service-tags span {
    padding: 0.7rem 1rem;

    color: #a9b7ca;

    border: 1px solid rgba(255,255,255,0.1);

    border-radius: 50px;

    font-size: 1rem;
}


.service-link {
    position: absolute;

    bottom: 3rem;
    left: 3.5rem;

    display: flex;
    align-items: center;
    gap: 1rem;

    color: var(--primary);

    font-size: 1.3rem;
    font-weight: 700;

    transition: var(--transition);
}


.service-link:hover {
    gap: 1.5rem;
}


.service-featured .service-link {
    color: #75a0ff;
}


/* =========================================================
   SOLUTIONS
========================================================= */

.solutions-section {
    color: var(--white);

    background:
        radial-gradient(circle at 15% 40%, rgba(36,99,255,0.16), transparent 35%),
        var(--dark);
}


.solutions-header {
    display: flex;
    justify-content: space-between;
    align-items: end;

    gap: 5rem;

    margin-bottom: 8rem;
}


.solutions-header > p {
    max-width: 500px;

    color: #8392a7;

    font-size: 1.55rem;
}


.light-label {
    color: #6f9dff;
}


.light-title {
    color: var(--white);
}


.light-title span {
    color: #6c98ff;
}


.solution-process {
    position: relative;

    display: grid;

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

    gap: 3rem;
}


.process-line {
    position: absolute;

    top: 44px;
    left: 10%;

    width: 80%;
    height: 1px;

    background: rgba(255,255,255,0.1);
}


.process-item {
    position: relative;
    z-index: 2;
}


.process-number {
    position: absolute;

    top: -3.5rem;
    right: 0;

    color: #344762;

    font-size: 1rem;
    font-weight: 800;
}


.process-icon {
    width: 88px;
    height: 88px;

    display: grid;
    place-items: center;

    margin-bottom: 3rem;

    border-radius: 50%;

    color: #7188a9;

    background: #0d1b2e;

    border: 1px solid rgba(255,255,255,0.09);

    font-size: 2.2rem;

    transition: var(--transition);
}


.process-item.active .process-icon,
.process-item:hover .process-icon {
    color: var(--white);

    background: var(--primary);

    border-color: var(--primary);

    box-shadow: 0 0 40px rgba(36,99,255,0.3);
}


.process-item h3 {
    margin-bottom: 1rem;

    font-family: "Manrope", sans-serif;

    font-size: 2rem;
}


.process-item p {
    max-width: 220px;

    color: #718198;

    font-size: 1.3rem;
}


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

.technology-cloud {
    max-width: 1000px;

    margin: auto;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 1.2rem;
}


.tech-pill {
    display: inline-flex;
    align-items: center;
    gap: 1rem;

    padding: 1.3rem 1.8rem;

    color: #334156;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 50px;

    font-size: 1.3rem;
    font-weight: 600;

    box-shadow: 0 8px 25px rgba(30,50,80,0.04);

    transition: var(--transition);
}


.tech-pill i {
    color: var(--primary);

    font-size: 1.7rem;
}


.tech-pill:hover {
    color: var(--white);

    background: var(--dark);

    border-color: var(--dark);

    transform: translateY(-4px);
}


.tech-pill:hover i {
    color: var(--cyan);
}


/* =========================================================
   INDUSTRIES
========================================================= */

.industries-section {
    background: var(--light);
}


.industries-grid {
    display: grid;

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

    gap: 1.5rem;
}


.industry-card {
    position: relative;

    min-height: 210px;

    padding: 2.5rem;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 18px;

    transition: var(--transition);
}


.industry-card:hover {
    color: var(--white);

    background: var(--dark);

    transform: translateY(-7px);

    border-color: var(--dark);
}


.industry-card > i {
    color: var(--primary);

    font-size: 2.5rem;
}


.industry-card h3 {
    font-family: "Manrope", sans-serif;

    font-size: 2rem;
}


.industry-card span {
    display: flex;
    justify-content: space-between;

    color: #8792a2;

    font-size: 1.15rem;
}


.industry-card:hover span {
    color: #7f90aa;
}


.industry-card span i {
    color: var(--primary);
}


/* =========================================================
   WHY
========================================================= */

.why-grid {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 10rem;

    align-items: center;
}


.why-content > p {
    margin: 2rem 0 3rem;

    color: var(--text-light);

    font-size: 1.6rem;
}


.why-cards {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1.5rem;
}


.why-card {
    padding: 2.5rem;

    background: var(--light);

    border: 1px solid var(--border);

    border-radius: 17px;

    transition: var(--transition);
}


.why-card:hover {
    background: var(--white);

    box-shadow: var(--shadow);

    transform: translateY(-5px);
}


.why-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin-bottom: 2rem;

    color: var(--primary);

    background: #eaf1ff;

    border-radius: 12px;
}


.why-card h3 {
    margin-bottom: 0.8rem;

    font-family: "Manrope", sans-serif;

    font-size: 1.65rem;
}


.why-card p {
    color: var(--text-light);

    font-size: 1.25rem;
}


/* =========================================================
   PORTFOLIO
========================================================= */

.portfolio-section {
    background: var(--light);
}


.portfolio-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;

    gap: 3rem;
}


.portfolio-grid {
    display: grid;

    grid-template-columns: 1.35fr 1fr;

    gap: 2rem;
}


.project-card {
    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 22px;

    overflow: hidden;

    transition: var(--transition);
}


.project-card:hover {
    transform: translateY(-8px);

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


.project-large {
    grid-row: span 2;
}


.project-image {
    min-height: 280px;

    display: grid;
    place-items: center;

    padding: 3rem;

    overflow: hidden;
}


.project-large .project-image {
    min-height: 500px;
}


.project-fintech {
    background:
        radial-gradient(circle at 70% 20%, rgba(81,132,255,0.35), transparent 30%),
        #0a182b;
}


.project-health {
    background:
        radial-gradient(circle at 80% 20%, rgba(55,217,179,0.25), transparent 30%),
        #0d2530;
}


.project-ai {
    background:
        radial-gradient(circle at 50% 50%, rgba(130,87,255,0.35), transparent 35%),
        #15122b;
}


.project-ui {
    width: 85%;

    padding: 2rem;

    background: rgba(255,255,255,0.08);

    border: 1px solid rgba(255,255,255,0.1);

    border-radius: 17px;

    color: var(--white);

    box-shadow: 0 25px 60px rgba(0,0,0,0.25);
}


.project-ui-header {
    display: flex;
    justify-content: space-between;

    color: #8fa1bb;

    font-size: 1rem;
}


.project-balance {
    margin-top: 4rem;
}


.project-balance small {
    color: #8190a5;
}


.project-balance strong {
    display: block;

    margin-top: 0.5rem;

    font-family: "Manrope", sans-serif;

    font-size: 3.2rem;
}


.mini-chart {
    height: 100px;

    margin-top: 2rem;

    display: flex;
    align-items: end;
    gap: 1rem;
}


.mini-chart span {
    flex: 1;

    background: linear-gradient(
        to top,
        #2864ff,
        #75a0ff
    );

    border-radius: 5px 5px 0 0;
}


.mini-chart span:nth-child(1) {
    height: 35%;
}


.mini-chart span:nth-child(2) {
    height: 50%;
}


.mini-chart span:nth-child(3) {
    height: 42%;
}


.mini-chart span:nth-child(4) {
    height: 68%;
}


.mini-chart span:nth-child(5) {
    height: 55%;
}


.mini-chart span:nth-child(6) {
    height: 88%;
}


.health-ui {
    width: 170px;
    height: 170px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--white);

    background: rgba(255,255,255,0.08);

    border: 1px solid rgba(255,255,255,0.1);

    box-shadow: 0 0 50px rgba(40,210,170,0.15);
}


.health-ui i {
    color: #45d7b5;

    font-size: 3rem;
}


.health-ui strong {
    margin-top: 1rem;

    font-size: 2.4rem;
}


.health-ui small {
    color: #7891a0;
}


.ai-ui {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 1.5rem;

    color: #a58fff;
}


.ai-circle {
    width: 130px;
    height: 130px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border: 1px solid rgba(165,143,255,0.3);

    box-shadow:
        0 0 70px rgba(124,92,255,0.25),
        inset 0 0 40px rgba(124,92,255,0.1);

    font-size: 3.5rem;
}


.ai-ui span {
    font-size: 1rem;

    letter-spacing: 0.14em;
}


.project-info {
    padding: 2.5rem;

    display: flex;
    justify-content: space-between;
    gap: 2rem;
}


.project-info span {
    color: #8390a3;

    font-size: 0.95rem;
    font-weight: 800;

    letter-spacing: 0.1em;
}


.project-info h3 {
    margin-top: 0.6rem;

    font-family: "Manrope", sans-serif;

    font-size: 2.3rem;
}


.project-info p {
    max-width: 300px;

    color: var(--text-light);

    font-size: 1.25rem;
}


.project-info a {
    align-self: end;

    white-space: nowrap;

    color: var(--primary);

    font-size: 1.2rem;
    font-weight: 700;
}


/* =========================================================
   TESTIMONIALS
========================================================= */

.testimonial-grid {
    display: grid;

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

    gap: 2rem;
}


.testimonial-card {
    padding: 3.5rem;

    border: 1px solid var(--border);

    border-radius: 20px;

    background: var(--white);

    transition: var(--transition);
}


.testimonial-card:hover {
    box-shadow: var(--shadow);

    transform: translateY(-5px);
}


.featured-testimonial {
    color: var(--white);

    background: var(--dark);

    border-color: var(--dark);
}


.quote-icon {
    color: var(--primary);

    font-size: 2rem;

    margin-bottom: 2rem;
}


.testimonial-card p {
    min-height: 130px;

    color: #667489;

    font-size: 1.45rem;
}


.featured-testimonial p {
    color: #9aa9bc;
}


.testimonial-author {
    display: flex;
    align-items: center;

    gap: 1.2rem;

    margin-top: 2rem;

    padding-top: 2rem;

    border-top: 1px solid var(--border);
}


.featured-testimonial .testimonial-author {
    border-top-color: rgba(255,255,255,0.08);
}


.avatar {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: var(--white);

    background: var(--primary);

    font-weight: 700;
}


.testimonial-author strong {
    display: block;

    font-size: 1.3rem;
}


.testimonial-author span {
    display: block;

    color: #8793a5;

    font-size: 1.1rem;
}


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

.final-cta {
    position: relative;

    overflow: hidden;

    color: var(--white);

    background:
        radial-gradient(circle at 70% 30%, rgba(36,99,255,0.28), transparent 30%),
        var(--dark);

    padding: 11rem 0;
}


.cta-container {
    position: relative;
    z-index: 2;

    min-height: 400px;

    display: flex;
    align-items: center;
}


.cta-content {
    max-width: 720px;
}


.cta-content h2 {
    margin: 2rem 0;

    font-family: "Manrope", sans-serif;

    font-size: clamp(4rem, 5vw, 6.5rem);

    line-height: 1.05;

    letter-spacing: -0.05em;
}


.cta-content h2 span {
    display: block;

    color: #6e9aff;
}


.cta-content p {
    max-width: 580px;

    color: #8796aa;

    font-size: 1.6rem;

    margin-bottom: 3rem;
}


.btn-white {
    color: var(--dark);

    background: var(--white);
}


.btn-white:hover {
    background: #dfe8f8;

    transform: translateY(-3px);
}


.cta-orb {
    position: absolute;

    right: 5%;
    top: 50%;

    width: 390px;
    height: 390px;

    transform: translateY(-50%);

    border: 1px solid rgba(110,154,255,0.2);

    border-radius: 50%;
}


.cta-orb div {
    position: absolute;

    inset: 20%;

    border: 1px solid rgba(110,154,255,0.16);

    border-radius: 50%;
}


.cta-orb div:nth-child(2) {
    inset: 35%;
}


.cta-orb div:nth-child(3) {
    inset: 47%;

    background: rgba(36,99,255,0.25);

    border: none;

    box-shadow: 0 0 80px rgba(36,99,255,0.5);
}


/* =========================================================
   FAQ
========================================================= */

.faq-section {
    background: var(--light);
}


.faq-list {
    max-width: 900px;

    margin: auto;
}


.faq-item {
    background: var(--white);

    border: 1px solid var(--border);

    border-radius: 12px;

    margin-bottom: 1rem;

    overflow: hidden;
}


.faq-question {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    padding: 2.2rem 2.5rem;

    border: none;

    background: transparent;

    color: var(--text);

    text-align: left;

    font-size: 1.45rem;
    font-weight: 700;
}


.faq-question i {
    color: var(--primary);

    transition: var(--transition);
}


.faq-item.active .faq-question i {
    transform: rotate(45deg);
}


.faq-answer {
    display: none;

    padding: 0 2.5rem 2.5rem;
}


.faq-item.active .faq-answer {
    display: block;
}


.faq-answer p {
    color: var(--text-light);

    font-size: 1.35rem;
}


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

.contact-section {
    background: var(--white);
}


.contact-box {
    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    background: var(--dark);

    border-radius: 28px;

    overflow: hidden;

    box-shadow: 0 35px 80px rgba(7,17,31,0.15);
}


.contact-info {
    padding: 6rem;
}


.contact-info h2 {
    margin: 2rem 0;

    color: var(--white);

    font-family: "Manrope", sans-serif;

    font-size: 4.5rem;

    line-height: 1.1;

    letter-spacing: -0.04em;
}


.contact-info h2 span {
    display: block;

    color: #6e9aff;
}


.contact-info > p {
    color: #8190a4;

    font-size: 1.45rem;
}


.contact-details {
    margin-top: 4rem;
}


.contact-details > a,
.contact-details > div {
    display: flex;

    align-items: center;

    gap: 1.5rem;

    margin-bottom: 2rem;
}


.contact-detail-icon {
    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

    border-radius: 11px;

    color: #6e9aff;

    background: rgba(36,99,255,0.13);
}


.contact-details small {
    display: block;

    color: #64758b;

    font-size: 1rem;
}


.contact-details strong {
    display: block;

    color: #d7e0ed;

    font-size: 1.25rem;
}


.contact-form-wrap {
    padding: 5rem;

    background: #f8fafc;
}


.modern-contact-form {
    width: 100%;
}


.form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1.5rem;
}


.form-group {
    margin-bottom: 1.8rem;
}


.form-group label {
    display: block;

    margin-bottom: 0.7rem;

    color: #344156;

    font-size: 1.2rem;
    font-weight: 700;
}


.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;

    border: 1px solid #dfe5ee;

    outline: none;

    padding: 1.35rem 1.5rem;

    border-radius: 9px;

    color: var(--text);

    background: var(--white);

    font-size: 1.3rem;

    transition: var(--transition);
}


.form-group textarea {
    resize: vertical;
}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary);

    box-shadow: 0 0 0 4px rgba(36,99,255,0.08);
}


.form-submit {
    border: none;
}


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

.site-footer {
    color: #8290a3;

    background: #050d18;

    padding-top: 7rem;
}


.footer-top {
    display: grid;

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

    gap: 6rem;

    padding-bottom: 6rem;

    border-bottom: 1px solid rgba(255,255,255,0.07);
}


.footer-logo {
    margin-bottom: 2rem;
}


.footer-brand > p {
    max-width: 350px;

    color: #66768c;

    font-size: 1.3rem;
}


.social-links {
    display: flex;

    gap: 0.8rem;

    margin-top: 2.5rem;
}


.social-links a {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    color: #7f8da1;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 9px;

    transition: var(--transition);
}


.social-links a:hover {
    color: var(--white);

    background: var(--primary);

    border-color: var(--primary);
}


.footer-column {
    display: flex;
    flex-direction: column;

    gap: 1.2rem;
}


.footer-column h4 {
    margin-bottom: 1rem;

    color: var(--white);

    font-family: "Manrope", sans-serif;

    font-size: 1.35rem;
}


.footer-column a {
    width: fit-content;

    color: #718096;

    font-size: 1.25rem;

    transition: var(--transition);
}


.footer-column a:hover {
    color: var(--white);

    transform: translateX(3px);
}


.footer-bottom {
    min-height: 80px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    font-size: 1.1rem;
}


.footer-bottom div {
    display: flex;
    gap: 2rem;
}


.footer-bottom a:hover {
    color: var(--white);
}


/* =========================================================
   BACK TO TOP
========================================================= */

.back-top {
    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 500;

    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

    color: var(--white);

    background: var(--primary);

    border: none;

    border-radius: 10px;

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition: var(--transition);
}


.back-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal {
    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


.reveal.visible {
    opacity: 1;

    transform: translateY(0);
}


.delay-1 {
    transition-delay: 0.1s;
}


.delay-2 {
    transition-delay: 0.2s;
}


.delay-3 {
    transition-delay: 0.3s;
}


.delay-4 {
    transition-delay: 0.4s;
}


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

@media (max-width: 1200px) {

    .main-nav {
        gap: 1.6rem;
    }

    .nav-link {
        font-size: 1.25rem;
    }

    .hero-container {
        gap: 4rem;
    }

    .section-grid {
        gap: 5rem;
    }

    .why-grid {
        gap: 5rem;
    }

}


@media (max-width: 1050px) {

    .main-nav,
    .nav-cta {
        display: none;
    }

    .mobile-menu-btn {
        display: block;
    }

    .main-nav.mobile-active {
        position: fixed;

        top: 86px;
        left: 0;

        width: 100%;
        height: calc(100vh - 86px);

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        padding: 2rem;

        background: #07111f;

        overflow-y: auto;
    }

    .main-nav.mobile-active .nav-link {
        padding: 1.8rem 0;

        border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .nav-link.active::after {
        display: none;
    }

    .nav-dropdown {
        width: 100%;
    }

    .dropdown-menu {
        position: static;

        width: 100%;

        display: none;

        opacity: 1;
        visibility: visible;

        transform: none;

        box-shadow: none;

        margin-top: 1rem;
    }

    .nav-dropdown:hover .dropdown-menu {
        display: block;
    }

    .hero-container {
        grid-template-columns: 1fr;
    }

    .hero-content {
        text-align: center;
    }

    .eyebrow {
        justify-content: center;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions,
    .hero-trust {
        justify-content: center;
    }

    .hero-visual {
        min-height: 500px;
    }

    .services-grid {
        grid-template-columns: 1fr 1fr;
    }

    .service-featured {
        grid-row: auto;

        min-height: 450px;
    }

    .industries-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .project-large {
        grid-row: auto;
    }

    .testimonial-grid {
        grid-template-columns: 1fr 1fr;
    }

    .contact-box {
        grid-template-columns: 1fr;
    }

}

.project-image {
    position: relative;
    overflow: hidden;
}

.project-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.project-card:hover .project-image img {
    transform: scale(1.05);
}

.project-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(10, 18, 35, 0.65);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transition: all 0.35s ease;
}

.project-card:hover .project-overlay {
    opacity: 1;
}

.project-overlay i {
    font-size: 13px;
}

@media (max-width: 768px) {

    html {
        font-size: 58%;
    }

    .section-padding {
        padding: 8rem 0;
    }

    .nav-wrapper {
        height: 74px;
    }

    .site-header.scrolled {
        background: rgba(7,17,31,0.97);
    }

    .main-nav.mobile-active {
        top: 74px;
        height: calc(100vh - 74px);
    }

    .hero {
        min-height: auto;
        padding-top: 74px;
    }

    .hero-container {
        padding: 8rem 0 10rem;
    }

    .hero-title {
        font-size: clamp(4rem, 12vw, 5.5rem);
    }

    .hero-description {
        font-size: 1.55rem;
    }

    .hero-visual {
        min-height: 430px;
    }

    .dashboard-card {
        width: 92%;
    }

    .floating-ai {
        left: -2%;
    }

    .floating-cloud {
        right: -2%;
    }

    .floating-badge {
        right: 0;
    }

    .orbit-one {
        width: 400px;
        height: 400px;
    }

    .orbit-two {
        width: 300px;
        height: 300px;
    }

    .hero-bottom-inner {
        justify-content: center;
    }

    .hero-bottom-inner > span {
        display: none;
    }

    .client-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .section-grid,
    .why-grid {
        grid-template-columns: 1fr;
    }

    .about-image-box {
        min-height: 430px;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .stat-item {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-featured {
        min-height: 450px;
    }

    .solutions-header {
        flex-direction: column;
        align-items: start;
    }

    .solution-process {
        grid-template-columns: 1fr 1fr;
        gap: 4rem 2rem;
    }

    .process-line {
        display: none;
    }

    .industries-grid {
        grid-template-columns: 1fr 1fr;
    }

    .why-cards {
        grid-template-columns: 1fr 1fr;
    }

    .portfolio-heading {
        flex-direction: column;
        align-items: start;
    }

    .testimonial-grid {
        grid-template-columns: 1fr;
    }

    .testimonial-card p {
        min-height: auto;
    }

    .cta-container {
        min-height: 500px;
    }

    .cta-orb {
        width: 300px;
        height: 300px;

        right: -100px;
        opacity: 0.5;
    }

    .contact-info {
        padding: 4rem 3rem;
    }

    .contact-form-wrap {
        padding: 3rem;
    }

    .footer-top {
        grid-template-columns: 1fr 1fr;

        gap: 4rem;
    }

    .footer-bottom {
        flex-direction: column;

        justify-content: center;

        padding: 2rem 0;
    }

}


@media (max-width: 520px) {

    .container {
        width: min(91%, 100%);
    }

    .brand {
        width: 140px;
    }

    .hero-container {
        padding-top: 6rem;
    }

    .hero-title {
        font-size: 4rem;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-trust {
        flex-direction: column;
    }

    .hero-trust div {
        flex-wrap: wrap;
        justify-content: center;

        gap: 1rem;
    }

    .hero-visual {
        min-height: 380px;
    }

    .dashboard-card {
        padding: 1.4rem;

        transform: none;
    }

    .floating-card {
        padding: 0.9rem;

        transform: scale(0.82);
    }

    .floating-ai {
        left: -25px;
    }

    .floating-cloud {
        right: -25px;
    }

    .floating-badge {
        top: 0;
        right: -10px;

        transform: scale(0.8);
    }

    .chart-area {
        height: 160px;
    }

    .client-row {
        grid-template-columns: 1fr 1fr;
    }

    .about-main-card {
        width: 82%;

        padding: 2.5rem;
    }

    .about-main-card strong {
        font-size: 2.7rem;
    }

    .about-points {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-item {
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .stat-item:last-child {
        border-bottom: none;
    }

    .solution-process {
        grid-template-columns: 1fr;
    }

    .process-item p {
        max-width: none;
    }

    .industries-grid {
        grid-template-columns: 1fr;
    }

    .why-cards {
        grid-template-columns: 1fr;
    }

    .project-image,
    .project-large .project-image {
        min-height: 300px;
    }

    .project-info {
        flex-direction: column;
    }

    .project-info a {
        align-self: start;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-info h2 {
        font-size: 3.7rem;
    }

    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-bottom div {
        flex-direction: column;

        align-items: center;

        gap: 0.7rem;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

}

/* ================= GLOBAL COUNTRY SWITCHER ================= */
.global-switcher{position:relative;margin-left:14px;z-index:1200}
.global-switcher-toggle{display:flex;align-items:center;gap:9px;min-width:62px;justify-content:center;border:1px solid rgba(255,255,255,.18);background:#075dcc;color:#fff;border-radius:8px;padding:8px 11px;font:inherit;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 4px 12px rgba(7,93,204,.2)}
.global-code{letter-spacing:.3px}
.global-switcher-toggle i{font-size:10px;transition:transform .2s ease}
.global-switcher:hover .global-switcher-toggle i,.global-switcher:focus-within .global-switcher-toggle i,.global-switcher.open .global-switcher-toggle i{transform:rotate(180deg)}
.global-switcher-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:255px;padding:8px;border-radius:12px;background:#fff;box-shadow:0 18px 50px rgba(7,17,31,.2);border:1px solid rgba(7,17,31,.08);opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .2s ease}
.global-switcher:hover .global-switcher-menu,.global-switcher:focus-within .global-switcher-menu,.global-switcher.open .global-switcher-menu{opacity:1;visibility:visible;transform:translateY(0)}
.global-switcher-menu a{display:block;padding:11px 13px;border-radius:9px;color:#1f2937;text-decoration:none;font-size:14px;font-weight:600;line-height:1.25}
.global-switcher-menu a:hover,.global-switcher-menu a.active{background:#eaf2ff;color:#075dcc}
.footer-location-links{display:flex;flex-direction:column;gap:8px;margin-top:28px;max-width:360px}
.footer-location-links h4{margin:0 0 6px;font-size:18px}
.footer-location-links a{color:inherit;text-decoration:none;opacity:.9}
.footer-location-links a:hover{text-decoration:underline;opacity:1}
@media(max-width:1050px){
 .global-switcher{margin:12px 0 0;width:100%}
 .global-switcher-toggle{width:100%;justify-content:center}
 .global-switcher-menu{position:static;display:none;opacity:1;visibility:visible;transform:none;width:100%;margin-top:7px}
 .global-switcher:focus-within .global-switcher-menu,.global-switcher.open .global-switcher-menu{display:block}
}

/* ===== Final footer + language switcher layout ===== */
.footer-top {
  grid-template-columns: minmax(220px, 1.45fr) minmax(120px, .8fr) minmax(170px, 1fr) minmax(300px, 1.9fr) minmax(110px, .75fr);
  gap: 2.8rem;
  align-items: start;
}
.footer-location-column { min-width: 0; }
.footer-location-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.4rem;
  row-gap: .9rem;
}
.footer-location-grid a { width: auto; line-height: 1.45; }
.footer-column { min-width: 0; }
.footer-column a { line-height: 1.45; }
.footer-bottom { margin-top: 0; }
#google_translate_element { position: fixed; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.goog-te-banner-frame.skiptranslate { display: none !important; }
body { top: 0 !important; }
.goog-te-gadget { font-size: 0 !important; }
@media (max-width: 1250px) {
  .footer-top { grid-template-columns: 1.4fr 1fr 1.1fr 1.6fr; }
  .footer-top > .footer-column:last-child { grid-column: 4; }
}
@media (max-width: 900px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-top > .footer-column:last-child { grid-column: auto; }
  .footer-location-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
}
.global-switcher-menu { max-height: 420px; overflow-y: auto; }

/* ===== Industry dropdown + final footer alignment ===== */
.nav-dropdown .dropdown-menu { max-height: 520px; overflow-y: auto; }
@media (min-width: 1251px) {
  .footer-top { grid-template-columns: 1.35fr .8fr .8fr 1.65fr .75fr; gap: 2.2rem; }
  .footer-location-grid { grid-template-columns: 1fr; }
}