/* ==========================================================
   DAS INFFOTECH
   STYLE.CSS
   PART 5A
==========================================================*/

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

/* =========================
   RESET
========================= */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f8fafc;
    color:#333;
    overflow-x:hidden;
    line-height:1.7;
}

/* Scrollbar */

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

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

::-webkit-scrollbar-thumb{
    background:#0d6efd;
    border-radius:30px;
}

::-webkit-scrollbar-thumb:hover{
    background:#084298;
}

/* =========================
   COMMON
========================= */

section{
    padding:80px 0;
}

.container{
    max-width:1200px;
}

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

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

h1,h2,h3,h4,h5,h6{
    font-weight:700;
}

p{
    color:#666;
}

/* =========================
   NAVBAR
========================= */

.navbar{
    background:linear-gradient(90deg,#0d6efd,#0b5ed7);
    padding:15px 0;
    transition:.4s;
    box-shadow:0 8px 25px rgba(0,0,0,.12);
}

.navbar-brand{
    font-size:28px;
    font-weight:700;
    color:#fff!important;
}

.navbar-brand i{
    margin-right:8px;
    color:#ffc107;
}

.navbar-nav .nav-link{
    color:#fff!important;
    margin-left:18px;
    font-weight:500;
    position:relative;
    transition:.3s;
}

.navbar-nav .nav-link::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:0%;
    height:2px;
    background:#ffc107;
    transition:.3s;
}

.navbar-nav .nav-link:hover::after{
    width:100%;
}

.navbar-nav .nav-link:hover{
    color:#ffc107!important;
}

/* =========================
   HERO
========================= */

.hero{
    background:linear-gradient(135deg,#0d6efd,#4f46e5);
    min-height:90vh;
    display:flex;
    align-items:center;
    color:#fff;
}

.hero h1{
    font-size:60px;
    font-weight:800;
    line-height:1.2;
    margin-bottom:20px;
}

.hero h1 span{
    color:#ffd43b;
}

.hero p{
    color:#f8f9fa;
    font-size:19px;
    margin-bottom:35px;
}

.hero img{
    animation:float 4s ease-in-out infinite;
}

.hero-banner{
    width:100%;
    max-width:700px;
    height:auto;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.hero-banner-section{
    width:100%;
    background:#fff;
}

.hero-banner-section img{
    width:100%;
    height:auto;
    display:block;
}
/* =========================
   BUTTONS
========================= */

.btn{
    border-radius:50px;
    padding:12px 30px;
    font-weight:600;
    transition:.4s;
}

.btn-primary{
    background:#0d6efd;
    border:none;
}

.btn-primary:hover{
    background:#084298;
    transform:translateY(-4px);
    box-shadow:0 15px 30px rgba(13,110,253,.35);
}

.btn-warning{
    color:#fff;
    border:none;
    background:#ff9800;
}

.btn-warning:hover{
    background:#fb8c00;
    color:#fff;
    transform:translateY(-4px);
    box-shadow:0 15px 30px rgba(255,152,0,.35);
}

/* =========================
   CARDS
========================= */

.card{
    border:none;
    border-radius:20px;
    transition:.4s;
    overflow:hidden;
}

.card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.15)!important;
}

.card-body{
    padding:30px;
}

/* =========================
   TITLES
========================= */

h2{
    font-size:42px;
    margin-bottom:20px;
    color:#111;
}

.text-primary{
    color:#0d6efd!important;
}

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

.fa-solid,
.fas,
.fab{
    transition:.4s;
}

.card:hover i{
    transform:scale(1.15);
}

/* =========================
   ANIMATIONS
========================= */

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-20px);
}

100%{
transform:translateY(0px);
}

}

@keyframes fadeIn{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}

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

/* =========================
   UTILITIES
========================= */

.shadow-lg{
    box-shadow:0 25px 45px rgba(0,0,0,.15)!important;
}

.rounded-4{
    border-radius:20px!important;
}

.bg-primary{
    background:linear-gradient(135deg,#0d6efd,#4f46e5)!important;
}

.text-white p{
    color:#fff;
}

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

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

/* ============================================
   PART 5B-1
   ABOUT SECTION + SERVICE CARDS
===============================================*/

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

#about{
    background:#ffffff;
    position:relative;
    overflow:hidden;
}

#about::before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    background:rgba(13,110,253,.08);
    border-radius:50%;
    top:-120px;
    left:-120px;
}

#about::after{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    background:rgba(255,193,7,.10);
    border-radius:50%;
    right:-100px;
    bottom:-100px;
}

#about .container{
    position:relative;
    z-index:2;
}

#about img{
    width:100%;
    border-radius:25px;
    transition:.5s;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
}

#about img:hover{
    transform:scale(1.04) rotate(-1deg);
}

#about h6{
    letter-spacing:2px;
    text-transform:uppercase;
    color:#0d6efd;
    font-weight:700;
}

