/*
    color shades
    1 #F54D70 
    2 #F88099
    3 #FBB4C2
    4 #FEE7EC
    5 font-family: 'Righteous', cursive;
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Righteous&display=swap');
:root {--main-bg-color: #2f2e3c; --font-color: #fff}
html{scroll-behavior: smooth; scroll-padding-top: 80px;}
*{margin:0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; user-select:none}
body::-webkit-scrollbar{background-color:transparent;height:20px;width:7px;}
body::-webkit-scrollbar-thumb{background-color:#eed453; border-radius: 10px;}
body::-webkit-scrollbar-button:vertical:increment{display:none}
body::-webkit-scrollbar-button:vertical:decrement{display:none}
body{background:var(--main-bg-color) !important; overflow-x:hidden; width:100%}
#header{width:100%; height: 80px; position: fixed; top: 0; left: 0; background:#2f2e3c; padding-inline: 5%; z-index: 3;}
#head_left{width:15%; float: left; height:100%;}
#head_left img{height: 80px;}
#head_center{width:70%; float: left; height:100%;}
#head_center ul{list-style-type: none; text-align: center; display: flex; justify-content: center; padding: 10px; margin-top:20px;}
#head_center ul li{height: 100%; display: inline; position: relative; padding-inline:30px;}
#head_center ul li span{transition: transform 0.3s; position: absolute; left:0; bottom: -20px; width:100%; transform: scale(0); height: 1px; background: #eed453;}
#head_center ul li a{display: block; text-transform: uppercase; color: var(--font-color); text-decoration: none; font-weight: 500; font-size: 14px;}
#head_center ul li:hover span{transform: scale(1);}
#head_center ul li:hover a{color:#eed453}
#head_center ul li a i{margin-right: 5px;}

#head_right{width:15%; float: right; height:100%;}
#head_right a{transition: all 0.3s; float: right; border:1px solid #eed453; border-radius: 5px; font-size: 14px; font-weight: 500; text-decoration: none; color: #eed453; padding: 10px 40px; margin-top:20px}
#head_right a:hover{background:#eed453; color:#2e2e2e; box-shadow: 0px 2px 10px #eed453;}
#head_right a i{margin-right: 5px;}

.slider{height:100vh; width:100%; background:#2f2e3c; /*background-image: linear-gradient(to right top, #333333, #323232, #303030, #2f2f2f, #2e2e2e);*/}
#particles-js{position: absolute; top:0px; left:0px; width:100%; height: 100%;}

#slider_left{width:50%; height: 100%; float: left; position: relative;}
#slider_left div{position: absolute; top:50%; left:50%; padding-left:10%; width:100%; transform: translate(-50%,-50%); background:transparent;}
#slider_left div h1{font-size: 80px; width:100%; font-family: 'Righteous', cursive; color:#eed453; line-height: 90px;}
#slider_left div p{font-size: 18px; color:var(--font-color); line-height: 30px; word-spacing: 2px; letter-spacing: 1px; margin-block: 40px 60px;}
#slider_left div a{padding: 15px 25px; background: #eed453; font-weight: 600; color:var(--main-bg-color); text-decoration: none;}

#slider_right{width:50%; height: 100%; float: right; position: relative;}
#slider_right div{position: absolute; top:50%; left:50%; width:100%; transform: translate(-50%,-50%); height:80%; background:transparent}
#slider_right div img{width:100%; height: 100%; border:none; outline:none; object-fit:contain;}

#scroll{cursor: pointer; user-select: none; position: absolute; bottom: 20px; z-index: 2; left:50%; padding:15px 10px; transform: translateX(-50%); height:80px; width: 50px; border-radius: 30px; border:1px solid #eed453}
#scroll div{width:1px; height:100%; animation: scroll 2s linear infinite; background: #eed453; margin-inline:auto;}

@keyframes scroll {
    0%{height: 0px;}
    100%{height: 100%;}
}

#top_arrow{transition:all 0.3s; display:none; right:20px; bottom:20px; position:fixed; z-index:3; box-sizing:border-box}
#top_arrow i{transition:all 0.3s; height:40px; width:40px; background: #eed453; line-height:40px; color:#2f2e3c; text-align:center}
#top_arrow i:hover{border-radius:100%; cursor:pointer}

