/* ------------------------------------------------
  Project:   Softino - Software Landing Page HTML5 Template
  Author:    ThemeHt
------------------------------------------------ */
/* ------------------------
    Table of Contents

  1. General
  2. Typography
  3. Helper class
  4. Text color
  5. Background color
  6. Border Radius
  7. Banner
  8. Background Position & Size
  9. Countdown
  10. Terms and Conditions
  11. Privacy Policy
  12. Clients Logo
  13. Contact
  14. Video
  15. Image Box
  16. Side Background
  17. Error Page
  18. List Icon
  19. Bg Animated Image
  20. How It Work
  21. Spinner
  22. Hexagon
  23. Timeline
  24. Other


/* ------------------------
    General
------------------------*/
@import url('https://fonts.googleapis.com/css?family=Heebo:300,400,500,700,800,900');
@import url('https://fonts.googleapis.com/css?family=Charm:400,700');

body {font-family: 'Heebo', sans-serif; font-weight: normal; font-style: normal; font-size: 15px; line-height: 1.5; color:#5f5f5f; letter-spacing: 1px; overflow-x: hidden;}


/* ------------------------
    Typography
------------------------*/
h1, h2, h3, h4, h5, h6{font-weight:normal; margin-top: 0px; margin-bottom: 0px; text-transform: capitalize; letter-spacing: 2px; font-family: 'Nunito', sans-serif;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }
h1 { font-size: 60px; font-style: normal; line-height: 70px; font-weight: bold; text-transform: capitalize; color: #1c1d3e; letter-spacing: 0;}
h2 { font-size: 40px; font-style: normal; line-height: 46px; font-weight: 600; color: #1c1d3e; text-transform: capitalize; margin-bottom: 10px; position: relative;}
h3 { font-size: 30px; font-style: normal; line-height: 36px; font-weight: 500;}
h4 { font-size: 24px; font-style: normal; margin-bottom: 10px; font-weight: 500; line-height: 30px; color: #1c1d3e;}
h5 { font-size: 20px; font-style: normal; margin-bottom: 10px; font-weight: 500; line-height: 26px; color: #1c1d3e;}
h6 { font-size: 18px; font-style: normal; line-height: 24px; margin-bottom: 10px; color: #1c1d3e;}
ul { margin: 0px; padding: 0px; }
u {text-decoration-style: wavy;}

body.home-2 h1, body.home-2 h2, body.home-2 h3, body.home-2 h4, body.home-2 h5, body.home-2 h6{font-family: 'Ubuntu', sans-serif;}
body.home-3 h1, body.home-3 h2, body.home-3 h3, body.home-3 h4, body.home-3 h5, body.home-3 h6{font-family: 'Titillium Web', sans-serif;}
body.home-4 h1, body.home-4 h2, body.home-4 h3, body.home-4 h4, body.home-4 h5, body.home-4 h6{font-family: 'Work Sans', sans-serif;}
body.home-5 h1, body.home-5 h2, body.home-5 h3, body.home-5 h4, body.home-5 h5, body.home-5 h6{font-family: 'Cabin', sans-serif;}
body.home-6 h1, body.home-6 h2, body.home-6 h3, body.home-6 h4, body.home-6 h5, body.home-6 h6{font-family: 'Dosis', sans-serif;}


/* ------------------------
    Helper class
------------------------*/
p{line-height: 1.7;}
.lead{font-weight: normal; font-size: 16px; line-height: 30px;}
.o-x-hidden{overflow-x: hidden;}
.z-index-0{z-index: 0; position: relative;}
.z-index-1{z-index: 1; position: relative;}
h1 span{color: #351B44;}
section{padding: 80px 0;}
.section-title{margin-bottom:50px; position: relative;}
.section-title p{font-size: 16px;}
.align-item-middle{display: -webkit-flex; /* Safari */  -webkit-align-items: center; /* Safari 7.0+ */  display: flex; align-items: center;}
.align-item-middle > div{width: 100%;}
.la{line-height: inherit;}
.rounded {border-radius: 7px !important;}

.font-w-3{font-weight: 300;}
.font-w-4{font-weight: 400;}
.font-w-5{font-weight: 500;}
.font-w-6{font-weight: 600;}
.font-w-7{font-weight: 700;}
.font-w-8{font-weight: 800;}
.font-w-9{font-weight: 900;}

.line-h-2{line-height: 1.6;}
.line-h-3{line-height: 1.7;}
.line-h-4{line-height: 1.8;}
.line-h-5{line-height: 1.9;}

.letter-space-1{letter-spacing: 5px;}
.letter-space-2{letter-spacing: 10px;}
.letter-space-3{letter-spacing: 15px;}


/* ------------------------
    Text color
------------------------*/
.text-theme{color: #351B44;}
.text-black{color:#1c1d3e !important;}
.text-grey{color:#999999;}
.text-rgba{color: rgba(255,255,255,0.8);}


/* ------------------------
    Background color
------------------------*/
.white-bg{background-color: #ffffff !important;}
.dark-bg{background-color: #02060b;}
.grey-bg{background-color: #f3f5ff;}
.theme-bg{background-color: #351B44;}
.transparent-bg{background-color: inherit !important;}
.grediant-bg{background-color: rgb(0,91,234); background-color: linear-gradient(90deg, rgba(0,91,234,1) 0%, rgba(37,117,252,1) 80%);}


/* ------------------------
    Banner
------------------------*/
.fullscreen-banner{position: relative; min-height: 800px;}
[data-bg-img]{background-size: cover; background-position: center center; background-repeat: no-repeat;}
.align-center{position: absolute; top: 50%; width: 100%; z-index: 9;}
.align-end{position: absolute; bottom: 0; width: 100%; z-index: 9;}
.fullscreen-banner .owl-carousel, .fullscreen-banner .owl-stage-outer, .fullscreen-banner .owl-stage, .fullscreen-banner .owl-item{height: 100%;}
.hero-bg {left: 0; position: absolute; top: 0;}
.fullscreen-banner .img-side{top: 50%; transform: translateY(-50%); left: -5%; height: auto;}

.banner h5{background: #ffb58c; text-transform: uppercase; padding: 7px 15px; display: inline-block; border-top-left-radius: 7px; border-bottom-right-radius: 7px;}
.home-6 .banner .bnr-box{background: #5c2ec2;}

/* -------------------------------
   Background Position & Size
-------------------------------*/
.bg-cover{background-size: cover;}
.bg-contain{background-size: contain;}
.bg-pos-l{background-position: left;}
.bg-pos-r{background-position: right;}
.bg-pos-rt{background-position: right top;}
.bg-pos-lt{background-position: left top;}
.bg-pos-rb{background-position: right bottom;}
.bg-pos-lb{background-position: left bottom;}


/* ------------------------
    Countdown
------------------------*/
.countdown{margin:50px 0; padding:50px 0; display: table; width: 100%; border-top: 2px dashed rgba(255,255,255,0.5); border-bottom: 2px dashed rgba(255,255,255,0.5);}
.countdown > li{font-weight: 700; text-align: center; list-style-type: none; display: table-cell; width: auto;}
.countdown > li span{font-size:70px; font-weight:700; line-height:60px; display: inline-block;}
.countdown > li p{font-size:20px; display: inline-block; line-height:30px; margin-bottom: 0; color: #1c1d3e;}
.coming-soon .subscribe-form{margin: 0 auto;}


/* ------------------------
    Terms and Conditions
------------------------*/
.terms-and-conditions p{margin-bottom:25px;}
.terms-and-conditions ul.list{margin-bottom:20px; display:block;}
.terms-and-conditions ul.list li i{padding-right:12px; font-size:15px;}


/* ------------------------
    Privacy Policy
------------------------*/
.privacy-policy p{margin-bottom:25px;}
.privacy-policy ul.list{margin-bottom:20px; display:block;}
.privacy-policy ul.list li i{padding-right:12px; font-size:15px;}


/* ------------------------
    Clients Logo
------------------------*/
.clients-logo {background: #fff; padding: 50px 10px; width: 100%; text-align: center; border-radius: 7px;}


/* ------------------------
    Contact
------------------------*/
.contact-media{background: #ffffff; text-align: center; padding: 50px 30px; border-radius: 7px; border-bottom: 3px solid #351B44;}
[class*='col-']:nth-child(2) .contact-media{border-bottom: 3px solid #005bea;}
.contact-media i{line-height: 70px; font-size: 70px; color: #351B44; margin-bottom: 30px; display: inline-block;}
.contact-media span{font-size: 16px; color: #1c1d3e; font-weight: bold; text-transform: uppercase; display: block; margin-bottom: 15px;}
.contact-media p{margin-bottom: 0; line-height: 24px;}
.contact-media a{color: #1c1d3e;}
.contact-media a:hover{color: #351B44;}

.form-group{margin-bottom: 20px; position: relative;}
 label{font-size: 14px; color: #1c1d3e}
.form-control{height: 50px; border-radius: 5px; font-size: 13px; color: #1c1d3e; background: #fafaff; border: 1px solid transparent;}
.theme-bg .form-control .dark-bg .form-control{background: none; border:5px solid rgba(255,255,255,0.1);}
.dark-bg .form-control, .theme-bg .form-control{color: #ffffff;}
.grey-bg .form-control{background: #ffffff}
textarea.form-control{height: 150px; border-radius: 5px;}
.form-control:focus{box-shadow: none; background: none; border-color: #351B44;}
.theme-bg .form-control:focus{border-color: #351B44;}
select.form-control {-moz-appearance: none; -webkit-appearance: none; appearance: none; height: 50px !important;}
iframe{width: 100%; border: none; pointer-events: auto;}
.iframe-h{height: 500px !important;}
.iframe-h-2{height: 600px !important;}
.map iframe {border: 0px; width: 100%; height: 100%; z-index: 1; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);}

.help-block.with-errors {position: absolute; color: red; right: 15px; font-size: 10px; line-height: 14px;}

.form-control::-webkit-input-placeholder {color: #555;}
.form-control::-moz-placeholder {color: #555;}
.form-control:-ms-input-placeholder {color: #555;}
.form-control:-moz-placeholder {color: #555;}
.dark-bg .form-control::-webkit-input-placeholder,
.theme-bg .form-control::-webkit-input-placeholder {color: #ffffff;}

.dark-bg .form-control::-moz-placeholder, .theme-bg .form-control::-moz-placeholder{color: #ffffff;}
.dark-bg .form-control:-ms-input-placeholder, .theme-bg .form-control:-ms-input-placeholder{color: #ffffff;}
.dark-bg .form-control:-moz-placeholder, .theme-bg .form-control:-moz-placeholder{color: #ffffff;}


/* ------------------------
    Video
------------------------*/
.video-btn {position: relative; display: inline-block;}
.video-btn .play-btn {font-size: 30px; background: #351B44; color: #fff; line-height: 50px; width: 70px; height: 70px; border: 10px solid rgba(0,0,0,0.1); -webkit-border-radius: 100%;
 border-radius: 100%; text-align: center; cursor: pointer; z-index: 9; position: relative; display: inline-block; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out; -webkit-transition-property: color, background, border-color; transition-property: color, background, border-color; }
.video-btn-pos{position: absolute; position: absolute; left: 50%; top: 50%; width: auto !important; z-index: 99;}
.theme-bg .video-btn .play-btn, .dark-bg .video-btn .play-btn{background: #ffffff; border-color: #ddd; color: #351B44;}
.html5-video {height: 100%; left: 0; opacity: 1; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: -2;}
.html5-video video {width: 100%;}
.video-btn .spinner-eff {left: 50%; top: 50%;}


/* ------------------------
    Image Box
------------------------*/
.img-box{background: #ffffff; padding-top: 50px; overflow: hidden; position: relative; border-radius: 7px;}
.img-box img{width: 100%;}
.box-loader {border-radius: 100%; margin: 0 auto; position: absolute; top: 15px; left: 15px;}
.box-loader span{display: inline-block; width: 10px; height: 10px; border-radius: 100%; background: #351B44; margin: 0 5px; opacity: 0;}
.box-loader span:nth-child(1){animation: opacitychange 1s ease-in-out infinite;}
.box-loader span:nth-child(2){animation: opacitychange 1s ease-in-out 0.33s infinite;}
.box-loader span:nth-child(3){animation: opacitychange 1s ease-in-out 0.66s infinite;}


/* ------------------------
    Side Background
------------------------*/
.img-side img{max-width: 100%}
.img-side.img-right {right: 0;}
.img-side.img-left {left: 0;}
.img-side {padding: 0; position: absolute!important; top: 0px; height: 100%; overflow: hidden; z-index: 9;}
.image-column {position: absolute; left: 0px; top: 50%;}
.image-column.right {left: inherit; right: 0;}


/* ------------------------
    Error Page
------------------------*/
.error-page {font-size: 350px; font-weight: bold; line-height: 250px; font-family: 'Charm', cursive;}
.error-page > span {display: inline-block; position: relative; color: #351B44;}
.error-page > span {display: inline-block; position: relative; vertical-align: middle;}
.error-page > span:nth-of-type(1) {color: #351B44; animation: colordancing 4s infinite;}
.error-page > span:nth-of-type(3) {color: #00c9ff; animation: colordancing2 4s infinite;}
.error-page > span:nth-of-type(2) {width: 250px; height: 120px; border-radius: 999px;}
.error-page > span:nth-of-type(2):before,
.error-page > span:nth-of-type(2):after {border-radius: 0%; content:""; position: absolute; top: 0; left: 0; width: inherit; height: inherit; border-radius: 999px; box-shadow: inset 30px 0 0 rgba(0,201,255, 0.4),
inset 0 30px 0 rgba(5,248,161, 0.4), inset -30px 0 0 rgba(255,8,68, 0.4), inset 0 -30px 0 rgba(255,81,47, 0.4); animation: shadowsdancing 4s infinite;}
.error-page > span:nth-of-type(2):before {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);}
.screen-reader-text {position: absolute; top: -9999em; left: -9999em;}


/* ------------------------
    List Icon
------------------------*/
.list-icon li{position: relative; padding-left: 30px;}
.list-icon li i{position: absolute; left: 0; top: 0; color: #351B44; font-size: 22px; line-height: 20px;}
.list-icon-2 li{padding-left: 20px; position: relative;}
.list-icon-2 li:before{content: ""; background: #351B44; position: absolute; top: 8px; left: 0; width: 10px; height: 2px; border-radius: 4px;}
.custom-li{display: inline-block;}
.custom-li li {float: left; margin-bottom: 15px; width: calc(100% / 2);}


/* ------------------------
    Bg Animated Image
------------------------*/
.info-img:before {position: absolute; left: 0; top: 0; height: 330px; width: 100%; content: ""; background-image: url(../images/pattern/07.png); z-index: -1;}
.bg-effect::after {background: #fafaff; top: 0; content: ""; left: 25%; position: absolute; right: 0; z-index: -1; height: 100%; border-top-left-radius: 50%;}
.bg-effect.right::after{left: 0; right: 25%; border-top-left-radius: 0; border-top-right-radius: 50%;}
.bg-effect-2::before {background: #fff; top: -50px; content: ""; height: 120px; left: 0; overflow: visible; position: absolute; transform: skewY(4deg); width: 100%;}
.bg-effect-3::after {background: #fff; bottom: -50px; content: ""; height: 120px; left: 0; overflow: visible; position: absolute; transform: skewY(-4deg); width: 100%;}
.bg-effect-4::after {background: #351B44; border-bottom-left-radius: 30px; border-top-left-radius: 30px; content: ""; height: 80%; right: -20%; position: absolute; top: 10%; transform: rotate(-5deg); width: 70%; z-index: -1;}
.bg-animation {position: absolute; top: -100px; left: 0;}
.wave-shape {position: absolute; width: 100%; height: auto; left: 0; top: 0;}
.wave-bg > use {animation: move-forever 20s linear infinite;}
.wave-bg > use:nth-child(1) {animation-delay: -2s;}
.wave-bg > use:nth-child(2) {animation-delay: -2s; animation-duration: 10s;}
.wave-bg > use:nth-child(3) {animation-delay: -4s; animation-duration: 8s;}
.wave-animation {display: block; width: 100%; height: 8em; max-height: 100vh; margin: 0; position: absolute; bottom: -40px;}


/* ------------------------
    How It Work
------------------------*/
.work-process{position: relative;}
.step-num {background: #fff; border-radius: 50%; box-shadow: 0 12px 20px 0 rgba(117, 178, 240, 0.4); color: #005bea; display: inline-block; font-size: 18px; font-weight: 600; height: 50px; right: 0; line-height: 55px; position: absolute; text-align: center; top: 0; width: 50px;}
.theme-bg .work-process h4, .theme-bg .work-process p{color: #ffffff;}
.step-icon {background: #ffffff; width:140px; height:140px; position: relative; border: 3px solid #fafaff; border-radius: 50%; line-height: 140px; font-size: 40px; text-align: center; color: #1c1d3e;}
.step-icon span {position: relative;}
.step-icon span::after, .step-icon span::before {border-radius: 50%; content: ""; height: 40px; position: absolute; width: 40px; z-index: -1;}
.step-icon span::after {background: #cdf3f6; height: 25px; left: -10px; top: 5px; width: 25px;}
.step-icon span::before {background: #d4f8e6; bottom: 0; right: -10px;}
.dark-bg .step-icon{color: rgba(255,255,255,0.9); background: none;}
.dark-bg .step-desc h4{color: #351B44;}
.dark-bg .step-icon{border-color: rgba(255,255,255,0.1);}
.dark-bg .step-desc p{color: rgba(255,255,255,0.7);}
.step-num-box{position: relative; display: inline-block; margin-bottom: 20px;}
.work-process .box-loader{position: absolute; top: 30%; right: -15%; left: inherit;}
.work-process.style-2 {padding: 0; display: flex; align-items: center;}
.work-process.style-2:before{display: none;}
.work-process.style-2 .step-num-box {margin-bottom: 0; margin-right: 30px;}
.work-process.style-3 {padding: 70px 30px 0;}
.work-process.style-3 .step-num {background: none; box-shadow: none; color: rgba(255, 255, 255, 0.1); font-size: 120px; height: auto; left: 50%; line-height: 120px; margin-bottom: 0; position: absolute; top: 0; transform: translateX(-50%); width: auto;}
#svg-container {position: absolute; width: 100%; left: 52%;  z-index: -1; transform: translateX(-50%); width: 75%;}
#svgC {margin: 0 auto; width: 100%;}


/* ------------------------
    Spinner
------------------------*/
.spinner-eff {position: absolute; width: 200px; height: 200px; bottom: 0;}
.spinner-eff .spinner-circle {border-radius: 100px; position: absolute; left: 0; right: 0; margin: auto; transform: scale(1); transform-origin: center center;}
.spinner-eff .circle-1 {width: 100%; height: 100%; background-color: #60f691;  top: 0; animation: pulse 1.6s linear 0s infinite;}
.spinner-eff .circle-2 {width: 66.6%; height: 66.6%; background-color: #0cca4a; top: 16.5%; animation: pulse-2 1.6s linear 0s infinite;}


/* ------------------------
    Hexagon
------------------------*/
.hexagon-bg{position: absolute; left: 50%; top: 0; width: 100%; display: flex;}
.hexagon-bg.style-2{top: 50%;}
.hexagon {position: relative; margin: 0 auto; width: 10em; height: 17.32em; border-radius: 1em/.5em; background: #fafaff; transition: opacity .5s;}
.hexagon:before, .hexagon:after {position: absolute; width: inherit; height: inherit; border-radius: inherit; background: inherit; content: '';}
.hexagon:before {-webkit-transform: rotate(60deg); transform: rotate(60deg);}
.hexagon:after {-webkit-transform: rotate(-60deg); transform: rotate(-60deg);}
.hexagon:nth-child(2n+2){margin-top: 20px;}
.hexagon-bg.style-2 .hexagon{background: #ff0844; opacity: 0.050}


/* ------------------------
    Timeline
------------------------*/
.timeline {position: relative; margin: 0 auto;}
.timeline:after {content: ''; position: absolute; width: 5px; background: #fafaff; left: 50%; top: 0; bottom: 0; margin-left: -2px;}
.timeline--first:after {top: 20px;}
.timeline-title {text-align: center; position: relative; z-index: 1; padding-bottom: 20px;}
.timeline-title h2 {background: #ffffff; color: #351B44; display: inline-block; padding: 10px 20px; border-radius: 7px; font-size: 24px; line-height: 30px;}
.timeline-inner {padding: 10px 30px 40px 30px; width: 50%; position: relative; background-color: inherit;}
.timeline-right {margin-left: 50%;}
.timeline-content {padding: 20px 30px; background: #ffffff; position: relative; border-radius: 7px;}
.timeline-content h3{font-size: 20px; color: #1c1d3e; font-weight: bold;}
.timeline-inner::before {content: ""; display: block; position: absolute; top: 0; right: -16px; margin: auto; height: 32px; width: 32px; border: 3px solid #351B44; border-bottom: 3px solid transparent !important; border-radius: 50%; z-index: 9; background: #ffffff;
-webkit-animation: loader-3-1 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; animation: loader-3-1 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;}
.timeline-inner::after {content: ""; position: absolute; top: 0; right: -3px; margin: auto; width: 6px; height: 6px; background: #005bea; border-radius: 50%; z-index: 9;
-webkit-animation: loader-3-2 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite; animation: loader-3-2 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;}
.timeline-right.timeline-inner::before{right: inherit; left: -16px;}
.timeline-right.timeline-inner::after{right: inherit; left: -3px;}
.timeline-content:before, .timeline-content:after{content: ""; background: #351B44; border-radius: 7px; width: 0; height: 3px; position: absolute;}
.timeline-content:before{top: 0; left: 0;}
.timeline-content:after{bottom: 0; right: 0;}
.timeline-inner:hover .timeline-content:before, .timeline-inner:hover .timeline-content:after{width: 10%;}


/* ------------------------
    Other
------------------------*/
#canvas {width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0.5;}
#confetti {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.blink-img{position: absolute; left: 50%; top: 50%; width: 100%;}
.morph-wrap {position: absolute; top: 0; left: -20%; bottom: 0; width: 70%; pointer-events: none; z-index: -1; transform: rotate(-90deg);}
.morph {position: relative; height: 130%; fill: #ffe2e1; flex: none; width: 150%;}
.login-form img{height: 100px;}
.remember-checkbox label{margin-bottom: 0;}
.round-shape {position: absolute; right: 10%; bottom: 0; height: 300px; width: 300px; border-radius: 50%; background: none; border:50px solid #351B44; animation: heartbeat 0.5s cubic-bezier(0.245, 0.325, 0.51, 1.305) infinite alternate; opacity: 0.050;}

.custom-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

.custom-content-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.custom-video-box {
  flex: 1 1 55%;
  min-width: 280px;
}

.custom-video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.custom-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.custom-right-side {
  flex: 1 1 40%;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.custom-email-section {
  display: flex;
  gap: 10px;
}

.custom-email-input {
  flex-grow: 1;
  padding: 10px 15px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.custom-send-button {
  padding: 10px 25px;
  font-size: 1rem;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

.custom-send-button:hover {
  background-color: #0056b3;
}

.custom-demo-request {
  padding: 20px;
  border: 1px solid #007bff;
  border-radius: 6px;
  text-align: center;
}

.custom-demo-title {
  margin-bottom: 10px;
}

.custom-demo-text {
  margin-bottom: 20px;
  color: #555;
}

.custom-demo-button {
  padding: 10px 30px;
  font-size: 1rem;
  border: none;
  background-color: #28a745;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

.custom-demo-button:hover {
  background-color: #1e7e34;
}

/* Responsive */
@media (max-width: 768px) {
  .custom-content-wrapper {
    flex-direction: column;
  }

  .custom-video-box,
  .custom-right-side {
    flex: 1 1 100%;
  }
}

/* office section */

.office-section {
  max-width: 1200px;
  margin: 60px auto 0 auto;
  padding: 0 20px 20px;
}

.office-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 40px;
  font-family: 'Montserrat', Arial, sans-serif;
}

.office-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.office-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 30px -5px #dde6f7, 0 1.5px 5px -2px #bbbbbb;
  border: 1px solid #f0f4fa;
  padding: 28px 22px 22px 22px;
  transition: box-shadow 0.2s;
  font-size: 1.07rem;
}

.office-card:hover {
  box-shadow: 0 10px 40px -8px #e7f0fc, 0 3px 8px -4px #aaa;
  transform: translateY(-4px) scale(1.01);
}

.office-header {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2B3A67;
  margin-bottom: 16px;
  letter-spacing: 0.7px;
  font-family: 'Montserrat', Arial, sans-serif;
}

.office-body {
  color: #444;
  line-height: 1.6;
  font-family: 'Roboto', Arial, sans-serif;
}

@media (max-width: 800px) {
  .office-title {
    font-size: 2rem;
  }
  .office-section {
    padding: 0 10px;
  }
  .office-grid {
    gap: 19px;
  }
  .office-card {
    padding: 22px 13px 14px 13px;
  }
}

.img-fit-box {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.icon-lg {
  width: 48px;
  height: 48px;
  stroke-width: 1.8;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

#features {
  padding: 3em 1.5em;
  background: #fff;
}

.features-header h1 {
  text-align: center;
  font-size: 2.5em;
  margin-bottom: 1.5em;
  font-weight: 700;
  color: #070024;
}

.features-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5em;
}

.feature-col {
  flex: 1 1 100%;
  max-width: 100%;
}

@media screen and (min-width: 768px) {
  .feature-col {
    flex: 1 1 48%;
    max-width: 48%;
  }
}

@media screen and (min-width: 992px) {
  .feature-col {
    flex: 1 1 30%;
    max-width: 30%;
  }
}

/* Card */
.feature-card {
  padding: 2em 1.5em;
  text-align: center;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 0.75em;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: 0.4s ease;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Hover effect */
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(57, 126, 246, 0.2);
  border-color: #397ef6;
}

/* Icon */
.feature-card .icon {
  font-size: 1.6em;
  height: 3em;
  width: 3em;
  margin: 0 auto 1em auto;
  background: #397ef6;
  color: #fff;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

/* Title */
.feature-card h3 {
  font-size: 1.1em;
  margin-bottom: 0.8em;
  font-weight: 600;
  color: #070024;
}

/* Description */
.feature-card p {
  font-size: 0.9em;
  line-height: 1.6em;
  color: #625a71;
}

/* Contact Section */
#contact {
  padding: 3em 1em;
  background: #f9fbff;
}

.contact-container {
  max-width: 900px;
  margin: auto;
  text-align: center;
}

#contact h2 {
  font-size: 2.5em;
  color: #070024;
  margin-bottom: 0.5em;
}

.contact-subtitle {
  font-size: 1em;
  color: #625a71;
  margin-bottom: 2em;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}

.form-row {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

.form-row input {
  flex: 1;
  min-width: 250px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.9em 1em;
  border: 1px solid #d1d5db;
  border-radius: 0.5em;
  font-size: 1em;
  transition: border 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #397ef6;
  box-shadow: 0 0 8px rgba(57, 126, 246, 0.2);
}

.btn-submit {
  background: #397ef6;
  color: #fff;
  padding: 0.9em 2em;
  border: none;
  border-radius: 2em;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s;
}

.btn-submit i {
  margin-right: 0.5em;
}

.btn-submit:hover {
  background: #265ecf;
  transform: translateY(-2px);
}

/* clients logos */
.clients-carousel {
  overflow: hidden;
  width: 100%;
  background: #f9f9f9;
  padding: 80px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.clients-heading {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 70px;
  color: #222;
}

.row-carousel {
  display: flex;
  white-space: nowrap;
  animation: scrollRight 35s linear infinite;
  margin: 40px 0;  /* more gap between rows */
}

.row-carousel.reverse {
  animation: scrollLeft 35s linear infinite;
}

.logos {
  display: flex;
  gap: 40px;   /* space between all images */
}

.logos img {
  height: 60px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.8;
  transition: 0.3s;
}

.logos img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

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

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


/* Container for certificates */
.cert-container {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 6px;
}

/* Base style for all certificate images */
.cert-img {
  object-fit: contain;
  flex-shrink: 0;
  filter: brightness(1.15) contrast(1.15);
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Hover effect */
.cert-img:hover {
  transform: scale(1.08);
  filter: brightness(1.3);
}

/* Pattern sizes — descending */
.cert-1 {
  height: 120px;
}
.cert-2 {
  height: 70px;
}
.cert-3 {
  height: 70px;
}
.cert-4 {
  height: 60px;
}
.cert-5 {
  height: 40px;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .cert-1 {
    height: 120px;
  }
  .cert-2 {
    height: 75px;
  }
  .cert-3 {
    height: 60px;
  }
  .cert-4 {
    height: 50px;
  }
  .cert-5 {
    height: 38px;
  }
}

@media (max-width: 576px) {
  .cert-1 {
    height: 75px;
  }
  .cert-2 {
    height: 60px;
  }
  .cert-3 {
    height: 50px;
  }
  .cert-4 {
    height: 40px;
  }
  .cert-5 {
    height: 32px;
  }
}


    .img-lift {
    display: block;
    border-radius: 12px;
    filter: drop-shadow(0 25px 40px rgba(0,0,0,0.4));
    transition: transform 0.4s ease, filter 0.4s ease;
  }
  .img-lift:hover {
    transform: translateY(-10px);
    filter: drop-shadow(0 35px 60px rgba(0,0,0,0.5));
  }

    /* Make the image appear larger and slightly lifted */
  .big-img {
    max-width: 110%; /* a bit larger than the column */
    transform: scale(1.1);
  }
  /* optional: adjust on small screens so it doesn't overflow */
  @media (max-width: 768px) {
    .big-img {
      max-width: 100%;
      transform: none;
    }
  }

    .big-phone {
    max-width: 120%; /* wider */
    transform: scale(1.2); /* taller and bigger */
    margin-top: 10px;
  }

  /* Make sure it resets on small screens */
  @media (max-width: 768px) {
    .big-phone {
      max-width: 100%;
      transform: none;
    }
  }

  /* Scale whole section */
  #team {
    transform: scale(0.85);
    transform-origin: center;
    padding: 20px 0;
  }

  /* Scale whole section */
  #team {
    transform: scale(0.85);
    transform-origin: center;
    padding: 20px 0;
  }

  /* Team member images smaller */
  #team .team-images img {
    max-width: 250px;  /* desktop */
    height: auto;
    margin: 0 auto;
    display: block;
  }

  /* Scale down whole team description */
  #team .team-description {
    transform: scale(0.8);     /* shrink entire description */
    transform-origin: top center;
    margin-top: 10px;
  }

  /* Responsive for mobile */
  @media (max-width: 767px) {
    #team .team-images img {
      max-width: 160px;
    }
    #team .team-description {
      transform: scale(0.7);   /* smaller on mobile */
    }
  }

.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 103px;        /* distance from bottom */
  right: 20px;           /* distance from right */
  background-color: #25D366;
  border-radius: 50%;
  text-align: center;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  z-index: 1000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: subtle-pulse 2s infinite;
}

/* Center WhatsApp icon */
.whatsapp-float img {
  width: 35px;
  height: 35px;
  margin-top: 12px;
}

/* Hover effect */
.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 2px 2px 10px rgba(0,0,0,0.4);
}

/* Minimal pulse effect */
@keyframes subtle-pulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(37, 211, 102, 0.6);
  }
  50% {
    box-shadow: 0 0 15px rgba(37, 211, 102, 0.9);
  }
}

.phone-full {
  height: 100%;
  max-height: 600px;
  object-fit: contain;
}

/* =============================
   Accordion Base
============================= */
/* Accordion Button */
/* Accordion Button */
/* Base accordion styles */
.accordion-button {
  font-weight: 600;
  transition: all 0.3s ease;
  background: #fff;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  margin-bottom: 10px;
  position: relative;
  padding: 14px 20px;
  z-index: 2;
}

.accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, #e8f0ff, #ffffff);
  color: #0d6efd;
  box-shadow: 0 4px 10px rgba(13,110,253,0.15);
  transform: scale(1.01);
}

/* Icons: + / - toggle */
.accordion-button::after {
  content: "\2795"; /* ➕ */
  font-size: 1rem;
  color: #0d6efd;
}

.accordion-button:not(.collapsed)::after {
  content: "\2796"; /* ➖ */
  transform: rotate(180deg);
}

/* Button icons */
.accordion-button i {
  font-size: 1.3rem;
  margin-right: 10px;
}

/* Accordion Body & List */
.accordion-body {
  padding: 15px 25px 20px;
  background-color: #fafbff;
  border-left: 3px solid #0d6efd;
  border-radius: 0 0 10px 10px;
}

.accordion-body ul {
  list-style: none;
  padding-left: 0;
}

.accordion-body li {
  position: relative;
  padding-left: 35px;
  margin-bottom: 10px;
  line-height: 1.6;
  text-align: justify;
}

/* >>> bullets for list items, static */
.accordion-body li::before {
  content: ">>>";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: bold;
  font-size: 1rem;
}

/* Color per section */
.arrow-blue li::before { color: #0d6efd; }
.arrow-red li::before { color: #dc3545; }
.arrow-green li::before { color: #198754; }
.arrow-yellow li::before { color: #ffc107; }
.arrow-info li::before { color: #0dcaf0; }
.arrow-secondary li::before { color: #6c757d; }

/* Accordion container */
.accordion-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}




.demo-btn {
    background-color: #007bff;
    border: none;
    color: #fff;
    font-weight: 500;
    transition: all 0.3s ease;
  }

  .demo-btn:hover {
    background-color: #0056b3;
    transform: scale(1.05);
  }

  /* Default Logo Size */
  .logo-img {
    max-height: 65px;
    transition: all 0.3s ease;
  }

  /* Responsive adjustments */
  @media (max-width: 991px) {
    .logo-img {
      max-height: 45px;
    }

    .demo-btn {
      padding: 6px 16px;
      font-size: 14px;
    }
  }

  @media (max-width: 575px) {
    .logo-img {
      max-height: 38px;
    }

    .demo-btn {
      padding: 5px 14px;
      font-size: 13px;
    }
  }

  .list-unstyled li a{
    color: #fff  
  }

    .list-unstyled li a:hover{
    color: #fff  
  }

  img.cert-img{
    size: 100px;
  }



  /* =========================================
   Footer Styling (Two-Row Layout)
========================================= */

/* Top row – logo + certificates */
/* Footer container */
.footer {
  background: #0a0a0a;
  color: #ddd;
  font-size: 0.95rem;
  line-height: 1.6;
}
.footer h5 {
  letter-spacing: 0.5px;
}

/* Top row – logo + certificates */
.footer-logo {
  max-height: 70px; /* desktop size */
  filter: brightness(1.15) contrast(1.15);
  transition: max-height 0.3s ease;
}

.cert-container {
  display: flex;
  flex-wrap: nowrap; /* desktop: one row */
  align-items: center;
  gap: 18px;
  justify-content: flex-start;
  transition: all 0.3s ease;
}

.cert-img {
  height: 70px; /* desktop size */
  width: auto;
  object-fit: contain;
  transition: all 0.3s ease;
}

/* Hover effect */
.cert-img:hover {
  transform: scale(1.08);
}

/* Quick Links */
.footer-list li {
  margin-bottom: 8px;
}
.footer-list a {
  color: #ccc;
  text-decoration: none;
  transition: 0.3s;
}
.footer-list a:hover {
  color: #0dcaf0;
  padding-left: 4px;
}

/* LinkedIn button */
.linkedin-btn {
  display: inline-flex;
  align-items: center;
  background: #0a66c2;
  color: #fff;
  padding: 10px 22px;
  border-radius: 50px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}
.linkedin-btn:hover {
  background: #084d99;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.25);
}

/* Footer bottom row */
.footer-bottom {
  margin-top: 30px;
}

/* Divider */
.footer hr {
  border-color: rgba(255,255,255,0.25);
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .footer-logo {
    max-height: 60px;
  }
  .cert-container {
    gap: 12px;
    justify-content: center; /* center on smaller screens */
    flex-wrap: wrap; /* wrap to fit screen */
  }
  .cert-img {
    height: 50px; /* shrink certificates */
  }
  .footer-list,
  .footer-bottom {
    text-align: center;
  }
}

@media (max-width: 576px) {
  .footer-logo {
    max-height: 50px;
  }
  .cert-img {
    height: 40px; /* smallest */
  }
  .cert-container {
    gap: 10px;
  }

}

/* Custom gap override if used */
.gap-3 {
  gap: 6rem !important;
}

/* popup form */
  /* Popup overlay */


/* Overlay & Popup */
.demo-popup-overlay, .demo-success-popup {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.45);
  justify-content: center; align-items: center;
  z-index: 9999;
}

.demo-popup-content, .demo-success-content {
  background: #fff;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  padding: 20px;
  box-shadow: 0 6px 25px rgba(0,0,0,0.15);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.demo-close-btn {
  position: absolute;
  top: 5px; right: 10px;
  font-size: 30px;
  color: #555;
  cursor: pointer;
}
.demo-close-btn:hover { color: #000; }

.demo-popup-title { text-align:center; font-size:2.5rem; margin:0; }
.demo-popup-text{
  color: #070024;
  text-align: center;
}

/* Form Grid */
.demo-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media(max-width:500px){
  .demo-form-grid { grid-template-columns: 1fr; }
}

.demo-input, .demo-select, .demo-textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.3s;
}
.demo-input:focus, .demo-select:focus, .demo-textarea:focus { border-color: #0077ff; }

.demo-textarea { height: 120px; resize: none; }

.demo-full-width {
  grid-column: span 2;
  margin-top: 10px;
}

.demo-checkbox-container {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 0.75rem;
  color: #555;
  margin: 6px 0;
}
.demo-checkbox-container input { width:auto; margin-top:2px; }

.demo-button {
  width: 100%;
  padding: 10px;
  background: #0077ff;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  font-size: 0.95rem;
  margin-top: 6px;
}
.demo-button:hover { background:#005fd6; }


/* === Prevent Owl Carousel height jump === */

/* Base: Desktop */
#clients .carousel-inner {
  height: 100%;
  display: flex;
  align-items: center;
}

#clients .carousel-item {
  min-height: 720px; /* desktop height */
}

/* Tablets (768px - 991px) */
@media (max-width: 991px) {
  #clients .carousel-item {
    min-height: 880px; /* adjust to fit smaller screens */
  }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
  #clients .carousel-item {
    min-height: 880px; /* adjust for mobile */
  }
  
  #clients .testimonial-content p {
    font-size: 14px; /* optional: smaller text for mobile */
  }
  
  #clients .testimonial-caption h5 {
    font-size: 16px; /* optional: scale down heading */
  }
}

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css");

/* SECTION BASE */
.pricing-hero {
  background: linear-gradient(135deg, #f8faff 0%, #e4ebff 50%, #cfd8ff 100%);
  color: #1c1d3e;
  text-align: center;
  padding: 120px 20px;
  font-family: "Inter", sans-serif;
  position: relative;
  overflow: hidden;
}

/* ANIMATED GLOW OVERLAY */
.pricing-hero::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  background: radial-gradient(circle at 30% 40%, rgba(90, 200, 250, 0.15), transparent 70%),
              radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.2), transparent 75%);
  animation: floatBg 8s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes floatBg {
  0% { transform: translate(0, 0); }
  100% { transform: translate(4%, 4%); }
}

.pricing-container {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* HEADING */
.pricing-hero h1 {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 15px;
  color: #1c1d3e; /* brand color */
}

.pricing-hero h1 span {
  color: #5ac8fa; /* accent highlight */
}

/* PARAGRAPH */
.pricing-hero p {
  color: #3a3b65;
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 15px 0 45px;
}

/* BUTTON */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 2px solid #1c1d3e;
  color: #1c1d3e;
  padding: 14px 35px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s ease;
  background: transparent;
}

.btn-outline:hover {
  background: #1c1d3e;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(28, 29, 62, 0.3);
}

/* FEATURES */
.pricing-features {
  display: flex;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
  margin-top: 60px;
  font-size: 1rem;
}

.pricing-features div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1c1d3e;
  background: rgba(255, 255, 255, 0.7);
  padding: 12px 22px;
  border-radius: 8px;
  transition: 0.3s;
  box-shadow: 0 3px 8px rgba(28, 29, 62, 0.08);
}

.pricing-features div:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(28, 29, 62, 0.15);
}

.pricing-features i {
  color: #5ac8fa;
  font-size: 1.2rem;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .pricing-hero h1 {
    font-size: 2.4rem;
  }

  .pricing-hero p {
    font-size: 1rem;
  }

  .pricing-features {
    flex-direction: column;
    align-items: center;
  }

  .btn-outline {
    padding: 12px 28px;
  }
}


/* Full-Screen YouTube Video Section */
/* Video Section Heading */
#video-section {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 50px 20px;
  text-align: center;
}

#video-section .video-heading h2 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #333;
}

#video-section .video-heading p {
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 30px;
}

/* Video Container */
@element iframe {
  $this {
    width: 100%;
    height: calc(100ew / eval("width/height"));
  }
}