#about h2{
    font-size:42px;
    font-weight:700;
    margin:15px 0;
}

#about p{
    color:#666;
    line-height:1.9;
}

#about .btn{
    margin-top:15px;
}

/* ===============================
   ABOUT LIST
==================================*/

#about .row .col-6{

    font-size:16px;
    font-weight:500;
    color:#444;
    transition:.3s;

}

#about .row .col-6:hover{

    color:#0d6efd;
    transform:translateX(8px);

}

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

#services{

    background:#f8f9fa;

}

#services h2{

    font-size:42px;
    font-weight:700;

}

#services p{

    color:#777;

}

/* ===============================
   SERVICE CARD
==================================*/

#services .card{

    border:none;
    border-radius:20px;
    overflow:hidden;
    transition:.4s;
    background:#fff;
    box-shadow:0 15px 35px rgba(0,0,0,.08);

}

#services .card:hover{

    transform:translateY(-12px);
    box-shadow:0 30px 60px rgba(0,0,0,.18);

}

#services .card-body{

    padding:35px 25px;

}

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

#services i{

    width:90px;
    height:90px;
    line-height:90px;
    border-radius:50%;
    background:#eef4ff;
    transition:.4s;

}

#services .card:hover i{

    background:#0d6efd;
    color:#fff!important;
    transform:rotateY(180deg);

}

/* ===============================
   TITLE
==================================*/

#services h5{

    margin-top:20px;
    margin-bottom:12px;
    font-weight:700;
    font-size:22px;

}

#services h6{

    margin-top:18px;
    font-weight:600;

}

#services .card p{

    color:#666;
    font-size:15px;
    line-height:1.7;

}

/* ===============================
   CARD BORDER EFFECT
==================================*/

#services .card{

    position:relative;

}

#services .card::before{

    content:"";
    position:absolute;
    top:0;
    left:0;
    width:0%;
    height:4px;
    background:#0d6efd;
    transition:.4s;

}

#services .card:hover::before{

    width:100%;

}

/* ===============================
   GLASS CARD
==================================*/

.glass-card{

    background:rgba(255,255,255,.65);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.25);
    border-radius:20px;
    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

/* ===============================
   HOVER BUTTON
==================================*/

.service-btn{

    display:inline-block;
    padding:10px 22px;
    background:#0d6efd;
    color:#fff;
    border-radius:30px;
    transition:.3s;
    margin-top:15px;

}

.service-btn:hover{

    background:#084298;
    color:#fff;
    transform:translateY(-3px);

}

/* ===============================
   SERVICE IMAGE
==================================*/

.service-img{

    overflow:hidden;

}

.service-img img{

    transition:.5s;

}

.card:hover .service-img img{

    transform:scale(1.1);

}

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

.service-card{

    animation:fadeIn .8s ease;

}

/* ===============================
   SECTION SPACING
==================================*/

#services .row{

    row-gap:30px;

}

#services .col-md-3{

    display:flex;

}

#services .card{

    width:100%;

}

/* ===============================
   SERVICE NUMBER BADGE
==================================*/

.service-number{

    position:absolute;
    top:18px;
    right:18px;

    width:35px;
    height:35px;

    border-radius:50%;
    background:#0d6efd;

    color:#fff;

    text-align:center;
    line-height:35px;

    font-size:14px;
    font-weight:700;

}

/* ===============================
   SMALL SHADOW
==================================*/

.shadow-soft{

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

/* ===============================
   ICON COLORS
==================================*/

.icon-blue{
color:#0d6efd;
}

.icon-green{
color:#198754;
}

.icon-red{
color:#dc3545;
}

.icon-orange{
color:#fd7e14;
}

.icon-purple{
color:#6f42c1;
}

.icon-info{
color:#0dcaf0;
}

/* ==========================================================
   PART 5B-2A
   COUNTER SECTION + WHY CHOOSE US + FEATURE BOXES
==========================================================*/

/* ===========================
   COUNTER SECTION
===========================*/

.counter-section,
.bg-primary{
    position:relative;
    overflow:hidden;
}

.counter-section::before,
.bg-primary::before{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(255,255,255,.08);
    border-radius:50%;
    top:-180px;
    left:-120px;
}

.counter-section::after,
.bg-primary::after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    background:rgba(255,255,255,.06);
    border-radius:50%;
    bottom:-140px;
    right:-120px;
}

.counter-section .container,
.bg-primary .container{
    position:relative;
    z-index:2;
}

/* ===========================
   COUNTER BOX
===========================*/

.counter-box{
    text-align:center;
    padding:35px 20px;
    border-radius:18px;
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(10px);
    transition:.35s;
}

.counter-box:hover{
    transform:translateY(-10px);
    background:rgba(255,255,255,.18);
}

.counter-box i{
    font-size:45px;
    margin-bottom:18px;
    color:#fff;
}

.counter-box h2{
    font-size:42px;
    color:#fff;
    font-weight:700;
}