.section_title{color:#eed453; font-family: 'Righteous', cursive; text-align: center; font-size: 36px; margin-bottom: 60px;}

#wrapper{padding: 80px 5% 60px 5%;}
.wrapper{padding: 80px 5% 60px 5%;}
#services,#testimonial,#roadmap,#portfolio,#statistics{height:auto; width:100%; padding-bottom: 60px;}
.service_area{border-top:5px solid #2f2e3c; transition: all 0.3s; width:23%; height:420px; overflow: hidden; position: relative; margin: 20px 1%; float: left; background:rgb(255,255,255,0.05); padding:40px 20px; text-align: center; border-radius: 10px;}
.service_thumb{transition: all 0.3s; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; padding: 20px; background:#2f2e3c; width: 100px; height:100px; margin: auto;}
.service_thumb img{width: 100%; height:100%; object-fit: contain;}
.service_area h3{color:#eed453; margin-block:10px 20px; font-size:16px;}
.service_area p{color:#fff; font-size:14px; line-height: 25px; word-spacing: 1px; margin-bottom: 40px;}
.service_area:hover h3{color:#fff}
.service_area:hover .service_thumb{border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; background: #eed453;}
.service_area:hover{transform: scale(1.05); border-top:5px solid #eed453}
.service_area_footer{transition: all 0.3s; position: absolute; bottom:-60px; left:0px; background:#eed453; width:100%; height: 60px;}
.service_area_footer img{width:40px; height:40px; margin-inline: 5px; margin-top:10px;}
.service_area:hover .service_area_footer{bottom: 0px;}
.service_area:hover .service_area_footer img:nth-child(1){animation: service_img 0.5s;}
.service_area:hover .service_area_footer img:nth-child(2){animation: service_img 0.7s;}
.service_area:hover .service_area_footer img:nth-child(3){animation: service_img 0.9s;}
.service_area:hover .service_area_footer img:nth-child(4){animation: service_img 1.1s;}
.service_area:hover .service_area_footer img:nth-child(5){animation: service_img 1.3s;}

@keyframes service_img{
    0%{margin-bottom: -100px;}
    100%{margin-bottom: 0px;}
}

#testimonial{position: relative; overflow-x: hidden; padding-inline: 20px;}
.testimonial_thumb{position: absolute; top: 55%; transform: translateY(-55%); color:#eed453; z-index:2; font-size:40px; cursor:pointer}
.testimonial_thumb_left{left:0px}
.testimonial_thumb_right{right:0px}
#testimonial_slider{width:300%; transition: all 0.3s;}
.testimonial_area{background: #fff; width:10.11%; margin:20px 0.5% 0px 0.5%; min-height:630px; border-radius: 10px; float: left; text-align: center; padding-bottom: 20px;}
/* old one
.testimonial_area{background: #fff; width:31.33%; margin:20px 1% 0px 1%; min-height:630px; border-radius: 10px; float: left; text-align: center; padding-bottom: 20px;}
*/.testimonial_upper{height:200px; width:100%; border-top-left-radius: 10px; border-top-right-radius: 10px; background:rgb(0,0,0,0.1);}
.testimonial_upper h3{line-height: 140px; font-size:36px; color:var(--main-bg-color); font-family: 'Righteous', cursive;}
.testimonial_area img{height:150px; width:150px; border:7px solid #fff; border-radius: 100%; object-fit: cover; object-position: center center; margin-top:-80px;}
.testimonial_area h4{margin-bottom: 5px;}
.testimonial_area h5{margin-bottom: 20px;}
.testimonial_area p{margin-block: 15px; padding-inline: 25px; line-height: 25px; font-size: 14px;}

#roadmap_left{width:50%; height: 600px; float: left;}
#roadmap_left img{width: 100%; height: 100%; object-fit: contain;}
#roadmap_right{width:50%; height: 600px; float: right;}
.roadmap_content{width:50%; padding: 20px; float: left; height:270px;}
.roadmap_content i{background:rgb(255,255,255,0.05); text-shadow: 0px 2px 10px #eed453; height:50px; width:50px; line-height: 50px; text-align: center; border-radius: 5px; font-size: 16px; color:#eed453}
.roadmap_content h4{margin-block: 15px; color:#f5f5f5; font-size:14px; font-weight: 450;}
.roadmap_content p{color:#ccc; font-size: 12px; line-height: 22px; word-spacing: 1px; letter-spacing: 1px;}

#portfolio ul{list-style-type: none;}
#portfolio ul li{width:48%; height: 450px; position: relative; float: left; margin:15px 1%;}
.portfolio_main_img{transition: all 0.3s; width:100%; height: 100%; border-radius: 10px;}
#portfolio ul li:hover .portfolio_main_img{transform: perspective(2500px) rotateY(30deg); filter: brightness(0.3);}
.portfolio_full_img{opacity: 0; position: absolute; border-radius: 10px; top:0px; right:0px; height:100%; width:0px; transform: perspective(1000px) rotateY(-45deg);}
#portfolio ul li:hover .portfolio_full_img{transition: all 0.3s; width:35%; opacity: 1;}
.portfolio_contian{transition: all 0.3s; position: absolute; opacity: 0; left:0px; top:60%; width:65%; transform: translateY(-50%); padding-left: 60px;}
#portfolio ul li:hover .portfolio_contian{opacity: 1; top:50%}
.portfolio_contian img{width:100px; height:100px; object-fit: contain;}
.portfolio_contian h3{margin-block: 20px; color:#fff}
.portfolio_contian p{color:#fff; font-size: 13px; line-height: 22px; margin-bottom: 40px;}
.portfolio_contian a{text-decoration: none; background:#eed453; color:#2f2e3c; font-size: 13px; font-weight: 550; padding: 15px 20px; border-radius: 5px;}

#statistics_left{width:60%; float: left;}
#statistics_left p{color:#fff; font-size: 15px; line-height: 25px; word-spacing: 1px; letter-spacing: 1px; padding-top: 10px; padding-right: 100px;}

#statistics_right{width:40%; float: right; padding-left:60px;}
#statistics_right ul{list-style-type: none;}
#statistics_right ul li{width:50%; height: 150px; float: left;}
#statistics_right ul li h2{color:#fff; font-size:48px; margin-bottom: 30px;}
#statistics_right ul li h2 span{border-bottom: 1px solid #eed453; padding-bottom: 15px;}
#statistics_right ul li p{color:#fff;}

footer{width:100%; padding: 0px 5% 40px 5%; position: relative;}
footer h2{color:#eed453; font-family: 'Righteous', cursive; margin-bottom: 60px; font-size: 48px;}
footer h2 i{margin-left: 10px;}

.footer_area{float: left;}
#footer_left{width:20%}
#footer_left ul{list-style-type: none;}
#footer_left ul li a{text-decoration: none; display: block; color:#fff; height:50px; line-height: 50px; font-size:15px}
#footer_left ul li a i{width:25px}
#footer_left ul li a:hover{color:#eed453}

#footer_center{width:60%; margin-top:-100px; height: 450px; position: relative; padding-left: 50px;}
#footer_center img{height:100%; width:100%; object-fit: contain; filter:brightness(0.4); position: absolute; top:0; left: 0; z-index: 1; padding-left: 50px;}
#footer_center div{width:50%; float: left; height:200px; margin-top:60px; padding: 50px; position: relative; z-index: 2;}
#footer_center div h3{color:#fff; font-size:24px; line-height: 35px; font-weight: 650;}
#footer_center div h3 label{display: block; padding-bottom: 20px;}
#footer_center div h3 span{font-size:20px;}
#footer_center div h3 a{text-decoration:none; color:#fff}

#footer_right{width:20%;}
#footer_right ul{list-style-type: none;}
#footer_right ul li a{text-decoration: none; display: block; color:#fff; height:35px; line-height: 35px; font-size:15px; text-align: right;}
#footer_right ul li a:hover{color:#eed453;}

#copyright{color:#fff; font-weight: 550; position: absolute; bottom:0px; left:0px; padding-left:20px; background:rgb(255,255,255,0.05); width:100%; padding-block: 20px;}

#ecommerce_head{width:100%; height: 500px;}

#ecommerce_head_left{width:45%; height: 100%; float: left; padding-block: 30px; padding-right: 30px;}
#ecommerce_head_left h2{font-size: 40px; margin-top: 20px; color:#fff}
#ecommerce_head_left h3{font-size: 40px; margin: 30px 0px; height:55px; overflow: hidden;}
#ecommerce_head_left h3 span::after{content: ''; animation: spin 15s linear infinite;}
#ecommerce_head_left p{line-height: 25px; font-size: 16px; color:#fff}

#ecommerce_head_right{width:55%; height:100%; float: right; position: relative;}
.pro_back{animation: pro_img_back linear infinite 15s; width:100%; height: 450px; padding: 40px; position: absolute; top:20px; left: 0%; border-top-left-radius: 30px; border-top-right-radius: 30px;}
.pro_back div{animation: pro_img linear infinite 15s; width:100%; height: 470px; margin-top: 0px; border-radius: 10px;}

@keyframes pro_img {
    0%{background: url("../images/ecommerce/ebay1.png"); background-repeat: no-repeat; background-size:100% 100%; margin-top:0px; opacity: 1;}
    14%{background: url("../images/ecommerce/ebay1.png"); background-repeat: no-repeat; background-size:100% 100%; margin-top:0px; opacity: 1;}
    15%{background: url("../images/ecommerce/ebay1.png"); background-repeat: no-repeat; background-size:100% 100%; margin-top:20px; opacity: 0;}
    16%{background: url("../images/ecommerce/Amazon.png"); background-repeat: no-repeat; background-size:100% 100%; margin-top:0px; opacity: 1;}
    29%{background: url("../images/ecommerce/Amazon.png"); background-repeat: no-repeat; background-size:100% 100%; margin-top:0px; opacity: 1;}
    30%{background: url("../images/ecommerce/Amazon.png"); background-repeat: no-repeat; background-size:100% 100%; margin-top:20px; opacity: 0;}
    31%{background: url("../images/ecommerce/google.png"); background-repeat: no-repeat; background-size:100% 100%; margin-top:0px; opacity: 1;}
    44%{background: url("../images/ecommerce/google.png"); background-repeat: no-repeat; background-size:100% 100%; margin-top:0px; opacity: 1;}
    45%{background: url("../images/ecommerce/google.png"); background-repeat: no-repeat; background-size:100% 100%; margin-top:20px; opacity: 0;}
    46%{background: url("../images/ecommerce/shopify.png"); background-repeat: no-repeat; background-size:100% 100%; margin-top:0px; opacity: 1;}
    59%{background: url("../images/ecommerce/shopify.png"); background-repeat: no-repeat; background-size:100% 100%; margin-top:0px; opacity: 1;}
    60%{background: url("../images/ecommerce/shopify.png"); background-repeat: no-repeat; background-size:100% 100%; margin-top:20px; opacity: 0;}
    61%{background: url("../images/ecommerce/facebook.png"); background-repeat: no-repeat; background-size:100% 100%; margin-top:0px; opacity: 1;}
    74%{background: url("../images/ecommerce/facebook.png"); background-repeat: no-repeat; background-size:100% 100%; margin-top:0px; opacity: 1;}
    75%{background: url("../images/ecommerce/facebook.png"); background-repeat: no-repeat; background-size:100% 100%; margin-top:20px; opacity: 0;}
    76%{background: url("../images/ecommerce/flipkart.png"); background-repeat: no-repeat; background-size:100% 100%; margin-top:0px; opacity: 1}
    89%{background: url("../images/ecommerce/flipkart.png"); background-repeat: no-repeat; background-size:100% 100%; margin-top:0px; opacity: 1}
    90%{background: url("../images/ecommerce/flipkart.png"); background-repeat: no-repeat; background-size:100% 100%; margin-top:20px; opacity: 0;}
    91%{background: url("../images/ecommerce/meesho.png"); background-repeat: no-repeat; background-size:100% 100%; margin-top:0px; opacity: 1}
    98%{background: url("../images/ecommerce/meesho.png"); background-repeat: no-repeat; background-size:100% 100%; margin-top:0px; opacity: 1}
    99%{background: url("../images/ecommerce/meesho.png"); background-repeat: no-repeat; background-size:100% 100%; margin-top:20px; opacity: 0;}
    100%{background: url("../images/ecommerce/ebay1.png"); top:0px; opacity: 1}
}
@keyframes pro_img_back {
    0%{background: radial-gradient(circle, rgba(255,229,229,1) 0%, rgba(255,119,119,1) 50%, rgba(255,64,64,1) 100%); box-shadow: 0px 6px 30px rgba(255,119,119,1);}
    14%{background: radial-gradient(circle, rgba(255,229,229,1) 0%, rgba(255,119,119,1) 50%, rgba(255,64,64,1) 100%); box-shadow: 0px 6px 30px rgba(255,119,119,1);}
    15%{background: radial-gradient(circle, rgba(255,246,229,1) 0%, rgba(255,194,89,1) 50%, rgba(255,168,18,1) 100%); box-shadow: 0px 6px 30px rgba(255,194,89,1)}
    29%{background: radial-gradient(circle, rgba(255,246,229,1) 0%, rgba(255,194,89,1) 50%, rgba(255,168,18,1) 100%); box-shadow: 0px 6px 30px rgba(255,194,89,1)}
    30%{background: radial-gradient(circle, rgba(229,249,255,1) 0%, rgba(114,220,255,1) 50%, rgba(0,191,255,1) 100%); box-shadow: 0px 6px 30px rgba(114,220,255,1)}
    44%{background: radial-gradient(circle, rgba(229,249,255,1) 0%, rgba(114,220,255,1) 50%, rgba(0,191,255,1) 100%); box-shadow: 0px 6px 30px rgba(114,220,255,1)}
    45%{background: radial-gradient(circle, rgba(241,250,234,1) 0%, rgba(142,217,91,1) 50%, rgba(97,179,41,1) 100%); box-shadow: 0px 6px 30px rgba(142,217,91,1)}
    59%{background: radial-gradient(circle, rgba(241,250,234,1) 0%, rgba(142,217,91,1) 50%, rgba(97,179,41,1) 100%); box-shadow: 0px 6px 30px rgba(142,217,91,1)}
    60%{background: radial-gradient(circle, rgba(229,241,255,1) 0%, rgba(160,202,255,1) 50%, rgba(126,182,255,1) 100%); box-shadow: 0px 6px 30px rgba(160,202,255,1)}
    74%{background: radial-gradient(circle, rgba(229,241,255,1) 0%, rgba(160,202,255,1) 50%, rgba(126,182,255,1) 100%); box-shadow: 0px 6px 30px rgba(160,202,255,1)}
    75%{background: radial-gradient(circle, rgba(255,251,230,1) 0%, rgba(253,230,116,1) 50%, rgba(252,220,59,1) 100%); box-shadow: 0px 6px 30px rgba(253,230,116,1)}
    89%{background: radial-gradient(circle, rgba(255,251,230,1) 0%, rgba(253,230,116,1) 50%, rgba(252,220,59,1) 100%); box-shadow: 0px 6px 30px rgba(253,230,116,1)}
    90%{background: radial-gradient(circle, rgba(255,229,245,1) 0%, rgba(255,111,201,1) 50%, rgba(255,52,179,1) 100%); box-shadow: 0px 6px 30px rgba(255,111,201,1)}
    99%{background: radial-gradient(circle, rgba(255,229,245,1) 0%, rgba(255,111,201,1) 50%, rgba(255,52,179,1) 100%); box-shadow: 0px 6px 30px rgba(255,111,201,1)}
    100%{background: radial-gradient(circle, rgba(255,229,229,1) 0%, rgba(255,119,119,1) 50%, rgba(255,64,64,1) 100%); box-shadow: 0px 6px 30px rgba(255,119,119,1)}
}
@keyframes spin {
    0%{content:"Ebay Sales"; color:rgba(255,64,64,1);}
    14%{content:"Ebay Sales"; color:rgba(255,64,64,1);}
    15%{content:"Amazon Sales"; color:rgba(255,168,18,1);}
    29%{content:"Amazon Sales"; color:rgba(255,168,18,1);}
    30%{content:"Google Sales"; color:rgba(0,191,255,1);}
    44%{content:"Google Sales"; color:rgba(0,191,255,1);}
    45%{content: "Shopify Sales"; color:rgba(97,179,41,1);}
    59%{content: "Shopify Sales"; color:rgba(97,179,41,1);}
    60%{content: "Facebook Sales"; color:rgba(126,182,255,1);}
    74%{content: "Facebook Sales"; color:rgba(126,182,255,1);}
    75%{content: "FlipKart Sales"; color:rgba(252,220,59,1);}
    89%{content: "FlipKart Sales"; color:rgba(252,220,59,1);}
    90%{content: "Meshoo Sales"; color:rgba(255,52,179,1);}
    99%{content: "Meshoo Sales"; color:rgba(255,52,179,1);}
    100%{content: "Ebay Sales"; color:rgba(255,64,64,1);}
}

#ecommerce_body{width:100%;}
#ecommerce_body h1{text-align: center; color:#eed453; font-family: 'Righteous', cursive; margin-block: 120px 60px;}

.ecommerce_body_box{padding-left: 10%;}

.ecommerce_body_left{width:45%;}
.ecommerce_body_left img{width:100%; height:450px; object-fit: contain; margin-top:-40px;}

.ecommerce_body_right{width:55%}
.ecommerce_body_right p{color:#ccc; font-size: 16px; line-height: 25px; letter-spacing: 1px; word-spacing: 1px;}
.ecommerce_body_right h3{color:#eed453; font-weight: 650; margin-bottom: 20px;}

.ecommerce_tag{width:80%; border-radius: 30px; height: 50px; position: relative; margin-bottom: 30px;}
.ecommerce_tag i{width:80px; height:80px; border-radius: 100%; position: absolute; top:-15px; line-height: 48px; color:#2f2e3c; border: 15px solid #2f2e3c; font-size:28px; text-align: center;}
.ecommerce_tag label{padding-right: 10px; position: relative; top:30%; width:100%; transform: translateY(-50%); font-size: 14px;}

.ecommerce_tag[data-set="1"]{background:#eed453; background:rgb(238,212,83,0.1);}
.ecommerce_tag[data-set="1"] i{background:#eed453;}
.ecommerce_tag[data-set="1"] label{color: #eed453;}

.ecommerce_tag[data-set="2"]{background:#EF5272; background:rgb(239,82,114,0.1);}
.ecommerce_tag[data-set="2"] i{background:#EF5272;}
.ecommerce_tag[data-set="2"] label{color: #EF5272;}

.ecommerce_tag[data-set="3"]{background:#2ACAFF; background:rgb(42,202,255,0.1);}
.ecommerce_tag[data-set="3"] i{background:#2ACAFF;}
.ecommerce_tag[data-set="3"] label{color: #2ACAFF;}

.ecommerce_body_box:nth-child(2n+1) .ecommerce_body_left{float:right;}
.ecommerce_body_box:nth-child(2n+1) .ecommerce_body_left img{object-position: right; margin-left:-100px}
.ecommerce_body_box:nth-child(2n+1) .ecommerce_body_right{float:left; padding-left: 0px; width:45%;}
.ecommerce_body_box:nth-child(2n+1) .ecommerce_tag{float: right; padding-inline: 10px 95px; text-align: right; width:95%;}
.ecommerce_body_box:nth-child(2n+1) .ecommerce_tag i{right:0px;}
.ecommerce_body_box:nth-child(2n+1) .ecommerce_tag[data-step="2"],.ecommerce_tag[data-step="4"]{margin-right:60px}
.ecommerce_body_box:nth-child(2n+1) .ecommerce_tag[data-step="3"]{margin-right:80px}

.ecommerce_body_box:nth-child(2n+2) .ecommerce_body_left{float:left; width:45%;}
.ecommerce_body_box:nth-child(2n+2) .ecommerce_body_left img{object-position: left;}
.ecommerce_body_box:nth-child(2n+2) .ecommerce_body_right{float:right; width:55%;}
.ecommerce_body_box:nth-child(2n+2) .ecommerce_tag{padding-inline: 95px 10px;}
.ecommerce_body_box:nth-child(2n+2) .ecommerce_tag[data-step="2"],.ecommerce_tag[data-step="4"]{margin-left:60px}
.ecommerce_body_box:nth-child(2n+2) .ecommerce_tag[data-step="3"]{margin-left:80px}
.ecommerce_body_box:nth-child(2n+2) .ecommerce_tag i{left:0px;}

#web_head{padding-block: 20px 60px;}
#web_head_left{width:60%; float: left; overflow: hidden;}
#web_head_left ul{list-style-type: none; width: 100%;}
#web_head_left ul[data-step="1"],#web_head_left ul[data-step="3"]{animation: industries linear infinite 20s;}
#web_head_left ul[data-step="2"]{animation: ind linear infinite 20s;}
#web_head_left ul li{width:23%; border-radius: 10px; text-align:center; margin: 10px 1%; height: 120px; background: rgb(255,255,255,0.05); float: left; padding:20px}
#web_head_left ul li img{width: 40px; height: 40px; object-fit: contain;}
#web_head_left ul li h4{font-size: 14px; margin-top: 10px; color: #fff;}

@keyframes industries {
    0%{margin-left:0%}
    50%{margin-left: -20%;}
    100%{margin-left: 0%;}
}
@keyframes ind {
    0%{margin-left:0%}
    50%{margin-left: 20%;}
    100%{margin-left: 0%;}
}

#web_head_right{padding-left: 40px; width:40%; float: right; color:#999}
#web_head_right h1{margin-block: 25px 40px; color:#fff; font-weight: 600;}
#web_head_right p{color: rgb(255,255,255,0.8); font-size:14px; line-height: 22px; word-spacing: 1px; letter-spacing: 1px;}

#web_body_left{width:25%; float: left;}
#web_body_center{width:50%; float: left; text-align: center;}
#web_body_center img{width:100%; height: 600px; object-fit: contain; object-position: top;}
#web_body_right{width:25%; float: right;}

.web_services ul{list-style-type: none;}
.web_services ul li{width:100%; text-align: center; position: relative;}
.web_services ul li i{color:#fff; font-size: 36px;}
.web_services ul li h4{font-size:16px; margin-block: 15px; color:#fff; color:#eed453}
.web_services ul li p{color: rgb(255,255,255,0.9); font-size: 14px; margin-bottom: 80px; line-height: 25px; letter-spacing: 1px;}

#about_video{height:850px; width:100%; margin-inline: auto; border-radius: 10px; margin-block:-60px 80px;}
#about_video video{width:100%; height: 100%; border-radius: 15px;}

#our_team ul{list-style-type: none; margin-bottom: 0px;}
#our_team ul li{width:22%; height:350px; box-shadow: 5px 9px 12px -0.5px rgb(0,0,0,0.5); text-align: center; margin:10px 1.5%; background: #2f2e3c; border-radius: 10px; float: left;}
#our_team ul li img{margin-top:-80px; width:150px; height:150px; border-radius: 100%; border:10px solid rgb(255,255,255,0.1); object-fit: cover; object-position: top;}
#our_team ul li h5{margin-block: 15px; color: #eed453; font-weight: 650;}
#our_team ul li p{font-size: 15px; color:#fff; padding-inline: 20px;}
#our_team ul li div{width:100%; height:150px; border-top-right-radius: 10px; border-top-left-radius: 10px;}

#map{width:60%; float: left; }
#map iframe{width:100%; height: 500px; border-radius: 10px;}

#contact_form{width:40%; float: right; padding-left: 40px;}
#contact_form label{width: 100%; color:#fff; font-size: 14px;}
#contact_form input, #contact_form select{margin-block: 2px 20px; font-size: 14px; width:100%; color:#fff; height: 40px; background:rgb(255,255,255,0.05); outline:none; border:none; border-radius: 5px; padding-inline: 10px;}
#contact_form select option{background:#2f2e3c}
#contact_form textarea{margin-block: 2px 25px; resize: none; padding-top: 10px; font-size: 14px; width:100%; color:#fff; height: 150px; background:rgb(255,255,255,0.05); outline:none; border:none; border-radius: 5px; padding-inline: 10px;}
#contact_form button{cursor: pointer; transition: all 0.3s; float:right; height:40px; width:200px; border:1px solid #eed453; background:none; border-radius: 5px; color:#eed453; font-size: 14px; text-transform: uppercase; font-weight: 650;}
#contact_form button:hover{background:#eed453; color:#2e2e2e; box-shadow: 0px 2px 10px #eed453;}

#contact_section_title{padding-top: 40px;}

#career_head{width: 100%; height:500px;}

#career_body{width:100%; padding-top: 40px;}
.career_bullet_box{width:33.33%; height: 190px; padding-inline: 100px; float: left;}
.career_bullet_box i{color: #eed453; font-size: 36px;}
.career_bullet_box h4{margin-block: 10px; font-weight: 500; font-size: 14px; color:#fff}
.career_bullet_box p{color:#999; font-size: 13px; line-height: 21px;}

.career_position{width:48%; margin: 15px 1%; padding: 40px; min-height:300px; background:rgb(255,255,255,0.05); float: left; border-radius: 10px;}
.career_position h4{color:#eed453}
.career_position p{color:#999; font-size: 14px; line-height: 22px;}
.career_position ul{list-style-type: none; margin-block: 25px;}
.career_position ul li{color:#ccc; font-size: 14px; margin-block: 5px;}
.career_position ul li i{margin-right: 10px; color: #eed453;}

.small_device_dp{display: none;}
@media screen and (min-width:320px) and (max-width:1023px){
    .small_device_dp{display: block;}
    .menu{transition: all 0.3s; position: absolute; width:40px; font-size:36px; height:40px; color:#eed453; top:20px; right:20px}
    .menu_close{right: -100px;}
    #header{padding-inline: 20px;}
    #head_left{width:50%; height: auto;}
    #head_center{width:100%; height:auto}
    #head_center ul{transition: all 0.3s; margin-top:-10px; display:block; position: absolute; right:-100%; width:100%; background:#2f2e3c; height: 100vh;}
    #head_center ul li{padding-inline:20px; display:inline-block; text-align: left; width:100%; height: 50px; line-height: 50px;}
    #head_center ul li:hover span{transform: scale(0);}
    #slider_right,#head_right,.portfolio_contian p{display:none}
    #slider_left{width:100%; height: 100%; float: left; position: relative;}
    #slider_left div{padding-inline: 20px;}
    #slider_left div h1{font-size: 36px; line-height: 45px;}
    #slider_left div p{margin-block: 20px 40px; font-size: 16px; line-height: 25px;}
    #slider_left a{font-size: 14px;}

    .ecommerce_body_left,.ecommerce_body_right{width:100%; float:none;}
    .ecommerce_body_left img{object-fit:contain; margin-block:0px 20px; height:300px;}

    .ecommerce_body_box{padding-left: 0%;}

    .ecommerce_tag{width:100%; border-radius: 30px; height: 50px; position: relative; margin-bottom: 20px;}
    .ecommerce_tag i{display: none;}
    .ecommerce_tag label{padding-right: 0px; font-size: 12px; line-height: 0px;}

    .ecommerce_body_box:nth-child(2n+1) .ecommerce_tag{float: none; padding-inline: 20px; text-align: left; width:100%;}
    .ecommerce_body_box:nth-child(2n+2) .ecommerce_tag{padding-inline: 20px;}

    .ecommerce_body_box:nth-child(2n+1) .ecommerce_body_left img{object-position:center; margin-left:0px}
    .ecommerce_body_box:nth-child(2n+2) .ecommerce_body_left img{object-position: center;}

    .ecommerce_body_box:nth-child(2n+1) .ecommerce_body_right{float:none; padding-left: 0px; width:100%;}
    .ecommerce_body_box:nth-child(2n+1) .ecommerce_body_left{float:none;}

    .ecommerce_body_box:nth-child(2n+2) .ecommerce_body_right{float:none; width:100%;}
    .ecommerce_body_box:nth-child(2n+2) .ecommerce_body_left{float:none; width:100%;}

    .ecommerce_body_box:nth-child(2n+1) .ecommerce_tag i{left:0px;}
    .ecommerce_body_box:nth-child(2n+2) .ecommerce_tag i{left:0px;}

    .ecommerce_body_box:nth-child(2n+1) .ecommerce_tag[data-step="2"],.ecommerce_tag[data-step="4"]{margin-right:0px}
    .ecommerce_body_box:nth-child(2n+1) .ecommerce_tag[data-step="3"]{margin-right:0px}

    .ecommerce_body_box:nth-child(2n+2) .ecommerce_tag[data-step="2"],.ecommerce_tag[data-step="4"]{margin-left:0px}
    .ecommerce_body_box:nth-child(2n+2) .ecommerce_tag[data-step="3"]{margin-left:0px}
}
@media screen and (min-width:320px) and (max-width:500px){
    .ecommerce_tag label{top:20%; line-height: 0px;}
}
@media screen and (min-width:320px) and (max-width:799px){
    .wrapper{padding: 80px 20px 60px 20px;}
    #wrapper{padding: 80px 20px 60px 20px;}
    #services,#testimonial,#roadmap,#portfolio,#statistics{padding-bottom: 20px;}
    #services{margin-top:-50px}
    .section_title{margin-bottom: 40px; font-size: 30px;}
    .service_area{width:100%; float: none; border-top:5px solid #eed453; height:auto; margin: 20px 0%;}
    .service_area:hover{transform: scale(1.0);}
    .service_area p{font-size:14px; margin-block: 40px 60px;}
    .service_area_footer{bottom: 0px;}
    .service_thumb{border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; background: #eed453;}

    #roadmap_left{display: none;}
    #roadmap_right{width:100%; height: auto; float: none;}
    .roadmap_content{width:100%; padding: 0px; height:auto; margin-bottom: 60px;}
    .roadmap_content[data-set='last']{margin-bottom: 0px;}
    .roadmap_content h4{font-weight: 500; font-size: 16px;}
    .roadmap_content p{font-size: 14px;}

    #portfolio{margin-bottom: 30px;}
    #portfolio ul{padding-left: 0px;}
    #portfolio ul li{width:100%; float: none; margin:10px 0%; height:200px}
    .portfolio_contian{padding-left: 30px;}
    .portfolio_contian img{width:60px; height:60px; object-fit: contain;}
    .portfolio_contian h3{margin-block: 10px 30px; color:#fff; font-size: 14px;}
    .portfolio_contian a{padding: 15px 10px; border-radius: 5px; font-size: 12px;}

    #statistics_left{width:100%; float: none;}
    #statistics_left p{padding-top: 10px; padding-right: 0px;}
    #statistics_right{width:100%; float: none; padding-left:0px;}
    #statistics_right ul{margin-top:50px}
    #statistics_right ul li{width:50%; text-align: center; height: 140px;}
    #statistics_right ul li h2{font-size: 28px;}
    #statistics_right ul li h2 span{border-bottom: 1px solid #eed453; padding-bottom: 10px;}
    #statistics_right ul li p{font-size:14px}

    #testimonial{padding-bottom: 0px; margin-block:-50px; padding-inline: 0px;}
    #testimonial_slider{width:600% !important; transition: all 0.3s; overflow: hidden;}
    .testimonial_area{width:16.66% !important; min-height:auto !important; height:auto !important; margin:10px 0px !important;}
    /* old
    .testimonial_area{width:100%; margin:10px 0px; float: none; height: auto;}
    */
    footer{padding: 20px 20px 40px 20px;}
    footer h2{margin-bottom: 60px; font-size: 36px;}

    .footer_area{float: none;}

    #footer_left,#footer_center,#footer_right{width:100%; float: none; height: auto;}
    #footer_left{margin-top:-40px}
    #footer_left ul,#footer_right ul{padding-left: 0px;}
    #footer_center{margin-top:0px; padding-left: 0px;}
    #footer_center div{width:100%; float: none; height:auto; margin-top:20px; padding: 0px 0px 10px 0px;}
    #footer_center div h3{font-size:16px; line-height: 25px;}
    #footer_center div h3 label{color:#eed453; display: block; padding-bottom: 10px;}
    #footer_center div h3 span{font-size: 13px;}
    #footer_center img{object-fit:cover; object-position: center center; filter:brightness(0.4); position: absolute; top:0px; left: -20px; z-index: 1; padding-left: 50px;}

    #footer_right{margin-block:20px 40px}
    #footer_right ul li a{text-align: left;}

    #copyright{font-weight: 500; font-size:14px; padding:20px;}

    #ecommerce_head{height: 850px;}
    #ecommerce_head_left,#ecommerce_head_right{width:100%; float: none;}
    #ecommerce_head_right{position: absolute; top:0px; left:0px; height: auto; background:#000}
    .pro_back{height: 250px; top:60px; left: 0%; width:100%; padding: 35px 20px 20px 20px; border-top-left-radius: 0px; border-top-right-radius: 0px;}
    .pro_back div{height: 200px; width:100%; border-radius: 10px;}
    #ecommerce_head_left{position: absolute; top:310px; left:0px; height: auto; padding-inline: 20px;}
    #ecommerce_head_left h2{margin-top:10px; font-size: 32px;}
    #ecommerce_head_left h3{font-size: 32px; margin: 10px 0px;}

    #ecommerce_body{margin-bottom: -80px;}
    #ecommerce_body h1{margin-bottom: 40px;}

    #web_head{padding-block: 0px 0px;}
    #web_head_left{width:100%; float: none;}
    #web_head_left ul{padding-left: 0px;}
    #web_head_left ul li{width:48%;}
    #web_head_left ul[data-step="1"],#web_head_left ul[data-step="3"]{animation: none;}
    #web_head_left ul[data-step="2"]{animation: none;}

    #web_head_right{width:100%; padding-left: 0px; float: none;}
    #web_head_right h1{margin-block: 40px 20px;}

    #web_body{margin-bottom: -120px;}

    #web_body_left, #web_body_center, #web_body_right{width:100%; float:none;}
    .web_services ul{padding-left: 0px;}
    .web_services ul li p{margin-bottom: 40px;}
    #web_body_center img{height: 350px; object-fit: fill; margin-top:-40px}

    .career_bullet_box{width:100%; padding-inline: 0px; height: 170px;}
    .career_position{width:100%; margin: 10px 0%; height:auto; padding: 20px;}
    .career_position{width:100%; margin: 10px 0%; height:auto; padding: 20px;}

    #about_video{height:200px; margin-block:0px 40px;}
    #about_video video{border:1px solid rgb(255,255,255,0.3)}

    #our_team{margin-bottom: -80px;}
    #our_team ul li{width:100%; float: none; margin:30px 0%;}

    #contact_form{width:100%; float: none; padding-left: 0px; height:auto;}
    #contact_form input, #contact_form select, #contact_form textarea{margin-block: 8px 20px;}

    #map{width:100%; float: none; margin-bottom: 40px;}
    #map iframe{height: 250px;}
}
@media screen and (min-width:500px) and (max-width:599px){
    #slider_left div{padding-inline: 40px;}
    #slider_left div h1{font-size: 42px; line-height: 50px;}
    .wrapper{padding: 80px 40px 60px 40px;}
    #wrapper{padding: 80px 40px 60px 40px;}
    #portfolio ul li{height:250px; margin:20px 0px}
    footer{padding: 20px 40px 40px 40px;}
    .pro_back{height: 300px;}
    .pro_back div{height: 250px;}
    #ecommerce_head_left{top:350px; left:0px; height: auto; padding-inline: 40px;}
    #about_video{height:230px;}
    .testimonial_area{height:690px !important;}
}
@media screen and (min-width:600px) and (max-width:767px){
    #slider_left div h1{font-size: 72px; line-height: 80px;}
    #slider_left div p{margin-block: 60px 80px;}
    .service_area{width:48%; float: left; margin:10px 1%; height:450px; padding:20px 10px;}
    .service_area h3{margin-block:20px -20px;}
    .service_area_footer{height:50px;}
    .service_area_footer img{height:30px; width:30px}
    .roadmap_content{width:50%; float: left; height:250px;}
    #portfolio ul li{width:48%; float: left; margin:10px 1%;}
    .testimonial_area{width:48%; margin:10px 1%; float: left;}
    .testimonial_area p{font-size: 13px; padding-inline: 10px;}
    .testimonial_upper{height:150px}
    .testimonial_upper h3{line-height: 70px;}
    #footer_left{width:60%}
    #footer_center div{width:50%; float: left;}
    #footer_center img{object-position: top center;}
    #footer_right{position: absolute; right:0px; top:70px; width:40%;}
    #footer_right ul li a{text-align: right; padding-right: 20px;}
    .pro_back{height: 400px;}
    .pro_back div{height: 350px;}
    #ecommerce_head_left{top:470px;}
    #web_body_center img{height: 500px;}
    .career_bullet_box{width:48%; height: 150px; margin:10px 1%; float: left; text-align: center;}
    #our_team ul li{width:48%; float: left; margin:10px 1%;}
}
@media screen and (min-width:768px) and (max-width:899px){
    #slider_right,#head_right,.portfolio_contian p{display:none}
    #slider_left div h1{font-size: 72px; line-height: 80px;}
    .service_area{width:48%; float: left; margin:10px 1%; height: 425px; padding:20px 10px;}
    #slider_left div p{margin-block: 45px 65px;}
    .roadmap_content{width:50%; float: left; height:250px;}
    #portfolio ul li{width:48%; float: left; margin:10px 1%; height: 250px;}
    #footer_left{width:60%}
    #footer_center div{width:50%; float: left;}
    #footer_center img{object-position: top center;}
    #footer_right{position: absolute; right:0px; top:70px; width:40%;}
    #footer_right ul li a{text-align: right; padding-right: 20px;}
    .pro_back{height: 400px;}
    .pro_back div{height: 350px;}
    #ecommerce_head_left{top:470px;}
    #web_body_center img{height: 600px;}
    .career_bullet_box{width:48%; height: 150px; margin:10px 1%; float: left; text-align: center;}
    #about_video{height:300px;}
    #our_team{padding-bottom: 40px;}
    #our_team ul li{width:48%; float: left; margin:10px 1%;}
    #map iframe{height: 300px;}
    #testimonial_slider{width:600% !important; transition: all 0.3s; overflow: hidden;}
    .testimonial_area{width:15.66% !important; min-height:auto !important; height:auto !important; margin:10px 0.5% !important;}
}
@media screen and (min-width:800px) and (max-width:1023px){
    .wrapper{padding: 80px 20px 60px 20px;}
    #wrapper{padding: 80px 20px 60px 20px;}
    .service_area{width:48%; border-top:5px solid #eed453; margin: 10px 1%;}
    .service_area:hover{transform: scale(1.0);}
    .service_area p{font-size:14px; margin-block: 40px 60px;}
    .service_area_footer{bottom: 0px;}

    #roadmap_left{display: none;}
    #roadmap_right{width:100%;}
    .roadmap_content{width:50%; float: left; height:280px;}
    #portfolio{margin-block:-60px 30px;}
    #statistics_left{width:100%; float: none;}
    #statistics_left p{padding-top: 10px; padding-right: 0px;}
    #statistics_right{width:100%; float: none; padding-left:0px;}
    #statistics_right ul{margin-top:50px}
    #statistics_right ul li{width:50%; text-align: center; height: 140px;}
    #statistics_right ul li h2{font-size: 28px;}
    #statistics_right ul li h2 span{border-bottom: 1px solid #eed453; padding-bottom: 10px;}
    #statistics_right ul li p{font-size:14px}
    #testimonial{margin-block:-50px -50px}
    #testimonial_slider{width:600% !important; transition: all 0.3s; overflow: hidden;}
    .testimonial_area{width:15.66% !important; min-height:auto !important; height:auto !important; margin:10px 0.5% !important;}
    footer{padding: 20px 20px 40px 20px;}
    #footer_left ul,#footer_right ul{padding-left: 0px;}
    #footer_left,#footer_center,#footer_right{width:100%; float: none; height: auto;}
    #footer_center{height: 400px; position: relative; margin-top:0px; padding-left: 0px;}
    #footer_right{margin-top:80px}

    #ecommerce_head{height: 650px;}
    #ecommerce_head_left,#ecommerce_head_right{width:100%; float: none;}
    #ecommerce_head_right{position: absolute; top:0px; left:0px; height: auto;}
    .pro_back{height: 450px; top:60px; left: 0%; width:100%; padding: 35px 20px 20px 20px; border-top-left-radius: 0px; border-top-right-radius: 0px;}
    .pro_back div{height: 400px; width:100%; border-radius: 10px;}
    #ecommerce_head_left{position: absolute; top:520px; left:0px; height: auto; padding-inline: 20px;}
    #ecommerce_head_left h2{margin-top:10px; font-size: 32px;}
    #ecommerce_head_left h3{font-size: 32px; margin: 10px 0px;}
    #ecommerce_body{margin-bottom: -80px;}

    #web_head{padding-block: 0px 0px;}
    #web_head_left{width:100%; float: none;}
    #web_head_right{width:100%; float: none; padding-inline: 0px;}
    #web_body{margin-bottom: -150px;}
    #web_body #portfolio ul{padding-left: 0px;}
    #web_body #portfolio ul li{width:48%; height: 250px; position: relative; float: left; margin:10px 1%;}
    #web_body .portfolio_contian{padding-left: 30px;}
    #web_body .portfolio_contian img{width:60px; height:60px; object-fit: contain;}
    #web_body .portfolio_contian h3{margin-block: 10px 30px; color:#fff; font-size: 14px;}
    #web_body .portfolio_contian a{padding: 15px 10px; border-radius: 5px; font-size: 12px;}
    #web_body_left, #web_body_center, #web_body_right{width:100%; float:none;}
    #career_body{margin-block: 0px -40px;}
    #career_body h2{margin-top:20px}
    .career_bullet_box{width:33.33%; padding-inline: 1%; margin-inline: 0px; height: 170px;}
    .career_position{width:100%; margin: 10px 0%; height:auto; padding: 20px;}

    #contact_form{width:100%; float: none; padding-left: 0px; height:auto;}
    #contact_form input, #contact_form select, #contact_form textarea{margin-block: 8px 20px;}

    #map{width:100%; float: none; margin-bottom: 40px;}
    #map iframe{height: 300px;}
}
@media screen and (min-width:900px) and (max-width:1023px){
    #slider_left div h1{font-size: 72px; line-height: 80px;}
    #slider_left div p{margin-block: 60px 80px;}
    #portfolio ul li{width:48%; float: left; margin:10px 1%; height: 250px;}

    #footer_left{width:60%}
    #footer_center div{width:50%; float: left;}
    #footer_center img{object-position: top center;}
    #footer_right{position: absolute; right:0px; top:70px; width:40%;}
    #footer_right ul li a{text-align: right; padding-right: 20px;}

    #ecommerce_head{width:100%; height: 340px;}

    #ecommerce_head_left{width:50%; float: left; position: static; margin-top:0px}

    #ecommerce_head_right{width:50%; float: right; position: relative;}
    .pro_back{height: 300px; border-top-right-radius: 10px; border-top-left-radius: 10px;}
    .pro_back div{height: 290px;}

    .ecommerce_body_box{width:50%; float: left; padding: 10px;}
    #ecommerce_body{margin-bottom: -40px;}

    .career_bullet_box{text-align: center;}
    .career_position{width:48%; margin: 10px 1%;}
    #about_video{height:300px;}
    #our_team ul li{width:48%; float: left; margin:10px 1%;}

    #map{width:60%; float: left; margin-bottom: 40px;}
    #map iframe{width:96%; height: 450px;}
    #contact_form{width:40%; float: right;}
}
@media screen and (min-width:1000px) and (max-width:1023px){
    #slider_left div h1{font-size: 72px; line-height: 80px;}
    #slider_left div p{margin-block: 60px 80px;}
    #map iframe{width:95%; height: 400px;}
}
@media screen and (min-width:1024px) and (max-width:1150px){
    #header{padding-inline: 40px;}
    #head_center{width:85%}
    #head_center ul{justify-content: right;}
    #head_center ul li{padding-inline: 20px;}
    #head_right{display:none}
    #slider_left div h1{font-size: 46px; line-height: 50px;}
    #slider_left div p{margin-block: 40px 60px; font-size: 15px;}
    #wrapper{padding: 80px 40px 60px 40px;}
    .wrapper{padding: 80px 40px 60px 40px;}
    .service_area{width:48%; margin: 5px 1%;}
    .roadmap_content{height:280px}
    #roadmap{position: relative;}
    #roadmap_left{width:100%; height:600px; margin-top: -40px;}
    #roadmap_left img{object-fit: cover; object-position: center center; filter: brightness(0.15);}
    #roadmap_right{width:100%; position: absolute; top:120px; left:0px; z-index: 2;}
    #portfolio ul li{height:300px}
    .portfolio_contian p{display: none;}
    .portfolio_contian h3{margin-block: 20px 40px;}
    #statistics_left p{padding-right: 0px;}
    #statistics_right ul{margin-top:40px}
    #testimonial{padding-bottom: 0px; padding-inline:20px}
    .testimonial_area{min-height: 780px; margin:20px 0.5% 0px 0.5%; width:10.17% !important}
    .testimonial_upper{height: 120px;}
    .testimonial_upper h3{line-height: 90px; font-size: 24px;}
    .testimonial_area img{height:120px; width:120px; margin-top:-50px}
    .testimonial_area p{padding-inline: 10px;}
    footer{padding-inline: 40px;}
    .footer_area{margin-top:-20px}
    #footer_left,#footer_right{width:25%}
    #footer_left ul{padding-left: 0px;}
    #footer_left ul li a,#footer_right ul li a{font-size:13px;}
    #footer_center{width:50%; margin-top:-60px;}
    #footer_center div{padding: 20px;}
    #footer_center div h3{font-size: 16px; line-height:25px}
    #footer_center div h3 span{font-size: 16px;}

    #ecommerce_head{height: 300px;}
    #ecommerce_head_left h2{margin-top:10px; font-size: 32px;}
    #ecommerce_head_left h3{font-size: 32px; margin: 10px 0px;}

    .pro_back{height: 280px; top:60px; left: 0%; width:100%; padding: 35px 20px 20px 20px;}
    .pro_back div{height: 280px; width:100%; border-radius: 10px; border-top-left-radius: 0px; border-top-right-radius: 0px;}

    .ecommerce_body_box:nth-child(2n+2) .ecommerce_tag[data-step="2"], .ecommerce_tag[data-step="4"] {margin-left: 0px;}
    .ecommerce_body_box:nth-child(2n+2) .ecommerce_tag[data-step="3"] {margin-left: 0px;}

    .ecommerce_body_box:nth-child(1n+2) .ecommerce_tag[data-step="2"], .ecommerce_tag[data-step="4"] {margin-right: 0px;}
    .ecommerce_body_box:nth-child(1n+2) .ecommerce_tag[data-step="3"] {margin-right: 0px;}
    .ecommerce_body_box:nth-child(2n+1) .ecommerce_tag{width:105%}
    .ecommerce_tag{width:100%}
    .ecommerce_tag label{font-size: 12px;}

    .ecommerce_body_left img{width:100%; height:450px; object-fit: contain; margin-top:-40px;}
    #web_head_left,#web_head_right{width:100%}
    #web_head_right{padding-left:0px}
    #web_body_left,#web_body_right{width:30%;}
    #web_body_center{width:40%}
    #web_body_left ul,#web_body_right ul{padding-left: 0px;}
    #web_body_center img{object-position:center}
    #web_body{margin-bottom:-100px;}
    #web_body #portfolio ul{padding-left: 0px;}
    #web_body #portfolio ul li{margin: 10px 1%;}
    #web_body .portfolio_contian{padding-left: 40px;}
    #web_body .portfolio_contian h3{font-size: 18px; font-weight: 550;}
    .career_bullet_box{text-align: center; padding-inline:10px}
    .career_position{height:320px; margin:10px 1%;}
    #about_video{height: 500px; margin-top:20px}
    #our_team ul li{margin:10px 1%; width:23%; height:300px}
    #our_team ul li div{height: 130px;}
    #our_team ul li img{width:120px; height:120px}
    #our_team ul li p{font-size: 14px;}
    #map iframe{height: 415px;}
}
@media screen and (min-width:1151px) and (max-width:1279px){
    #header, footer{padding-inline: 40px;}
    #head_center ul li{padding-inline: 20px;}
    #head_right a{padding-inline: 20px;}
    #wrapper{padding: 80px 40px 60px 40px;}
    .wrapper{padding: 80px 40px 60px 40px;}
    #slider_left div h1{font-size: 72px; line-height: 78px;}
    .service_area{margin: 20px 0.5%; width:24%; height:450px; padding:40px 10px}
    .service_area h3{margin-top:20px}
    .service_area p{font-size: 13px;}
    .service_area_footer img{width:30px; height: 30px; margin-top: 15px;}
    .roadmap_content{height: 320px;}
    #portfolio ul li{height: 320px;}
    .portfolio_contian h3{margin-block: 10px;}
    .portfolio_contian p{margin-bottom:30px; line-height: 20px;}
    .portfolio_contian img{width:80px; height:80px}
    #portfolio ul li:hover .portfolio_contian{opacity: 1; top:47%}
    #testimonial{padding-bottom: 0px;}
    #footer_left ul li a, #footer_right ul li a{font-size: 14px;}
    #footer_left,#footer_right{width:25%}
    #footer_center{width:50%}
    #footer_center{width:50%; margin-top:-60px;}
    #footer_center div{padding: 20px;}
    #footer_center div h3{font-size: 16px; line-height:25px}
    #footer_center div h3 span{font-size: 16px;}
    #ecommerce_head{height: 400px;}
    .pro_back{height: 400px;}
    .pro_back div{height: 400px;}
    #web_body #portfolio{padding-bottom: 0px;}
    .career_bullet_box{padding-inline: 20px; text-align: center;}
    .career_position{height: 300px;}
    #about_video{height: 400px; margin-top: 40px;}
    #map iframe{height: 420px;}
}
@media screen and (min-width:1280px) and (max-width:1400px){
    #header, footer{padding-inline: 40px;}
    #head_center ul li{padding-inline: 20px;}
    #head_right a{padding-inline: 20px;}
    #wrapper{padding: 80px 40px 60px 40px;}
    .wrapper{padding: 80px 40px 60px 40px;}
    #slider_left div h1{font-size: 72px; line-height: 78px;}
    .service_area{margin: 20px 0.5%; width:24%; padding:40px 10px}
    .service_area h3{margin-top:20px}
    .service_area p{font-size: 13px;}
    .service_area_footer img{width:30px; height: 30px; margin-top: 15px;}
    .roadmap_content{height: 320px;}
    #portfolio ul li{height: 320px;}
    .portfolio_contian h3{margin-block: 10px;}
    .portfolio_contian p{margin-bottom:30px; line-height: 20px;}
    .portfolio_contian img{width:80px; height:80px}
    #portfolio ul li:hover .portfolio_contian{opacity: 1; top:47%}
    #testimonial{padding-bottom: 0px;}
    .testimonial_area{min-height:800px; width:10.12%}
    #footer_left ul li a, #footer_right ul li a{font-size: 14px;}
    #footer_left,#footer_right{width:25%}
    #footer_center{width:50%}
    #footer_center{width:50%; margin-top:-60px;}
    #footer_center div{padding: 20px;}
    #footer_center div h3{font-size: 16px; line-height:25px}
    #footer_center div h3 span{font-size: 16px;}
    #ecommerce_head{height: 500px;}
    .pro_back{height: 400px; margin-top:80px}
    .pro_back div{height: 400px;}
    .ecommerce_tag label{padding-right: 10px; position: relative; top:15%;}
    #web_body #portfolio{padding-bottom: 0px;}
    .career_bullet_box{padding-inline: 20px; text-align: center;}
    .career_position{height: 300px;}
    #about_video{height: 400px; margin-top: 40px;}
    #map iframe{height: 420px;}
}