@charset "UTF-8";


@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans: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');



/* VARIBALES */
:root {
  --primary: #ff0051;
  --secondary: #f50366;
  --white-1: #fff;
  --white-2: #f1f1f1;
  --white-3: #FEFEFF;
  --black-1: #000;
  --black-2: #121212;
  --black-3: #171717;
  --black-4: #141417;
  --font-poppins: "Poppins", sans-serif;
  --font-fira: "Fira Sans", sans-serif;
}



body {font-family: var(--font-poppins), system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size:16px; color:var(--black-4); line-height:28px; font-weight:400; -webkit-font-smoothing: antialiased;}


html { scroll-behavior: smooth;}

.container, .auto-container{max-width:1500px;}

h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; line-height: 1.4em; color: var(--black-4); position: relative;z-index: 1; font-family: var(--font-poppins), system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";}
h1 { font-size: 36px;}
h2 { font-size: 36px;}
h3 { font-size: 30px;}
h4 { font-size: 24px;}
h5 { font-size: 20px;}
h6 {font-size: 18px;}

ul, ol, li { padding: 0;margin: 0; list-style:none;}
li { list-style: none;}
a { text-decoration:none; transition:all 400ms ease; -moz-transition:all 400ms ease; -webkit-transition:all 400ms ease; -ms-transition:all 400ms ease; -o-transition:all 400ms ease;}
a:hover{text-decoration:none; outline:none;}
p { padding: 0; margin: 0;font-style: normal; line-height: 1.4; font-weight: 400; font-size: 17px; color: var(--black-4); font-family: var(--font-poppins); transition: all 400ms ease;}
img { max-width: 100%;}

.fs_18{font-size:20px;}



input,button,select,textarea{ font-family: var(--font-poppins); font-weight: 400; font-size: 17px; background: transparent;}
::-webkit-input-placeholder { color: inherit;}
::-moz-input-placeholder { color: inherit;}
::-ms-input-placeholder { color: inherit;}
input{ transition: all 400ms ease;}

button:focus, input:focus, textarea:focus{ outline: none; box-shadow: none; transition: all 400ms ease;}


.border-b-1{border-bottom: 1px solid #ebebeb;}
.border-t-1{border-top: 1px solid #ebebeb;}


.navbar-rabit .navbar-nav-cstm > li { margin: 0px 17px;}
.navbar-rabit .navbar-nav-cstm > li > a { position: relative; display: block; text-align: center; font-size: 17px; line-height: 30px; padding: 25px 0px !important; font-weight: 500; opacity: 1; color: var(--black-4); overflow: hidden; z-index: 1; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease;}



.navbar-rabit .dropdown-menu{ left: inherit; padding-top: 15px; padding-bottom: 15px; border-radius:0px;
    top: 80%;
    width: 310px;
    margin-top: 15px;
    z-index: 100;
    border:none;
    background: var(--white-1);
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.07);
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease; left:0;}
    
    
.navbar-rabit .dropdown-menu li a{ border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: relative;  display: block; padding: 8px 30px; line-height: 24px; font-weight: 500; font-size: 16px; text-transform: capitalize; color: var(--black-4); text-align: left; transition: all 500ms ease; -moz-transition: all 500ms ease; -webkit-transition: all 500ms ease;  -ms-transition: all 500ms ease; -o-transition: all 500ms ease;}
.navbar-rabit .dropdown-menu li a:hover{color:var(--primary);}
.navbar-rabit .dropdown-menu li a:active, .navbar-rabit .dropdown-menu li a:focus{ background-color: var(--bs-dropdown-link-hover-bg);}


.dropdown-hover:hover>.dropdown-menu {display: inline-block;}
.dropdown-hover>.dropdown-toggle:active {pointer-events: none;}


.navbar-rabit .navbar-nav-cstm > li > a.drop-icon{padding-right:17px !important; display:inline-block;}
.navbar-rabit .navbar-nav-cstm > li > a.drop-icon:after{
    content:"";
    position:absolute;
    right:2px;
    top: calc(50% - 5px);
    display:inline-block;
    width:8px;
    height:8px;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:rotate(45deg);
    margin-left:8px;
    transition:all .3s ease;
}


.title-styled h2{font-weight:700; font-size:60px; color: var(--black-4); line-height:1.2;}
.title-styled h2 span{color:var(--primary);}
.sub-title { border-radius: 30px; box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.10); padding: 6px 37px; text-transform: uppercase; color: var(--primary);  margin-bottom: 19px; font-weight: 500; font-size: 15px; position: relative; display: inline-block; background-color:var(--white-1);}