.counter-box h5{
    color:#fff;
    margin-top:8px;
    font-size:18px;
    font-weight:500;
}

/* ===========================
   SIMPLE COUNTERS
===========================*/

.bg-primary h2{
    color:#fff;
    font-size:42px;
    font-weight:700;
}

.bg-primary p{
    color:#fff;
    font-size:16px;
}

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

.why-section{
    background:#ffffff;
}

.why-section .section-title{
    text-align:center;
    margin-bottom:60px;
}

.why-section .section-title h2{
    font-size:42px;
    margin-bottom:12px;
}

.why-section .section-title p{
    color:#777;
}

/* ===========================
   FEATURE CARD
===========================*/

.feature-card{

    background:#fff;
    border-radius:20px;
    padding:35px 25px;
    text-align:center;

    transition:.35s;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    position:relative;
    overflow:hidden;

}

.feature-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:#0d6efd;

    transform:scaleX(0);

    transition:.35s;

}

.feature-card:hover::before{

    transform:scaleX(1);

}

.feature-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(0,0,0,.15);

}

/* ===========================
   FEATURE ICON
===========================*/

.feature-icon{

    width:90px;
    height:90px;

    margin:auto;

    border-radius:50%;

    background:#eef4ff;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:.35s;

}

.feature-icon i{

    font-size:38px;
    color:#0d6efd;

    transition:.35s;

}

.feature-card:hover .feature-icon{

    background:#0d6efd;

}

.feature-card:hover .feature-icon i{

    color:#fff;
    transform:rotate(360deg);

}

/* ===========================
   FEATURE TITLE
===========================*/

.feature-card h4{

    margin-top:25px;

    font-size:24px;

    font-weight:700;

}

.feature-card p{

    margin-top:12px;

    color:#666;

    line-height:1.8;

}

/* ===========================
   FEATURE BUTTON
===========================*/

.feature-btn{

    display:inline-block;

    margin-top:20px;

    padding:10px 24px;

    background:#0d6efd;

    color:#fff;

    border-radius:40px;

    transition:.35s;

}

.feature-btn:hover{

    color:#fff;

    background:#084298;

    transform:translateY(-3px);

}

/* ===========================
   ICON BACKGROUNDS
===========================*/

.bg-blue{
    background:#eef4ff;
}

.bg-green{
    background:#e9f8ef;
}

.bg-orange{
    background:#fff4e8;
}

.bg-red{
    background:#fdecec;
}

.bg-purple{
    background:#f3ebff;
}

.bg-cyan{
    background:#e8fbff;
}

/* ===========================
   FLOAT EFFECT
===========================*/

.float-card{

    transition:.35s;

}

.float-card:hover{

    transform:translateY(-15px);

}

/* ===========================
   BORDER CARD
===========================*/

.border-card{

    border:2px solid transparent;

    transition:.35s;

}

.border-card:hover{

    border-color:#0d6efd;

}

/* ===========================
   ICON SHADOW
===========================*/

.icon-shadow{

    box-shadow:0 15px 35px rgba(13,110,253,.20);

}

/* ===========================
   FEATURE GRID
===========================*/

.feature-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

/* ===========================
   HOVER GLOW
===========================*/

.glow:hover{

    box-shadow:0 0 35px rgba(13,110,253,.30);

}

/* ===========================
   WHITE TEXT
===========================*/

.text-light p,
.text-light h2,
.text-light h3,
.text-light h4{

    color:#fff;

}

/* ===========================
   BADGE
===========================*/

.feature-badge{

    display:inline-block;

    padding:6px 16px;

    border-radius:30px;

    background:#0d6efd;

    color:#fff;

    font-size:13px;

    font-weight:600;

    margin-bottom:15px;

}

/* ===========================
   SPACING
===========================*/

.py-100{
    padding:100px 0;
}

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

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

/*==========================================================
    PART 5B-2B
    PREMIUM EFFECTS
==========================================================*/

/*==========================
    GLASS EFFECT
===========================*/

.glass{
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.25);
    border-radius:20px;
}

/*==========================
    HOVER SHADOW
===========================*/

.hover-shadow{
    transition:.4s;
}

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

/*==========================
    BORDER ANIMATION
===========================*/

.border-hover{
    position:relative;
    overflow:hidden;
}

.border-hover::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    width:0;

    height:3px;

    background:#0d6efd;

    transition:.4s;

    transform:translateX(-50%);

}

.border-hover:hover::after{

    width:100%;

}

/*==========================
    ICON SCALE
===========================*/

.icon-grow{

    transition:.4s;

}

.icon-grow:hover{

    transform:scale(1.25);

}

/*==========================
    ROTATE
===========================*/

.rotate-hover{

    transition:.5s;

}

.rotate-hover:hover{

    transform:rotate(10deg);

}

/*==========================
    ZOOM IMAGE
===========================*/

.zoom-box{

    overflow:hidden;
    border-radius:18px;

}

