/*==================================================
ANKIT DIGITAL
Version : 1.0
Author  : Ankit Digital
Website : https://ankitdigital.in
==================================================*/

/*==============================
Google Fonts
==============================*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@400;500;600;700;800&display=swap');

/*==============================
Root Variables
==============================*/

:root{
  --primary:#6C3BFF;
  --primary-dark:#4D26D9;
  --secondary:#0F172A;
  --accent:#FF8A00;
  --success:#16A34A;
  --danger:#DC2626;
  --warning:#F59E0B;
  --info:#0EA5E9;
  --white:#ffffff;
  --light:#F8FAFC;
  --gray:#64748B;
  --border:#E5E7EB;
  --heading:#111827;
  --text:#475569;
  --radius:16px;
  --radius-lg:24px;
  --shadow-sm:0 5px 20px rgba(0,0,0,.05);
  --shadow:0 15px 40px rgba(0,0,0,.08);
  --shadow-lg:0 25px 60px rgba(0,0,0,.12);
  --transition:.35s ease;
}

/*==============================
Reset
==============================*/

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Inter',sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.8;
  background:#fff;
  color:var(--text);
  overflow-x:hidden;
}

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

a{
  text-decoration:none;
  transition:var(--transition);
}

ul{
  margin:0;
  padding:0;
  list-style:none;
}

button{
  border:none;
  outline:none;
  cursor:pointer;
}

input,
textarea,
select{
  outline:none;
}

/*==============================
Typography
==============================*/

h1,
h2,
h3,
h4,
h5,
h6{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  color:var(--heading);
  margin-bottom:15px;
}

h1{
  font-size:62px;
  line-height:72px;
}

h2{
  font-size:46px;
  line-height:58px;
}

h3{
  font-size:32px;
}

h4{
  font-size:24px;
}

h5{
  font-size:20px;
}

p{
  margin-bottom:18px;
}

/*==============================
Container
==============================*/

.container{
  max-width:1320px;
  margin:auto;
  padding-left:15px;
  padding-right:15px;
}

section{
  padding:100px 0;
  position:relative;
}

/*==============================
Section Title
==============================*/

.section-title{
  margin-bottom:60px;
}

.section-title span{
  display:inline-block;
  color:var(--primary);
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-bottom:10px;
}

.section-title h2{
  margin-bottom:20px;
}

.section-title p{
  max-width:700px;
  margin:auto;
}

/*==============================
Buttons
==============================*/

.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 34px;
  background:var(--primary);
  color:#fff;
  border-radius:50px;
  font-weight:600;
  transition:.4s;
  box-shadow:var(--shadow);
}

.btn-primary:hover{
  background:var(--primary-dark);
  transform:translateY(-4px);
  color:#fff;
}

.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 34px;
  border:2px solid var(--primary);
  border-radius:50px;
  color:var(--primary);
  font-weight:600;
  transition:.4s;
}

.btn-outline:hover{
  background:var(--primary);
  color:#fff;
}

/*==============================
Cards
==============================*/

.card-box{
  background:#fff;
  border-radius:var(--radius);
  padding:30px;
  box-shadow:var(--shadow-sm);
  transition:.35s;
  height:100%;
}

.card-box:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow);
}

/*==============================
Forms
==============================*/

.form-control,

.form-select{
  height:56px;
  border-radius:12px;
  border:1px solid var(--border);
  padding:15px;
  font-size:15px;
  box-shadow:none;
}

.form-control:focus,

.form-select:focus{
  border-color:var(--primary);
  box-shadow:none;
}

textarea.form-control{
  height:auto;
  min-height:180px;
  resize:none;
  padding-top:15px;
}

/*==============================
Image Radius
==============================*/

.img-radius{
  border-radius:20px;
  overflow:hidden;
}

/*==============================
Backgrounds
==============================*/

.bg-light{
  background:var(--light);
}

.bg-primary{
  background:var(--primary);
}

.bg-dark{
  background:var(--secondary);
}

/*==============================
Utilities
==============================*/

.text-primary{
  color:var(--primary)!important;
}

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

.text-white{
  color:#fff;
}

.mb-20{
  margin-bottom:20px;
}

.mb-30{
  margin-bottom:30px;
}

.mb-40{
  margin-bottom:40px;
}

.mt-30{
  margin-top:30px;
}

.radius{
  border-radius:var(--radius);
}

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

.overflow-hidden{
  overflow:hidden;
}

/*==============================
Scrollbar
==============================*/

::-webkit-scrollbar{
  width:8px;
}

::-webkit-scrollbar-track{
  background:#f1f1f1;
}

::-webkit-scrollbar-thumb{
  background:var(--primary);
  border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
  background:var(--primary-dark);
}
/*==================================================
HEADER
==================================================*/

.top-bar{
  background:#0f172a;
  padding:10px 0;
  font-size:14px;
  color:#fff;
}