.banner-area{background-size:cover; background-repeat:no-repeat; background-position:center; position:relative;}
.overlay-banner:before{position: absolute; content:""; height:100%; width:100%; background-color:rgba(0,0,0,0.8); top:0; left:0;}


.banner-area h1{font-size:70px; font-weight:700; color: var(--white-1); line-height:1.175em; display:block; margin-bottom:40px;}
.banner-area h1 .understyle-1{padding-bottom: 1.5rem; display:inline-block; position: relative; }
.banner-area h1 .understyle-1:before { position: absolute; content: ''; background-image: url(../images/shape/shape-152.png); width: 217px; height: 30px; left: 3px; bottom: 0px; background-repeat: no-repeat;}
.banner-area p{font-size:22px; color:var(--white-1);}


.banner-inner{background-image:url(../images/banner-inner-rabiten-web-development-company.webp); background-position:center bottom;}
.banner-inner h1 span{color: var(--primary);}

.customer-logos { margin-bottom: 2rem; position: relative;}

@media screen and (min-width: 1024px) {
    .customer-logos {  margin-bottom:6rem }
}

.customer-logos__logos { display: flex; -webkit-mask-image: linear-gradient(var(--mask-direction,to right),#0000,#000 10%,#000 90%,#0000); mask-image: linear-gradient(var(--mask-direction,to right),#0000,#000 10%,#000 90%,#0000); overflow: hidden;}
.customer-logos__marquee {  animation: marquee 300s linear infinite; display: flex;}

@keyframes marquee {
    0% {  transform: translateX(0) }
    to {  transform: translateX(-100%) }
}

.customer-logos__logo { align-items: center;  display: flex;  margin-right: 3.75rem; height: 40px; align-items: center;  width: 60px;}

@media screen and (min-width: 768px) {
    .customer-logos__logo { margin-right: 5rem; }
}

.customer-logos-section { position: relative; border-bottom: 1px solid #ebebeb;}
.customer-logos-section .customer-logos { margin-bottom: 0}
.customer-logos__logo img { height: 40px; width: auto;  object-fit: contain; display: block; filter: grayscale(100%); opacity: 1; transition: 0.3s ease;}
.customer-logos__logo img:hover { filter: grayscale(0%); opacity: 1;}




.box-style-1{border-radius:0px; padding:40px; background-color:#f7f7f7;}
.box-style-1 .icon-box {background: #f7f7f7; color:var(--primary); border-radius: 50%; margin-bottom: 20px; line-height: 85px; height: 80px; width: 80px; font-size: 45px;     text-align: center;}
.box-style-1 h4{margin-bottom: 15px; color:var(--black-4); line-height: 30px;  font-weight: 700; font-size: 20px;}



.sticky-content{position: sticky; top: 100px; /* Adjust according to navbar height */ }
.service-card{ background:var(--white-1); padding:40px; padding-top:90px; border-radius:0px; border:1px solid #ebebeb; margin-bottom:30px; background-color:rgb(255, 0, 81, 0); position:relative;}
.service-card .icon{position:absolute; left:-1px; top:-1px; height:50px; width:50px; line-height:50px; border-radius:0px; text-align:center; background-color:var(--black-4); color:var(--white-1); font-size:20px;}
.service-card h3{font-size: 24px;margin-bottom: 17px; font-weight: 600; display: block; color:var(--black-1);}
.service-card h3 a{color:var(--black-4);}
.service-card p{margin-bottom:25px;}
.service-card a.link-1{ color:var(--primary); font-weight: 600; font-size: 16px; position: relative; display: inline-block;}
.service-card a.link-1 i {  position: absolute; top: 6px; right: 0px; font-size: 16px; opacity: 0; transition: all 400ms ease;}
.service-card a.link-1:hover i { opacity: 1;}
.service-card a.link-1:hover{ padding-right: 30px; color: var(--primary);}



.stats-section{ width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed;}
.stat-card{ text-align:center; padding:40px 20px; border-radius:0px; background:rgba(255,255,255,.08); backdrop-filter:blur(10px); height:100%;}

.counter{ font-size:55px; font-weight:800; line-height:1; margin-bottom:15px; color: var(--white-1); position:relative; display:inline-block; z-index:9;}
.counter:before{position:absolute; content:""; height:10px; width:100%; margin:0px auto; left:auto; right:auto; background-color:var(--primary); bottom:0; z-index:-1; border-radius:0px;}
.stat-title{ font-size:17px; font-weight:400; color: var(--white-1);}


.industries-sec{width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed;}


.process-sec{width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; background-attachment: fixed;}
.process-box{background-color: #fff; padding: 30px 30px 45px 30px; position:relative; height: 100%; z-index: 9;}
.process-box:after{/* position: absolute; content: ''; background-image: url(../images/shape/shape-152.png); width: 217px; height: 30px; right: -65px; bottom: -2px; background-repeat: no-repeat; */
     position: absolute; content: ''; width: 40px; height: 5px; left: 100%; top: 50%; background-repeat: no-repeat;  z-index: -1; background-color: var(--primary); border-radius: 0px;}
.process-sec .col-md-6:last-child .process-box:after{content:normal;}



.process-box h4{margin-bottom:10px; margin-top:20px; color:var(--black-4); font-weight: 700; font-size: 20px;}
.process-box p{}
.process-box .count-box{font-size: 20px; font-weight: 700; color: var(--white-1); background-color: rgb(255, 0, 81); height: 34px; width: 34px; display: inline-block; border-radius: 50%; text-align: center; line-height: 34px;}
.process-box .icon-process{margin-top:30px; font-size: 45px; color: rgb(255, 0, 81, 1);}



.testimonial-box{}
.testimonial-box .author-area{padding: 5px 0 5px 10px; border-left: 2px solid var(--primary); margin-top: 30px;}
.testimonial-box .author-area h4{color:var(black-4); font-size:22px; font-weight:600;}
.testimonial-box p{font-size:24px; font-style:italic;}
.testimonial-box .author-area span{font-size:18px;}
.rating-5{margin-bottom:15px;}
.rating-5 li{display:inline-block;}
.rating-5 li i{color: orange;}

.carousel-indicators-cstm{position:static; margin: 30px 0 0 0 !important; justify-content: normal;}
.carousel-indicators-cstm button{height:10px !important; width:10px !important; border-radius:50%; background-color:rgb(255, 0, 81) !important;}

.cta-3{width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center right; background-attachment: fixed; overflow: hidden; position: relative;}
.cta-3:before{content:""; height:100%; width:100%; left:0; top:0; position:absolute; background-color:rgba(0,0,0,0.86);}
.cta-3 .inner-box{z-index:1; position:relative;}

.theme-btn{
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  font-size: 17px;
  line-height: 26px;
  font-weight: 600;
  color: var(--white-1) !important;
  text-align: center;
  padding: 12px 32px;
  border-radius: 0px;
  text-transform: capitalize;
  z-index: 1;
  -webkit-transition: all cubic-bezier(.4,0,.2,1) .4s;
  -o-transition: all cubic-bezier(.4,0,.2,1) .4s;
  transition: all cubic-bezier(.4,0,.2,1) .4s;
}

.theme-btn i{
  position: relative;
  margin-left: 8px;
  font-size: 15px;
  font-weight: 400;
  top: 1px;
}

.theme-btn-one { background: var(--primary);}
.theme-btn-one:hover{ background: var(--secondary);}



.blog-block{padding:35px 0; border-top: 1px solid #ebebeb;}
.blog-block .blog-date{color: var(--primary); line-height:1em; display:block; margin-bottom:15px;}
.blog-block .blog-date .blog-day{font-size:50px; font-weight:900; line-height:1em; display:block;}
.blog-block h4{font-size: 26px; font-weight: 700; color: var(--black-4);}
.blog-block h4 a{color: var(--black-4);}
.blog-block:hover h4 a{color: var(--primary);}
.blog-block p{}
.blog-block .blog-tags{margin-top:15px;}
.blog-block .blog-tags li{ display:inline-block; background-color:var(--white-1); color:var(--black-4); border-radius:30px; padding:5px 20px; text-align:center; font-size: 14px; border: 1px solid #ebebeb;}
    
    


.industry-block { padding:20px 0; border-bottom: 1px solid rgba(255,255,255,0.04);}
.industry-b1, .industry-b2, .industry-b3{margin-top:190px; padding: 30px 40px; border-radius: 0px; background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);}
.industry-b1 .industry-block:last-child, .industry-b2 .industry-block:last-child, .industry-b3 .industry-block:last-child{border-bottom:none;}
.industry-b2{background: rgba(255, 255, 255, 0.04); margin-top:95px;}
.industry-b3{background: rgba(255, 255, 255, 0.08); margin-top:0px;}

.industry-block h4{color:var(--white-1); font-size:19px; font-weight:600; margin-bottom: 10px; position:relative; }
.industry-block p{color:var(--white-1); font-size:17px; font-weight:300;}
.top-industry-gap{position:relative; margin-top:-170px;}



.form-box{display: block;  border-radius: 0px; background: rgba(255, 255, 255, 0); }
.form-box-outer{position: relative;}
.form-box .form-group{margin-bottom: 10px;}
.form-box .form-group input{border:none; outline:none; border-bottom: 2px solid var(--black-4); border-radius:0px; padding-left: 0px; padding-right: 0px; color:var(--black-4);}
.form-box .form-group input:focus, .form-box .txtarea-cstm:focus { border-color: #ff0051 !important;}
.form-box .form-group:last-child { margin-bottom: 0px; padding-top: 10px;}
.form-box .form-group .theme-btn { width: 100%; padding: 12px 40px;}
.list-check-1 li{color: var(--black-4); margin-bottom: 10px; font-weight: 600; font-size: 17px; position: relative; display: block;}
.list-check-1 li i.fa-check{font-size: 17px; color: var(--primary); min-width: 31px;}
.form-box .txtarea-cstm {border:none !important; outline:none; border-bottom: 2px solid var(--black-4) !important; border-radius:0px; resize: none; height: 100px !important; padding-left: 0px; padding-right: 0px; color:var(--black-4);}


.form-banner{background-color:var(--white-1); position:relative;}
.form-banner h2{font-weight: 700; font-size: 24px; color: var(--black-4); line-height: 1.2;}
.form-banner p{color:var(--black-4);}
.form-banner p.fs-15{font-size:15px !important; opacity: 0.8;}



.info-list-contact li{display:block; padding:15px 0; font-size:22px;}
.info-list-contact li a{color:var(--black-4); display:inline-block;}
.info-list-contact li i{display:inline-block; margin-right:7px; color:var(--primary); font-size:21px; min-width:35px;}


.footer-sec .footer-inner{border-top: 1px solid #ebebeb; margin-top:90px; }
.footer-sec .footer-inner h4 { color:var(--black-4); font-size: 20px; font-weight: 600; line-height: 30px; margin-bottom: 26px;}
.footer-sec .footer-inner .links-list li { position: relative; display: block; font-size: 17px; color:var(--black-4); margin-bottom: 7px;}
.footer-sec .footer-inner .links-list li a{color:var(--black-4); display:inline-block;}
.footer-sec .footer-inner .info-list li { line-height: 26px; margin-bottom: 19px;}
.footer-bottom-area{ /* border-top: 1px solid #e5e5e5; */ background: var(--black-4); border-radius:0px;}
.footer-bottom-area p, .footer-bottom-area a{color:var(--white-1);}
.footer-bottom-area a:hover { color:var(--primary);}




.whatsapp-float { position: fixed; width: 60px; height: 60px; bottom: 25px; right: 25px; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,0.2); z-index: 9999; transition: transform 0.3s ease;}
.whatsapp-float img { width: 35px; height: 35px;}
.whatsapp-float:hover { transform: scale(1.1);}







/***********Responsiveness*************/


@media(max-width:1199.98px){
    .banner-area h1{font-size:60px;}
    .title-styled h2{font-size:50px;}
}

@media(max-width:991.98px){
    .banner-area h1{font-size:50px;}
    .banner-area p{font-size:20px;}
    .title-styled h2{font-size:44px;}
    .fs_18 { font-size: 18px;}
    p, .theme-btn{font-size:16px;}
    .counter{font-size:45px;}
    .testimonial-box p { font-size: 22px;}
    .navbar-rabit .navbar-nav-cstm > li { margin: 0px;}
    .navbar-rabit .navbar-nav-cstm > li > a{padding:10px 0 !important; text-align: left;}
    
    .sticky-content{ position:static; }
    .process-sec .col-md-6:nth-child(2) .process-box:after{content:normal;}
    
    .blog-block .blog-date{font-size:15px;}
    .blog-block .blog-date .blog-day{font-size:30px;}
    .blog-block h4{font-size:20px; margin-bottom:15px;}
        
}



@media(max-width:767.98px){
    .banner-area h1{font-size:40px;}
    .banner-area p{font-size:18px;}
    .title-styled h2{font-size:36px;}
    
    .testimonial-box p { font-size: 20px;}
    .industry-b1, .industry-b2, .industry-b3{padding:20px 25px;}
    .process-box:after{content:normal;}
}