.zoom-box img{

    transition:.6s;

}

.zoom-box:hover img{

    transform:scale(1.12);

}

/*==========================
    FLOAT ANIMATION
===========================*/

.float-animation{

    animation:floating 4s ease-in-out infinite;

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

/*==========================
    FADE UP
===========================*/

.fade-up{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

0%{

opacity:0;
transform:translateY(35px);

}

100%{

opacity:1;
transform:translateY(0);

}

}

/*==========================
    SCALE IN
===========================*/

.scale-in{

animation:scaleIn .6s ease;

}

@keyframes scaleIn{

0%{

opacity:0;
transform:scale(.85);

}

100%{

opacity:1;
transform:scale(1);

}

}

/*==========================
    PULSE BUTTON
===========================*/

.pulse{

animation:pulse 2s infinite;

}

@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(13,110,253,.5);

}

70%{

box-shadow:0 0 0 20px rgba(13,110,253,0);

}

100%{

box-shadow:0 0 0 0 rgba(13,110,253,0);

}

}

/*==========================
    GRADIENT BACKGROUND
===========================*/

.gradient-blue{

background:linear-gradient(135deg,#0d6efd,#4f46e5);

color:#fff;

}

.gradient-orange{

background:linear-gradient(135deg,#ff9800,#ff5722);

color:#fff;

}

.gradient-green{

background:linear-gradient(135deg,#198754,#20c997);

color:#fff;

}

/*==========================
    ROUNDED
===========================*/

.radius-10{
border-radius:10px;
}

.radius-20{
border-radius:20px;
}

.radius-30{
border-radius:30px;
}

/*==========================
    SHADOWS
===========================*/

.shadow-soft{

box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.shadow-medium{

box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.shadow-heavy{

box-shadow:0 35px 70px rgba(0,0,0,.20);

}

/*==========================
    TRANSITIONS
===========================*/

.transition{

transition:.35s;

}

.transition-fast{

transition:.2s;

}

.transition-slow{

transition:.6s;

}

/*==========================
    SPACING
===========================*/

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-40{margin-top:40px;}
.mt-60{margin-top:60px;}

.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-40{margin-bottom:40px;}
.mb-60{margin-bottom:60px;}

.pt-80{padding-top:80px;}
.pb-80{padding-bottom:80px;}
.py-80{
padding-top:80px;
padding-bottom:80px;
}

/*==========================
    RESPONSIVE
===========================*/

@media(max-width:991px){

.hero h1{

font-size:42px;

}

section{

padding:70px 0;

}

.feature-card{

margin-bottom:25px;

}

}

@media(max-width:768px){

.hero{

text-align:center;

}

.hero img{

margin-top:40px;

}

h2{

font-size:30px;

}

.counter-box{

margin-bottom:20px;

}

}

@media(max-width:576px){

.hero h1{

font-size:34px;

}

.btn{

padding:12px 24px;

}

.card-body{

padding:25px;

}

}

/*==========================
    END PART 5B-2B
===========================*/
/*==========================================================
    PART 5C-1
    PRICING SECTION + CALL TO ACTION
==========================================================*/

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

.pricing-section{
    background:#f8fafc;
    position:relative;
    overflow:hidden;
}

.pricing-section::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    background:rgba(13,110,253,.05);
    border-radius:50%;
    top:-120px;
    left:-120px;
}

.pricing-section::after{
    content:"";
    position:absolute;
    width:250px;
    height:250px;
    background:rgba(255,193,7,.08);
    border-radius:50%;
    bottom:-100px;
    right:-100px;
}

.pricing-section .container{
    position:relative;
    z-index:2;
}

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

.pricing-card{

    background:#fff;

    border-radius:25px;

    padding:45px 30px;

    text-align:center;

    transition:.4s;

    position:relative;

    overflow:hidden;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.pricing-card:hover{

    transform:translateY(-15px);

    box-shadow:0 35px 70px rgba(0,0,0,.18);

}

/*==========================
    TOP BORDER
===========================*/

.pricing-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:6px;

    background:linear-gradient(90deg,#0d6efd,#4f46e5);

}

/*==========================
    POPULAR CARD
===========================*/

.pricing-card.popular{

    border:3px solid #0d6efd;

    transform:scale(1.05);

}

.pricing-card.popular:hover{

    transform:scale(1.08);

}

/*==========================
    BADGE
===========================*/

.pricing-badge{

    position:absolute;

    top:18px;

    right:-38px;

    background:#ff9800;

    color:#fff;

    padding:8px 45px;

    transform:rotate(45deg);

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

}

/*==========================
    PRICE
===========================*/

.pricing-price{

    font-size:52px;

    font-weight:800;

    color:#0d6efd;

    margin:25px 0 8px;

}

.pricing-price span{

    font-size:18px;

    color:#777;

}

/*==========================
    TITLE
===========================*/

.pricing-title{

    font-size:28px;

    font-weight:700;

    margin-bottom:25px;

}

/*==========================
    FEATURES
===========================*/

.pricing-features{

    list-style:none;

    margin:30px 0;

    padding:0;

}

.pricing-features li{

    padding:12px 0;

    border-bottom:1px solid #ececec;

    color:#555;

    font-size:15px;

}

.pricing-features li:last-child{

    border:none;

}

.pricing-features i{

    color:#198754;

    margin-right:10px;

}

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

.pricing-btn{

    display:inline-block;

    padding:14px 35px;

    border-radius:40px;

    background:#0d6efd;

    color:#fff;

    font-weight:600;

    transition:.35s;

}

.pricing-btn:hover{

    color:#fff;

    background:#084298;

    transform:translateY(-4px);

}

/*==========================
    CTA SECTION
===========================*/

.cta-section{

    position:relative;

    overflow:hidden;

    background:linear-gradient(135deg,#0d6efd,#4f46e5);

    color:#fff;

}

.cta-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    top:-220px;

    right:-150px;

}

.cta-section::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    bottom:-120px;

    left:-120px;

}

.cta-section .container{

    position:relative;

    z-index:2;

}

/*==========================
    CTA TITLE
===========================*/

.cta-section h2{

    color:#fff;

    font-size:48px;

    font-weight:700;

}

.cta-section p{

    color:#fff;

    opacity:.95;

    font-size:18px;

    margin-top:15px;

}

/*==========================
    CTA BUTTON
===========================*/

.cta-btn{

    display:inline-block;

    margin-top:25px;

    padding:15px 40px;

    border-radius:50px;

    background:#ffc107;

    color:#222;

    font-weight:700;

    transition:.35s;

}

.cta-btn:hover{

    background:#ffb300;

    color:#222;

    transform:translateY(-5px);

    box-shadow:0 20px 45px rgba(255,193,7,.35);

}

/*==========================
    ICON CIRCLE
===========================*/

.icon-circle{

    width:90px;

    height:90px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eef4ff;

    margin:auto;

    margin-bottom:20px;

}

.icon-circle i{

    font-size:38px;

    color:#0d6efd;

}

/*==========================
    RESPONSIVE
===========================*/

@media(max-width:991px){

.pricing-card{

margin-bottom:30px;

}

.pricing-card.popular{

transform:none;

}

.cta-section{

text-align:center;

}

.cta-section h2{

font-size:38px;

}

}

@media(max-width:768px){

.pricing-price{

font-size:42px;

}

.pricing-title{

font-size:24px;

}

.cta-section h2{

font-size:30px;

}

}

@media(max-width:576px){

.pricing-card{

padding:35px 20px;

}

.cta-btn{

padding:14px 30px;

}

}

/*==========================================================
    PART 5C-2
    TESTIMONIALS + FAQ + EXTRA EFFECTS
==========================================================*/

/*==========================
    TESTIMONIAL SECTION
===========================*/

.testimonial-section{
    background:#f8fafc;
    position:relative;
    overflow:hidden;
}

.testimonial-section .container{
    position:relative;
    z-index:2;
}

.testimonial-card{
    background:#fff;
    padding:35px;
    border-radius:20px;
    text-align:center;
    transition:.4s;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    height:100%;
}

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

.testimonial-img{
    width:90px;
    height:90px;
    border-radius:50%;
    overflow:hidden;
    margin:auto;
    border:5px solid #0d6efd;
}

.testimonial-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.testimonial-card h4{
    margin-top:20px;
    font-size:22px;
    font-weight:700;
}

.testimonial-card span{
    color:#777;
    font-size:14px;
}

.testimonial-card p{
    margin-top:20px;
    color:#666;
    line-height:1.8;
}

.rating{
    margin-top:18px;
}

.rating i{
    color:#ffc107;
    margin:0 2px;
    font-size:18px;
}

/*==========================
    QUOTE ICON
===========================*/

.quote-icon{

    width:65px;
    height:65px;

    border-radius:50%;

    background:#eef4ff;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:auto;
    margin-bottom:18px;

}

.quote-icon i{

    color:#0d6efd;
    font-size:26px;

}

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

.faq-section{
    background:#fff;
}

.accordion-item{

    border:none;
    border-radius:15px!important;
    overflow:hidden;
    margin-bottom:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.accordion-button{

    background:#fff;
    font-size:18px;
    font-weight:600;
    padding:20px 25px;

}

.accordion-button:not(.collapsed){

    background:#0d6efd;
    color:#fff;

}

.accordion-button:focus{

    box-shadow:none;

}

.accordion-body{

    padding:25px;
    line-height:1.8;
    color:#666;

}

/*==========================
    FAQ HOVER
===========================*/

.accordion-item:hover{

    transform:translateY(-4px);
    transition:.3s;

}

/*==========================
    REVIEW BADGE
===========================*/

.review-badge{

    display:inline-block;

    background:#198754;

    color:#fff;

    padding:5px 14px;

    border-radius:30px;

    font-size:13px;

    margin-top:15px;

}

/*==========================
    USER AVATAR
===========================*/

.avatar{

    width:70px;
    height:70px;

    border-radius:50%;

    overflow:hidden;

}

.avatar img{

    width:100%;
    height:100%;
    object-fit:cover;

}

/*==========================
    SOCIAL ICON
===========================*/

.social-circle{

    width:42px;
    height:42px;

    border-radius:50%;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:#eef4ff;

    color:#0d6efd;

    transition:.35s;

}

.social-circle:hover{

    background:#0d6efd;
    color:#fff;

    transform:translateY(-4px);

}

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

.lift{

    transition:.35s;

}

.lift:hover{

    transform:translateY(-8px);

}

/*==========================
    IMAGE SHADOW
===========================*/

.img-shadow{

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

/*==========================
    BACKGROUND SHAPES
===========================*/

.shape-left{

    position:absolute;
    left:-120px;
    top:100px;

    width:240px;
    height:240px;

    border-radius:50%;

    background:rgba(13,110,253,.05);

}

.shape-right{

    position:absolute;
    right:-100px;
    bottom:100px;

    width:220px;
    height:220px;

    border-radius:50%;

    background:rgba(255,193,7,.08);

}

/*==========================
    SCROLL TOP BUTTON
===========================*/

#topBtn{

    position:fixed;

    bottom:25px;
    right:25px;

    width:52px;
    height:52px;

    border:none;
    border-radius:50%;

    background:#0d6efd;
    color:#fff;

    cursor:pointer;

    display:none;

    z-index:999;

    transition:.35s;

}

#topBtn:hover{

    background:#084298;

    transform:translateY(-5px);

}

/*==========================
    WHATSAPP BUTTON
===========================*/

.whatsapp-btn{

    position:fixed;

    left:25px;
    bottom:25px;

    width:60px;
    height:60px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:28px;

    z-index:999;

    box-shadow:0 15px 35px rgba(37,211,102,.35);

    transition:.35s;

}

.whatsapp-btn:hover{

    color:#fff;

    transform:scale(1.1);

}

/*==========================
    RESPONSIVE
===========================*/

@media(max-width:768px){

.testimonial-card{

margin-bottom:25px;

}

.accordion-button{

font-size:16px;

}

.whatsapp-btn{

width:55px;
height:55px;
font-size:24px;

}

#topBtn{

width:48px;
height:48px;

}

}

@media(max-width:576px){

.testimonial-card{

padding:25px;

}

.testimonial-img{

width:75px;
height:75px;

}

}

/*==========================================================
    PART 5D-1
    CONTACT SECTION + CONTACT FORM + GOOGLE MAP
==========================================================*/

/*==========================
    CONTACT SECTION
===========================*/

#contact{
    background:#f8fafc;
    position:relative;
    overflow:hidden;
}

#contact::before{
    content:"";
    position:absolute;
    top:-120px;
    left:-120px;
    width:280px;
    height:280px;
    border-radius:50%;
    background:rgba(13,110,253,.06);
}

#contact::after{
    content:"";
    position:absolute;
    right:-120px;
    bottom:-120px;
    width:260px;
    height:260px;
    border-radius:50%;
    background:rgba(255,193,7,.08);
}