.topbar-wrapper{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.top-left,
.top-right{
  display:flex;
  align-items:center;
  gap:20px;
}

.top-left a,
.top-right a{
  color:#fff;
  font-size:14px;
  transition:.35s;
}

.top-left a i{
  margin-right:8px;
  color:#FF8A00;
}

.top-right a{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
}

.top-right a:hover{
  background:#6C3BFF;
  transform:translateY(-3px);
}

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

.main-header{
  position:absolute;
  left:0;
  top:50px;
  width:100%;
  z-index:999;
  transition:.4s;
}

.main-header.sticky{
  position:fixed;
  top:0;
  background:#fff;
  box-shadow:0 10px 40px rgba(0,0,0,.08);
  animation:headerSticky .5s;
}

@keyframes headerSticky{
  from{
    transform:translateY(-100%);
  }
  to{
    transform:translateY(0);
  }
}

.header-area{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:90px;
}

.logo img{
  height:60px;
  transition:.4s;
}

.main-header.sticky .logo img{
  height:52px;
}

/*==================================================
MENU
==================================================*/

.desktop-menu>ul{
  display:flex;
  align-items:center;
  gap:35px;
}

.desktop-menu ul li{
  position:relative;
}

.desktop-menu ul li a{
  font-size:16px;
  font-weight:600;
  color:#111827;
  padding:32px 0;
  display:block;
  transition:.35s;
}

.desktop-menu ul li a:hover,

.desktop-menu ul li a.active{
  color:#6C3BFF;
}

/*==================================================
SUB MENU
==================================================*/

.submenu{
  position:absolute;
  top:110%;
  left:0;
  width:260px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.10);
  opacity:0;
  visibility:hidden;
  transition:.35s;
  padding:10px 0;
}

.desktop-menu li:hover .submenu{
  top:100%;
  opacity:1;
  visibility:visible;
}

.submenu li{
  display:block;
}

.submenu li a{
  padding:12px 25px;
  font-size:15px;
  font-weight:500;
  color:#555;
}

.submenu li a:hover{
  background:#F8FAFC;
  color:#6C3BFF;
  padding-left:35px;
}

/*==================================================
MEGA MENU
==================================================*/

.mega-menu{
  position:absolute;
  left:0;
  top:120%;
  width:900px;
  background:#fff;
  padding:40px;
  border-radius:20px;
  box-shadow:0 25px 80px rgba(0,0,0,.08);
  display:none;
}

.has-mega:hover .mega-menu{
  display:block;
}

.mega-menu h5{
  font-size:18px;
  margin-bottom:20px;
}

.mega-menu ul li{
  margin-bottom:12px;
}

.mega-menu ul li a{
  padding:0;
  font-size:15px;
  color:#555;
}

.mega-menu ul li a:hover{
  padding-left:8px;
}

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

.header-buttons{
  display:flex;
  align-items:center;
  gap:15px;
}

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

.mobile-toggle{
  display:none;
  width:50px;
  height:50px;
  border-radius:12px;
  background:#6C3BFF;
  color:#fff;
  font-size:22px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

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

.mobile-menu{
  position:fixed;
  top:0;
  left:-340px;
  width:320px;
  height:100%;
  background:#fff;
  z-index:99999;
  transition:.4s;
  overflow:auto;
  padding:30px;
  box-shadow:0 20px 80px rgba(0,0,0,.20);
}

.mobile-menu.active{
  left:0;
}

.mobile-logo{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:35px;
}

.mobile-logo img{
  height:45px;
}

.close-menu{
  background:none;
  border:none;
  font-size:28px;
  cursor:pointer;
}

.mobile-menu ul{
  margin-top:20px;
}

.mobile-menu ul li{
  border-bottom:1px solid #eee;
}

.mobile-menu ul li a{
  display:block;
  padding:16px 0;
  font-weight:600;
  color:#111827;
}

.mobile-menu ul li a:hover{
  color:#6C3BFF;
  padding-left:10px;
}

.mobile-overlay{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.6);
  opacity:0;
  visibility:hidden;
  transition:.35s;
  z-index:9999;
}

.mobile-overlay.active{
  opacity:1;
  visibility:visible;
}

/*==================================================
SEARCH ICON
==================================================*/

.search-btn{
  width:46px;
  height:46px;
  border-radius:50%;
  background:#F3F4F6;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.35s;
}

.search-btn:hover{
  background:#6C3BFF;
  color:#fff;
}

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

.quote-btn{
  padding:14px 28px;
  border-radius:50px;
  background:#FF8A00;
  color:#fff;
  font-weight:600;
  transition:.35s;
}

.quote-btn:hover{
  background:#111827;
  color:#fff;
  transform:translateY(-3px);
}
/*=========================================
HERO SECTION
=========================================*/

