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

body{font-family: "Poppins", sans-serif; cursor:url('..images/right-arrow.svg'); overflow-x: hidden;}
ul{text-orientation: none; list-style-type: none; margin: 0; padding: 0;}

button {
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: left;
    border: none;
    letter-spacing: 2px;
    font-size: 18px;
    background-color: #060a2c;
    color: #fff;
    border-radius: 70px;
    /*padding: 0 55px 0 ;*/
    width: 250px;
    height: 70px;
    position: relative;
    padding: 0 40px;
    text-transform: uppercase;
    font-weight: 500;
    -webkit-transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);
    transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);}

button img.btn-image{right: 30px; border-radius: 50%; width: 50px; color: #fff; height: 50px; padding: 10px;  -webkit-transition: 0.4s cubic-bezier(0, 0, 0.3642, 1); transition: 0.4s cubic-bezier(0, 0, 0.3642, 1); position: absolute;}
button:hover .btn-image{width: 50px; height: 50px; right: 25px; transition: 0.4s cubic-bezier(0, 0, 0.3642, 1);}
a{text-decoration: none;}
section{padding-top: 120px; padding-bottom: 120px; position: relative; display: block;}
.section-white{background-color: #fff;}

.section-title{font-size: 65px; color: #000; font-weight: 600; margin-bottom: 40px;}
.section-title span{font-weight: 300;}
section .content{margin-bottom: 0; color: #555; text-align: justify;}
.top-class{margin-top: 120px;}

/*custom navbar section start*/
.custom-navbar{position: relative; display: block; padding-top: 60px; padding-bottom: 60px; background-color: transparent!important; position: absolute; top: 0; z-index: 1; width: 100%;}
.custom-navbar.navbar-dark .navbar-brand{z-index: 9999; padding-top: 0; padding-bottom:0; }
.custom-navbar .navbar-brand img{width: 130px; height: auto; z-index: 9999;}
.custom-navbar .hm-bar .nav-item{text-align: center;}
.custom-navbar .container{position: relative;}
.custom-navbar  span{width: auto; height: 30px; display: block; position: fixed; right: 8%; z-index: 9999;}
.custom-navbar span img{width: 100%; height: 100%;}


.banner_section{position: relative; display: block; height: 100vh; background-color: #fff; padding-top: 328px; width: 100%; color: #fff; overflow: hidden; } 
.banner_section .banner-inner .title{font-size: 85px; color: #333; font-weight: 300;}
.banner_section .banner-inner .title span{font-weight: 600;}
.banner_section .banner-inner .content{font-weight: 333; color: #888; margin-top: 30px; padding-right: 35px;}
.banner_section .banner-inner button{margin-top: 25px;}
.banner_section .image-inner-slider{position: relative; display: block; text-align: right;}
.banner_section  img.value_img_bn{margin-top:-100px; filter: grayscale(0); width: 500px; height: auto; transition: all,0.5s;}
.banner_section .image-inner-slider .slider-text{z-index: 4; position: relative; background-color: #21223b;}
.console-container { 
  font-family:Times New Roman;
  font-size:34px;
  text-align:center;
  height:90px;
  width:350px;
  padding-top: 20px;
  display:block;
  position:absolute;
  color:white;
  top:9px;
  bottom:0;
  border-radius: 50px;
  left:-224px;
  right:0;
  margin:auto;
  background-color: rgba(33,34,59,0.8);
}
.console-underscore {
  display:inline-block;
  position:relative;
  top:-0.14em;
  left:10px;
}




.main-sidebar {height: 100%;width: 0;position: fixed; z-index: 9999;top: 0; right: 0;background-color: #040728;overflow-x: hidden; transition: 0.5s; padding-top: 60px;}
.main-sidebar .sidebar-inner{margin-top: 30px;}
.main-sidebar .sidebar-inner li.active a{color: #42ad0b; transition: all,0.5s;}
.main-sidebar .sidebar-inner li a {padding: 8px 8px 8px 32px; text-decoration: none; font-size: 18px; color: #818181; display: block; transition: 0.3s; border-bottom: 1px solid #2d2e38;}
.main-sidebar .sidebar-inner li a:hover {color: #42ad0b; transition: all,0.5s;}
.main-sidebar .closebtn {position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; color:#42ad0b;}
.openbtn {font-size: 20px; cursor: pointer; background-color: #111; color: white; padding: 10px 15px; border: none;}
.openbtn:hover {background-color: #444;}
#main {transition: margin-left .5s; padding: 16px;}

.service-body-main .main-sidebar{background-color: #f9f9f9;}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .main-sidebar {padding-top: 15px;}
  .main-sidebar a {font-size: 18px;}
}
/*about us section start*/
.about-us{position: relative; display: block; overflow-x: hidden; background-color: #f9f9f9;}
.about-us .chairman-message{position: relative; display: flex; margin-top: 40px;}
.about-us .chairman-message .title{font-style: italic; line-height: 30px; position: relative; margin-top: 30px; display: block;}
.about-us .chairman-message .title .double-quote{position: absolute; width: 55px; height: 55px; overflow: hidden; top: -48px; left: -30px;}
.about-us .chairman-message .title .double-quote img{width: 100%; height: 100%;}
.about-us .chairman-message .title span{display: block; margin-top: 10px;}
.about-us .chairman-message .dir-content{position: relative; display: flex; width: 90%;}
.about-us .chairman-message .dir-content .bor-image{position: relative; display: flex; width: 110px; height: 110px; border-radius:50%; overflow: hidden; text-align: center; line-height: 100px; background-color: transparent; border: 1px solid #42ad0b; transition: all,0.5s; }
.about-us .chairman-message .dir-content:hover .bor-image{background-color: #42ad0b; transition: all,0.5s;}
.about-us .chairman-message .dir-content:hover .director{color: #42ad0b; transition: all,0.5s;}
.about-us .chairman-message .dir-content:hover .director span{color: #333;}
.about-us .chairman-message .dir-content .dir-image{position: relative; display: flex; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; margin: 4px auto;}
.about-us .chairman-message .dir-content .director{align-self: center; font-size: 14px; font-weight: 600; padding-left: 20px; transition: all,0.5s;}
.about-us .chairman-message .dir-content .director span{display: block; font-weight: 500; width: 100%; font-size: 14px; transition: all,.0.5s; color: #333;}
.about-us .chairman-message .dir-content .dir-image img{width: 100%; height: 100%; border-radius: 100%;}
.about-us .about-image{width: 400px; position: relative; height: 400px; border-radius: 20px; overflow: hidden; display: block; margin: 0 auto; margin-top: 20%; z-index: 4;}
.about-us .about-image img{width: auto; height: 100%;}



.about-us .about-image:before {
  box-sizing: border-box;
  transform: translateX(100%);
  content: '';
  position: absolute;
  bottom: 0;
  border-radius: 20px;
  left: 0;
  width: 100%;
  height: 2px;
  border-bottom: 3px solid transparent;
  border-left: 3px solid transparent;
}
.about-us .about-image:after {
  box-sizing: border-box;
  transform: translateX(-100%);
  content: '';
  position: absolute;
  top: 0;
  border-radius: 20px;
  left: 0;
  width: 100%;
  height: 2px;
  border-top: 3px solid transparent;
  border-right: 3px solid transparent;
}
.about-us .about-image:hover {
  color: inherit;
  text-decoration: none;
}
.about-us .about-image:hover:before {
  transition: 0.1s transform linear, 0.2s height linear 0.2s;
  transform: translateX(0);
  height: 400px;
  border-color: #42ad0b;
  border-radius: 20px;
}
.about-us .about-image:hover:after {
  transition: 0.1s transform linear 0.3s, 0.2s height linear 0.4s;
  transform: translateX(0);
  height: 400px;
  border-radius: 20px;
  border-color: #42ad0b;
}

section.section-black{background-color:#101120;}
section.our-service{padding-bottom: 0; 
  background: linear-gradient(-45deg, #070b34, #131848, #03072a, #070b34);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

section.our-service .hr{    position: absolute;
    top: 180px;
    left: 180px;
    color: #42ad0b;
    font-size: 32px;
    font-weight: 600;}
section.our-service .hr:after{    position: absolute;
    content: '';
    width: 180px;
    height: 180px;
    left: -55px;
    top: -65px;
    opacity: 0.3;
    background-image: url(../images/work-progress.png);
    background-size: contain;
    filter: grayscale(100%);
    background-repeat: no-repeat;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;}
}
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}


section.our-service .title-block{position: relative; display: block; text-align: center;}
section.our-service .title-block .title{font-size: 80px; color: #fff;}
section.our-service .title-block .title span{font-weight: 200;}
section.our-service .title-block .sub-title{font-size: 20px; color: #aaa;}
section.our-service .service-block{margin-top: 120px;}
section.our-service .service-block .service-box{padding:0; border-right: 1px solid #444; border-top-left-radius:20px; border-top-right-radius:20px; border-top: 1px solid #444;}
section.our-service .service-block .service-box:first-child{border-left: 1px solid #444;}
section.our-service .service-block .service-box .service-highlight{position: relative; text-decoration: none; color: #fff; transition: all,0.5s; display: block; padding: 60px 30px ; border:1px solid transparent; border-top-left-radius:20px; border-top-right-radius:20px; border-bottom: 0; height: 100%;}
section.our-service .service-block .service-box .service-highlight:hover{border:1px solid #42ad0b; border-bottom: 0; transition: all,0.5s;}
section.our-service .service-block .service-box .service-highlight .title{font-weight: 500; margin-top: 100px; font-size: 22px;}
section.our-service .service-block .service-box .service-highlight .service-icon{ position: absolute; display: block; top: 38px; left: 27px; width: 100px; height: 100px; overflow: hidden; color: #222;}
section.our-service .service-block .service-box .service-highlight .service-icon img{filter: grayscale(100%); opacity: 0.2; transition: all,0.5s;}
section.our-service .service-block .service-box .service-highlight:hover .service-icon img{filter: grayscale(0%); opacity: 1; transition: all,0.5s;}
section.our-service .service-block .service-box .service-highlight .content{margin-top: 20px;}
section.our-service .service-block .service-box .service-highlight .more{width: 40px; height: 10px; margin-top: 40px; transition: all,0.5s;}
section.our-service .service-block .service-box .service-highlight:hover .more{width: 40px; height: 10px; margin-top: 40px; margin-left: 5%; transition: all,0.5s;}

.testimonials{position: relative; display: block;}
.testimonials .quote-icon{position: absolute; right: 130px; top: 130px; width: 200px; height: 200px; opacity: 0.1;}
.custom-slider-testi{}
.custom-slider-testi .carousel-item {transition: transform 1s ease-in-out;}
.custom-slider-testi .carousel-inner .carousel-caption{color: #333;}
.custom-slider-testi .carousel-inner .carousel-item{height: 400px;}
.custom-slider-testi .carousel-caption{color: #333; bottom: 0;}
.custom-slider-testi .carousel-caption .name{font-weight: 600; text-transform: uppercase;}
.custom-slider-testi .carousel-caption .name span{display: block; font-weight: 400; font-size: 16px;}
.custom-slider-testi .carousel-caption .details{margin-top: 40px;}
.custom-slider-testi .carousel-caption .star{width: 90px; height: auto;}
.custom-slider-testi .carousel-indicators{top: 20px; bottom: inherit;}
.custom-slider-testi .carousel-indicators [data-bs-target]{width: 15%; height: 15%; padding: 3px; overflow: hidden; border-radius: 50%; border:2px solid #888; transition: all,0.3s;}
.custom-slider-testi .carousel-indicators [data-bs-target].active{border:2px solid #42ad0b; width: 20%; height: 20%; margin-top: -10px; transition: all,0.3s;}
.custom-slider-testi .carousel-indicators [data-bs-target] img{width: 100%; height: auto; border-radius: 50%;}
.custom-slider-testi .carousel-control-next,
.custom-slider-testi .carousel-control-prev{top: inherit; bottom: 22%;}

.blog-section{position: relative; display: block; background-color: #f1f1f1;}
.blog-section .section-title{text-align: center;}
.blog-section .blog-box{position: relative; display: block; border-radius: 20px; text-decoration: none; color: #333;}
.blog-section .blog-box .date{position: absolute; right: 40px; top: 40px; padding: 10px 15px; border-radius: 50px; background-color: #42ad0b; color: #fff; z-index: 1;}
.blog-section .blog-box .blog-image{position: relative; display: block; overflow: hidden; height: 400px; border-radius: 20px;}
.blog-section .blog-box .blog-image img{width: 100%; filter: grayscale(100%); height: 100%; transform: scale(1); position: absolute; transition: all,0.5s; border-radius: 20px;}
.blog-section .blog-box:hover .blog-image img{transform: scale(1.1); filter: grayscale(0); transition: all,0.5s;}
.blog-section .blog-box .title{font-size: 18px; color: #42ad0b; margin-top: 50px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 40px;}
.blog-section .blog-box .main-title{margin-top: 25px; font-size: 28px;}
.blog-section .blog-box .content{margin-top: 30px; color: #888;}
.blog-section .blog-box .more{margin-top: 50px; font-size: 16px;}
.blog-section .blog-box .more img{width: 40px; height: 10px; transition: all, 0.5s;}
.blog-section .blog-box:hover .more img{margin-left: 1%; transition: all, 0.5s;}

footer{position: relative; display: block; background-color: #000; padding-top: 120px; padding-bottom: 120px;}
footer .footer-inner .footer-logo{width: 170px; height: auto;}
footer .footer-inner .footer-logo img{width: 100%; height: auto;}
footer .footer-inner .social-media{margin: -5px 0 0 0; padding: 0; list-style: none; float: right;}
footer .footer-inner .social-media li{display: inline-block; position: relative;}
footer .footer-inner .social-media li+li{margin-left: 10px;}
footer .footer-inner .social-media li a{display: block;  width: 35px; height: 35px; line-height: 35px; font-size: 19px; background-color: #fff; color: #333; border-radius: 100%; transition: all, 0.5s; text-align: center;}
footer .footer-inner .footer-link{margin: 0 auto; padding: 0; list-style: none;}
footer .footer-inner .footer-link li{display: block; width: 100%;  position: relative;}
footer .footer-inner .footer-link li:before{
  position: absolute;
  content: '';
  background-image: url('../images/right-arrow-orange.svg');
  background-repeat: no-repeat;
  width: 20px; 
  height: 10px;
  opacity: 0;
  top: 10px;
  left: -30px; 
  transition: all,0.5s; 
}
footer .footer-inner .footer-link li:hover:before{opacity: 1;transition: all,0.5s; }
footer .footer-inner .footer-link li a{display: block; width: 100%; text-decoration: none; margin-bottom: 20px; font-size: 20px; color: #fff; transition: all,0.5s;}
footer .footer-inner .footer-link.privacy li a{color: #555;}
footer .footer-inner .footer-link li:hover a{color: #42ad0b; transition: all,0.5s;}
footer .footer-inner p.loc-r{position: relative; display: block; font-size: 20px; color: #555;}
footer .footer-inner p.loc-r span.add-i{width: 35px; height: 35px; font-size: 17px; text-align: center; line-height: 35px; display: inline-block; background-color: #555; border-radius: 50%; color: #000; margin-right: 5px;}

footer .footer-inner .after-footer{margin-top: 20px; border-top: 1px solid #333; padding-top: 30px;}
footer .footer-inner .after-footer p{color: #555; margin-bottom: 0;}

footer .footer-inner .social-media li:hover a.facebook{background-color: #4267B2; transition: all,0.5s; color: #fff;}
footer .footer-inner .social-media li:hover a.linkedin{background-color: #007bb5; transition: all,0.5s; color: #fff;}
footer .footer-inner .social-media li:hover a.instagram{background-image: linear-gradient(#f9ce34,#ee2a7b,#6228d7); transition: all,0.5s; color: #fff;}
footer .footer-inner .social-media li:hover a.youtube{background-color: #bb0000; transition: all,0.5s; color: #fff;}
footer .footer-inner .social-media li:hover a.pinterest{background-color: #cb2027; transition: all,0.5s; color: #fff;}
footer .footer-inner .social-media li:hover a.dribbble{background-color: #ea4c89; transition: all,0.5s; color: #fff;}
footer .footer-inner .social-media li:hover a.whatsapp{background-color: #25d366; transition: all,0.5s; color: #fff;}



.about-us .ab-vector-im{position: absolute; right: -15%; top: -150px; width: 1200px; height: 600px; z-index: 3; opacity: 0.4;}
.about-us .ab-vector-im { /* shorthand animation property */ animation: ab-vector-im 5s ease-in-out 0.1s infinite alternate forwards;}
@keyframes ab-vector-im{
    0% {
        right: -15%;
    }
    100% {
        right: -25%;
    }
}



@media(min-width: 1400px){.custom-navbar .container{max-width: 1600px;}}

.cursor-dot,
.cursor-dot-outline {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;  
  border-radius: 50%;
  opacity: 0;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.cursor-dot {cursor: pointer;}
.cursor-dot-outline {width: 30px;height: 30px; background-color: rgba(0, 0, 0, 0.2);}


/*============ABOUT US PAGE START============*/
ol.breadcrumb{margin-bottom: 100px;}
ol.breadcrumb li.breadcrumb-item a{color: #999;}
ol.breadcrumb li.breadcrumb-item.active a{color: #333; font-weight: 600; transition: all,0.5s;}
ol.breadcrumb li.breadcrumb-item.active a:hover{color: #42ad0b; transition: all,0.5s;}

.about-us-details img.image-about-inner{width: 100%;}
.about-us-details .content{margin-top: 40px;}
.about-us-details .founder-msg{position: relative; display: block; padding: 40px; width: 100%; border:1px solid rgba(33, 34, 59, 0.8); border-radius: 10px; margin: 50px auto; background-color: #fff; color: #333;}
.about-us-details .chairman-img{width: 300px; height: 300px; display: block; position: relative; border-radius: 20px; overflow:hidden;     box-shadow: 8px 9px 3px #e9e9e9;}
.about-us-details .chairman-img img{width: 100%; height: auto; border-radius: 20px; filter: grayscale(100%);}
.about-us-details .founder-msg .double-quote-img{position: absolute; text-align: center; display: block; width: 60px; height: 60px; border-radius: 100%; background-color: rgba(33, 34, 59, 0.9); top: -30px; line-height: 60px;}
.about-us-details .founder-msg .double-quote-img img{width: 60%; height: auto;}
.about-us-details .founder-msg:after{content: ''; position: absolute; width: 150px; height: 1px; background-color: rgba(33, 34, 59, 0.8); left: -134px; top: 91px;}
.about-us-details .founder-msg .chairman-name{font-size: 16px; display: inline-block;text-align: right; position: absolute; right: 50px; bottom: -28px; background-color: rgba(33, 34, 59, 0.9); padding: 12px; border-radius: 40px; color: #fff;}
.about-us-details .founder-msg .chairman-name small{font-weight: 300;}
.about-us-details .our-mission-main{position: relative; display: inline-table; list-style: none; margin:140px auto; width: 100%;}
.about-us-details .chairman-main-box{margin-top: 50px;}
.about-us-details .our-mission-main li{float: left; width: 25%;}
.about-us-details .our-mission-main li .inner-main-content{position: relative; display: block; padding: 20px; background-color:transparent; width: 300px; height: auto; text-align: center;}
.about-us-details .our-mission-main li .inner-main-content .content-icon{width: 200px; height: 200px; background-color: #888; border-radius: 100%; text-align: center; line-height: 200px; margin: 0 auto; position: relative; background-color: #101120}
.about-us-details .our-mission-main li .inner-main-content .content-icon img{width: 50%; height: auto;}
.about-us-details .our-mission-main li .inner-main-content .content-title{font-size: 26px; margin-top:90px; font-weight: 600;}
.about-us-details .our-mission-main li .inner-main-content .content-icon:after{content: ''; height: 80px; width: 2px; left: 100px; position: absolute; background-color: #101120; bottom: -50px;}
.about-us-details .our-mission-main li .inner-main-content .content-icon:before{position: absolute; width: 30px; height: 30px; border-radius: 100%; background-color: #101120; content: ''; bottom: -80px; left: 86px;}
.about-us-details .our-mission-main li .inner-main-content .details{text-align: center;}
.about-us-details .our-mission-main li:nth-child(1) .inner-main-content .content-icon{background-color: orange;}
.about-us-details .our-mission-main li:nth-child(1) .inner-main-content .content-title{color: orange;}
.about-us-details .our-mission-main li:nth-child(1) .inner-main-content .content-icon:after{background-color: orange;}
.about-us-details .our-mission-main li:nth-child(1) .inner-main-content .content-icon:before{background-color: orange;}

.about-us-details .our-mission-main li:nth-child(2) .inner-main-content .content-icon{background-color: #e1e504;}
.about-us-details .our-mission-main li:nth-child(2) .inner-main-content .content-title{color: #e1e504;}
.about-us-details .our-mission-main li:nth-child(2) .inner-main-content .content-icon:after{background-color:#e1e504;}
.about-us-details .our-mission-main li:nth-child(2) .inner-main-content .content-icon:before{background-color:#e1e504;}

.about-us-details .our-mission-main li:nth-child(3) .inner-main-content .content-icon{background-color: #00caf7;}
.about-us-details .our-mission-main li:nth-child(3) .inner-main-content .content-title{color: #00caf7;}
.about-us-details .our-mission-main li:nth-child(3) .inner-main-content .content-icon:after{background-color: #00caf7;}
.about-us-details .our-mission-main li:nth-child(3) .inner-main-content .content-icon:before{background-color:#00caf7;}

.about-us-details .our-mission-main li:nth-child(4) .inner-main-content .content-icon{background-color: #42ad0b;}
.about-us-details .our-mission-main li:nth-child(4) .inner-main-content .content-title{color: #42ad0b;}
.about-us-details .our-mission-main li:nth-child(4) .inner-main-content .content-icon:after{background-color: #42ad0b;}
.about-us-details .our-mission-main li:nth-child(4) .inner-main-content .content-icon:before{background-color:#42ad0b;}

/*============ABOUT US PAGE END============*/

/*============CONTACT US PAGE START============*/

.contact_us_container .form-main-inner .form-control{padding: 18px; margin-bottom: 28px;}
.contact_us_container .form-main-inner .submit{margin-top: 28px; justify-content:center; background-color: #42ad0b;}
.contact_us_container .address-container{position: relative; display: block;}
.contact_us_container .address-container .title{font-weight: 600; color: #21223b; font-size: 36px; line-height: 1;}
.contact_us_container .address-container label{margin-top: 40px; font-size: 20px; font-weight: 500;}
.contact_us_container .address-container .address{margin-top: 10px;}
.contact_us_container .address-container .phone{margin-top: 30px;}
.contact_us_container .address-container .email{margin-top: 12px;}
.contact_us_container .address-container .call-icon{width: 20px; height: 20px; vertical-align: middle; margin-right: 3px;}
.contact_us_container .address-container .call-icon img{width: 30px;}

/*============CONTACT US PAGE END============*/


/*=========SERVICE LIST PAGE START ========= */
.service-body-main{background-color:#040728;}
.service-body-main ol.breadcrumb li.breadcrumb-item a{color: #fff;}
.service-body-main .section-title{color: #fff;}
.service-body-main .custom-navbar .navbar-brand img{filter: brightness(100);}
.service-list{position: relative; display: block;}
.service-list .service-main{margin-top: 100px;}
.service-list .service-container{position: relative; display: block; padding: 20px;
    border-radius: 10px; border: 1px solid #888; transition: all,0.5s;}
.service-list .service-container:after{position:absolute; content: ''; width: 150px; height: 2px; background-color: #888; left: -153px; top: 220px; z-index: -1; transition: all,0.5s;}
.service-list .service-container .title{font-size: 28px; font-weight: 500; line-height: 120%; color: #fff; transition: all,0.5s;}
.service-list .service-container .sub-content{margin-top: 20px; color: #888;}
.service-list .service-container .service-type{margin: 0; padding: 0;}
.service-list .service-container .service-type li a{font-size: 14px; display: block; padding: 15px 0; color: #888; font-weight: 500; border-bottom: 1px dashed #888; position: relative;}
.service-list .service-container .service-type li:last-child a{border-bottom: none;}
.service-list .service-container .service-type li a .service-icon-inner{text-align: right; position: absolute; right: 0;}
.service-list .service-container .service-type li a .service-icon-inner img{width: 8%; height:auto;}
.service-list .service-main .graphic-vector-container{position: relative; display: block; width: 420px; height: 420px; overflow:hidden;}
.service-list .service-main .graphic-vector-container img.graphic-vector-img{margin-top: 40px;}
.service-list .service-main .graphic-vector-container img{width: 100%; height: auto; filter: grayscale(100%); transition: all,0.5s;}
.service-list .service-main .graphic-1:hover .graphic-vector-container img{filter: grayscale(0); transition: all,0.5s;}
.service-list .service-main .graphic-1:hover .service-container{position: relative; display: block; padding: 20px;
    border-radius: 10px; border: 1px solid #42ad0b; transition: all,0.5s;}
.service-list .service-main .graphic-1:hover .service-container:after{background-color:#42ad0b;}
.service-list .service-main .graphic-1:hover .service-container .title{color:#42ad0b; transition: all,0.5s;}
.service-list .service-main .graphic-1.graphic-2 .service-container:after{display: none;}
.service-list .service-main .graphic-1.graphic-2 .service-container:before{position:absolute; content: ''; width: 150px; height: 2px; background-color: #888; right: -153px; top: 220px; z-index: -1; transition: all,0.5s;}
.service-list .service-main .graphic-1.graphic-2:hover .service-container:before{background-color:#42ad0b;}

.service-list .service-main .top-mobile-hierarchy{width: 100%; position: relative; text-align: center; display: none;}
.service-list .service-main .top-mobile-hierarchy .hire-top-img{width: 50%; opacity: 0.1; position: absolute;}

.hire-top-img{
    /* shorthand animation property */
    animation: hire-top-img 5s ease-in-out 0.1s infinite alternate forwards;
}
@keyframes hire-top-img{
    0% {
        left: -2%;
    }
    100% {
        left: -15%;
    }
}


.service-list .service-main .heirarchy_image{height: 100%; position: relative; text-align: center;}
.service-list .service-main .heirarchy_image .hire-img{width: 50%; opacity: 0.1; position: absolute;}
.hire-img{
    /* shorthand animation property */
    animation: hire-img 5s ease-in-out 0.1s infinite alternate forwards;
}
@keyframes hire-img{
    0% {
        top: -5%;
    }
    100% {
        top: -10%;
    }
}

/*=================service details page================*/

.about-us-details.inner-service-page .view_work{margin-top: 30px; display: block; font-size: 20px; font-weight: 600; color: #21223b;}
.about-us-details.inner-service-page .view_work span{width: 50px; height: auto; display: inline-block; transition: all, 0.5s;}
.about-us-details.inner-service-page .view_work span img{width: 60%;}
.about-us-details.inner-service-page .view_work:hover span{margin-left: 2%; transition: all, 0.5s; display: inline-block;}
.about-us-details.inner-service-page .main-sr{margin-top: 40px;}
.about-us-details.inner-service-page .service-content-sr{position: relative; display: block; padding: 0 30px 0 0; text-align: center-justify; width: 100%;}
.about-us-details.inner-service-page .service-bx{}


.about-us-details.inner-service-page .service-content-sr .sr-icon-t{position: relative; display: block; width: 70px; height: 70px; text-align: center;  line-height: 70px; margin-bottom: 10px; border-radius: 10px; background-color: transparent; border: 1px solid #42ad0b; transition: all, 0.5s;}
.about-us-details.inner-service-page .service-content-sr .sr-icon-t img{width: 60%; height: auto;}
.about-us-details.inner-service-page .service-bx{transition: all,0.5s;}

.about-us-details.inner-service-page .service-content-sr .title-service{font-weight: 500; display: block; margin-bottom: 25px; color: #21223b; font-size: 50px; margin-top: 25px;}
.about-us-details.inner-service-page .service-content-sr .sr-content-b{color: #888; margin-bottom: 0;}
.about-us-details.inner-service-page .view_more_box{text-align: center; width: 100%;  margin-top: 80px;  border: 1px solid #ddd; border-radius: 20px; background-color: #21223b;}
.about-us-details.inner-service-page .view_work{font-size: 25px; color: #fff; height: 80px; margin-top: 10px; line-height: 75px;}

.inner-service-page .serv-i-banner{margin-top:20px; position: relative; display: block; border-radius: 20px;}
.inner-service-page .serv-i-banner img{width: 100%; height: auto; border-radius: 20px;}

.about-us-details.inner-service-page .main-sr .service-bx .ser-link{display: flex; padding: 30px; border: 1px solid #f1f1f1; border-radius: 30px; margin-bottom: 20px; position: relative; transition: all,0.5s;}
.about-us-details.inner-service-page .main-sr .service-bx .ser-link .arrow img{transition: all,0.5s;}
.about-us-details.inner-service-page .main-sr .service-bx .ser-link .arrow{position: absolute;
    display: block;
    width: 55px;
    height: 55px;
    overflow: hidden;
    bottom: 20px;
    left: 30px;
    background-color: transparent;
    padding: 15px;
    transition: all, 0.5s;
    border: 1px solid #ddd;
    border-radius: 100%;
}
.about-us-details.inner-service-page .main-sr .service-bx .ser-link:hover .arrow{position: absolute;
    display: block;
    width: 55px;
    height: 55px;
    overflow: hidden;
    bottom: 20px;    
    transition: all, 0.5s;
    background-color: #42ad0b;
    padding: 15px;    
    border-radius: 100%;
}
.about-us-details.inner-service-page .main-sr .service-bx .ser-link:hover .arrow img{filter: invert(1); transition: all,0.5s;}
.about-us-details.inner-service-page .main-sr .service-bx .ser-link .arrow img{width: 100%; height: auto;}
.about-us-details.inner-service-page .main-sr .service-bx .ser-link .logo-mockup-ser{width: 400px; height: 400px; height: auto; align-content: start;}
.about-us-details.inner-service-page .main-sr .service-bx .ser-link .logo-mockup-ser img{width: 400px; height: 400px; border-radius: 30px;}

.about-us-details.inner-service-page .service-bx:hover .ser-link{box-shadow: 13px 0 13px #f1f1f1;; transition: all,0.5s;}
.about-us-details.inner-service-page .service-content-sr:hover .sr-icon-t{transition: all,0.5s; background-color: #42ad0b;}
.about-us-details.inner-service-page .service-content-sr:hover .sr-icon-t img{filter: brightness(100); transition: all,0.5s;}


/*=================Portfolio page start================*/

.portfolio-page{position: relative; display: block; overflow-x: hidden; background-color: }
.portfolio-page .port-service-main .port-service-container{position: relative; display: block; color: #333;}
.portfolio-page .port-service-main .port-service-container .port-image{position: relative; display: block; width: 100%; height: 500px; background-color: green; overflow: hidden; }
.portfolio-page .port-service-main .port-service-container .port-image .port-i-1{display: block;}
.portfolio-page .port-service-main .port-service-container .port-image .port-i-2{display: none;}
.portfolio-page .port-service-main .port-service-container .port-image img{width: 100%; height: 100%;}
.portfolio-page .port-service-main > div{margin-bottom: 50px;}
.portfolio-page .port-service-main .port-service-container .title-container{position: relative; display: block; text-align: left; padding:0;  margin-top: 20px;}
.portfolio-page .port-service-main .port-service-container .title-container .port-view{position: absolute; right: 0px; top: 4px; width: 70px; height: auto; text-align: center; color: red; font-size: 14px;}
.portfolio-page .port-service-main .port-service-container .title-container .port-view img{width: 30%; height: auto;}
.portfolio-page .port-service-main .port-service-container .title-container .subtitle{text-transform: uppercase; font-weight: 600; color: #42ad0b; font-size: 14px;}
.portfolio-page .port-service-main .port-service-container .title-container .main-title{font-size: 24px; margin-bottom: 0; font-weight: 400;}
.portfolio-page .swiper-container .swiper-button-prev-cus{display: inline-block; margin-top:100px; margin-right: 20px;}
.portfolio-page .swiper-container .swiper-button-prev-cus,
.portfolio-page .swiper-container .swiper-button-next-cus
{
    display: inline-block;
    margin-top: 113px;
    margin-right: 20px;
    margin-left:24px;
    width: 60px;
    height: 60px;
    background-color: #42ad0b;
    border-radius: 100%;
    text-align: center;
    line-height: 4;
    transition: all,0.5s;
    position: absolute;
    transform: scale(1);
}
.portfolio-page .swiper-container .swiper-button-next-cus{left: 80px;}
.portfolio-page .swiper-container .swiper-button-prev-cus:hover, 
.portfolio-page .swiper-container .swiper-button-next-cus:hover{ position: absolute;  transform: scale(1.1); transition: all,0.5s;}
.portfolio-page .swiper-container .swiper-button-next-cus{display: inline-block;}

.portfolio-page .swiper-container .swiper-button-prev-cus svg,
.portfolio-page .swiper-container .swiper-button-next-cus svg{width: 30px; height: 30px; margin-top: -4px; color: #fff;}
.portfolio-page .nav-portfolio-in{margin-top: 100px; margin-bottom: 40px;}
.portfolio-page .nav-portfolio-in .nav-item{width: 20%; text-align: center;  border-radius: 5px; margin-right: 14px;}
.portfolio-page .nav-portfolio-in .nav-item .nav-link{padding: 14px 10px; color: #555; border: 1px solid #ddd;}
.portfolio-page .nav-portfolio-in .nav-item .nav-link.active{background-color: rgb(66, 173, 11); color: #fff; position: relative;}
.portfolio-page .nav-portfolio-in .nav-item .nav-link.active:after{position: absolute;
    content: '';
    background-color: rgb(66, 173, 11);
    height: 20px;
    left: 46%;
    width: 20px;
    bottom: -10px;
    transform: rotate(45deg);
}
.portfolio-page .port-service-main .port-service-container .title-container .arrow img{transition: all,0.5s;}
.portfolio-page .port-service-main .port-service-container .title-container .arrow{position: absolute;
    display: block;
    width: 55px;
    height: 55px;
    overflow: hidden;
    bottom: 0;
    right: 0;
    background-color: transparent;
    padding: 15px;
    transition: all, 0.5s;
    border: 1px solid #ddd;
    border-radius: 100%;
}
.portfolio-page .port-service-main .port-service-container:hover .title-container .arrow{position: absolute;
    display: block;
    width: 55px;
    height: 55px;
    overflow: hidden;    
    transition: all, 0.5s;
    background-color: #42ad0b;
    padding: 15px;    
    border-radius: 100%;
}
.portfolio-page .port-service-main .port-service-container:hover .title-container .arrow img{filter: invert(1); transition: all,0.5s; transform: rotate(45deg);}
.portfolio-page .port-service-main .port-service-container .title-container .arrow img{width: 100%; height: auto;}

.portfolio-page .nav-portfolio-in.mobile-nav-port{display: none;}
.portfolio-page .nav-portfolio-in.mobile-nav-port .nav-item .nav-link .navp-icon{width: 40px; height: 40px;}
.portfolio-page .nav-portfolio-in.mobile-nav-port .nav-item .nav-link.active .navp-icon{filter: invert(1);}
.portfolio-page .nav-portfolio-in.mobile-nav-port .nav-item{width: auto;}
.portfolio-page .nav-portfolio-in.mobile-nav-port .nav-item .nav-link.active:after{position: absolute;
    content: '';
    background-color: rgb(66, 173, 11);
    height: 20px;
    left: 34%;
    width: 20px;
    bottom: -10px;
    transform: rotate(45deg);
}

.blog-details{position: relative; display: block;}
.blog-details .blog-image-bg{position: relative; display: block;}
.blog-details .blog-image-bg img{width: 100%; height: auto; border-radius: 20px;}
.blog-details .h-main{height: 100v; display: table;}
.blog-details .h-main .heading{display: table-cell; vertical-align: middle;}
.blog-details .h-main .heading h5{font-weight: 500; color: #888;}
.blog-details .h-main .heading h5 span{color: #000;}
.blog-details .content-block{margin: 10px 0 50px 0;}
.blog-details .content-block .details{margin-bottom: 0; text-align: justify;}
.blog-details .content-block .title{font-size: 25px; font-weight: 600; margin-bottom: 24px;}



.post-modal .modal-body{padding: 0;}
.post-design-work .post-btn{position: relative; padding: 0px;}
.post-design-work .post-btn img{width: 100%; height: auto;}
.post-design-work .col-md-6{text-align: left;}
.post-design-work ol.breadcrumb li.breadcrumb-item.active a{color: #999;}
.post-modal .modal-content{background-color: transparent; border: none;}
.post-modal .modal-header .btn-close{position: absolute; right: -13px; top: -6px; opacity: 1;}
.post-modal .modal-header .btn-close img{width: 45px; height: 45px;}
.overlay-post{position: fixed; bottom: 0;  right: -187px; width: 1000px; height: 400px; background-image: url('..images/backpattern.svg'); background-size: cover; background-repeat: no-repeat;}
.video-play-button {}

.post-design-work .video-play-button:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 55px;
  height: 55px;
  background: #eb2055;
  border-radius: 50%;
  animation: pulse-border 1100ms ease-out infinite;
}

.post-design-work .video-play-button:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 60px;
  height: 60px;
  background: #eb2055;
  border-radius: 50%;
  transition: all 200ms;
}

.post-design-work .video-play-button span {
  display: block;
  position: relative;
  z-index: 3;
  width: 0;
  height: 0;
  border-left: 19px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  top: 10px;
  left: 5px;
}
.post-design-work .video-play-button .pl-icon-c   {position: absolute; width: 32px; height: 26px; z-index: 2; top: 48%; left: 48%; }



.privacy_policy{position: relative; display: block;}
.privacy_policy .content{position: relative; display: block;}
.privacy_policy .content .data-e{color: #42ad0b;}
.privacy_policy .content .details{margin-top: 10px;}
.privacy_policy .content b{font-weight: 600;}
.privacy_policy .position-inner .accordion-button{padding-left: 0; color: #0a1274; font-weight: 700; letter-spacing: 1px; font-size: 18px;}
.privacy_policy .position-inner .accordion-button:not(.collapsed){background-color: transparent;}
.privacy_policy .position-inner .accordion-button:focus{border-color: transparent; box-shadow: none;}
.privacy_policy .position-inner .accordion-body{padding-left: 0; padding-top: 0;}
.privacy_policy .position-inner .accordion-button:not(.collapsed){box-shadow: none;}
.privacy_policy .position-inner{margin-top: 20px; position: relative;}
.privacy_policy .position-inner .accordion-button:not(.collapsed)::after{filter: grayscale(1);}
.privacy_policy .position-inner .accordion .job-description{position: relative; margin-top: 15px;}
.privacy_policy .position-inner .accordion .job-description li{position: relative; padding-left: 32px;  margin-bottom: 10px;}
.privacy_policy .position-inner .accordion .job-description li:after{content: url("../images/next-button-icon.svg");  
  width: 23px;
    height: 23px;
    left: 0;
    top: -1px;
    position: absolute;}

.privacy_policy .position-inner .call-information{padding: 17px 30px; background: linear-gradient(-45deg, #070b34, #131848, #03072a, #070b34);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite; margin-top: 60px; text-align: center; border-radius: 10px;}
.privacy_policy .position-inner .call-information p{color: #fff;}
.privacy_policy .position-inner .call-information p:last-child{margin-bottom: 0;}
.privacy_policy .position-inner .call-information p span{text-align: center; font-size: 20px; font-weight: 500; margin-top: 5px; color: #42ad0b;}
.privacy_policy .submit-form{margin-top: 20px}
.privacy_policy .submit-form .form-control{padding: 18px; margin-bottom: 20px;}
.privacy_policy .submit-form #formFile::before {
  content: "Resume";
  position: absolute;
  z-index: 2;
  display: block;
  background-color: #eee;
  width: 80px;
}

.privacy_policy .submit-form input[type="file"] {
  display: none;
}
.privacy_policy .submit-form label {
  display: block;
  position: relative;
  background-color: #f1f1f1;
  color: #333;
  font-size: 1.12em;
  font-weight: 500;
  text-align: center;
  padding: 1.12em 0;
  margin: auto;
  border-radius: 0.31em;
  cursor: pointer;
}
.privacy_policy .submit-form #num-of-files {
    font-weight: 400;
    text-align: center;
    margin: 20px 0 0 0;    
}
.privacy_policy .submit-form button{justify-content: inherit; text-align: center; display: inline-block; background-color: #42ad0b;}

.swiper-container.social-post-v{position: relativere; display: block; height: 530px;}
.portfolio-page .swiper-container.social-post-v .swiper-button-prev-cus,
.portfolio-page .swiper-container.social-post-v .swiper-button-next-cus{margin-top: 64px; margin-left: 0;}
.swiper-container.social-post-v .swiper-horizontal>.swiper-pagination-bullets, 
.swiper-container.social-post-v .swiper-pagination-bullets.swiper-pagination-horizontal, 
.swiper-container.social-post-v .swiper-pagination-custom, 
.swiper-container.social-post-v .swiper-pagination-fraction{margin-top: 51px; background-color: transparent; color: #000; font-weight: 500;}

.port_fo_view_first{padding-bottom: 50px;}
.port_fo_view_in{position: relative; padding-top: 0px; padding-bottom: 0px;}

.port_fo_view_in .social-m-a{width: 50%; height: 89px; border-radius: 50px; background-color: #111; margin: -160px auto 100px; text-align: center; line-height: 89px;}
.port_fo_view_in .social-m-a img{ margin: 0 auto; filter: grayscale(100%); width: 100%; padding-left:20px; padding-right: 20px;} 
.port_fo_view_in .so-v-img{position: relative; display: block; width: 100%; height: auto; margin: 0 auto; margin-bottom: 25px; padding: 10px; border: 1px solid #888; overflow: hidden;}
.port_fo_view_in .so-v-img .overlay-p{position: absolute; display: flex; background-color: rgba(66, 173, 11, 0.9); left: 0; width: 100%; bottom: 0; height: 100%; z-index:1; opacity: 0; transition: all,0.8s; font-size: 20px; color: #fff;  text-align: center;}
.port_fo_view_in .so-v-img .overlay-p .order-box{position: relative; align-self: center; display: inline-block; margin: 0 auto;}
.port_fo_view_in .so-v-img .overlay-p .order-box span img{width: 60px; height: 60px; filter: invert(1);} 
.port_fo_view_in .so-v-img .overlay-p span {display: block; margin-bottom: 10px;}
.port_fo_view_in .so-v-img:hover .overlay-p{opacity: 1; transition: all,0.5s; text-align: center; }
.port_fo_view_in .so-v-img img{width: 100%; height: auto;}


@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}
@media screen and (min-device-width: 1600px) and (max-device-width: 1900px) {   


}
@media only screen and (max-width: 1599px) {      
    .testimonials .quote-icon{width: 150px; height: 150px;}
    .post-design-work .video-play-button .pl-icon-c{top: 47%; left: 47%;}
}
@media only screen and (max-width: 1499px){
  section.our-service .hr{top: 210px; left: 130px;}
  .testimonials .quote-icon{width: 100px; height: 100px;}
}
@media only screen and (max-width: 1399px){  
  section.our-service .hr{top:inherit; left: inherit; position: relative; margin: 0 auto; width: 0; font-size: 26px;}
  section.our-service .hr:after{width: 140px; height: 140px; left: -42px; top: -51px;}
  section.our-service .title-block .title{margin-top: 60px;}  
  .about-us-details .founder-msg:after{width: 100px; left: -81px; top: 106px;}  
  .social_view_in .so-v-img{width: 100%; height: auto;}
  footer .footer-inner p.loc-r,
  footer .footer-inner .footer-link li a{font-size: 18px;}  
}
@media only screen and (max-width: 1299px) {     
   .about-us .ab-vector-im{width: 700px; top: -159px;}
   .testimonials .quote-icon{width: 100px; height: 100px; right: 100px;}

}
@media only screen and (max-width: 1199px) { 
.banner_section .banner-inner .title{font-size: 50px;}
.banner_section .banner-inner .content{padding-right: 60px;}
.about-us .ab-vector-im{right: -10%; top: -180px; width: 700px;}
.about-us .chairman-message{text-align: center; display: block;}
.about-us .chairman-message .dir-content{width: 100%;}
.about-us .chairman-message .title{margin-top: 60px; text-align: left; font-size: 18px;}
.about-us .chairman-message .title .double-quote{left: -5px;}7
.testimonials .quote-icon{width: 80px; height: 80px; right: 90px;}
.blog-section .blog-box .blog-image img{width: auto; height: 100%;}

.about-us-details img.image-about-inner{margin-top: 60px;}
.about-us-details .founder-msg{margin: 35px auto;}
.about-us-details .founder-msg:after{width: 33px; left: -20px; top: 115px;}
.about-us-details .our-mission-main{margin-top: 100px;}
.about-us-details .our-mission-main li{width: 50%;}
.service-list .service-main .graphic-vector-container{width: 350px; height: 350px; margin-top: 50px;}
.about-us-details .our-mission-main li .inner-main-content{margin: 0 auto;}
.portfolio-page .port-service-main .port-service-container .port-image{width: auto; height: 400px;}
.blog-details .col-md-3.h-main{width: 100%;}
.blog-details.top-class .section-title{font-size: 35px;}
.blog-details .h-main .heading{margin-top: 30px; display: block;}

footer .footer-inner .ft-1,
footer .footer-inner .ft-2{width: 50%; margin-bottom: 30px;}
footer .footer-inner .ft-3{width: 50%;}
footer .footer-inner .ft-4{width: 50%;}
footer .footer-inner .social-media{float: left;}


.about-us-details.inner-service-page .service-content-sr .title-service{font-size: 38px;}
.portfolio-page .nav-portfolio-in .nav-item .nav-link{height: 78px;}
.portfolio-page .port-service-main .port-service-container .title-container .main-title{font-size: 21px;}
}

@media only screen and (max-width: 1024px){ 
  .console-container{font-size: 29px; padding-top: 15px; height: 68px; width: 294px; top: -69px;}
  .banner_section img.value_img_bn{width: 400px; height: auto;}
  .post-design-work .video-play-button .pl-icon-c {top: 46%; left: 46%;}
}
@media only screen and (max-width: 991px) { 
.banner_section .banner-inner .title{font-size: 40px;}
.overlay .overlay-content .row .col-md-5,
.overlay .overlay-content .row .col-md-7{width: 100%;}
.banner_section:after{width: 60px; height: 60px; right: 300px; top: 308px;}
.banner_section .banner-inner .content{margin-top: 12px; padding-right: 0;}

.banner_section .container,
.custom-navbar .container{max-width: 800px;}
.about-us .ab-vector-im{right: -15%; top: -180px; width: 500px;}
.about-us .about-image{width: 300px; height: 300px;}

.post-design-work .video-play-button .pl-icon-c{top: 47%; left: 47%;}

.section-white.testimonials .col-md-4,
.section-white.testimonials .col-md-8{width: 100%;}
.section-white.testimonials .col-md-4 .section-title{text-align: center;}
.section-white.testimonials .col-md-8{margin-top: 60px;}
.testimonials .quote-icon{width: 150px; height: 150px;}

.about-us-details img.image-about-inner{margin-top: 130px;}
.about-us-details .chr-img-main .chairman-img{width: auto; height: auto;}
.about-us-details .chr-img-main{margin-top: 50px;}
.about-us-details .founder-msg:after{top: 151px; left: -25px;}
.contact_us_container .address-container label{margin-top: 5px;}

.service-list .service-main .col-md-4{display: none;}
.service-list .service-main .top-mobile-hierarchy{display: block; margin-bottom: 150px;}
.service-list .service-main .top-mobile-hierarchy .hire-top-img{width: 100%;}
.service-list .service-main .col-md-8{width: 100%;}
.service-list .service-main .graphic-vector-container img.graphic-vector-img{margin-top: 48px;}

.about-us-details.inner-service-page .view_work{font-size: 18px;}

.portfolio-page .port-service-main .port-service-container .port-image{height: 360px;}
.overlay .overlay-content .col-md-7 .main-menu ul.listing-details li.tp-heading{width: 100%;}
.overlay .overlay-content .col-md-7 .main-menu ul.listing-details li.tp-heading .portfolio-heading li{margin-bottom: 30px;}
.app-portfolio{padding-bottom: 0;}


.swiper-container.social-post-v{width: 100%; height: 300px;}
.social_view_in .social-m-a{width: 80%;}
.social_view_in .so-v-img{padding: 20px;}

.about-us-details.inner-service-page .main-sr .service-bx .ser-link .logo-mockup-ser{width: 300px; height: 300px;}
.about-us-details.inner-service-page .main-sr .service-bx .ser-link .logo-mockup-ser img{width: 300px; height: 300px;}
.about-us-details.inner-service-page .main-sr .service-bx .ser-link{padding: 30px 30px 90px 30px;}
.port_fo_view_in .row>*{width: 50%;}

footer .footer-inner .ft-1,
footer .footer-inner .ft-2,
footer .footer-inner .ft-3,
footer .footer-inner .ft-4{width: 100%; text-align: center;}
footer .footer-inner .ft-2{margin-top: 10px;}
footer .footer-inner .ft-4{margin-top: 20px;}
footer .footer-inner .social-media{float: inherit; margin-top: 15px;}
footer .footer-inner .after-footer .col-md-6{width: 100%; text-align: center;}
footer .footer-inner p.loc-r span.add-i{margin: 0 auto; margin-bottom: 5px; display: block;}

}



@media only screen and (max-width: 840px) { 
  .banner_section {padding-top: 340px;}
  .banner_section:after{right: 500px; top: 208px;}
  .banner_section .row .col-md-7{ width: 100%;}
  .banner_section .row .col-md-7 .banner-inner{text-align: center; margin-top: 20px;}
  .banner_section img.value_img_bn{position: relative; top: inherit; right: inherit; width: 300px; height: 300px;} 
  .custom-navbar{padding-top: 40px; padding-bottom: 40px;}
  .custom-navbar span{top: 70px;}   
  .testimonials .quote-icon{width: 120px; height: 120px;}
  .banner_section .image-inner-slider{margin-top: 80px;}
  .console-container{height: 60px; width: 240px; font-size: 24px; top: -96px; left: -124px;}  
}
@media only screen and (max-width: 767px) {
  .banner_section{padding-top: 200px; text-align: center;}
  .banner_section .banner-inner .content{text-align: center;}
  .banner_section .banner-inner .title{font-size: 50px;}
  .banner_section .image-inner-slider{margin-top: 160px; text-align: center;}
  .banner_section img.value_img_bn{width: 300px; height: auto;}
  .banner_section:after{right: 450px; top: 227px;}
  .about-us .ab-vector-im{width: 550px; top: -226px;}
  .about-us .about-image{width: 400px; height: 400px; margin-top: 10%;}
  section.our-service .hr{width: 30px;}
  section.our-service .service-block .service-box:nth-child(3){border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;}
  section.our-service .service-block .service-box:nth-child(3) .service-highlight:hover{ border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;}
section.our-service .title-block .title{font-size: 60px;}
.testimonials .quote-icon{width: 70px; height: 70px; right: 40px;}
.blog-section .col-md-6:nth-child(2){margin-top: 60px;}
.about-us .section-title{text-align: center;}
.console-container{left: -220px;}
footer .footer-inner{text-align: center;}
footer .footer-inner .row:nth-child(1) .col-md-3{margin-top: 30px;}
.banner_section .banner-inner .title{font-size: 40px;}

.about-us-details img.image-about-inner{margin-top: 50px;}
.about-us-details .chr-img-main .chairman-img{width: 300px; height: 300px; margin: 0 auto;}
.about-us-details .founder-msg{margin: 60px auto;}
.about-us-details .founder-msg:after{top: -62px; left: 50%; height: 62px; width: 1px;}

.contact_us_container .address-container{margin-top: 80px;}
.service-list .service-main .top-mobile-hierarchy{margin-bottom: 60px;}
.service-list .service-main .graphic-vector-container{margin: 50px auto;}

.service-list .service-container:after{top: -150px; height: 150px; width: 2px; left: 50%;}
.service-list .service-main .graphic-1.graphic-2 .service-container:before{bottom: -150px; top: inherit; height: 150px; width: 2px; left: 50%;}
.about-us-details.inner-service-page .view_more_box{margin-top: 30px;}
.about-us-details.inner-service-page .view_work{font-size: 22px;}

.about-us-details .our-mission-main li{width: 100%;}
.portfolio-page .port-service-main .port-service-container .port-image{width: auto; height: 500px;}
.portfolio-page .port-service-main .port-service-container .port-image .port-i-1{display: none;}
.portfolio-page .port-service-main .port-service-container .port-image .port-i-2{display: block;}

.swiper-container.social-post-v{height: 260px;}
.portfolio-page .swiper-container.social-post-v .swiper-button-prev-cus,
.portfolio-page .swiper-container.social-post-v .swiper-button-next-cus{margin-top: 40px;}
.swiper-container.social-post-v .swiper-pagination-fraction{margin-top: 28px;}


.privacy_policy .apply-now{margin-top: 50px;}

.about-us-details.inner-service-page .main-sr .service-bx{width: 100%;}
.about-us-details.inner-service-page .main-sr .service-bx .ser-link{display: block; padding: 30px;}
.about-us-details.inner-service-page .main-sr .service-bx .ser-link .logo-mockup-ser{margin-top: 20px;}
.about-us-details.inner-service-page .main-sr .service-bx .ser-link .arrow{right: 30px; left: inherit;}
.about-us-details.inner-service-page .service-content-sr{padding:0px;}
.portfolio-page .nav-portfolio-in{display: none;}
.portfolio-page .nav-portfolio-in.mobile-nav-port{display: flex;}
.post-design-work .video-play-button .pl-icon-c{top: 46%; left: 46%}
}

@media only screen and (max-width: 640px) {
  .banner_section:after{right: 380px;} 
  .post-modal .modal-header .btn-close{position: relative; right: 12px;}   
  .right-body-overlay{width: 250px;}
  footer .footer-inner .ft-2{margin-bottom: 10px;}
}
@media only screen and (max-width: 575px) {
  .navbar-dark .navbar-toggler{border-color: transparent;}
  .banner_section:after{right: 345px;}
  .section-title{font-size: 50px;}
  section.our-service .service-block .service-box{width: 100%;}
  section.our-service .service-block{padding: 10px 10px 0;}  
  .portfolio-page .port-service-main .port-service-container .port-image{height: auto}
 
  .port_fo_view_in .row>*{width: 100%;}
  .port_fo_view_first{padding-bottom: 0;}
  .post-design-work .video-play-button .pl-icon-c{left: 48%; top: 48%;}
  
}
@media only screen and (max-width: 480px){
  
  .banner_section{padding-top:200px;}
  .banner_section:after{top: 200px; right: 297px;}
  .about-us .ab-vector-im{width: 450px;}
  .testimonials .quote-icon{right: 14px; top: 213px;}
  .banner_section .image-inner-slider{text-align: right;}
  .console-container{left: -134px;}
  .about-us-details .founder-msg .chairman-name{width: 320px; text-align: center; bottom: -36px;}    
  .about-us-details.inner-service-page .main-sr .service-bx .ser-link .arrow{right: inherit; left: 30px;}
  
  .blog-details.top-class .section-title{font-size: 28px; line-height: 32px;}
  .blog-details .h-main .heading h5{font-size: 15px;}
  .overlay .overlay-content .col-md-5 .main-menu{margin-top: 200px;}  
  .overlay .overlay-content .main-menu ul.left-list li:before{display: none;}
  .social_view_in .social-m-a{height: 50px; line-height: 48px;  width: 80%; margin: -144px auto 40px;}
  .about-us-details.inner-service-page .main-sr .service-bx .ser-link{padding: 30px 30px 90px 30px;}
  .about-us-details.inner-service-page .service-content-sr .title-service{font-size: 34px}
  .post-design-work .video-play-button .pl-icon-c{left: 47%; top: 47%;}
  .right-body-overlay{width: 80px;}
  .swiper-container.social-post-v{height: 225px; margin-bottom: 140px;}
  .social_view_in .so-v-img{padding: 15px;}
  .main-sidebar .sidebar-inner.sidebar-bottom{bottom: 300px;}
}
  

@media only screen and (max-width: 414px){
  .custom-navbar{padding-top: 20px;}
  .custom-navbar span{top: 50px;}
  .custom-navbar .navbar-brand img{width: 130px;}  
  .banner_section .banner-inner .title{font-size: 26px;}
  .banner_section{padding-top: 180px;}
  .banner_section:after{right: 274px; top: 189px;}
  .banner_section .banner-inner button{width: 240px; height: 60px;}
  .banner_section img.value_img_bn{width: 350px; height: auto;}
  .banner_section .row .col-md-7 .banner-inner{margin-top: 30px;}
  .overlay a{font-size: 22px; padding-top: 0;}
  .section-title{font-size: 45px;}
  .about-us .about-image{width: 350px; height: 350px;}
  section.our-service .title-block .title{font-size: 40px;}
  .overlay .overlay-content .col-md-5 .main-menu{margin-top: 200px;}
  .custom-slider-testi .carousel-indicators [data-bs-target]{width: 20%; height: 20%;}
  .custom-slider-testi .carousel-indicators [data-bs-target].active{width: 25%; height: 25%;}

  .about-us-details .content{margin-top: 50px;}
  .about-us-details .founder-msg .chairman-name{width: auto; left: 33px;}
  .about-us-details .founder-msg .chairman-name small{display: block;}
  .about-us-details .founder-msg{padding:40px 20px;}
  .service-list .service-main .graphic-vector-container{margin: 10px auto; width: auto;}
  .service-list .service-main .graphic-1 .graphic-vector-container{margin-bottom: 80px;}
  .overlay .overlay-content .col-md-7 .main-menu .portfolio-heading .title{font-size: 60px;}
  .overlay .overlay-content .main-menu ul.left-list li ul.address.project-list{margin-top: 40px;}
  .overlay .overlay-content .main-menu .listing-details ul.project-list li a{font-size: 17px;}
  .overlay .overlay-content .main-menu .title{font-size: 19px;}
  .app-portfolio .owl-carousel{height: 400px;}
   .right-body-overlay{display: none;}
   .web-portfolio.st_de_view .main-web-container{border-radius: 10px;}
   .web-portfolio.st_de_view .main-web-container .web-container-inner{border-radius: 10px;}
   .web-portfolio.st_de_view .main-web-container .web-container-inner img{border-radius: 10px;}
   .portfolio-page .swiper-container .swiper-button-prev-cus,
   .portfolio-page .swiper-container .swiper-button-next-cus{width: 50px; height: 50px; line-height: 3;}
     .custom-navbar{padding-bottom: 0px;}


}
@media only screen and (max-width: 391px){
  .banner_section img.value_img_bn{width: 300px; height: auto;}
  .banner_section .image-inner-slider{margin-top: 130px;}
  .banner_section{padding-top: 180px;}
  .banner_section:after{right: 255px; top: 201px;}
  .banner_section .banner-inner .title{font-size: 32px;}
  .banner_section .banner-inner .content{font-size: 14px;}
  .banner_section .banner-inner button{font-size: 17px;}
  .custom-slider-testi .carousel-indicators [data-bs-target]{width: 17%;}
  .custom-slider-testi .carousel-indicators [data-bs-target].active{width: 22%;}
  .portfolio-page.top-class.inner-service-page .swiper-container{width: 732px; height: 370px;}
  .portfolio-page .port-service-main .port-service-container .port-image{height: auto;}
  
  .portfolio-page.top-class.inner-service-page .swiper-container.social-post-v{width: 100%; height: 50%;}
  .privacy_policy .position-inner .call-information p span{font-size: 16px;}
  .privacy_policy .position-inner .call-information{padding: 17px 18px;}
  .about-us-details.inner-service-page .service-content-sr .title-service{font-size: 27px;}
  .about-us-details.inner-service-page .main-sr .service-bx .ser-link .logo-mockup-ser{width: 250px; height: 250px;}
  .about-us-details.inner-service-page .main-sr .service-bx .ser-link .logo-mockup-ser img{width: 250px; height: 250px;}
  .about-us-details.inner-service-page .main-sr .service-bx .ser-link{padding: 30px 30px 90px 30px}
  .post-design-work .video-play-button .pl-icon-c{left: 46%; top: 46%;}

}
@media only screen and (max-width: 360px){
  .section-title{font-size: 36px; margin-bottom: 30px;}
  .about-us .about-image{width: 300px; height: 300px;}
  .about-us .ab-vector-im{width: 400px;}
  .testimonials .quote-icon{top: 180px;}
  .console-container{height: 55px; width: 200px;}
  .banner_section{padding-top: 180px;}
  .overlay .overlay-content .col-md-7 .main-menu .portfolio-heading .title{font-size: 45px;}
  .portfolio-page .port-service-main .port-service-container .title-container .main-title{font-size: 20px;}

}
@media only screen and (max-width: 320px){
  .console-container{height: 50px; width: 175px; font-size: 16px;}
  .service-list .service-main .graphic-1 .graphic-vector-container{margin-bottom: 10px;}
  .about-us-details.inner-service-page .main-sr .service-bx .ser-link .logo-mockup-ser{width: 200px; height: 200px;}
  .about-us-details.inner-service-page .main-sr .service-bx .ser-link .logo-mockup-ser img{width: 200px; height: 200px;}
  .portfolio-page .nav-portfolio-in .nav-item{margin-right: 10px;}
  .post-design-work .video-play-button .pl-icon-c{left: 45%; top: 45%;}
}

.swiper-container {
  margin-top: 30px !important;
  width: 1060px;
  height: 450px;
  position: relative;    
  margin-bottom: 200px;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
    bottom: var(--swiper-pagination-bottom, inherit);
    width: 380px;
    background-color: #333;
    padding: 24px 71px;
    border-radius: 50px;
    margin-top: 98px;
    z-index: -1;
    text-align: right;
    font-size: 26px;
    color: #fff;
}

@media only screen and (max-width: 391px){
    .swiper-horizontal>.swiper-pagination-bullets, 
  .swiper-pagination-bullets.swiper-pagination-horizontal,
  .swiper-pagination-custom, .swiper-pagination-fraction{width: 350px;}
}
.swiper-slide { display: flex; justify-content: center; align-items: center;}

.item {
  width: 100%;
  height: 100%;
  background: white;
  box-shadow: 15px 15px 10px rgba(34, 35, 58, 0.2);
  border-radius:  25px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 100%;
    height: 100%;
    border-radius: 25px;
    
  }
}

.swiper-pagination-bullet { width: 12px !important; height: 12px !important; border-radius: 5px !important; background: #fd3838 !important; margin-bottom: 100px;}

@keyframes slide {
  0% { 
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}