#contact .container{
    position:relative;
    z-index:2;
}

/*==========================
    CONTACT CARD
===========================*/

.contact-card{
    background:#fff;
    border-radius:22px;
    padding:40px;
    box-shadow:0 20px 45px rgba(0,0,0,.08);
    transition:.35s;
}

.contact-card:hover{
    transform:translateY(-8px);
    box-shadow:0 30px 60px rgba(0,0,0,.15);
}

/*==========================
    CONTACT INFO
===========================*/

.contact-item{
    display:flex;
    align-items:flex-start;
    margin-bottom:25px;
}

.contact-icon{
    width:60px;
    height:60px;
    border-radius:50%;
    background:#eef4ff;
    color:#0d6efd;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    margin-right:18px;
    transition:.35s;
}

.contact-item:hover .contact-icon{
    background:#0d6efd;
    color:#fff;
    transform:rotate(360deg);
}

.contact-content h5{
    font-size:20px;
    margin-bottom:6px;
    font-weight:700;
}

.contact-content p{
    margin:0;
    color:#666;
    line-height:1.8;
}

/*==========================
    CONTACT FORM
===========================*/

.contact-form{
    background:#fff;
    padding:40px;
    border-radius:22px;
    box-shadow:0 20px 45px rgba(0,0,0,.08);
}

