body {font-family: "Ubuntu", sans-serif; color: white; background-color: black; margin: 0; font-size: 16px;}

*{box-sizing: border-box;}
a { color: white; text-decoration: none; transition: .3s;}
a:hover { color: #0278a8; text-decoration: none;}

h1, h2, h3, h4, h5, h6, input { font-family: "Ubuntu", sans-serif;}
h1, h2{font-size: 36px; letter-spacing: 1px;}

h1 span, h2 span{ color: #F68B1F;}
p{font-size: 18px; letter-spacing: 1px;}
ul{padding: 0;}
ul, li{ display: inline-block;}

.button::after{ content: ""; width: 0; height: 100%; display: inline-block; background-color: #0278a8; transition: .3s; border-radius: 40px; position: absolute; top: 0; left: 50%; transform: translate(-50%, 0%); z-index: 0;}
.button:hover::after{ width: 100%; left: 0;  transform: translate(0%, 0%);}
.button a{ font-size: 18px; font-weight:500; letter-spacing: 1px; border: 2px solid #FFF; line-height: 46px; display: inline-block; padding: 0 30px; border-radius: 40px; position: relative; z-index: 1;}
.button a:hover{border: 2px solid #0278a8; color: white;}

.nav-main{width: 100%; float: left; position: absolute; left: 0; top: 0; border-bottom: 1px solid #5A5A5A; text-align: center; padding: 20px 50px; z-index: 10;}
.nav-main .logo{ width: 240px; float: left;}
.nav-main .logo img{ max-width: 100%; height: auto; display: block;}
.nav-main .mobile-menu{display: none;}
.nav-main .Nav{ width: auto; display: inline-block; margin-top: 20px;}
.nav-main .Nav li{margin: 0 20px;}
.nav-main .Nav a{ letter-spacing: 2px; text-transform: uppercase; font-size: 14px;}
.nav-main .Nav a.act{color: #0278a8;}
.nav-main .request-quote{ width: auto; float: right; margin-top: 21px; position: relative; overflow: hidden; display: none;}
.nav-main .request-quote a{ font-size: 16px; font-weight:500; letter-spacing: 1px; border: 2px solid #FFF; line-height: 46px; display: inline-block; padding: 0 30px; border-radius: 40px; position: relative; z-index: 1;}
.nav-main .request-quote a:hover{border: 2px solid #0278a8; color: white;}

.container{max-width: 1380px; margin: 0 auto;}

header{ width: 100%; float: left; text-align: center; position: relative; overflow: hidden; padding: 200px 50px 240px 50px; min-height: 600px; display: flex; align-items: center; justify-content: center;}
header::before{content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url("../images/header-bg.png") no-repeat bottom; background-size: 100% 100%; z-index: 0;}
header .social{ position: absolute; top: 50%; right: -9%; transform: translate(0%, -50%);  rotate: 90deg;}
header .social a{ font-size: 12px; font-weight: 600; letter-spacing: 2px; color:white; text-transform: uppercase; margin: 0 15px;}
header .social a:hover{ color: white;}
header .caption{ width: 100%; float: left; position: relative; z-index: 1; margin-top: 60px; max-width: 900px;}
header .caption h2{ width: auto; display: inline-block; font-size: 16px; background-color: rgba(205, 94, 0, 0.3); color: #f16e01; font-weight: 500; letter-spacing: 3px; margin: 10px 0; padding: 8px 22px; border-radius: 20px; white-space: nowrap;}
header .caption h1{ width: 100%; float: left; font-size: 70px; font-weight: 300; margin: 20px 0; letter-spacing: 3px; line-height: 1.2;}
header .caption p{ font-size: 26px; font-weight: 400; display: block; color: #0459A2; line-height: 1.4; margin: 15px 0;}
header .caption .contact-btn{ width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; position: relative; margin-top: 35px; margin-left: 0;}
header .caption .contact-btn > div{ display: flex; align-items: center;}
header .caption .contact-btn .button{position: relative; background-color: #F68B1F; border-radius: 40px;}
header .caption .contact-btn .button a{border: 2px solid #F68B1F; white-space: nowrap;}
header .caption .contact-btn .button a:hover{border: 2px solid #0459A2;}
header .caption .contact-btn .button::after{ background-color: #0459A2;}
header .caption .contact-btn a{font-size: 16px; text-transform: uppercase; position: relative; font-weight: 500; line-height: 50px;}
header .caption .contact-btn a .pinkBg {background-color: #027db9 !important; background-image: linear-gradient(90deg, #027db9, #fd8b55);}
header .caption .contact-btn a .arw{height:40px; width:40px; position:absolute; top:50%; left:95%; text-align:center; margin:-20px 0 0 20px; border-radius:100px; z-index:1; display: flex; align-items: center; justify-content: center;}
header .caption .contact-btn a .arw img{ width: 24px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
header .caption .contact-btn a .arw .ripple{ position:absolute; width:120px; height:120px; z-index:-1; left:50%; top:50%; opacity:0; margin:-60px 0 0 -60px; border-radius:100px; -webkit-animation:ripple 1.8s infinite; animation:ripple 1.8s infinite}
@-webkit-keyframes ripple{0%{ opacity:1; -webkit-transform:scale(0); transform:scale(0)} 100%{opacity:0; -webkit-transform:scale(1); transform:scale(1)}}
@keyframes ripple{ 0%{opacity:1; -webkit-transform:scale(0); transform:scale(0)} 100%{opacity:0; -webkit-transform:scale(1); transform:scale(1)}}
header .caption .contact-btn a .ripple:nth-child(2){ animation-delay:.3s; -webkit-animation-delay:.3s}
header .caption .contact-btn a .ripple:nth-child(3){animation-delay:.6s; -webkit-animation-delay:.6s}
header .caption .font-14{font-size: 14px; font-weight: 400; display: block; color: #ffffff;  letter-spacing: 2px; margin-top: 25px; padding: 0 20px;}

header .computer-main{ width: 49%; float: left; position: relative; z-index: 1; margin: 100px 0;}
header .computer-main .laptop{ position: relative; z-index: 1;}
header .computer-main .service-icons{ width: 90%; height: 90%; position: absolute; left: 5%; top: 10%; z-index: 0;}
header .computer-main .service-icons .icon{position: absolute; transition: .3s;}
header .computer-main .service-icons .icon1{top: -15%; left: 9%; animation: animation1 1.8s infinite;}
header .computer-main .service-icons .icon2{top: -15%; left: 42%; animation: animation2 1.5s infinite;}
header .computer-main .service-icons .icon3{top: -15%; right: 13%; animation: animation3 2s infinite;}
header .computer-main .service-icons .icon4{top: 15%; right: 8%; animation: animation4 1.5s infinite;}
header .computer-main .service-icons .icon5{top: 55%; right: 9%; animation: animation5 2s infinite;}
header .computer-main .service-icons .icon6{top: 60%; left: 8%; animation: animation6 1.5s infinite;}
header .computer-main .service-icons .icon7{top: 25%; left: 7.5%; animation: animation7 1.5s infinite;}
header .computer-main .service-icons .icon8{top: 25%; left: 7.5%; animation: animation7 1.5s infinite;}

header .service-icons{ width: 90%; height:80%; position: absolute; left: 5%; top: 20%; z-index: 0;}
header .service-icons .icon{position: absolute; transition: .3s;}
header .service-icons .icon img{ width:80px; height: auto; display: block;}
header .service-icons .icon1{top: 5%; left: 12%; animation: animation1 1.8s infinite;}
header .service-icons .icon2{top: 35%; left: 5%; animation: animation1 1.5s infinite;}
header .service-icons .icon3{top: 65%; left: 20%; animation: animation1 2s infinite;}
header .service-icons .icon4{top: 75%; left: 46%; animation: animation1 1.5s infinite;}
header .service-icons .icon5{top: 5%; right: 12%; animation: animation1 2s infinite;}
header .service-icons .icon6{top: 30%; right: 5%; animation: animation1 1.5s infinite;}
header .service-icons .icon7{top: 60%; right: 20%; animation: animation1 1s infinite;}
header .service-icons .icon8{top: 0%; left: 45%; animation: animation1 1s infinite;}

@keyframes animation1 {  0%   {margin-top: 0px;}  50%  {margin-top: 15px;}  100%  {margin-top: 0px;} }


.about-section{ width: 100%; float: left; padding: 100px 50px; display: flex; flex-wrap: wrap; align-items: center;}
.about-section .container { width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 40px;}
.about-section .pic{ width: calc(48% - 20px); float: left; flex: 0 1 auto;}
.about-section .pic img{ max-width: 100%; height: auto; float: left; display: block; border-radius: 12px;}
.about-section .about-text{ width: calc(52% - 20px); float: left; padding-top: 0; flex: 1 1 300px;}
.about-section .about-text h2{ display: block; font-weight: 500; margin: 0 0 15px 0; font-size: 32px;}
.about-section .about-text p{letter-spacing: 1px; line-height: 26px; margin: 15px 0; font-size: 16px;}
.about-section .about-text .stats{width: 100%; float: left; display: flex; justify-content: space-between; gap: 20px; margin: 30px 0; flex-wrap: wrap;}
.about-section .about-text .stat-col{flex: 1 1 0; min-width: 140px; text-align: left; color: #ffffff; padding: 20px 15px 20px 22px; background-color: rgba(0, 0, 0, 0.2); border-radius: 8px; border-left: 4px solid #F68B1F;}
.about-section .about-text .stat-col strong{display: block; font-size: 28px; line-height: 1; font-weight: 700; margin-bottom: 5px; color: #F68B1F;}
.about-section .about-text .stat-col span{display: block; font-size: 13px; line-height: 1.6; letter-spacing: 0.08em; color: #cccccc;}
.about-section .about-text .block {width: 100%; float: left; position: relative; background-color: #0F0F0F; padding: 20px 25px; margin-top: 20px; border-radius: 8px;}
.about-section .about-text .block::before {content: ""; width: 5px; height: 100%; position: absolute; left: 0; top: 0; background-color: #F68B1F; border-radius: 0 5px 5px 0;}
.about-section .about-text .block p { margin: 8px 0; font-size: 15px;}
.about-section .about-text .block .font-14{font-size: 12px; font-weight: 400; display: block; color: #aaaaaa; letter-spacing: 1px; margin-top: 10px;}
.about-section .how-we-work{ width: 100%; float: left; margin-top: 60px; text-align: center; padding: 0;}
.about-section .how-we-work .ttl{display: block; font-size: 20px; font-weight: 500; margin: 0 0 30px 0; color: #F68B1F; text-align: center; letter-spacing: 2px;}
.about-section .how-we-work .steps{ width: 100%; display: flex; justify-content: space-between; gap: 25px; flex-wrap: wrap;}
.about-section .how-we-work .steps div{width: calc(33.333% - 18px); min-width: 240px; background-color: rgba(0, 0, 0, 0.3); border: 1px solid #262626; border-radius: 16px; padding: 24px 20px; overflow: hidden; position: relative; transition: all 0.3s ease;}
.about-section .how-we-work .steps div:hover { box-shadow: 0 10px 30px rgba(246, 139, 31, 0.1); border-color: #F68B1F; transform: translateY(-3px);}

.about-section .how-we-work .steps icon{ display: block; margin-bottom: 12px;}
.about-section .how-we-work .steps h3{ font-size: 18px; font-weight: 500; color: #ffffff; margin: 12px 0 8px 0;}
.about-section .how-we-work .steps p{ display: block; font-size: 14px; font-weight: 400; color: #bbbbbb; margin-top: 8px; line-height: 1.5;}
.about-section .how-we-work .more-btn{width: auto; display: inline-block; position: relative; margin-top: 40px;}
.about-section .how-we-work .more-btn a{ border-color: #F68B1F; transition: all 0.3s ease;}
.about-section .how-we-work .more-btn a:hover{border-color: #0278a8; color: white;}
.about-section .how-we-work .more-btn::after{ background-color: #F68B1F;}
.about-section .how-we-work .more-btn a::after{ content: ""; width: 37px; height: 16px; position: relative; display: inline-block; left: 8px; background: url("../images/btn-arw.png") no-repeat;}

.services-section{ width: 100%; float: left; padding: 150px 0; background: url("../images/service-bg.webp") no-repeat center; background-size: 100% 100%; text-align: center;}
.services-section .service-text{ width: 100%; float: left; padding-top: 50px; text-align: center;}
.services-section .service-text h2{ display: block; font-weight: 500; margin: 0;}
.services-section .service-text p{letter-spacing: 1px; line-height: 26px;}
.services-section .service-icons{ width: 100%; float: left; text-align: center;}
.services-section .service-icons .icon{ width: 146px; max-width: 32%; display: inline-block; position: relative; background-color: rgba(0, 0, 0, 0.3); padding: 30px 0; border-radius: 20px 0 20px 20px; border: 1px solid #262626; overflow: hidden; margin:10px;}
.services-section .service-icons .icon img{width: 60px; height: auto; position: relative; z-index: 1;}
.services-section .service-icons .icon::after{ content: ""; width: 40px; height: 40px; position: absolute; top: 0; right: 0; border-right: 1px solid #F68B1F; border-top: 1px solid #F68B1F;}
.services-section .service-icons .icon:hover::after{width: 100%; height: 100%; background-color:#F68B1F; border: 0;}
.services-section .service-icons .icon:hover::before { content: ""; position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; background: #40E0D0; background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
    background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0); animation: glowing01 5s linear infinite; transform-origin: center; animation: glowing2 3s linear infinite;}
    @keyframes glowing2 { 0% {left: 100%; top: 0;} 25% {left:100%; top: 100%;} 50% {left: 0%; top: 100%;} 75% {left: 0%; top: 0%;} 100% { left: 100%; top: 0; } }
.services-section .service-icons .icon:hover::after{ content: ""; width: calc(100% - 2px); height: calc(100% - 2px); position: absolute; left: 1px; top: 1px; border-radius: 20px 0 20px 20px; background-color: black;}

.services-section .service-card-list{ width: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 40px 0;}
.services-section .service-card{ width: calc(33.333% - 20px); min-width: 260px; background-color: rgba(0, 0, 0, 0.3); border: 1px solid #262626; border-radius: 24px; padding: 28px 24px; text-align: left; overflow: hidden; position: relative;}
.services-section .service-card .card-icon{ width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; background-color: rgba(4, 106, 174, 1); border-radius: 30px;}
.services-section .service-card .card-icon img{ width: 32px; height: 32px;}
.services-section .service-card h3{ font-size: 20px; font-weight: 500; line-height: 1.2; margin: 0 0 12px; color: #ffffff;}
.services-section .service-card p{ margin: 0; color: #cccccc; line-height: 1.7; letter-spacing: 0.02em; font-size: 15px;}
.services-section .service-card:hover{ box-shadow: 0 20px 60px rgba(246, 139, 31, 0.15);}
.services-section .more-btn{width: auto; display: inline-block; position: relative;}
.services-section .more-btn a{ border-color: #F68B1F;}
.services-section .more-btn a:hover{border-color: #046aae; background-color: #046aae;}
.services-section .more-btn a::after{ content: ""; width: 37px; height: 16px; position: relative; display: inline-block; left: 8px; background: url("../images/btn-arw.png") no-repeat;}

/* Portfolio styles */
.portfolio-section{ width: 100%; float: left; padding: 80px 0 60px 0; text-align: center;}
.portfolio-section .portfolio-text{ text-align: center; margin-bottom: 30px;}
.portfolio-section .portfolio-grid{ display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin:40px 0;}
.portfolio-section .project-card{ background-color: rgba(0,0,0,0.35); border: 1px solid #262626; border-radius: 16px; overflow: hidden; width: calc(33.333% - 20px); min-width: 260px; text-align: left;}
.portfolio-section .project-card a{ display: block;}
.portfolio-section .project-card img{ width: 100%; height: 180px; object-fit: cover; display: block;}
.portfolio-section .project-card h3{ font-size: 18px; color: #ffffff; margin: 14px 16px 8px;}
.portfolio-section .project-card p{ color: #cccccc; font-size: 14px; margin: 0 16px 18px; line-height: 1.6;}
.portfolio-section .project-card:hover{ box-shadow: 0 18px 50px rgba(0,0,0,0.4); transform: translateY(-4px); transition: .25s ease;}
.portfolio-section .more-btn{width: auto; display: inline-block; position: relative;}
.portfolio-section .more-btn a{ border-color: #F68B1F;}
.portfolio-section .more-btn a:hover{border-color: #046aae; background-color: #046aae;}
.portfolio-section .more-btn a::after{ content: ""; width: 37px; height: 16px; position: relative; display: inline-block; left: 8px; background: url("../images/btn-arw.png") no-repeat;}

@media (max-width: 900px){
  .portfolio-section .project-card{ min-width: 240px;}
  .services-section .service-card{ min-width: 240px;}
}
@media (max-width: 520px){
  .project-card{ width: 100%; }
}

.benefits-section {width: 100%; float: left; padding: 100px 0; text-align: center;}
.benefits-section h2{ display: block; font-weight: 500;}
.benefits-section .benefit-list{ width: 100%; display:block;}
.benefits-section .benefit-list .benefit{ width: 31%; height: 170px; display: inline-block; position: relative; background-color: rgba(0, 0, 0, 0.3); padding:20px 0 30px 0; margin:1%; border-radius: 20px 0 20px 20px; border: 1px solid #262626; overflow: hidden;}
.benefits-section .benefit-list .benefit .card{width: 100%; display: block; position: relative; z-index: 1; letter-spacing: 1px; padding:0 25px; text-shadow: 1px 1px 0px black;}
.benefits-section .benefit-list .benefit .card h2{ font-size: 20px; font-weight: 500;}
.benefits-section .benefit-list .benefit .card p{margin: 0; font-size: 16px;}
.benefits-section .benefit-list .benefit::before { content: ""; position: absolute; width: 50px; height: 50px; margin: -25px 0 0 -25px; background: #40E0D0; background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
  background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0); animation: glowing01 5s linear infinite; transform-origin: center; animation: glowing 5s linear infinite;}
  @keyframes glowing { 0% {left: 0; top: 0;} 25% {left:100%; top: 0;} 50% {left: 100%; top: 100%;} 75% {left: 0%; top: 100%;} 100% { left: 0; top: 0; } }
.benefits-section .benefit-list .benefit::after{ content: ""; width: calc(100% - 2px); height: calc(100% - 2px); position: absolute; left: 1px; top: 1px; border-radius: 20px 0 20px 20px; background-color: black;}


/*-----Testimonial-------*/
.testimonial-section{width: 100%; float: left; padding: 100px 0 200px 0; text-align: center; background: url("../images/section-bg.png") no-repeat center; background-size: 100% 100%; }
.testimonial-section .container{ position: relative;}
.testimonial-section .quote{ width: auto; position: absolute; right: 10%; bottom: 0; z-index: 1;}
.testimonial-section .line{ font-size: 30px; letter-spacing: 10px; line-height: 10px;}
.testimonial-section h2{ display: block; font-weight: 500;}
.testimonial-section .testimonial {position: relative; max-width: 1100px; width: 100%; padding: 11px 0 2px; margin: 0 auto; overflow: hidden;}
.testimonial-section .testimonial .slide {display: block; align-items: center; justify-content: center; flex-direction: column; row-gap: 10px; height: auto; min-height: 100%; width: auto; box-sizing: border-box; padding: 20px 0px;  background-color: rgba(0, 0, 0, 0.3); border-radius: 20px 0 80px 20px; border: 1px solid #262626;}
.testimonial-section .testimonial .slide .rating{ width: 100%; display: block; text-align: left; padding: 0 20px 10px;}
.testimonial-section .slide p {text-align: left; padding: 0 20px; margin: 0; font-size: 15px; font-weight: 300; color: white; font-style: italic; letter-spacing: 2px;}
.testimonial-section .slide .details {display: block; flex-direction: column; align-items: center; text-align: left; padding: 0 20px}
.testimonial-section .details .name {display: block; font-size: 16px; font-weight: 500; color: #F68B1F; padding: 20px 0 5px;}
.testimonial-section .details .job {display: block; font-size: 12px; font-weight: 400; color: #ffffff; text-transform: uppercase;}
  
.testimonial-section .nav-btn {width: 37px; height: 16px; position: absolute; top: 110%; left: 46.5%; right: auto; background: url("../images/btn-arw.png") no-repeat center;  -webkit-transform: scaleX(-1); transform: scaleX(-1);}
.testimonial-section  .swiper-button-next{ right: 46.5%; left: auto; background: url("../images/btn-arw.png") no-repeat center;  -webkit-transform: scaleX(1); transform: scaleX(1);}
.testimonial-section .nav-btn:hover {background-color: rgba(0, 0, 0, 0.2);}
.testimonial-section .nav-btn::after, .testimonial-section .nav-btn::before {display: none;}
/* ------testimonial  close-------*/

.faq-section{width: 100%; float: left; text-align:center; padding: 100px 0;}
.faq-section .more-btn{width: auto; display: inline-block; position: relative; margin-top: 30px;}
.faq-section .more-btn a{ border-color: #F68B1F;}
.faq-section .more-btn a:hover{border-color: #046aae; background-color: #046aae;}
.faq-section .more-btn a::after{ content: ""; width: 37px; height: 16px; position: relative; display: inline-block; left: 8px; background: url("../images/btn-arw.png") no-repeat;}
.faq-accordion{max-width: 900px; margin: 40px auto 0; text-align: left;}
.faq-item{border: 1px solid #262626; border-radius: 12px; margin-bottom: 15px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.05);}
.faq-question{width: 100%; border: 0; background: transparent; padding: 10px 24px; font-size: 18px; font-weight: 500; color: #999; text-align: left; cursor: pointer; display: flex; justify-content: space-between; align-items: center;}

.faq-icon{font-size: 24px; color: #F68B1F; transition: transform 0.25s ease;}
.faq-answer{max-height: 0; overflow: hidden; opacity: 0; padding: 0 24px; color: #555; line-height: 1.4; transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;}
.faq-answer p{ padding:0; margin: 0; font-size:16px;}
.faq-item.active .faq-answer{min-height: 80px; opacity: 1; padding: 0 24px 20px;}
.faq-item.active .faq-icon{transform: rotate(45deg);}



.get-quote-section {width: 100%; float: left; padding: 100px 0; text-align: center;}
.get-quote-section h2{ display: block; font-weight: 500;}
.get-quote-section .options{ width: 100%; display: block; padding: 10px 0;}
.get-quote-section .options .button{ width: auto; position: relative; display: inline-block; margin: 0 5px;}
.get-quote-section .options .button a.act, .get-quote-section .options .button a:hover{ border-color: #F68B1F;}
.get-quote-section .options .button::after{ background-color: #F68B1F;}
.get-quote-section .form-main{ width: 60%; display: inline-block; padding: 0 50px; vertical-align: top; text-align: left; border-right: 1px solid #262626;}
.get-quote-section .form-main ul{ width: 100%; display: block; padding: 0; margin: 0;}
.get-quote-section .form-main ul li{ width: 100%; display: inline-block; padding: 5px 0; margin: 0;}
.get-quote-section .form-main ul li input, .get-quote-section .form-main ul li textarea{ width: 100%; display: block; font-family: "Ubuntu", sans-serif; color: #ffffff; font-size: 18px; font-weight: 500; letter-spacing: 1px; border: 1px solid #5A5A5A; background-color: black; padding: 15px 30px; border-radius: 40px;}
.get-quote-section .form-main ul li input:focus, .get-quote-section .form-main ul li textarea{outline: 0;}
.get-quote-section .form-main ul li .button{ width: auto; position: relative; display: inline-block;}
.get-quote-section .form-main ul li .button button{ font-size: 18px; font-weight:500; color: white; letter-spacing: 1px; border: 2px solid #F68B1F; text-transform: uppercase; background-color: transparent; line-height: 50px; display: inline-block; padding: 0 30px; border-radius: 40px; position: relative; z-index: 1; cursor: pointer;}
.get-quote-section .form-main ul li .button button:hover{border: 2px solid #F68B1F;}
.get-quote-section .form-main ul li .button button::before{ content: ""; width:36px; height: 36px; position: relative; top: 10px; margin-right: 10px; display: inline-block; background: url("../images/mail-icon.png") no-repeat center;}
.get-quote-section .form-main ul li .button::after{ background-color: #F68B1F;}

.get-quote-section .skip-main{ width: 40%; display: inline-block; padding: 20px 50px; margin-left: -5px; text-align: left;}
.get-quote-section .skip-main h3{ font-size: 18px; font-weight: 500; margin: 0 0 10px 0;}
.get-quote-section .skip-main p{ font-size: 16px; font-weight: 400; margin: 10px 0; color: #555555;}
.get-quote-section .skip-main span{ font-size: 15px; font-weight: 500; margin-right: 10px; color: #F68B1F; display: inline-block; vertical-align: middle;}

footer{width: 100%; float: left; padding:0; text-align: center; letter-spacing: 1px; position: relative;}
footer .parallax>use{animation:12s linear infinite move-forever}
footer .parallax>use:first-child{animation-delay:-2s}
footer .parallax>use:nth-child(2){animation-delay:-2s;animation-duration:5s; opacity: 0.5;}
footer .parallax>use:nth-child(3){animation-delay:-4s;animation-duration:3s}
@keyframes move-forever{0%{transform:translate(-90px,0)} 100%{transform:translate(85px,0)}}
footer #wave-animation{ width: 100%; height: 100%; position: absolute; overflow: hidden; z-index: -1;}
footer canvas{ position: absolute; bottom:0; left:0; z-index:-1;}

footer .editorial{display:block;width:100%;height:10em;max-height:100vh;margin:0}
footer .logo{ width: 100%; display: block; padding: 15px 0;}
footer .logo img{ width:auto; height: auto;}
footer .nav{ width: 100%; display: block; padding: 20px 0 0 0; color: #F68B1F;}
footer .nav a{ font-size: 16px; text-decoration: none; margin: 0 25px;}
footer .email{ width: 100%; display: block;padding: 30px 0;}
footer .email img{ width: 24px; display: inline-block; vertical-align: middle; margin-right: 5px;}
footer .social{ width: auto; display:inline-block;}
footer .social .button{ width: auto; display: inline-block; position: relative; margin:0 -6px -5px 0; border: 1px solid #5A5A5A;}
footer .social .button::after{border-radius: 0; border-width: 1px;}
footer .social .button a{ padding: 5px 30px; line-height: 46px; border: 0px solid #5A5A5A; color: white;  border-radius: 0;}
footer .social .button a:hover{ border: 0px solid #5A5A5A;}
footer .social .button a img{ display: inline-block; vertical-align: middle;}
footer .copy-right{ width: 100%; display: block; position: relative; padding: 30px; z-index: 1;}


/*----- Inner Pages -------*/
.inner-main{ width: 100%; display: block; padding: 100px 0;}
.inner-header{ width: 100%; display: block; margin-top: 138px;}
.inner-header img{ max-width: 100%; height: auto; display: block;}

.inner-main h1{ font-size: 40px; font-weight: 500; color: white;}
.inner-main p{line-height: 26px;}

.about-main{ width: 100%; display: block; text-align: center; letter-spacing: 1px;}
.about-main .mission-visoin{width: 100%; float: left; display: flex; border-top: 1px solid #5A5A5A;  border-bottom: 1px solid #5A5A5A; margin: 50px 0; text-align: left;}
.about-main .mission-visoin h2{color: #F68B1F; font-size: 30px; font-weight: 500;}
.about-main .mission-visoin h3{color: #0099E5; font-size: 22px; font-weight: 500; margin: 30px 0 -15px 0;}
.about-main .mission{ width: 49%; height: 100%; display: inline-block; padding: 50px 50px 50px 0; background: url(../images/mission-pic.png) no-repeat right bottom; vertical-align: top;}
.about-main .vision{ width: 50%; display: inline-block; border-left: 1px solid #5A5A5A; padding: 50px 0px 50px 50px; background: url(../images/vision-pic.png) no-repeat right bottom; }
.about-main .tagline{ font-size: 30px;}

.services-main{ width: 100%; display: block; text-align: center; letter-spacing: 1px;}
.services-main .services-list{ width: 100%; text-align: center; display: flex; flex-wrap: wrap; margin: 50px 0 0;}
.services-main .services-list .item{ width: 30%; vertical-align: top; position: relative; margin: 30px 1.666%;}
.services-main .services-list .item .card{ width: 100%; height: 100%; top: 0; display: block; padding: 30px; border: 1px solid #5A5A5A; text-shadow: 1px 1px 0px black; border-radius: 20px 0 20px 20px;}
.services-main .services-list .item .card .icon{ width: 190px; height: 95px; position: relative; margin-top: -31px; margin-bottom: 10px; display: inline-block; background-color: black; border: 1px solid #5A5A5A; border-top: 1px solid black; border-radius:0 0 100px 100px; z-index: 1;}
.services-main .services-list .item .card .icon img{ position: relative; top: -20px;}
.services-main .services-list .item .card h3{ font-size: 22px; font-weight: 500; position: relative; z-index: 1;}
.services-main .services-list .item .card p{ font-size: 16px; font-weight: 400; line-height: 22px; position: relative; z-index: 1;}
.services-main .services-list .item .card ul{ list-style: disc;}
.services-main .services-list .item .card li{ font-size: 16px; font-weight: 400; line-height: 22px; position: relative; z-index: 1; display: block; text-align: left; list-style:disc;}
.services-main .services-list .item .card li::before{ content: ""; width: 6px; height: 6px; background-color: #ffffff; display: inline-block; position: relative; top: -2px; margin-right: 10px;}
.services-main .services-list .item .card::after{ content: ""; width: 70px; height: 70px; position: absolute; top: 0; right: 0; border-right: 3px solid #F68B1F; border-top: 3px solid #F68B1F;  transition: 0.3s;}
.services-main .services-list .item .card:hover::after{width: 100%; height: 100%; background-color:#F68B1F; border: 0; border-radius: 20px 0 20px 20px;} 

.portfolio-main{ width: 100%; display: block; text-align: center; letter-spacing: 1px;}
.portfolio-main .portfolio-list{ width: 100%; text-align: center; display: flex; flex-wrap: wrap; margin: 20px 0 0;}
.portfolio-main .portfolio-list .item{ width: 46%; vertical-align: top; position: relative; margin: 30px 2%; text-align: left; overflow: hidden; border-radius: 20px 0 20px 20px;}
.portfolio-main .portfolio-list .item .card{ width: 100%; height: 100%; top: 0; display: block; padding: 20px; border: 1px solid #5A5A5A; text-shadow: 1px 1px 0px black; border-radius: 20px 0 20px 20px;}
.portfolio-main .portfolio-list .item::before { content: ""; position: absolute; width: 100px; height: 100px; margin: -50px 0 0 -50px; background: #40E0D0; background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
    background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0); animation: glowing01 5s linear infinite; transform-origin: center; animation: glowing 5s linear infinite;}
    
.portfolio-main .portfolio-list .item::after{ content: ""; width: calc(100% - 4px); height: calc(100% - 4px); position: absolute; left: 2px; top: 2px; border-radius: 20px 0 20px 20px; background-color: black;}

.portfolio-main .portfolio-list .item .card .thumb{ width: 100%; position: relative; z-index: 1; margin-bottom: 20px;}
.portfolio-main .portfolio-list .item .card .thumb img{ width: 100%; display: block;}
.portfolio-main .portfolio-list .item .card h3{ font-size: 22px; font-weight: 500; position: relative; z-index: 1; margin: 0; padding: 0 20px;}
.portfolio-main .portfolio-list .item .card p{ font-size: 16px; font-weight: 400; line-height: 22px; position: relative; z-index: 1; padding: 0 20px;}
.portfolio-main .portfolio-list .item .card p span{ width: auto; display: inline-block; font-size: 12px; font-weight: 400; text-transform: uppercase; line-height: 20px; padding: 0 10px; margin: 0 5px 0 0; background-color: #00364b; border-radius: 10px;}

.portfolio-main .portfolio-list .item .card .option{ width: 140px; height: 70px; position: absolute; left: 50%; top: 0%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.9); z-index: 1; opacity: 0; transition: 0.6s;}
.portfolio-main .portfolio-list .item .card .option .icon{width: 50%; float: left; padding: 10px;}
.portfolio-main .portfolio-list .item .card:hover .option{opacity: 1; top: 36%; }

  .modal {display: none; position: fixed; z-index: 10; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black;}  
  /* Modal Content */
  .modal-content {position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 90%; max-height: 80vh; max-width: 1200px; overflow: auto;}
  /* The Close Button */
  .close {color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold;}  
  .close:hover, .close:focus {color: #999; text-decoration: none; cursor: pointer;}
  .mySlides {display: none; overflow: hidden;}
  .mySlides img{width: 100%; height: 100%; position: relative; display: block; object-fit: cover; object-position: top center; transition: all 4s ease-in-out;}
  .mySlides:hover img{ object-position: bottom center;}
  
  .caption-container {text-align: center; background-color: black; padding: 2px 16px; color: white;}
  

.career-main{ width: 100%; display: block; text-align: center; letter-spacing: 1px;}
.career-main .career-list{ width: 100%; text-align: center; display: flex; flex-wrap: wrap; margin: 50px 0 0;}
.career-main .career-list .item{ width: 30%; vertical-align: top; position: relative; margin: 1.666%; text-align: left; overflow: hidden; border-radius: 20px 0 20px 20px;}
.career-main .career-list .item::before { content: ""; position: absolute; width: 100px; height: 100px; margin: -50px 0 0 -50px; background: #40E0D0; background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
    background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0); animation: glowing01 5s linear infinite; transform-origin: center; animation: glowing 5s linear infinite;}
    
.career-main .career-list .item::after{ content: ""; width: calc(100% - 4px); height: calc(100% - 4px); position: absolute; left: 2px; top: 2px; border-radius: 20px 0 20px 20px; background-color: black;}
.career-main .career-list .item .card{ width: 100%; height: 100%; top: 0; display: block; padding: 30px 30px 100px 30px; border: 1px solid #5A5A5A; text-shadow: 1px 1px 0px black; border-radius: 20px 0 20px 20px;}
.career-main .career-list .item .card span{ font-size: 16px; color: #F68B1F; font-weight: 400; position: relative; z-index: 1;}
.career-main .career-list .item .card h3{ font-size: 22px; font-weight: 500; position: relative; z-index: 1;}
.career-main .career-list .item .card p{ font-size: 15px; font-weight: 400; line-height: 22px; position: relative; z-index: 1;}
/* .career-main .career-list .item .card::after{ content: ""; width: 70px; height: 70px; position: absolute; top: 0; right: 0; border-right: 3px solid #F68B1F; border-top: 3px solid #F68B1F;  transition: 0.3s;}
.career-main .career-list .item .card:hover::after{width: 100%; height: 100%; background-color:#F68B1F; border: 0; border-radius: 20px 0 20px 20px;}   */
.career-main .career-list .item .card:hover span{ color: #0278a8;} 
.career-main .career-list .item .apply-btn{ width: auto; display: inline-block; position: absolute; bottom: 30px; z-index: 1;}
.career-main .career-list .item .apply-btn a{font-size: 16px; font-weight: 500; line-height: 46px; border: 1px solid #ffffff;}
.career-main .career-list .item .apply-btn a:hover{border: 1px solid #0278a8;}
.career-main .career-list .item .apply-btn a::after{ content: ""; width: 29px; height: 12px; position: relative; display: inline-block; left: 8px; background: url("../images/btn-arw.png") no-repeat; background-size: 100% auto; }

.career-main .share-cv{ width: 97%; display: block; text-align: right; border-radius: 20px; margin:50px 1.5% 80px; border: 1px solid #5A5A5A;  background: url("../images/career-pic.png") no-repeat; background-size: auto 100%; }
.career-main .share-cv .share{ width: auto; display: inline-block; margin:80px 30px; text-align: center;}
.career-main .share-cv .share img{ display: inline-block;}
.career-main .share-cv .share p{ font-size: 30px; font-weight: normal; line-height: normal; letter-spacing: 2px; margin: 25px 0;}
.career-main .share-cv .share p a{ display: block; font-size: 24px; font-weight: 600; background-color: #F68B1F; padding: 13px 30px; border-radius: 30px; margin-top: 15px;}
.career-main .share-cv .share p a:hover{ color: white; background-color: #0278a8;}

.career-main .benefits{ width: 100%; display: block; text-align: center; letter-spacing: 1px;}
.career-main .benefits h1{margin: 0;}
.career-main .benefits-list{ width: 100%; text-align: center; display: flex; flex-wrap: wrap;}
.career-main .benefits-list .item{ width: 22%; vertical-align: top; position: relative; margin: 1.5%;}
.career-main .benefits-list .item .card{ width: 100%; height: 100%; top: 0; display: block; padding: 40px; border: 1px solid #5A5A5A; text-shadow: 1px 1px 0px black; border-radius: 20px 0 20px 20px;}
.career-main .benefits-list .item .card .thumb{ width: 100%; position: relative; z-index: 1; margin-bottom: 20px;}
.career-main .benefits-list .item p{margin: 0;}
.career-main .benefits-list .item .card h3{ font-size: 22px; font-weight: 500; position: relative; z-index: 1;}
.career-main .benefits-list .item .card p{ font-size: 16px; font-weight: 400; line-height: 22px; position: relative; z-index: 1;}
.career-main .benefits-list .item .card::after{ content: ""; width: 70px; height: 70px; position: absolute; top: 0; right: 0; border-right: 3px solid #F68B1F; border-top: 3px solid #F68B1F;  transition: 0.3s;}
.career-main .benefits-list .item .card:hover::after{width: 100%; height: 100%; background-color:#F68B1F; border: 0; border-radius: 20px 0 20px 20px;}

.contact-main{ width: 100%; display: block; text-align: center; letter-spacing: 1px;}
.contact-main .contact{ width: 100%; text-align: center; display: flex; flex-wrap: wrap;}
.contact-main .contact .item{ width: 30%; vertical-align: top; position: relative; margin: 1.666%; border-radius: 20px 0 20px 20px; overflow: hidden;}
.contact-main .contact .item::before { content: ""; position: absolute; width: 70px; height: 70px; margin: -35px 0 0 -35px; background: #40E0D0; background: -webkit-linear-gradient(to right, #FF0080, #FF8C00, #40E0D0);
    background: linear-gradient(to right, #FF0080, #FF8C00, #40E0D0); animation: glowing01 5s linear infinite; transform-origin: center; animation: glowing 5s linear infinite;}
    
.contact-main .contact .item::after{ content: ""; width: calc(100% - 2px); height: calc(100% - 2px); position: absolute; left: 1px; top: 1px; border-radius: 20px 0 20px 20px; background-color: black;}
.contact-main .contact .item .card{ width: 100%; height: 100%; top: 0; display: block; padding: 30px; border: 1px solid #5A5A5A; text-shadow: 1px 1px 0px black; border-radius: 20px 0 20px 20px;}
.contact-main .contact .item .card .icon{ position: relative; z-index: 1;}
.contact-main .contact .item .card span{ display: block; color: #F68B1F; font-size: 20px;  position: relative; z-index: 1; margin: 15px 0;}
.contact-main .contact .item .card h3{ font-size: 20px; font-weight: 400; position: relative; z-index: 1; margin: 0;}
/* .contact-main .contact .item .card::after{ content: ""; width: 70px; height: 70px; position: absolute; top: 0; right: 0; border-right: 3px solid #F68B1F; border-top: 3px solid #F68B1F;  transition: 0.3s;}
.contact-main .contact .item .card:hover::after{width: 100%; height: 100%; background-color:#F68B1F; border: 0; border-radius: 20px 0 20px 20px;}   */
.contact-main .contact .item .card:hover span{ color: #0278a8;}

.contact-main .follow-us{ width: 100%; display: block; text-align: center; letter-spacing: 1px; margin: 130px 0;}
.contact-main .follow-us h4{ display: block; font-size: 22px; font-weight: normal; text-transform: uppercase;}
.contact-main .follow-us .social{ width: auto; display:inline-block;}
.contact-main .follow-us .social .button{ width: auto; display: inline-block; position: relative; margin:0 -6px -5px 0; border: 1px solid #5A5A5A;}
.contact-main .follow-us .social .button::after{border-radius: 0; border-width: 1px;}
.contact-main .follow-us .social .button a{ font-size: 20px; font-weight: 400; padding: 5px 30px; line-height: 60px; border: 0px solid #5A5A5A; color: white;  border-radius: 0;}
.contact-main .follow-us .social .button a:hover{ border: 0px solid #5A5A5A;}
.contact-main .follow-us .social .button a img{ display: inline-block; vertical-align: middle;}

.contact-main .options{ width: 100%; display: block; padding: 10px 0;}
.contact-main .options .button{ width: auto; position: relative; display: inline-block; margin: 0 5px;}
.contact-main .options .button a.act, .contact-main .options .button a:hover{ border-color: #F68B1F;}
.contact-main .options .button::after{ background-color: #F68B1F;}
.contact-main .form-main{ width: 100%; display: block; padding: 0 100px;}
.contact-main .form-main ul{ width: 100%; display: block; padding:0;}
.contact-main .form-main ul li{ width: 50%; display: inline-block; padding: 15px; margin: 0 -2px;}
.contact-main .form-main ul li.full{width: 100%; display: block;}
.contact-main .form-main ul li input, .contact-main .form-main ul li textarea{ width: 100%; display: block; font-family: "Ubuntu", sans-serif; color: #4b4b4b; font-size: 18px; font-weight: 500; letter-spacing: 1px; border: 2px solid #5A5A5A; background-color: black; padding: 22px 30px; border-radius: 40px;}
.contact-main .form-main ul li input:focus, .contact-main .form-main ul li textarea{outline: 0;}
.contact-main .form-main ul li .button{ width: auto; position: relative; display: inline-block;}
.contact-main .form-main ul li .button button{ font-size: 22px; font-weight:500; color: white; letter-spacing: 1px; border: 2px solid #F68B1F; text-transform: uppercase; background-color: transparent; line-height: 66px; display: inline-block; padding: 0 40px; border-radius: 40px; position: relative; z-index: 1; cursor: pointer;}
.contact-main .form-main ul li .button button:hover{border: 2px solid #F68B1F;}
.contact-main .form-main ul li .button button::before{ content: ""; width:40px; height: 40px; position: relative; top: 14px; margin-right: 10px; display: inline-block; background: url("../images/mail-icon.png") no-repeat center;}
.contact-main .form-main ul li .button::after{ background-color: #F68B1F;}


.captcha-field {
    position:relative;
}

.captcha-field .section {
    position:absolute;
    width:180px;
    height:50px;
    color:white;
    top: 24%;
    right: 24px;
    border: 2px solid #5A5A5A;
    font-size: 25px;
    padding-top: 8px;    
    border-radius: 30px;
}

/**** Responsive ****/
@media only screen and (max-width: 1500px) {    
    header{ padding: 150px 0 150px 0;}
    header .social{right: -12%;}
    header .computer-main{scale: 0.8;}

    header .service-icons .icon1{top: 5%; left: 8%;}
    header .service-icons .icon2{top: 35%; left: 1%;}
    header .service-icons .icon3{top: 65%; left: 16%;}
    header .service-icons .icon4{top: 75%; left: 42%;}
    header .service-icons .icon5{top: 5%; right: 8%;}
    header .service-icons .icon6{top: 30%; right: 1%;}
    header .service-icons .icon7{top: 60%; right: 16%;}
}
@media only screen and (max-width: 1400px) {    
    .container{max-width: 1280px;}
    header .social{right: -10%; top: 56%;}
    header .social a{margin: 0 8px;}    
    header .caption h2{ font-size: 35px;}
    header .caption h1{ font-size: 50px;}
    header .caption span{ font-size: 40px;}
    header .computer-main{margin: 50px 0; scale: 0.7;}
    header .computer-main:hover .icon1{top: -42%; left: -2%;}
    header .computer-main:hover .icon2{top: -42%; left: 42%;}
    header .computer-main:hover .icon3{top: -44%; right: -5%;}
    header .computer-main:hover .icon4{top: 15%; right: -10%;}
    header .computer-main:hover .icon5{top: 55%; right: -12%;}
    header .computer-main:hover .icon6{top: 52%; left: -14%;}
    header .computer-main:hover .icon7{top: 12%; left: -12%;}

    .services-section .service-text{padding-right: 5%;}


    .inner-main{padding: 70px 0;}
    .inner-main h1{ font-size: 36px;}

    .about-main .mission-visoin h2{ font-size: 28px;}
    .about-main .mission-visoin h3{ font-size: 20px;}
    .about-main .tagline{ font-size: 28px;}

    .services-main .services-list .item{width: 31%; margin: 25px 1.1%;}
    .services-main .services-list .item .card{padding: 20px;}
    .services-main .services-list .item .card .icon{width: 160px; height: 85px; margin-top: -21px; }
    .services-main .services-list .item .card .icon img{ width: 60px; top: -15px;}

    .career-main .share-cv .share{margin: 40px 30px;}
}


@media only screen and (max-width: 1300px) {   

    .container{max-width: 1200px;}
    .nav-main{padding: 5px 30px;}
    .Nav li{margin: 0 15px;}
    header {padding: 108px 0 108px 0;}
    
    header .caption h2{ font-size: 30px;}
    header .caption h1{ font-size: 50px;}
    header .caption p{ font-size: 24px;}    
    header .computer-main{width: 47%; margin: 70px 0 50px;}
    header .computer-main:hover .icon4{top: 15%; right: -20%;}
    header .computer-main:hover .icon5{top: 55%; right: -22%;}
    header .computer-main:hover .icon6{top: 52%; left: -16%;}
    header .computer-main:hover .icon7{top: 12%; left: -15%;}

    header .service-icons .icon img{ width:60px;}

    .about-section { padding: 80px 30px;}
    .about-section .container { gap: 30px;}
    .about-section .pic{width: calc(42% - 15px);}
    .about-section .about-text{width: calc(58% - 15px); padding-top: 0;}
    .about-section .about-text h2{ font-size: 28px;}

    .services-section, .testimonial-section{background-size: auto 100%;}
    .services-section .service-text { padding-right: 30px; padding-top: 0;}
    .services-section .service-icons .icon{width: 135px; padding: 25px 0; margin: 8px;}

    .benefits-section {padding: 50px 0;}
    .testimonial-section .quote{ right: 4%;}
    .testimonial-section .testimonial{padding: 30px 0;}
    .get-quote-section {padding: 50px 0;}    

    footer .logo img{ width: 230px;}

    .inner-header{margin-top: 109px;}

    .career-main .share-cv .share p a{font-size: 22px;}
}

@media only screen and (max-width: 1200px) {   
    .nav-main .Nav{width: 400px; height: 100vh; position: absolute; top: -20px; right: 0; background-color: rgba(0, 0, 0, 0.95); z-index: 2; display:none;}
    .nav-main .request-quote{ right: 100px;}   
    .nav-main .mobile-menu { display: inline-block; width: 50px; position: absolute; right: 20px; top: 35px; z-index: 3;}
    .nav-main .mobile-menu a{ width: 40px; height: 40px; display: block;}
    .nav-main .mobile-menu a .icon{ width: 100%; height: 5px; display: block; background-color: white; border-radius: 3px; position: relative;}
    .nav-main .mobile-menu a .icon::before{ content: ""; width: 75%; height: 5px; display: block; background-color: white; border-radius: 3px; position: relative; top: 12px; transition: .3s;}
    .nav-main .mobile-menu a .icon::after{ content: ""; width: 50%; height: 5px; display: block; background-color: white; border-radius: 3px; position: relative; top: 20px; transition: .3s;}
    .nav-main .mobile-menu a:hover .icon::before, .nav-main .mobile-menu a:hover .icon::after{ width: 100%;}

    .nav-main .Nav ul{ width: 100%; padding-top: 100px;}
    .nav-main .Nav li{margin: 20px 40px; display: block; text-align: left;}   
    .nav-main .Nav li a{ font-size: 20px;}

    .container{max-width: 94%;}

    header { padding: 120px 30px;}
    header .social { right: -14%; top: 54%;}
    header .caption{width: 100%;}
    header .caption h2 {font-size: 20px; letter-spacing: 2px;}
    header .caption h1 {font-size: 40px; margin: 15px 0;}
    header .caption p {font-size: 20px; margin: 12px 0;}
    header .caption .contact-btn{ margin-top: 20px; gap: 15px;}
    header .caption .contact-btn a { font-size: 14px; line-height: 45px; padding: 0 25px;}
    header .caption .font-14{font-size: 12px; margin-top: 20px;}

    header .computer-main {width: 50%;} 

    .about-main .tagline{ font-size: 24px;}
}

@media only screen and (max-width: 1100px) {   

    h1, h2{font-size: 32px;}
    p {font-size: 16px;}

    header .caption{margin-top: 80px;}
    header .computer-main .laptop{ width: 100%;}
    header .computer-main:hover .service-icons .icon1 {top: -50%; left: -2%;}
    header .computer-main:hover .service-icons .icon2{top: -50%; left: 42%;}
    header .computer-main:hover .service-icons .icon3{top: -52%; right: -5%;}
    header .computer-main:hover .service-icons .icon4{top: 15%; right: -15%;}
    header .computer-main:hover .service-icons .icon5{top: 55%; right: -17%;}
    header .computer-main:hover .service-icons .icon6{top: 48%; left: -20%;}
    header .computer-main:hover .service-icons .icon7{top: 8%; left: -20%;}

    /* .about-section .pic{width: 100% !important;} */
    /* .about-section .about-text{width: 100% !important; padding-top: 30px;} */
    .about-section .about-text p{ line-height: 22px;}
    .about-section .about-text h2{ font-size: 26px; margin-bottom: 12px;}
    .about-section .stats { gap: 15px;}
    .about-section .stat-col { min-width: 100px; padding: 15px 12px 15px 16px;}
    .about-section .stat-col strong { font-size: 24px;}
    .about-section .stat-col span { font-size: 12px;}
    .about-section .how-we-work .steps div { /*width: calc(50% - 13px);*/ min-width: 200px;}
    .about-section .how-we-work .ttl { font-size: 18px; margin-bottom: 25px;}

    .services-section{padding: 100px 0;}
    .services-section .service-text p{ line-height: 22px;}
    .services-section .service-icons .icon{width: 108px;}
    .services-section .service-icons .icon img{ width: 50px;}

    .benefits-section .benefit-list .benefit .card h2{font-size: 18px;}
    .benefits-section .benefit-list .benefit .card p {font-size: 15px;}

    .testimonial-section .quote{ right: 2%;}
    .testimonial-section .quote img{width: 80px; height: auto;}
    .testimonial-section .slide p{padding: 0 15px; font-size: 18px;}
    .testimonial-section .nav-btn{left: 45%; right: auto;}
    .testimonial-section .swiper-button-next{right: 45%; left: auto;}

    .get-quote-section .form-main{padding: 0 40px 0 0;}

    .about-main .mission, .about-main .vision{background-size: 100% auto;}

    .portfolio-main .portfolio-list .item .card:hover .option{top: 28%;}

    .career-main .career-list{margin: 30px 0 0;}
    .career-main .career-list .item{ width: 47%; margin:15px 1.5%;}

    .career-main .share-cv .share { margin: 20px 20px 0;}
    .career-main .share-cv .share img{ width: 80px;}
    .career-main .share-cv .share p{ font-size: 26px;}
    .career-main .share-cv .share p a {font-size: 18px;}

    .contact-main .contact .item:first-child{ width: 100%;}
    .contact-main .contact .item{ width: 47%; margin: 1.5%;}

    .contact-main .form-main{padding: 0 0;}

}
@media only screen and (max-width: 1000px) {   
    header { padding: 80px 25px; min-height: 500px;}
    header .social{ display: none;}
    header .caption{ width: 100%; padding-left: 0; margin-top: 40px; margin-bottom: 0px; text-align: center;}
    header .caption h2 {font-size: 18px; padding: 6px 18px; margin: 8px 0;}
    header .caption h1 {font-size: 36px; margin: 15px 0;}    
    header .caption p {font-size: 18px; margin: 10px 0;}
    header .caption .contact-btn{ margin-top: 20px; gap: 12px;}
    header .caption .contact-btn a { font-size: 13px; line-height: 44px; padding: 0 22px;}
    header .caption .contact-btn a .arw{margin: -20px 0 0 12px; width: 35px; height: 35px;}
    header .caption .contact-btn a .arw img{ width: 20px;}
    header .caption .contact-btn a .arw .ripple{width: 90px; height: 90px; margin: -45px 0 0 -45px;}
    header .caption .font-14{font-size: 11px; margin-top: 15px;}
    header .computer-main{ display: none;}

    header .service-icons .icon1{top: 5%; left: 5%;}
    header .service-icons .icon2{top: 35%; left: -3%;}
    header .service-icons .icon3{top: 65%; left: 12%;}
    header .service-icons .icon4{top: 75%; left: 38%;}
    header .service-icons .icon5{top: 5%; right: 4%;}
    header .service-icons .icon6{top: 30%; right: -3%;}
    header .service-icons .icon7{top: 60%; right: 12%;}


    .services-section, .testimonial-section { background-size: 150% 100%; }
    .services-section .service-text{width: 100%; padding-right: 0px;}
    .services-section .service-icons{ width: 100%;}
    .benefits-section .benefit-list .benefit{width: 47.5%;}

    .testimonial-section .nav-btn{left: 44%; right: auto;}
    .testimonial-section .swiper-button-next{right: 44%; left: auto;}

    footer .nav a{margin: 0 20px;}    

    .inner-main { padding: 40px 0;}
    .inner-main h1 {font-size: 32px;}
    .about-main .mission-visoin{margin: 30px 0;}
    .about-main .mission-visoin h2 {font-size: 24px; margin: 0;}    
    .about-main .mission{padding: 30px 30px 30px 0;}
    .about-main .vision{padding: 30px 0px 30px 30px;}

    .about-main .tagline{font-size: 20px;}

    .services-main .services-list{margin: 30px 0 0;}
    .services-main .services-list .item { width: 47%; margin: 25px 1.4%;}

    .portfolio-main .portfolio-list .item{margin: 15px 2%;}
    .portfolio-main .portfolio-list .item .card{padding: 15px;}
    .portfolio-main .portfolio-list .item .card h3, .portfolio-main .portfolio-list .item .card p{padding: 0 15px;}


    .career-main .career-list .item .card{padding: 20px 20px 100px 20px;}

    .career-main .share-cv .share img {width: 55px;}
    .career-main .share-cv .share p {font-size: 20px; margin: 15px 0;}
    .career-main .share-cv .share p a {font-size: 16px; padding: 13px 20px;}

    .career-main .benefits-list .item .card{padding: 20px;}
    
}

@media only screen and (max-width: 767px) {    
    .nav-main .logo { width: 140px;}
    .nav-main .request-quote{margin-top: 10px; width: auto;}
    .nav-main .request-quote a{ font-size: 12px; line-height: 38px; padding: 0 12px;}
    .nav-main .mobile-menu{width: 35px; top: 27px;}
    .nav-main .mobile-menu a { width: 30px; height: 30px;}
    .nav-main .mobile-menu a .icon{ height: 3px;}
    .nav-main .mobile-menu a .icon::before{ height: 3px; top: 11px;}
    .nav-main .mobile-menu a .icon::after{ height: 3px; top: 19px;}
    .nav-main .Nav{width: 100%;}
    .nav-main .Nav ul{padding-top: 50px;}
    .nav-main .Nav li a{font-size: 16px;}
    header { padding: 60px 20px 100px; min-height: 450px;}
    header .caption h2 { font-size: 16px; letter-spacing: 2px; padding: 6px 16px; margin: 6px 0;}
    header .caption h1 {font-size: 28px; letter-spacing: 2px; margin: 12px 0;}
    header .caption p {font-size: 15px; margin: 8px 0;}
    header .caption .contact-btn{margin-top: 18px; gap: 10px; flex-direction: column;}
    header .caption .contact-btn > div { width: 100%; display: block; text-align: center;}
    header .caption .contact-btn a { font-size: 13px; line-height: 42px; width: auto; display: inline-block; align-items: center; justify-content: center;}
    header .caption .contact-btn .button { width: 100%;}
    header .caption .contact-btn .button a { width: 100%;}    
    header .caption .contact-btn a .arw{ width: 28px; height: 28px; margin: -14px -25px 0 10px; left: auto; right: 10px;}
    header .caption .contact-btn a .arw img{width: 16px;}
    header .caption .contact-btn a .arw .ripple{width: 70px; height: 70px; margin: -35px 0 0 -35px;}
    header .caption .font-14{font-size: 11px; margin-top: 15px;}

    header .service-icons .icon img{ width:50px;}

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

    .about-section{padding: 50px 0;}
    .about-section .about-text p { font-size: 15px; line-height: 20px;}
    .about-section .about-text .stat-col{min-width: 100%; padding: 10px 10px 10px 15px;}

    .about-section .how-we-work .steps div {min-width: 100%;}

    .services-section .service-card { min-width: 100%;}
    .portfolio-section .project-card {min-width: 100%;}

    .testimonial-section .slide p{padding: 0 50px; font-size: 18px;}

    .get-quote-section .options{padding: 0px 0;}
    .get-quote-section .options .button{margin:0 3px 10px;}
    .get-quote-section .options .button a{ font-size: 15px; font-weight: 400px; padding: 0 20px; line-height: 40px;}
    .get-quote-section .form-main{padding: 0; width: 100%; border-right:0;}
    .get-quote-section .form-main ul li{padding:10px;}
    .get-quote-section .form-main ul li input, .get-quote-section .form-main ul li textarea{padding: 15px 20px; font-size: 16px;}
    .get-quote-section .form-main ul li .button button{font-size: 18px; padding: 0 30px; line-height: 50px;}
    .get-quote-section .form-main ul li .button button::before{ top: 6px; float: left;}
    .get-quote-section .skip-main{ width: 100%; margin-left: 0px; padding: 20px 0px;}

    footer .logo img {width: 180px;}
    footer .nav a {margin: 0 10px; font-size: 14px;}
    footer .email{font-size: 14px;}
    footer .social .button a{padding: 3px 20px; line-height: 40px; font-size: 16px;}
    footer .copy-right{ font-size: 14px;}

    .inner-header {margin-top: 77px;}
    .inner-main h1 {font-size: 26px;}
    .inner-main p {line-height: 22px;}

    .services-main .services-list .item .card h3{font-size: 18px;}
    .services-main .services-list .item .card p{font-size: 15px;}
    .services-main .services-list .item .card .icon{width: 130px; height: 65px;}
    .services-main .services-list .item .card .icon img { width: 50px; top: -12px;}

    .portfolio-main .portfolio-list .item .card .option{ width: 100px; height: 50px;}
    .portfolio-main .portfolio-list .item .card:hover .option{top: 25%;}
    .portfolio-main .portfolio-list .item .card .option .icon img{ width: 30px; height: auto;}

    .career-main .career-list { margin: 0;}    

    .career-main .share-cv{margin: 30px 1.5% 50px;}
    .career-main .benefits-list .item{width: 47%;}
    .career-main .benefits-list .item .card{padding: 20px 10px;}
    .career-main .benefits-list .item .card .thumb {margin-bottom: 10px;}
    .career-main .benefits-list .item .card .thumb img{ width: 40px; height: auto;}

    .contact-main .contact .item .card .icon img{ width: 40px; height: auto;}
    .contact-main .contact .item .card span{font-size: 18px;}
    .contact-main .contact .item .card h3{font-size: 15px;}

    .contact-main .follow-us{margin: 80px 0;}
    .contact-main .follow-us h4{font-size: 18px;}
    .contact-main .follow-us .social .button a{font-size: 18px; padding: 0px 20px; line-height: 46px;}
    
    .contact-main .options{padding: 0px 0;}
    .contact-main .options .button{margin:0 3px 10px;}
    .contact-main .options .button a{ font-size: 15px; font-weight: 400px; padding: 0 20px; line-height: 40px;}
    .contact-main .form-main ul li{padding:10px;}
    .contact-main .form-main ul li input, .contact-main .form-main ul li textarea{padding: 15px 20px; font-size: 16px;}
    .contact-main .form-main ul li .button button{font-size: 18px; padding: 0 30px; line-height: 50px;}
    .contact-main .form-main ul li .button button::before{ top: 6px; float: left;}
}

@media only screen and (max-width: 600px) {
    header .caption h1 {font-size: 24px; line-height: 1.3; letter-spacing: 1px;}
    header .caption p {font-size: 14px; margin: 8px 0;}
    header .caption .contact-btn { margin-top: 16px;}
    header .caption .font-14{font-size: 10px;}
}

@media only screen and (max-width: 500px) {
    .nav-main { padding: 5px 15px; }
    .nav-main .logo { width: 120px;}
    .nav-main .request-quote{ position: absolute; right: 50px; width: auto; margin-top: 10px;}
    .nav-main .mobile-menu{ width: 30px; right: 15px;}
    .nav-main .request-quote a { font-size: 11px; line-height: 36px; padding: 0 8px;}

    header { padding: 50px 15px 80px; min-height: 400px;}    
    header .caption h1 {font-size: 22px; line-height: 1.25; letter-spacing: 0.5px; margin: 10px 0;}
    header .caption h2 { font-size: 14px; padding: 5px 14px; margin: 5px 0;}
    header .caption p {font-size: 13px; margin: 6px 0;}
    header .caption .contact-btn { margin-top: 12px; gap: 8px;}
    header .caption .contact-btn a { font-size: 12px; line-height: 40px; padding: 0 16px;}
    header .caption .contact-btn a .arw{ width: 25px; height: 25px;}
    header .caption .contact-btn a .arw img{ width: 14px;}
    header .caption .contact-btn a .arw .ripple{width: 60px; height: 60px; margin: -30px 0 0 -30px;}
    header .caption .font-14{font-size: 12px; margin-top: 12px;}

    header .service-icons .icon img{ width: 40px;}
    header .service-icons .icon1{top: 20%; left: 0%;}
    header .service-icons .icon2{top: 52%; left: 0%;}
    header .service-icons .icon3{top: 68%; left: 10%;}
    header .service-icons .icon4{top: 78%; left: 33%;}
    header .service-icons .icon5{top: 20%; right: 0%;}
    header .service-icons .icon6{top: 55%; right: -3%;}
    header .service-icons .icon7{top: 72%; right: 5%;}
    header .service-icons .icon8{top: 55%; left: 20%;}
    @keyframes animation1 {  0%   {margin-top: 0px;}  50%  {margin-top: 10px;}  100%  {margin-top: 0px;} }
    
    .container {max-width: 90%;}

    .about-section .pic{width: 100%;}
    .about-section .about-text{width: 100%; padding-top: 30px;}
    .about-section .about-text .block{padding: 0 20px;}

    .services-section {background-size: 100% auto;  background-repeat: repeat-y; background-position: top center; background: transparent; padding: 52px 0; text-align: center;}
    .services-section .service-icons .icon { width: 180px; max-width: 44%;}

    .benefits-section .benefit-list .benefit{width: 100%; height: auto; margin: 10px 0; padding: 10px 0 20px 0;}
    .benefits-section .benefit-list .benefit .card p {font-size: 14px;}

    .testimonial-section { background-image:none; background-color: #070707; border-top: 1px solid #5A5A5A; border-bottom: 1px solid #5A5A5A; padding: 50px 0 100px 0;}
    .testimonial-section .slide p { padding: 0 20px; font-size: 16px;}
    .testimonial-section .details .name{font-size: 18px;}
    .testimonial-section .details .job {font-size: 12px;}

    .testimonial-section .testimonial{border-radius: 30px 0 150px 30px;}
    .testimonial-section .quote{ bottom: 5%;}
    .testimonial-section .quote img { width: 50px;}
    .testimonial-section .nav-btn {width: 30px; left: 38%; right: auto; background-size: 100% auto; }
    .testimonial-section .swiper-button-next { right: 38%; left: auto;}
        
    .get-quote-section .form-main ul li{ width: 100%; padding:10px 0;}

    footer .social .button{ width: 49%; margin: 0.5%; float: left;}   

    .inner-header{overflow: hidden;}
    .inner-header img{ max-width: 130%; margin-left: -15%;}

    .about-main .mission-visoin{ display: block;}
    .about-main .mission, .about-main .vision{width: 100%; padding: 20px 0px 20px 0;}
    .about-main .vision{border-left: 0px solid #5A5A5A; border-top: 1px solid #5A5A5A;}

    .services-main .services-list .item { width: 100%; margin: 25px 0%;}

    .portfolio-main .portfolio-list .item {margin: 15px 0; width: 100%;}
    .portfolio-main .portfolio-list .item .card:hover .option{top: 25%;}

    .career-main .career-list .item{width: 100%; margin: 15px 0;}
    .career-main .career-list .item .card { padding: 20px;}
    .career-main .career-list .item .apply-btn{position: relative; bottom: 0;}

    .career-main .share-cv{background-size: 100% auto; background-position: center bottom; text-align: center;}
    .career-main .share-cv .share{margin: 0; padding:20px 0 200px;}
    .career-main .share-cv .share p { font-size: 18px;}
    .career-main .share-cv .share p a{ font-size: 15px; padding: 12px 15px}

    .contact-main .contact .item{ width: 100%;}
    .contact-main .follow-us .social .button{ width: 49%;  margin: 0.5%;  float: left;}
    .contact-main .follow-us .social .button a { font-size: 16px; padding: 0px;}
    .contact-main .form-main ul li{ width: 100%; padding:10px 0;}

    .captcha-field .section {    
      width:110px;
      height:40px;      
      top: 22%;
      right: 2%;      
      font-size: 18px;
      padding-top: 7px;
      border-radius: 20px;
}
}
.grecaptcha-badge {visibility: hidden;}

:root {
      --bg-color: #f9f9f9;
      --card-bg: #fff;
      --text-color: #333;
      --heading-color: #222;
      --muted-color: #555;
      --link-color: #0077cc;
      --link-hover: #005fa3;
      --shadow: rgba(0,0,0,0.1);
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg-color: #121212;
        --card-bg: #1e1e1e;
        --text-color: #ddd;
        --heading-color: #fff;
        --muted-color: #aaa;
        --link-color: #4da8ff;
        --link-hover: #82c3ff;
        --shadow: rgba(0,0,0,0.6);
      }
    }

    .blog-section {
      max-width: 1200px;
      margin: 0 auto;
      padding: 40px 20px;
    }

    .blog-section h2 {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 30px;
      color: var(--heading-color);
    }

    .blog-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }

    .blog-card {
      background: var(--card-bg);
      border-radius: 12px;
      box-shadow: 0 4px 12px var(--shadow);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s;
    }

    .blog-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 18px var(--shadow);
    }

    .blog-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .blog-content {
      padding: 20px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .blog-content h3 {
      text-align: left;
      font-size: 1.2rem;
      margin: 0 0 15px;
      color: var(--heading-color);
    }

    .blog-content p {
      text-align: left;
      font-size: 0.95rem;
      line-height: 1.6;
      color: var(--muted-color);
      margin-bottom: auto;
    }

    .blog-content a {
      margin-top: 15px;
      text-decoration: none;
      font-weight: bold;
      color: var(--link-color);
      transition: color 0.2s ease;
      align-self: flex-start;
    }

    .blog-content a:hover {
      color: var(--link-hover);
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .blog-section {
        padding: 20px;
      }

      .blog-content h3 {
        font-size: 1.1rem;
      }

      .blog-content p {
        font-size: 0.9rem;
      }
    }