.hero-section{
  position:relative;
  overflow:hidden;
  padding:180px 0 120px;
  background:linear-gradient(135deg,#f8f6ff 0%,#ffffff 60%,#eef4ff 100%);
  min-height:100vh;
  display:flex;
  align-items:center;
}

.hero-section::before{
  content:"";
  position:absolute;
  width:700px;
  height:700px;
  background:#6C3BFF;
  filter:blur(220px);
  opacity:.08;
  top:-250px;
  right:-150px;
  border-radius:50%;
}

.hero-section::after{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background:#FF8A00;
  filter:blur(180px);
  opacity:.06;
  left:-120px;
  bottom:-180px;
  border-radius:50%;
}

/*=========================================
Hero Left
=========================================*/

.hero-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 22px;
  border-radius:50px;
  background:#ffffff;
  box-shadow:0 15px 35px rgba(0,0,0,.08);
  font-weight:600;
  font-size:15px;
  color:#6C3BFF;
  margin-bottom:25px;
}

.hero-title{
  font-size:68px;
  line-height:82px;
  font-weight:800;
  margin-bottom:25px;
  color:#111827;
}

.hero-title span{
  background:linear-gradient(90deg,#6C3BFF,#8B5CFF);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.hero-desc{
  font-size:19px;
  color:#64748B;
  margin-bottom:35px;
  max-width:650px;
}

/*=========================================
Hero Buttons
=========================================*/

.hero-buttons{
  display:flex;
  gap:20px;
  margin-bottom:50px;
  flex-wrap:wrap;
}

/*=========================================
Hero Counter
=========================================*/

.hero-counter{
  display:flex;
  gap:35px;
  flex-wrap:wrap;
}

.counter-box{
  background:#fff;
  padding:22px 28px;
  border-radius:18px;
  box-shadow:0 15px 40px rgba(0,0,0,.07);
  min-width:150px;
  transition:.4s;
}

.counter-box:hover{
  transform:translateY(-8px);
}

.counter-box h3{
  font-size:36px;
  color:#6C3BFF;
  margin-bottom:8px;
}

.counter-box span{
  font-size:15px;
  color:#64748B;
}

/*=========================================
Hero Image
=========================================*/

.hero-image{
  position:relative;
  text-align:center;
  z-index:5;
}

.hero-image img{
  width:100%;
  max-width:560px;
  animation:heroFloat 6s infinite ease-in-out;
}

@keyframes heroFloat{
  0%{
    transform:translateY(0px);
  }
  50%{
    transform:translateY(-18px);
  }
  100%{
    transform:translateY(0px);
  }
}

/*=========================================
Floating Cards
=========================================*/

.floating-card{
  position:absolute;
  background:#fff;
  padding:18px 22px;
  border-radius:18px;
  box-shadow:0 25px 50px rgba(0,0,0,.10);
  font-size:15px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px;
  animation:floatingCard 4s infinite;
}

@keyframes floatingCard{
  0%{
    transform:translateY(0px);
  }
  50%{
    transform:translateY(-12px);
  }
  100%{
    transform:translateY(0px);
  }
}

.card-one{
  top:10%;
  left:-20px;
}

.card-two{
  top:55%;
  left:-50px;
}

.card-three{
  top:15%;
  right:-20px;
}

.card-four{
  bottom:10%;
  right:-40px;
}

/*=========================================
Hero Shapes
=========================================*/

.hero-shape{
  position:absolute;
  animation:rotateShape 20s linear infinite;
  opacity:.15;
}

.shape-1{
  top:120px;
  left:80px;
}

.shape-2{
  right:120px;
  bottom:150px;
}

.shape-3{
  left:45%;
  top:80px;
}

@keyframes rotateShape{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}

/*=========================================
Hero Clients
=========================================*/

.hero-clients{
  margin-top:70px;
  display:flex;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
}

.hero-clients img{
  height:42px;
  opacity:.7;
  transition:.4s;
  filter:grayscale(100%);
}

.hero-clients img:hover{
  opacity:1;
  filter:none;
}

/*=========================================
Scroll Down
=========================================*/

.scroll-down{
  position:absolute;
  bottom:40px;
  left:50%;
  transform:translateX(-50%);
  font-size:28px;
  color:#6C3BFF;
  animation:scrollMove 2s infinite;
}

@keyframes scrollMove{
  0%{
    transform:translate(-50%,0);
  }
  50%{
    transform:translate(-50%,10px);
  }
  100%{
    transform:translate(-50%,0);
  }
}

/*=========================================
Background Grid
=========================================*/

.hero-grid{
  position:absolute;
  inset:0;
  background-image:
  linear-gradient(rgba(108,59,255,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(108,59,255,.05) 1px,transparent 1px);
  background-size:50px 50px;
  pointer-events:none;
}
/*==================================================
CLIENTS SECTION
==================================================*/

.clients-section{
  padding:80px 0;
  background:#ffffff;
}

.client-slider{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}

.client-slider img{
  height:45px;
  opacity:.6;
  transition:.4s;
  filter:grayscale(100%);
}

.client-slider img:hover{
  opacity:1;
  filter:none;
  transform:scale(1.05);
}

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

.about-section{
  padding:120px 0;
  background:#F8FAFC;
}

.about-image{
  position:relative;
}

.about-image img{
  border-radius:25px;
  box-shadow:0 20px 60px rgba(0,0,0,.10);
}

.experience-box{
  position:absolute;
  bottom:30px;
  right:-30px;
  background:#6C3BFF;
  padding:25px;
  border-radius:20px;
  color:#fff;
  text-align:center;
  box-shadow:0 20px 40px rgba(108,59,255,.30);
}

.experience-box h2{
  font-size:42px;
  color:#fff;
  margin-bottom:5px;
}

.about-content{
  padding-left:50px;
}

.about-list{
  margin-top:30px;
}

.about-list li{
  display:flex;
  align-items:center;
  margin-bottom:18px;
  font-weight:600;
}

.about-list li i{
  width:42px;
  height:42px;
  background:#EEF2FF;
  color:#6C3BFF;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:15px;
}

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

.services-section{
  padding:120px 0;
  background:#fff;
}

.service-card{
  background:#fff;
  padding:40px;
  border-radius:24px;
  box-shadow:0 15px 45px rgba(0,0,0,.06);
  transition:.4s;
  height:100%;
  position:relative;
  overflow:hidden;
}

.service-card::before{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  background:#6C3BFF;
  opacity:.05;
  right:-40px;
  top:-40px;
  border-radius:50%;
}

.service-card:hover{
  transform:translateY(-12px);
  box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.service-icon{
  width:80px;
  height:80px;
  background:#EEF2FF;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:25px;
  font-size:34px;
  color:#6C3BFF;
  transition:.4s;
}

.service-card:hover .service-icon{
  background:#6C3BFF;
  color:#fff;
  transform:rotate(10deg);
}

.service-card h4{
  margin-bottom:15px;
  font-size:24px;
}

.service-card p{
  color:#64748B;
  margin-bottom:25px;
}

.service-link{
  font-weight:600;
  color:#6C3BFF;
}

.service-link i{
  margin-left:8px;
  transition:.3s;
}

.service-link:hover i{
  margin-left:15px;
}

/*==================================================
WHY CHOOSE US
==================================================*/

.why-section{
  background:#F8FAFC;
  padding:120px 0;
}

.why-box{
  background:#fff;
  padding:35px;
  border-radius:22px;
  box-shadow:0 15px 40px rgba(0,0,0,.06);
  transition:.35s;
  height:100%;
}

.why-box:hover{
  transform:translateY(-10px);
}

.why-icon{
  width:70px;
  height:70px;
  background:#6C3BFF;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:30px;
  margin-bottom:20px;
}

.why-box h4{
  margin-bottom:15px;
}

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

.industries-section{
  padding:120px 0;
  background:#fff;
}

.industry-card{
  background:#F8FAFC;
  padding:40px 25px;
  border-radius:20px;
  text-align:center;
  transition:.35s;
  height:100%;
}

.industry-card:hover{
  background:#6C3BFF;
  transform:translateY(-10px);
}

.industry-card i{
  font-size:42px;
  color:#6C3BFF;
  margin-bottom:20px;
  transition:.35s;
}

.industry-card h5{
  font-size:20px;
  margin-bottom:10px;
}

.industry-card p{
  font-size:15px;
  margin:0;
}

.industry-card:hover i,

.industry-card:hover h5,

.industry-card:hover p{
  color:#fff;
}

/*==================================================
SECTION SHAPES
==================================================*/

.section-shape{
  position:absolute;
  opacity:.08;
  pointer-events:none;
}

.shape-left{
  left:0;
  top:100px;
}

.shape-right{
  right:0;
  bottom:100px;
}

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

.zoom-hover{
  overflow:hidden;
  border-radius:20px;
}

.zoom-hover img{
  transition:.5s;
}

.zoom-hover:hover img{
  transform:scale(1.08);
}
/*==================================================
COUNTER SECTION
==================================================*/

.counter-section{
  padding:100px 0;
  background:linear-gradient(135deg,#6C3BFF,#4F46E5);
  color:#fff;
  position:relative;
  overflow:hidden;
}

.counter-section::before{
  content:"";
  position:absolute;
  width:700px;
  height:700px;
  background:rgba(255,255,255,.05);
  border-radius:50%;
  right:-250px;
  top:-250px;
}

.counter-box{
  text-align:center;
  padding:35px 20px;
  position:relative;
  z-index:2;
}

.counter-box h2{
  font-size:58px;
  font-weight:800;
  color:#fff;
  margin-bottom:10px;
}

.counter-box p{
  font-size:18px;
  margin:0;
  opacity:.9;
}

/*==================================================
TECHNOLOGIES
==================================================*/

.technologies-section{
  padding:120px 0;
  background:#F8FAFC;
}

.tech-card{
  background:#fff;
  padding:35px;
  border-radius:22px;
  text-align:center;
  transition:.35s;
  box-shadow:0 12px 35px rgba(0,0,0,.05);
  height:100%;
}

.tech-card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 50px rgba(0,0,0,.10);
}

.tech-card img{
  height:70px;
  margin:auto;
  margin-bottom:20px;
}

.tech-card h5{
  margin:0;
  font-size:20px;
}

/*==================================================
PROCESS
==================================================*/

.process-section{
  padding:120px 0;
  background:#fff;
}

.process-card{
  position:relative;
  padding:35px;
  text-align:center;
}

.process-number{
  width:70px;
  height:70px;
  background:#6C3BFF;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:700;
  margin:auto;
  margin-bottom:25px;
}

.process-card::after{
  content:"";
  position:absolute;
  width:120px;
  height:2px;
  background:#D1D5DB;
  right:-60px;
  top:70px;
}

.process-card:last-child::after{
  display:none;
}

.process-card h4{
  margin-bottom:15px;
}

.process-card p{
  margin:0;
}

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

.portfolio-section{
  padding:120px 0;
  background:#F8FAFC;
}

.portfolio-card{
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 15px 45px rgba(0,0,0,.06);
  transition:.4s;
  height:100%;
}

.portfolio-card:hover{
  transform:translateY(-12px);
}

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

.portfolio-image img{
  width:100%;
  transition:.6s;
}

.portfolio-card:hover img{
  transform:scale(1.08);
}

.portfolio-overlay{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:rgba(17,24,39,.75);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:.4s;
}

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

.portfolio-overlay a{
  width:60px;
  height:60px;
  background:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6C3BFF;
  font-size:22px;
}

.portfolio-content{
  padding:30px;
}

.portfolio-content span{
  display:inline-block;
  color:#6C3BFF;
  font-size:14px;
  font-weight:600;
  margin-bottom:12px;
}

.portfolio-content h4{
  margin-bottom:15px;
}

/*==================================================
PRICING
==================================================*/

.pricing-section{
  padding:120px 0;
  background:#fff;
}

.pricing-card{
  background:#fff;
  border-radius:28px;
  padding:45px;
  box-shadow:0 20px 60px rgba(0,0,0,.06);
  text-align:center;
  transition:.4s;
  position:relative;
  height:100%;
  border:1px solid #E5E7EB;
}

.pricing-card:hover{
  transform:translateY(-12px);
}

.pricing-card.active{
  background:#6C3BFF;
  color:#fff;
}

.pricing-card.active h3,

.pricing-card.active h2,

.pricing-card.active li{
  color:#fff;
}

.pricing-card.active .btn-primary{
  background:#fff;
  color:#6C3BFF;
}

.pricing-card h3{
  font-size:24px;
  margin-bottom:20px;
}

.price{
  font-size:56px;
  font-weight:800;
  margin-bottom:25px;
  color:#6C3BFF;
}

.pricing-card ul{
  margin:35px 0;
}

.pricing-card ul li{
  padding:12px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.pricing-card.active ul li{
  border-color:rgba(255,255,255,.15);
}

.pricing-badge{
  position:absolute;
  top:-15px;
  right:30px;
  background:#FF8A00;
  color:#fff;
  padding:8px 20px;
  border-radius:30px;
  font-size:14px;
  font-weight:600;
}

/*==================================================
SECTION DIVIDER
==================================================*/

.wave-divider{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  line-height:0;
}

.wave-divider svg{
  display:block;
  width:100%;
  height:100px;
}
/*==================================================
TESTIMONIAL SECTION
==================================================*/

.testimonial-section{
  padding:120px 0;
  background:#F8FAFC;
  position:relative;
  overflow:hidden;
}

.testimonial-card{
  background:#fff;
  padding:40px;
  border-radius:25px;
  box-shadow:0 20px 50px rgba(0,0,0,.06);
  transition:.35s;
  height:100%;
}

.testimonial-card:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 60px rgba(0,0,0,.10);
}

.testimonial-rating{
  margin-bottom:20px;
  color:#FFB400;
  font-size:18px;
}

.testimonial-text{
  font-size:17px;
  line-height:30px;
  margin-bottom:30px;
  color:#555;
}

.client-info{
  display:flex;
  align-items:center;
  gap:18px;
}

.client-info img{
  width:70px;
  height:70px;
  border-radius:50%;
  object-fit:cover;
}

.client-info h5{
  margin-bottom:4px;
}

.client-info span{
  font-size:14px;
  color:#777;
}

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

.faq-section{
  padding:120px 0;
  background:#fff;
}

.accordion-item{
  border:none;
  margin-bottom:20px;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 15px 35px rgba(0,0,0,.05);
}

.accordion-button{
  padding:25px;
  font-size:18px;
  font-weight:600;
  background:#fff;
  box-shadow:none;
}

.accordion-button:not(.collapsed){
  background:#6C3BFF;
  color:#fff;
}

.accordion-button:focus{
  box-shadow:none;
}

.accordion-body{
  padding:25px;
  font-size:16px;
  line-height:30px;
}

/*==================================================
BLOG SECTION
==================================================*/

.blog-section{
  padding:120px 0;
  background:#F8FAFC;
}

.blog-card{
  background:#fff;
  border-radius:25px;
  overflow:hidden;
  box-shadow:0 15px 40px rgba(0,0,0,.06);
  transition:.4s;
  height:100%;
}

.blog-card:hover{
  transform:translateY(-12px);
}

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

.blog-image img{
  width:100%;
  transition:.6s;
}

.blog-card:hover img{
  transform:scale(1.08);
}

.blog-date{
  position:absolute;
  bottom:20px;
  left:20px;
  background:#6C3BFF;
  color:#fff;
  padding:8px 18px;
  border-radius:30px;
  font-size:14px;
}

.blog-content{
  padding:30px;
}

.blog-category{
  display:inline-block;
  margin-bottom:15px;
  font-size:14px;
  font-weight:600;
  color:#6C3BFF;
}

.blog-content h4{
  margin-bottom:15px;
  line-height:34px;
}

.blog-content p{
  margin-bottom:20px;
}

.blog-content a{
  font-weight:600;
  color:#6C3BFF;
}

.blog-content a:hover{
  padding-left:8px;
}

/*==================================================
NEWSLETTER
==================================================*/

.newsletter-section{
  padding:100px 0;
  background:linear-gradient(135deg,#6C3BFF,#4F46E5);
  color:#fff;
}

.newsletter-box{
  background:rgba(255,255,255,.08);
  padding:60px;
  border-radius:30px;
  backdrop-filter:blur(12px);
  text-align:center;
}

.newsletter-box h2{
  color:#fff;
  margin-bottom:15px;
}

.newsletter-box p{
  max-width:650px;
  margin:auto;
  margin-bottom:35px;
  opacity:.9;
}

.newsletter-form{
  max-width:700px;
  margin:auto;
  display:flex;
  gap:15px;
  flex-wrap:wrap;
}

.newsletter-form input{
  flex:1;
  height:60px;
  border:none;
  border-radius:50px;
  padding:0 25px;
  font-size:16px;
}

.newsletter-form button{
  height:60px;
  padding:0 35px;
  border:none;
  border-radius:50px;
  background:#FF8A00;
  color:#fff;
  font-weight:600;
  transition:.35s;
}

.newsletter-form button:hover{
  background:#111827;
}

/*==================================================
SECTION TITLE LIGHT
==================================================*/

.section-title.light span{
  color:#FFD166;
}

.section-title.light h2{
  color:#fff;
}

.section-title.light p{
  color:rgba(255,255,255,.85);
}

/*==================================================
BLOG TAG
==================================================*/

.blog-tag{
  display:inline-block;
  padding:8px 18px;
  background:#EEF2FF;
  border-radius:50px;
  font-size:13px;
  font-weight:600;
  color:#6C3BFF;
  margin-right:10px;
  margin-bottom:10px;
  transition:.3s;
}

.blog-tag:hover{
  background:#6C3BFF;
  color:#fff;
}
/*==================================================
CONTACT SECTION
==================================================*/

.contact-section{
  padding:120px 0;
  background:#F8FAFC;
  position:relative;
}

.contact-box{
  background:#fff;
  padding:50px;
  border-radius:30px;
  box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.contact-info-box{
  display:flex;
  align-items:flex-start;
  gap:20px;
  margin-bottom:30px;
}

.contact-icon{
  width:70px;
  height:70px;
  background:#6C3BFF;
  color:#fff;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  flex-shrink:0;
}

.contact-info-box h5{
  margin-bottom:8px;
}

.contact-info-box p{
  margin:0;
  color:#64748B;
  line-height:28px;
}

.contact-form .form-control,

.contact-form .form-select{
  height:58px;
  border-radius:15px;
  margin-bottom:20px;
  border:1px solid #E5E7EB;
  padding:15px 20px;
}

.contact-form textarea{
  height:180px;
  resize:none;
  padding-top:20px;
}

.contact-form .btn-primary{
  width:100%;
  height:58px;
  font-size:17px;
}

/*==================================================
GOOGLE MAP
==================================================*/

.map-section{
  padding:0;
}

.map-section iframe{
  width:100%;
  height:500px;
  border:0;
  display:block;
  filter:grayscale(20%);
}

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

.footer{
  background:#0F172A;
  color:#CBD5E1;
  padding-top:100px;
  position:relative;
  overflow:hidden;
}

.footer::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background:#6C3BFF;
  opacity:.08;
  border-radius:50%;
  top:-250px;
  right:-200px;
}

.footer-logo{
  margin-bottom:25px;
}

.footer-logo img{
  height:60px;
}

.footer-about{
  margin-bottom:30px;
  line-height:30px;
}

.footer h4{
  color:#fff;
  margin-bottom:30px;
  font-size:22px;
}

.footer-links{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-links li{
  margin-bottom:14px;
}

.footer-links li a{
  color:#CBD5E1;
  transition:.3s;
}

.footer-links li a:hover{
  color:#fff;
  padding-left:8px;
}

.footer-contact li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:18px;
}

.footer-contact i{
  color:#FF8A00;
  margin-top:4px;
}

.footer-social{
  display:flex;
  gap:15px;
  margin-top:30px;
}

.footer-social a{
  width:42px;
  height:42px;
  background:rgba(255,255,255,.08);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  transition:.35s;
}

.footer-social a:hover{
  background:#6C3BFF;
  transform:translateY(-5px);
}

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

.footer-newsletter{
  margin-top:25px;
}

.footer-newsletter input{
  width:100%;
  height:54px;
  border:none;
  border-radius:50px;
  padding:0 20px;
  margin-bottom:15px;
}

.footer-newsletter button{
  width:100%;
  height:54px;
  border:none;
  border-radius:50px;
  background:#FF8A00;
  color:#fff;
  font-weight:600;
  transition:.35s;
}

.footer-newsletter button:hover{
  background:#6C3BFF;
}

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

.footer-bottom{
  margin-top:70px;
  padding:25px 0;
  border-top:1px solid rgba(255,255,255,.08);
}

.footer-bottom-content{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:15px;
}

.footer-bottom p{
  margin:0;
}

.footer-bottom-links{
  display:flex;
  gap:20px;
}

.footer-bottom-links a{
  color:#CBD5E1;
}

.footer-bottom-links a:hover{
  color:#fff;
}

/*==================================================
PAYMENT ICONS
==================================================*/

.payment-icons{
  display:flex;
  gap:12px;
  margin-top:25px;
  flex-wrap:wrap;
}

.payment-icons img{
  height:34px;
  background:#fff;
  padding:6px;
  border-radius:8px;
}

/*==================================================
APP DOWNLOAD
==================================================*/

.app-buttons{
  display:flex;
  gap:15px;
  margin-top:25px;
  flex-wrap:wrap;
}

.app-buttons img{
  height:48px;
  border-radius:10px;
  transition:.35s;
}

.app-buttons img:hover{
  transform:translateY(-4px);
}
/*==================================================
FLOATING BUTTONS
==================================================*/

.floating-whatsapp,
.floating-call,
.back-top{
  position:fixed;
  right:25px;
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:24px;
  cursor:pointer;
  transition:.35s;
  z-index:9999;
  box-shadow:0 15px 40px rgba(0,0,0,.15);
}

.floating-whatsapp{
  bottom:30px;
  background:#25D366;
}

.floating-call{
  bottom:105px;
  background:#2563EB;
}

.back-top{
  bottom:180px;
  background:#6C3BFF;
  opacity:0;
  visibility:hidden;
}

.back-top.active{
  opacity:1;
  visibility:visible;
}

.floating-whatsapp:hover,
.floating-call:hover,
.back-top:hover{
  transform:translateY(-8px) scale(1.05);
}

/*==================================================
SEARCH POPUP
==================================================*/

.search-popup{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(15,23,42,.95);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:.4s;
  z-index:99999;
}

.search-popup.active{
  opacity:1;
  visibility:visible;
}

.search-popup form{
  width:700px;
  max-width:90%;
  display:flex;
  gap:15px;
}

.search-popup input{
  flex:1;
  height:70px;
  padding:0 30px;
  border-radius:60px;
  border:none;
  font-size:18px;
}

.search-popup button{
  width:70px;
  border:none;
  border-radius:50%;
  background:#6C3BFF;
  color:#fff;
  font-size:20px;
}

.close-search{
  position:absolute;
  top:40px;
  right:40px;
  font-size:40px;
  color:#fff;
  cursor:pointer;
}

/*==================================================
COOKIE BANNER
==================================================*/

.cookie-banner{
  position:fixed;
  left:30px;
  bottom:30px;
  width:380px;
  background:#fff;
  padding:30px;
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.15);
  z-index:9999;
  display:none;
}

.cookie-banner.show{
  display:block;
  animation:cookieUp .5s;
}

@keyframes cookieUp{
  from{
    transform:translateY(80px);
    opacity:0;
  }
  to{
    transform:translateY(0);
    opacity:1;
  }
}

.cookie-banner h5{
  margin-bottom:10px;
}

.cookie-banner p{
  font-size:15px;
  margin-bottom:20px;
  color:#64748B;
}

.cookie-buttons{
  display:flex;
  gap:10px;
}

/*==================================================
PRELOADER
==================================================*/

#preloader{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999999;
}

.loader-circle{
  width:80px;
  height:80px;
  border:6px solid #EEF2FF;
  border-top:6px solid #6C3BFF;
  border-radius:50%;
  animation:loaderSpin .8s linear infinite;
}

@keyframes loaderSpin{
  100%{
    transform:rotate(360deg);
  }
}

.loader-logo{
  position:absolute;
  width:45px;
}

/*==================================================
PAGE LOADER TEXT
==================================================*/

.loader-text{
  margin-top:120px;
  position:absolute;
  font-weight:600;
  color:#6C3BFF;
  letter-spacing:2px;
}

/*==================================================
CURSOR EFFECT
==================================================*/

.cursor-dot{
  position:fixed;
  width:10px;
  height:10px;
  background:#6C3BFF;
  border-radius:50%;
  pointer-events:none;
  z-index:999999;
}

.cursor-outline{
  position:fixed;
  width:40px;
  height:40px;
  border:2px solid rgba(108,59,255,.4);
  border-radius:50%;
  pointer-events:none;
  z-index:999998;
  transition:.12s;
}

/*==================================================
PAGE PROGRESS BAR
==================================================*/

.progress-bar-top{
  position:fixed;
  left:0;
  top:0;
  height:4px;
  width:0;
  background:#6C3BFF;
  z-index:999999;
}

/*==================================================
RESPONSIVE - LARGE DESKTOP
==================================================*/

@media (max-width:1400px){
  .container{
    max-width:1140px;
  }
  .hero-title{
    font-size:58px;
    line-height:72px;
  }
}

/*==================================================
LAPTOP
==================================================*/

@media (max-width:1200px){
  .hero-title{
    font-size:52px;
    line-height:64px;
  }
  .section-title h2{
    font-size:42px;
  }
  .desktop-menu>ul{
    gap:22px;
  }
  .header-area{
    height:80px;
  }
}

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

@media (max-width:992px){
  .top-bar{
    display:none;
  }
  .main-header{
    top:0;
    position:fixed;
    background:#fff;
    box-shadow:0 10px 40px rgba(0,0,0,.08);
  }
  .desktop-menu{
    display:none;
  }
  .mobile-toggle{
    display:flex;
  }
  .header-buttons{
    display:none;
  }
  .hero-section{
    padding:150px 0 80px;
    text-align:center;
  }
  .hero-title{
    font-size:46px;
    line-height:58px;
  }
  .hero-buttons{
    justify-content:center;
  }
  .hero-counter{
    justify-content:center;
    margin-top:40px;
  }
  .hero-image{
    margin-top:60px;
  }
  .about-content{
    padding-left:0;
    margin-top:40px;
  }
  .process-card::after{
    display:none;
  }
  .footer-bottom-content{
    flex-direction:column;
    text-align:center;
  }
}

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

@media (max-width:768px){
  section{
    padding:70px 0;
  }
  .hero-title{
    font-size:36px;
    line-height:46px;
  }
  .section-title h2{
    font-size:32px;
    line-height:42px;
  }
  .hero-buttons{
    flex-direction:column;
  }
  .btn-primary,
  .btn-outline{
    width:100%;
  }
  .counter-box{
    margin-bottom:20px;
  }
  .newsletter-form{
    flex-direction:column;
  }
  .newsletter-form input,
  .newsletter-form button{
    width:100%;
  }
  .contact-box{
    padding:30px;
  }
  .footer{
    text-align:center;
  }
  .footer-social{
    justify-content:center;
  }
  .footer-bottom-links{
    justify-content:center;
    flex-wrap:wrap;
  }
}

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

@media (max-width:576px){
  .hero-title{
    font-size:30px;
    line-height:40px;
  }
  .hero-tag{
    font-size:13px;
  }
  .section-title h2{
    font-size:28px;
  }
  .service-card,
  .portfolio-card,
  .pricing-card,
  .testimonial-card{
    padding:25px;
  }
  .contact-icon{
    width:55px;
    height:55px;
    font-size:22px;
  }
  .floating-whatsapp,
  .floating-call,
  .back-top{
    width:52px;
    height:52px;
    font-size:20px;
    right:15px;
  }
  .cookie-banner{
    width:calc(100% - 30px);
    left:15px;
    bottom:15px;
  }
}

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

.fade-up{
  animation:fadeUp .8s ease both;
}

.fade-left{
  animation:fadeLeft .8s ease both;
}

.fade-right{
  animation:fadeRight .8s ease both;
}

.zoom-in{
  animation:zoomIn .8s ease both;
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(40px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes fadeLeft{
  from{
    opacity:0;
    transform:translateX(-40px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes fadeRight{
  from{
    opacity:0;
    transform:translateX(40px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes zoomIn{
  from{
    opacity:0;
    transform:scale(.9);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

/*==================================================
DARK MODE
==================================================*/

body.dark{
  background:#0F172A;
  color:#CBD5E1;
}

body.dark .card-box,
body.dark .service-card,
body.dark .portfolio-card,
body.dark .testimonial-card,
body.dark .pricing-card{
  background:#1E293B;
  color:#fff;
}

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5{
  color:#fff;
}

body.dark .section-title p{
  color:#CBD5E1;
}

/*==================================================
UTILITY CLASSES
==================================================*/

.rounded-xl{
  border-radius:24px;
}

.shadow-lg{
  box-shadow:0 30px 70px rgba(0,0,0,.12);
}

.text-gradient{
  background:linear-gradient(90deg,#6C3BFF,#FF8A00);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.bg-gradient{
  background:linear-gradient(135deg,#6C3BFF,#4F46E5);
  color:#fff;
}

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

:focus-visible{
  outline:3px solid #6C3BFF;
  outline-offset:2px;
}

/*==================================================
PRINT
==================================================*/

@media print{
  header,
  footer,
  .floating-whatsapp,
  .floating-call,
  .back-top,
  .cookie-banner{
    display:none !important;
  }
  body{
    background:#fff;
    color:#000;
  }
  a{
    text-decoration:none;
    color:#000;
  }
}

/*==================================================
END OF FILE
==================================================*/