.contact-form .form-control{
    height:56px;
    border-radius:12px;
    border:1px solid #dfe6ee;
    padding:0 18px;
    box-shadow:none;
    transition:.35s;
}

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

.contact-form .form-control:focus{
    border-color:#0d6efd;
    box-shadow:0 0 0 4px rgba(13,110,253,.12);
}

.contact-form button{
    width:100%;
    height:56px;
    border:none;
    border-radius:12px;
    background:#0d6efd;
    color:#fff;
    font-weight:600;
    transition:.35s;
}

.contact-form button:hover{
    background:#084298;
    transform:translateY(-3px);
    box-shadow:0 18px 35px rgba(13,110,253,.30);
}

/*==========================
    INPUT PLACEHOLDER
===========================*/

.contact-form ::placeholder{
    color:#999;
    font-size:15px;
}

/*==========================
    SOCIAL BUTTONS
===========================*/

.contact-social{
    margin-top:25px;
}

.contact-social a{
    width:45px;
    height:45px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#eef4ff;
    color:#0d6efd;
    margin-right:10px;
    transition:.35s;
}

.contact-social a:hover{
    background:#0d6efd;
    color:#fff;
    transform:translateY(-4px);
}

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

.map-section{
    overflow:hidden;
    border-radius:22px;
    box-shadow:0 20px 45px rgba(0,0,0,.08);
    margin-top:60px;
}

.map-section iframe{
    width:100%;
    height:450px;
    border:0;
    display:block;
    filter:grayscale(15%);
    transition:.35s;
}

.map-section:hover iframe{
    filter:grayscale(0%);
}

/*==========================
    CONTACT BADGE
===========================*/

.contact-badge{
    display:inline-block;
    padding:8px 18px;
    border-radius:30px;
    background:#0d6efd;
    color:#fff;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
}

/*==========================
    RESPONSIVE
===========================*/

@media(max-width:991px){

.contact-card,
.contact-form{
    margin-bottom:30px;
}

}

@media(max-width:768px){

.contact-card,
.contact-form{
    padding:30px;
}

.contact-item{
    flex-direction:column;
}

.contact-icon{
    margin-bottom:15px;
}

.map-section iframe{
    height:350px;
}

}

@media(max-width:576px){

.contact-card,
.contact-form{
    padding:22px;
}

.contact-form .form-control{
    height:52px;
}

.contact-form button{
    height:52px;
}

.map-section iframe{
    height:280px;
}

}

/*==========================================================
    PART 5D-2
    PREMIUM FOOTER + NEWSLETTER + COPYRIGHT
==========================================================*/

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

footer{
    background:#0f172a;
    color:#fff;
    position:relative;
    overflow:hidden;
    padding-top:80px;
}

footer::before{
    content:"";
    position:absolute;
    top:-120px;
    right:-120px;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(13,110,253,.12);
}

footer::after{
    content:"";
    position:absolute;
    bottom:-150px;
    left:-120px;
    width:280px;
    height:280px;
    border-radius:50%;
    background:rgba(255,193,7,.08);
}

footer .container{
    position:relative;
    z-index:2;
}

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

footer h4,
footer h5{
    color:#fff;
    font-weight:700;
    margin-bottom:22px;
}

footer p{
    color:#cbd5e1;
    line-height:1.9;
}

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

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

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

.footer-links li a{
    color:#cbd5e1;
    text-decoration:none;
    transition:.35s;
    position:relative;
    padding-left:18px;
}

.footer-links li a::before{
    content:"➜";
    position:absolute;
    left:0;
    color:#0d6efd;
    transition:.35s;
}

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

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

.newsletter{
    margin-top:20px;
}

.newsletter .form-control{
    height:55px;
    border:none;
    border-radius:12px;
    padding:0 18px;
    margin-bottom:15px;
    box-shadow:none;
}

.newsletter .form-control:focus{
    box-shadow:0 0 0 4px rgba(13,110,253,.15);
}

.newsletter .btn{
    width:100%;
    height:55px;
    border:none;
    border-radius:12px;
    background:#0d6efd;
    color:#fff;
    font-weight:600;
    transition:.35s;
}

.newsletter .btn:hover{
    background:#084298;
    transform:translateY(-3px);
}

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

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

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

.footer-social a:hover{
    background:#0d6efd;
    color:#fff;
    transform:translateY(-5px);
}

/*==========================
    CONTACT INFO
===========================*/

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

.footer-contact li{
    margin-bottom:15px;
    color:#cbd5e1;
    display:flex;
    align-items:flex-start;
}

.footer-contact li i{
    color:#0d6efd;
    margin-right:12px;
    margin-top:4px;
}

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

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

/*==========================
    COPYRIGHT
===========================*/

.copyright{
    text-align:center;
    color:#94a3b8;
    padding-bottom:30px;
    font-size:15px;
}

.copyright a{
    color:#0d6efd;
    text-decoration:none;
}

.copyright a:hover{
    color:#fff;
}

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

.payment-icons{
    margin-top:25px;
}

.payment-icons img{
    height:34px;
    margin-right:10px;
    opacity:.9;
    transition:.35s;
}

.payment-icons img:hover{
    opacity:1;
    transform:translateY(-3px);
}

/*==========================
    BACK TO TOP ANIMATION
===========================*/

#topBtn{
    animation:upDown 2s infinite;
}

@keyframes upDown{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-6px);
}

100%{
transform:translateY(0);
}

}

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

@media(max-width:991px){

footer{
text-align:center;
}

.footer-contact li{
justify-content:center;
}

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

}

@media(max-width:768px){

footer{
padding-top:60px;
}

footer h4,
footer h5{
margin-top:20px;
}

.newsletter .form-control,
.newsletter .btn{
height:50px;
}

}

@media(max-width:576px){

.footer-social a{
width:42px;
height:42px;
margin:5px;
}

.payment-icons img{
height:28px;
margin:6px;
}

.copyright{
font-size:14px;
}

}

/*==========================================================
    END OF PART 5D-2
==========================================================*/

/*==========================================================
    PART 5E
    FINAL UTILITIES + RESPONSIVE + ANIMATIONS
==========================================================*/

/*==========================
    ROOT VARIABLES
===========================*/

:root{
    --primary:#0d6efd;
    --secondary:#6610f2;
    --success:#198754;
    --warning:#ffc107;
    --danger:#dc3545;
    --dark:#0f172a;
    --light:#f8fafc;
    --white:#ffffff;
    --shadow:0 20px 45px rgba(0,0,0,.08);
    --radius:18px;
}

/*==========================
    TEXT SELECTION
===========================*/

::selection{
    background:var(--primary);
    color:#fff;
}

::-moz-selection{
    background:var(--primary);
    color:#fff;
}

/*==========================
    SMOOTH SCROLL
===========================*/

html{
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden;
}

/*==========================
    CUSTOM SCROLLBAR
===========================*/

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

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

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

::-webkit-scrollbar-thumb:hover{
    background:#084298;
}

/*==========================
    LOADER
===========================*/

.loader{
    position:fixed;
    inset:0;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:99999;
}

.loader::after{
    content:"";
    width:60px;
    height:60px;
    border:6px solid #dee2e6;
    border-top:6px solid var(--primary);
    border-radius:50%;
    animation:loaderSpin 1s linear infinite;
}

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

/*==========================
    FADE ANIMATIONS
===========================*/

.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 .7s 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(.85);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

/*==========================
    SPACING UTILITIES
===========================*/

.py-80{padding:80px 0;}
.py-100{padding:100px 0;}
.pt-100{padding-top:100px;}
.pb-100{padding-bottom:100px;}

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-50{margin-top:50px;}

.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-50{margin-bottom:50px;}

/*==========================
    BORDER RADIUS
===========================*/

.radius-10{border-radius:10px;}
.radius-15{border-radius:15px;}
.radius-20{border-radius:20px;}
.radius-25{border-radius:25px;}
.radius-30{border-radius:30px;}

/*==========================
    SHADOWS
===========================*/

.shadow-soft{
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.shadow-medium{
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.shadow-heavy{
    box-shadow:0 35px 70px rgba(0,0,0,.18);
}

/*==========================
    HOVER EFFECTS
===========================*/

.hover-up{
    transition:.35s;
}

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

.hover-scale{
    transition:.35s;
}

.hover-scale:hover{
    transform:scale(1.04);
}

.hover-rotate{
    transition:.35s;
}

.hover-rotate:hover{
    transform:rotate(5deg);
}

/*==========================
    GLASS EFFECT
===========================*/

.glass{
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.25);
}

/*==========================
    IMAGE UTILITIES
===========================*/

.img-cover{
    width:100%;
    height:100%;
    object-fit:cover;
}

.img-rounded{
    border-radius:20px;
}

.img-circle{
    border-radius:50%;
}

/*==========================
    BUTTON EFFECT
===========================*/

.btn-glow:hover{
    box-shadow:0 0 25px rgba(13,110,253,.45);
}

/*==========================
    RESPONSIVE
===========================*/

@media(max-width:1200px){

.container{
    max-width:1140px;
}

}

@media(max-width:992px){

section{
    padding:80px 0;
}

.hero h1{
    font-size:42px;
}

.hero p{
    font-size:18px;
}

}

@media(max-width:768px){

section{
    padding:70px 0;
}

.hero{
    text-align:center;
}

.hero h1{
    font-size:34px;
}

.hero p{
    font-size:16px;
}

.btn,
.btn-primary,
.btn-warning{
    width:100%;
    margin-bottom:12px;
}

img{
    max-width:100%;
}

}

@media(max-width:576px){

.hero h1{
    font-size:28px;
}

.hero p{
    font-size:15px;
}

.section-title h2{
    font-size:28px;
}

.container{
    padding-left:18px;
    padding-right:18px;
}

}

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

@media print{

.navbar,
footer,
.whatsapp-btn,
#topBtn{
    display:none!important;
}

body{
    background:#fff;
    color:#000;
}

}

/*==========================================================
    END OF STYLE.CSS
==========================================================*/